diff --git a/src/cards.css b/src/cards.css index e3b0c7c..d0d12ae 100644 --- a/src/cards.css +++ b/src/cards.css @@ -23,8 +23,9 @@ } .mbox .mbox-body { - color: var(--fgcolor-accent); + color: var(--color-accent); flex-basis: calc(100% - 64px - 1rem); flex-grow: 0; flex-shrink: 1; + max-width: 84ch; } diff --git a/src/form.css b/src/form.css index d228053..61a186b 100644 --- a/src/form.css +++ b/src/form.css @@ -1,32 +1,52 @@ form { - max-width: 64ch; + max-width: 72ch; } -button, input, textarea { + color: var(--bgcolor-accent); font-family: monospace; + font-size: 1.6rem; + margin-bottom: 1.2rem; + padding: 1.3rem 1.8rem; } +button, label { + color: var(--bgcolor-accent); display: block; - margin-bottom: .5rem; - padding-left: 0; + font-size: 1.6rem; + margin-bottom: 0; + padding: 1.3rem 1.8rem; text-indent: 0; } +input[type="password"], input[type="text"] { + border: .2rem solid #b7b7b7; + border-radius: .2rem; display: block; - margin-bottom: 1rem; - padding: .5rem; + outline-color: rgb(102, 102, 102); width: 100%; } +input[type="password"]:focus, +input[type="text"]:focus { + border-color: #d4d4d4; + outline-offset: 1px; +} -input[type="password"] { - display: block; - margin-bottom: 1rem; - padding: .5rem; - width: 100%; +.buttons { + align-items: center; + display: flex; + justify-content: flex-end; + min-height: 3.2rem; +} + +.button-inline { + background: transparent; + color: var(--color); + display: inline; + padding: .3rem; } button { @@ -34,7 +54,6 @@ button { border: none; color: white; cursor: pointer; - padding: .5rem 1rem; } button:disabled { @@ -42,19 +61,12 @@ button:disabled { cursor: default; } -.buttons { - align-items: center; - display: flex; - justify-content: flex-end; - height: 2rem; -} - -.inline-text, -.inline-error { +.inline-text { display: inline-block; padding: 0 1ch; } -.inline-error { - color: var(--color-danger); +.form-status { + flex-grow: 1; + padding: 1rem 1.8rem; } diff --git a/src/index.html b/src/index.html index 9774a3b..cec3c31 100644 --- a/src/index.html +++ b/src/index.html @@ -44,15 +44,20 @@
- + - - + +
- - - or - + + + +
diff --git a/src/main.css b/src/main.css index 99bc7d9..bc1312c 100644 --- a/src/main.css +++ b/src/main.css @@ -2,17 +2,24 @@ @import "cards.css"; @import "form.css"; -:root { - --color-danger: #e00; + +::selection { + background: #ff79f9; + color: #fff; +} + +:where([hidden]) { + display: none !important; } @media (prefers-color-scheme: light) { html { - --bgcolor: #fff7e9; + --bgcolor: #fff; --bgcolor-accent: #ff731d; - --bgcolor-inactive: #737373; - --fgcolor: #1746a2; - --fgcolor-accent: #5f9df7; + --bgcolor-inactive: #bababa; + --color: rgb(68 68 68); + --color-accent: rgb(0 0 0); + --bgcolor-danger: rgb(255 0 0); } } @@ -21,8 +28,9 @@ --bgcolor: #191919; --bgcolor-accent: #2d4263; --bgcolor-inactive: #535353; - --fgcolor: #c84b31; - --fgcolor-accent: #ecdbba; + --color: #c84b31; + --color-accent: #ecdbba; + --bgcolor-danger: rgb(255 0 0); } img { @@ -34,13 +42,27 @@ } } -*, ::after, ::before { - box-sizing: border-box; +html { + font-size: 62.5%; + line-height: 1; } body { background-color: var(--bgcolor); - color: var(--fgcolor); + color: var(--color); font-family: monospace; - font-size: 120%; + font-size: 1.6rem; + line-height: 1.5; +} + +small { + font-size: 1.2rem; +} + +*, ::after, ::before { + box-sizing: border-box; +} + +.danger { + background-color: var(--bgcolor-danger); } diff --git a/src/main.js b/src/main.js index f4302d5..cef8320 100644 --- a/src/main.js +++ b/src/main.js @@ -2,9 +2,12 @@ import {relayPool, generatePrivateKey, getPublicKey} from 'nostr-tools'; import {elem} from './domutil.js'; const pool = relayPool(); -pool.addRelay('wss://nostr.x1ddos.ch', {read: true, write: true}); +// pool.addRelay('wss://nostr.x1ddos.ch', {read: true, write: true}); pool.addRelay('wss://nostr.bitcoiner.social/', {read: true, write: true}); pool.addRelay('wss://relay.nostr.info', {read: true, write: true}); +pool.addRelay('wss://nostr.openchain.fr', {read: true, write: true}); +pool.addRelay('wss://relay.damus.io', {read: true, write: true}); + const feedlist = document.querySelector('#feedlist'); @@ -14,8 +17,11 @@ const dateTime = new Intl.DateTimeFormat(navigator.language, { }); const userList = []; - +let max = 0; function onEvent(evt, relay) { + if (max++ >= 7) { + return subscription.unsub(); + } switch (evt.kind) { case 0: try { @@ -36,7 +42,7 @@ function onEvent(evt, relay) { } } -pool.sub({ +const subscription = pool.sub({ cb: onEvent, filter: { authors: [ @@ -53,7 +59,7 @@ function renderTextNote(evt, relay) { const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [ elem('header', {className: 'mbox-header'}, [ elem('strong', {}, userName), - ` on ${host}:` + elem('small', {},` on ${host}`), ]), evt.content // text ]); @@ -65,7 +71,7 @@ function renderRecommendServer(evt, relay) { const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [ elem('header', {className: 'mbox-header'}, [ elem('strong', {}, userName), - ` on ${host}` + elem('small', {},` on ${host}`), ]), `recommends server: ${evt.content}` ]); @@ -116,32 +122,30 @@ function setMetadata(userList, relay, evt, content) { const form = document.querySelector('form[name="settings"]'); const privateKeyInput = form.querySelector('#privatekey'); const pubKeyInput = form.querySelector('#pubkey'); -const keyError = form.querySelector('#keyError'); +const statusMessage = form.querySelector('#keystatus'); const generateBtn = form.querySelector('button[name="generate"]'); const importBtn = form.querySelector('button[name="import"]'); +const privateTgl = form.querySelector('button[name="privatekey-toggle"]') -generateBtn.addEventListener('click', (evt) => { - evt.preventDefault(); +generateBtn.addEventListener('click', () => { const privateKey = generatePrivateKey(); const pubKey = getPublicKey(privateKey); if (validKeys(privateKey, pubKey)) { - localStorage.setItem('privateKey', privateKey); - localStorage.setItem('pubKey', pubKey); privateKeyInput.value = privateKey; pubKeyInput.value = pubKey; + statusMessage.textContent = 'private-key created!'; + statusMessage.hidden = false; } }); -privateKeyInput.value = localStorage.getItem('privateKey'); -pubKeyInput.value = localStorage.getItem('pubKey'); - -importBtn.addEventListener('click', (evt) => { - evt.preventDefault(); +importBtn.addEventListener('click', () => { const privateKey = privateKeyInput.value; const pubKey = pubKeyInput.value; if (validKeys(privateKey, pubKey)) { localStorage.setItem('privateKey', privateKey); localStorage.setItem('pubKey', pubKey); + statusMessage.textContent = 'private-key saved in local storage!'; + statusMessage.hidden = false; } }); @@ -151,22 +155,25 @@ function validKeys(privateKey, pubKey) { if (pubKey && privateKey) { try { if (getPublicKey(privateKey) === pubKey) { - keyError.hidden = true; - keyError.textContent = ''; + statusMessage.hidden = true; + statusMessage.textContent = 'public-key corresponds to private-key'; importBtn.removeAttribute('disabled'); return true; } else { - keyError.textContent = 'private key does not correspond to public key!' + statusMessage.textContent = 'private-key does not correspond to public-key!' } } catch (e) { - keyError.textContent = `not a valid private key: ${e.message || e}`; + statusMessage.textContent = `not a valid private-key: ${e.message || e}`; } } - keyError.hidden = false; + statusMessage.hidden = false; importBtn.setAttribute('disabled', true); return false; } -document.body.addEventListener('keyup', () => { - console.log(document.activeElemen) +privateTgl.addEventListener('click', () => { + privateKeyInput.type = privateKeyInput.type === 'text' ? 'password' : 'text'; }); + +privateKeyInput.value = localStorage.getItem('privateKey'); +pubKeyInput.value = localStorage.getItem('pubKey'); diff --git a/src/tabs.css b/src/tabs.css index c9c5295..02cf5a3 100644 --- a/src/tabs.css +++ b/src/tabs.css @@ -9,20 +9,20 @@ .tab > label { cursor: pointer; - font-size: 1.1em; - padding: .5em 1em; + padding: 1rem 1.5em; } .tab [type=radio] { - position: absolute; + clip: rect(0, 0, 0, 0); height: 0; - width: 0; overflow: hidden; - clip: rect(0, 0, 0, 0); + position: absolute; + width: 0; } .tab [type=radio] + label { - outline: 1px solid var(--bgcolor-accent); + outline: 2px solid var(--bgcolor-accent); + outline-offset: -1px; } /* @@ -32,22 +32,21 @@ */ .tab [type=radio]:checked ~ label { - z-index: 2; background-color: var(--bgcolor-accent); - color: var(--fgcolor-accent); + color: var(--color-accent); + z-index: 2; } .tab [type=radio]:checked ~ label ~ .content { - z-index: 1; opacity: 1; + z-index: 1; } .tab .content { - position: absolute; - top: 2.5em; - left: 0; - right: 0; bottom: 0; - padding: 1rem 0; + left: 0; opacity: 0; + position: absolute; + right: 0; + top: 5em; }