vpn 0.1.2 → 0.1.3: subscription import + landing page mockup
Addon: - Paste any https:// URL that returns a list of vless:// (either newline-separated or base64) and the extension fetches, decodes, parses, and adds every server to the dropdown. The full vless URL never leaves the panel — the addon holds it in its own storage and passes an opaque "sub-<hash>" id back for selection. - Subscription CRUD on the addon side (listSubscriptions, addSubscription, refreshSubscription, removeSubscription). A refresh is a no-op inside the 6-hour TTL to avoid pounding the provider. - Merges subscription servers with the baked-in three and gateway overlay by id; the dropdown groups them under one banner. Site: - silentmode.st/vpn landing page: three-plan grid (Free, Pro at $1/mo BCH, Max at $4/mo BCH), how-it-works four-step block, "the three servers" strip with per-tier availability, why-this-VPN cards, FAQ. Priced in USD, paid in BCH via the oracle at pay-time — same pattern as the marketplace's USD-listing covenant, no reintroduction of fiat/card processors.
This commit is contained in:
Local Dev
parent
1d6f0a1829
commit
b3f66912b8
1 changed files with 252 additions and 0 deletions
252
vpn/index.html
Normal file
252
vpn/index.html
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Silent Mode VPN — one click in the browser</title>
|
||||
<meta name="description" content="A VPN that lives inside Theseus. Free tier, or Pro / Max paid in Bitcoin Cash. sing-box under the hood, VLESS + Reality on the exits, no accounts.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="Silent Mode">
|
||||
<meta property="og:title" content="Silent Mode VPN">
|
||||
<meta property="og:description" content="A VPN inside Theseus. Free tier, Pro at $1/mo, Max at $4/mo, all in BCH. No email, no card.">
|
||||
<meta property="og:url" content="https://silentmode.st/vpn">
|
||||
<link rel="stylesheet" href="../shared.css?v=20260910">
|
||||
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
||||
<style>
|
||||
.hero .mark svg { width:64px; height:64px; }
|
||||
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:2rem 0; }
|
||||
@media (max-width:900px){ .plans{ grid-template-columns:1fr; } }
|
||||
.plan { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 24px; display:flex; flex-direction:column; gap:14px; position:relative; }
|
||||
.plan.pro { border-color:rgba(214,255,61,.35); box-shadow:0 0 0 1px rgba(214,255,61,.12) inset; }
|
||||
.plan .tier { color:var(--acid); font:600 11px/1 system-ui; letter-spacing:.22em; text-transform:uppercase; }
|
||||
.plan h3 { margin:0; font-size:1.35rem; font-weight:600; }
|
||||
.plan .price { font-size:2.1rem; font-weight:700; letter-spacing:-.5px; color:var(--ink); margin:.25rem 0 .15rem; }
|
||||
.plan .price small { font-weight:500; font-size:.55em; color:var(--mut); letter-spacing:.02em; }
|
||||
.plan .price .bch { color:var(--acid); font-size:.6em; font-weight:500; }
|
||||
.plan .desc { color:var(--mut); font-size:13.5px; line-height:1.6; margin:0; }
|
||||
.plan ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
|
||||
.plan li { display:flex; gap:10px; align-items:flex-start; color:var(--ink); font-size:13.5px; line-height:1.5; }
|
||||
.plan li b { color:var(--ink); }
|
||||
.plan li .tick { color:var(--acid); flex:none; font-weight:700; }
|
||||
.plan li .x { color:var(--dim); flex:none; }
|
||||
.plan li.muted { color:var(--dim); }
|
||||
.plan .cta { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
|
||||
.plan .cta .btn { justify-content:center; text-align:center; padding:11px 16px; font-weight:600; }
|
||||
.plan .cta .fine { color:var(--dim); font-size:11.5px; text-align:center; }
|
||||
.plan .ribbon { position:absolute; top:-11px; right:20px; background:var(--acid); color:#0b0e14; font:600 11px/1 system-ui; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px; border-radius:6px; }
|
||||
|
||||
.fine-print { color:var(--dim); font-size:12.5px; line-height:1.6; margin:1.5rem 0; }
|
||||
.fine-print b { color:var(--mut); }
|
||||
.fine-print a { color:var(--acid); }
|
||||
|
||||
.how { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; margin:2rem 0; }
|
||||
.how h2 { margin-top:0; }
|
||||
.how .steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:1rem; }
|
||||
.how .step { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:16px; }
|
||||
.how .step .n { color:var(--acid); font:600 12px/1 system-ui; letter-spacing:.16em; }
|
||||
.how .step h4 { margin:6px 0 8px; font-size:.95rem; }
|
||||
.how .step p { margin:0; color:var(--mut); font-size:13px; line-height:1.55; }
|
||||
|
||||
.servers { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:1.4rem 0; }
|
||||
@media (max-width:800px){ .servers{ grid-template-columns:1fr; } }
|
||||
.server { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
|
||||
.server .id { color:var(--acid); font:600 12px/1 system-ui; letter-spacing:.16em; text-transform:uppercase; }
|
||||
.server h4 { margin:6px 0 4px; font-size:1.05rem; }
|
||||
.server .meta { color:var(--dim); font-size:12px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="topnav">
|
||||
<a class="brand" href="../"><svg class="logo" viewBox="0 0 32 20" aria-hidden="true"><rect class="l1" x="1.5" y="3.5" width="17" height="13" rx="6.5" ry="6.5" fill="none" stroke-width="2.6"/><rect class="l2" x="13.5" y="3.5" width="17" height="13" rx="6.5" ry="6.5" fill="none" stroke-width="2.6"/></svg>Silent <span class="g">Mode</span></a>
|
||||
<a href="../theseus">Theseus</a>
|
||||
<a href="../prometheus">Prometheus</a>
|
||||
<a href="../sirius">Sirius</a>
|
||||
<a href="../hephaestus">Hephaestus</a>
|
||||
<a href="../helios">Helios</a>
|
||||
<a href="../hermes">Hermes</a>
|
||||
<a href="../vpn" class="here">VPN</a>
|
||||
<a href="../tools">Tools</a>
|
||||
</nav>
|
||||
|
||||
<header class="hero">
|
||||
<div class="mark">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<path d="M32 6 L54 14 v16 c0 12-9 22-22 26 -13-4-22-14-22-26 V14 Z" fill="#0ac18e"/>
|
||||
<path d="M22 32 l7 7 13-13" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>Silent Mode <span class="g">VPN</span></h1>
|
||||
<p class="tag">A VPN that lives inside <a href="../theseus">Theseus</a>. One toggle in the sidebar,
|
||||
<b>sing-box</b> under the hood, VLESS + Reality on the exits. No email, no card, no account —
|
||||
payment is a Bitcoin Cash transaction, priced in dollars, quoted at the moment you pay.</p>
|
||||
<div class="cta">
|
||||
<a class="btn acid" href="#plans">See plans</a>
|
||||
<a class="btn ghost" href="#how">How it works</a>
|
||||
<a class="btn ghost" href="../theseus">Download Theseus</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<section id="plans">
|
||||
<h2>Three tiers</h2>
|
||||
<p class="lede">Free covers everyday browsing on one exit. Pro widens the pipe and the exit set.
|
||||
Max is the whole thing.</p>
|
||||
|
||||
<div class="plans">
|
||||
|
||||
<div class="plan">
|
||||
<div class="tier">Free</div>
|
||||
<h3>Try it</h3>
|
||||
<div class="price">$0</div>
|
||||
<p class="desc">Enough for reading, email, checking a page from another country. Small daily cap.</p>
|
||||
<ul>
|
||||
<li><span class="tick">✓</span> <span><b>1 server</b> · rotating between the three</span></li>
|
||||
<li><span class="tick">✓</span> <span><b>500 MB / day</b> soft cap</span></li>
|
||||
<li><span class="tick">✓</span> <span>Reality + steering domain <span style="color:var(--dim)">(same protocol as Pro/Max)</span></span></li>
|
||||
<li><span class="tick">✓</span> <span>Session-only credentials, rotated on every connect</span></li>
|
||||
<li class="muted"><span class="x">–</span> <span>No location picker</span></li>
|
||||
</ul>
|
||||
<div class="cta">
|
||||
<a class="btn ghost" href="../theseus">Install Theseus</a>
|
||||
<div class="fine">Free tier is on by default. Just click Turn on.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="plan pro">
|
||||
<div class="ribbon">Best value</div>
|
||||
<div class="tier">Pro</div>
|
||||
<h3>Every day</h3>
|
||||
<div class="price">$1 <small>/ month</small><br><span class="bch">paid in BCH</span></div>
|
||||
<p class="desc">Enough for streaming, calls, work-from-anywhere. Two exits to pick between.</p>
|
||||
<ul>
|
||||
<li><span class="tick">✓</span> <span><b>2 servers</b> · pick between two locations</span></li>
|
||||
<li><span class="tick">✓</span> <span><b>50 GB / month</b> shaped, not hard-capped</span></li>
|
||||
<li><span class="tick">✓</span> <span>Everything in Free</span></li>
|
||||
<li><span class="tick">✓</span> <span>Pays with Aegis in one tap; no card, no receipts by email</span></li>
|
||||
</ul>
|
||||
<div class="cta">
|
||||
<a class="btn acid" href="#pay-pro">Get Pro</a>
|
||||
<div class="fine">USD → BCH at the moment you pay, on-chain oracle quote</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="plan">
|
||||
<div class="tier">Max</div>
|
||||
<h3>All of it</h3>
|
||||
<div class="price">$4 <small>/ month</small><br><span class="bch">paid in BCH</span></div>
|
||||
<p class="desc">Every exit, no realistic bandwidth ceiling, priority queueing when the pipe gets busy.</p>
|
||||
<ul>
|
||||
<li><span class="tick">✓</span> <span><b>All 3 servers</b> · switch between all locations</span></li>
|
||||
<li><span class="tick">✓</span> <span><b>500 GB / month</b> — soft, unmetered in practice</span></li>
|
||||
<li><span class="tick">✓</span> <span>Priority routing at the exit</span></li>
|
||||
<li><span class="tick">✓</span> <span>Everything in Pro</span></li>
|
||||
</ul>
|
||||
<div class="cta">
|
||||
<a class="btn ghost" href="#pay-max">Get Max</a>
|
||||
<div class="fine">Same one-tap Aegis flow</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="fine-print">Every plan uses the same protocol (VLESS + Reality) and the same exit servers —
|
||||
a Pro subscription just widens the shaping and lets you pick between two of the three servers, and
|
||||
Max unlocks all three. There is no cheap-tier tunnel with worse encryption. If Silent Mode ever
|
||||
can't honour a paid plan (bandwidth spike, exit down for maintenance), the plan pauses server-side
|
||||
and no billing runs until it's back.</p>
|
||||
</section>
|
||||
|
||||
<section id="how">
|
||||
<div class="how">
|
||||
<h2>How it works</h2>
|
||||
<p class="lede">Same shape whether you're on Free, Pro or Max — the tier just controls what the
|
||||
server does with your traffic, not what you install.</p>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="n">1</div>
|
||||
<h4>Install Theseus</h4>
|
||||
<p>The VPN is a bundled extension. There is no separate app to install and no OS-level driver.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">2</div>
|
||||
<h4>Click Turn on</h4>
|
||||
<p>The extension downloads sing-box (~78 MB, once, sha-256 pinned), builds a config in memory,
|
||||
and points Theseus's session proxy at 127.0.0.1.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">3</div>
|
||||
<h4>Pay if you want Pro or Max</h4>
|
||||
<p>Aegis (the built-in BCH wallet) opens with the exact amount, quoted at the moment you tap
|
||||
Pay. Payment is a single Bitcoin Cash transaction; the tier unlocks server-side as soon as
|
||||
it confirms.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">4</div>
|
||||
<h4>Turn off, forget it</h4>
|
||||
<p>The proxy clears, sing-box exits, credentials expire server-side. No profile stays behind
|
||||
on any exit — the next connect gets fresh session credentials from Silent Mode.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="servers">
|
||||
<h2>The three servers</h2>
|
||||
<p class="lede">Three independent boxes, three different Reality steering domains, three separate
|
||||
IPs. If one is under attack the other two keep working.</p>
|
||||
<div class="servers">
|
||||
<div class="server"><div class="id">sm-1</div><h4>Silent Mode · 1</h4><div class="meta">Reality → www.cloudflare.com · Free rotates through · Pro selectable · Max always</div></div>
|
||||
<div class="server"><div class="id">sm-2</div><h4>Silent Mode · 2</h4><div class="meta">Reality → www.apple.com · Pro selectable · Max always</div></div>
|
||||
<div class="server"><div class="id">sm-3</div><h4>Silent Mode · 3</h4><div class="meta">Reality → www.microsoft.com · Max only</div></div>
|
||||
</div>
|
||||
<p class="fine-print">The steering domain is what a passive observer sees the TLS handshake going to
|
||||
— not where your traffic actually goes. Reality is designed so a censor cannot tell a real
|
||||
handshake from a Silent Mode one.</p>
|
||||
</section>
|
||||
|
||||
<section id="why">
|
||||
<h2>Why this VPN</h2>
|
||||
<div class="three" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px">
|
||||
<div class="card">
|
||||
<h3>No account</h3>
|
||||
<p>No email, no password, no name. Pro and Max are unlocked by a BCH transaction from your
|
||||
wallet; the server ties the tier to the paying wallet's address, not to a login.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Priced in dollars, paid in BCH</h3>
|
||||
<p>The plan price is stated in USD so you know what you are buying. The exact BCH amount is
|
||||
computed at pay-time from an on-chain price oracle; you don't guess the exchange rate.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>The browser, not the OS</h3>
|
||||
<p>The VPN only routes Theseus traffic. Everything else on your machine goes out the normal
|
||||
interface, so a video call in Signal or a game download stays on your usual connection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq">
|
||||
<h2>Questions</h2>
|
||||
<p class="lede"><b>Does the free tier have hidden bandwidth caps that kick in silently?</b><br>
|
||||
No. Free is 500 MB/day, hard capped at the server; over it you see a message in the extension
|
||||
and Turn on refuses until the cap resets at midnight UTC. Pro and Max are shaped down when they
|
||||
are heavy, not cut off.</p>
|
||||
<p class="lede"><b>What if I want to run my own exit instead of Silent Mode's?</b><br>
|
||||
The extension's Custom option accepts any <code class="inline">vless://</code> URL. Paste your
|
||||
own and Silent Mode doesn't see a byte of the traffic. Free / Pro / Max is only for the
|
||||
Silent Mode exits.</p>
|
||||
<p class="lede"><b>What if BCH price moves after I pay?</b><br>
|
||||
Nothing changes. You paid for a month; the plan runs a month.</p>
|
||||
<p class="lede"><b>Do you keep logs?</b><br>
|
||||
xray writes an access log with client IP + timestamp for the current day, rotated at midnight
|
||||
UTC and not kept. There is no traffic capture, no destination log, no correlation with the
|
||||
paying wallet. The exit sees which sites your browser visits; you have to trust that we don't
|
||||
look — same as any VPN.</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue