9c559967d1
Theseus Navigator: - Firefox-style toolbar: SVG back/fwd/reload/home buttons - security padlock badge in the address bar opens a floating site-info overlay VIEW (on top of the page, never pushes content down) - Edge-style favorites bar (shown only on the new-tab/home page) - search-engine picker (DuckDuckGo/Google/Bing/Brave/Startpage) - Theseus logo moved right, opens Settings; native menu removed - address bar doubles as search; bottom resolver status line Argus: - BNS-only indexer: an electrum endpoint over a bare BCHN node (watches just the beacon, caches txs so no txindex needed) + test - registry lifecycle / portfolio / name-index modules Site restructure (nav/apps/store/hermes/choose) + runbook notes.
191 lines
8.3 KiB
HTML
191 lines
8.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<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.">
|
|
<link rel="stylesheet" href="/shared.css">
|
|
<style>
|
|
/* Page-specific only. Tokens, body, footer and buttons come from shared.css.
|
|
NOTE: shared.css already uses `.pill` for status badges, so the capsule visual
|
|
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
|
|
offers a third option that undermines the point. The footer still links home. */
|
|
|
|
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{
|
|
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
|
|
background:
|
|
radial-gradient(600px 380px at 22% 34%, rgba(75,123,236,.11), transparent 60%),
|
|
radial-gradient(600px 380px at 78% 62%, rgba(255,77,94,.10), transparent 60%),
|
|
radial-gradient(1200px 700px at 50% 120%, rgba(214,255,61,.05), transparent 70%);
|
|
animation:drift 22s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes drift{
|
|
from{transform:translate3d(0,0,0)}
|
|
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{
|
|
--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}
|
|
|
|
.eyebrow{color:var(--dim);font:600 12px/1 system-ui;letter-spacing:.28em;
|
|
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;
|
|
text-align:center;margin:.4rem 0 1.2rem;letter-spacing:.2px}
|
|
.intro{color:var(--mut);font-size:1.03rem;max-width:600px;margin:0 auto 3.4rem;text-align:center}
|
|
|
|
.pills{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 auto;max-width:960px}
|
|
@media (max-width:720px){.pills{grid-template-columns:1fr}}
|
|
|
|
.pill-card{
|
|
position:relative;
|
|
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
|
|
border:1px solid rgba(255,255,255,.07);
|
|
border-radius:18px;padding:36px 30px 28px;
|
|
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)}
|
|
.pill-card.blue:hover{border-color:rgba(75,123,236,.55);box-shadow:0 12px 40px rgba(75,123,236,.18)}
|
|
.pill-card.red:hover{border-color:rgba(255,77,94,.55);box-shadow:0 12px 40px rgba(255,77,94,.18)}
|
|
/* Keyboard users get no underline to follow on these cards, so the focus ring
|
|
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{
|
|
width:96px;height:44px;border-radius:999px;margin:0 auto 22px;position:relative;
|
|
box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.4);
|
|
}
|
|
.capsule::before{
|
|
content:"";position:absolute;top:6px;left:14px;right:14px;height:11px;border-radius:999px;
|
|
background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
|
|
filter:blur(1px);
|
|
}
|
|
.capsule.blue{background:linear-gradient(180deg,var(--blue),var(--blue-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;
|
|
text-align:center;color:var(--mut);margin-bottom:6px}
|
|
.pill-card.blue .label{color:#7fa3f2}
|
|
.pill-card.red .label{color:#ff7885}
|
|
|
|
.headline{font-size:1.35rem;font-weight:600;text-align:center;margin:0 0 1rem;letter-spacing:.2px}
|
|
.body{color:var(--mut);font-size:14.5px;line-height:1.7;margin:0 0 1.6rem}
|
|
|
|
.action{
|
|
display:block;text-align:center;padding:12px 18px;border-radius:10px;
|
|
font-weight:600;font-size:14px;letter-spacing:.15px;
|
|
border:1px solid transparent;text-decoration:none;
|
|
transition:filter .15s ease;
|
|
}
|
|
.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
|
|
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:hover{color:var(--ink)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<main>
|
|
|
|
<p class="eyebrow">Silent Mode</p>
|
|
<h1>Two internets. <span class="g">Choose one.</span></h1>
|
|
<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.
|
|
There is a second web, wired up on the same wires, that runs by different rules.
|
|
You are one download away from it.</p>
|
|
|
|
<div class="pills">
|
|
|
|
<a class="pill-card blue" id="blue" href="/" data-choice="blue">
|
|
<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">
|
|
<div class="capsule red" aria-hidden="true"></div>
|
|
<p class="label">The red one</p>
|
|
<h2 class="headline">Install one tool.</h2>
|
|
<p class="body">Names live on a public ledger. You hold the key, so
|
|
<b>no registrar can revoke or seize your name</b> — there is no company in the
|
|
middle to ask. Pages live wherever the owner puts them: on a server you rent,
|
|
on a swarm of strangers you paid a few cents, or inside a blockchain
|
|
transaction the whole network stores. Trust comes from the ledger instead of
|
|
an authority — your browser checks a name's certificate fingerprint against
|
|
the chain, not against a company's word. You get a browser that reads this.
|
|
You get a name.</p>
|
|
<span class="action">Show me the browser →</span>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<p class="foot">
|
|
Running on Bitcoin Cash <b>chipnet</b> — an alpha on a test network, free to try,
|
|
and honest about being early.<br>
|
|
You are reading this on <a href="/">silentmode.st</a>, the ordinary-web face of the
|
|
project. The same page served the other way is at
|
|
<a href="https://navigate.st/bns/silentmode.bch">silentmode.bch</a>.
|
|
</p>
|
|
|
|
</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>
|
|
</html>
|