rstack-online/index.html

712 lines
22 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📦</text></svg>">
<title>rStack - Community-Owned Tools for Collaboration</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
min-height: 100vh;
}
/* ── Hero ─────────────────────────────────────── */
.hero {
text-align: center;
padding: 6rem 1.5rem 4rem;
max-width: 720px;
margin: 0 auto;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #14b8a6, #7c3aed, #f97316);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
}
.hero .tagline {
font-size: 1.3rem;
color: #94a3b8;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.hero .description {
font-size: 1rem;
color: #64748b;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 2.5rem;
}
.hero .description .hl {
color: #00d4ff;
font-weight: 600;
}
/* ── Pillars ──────────────────────────────────── */
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
max-width: 720px;
margin: 0 auto 4rem;
padding: 0 1.5rem;
}
.pillar {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 1.5rem 1rem;
text-align: center;
}
.pillar-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.pillar-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.pillar-desc { font-size: 0.82rem; color: #64748b; line-height: 1.4; }
/* ── App Grid ─────────────────────────────────── */
.apps-section {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5rem 5rem;
}
.apps-section h2 {
text-align: center;
font-size: 1.75rem;
margin-bottom: 0.5rem;
background: linear-gradient(90deg, #00d4ff, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.apps-section .section-desc {
text-align: center;
color: #64748b;
font-size: 0.95rem;
margin-bottom: 2.5rem;
}
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.app-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 1.5rem;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, transform 0.2s;
display: flex;
flex-direction: column;
}
.app-card:hover {
border-color: rgba(0, 212, 255, 0.35);
transform: translateY(-2px);
}
.app-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.app-emoji { font-size: 1.75rem; }
.app-name {
font-size: 1.1rem;
font-weight: 700;
color: #f1f5f9;
}
.app-domain {
font-size: 0.75rem;
color: #475569;
font-weight: 400;
}
.app-desc {
font-size: 0.88rem;
color: #94a3b8;
line-height: 1.6;
flex: 1;
}
.app-tag {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.72rem;
color: #64748b;
background: rgba(255,255,255,0.05);
padding: 0.2rem 0.6rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
align-self: flex-start;
}
/* ── Full-Width Sections ──────────────────────── */
.section-full {
width: 100%;
padding: 5rem 1.5rem;
}
.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;
font-size: 2rem;
margin-bottom: 0.75rem;
background: linear-gradient(90deg, #00d4ff, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-desc {
text-align: center;
color: #94a3b8;
font-size: 1.05rem;
line-height: 1.7;
max-width: 600px;
margin: 0 auto 2.5rem;
}
.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.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;
color: #c4b5fd;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: transform 0.2s, border-color 0.2s;
}
.encryptid-link:hover {
transform: translateY(-2px);
border-color: rgba(124,58,237,0.6);
}
/* ── Footer ───────────────────────────────────── */
footer {
text-align: center;
padding: 2rem 1.5rem 3rem;
color: #475569;
font-size: 0.82rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
footer a {
color: #64748b;
text-decoration: none;
}
footer a:hover { color: #94a3b8; }
@media (max-width: 600px) {
.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>
<body>
<div class="hero">
<h1>rStack</h1>
<p class="tagline">Community-owned tools for collaboration, governance, and knowledge.</p>
<p class="description">
The <span class="hl">r-Stack</span> is a suite of interoperable, local-first applications
unified by <span class="hl">EncryptID</span> &mdash; a single secure login that keeps your
keys on your device. Every tool shares the same real-time sync layer, so your community's
data flows freely between apps without import/export, APIs, or vendor lock-in.
</p>
</div>
<div class="pillars">
<div class="pillar">
<div class="pillar-icon">🔐</div>
<div class="pillar-title">One Identity</div>
<div class="pillar-desc">EncryptID passkey login across every app. No passwords, no third-party auth.</div>
</div>
<div class="pillar">
<div class="pillar-icon">🏠</div>
<div class="pillar-title">Local-First</div>
<div class="pillar-desc">Your keys and data live on your device. Sync peer-to-peer via CRDTs.</div>
</div>
<div class="pillar">
<div class="pillar-icon">🔗</div>
<div class="pillar-title">Interoperable</div>
<div class="pillar-desc">Shared data layer means a vote in rVote can reference a budget in rFunds.</div>
</div>
</div>
<div class="apps-section">
<h2>The Apps</h2>
<p class="section-desc">Each tool is independent but stronger together. Log in once, use them all.</p>
<div class="app-grid">
<a href="https://rspace.online" class="app-card">
<div class="app-header">
<span class="app-emoji">🌌</span>
<div>
<div class="app-name">rSpace</div>
<div class="app-domain">rspace.online</div>
</div>
</div>
<div class="app-desc">Collaborative spatial canvas. The integration hub where all r-Stack tools come together on a shared, infinite workspace.</div>
<span class="app-tag">canvas &amp; dashboard</span>
</a>
<a href="https://rvote.online" class="app-card">
<div class="app-header">
<span class="app-emoji">🗳</span>
<div>
<div class="app-name">rVote</div>
<div class="app-domain">rvote.online</div>
</div>
</div>
<div class="app-desc">Community governance and decision-making. Create polls, weighted votes, and conviction-style proposals.</div>
<span class="app-tag">governance</span>
</a>
<a href="https://rwallet.online" class="app-card">
<div class="app-header">
<span class="app-emoji">💰</span>
<div>
<div class="app-name">rWallet</div>
<div class="app-domain">rwallet.online</div>
</div>
</div>
<div class="app-desc">Community treasury management. Track shared resources, contributions, and funding flows with Web3-ready smart wallets.</div>
<span class="app-tag">treasury</span>
</a>
<a href="https://rfunds.online" class="app-card">
<div class="app-header">
<span class="app-emoji">📊</span>
<div>
<div class="app-name">rFunds</div>
<div class="app-domain">rfunds.online</div>
</div>
</div>
<div class="app-desc">Budget tracking and expense management. Split costs, allocate funds, and maintain transparent community finances.</div>
<span class="app-tag">budgets &amp; expenses</span>
</a>
<a href="https://rmaps.online" class="app-card">
<div class="app-header">
<span class="app-emoji">🗺</span>
<div>
<div class="app-name">rMaps</div>
<div class="app-domain">rmaps.online</div>
</div>
</div>
<div class="app-desc">Collaborative mapping and geospatial data. Pin locations, plan routes, and visualize your community across the world.</div>
<span class="app-tag">mapping</span>
</a>
<a href="https://rfiles.online" class="app-card">
<div class="app-header">
<span class="app-emoji">📁</span>
<div>
<div class="app-name">rFiles</div>
<div class="app-domain">rfiles.online</div>
</div>
</div>
<div class="app-desc">End-to-end encrypted file storage and sharing. Your community's documents, images, and media &mdash; owned by you.</div>
<span class="app-tag">storage</span>
</a>
<a href="https://rnotes.online" class="app-card">
<div class="app-header">
<span class="app-emoji">📝</span>
<div>
<div class="app-name">rNotes</div>
<div class="app-domain">rnotes.online</div>
</div>
</div>
<div class="app-desc">Collaborative note-taking and knowledge base. Real-time shared notebooks, checklists, and meeting notes.</div>
<span class="app-tag">notes &amp; docs</span>
</a>
<a href="https://rtrips.online" class="app-card">
<div class="app-header">
<span class="app-emoji"></span>
<div>
<div class="app-name">rTrips</div>
<div class="app-domain">rtrips.online</div>
</div>
</div>
<div class="app-desc">Group trip planning. Itineraries, destinations, packing lists, and expenses &mdash; all linked across rMaps, rFunds, and rNotes.</div>
<span class="app-tag">travel</span>
</a>
<a href="https://rnetwork.online" class="app-card">
<div class="app-header">
<span class="app-emoji">🕸</span>
<div>
<div class="app-name">rNetwork</div>
<div class="app-domain">rnetwork.online</div>
</div>
</div>
<div class="app-desc">Community directory and relationship mapping. See who's connected, discover collaborators, and grow your network.</div>
<span class="app-tag">people &amp; connections</span>
</a>
<a href="https://rcart.online" class="app-card">
<div class="app-header">
<span class="app-emoji">🛒</span>
<div>
<div class="app-name">rCart</div>
<div class="app-domain">rcart.online</div>
</div>
</div>
<div class="app-desc">Group purchasing and crowdfunding. Pool resources, compare options, and fund community projects together.</div>
<span class="app-tag">commerce</span>
</a>
<a href="https://rtube.online" class="app-card">
<div class="app-header">
<span class="app-emoji">🎬</span>
<div>
<div class="app-name">rTube</div>
<div class="app-domain">rtube.online</div>
</div>
</div>
<div class="app-desc">Community video sharing and streaming. Host, curate, and discuss video content without platform algorithms or ads.</div>
<span class="app-tag">video</span>
</a>
</div>
</div>
<!-- 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>
<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>
<footer>
<p>rStack &mdash; community-owned, local-first, interoperable</p>
<p style="margin-top: 0.5rem;">
<a href="https://rspace.online">rSpace</a> &middot;
<a href="https://encryptid.jeffemmett.com">EncryptID</a> &middot;
<a href="https://github.com/jeffemmett">GitHub</a>
</p>
</footer>
</body>
</html>