diff --git a/auth-proxy/public/login.css b/auth-proxy/public/login.css index 55e30b1..73ced3c 100644 --- a/auth-proxy/public/login.css +++ b/auth-proxy/public/login.css @@ -23,21 +23,74 @@ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); min-height: 100%; } main { - max-width: 520px; - margin: 8vh auto; - padding: 32px 28px; + max-width: 560px; + margin: 6vh auto; + padding: 36px 32px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; } -h1 { font-size: 22px; margin: 0 0 4px; } -p.lede { color: var(--muted); margin: 0 0 24px; font-size: 14px; } -.tab-row { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } -.tab { - padding: 10px 14px; cursor: pointer; background: transparent; border: none; - color: var(--muted); font: inherit; border-bottom: 2px solid transparent; +h1 { font-size: 22px; margin: 0 0 6px; line-height: 1.3; } +h1 .acid { color: var(--accent); } +h2 { font-size: 17px; margin: 0 0 6px; } +p.lede { color: var(--muted); margin: 0 0 20px; font-size: 14px; } +p.sub { color: var(--muted); margin: 0 0 12px; font-size: 13.5px; } + +/* --- Wallet picker (three big options โ Create / Import / Connect) --- */ +.wallet-picker { display: grid; gap: 10px; margin: 8px 0 18px; } +.wallet-opt { + display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; + padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); + border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--text); + transition: border-color .1s, background .1s; } -.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); } +.wallet-opt:hover { border-color: var(--accent); background: var(--card); } +.wallet-opt .ico { font-size: 24px; line-height: 1; padding-top: 2px; } +.wallet-opt .body { display: flex; flex-direction: column; gap: 4px; } +.wallet-opt b { color: var(--text); font-size: 14.5px; font-weight: 600; + display: inline-flex; align-items: center; gap: 8px; } +.wallet-opt .sub { color: var(--muted); font-size: 13px; line-height: 1.5; } +.wallet-opt .pill { + display: inline-block; font-size: 10.5px; padding: 1px 8px; border-radius: 999px; + background: rgba(255,140,0,.14); color: var(--accent); font-weight: 500; + letter-spacing: 0.02em; text-transform: lowercase; +} +p.fine { + color: var(--muted); font-size: 12.5px; margin: 4px 0 0; text-align: center; +} +p.fine a { color: var(--muted); } +p.fine a:hover { color: var(--text); } + +/* --- Selected flow panel (Create/Import/Connect) --- */ +.flow { display: flex; flex-direction: column; gap: 4px; } +.flow > label { margin-top: 12px; } +.flow .row { + display: flex; gap: 10px; margin-top: 18px; align-items: center; +} +.flow .row .primary { flex: 1; margin-top: 0; } +.flow .row .ghost { + background: transparent; border: 1px solid var(--border); color: var(--muted); + padding: 10px 14px; border-radius: 8px; font: inherit; font-size: 13.5px; + cursor: pointer; +} +.flow .row .ghost:hover { color: var(--text); border-color: var(--muted); } + +/* --- WizardConnect coming-soon panel --- */ +.wc-supported { display: grid; gap: 8px; margin: 8px 0 14px; } +.wc-wallet { + display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; + padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; + font-size: 13px; +} +.wc-wallet b { color: var(--text); } +.wc-wallet span { color: var(--dim, var(--muted)); font-size: 12px; } +.wc-wallet a { color: var(--accent); text-decoration: none; font-size: 12.5px; } +.wc-wallet a:hover { text-decoration: underline; } +.note-soon { + background: var(--bg); border: 1px dashed var(--border); border-left: 3px solid var(--accent); + border-radius: 8px; padding: 12px 14px; color: var(--muted); font-size: 13px; +} +.note-soon b { color: var(--text); } label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 6px; } input, textarea { width: 100%; padding: 10px 12px; background: var(--bg); diff --git a/auth-proxy/public/wallet.js b/auth-proxy/public/wallet.js index 467e086..d8a2919 100644 --- a/auth-proxy/public/wallet.js +++ b/auth-proxy/public/wallet.js @@ -156,57 +156,94 @@ function renderTabs() { app.innerHTML = ""; app.appendChild(el(`
No email. No password reset. Your wallet is your identity.
-Prefer old-school? Sign in with username & password โ
Write it down. This is the only way to recover your account โ we can never help you reset it.
The passphrase never leaves your device. If you lose both the phrase and the passphrase your account is gone โ we cannot help.
- +The passphrase never leaves your device. Lose both phrase and passphrase = account is gone.
+Paste your BIP-39 recovery phrase (12 or 24 words). Same phrase = same account.
+ - +Sign the challenge with an external BCH wallet โ your keys never leave it. Encrypted end-to-end over Nostr; the relay only sees ciphertext.
+Coming soon. WizardConnect for message-signing is being wired in โ for now, use Create or Import above (or the button below to jump back to the picker).
+