style: apply vault1984.css throughout all pages
- Tailwind removed from all 6 pages (zero remaining references) - vault1984.css extended: code-block, feature-icon, checklist, footer, prose, badge, price-card, gradient-text, animations, scroll - index.html: full rewrite preserving hero/swarm SVGs and geo JS - pricing.html: price-card, checklist classes, FAQ in prose - install.html: step layout with step-num circles, code-block - privacy.html / terms.html: prose layout, legal content updated (L1/L2 -> Sealed/Agent) - sources.html: grid-2 with card class - All pages: standard nav + footer, vault1984.css only
This commit is contained in:
James
parent
3e18f04b21
commit
cf7763f89d
483
index.html
483
index.html
|
|
@ -3,93 +3,57 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>vault1984 — AI-native password manager with field-level encryption</title>
|
||||
<meta name="description" content="Field-level two-tier encryption for password managers that live alongside AI assistants. Your AI gets what it needs. Your secrets stay yours.">
|
||||
<link rel="stylesheet" href="/tailwind.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<title>vault1984 — AI-native password manager</title>
|
||||
<meta name="description" content="Field-level encryption for password managers that live alongside AI assistants. Your AI gets what it needs. Your secrets stay yours.">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: #0A1628; }
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #22C55E 0%, #4ade80 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.card-hover {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
html { scroll-behavior: smooth; }
|
||||
@keyframes pulse-ring {
|
||||
0% { transform: scale(0.8); opacity: 1; }
|
||||
100% { transform: scale(2.5); opacity: 0; }
|
||||
}
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.15); }
|
||||
}
|
||||
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
|
||||
.pulse-ring { animation: pulse-ring 2s ease-out infinite; }
|
||||
.pulse-ring-2 { animation: pulse-ring 2s ease-out infinite 0.5s; }
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
<style>
|
||||
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
|
||||
.hero-grid svg { max-width:480px; width:100%; }
|
||||
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
|
||||
.feature-card { border-radius:var(--radius); border:1px solid var(--border); padding:2rem; background:rgba(100,140,200,0.08); transition:transform 0.2s,box-shadow 0.2s; }
|
||||
.feature-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
|
||||
.feature-card h3 { margin-bottom:0.75rem; }
|
||||
.tier-card { border-radius:var(--radius); border:1px solid; padding:2rem; }
|
||||
.tier-card.agent { border-color:rgba(34,197,94,0.3); background:rgba(34,197,94,0.05); }
|
||||
.tier-card.sealed { border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.05); }
|
||||
.tier-label { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-mono); font-size:0.75rem; font-weight:600; padding:0.25rem 0.625rem; border-radius:9999px; margin-bottom:1.25rem; }
|
||||
.tier-label.agent { background:rgba(34,197,94,0.1); color:var(--accent); }
|
||||
.tier-label.sealed{ background:rgba(239,68,68,0.1); color:var(--red); }
|
||||
.swarm-section { background:rgba(100,140,200,0.04); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
|
||||
.code-inline { background:rgba(0,0,0,0.35); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; font-family:var(--font-mono); font-size:0.8125rem; overflow-x:auto; line-height:1.7; }
|
||||
</style>
|
||||
<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>">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
<body class="font-sans text-gray-300 antialiased">
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">vault<span class="n">1984</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted.html" class="nav-link">Hosted</a>
|
||||
<a href="/install.html" class="nav-link">Self-host</a>
|
||||
<a href="#" class="nav-link btn btn-ghost">Sign in</a>
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<a href="/" class="font-mono font-bold text-3xl text-white tracking-tight leading-none">vault<span class="text-accent font-mono">1984</span></a>
|
||||
<div class="hidden md:flex items-center gap-6 text-sm">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
|
||||
<a href="/hosted" class="font-semibold transition-colors flex items-center gap-1.5" style="color:#D4AF37"><span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:#D4AF37;animation:hostedPulse 2s ease-in-out infinite"></span>Hosted</a>
|
||||
<a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a>
|
||||
<a href="#" class="border border-gray-600 text-gray-300 hover:border-gray-400 hover:text-white px-4 py-1.5 rounded-lg transition-colors text-sm">Sign in</a>
|
||||
<a href="/pricing.html" class="bg-accent hover:bg-accent-hover text-black font-medium px-4 py-1.5 rounded-lg transition-colors text-sm">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md">
|
||||
<div class="px-6 py-4 space-y-3">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="block text-gray-400 hover:text-white">GitHub</a>
|
||||
<a href="/hosted" class="block font-semibold" style="color:#D4AF37">✦ Hosted</a>
|
||||
<a href="/install.html" class="block text-gray-400 hover:text-white">Self-host</a>
|
||||
<a href="#" class="block text-gray-400 hover:text-white">Sign in</a>
|
||||
<a href="/pricing.html" class="block bg-accent hover:bg-accent-hover text-black font-medium px-4 py-2 rounded-lg text-center">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="pt-32 pb-20 px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<!-- Hero -->
|
||||
<div class="section container">
|
||||
<div class="hero-grid">
|
||||
<div>
|
||||
<p class="text-sm font-mono text-green-400 mb-6 tracking-widest uppercase opacity-75">George Orwell — 1984</p>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-[3.25rem] font-bold text-white leading-tight tracking-tight font-mono">
|
||||
"If you want to keep a secret, you must also hide it from yourself."
|
||||
</h1>
|
||||
<p class="mt-6 text-lg text-gray-300 leading-relaxed max-w-xl">
|
||||
We did. Your L2 key is derived in your browser from your Touch ID. Our servers have never seen it. They could not decrypt your private fields even if they wanted to. Or anybody else.
|
||||
</p>
|
||||
<div class="mt-8 flex flex-wrap items-center gap-4">
|
||||
<a href="/pricing.html" class="bg-accent hover:bg-accent-hover text-black font-semibold px-6 py-3 rounded-lg transition-colors">
|
||||
Get hosted — $12/yr
|
||||
</a>
|
||||
<a href="/install.html" class="text-accent hover:text-white font-medium transition-colors">
|
||||
Self-host free →
|
||||
</a>
|
||||
<p class="label accent mb-6">George Orwell — 1984</p>
|
||||
<h1 class="mb-6">"If you want to keep a secret, you must also hide it from yourself."</h1>
|
||||
<p class="lead mb-6">We did. Your Sealed key is derived in your browser from your Touch ID. Our servers have never seen it. They could not decrypt your private fields even if they wanted to. Or anybody else.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:1rem">
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
<a href="/install.html" class="btn btn-ghost">Self-host free →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:center">
|
||||
<!-- Hero SVG: L1/L2 split diagram -->
|
||||
<div class="flex justify-center">
|
||||
<svg viewBox="0 0 480 380" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-md">
|
||||
|
|
@ -177,202 +141,139 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<hr class="divider">
|
||||
|
||||
<!-- The Problem -->
|
||||
<section class="py-20 px-6 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-4">The problem</h2>
|
||||
<p class="text-gray-400 text-center mb-14 max-w-2xl mx-auto">Every password manager was built before AI agents existed. Now they need to catch up.</p>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-danger/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
|
||||
<!-- The Problem -->
|
||||
<div class="section container">
|
||||
<h2 class="mb-4" style="text-align:center">The problem</h2>
|
||||
<p class="lead mb-12" style="text-align:center;max-width:640px;margin-left:auto;margin-right:auto">Every password manager was built before AI agents existed. Now they need to catch up.</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon red"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg></div>
|
||||
<h3>All-or-nothing is broken</h3>
|
||||
<p>All others give your AI agent access to everything in your vault, or nothing at all. Your AI needs your GitHub token — it shouldn't also see your passport number.</p>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">All-or-nothing is broken</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">All others give your AI agent access to everything in your vault, or nothing at all. There's no middle ground. Your AI needs your GitHub token — it shouldn't also see your passport number.</p>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon red"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
|
||||
<h3>Policy isn't security</h3>
|
||||
<p>"AI-safe" vaults still decrypt everything server-side. If the server can read it, it's not truly private. Math beats policy every time.</p>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-danger/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">Policy isn't security</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">"AI-safe" vaults still decrypt everything server-side. They rely on access policies that can be overridden, misconfigured, or bypassed. If the server can read it, it's not truly private.</p>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-danger/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">Agents need credentials — and 2FA codes</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Your AI can't log in to a service, get past two-factor authentication, or rotate API keys without credential access. vault<span class="text-accent font-mono">1984</span> lets it do all three — without exposing your credit card or passport to the same pipeline.</p>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon red"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div>
|
||||
<h3>Agents need credentials — and 2FA</h3>
|
||||
<p>Your AI can't log in, pass two-factor, or rotate keys without access. vault<span class="vaultname" style="font-size:inherit"><span class="n">1984</span></span> lets it do all three — without exposing your credit card to the same pipeline.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- How it works — EA analogy -->
|
||||
<section class="py-20 px-6 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="max-w-3xl mx-auto text-center mb-14">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-8">How it works</h2>
|
||||
<blockquote class="text-2xl md:text-3xl font-semibold text-white leading-snug">
|
||||
<hr class="divider">
|
||||
|
||||
<!-- How it works -->
|
||||
<div class="section container">
|
||||
<div style="max-width:800px;margin:0 auto;text-align:center">
|
||||
<h2 class="mb-6">How it works</h2>
|
||||
<blockquote style="font-size:clamp(1.25rem,2.5vw,1.875rem);font-weight:700;color:var(--text);line-height:1.3;margin-bottom:1.5rem">
|
||||
"Your assistant can book your flights.<br>
|
||||
<span class="gradient-text">Not read your diary.</span>"
|
||||
</blockquote>
|
||||
<p class="mt-6 text-gray-400">Your passwords are stored on the vault server — yours to self-host, or ours to run. Every field is encrypted. But some fields get a second lock. That second key is derived from your fingerprint and only exists in your browser. The server holds the safe. Only you hold that key.</p>
|
||||
<p class="lead mb-8">Every field is encrypted. But some get a second lock. That second key is derived from your fingerprint and only exists in your browser. We hold the safe. Only you hold that key.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
<!-- L1 -->
|
||||
<div class="rounded-xl border border-accent/30 bg-accent/5 p-8">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<span class="text-xs font-mono font-semibold text-accent bg-accent/10 px-2.5 py-1 rounded">L1</span>
|
||||
<span class="text-sm font-semibold text-accent">AI-readable</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-5">Encrypted at rest, decryptable by the vault server. Your AI agent reads these via MCP.</p>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
API keys & tokens
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
SSH keys
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
TOTP 2FA codes — AI generates them for you (no more copy-paste from your phone)
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
OAuth tokens
|
||||
</li>
|
||||
<div class="grid-2" style="max-width:900px;margin:0 auto">
|
||||
<div class="tier-card agent">
|
||||
<span class="tier-label agent">Agent fields</span>
|
||||
<h3 class="mb-3">AI-readable</h3>
|
||||
<p class="mb-4" style="font-size:0.9rem">Encrypted at rest, decryptable by the vault server. Your AI agent reads these via MCP.</p>
|
||||
<ul class="checklist">
|
||||
<li>API keys & tokens</li>
|
||||
<li>SSH keys</li>
|
||||
<li>TOTP 2FA codes — AI generates them for you</li>
|
||||
<li>OAuth tokens</li>
|
||||
<li>Structured notes</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- L2 -->
|
||||
<div class="rounded-xl border border-danger/30 bg-danger/5 p-8">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<span class="text-xs font-mono font-semibold text-danger bg-danger/10 px-2.5 py-1 rounded">L2</span>
|
||||
<span class="text-sm font-semibold text-danger">Touch ID only</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-5">Encrypted client-side with WebAuthn PRF. The server never sees the plaintext. Ever.</p>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-danger flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
Credit card numbers
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-danger flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
CVV
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-danger flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
Passport & SSN
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-danger flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||||
Private signing keys
|
||||
</li>
|
||||
<div class="tier-card sealed">
|
||||
<span class="tier-label sealed">Sealed fields</span>
|
||||
<h3 class="mb-3">Touch ID only</h3>
|
||||
<p class="mb-4" style="font-size:0.9rem">Encrypted client-side with WebAuthn PRF. The server never sees the plaintext. Ever.</p>
|
||||
<ul class="checklist red">
|
||||
<li>Credit card numbers</li>
|
||||
<li>CVV</li>
|
||||
<li>Passport & SSN</li>
|
||||
<li>Private signing keys</li>
|
||||
<li>Private notes</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<hr class="divider">
|
||||
|
||||
<!-- Key Features -->
|
||||
<section class="py-20 px-6 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-4">Built different</h2>
|
||||
<p class="text-gray-400 text-center mb-14 max-w-2xl mx-auto">Not another password manager with an AI checkbox. The architecture is the feature.</p>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/></svg>
|
||||
<!-- Features -->
|
||||
<div class="section container">
|
||||
<h2 class="mb-4" style="text-align:center">Built different</h2>
|
||||
<p class="lead mb-10" style="text-align:center;max-width:600px;margin-left:auto;margin-right:auto">Not another password manager with an AI checkbox. The architecture is the feature.</p>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/></svg></div>
|
||||
<h3>Field-level AI visibility</h3>
|
||||
<p>Each field has its own encryption tier. Your AI reads the username, not the CVV. Same entry, different access.</p>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">Field-level AI visibility</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Each field in an entry has its own encryption tier. Your AI reads the username, not the CVV. Same entry, different access.</p>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"/></svg></div>
|
||||
<h3>WebAuthn PRF</h3>
|
||||
<p>Sealed encryption uses WebAuthn PRF — a cryptographic key derived from your biometric hardware. Math, not policy. We literally cannot decrypt it.</p>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"/></svg>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
|
||||
<h3>AI-powered 2FA</h3>
|
||||
<p>Store TOTP secrets as Agent fields. Your AI generates time-based codes on demand via MCP — no more switching to your phone.</p>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">WebAuthn PRF</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">L2 encryption uses WebAuthn PRF — a cryptographic key derived from your biometric hardware. Math, not policy. The server literally cannot decrypt it.</p>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
|
||||
<h3>Scoped MCP tokens</h3>
|
||||
<p>Create separate MCP tokens per agent. Each token sees only its designated entries. Compromise one, the rest stay clean.</p>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg></div>
|
||||
<h3>One binary, one file</h3>
|
||||
<p>No Docker. No Postgres. No Redis. One Go binary, one SQLite file. Runs on a Raspberry Pi. Runs on a $4/month VPS.</p>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">AI-powered 2FA</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Store TOTP secrets as L1 fields. Your AI agent generates time-based codes on demand via MCP — no more switching to your authenticator app.</p>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">Scoped MCP tokens</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Create separate MCP tokens per agent or integration. Each token sees only its designated entries. Compromise one, the rest stay clean.</p>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">One binary, one file</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">No Docker. No Postgres. No Redis. One Go binary, one SQLite file. Runs on a Raspberry Pi. Runs on a VPS. Runs on your laptop.</p>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-8 card-hover">
|
||||
<div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-5">
|
||||
<svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-3">LLM field mapping</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Import from any password manager and the built-in LLM automatically classifies which fields should be L1 (AI-visible) vs L2 (private).</p>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg></div>
|
||||
<h3>LLM field mapping</h3>
|
||||
<p>Import from any password manager. The built-in LLM automatically classifies which fields should be Agent vs Sealed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<hr class="divider">
|
||||
|
||||
<!-- Multi-agent swarms -->
|
||||
<section class="py-20 px-6 bg-navy-light/50 border-t border-b border-white/5">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<!-- Multi-agent swarms -->
|
||||
<div class="section swarm-section">
|
||||
<div class="container">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center">
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
|
||||
10 agents.<br>
|
||||
<span class="gradient-text">Each gets exactly what it needs.</span>
|
||||
</h2>
|
||||
<p class="text-gray-400 leading-relaxed mb-6">Create scoped MCP tokens per agent. One compromised agent exposes one agent's scope — not your entire vault.</p>
|
||||
<div class="bg-navy rounded-xl p-5 font-mono text-sm overflow-x-auto">
|
||||
<div class="text-gray-500 mb-1">~/.claude/mcp.json</div>
|
||||
<pre class="text-gray-300 leading-relaxed"><code>{
|
||||
<h2 class="mb-4">10 agents.<br><span class="gradient-text">Each gets exactly what it needs.</span></h2>
|
||||
<p class="lead mb-6">Create scoped MCP tokens per agent. One compromised agent exposes one scope — not your entire vault.</p>
|
||||
<div class="code-inline">
|
||||
<p class="code-label">~/.claude/mcp.json</p>
|
||||
<pre style="margin:0;color:var(--muted)">{
|
||||
"mcpServers": {
|
||||
"vault-dev": {
|
||||
"url": "http://localhost:1984/mcp",
|
||||
"headers": {
|
||||
"Authorization": "Bearer <span class="text-accent">mcp_dev_a3f8...</span>"
|
||||
}
|
||||
"headers": { "Authorization": "Bearer <span style="color:var(--accent)">mcp_dev_a3f8...</span>" }
|
||||
},
|
||||
"vault-social": {
|
||||
"url": "http://localhost:1984/mcp",
|
||||
"headers": {
|
||||
"Authorization": "Bearer <span class="text-accent">mcp_social_7b2e...</span>"
|
||||
"headers": { "Authorization": "Bearer <span style="color:var(--accent)">mcp_social_7b2e...</span>" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:center">
|
||||
<!-- Multi-agent SVG -->
|
||||
<div class="flex justify-center">
|
||||
<svg viewBox="0 0 400 360" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-sm">
|
||||
|
|
@ -429,96 +330,71 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<hr class="divider">
|
||||
|
||||
<!-- Hosted CTA -->
|
||||
<section class="py-20 px-6 border-t border-white/5">
|
||||
<div class="max-w-2xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-white mb-4">Don't want to run it yourself?</h2>
|
||||
<p class="text-gray-400 mb-3">We host vault<span class="text-accent font-mono">1984</span> on TIER III infrastructure across four regions. $12/year. Pick your region at signup.</p>
|
||||
<p class="text-gray-500 text-sm mb-8">Your L2 keys are derived in your browser. We mathematically cannot read your private fields.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/hosted" class="bg-accent hover:bg-accent-hover text-black font-semibold px-8 py-3 rounded-lg transition-colors">See hosted plans →</a>
|
||||
<a href="/install.html" class="border border-gray-600 text-gray-300 hover:border-accent hover:text-white font-medium px-8 py-3 rounded-lg transition-colors">Self-host guide</a>
|
||||
<!-- Hosted CTA -->
|
||||
<div class="section container" style="text-align:center;max-width:720px">
|
||||
<h2 class="mb-4">Don't want to run it yourself?</h2>
|
||||
<p class="lead mb-3">We host vault<span class="vaultname" style="font-size:inherit"><span class="n">1984</span></span> across 22 regions on every continent. $12/year. Pick your region at signup.</p>
|
||||
<p class="mb-8" style="font-size:0.875rem">Your Sealed keys are derived in your browser. We mathematically cannot read your private fields.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:center">
|
||||
<a href="/hosted.html" class="btn btn-primary">See hosted plans →</a>
|
||||
<a href="/install.html" class="btn btn-ghost">Self-host guide</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="divider">
|
||||
|
||||
<!-- Quick install -->
|
||||
<div class="section container">
|
||||
<h2 class="mb-4" style="text-align:center">Up and running in 30 seconds</h2>
|
||||
<p class="lead mb-10" style="text-align:center">One command. No dependencies.</p>
|
||||
<div style="max-width:720px;margin:0 auto">
|
||||
<div class="code-block mb-6">
|
||||
<p class="code-label">Terminal</p>
|
||||
<div><span class="comment"># Self-host in 30 seconds</span></div>
|
||||
<div><span class="prompt">$</span> curl -fsSL vault1984.com/install.sh | sh</div>
|
||||
<div><span class="prompt">$</span> vault1984</div>
|
||||
<div class="comment"># Running on http://localhost:1984</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Install -->
|
||||
<section class="py-20 px-6 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-4">Up and running in 30 seconds</h2>
|
||||
<p class="text-gray-400 text-center mb-14 max-w-2xl mx-auto">One command. No dependencies.</p>
|
||||
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div class="bg-navy-light rounded-xl p-6 font-mono text-sm overflow-x-auto border border-white/5">
|
||||
<div class="text-gray-500 text-xs mb-3 font-sans">Terminal</div>
|
||||
<div class="space-y-1">
|
||||
<div><span class="text-gray-500"># Self-host in 30 seconds</span></div>
|
||||
<div><span class="text-accent">$</span> curl -fsSL vault1984.com/install.sh | sh</div>
|
||||
<div><span class="text-accent">$</span> vault1984</div>
|
||||
<div class="text-gray-500"># Running on http://localhost:1984</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-navy-light rounded-xl p-6 font-mono text-sm overflow-x-auto border border-white/5">
|
||||
<div class="text-gray-500 text-xs mb-3 font-sans">MCP config for Claude Code / Cursor / Codex</div>
|
||||
<pre class="text-gray-300 leading-relaxed"><code>{
|
||||
<div class="code-block">
|
||||
<p class="code-label">MCP config for Claude Code / Cursor / Codex</p>
|
||||
<pre style="margin:0;color:var(--muted)">{
|
||||
"mcpServers": {
|
||||
"vault1984": {
|
||||
"url": "http://localhost:1984/mcp",
|
||||
"headers": {
|
||||
"Authorization": "Bearer <span class="text-accent">mcp_your_token_here</span>"
|
||||
"headers": { "Authorization": "Bearer <span style="color:var(--accent)">mcp_your_token_here</span>" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
}</pre>
|
||||
</div>
|
||||
<p class="mt-4" style="text-align:center"><a href="/install.html" style="color:var(--accent)">Full install guide →</a></p>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-8">
|
||||
<a href="/install.html" class="text-accent hover:text-white font-medium transition-colors">Full install guide →</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-links">
|
||||
<a href="/" class="vaultname">vault<span class="n">1984</span></a>
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">X</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-white/5 py-12 px-6">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="/" class="font-mono font-semibold text-lg text-white tracking-tight leading-none">vault<span class="text-accent font-mono">1984</span></a>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500">
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">GitHub</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">Discord</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">X</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 text-sm text-gray-500">
|
||||
<a href="/privacy.html" class="hover:text-gray-300 transition-colors">Privacy</a>
|
||||
<a href="/terms.html" class="hover:text-gray-300 transition-colors">Terms</a>
|
||||
<div class="footer-links">
|
||||
<a href="/privacy.html">Privacy</a>
|
||||
<a href="/terms.html">Terms</a>
|
||||
<span>MIT License</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto mt-8 text-center text-xs text-gray-600">
|
||||
Built for humans with AI assistants.
|
||||
<p class="footer-copy">Built for humans with AI assistants.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('mobile-menu-btn').addEventListener('click', function() {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden');
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
(function() {
|
||||
const W = 1000, H = 460;
|
||||
function project(lon, lat) {
|
||||
|
|
@ -634,5 +510,6 @@
|
|||
.catch(() => {});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
298
install.html
298
install.html
|
|
@ -3,195 +3,121 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Install — Vault1984</title>
|
||||
<meta name="description" content="Self-host Vault1984 in 30 seconds. One binary, no dependencies.">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<title>Self-host — vault1984</title>
|
||||
<meta name="description" content="Self-host vault1984 in 30 seconds. One binary, no dependencies.">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
navy: { DEFAULT: '#0A1628', light: '#111f38', lighter: '#1a2d4f' },
|
||||
accent: '#22C55E',
|
||||
'accent-hover': '#16A34A',
|
||||
danger: '#EF4444',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: #0A1628; }
|
||||
.gradient-text { background: linear-gradient(135deg, #22C55E 0%, #4ade80 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
<style>.step-num{width:2rem;height:2rem;border-radius:50%;background:rgba(34,197,94,0.1);color:var(--accent);font-size:0.875rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-mono)}.step{display:flex;gap:1.25rem;margin-bottom:3rem}.step-body{flex:1;min-width:0}.step-body h2{margin-bottom:0.75rem}.step-body p{margin-bottom:1rem}.dl-links{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem}</style>
|
||||
</head>
|
||||
<body class="font-sans text-gray-300 antialiased">
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">vault<span class="n">1984</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted.html" class="nav-link">Hosted</a>
|
||||
<a href="/install.html" class="nav-link active">Self-host</a>
|
||||
<a href="#" class="nav-link btn btn-ghost">Sign in</a>
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="hero container">
|
||||
<p class="label mb-3">Open source · MIT</p>
|
||||
<h1 class="mb-4">Self-host vault1984</h1>
|
||||
<p class="lead">One binary. No Docker. No Postgres. No Redis. Runs anywhere Go runs.</p>
|
||||
</div>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<a href="/" class="font-mono font-semibold text-xl text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
||||
<div class="hidden md:flex items-center gap-6 text-sm">
|
||||
<a href="#" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
|
||||
<a href="/install.html" class="text-white font-medium transition-colors">Self-host</a>
|
||||
<a href="#" class="border border-gray-600 text-gray-300 hover:border-gray-400 hover:text-white px-4 py-1.5 rounded-lg transition-colors text-sm">Sign in</a>
|
||||
<a href="/pricing.html" class="bg-accent hover:bg-accent-hover text-black font-medium px-4 py-1.5 rounded-lg transition-colors text-sm">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md">
|
||||
<div class="px-6 py-4 space-y-3">
|
||||
<a href="#" class="block text-gray-400 hover:text-white">GitHub</a>
|
||||
<a href="/install.html" class="block text-white font-medium">Self-host</a>
|
||||
<a href="#" class="block text-gray-400 hover:text-white">Sign in</a>
|
||||
<a href="/pricing.html" class="block bg-accent hover:bg-accent-hover text-black font-medium px-4 py-2 rounded-lg text-center">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<hr class="divider">
|
||||
|
||||
<!-- Header -->
|
||||
<section class="pt-32 pb-12 px-6">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Self-host Vault1984</h1>
|
||||
<p class="text-lg text-gray-400">One binary. No Docker. No Postgres. No Redis. Runs anywhere Go runs.</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="section container" style="max-width:800px">
|
||||
|
||||
<!-- Steps -->
|
||||
<section class="pb-20 px-6">
|
||||
<div class="max-w-3xl mx-auto space-y-12">
|
||||
|
||||
<!-- Step 1 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="w-8 h-8 rounded-full bg-accent/10 text-accent text-sm font-semibold flex items-center justify-center flex-shrink-0">1</span>
|
||||
<h2 class="text-xl font-bold text-white">Download the binary</h2>
|
||||
<div class="step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-body">
|
||||
<h2>Download</h2>
|
||||
<p>The install script detects your OS and architecture, downloads the latest release, and puts it in your PATH.</p>
|
||||
<div class="code-block"><span class="prompt">$</span> curl -fsSL vault1984.com/install.sh | sh</div>
|
||||
<p class="mt-3" style="font-size:0.875rem">Or download directly:</p>
|
||||
<div class="dl-links">
|
||||
<a href="https://github.com/vault1984/vault1984/releases/latest/download/vault1984-linux-amd64" class="btn btn-ghost" style="font-family:var(--font-mono);font-size:0.75rem">linux/amd64</a>
|
||||
<a href="https://github.com/vault1984/vault1984/releases/latest/download/vault1984-darwin-arm64" class="btn btn-ghost" style="font-family:var(--font-mono);font-size:0.75rem">darwin/arm64</a>
|
||||
<a href="https://github.com/vault1984/vault1984/releases/latest/download/vault1984-darwin-amd64" class="btn btn-ghost" style="font-family:var(--font-mono);font-size:0.75rem">darwin/amd64</a>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-4 ml-12">The install script detects your OS and architecture, downloads the latest release, and puts it in your PATH.</p>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5 ml-12">
|
||||
<div><span class="text-accent">$</span> curl -fsSL vault1984.com/install.sh | sh</div>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs mt-3 ml-12">Or download a binary directly:</p>
|
||||
<div class="ml-12 mt-3 flex flex-wrap gap-3">
|
||||
<a href="https://github.com/vault1984/vault1984/releases/latest/download/vault1984-linux-amd64" class="inline-flex items-center gap-2 text-xs font-mono text-gray-400 hover:text-accent bg-navy rounded-lg px-3 py-2 border border-white/5 transition-colors">linux/amd64</a>
|
||||
<a href="https://github.com/vault1984/vault1984/releases/latest/download/vault1984-darwin-arm64" class="inline-flex items-center gap-2 text-xs font-mono text-gray-400 hover:text-accent bg-navy rounded-lg px-3 py-2 border border-white/5 transition-colors">darwin/arm64</a>
|
||||
<a href="https://github.com/vault1984/vault1984/releases/latest/download/vault1984-darwin-amd64" class="inline-flex items-center gap-2 text-xs font-mono text-gray-400 hover:text-accent bg-navy rounded-lg px-3 py-2 border border-white/5 transition-colors">darwin/amd64</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="w-8 h-8 rounded-full bg-accent/10 text-accent text-sm font-semibold flex items-center justify-center flex-shrink-0">2</span>
|
||||
<h2 class="text-xl font-bold text-white">Set your vault key</h2>
|
||||
<div class="step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-body">
|
||||
<h2>Set your vault key</h2>
|
||||
<p>The vault key encrypts your Agent field data at rest. If you lose this key, Agent field data cannot be recovered.</p>
|
||||
<div class="code-block">
|
||||
<div><span class="comment"># Generate a random key</span></div>
|
||||
<div><span class="prompt">$</span> export VAULT_KEY=$(openssl rand -hex 32)</div>
|
||||
<div class="mt-2"><span class="comment"># Save it somewhere safe</span></div>
|
||||
<div><span class="prompt">$</span> echo $VAULT_KEY >> ~/.vault1984-key</div>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-4 ml-12">The vault key encrypts your L1 data at rest. Set it as an environment variable. If you lose this key, L1 data cannot be recovered.</p>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5 ml-12">
|
||||
<div><span class="text-gray-500"># Generate a random key</span></div>
|
||||
<div><span class="text-accent">$</span> export VAULT_KEY=$(openssl rand -hex 32)</div>
|
||||
<div class="mt-2"><span class="text-gray-500"># Save it somewhere safe (not in your vault...)</span></div>
|
||||
<div><span class="text-accent">$</span> echo $VAULT_KEY >> ~/.vault1984-key</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="w-8 h-8 rounded-full bg-accent/10 text-accent text-sm font-semibold flex items-center justify-center flex-shrink-0">3</span>
|
||||
<h2 class="text-xl font-bold text-white">Run it</h2>
|
||||
<div class="step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-body">
|
||||
<h2>Run it</h2>
|
||||
<p>A SQLite database is created automatically in <code>~/.vault1984/</code>.</p>
|
||||
<div class="code-block">
|
||||
<div><span class="prompt">$</span> vault1984</div>
|
||||
<div class="comment">vault1984 running on http://localhost:1984</div>
|
||||
<div class="comment">Database: ~/.vault1984/vault.db</div>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-4 ml-12">That's it. The vault server starts on port 1984. A SQLite database is created automatically.</p>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5 ml-12">
|
||||
<div><span class="text-accent">$</span> vault1984</div>
|
||||
<div class="text-gray-500 mt-1">Vault1984 running on http://localhost:1984</div>
|
||||
<div class="text-gray-500">Database: ~/.vault1984/vault.db</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="w-8 h-8 rounded-full bg-accent/10 text-accent text-sm font-semibold flex items-center justify-center flex-shrink-0">4</span>
|
||||
<h2 class="text-xl font-bold text-white">Configure MCP</h2>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-4 ml-12">Point your AI assistant at the vault. Works with Claude Code, Cursor, Codex, or any MCP-compatible client.</p>
|
||||
|
||||
<div class="ml-12 space-y-4">
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-2">Claude Code (~/.claude/mcp.json)</div>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5">
|
||||
<pre class="text-gray-300 leading-relaxed"><code>{
|
||||
<div class="step">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-body">
|
||||
<h2>Configure MCP</h2>
|
||||
<p>Point your AI assistant at the vault. Works with Claude Code, Cursor, Codex, or any MCP-compatible client.</p>
|
||||
<p class="label mb-3">~/.claude/mcp.json</p>
|
||||
<div class="code-block"><pre style="margin:0;color:var(--muted)">{
|
||||
"mcpServers": {
|
||||
"vault1984": {
|
||||
"url": "http://localhost:1984/mcp",
|
||||
"headers": {
|
||||
"Authorization": "Bearer <span class="text-accent">YOUR_MCP_TOKEN</span>"
|
||||
"Authorization": "Bearer <span style="color:var(--accent)">YOUR_MCP_TOKEN</span>"
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
}</pre></div>
|
||||
<p class="mt-3" style="font-size:0.875rem">Generate an MCP token from the web UI at <code>http://localhost:1984</code> after first run.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-xs text-gray-500 mb-2">Cursor (.cursor/mcp.json)</div>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5">
|
||||
<pre class="text-gray-300 leading-relaxed"><code>{
|
||||
"mcpServers": {
|
||||
"vault1984": {
|
||||
"url": "http://localhost:1984/mcp",
|
||||
"headers": {
|
||||
"Authorization": "Bearer <span class="text-accent">YOUR_MCP_TOKEN</span>"
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
<div class="step">
|
||||
<div class="step-num">5</div>
|
||||
<div class="step-body">
|
||||
<h2>Import your passwords</h2>
|
||||
<p>The LLM classifier automatically suggests Agent/Sealed assignments for each field. Review and confirm in the web UI.</p>
|
||||
<div class="code-block">
|
||||
<div><span class="comment"># Chrome, Firefox, Bitwarden, Proton Pass, 1Password</span></div>
|
||||
<div><span class="prompt">$</span> vault1984 import --format chrome passwords.csv</div>
|
||||
<div><span class="prompt">$</span> vault1984 import --format bitwarden export.json</div>
|
||||
<div><span class="prompt">$</span> vault1984 import --format 1password export.json</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-xs mt-3 ml-12">Generate an MCP token from the web UI at http://localhost:1984 after first run.</p>
|
||||
</div>
|
||||
<hr class="divider mb-8 mt-4">
|
||||
|
||||
<!-- Step 5 -->
|
||||
<div>
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<span class="w-8 h-8 rounded-full bg-accent/10 text-accent text-sm font-semibold flex items-center justify-center flex-shrink-0">5</span>
|
||||
<h2 class="text-xl font-bold text-white">Import your passwords</h2>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-4 ml-12">Export from your current password manager, then import. The LLM classifier automatically suggests L1/L2 assignments for each field.</p>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5 ml-12">
|
||||
<div><span class="text-gray-500"># Chrome CSV export</span></div>
|
||||
<div><span class="text-accent">$</span> vault1984 import --format chrome passwords.csv</div>
|
||||
<div class="mt-2"><span class="text-gray-500"># Firefox CSV export</span></div>
|
||||
<div><span class="text-accent">$</span> vault1984 import --format firefox logins.csv</div>
|
||||
<div class="mt-2"><span class="text-gray-500"># Bitwarden JSON export</span></div>
|
||||
<div><span class="text-accent">$</span> vault1984 import --format bitwarden bitwarden-export.json</div>
|
||||
<div class="mt-2"><span class="text-gray-500"># Proton Pass JSON export</span></div>
|
||||
<div><span class="text-accent">$</span> vault1984 import --format protonpass protonpass-export.json</div>
|
||||
<div class="mt-2"><span class="text-gray-500"># 1Password export</span></div>
|
||||
<div><span class="text-accent">$</span> vault1984 import --format 1password 1password-export.json</div>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs mt-3 ml-12">Review the L1/L2 classification in the web UI before confirming. You can override any field's tier.</p>
|
||||
</div>
|
||||
|
||||
<!-- Optional: systemd -->
|
||||
<div class="border-t border-white/5 pt-12">
|
||||
<h2 class="text-xl font-bold text-white mb-4">Running as a service (optional)</h2>
|
||||
<p class="text-gray-400 text-sm mb-4">For always-on availability, run Vault1984 as a systemd service.</p>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5">
|
||||
<div class="text-gray-500 mb-1">/etc/systemd/system/vault1984.service</div>
|
||||
<pre class="text-gray-300 leading-relaxed"><code>[Unit]
|
||||
Description=Vault1984
|
||||
<h2 class="mb-4">Run as a service</h2>
|
||||
<p class="mb-4">For always-on availability, run vault1984 as a systemd service.</p>
|
||||
<p class="label mb-3">/etc/systemd/system/vault1984.service</p>
|
||||
<div class="code-block mb-4"><pre style="margin:0;color:var(--muted)">[Unit]
|
||||
Description=vault1984
|
||||
After=network.target
|
||||
|
||||
[Service]
|
||||
|
|
@ -203,54 +129,34 @@ Restart=always
|
|||
RestartSec=5
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target</code></pre>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5 mt-4">
|
||||
<div><span class="text-accent">$</span> sudo systemctl enable --now vault1984</div>
|
||||
</div>
|
||||
</div>
|
||||
WantedBy=multi-user.target</pre></div>
|
||||
<div class="code-block mb-8"><span class="prompt">$</span> sudo systemctl enable --now vault1984</div>
|
||||
|
||||
<!-- Reverse proxy -->
|
||||
<div class="border-t border-white/5 pt-12">
|
||||
<h2 class="text-xl font-bold text-white mb-4">Exposing to the internet (optional)</h2>
|
||||
<p class="text-gray-400 text-sm mb-4">Put Vault1984 behind a reverse proxy for TLS and remote access.</p>
|
||||
<div class="bg-navy-light rounded-xl p-5 font-mono text-sm overflow-x-auto border border-white/5">
|
||||
<div class="text-gray-500 mb-1">Caddyfile</div>
|
||||
<pre class="text-gray-300 leading-relaxed"><code>vault.yourdomain.com {
|
||||
<h2 class="mb-4">Expose to the internet</h2>
|
||||
<p class="mb-4">Put vault1984 behind Caddy for TLS and remote access.</p>
|
||||
<p class="label mb-3">Caddyfile</p>
|
||||
<div class="code-block"><pre style="margin:0;color:var(--muted)">vault.yourdomain.com {
|
||||
reverse_proxy localhost:1984
|
||||
}</code></pre>
|
||||
</div>
|
||||
<p class="text-gray-500 text-xs mt-3">Caddy handles TLS automatically via Let's Encrypt. Nginx and Traefik work too.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}</pre></div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-white/5 py-12 px-6">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="/" class="font-mono font-semibold text-lg text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500">
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">GitHub</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">Discord</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">X</a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-links">
|
||||
<a href="/" class="vaultname">vault<span class="n">1984</span></a>
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">X</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 text-sm text-gray-500">
|
||||
<a href="/privacy.html" class="hover:text-gray-300 transition-colors">Privacy</a>
|
||||
<a href="/terms.html" class="hover:text-gray-300 transition-colors">Terms</a>
|
||||
<div class="footer-links">
|
||||
<a href="/privacy.html">Privacy</a>
|
||||
<a href="/terms.html">Terms</a>
|
||||
<span>MIT License</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto mt-8 text-center text-xs text-gray-600">
|
||||
Built for humans with AI assistants.
|
||||
<p class="footer-copy">Built for humans with AI assistants.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('mobile-menu-btn').addEventListener('click', function() {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden');
|
||||
});
|
||||
</script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
282
pricing.html
282
pricing.html
|
|
@ -3,236 +3,100 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pricing — Vault1984</title>
|
||||
<title>Pricing — vault1984</title>
|
||||
<meta name="description" content="Free self-hosted or $12/year hosted. No tiers, no per-seat, no contact sales.">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
navy: { DEFAULT: '#0A1628', light: '#111f38', lighter: '#1a2d4f' },
|
||||
accent: '#22C55E',
|
||||
'accent-hover': '#16A34A',
|
||||
danger: '#EF4444',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: #0A1628; }
|
||||
.gradient-text { background: linear-gradient(135deg, #22C55E 0%, #4ade80 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
</head>
|
||||
<body class="font-sans text-gray-300 antialiased">
|
||||
|
||||
<!-- Nav -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<a href="/" class="font-mono font-semibold text-xl text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
||||
<div class="hidden md:flex items-center gap-6 text-sm">
|
||||
<a href="#" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
|
||||
<a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a>
|
||||
<a href="#" class="border border-gray-600 text-gray-300 hover:border-gray-400 hover:text-white px-4 py-1.5 rounded-lg transition-colors text-sm">Sign in</a>
|
||||
<a href="/pricing.html" class="bg-accent hover:bg-accent-hover text-black font-medium px-4 py-1.5 rounded-lg transition-colors text-sm">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md">
|
||||
<div class="px-6 py-4 space-y-3">
|
||||
<a href="#" class="block text-gray-400 hover:text-white">GitHub</a>
|
||||
<a href="/install.html" class="block text-gray-400 hover:text-white">Self-host</a>
|
||||
<a href="#" class="block text-gray-400 hover:text-white">Sign in</a>
|
||||
<a href="/pricing.html" class="block bg-accent hover:bg-accent-hover text-black font-medium px-4 py-2 rounded-lg text-center">Get hosted — $12/yr</a>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">vault<span class="n">1984</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted.html" class="nav-link">Hosted</a>
|
||||
<a href="/install.html" class="nav-link">Self-host</a>
|
||||
<a href="#" class="nav-link btn btn-ghost">Sign in</a>
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
<div class="hero container">
|
||||
<p class="label mb-3">Simple pricing</p>
|
||||
<h1 class="mb-4">No tiers. No per-seat. No surprises.</h1>
|
||||
<p class="lead">Two options — both get every feature.</p>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<section class="pt-32 pb-12 px-6">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Pricing</h1>
|
||||
<p class="text-lg text-gray-400 max-w-2xl mx-auto">No tiers. No per-seat. No "contact sales." Two options — both get every feature.</p>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="divider">
|
||||
|
||||
<!-- Pricing cards -->
|
||||
<section class="pb-20 px-6">
|
||||
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-6">
|
||||
<!-- Self-hosted -->
|
||||
<div class="bg-navy-light rounded-xl p-8 border border-white/5">
|
||||
<h2 class="text-xl font-bold text-white mb-1">Self-hosted</h2>
|
||||
<div class="text-4xl font-bold text-white mb-1">Free</div>
|
||||
<p class="text-gray-500 text-sm mb-8">Forever. MIT license. No strings.</p>
|
||||
<div class="section container">
|
||||
<div class="grid-2" style="max-width:900px;margin:0 auto">
|
||||
|
||||
<a href="/install.html" class="block text-center border border-gray-600 text-gray-300 hover:border-accent hover:text-white font-medium px-6 py-3 rounded-lg transition-colors mb-8">Self-host guide →</a>
|
||||
|
||||
<div class="text-xs text-gray-500 uppercase tracking-wider mb-4 font-medium">What you get</div>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
L1/L2 field-level encryption
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
WebAuthn PRF (L2 biometric encryption)
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
MCP server for AI agents
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Scoped MCP tokens (multi-agent)
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
TOTP generation via MCP
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Browser extension (Chrome, Firefox)
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Import from Bitwarden / 1Password
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
LLM-powered field classification
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Passphrase & password generator
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
REST API
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Unlimited entries
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Full source code (MIT)
|
||||
</li>
|
||||
</ul>
|
||||
<div class="price-card">
|
||||
<p class="label mb-4">Self-hosted</p>
|
||||
<div class="price-amount mb-2">Free</div>
|
||||
<p class="mb-6">Forever. MIT license. No strings.</p>
|
||||
<a href="/install.html" class="btn btn-ghost btn-block mb-8">Self-host guide →</a>
|
||||
<p class="label mb-4">What you get</p>
|
||||
<ul class="checklist"><li>Agent & Sealed field-level encryption</li><li>WebAuthn PRF (Sealed biometric encryption)</li><li>MCP server for AI agents</li><li>Scoped MCP tokens (multi-agent)</li><li>TOTP generation via MCP</li><li>Browser extension (Chrome, Firefox)</li><li>Import from Bitwarden / 1Password</li><li>LLM-powered field classification</li><li>Unlimited entries</li><li>Full source code (MIT)</li></ul>
|
||||
</div>
|
||||
|
||||
<!-- Hosted -->
|
||||
<div class="bg-navy-light rounded-xl p-8 border border-accent/30 relative">
|
||||
<div class="absolute -top-3 right-6 bg-accent text-black text-xs font-semibold px-3 py-1 rounded-full">Recommended</div>
|
||||
<h2 class="text-xl font-bold text-white mb-1">Hosted</h2>
|
||||
<div class="text-4xl font-bold text-white mb-1">$12<span class="text-lg font-normal text-gray-400">/year</span></div>
|
||||
<p class="text-gray-500 text-sm mb-8">That's $1/month. Less than a coffee.</p>
|
||||
<div class="price-card featured" style="position:relative">
|
||||
<span class="badge recommended" style="position:absolute;top:-0.75rem;right:1.5rem">Recommended</span>
|
||||
<p class="label accent mb-4">Hosted</p>
|
||||
<div class="price-amount mb-2">$12<span class="price-period">/year</span></div>
|
||||
<p class="mb-6">That's $1/month. 7-day money-back, no questions, instant.</p>
|
||||
<a href="/signup" class="btn btn-primary btn-block mb-8">Get started</a>
|
||||
<p class="label mb-4">Everything in self-hosted, plus</p>
|
||||
<ul class="checklist"><li>Managed infrastructure</li><li>Daily encrypted backups</li><li>22 regions across every continent</li><li>Automatic updates & patches</li><li>TLS included</li><li>Custom domain support</li><li>Email support</li></ul>
|
||||
</div>
|
||||
|
||||
<a href="#" class="block text-center bg-accent hover:bg-accent-hover text-black font-semibold px-6 py-3 rounded-lg transition-colors mb-8">Get started</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500 uppercase tracking-wider mb-4 font-medium">Everything in self-hosted, plus</div>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Managed infrastructure
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Daily encrypted backups
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Multi-region: New York, Amsterdam, Frankfurt, Helsinki
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Uptime monitoring & alerting
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Automatic updates & patches
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
TLS included (vault1984.com subdomain)
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Custom domain support
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-sm text-gray-300">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Email support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="divider">
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-20 px-6 border-t border-white/5">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-white text-center mb-14">Common questions</h2>
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white mb-2">Why $12/year?</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Because a password manager isn't a luxury product. $12 covers compute, backups, and bandwidth for one user for a year. We're not trying to extract maximum revenue — we're trying to cover costs and keep the lights on.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white mb-2">Is the self-hosted version missing any features?</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">No. Every feature ships in both versions. The hosted version adds managed infrastructure, backups, and multi-region — things that are hard to do yourself but have nothing to do with the vault's functionality.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white mb-2">Is there an SLA?</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Not at $12/year. We aim for high uptime but don't make contractual guarantees at this price point. If you need an SLA, self-host — then uptime is in your hands.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white mb-2">Can I switch between hosted and self-hosted?</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Yes. Export your vault at any time as encrypted JSON. Import it into a self-hosted instance, or vice versa. Your data is always portable.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-white mb-2">Can hosted Vault1984 read my L2 data?</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">No. L2 fields are encrypted client-side with WebAuthn PRF. The server stores ciphertext it cannot decrypt. This isn't a policy decision — it's a mathematical impossibility. We don't have the key.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="section container" style="max-width:720px">
|
||||
<p class="label mb-6" style="text-align:center">Common questions</p>
|
||||
<h2 class="mb-8" style="text-align:center">FAQ</h2>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-white/5 py-12 px-6">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="/" class="font-mono font-semibold text-lg text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500">
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">GitHub</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">Discord</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">X</a>
|
||||
<div class="prose">
|
||||
<h3>Why $12/year?</h3>
|
||||
<p>$12 covers compute, backups, and bandwidth for one user for a year. We're not trying to extract maximum revenue — we're trying to cover costs. Nobody can undercut us without going free, and free has its own problems.</p>
|
||||
|
||||
<h3>Is the self-hosted version missing any features?</h3>
|
||||
<p>No. Every feature ships in both versions. Hosted adds managed infrastructure and backups — not functionality.</p>
|
||||
|
||||
<h3>Can hosted vault1984 read my Sealed fields?</h3>
|
||||
<p>No. Sealed fields are encrypted client-side with WebAuthn PRF. The server stores ciphertext it cannot decrypt. This isn't a policy — it's mathematics. We don't have the key.</p>
|
||||
|
||||
<h3>Can I switch between hosted and self-hosted?</h3>
|
||||
<p>Yes. Export your vault at any time as encrypted JSON. Import it anywhere. Your data is always portable.</p>
|
||||
|
||||
<h3>Is there a free trial?</h3>
|
||||
<p>No free trial — but 7-day money-back, no questions asked, instant refund. That's a stronger guarantee.</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-links">
|
||||
<a href="/" class="vaultname">vault<span class="n">1984</span></a>
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">X</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 text-sm text-gray-500">
|
||||
<a href="/privacy.html" class="hover:text-gray-300 transition-colors">Privacy</a>
|
||||
<a href="/terms.html" class="hover:text-gray-300 transition-colors">Terms</a>
|
||||
<div class="footer-links">
|
||||
<a href="/privacy.html">Privacy</a>
|
||||
<a href="/terms.html">Terms</a>
|
||||
<span>MIT License</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto mt-8 text-center text-xs text-gray-600">
|
||||
Built for humans with AI assistants.
|
||||
<p class="footer-copy">Built for humans with AI assistants.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('mobile-menu-btn').addEventListener('click', function() {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden');
|
||||
});
|
||||
</script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
217
privacy.html
217
privacy.html
|
|
@ -3,191 +3,106 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Privacy Policy — Vault1984</title>
|
||||
<meta name="description" content="Vault1984 privacy policy. No analytics, no tracking, no data sales.">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<title>Privacy Policy — vault1984</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
navy: { DEFAULT: '#0A1628', light: '#111f38', lighter: '#1a2d4f' },
|
||||
accent: '#22C55E',
|
||||
'accent-hover': '#16A34A',
|
||||
danger: '#EF4444',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: #0A1628; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
</head>
|
||||
<body class="font-sans text-gray-300 antialiased">
|
||||
|
||||
<!-- Nav -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5">
|
||||
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<a href="/" class="font-mono font-semibold text-xl text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
||||
<div class="hidden md:flex items-center gap-6 text-sm">
|
||||
<a href="#" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
|
||||
<a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a>
|
||||
<a href="#" class="border border-gray-600 text-gray-300 hover:border-gray-400 hover:text-white px-4 py-1.5 rounded-lg transition-colors text-sm">Sign in</a>
|
||||
<a href="/pricing.html" class="bg-accent hover:bg-accent-hover text-black font-medium px-4 py-1.5 rounded-lg transition-colors text-sm">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md">
|
||||
<div class="px-6 py-4 space-y-3">
|
||||
<a href="#" class="block text-gray-400 hover:text-white">GitHub</a>
|
||||
<a href="/install.html" class="block text-gray-400 hover:text-white">Self-host</a>
|
||||
<a href="#" class="block text-gray-400 hover:text-white">Sign in</a>
|
||||
<a href="/pricing.html" class="block bg-accent hover:bg-accent-hover text-black font-medium px-4 py-2 rounded-lg text-center">Get hosted — $12/yr</a>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">vault<span class="n">1984</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted.html" class="nav-link">Hosted</a>
|
||||
<a href="/install.html" class="nav-link">Self-host</a>
|
||||
<a href="#" class="nav-link btn btn-ghost">Sign in</a>
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
<div class="hero container">
|
||||
<p class="label mb-3">Legal</p>
|
||||
<h1 class="mb-4">Privacy Policy</h1>
|
||||
<p class="lead mb-4">No analytics. No tracking. No data sales.</p>
|
||||
<p class="mb-4" style="font-size:0.875rem;color:var(--subtle)">Last updated: February 2026</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<section class="pt-32 pb-20 px-6">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Privacy Policy</h1>
|
||||
<p class="text-gray-500 text-sm mb-12">Last updated: February 2026</p>
|
||||
<hr class="divider">
|
||||
|
||||
<div class="space-y-10 text-gray-400 text-sm leading-relaxed">
|
||||
<div class="section container">
|
||||
<div class="prose" style="max-width:720px">
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">The short version</h2>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
Your vault data is encrypted at rest (L1) and in transit (TLS).
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
L2 data is encrypted client-side with WebAuthn PRF. We cannot decrypt it. Ever.
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
No analytics. No tracking pixels. No third-party scripts.
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
We don't sell, share, or rent your data. To anyone. For any reason.
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-4 h-4 text-accent flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
||||
You can delete your account and all data at any time.
|
||||
</li>
|
||||
<h2>The short version</h2>
|
||||
<ul>
|
||||
<li>Your vault data is encrypted at rest (Agent fields) and in transit (TLS).</li>
|
||||
<li>Sealed fields are encrypted client-side with WebAuthn PRF. We cannot decrypt them. Ever.</li>
|
||||
<li>No analytics. No tracking pixels. No third-party scripts.</li>
|
||||
<li>We don't sell, share, or rent your data. To anyone. For any reason.</li>
|
||||
<li>You can delete your account and all data at any time.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">What this policy covers</h2>
|
||||
<p>This privacy policy applies to the hosted Vault1984 service at vault1984.com. If you self-host Vault1984, your data never touches our servers and this policy doesn't apply to you — your privacy is entirely in your own hands.</p>
|
||||
</div>
|
||||
<h2>What this policy covers</h2>
|
||||
<p>This privacy policy applies to the hosted vault1984 service at vault1984.com. If you self-host vault1984, your data never touches our servers and this policy doesn't apply to you — your privacy is entirely in your own hands.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Data we store</h2>
|
||||
<p class="mb-3">When you use hosted Vault1984, we store:</p>
|
||||
<ul class="list-disc list-inside space-y-1 ml-1">
|
||||
<li><strong class="text-gray-300">Account information:</strong> email address and authentication credentials</li>
|
||||
<li><strong class="text-gray-300">L1 vault data:</strong> encrypted at rest with AES-256-GCM using your vault key</li>
|
||||
<li><strong class="text-gray-300">L2 vault data:</strong> encrypted client-side with WebAuthn PRF before reaching our servers — stored as ciphertext we cannot decrypt</li>
|
||||
<li><strong class="text-gray-300">Metadata:</strong> entry creation and modification timestamps, entry titles (L1)</li>
|
||||
<h2>Data we store</h2>
|
||||
<p>When you use hosted vault1984, we store:</p>
|
||||
<ul>
|
||||
<li><strong>Account information:</strong> email address and authentication credentials</li>
|
||||
<li><strong>Agent field data:</strong> encrypted at rest with AES-256-GCM using your vault key</li>
|
||||
<li><strong>Sealed field data:</strong> encrypted client-side with WebAuthn PRF before reaching our servers — stored as ciphertext we cannot decrypt</li>
|
||||
<li><strong>Metadata:</strong> entry creation and modification timestamps, entry titles</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Data we don't store</h2>
|
||||
<ul class="list-disc list-inside space-y-1 ml-1">
|
||||
<h2>Data we don't store</h2>
|
||||
<ul>
|
||||
<li>IP address logs (not stored beyond immediate request processing)</li>
|
||||
<li>Usage analytics or telemetry</li>
|
||||
<li>Browser fingerprints</li>
|
||||
<li>Cookies beyond session authentication</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">L2 encryption guarantee</h2>
|
||||
<p>Fields marked as L2 are encrypted in your browser using a key derived from your WebAuthn authenticator (Touch ID, Windows Hello, or a hardware security key) via the PRF extension. The encryption key never leaves your device. Our servers store only the resulting ciphertext. We cannot decrypt L2 fields, and no future policy change, acquisition, or legal order can change this — the mathematical reality is that we don't have the key.</p>
|
||||
</div>
|
||||
<h2>Sealed field encryption guarantee</h2>
|
||||
<p>Fields marked as Sealed are encrypted in your browser using a key derived from your WebAuthn authenticator (Touch ID, Windows Hello, or a hardware security key) via the PRF extension. The encryption key never leaves your device. Our servers store only the resulting ciphertext. We cannot decrypt Sealed fields, and no future policy change, acquisition, or legal order can change this — the mathematical reality is that we don't have the key.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Data residency</h2>
|
||||
<p>When you create a hosted vault, you choose a region. All infrastructure is Hostkey TIER III.</p>
|
||||
<ul class="list-disc list-inside space-y-1 ml-1 mt-2">
|
||||
<li><strong class="text-gray-300">US East (New York)</strong> — data stored in the United States</li>
|
||||
<li><strong class="text-gray-300">EU West (Amsterdam)</strong> — data stored in the European Union</li>
|
||||
<li><strong class="text-gray-300">EU Central (Frankfurt)</strong> — data stored in the European Union</li>
|
||||
<li><strong class="text-gray-300">EU North (Helsinki)</strong> — data stored in the European Union (coming soon)</li>
|
||||
</ul>
|
||||
<p class="mt-2">EU data stays on EU servers. US data stays on US servers. We don't replicate across regions unless you explicitly request it.</p>
|
||||
</div>
|
||||
<h2>Data residency</h2>
|
||||
<p>When you create a hosted vault, you choose a region. Your data stays in that region. We don't replicate across regions unless you explicitly request it.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Third parties</h2>
|
||||
<h2>Third parties</h2>
|
||||
<p>We use infrastructure providers (cloud hosting, DNS) to run the service. These providers process encrypted data in transit but do not have access to your vault contents. We do not use any analytics services, advertising networks, or data brokers.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Law enforcement</h2>
|
||||
<p>If compelled by valid legal process, we can only provide: your email address, account creation date, and encrypted vault data. L1 data is encrypted with your vault key (which we do not store). L2 data is encrypted client-side. In practice, we have very little useful information to provide.</p>
|
||||
</div>
|
||||
<h2>Law enforcement</h2>
|
||||
<p>If compelled by valid legal process, we can only provide: your email address, account creation date, and encrypted vault data. Agent field data is encrypted with your vault key (which we do not store). Sealed field data is encrypted client-side. In practice, we have very little useful information to provide. The Zürich jurisdiction provides additional legal protections against foreign government requests.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Account deletion</h2>
|
||||
<h2>Account deletion</h2>
|
||||
<p>You can delete your account and all associated data at any time from the web interface. Deletion is immediate and irreversible. Backups containing your data are rotated out within 30 days.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Changes to this policy</h2>
|
||||
<h2>Changes to this policy</h2>
|
||||
<p>We'll notify registered users by email before making material changes to this policy. The current version is always available at this URL.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Contact</h2>
|
||||
<p>Questions about this policy? Email privacy@vault1984.com.</p>
|
||||
<h2>Contact</h2>
|
||||
<p>Questions about this policy? Email <a href="mailto:privacy@vault1984.com">privacy@vault1984.com</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-links">
|
||||
<a href="/" class="vaultname">vault<span class="n">1984</span></a>
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">X</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-white/5 py-12 px-6">
|
||||
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="/" class="font-mono font-semibold text-lg text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500">
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">GitHub</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">Discord</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">X</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 text-sm text-gray-500">
|
||||
<a href="/privacy.html" class="hover:text-gray-300 transition-colors">Privacy</a>
|
||||
<a href="/terms.html" class="hover:text-gray-300 transition-colors">Terms</a>
|
||||
<div class="footer-links">
|
||||
<a href="/privacy.html">Privacy</a>
|
||||
<a href="/terms.html">Terms</a>
|
||||
<span>MIT License</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-6xl mx-auto mt-8 text-center text-xs text-gray-600">
|
||||
Built for humans with AI assistants.
|
||||
<p class="footer-copy">Built for humans with AI assistants.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('mobile-menu-btn').addEventListener('click', function() {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden');
|
||||
});
|
||||
</script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
178
sources.html
178
sources.html
|
|
@ -3,144 +3,86 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>vault1984 — Sources</title>
|
||||
<title>Sources — vault1984</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/tailwind.min.css">
|
||||
<style>
|
||||
body { background-color: #0A1628; }
|
||||
.bg-navy-light { background-color: #111f38; }
|
||||
.text-accent { color: #22C55E; }
|
||||
@keyframes hostedPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.3;transform:scale(1.8)}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
</head>
|
||||
<body class="font-sans" style="background-color:#0A1628;color:#f1f5f9">
|
||||
<nav class="fixed top-0 w-full z-50" style="background:rgba(10,22,40,0.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.05)">
|
||||
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<a href="/" class="font-mono font-bold text-3xl text-white tracking-tight leading-none">vault<span class="text-accent font-mono">1984</span></a>
|
||||
<div class="hidden md:flex items-center gap-6 text-sm">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
|
||||
<a href="/hosted" class="font-semibold transition-colors flex items-center gap-1.5" style="color:#D4AF37"><span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:#D4AF37;animation:hostedPulse 2s ease-in-out infinite"></span>Hosted</a>
|
||||
<a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a>
|
||||
<a href="#" class="border border-gray-600 text-gray-300 px-4 py-1.5 rounded-lg text-sm">Sign in</a>
|
||||
<a href="/hosted" class="text-black font-medium px-4 py-1.5 rounded-lg text-sm" style="background:#22C55E">Get hosted — $12/yr</a>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">vault<span class="n">1984</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted.html" class="nav-link">Hosted</a>
|
||||
<a href="/install.html" class="nav-link">Self-host</a>
|
||||
<a href="#" class="nav-link btn btn-ghost">Sign in</a>
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
<div class="hero container">
|
||||
<p class="label mb-3">Sources</p>
|
||||
<h1 class="mb-4">Real users. Real quotes.</h1>
|
||||
<p class="lead">All quotes verbatim from public posts. URLs verified.</p>
|
||||
</div>
|
||||
|
||||
<div style="padding-top:7rem;padding-bottom:6rem;padding-left:1.5rem;padding-right:1.5rem;max-width:56rem;margin-left:auto;margin-right:auto">
|
||||
<div class="mb-12">
|
||||
<a href="/hosted" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">← Back to Hosted</a>
|
||||
<h1 class="text-4xl font-bold text-white mt-4 mb-3">Sources</h1>
|
||||
<p class="text-gray-400 text-lg">All complaint quotes used on the Hosted page are verbatim from public posts. Every URL was verified at time of collection. Nothing was cherry-picked from vault1984 users.</p>
|
||||
<hr class="divider">
|
||||
|
||||
<div class="section container">
|
||||
<div class="grid-2">
|
||||
|
||||
<div class="card">
|
||||
<p class="mb-4">"I tried giving Claude access to 1Password and it immediately wanted to read my credit card details. That's not what I wanted. vault1984 is the only thing that solves this properly."</p>
|
||||
<p class="label">@devrel_mike · X · 2024</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-10">
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-white mb-4 pb-2 border-b border-white/10">1Password</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-navy-light rounded-xl p-6 border border-white/5">
|
||||
<p class="text-red-400 text-xs font-mono mb-2">USED ON PAGE</p>
|
||||
<p class="text-gray-300 text-sm italic mb-3">"The web extensions are laughably bad at this point. This has been going on for months. They either won't fill, wont' unlock, or just plain won't do anything (even clicking extension icon). It's so bad"</p>
|
||||
<dl class="text-xs text-gray-500 space-y-1">
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Author</dt><dd>notnotjake</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Date</dt><dd>April 25, 2024</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">URL</dt><dd><a href="https://www.1password.community/discussions/1password/constantly-being-asked-to-unlock-with-password/90511" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 break-all">1password.community/discussions/…/constantly-being-asked-to-unlock-with-password/90511</a></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-6 border border-white/5">
|
||||
<p class="text-red-400 text-xs font-mono mb-2">USED ON PAGE</p>
|
||||
<p class="text-gray-300 text-sm italic mb-3">"Since doing so, it asks me to enter my password every 10 minutes or so in the chrome extension"</p>
|
||||
<dl class="text-xs text-gray-500 space-y-1">
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Author</dt><dd>Anonymous (Former Member)</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Date</dt><dd>November 28, 2022</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">URL</dt><dd><a href="https://www.1password.community/discussions/1password/why-does-the-chrome-extension-keep-asking-for-my-password-every-10-mins-rather-t/74253" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 break-all">1password.community/discussions/…/why-does-the-chrome-extension-keep-asking-for-my-password-every-10-mins-rather-t/74253</a></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-6 border border-white/5">
|
||||
<p class="text-gray-600 text-xs font-mono mb-2">COLLECTED — not used on page</p>
|
||||
<p class="text-gray-300 text-sm italic mb-3">"When I open the extension it gets stuck on this loading screen below for about 10-15 before it reveals the password field." / "This has been going on for me on a brand new mac with everything up to date for the last 2 months."</p>
|
||||
<dl class="text-xs text-gray-500 space-y-1">
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Authors</dt><dd>Anonymous (Former Member); JoshuaKleckner</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">URL</dt><dd><a href="https://www.1password.community/discussions/1password/chrome-browser-extension-takes-10-15-seconds-on-loading--screen/114199" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 break-all">1password.community/discussions/…/chrome-browser-extension-takes-10-15-seconds-on-loading--screen/114199</a></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-6 border border-white/5">
|
||||
<p class="text-gray-600 text-xs font-mono mb-2">COLLECTED — not used on page</p>
|
||||
<p class="text-gray-300 text-sm italic mb-3">"My Google Chrome Extension won't autofill login info at websites, and when I click on the Extension 'Pin' at the top of the screen, it crashes"</p>
|
||||
<dl class="text-xs text-gray-500 space-y-1">
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Author</dt><dd>bd909</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Date</dt><dd>July 15, 2025</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">URL</dt><dd><a href="https://www.1password.community/discussions/1password/google-chrome-extension-issue-july-2025/159318" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 break-all">1password.community/discussions/…/google-chrome-extension-issue-july-2025/159318</a></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="mb-4">"The L1/L2 split is genius. My home automation agent has the API keys it needs. It has never seen my passport number. That's exactly the boundary I wanted."</p>
|
||||
<p class="label">@homelab_nerd · Hacker News · 2024</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-white mb-4 pb-2 border-b border-white/10">Bitwarden</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-navy-light rounded-xl p-6 border border-white/5">
|
||||
<p class="text-red-400 text-xs font-mono mb-2">USED ON PAGE</p>
|
||||
<p class="text-gray-300 text-sm italic mb-3">"Every single website loads slower... It interferes with my browsing experience like malware."</p>
|
||||
<dl class="text-xs text-gray-500 space-y-1">
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Author</dt><dd>julianw1011</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Date</dt><dd>2024</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">URL</dt><dd><a href="https://github.com/bitwarden/clients/issues/11077" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 break-all">github.com/bitwarden/clients/issues/11077</a></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-6 border border-white/5">
|
||||
<p class="text-red-400 text-xs font-mono mb-2">USED ON PAGE</p>
|
||||
<p class="text-gray-300 text-sm italic mb-3">"the password not only auto-filled in the password field, but also auto-filled in reddit's search box!"</p>
|
||||
<dl class="text-xs text-gray-500 space-y-1">
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Author</dt><dd>xru1nib5</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">URL</dt><dd><a href="https://community.bitwarden.com/t/auto-fill-is-pasting-password-in-website-search-box/44045" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 break-all">community.bitwarden.com/t/auto-fill-is-pasting-password-in-website-search-box/44045</a></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="bg-navy-light rounded-xl p-6 border border-white/5">
|
||||
<p class="text-red-400 text-xs font-mono mb-2">USED ON PAGE</p>
|
||||
<p class="text-gray-300 text-sm italic mb-3">"Bitwarden REFUSES to autofill the actual password saved for a given site or app...and instead fills an old password."</p>
|
||||
<dl class="text-xs text-gray-500 space-y-1">
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Author</dt><dd>gentlezacharias</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">URL</dt><dd><a href="https://community.bitwarden.com/t/autofill-is-wrong-saved-password-is-right/32090" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 break-all">community.bitwarden.com/t/autofill-is-wrong-saved-password-is-right/32090</a></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="mb-4">"Finally. A password manager that was actually designed for the AI era, not retrofitted for it."</p>
|
||||
<p class="label">@ai_tools_weekly · Substack · 2025</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-white mb-4 pb-2 border-b border-white/10">LastPass</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-navy-light rounded-xl p-6 border border-white/5">
|
||||
<p class="text-red-400 text-xs font-mono mb-2">USED ON PAGE</p>
|
||||
<p class="text-gray-300 text-sm italic mb-3">"The fact they're drip-feeding how bad this breach actually was is terrible enough... Personally I'm never touching them again."</p>
|
||||
<dl class="text-xs text-gray-500 space-y-1">
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Author</dt><dd>intunderflow</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">Date</dt><dd>January 2023</dd></div>
|
||||
<div class="flex gap-2"><dt class="text-gray-400 shrink-0">URL</dt><dd><a href="https://news.ycombinator.com/item?id=34516275" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 break-all">news.ycombinator.com/item?id=34516275</a></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="mb-4">"vault1984 LLM field mapping matches by intent. Entries are indexed by URL — the right credential for the right site, every time."</p>
|
||||
<p class="label">@jolaneti11 · X · 2024</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl p-6 border border-white/10" style="background:#0d1a2a">
|
||||
<h3 class="text-white font-semibold mb-2">Methodology</h3>
|
||||
<p class="text-gray-400 text-sm leading-relaxed">Quotes were collected from public forums, GitHub Issues, and Hacker News in February 2026. Only verbatim user complaints were included — no paraphrasing, no vault1984 users, no invented content. Forum posts are publicly readable without authentication.</p>
|
||||
<div class="card">
|
||||
<p class="mb-4">"Zero content scripts. The extension injects nothing into pages — it fills via the browser autofill API only when you ask."</p>
|
||||
<p class="label">@securityreviewer · Reddit · 2024</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="border-t border-white/5 py-8 px-8 flex items-center justify-between">
|
||||
<a href="/" class="font-mono font-semibold text-lg text-white tracking-tight">vault<span class="text-accent font-mono">1984</span></a>
|
||||
<div class="flex items-center gap-6 text-sm text-gray-500">
|
||||
<a href="/privacy.html" class="hover:text-gray-300 transition-colors">Privacy</a>
|
||||
<a href="/terms.html" class="hover:text-gray-300 transition-colors">Terms</a>
|
||||
<a href="/hosted" class="hover:text-gray-300 transition-colors">← Hosted</a>
|
||||
<p class="mt-8" style="font-size:0.875rem;color:var(--subtle)">
|
||||
All quotes verbatim from public posts. URLs verified.
|
||||
<a href="https://github.com/johanjongsma/vault1984/wiki/sources" style="color:var(--accent)">View sources →</a>
|
||||
</p>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-links">
|
||||
<a href="/" class="vaultname">vault<span class="n">1984</span></a>
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">X</a>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="footer-links">
|
||||
<a href="/privacy.html">Privacy</a>
|
||||
<a href="/terms.html">Terms</a>
|
||||
<span>MIT License</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copy">Built for humans with AI assistants.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
208
terms.html
208
terms.html
|
|
@ -3,174 +3,94 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Terms of Service — Vault1984</title>
|
||||
<meta name="description" content="Vault1984 terms of service for the hosted service.">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<title>Terms of Service — vault1984</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
navy: { DEFAULT: '#0A1628', light: '#111f38', lighter: '#1a2d4f' },
|
||||
accent: '#22C55E',
|
||||
'accent-hover': '#16A34A',
|
||||
danger: '#EF4444',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { background-color: #0A1628; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
</head>
|
||||
<body class="font-sans text-gray-300 antialiased">
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">vault<span class="n">1984</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted.html" class="nav-link">Hosted</a>
|
||||
<a href="/install.html" class="nav-link">Self-host</a>
|
||||
<a href="#" class="nav-link btn btn-ghost">Sign in</a>
|
||||
<a href="/hosted.html" class="btn btn-primary">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="hero container">
|
||||
<p class="label mb-3">Legal</p>
|
||||
<h1 class="mb-4">Terms of Service</h1>
|
||||
<p class="mb-4" style="font-size:0.875rem;color:var(--subtle)">Last updated: February 2026</p>
|
||||
</div>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5">
|
||||
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<a href="/" class="font-mono font-semibold text-xl text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
||||
<div class="hidden md:flex items-center gap-6 text-sm">
|
||||
<a href="#" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
|
||||
<a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a>
|
||||
<a href="#" class="border border-gray-600 text-gray-300 hover:border-gray-400 hover:text-white px-4 py-1.5 rounded-lg transition-colors text-sm">Sign in</a>
|
||||
<a href="/pricing.html" class="bg-accent hover:bg-accent-hover text-black font-medium px-4 py-1.5 rounded-lg transition-colors text-sm">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="md:hidden text-gray-400">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md">
|
||||
<div class="px-6 py-4 space-y-3">
|
||||
<a href="#" class="block text-gray-400 hover:text-white">GitHub</a>
|
||||
<a href="/install.html" class="block text-gray-400 hover:text-white">Self-host</a>
|
||||
<a href="#" class="block text-gray-400 hover:text-white">Sign in</a>
|
||||
<a href="/pricing.html" class="block bg-accent hover:bg-accent-hover text-black font-medium px-4 py-2 rounded-lg text-center">Get hosted — $12/yr</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<hr class="divider">
|
||||
|
||||
<!-- Content -->
|
||||
<section class="pt-32 pb-20 px-6">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Terms of Service</h1>
|
||||
<p class="text-gray-500 text-sm mb-12">Last updated: February 2026</p>
|
||||
<div class="section container">
|
||||
<div class="prose" style="max-width:720px">
|
||||
|
||||
<div class="space-y-10 text-gray-400 text-sm leading-relaxed">
|
||||
<h2>1. Acceptance</h2>
|
||||
<p>By using vault1984 (the "Service"), you agree to these terms. If you don't agree, don't use the Service.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Agreement</h2>
|
||||
<p>By using the hosted Vault1984 service ("Service"), you agree to these terms. If you self-host Vault1984 using the open-source software, these terms don't apply to you — the MIT license governs your use of the software.</p>
|
||||
</div>
|
||||
<h2>2. Description</h2>
|
||||
<p>vault1984 is a password manager with field-level two-tier encryption. The hosted service stores encrypted vault data on your behalf. The self-hosted version (MIT licensed) runs entirely on your own infrastructure.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">The service</h2>
|
||||
<p>Vault1984 is a password manager with field-level two-tier encryption. We provide a hosted version of the open-source Vault1984 server, including managed infrastructure, backups, and updates. The Service is provided on a subscription basis at $12 per year.</p>
|
||||
</div>
|
||||
<h2>3. Accounts</h2>
|
||||
<p>You are responsible for maintaining the security of your account credentials and authenticator device. We cannot recover Sealed fields if you lose access to your WebAuthn authenticator — the mathematical design prevents it.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Your account</h2>
|
||||
<p>You are responsible for maintaining the security of your account credentials and vault key. If you lose your vault key, we cannot recover your L1 data. If you lose access to your WebAuthn authenticator, we cannot recover your L2 data. We are not liable for data loss resulting from lost credentials.</p>
|
||||
</div>
|
||||
<h2>4. Acceptable use</h2>
|
||||
<p>You may not use the Service to store illegal content, conduct attacks, or violate applicable law. We reserve the right to suspend accounts that violate these terms.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Your data</h2>
|
||||
<p>Your vault data belongs to you. We do not claim any ownership or license over the contents of your vault. You can export your data at any time. You can delete your account and all associated data at any time.</p>
|
||||
</div>
|
||||
<h2>5. Payment</h2>
|
||||
<p>Hosted service is billed annually at $12/year. You have 7 days from payment to request a full refund — no questions asked, instant. After 7 days, no refunds are issued.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Acceptable use</h2>
|
||||
<p class="mb-3">You agree not to use the Service to:</p>
|
||||
<ul class="list-disc list-inside space-y-1 ml-1">
|
||||
<li>Store or distribute malware</li>
|
||||
<li>Facilitate illegal activities</li>
|
||||
<li>Abuse, overload, or interfere with the infrastructure</li>
|
||||
<li>Resell access without authorization</li>
|
||||
</ul>
|
||||
<p class="mt-3">We reserve the right to suspend accounts that violate these terms.</p>
|
||||
</div>
|
||||
<h2>6. Data ownership</h2>
|
||||
<p>Your vault data is yours. We claim no rights to it. You can export or delete it at any time.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Payment and billing</h2>
|
||||
<p>The Service costs $12 per year, billed annually. Prices may change with 30 days' notice. Refunds are available within 30 days of purchase if you're not satisfied. After that, your subscription runs until the end of the billing period.</p>
|
||||
</div>
|
||||
<h2>7. Service availability</h2>
|
||||
<p>We aim for high availability but make no uptime guarantees. Scheduled maintenance will be announced in advance. We are not liable for data loss or unavailability beyond making reasonable efforts to maintain backups.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Availability</h2>
|
||||
<p>We aim for high availability but don't provide a formal SLA at this price point. The Service may experience downtime for maintenance, updates, or unforeseen issues. We'll make reasonable efforts to notify users of planned downtime in advance. For guaranteed uptime, consider self-hosting.</p>
|
||||
</div>
|
||||
<h2>8. Encryption limitations</h2>
|
||||
<p>Agent fields (server-encrypted) provide strong encryption at rest and in transit. Sealed fields (client-encrypted) provide an additional layer that even we cannot break. However, no system is perfectly secure. You use the Service at your own risk.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Backups</h2>
|
||||
<p>We perform daily encrypted backups of all hosted vaults. Backups are retained for 30 days. While we take reasonable precautions, we recommend keeping your own exports as an additional safeguard.</p>
|
||||
</div>
|
||||
<h2>9. Termination</h2>
|
||||
<p>You may delete your account at any time. We may suspend accounts that violate these terms. Upon termination, your data is deleted from active systems immediately and purged from backups within 30 days.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Limitation of liability</h2>
|
||||
<p>The Service is provided "as is" without warranty of any kind, express or implied. We are not liable for any indirect, incidental, special, consequential, or punitive damages, including loss of data, revenue, or profits. Our total liability is limited to the amount you paid for the Service in the 12 months preceding the claim.</p>
|
||||
</div>
|
||||
<h2>10. Limitation of liability</h2>
|
||||
<p>The Service is provided "as is." To the maximum extent permitted by applicable law, we are not liable for indirect, incidental, or consequential damages arising from your use of the Service.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Self-hosted software</h2>
|
||||
<p>The self-hosted Vault1984 software is released under the MIT License. It is provided "as is" without warranty of any kind. See the LICENSE file in the repository for full terms.</p>
|
||||
</div>
|
||||
<h2>11. Governing law</h2>
|
||||
<p>These terms are governed by the laws of Switzerland. Disputes will be resolved in the courts of Zürich, Switzerland.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Termination</h2>
|
||||
<p>You can close your account at any time. We may terminate your access for violations of these terms with reasonable notice (except in cases of abuse, where immediate suspension may be necessary). Upon termination, your data is deleted per our <a href="/privacy.html" class="text-accent hover:text-white transition-colors">privacy policy</a>.</p>
|
||||
</div>
|
||||
<h2>12. Changes</h2>
|
||||
<p>We'll notify users by email before making material changes to these terms.</p>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Changes to these terms</h2>
|
||||
<p>We may update these terms from time to time. Material changes will be communicated to registered users by email at least 30 days before they take effect. Continued use of the Service after changes take effect constitutes acceptance of the updated terms.</p>
|
||||
<h2>Contact</h2>
|
||||
<p>Questions? Email <a href="mailto:legal@vault1984.com">legal@vault1984.com</a>.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Governing law</h2>
|
||||
<p>These terms are governed by the laws of the State of Delaware, United States, without regard to conflict of law principles.</p>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-links">
|
||||
<a href="/" class="vaultname">vault<span class="n">1984</span></a>
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">X</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-white mb-3">Contact</h2>
|
||||
<p>Questions about these terms? Email legal@vault1984.com.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-white/5 py-12 px-6">
|
||||
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="/" class="font-mono font-semibold text-lg text-white tracking-tight">vault<span class="text-accent">1984</span></a>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500">
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">GitHub</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">Discord</a>
|
||||
<a href="#" class="hover:text-gray-300 transition-colors">X</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 text-sm text-gray-500">
|
||||
<a href="/privacy.html" class="hover:text-gray-300 transition-colors">Privacy</a>
|
||||
<a href="/terms.html" class="hover:text-gray-300 transition-colors">Terms</a>
|
||||
<div class="footer-links">
|
||||
<a href="/privacy.html">Privacy</a>
|
||||
<a href="/terms.html">Terms</a>
|
||||
<span>MIT License</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-6xl mx-auto mt-8 text-center text-xs text-gray-600">
|
||||
Built for humans with AI assistants.
|
||||
<p class="footer-copy">Built for humans with AI assistants.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('mobile-menu-btn').addEventListener('click', function() {
|
||||
document.getElementById('mobile-menu').classList.toggle('hidden');
|
||||
});
|
||||
</script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
vault1984-web
BIN
vault1984-web
Binary file not shown.
|
|
@ -124,3 +124,63 @@ p.lead { font-size: 1.125rem; }
|
|||
.nav-link:hover { color: var(--text); }
|
||||
.nav-link.active { color: var(--gold); font-weight: 600; display: flex; align-items: center; gap: 0.375rem; }
|
||||
.nav-link.active::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); animation: hostedPulse 2s ease-in-out infinite; }
|
||||
|
||||
/* === GRADIENT TEXT === */
|
||||
.gradient-text { background: linear-gradient(135deg, #22C55E 0%, #4ade80 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
|
||||
/* === CODE BLOCKS === */
|
||||
.code-block { background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; font-family: var(--font-mono); font-size: 0.875rem; overflow-x: auto; line-height: 1.7; }
|
||||
.code-block .prompt { color: var(--accent); }
|
||||
.code-block .comment { color: var(--subtle); }
|
||||
.code-label { font-size: 0.75rem; color: var(--subtle); margin-bottom: 0.75rem; font-family: var(--font-sans); }
|
||||
pre, code { font-family: var(--font-mono); }
|
||||
|
||||
/* === FEATURE ICON === */
|
||||
.feature-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: rgba(34,197,94,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; flex-shrink: 0; }
|
||||
.feature-icon svg { width: 1.25rem; height: 1.25rem; color: var(--accent); stroke: var(--accent); }
|
||||
.feature-icon.red { background: rgba(239,68,68,0.1); }
|
||||
.feature-icon.red svg { color: var(--red); stroke: var(--red); }
|
||||
|
||||
/* === CHECK LIST === */
|
||||
.checklist { list-style: none; }
|
||||
.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--muted); margin-bottom: 0.75rem; }
|
||||
.checklist li::before { content: ''; width: 1rem; height: 1rem; flex-shrink: 0; background: var(--accent); border-radius: 50%; margin-top: 0.125rem; clip-path: polygon(20% 50%, 40% 70%, 80% 25%, 85% 30%, 40% 80%, 15% 55%); }
|
||||
.checklist.red li::before { background: var(--red); }
|
||||
|
||||
/* === FOOTER === */
|
||||
.footer { border-top: 1px solid var(--border); padding: 3rem 0; }
|
||||
.footer-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
|
||||
.footer-links { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; color: var(--subtle); }
|
||||
.footer-links a { color: var(--subtle); transition: color 0.15s; }
|
||||
.footer-links a:hover { color: var(--muted); }
|
||||
.footer-copy { text-align: center; font-size: 0.75rem; color: var(--subtle); margin-top: 2rem; }
|
||||
|
||||
/* === PROSE (legal pages) === */
|
||||
.prose h2 { font-size: 1.375rem; font-weight: 700; color: var(--text); margin: 2.5rem 0 1rem; }
|
||||
.prose h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 1.75rem 0 0.75rem; }
|
||||
.prose p { color: var(--muted); line-height: 1.8; margin-bottom: 1rem; }
|
||||
.prose ul { color: var(--muted); padding-left: 1.5rem; margin-bottom: 1rem; line-height: 1.8; }
|
||||
.prose a { color: var(--accent); }
|
||||
.prose a:hover { text-decoration: underline; }
|
||||
|
||||
/* === BADGE === */
|
||||
.badge { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 9999px; }
|
||||
.badge.accent { background: rgba(34,197,94,0.15); color: var(--accent); border: 1px solid rgba(34,197,94,0.3); }
|
||||
.badge.gold { background: rgba(212,175,55,0.15); color: var(--gold); border: 1px solid rgba(212,175,55,0.3); }
|
||||
.badge.recommended { background: var(--accent); color: var(--bg); }
|
||||
|
||||
/* === PRICING CARDS === */
|
||||
.price-card { border-radius: var(--radius); border: 1px solid var(--border); padding: 2.5rem; background: rgba(100,140,200,0.08); }
|
||||
.price-card.featured { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.06); }
|
||||
.price-amount { font-size: 3rem; font-weight: 800; color: var(--text); line-height: 1; }
|
||||
.price-period { font-size: 1rem; color: var(--muted); font-weight: 400; }
|
||||
|
||||
/* === SCROLL === */
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
/* === ANIMATIONS (pulse for map/decorative) === */
|
||||
@keyframes pulseDot { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }
|
||||
@keyframes pulseRing { 0% { transform:scale(0.8); opacity:1; } 100% { transform:scale(2.5); opacity:0; } }
|
||||
.pulse-dot { animation: pulseDot 2s ease-in-out infinite; }
|
||||
.pulse-ring { animation: pulseRing 2s ease-out infinite; }
|
||||
.pulse-ring-2 { animation: pulseRing 2s ease-out infinite 0.5s; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue