1844 lines
71 KiB
HTML
1844 lines
71 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 — Open-Source Community Infrastructure</title>
|
|
<meta name="description" content="A complete open-source stack for community self-governance. Self-hosted tools tied together with zero-knowledge identity and data sovereignty.">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #0b1120;
|
|
color: #e2e8f0;
|
|
min-height: 100vh;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
a { color: inherit; }
|
|
|
|
.hl { color: #22d3ee; font-weight: 600; }
|
|
.hl-purple { color: #a78bfa; font-weight: 600; }
|
|
.hl-green { color: #34d399; font-weight: 600; }
|
|
.hl-orange { color: #fb923c; font-weight: 600; }
|
|
|
|
/* ── Nav ──────────────────────────────────────── */
|
|
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
background: rgba(11, 17, 32, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.nav-inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 56px;
|
|
}
|
|
|
|
.nav-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
color: #e2e8f0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: #94a3b8;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover { color: #e2e8f0; }
|
|
|
|
/* ── Hero ─────────────────────────────────────── */
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 7rem 1.5rem 5rem;
|
|
max-width: 820px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hero-label {
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: #22d3ee;
|
|
background: rgba(34, 211, 238, 0.1);
|
|
border: 1px solid rgba(34, 211, 238, 0.2);
|
|
padding: 0.35rem 1rem;
|
|
border-radius: 100px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3.75rem;
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(135deg, #22d3ee, #a78bfa, #fb923c);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.hero .subtitle {
|
|
font-size: 1.35rem;
|
|
color: #cbd5e1;
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.hero .description {
|
|
font-size: 1.05rem;
|
|
color: #64748b;
|
|
line-height: 1.8;
|
|
max-width: 640px;
|
|
margin: 0 auto 2.5rem;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.75rem;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
text-decoration: none;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.btn:hover { transform: translateY(-1px); }
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #22d3ee, #a78bfa);
|
|
color: #0b1120;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: rgba(255,255,255,0.25);
|
|
}
|
|
|
|
/* ── Principles ──────────────────────────────── */
|
|
|
|
.principles {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.25rem;
|
|
max-width: 1100px;
|
|
margin: 0 auto 6rem;
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.principle {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 16px;
|
|
padding: 2rem 1.5rem;
|
|
text-align: center;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.principle:hover {
|
|
border-color: rgba(255,255,255,0.12);
|
|
}
|
|
|
|
.principle-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 1rem;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.principle-icon.open { background: rgba(34, 211, 238, 0.12); }
|
|
.principle-icon.self { background: rgba(167, 139, 250, 0.12); }
|
|
.principle-icon.zk { background: rgba(52, 211, 153, 0.12); }
|
|
.principle-icon.sov { background: rgba(251, 146, 60, 0.12); }
|
|
|
|
.principle h3 {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.principle p {
|
|
font-size: 0.85rem;
|
|
color: #64748b;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Section Commons ─────────────────────────── */
|
|
|
|
.section {
|
|
padding: 6rem 1.5rem;
|
|
}
|
|
|
|
.section.alt { background: rgba(255,255,255,0.015); }
|
|
|
|
.section-inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
display: inline-block;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.section-label.cyan { color: #22d3ee; background: rgba(34,211,238,0.1); }
|
|
.section-label.purple { color: #a78bfa; background: rgba(167,139,250,0.1); }
|
|
.section-label.green { color: #34d399; background: rgba(52,211,153,0.1); }
|
|
.section-label.orange { color: #fb923c; background: rgba(251,146,60,0.1); }
|
|
.section-label.rose { color: #fb7185; background: rgba(251,113,133,0.1); }
|
|
.section-label.amber { color: #fbbf24; background: rgba(251,191,36,0.1); }
|
|
.section-label.sky { color: #38bdf8; background: rgba(56,189,248,0.1); }
|
|
|
|
.section h2 {
|
|
font-size: 2.25rem;
|
|
margin-bottom: 1rem;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 1.1rem;
|
|
color: #94a3b8;
|
|
line-height: 1.7;
|
|
max-width: 640px;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
/* ── Stack Architecture ──────────────────────── */
|
|
|
|
.arch-layers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.arch-layer {
|
|
display: flex;
|
|
align-items: stretch;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.arch-layer-label {
|
|
width: 160px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1.25rem 1rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.arch-layer-content {
|
|
flex: 1;
|
|
padding: 1.25rem 1.5rem;
|
|
background: rgba(255,255,255,0.02);
|
|
}
|
|
|
|
.arch-layer-content h4 {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.35rem;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.arch-layer-content p {
|
|
font-size: 0.85rem;
|
|
color: #94a3b8;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.arch-layer.apps .arch-layer-label { background: rgba(34,211,238,0.08); color: #22d3ee; }
|
|
.arch-layer.sync .arch-layer-label { background: rgba(167,139,250,0.08); color: #a78bfa; }
|
|
.arch-layer.identity .arch-layer-label { background: rgba(52,211,153,0.08); color: #34d399; }
|
|
.arch-layer.infra .arch-layer-label { background: rgba(251,146,60,0.08); color: #fb923c; }
|
|
|
|
/* ── Functional Areas ────────────────────────── */
|
|
|
|
.areas-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.area-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 100px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
color: #94a3b8;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.area-pill:hover {
|
|
border-color: rgba(255,255,255,0.2);
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.area-block {
|
|
margin-bottom: 4rem;
|
|
scroll-margin-top: 80px;
|
|
}
|
|
|
|
.area-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1.25rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.area-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.area-header h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.25rem;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.area-header p {
|
|
font-size: 1rem;
|
|
color: #94a3b8;
|
|
line-height: 1.6;
|
|
max-width: 580px;
|
|
}
|
|
|
|
.area-apps {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.app-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 14px;
|
|
padding: 1.5rem;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 0.2s, transform 0.15s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app-card:hover {
|
|
border-color: rgba(34, 211, 238, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.app-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.app-card-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-card-name {
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.app-card-domain {
|
|
font-size: 0.72rem;
|
|
color: #475569;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.app-card-desc {
|
|
font-size: 0.88rem;
|
|
color: #94a3b8;
|
|
line-height: 1.6;
|
|
flex: 1;
|
|
}
|
|
|
|
.app-card-built {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.72rem;
|
|
color: #475569;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.app-card-built span {
|
|
background: rgba(255,255,255,0.04);
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Area colors */
|
|
.area-create .area-icon { background: rgba(34,211,238,0.12); }
|
|
.area-create .app-card-icon { background: rgba(34,211,238,0.1); }
|
|
|
|
.area-plan .area-icon { background: rgba(52,211,153,0.12); }
|
|
.area-plan .app-card-icon { background: rgba(52,211,153,0.1); }
|
|
|
|
.area-comm .area-icon { background: rgba(167,139,250,0.12); }
|
|
.area-comm .app-card-icon { background: rgba(167,139,250,0.1); }
|
|
|
|
.area-decide .area-icon { background: rgba(251,113,133,0.12); }
|
|
.area-decide .app-card-icon { background: rgba(251,113,133,0.1); }
|
|
|
|
.area-fund .area-icon { background: rgba(251,191,36,0.12); }
|
|
.area-fund .app-card-icon { background: rgba(251,191,36,0.1); }
|
|
|
|
.area-share .area-icon { background: rgba(56,189,248,0.12); }
|
|
.area-share .app-card-icon { background: rgba(56,189,248,0.1); }
|
|
|
|
.area-observe .area-icon { background: rgba(251,146,60,0.12); }
|
|
.area-observe .app-card-icon { background: rgba(251,146,60,0.1); }
|
|
|
|
/* ── Identity Section ────────────────────────── */
|
|
|
|
.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.03);
|
|
border: 1px solid rgba(52,211,153,0.12);
|
|
border-radius: 14px;
|
|
padding: 1.75rem;
|
|
}
|
|
|
|
.eid-card-icon {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.eid-card h3 {
|
|
font-size: 1rem;
|
|
color: #f1f5f9;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.eid-card p {
|
|
color: #94a3b8;
|
|
font-size: 0.88rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ── Flow Box / Code ─────────────────────────── */
|
|
|
|
.flow-box {
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 16px;
|
|
padding: 1.75rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.flow-box pre {
|
|
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
|
font-size: 0.8rem;
|
|
color: #94a3b8;
|
|
line-height: 1.5;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* ── Open Source Section ──────────────────────── */
|
|
|
|
.oss-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.oss-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 12px;
|
|
padding: 1.25rem;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.oss-card:hover { border-color: rgba(255,255,255,0.12); }
|
|
|
|
.oss-card h4 {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.35rem;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.oss-card p {
|
|
font-size: 0.8rem;
|
|
color: #64748b;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.oss-card .oss-tag {
|
|
display: inline-block;
|
|
margin-top: 0.5rem;
|
|
font-size: 0.65rem;
|
|
color: #475569;
|
|
background: rgba(255,255,255,0.04);
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* ── Self-Host Section ────────────────────────── */
|
|
|
|
.deploy-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.deploy-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 14px;
|
|
padding: 1.75rem;
|
|
}
|
|
|
|
.deploy-card h3 {
|
|
font-size: 1rem;
|
|
color: #f1f5f9;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.deploy-card p {
|
|
color: #94a3b8;
|
|
font-size: 0.88rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ── Demo Section ────────────────────────────── */
|
|
|
|
.demo-preview {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.demo-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 14px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: border-color 0.2s, transform 0.15s;
|
|
}
|
|
|
|
.demo-card:hover {
|
|
border-color: rgba(34,211,238,0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.demo-card-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.demo-card h3 {
|
|
font-size: 1rem;
|
|
color: #f1f5f9;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.demo-card p {
|
|
font-size: 0.85rem;
|
|
color: #64748b;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Token Section ────────────────────────────── */
|
|
|
|
.token-features {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.token-card {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 14px;
|
|
padding: 1.75rem;
|
|
}
|
|
|
|
.token-card h3 {
|
|
font-size: 1rem;
|
|
color: #f1f5f9;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.token-card p {
|
|
color: #94a3b8;
|
|
font-size: 0.88rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ── Footer ───────────────────────────────────── */
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 3rem 1.5rem 4rem;
|
|
color: #475569;
|
|
font-size: 0.82rem;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
footer a {
|
|
color: #64748b;
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
footer a:hover { color: #94a3b8; }
|
|
|
|
.footer-apps {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 6px 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* ── App Switcher ────────────────────────────── */
|
|
|
|
.app-switcher { position: relative; }
|
|
|
|
.app-switcher-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.625rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
background: rgba(255,255,255,0.08);
|
|
color: #cbd5e1;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
line-height: 1;
|
|
}
|
|
|
|
.app-switcher-trigger:hover { background: rgba(255,255,255,0.12); }
|
|
|
|
.app-switcher-badge {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 0.375rem;
|
|
background: linear-gradient(135deg, #22d3ee, #a78bfa, #fb923c);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
color: #0b1120;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-switcher-arrow { font-size: 0.7em; opacity: 0.6; }
|
|
|
|
.app-switcher-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: 0.375rem;
|
|
width: 300px;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
border-radius: 0.75rem;
|
|
background: #1e293b;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.app-switcher-dropdown.open { display: block; }
|
|
|
|
.app-switcher-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.75rem 0.875rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.app-switcher-header-badge {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 0.5rem;
|
|
background: linear-gradient(135deg, #22d3ee, #a78bfa, #fb923c);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
color: #0b1120;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-switcher-header-text { display: flex; flex-direction: column; }
|
|
.app-switcher-header-title { font-size: 0.875rem; font-weight: 700; color: #fff; }
|
|
.app-switcher-header-subtitle { font-size: 10px; color: #94a3b8; }
|
|
|
|
.app-switcher-cat {
|
|
padding: 0.75rem 0.875rem 0.25rem;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: #64748b;
|
|
user-select: none;
|
|
}
|
|
|
|
.app-switcher-item {
|
|
display: flex;
|
|
align-items: center;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.app-switcher-item:hover { background: rgba(255,255,255,0.04); }
|
|
|
|
.app-switcher-item a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
flex: 1;
|
|
padding: 0.5rem 0.875rem;
|
|
color: #cbd5e1;
|
|
text-decoration: none;
|
|
min-width: 0;
|
|
}
|
|
|
|
.app-switcher-item-badge {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 0.375rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
color: #0b1120;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-switcher-item-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.app-switcher-item-name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.app-switcher-item-name span:first-child { font-size: 0.875rem; font-weight: 600; }
|
|
.app-switcher-item-name span:last-child { font-size: 0.875rem; flex-shrink: 0; }
|
|
|
|
.app-switcher-item-desc {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.app-switcher-ext {
|
|
width: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
color: #22d3ee;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
flex-shrink: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.app-switcher-item:hover .app-switcher-ext { opacity: 0.5; }
|
|
.app-switcher-ext:hover { opacity: 1 !important; }
|
|
|
|
.app-switcher-footer {
|
|
padding: 0.625rem 0.875rem;
|
|
border-top: 1px solid rgba(255,255,255,0.08);
|
|
text-align: center;
|
|
}
|
|
|
|
.app-switcher-footer a {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.app-switcher-footer a:hover { color: #22d3ee; }
|
|
|
|
/* Badge colors */
|
|
.badge-teal { background: #5eead4; }
|
|
.badge-amber { background: #fcd34d; }
|
|
.badge-rose { background: #fda4af; }
|
|
.badge-sky { background: #7dd3fc; }
|
|
.badge-emerald { background: #6ee7b7; }
|
|
.badge-green { background: #86efac; }
|
|
.badge-indigo { background: #a5b4fc; }
|
|
.badge-fuchsia { background: #f0abfc; }
|
|
.badge-violet { background: #c4b5fd; }
|
|
.badge-lime { background: #bef264; }
|
|
.badge-yellow { background: #fde047; }
|
|
.badge-orange { background: #fdba74; }
|
|
.badge-red { background: #fca5a5; }
|
|
.badge-blue { background: #93c5fd; }
|
|
.badge-cyan { background: #67e8f9; }
|
|
.badge-pink { background: #f9a8d4; }
|
|
.badge-purple { background: #d8b4fe; }
|
|
|
|
/* ── Responsive ──────────────────────────────── */
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h1 { font-size: 2.5rem; }
|
|
.hero .subtitle { font-size: 1.1rem; }
|
|
.principles { grid-template-columns: repeat(2, 1fr); }
|
|
.eid-grid { grid-template-columns: 1fr; }
|
|
.deploy-grid { grid-template-columns: 1fr; }
|
|
.token-features { grid-template-columns: 1fr; }
|
|
.arch-layer { flex-direction: column; }
|
|
.arch-layer-label { width: 100%; padding: 0.75rem 1rem; }
|
|
.section h2 { font-size: 1.75rem; }
|
|
.nav-links { gap: 0.75rem; }
|
|
.nav-links a { font-size: 0.8rem; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero h1 { font-size: 2rem; }
|
|
.principles { grid-template-columns: 1fr; }
|
|
.area-apps { grid-template-columns: 1fr; }
|
|
.oss-grid { grid-template-columns: 1fr; }
|
|
.demo-preview { grid-template-columns: 1fr; }
|
|
.app-switcher-dropdown { width: 280px; left: auto; right: -1rem; }
|
|
}
|
|
</style>
|
|
<script defer src="https://rdata.online/collect.js" data-website-id="5d3c8bac-64b6-4e57-ba66-ed31b182fba0"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ════════════════════════════════════════════════ NAV ════ -->
|
|
<nav>
|
|
<div class="nav-inner">
|
|
<div class="nav-left">
|
|
<a href="/" class="nav-brand">rStack</a>
|
|
<div class="app-switcher" id="appSwitcher">
|
|
<button class="app-switcher-trigger" id="appSwitcherTrigger" aria-expanded="false" aria-haspopup="true">
|
|
<span class="app-switcher-badge">r*</span>
|
|
<span>Apps</span>
|
|
<span class="app-switcher-arrow">▾</span>
|
|
</button>
|
|
<div class="app-switcher-dropdown" id="appSwitcherDropdown" role="menu">
|
|
<div class="app-switcher-header">
|
|
<span class="app-switcher-header-badge">r*</span>
|
|
<div class="app-switcher-header-text">
|
|
<span class="app-switcher-header-title">rStack</span>
|
|
<span class="app-switcher-header-subtitle">Open-source community infrastructure</span>
|
|
</div>
|
|
</div>
|
|
<!-- Creating -->
|
|
<div class="app-switcher-cat">Creating</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rspace.online"><span class="app-switcher-item-badge badge-teal">rS</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rSpace</span></div><div class="app-switcher-item-desc">Real-time collaborative canvas</div></div></a>
|
|
<a href="https://rspace.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rnotes.online"><span class="app-switcher-item-badge badge-amber">rN</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rNotes</span></div><div class="app-switcher-item-desc">Group note-taking & knowledge capture</div></div></a>
|
|
<a href="https://rnotes.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rpubs.online"><span class="app-switcher-item-badge badge-rose">rP</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rPubs</span></div><div class="app-switcher-item-desc">Collaborative publishing platform</div></div></a>
|
|
<a href="https://rpubs.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<!-- Planning -->
|
|
<div class="app-switcher-cat">Planning</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rcal.online"><span class="app-switcher-item-badge badge-sky">rC</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rCal</span></div><div class="app-switcher-item-desc">Collaborative scheduling & events</div></div></a>
|
|
<a href="https://rcal.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rtrips.online"><span class="app-switcher-item-badge badge-emerald">rT</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rTrips</span></div><div class="app-switcher-item-desc">Group travel planning in real time</div></div></a>
|
|
<a href="https://rtrips.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rmaps.online"><span class="app-switcher-item-badge badge-green">rM</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rMaps</span></div><div class="app-switcher-item-desc">Collaborative real-time mapping</div></div></a>
|
|
<a href="https://rmaps.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<!-- Discussing & Deciding -->
|
|
<div class="app-switcher-cat">Discussing & Deciding</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rchats.online"><span class="app-switcher-item-badge badge-indigo">rCh</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rChats</span></div><div class="app-switcher-item-desc">Encrypted community chat</div></div></a>
|
|
<a href="https://rchats.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rinbox.online"><span class="app-switcher-item-badge badge-fuchsia">rI</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rInbox</span></div><div class="app-switcher-item-desc">Shared group inbox</div></div></a>
|
|
<a href="https://rinbox.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rforum.online"><span class="app-switcher-item-badge badge-violet">rFo</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rForum</span></div><div class="app-switcher-item-desc">Self-hosted community forums</div></div></a>
|
|
<a href="https://rforum.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rchoices.online"><span class="app-switcher-item-badge badge-pink">rCo</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rChoices</span></div><div class="app-switcher-item-desc">Collaborative decision making</div></div></a>
|
|
<a href="https://rchoices.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rvote.online"><span class="app-switcher-item-badge badge-red">rV</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rVote</span></div><div class="app-switcher-item-desc">Real-time polls & governance</div></div></a>
|
|
<a href="https://rvote.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<!-- Funding & Commerce -->
|
|
<div class="app-switcher-cat">Funding & Commerce</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rfunds.online"><span class="app-switcher-item-badge badge-lime">rF</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rFunds</span></div><div class="app-switcher-item-desc">Collaborative fundraising & grants</div></div></a>
|
|
<a href="https://rfunds.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rwallet.online"><span class="app-switcher-item-badge badge-yellow">rW</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rWallet</span></div><div class="app-switcher-item-desc">Multi-chain community wallet</div></div></a>
|
|
<a href="https://rwallet.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rcart.online"><span class="app-switcher-item-badge badge-orange">rCt</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rCart</span></div><div class="app-switcher-item-desc">Group commerce & shared shopping</div></div></a>
|
|
<a href="https://rcart.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rauctions.online"><span class="app-switcher-item-badge badge-red">rA</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rAuctions</span></div><div class="app-switcher-item-desc">Live auction platform</div></div></a>
|
|
<a href="https://rauctions.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<!-- Social & Sharing -->
|
|
<div class="app-switcher-cat">Social & Sharing</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rphotos.online"><span class="app-switcher-item-badge badge-sky">rPh</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rPhotos</span></div><div class="app-switcher-item-desc">Community photo commons</div></div></a>
|
|
<a href="https://rphotos.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rnetwork.online"><span class="app-switcher-item-badge badge-blue">rNe</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rNetwork</span></div><div class="app-switcher-item-desc">Community network & social graph</div></div></a>
|
|
<a href="https://rnetwork.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rfiles.online"><span class="app-switcher-item-badge badge-cyan">rFi</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rFiles</span></div><div class="app-switcher-item-desc">Collaborative file storage</div></div></a>
|
|
<a href="https://rfiles.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rtube.online"><span class="app-switcher-item-badge badge-pink">rTu</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rTube</span></div><div class="app-switcher-item-desc">Group video platform</div></div></a>
|
|
<a href="https://rtube.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rswag.online"><span class="app-switcher-item-badge badge-purple">rSw</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rSwag</span></div><div class="app-switcher-item-desc">Community merchandise</div></div></a>
|
|
<a href="https://rswag.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://rdata.online"><span class="app-switcher-item-badge badge-purple">rD</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rData</span></div><div class="app-switcher-item-desc">Analytics & insights</div></div></a>
|
|
<a href="https://rdata.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<!-- Identity & Infrastructure -->
|
|
<div class="app-switcher-cat">Identity & Infrastructure</div>
|
|
<div class="app-switcher-item">
|
|
<a href="https://ridentity.online"><span class="app-switcher-item-badge badge-green">rID</span><div class="app-switcher-item-info"><div class="app-switcher-item-name"><span>rIDs</span></div><div class="app-switcher-item-desc">Self-sovereign identity (EncryptID)</div></div></a>
|
|
<a href="https://ridentity.online" target="_blank" rel="noopener noreferrer" class="app-switcher-ext">↗</a>
|
|
</div>
|
|
<div class="app-switcher-footer">
|
|
<a href="https://rstack.online">rstack.online — open-source community infrastructure</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="#areas">Apps</a>
|
|
<a href="#identity">Identity</a>
|
|
<a href="#self-host">Self-Host</a>
|
|
<a href="#open-source">Open Source</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ════════════════════════════════════════════════ HERO ════ -->
|
|
<div class="hero">
|
|
<span class="hero-label">Open Source · Self-Hosted · Community-Owned</span>
|
|
<h1>The community stack you actually own</h1>
|
|
<p class="subtitle">
|
|
A complete suite of open-source tools for community self-governance —
|
|
tied together with zero-knowledge identity and data sovereignty to the user.
|
|
</p>
|
|
<p class="description">
|
|
rStack combines the latest open-source tools into a cohesive platform that communities
|
|
can self-host on their own infrastructure or run on shared community servers. One login,
|
|
one data layer, twenty apps — no vendor lock-in, no surveillance, no kill switch.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a href="#areas" class="btn btn-primary">Explore the Stack</a>
|
|
<a href="#self-host" class="btn btn-secondary">Self-Host Guide</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════ PRINCIPLES ════ -->
|
|
<div class="principles">
|
|
<div class="principle">
|
|
<div class="principle-icon open">📖</div>
|
|
<h3>Open Source</h3>
|
|
<p>Every app is source-available. Read the code, fork it, audit it, contribute back. No black boxes.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="principle-icon self">🏠</div>
|
|
<h3>Self-Hosted</h3>
|
|
<p>Run on your server, a community VPS, or a Raspberry Pi. Your hardware, your rules, your data.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="principle-icon zk">🔐</div>
|
|
<h3>Zero-Knowledge Identity</h3>
|
|
<p>Passkey-based auth with on-device key derivation. The server never sees your private material.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<div class="principle-icon sov">🛡</div>
|
|
<h3>Data Sovereignty</h3>
|
|
<p>End-to-end encrypted. CRDT-synced. Your community's data stays yours — by architecture, not policy.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════ ARCHITECTURE ════ -->
|
|
<div class="section alt" id="architecture">
|
|
<div class="section-inner">
|
|
<span class="section-label purple">Architecture</span>
|
|
<h2>How the stack fits together</h2>
|
|
<p class="section-desc">
|
|
rStack isn't a monolith. It's four independent layers that compose into
|
|
something greater than the sum of their parts. Each layer can be swapped,
|
|
extended, or self-hosted independently.
|
|
</p>
|
|
|
|
<div class="arch-layers">
|
|
<div class="arch-layer apps">
|
|
<div class="arch-layer-label">App Layer</div>
|
|
<div class="arch-layer-content">
|
|
<h4>20 purpose-built apps</h4>
|
|
<p>Each app handles one job well — notes, voting, budgets, maps, chat. They share data through the sync layer below, so a vote in rVote can reference a budget in rFunds without either app knowing the other's internals.</p>
|
|
</div>
|
|
</div>
|
|
<div class="arch-layer sync">
|
|
<div class="arch-layer-label">Sync Layer</div>
|
|
<div class="arch-layer-content">
|
|
<h4>CRDT-based real-time data mesh</h4>
|
|
<p>Conflict-free replicated data types keep every app in sync — peer-to-peer, offline-capable, and eventually consistent. No central database, no single point of failure. Byzantine fault tolerant token ledger included.</p>
|
|
</div>
|
|
</div>
|
|
<div class="arch-layer identity">
|
|
<div class="arch-layer-label">Identity Layer</div>
|
|
<div class="arch-layer-content">
|
|
<h4>rIDs (EncryptID) — zero-knowledge passkeys</h4>
|
|
<p>One biometric prompt creates your identity, derives encryption/signing/DID keys on-device, and provisions a gasless smart wallet. Social recovery replaces seed phrases. One login for every app.</p>
|
|
</div>
|
|
</div>
|
|
<div class="arch-layer infra">
|
|
<div class="arch-layer-label">Infra Layer</div>
|
|
<div class="arch-layer-content">
|
|
<h4>Docker + Traefik + your hardware</h4>
|
|
<p>Every app ships as an optimized Docker container. Traefik handles routing and TLS automatically. Deploy the full stack with a single <code>docker compose up</code> on any Linux server.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════ FUNCTIONAL AREAS ════ -->
|
|
<div class="section" id="areas">
|
|
<div class="section-inner">
|
|
<span class="section-label cyan">Functional Areas</span>
|
|
<h2>What the stack does</h2>
|
|
<p class="section-desc">
|
|
Twenty apps organized into seven functional areas. Each area solves a core challenge
|
|
of community coordination. Use the apps you need — they work independently
|
|
or as an integrated suite.
|
|
</p>
|
|
|
|
<div class="areas-nav">
|
|
<a href="#area-create" class="area-pill">Create & Collaborate</a>
|
|
<a href="#area-plan" class="area-pill">Plan & Coordinate</a>
|
|
<a href="#area-comm" class="area-pill">Communicate</a>
|
|
<a href="#area-decide" class="area-pill">Decide & Govern</a>
|
|
<a href="#area-fund" class="area-pill">Fund & Transact</a>
|
|
<a href="#area-share" class="area-pill">Share & Connect</a>
|
|
<a href="#area-observe" class="area-pill">Observe & Analyze</a>
|
|
</div>
|
|
|
|
<!-- ── Create & Collaborate ───── -->
|
|
<div class="area-block area-create" id="area-create">
|
|
<div class="area-header">
|
|
<div class="area-icon">✍️</div>
|
|
<div>
|
|
<h3>Create & Collaborate</h3>
|
|
<p>The creative workspace. Infinite canvases for spatial thinking, real-time documents for group writing, and a publishing pipeline that turns drafts into print-ready books.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-apps">
|
|
<a href="https://rspace.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🌌</div>
|
|
<div><div class="app-card-name">rSpace</div><div class="app-card-domain">rspace.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Collaborative spatial canvas. The integration hub where all r-Stack tools come together on a shared, infinite workspace. Real-time multiplayer with CRDT sync.</div>
|
|
<div class="app-card-built"><span>tldraw</span><span>Y.js</span><span>WebSocket</span></div>
|
|
</a>
|
|
<a href="https://rnotes.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">📝</div>
|
|
<div><div class="app-card-name">rNotes</div><div class="app-card-domain">rnotes.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Real-time collaborative notebooks, checklists, and meeting notes. Block-based editor with end-to-end encryption and offline support.</div>
|
|
<div class="app-card-built"><span>BlockNote</span><span>Y.js</span><span>E2EE</span></div>
|
|
</a>
|
|
<a href="https://rpubs.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">📰</div>
|
|
<div><div class="app-card-name">rPubs</div><div class="app-card-domain">rpubs.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Drop in a document, get a print-ready pocket book. Four formats, Typst typesetting, instant PDF generation. From draft to published in minutes.</div>
|
|
<div class="app-card-built"><span>Typst</span><span>PDF.js</span><span>Markdown</span></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Plan & Coordinate ───── -->
|
|
<div class="area-block area-plan" id="area-plan">
|
|
<div class="area-header">
|
|
<div class="area-icon">🗺</div>
|
|
<div>
|
|
<h3>Plan & Coordinate</h3>
|
|
<p>Spatial and temporal coordination for groups. Schedule events across time zones, plan trips collaboratively, and map your community's presence across the world.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-apps">
|
|
<a href="https://rcal.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">📅</div>
|
|
<div><div class="app-card-name">rCal</div><div class="app-card-domain">rcal.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Spatiotemporal group calendar. Ten zoom levels from moments to eras, map view for event locations, lunar phases, and deep integration with other r-Stack tools.</div>
|
|
<div class="app-card-built"><span>FullCalendar</span><span>Leaflet</span><span>iCal</span></div>
|
|
</a>
|
|
<a href="https://rtrips.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">✈️</div>
|
|
<div><div class="app-card-name">rTrips</div><div class="app-card-domain">rtrips.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Group trip planning. Itineraries, destinations, packing lists, and expenses — all linked across rMaps, rFunds, and rNotes in real time.</div>
|
|
<div class="app-card-built"><span>Leaflet</span><span>CRDTs</span><span>Offline</span></div>
|
|
</a>
|
|
<a href="https://rmaps.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🗺️</div>
|
|
<div><div class="app-card-name">rMaps</div><div class="app-card-domain">rmaps.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Collaborative real-time mapping. Pin locations, draw regions, plan routes, and visualize your community's spatial footprint with open map tiles.</div>
|
|
<div class="app-card-built"><span>Leaflet</span><span>OpenStreetMap</span><span>GeoJSON</span></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Communicate ───── -->
|
|
<div class="area-block area-comm" id="area-comm">
|
|
<div class="area-header">
|
|
<div class="area-icon">💬</div>
|
|
<div>
|
|
<h3>Communicate</h3>
|
|
<p>Real-time and asynchronous communication channels. Encrypted chat for immediate coordination, shared inboxes for email workflows, and forums for long-form discourse.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-apps">
|
|
<a href="https://rchats.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">💬</div>
|
|
<div><div class="app-card-name">rChats</div><div class="app-card-domain">rchats.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">End-to-end encrypted community chat with self-sovereign identity. Channels, threads, and direct messages — all protected by EncryptID passkeys.</div>
|
|
<div class="app-card-built"><span>Matrix</span><span>E2EE</span><span>WebSocket</span></div>
|
|
</a>
|
|
<a href="https://rinbox.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">✉️</div>
|
|
<div><div class="app-card-name">rInbox</div><div class="app-card-domain">rinbox.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Shared group inbox with multi-sig approval workflows. Self-hosted email for communities with entity extraction and graph-based discourse threading.</div>
|
|
<div class="app-card-built"><span>SMTP</span><span>NLP</span><span>Multi-sig</span></div>
|
|
</a>
|
|
<a href="https://rforum.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🗣</div>
|
|
<div><div class="app-card-name">rForum</div><div class="app-card-domain">rforum.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Self-hosted Discourse forums. Automated provisioning, DNS, SSL, and progress tracking. Full community discussion platform with trust levels and moderation.</div>
|
|
<div class="app-card-built"><span>Discourse</span><span>Docker</span><span>Auto-SSL</span></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Decide & Govern ───── -->
|
|
<div class="area-block area-decide" id="area-decide">
|
|
<div class="area-header">
|
|
<div class="area-icon">🗳</div>
|
|
<div>
|
|
<h3>Decide & Govern</h3>
|
|
<p>Democratic decision-making tools for any group. From lightweight polls to weighted conviction voting, with cryptographically signed ballots that are verifiable but private.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-apps">
|
|
<a href="https://rchoices.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🔀</div>
|
|
<div><div class="app-card-name">rChoices</div><div class="app-card-domain">rchoices.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Collaborative decision making. Structured frameworks for evaluating options, weighing trade-offs, and reaching consensus as a group.</div>
|
|
<div class="app-card-built"><span>CRDTs</span><span>Real-time</span></div>
|
|
</a>
|
|
<a href="https://rvote.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🗳️</div>
|
|
<div><div class="app-card-name">rVote</div><div class="app-card-domain">rvote.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Community governance. Create polls, weighted votes, and conviction-style proposals. Cryptographically signed ballots tied to EncryptID for verifiable, private voting.</div>
|
|
<div class="app-card-built"><span>ZK Proofs</span><span>CRDT Ledger</span><span>ERC-4337</span></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Fund & Transact ───── -->
|
|
<div class="area-block area-fund" id="area-fund">
|
|
<div class="area-header">
|
|
<div class="area-icon">💰</div>
|
|
<div>
|
|
<h3>Fund & Transact</h3>
|
|
<p>Community economics without crypto literacy. Pool resources, track budgets, run auctions, and manage treasuries — all through the same biometric login, with smart wallets handling the complexity underneath.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-apps">
|
|
<a href="https://rwallet.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">💰</div>
|
|
<div><div class="app-card-name">rWallet</div><div class="app-card-domain">rwallet.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Community treasury management. Track shared resources, contributions, and funding flows with smart wallets. Paymaster-sponsored gasless transactions.</div>
|
|
<div class="app-card-built"><span>ERC-4337</span><span>Base L2</span><span>USDC</span></div>
|
|
</a>
|
|
<a href="https://rfunds.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">📊</div>
|
|
<div><div class="app-card-name">rFunds</div><div class="app-card-domain">rfunds.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Budget tracking and expense management. Split costs, allocate funds, and maintain transparent community finances with full audit trails.</div>
|
|
<div class="app-card-built"><span>CRDT Ledger</span><span>Multi-sig</span></div>
|
|
</a>
|
|
<a href="https://rcart.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🛒</div>
|
|
<div><div class="app-card-name">rCart</div><div class="app-card-domain">rcart.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Group purchasing and crowdfunding. Pool resources, compare options, and fund community projects together. Accepts community tokens as payment.</div>
|
|
<div class="app-card-built"><span>BFT-CRDT</span><span>Tokens</span></div>
|
|
</a>
|
|
<a href="https://rauctions.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🔨</div>
|
|
<div><div class="app-card-name">rAuctions</div><div class="app-card-domain">rauctions.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Cosmolocal auctions. List items, bid with USDC on Base, and settle peer-to-peer with EncryptID identity verification.</div>
|
|
<div class="app-card-built"><span>Base L2</span><span>USDC</span><span>P2P</span></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Share & Connect ───── -->
|
|
<div class="area-block area-share" id="area-share">
|
|
<div class="area-header">
|
|
<div class="area-icon">🌐</div>
|
|
<div>
|
|
<h3>Share & Connect</h3>
|
|
<p>Media, identity, and relationships. Store and share files with end-to-end encryption, host video without algorithms, map your community's social graph, and even print merch on demand.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-apps">
|
|
<a href="https://rphotos.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">📸</div>
|
|
<div><div class="app-card-name">rPhotos</div><div class="app-card-domain">rphotos.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Community photo commons. Shared albums, AI-powered tagging, facial recognition, and location mapping — all self-hosted with full ownership of your memories.</div>
|
|
<div class="app-card-built"><span>Immich</span><span>ML Pipeline</span><span>pgvector</span></div>
|
|
</a>
|
|
<a href="https://rnetwork.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🕸</div>
|
|
<div><div class="app-card-name">rNetwork</div><div class="app-card-domain">rnetwork.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Community directory and relationship mapping. See who's connected, discover collaborators, and grow your network with DID-based portable identity.</div>
|
|
<div class="app-card-built"><span>Social Graph</span><span>DID</span><span>WebSocket</span></div>
|
|
</a>
|
|
<a href="https://rfiles.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">📁</div>
|
|
<div><div class="app-card-name">rFiles</div><div class="app-card-domain">rfiles.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">End-to-end encrypted file storage. Your community's documents, images, and media — encrypted with keys only community members hold. No admin backdoor.</div>
|
|
<div class="app-card-built"><span>E2EE</span><span>S3-compat</span><span>WebDAV</span></div>
|
|
</a>
|
|
<a href="https://rtube.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">🎬</div>
|
|
<div><div class="app-card-name">rTube</div><div class="app-card-domain">rtube.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Community video sharing and streaming. Host, curate, and discuss video content without platform algorithms, ads, or surveillance.</div>
|
|
<div class="app-card-built"><span>PeerTube</span><span>HLS</span><span>ActivityPub</span></div>
|
|
</a>
|
|
<a href="https://rswag.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">👕</div>
|
|
<div><div class="app-card-name">rSwag</div><div class="app-card-domain">rswag.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Community merchandise on demand. Design, customize, and order stickers, shirts, and more with AI-powered design tools.</div>
|
|
<div class="app-card-built"><span>Print API</span><span>AI Design</span></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Observe & Analyze ───── -->
|
|
<div class="area-block area-observe" id="area-observe">
|
|
<div class="area-header">
|
|
<div class="area-icon">📊</div>
|
|
<div>
|
|
<h3>Observe & Analyze</h3>
|
|
<p>Privacy-respecting analytics that your community controls. No third-party trackers, no data brokers, no surveillance capitalism.</p>
|
|
</div>
|
|
</div>
|
|
<div class="area-apps">
|
|
<a href="https://rdata.online" class="app-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="app-card-header">
|
|
<div class="app-card-icon">📈</div>
|
|
<div><div class="app-card-name">rData</div><div class="app-card-domain">rdata.online</div></div>
|
|
</div>
|
|
<div class="app-card-desc">Self-hosted analytics dashboard. Lightweight, cookie-free, GDPR-compliant web analytics. See what matters without harvesting user data.</div>
|
|
<div class="app-card-built"><span>Plausible</span><span>No cookies</span><span>GDPR</span></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════ IDENTITY ════ -->
|
|
<div class="section alt" id="identity">
|
|
<div class="section-inner">
|
|
<span class="section-label green">Identity Layer</span>
|
|
<h2>rIDs — powered by EncryptID</h2>
|
|
<p class="section-desc">
|
|
A single identity layer that turns a fingerprint or face scan into full-stack
|
|
access — encrypted storage, signed votes, community treasury, and more —
|
|
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>
|
|
Built on <span class="hl">WebAuthn passkeys</span> — the same standard
|
|
behind Face ID and fingerprint unlock. Your identity is bound to your device's
|
|
secure hardware (TPM / Secure Enclave). Nothing to type, nothing to remember,
|
|
nothing that can be phished.
|
|
</p>
|
|
</div>
|
|
<div class="eid-card">
|
|
<div class="eid-card-icon">🏠</div>
|
|
<h3>Local-First Key Derivation</h3>
|
|
<p>
|
|
Authentication derives a full set of cryptographic keys <span class="hl">entirely on your device</span>
|
|
using HKDF. Encryption keys for files, signing keys for votes, DID keys for portable
|
|
identity — all generated locally. The server is a relay, never an authority.
|
|
</p>
|
|
</div>
|
|
<div class="eid-card">
|
|
<div class="eid-card-icon">🛡</div>
|
|
<h3>Social Recovery</h3>
|
|
<p>
|
|
Lost your phone? Designate trusted guardians (friends, family, community leaders).
|
|
Any 3 of 5 guardians can approve recovery after a 48-hour time-lock. No seed phrases,
|
|
no email resets. 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>
|
|
Every user gets an <span class="hl">ERC-4337</span> smart wallet — without
|
|
ever seeing a wallet address or gas fee. Your passkey <em>is</em> your wallet signer.
|
|
A paymaster sponsors fees. Session keys allow daily operations with a single biometric
|
|
prompt per session.
|
|
</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>
|
|
|
|
<!-- ════════════════════════════════════════════════ TOKENS ════ -->
|
|
<div class="section" id="tokens">
|
|
<div class="section-inner">
|
|
<span class="section-label amber">Token Layer</span>
|
|
<h2>Community token issuance</h2>
|
|
<p class="section-desc">
|
|
Any r-Stack app can issue tokens through the shared CRDT data layer —
|
|
no smart contract deployment, no gas fees, no blockchain expertise required.
|
|
Bridge to on-chain when you're ready.
|
|
</p>
|
|
|
|
<div class="token-features">
|
|
<div class="token-card" style="grid-column: 1 / -1;">
|
|
<h3>BFT-CRDT Tokens</h3>
|
|
<p>
|
|
Tokens are built on <span class="hl">Byzantine Fault Tolerant CRDTs</span> —
|
|
the same conflict-free data structures that power real-time sync across every app.
|
|
They replicate peer-to-peer, resolve conflicts automatically, and maintain a
|
|
consistent ledger without a central mint. When ready, the CRDT ledger can bridge
|
|
to an ERC-20 on any EVM chain through the Account Abstraction wallet.
|
|
</p>
|
|
</div>
|
|
<div class="token-card">
|
|
<h3>Membership & access tokens</h3>
|
|
<p>
|
|
Gate access to private canvases, files, or voting channels. Revoke by removing
|
|
the token. Permissions propagate in real-time through the CRDT mesh.
|
|
</p>
|
|
</div>
|
|
<div class="token-card">
|
|
<h3>Contribution credits</h3>
|
|
<p>
|
|
Reward participation: meetings attended, tasks completed, content contributed.
|
|
Credits accumulate and can be redeemed for governance weight, budget allocation,
|
|
or marketplace purchases.
|
|
</p>
|
|
</div>
|
|
<div class="token-card">
|
|
<h3>Fundraising & grants</h3>
|
|
<p>
|
|
Distribute project tokens to supporters. Track contributions transparently through
|
|
rFunds and vote on allocation through rVote. Full history auditable by token holders.
|
|
</p>
|
|
</div>
|
|
<div class="token-card">
|
|
<h3>Bridge to on-chain</h3>
|
|
<p>
|
|
Start with zero-friction off-chain CRDT tokens. When you need DeFi composability
|
|
or cross-community exchange, bridge to ERC-20 with a single action through
|
|
the smart wallet.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════ OPEN SOURCE ════ -->
|
|
<div class="section alt" id="open-source">
|
|
<div class="section-inner">
|
|
<span class="section-label cyan">Foundations</span>
|
|
<h2>Built on the best of open source</h2>
|
|
<p class="section-desc">
|
|
rStack doesn't reinvent wheels. Every app is assembled from battle-tested
|
|
open-source projects — the latest and greatest tools, composed into
|
|
a cohesive platform.
|
|
</p>
|
|
|
|
<div class="oss-grid">
|
|
<div class="oss-card">
|
|
<h4>tldraw</h4>
|
|
<p>Infinite canvas engine powering rSpace. Real-time multiplayer drawing, diagramming, and spatial thinking.</p>
|
|
<span class="oss-tag">Canvas</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Y.js / CRDTs</h4>
|
|
<p>Conflict-free replicated data types for real-time sync. Peer-to-peer, offline-capable, eventually consistent.</p>
|
|
<span class="oss-tag">Sync Layer</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>WebAuthn</h4>
|
|
<p>W3C standard for passwordless authentication. Hardware-backed passkeys via TPM and Secure Enclave.</p>
|
|
<span class="oss-tag">Identity</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Discourse</h4>
|
|
<p>The leading open-source discussion platform. Trust levels, moderation, and rich threading for rForum.</p>
|
|
<span class="oss-tag">Community</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Leaflet + OSM</h4>
|
|
<p>Open-source mapping with OpenStreetMap tiles. Powers rMaps, rCal's spatial view, and rTrips route planning.</p>
|
|
<span class="oss-tag">Mapping</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Matrix Protocol</h4>
|
|
<p>Decentralized, end-to-end encrypted messaging standard. Interoperable federation for rChats.</p>
|
|
<span class="oss-tag">Messaging</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Typst</h4>
|
|
<p>Modern typesetting system that's fast, ergonomic, and beautiful. Powers rPubs' document pipeline.</p>
|
|
<span class="oss-tag">Publishing</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Immich</h4>
|
|
<p>High-performance self-hosted photo management. AI-powered tagging, facial recognition, and mobile backup. Powers rPhotos.</p>
|
|
<span class="oss-tag">Photos</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>PeerTube</h4>
|
|
<p>Federated video hosting with ActivityPub. No algorithms, no ads, no surveillance. Powers rTube.</p>
|
|
<span class="oss-tag">Video</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Plausible</h4>
|
|
<p>Privacy-friendly analytics. No cookies, GDPR compliant, lightweight. Powers rData.</p>
|
|
<span class="oss-tag">Analytics</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>ERC-4337</h4>
|
|
<p>Account Abstraction standard for smart wallets. Gasless transactions, session keys, and social recovery.</p>
|
|
<span class="oss-tag">Wallet</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Docker + Traefik</h4>
|
|
<p>Container orchestration with automatic service discovery and TLS. The deployment backbone of every app.</p>
|
|
<span class="oss-tag">Infrastructure</span>
|
|
</div>
|
|
<div class="oss-card">
|
|
<h4>Hono / Next.js</h4>
|
|
<p>Edge-first web frameworks. Fast, lightweight, and deployable anywhere — from Cloudflare Workers to Docker.</p>
|
|
<span class="oss-tag">Framework</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════ SELF-HOST ════ -->
|
|
<div class="section" id="self-host">
|
|
<div class="section-inner">
|
|
<span class="section-label orange">Deployment</span>
|
|
<h2>Self-host your stack</h2>
|
|
<p class="section-desc">
|
|
Every r-Stack app ships as a Docker container. Clone, configure, deploy.
|
|
The whole suite runs on a VPS, a home server, or community-shared infrastructure.
|
|
</p>
|
|
|
|
<div class="flow-box" style="margin-bottom: 2.5rem;">
|
|
<pre>
|
|
$ git clone https://git.rstack.online/rstack
|
|
$ cd rstack
|
|
$ cp .env.example .env # set your domain + secrets
|
|
$ docker compose up -d # that's it
|
|
|
|
✓ rSpace → space.yourdomain.org
|
|
✓ rNotes → notes.yourdomain.org
|
|
✓ rVote → vote.yourdomain.org
|
|
✓ rFunds → funds.yourdomain.org
|
|
✓ rFiles → files.yourdomain.org
|
|
✓ rMaps → maps.yourdomain.org
|
|
✓ rIDs → id.yourdomain.org
|
|
...and every other app in the suite
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="deploy-grid">
|
|
<div class="deploy-card">
|
|
<h3>Your server, your rules</h3>
|
|
<p>
|
|
No SaaS subscription, no per-seat pricing, no usage caps. Run the entire stack
|
|
for your 5-person co-op or your 500-person organization on a single $10/month VPS.
|
|
Scale by adding hardware, not upgrading a pricing tier.
|
|
</p>
|
|
</div>
|
|
<div class="deploy-card">
|
|
<h3>Community infrastructure</h3>
|
|
<p>
|
|
Don't want to manage a server? Join a community-hosted instance. Multiple
|
|
organizations can share infrastructure costs while maintaining isolated,
|
|
encrypted data spaces. Federate across instances when you're ready.
|
|
</p>
|
|
</div>
|
|
<div class="deploy-card">
|
|
<h3>Fork and customize</h3>
|
|
<p>
|
|
Need a custom voting algorithm? A different map provider? A branded theme?
|
|
Fork the repo, change what you need, deploy. Every app is designed to be
|
|
modified. No permission required.
|
|
</p>
|
|
</div>
|
|
<div class="deploy-card">
|
|
<h3>No vendor, no kill switch</h3>
|
|
<p>
|
|
SaaS tools disappear when the company pivots or shuts down. Self-hosted
|
|
open-source tools keep running as long as you want them to. Your community's
|
|
infrastructure doesn't depend on anyone else's business model.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════ DEMO ════ -->
|
|
<div class="section alt" id="demo">
|
|
<div class="section-inner">
|
|
<span class="section-label rose">Interactive</span>
|
|
<h2>See it in action</h2>
|
|
<p class="section-desc">
|
|
Explore each app independently or see how they work together as a suite.
|
|
Every app is live and ready to try.
|
|
</p>
|
|
|
|
<div class="demo-preview">
|
|
<a href="https://rspace.online" class="demo-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="demo-card-icon">🌌</div>
|
|
<h3>Open a Canvas</h3>
|
|
<p>Jump into rSpace and start collaborating on an infinite, real-time canvas</p>
|
|
</a>
|
|
<a href="https://rvote.online" class="demo-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="demo-card-icon">🗳</div>
|
|
<h3>Cast a Vote</h3>
|
|
<p>Create a poll in rVote and see cryptographic ballot signing in action</p>
|
|
</a>
|
|
<a href="https://rpubs.online" class="demo-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="demo-card-icon">📰</div>
|
|
<h3>Publish a Book</h3>
|
|
<p>Drop a document into rPubs and generate a print-ready PDF in seconds</p>
|
|
</a>
|
|
<a href="https://rcal.online" class="demo-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="demo-card-icon">📅</div>
|
|
<h3>Plan Together</h3>
|
|
<p>Explore rCal's spatiotemporal calendar with ten zoom levels</p>
|
|
</a>
|
|
<a href="https://rmaps.online" class="demo-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="demo-card-icon">🗺</div>
|
|
<h3>Map Your World</h3>
|
|
<p>Pin locations and draw regions on a collaborative open-source map</p>
|
|
</a>
|
|
<a href="https://rphotos.online" class="demo-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="demo-card-icon">📸</div>
|
|
<h3>Browse Photos</h3>
|
|
<p>Explore the community photo commons with AI-powered search and shared albums</p>
|
|
</a>
|
|
<a href="https://ridentity.online" class="demo-card" target="_blank" rel="noopener noreferrer">
|
|
<div class="demo-card-icon">🔐</div>
|
|
<h3>Try rIDs</h3>
|
|
<p>Register with a passkey and see zero-knowledge identity in action</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════ FOOTER ════ -->
|
|
<footer>
|
|
<div class="footer-apps">
|
|
<span style="font-weight:500;color:#64748b;">r* Ecosystem</span>
|
|
<a href="https://rspace.online">rSpace</a>
|
|
<a href="https://rmaps.online">rMaps</a>
|
|
<a href="https://rnotes.online">rNotes</a>
|
|
<a href="https://rvote.online">rVote</a>
|
|
<a href="https://rfunds.online">rFunds</a>
|
|
<a href="https://rtrips.online">rTrips</a>
|
|
<a href="https://rcart.online">rCart</a>
|
|
<a href="https://rchoices.online">rChoices</a>
|
|
<a href="https://rwallet.online">rWallet</a>
|
|
<a href="https://rfiles.online">rFiles</a>
|
|
<a href="https://rtube.online">rTube</a>
|
|
<a href="https://rcal.online">rCal</a>
|
|
<a href="https://rnetwork.online">rNetwork</a>
|
|
<a href="https://rinbox.online">rInbox</a>
|
|
<a href="https://rchats.online">rChats</a>
|
|
<a href="https://rphotos.online">rPhotos</a>
|
|
<a href="https://ridentity.online">rIDs</a>
|
|
<a href="https://rstack.online" style="color:#94a3b8;">rStack</a>
|
|
<a href="https://rauctions.online">rAuctions</a>
|
|
<a href="https://rpubs.online">rPubs</a>
|
|
<a href="https://rforum.online">rForum</a>
|
|
<a href="https://rswag.online">rSwag</a>
|
|
<a href="https://rdata.online">rData</a>
|
|
</div>
|
|
<p>rStack — open source, self-hosted, community-owned</p>
|
|
</footer>
|
|
|
|
<!-- ════════════════════════════════════════════════ JS ════ -->
|
|
<script>
|
|
(function() {
|
|
// App Switcher
|
|
var trigger = document.getElementById('appSwitcherTrigger');
|
|
var dropdown = document.getElementById('appSwitcherDropdown');
|
|
var switcher = document.getElementById('appSwitcher');
|
|
|
|
trigger.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
var isOpen = dropdown.classList.contains('open');
|
|
dropdown.classList.toggle('open');
|
|
trigger.setAttribute('aria-expanded', !isOpen);
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (!switcher.contains(e.target)) {
|
|
dropdown.classList.remove('open');
|
|
trigger.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
dropdown.classList.remove('open');
|
|
trigger.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
|
|
dropdown.querySelectorAll('.app-switcher-item a:first-child').forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
dropdown.classList.remove('open');
|
|
trigger.setAttribute('aria-expanded', 'false');
|
|
});
|
|
});
|
|
|
|
// Smooth scroll for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
|
anchor.addEventListener('click', function(e) {
|
|
var target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
e.preventDefault();
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|