312 lines
11 KiB
HTML
312 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 name="theme-color" content="#0f0f0f"/>
|
|
<meta http-equiv="Content-Security-Policy"
|
|
content="default-src 'none'; manifest-src 'self'; connect-src 'self' ws: wss:; script-src 'self'; script-src-elem 'self'; script-src-attr 'none'; style-src 'self' fonts.googleapis.com; img-src http: https: data:; media-src *; font-src 'self' fonts.gstatic.com; child-src 'none';" />
|
|
<title>Yo, Sup</title>
|
|
<link rel="manifest" href="pwa/manifest.json"/>
|
|
<link rel="icon" href="icon/icon.svg" type="image/svg+xml"/>
|
|
<link rel="apple-touch-icon" href="pwa/icon-256.png"/>
|
|
<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/ui/profile.js?v=1"></script>
|
|
<script defer src="js/ui/settings.js?v=1"></script>
|
|
<script defer src="js/ui/dm.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/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>The blue bird experience for Nostr.</p>
|
|
<button class="action" action="sign-in">
|
|
Sign In with Key
|
|
<img src="./icon/key.svg" class="icon svg small invert"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container-app" class="hide">
|
|
<nav id="gnav">
|
|
<button class="icon" action="toggle-gnav" title="Open Menu">
|
|
<img class="icon svg invert" src="icon/logo.svg"/>
|
|
</button>
|
|
<button class="icon" action="open-view" data-view="friends" title="Home">
|
|
<img class="icon svg invert" src="icon/home.svg"/>
|
|
</button>
|
|
<button class="icon" action="open-view" data-view="explore" title="Explore">
|
|
<img class="icon svg invert" src="icon/explore.svg"/>
|
|
</button>
|
|
<button class="icon" action="open-view" data-view="dm" title="Direct Messages">
|
|
<img class="icon svg invert" src="icon/messages.svg"/>
|
|
<div class="new-notifications hide" role="dm"></div>
|
|
</button>
|
|
<button class="icon" action="open-view" data-view="notifications" title="Notifications">
|
|
<img class="icon svg invert" src="icon/notifications.svg"/>
|
|
<div class="new-notifications hide" role="activity"></div>
|
|
</button>
|
|
<button class="icon" action="open-view" data-view="settings" title="Settings">
|
|
<img class="icon svg invert" src="icon/settings.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 action="open-view" data-view="friends" class="nav icon"
|
|
title="Home">
|
|
<img class="icon svg inactive" src="icon/home.svg"/>
|
|
<img class="icon svg active" src="icon/home-active.svg"/>
|
|
</button>
|
|
<button action="open-view" data-view="explore" class="nav icon"
|
|
title="Explore"> <img class="icon svg inactive" src="icon/explore.svg"/>
|
|
<img class="icon svg active" src="icon/explore-active.svg"/>
|
|
</button>
|
|
<button action="open-view" data-view="dm" class="nav icon"
|
|
title="Direct Messages">
|
|
<img class="icon svg inactive" src="icon/messages.svg"/>
|
|
<img class="icon svg active" src="icon/messages-active.svg"/>
|
|
<div class="new-notifications hide" role="dm"></div>
|
|
</button>
|
|
<button action="open-view" data-view="notifications"
|
|
class="nav icon" title="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" role="activity"></div>
|
|
</button>
|
|
<button action="open-view" data-view="settings"
|
|
title="Settings" class="nav icon">
|
|
<img class="icon svg inactive" src="icon/settings.svg"/>
|
|
<img class="icon svg active" src="icon/settings-active.svg"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="view">
|
|
<div>
|
|
<header>
|
|
<label>Home</label>
|
|
<div id="header-tools">
|
|
<button class="action small bordered"
|
|
action="toggle-hide-replys">
|
|
Show Replys
|
|
</button>
|
|
<button class="action small bordered hide"
|
|
disabled action="mark-all-read">
|
|
Mark All Read
|
|
</button>
|
|
<img class="pfp hide" role="their-pfp" data-pubkey=""
|
|
src="icon/no-user.svg"/>
|
|
<img class="pfp hide" role="my-pfp" data-pubkey=""
|
|
src="icon/no-user.svg"/>
|
|
</div>
|
|
</header>
|
|
<div id="newpost">
|
|
<textarea placeholder="What's up?"
|
|
class="post-input" id="post-input"></textarea>
|
|
<div class="post-tools">
|
|
<input id="content-warning-input" class="cw hide"
|
|
type="text" placeholder="Reason"/>
|
|
<button class="cw icon" role="toggle-cw"
|
|
title="Mark this message as sensitive.">
|
|
<img class="icon svg small"
|
|
src="icon/content-warning.svg"/>
|
|
</button>
|
|
<button class="action" role="send"
|
|
id="post-button" disabled>Send</button>
|
|
</div>
|
|
</div>
|
|
<div id="profile-info" role="profile-info" class="bottom-border hide">
|
|
<div class="flex">
|
|
<img role="profile-image" class="pfp jumbo"/>
|
|
<div class="profile-tools">
|
|
<button class="icon" role="message-user"
|
|
title="Directly Message">
|
|
<img class="icon svg" src="icon/message-user.svg"/>
|
|
</button>
|
|
<button class="icon hide" role="edit-profile"
|
|
title="Edit Profile">
|
|
<img class="icon svg" src="icon/edit-profile.svg"/></button>
|
|
<button class="icon" role="copy-pk"
|
|
data-pk="" title="Copy Public Key">
|
|
<img class="icon svg" src="icon/pubkey.svg"/></button>
|
|
<button class="action" role="follow-user"
|
|
data-pk="">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 action="show-timeline-new">
|
|
Show New (<span role="count">0</span>)</button>
|
|
</div>
|
|
<div id="dms-not-available" class="hide">
|
|
DMs could not be decrypted due to lack of nip04
|
|
integration. Please use an extension such as nos2x or
|
|
Alby.
|
|
</div>
|
|
<div id="dms" class="hide">
|
|
</div>
|
|
<div id="timeline" class="events"></div>
|
|
<div id="settings" class="hide">
|
|
<section>
|
|
<header>
|
|
<label>Relays</label>
|
|
<button id="add-relay" class="btn-text">
|
|
<img class="svg icon small" src="icon/add-relay.svg"/>
|
|
</button>
|
|
</header>
|
|
<table id="relay-list" class="row">
|
|
<thead>
|
|
<tr>
|
|
<td>Address</td>
|
|
<td>Option</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
<section>
|
|
<header><label>Miscellanious</label></header>
|
|
<div class="row">
|
|
<label>
|
|
Show Embeds From Everyone
|
|
<input type="checkbox" name="show_embeds"/>
|
|
<label>
|
|
</div>
|
|
<div class="row">
|
|
<button class="action" role="sign-out">
|
|
Sign Out
|
|
<img class="icon svg small invert" src="icon/sign-out.svg"/>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<header><label>About</label></header>
|
|
<p>
|
|
Yo, Sup? was originally Damus Web
|
|
written by <span action="open-profile" class="username clickable"
|
|
data-pubkey="32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245">
|
|
jb55</span>. It was rewritten by in order to bring
|
|
it up to date.
|
|
</p>
|
|
<p>
|
|
Yo is open source under the AGPL-3 license. You can
|
|
find the source code <a
|
|
href="https://git.sr.ht/~tomtom/damus">here</a>.
|
|
</p>
|
|
<p>
|
|
Bugs and feature requests can be emailed to <a
|
|
href="mailto:thomas.c.mathews@gmail.com">thomas.c.mathews@gmail.com</a>
|
|
or submitted to the <a
|
|
href="https://todo.sr.ht/~tomtom/damus-web-issues">
|
|
tracker</a>.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-fill vertical-hide"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<dialog id="media-preview">
|
|
<img action="close-media" src=""/>
|
|
<!-- TODO add loader to media preview -->
|
|
</dialog>
|
|
<dialog id="reply-modal">
|
|
<div class="container">
|
|
<header>
|
|
<label>Reply To</label>
|
|
<button class="icon" action="close-modal">
|
|
<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"
|
|
placeholder="Reply..."></textarea>
|
|
<div class="post-tools">
|
|
<button class="action" name="reply-all" data-all="1">Reply All</button>
|
|
<button class="action" name="reply">Reply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
<dialog id="profile-editor">
|
|
<div class="container">
|
|
<header>
|
|
<label>Update Profile</label>
|
|
<button class="icon" action="close-modal">
|
|
<img class="icon svg" src="icon/close-modal.svg"/>
|
|
</button>
|
|
</header>
|
|
<div>
|
|
<input type="text" class="block w100" name="name" placeholder="Name"/>
|
|
<input type="text" class="block w100" name="picture" placeholder="Picture URL"/>
|
|
<input type="text" class="block w100" name="nip05" placeholder="nip05"/>
|
|
<textarea name="about" class="block w100" placeholder="A bit about you."></textarea>
|
|
<button class="action float-right" action="open-profile-editor">
|
|
Update
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
<dialog id="event-details">
|
|
<div class="container">
|
|
<header>
|
|
<label>Event Details</label>
|
|
<button class="icon modal-floating-close-btn" action="close-modal">
|
|
<img class="icon svg" src="icon/close-modal.svg"/>
|
|
</button>
|
|
</header>
|
|
<div class="max-content">
|
|
<pre><code></code></pre>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|