293 lines
11 KiB
HTML
293 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="Content-Security-Policy"
|
|
content="default-src 'none'; connect-src 'self' ws: wss:; script-src 'self'; script-src-elem 'self'; script-src-attr 'unsafe-inline'; style-src 'self' fonts.googleapis.com; img-src http: https: data:; media-src *; font-src 'self' fonts.gstatic.com; child-src 'none';" />
|
|
|
|
<title>Damus</title>
|
|
<link rel="stylesheet" href="css/vars.css?v=1">
|
|
<link rel="stylesheet" href="css/utils.css?v=1">
|
|
<link rel="stylesheet" href="css/styles.css?v=13">
|
|
<link rel="stylesheet" href="css/responsive.css?v=10">
|
|
<script defer src="js/ui/safe-html.js?v=1"></script>
|
|
<script defer src="js/util.js?v=5"></script>
|
|
<script defer src="js/ui/util.js?v=8"></script>
|
|
<script defer src="js/ui/render.js?v=15"></script>
|
|
<script defer src="js/ui/state.js?v=1"></script>
|
|
<script defer src="js/ui/fmt.js?v=1"></script>
|
|
<script defer src="js/noble-secp256k1.js?v=1"></script>
|
|
<script defer src="js/bech32.js?v=1"></script>
|
|
<script defer src="js/nostr.js?v=7"></script>
|
|
<script defer src="js/core.js?v=1"></script>
|
|
<script defer src="js/model.js?v=1"></script>
|
|
<script defer src="js/contacts.js?v=1"></script>
|
|
<script defer src="js/event.js?v=1"></script>
|
|
<script defer src="js/unknowns.js?v=1"></script>
|
|
<script defer src="js/lib.js?v=1"></script>
|
|
<script defer src="js/main.js?v=1"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container-busy">
|
|
<div class="loader" title="Loading...">
|
|
<img class="dark-invert" src="icon/loader-fragment.svg"/>
|
|
</div>
|
|
</div>
|
|
<div id="container-welcome" class="hide">
|
|
<div class="hero-box">
|
|
<div class="padded">
|
|
<h1>
|
|
Yo, Sup?
|
|
<img class="icon svg" src="icon/logo-inverted.svg"/>
|
|
</h1>
|
|
<p>Damus Web, the blue bird experience for Nostr.</p>
|
|
<button class="action" onclick="signin()">
|
|
Sign In with Key
|
|
<img src="./icon/key.svg" class="icon svg small invert"/>
|
|
</button>
|
|
<br/>
|
|
<br/>
|
|
<button class="btn-text" onclick="open_faqs()">
|
|
What's Nostr?
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container-app" class="hide">
|
|
<nav id="gnav" class="">
|
|
<button class="icon" role="open-gnav" title="Open Menu" onclick="toggle_gnav(this)">
|
|
<img class="icon svg invert" src="icon/logo.svg"/>
|
|
</button>
|
|
<button class="icon" role="home" title="Home" onclick="switch_view('friends')">
|
|
<img class="icon svg invert" src="icon/home.svg"/>
|
|
</button>
|
|
<button class="icon" role="explore" title="Explore" onclick="switch_view('explore')">
|
|
<img class="icon svg invert" src="icon/explore.svg"/>
|
|
</button>
|
|
<button class="icon" role="notifications" title="Notifications" onclick="switch_view('notifications')">
|
|
<img class="icon svg invert" src="icon/notifications.svg"/>
|
|
<div class="new-notifications hide"></div>
|
|
</button>
|
|
<button class="icon" role="sign-out" title="Sign Out" onclick="press_logout()">
|
|
<img class="icon svg invert" src="icon/sign-out.svg"/>
|
|
</button>
|
|
</nav>
|
|
|
|
<div id="container">
|
|
<div class="flex-fill vertical-hide"></div>
|
|
<div id="nav" class="flex-noshrink vertical-hide">
|
|
<div data-active="home">
|
|
<div id="app-icon-logo">
|
|
<img class="icon svg" title="Damus" src="icon/logo-inverted.svg"/>
|
|
</div>
|
|
<button role="home" class="nav icon"
|
|
title="Home" onclick="switch_view('friends')">
|
|
<img class="icon svg inactive" src="icon/home.svg"/>
|
|
<img class="icon svg active" src="icon/home-active.svg"/>
|
|
</button>
|
|
<button role="explore" class="nav icon"
|
|
title="Explore" onclick="switch_view('explore')">
|
|
<img class="icon svg inactive" src="icon/explore.svg"/>
|
|
<img class="icon svg active" src="icon/explore-active.svg"/>
|
|
</button>
|
|
<button role="notifications" class="nav icon"
|
|
title="Notifications" onclick="switch_view('notifications')">
|
|
<img class="icon svg inactive" src="icon/notifications.svg"/>
|
|
<img class="icon svg active" src="icon/notifications-active.svg"/>
|
|
<div class="new-notifications hide"></div>
|
|
</button>
|
|
<button title="Sign Out" class="nav icon" onclick="press_logout()">
|
|
<img class="icon svg" src="icon/sign-out.svg"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="view">
|
|
<div>
|
|
<header>
|
|
<label>Home</label>
|
|
</header>
|
|
<div id="newpost">
|
|
<div class="my-userpic vertical-hide">
|
|
<!-- To be loaded dynamically. -->
|
|
</div>
|
|
<div>
|
|
<textarea placeholder="What's up?"
|
|
oninput="post_input_changed(this)"
|
|
class="post-input" id="post-input"></textarea>
|
|
<div class="post-tools">
|
|
<input id="content-warning-input" class="cw hide" type="text" placeholder="Reason"/>
|
|
<button title="Mark this message as sensitive."
|
|
onclick="toggle_cw(this)" class="cw icon">
|
|
<img class="icon svg small" src="icon/content-warning.svg"/>
|
|
</button>
|
|
<button onclick="send_post(this)" class="action"
|
|
role="send" id="post-button" disabled>Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div role="profile-info" class="bottom-border hide">
|
|
<div class="flex">
|
|
<img role="profile-image" class="pfp jumbo"
|
|
src="./icon/no-user.svg"
|
|
onerror="this.src='./icon/no-user.svg';"/>
|
|
<div class="profile-tools">
|
|
<!--
|
|
<button class="icon" title="Message User" role="message-user">
|
|
<img class="icon" src="icon/message-user.svg"/></button>
|
|
-->
|
|
<button class="icon" role="copy-pk"
|
|
data-pk="" onclick="click_copy_pk(this)" title="Copy Public Key">
|
|
<img class="icon svg" src="icon/pubkey.svg"/></button>
|
|
<button class="action" role="follow-user" data-pk=""
|
|
onclick="click_toggle_follow_user(this)">Follow</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label role="profile-nip5"></label>
|
|
<p role="profile-desc"></p>
|
|
</div>
|
|
</div>
|
|
<div class="loading-events">
|
|
<div class="loader" title="Loading...">
|
|
<img class="dark-invert" src="icon/loader-fragment.svg"/>
|
|
</div>
|
|
</div>
|
|
<div id="show-new" class="show-new bottom-border hide">
|
|
<button onclick="show_new()">
|
|
Show New (<span role="count">0</span>)</button>
|
|
</div>
|
|
<div id="timeline" class="events"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-fill vertical-hide"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal closed" id="media-preview">
|
|
<div class="media-container">
|
|
<img onclick="close_media_preview()" src=""/>
|
|
</div>
|
|
<!-- TODO add loader to media preview -->
|
|
</div>
|
|
|
|
<div class="modal closed" id="reply-modal">
|
|
<div id="reply-modal-content" class="modal-content">
|
|
<header>
|
|
<label>Reply To</label>
|
|
<button class="icon" onclick="close_reply()">
|
|
<img class="icon svg" src="icon/close-modal.svg"/>
|
|
</button>
|
|
</header>
|
|
<div id="replying-to"></div>
|
|
<div id="replybox">
|
|
<textarea id="reply-content" class="post-input" oninput="post_input_changed(this)"
|
|
placeholder="Write your reply here..."></textarea>
|
|
<div class="post-tools">
|
|
<button id="reply-button" class="action" onclick="do_send_reply()">
|
|
Reply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="faqs" class="modal scrollable closed">
|
|
<button class="icon modal-floating-close-btn" onclick="close_modal(this)">
|
|
<img class="icon svg" src="icon/close-modal.svg"/>
|
|
</button>
|
|
<div class="page-content">
|
|
<h1>Welcome to Nostr</h1>
|
|
<p>The open social network for "literally" everyone.</p>
|
|
|
|
<h2>What is Nostr?</h2>
|
|
<p>
|
|
Nostr is a protocol, not a platform or an app. This means that
|
|
users can pick and choose which clients (apps) to use and which
|
|
relays (servers) they wish to connect to.
|
|
</p>
|
|
<p>Nostr uses encryption to validate content authors. This means
|
|
that there is no centralized account system. We use
|
|
<a href="https://en.wikipedia.org/wiki/Public-key_cryptography"
|
|
target="_blank">public & private</a> keys to sign our
|
|
content when we post. Do not confuse this with blockchain
|
|
technology.
|
|
</p>
|
|
<p>
|
|
Nostr stands for "Notes and Other Stuff Transmitted by Relays".
|
|
</p>
|
|
<p>
|
|
Read more about the protocol <a
|
|
href="https://github.com/nostr-protocol/nostr"
|
|
target="_blank">here</a>.
|
|
</p>
|
|
|
|
<h2>Apps</h2>
|
|
<p>
|
|
You are using one right now! You just haven't signed in yet to see
|
|
the actual application. Close this modal to sign in with your key.
|
|
</p>
|
|
<p>
|
|
A rich app ecosystem for Nostr. Anyone can build an app for the
|
|
protocol that fits their needs. This is the best option for users
|
|
as everyone has their own style. Another benifit is that you can
|
|
use multiple apps with the same account.
|
|
</p>
|
|
<p>
|
|
Since there are many apps for Nostr it allows developers to focus
|
|
on building certain experiences. Some apps may offer features that
|
|
others don't, such as direct messages, content viewing methods,
|
|
etc. You are allowed to choose how you want to interact with
|
|
Nostr.
|
|
</p>
|
|
<h3>Pick One</h3>
|
|
<p>
|
|
Here are a list of (trusted) apps that work with Nostr. Pick one
|
|
that fits you.
|
|
</p>
|
|
<ul>
|
|
<li><a href="https://damus.io" target="_blank">Damus</a> (iOS)</li>
|
|
<li><a href="https://github.com/fiatjaf/noscl" target="_blank">noscl</a> (Linux, Windows, MacOS)</li>
|
|
</ul>
|
|
|
|
<h3>Web Apps Warning</h3>
|
|
<p>
|
|
While the web is great for accessibility and is cross platform, it
|
|
is riddled with security implications you should be aware of. The
|
|
browser is susceptible to cross-site scripting (<a
|
|
href="https://en.wikipedia.org/wiki/Cross-site_scripting"
|
|
target="_blank">XSS</a>) attacks and extension malware. Therefore
|
|
you should be sure any web app you use is audited and trusted.
|
|
Additionally be aware of what apps you are using.
|
|
</p>
|
|
<p>
|
|
Secondly it is recommended you use a browser extension to handle
|
|
your Nostr key(s). This will delegate the signing process to an
|
|
extension that a XSS attack can't access. This is where native apps
|
|
have a stronger use case, but you should equally trust those as
|
|
well.
|
|
</p>
|
|
|
|
<h2>Relays</h2>
|
|
<p>
|
|
Relays are points of connection, a server. They allow you to read
|
|
events (content) and write to it depending on it's configuration.
|
|
Some may be read only, others may require some sort of payment to
|
|
use. Some may simply clone other relays.
|
|
</p>
|
|
<p>
|
|
Relays allow for specific needs and niches. You can host your
|
|
own relay for your club or community (such as gaming, art, sciences,
|
|
etc.) Or you can build your own relay with your own logic that
|
|
dictates who can access what and how. This is great for all kinds
|
|
of use cases for a range of users from individuals to businesses.
|
|
</p>
|
|
|
|
<h2>Account Creation</h2>
|
|
<p>You need to use a CLI tool. TODO fill this out.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|