jeffemmett
/
rstack-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Jeff Emmett 2026-02-15 14:36:53 -07:00
parent 4c4dce784b
commit 3c3cbf949d
1 changed files with 302 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

335
index.html
View File

@ -164,46 +164,141 @@
align-self: flex-start;
}
/* ── EncryptID Banner ─────────────────────────── */
/* ── Full-Width Sections ──────────────────────── */
.encryptid-banner {
max-width: 720px;
margin: 0 auto 5rem;
padding: 0 1.5rem;
.section-full {
width: 100%;
padding: 5rem 1.5rem;
}
.encryptid-card {
background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(124,58,237,0.06));
border: 1px solid rgba(124,58,237,0.25);
border-radius: 16px;
padding: 2rem;
.section-full.alt-bg {
background: rgba(255,255,255,0.015);
}
.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;
}
.encryptid-card h3 {
font-size: 1.25rem;
font-size: 2rem;
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;
font-size: 1.05rem;
line-height: 1.7;
font-size: 0.95rem;
max-width: 520px;
margin: 0 auto 1.25rem;
max-width: 600px;
margin: 0 auto 2.5rem;
}
.encryptid-card .hl {
.hl {
color: #00d4ff;
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 {
display: inline-flex;
align-items: center;
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));
border: 1px solid rgba(124,58,237,0.35);
border-radius: 8px;
@ -240,6 +335,9 @@
.hero h1 { font-size: 2.5rem; }
.pillars { 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>
</head>
@ -413,19 +511,190 @@
</div>
</div>
<div class="encryptid-banner">
<div class="encryptid-card">
<h3>Powered by EncryptID</h3>
<p>
Every r-Stack app authenticates through <span class="hl">EncryptID</span>, a
self-sovereign identity system built on WebAuthn passkeys. One login, all apps.
Your cryptographic keys are <span class="hl">derived locally</span> and never
leave your device. If you lose access, <span class="hl">social recovery</span>
with trusted guardians gets you back in &mdash; no seed phrases, no central authority.
<!-- EncryptID Deep Dive -->
<div class="section-full">
<div class="section-inner">
<div class="section-divider"></div>
<h2>How EncryptID Works</h2>
<p class="section-desc">
A single identity layer that turns a fingerprint or face scan into
full-stack access &mdash; encrypted storage, signed votes, community
treasury, and more &mdash; without passwords, seed phrases, or cloud accounts.
</p>
<a href="https://encryptid.jeffemmett.com" class="encryptid-link">
🔐 Learn more about EncryptID
</a>
<div class="eid-grid">
<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> &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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 &mdash; 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>