feat: add EncryptID deep dive and community opportunities sections
Replaces the small EncryptID banner with two full sections: - How EncryptID Works: passkey auth, local-first data sovereignty, social recovery, wallet abstraction with architecture diagram - What This Unlocks: community treasuries without crypto literacy, tamper-proof governance, encrypted collaboration by default, portable identity, gasless micro-payments, real ownership Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4c4dce784b
commit
3c3cbf949d
335
index.html
335
index.html
|
|
@ -164,46 +164,141 @@
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── EncryptID Banner ─────────────────────────── */
|
/* ── Full-Width Sections ──────────────────────── */
|
||||||
|
|
||||||
.encryptid-banner {
|
.section-full {
|
||||||
max-width: 720px;
|
width: 100%;
|
||||||
margin: 0 auto 5rem;
|
padding: 5rem 1.5rem;
|
||||||
padding: 0 1.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.encryptid-card {
|
.section-full.alt-bg {
|
||||||
background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(124,58,237,0.06));
|
background: rgba(255,255,255,0.015);
|
||||||
border: 1px solid rgba(124,58,237,0.25);
|
}
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
.section-inner {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-divider {
|
||||||
|
width: 60px;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, #14b8a6, #7c3aed);
|
||||||
|
margin: 0 auto 2.5rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-inner h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
font-size: 2rem;
|
||||||
|
|
||||||
.encryptid-card h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
color: #c4b5fd;
|
background: linear-gradient(90deg, #00d4ff, #7c3aed);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.encryptid-card p {
|
.section-desc {
|
||||||
|
text-align: center;
|
||||||
color: #94a3b8;
|
color: #94a3b8;
|
||||||
|
font-size: 1.05rem;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
font-size: 0.95rem;
|
max-width: 600px;
|
||||||
max-width: 520px;
|
margin: 0 auto 2.5rem;
|
||||||
margin: 0 auto 1.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.encryptid-card .hl {
|
.hl {
|
||||||
color: #00d4ff;
|
color: #00d4ff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── EncryptID Cards ──────────────────────────── */
|
||||||
|
|
||||||
|
.eid-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1.25rem;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eid-card {
|
||||||
|
background: rgba(255,255,255,0.04);
|
||||||
|
border: 1px solid rgba(124,58,237,0.15);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 1.75rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eid-card-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eid-card h3 {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: #e2e8f0;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eid-card p {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Architecture Diagram ─────────────────────── */
|
||||||
|
|
||||||
|
.flow-box {
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-box pre {
|
||||||
|
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: left;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Unlock Grid ──────────────────────────────── */
|
||||||
|
|
||||||
|
.unlock-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-card {
|
||||||
|
background: rgba(255,255,255,0.04);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 1.75rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-card h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #e2e8f0;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-card p {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── EncryptID Link ───────────────────────────── */
|
||||||
|
|
||||||
.encryptid-link {
|
.encryptid-link {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
padding: 0.6rem 1.5rem;
|
padding: 0.65rem 1.5rem;
|
||||||
background: linear-gradient(90deg, rgba(0,212,255,0.15), rgba(124,58,237,0.15));
|
background: linear-gradient(90deg, rgba(0,212,255,0.15), rgba(124,58,237,0.15));
|
||||||
border: 1px solid rgba(124,58,237,0.35);
|
border: 1px solid rgba(124,58,237,0.35);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
@ -240,6 +335,9 @@
|
||||||
.hero h1 { font-size: 2.5rem; }
|
.hero h1 { font-size: 2.5rem; }
|
||||||
.pillars { grid-template-columns: 1fr; }
|
.pillars { grid-template-columns: 1fr; }
|
||||||
.app-grid { grid-template-columns: 1fr; }
|
.app-grid { grid-template-columns: 1fr; }
|
||||||
|
.eid-grid { grid-template-columns: 1fr; }
|
||||||
|
.unlock-grid { grid-template-columns: 1fr; }
|
||||||
|
.section-inner h2 { font-size: 1.5rem; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -413,19 +511,190 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="encryptid-banner">
|
<!-- EncryptID Deep Dive -->
|
||||||
<div class="encryptid-card">
|
<div class="section-full">
|
||||||
<h3>Powered by EncryptID</h3>
|
<div class="section-inner">
|
||||||
<p>
|
<div class="section-divider"></div>
|
||||||
Every r-Stack app authenticates through <span class="hl">EncryptID</span>, a
|
<h2>How EncryptID Works</h2>
|
||||||
self-sovereign identity system built on WebAuthn passkeys. One login, all apps.
|
<p class="section-desc">
|
||||||
Your cryptographic keys are <span class="hl">derived locally</span> and never
|
A single identity layer that turns a fingerprint or face scan into
|
||||||
leave your device. If you lose access, <span class="hl">social recovery</span>
|
full-stack access — encrypted storage, signed votes, community
|
||||||
with trusted guardians gets you back in — no seed phrases, no central authority.
|
treasury, and more — without passwords, seed phrases, or cloud accounts.
|
||||||
</p>
|
</p>
|
||||||
<a href="https://encryptid.jeffemmett.com" class="encryptid-link">
|
|
||||||
🔐 Learn more about EncryptID
|
<div class="eid-grid">
|
||||||
</a>
|
<div class="eid-card">
|
||||||
|
<div class="eid-card-icon">🔑</div>
|
||||||
|
<h3>Passkey Authentication</h3>
|
||||||
|
<p>
|
||||||
|
EncryptID is built on <span class="hl">WebAuthn passkeys</span> — the same
|
||||||
|
standard behind Face ID and fingerprint unlock on your phone. Your identity is
|
||||||
|
bound to your device's secure hardware (TPM or Secure Enclave), so there is
|
||||||
|
nothing to type, nothing to remember, and nothing that can be phished. Registration
|
||||||
|
and login are a single biometric prompt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eid-card">
|
||||||
|
<div class="eid-card-icon">🏠</div>
|
||||||
|
<h3>Local-First Data Sovereignty</h3>
|
||||||
|
<p>
|
||||||
|
When you authenticate, EncryptID derives a full set of cryptographic keys
|
||||||
|
<span class="hl">entirely on your device</span> using HKDF. These keys
|
||||||
|
never leave your hardware. Your encryption key protects your files, your signing
|
||||||
|
key validates your votes, and your DID key proves your identity — all
|
||||||
|
without a central server ever seeing your private material. Data syncs
|
||||||
|
peer-to-peer via CRDTs; the server is just a relay, not an authority.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eid-card">
|
||||||
|
<div class="eid-card-icon">🛡</div>
|
||||||
|
<h3>Social Recovery</h3>
|
||||||
|
<p>
|
||||||
|
Lost your phone? No problem — and no seed phrase to dig out of a drawer.
|
||||||
|
EncryptID uses <span class="hl">guardian-based recovery</span>: you designate
|
||||||
|
trusted people (friends, family, community leaders) as guardians. If you lose
|
||||||
|
access, any 3 of your 5 guardians can approve recovery after a 48-hour
|
||||||
|
time-lock — giving you time to cancel if something seems wrong. Guardians
|
||||||
|
never see each other's identities or your private keys.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eid-card">
|
||||||
|
<div class="eid-card-icon">💳</div>
|
||||||
|
<h3>Wallet Abstraction</h3>
|
||||||
|
<p>
|
||||||
|
EncryptID integrates <span class="hl">Account Abstraction (ERC-4337)</span>
|
||||||
|
smart wallets, which means every user gets an on-chain wallet — without
|
||||||
|
ever seeing a wallet address, gas fee, or blockchain confirmation. Your passkey
|
||||||
|
<em>is</em> your wallet signer. A <span class="hl">paymaster</span> sponsors
|
||||||
|
transaction fees so users never need to hold ETH. Session keys allow daily
|
||||||
|
operations (voting, micro-payments, content uploads) with a single biometric
|
||||||
|
prompt per session rather than per action. Spending limits and time-locks
|
||||||
|
protect community treasuries.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-box">
|
||||||
|
<pre>
|
||||||
|
You (fingerprint / face scan)
|
||||||
|
|
|
||||||
|
v
|
||||||
|
┌──────────────────────────────────────────────────────────┐
|
||||||
|
| EncryptID |
|
||||||
|
| |
|
||||||
|
| Layer 1: WebAuthn Passkey (hardware-backed) |
|
||||||
|
| | |
|
||||||
|
| Layer 2: Derived Keys (on-device, HKDF) |
|
||||||
|
| |── Encryption Key ── rFiles, rNotes, rSpace E2E |
|
||||||
|
| |── Signing Key ───── rVote ballots, authorship |
|
||||||
|
| └── DID Key ───────── portable identity |
|
||||||
|
| | |
|
||||||
|
| Layer 3: Smart Wallet (Account Abstraction) |
|
||||||
|
| |── Gasless transactions (paymaster-sponsored) |
|
||||||
|
| |── Session keys (one prompt per session) |
|
||||||
|
| └── Community treasury (multi-sig) |
|
||||||
|
| | |
|
||||||
|
| Layer 4: Cross-App SSO |
|
||||||
|
| └── One login for all r-Stack apps |
|
||||||
|
└──────────────────────────────────────────────────────────┘
|
||||||
|
|
|
||||||
|
v
|
||||||
|
rSpace · rVote · rWallet · rFunds · rMaps · rFiles · ...
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- What this unlocks -->
|
||||||
|
<div class="section-full alt-bg">
|
||||||
|
<div class="section-inner">
|
||||||
|
<div class="section-divider"></div>
|
||||||
|
<h2>What This Unlocks</h2>
|
||||||
|
<p class="section-desc">
|
||||||
|
Most blockchain tools assume users already know what a wallet is.
|
||||||
|
EncryptID removes that assumption entirely. Here's what becomes possible
|
||||||
|
when identity, encryption, and treasury are invisible infrastructure
|
||||||
|
rather than technical prerequisites.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="unlock-grid">
|
||||||
|
<div class="unlock-card">
|
||||||
|
<h3>Community treasuries without crypto literacy</h3>
|
||||||
|
<p>
|
||||||
|
A neighbourhood association can pool funds, vote on how to spend them,
|
||||||
|
and track every transaction on an immutable ledger — all through
|
||||||
|
the same fingerprint login they use to unlock their phone. No one needs
|
||||||
|
to understand gas, private keys, or blockchain explorers. The wallet is
|
||||||
|
there, it's auditable, and it's invisible.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="unlock-card">
|
||||||
|
<h3>Tamper-proof governance for any group</h3>
|
||||||
|
<p>
|
||||||
|
Co-ops, DAOs, strata councils, mutual aid networks — any group
|
||||||
|
that votes can use <span class="hl">rVote</span> with cryptographically
|
||||||
|
signed ballots that are verifiable but private. Because the signing key is
|
||||||
|
derived from a passkey, members don't need to manage keys or install
|
||||||
|
extensions. They just vote.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="unlock-card">
|
||||||
|
<h3>Encrypted collaboration by default</h3>
|
||||||
|
<p>
|
||||||
|
Files shared in <span class="hl">rFiles</span>, notes in
|
||||||
|
<span class="hl">rNotes</span>, and canvases in
|
||||||
|
<span class="hl">rSpace</span> are end-to-end encrypted with keys
|
||||||
|
that only the community members hold. There's no admin backdoor, no
|
||||||
|
platform that can read your data, and no breach that exposes plaintext.
|
||||||
|
Privacy isn't a setting — it's the architecture.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="unlock-card">
|
||||||
|
<h3>Portable identity across communities</h3>
|
||||||
|
<p>
|
||||||
|
Your EncryptID is a <span class="hl">DID (Decentralized Identifier)</span>
|
||||||
|
that you own. Join a new community, and your reputation, credentials, and
|
||||||
|
relationships can follow you — without creating a new account or
|
||||||
|
trusting a new platform with your data. Leave a community, and your
|
||||||
|
identity stays yours.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="unlock-card">
|
||||||
|
<h3>Micro-payments and crowdfunding without fees</h3>
|
||||||
|
<p>
|
||||||
|
Paymaster-sponsored transactions mean a community can run a group
|
||||||
|
purchase in <span class="hl">rCart</span>, split expenses in
|
||||||
|
<span class="hl">rFunds</span>, or fund a project through
|
||||||
|
<span class="hl">rWallet</span> without any member paying gas fees.
|
||||||
|
The smart wallet batches operations, so what would be ten separate
|
||||||
|
transactions becomes one seamless action.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="unlock-card">
|
||||||
|
<h3>Real ownership of community infrastructure</h3>
|
||||||
|
<p>
|
||||||
|
Because data is local-first and identity is self-sovereign, communities
|
||||||
|
aren't tenants on someone else's platform. They can export everything,
|
||||||
|
fork the tools, self-host on their own server, or move between providers.
|
||||||
|
The r-Stack is infrastructure that communities <em>own</em>, not
|
||||||
|
services they <em>rent</em>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center; margin-top: 2.5rem;">
|
||||||
|
<a href="https://encryptid.jeffemmett.com" class="encryptid-link">
|
||||||
|
🔐 Explore EncryptID
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue