diff --git a/src/encryptid/server.ts b/src/encryptid/server.ts index 2a96f39..4e91399 100644 --- a/src/encryptid/server.ts +++ b/src/encryptid/server.ts @@ -959,7 +959,7 @@ app.use('/dist/*', serveStatic({ root: './src/encryptid/' })); app.use('/demo/*', serveStatic({ root: './src/encryptid/' })); app.use('/static/*', serveStatic({ root: './public/' })); -// Serve index +// Serve index — landing page with real auth app.get('/', (c) => { return c.html(` @@ -974,149 +974,394 @@ app.get('/', (c) => { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; color: #fff; } - .container { - text-align: center; - padding: 2rem; - max-width: 600px; - } - .logo { - font-size: 4rem; - margin-bottom: 1rem; - } - h1 { + .page { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem; } + + /* Header */ + .header { text-align: center; margin-bottom: 2.5rem; } + .header h1 { font-size: 2.5rem; - margin-bottom: 0.5rem; background: linear-gradient(90deg, #00d4ff, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } - .tagline { - font-size: 1.25rem; - color: #94a3b8; - margin-bottom: 2rem; + .header .tagline { font-size: 1.1rem; color: #94a3b8; margin-top: 0.5rem; } + + /* Auth card */ + .auth-card { + background: rgba(255,255,255,0.06); + border: 1px solid rgba(255,255,255,0.12); + border-radius: 1rem; + padding: 2rem; + margin-bottom: 2.5rem; } - .features { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - margin-bottom: 2rem; + .auth-card h2 { font-size: 1.25rem; margin-bottom: 0.25rem; } + .auth-card .sub { color: #94a3b8; font-size: 0.875rem; margin-bottom: 1.5rem; } + + /* Tabs */ + .tabs { display: flex; border-radius: 0.5rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); margin-bottom: 1.5rem; } + .tab { flex: 1; padding: 0.6rem; text-align: center; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.2s; background: transparent; color: #94a3b8; border: none; } + .tab.active { background: linear-gradient(90deg, #00d4ff, #7c3aed); color: #fff; } + + /* Form */ + .form-group { margin-bottom: 1rem; } + .form-group label { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.4rem; font-weight: 500; } + .form-group input { + width: 100%; padding: 0.7rem 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.15); + background: rgba(255,255,255,0.05); color: #fff; font-size: 0.95rem; outline: none; transition: border 0.2s; } - .feature { - background: rgba(255,255,255,0.05); - padding: 1rem; - border-radius: 0.5rem; - border: 1px solid rgba(255,255,255,0.1); + .form-group input:focus { border-color: #7c3aed; } + .form-group input::placeholder { color: #475569; } + + .btn-primary { + width: 100%; padding: 0.75rem; border-radius: 0.5rem; border: none; + background: linear-gradient(90deg, #00d4ff, #7c3aed); color: #fff; + font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.15s, opacity 0.15s; } - .feature-icon { - font-size: 1.5rem; - margin-bottom: 0.5rem; + .btn-primary:hover { transform: translateY(-1px); } + .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } + + .error { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); border-radius: 0.5rem; padding: 0.6rem 1rem; font-size: 0.85rem; color: #fca5a5; margin-bottom: 1rem; display: none; } + .success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); border-radius: 0.5rem; padding: 0.6rem 1rem; font-size: 0.85rem; color: #86efac; margin-bottom: 1rem; display: none; } + + /* Profile (shown when logged in) */ + .profile { display: none; } + .profile-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } + .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #00d4ff, #7c3aed); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; flex-shrink: 0; } + .profile-info h3 { font-size: 1.1rem; } + .profile-info .did { font-family: monospace; font-size: 0.75rem; color: #94a3b8; word-break: break-all; } + .profile-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.875rem; } + .profile-row .label { color: #94a3b8; } + .profile-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; } + .btn-secondary { + padding: 0.6rem 1.25rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.15); + background: transparent; color: #fff; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.2s; } - .feature-title { - font-weight: 600; - margin-bottom: 0.25rem; - } - .feature-desc { - font-size: 0.875rem; - color: #94a3b8; - } - .btn { - display: inline-block; - padding: 0.75rem 2rem; - background: linear-gradient(90deg, #00d4ff, #7c3aed); - color: #fff; - text-decoration: none; - border-radius: 0.5rem; - font-weight: 600; - margin: 0.5rem; - transition: transform 0.2s; - } - .btn:hover { - transform: translateY(-2px); - } - .btn-outline { - background: transparent; - border: 2px solid #7c3aed; - } - .apps { - margin-top: 2rem; - padding-top: 2rem; - border-top: 1px solid rgba(255,255,255,0.1); - } - .apps-title { - font-size: 0.875rem; - color: #64748b; - margin-bottom: 1rem; - } - .app-icons { - display: flex; - justify-content: center; - gap: 1.5rem; - } - .app-icon { - color: #64748b; - text-decoration: none; - transition: color 0.2s; - } - .app-icon:hover { - color: #00d4ff; + .btn-secondary:hover { background: rgba(255,255,255,0.08); } + .btn-danger { border-color: rgba(239,68,68,0.4); color: #fca5a5; } + .btn-danger:hover { background: rgba(239,68,68,0.15); } + + /* Passkeys list */ + .passkeys { margin-top: 1.5rem; } + .passkeys h4 { font-size: 0.9rem; margin-bottom: 0.75rem; color: #94a3b8; } + .passkey-item { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.75rem; background: rgba(255,255,255,0.04); border-radius: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; } + .passkey-id { font-family: monospace; color: #94a3b8; } + .passkey-date { color: #64748b; } + + /* Recovery email */ + .recovery-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); } + .recovery-section h4 { font-size: 0.9rem; margin-bottom: 0.75rem; color: #94a3b8; } + .recovery-row { display: flex; gap: 0.5rem; } + .recovery-row input { flex: 1; } + .recovery-row button { white-space: nowrap; } + + /* Features */ + .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; } + .feature { background: rgba(255,255,255,0.04); padding: 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.08); text-align: center; } + .feature-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; } + .feature-desc { font-size: 0.8rem; color: #94a3b8; } + + /* Apps bar */ + .apps { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } + .apps-title { font-size: 0.8rem; color: #64748b; margin-bottom: 0.75rem; } + .app-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } + .app-links a { color: #64748b; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; } + .app-links a:hover { color: #00d4ff; } + + .link-row { text-align: center; margin-top: 1rem; font-size: 0.8rem; } + .link-row a { color: #7c3aed; text-decoration: none; } + .link-row a:hover { text-decoration: underline; } + + @media (max-width: 480px) { + .features { grid-template-columns: 1fr; } + .header h1 { font-size: 2rem; } } -
- -

EncryptID

-

Unified Identity for the r-Ecosystem

+
+
+

EncryptID

+

Unified Identity for the r-Ecosystem

+
+ + +
+ +
+

Get started

+

Sign in with your passkey or create a new account. No passwords, no tracking.

+ +
+ + +
+ +
+
+ + + + + +
+ + +
+
+
?
+
+

Loading...

+
+
+
+ +
SessionActive
+
Token expires--
+ +
+

Your Passkeys

+
Loading...
+
+ +
+

Recovery Email

+

Set an email to recover your account if you lose your passkey.

+
+ + +
+ +
+ +
+ SDK Demo + +
+
+
-
🔑
Passkey Auth
-
Hardware-backed, phishing-resistant
+
Hardware-backed, phishing-resistant login. No passwords ever.
-
🛡️
Social Recovery
-
No seed phrases needed
+
Recover your account via email. No seed phrases needed.
-
🔐
E2E Encryption
-
Keys never leave your device
+
Derive keys from your passkey. Keys never leave your device.
-
💰
-
Web3 Ready
-
Account abstraction wallets
+
Cross-App Identity
+
One passkey works across every app in the r-suite.
- Try Demo - GitHub -
-
Works with the r-Ecosystem
-
- rSpace - rWallet - rVote - rMaps - rFiles - rNotes - rTrips - rFunds - rNetwork - rCart - rTube - rStack +
One identity across the r-Ecosystem
+
+ rSpace + rNotes + rFiles + rCart + rFunds + rAuctions + rPubs + rVote + rMaps + rStack
+ + `);