silentmode/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theseus: perf + loading UI, minimal chrome, sidebar settings

Browse source 
- Performance: cache the chain index (was rebuilt on every navigation) and
  warm it at startup — .bch pages open near-instantly after the first.
- Loading indicator: indeterminate bar under the toolbar, per-tab spinner,
  and reload⇄stop button (driven by did-start/stop-loading + BNS resolve).
- Chrome cleanup: removed the bottom status bar and the redundant search
  box; security padlock now always present at the front of the address bar;
  minimal ICANN/BCNR pill at the end; favorites bar shows only on new-tab.
- Search: added Yandex; engine picker moved into Settings > General.
- Settings redesigned with a left sidebar (General / Performance / Privacy /
  Anti-fingerprinting). Anti-fingerprinting now Show/Hide/Spoof/Manual for
  timezone, language, AND location (geolocation coords overridden in-page).
This commit is contained in:
Local Dev 2026-07-30 19:29:32 +02:00
parent c9a6110485
commit 97a7d2bd7c
5 changed files with 539 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
choose/free/index.html Normal file
View file

@ -0,0 +1,130 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>You took the red one — Silent Mode</title>
<meta name="description" content="A network with no registrar, no platform account and no gatekeeper. Here is what actually changes, what it costs you, and what to do next.">
<link rel="stylesheet" href="/shared.css">
<style>
body{background:#05070c}
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(700px 460px at 50% -6%, rgba(255,77,94,.13), transparent 62%),
radial-gradient(1000px 620px at 50% 116%, rgba(214,255,61,.06), transparent 70%);
animation:pulse 9s ease-in-out infinite alternate;
}
@keyframes pulse{from{opacity:.75} to{opacity:1}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
main{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:5rem 1.4rem 3rem}
.capsule{width:84px;height:38px;border-radius:999px;margin:0 auto 26px;position:relative;
background:linear-gradient(180deg,#ff4d5e,#9b1725);
box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 8px 26px rgba(255,77,94,.28)}
.capsule::before{content:"";position:absolute;top:5px;left:12px;right:12px;height:9px;border-radius:999px;
background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(1px)}
main h1{font-size:clamp(1.9rem,4.4vw,2.7rem);font-weight:600;text-align:center;
margin:0 0 1rem;line-height:1.22;letter-spacing:.2px}
.lede{color:var(--mut);font-size:1.04rem;text-align:center;max-width:620px;margin:0 auto 3rem}
.rows{display:grid;gap:12px;margin-bottom:2.6rem}
.row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
background:rgba(255,255,255,.026);border:1px solid rgba(255,255,255,.07);
border-radius:13px;padding:15px 18px}
@media (max-width:640px){
.row{grid-template-columns:1fr;gap:6px}
.row .arrow{display:none}
.row .was::after{content:" ↓";color:var(--dim)}
}
.row .was{color:var(--dim);font-size:14px;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.22)}
.row .arrow{color:var(--dim);font-size:15px}
.row .now{color:var(--ink);font-size:14.5px}
.row .now b{color:#ff7885;font-weight:600}
.honest{background:var(--panel);border:1px solid var(--line);border-left:3px solid #ff7885;
border-radius:11px;padding:17px 20px;color:var(--mut);font-size:14px;line-height:1.72;margin-bottom:2.6rem}
.honest b{color:var(--ink)}
.next{text-align:center}
.next h2{font-size:1.15rem;margin:0 0 1.2rem;font-weight:600}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
@media (max-width:680px){.steps{grid-template-columns:1fr}}
.step{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
border-radius:13px;padding:17px 18px;text-decoration:none;color:inherit;display:block;
transition:border-color .2s ease, transform .2s ease}
.step:hover{border-color:rgba(255,77,94,.45);transform:translateY(-3px)}
.step:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.step .n{font:700 11px/1 system-ui;letter-spacing:.2em;text-transform:uppercase;color:#ff7885;display:block;margin-bottom:.55rem}
.step b{display:block;font-size:14.5px;margin-bottom:.3rem}
.step span{color:var(--mut);font-size:13px;line-height:1.6}
.foot{color:var(--mut);font-size:12.5px;text-align:center;margin-top:3.2rem;line-height:1.8}
.foot a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--ink)}
.foot .back{color:var(--dim)}
</style>
</head>
<body>
<main>
<div class="capsule" aria-hidden="true"></div>
<h1>There is no one to ask.</h1>
<p class="lede">That is the whole difference. Not better software — a missing layer.
The part of the internet that grants permission, and can therefore withdraw it,
is simply absent here. Everything below follows from that one hole.</p>
<div class="rows">
<div class="row"><span class="was">A domain leased from a registrar</span><span class="arrow">→</span>
<span class="now">A <b>certificate you hold</b>, on a public ledger. Your key, your name.</span></div>
<div class="row"><span class="was">An account that can be suspended</span><span class="arrow">→</span>
<span class="now">No account at all. <b>Nothing was granted, so nothing can be revoked.</b></span></div>
<div class="row"><span class="was">A host with an acceptable-use policy</span><span class="arrow">→</span>
<span class="now">Your own server, a paid swarm of strangers, or <b>the chain itself</b>.</span></div>
<div class="row"><span class="was">A certificate authority vouching for you</span><span class="arrow">→</span>
<span class="now">A fingerprint <b>you publish on-chain</b> and your browser checks.</span></div>
<div class="row"><span class="was">Reach that belongs to the platform</span><span class="arrow">→</span>
<span class="now">A name that <b>travels with you</b>, because nobody else is holding it.</span></div>
</div>
<div class="honest">
<b>The honest part.</b> Nobody being in charge cuts both ways. There is no support desk,
no password reset and no undo — lose your recovery phrase and the name is gone, with
nobody able to help. Nothing here is moderated, so you will find things you would rather
not. And this is an <b>alpha on a test network</b>: the coins are free and worth nothing,
which is the honest place to try it before real money is involved. If that trade sounds
bad, the other pill is a legitimate choice and we are not going to pretend otherwise.
</div>
<div class="next">
<h2>Three steps, about ten minutes</h2>
<div class="steps">
<a class="step" href="/apps/#theseus">
<span class="n">Step one</span>
<b>Get a browser that reads it</b>
<span>Theseus resolves names straight from the chain. Ordinary sites keep working.</span>
</a>
<a class="step" href="/register.html">
<span class="n">Step two</span>
<b>Take a name</b>
<span>Made in your browser, minted to your key. A few cents, no account, no renewal desk.</span>
</a>
<a class="step" href="/register.html#hosting">
<span class="n">Step three</span>
<b>Put something on it</b>
<span>On-chain for something small, your own server, or the Sia network. Change it whenever.</span>
</a>
</div>
</div>
<p class="foot">
<a href="/choose/">← Back to the choice</a> · <a href="/">silentmode.st</a><br>
<span class="back">Second thoughts are allowed. Nothing here has happened yet.</span>
</p>
</main>
</body>
</html>

292
choose/index.html
View file

@ -4,107 +4,94 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Choose — Silent Mode</title> <title>Choose — Silent Mode</title>
<meta name="description" content="Two options for the web you use every day. Keep the one you know, or install one tool and step into the alternative — a network with no registrar and no gatekeeper."> <meta name="description" content="Two internets, twice over. The one you browse, and the one you build on. Every layer of the conventional web has someone who can say no. The other one has nobody.">
<link rel="stylesheet" href="/shared.css"> <link rel="stylesheet" href="/shared.css">
<style> <style>
/* Page-specific only. Tokens, body, footer and buttons come from shared.css. /* Page-specific only — tokens, body and buttons come from shared.css.
NOTE: shared.css already uses `.pill` for status badges, so the capsule visual `.capsule`, not `.pill`: shared.css already uses `.pill` for status badges.
here is `.capsule` — linking both files with a `.pill` collision would have
worked by source order and confused the next person to touch it. */
/* This page deliberately drops the top nav: it is a single choice, and a nav bar No top nav here on purpose: the page asks two questions and a nav bar offers a
offers a third option that undermines the point. The footer still links home. */ third answer that undermines both. */
body{background:#05070c} body{background:#05070c}
/* Subtle backdrop — a slow drift of soft light behind the choice. Not the film's
digital rain, deliberately: this is the wordless mood the page needs, not a
pastiche. */
body::before{ body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0; content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background: background:
radial-gradient(600px 380px at 22% 34%, rgba(75,123,236,.11), transparent 60%), radial-gradient(620px 400px at 24% 26%, rgba(75,123,236,.10), transparent 60%),
radial-gradient(600px 380px at 78% 62%, rgba(255,77,94,.10), transparent 60%), radial-gradient(620px 400px at 76% 74%, rgba(255,77,94,.10), transparent 60%),
radial-gradient(1200px 700px at 50% 120%, rgba(214,255,61,.05), transparent 70%); radial-gradient(1200px 700px at 50% 118%, rgba(214,255,61,.05), transparent 70%);
animation:drift 22s ease-in-out infinite alternate; animation:drift 22s ease-in-out infinite alternate;
} }
@keyframes drift{ @keyframes drift{from{transform:translate3d(0,0,0)} to{transform:translate3d(0,-14px,0)}}
from{transform:translate3d(0,0,0)} @media (prefers-reduced-motion:reduce){body::before{animation:none} .capsule-card{transition:none}}
to{transform:translate3d(0,-14px,0)}
}
/* Respect a stated preference for less motion. */
@media (prefers-reduced-motion:reduce){
body::before{animation:none}
.pill-card{transition:none}
}
:root{ :root{ --red:#ff4d5e; --red-deep:#9b1725; --blue:#4b7bec; --blue-deep:#1e3a8a; }
--red:#ff4d5e; --red-deep:#9b1725;
--blue:#4b7bec; --blue-deep:#1e3a8a;
}
main{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:5rem 1.4rem 5rem} main{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:4.4rem 1.4rem 3rem}
.eyebrow{color:var(--dim);font:600 12px/1 system-ui;letter-spacing:.28em; .eyebrow{color:var(--dim);font:600 12px/1 system-ui;letter-spacing:.28em;
text-transform:uppercase;text-align:center;margin:0 0 1.2rem} text-transform:uppercase;text-align:center;margin:0 0 1.2rem}
main h1{font-size:clamp(2rem,4.6vw,2.9rem);font-weight:600;line-height:1.2; main h1{font-size:clamp(2rem,4.6vw,2.9rem);font-weight:600;line-height:1.2;
text-align:center;margin:.4rem 0 1.2rem;letter-spacing:.2px} text-align:center;margin:.4rem 0 1.1rem;letter-spacing:.2px}
.intro{color:var(--mut);font-size:1.03rem;max-width:600px;margin:0 auto 3.4rem;text-align:center} .intro{color:var(--mut);font-size:1.03rem;max-width:660px;margin:0 auto 3rem;text-align:center}
.pills{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 auto;max-width:960px} /* section headers */
@media (max-width:720px){.pills{grid-template-columns:1fr}} .act{max-width:1000px;margin:0 auto;padding:0}
.act + .act{margin-top:3.6rem;padding-top:3.2rem;border-top:1px solid rgba(255,255,255,.07)}
.act-head{text-align:center;margin:0 auto 1.8rem;max-width:600px}
.act-num{display:inline-block;font:700 11px/1 system-ui;letter-spacing:.22em;text-transform:uppercase;
color:var(--acid);background:rgba(214,255,61,.1);padding:5px 11px;border-radius:999px;margin-bottom:.9rem}
.act-head h2{font-size:1.5rem;font-weight:600;margin:0 0 .4rem;letter-spacing:.2px}
.act-head p{color:var(--mut);font-size:14.5px;margin:0}
.pill-card{ .capsules{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
position:relative; @media (max-width:800px){.capsules{grid-template-columns:1fr}}
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.07); .capsule-card{
border-radius:18px;padding:36px 30px 28px; position:relative;display:flex;flex-direction:column;
background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:30px 26px 24px;
text-decoration:none;color:inherit;
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
text-decoration:none;color:inherit;display:block;
} }
.pill-card:hover{transform:translateY(-4px)} .capsule-card:hover{transform:translateY(-4px)}
.pill-card.blue:hover{border-color:rgba(75,123,236,.55);box-shadow:0 12px 40px rgba(75,123,236,.18)} .capsule-card.blue:hover{border-color:rgba(75,123,236,.5);box-shadow:0 12px 40px rgba(75,123,236,.16)}
.pill-card.red:hover{border-color:rgba(255,77,94,.55);box-shadow:0 12px 40px rgba(255,77,94,.18)} .capsule-card.red:hover{border-color:rgba(255,77,94,.5);box-shadow:0 12px 40px rgba(255,77,94,.16)}
/* Keyboard users get no underline to follow on these cards, so the focus ring .capsule-card:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
has to be explicit and obvious. */
.pill-card:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
/* The capsule — pure CSS, nothing imported, no filmic asset. */
.capsule{ .capsule{
width:96px;height:44px;border-radius:999px;margin:0 auto 22px;position:relative; width:84px;height:38px;border-radius:999px;margin:0 auto 18px;position:relative;
box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.4); box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.4);
} }
.capsule::before{ .capsule::before{
content:"";position:absolute;top:6px;left:14px;right:14px;height:11px;border-radius:999px; content:"";position:absolute;top:5px;left:12px;right:12px;height:9px;border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));filter:blur(1px);
filter:blur(1px);
} }
.capsule.blue{background:linear-gradient(180deg,var(--blue),var(--blue-deep))} .capsule.blue{background:linear-gradient(180deg,var(--blue),var(--blue-deep))}
.capsule.red{background:linear-gradient(180deg,var(--red),var(--red-deep))} .capsule.red{background:linear-gradient(180deg,var(--red),var(--red-deep))}
.label{font:600 11px/1 system-ui;letter-spacing:.26em;text-transform:uppercase; .tag{font:600 11px/1 system-ui;letter-spacing:.24em;text-transform:uppercase;text-align:center;margin-bottom:7px}
text-align:center;color:var(--mut);margin-bottom:6px} .capsule-card.blue .tag{color:#7fa3f2}
.pill-card.blue .label{color:#7fa3f2} .capsule-card.red .tag{color:#ff7885}
.pill-card.red .label{color:#ff7885} .capsule-card h3{font-size:1.26rem;font-weight:600;text-align:center;margin:0 0 1.1rem;letter-spacing:.2px}
.headline{font-size:1.35rem;font-weight:600;text-align:center;margin:0 0 1rem;letter-spacing:.2px} ul.points{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:10px}
.body{color:var(--mut);font-size:14.5px;line-height:1.7;margin:0 0 1.6rem} ul.points li{color:var(--mut);font-size:14px;line-height:1.62;padding-left:18px;position:relative}
ul.points li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%}
.capsule-card.blue ul.points li::before{background:#4b7bec}
.capsule-card.red ul.points li::before{background:var(--red)}
ul.points b{color:var(--ink);font-weight:600}
.action{ .spacer{flex:1}
display:block;text-align:center;padding:12px 18px;border-radius:10px; .go{display:block;text-align:center;padding:12px 18px;border-radius:10px;
font-weight:600;font-size:14px;letter-spacing:.15px; font-weight:600;font-size:14px;border:1px solid transparent}
border:1px solid transparent;text-decoration:none; .capsule-card.blue .go{background:rgba(75,123,236,.13);color:#93b4f5;border-color:rgba(75,123,236,.34)}
transition:filter .15s ease; .capsule-card.red .go{background:var(--red);color:#0d0509}
}
.action:hover{filter:brightness(1.12)}
.pill-card.blue .action{background:rgba(75,123,236,.12);color:#93b4f5;border-color:rgba(75,123,236,.35)}
.pill-card.red .action{background:var(--red);color:#0d0509;border:none}
/* --mut, not --dim: 12.5px text on near-black needs 4.5:1 and --dim does not .foot{color:var(--mut);font-size:12.5px;text-align:center;margin-top:3.4rem;line-height:1.8}
reach it. */
.foot{color:var(--mut);font-size:12.5px;text-align:center;margin-top:3.4rem;line-height:1.75}
.foot a{color:var(--mut);text-decoration:underline;text-underline-offset:2px} .foot a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--ink)} .foot a:hover{color:var(--ink)}
.foot .alt{color:var(--dim)}
</style> </style>
</head> </head>
<body> <body>
@ -112,80 +99,121 @@ main h1{font-size:clamp(2rem,4.6vw,2.9rem);font-weight:600;line-height:1.2;
<main> <main>
<p class="eyebrow">Silent Mode</p> <p class="eyebrow">Silent Mode</p>
<h1>Two internets. <span class="g">Choose one.</span></h1> <h1>Two internets. <span class="g">Twice over.</span></h1>
<p class="intro">The web you use every day is owned. Companies decide which names exist, <p class="intro">The web you use every day is owned — companies decide which names exist,
which pages load, and whose voice carries. It works well — until it decides not to. which pages load, and whose voice carries. There is a second web running on the same
There is a second web, wired up on the same wires, that runs by different rules. wires, with no registrar and no gatekeeper. Whether you want to <em>use</em> it or
You are one download away from it.</p> <em>build</em> on it, it starts the same way: something you install, and a name that is
actually yours.</p>
<div class="pills"> <!-- ════ ACT I — the web you browse ════════════════════════════════ -->
<section class="act" aria-labelledby="act1">
<div class="act-head">
<span class="act-num">First choice</span>
<h2 id="act1">The web you browse</h2>
<p>Where you read, post, and are read. Pick the one you want to live in.</p>
</div>
<a class="pill-card blue" id="blue" href="/" data-choice="blue"> <div class="capsules">
<div class="capsule blue" aria-hidden="true"></div>
<p class="label">The blue one</p>
<h2 class="headline">Close this tab.</h2>
<p class="body">Nothing changes. Registrars keep leasing names on renewal terms.
Certificate authorities keep deciding what "trusted" means. App stores keep
approving apps. Cloud providers keep hosting what they choose to host, and
pulling what they choose to pull. Some pages stop loading. Some names get
taken. Some voices go quiet. The web you know keeps working. Mostly.</p>
<span class="action">Take me back</span>
</a>
<a class="pill-card red" id="red" href="/apps/#theseus" data-choice="red"> <a class="capsule-card blue" href="/choose/stay/">
<div class="capsule red" aria-hidden="true"></div> <div class="capsule blue" aria-hidden="true"></div>
<p class="label">The red one</p> <p class="tag">The blue one</p>
<h2 class="headline">Install one tool.</h2> <h3>Stay where it is easy.</h3>
<p class="body">Names live on a public ledger. You hold the key, so <ul class="points">
<b>no registrar can revoke or seize your name</b> — there is no company in the <li><b>Your account is a permission.</b> It exists while the platform allows it,
middle to ask. Pages live wherever the owner puts them: on a server you rent, under terms they rewrite when they like.</li>
on a swarm of strangers you paid a few cents, or inside a blockchain <li><b>What you publish stays up until it does not.</b> Moderation is theirs,
transaction the whole network stores. Trust comes from the ledger instead of appeals go to them, and the reasons need not be given.</li>
an authority — your browser checks a name's certificate fingerprint against <li><b>You are the measured product.</b> Attention is the business model, so
the chain, not against a company's word. You get a browser that reads this. being watched is not a bug in the system — it <em>is</em> the system.</li>
You get a name.</p> <li><b>The reach you built is not portable.</b> Leave, and the audience stays
<span class="action">Show me the browser →</span> behind.</li>
</a> </ul>
<div class="spacer"></div>
<span class="go">It works. Mostly. →</span>
</a>
</div> <a class="capsule-card red" href="/choose/free/">
<div class="capsule red" aria-hidden="true"></div>
<p class="tag">The red one</p>
<h3>Step outside it.</h3>
<ul class="points">
<li><b>No account, anywhere.</b> No email, no sign-up, no password to reset.
Nothing to suspend, because nothing was granted.</li>
<li><b>A name that is yours by key, not by permission.</b> Held on a public
ledger; no registrar stands between you and it.</li>
<li><b>Pages nobody can pull.</b> On your own server, spread across strangers
who are paid to keep it, or inside a transaction the whole network stores.</li>
<li><b>Nobody to petition, because nobody is in charge.</b> That cuts both ways,
and it is the honest trade.</li>
</ul>
<div class="spacer"></div>
<span class="go">Show me →</span>
</a>
</div>
</section>
<!-- ════ ACT II — the web you build on ═════════════════════════════ -->
<section class="act" aria-labelledby="act2">
<div class="act-head">
<span class="act-num">Second choice</span>
<h2 id="act2">The web you build on</h2>
<p>If you ship things, the question repeats one layer down — and this time the
gatekeepers have invoices.</p>
</div>
<div class="capsules">
<a class="capsule-card blue" href="/choose/registrars/">
<div class="capsule blue" aria-hidden="true"></div>
<p class="tag">The blue one</p>
<h3>Rent it, like everyone.</h3>
<ul class="points">
<li><b>A domain is a lease, not a title.</b> You rent it yearly at whatever the
registrar charges next time, and forgetting once can lose it.</li>
<li><b>Suspension is a supported feature.</b> Registrars act on court orders, UDRP
rulings and their own policy — by design, not by failure.</li>
<li><b>Every layer keeps a veto.</b> The host has terms of service. The CDN has an
acceptable-use policy. The certificate authority can revoke.</li>
<li><b>It is genuinely good infrastructure.</b> Fast, cheap, supported, and
someone answers the phone. That is the deal you are making.</li>
</ul>
<div class="spacer"></div>
<span class="go">The conventional stack →</span>
</a>
<a class="capsule-card red" href="/register.html">
<div class="capsule red" aria-hidden="true"></div>
<p class="tag">The red one</p>
<h3>Own the name outright.</h3>
<ul class="points">
<li><b>The name is a certificate you hold.</b> A CashToken on Bitcoin Cash — your
key controls it, and there is no company in the middle to ask.</li>
<li><b>Host it however you like.</b> Your own server, the Sia storage network, or
on-chain for something small. Repoint it whenever, for free.</li>
<li><b>No API key and no account.</b> Names are CashTokens, records are OP_RETURN,
and one beacon address enumerates the whole registry. No sidechain, no fork.</li>
<li><b>Run every part of it yourself.</b> A node plus a small BNS-only indexer
fits a one-core VPS. Any TLD works — the protocol has no allowlist.</li>
</ul>
<div class="spacer"></div>
<span class="go">Find a name →</span>
</a>
</div>
</section>
<p class="foot"> <p class="foot">
Running on Bitcoin Cash <b>chipnet</b> — an alpha on a test network, free to try, Running on Bitcoin Cash <b>chipnet</b> — an alpha on a test network, free to try, and
and honest about being early.<br> honest about being early.<br>
You are reading this on <a href="/">silentmode.st</a>, the ordinary-web face of the <span class="alt">You are reading this on <a href="/">silentmode.st</a>, the
project. The same page served the other way is at ordinary-web face of the project. The same pages served the other way live at
<a href="https://navigate.st/bns/silentmode.bch">silentmode.bch</a>. <a href="https://navigate.st/bns/silentmode.bch">silentmode.bch</a>.</span>
</p> </p>
</main> </main>
<script>
// "Take me back" means back — not a redirect to a search engine the visitor
// never asked for.
//
// The previous version tried window.open("","_self") + window.close(), then fell
// through to duckduckgo.com after 60ms. Browsers have blocked that close trick
// for years unless a script opened the tab, so in practice essentially every
// visitor who declined got dumped on a third-party site. Declining should be
// uneventful.
document.getElementById("blue").addEventListener("click", function (e) {
e.preventDefault();
// Genuinely script-opened (a popup)? Then closing is what the copy promises.
if (window.opener && !window.opener.closed) {
window.close();
return;
}
// Arrived from somewhere on this site? Go back there.
if (history.length > 1) {
history.back();
return;
}
// Typed the URL directly, nothing to go back to: the project's front page.
// The href already points there, so no-JS visitors land in the same place.
window.location.href = "/";
});
</script>
</body> </body>
</html> </html>

127
choose/registrars/index.html Normal file
View file

@ -0,0 +1,127 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>The conventional stack — Silent Mode</title>
<meta name="description" content="Registrars, hosts, CDNs and certificate authorities. What each layer costs, what it does well, and where each one keeps a veto.">
<link rel="stylesheet" href="/shared.css">
<style>
body{background:#070a11}
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(720px 460px at 50% -6%, rgba(75,123,236,.12), transparent 62%);
}
main{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:5rem 1.4rem 3rem}
.capsule{width:84px;height:38px;border-radius:999px;margin:0 auto 26px;position:relative;
background:linear-gradient(180deg,#4b7bec,#1e3a8a);
box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 8px 26px rgba(75,123,236,.24)}
.capsule::before{content:"";position:absolute;top:5px;left:12px;right:12px;height:9px;border-radius:999px;
background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(1px)}
main h1{font-size:clamp(1.9rem,4.4vw,2.6rem);font-weight:600;text-align:center;
margin:0 0 1rem;line-height:1.22;letter-spacing:.2px}
.lede{color:var(--mut);font-size:1.03rem;text-align:center;max-width:660px;margin:0 auto 2.8rem}
h2{font-size:1.1rem;font-weight:600;margin:0 0 1rem;letter-spacing:.2px}
.layers{display:grid;gap:11px;margin-bottom:2.4rem}
.layer{background:rgba(255,255,255,.026);border:1px solid rgba(255,255,255,.07);
border-radius:12px;padding:15px 18px;display:grid;grid-template-columns:130px 1fr;gap:14px}
@media (max-width:620px){.layer{grid-template-columns:1fr;gap:6px}}
.layer .who{color:var(--ink);font-size:14px;font-weight:600}
.layer .who small{display:block;color:var(--dim);font-weight:400;font-size:12px;margin-top:2px}
.layer .what{color:var(--mut);font-size:14px;line-height:1.65}
.layer .what em{color:#7fa3f2;font-style:normal}
.fair{background:var(--panel);border:1px solid var(--line);border-left:3px solid #7fa3f2;
border-radius:11px;padding:17px 20px;color:var(--mut);font-size:14px;line-height:1.72;margin-bottom:2.4rem}
.fair b{color:var(--ink)}
table{margin-bottom:2.4rem}
td b{color:var(--ink)}
.door{text-align:center;background:rgba(255,77,94,.05);border:1px solid rgba(255,77,94,.22);
border-radius:14px;padding:22px 20px}
.door p{color:var(--mut);font-size:14px;margin:0 0 1rem;line-height:1.7;max-width:560px;margin-left:auto;margin-right:auto}
.door a.btn{background:#ff4d5e;color:#0d0509;border:none}
.foot{color:var(--mut);font-size:12.5px;text-align:center;margin-top:3rem;line-height:1.8}
.foot a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--ink)}
</style>
</head>
<body>
<main>
<div class="capsule" aria-hidden="true"></div>
<h1>Rent it, like everyone.</h1>
<p class="lede">This is the stack almost every site on the internet is built on. It is
mature, it is inexpensive, and it is very good at its job. It is also five separate
companies, each of whom can independently decide your project is over.</p>
<h2>Who holds what</h2>
<div class="layers">
<div class="layer">
<div class="who">Registrar <small>GoDaddy, Namecheap, Cloudflare</small></div>
<div class="what">Leases you the name, yearly. <em>Can suspend or transfer it</em> on a
court order, a UDRP ruling, or its own policy — and must, by contract with the
registry.</div>
</div>
<div class="layer">
<div class="who">Host <small>AWS, Hetzner, DigitalOcean</small></div>
<div class="what">Runs the machine. <em>Can terminate under acceptable-use terms</em>,
usually with notice, sometimes without.</div>
</div>
<div class="layer">
<div class="who">CDN / proxy <small>Cloudflare, Fastly</small></div>
<div class="what">Sits in front of your traffic. <em>Can stop carrying it</em> — and has,
publicly, for customers who broke no law.</div>
</div>
<div class="layer">
<div class="who">Certificate authority <small>Let's Encrypt, DigiCert</small></div>
<div class="what">Vouches that you are you. <em>Can revoke</em>, at which point browsers
refuse the connection regardless of who is right.</div>
</div>
<div class="layer">
<div class="who">App store / payments <small>Apple, Google, Stripe</small></div>
<div class="what">If money or an app is involved, two more parties with terms and a
<em>right to decline</em>.</div>
</div>
</div>
<h2>What it costs</h2>
<table>
<tr><th>Item</th><th>Typical</th><th>Note</th></tr>
<tr><td><b>.com</b>, first year</td><td>$1–12</td><td>usually a promotional rate</td></tr>
<tr><td><b>.com</b>, renewal</td><td>$12–20/yr</td><td>the real price; wholesale is ~$9.59</td></tr>
<tr><td>Small VPS</td><td>$4–8/mo</td><td>plus your time</td></tr>
<tr><td>TLS certificate</td><td>$0</td><td>Let's Encrypt, genuinely free</td></tr>
<tr><td>Renewal, forever</td><td>every year</td><td>stop paying and the name returns to the market</td></tr>
</table>
<div class="fair">
<b>To be fair to it.</b> This stack is fast, well documented, supported at 3am, and
integrates with everything. The vetoes above also remove phishing sites, malware hosts
and worse — they exist for reasons, and most of the time they are used reasonably. If
you are shipping a normal business, this is the sensible default and it is not close.
The alternative gives up the support desk along with the gatekeeper.
</div>
<div class="door">
<p>The other option is not a replacement for all of that. It replaces exactly one
layer — the one that decides whether the name is still yours — and leaves the rest of
your choices open. Same day, few cents, no account.</p>
<a class="btn" href="/register.html">See what a name costs there →</a>
</div>
<p class="foot">
<a href="/choose/">← Back to the choice</a> · <a href="/">silentmode.st</a><br>
Company names are examples of each layer, not endorsements or accusations.
</p>
</main>
</body>
</html>

121
choose/stay/index.html Normal file
View file

@ -0,0 +1,121 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>You took the blue one — Silent Mode</title>
<meta name="description" content="The conventional web, stated plainly. It works, it is fast, and it is free at the point of use. Here is what you trade for that.">
<link rel="stylesheet" href="/shared.css">
<style>
body{background:#070a11}
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(720px 460px at 50% -6%, rgba(75,123,236,.12), transparent 62%);
}
main{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:5rem 1.4rem 3rem}
.capsule{width:84px;height:38px;border-radius:999px;margin:0 auto 26px;position:relative;
background:linear-gradient(180deg,#4b7bec,#1e3a8a);
box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 8px 26px rgba(75,123,236,.24)}
.capsule::before{content:"";position:absolute;top:5px;left:12px;right:12px;height:9px;border-radius:999px;
background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(1px)}
main h1{font-size:clamp(1.9rem,4.4vw,2.6rem);font-weight:600;text-align:center;
margin:0 0 1rem;line-height:1.22;letter-spacing:.2px}
.lede{color:var(--mut);font-size:1.03rem;text-align:center;max-width:640px;margin:0 auto 2.8rem}
h2{font-size:1.1rem;font-weight:600;margin:0 0 1rem;letter-spacing:.2px}
.bargain{display:grid;gap:11px;margin-bottom:2.4rem}
.item{background:rgba(255,255,255,.026);border:1px solid rgba(255,255,255,.07);
border-radius:12px;padding:15px 18px}
.item b{color:var(--ink);font-size:14.5px;display:block;margin-bottom:.28rem}
.item span{color:var(--mut);font-size:14px;line-height:1.66}
.fair{background:var(--panel);border:1px solid var(--line);border-left:3px solid #7fa3f2;
border-radius:11px;padding:17px 20px;color:var(--mut);font-size:14px;line-height:1.72;margin-bottom:2.6rem}
.fair b{color:var(--ink)}
.carry{text-align:center;margin-bottom:2.4rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:1.1rem}
.tile{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:11px;
padding:14px 10px;text-align:center;text-decoration:none;color:var(--mut);font-size:13.5px;
transition:border-color .2s ease,color .2s ease}
.tile:hover{border-color:rgba(75,123,236,.45);color:var(--ink)}
.tile:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.door{text-align:center;background:rgba(255,77,94,.05);border:1px solid rgba(255,77,94,.22);
border-radius:14px;padding:22px 20px}
.door p{color:var(--mut);font-size:14px;margin:0 0 1rem;line-height:1.7}
.door a.btn{background:#ff4d5e;color:#0d0509;border:none}
.foot{color:var(--mut);font-size:12.5px;text-align:center;margin-top:3rem;line-height:1.8}
.foot a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--ink)}
</style>
</head>
<body>
<main>
<div class="capsule" aria-hidden="true"></div>
<h1>Nothing changes. That is the point.</h1>
<p class="lede">The conventional web is fast, free at the point of use, and mostly
excellent. Billions of people use it every day and are perfectly well served. We are
not going to pretend it is a dystopia — but it is worth being clear about what the
arrangement actually is, because it is easy to forget you made one.</p>
<h2>The bargain, stated plainly</h2>
<div class="bargain">
<div class="item"><b>Your account is a permission, not a possession.</b>
<span>It exists because a company allows it to, under terms they can change. That is
not a conspiracy; it is what a terms-of-service relationship is.</span></div>
<div class="item"><b>Your domain is a lease.</b>
<span>Registered for a year at a time, renewed at whatever the price is then, and
suspendable on a court order or a dispute ruling. Forgetting once can lose it.</span></div>
<div class="item"><b>Attention is the business model.</b>
<span>Services that cost nothing are paid for by measuring what you do and selling
access to your attention. Being observed is not a flaw in that design — it is the
design working.</span></div>
<div class="item"><b>Reach is not portable.</b>
<span>The audience you build lives inside the platform. Leaving does not take it with
you, which is what makes leaving expensive.</span></div>
<div class="item"><b>Every layer keeps a veto.</b>
<span>Registrar, host, CDN, certificate authority, app store, payment processor. Any
one of them can decline, and each of them sometimes does.</span></div>
</div>
<div class="fair">
<b>To be fair to it.</b> Those vetoes also stop fraud, take down malware and remove
genuinely vile material, and the people operating them are mostly trying to get it
right. The support desk is real, the uptime is excellent, and someone answers when it
breaks. A system with nobody in charge gives all of that up too. Anyone selling you the
alternative without mentioning that is selling you something.
</div>
<div class="carry">
<h2>Carry on, then</h2>
<p style="color:var(--mut);font-size:14px;margin:0 auto;max-width:520px">
No hard feelings. The ordinary web is right through here.</p>
<div class="tiles">
<a class="tile" href="https://www.google.com" rel="noopener">Search</a>
<a class="tile" href="https://www.wikipedia.org" rel="noopener">Wikipedia</a>
<a class="tile" href="https://www.youtube.com" rel="noopener">Video</a>
<a class="tile" href="https://www.reddit.com" rel="noopener">Forums</a>
<a class="tile" href="https://news.ycombinator.com" rel="noopener">News</a>
</div>
</div>
<div class="door" style="margin-top:2.4rem">
<p>Still curious what the other one actually does? It costs nothing to look, and
nothing on this machine changes until you install something.</p>
<a class="btn" href="/choose/free/">Show me the other one →</a>
</div>
<p class="foot">
<a href="/choose/">← Back to the choice</a> · <a href="/">silentmode.st</a>
</p>
</main>
</body>
</html>

2
register.html
View file

@ -174,7 +174,7 @@
and your recovery phrase never leaves your browser.</div> and your recovery phrase never leaves your browser.</div>
</section> </section>
<section> <section id="hosting">
<h2>Hosting — where your site lives</h2> <h2>Hosting — where your site lives</h2>
<p class="lede">Point your name at any of these. Mix and match; change it whenever you like.</p> <p class="lede">Point your name at any of these. Mix and match; change it whenever you like.</p>
<div class="grid"> <div class="grid">