This repo now only contains the web app.
I did this because they are 2 separate concerns and I have diverged so far from the original repo. I didn't start a new repo because it contains valuable history of all the people who contributed to it. Additionally if there is an issue with this we can revert, but I rather not. Forks are forks.
This commit is contained in:
Thomas Mathews
parent
1c0108a183
commit
a78d80d118
113 changed files with 329 additions and 4406 deletions
335
index.html
335
index.html
|
|
@ -1,83 +1,272 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>damus</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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';" />
|
||||
|
||||
<meta property="og:title" content="Damus">
|
||||
<meta property="og:description" content="A new social network that you control">
|
||||
<meta property="og:image" content="https://damus.io/img/logo.png">
|
||||
<meta property="og:url" content="https://damus.io">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="https://damus.io/img/logo.png">
|
||||
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/skeleton.css?v=2">
|
||||
<link rel="stylesheet" href="css/custom.css?v=5">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<section class="header">
|
||||
<span class="logo">
|
||||
<img src="img/damus-nobg.svg"/>
|
||||
</span>
|
||||
<span class="damus">damus</span>
|
||||
</section>
|
||||
<div class="container">
|
||||
<section class="hero">
|
||||
<h2 class="title">The social network you control
|
||||
<h5 class="subtitle">Your very own Twitter for your friends or business.</h5>
|
||||
|
||||
<img style="width: 50%; height: 50%" src="img/ss.png" />
|
||||
|
||||
<div class="value-props row">
|
||||
<div class="four columns value-prop">
|
||||
<img class="value-img" src="img/digital-nomad.svg">
|
||||
<b>You are in control</b>. Built on open internet protocols, there is no platform that can ban or censor you. You are in control of your data & speech.
|
||||
</div>
|
||||
<div class="four columns value-prop">
|
||||
<img class="value-img" src="img/message.svg">
|
||||
<b>Encrypted</b>. End-to-End encrypted private messaging. Keep big tech out of your DMs.
|
||||
</div>
|
||||
<div class="four columns value-prop">
|
||||
<img class="value-img" src="img/undercover.svg">
|
||||
<b>No registration required</b>. Creating an account doesn't require a phone number, email or name. Get started right away with zero friction.
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-props row">
|
||||
<div class="four columns value-prop">
|
||||
<img class="value-img" src="img/social-media.svg">
|
||||
<b>No servers required.</b> Messages are distributed via decentralized relays. No need to run any infrastructure and there are no single points of failure. Simple!
|
||||
</div>
|
||||
<div class="four columns value-prop">
|
||||
<img class="value-img" src="img/bot.svg">
|
||||
<b>Programmable.</b> Easily integrate bots that automate your life or business. Get notified when your servers go down, retweet to your team and collaborate in realtime.
|
||||
</div>
|
||||
<div class="four columns value-prop">
|
||||
<img class="value-img" src="img/bitcoin-phone.svg">
|
||||
<b>Earn money</b>. Tip your friend's posts and stack sats with Bitcoin & ⚡️, the native currency of the internet.</div>
|
||||
</div>
|
||||
<!-- <div class="row"> -->
|
||||
<!-- <h4 class="subtitle">Developers First</h4> -->
|
||||
<!-- <img class="code-example" src="img/code-placeholder.svg"> -->
|
||||
<!-- </div> -->
|
||||
<div>
|
||||
<img style="width: 200px" src="img/app-store-coming-soon.svg" />
|
||||
<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 style="margin-top: 20px">
|
||||
<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" onclick="signin()">
|
||||
Sign In with Key
|
||||
<img src="./icon/key.svg" class="icon svg small dark-noinvert"/>
|
||||
</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>
|
||||
<a href="https://damus.io/log">The Damus Log</a>
|
||||
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>
|
||||
<a href="https://testflight.apple.com/join/CLwjLxWl">Join the TestFlight Beta</a>
|
||||
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. Scroll to the top to do that.
|
||||
</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>Yo, Sup (this web app)</li>
|
||||
<li><a href="https://damus.io" target="_blank">Damus</a></li>
|
||||
<li><a href="https://github.com/fiatjaf/noscl" target="_blank">noscl</a></li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- daniel-testimonial -->
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue