86 lines
3.3 KiB
HTML
86 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Goostr — Google to nostr</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"nostr-tools": "https://esm.sh/nostr-tools@2.7.2"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Goostr</h1>
|
|
<p class="tag">Your Google account is your nostr identity.</p>
|
|
</header>
|
|
|
|
<div id="setup-banner" class="banner-warn hidden">
|
|
<strong>Setup required.</strong> Edit <code>public/config.js</code> and
|
|
paste your Google OAuth client ID into <code>CLIENT_ID</code>. See
|
|
<a href="./README.md">README</a> for the 2-minute setup.
|
|
</div>
|
|
|
|
<section id="view-loading" class="view">
|
|
<p id="loading-text">Checking session…</p>
|
|
</section>
|
|
|
|
<!-- Sign in -->
|
|
<section id="view-signin" class="view hidden">
|
|
<h2>Create or unlock your nostr identity</h2>
|
|
<p style="color: var(--muted); font-size: 14px; margin-top: -8px;">
|
|
We'll save a secret key in your Google Drive's app data — a private
|
|
folder only this app can read. The key is the seed for your nostr
|
|
identity. Sign in on any device to use the same identity.
|
|
</p>
|
|
<button id="signin-go" class="google">
|
|
<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
|
|
<path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
|
|
<path d="M3.964 10.706A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.706V4.962H.957A8.997 8.997 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332z" fill="#FBBC05"/>
|
|
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.962L3.964 7.294C4.672 5.167 6.656 3.58 9 3.58z" fill="#EA4335"/>
|
|
</svg>
|
|
Sign in with Google
|
|
</button>
|
|
<p id="signin-status" class="status"></p>
|
|
</section>
|
|
|
|
<!-- Logged in -->
|
|
<section id="view-home" class="view hidden">
|
|
<div class="profile">
|
|
<img id="me-pic" alt="" />
|
|
<div>
|
|
<h2 id="me-name"></h2>
|
|
<p class="npub" id="me-npub"></p>
|
|
</div>
|
|
<button id="sign-out" class="ghost">Sign out</button>
|
|
</div>
|
|
|
|
<div class="composer">
|
|
<textarea id="note-text" placeholder="Write something. It will be signed by your nostr key and published." maxlength="500"></textarea>
|
|
<button id="note-send" class="primary">Publish</button>
|
|
</div>
|
|
|
|
<div class="relays-bar">
|
|
<span class="label">Relays</span>
|
|
<span id="relay-dots"></span>
|
|
</div>
|
|
|
|
<h3>Your logs</h3>
|
|
<table id="notes-table">
|
|
<thead><tr><th>When</th><th>Note</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<p id="notes-status" class="status">Loading…</p>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|