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

site-sirius-x: same side-nav + trimmed topnav on every sub-page

Browse source 
Every Sirius.X sub-page carried the old header shape — "Try it" and
"Register" living in the topnav next to the cross-site tabs — so
clicking Market or TLD reset the layout back to a state the index no
longer used. Rewrote each topnav to the site-only tabs (Sirius.X · TLD
· Market · Theseus.X · Sign in) and appended ".X" to the Theseus tab
so the ecosystem naming is consistent across pages.

Added the overlay side-nav to every page that carries named sections:
  tld.html            — Search · Registered
  theseus/            — Download · How · Verify
  docs/               — TLD registry · Register · Private TLDs ·
                        Market · Records · Signed records
  admin/              — Sign in · Session · Mint TLD · Registry
  brand/              — Logo · Avatar · Banner · Palette · Typography ·
                        Usage (section IDs added — the h2s were unnamed)

Same shape as the index and as Theseus.X: pointer-events:none overlay,
opacity 0.35 by default, ink + blurred backdrop on hover, acid green
on the active section, IntersectionObserver scroll-spy. Icon rail on
medium, bottom bar on mobile.

Pages without meaningful anchor targets (market/, portal.html,
studio.html, register.html) keep the trimmed topnav but no sidebar —
adding an empty rail would just be noise.
This commit is contained in:
Local Dev 2026-09-20 18:33:01 +02:00
parent efdba29d4a
commit 668855cebd
8 changed files with 2040 additions and 1760 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

845
admin/index.html
View file

@ -1,394 +1,451 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<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>Admin — Sirius.X</title> <title>Admin — Sirius.X</title>
<meta name="description" content="Sirius.x operator admin — mint TLDs, manage the registry, verify chain health. Operator-key gated."> <meta name="description" content="Sirius.x operator admin — mint TLDs, manage the registry, verify chain health. Operator-key gated.">
<link rel="icon" href="../assets/favicon.svg" type="image/svg+xml"> <link rel="icon" href="../assets/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="../assets/favicon.svg" color="#d6ff3d"> <link rel="mask-icon" href="../assets/favicon.svg" color="#d6ff3d">
<meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noindex,nofollow">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
<style> <style>
:root{ :root{
--bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06); --bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06);
--ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d; --ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d;
--ok:#4fd1a5; --taken:#f6768a; --warn:#ffc75f; --ok:#4fd1a5; --taken:#f6768a; --warn:#ffc75f;
} }
*{box-sizing:border-box} *{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,#131a2a 0%,transparent 60%),radial-gradient(ellipse 900px 500px at 100% 100%,#0a0f1c 0%,transparent 55%),radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%),var(--bg); body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,#131a2a 0%,transparent 60%),radial-gradient(ellipse 900px 500px at 100% 100%,#0a0f1c 0%,transparent 55%),radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%),var(--bg);
color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh} color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
a{color:var(--acid)} a{color:var(--acid)}
.wrap{max-width:900px;margin:0 auto;padding:0 1.2rem} .wrap{max-width:900px;margin:0 auto;padding:0 1.2rem}
.topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; .topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap;
padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)} padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)}
.topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px} .topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px}
.topnav .brand .g{color:var(--acid)} .topnav .brand .g{color:var(--acid)}
.topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px} .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
.topnav a:hover{color:var(--ink);background:var(--panel)} .topnav a:hover{color:var(--ink);background:var(--panel)}
.topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
.topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500} .topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
.topnav a.portal:hover{background:rgba(214,255,61,.18)} .topnav a.portal:hover{background:rgba(214,255,61,.18)}
header.hero{text-align:center;padding:2.8rem 1.2rem 1rem}
.mark{font-size:40px;line-height:1} /* Adaptive side nav — same shape as index.html and Theseus.X */
h1{font-size:clamp(1.5rem,4vw,2rem);margin:.3rem 0 .3rem} :root{--sn-w:200px}
h1 .g{color:var(--acid)} .sidenav{position:fixed;top:56px;left:0;bottom:0;width:var(--sn-w);z-index:15;
.tag{color:var(--mut);font-size:.98rem;max-width:600px;margin:0 auto} background:transparent;padding:32px 12px 22px 18px;
h2{font-size:1.2rem;margin:0 0 .35rem} overflow-y:auto;pointer-events:none;transition:width .15s ease}
h3{font-size:.98rem;margin:0 0 .3rem;font-family:ui-monospace,monospace} .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none;
section{padding:1.8rem 0;border-top:1px solid var(--line);margin-top:1.6rem} padding:9px 12px;border-radius:10px;
section:first-of-type{border-top:none;margin-top:.8rem} font-size:14.5px;font-weight:500;opacity:.35;pointer-events:auto;
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:.8rem} transition:opacity .12s,color .12s,background .12s,backdrop-filter .12s}
label{display:block;font-size:11.5px;color:var(--mut);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.4px} .sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center;
.field-hint{color:var(--dim);font-size:11px;margin-left:8px;text-transform:none;letter-spacing:0} display:none;justify-content:center;align-items:center}
input[type=text],textarea{ .sidenav a .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
width:100%;padding:9px 12px;border-radius:8px;border:1px solid #ffffff22;background:#0e131b; .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(11,14,20,.72);backdrop-filter:blur(8px)}
color:var(--ink);font-size:13px;font-family:ui-monospace,monospace;outline:none .sidenav a.active{opacity:.85;color:var(--acid)}
} .sidenav a.active:hover{opacity:1}
textarea{min-height:68px;resize:vertical} section{scroll-margin-top:70px}
input:focus,textarea:focus{border-color:#4b7bec} @media (max-width:1180px){
.btn{display:inline-block;text-decoration:none;padding:9px 16px;border-radius:9px;background:#4b7bec;color:#fff;font-size:13px;border:none;cursor:pointer;font-family:inherit} :root{--sn-w:64px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)} .sidenav{padding:22px 6px}
.btn.acid{background:var(--acid);color:#0b0e14;font-weight:600} .sidenav a{justify-content:center;padding:12px 4px;gap:0}
.btn.small{padding:5px 10px;font-size:12px} .sidenav a .ic{display:inline-flex}
.btn:hover{filter:brightness(1.12)} .sidenav a .lb{display:none}
.btn:disabled{opacity:.45;cursor:not-allowed} }
.row{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;align-items:center} @media (max-width:720px){
code{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all} :root{--sn-w:0}
.status{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--mut);margin-top:10px} body{padding-bottom:64px}
.status.ok{border-left:3px solid var(--ok)} .sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
.status.err{border-left:3px solid var(--taken);color:var(--taken)} padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
.status.warn{border-left:3px solid var(--warn);color:var(--warn)} display:flex;justify-content:space-around;overflow-x:auto}
.hidden{display:none} .sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;gap:0;opacity:.5}
.badge{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:999px;font-weight:600;letter-spacing:.3px} .sidenav a .ic{display:inline-flex}
.b-op{background:rgba(214,255,61,.14);color:var(--acid)} .sidenav a .lb{display:none}
.b-other{background:rgba(139,152,169,.14);color:var(--mut)} }
.b-mem{background:rgba(255,199,95,.14);color:var(--warn)}
table.tlds{width:100%;border-collapse:collapse;margin-top:1rem;font-size:13px} header.hero{text-align:center;padding:2.8rem 1.2rem 1rem}
table.tlds th,table.tlds td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .mark{font-size:40px;line-height:1}
table.tlds th{color:var(--mut);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px} h1{font-size:clamp(1.5rem,4vw,2rem);margin:.3rem 0 .3rem}
table.tlds .tld{font-family:ui-monospace,monospace;color:var(--acid);font-size:13.5px;font-weight:600} h1 .g{color:var(--acid)}
table.tlds .cat{font-family:ui-monospace,monospace;color:var(--mut);font-size:11.5px} .tag{color:var(--mut);font-size:.98rem;max-width:600px;margin:0 auto}
table.tlds .records{font-family:ui-monospace,monospace;color:var(--dim);font-size:11.5px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} h2{font-size:1.2rem;margin:0 0 .35rem}
.steps-log{margin-top:10px;font-family:ui-monospace,monospace;font-size:12px;color:var(--mut);background:#0e131b;border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:140px;overflow-y:auto;display:none} h3{font-size:.98rem;margin:0 0 .3rem;font-family:ui-monospace,monospace}
.steps-log.on{display:block} section{padding:1.8rem 0;border-top:1px solid var(--line);margin-top:1.6rem}
.steps-log div::before{content:"› ";color:var(--acid)} section:first-of-type{border-top:none;margin-top:.8rem}
.msg{font-size:13px;margin-top:10px} .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:.8rem}
.msg.ok{color:var(--ok)} .msg.err{color:var(--taken)} label{display:block;font-size:11.5px;color:var(--mut);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.4px}
footer{border-top:1px solid var(--line);padding:1.8rem 0 3rem;color:var(--dim);font-size:12.5px;text-align:center;margin-top:2rem} .field-hint{color:var(--dim);font-size:11px;margin-left:8px;text-transform:none;letter-spacing:0}
/* Deviant-family fonts + Fraunces/Ubuntu reader toggle. */ input[type=text],textarea{
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-feature-settings:"ss01","ss02"} width:100%;padding:9px 12px;border-radius:8px;border:1px solid #ffffff22;background:#0e131b;
code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace} color:var(--ink);font-size:13px;font-family:ui-monospace,monospace;outline:none
body{font-family:'DM Sans','Inter',system-ui,sans-serif !important;font-feature-settings:"ss01","ss02"} }
html[data-font-cmp="ubuntu"] body,html[data-font-cmp="ubuntu"] h1,html[data-font-cmp="ubuntu"] h2,html[data-font-cmp="ubuntu"] h3,html[data-font-cmp="ubuntu"] p,html[data-font-cmp="ubuntu"] a,html[data-font-cmp="ubuntu"] button,html[data-font-cmp="ubuntu"] span,html[data-font-cmp="ubuntu"] div,html[data-font-cmp="ubuntu"] label,html[data-font-cmp="ubuntu"] input,html[data-font-cmp="ubuntu"] li{font-family:'Ubuntu',system-ui,sans-serif !important} textarea{min-height:68px;resize:vertical}
html[data-font-cmp="ubuntu"] code,html[data-font-cmp="ubuntu"] .mono{font-family:'JetBrains Mono',ui-monospace,monospace !important} input:focus,textarea:focus{border-color:#4b7bec}
.font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase} .btn{display:inline-block;text-decoration:none;padding:9px 16px;border-radius:9px;background:#4b7bec;color:#fff;font-size:13px;border:none;cursor:pointer;font-family:inherit}
.font-picker button{background:transparent;border:none;color:var(--dim);padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.font-picker button:hover{color:var(--ink)} .btn.acid{background:var(--acid);color:#0b0e14;font-weight:600}
.font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600} .btn.small{padding:5px 10px;font-size:12px}
</style> .btn:hover{filter:brightness(1.12)}
</head> .btn:disabled{opacity:.45;cursor:not-allowed}
<body> .row{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;align-items:center}
code{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all}
<nav class="topnav"> .status{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--mut);margin-top:10px}
<a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a> .status.ok{border-left:3px solid var(--ok)}
<a href="../#try">Try it</a> .status.err{border-left:3px solid var(--taken);color:var(--taken)}
<a href="../#search-input">✏️ Register</a> .status.warn{border-left:3px solid var(--warn);color:var(--warn)}
<a href="../tld.html">🌐 TLD</a> .hidden{display:none}
<a href="../theseus/"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus</a> .badge{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:999px;font-weight:600;letter-spacing:.3px}
<a href="./" class="here">🛠 Admin</a> .b-op{background:rgba(214,255,61,.14);color:var(--acid)}
<a href="../portal.html" class="portal">🔑 Sign in</a> .b-other{background:rgba(139,152,169,.14);color:var(--mut)}
</nav> .b-mem{background:rgba(255,199,95,.14);color:var(--warn)}
table.tlds{width:100%;border-collapse:collapse;margin-top:1rem;font-size:13px}
<header class="hero"> table.tlds th,table.tlds td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
<div class="mark">🛠</div> table.tlds th{color:var(--mut);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
<h1><span class="g">Admin</span> panel</h1> table.tlds .tld{font-family:ui-monospace,monospace;color:var(--acid);font-size:13.5px;font-weight:600}
<p class="tag">Operator-side tools: mint new TLDs, browse the registry, verify chain health. table.tlds .cat{font-family:ui-monospace,monospace;color:var(--mut);font-size:11.5px}
Sign in with the wallet the ecosystem knows as the operator; unfamiliar wallets get table.tlds .records{font-family:ui-monospace,monospace;color:var(--dim);font-size:11.5px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
read-only access to the registry.</p> .steps-log{margin-top:10px;font-family:ui-monospace,monospace;font-size:12px;color:var(--mut);background:#0e131b;border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:140px;overflow-y:auto;display:none}
</header> .steps-log.on{display:block}
.steps-log div::before{content:"› ";color:var(--acid)}
<div class="wrap"> .msg{font-size:13px;margin-top:10px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--taken)}
<section id="signin"> footer{border-top:1px solid var(--line);padding:1.8rem 0 3rem;color:var(--dim);font-size:12.5px;text-align:center;margin-top:2rem}
<h2>Sign in</h2> /* Deviant-family fonts + Fraunces/Ubuntu reader toggle. */
<p class="status">Chipnet-only. Keys stay in this browser tab; a mint transaction is signed h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-feature-settings:"ss01","ss02"}
locally and broadcast direct to the electrum. Operator gate is client-side — the covenant code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
that enforces it on-chain is a mainnet requirement (Decentralized.DNS/DESIGN-tld-registry.md §5.2).</p> body{font-family:'DM Sans','Inter',system-ui,sans-serif !important;font-feature-settings:"ss01","ss02"}
<div class="card"> html[data-font-cmp="ubuntu"] body,html[data-font-cmp="ubuntu"] h1,html[data-font-cmp="ubuntu"] h2,html[data-font-cmp="ubuntu"] h3,html[data-font-cmp="ubuntu"] p,html[data-font-cmp="ubuntu"] a,html[data-font-cmp="ubuntu"] button,html[data-font-cmp="ubuntu"] span,html[data-font-cmp="ubuntu"] div,html[data-font-cmp="ubuntu"] label,html[data-font-cmp="ubuntu"] input,html[data-font-cmp="ubuntu"] li{font-family:'Ubuntu',system-ui,sans-serif !important}
<label for="seed">Recovery phrase</label> html[data-font-cmp="ubuntu"] code,html[data-font-cmp="ubuntu"] .mono{font-family:'JetBrains Mono',ui-monospace,monospace !important}
<textarea id="seed" placeholder="word1 word2 … word12" spellcheck="false" autocomplete="off"></textarea> .font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
<div class="row"> .font-picker button{background:transparent;border:none;color:var(--dim);padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
<button class="btn acid" id="signin-btn">Sign in →</button> .font-picker button:hover{color:var(--ink)}
<span class="field-hint" id="signin-hint">seed stays in memory only</span> .font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600}
</div> </style>
<div id="signin-err" class="msg err hidden"></div> </head>
</div> <body>
</section>
<nav class="topnav">
<section id="me" class="hidden"> <a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a>
<h2>Signed in <span class="badge b-op" id="me-role" style="margin-left:8px">operator</span></h2> <a href="../tld.html">🌐 TLD</a>
<div class="card"> <a href="../theseus/"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus<span class="g">.X</span></a>
<label>Address</label> <a href="./" class="here">🛠 Admin</a>
<div><code id="me-addr">—</code></div> <a href="../portal.html" class="portal">🔑 Sign in</a>
<label style="margin-top:12px">Token address (holds the TLD certificates)</label> </nav>
<div><code id="me-taddr">—</code></div>
<div class="row"> <aside class="sidenav" aria-label="On this page">
<button class="btn ghost small" id="signout-btn">Sign out</button> <a href="#signin" title="Sign in" ><span class="ic" aria-hidden="true">🔑</span><span class="lb">Sign in</span></a>
</div> <a href="#me" title="Signed in" ><span class="ic" aria-hidden="true">👤</span><span class="lb">Session</span></a>
</div> <a href="#mint" title="Mint a new TLD" ><span class="ic" aria-hidden="true">✏️</span><span class="lb">Mint TLD</span></a>
</section> <a href="#registry" title="TLD registry" ><span class="ic" aria-hidden="true">📋</span><span class="lb">Registry</span></a>
</aside>
<section id="mint" class="hidden">
<h2>Mint a new TLD</h2> <header class="hero">
<p class="tag" style="max-width:none">Adds a per-TLD certificate to the TLD beacon. The cert <div class="mark">🛠</div>
lands in your token address. Cost is chain fees + beacon dust (~1,300 chipnet sats).</p> <h1><span class="g">Admin</span> panel</h1>
<div class="card"> <p class="tag">Operator-side tools: mint new TLDs, browse the registry, verify chain health.
<label>TLD label <span class="field-hint">1–16 chars, [a-z0-9-]</span></label> Sign in with the wallet the ecosystem knows as the operator; unfamiliar wallets get
<input type="text" id="mint-tld" placeholder="e.g. shop, dao, wiki" maxlength="16"> read-only access to the registry.</p>
</header>
<label>Records JSON <span class="field-hint">optional; leave empty for defaults</span></label>
<textarea id="mint-records" placeholder='e.g. {"policy":"open","fee_bps":500}'>{}</textarea> <div class="wrap">
<div class="row"> <section id="signin">
<button class="btn acid" id="mint-btn">Mint TLD →</button> <h2>Sign in</h2>
<span class="field-hint" id="mint-hint"></span> <p class="status">Chipnet-only. Keys stay in this browser tab; a mint transaction is signed
</div> locally and broadcast direct to the electrum. Operator gate is client-side — the covenant
<div class="steps-log" id="mint-log"></div> that enforces it on-chain is a mainnet requirement (Decentralized.DNS/DESIGN-tld-registry.md §5.2).</p>
<div class="msg" id="mint-msg"></div> <div class="card">
</div> <label for="seed">Recovery phrase</label>
</section> <textarea id="seed" placeholder="word1 word2 … word12" spellcheck="false" autocomplete="off"></textarea>
<div class="row">
<section id="registry"> <button class="btn acid" id="signin-btn">Sign in →</button>
<h2>TLD registry</h2> <span class="field-hint" id="signin-hint">seed stays in memory only</span>
<p class="tag" style="max-width:none;font-size:.92rem">Every TLD registered on the beacon. Operators </div>
(signed-in) can toggle a TLD's visibility on the public /api/tlds listing — hidden TLDs stop <div id="signin-err" class="msg err hidden"></div>
appearing in the name-search UIs, but on-chain registrations under them keep resolving.</p> </div>
<div class="card" id="op-token-card" style="margin-top:.8rem"> </section>
<label>Operator token <span class="field-hint">stored per browser tab, not sent anywhere except the /api/tld-visibility POST</span></label>
<input type="password" id="op-token" placeholder="paste BNS_OPERATOR_TOKEN"> <section id="me" class="hidden">
<div class="row"> <h2>Signed in <span class="badge b-op" id="me-role" style="margin-left:8px">operator</span></h2>
<button class="btn ghost small" id="op-token-save">Save token</button> <div class="card">
<span id="op-token-msg" class="dim"></span> <label>Address</label>
</div> <div><code id="me-addr">—</code></div>
</div> <label style="margin-top:12px">Token address (holds the TLD certificates)</label>
<div class="status" id="registry-status">Loading current registry…</div> <div><code id="me-taddr">—</code></div>
<div id="registry-table"></div> <div class="row">
</section> <button class="btn ghost small" id="signout-btn">Sign out</button>
</div>
</div> </div>
</section>
<footer id="site-footer"></footer>
<section id="mint" class="hidden">
<script type="importmap"> <h2>Mint a new TLD</h2>
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } } <p class="tag" style="max-width:none">Adds a per-TLD certificate to the TLD beacon. The cert
</script> lands in your token address. Cost is chain fees + beacon dust (~1,300 chipnet sats).</p>
<div class="card">
<script type="module"> <label>TLD label <span class="field-hint">1–16 chars, [a-z0-9-]</span></label>
// Cache-buster bump when the bundle changes (Chrome's ES-module map caches <input type="text" id="mint-tld" placeholder="e.g. shop, dao, wiki" maxlength="16">
// aggressively per plain URL). Portal.html has the same pattern.
import * as BNS from "https://silentmode.st/js/bns-register.js?v=20260908split"; <label>Records JSON <span class="field-hint">optional; leave empty for defaults</span></label>
<textarea id="mint-records" placeholder='e.g. {"policy":"open","fee_bps":500}'>{}</textarea>
const $ = (id) => document.getElementById(id);
const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c])); <div class="row">
<button class="btn acid" id="mint-btn">Mint TLD →</button>
// Operator gate: address that owns the chipnet TLD beacon + seeded TLDs. <span class="field-hint" id="mint-hint"></span>
// Client-side only — the covenant that enforces this on-chain lands with the </div>
// mainnet TLD-registry work. For chipnet this is honour-system; a curious <div class="steps-log" id="mint-log"></div>
// visitor can bypass by pasting any seed, but non-operator UPDs/TREGs won't <div class="msg" id="mint-msg"></div>
// carry the countersignature future clients will check. </div>
const OPERATOR_ADDRESS = "bchtest:qzew3dqcsj0guwe5y3uxf9q2xs5ajgy9lca4z093cu"; </section>
let wallet = null; <section id="registry">
let isOperator = false; <h2>TLD registry</h2>
<p class="tag" style="max-width:none;font-size:.92rem">Every TLD registered on the beacon. Operators
// ---------- sign in ---------- (signed-in) can toggle a TLD's visibility on the public /api/tlds listing — hidden TLDs stop
$("signin-btn").addEventListener("click", async () => { appearing in the name-search UIs, but on-chain registrations under them keep resolving.</p>
const btn = $("signin-btn"); <div class="card" id="op-token-card" style="margin-top:.8rem">
const errBox = $("signin-err"); <label>Operator token <span class="field-hint">stored per browser tab, not sent anywhere except the /api/tld-visibility POST</span></label>
errBox.classList.add("hidden"); <input type="password" id="op-token" placeholder="paste BNS_OPERATOR_TOKEN">
const raw = $("seed").value.trim(); <div class="row">
if (!raw) { errBox.textContent = "Enter your seed phrase."; errBox.classList.remove("hidden"); return; } <button class="btn ghost small" id="op-token-save">Save token</button>
btn.disabled = true; btn.textContent = "Unlocking…"; <span id="op-token-msg" class="dim"></span>
try { </div>
wallet = await BNS.BuiltInWallet.fromMnemonic(raw); </div>
} catch (e) { <div class="status" id="registry-status">Loading current registry…</div>
errBox.textContent = "Could not unlock: " + (e.message || e); <div id="registry-table"></div>
errBox.classList.remove("hidden"); </section>
btn.disabled = false; btn.textContent = "Sign in →";
return; </div>
}
$("seed").value = ""; <footer id="site-footer"></footer>
btn.disabled = false; btn.textContent = "Sign in →";
isOperator = wallet.address === OPERATOR_ADDRESS; <script type="importmap">
await enterAdmin(); { "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
}); </script>
$("signout-btn").addEventListener("click", () => { <script type="module">
wallet = null; isOperator = false; // Cache-buster bump when the bundle changes (Chrome's ES-module map caches
$("me").classList.add("hidden"); // aggressively per plain URL). Portal.html has the same pattern.
$("mint").classList.add("hidden"); import * as BNS from "https://silentmode.st/js/bns-register.js?v=20260908split";
$("signin").classList.remove("hidden");
}); const $ = (id) => document.getElementById(id);
const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
async function enterAdmin() {
$("signin").classList.add("hidden"); // Operator gate: address that owns the chipnet TLD beacon + seeded TLDs.
$("me").classList.remove("hidden"); // Client-side only — the covenant that enforces this on-chain lands with the
$("me-addr").textContent = wallet.address; // mainnet TLD-registry work. For chipnet this is honour-system; a curious
$("me-taddr").textContent = wallet.tokenAddress; // visitor can bypass by pasting any seed, but non-operator UPDs/TREGs won't
const role = $("me-role"); // carry the countersignature future clients will check.
role.textContent = isOperator ? "operator" : "read-only"; const OPERATOR_ADDRESS = "bchtest:qzew3dqcsj0guwe5y3uxf9q2xs5ajgy9lca4z093cu";
role.className = "badge " + (isOperator ? "b-op" : "b-other");
if (isOperator) { let wallet = null;
$("mint").classList.remove("hidden"); let isOperator = false;
}
} // ---------- sign in ----------
$("signin-btn").addEventListener("click", async () => {
// ---------- operator token ---------- const btn = $("signin-btn");
// Stored in sessionStorage so refreshing the tab keeps the token for the const errBox = $("signin-err");
// session but a full browser close forgets it. Not localStorage — the errBox.classList.add("hidden");
// weaker persistence is the right default for a POST-write credential. const raw = $("seed").value.trim();
const opToken = () => { try { return sessionStorage.getItem("bnsOperatorToken") || ""; } catch { return ""; } }; if (!raw) { errBox.textContent = "Enter your seed phrase."; errBox.classList.remove("hidden"); return; }
function setOpTokenMsg(text, ok) { btn.disabled = true; btn.textContent = "Unlocking…";
const el = $("op-token-msg"); el.textContent = text; try {
el.style.color = ok === true ? "var(--ok)" : ok === false ? "var(--taken)" : "var(--dim)"; wallet = await BNS.BuiltInWallet.fromMnemonic(raw);
} } catch (e) {
$("op-token").value = opToken(); errBox.textContent = "Could not unlock: " + (e.message || e);
$("op-token-save").addEventListener("click", () => { errBox.classList.remove("hidden");
try { sessionStorage.setItem("bnsOperatorToken", $("op-token").value.trim()); } catch {} btn.disabled = false; btn.textContent = "Sign in →";
setOpTokenMsg(opToken() ? "saved for this session" : "cleared", opToken() ? true : null); return;
}); }
$("seed").value = "";
// ---------- TLD registry with hide/unhide ---------- btn.disabled = false; btn.textContent = "Sign in →";
// Fetches BOTH /api/tlds?include_hidden=1 (so we see the hidden ones the isOperator = wallet.address === OPERATOR_ADDRESS;
// public listing filters out) and the current /api/tld-visibility. Renders await enterAdmin();
// one row per TLD with a checkbox for the hidden flag — flipping it POSTs });
// to /api/tld-visibility with the operator token.
async function loadRegistry() { $("signout-btn").addEventListener("click", () => {
const status = $("registry-status"); wallet = null; isOperator = false;
const table = $("registry-table"); $("me").classList.add("hidden");
status.className = "status"; $("mint").classList.add("hidden");
status.textContent = "Loading current registry from the chain…"; $("signin").classList.remove("hidden");
table.innerHTML = ""; });
try {
const [rTlds, rVis] = await Promise.all([ async function enterAdmin() {
fetch("https://silentmode.st/api/tlds?include_hidden=1"), $("signin").classList.add("hidden");
fetch("https://silentmode.st/api/tld-visibility"), $("me").classList.remove("hidden");
]); $("me-addr").textContent = wallet.address;
if (!rTlds.ok) throw new Error("api/tlds " + rTlds.status); $("me-taddr").textContent = wallet.tokenAddress;
if (!rVis.ok) throw new Error("api/tld-visibility " + rVis.status); const role = $("me-role");
const body = await rTlds.json(); role.textContent = isOperator ? "operator" : "read-only";
const vis = await rVis.json(); role.className = "badge " + (isOperator ? "b-op" : "b-other");
const hidden = new Set(vis.hidden || []); if (isOperator) {
const tlds = (body.tlds || []).sort((a, b) => a.tld.localeCompare(b.tld)); $("mint").classList.remove("hidden");
status.className = "status ok"; }
status.textContent = `${tlds.length} TLDs on the beacon · ${hidden.size} hidden from public listing`; }
let html = '<table class="tlds"><thead><tr><th>TLD</th><th>Names</th><th>Advertised</th><th>Hidden from public</th></tr></thead><tbody>';
for (const t of tlds) { // ---------- operator token ----------
const isHidden = hidden.has(t.tld); // Stored in sessionStorage so refreshing the tab keeps the token for the
html += `<tr> // session but a full browser close forgets it. Not localStorage — the
<td class="tld">.${esc(t.tld)}</td> // weaker persistence is the right default for a POST-write credential.
<td class="cat">${t.registered_count ?? 0}</td> const opToken = () => { try { return sessionStorage.getItem("bnsOperatorToken") || ""; } catch { return ""; } };
<td class="cat">${t.in_advertised ? "yes" : ""}</td> function setOpTokenMsg(text, ok) {
<td><label class="row" style="gap:6px;margin:0;font-size:12.5px;color:var(--mut)"> const el = $("op-token-msg"); el.textContent = text;
<input type="checkbox" data-hide-tld="${esc(t.tld)}" ${isHidden ? "checked" : ""}> el.style.color = ok === true ? "var(--ok)" : ok === false ? "var(--taken)" : "var(--dim)";
${isHidden ? '<span class="badge b-mem">hidden</span>' : '<span class="dim">public</span>'} }
</label></td> $("op-token").value = opToken();
</tr>`; $("op-token-save").addEventListener("click", () => {
} try { sessionStorage.setItem("bnsOperatorToken", $("op-token").value.trim()); } catch {}
html += "</tbody></table>"; setOpTokenMsg(opToken() ? "saved for this session" : "cleared", opToken() ? true : null);
table.innerHTML = html; });
// Wire visibility checkboxes.
table.querySelectorAll("input[data-hide-tld]").forEach((cb) => { // ---------- TLD registry with hide/unhide ----------
cb.addEventListener("change", async (e) => { // Fetches BOTH /api/tlds?include_hidden=1 (so we see the hidden ones the
const tld = e.target.getAttribute("data-hide-tld"); // public listing filters out) and the current /api/tld-visibility. Renders
const hide = e.target.checked; // one row per TLD with a checkbox for the hidden flag — flipping it POSTs
if (!opToken()) { // to /api/tld-visibility with the operator token.
e.target.checked = !hide; async function loadRegistry() {
setOpTokenMsg("paste your operator token first — required for /api/tld-visibility writes", false); const status = $("registry-status");
return; const table = $("registry-table");
} status.className = "status";
e.target.disabled = true; status.textContent = "Loading current registry from the chain…";
try { table.innerHTML = "";
const r = await fetch("https://silentmode.st/api/tld-visibility", { try {
method: "POST", const [rTlds, rVis] = await Promise.all([
headers: { "content-type": "application/json", authorization: "Bearer " + opToken() }, fetch("https://silentmode.st/api/tlds?include_hidden=1"),
body: JSON.stringify({ tld, hide }), fetch("https://silentmode.st/api/tld-visibility"),
}); ]);
if (!r.ok) { if (!rTlds.ok) throw new Error("api/tlds " + rTlds.status);
const j = await r.json().catch(() => ({})); if (!rVis.ok) throw new Error("api/tld-visibility " + rVis.status);
throw new Error(j.error || "http " + r.status); const body = await rTlds.json();
} const vis = await rVis.json();
setOpTokenMsg(`.${tld} is now ${hide ? "hidden" : "public"}`, true); const hidden = new Set(vis.hidden || []);
setTimeout(loadRegistry, 400); // refresh row states + counts const tlds = (body.tlds || []).sort((a, b) => a.tld.localeCompare(b.tld));
} catch (err) { status.className = "status ok";
e.target.checked = !hide; status.textContent = `${tlds.length} TLDs on the beacon · ${hidden.size} hidden from public listing`;
setOpTokenMsg("update failed: " + err.message, false); let html = '<table class="tlds"><thead><tr><th>TLD</th><th>Names</th><th>Advertised</th><th>Hidden from public</th></tr></thead><tbody>';
} finally { for (const t of tlds) {
e.target.disabled = false; const isHidden = hidden.has(t.tld);
} html += `<tr>
}); <td class="tld">.${esc(t.tld)}</td>
}); <td class="cat">${t.registered_count ?? 0}</td>
} catch (e) { <td class="cat">${t.in_advertised ? "yes" : ""}</td>
status.className = "status err"; <td><label class="row" style="gap:6px;margin:0;font-size:12.5px;color:var(--mut)">
status.textContent = "Could not load registry: " + (e.message || e); <input type="checkbox" data-hide-tld="${esc(t.tld)}" ${isHidden ? "checked" : ""}>
} ${isHidden ? '<span class="badge b-mem">hidden</span>' : '<span class="dim">public</span>'}
} </label></td>
loadRegistry(); </tr>`;
}
// ---------- mint a new TLD ---------- html += "</tbody></table>";
$("mint-btn").addEventListener("click", async () => { table.innerHTML = html;
if (!wallet || !isOperator) return; // Wire visibility checkboxes.
const tld = $("mint-tld").value.trim().toLowerCase(); table.querySelectorAll("input[data-hide-tld]").forEach((cb) => {
if (!/^[a-z0-9-]{1,16}$/.test(tld)) { cb.addEventListener("change", async (e) => {
$("mint-msg").className = "msg err"; const tld = e.target.getAttribute("data-hide-tld");
$("mint-msg").textContent = "TLD label must be 1–16 chars [a-z0-9-]"; const hide = e.target.checked;
return; if (!opToken()) {
} e.target.checked = !hide;
let records = {}; setOpTokenMsg("paste your operator token first — required for /api/tld-visibility writes", false);
const rawRecords = $("mint-records").value.trim(); return;
if (rawRecords) { }
try { records = JSON.parse(rawRecords); } e.target.disabled = true;
catch (e) { $("mint-msg").className = "msg err"; $("mint-msg").textContent = "Records JSON is invalid: " + e.message; return; } try {
} const r = await fetch("https://silentmode.st/api/tld-visibility", {
const btn = $("mint-btn"); method: "POST",
const msg = $("mint-msg"); headers: { "content-type": "application/json", authorization: "Bearer " + opToken() },
const log = $("mint-log"); body: JSON.stringify({ tld, hide }),
log.className = "steps-log on"; log.innerHTML = ""; });
msg.textContent = ""; msg.className = "msg"; if (!r.ok) {
const push = (t) => { const d = document.createElement("div"); d.textContent = t; log.appendChild(d); log.scrollTop = log.scrollHeight; }; const j = await r.json().catch(() => ({}));
btn.disabled = true; btn.textContent = "Signing…"; throw new Error(j.error || "http " + r.status);
let el = null; }
try { setOpTokenMsg(`.${tld} is now ${hide ? "hidden" : "public"}`, true);
el = await BNS.connect(); setTimeout(loadRegistry, 400); // refresh row states + counts
push("connected to chipnet"); } catch (err) {
const res = await BNS.registerTldWithBuiltInWallet(el, { e.target.checked = !hide;
wallet, tld, records, setOpTokenMsg("update failed: " + err.message, false);
onProgress: (step) => push(step), } finally {
}); e.target.disabled = false;
push("broadcast: " + (res.txid || res.txId || "(unknown)")); }
msg.className = "msg ok"; });
msg.textContent = "Minted .${tld}. Category " + (res.category || "unknown") + ". Registry refresh below in ~30s."; });
btn.textContent = "Mint TLD →"; btn.disabled = false; } catch (e) {
$("mint-tld").value = ""; status.className = "status err";
$("mint-records").value = "{}"; status.textContent = "Could not load registry: " + (e.message || e);
setTimeout(loadRegistry, 3000); }
} catch (e) { }
msg.className = "msg err"; loadRegistry();
msg.textContent = "Mint failed: " + (e.message || e);
push("error: " + (e.message || e)); // ---------- mint a new TLD ----------
btn.disabled = false; btn.textContent = "Mint TLD →"; $("mint-btn").addEventListener("click", async () => {
} finally { if (!wallet || !isOperator) return;
try { el?.close?.(); } catch {} const tld = $("mint-tld").value.trim().toLowerCase();
} if (!/^[a-z0-9-]{1,16}$/.test(tld)) {
}); $("mint-msg").className = "msg err";
</script> $("mint-msg").textContent = "TLD label must be 1–16 chars [a-z0-9-]";
<script src="../js/pin-escrow.js?v=20260909pin"></script> return;
<script src="../js/pricing.js?v=20260909tldhigh"></script> }
<script defer src="../js/site-footer.js?v=20260907rel"></script> let records = {};
<script defer src="../js/theme.js?v=20260920compact"></script> const rawRecords = $("mint-records").value.trim();
<script defer src="../js/profile-menu.js?v=20260908tabs"></script> if (rawRecords) {
</body> try { records = JSON.parse(rawRecords); }
</html> catch (e) { $("mint-msg").className = "msg err"; $("mint-msg").textContent = "Records JSON is invalid: " + e.message; return; }
}
const btn = $("mint-btn");
const msg = $("mint-msg");
const log = $("mint-log");
log.className = "steps-log on"; log.innerHTML = "";
msg.textContent = ""; msg.className = "msg";
const push = (t) => { const d = document.createElement("div"); d.textContent = t; log.appendChild(d); log.scrollTop = log.scrollHeight; };
btn.disabled = true; btn.textContent = "Signing…";
let el = null;
try {
el = await BNS.connect();
push("connected to chipnet");
const res = await BNS.registerTldWithBuiltInWallet(el, {
wallet, tld, records,
onProgress: (step) => push(step),
});
push("broadcast: " + (res.txid || res.txId || "(unknown)"));
msg.className = "msg ok";
msg.textContent = "Minted .${tld}. Category " + (res.category || "unknown") + ". Registry refresh below in ~30s.";
btn.textContent = "Mint TLD →"; btn.disabled = false;
$("mint-tld").value = "";
$("mint-records").value = "{}";
setTimeout(loadRegistry, 3000);
} catch (e) {
msg.className = "msg err";
msg.textContent = "Mint failed: " + (e.message || e);
push("error: " + (e.message || e));
btn.disabled = false; btn.textContent = "Mint TLD →";
} finally {
try { el?.close?.(); } catch {}
}
});
</script>
<script src="../js/pin-escrow.js?v=20260909pin"></script>
<script src="../js/pricing.js?v=20260909tldhigh"></script>
<script defer src="../js/site-footer.js?v=20260907rel"></script>
<script defer src="../js/theme.js?v=20260920compact"></script>
<script defer src="../js/profile-menu.js?v=20260908tabs"></script>
<script>
(() => {
const links = document.querySelectorAll(".sidenav a[href^='#']");
if (!links.length) return;
const map = new Map();
links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) map.set(el, a); });
const io = new IntersectionObserver((entries) => {
entries.forEach((en) => {
if (!en.isIntersecting) return;
const a = map.get(en.target); if (!a) return;
links.forEach((l) => l.classList.remove("active"));
a.classList.add("active");
});
}, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });
map.forEach((_, el) => io.observe(el));
})();
</script>
</body>
</html>

539
brand/index.html
View file

@ -1,240 +1,299 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<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>Brand — Sirius.X</title> <title>Brand — Sirius.X</title>
<meta name="description" content="Sirius.X brand kit — logo, wordmark, avatar, banner, favicon, colour palette, and usage guidance. All assets served as SVG so they stay crisp at any size."> <meta name="description" content="Sirius.X brand kit — logo, wordmark, avatar, banner, favicon, colour palette, and usage guidance. All assets served as SVG so they stay crisp at any size.">
<link rel="icon" href="./favicon.svg" type="image/svg+xml"> <link rel="icon" href="./favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="./favicon.svg" color="#d6ff3d"> <link rel="mask-icon" href="./favicon.svg" color="#d6ff3d">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:site_name" content="Sirius.X"> <meta property="og:site_name" content="Sirius.X">
<meta property="og:title" content="Sirius.X brand kit"> <meta property="og:title" content="Sirius.X brand kit">
<meta property="og:description" content="Logo, wordmark, avatar, banner, favicon, colour palette. All SVG, downloadable, MIT."> <meta property="og:description" content="Logo, wordmark, avatar, banner, favicon, colour palette. All SVG, downloadable, MIT.">
<meta property="og:url" content="https://silentmode.st/sirius-x/brand/"> <meta property="og:url" content="https://silentmode.st/sirius-x/brand/">
<meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg"> <meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
<style> <style>
:root{ :root{
--bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06); --bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06);
--ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d; --ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d;
} }
*{box-sizing:border-box} *{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,#131a2a 0%,transparent 60%),radial-gradient(ellipse 900px 500px at 100% 100%,#0a0f1c 0%,transparent 55%),radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%),var(--bg); body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,#131a2a 0%,transparent 60%),radial-gradient(ellipse 900px 500px at 100% 100%,#0a0f1c 0%,transparent 55%),radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%),var(--bg);
color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh} color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
a{color:var(--acid)} a{color:var(--acid)}
.wrap{max-width:1040px;margin:0 auto;padding:0 1.2rem} .wrap{max-width:1040px;margin:0 auto;padding:0 1.2rem}
.topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; .topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap;
padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)} padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)}
.topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px} .topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px}
.topnav .brand .g{color:var(--acid)} .topnav .brand .g{color:var(--acid)}
.topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px} .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
.topnav a:hover{color:var(--ink);background:var(--panel)} .topnav a:hover{color:var(--ink);background:var(--panel)}
.topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
.topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500} .topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
.topnav a.portal:hover{background:rgba(214,255,61,.18)} .topnav a.portal:hover{background:rgba(214,255,61,.18)}
header.hero{text-align:center;padding:3.5rem 1.2rem 1rem}
.mark{font-size:44px;line-height:1} /* Adaptive side nav — same shape as index.html and Theseus.X */
h1{font-size:clamp(1.7rem,4.6vw,2.3rem);margin:.3rem 0 .3rem} :root{--sn-w:200px}
h1 .g{color:var(--acid)} .sidenav{position:fixed;top:56px;left:0;bottom:0;width:var(--sn-w);z-index:15;
.tag{color:var(--mut);font-size:1.02rem;max-width:640px;margin:0 auto} background:transparent;padding:32px 12px 22px 18px;
section{padding:2.2rem 0;border-top:1px solid var(--line);margin-top:2rem} overflow-y:auto;pointer-events:none;transition:width .15s ease}
section:first-of-type{border-top:none;margin-top:1.2rem} .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none;
h2{font-size:1.35rem;margin:0 0 .35rem} padding:9px 12px;border-radius:10px;
h3{font-size:1rem;margin:0 0 .3rem} font-size:14.5px;font-weight:500;opacity:.35;pointer-events:auto;
.lede{color:var(--mut);margin:0 0 1.4rem;max-width:720px} transition:opacity .12s,color .12s,background .12s,backdrop-filter .12s}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} .sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center;
.asset{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;display:flex;flex-direction:column} display:none;justify-content:center;align-items:center}
.asset .preview{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:20px; .sidenav a .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
margin-bottom:12px;min-height:130px;display:flex;align-items:center;justify-content:center} .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(11,14,20,.72);backdrop-filter:blur(8px)}
.asset .preview.wide{padding:0} .sidenav a.active{opacity:.85;color:var(--acid)}
.asset .preview.wide img{width:100%;height:auto;display:block;border-radius:9px} .sidenav a.active:hover{opacity:1}
.asset .preview.avatar{padding:0} section{scroll-margin-top:70px}
.asset .preview.avatar img{width:104px;height:104px;display:block;border-radius:14px} @media (max-width:1180px){
.asset .preview.favicon img{width:64px;height:64px;display:block} :root{--sn-w:64px}
.asset .preview.mono{background:#eef1f7;color:#0b0e14} .sidenav{padding:22px 6px}
.asset h3{display:flex;align-items:center;justify-content:space-between;gap:10px} .sidenav a{justify-content:center;padding:12px 4px;gap:0}
.asset .meta{color:var(--dim);font-size:12.5px;margin:2px 0 10px;font-family:ui-monospace,monospace} .sidenav a .ic{display:inline-flex}
.asset .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto} .sidenav a .lb{display:none}
.btn{display:inline-block;text-decoration:none;padding:6px 12px;border-radius:8px;background:transparent; }
border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-family:inherit;cursor:pointer} @media (max-width:720px){
.btn:hover{background:var(--panel2)} :root{--sn-w:0}
.btn.acid{background:var(--acid);color:#0b0e14;border-color:var(--acid);font-weight:600} body{padding-bottom:64px}
.btn.acid:hover{filter:brightness(1.1)} .sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:1rem} padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
.sw{border:1px solid var(--line);border-radius:10px;overflow:hidden} display:flex;justify-content:space-around;overflow-x:auto}
.sw .chip{height:70px} .sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;gap:0;opacity:.5}
.sw .info{padding:10px 12px;font-size:12.5px;font-family:ui-monospace,monospace;color:var(--mut)} .sidenav a .ic{display:inline-flex}
.sw .info b{color:var(--ink);display:block;font-family:inherit} .sidenav a .lb{display:none}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid); }
border-radius:10px;padding:12px 15px;color:var(--mut);font-size:13.5px;margin-top:1.2rem}
.note b{color:var(--ink)} header.hero{text-align:center;padding:3.5rem 1.2rem 1rem}
code{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all} .mark{font-size:44px;line-height:1}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem} h1{font-size:clamp(1.7rem,4.6vw,2.3rem);margin:.3rem 0 .3rem}
/* Deviant-family fonts + Fraunces/Ubuntu reader toggle. */ h1 .g{color:var(--acid)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-feature-settings:"ss01","ss02"} .tag{color:var(--mut);font-size:1.02rem;max-width:640px;margin:0 auto}
code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace} section{padding:2.2rem 0;border-top:1px solid var(--line);margin-top:2rem}
body{font-family:'DM Sans','Inter',system-ui,sans-serif !important;font-feature-settings:"ss01","ss02"} section:first-of-type{border-top:none;margin-top:1.2rem}
html[data-font-cmp="ubuntu"] body,html[data-font-cmp="ubuntu"] h1,html[data-font-cmp="ubuntu"] h2,html[data-font-cmp="ubuntu"] h3,html[data-font-cmp="ubuntu"] p,html[data-font-cmp="ubuntu"] a,html[data-font-cmp="ubuntu"] button,html[data-font-cmp="ubuntu"] span,html[data-font-cmp="ubuntu"] div,html[data-font-cmp="ubuntu"] label,html[data-font-cmp="ubuntu"] input,html[data-font-cmp="ubuntu"] li{font-family:'Ubuntu',system-ui,sans-serif !important} h2{font-size:1.35rem;margin:0 0 .35rem}
html[data-font-cmp="ubuntu"] code,html[data-font-cmp="ubuntu"] .mono{font-family:'JetBrains Mono',ui-monospace,monospace !important} h3{font-size:1rem;margin:0 0 .3rem}
.font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase} .lede{color:var(--mut);margin:0 0 1.4rem;max-width:720px}
.font-picker button{background:transparent;border:none;color:var(--dim);padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.font-picker button:hover{color:var(--ink)} .asset{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;display:flex;flex-direction:column}
.font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600} .asset .preview{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:20px;
</style> margin-bottom:12px;min-height:130px;display:flex;align-items:center;justify-content:center}
<script type="importmap"> .asset .preview.wide{padding:0}
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } } .asset .preview.wide img{width:100%;height:auto;display:block;border-radius:9px}
</script> .asset .preview.avatar{padding:0}
</head> .asset .preview.avatar img{width:104px;height:104px;display:block;border-radius:14px}
<body> .asset .preview.favicon img{width:64px;height:64px;display:block}
.asset .preview.mono{background:#eef1f7;color:#0b0e14}
<nav class="topnav"> .asset h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
<a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a> .asset .meta{color:var(--dim);font-size:12.5px;margin:2px 0 10px;font-family:ui-monospace,monospace}
<a href="../#try">Try it</a> .asset .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
<a href="../#search-input">✏️ Register</a> .btn{display:inline-block;text-decoration:none;padding:6px 12px;border-radius:8px;background:transparent;
<a href="../tld.html">🌐 TLD</a> border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-family:inherit;cursor:pointer}
<a href="../theseus/"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus</a> .btn:hover{background:var(--panel2)}
<a href="../portal.html" class="portal">🔑 Sign in</a> .btn.acid{background:var(--acid);color:#0b0e14;border-color:var(--acid);font-weight:600}
</nav> .btn.acid:hover{filter:brightness(1.1)}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:1rem}
<header class="hero"> .sw{border:1px solid var(--line);border-radius:10px;overflow:hidden}
<div class="mark">🎨</div> .sw .chip{height:70px}
<h1>Sirius.X <span class="g">brand kit</span></h1> .sw .info{padding:10px 12px;font-size:12.5px;font-family:ui-monospace,monospace;color:var(--mut)}
<p class="tag">Logo, wordmark, avatar, banner, favicon, and the colour palette. Every asset ships as .sw .info b{color:var(--ink);display:block;font-family:inherit}
SVG so it stays crisp at any size and reads correctly in light and dark contexts. Free to reuse .note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid);
with attribution.</p> border-radius:10px;padding:12px 15px;color:var(--mut);font-size:13.5px;margin-top:1.2rem}
</header> .note b{color:var(--ink)}
code{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all}
<div class="wrap"> footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
/* Deviant-family fonts + Fraunces/Ubuntu reader toggle. */
<section> h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-feature-settings:"ss01","ss02"}
<h2>Logo &amp; wordmark</h2> code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
<p class="lede">A 4-point sparkle star plus <b>Sirius.X</b>, with the <code>.x</code> TLD picked out body{font-family:'DM Sans','Inter',system-ui,sans-serif !important;font-feature-settings:"ss01","ss02"}
in acid green. The star alone works when you have no room for the wordmark; the full lockup is html[data-font-cmp="ubuntu"] body,html[data-font-cmp="ubuntu"] h1,html[data-font-cmp="ubuntu"] h2,html[data-font-cmp="ubuntu"] h3,html[data-font-cmp="ubuntu"] p,html[data-font-cmp="ubuntu"] a,html[data-font-cmp="ubuntu"] button,html[data-font-cmp="ubuntu"] span,html[data-font-cmp="ubuntu"] div,html[data-font-cmp="ubuntu"] label,html[data-font-cmp="ubuntu"] input,html[data-font-cmp="ubuntu"] li{font-family:'Ubuntu',system-ui,sans-serif !important}
the default choice everywhere else.</p> html[data-font-cmp="ubuntu"] code,html[data-font-cmp="ubuntu"] .mono{font-family:'JetBrains Mono',ui-monospace,monospace !important}
<div class="grid"> .font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
<div class="asset"> .font-picker button{background:transparent;border:none;color:var(--dim);padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
<div class="preview"><img src="./logo.svg" alt="sirius.x logo" style="max-width:100%;height:auto"></div> .font-picker button:hover{color:var(--ink)}
<h3>Wordmark <span class="meta">SVG · 320×64</span></h3> .font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600}
<p class="lede" style="margin-bottom:.6rem">Full colour, dark backgrounds. Use this by default.</p> </style>
<div class="row"> <script type="importmap">
<a class="btn acid" href="./logo.svg" download>Download SVG</a> { "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
<a class="btn" href="./logo.svg" target="_blank">Open</a> </script>
</div> </head>
</div> <body>
<div class="asset">
<div class="preview mono" style="color:#0b0e14"><img src="./logo-mono.svg" alt="sirius.x mono" style="max-width:100%;height:auto;color:inherit"></div> <nav class="topnav">
<h3>Wordmark, monochrome <span class="meta">SVG · currentColor</span></h3> <a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a>
<p class="lede" style="margin-bottom:.6rem">Uses <code>currentColor</code>, inherits from the <a href="../tld.html">🌐 TLD</a>
surrounding text. Print, embossing, single-colour merch.</p> <a href="../theseus/"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus<span class="g">.X</span></a>
<div class="row"> <a href="../portal.html" class="portal">🔑 Sign in</a>
<a class="btn acid" href="./logo-mono.svg" download>Download SVG</a> </nav>
<a class="btn" href="./logo-mono.svg" target="_blank">Open</a>
</div> <aside class="sidenav" aria-label="On this page">
</div> <a href="#logo" title="Logo &amp; wordmark" ><span class="ic" aria-hidden="true">✦</span><span class="lb">Logo</span></a>
</div> <a href="#avatar" title="Avatar &amp; favicon" ><span class="ic" aria-hidden="true">🎭</span><span class="lb">Avatar</span></a>
</section> <a href="#banner" title="Social banner" ><span class="ic" aria-hidden="true">🖼</span><span class="lb">Banner</span></a>
<a href="#palette" title="Colour palette" ><span class="ic" aria-hidden="true">🎨</span><span class="lb">Palette</span></a>
<section> <a href="#typography" title="Typography" ><span class="ic" aria-hidden="true">🅰️</span><span class="lb">Typography</span></a>
<h2>Avatar &amp; favicon</h2> <a href="#usage" title="Usage &amp; licence" ><span class="ic" aria-hidden="true">📜</span><span class="lb">Usage</span></a>
<p class="lede">Square icons for social profiles, Nostr, GitHub, and browser tabs.</p> </aside>
<div class="grid">
<div class="asset"> <header class="hero">
<div class="preview avatar"><img src="./avatar.svg" alt="sirius.x avatar"></div> <div class="mark">🎨</div>
<h3>Avatar <span class="meta">SVG · 512×512</span></h3> <h1>Sirius.X <span class="g">brand kit</span></h1>
<p class="lede" style="margin-bottom:.6rem">Square profile picture. Social platforms apply <p class="tag">Logo, wordmark, avatar, banner, favicon, and the colour palette. Every asset ships as
their own round mask, so corners stay hard.</p> SVG so it stays crisp at any size and reads correctly in light and dark contexts. Free to reuse
<div class="row"> with attribution.</p>
<a class="btn acid" href="./avatar.svg" download>Download SVG</a> </header>
<a class="btn" href="./avatar.svg" target="_blank">Open</a>
</div> <div class="wrap">
</div>
<div class="asset"> <section id="logo">
<div class="preview favicon"><img src="./favicon.svg" alt="sirius.x favicon"></div> <h2>Logo &amp; wordmark</h2>
<h3>Favicon <span class="meta">SVG · 64×64, 12px radius</span></h3> <p class="lede">A 4-point sparkle star plus <b>Sirius.X</b>, with the <code>.x</code> TLD picked out
<p class="lede" style="margin-bottom:.6rem">Rounded browser-tab icon. Scales down to 16×16 in acid green. The star alone works when you have no room for the wordmark; the full lockup is
cleanly; used on every Sirius.X page.</p> the default choice everywhere else.</p>
<div class="row"> <div class="grid">
<a class="btn acid" href="./favicon.svg" download>Download SVG</a> <div class="asset">
<a class="btn" href="./favicon.svg" target="_blank">Open</a> <div class="preview"><img src="./logo.svg" alt="sirius.x logo" style="max-width:100%;height:auto"></div>
</div> <h3>Wordmark <span class="meta">SVG · 320×64</span></h3>
</div> <p class="lede" style="margin-bottom:.6rem">Full colour, dark backgrounds. Use this by default.</p>
</div> <div class="row">
</section> <a class="btn acid" href="./logo.svg" download>Download SVG</a>
<a class="btn" href="./logo.svg" target="_blank">Open</a>
<section> </div>
<h2>Social banner</h2> </div>
<p class="lede">1200×630 (OpenGraph / Twitter Card canonical). Composition survives aggressive <div class="asset">
centre-cropping — the star and tagline both stay visible even after Facebook and Discord chop <div class="preview mono" style="color:#0b0e14"><img src="./logo-mono.svg" alt="sirius.x mono" style="max-width:100%;height:auto;color:inherit"></div>
the sides.</p> <h3>Wordmark, monochrome <span class="meta">SVG · currentColor</span></h3>
<div class="asset"> <p class="lede" style="margin-bottom:.6rem">Uses <code>currentColor</code>, inherits from the
<div class="preview wide"><img src="./banner.svg" alt="sirius.x banner"></div> surrounding text. Print, embossing, single-colour merch.</p>
<div class="row"> <div class="row">
<a class="btn acid" href="./banner.svg" download>Download SVG</a> <a class="btn acid" href="./logo-mono.svg" download>Download SVG</a>
<a class="btn" href="./banner.svg" target="_blank">Open</a> <a class="btn" href="./logo-mono.svg" target="_blank">Open</a>
</div> </div>
</div> </div>
</section> </div>
</section>
<section>
<h2>Colour palette</h2> <section id="avatar">
<p class="lede">Silent Mode family colours. Dark chromes are the default; acid green is the <h2>Avatar &amp; favicon</h2>
single accent that consistently signals "this is Sirius.X".</p> <p class="lede">Square icons for social profiles, Nostr, GitHub, and browser tabs.</p>
<div class="swatches"> <div class="grid">
<div class="sw"><div class="chip" style="background:#d6ff3d"></div><div class="info"><b>Acid</b>#d6ff3d — accent, links, active nav</div></div> <div class="asset">
<div class="sw"><div class="chip" style="background:#0b0e14"></div><div class="info"><b>Background</b>#0b0e14 — page canvas</div></div> <div class="preview avatar"><img src="./avatar.svg" alt="sirius.x avatar"></div>
<div class="sw"><div class="chip" style="background:#141a24"></div><div class="info"><b>Panel</b>#141a24 — cards, elevated surfaces</div></div> <h3>Avatar <span class="meta">SVG · 512×512</span></h3>
<div class="sw"><div class="chip" style="background:#18202c"></div><div class="info"><b>Panel 2</b>#18202c — nested / step items</div></div> <p class="lede" style="margin-bottom:.6rem">Square profile picture. Social platforms apply
<div class="sw"><div class="chip" style="background:#e7eaf1"></div><div class="info"><b>Ink</b>#e7eaf1 — body text on dark</div></div> their own round mask, so corners stay hard.</p>
<div class="sw"><div class="chip" style="background:#8b98a9"></div><div class="info"><b>Muted</b>#8b98a9 — secondary text</div></div> <div class="row">
<div class="sw"><div class="chip" style="background:#5e6678"></div><div class="info"><b>Dim</b>#5e6678 — tertiary text, dividers</div></div> <a class="btn acid" href="./avatar.svg" download>Download SVG</a>
<div class="sw"><div class="chip" style="background:#4fd1a5"></div><div class="info"><b>OK</b>#4fd1a5 — success / available</div></div> <a class="btn" href="./avatar.svg" target="_blank">Open</a>
<div class="sw"><div class="chip" style="background:#f6768a"></div><div class="info"><b>Taken</b>#f6768a — errors / unavailable</div></div> </div>
<div class="sw"><div class="chip" style="background:#ffc75f"></div><div class="info"><b>Warn</b>#ffc75f — caution, holds</div></div> </div>
</div> <div class="asset">
</section> <div class="preview favicon"><img src="./favicon.svg" alt="sirius.x favicon"></div>
<h3>Favicon <span class="meta">SVG · 64×64, 12px radius</span></h3>
<section> <p class="lede" style="margin-bottom:.6rem">Rounded browser-tab icon. Scales down to 16×16
<h2>Typography</h2> cleanly; used on every Sirius.X page.</p>
<p class="lede">System font stack, so nothing needs to load and every OS renders the wordmark in <div class="row">
the same family the reader is used to.</p> <a class="btn acid" href="./favicon.svg" download>Download SVG</a>
<div class="asset" style="max-width:640px"> <a class="btn" href="./favicon.svg" target="_blank">Open</a>
<p style="margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif; </div>
font-size:36px;font-weight:600;letter-spacing:-.5px">The quick brown fox</p> </div>
<p style="margin:.4rem 0 0;color:var(--mut);font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif; </div>
font-size:16px">jumps over the lazy dog · 0123456789 · Sirius.X</p> </section>
<div class="meta" style="margin-top:12px">system-ui, -apple-system, Segoe UI, Roboto, sans-serif</div>
</div> <section id="banner">
<div class="note">The wordmark's <code>.x</code> is a <code>&lt;tspan fill="#d6ff3d"&gt;</code> — <h2>Social banner</h2>
don't render the whole word in acid, and don't render the star without the star's exact 4-point <p class="lede">1200×630 (OpenGraph / Twitter Card canonical). Composition survives aggressive
path (it's a mark, not a generic asterisk).</div> centre-cropping — the star and tagline both stay visible even after Facebook and Discord chop
</section> the sides.</p>
<div class="asset">
<section> <div class="preview wide"><img src="./banner.svg" alt="sirius.x banner"></div>
<h2>Usage &amp; licence</h2> <div class="row">
<p class="lede">All assets are MIT. Reuse them for third-party tools that integrate with Sirius.X <a class="btn acid" href="./banner.svg" download>Download SVG</a>
(wallets, indexers, explorers, blog posts about BCNR). Keep the star's proportions intact and <a class="btn" href="./banner.svg" target="_blank">Open</a>
don't recolour the acid to a similar-but-different green — palette drift is what makes brands </div>
look untrustworthy over time.</p> </div>
<ul style="color:var(--mut);font-size:14px;padding-left:1.2rem"> </section>
<li><b style="color:var(--ink)">Do</b> use the mark to indicate "supports Sirius.X" or "hosted on Sirius.X".</li>
<li><b style="color:var(--ink)">Do</b> shrink to the favicon at 16×16 — the SVG scales cleanly.</li> <section id="palette">
<li><b style="color:var(--ink)">Don't</b> imply endorsement of a specific product without asking.</li> <h2>Colour palette</h2>
<li><b style="color:var(--ink)">Don't</b> stretch, skew, or re-tint the star.</li> <p class="lede">Silent Mode family colours. Dark chromes are the default; acid green is the
</ul> single accent that consistently signals "this is Sirius.X".</p>
</section> <div class="swatches">
<div class="sw"><div class="chip" style="background:#d6ff3d"></div><div class="info"><b>Acid</b>#d6ff3d — accent, links, active nav</div></div>
</div> <div class="sw"><div class="chip" style="background:#0b0e14"></div><div class="info"><b>Background</b>#0b0e14 — page canvas</div></div>
<div class="sw"><div class="chip" style="background:#141a24"></div><div class="info"><b>Panel</b>#141a24 — cards, elevated surfaces</div></div>
<footer id="site-footer"></footer> <div class="sw"><div class="chip" style="background:#18202c"></div><div class="info"><b>Panel 2</b>#18202c — nested / step items</div></div>
<div class="sw"><div class="chip" style="background:#e7eaf1"></div><div class="info"><b>Ink</b>#e7eaf1 — body text on dark</div></div>
<script src="../js/pin-escrow.js?v=20260909pin"></script> <div class="sw"><div class="chip" style="background:#8b98a9"></div><div class="info"><b>Muted</b>#8b98a9 — secondary text</div></div>
<script src="../js/pricing.js?v=20260909tldhigh"></script> <div class="sw"><div class="chip" style="background:#5e6678"></div><div class="info"><b>Dim</b>#5e6678 — tertiary text, dividers</div></div>
<script defer src="../js/site-footer.js?v=20260907rel"></script> <div class="sw"><div class="chip" style="background:#4fd1a5"></div><div class="info"><b>OK</b>#4fd1a5 — success / available</div></div>
<script defer src="../js/theme.js?v=20260920compact"></script> <div class="sw"><div class="chip" style="background:#f6768a"></div><div class="info"><b>Taken</b>#f6768a — errors / unavailable</div></div>
<script defer src="../js/profile-menu.js?v=20260908tabs"></script> <div class="sw"><div class="chip" style="background:#ffc75f"></div><div class="info"><b>Warn</b>#ffc75f — caution, holds</div></div>
</body> </div>
</html> </section>
<section id="typography">
<h2>Typography</h2>
<p class="lede">System font stack, so nothing needs to load and every OS renders the wordmark in
the same family the reader is used to.</p>
<div class="asset" style="max-width:640px">
<p style="margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size:36px;font-weight:600;letter-spacing:-.5px">The quick brown fox</p>
<p style="margin:.4rem 0 0;color:var(--mut);font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size:16px">jumps over the lazy dog · 0123456789 · Sirius.X</p>
<div class="meta" style="margin-top:12px">system-ui, -apple-system, Segoe UI, Roboto, sans-serif</div>
</div>
<div class="note">The wordmark's <code>.x</code> is a <code>&lt;tspan fill="#d6ff3d"&gt;</code> —
don't render the whole word in acid, and don't render the star without the star's exact 4-point
path (it's a mark, not a generic asterisk).</div>
</section>
<section id="usage">
<h2>Usage &amp; licence</h2>
<p class="lede">All assets are MIT. Reuse them for third-party tools that integrate with Sirius.X
(wallets, indexers, explorers, blog posts about BCNR). Keep the star's proportions intact and
don't recolour the acid to a similar-but-different green — palette drift is what makes brands
look untrustworthy over time.</p>
<ul style="color:var(--mut);font-size:14px;padding-left:1.2rem">
<li><b style="color:var(--ink)">Do</b> use the mark to indicate "supports Sirius.X" or "hosted on Sirius.X".</li>
<li><b style="color:var(--ink)">Do</b> shrink to the favicon at 16×16 — the SVG scales cleanly.</li>
<li><b style="color:var(--ink)">Don't</b> imply endorsement of a specific product without asking.</li>
<li><b style="color:var(--ink)">Don't</b> stretch, skew, or re-tint the star.</li>
</ul>
</section>
</div>
<footer id="site-footer"></footer>
<script src="../js/pin-escrow.js?v=20260909pin"></script>
<script src="../js/pricing.js?v=20260909tldhigh"></script>
<script defer src="../js/site-footer.js?v=20260907rel"></script>
<script defer src="../js/theme.js?v=20260920compact"></script>
<script defer src="../js/profile-menu.js?v=20260908tabs"></script>
<script>
(() => {
const links = document.querySelectorAll(".sidenav a[href^='#']");
if (!links.length) return;
const map = new Map();
links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) map.set(el, a); });
const io = new IntersectionObserver((entries) => {
entries.forEach((en) => {
if (!en.isIntersecting) return;
const a = map.get(en.target); if (!a) return;
links.forEach((l) => l.classList.remove("active"));
a.classList.add("active");
});
}, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });
map.forEach((_, el) => io.observe(el));
})();
</script>
</body>
</html>

1283
docs/index.html
View file

File diff suppressed because it is too large Load diff

4
market/index.html
View file

@ -102,11 +102,9 @@
<body> <body>
<nav class="topnav"> <nav class="topnav">
<a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a> <a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a>
<a href="../#try">Try it</a>
<a href="../#search-input">✏️ Register</a>
<a href="../tld.html">🌐 TLD</a> <a href="../tld.html">🌐 TLD</a>
<a href="./" class="here">🛒 Market</a> <a href="./" class="here">🛒 Market</a>
<a href="../theseus/"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus</a> <a href="../theseus/"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus<span class="g">.X</span></a>
<a href="../portal.html" class="portal">🔑 Sign in</a> <a href="../portal.html" class="portal">🔑 Sign in</a>
</nav> </nav>

4
portal.html
View file

@ -265,11 +265,9 @@
<nav class="topnav"> <nav class="topnav">
<a class="brand" href="./"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a> <a class="brand" href="./"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a>
<a href="./#try">Try it</a>
<a href="./#search-input">✏️ Register</a>
<a href="./tld.html">🌐 TLD</a> <a href="./tld.html">🌐 TLD</a>
<a href="./market">🛒 Market</a> <a href="./market">🛒 Market</a>
<a href="./theseus"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus</a> <a href="./theseus"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus<span class="g">.X</span></a>
<a href="./portal.html" class="portal here">🔑 Sign in</a> <a href="./portal.html" class="portal here">🔑 Sign in</a>
</nav> </nav>

2
storage/index.html
View file

@ -205,8 +205,6 @@
<nav class="topnav"> <nav class="topnav">
<a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a> <a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a>
<a href="../#try">Try it</a>
<a href="../#search-input">✏️ Register</a>
<a href="../tld.html">🌐 TLD</a> <a href="../tld.html">🌐 TLD</a>
<a href="../market/">🛒 Market</a> <a href="../market/">🛒 Market</a>
<a href="../portal.html" class="portal here">🔑 Storage</a> <a href="../portal.html" class="portal here">🔑 Storage</a>

440
theseus/index.html
View file

@ -1,192 +1,248 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<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>Theseus Navigator — the browser that speaks Bitcoin Cash names — Sirius.X</title> <title>Theseus Navigator — the browser that speaks Bitcoin Cash names — Sirius.X</title>
<meta name="description" content="Theseus Navigator is a Chromium-based browser with native Bitcoin Cash Domain Names resolution built in — no OS-level daemon, no DNS shim, no root-store install. Download for Windows."> <meta name="description" content="Theseus Navigator is a Chromium-based browser with native Bitcoin Cash Domain Names resolution built in — no OS-level daemon, no DNS shim, no root-store install. Download for Windows.">
<!-- Theseus.X has its own compass-mark favicon and logo — reuse them here so <!-- Theseus.X has its own compass-mark favicon and logo — reuse them here so
tabs on this subpage read as Theseus (compass), not Sirius (star), and tabs on this subpage read as Theseus (compass), not Sirius (star), and
shared-link previews carry Theseus's own OG image. Copied from shared-link previews carry Theseus's own OG image. Copied from
silentmode.st/bns/theseus.x/assets/ to keep sirius.x self-contained. --> silentmode.st/bns/theseus.x/assets/ to keep sirius.x self-contained. -->
<link rel="icon" href="./assets/favicon.svg" type="image/svg+xml"> <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="./assets/favicon.svg" color="#d6ff3d"> <link rel="mask-icon" href="./assets/favicon.svg" color="#d6ff3d">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:site_name" content="Theseus Navigator"> <meta property="og:site_name" content="Theseus Navigator">
<meta property="og:title" content="Theseus Navigator — the browser that speaks Bitcoin Cash names"> <meta property="og:title" content="Theseus Navigator — the browser that speaks Bitcoin Cash names">
<meta property="og:description" content="Native .bch and BCNR name resolution built into a Chromium browser. No OS-level daemon, no root-store install. Download for Windows."> <meta property="og:description" content="Native .bch and BCNR name resolution built into a Chromium browser. No OS-level daemon, no root-store install. Download for Windows.">
<meta property="og:url" content="https://silentmode.st/sirius-x/theseus/"> <meta property="og:url" content="https://silentmode.st/sirius-x/theseus/">
<meta property="og:image" content="https://silentmode.st/sirius-x/theseus/assets/logo.svg"> <meta property="og:image" content="https://silentmode.st/sirius-x/theseus/assets/logo.svg">
<meta name="theme-color" content="#0b0e14"> <meta name="theme-color" content="#0b0e14">
<meta name="twitter:card" content="summary"> <meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
<style> <style>
:root{ :root{
--bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06); --bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06);
--ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d; --ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d;
--chain:#d6ff3d; --sia:#b39ddb; --srv:#4fd1a5; --ok:#4fd1a5; --taken:#f6768a; --warn:#ffc75f; --chain:#d6ff3d; --sia:#b39ddb; --srv:#4fd1a5; --ok:#4fd1a5; --taken:#f6768a; --warn:#ffc75f;
} }
*{box-sizing:border-box} *{box-sizing:border-box}
html{scroll-behavior:smooth} html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,#131a2a 0%,transparent 60%),radial-gradient(ellipse 900px 500px at 100% 100%,#0a0f1c 0%,transparent 55%),radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%),var(--bg); body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,#131a2a 0%,transparent 60%),radial-gradient(ellipse 900px 500px at 100% 100%,#0a0f1c 0%,transparent 55%),radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%),var(--bg);
color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh} color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
a{color:var(--acid)} a{color:var(--acid)}
.wrap{max-width:980px;margin:0 auto;padding:0 1.2rem} .wrap{max-width:980px;margin:0 auto;padding:0 1.2rem}
.topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; .topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap;
padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)} padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)}
.topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px} .topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px}
.topnav .brand .g{color:var(--acid)} .topnav .brand .g{color:var(--acid)}
.topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px} .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
.topnav a:hover{color:var(--ink);background:var(--panel)} .topnav a:hover{color:var(--ink);background:var(--panel)}
.topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
.topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500} .topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
.topnav a.portal:hover{background:rgba(214,255,61,.18)} .topnav a.portal:hover{background:rgba(214,255,61,.18)}
header.hero{text-align:center;padding:5rem 1.2rem 1rem}
.mark{font-size:56px;line-height:1} /* Adaptive side nav — same shape as index.html and Theseus.X */
h1{font-size:clamp(2rem,5.5vw,2.9rem);margin:.4rem 0 .3rem} :root{--sn-w:200px}
h1 .g{color:var(--acid)} .sidenav{position:fixed;top:56px;left:0;bottom:0;width:var(--sn-w);z-index:15;
.tag{color:var(--mut);font-size:1.05rem;max-width:660px;margin:0 auto} background:transparent;padding:32px 12px 22px 18px;
.cta{margin-top:1.8rem;display:flex;gap:10px;justify-content:center;flex-wrap:wrap} overflow-y:auto;pointer-events:none;transition:width .15s ease}
.btn{display:inline-block;text-decoration:none;padding:11px 20px;border-radius:10px;background:#4b7bec;color:#fff;font-size:14px;border:none;cursor:pointer;font-family:inherit;transition:filter .1s} .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none;
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)} padding:9px 12px;border-radius:10px;
.btn.acid{background:var(--acid);color:#0b0e14;font-weight:600} font-size:14.5px;font-weight:500;opacity:.35;pointer-events:auto;
.btn:hover{filter:brightness(1.12)} transition:opacity .12s,color .12s,background .12s,backdrop-filter .12s}
section{padding:2.6rem 0;border-top:1px solid var(--line);margin-top:2.5rem} .sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center;
section:first-of-type{border-top:none;margin-top:1.5rem} display:none;justify-content:center;align-items:center}
h2{font-size:1.5rem;margin:0 0 .4rem} .sidenav a .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h3{font-size:1.1rem;margin:0 0 .35rem} .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(11,14,20,.72);backdrop-filter:blur(8px)}
.lede{color:var(--mut);margin:0 0 1.6rem;max-width:720px} .sidenav a.active{opacity:.85;color:var(--acid)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} .sidenav a.active:hover{opacity:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px} section{scroll-margin-top:70px}
.card h3{margin:0 0 .4rem;display:flex;align-items:center;gap:8px} @media (max-width:1180px){
.card p{margin:0;color:var(--mut);font-size:14px} :root{--sn-w:64px}
.card .cta{margin-top:14px;justify-content:flex-start} .sidenav{padding:22px 6px}
.card .sub{color:var(--dim);font-size:12.5px;margin-top:10px;font-family:ui-monospace,monospace;word-break:break-all} .sidenav a{justify-content:center;padding:12px 4px;gap:0}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block} .sidenav a .ic{display:inline-flex}
.d-chain{background:var(--chain)} .d-sia{background:var(--sia)} .d-srv{background:var(--srv)} .sidenav a .lb{display:none}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid); }
border-radius:10px;padding:14px 18px;color:var(--mut);font-size:14px;margin-top:1.4rem} @media (max-width:720px){
.note.warn{border-left-color:var(--warn)} :root{--sn-w:0}
.note b{color:var(--ink)} body{padding-bottom:64px}
code,.mono{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:13px} .sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
pre{background:#0e131b;border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow-x:auto; padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
font-family:ui-monospace,monospace;font-size:13px;color:var(--ink);margin:1rem 0} display:flex;justify-content:space-around;overflow-x:auto}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:10px} .sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;gap:0;opacity:.5}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start; .sidenav a .ic{display:inline-flex}
background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 16px} .sidenav a .lb{display:none}
ol.steps li::before{content:counter(s);grid-column:1;grid-row:1; }
display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
background:rgba(214,255,61,.14);color:var(--acid);font-size:12.5px;font-weight:700} header.hero{text-align:center;padding:5rem 1.2rem 1rem}
ol.steps li > *{grid-column:2;min-width:0} .mark{font-size:56px;line-height:1}
ol.steps b{color:var(--ink)} ol.steps span{color:var(--mut);font-size:14px} h1{font-size:clamp(2rem,5.5vw,2.9rem);margin:.4rem 0 .3rem}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(214,255,61,.13);color:var(--acid);margin-left:8px;vertical-align:middle;font-weight:500} h1 .g{color:var(--acid)}
footer{border-top:1px solid var(--line);padding:2.4rem 0 3.5rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem} .tag{color:var(--mut);font-size:1.05rem;max-width:660px;margin:0 auto}
/* Deviant-family fonts + Fraunces/Ubuntu reader toggle. */ .cta{margin-top:1.8rem;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-feature-settings:"ss01","ss02"} .btn{display:inline-block;text-decoration:none;padding:11px 20px;border-radius:10px;background:#4b7bec;color:#fff;font-size:14px;border:none;cursor:pointer;font-family:inherit;transition:filter .1s}
code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
body{font-family:'DM Sans','Inter',system-ui,sans-serif !important;font-feature-settings:"ss01","ss02"} .btn.acid{background:var(--acid);color:#0b0e14;font-weight:600}
html[data-font-cmp="ubuntu"] body,html[data-font-cmp="ubuntu"] h1,html[data-font-cmp="ubuntu"] h2,html[data-font-cmp="ubuntu"] h3,html[data-font-cmp="ubuntu"] p,html[data-font-cmp="ubuntu"] a,html[data-font-cmp="ubuntu"] button,html[data-font-cmp="ubuntu"] span,html[data-font-cmp="ubuntu"] div,html[data-font-cmp="ubuntu"] label,html[data-font-cmp="ubuntu"] input,html[data-font-cmp="ubuntu"] li{font-family:'Ubuntu',system-ui,sans-serif !important} .btn:hover{filter:brightness(1.12)}
html[data-font-cmp="ubuntu"] code,html[data-font-cmp="ubuntu"] .mono{font-family:'JetBrains Mono',ui-monospace,monospace !important} section{padding:2.6rem 0;border-top:1px solid var(--line);margin-top:2.5rem}
.font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase} section:first-of-type{border-top:none;margin-top:1.5rem}
.font-picker button{background:transparent;border:none;color:var(--dim);padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit} h2{font-size:1.5rem;margin:0 0 .4rem}
.font-picker button:hover{color:var(--ink)} h3{font-size:1.1rem;margin:0 0 .35rem}
.font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600} .lede{color:var(--mut);margin:0 0 1.6rem;max-width:720px}
</style> .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
<script type="importmap"> .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } } .card h3{margin:0 0 .4rem;display:flex;align-items:center;gap:8px}
</script> .card p{margin:0;color:var(--mut);font-size:14px}
</head> .card .cta{margin-top:14px;justify-content:flex-start}
<body> .card .sub{color:var(--dim);font-size:12.5px;margin-top:10px;font-family:ui-monospace,monospace;word-break:break-all}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
<nav class="topnav"> .d-chain{background:var(--chain)} .d-sia{background:var(--sia)} .d-srv{background:var(--srv)}
<a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a> .note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid);
<a href="../#try">Try it</a> border-radius:10px;padding:14px 18px;color:var(--mut);font-size:14px;margin-top:1.4rem}
<a href="../#search-input">✏️ Register</a> .note.warn{border-left-color:var(--warn)}
<a href="../tld.html">🌐 TLD</a> .note b{color:var(--ink)}
<a href="../market/">🛒 Market</a> code,.mono{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:13px}
<a href="./" class="here"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus</a> pre{background:#0e131b;border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow-x:auto;
<a href="../portal.html" class="portal">🔑 Sign in</a> font-family:ui-monospace,monospace;font-size:13px;color:var(--ink);margin:1rem 0}
</nav> ol.steps{counter-reset:s;list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:10px}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;
<header class="hero"> background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 16px}
<div class="mark"><img src="./assets/favicon.svg" alt="" width="72" height="72" style="vertical-align:middle;filter:drop-shadow(0 0 24px rgba(214,255,61,.15))"></div> ol.steps li::before{content:counter(s);grid-column:1;grid-row:1;
<h1>Theseus <span class="g">Navigator</span></h1> display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
<p class="tag">A Chromium-based browser with native <b>Bitcoin Cash Domain Names</b> resolution built in. background:rgba(214,255,61,.14);color:var(--acid);font-size:12.5px;font-weight:700}
No OS-level daemon, no DNS shim, no root-store install. Type <code>hello.bch</code> in the ol.steps li > *{grid-column:2;min-width:0}
address bar and it just works.</p> ol.steps b{color:var(--ink)} ol.steps span{color:var(--mut);font-size:14px}
<div class="cta"> .pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(214,255,61,.13);color:var(--acid);margin-left:8px;vertical-align:middle;font-weight:500}
<a class="btn acid" href="#download">Download for Windows</a> footer{border-top:1px solid var(--line);padding:2.4rem 0 3.5rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
<a class="btn ghost" href="#how">How it works</a> /* Deviant-family fonts + Fraunces/Ubuntu reader toggle. */
</div> h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-feature-settings:"ss01","ss02"}
</header> code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
body{font-family:'DM Sans','Inter',system-ui,sans-serif !important;font-feature-settings:"ss01","ss02"}
<div class="wrap"> html[data-font-cmp="ubuntu"] body,html[data-font-cmp="ubuntu"] h1,html[data-font-cmp="ubuntu"] h2,html[data-font-cmp="ubuntu"] h3,html[data-font-cmp="ubuntu"] p,html[data-font-cmp="ubuntu"] a,html[data-font-cmp="ubuntu"] button,html[data-font-cmp="ubuntu"] span,html[data-font-cmp="ubuntu"] div,html[data-font-cmp="ubuntu"] label,html[data-font-cmp="ubuntu"] input,html[data-font-cmp="ubuntu"] li{font-family:'Ubuntu',system-ui,sans-serif !important}
html[data-font-cmp="ubuntu"] code,html[data-font-cmp="ubuntu"] .mono{font-family:'JetBrains Mono',ui-monospace,monospace !important}
<section id="download"> .font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
<h2>Download</h2> .font-picker button{background:transparent;border:none;color:var(--dim);padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
<p class="lede">Theseus ships from its own site — <a href="https://silentmode.st/bns/theseus.x/#download" rel="noopener"><b>theseus.x</b></a> — so the version and checksums you see are always the current build, not a snapshot cached here. Windows installer + portable, plus Ariadne Resolver (lighter, no-browser).</p> .font-picker button:hover{color:var(--ink)}
<div class="cta" style="justify-content:flex-start;margin-top:1.2rem"> .font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600}
<a class="btn acid" href="https://silentmode.st/bns/theseus.x/#download" rel="noopener">Open theseus.x downloads →</a> </style>
<a class="btn ghost" href="https://silentmode.st/bns/theseus.x/" rel="noopener">Full Theseus site</a> <script type="importmap">
</div> { "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
<div class="note" style="margin-top:1.4rem"><b>Why not list versions here?</b> Theseus updates weekly; a hardcoded version on this page went stale within days last time. theseus.x is the single source of truth — its own operator ships the current build, and Sirius.X links there instead of duplicating.</div> </script>
</section> </head>
<body>
<section id="how">
<h2>How Theseus works</h2> <nav class="topnav">
<p class="lede">Theseus is a Chromium wrapper (Electron) with two things regular browsers don't <a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a>
have: in-process BCNR name resolution, and a certificate-verify hook that trusts on-chain <a href="../tld.html">🌐 TLD</a>
TLS fingerprints instead of the OS root store for BCNR hostnames.</p> <a href="../market/">🛒 Market</a>
<ol class="steps"> <a href="./" class="here"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus<span class="g">.X</span></a>
<li><b>Address bar accepts <code>.bch</code> / <code>.x</code> / any BCNR TLD.</b> <a href="../portal.html" class="portal">🔑 Sign in</a>
<span>The URL parser is short-circuited: any hostname whose TLD is in the registry is </nav>
resolved by walking the chain via the built-in <code>bns.js</code> — never through DNS.</span></li>
<li><b>Records decide how the site is served.</b> <aside class="sidenav" aria-label="On this page">
<span><code>h</code> renders inline HTML from the OP_RETURN payload itself. <code>s3</code> <a href="#download" title="Download" ><span class="ic" aria-hidden="true">⬇</span><span class="lb">Download</span></a>
serves from a Sia bucket via the in-app gateway. <code>ip</code> connects to a server by <a href="#how" title="How Theseus works" ><span class="ic" aria-hidden="true">⚙️</span><span class="lb">How it works</span></a>
IP. <code>u</code> redirects. Priority is handled by the shared <code>record-picker</code>.</span></li> <a href="#verify" title="Verify a download" ><span class="ic" aria-hidden="true">🔐</span><span class="lb">Verify</span></a>
<li><b>TLS verifies against on-chain fingerprints.</b> </aside>
<span>Electron's <code>setCertificateVerifyProc</code> is intercepted: for BCNR hostnames,
instead of walking the OS trust chain, the leaf's SHA-256 fingerprint is compared to the <header class="hero">
<code>tls</code> record on chain. Matches → trusted. No <code>tls</code> record → the <div class="mark"><img src="./assets/favicon.svg" alt="" width="72" height="72" style="vertical-align:middle;filter:drop-shadow(0 0 24px rgba(214,255,61,.15))"></div>
browser falls back to the local root CA.</span></li> <h1>Theseus <span class="g">Navigator</span></h1>
<li><b>Provenance indicator in the URL bar.</b> <p class="tag">A Chromium-based browser with native <b>Bitcoin Cash Domain Names</b> resolution built in.
<span>A tiny badge shows whether the page came from the chain, from Sia, or from an No OS-level daemon, no DNS shim, no root-store install. Type <code>hello.bch</code> in the
IP-configured server — with the NFT category shown on hover. The decentralized padlock.</span></li> address bar and it just works.</p>
</ol> <div class="cta">
<div class="note"><b>What Theseus is NOT.</b> Not a wallet — for that, use Deviant, Cashonize, <a class="btn acid" href="#download">Download for Windows</a>
Paytaca, or the built-in browser wallet at <a class="btn ghost" href="#how">How it works</a>
<a href="../#search-input">the name search</a>. </div>
Not a hosting service — for that, register a name and point its records at any host (Sia, VPS, </header>
your own server). Theseus just makes those names openable in a normal-feeling browser.</div>
</section> <div class="wrap">
<section id="verify"> <section id="download">
<h2>Verify a download</h2> <h2>Download</h2>
<p class="lede">The binaries are unsigned (Windows will show a SmartScreen warning). Before <p class="lede">Theseus ships from its own site — <a href="https://silentmode.st/bns/theseus.x/#download" rel="noopener"><b>theseus.x</b></a> — so the version and checksums you see are always the current build, not a snapshot cached here. Windows installer + portable, plus Ariadne Resolver (lighter, no-browser).</p>
running, verify the SHA-256 against what the operator publishes on-chain — the current <div class="cta" style="justify-content:flex-start;margin-top:1.2rem">
hashes live on the theseus.x download page itself, alongside each release:</p> <a class="btn acid" href="https://silentmode.st/bns/theseus.x/#download" rel="noopener">Open theseus.x downloads →</a>
<pre>PowerShell: <a class="btn ghost" href="https://silentmode.st/bns/theseus.x/" rel="noopener">Full Theseus site</a>
Get-FileHash &lt;downloaded-file&gt;.exe </div>
<div class="note" style="margin-top:1.4rem"><b>Why not list versions here?</b> Theseus updates weekly; a hardcoded version on this page went stale within days last time. theseus.x is the single source of truth — its own operator ships the current build, and Sirius.X links there instead of duplicating.</div>
Bash: </section>
sha256sum &lt;downloaded-file&gt;.exe</pre>
<p class="lede">Compare the digest to the hash panel on <section id="how">
<a href="https://silentmode.st/bns/theseus.x/#verify" rel="noopener">theseus.x/#verify</a>. <h2>How Theseus works</h2>
For a stronger guarantee, sign in with the wallet and check that the release-signing key <p class="lede">Theseus is a Chromium wrapper (Electron) with two things regular browsers don't
matches the on-chain identity for <code>releases.silentmode.bch</code>.</p> have: in-process BCNR name resolution, and a certificate-verify hook that trusts on-chain
</section> TLS fingerprints instead of the OS root store for BCNR hostnames.</p>
<ol class="steps">
</div> <li><b>Address bar accepts <code>.bch</code> / <code>.x</code> / any BCNR TLD.</b>
<span>The URL parser is short-circuited: any hostname whose TLD is in the registry is
<footer id="site-footer"></footer> resolved by walking the chain via the built-in <code>bns.js</code> — never through DNS.</span></li>
<li><b>Records decide how the site is served.</b>
<script src="../js/pin-escrow.js?v=20260909pin"></script> <span><code>h</code> renders inline HTML from the OP_RETURN payload itself. <code>s3</code>
<script src="../js/pricing.js?v=20260909tldhigh"></script> serves from a Sia bucket via the in-app gateway. <code>ip</code> connects to a server by
<script defer src="../js/site-footer.js?v=20260907rel"></script> IP. <code>u</code> redirects. Priority is handled by the shared <code>record-picker</code>.</span></li>
<script defer src="../js/theme.js?v=20260920compact"></script> <li><b>TLS verifies against on-chain fingerprints.</b>
<script defer src="../js/profile-menu.js?v=20260908tabs"></script> <span>Electron's <code>setCertificateVerifyProc</code> is intercepted: for BCNR hostnames,
</body> instead of walking the OS trust chain, the leaf's SHA-256 fingerprint is compared to the
</html> <code>tls</code> record on chain. Matches → trusted. No <code>tls</code> record → the
browser falls back to the local root CA.</span></li>
<li><b>Provenance indicator in the URL bar.</b>
<span>A tiny badge shows whether the page came from the chain, from Sia, or from an
IP-configured server — with the NFT category shown on hover. The decentralized padlock.</span></li>
</ol>
<div class="note"><b>What Theseus is NOT.</b> Not a wallet — for that, use Deviant, Cashonize,
Paytaca, or the built-in browser wallet at
<a href="../#search-input">the name search</a>.
Not a hosting service — for that, register a name and point its records at any host (Sia, VPS,
your own server). Theseus just makes those names openable in a normal-feeling browser.</div>
</section>
<section id="verify">
<h2>Verify a download</h2>
<p class="lede">The binaries are unsigned (Windows will show a SmartScreen warning). Before
running, verify the SHA-256 against what the operator publishes on-chain — the current
hashes live on the theseus.x download page itself, alongside each release:</p>
<pre>PowerShell:
Get-FileHash &lt;downloaded-file&gt;.exe
Bash:
sha256sum &lt;downloaded-file&gt;.exe</pre>
<p class="lede">Compare the digest to the hash panel on
<a href="https://silentmode.st/bns/theseus.x/#verify" rel="noopener">theseus.x/#verify</a>.
For a stronger guarantee, sign in with the wallet and check that the release-signing key
matches the on-chain identity for <code>releases.silentmode.bch</code>.</p>
</section>
</div>
<footer id="site-footer"></footer>
<script src="../js/pin-escrow.js?v=20260909pin"></script>
<script src="../js/pricing.js?v=20260909tldhigh"></script>
<script defer src="../js/site-footer.js?v=20260907rel"></script>
<script defer src="../js/theme.js?v=20260920compact"></script>
<script defer src="../js/profile-menu.js?v=20260908tabs"></script>
<script>
(() => {
const links = document.querySelectorAll(".sidenav a[href^='#']");
if (!links.length) return;
const map = new Map();
links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) map.set(el, a); });
const io = new IntersectionObserver((entries) => {
entries.forEach((en) => {
if (!en.isIntersecting) return;
const a = map.get(en.target); if (!a) return;
links.forEach((l) => l.classList.remove("active"));
a.classList.add("active");
});
}, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });
map.forEach((_, el) => io.observe(el));
})();
</script>
</body>
</html>

683
tld.html
View file

@ -1,314 +1,369 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<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>Register a TLD — Sirius.X</title> <title>Register a TLD — Sirius.X</title>
<meta name="description" content="Mint a top-level domain on Bitcoin Cash. Any wallet can register a TLD; second-level names can then be sold under it."> <meta name="description" content="Mint a top-level domain on Bitcoin Cash. Any wallet can register a TLD; second-level names can then be sold under it.">
<link rel="icon" href="./assets/favicon.svg" type="image/svg+xml"> <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="./assets/favicon.svg" color="#d6ff3d"> <link rel="mask-icon" href="./assets/favicon.svg" color="#d6ff3d">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:site_name" content="Sirius.X"> <meta property="og:site_name" content="Sirius.X">
<meta property="og:title" content="Register a TLD on Bitcoin Cash"> <meta property="og:title" content="Register a TLD on Bitcoin Cash">
<meta property="og:description" content="Mint a TLD certificate. One BCH transaction, no registrar. Renewals are per-TLD policy."> <meta property="og:description" content="Mint a TLD certificate. One BCH transaction, no registrar. Renewals are per-TLD policy.">
<meta property="og:url" content="https://silentmode.st/sirius-x/tld.html"> <meta property="og:url" content="https://silentmode.st/sirius-x/tld.html">
<meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg"> <meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
<style> <style>
:root{ :root{
--bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06); --bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06);
--sky-mid:#0a0f1c; --sky-rim:#131a2a; --sky-mid:#0a0f1c; --sky-rim:#131a2a;
--ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d; --ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d;
--chain-native:#0AC18E; --chain-native:#0AC18E;
--ok:#4fd1a5; --taken:#f6768a; --warn:#ffc75f; --ok:#4fd1a5; --taken:#f6768a; --warn:#ffc75f;
--serif:'Fraunces',Georgia,serif; --serif:'Fraunces',Georgia,serif;
--sans:'DM Sans','Inter',system-ui,sans-serif; --sans:'DM Sans','Inter',system-ui,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace; --mono:'JetBrains Mono',ui-monospace,monospace;
} }
*{box-sizing:border-box} *{box-sizing:border-box}
html{scroll-behavior:smooth} html{scroll-behavior:smooth}
body{margin:0; body{margin:0;
background:radial-gradient(ellipse 1200px 600px at 50% -5%,var(--sky-rim) 0%,transparent 60%), background:radial-gradient(ellipse 1200px 600px at 50% -5%,var(--sky-rim) 0%,transparent 60%),
radial-gradient(ellipse 900px 500px at 100% 100%,var(--sky-mid) 0%,transparent 55%), radial-gradient(ellipse 900px 500px at 100% 100%,var(--sky-mid) 0%,transparent 55%),
radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%), radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%),
var(--bg); var(--bg);
background-attachment:fixed; background-attachment:fixed;
color:var(--ink);font:16px/1.6 var(--sans);min-height:100vh;font-feature-settings:"ss01","ss02"} color:var(--ink);font:16px/1.6 var(--sans);min-height:100vh;font-feature-settings:"ss01","ss02"}
h1,h2,h3{font-family:var(--serif);font-feature-settings:"ss01","ss02"} h1,h2,h3{font-family:var(--serif);font-feature-settings:"ss01","ss02"}
code,.mono{font-family:var(--mono)} code,.mono{font-family:var(--mono)}
html[data-font-cmp="ubuntu"] body, html[data-font-cmp="ubuntu"] body,
html[data-font-cmp="ubuntu"] h1, html[data-font-cmp="ubuntu"] h2, html[data-font-cmp="ubuntu"] h3, html[data-font-cmp="ubuntu"] h1, html[data-font-cmp="ubuntu"] h2, html[data-font-cmp="ubuntu"] h3,
html[data-font-cmp="ubuntu"] p, html[data-font-cmp="ubuntu"] a, html[data-font-cmp="ubuntu"] button, html[data-font-cmp="ubuntu"] p, html[data-font-cmp="ubuntu"] a, html[data-font-cmp="ubuntu"] button,
html[data-font-cmp="ubuntu"] span, html[data-font-cmp="ubuntu"] div, html[data-font-cmp="ubuntu"] span, html[data-font-cmp="ubuntu"] div,
html[data-font-cmp="ubuntu"] label, html[data-font-cmp="ubuntu"] input, html[data-font-cmp="ubuntu"] li{ html[data-font-cmp="ubuntu"] label, html[data-font-cmp="ubuntu"] input, html[data-font-cmp="ubuntu"] li{
font-family:'Ubuntu',system-ui,sans-serif !important font-family:'Ubuntu',system-ui,sans-serif !important
} }
html[data-font-cmp="ubuntu"] code, html[data-font-cmp="ubuntu"] .mono{font-family:var(--mono) !important} html[data-font-cmp="ubuntu"] code, html[data-font-cmp="ubuntu"] .mono{font-family:var(--mono) !important}
.font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px; .font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;
font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase} font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.font-picker button{background:transparent;border:none;color:var(--dim); .font-picker button{background:transparent;border:none;color:var(--dim);
padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit; padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;
letter-spacing:inherit;text-transform:inherit;transition:color .12s} letter-spacing:inherit;text-transform:inherit;transition:color .12s}
.font-picker button:hover{color:var(--ink)} .font-picker button:hover{color:var(--ink)}
.font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600} .font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600}
a{color:var(--acid)} a{color:var(--acid)}
.wrap{max-width:820px;margin:0 auto;padding:0 1.2rem} .wrap{max-width:820px;margin:0 auto;padding:0 1.2rem}
.topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap; .topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap;
padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)} padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px)}
.topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px} .topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px}
.topnav .brand .g{color:var(--acid)} .topnav .brand .g{color:var(--acid)}
.topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px} .topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
.topnav a:hover{color:var(--ink);background:var(--panel)} .topnav a:hover{color:var(--ink);background:var(--panel)}
.topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)} .topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
.topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500} .topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
.topnav a.portal:hover{background:rgba(214,255,61,.18)} .topnav a.portal:hover{background:rgba(214,255,61,.18)}
header.hero{text-align:center;padding:3.4rem 1.2rem 1rem}
.mark{font-size:44px;line-height:1} /* Adaptive side nav — same shape as index.html and Theseus.X */
h1{font-size:clamp(1.7rem,4.5vw,2.3rem);margin:.3rem 0 .3rem} :root{--sn-w:200px}
h1 .g{color:var(--acid)} .sidenav{position:fixed;top:56px;left:0;bottom:0;width:var(--sn-w);z-index:15;
.tag{color:var(--mut);font-size:1rem;max-width:600px;margin:0 auto} background:transparent;padding:32px 12px 22px 18px;
h2{font-size:1.25rem;margin:0 0 .4rem} overflow-y:auto;pointer-events:none;transition:width .15s ease}
section{padding:2rem 0;border-top:1px solid var(--line);margin-top:2rem} .sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none;
section:first-of-type{border-top:none;margin-top:1rem} padding:9px 12px;border-radius:10px;
.btn{display:inline-block;text-decoration:none;padding:10px 18px;border-radius:10px;background:#4b7bec;color:#fff;font-size:14px;border:none;cursor:pointer;font-family:inherit} font-size:14.5px;font-weight:500;opacity:.35;pointer-events:auto;
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)} transition:opacity .12s,color .12s,background .12s,backdrop-filter .12s}
.btn.acid{background:var(--acid);color:#0b0e14;font-weight:600} .sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center;
.btn:hover{filter:brightness(1.12)} display:none;justify-content:center;align-items:center}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none} .sidenav a .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted{color:var(--mut);font-size:13px} .sidenav a:hover{opacity:1;color:var(--ink);background:rgba(11,14,20,.72);backdrop-filter:blur(8px)}
.dim{color:var(--dim);font-size:12.5px} .sidenav a.active{opacity:.85;color:var(--acid)}
code,.mono{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:13px;word-break:break-all} .sidenav a.active:hover{opacity:1}
.badge{display:inline-block;font-size:11px;padding:2px 10px;border-radius:999px;font-weight:600} section{scroll-margin-top:70px}
.b-ok{background:rgba(79,209,165,.15);color:var(--ok)} @media (max-width:1180px){
.b-taken{background:rgba(246,118,138,.15);color:var(--taken)} :root{--sn-w:64px}
.b-check{background:rgba(139,152,169,.14);color:var(--mut)} .sidenav{padding:22px 6px}
.status{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--mut);margin-top:12px} .sidenav a{justify-content:center;padding:12px 4px;gap:0}
.status.ok{border-left:3px solid var(--ok)} .sidenav a .ic{display:inline-flex}
.status.err{border-left:3px solid var(--taken);color:var(--taken)} .sidenav a .lb{display:none}
.status.warn{border-left:3px solid var(--warn);color:var(--warn)} }
/* TLD search cell */ @media (max-width:720px){
.search{max-width:600px;margin:1.5rem auto 0} :root{--sn-w:0}
.searchrow{display:flex;gap:8px} body{padding-bottom:64px}
.searchrow input{flex:1;padding:14px 18px;font-size:17px;border-radius:12px;border:1px solid #ffffff22;background:#141a24;color:var(--ink);font-family:inherit;outline:none} .sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
.searchrow input:focus{border-color:#4b7bec} padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
.searchhint{font-size:12.5px;color:var(--mut);margin-top:8px;text-align:center} display:flex;justify-content:space-around;overflow-x:auto}
.result-card{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center; .sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;gap:0;opacity:.5}
background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-top:12px} .sidenav a .ic{display:inline-flex}
.result-card .lbl{font-family:ui-monospace,monospace;font-size:18px;color:var(--ink)} .sidenav a .lb{display:none}
.result-card .lbl .dot{color:var(--acid)} }
/* Registered-TLDs table */
table.tlds{width:100%;border-collapse:collapse;margin-top:1rem;font-size:13px} header.hero{text-align:center;padding:3.4rem 1.2rem 1rem}
table.tlds th,table.tlds td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .mark{font-size:44px;line-height:1}
table.tlds th{color:var(--mut);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px} h1{font-size:clamp(1.7rem,4.5vw,2.3rem);margin:.3rem 0 .3rem}
table.tlds .tld{font-family:ui-monospace,monospace;color:var(--acid);font-size:13.5px;font-weight:600} h1 .g{color:var(--acid)}
table.tlds .cat{font-family:ui-monospace,monospace;color:var(--mut);font-size:11.5px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tag{color:var(--mut);font-size:1rem;max-width:600px;margin:0 auto}
.price, table.tlds .price{ h2{font-size:1.25rem;margin:0 0 .4rem}
color:var(--acid);font-family:ui-monospace,monospace;font-size:13px;font-weight:600; section{padding:2rem 0;border-top:1px solid var(--line);margin-top:2rem}
padding:2px 8px;border-radius:6px;background:rgba(214,255,61,.10);white-space:nowrap;display:inline-block section:first-of-type{border-top:none;margin-top:1rem}
} .btn{display:inline-block;text-decoration:none;padding:10px 18px;border-radius:10px;background:#4b7bec;color:#fff;font-size:14px;border:none;cursor:pointer;font-family:inherit}
.result-card{grid-template-columns:1fr auto auto auto !important} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem} .btn.acid{background:var(--acid);color:#0b0e14;font-weight:600}
</style> .btn:hover{filter:brightness(1.12)}
<script type="importmap"> .btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } } .muted{color:var(--mut);font-size:13px}
</script> .dim{color:var(--dim);font-size:12.5px}
<script src="./js/i18n.js?v=20260920e"></script> code,.mono{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:13px;word-break:break-all}
</head> .badge{display:inline-block;font-size:11px;padding:2px 10px;border-radius:999px;font-weight:600}
<body> .b-ok{background:rgba(79,209,165,.15);color:var(--ok)}
.b-taken{background:rgba(246,118,138,.15);color:var(--taken)}
<nav class="topnav"> .b-check{background:rgba(139,152,169,.14);color:var(--mut)}
<a class="brand" href="./"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a> .status{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--mut);margin-top:12px}
<a href="./#try">Try it</a> .status.ok{border-left:3px solid var(--ok)}
<a href="./#search-input">✏️ Register</a> .status.err{border-left:3px solid var(--taken);color:var(--taken)}
<a href="./tld.html" class="here">🌐 TLD</a> .status.warn{border-left:3px solid var(--warn);color:var(--warn)}
<a href="./market">🛒 Market</a> /* TLD search cell */
<a href="./theseus"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus</a> .search{max-width:600px;margin:1.5rem auto 0}
<a href="./portal.html" class="portal">🔑 Sign in</a> .searchrow{display:flex;gap:8px}
</nav> .searchrow input{flex:1;padding:14px 18px;font-size:17px;border-radius:12px;border:1px solid #ffffff22;background:#141a24;color:var(--ink);font-family:inherit;outline:none}
.searchrow input:focus{border-color:#4b7bec}
<header class="hero"> .searchhint{font-size:12.5px;color:var(--mut);margin-top:8px;text-align:center}
<div class="mark">🌐</div> .result-card{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
<h1>Register a <span class="g">TLD</span></h1> background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-top:12px}
<p class="tag">A TLD is a certificate on the Bitcoin Cash chain. You mint it, you own it — any .result-card .lbl{font-family:ui-monospace,monospace;font-size:18px;color:var(--ink)}
second-level name registered under it lives in your TLD's registry. One BCH transaction, .result-card .lbl .dot{color:var(--acid)}
no ICANN. Renewals? Your TLD, your policy.</p> /* Registered-TLDs table */
</header> table.tlds{width:100%;border-collapse:collapse;margin-top:1rem;font-size:13px}
table.tlds th,table.tlds td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
<div class="wrap"> table.tlds th{color:var(--mut);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
table.tlds .tld{font-family:ui-monospace,monospace;color:var(--acid);font-size:13.5px;font-weight:600}
<section id="search-section"> table.tlds .cat{font-family:ui-monospace,monospace;color:var(--mut);font-size:11.5px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
<h2>Search a TLD</h2> .price, table.tlds .price{
<p class="muted">Type a label (a–z, 0–9, hyphen; up to 16 chars). Available TLDs get a Register color:var(--acid);font-family:ui-monospace,monospace;font-size:13px;font-weight:600;
button that opens the shared wallet-choice modal — the same flow name registration uses. padding:2px 8px;border-radius:6px;background:rgba(214,255,61,.10);white-space:nowrap;display:inline-block
As TLD owner you earn <b style="color:var(--ok)">90 %</b> of every name registered under }
your TLD. Renewals are your call — set them per TLD, or don't.</p> .result-card{grid-template-columns:1fr auto auto auto !important}
<div class="search"> footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
<div class="searchrow"> </style>
<input id="q" placeholder="your-tld" spellcheck="false" autocomplete="off" autofocus maxlength="16"> <script type="importmap">
</div> { "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
<div class="searchhint">Register minting to your token address; you become the registry operator.</div> </script>
</div> <script src="./js/i18n.js?v=20260920e"></script>
<div id="result"></div> </head>
</section> <body>
<section id="listing"> <nav class="topnav">
<h2>Registered TLDs</h2> <a class="brand" href="./"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z" fill="#d6ff3d"/></svg><span class="g">Sirius.X</span></a>
<p class="muted">Fetched from the on-chain TLD registry via the public gateway. Refresh the page for the latest.</p> <a href="./tld.html" class="here">🌐 TLD</a>
<div id="tlds-status" class="status">Loading…</div> <a href="./market">🛒 Market</a>
<table class="tlds" id="tlds-table" style="display:none"> <a href="./theseus"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus<span class="g">.X</span></a>
<thead><tr><th>TLD</th><th>Mint price</th><th>Category</th></tr></thead> <a href="./portal.html" class="portal">🔑 Sign in</a>
<tbody></tbody> </nav>
</table>
</section> <aside class="sidenav" aria-label="On this page">
<a href="#search-section" title="Search a TLD" ><span class="ic" aria-hidden="true">🔎</span><span class="lb">Search</span></a>
</div> <a href="#listing" title="Registered TLDs" ><span class="ic" aria-hidden="true">📋</span><span class="lb">Registered</span></a>
</aside>
<footer id="site-footer"></footer>
<header class="hero">
<script> <div class="mark">🌐</div>
// Simple oracle stub: static chipnet rate for testing. Same number the <h1>Register a <span class="g">TLD</span></h1>
// portal uses. Mainnet swaps for a real price feed. <p class="tag">A TLD is a certificate on the Bitcoin Cash chain. You mint it, you own it — any
const CHIPNET_SATS_PER_USD = 400_000; // first-paint fallback only; pricing.js serves the live rate second-level name registered under it lives in your TLD's registry. One BCH transaction,
const DEFAULT_USD = 5; no ICANN. Renewals? Your TLD, your policy.</p>
</header>
const $ = (id) => document.getElementById(id);
const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c])); <div class="wrap">
const validLabel = (s) => /^[a-z0-9-]{1,16}$/.test(s);
const normLabel = (s) => String(s).toLowerCase().replace(/[^a-z0-9-]/g, "").slice(0, 16); <section id="search-section">
<h2>Search a TLD</h2>
// ---------- registered-TLD list ---------- <p class="muted">Type a label (a–z, 0–9, hyphen; up to 16 chars). Available TLDs get a Register
let registeredTlds = null; button that opens the shared wallet-choice modal — the same flow name registration uses.
async function loadTldList() { As TLD owner you earn <b style="color:var(--ok)">90 %</b> of every name registered under
const status = $("tlds-status"), tbody = $("tlds-table").querySelector("tbody"); your TLD. Renewals are your call — set them per TLD, or don't.</p>
try { <div class="search">
const r = await fetch("https://navigate.st/api/tlds"); <div class="searchrow">
if (!r.ok) throw new Error("api " + r.status); <input id="q" placeholder="your-tld" spellcheck="false" autocomplete="off" autofocus maxlength="16">
const j = await r.json(); </div>
const tlds = (j.tlds || []).map((t) => (typeof t === "string" ? { tld: t } : t)); <div class="searchhint">Register minting to your token address; you become the registry operator.</div>
tlds.sort((a, b) => a.tld.localeCompare(b.tld)); </div>
tbody.innerHTML = tlds.map((t) => { <div id="result"></div>
const p = window.siriusPricing?.priceForTld(t.tld); </section>
const priceCell = p ? `<span class="price" title="${esc(p.tier)}">${esc(window.siriusPricing.formatUsd(p.usd))}</span>` : "—";
return `<tr> <section id="listing">
<td class="tld">.${esc(t.tld)}</td> <h2>Registered TLDs</h2>
<td class="price-cell">${priceCell}</td> <p class="muted">Fetched from the on-chain TLD registry via the public gateway. Refresh the page for the latest.</p>
<td class="cat">${esc(t.certificate || t.category || "")}</td> <div id="tlds-status" class="status">Loading…</div>
</tr>`; <table class="tlds" id="tlds-table" style="display:none">
}).join(""); <thead><tr><th>TLD</th><th>Mint price</th><th>Category</th></tr></thead>
$("tlds-table").style.display = ""; <tbody></tbody>
status.className = "status ok"; </table>
status.textContent = `${tlds.length} TLDs registered on chipnet.`; </section>
registeredTlds = tlds.map((t) => t.tld);
refreshSearch(); </div>
} catch (e) {
status.className = "status err"; <footer id="site-footer"></footer>
status.textContent = "Could not load TLD list: " + (e.message || e);
} <script>
} // Simple oracle stub: static chipnet rate for testing. Same number the
loadTldList(); // portal uses. Mainnet swaps for a real price feed.
const CHIPNET_SATS_PER_USD = 400_000; // first-paint fallback only; pricing.js serves the live rate
// ---------- search result renderer ---------- const DEFAULT_USD = 5;
function renderResult(label, state) {
const res = $("result"); const $ = (id) => document.getElementById(id);
if (!label) { res.innerHTML = ""; return; } const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
if (state === "checking") { const validLabel = (s) => /^[a-z0-9-]{1,16}$/.test(s);
res.innerHTML = `<div class="result-card"> const normLabel = (s) => String(s).toLowerCase().replace(/[^a-z0-9-]/g, "").slice(0, 16);
<div class="lbl"><span class="dot">.</span>${esc(label)}</div>
<span class="badge b-check">checking…</span><span></span></div>`; // ---------- registered-TLD list ----------
return; let registeredTlds = null;
} async function loadTldList() {
if (state === "taken") { const status = $("tlds-status"), tbody = $("tlds-table").querySelector("tbody");
res.innerHTML = `<div class="result-card"> try {
<div class="lbl"><span class="dot">.</span>${esc(label)}</div> const r = await fetch("https://navigate.st/api/tlds");
<span class="badge b-taken">taken</span><span></span></div> if (!r.ok) throw new Error("api " + r.status);
<p class="dim" style="margin-top:8px">Someone already minted <code>.${esc(label)}</code>. Try a const j = await r.json();
different label — TLDs are first-come, first-served.</p>`; const tlds = (j.tlds || []).map((t) => (typeof t === "string" ? { tld: t } : t));
return; tlds.sort((a, b) => a.tld.localeCompare(b.tld));
} tbody.innerHTML = tlds.map((t) => {
const p = window.siriusPricing?.priceForTld(label); const p = window.siriusPricing?.priceForTld(t.tld);
const priceBadge = p const priceCell = p ? `<span class="price" title="${esc(p.tier)}">${esc(window.siriusPricing.formatUsd(p.usd))}</span>` : "—";
? `<span class="price" title="${esc(p.tier)}">${esc(window.siriusPricing.formatUsd(p.usd))}</span>` return `<tr>
: ""; <td class="tld">.${esc(t.tld)}</td>
res.innerHTML = `<div class="result-card"> <td class="price-cell">${priceCell}</td>
<div class="lbl"><span class="dot">.</span>${esc(label)}</div> <td class="cat">${esc(t.certificate || t.category || "")}</td>
<span class="badge b-ok">available</span> </tr>`;
${priceBadge} }).join("");
<button class="btn acid" id="go-register">Register .${esc(label)} →</button> $("tlds-table").style.display = "";
</div>`; status.className = "status ok";
$("go-register").onclick = () => beginRegister(label); status.textContent = `${tlds.length} TLDs registered on chipnet.`;
} registeredTlds = tlds.map((t) => t.tld);
refreshSearch();
// ---------- search wiring ---------- } catch (e) {
let currentLabel = ""; status.className = "status err";
function refreshSearch() { status.textContent = "Could not load TLD list: " + (e.message || e);
const raw = normLabel($("q").value); }
currentLabel = raw; }
if (!raw) { renderResult("", null); return; } loadTldList();
if (!validLabel(raw)) { renderResult(raw, "invalid"); return; }
if (registeredTlds !== null) { // ---------- search result renderer ----------
renderResult(raw, registeredTlds.includes(raw) ? "taken" : "ok"); function renderResult(label, state) {
return; const res = $("result");
} if (!label) { res.innerHTML = ""; return; }
renderResult(raw, "checking"); if (state === "checking") {
} res.innerHTML = `<div class="result-card">
$("q").addEventListener("input", () => { <div class="lbl"><span class="dot">.</span>${esc(label)}</div>
$("q").value = normLabel($("q").value); <span class="badge b-check">checking…</span><span></span></div>`;
refreshSearch(); return;
}); }
$("q").addEventListener("keydown", (e) => { if (state === "taken") {
if (e.key === "Enter" && currentLabel && registeredTlds && !registeredTlds.includes(currentLabel)) { res.innerHTML = `<div class="result-card">
beginRegister(currentLabel); <div class="lbl"><span class="dot">.</span>${esc(label)}</div>
} <span class="badge b-taken">taken</span><span></span></div>
}); <p class="dim" style="margin-top:8px">Someone already minted <code>.${esc(label)}</code>. Try a
different label — TLDs are first-come, first-served.</p>`;
// ---------- mint delegation ---------- return;
// Register button hands the label off to the shared modal (register-flow.js }
// — window.siriusRegisterTld). That modal owns the wallet-choice, fund, const p = window.siriusPricing?.priceForTld(label);
// confirm, and mint steps — same UX as name registration. const priceBadge = p
function beginRegister(label) { ? `<span class="price" title="${esc(p.tier)}">${esc(window.siriusPricing.formatUsd(p.usd))}</span>`
// Label-based tier pricing lives in siriusPricing (js/pricing.js) so : "";
// landing / tld / mint agree. Fall back to the flat DEFAULT_USD if the res.innerHTML = `<div class="result-card">
// pricing module hasn't loaded for some reason. <div class="lbl"><span class="dot">.</span>${esc(label)}</div>
const p = window.siriusPricing?.priceForTld(label); <span class="badge b-ok">available</span>
const fee = p ? p.sats : BigInt(DEFAULT_USD * (window.siriusPricing?.SATS_PER_USD || CHIPNET_SATS_PER_USD)); ${priceBadge}
const call = () => window.siriusRegisterTld(label, { serviceFeeSats: fee }); <button class="btn acid" id="go-register">Register .${esc(label)} →</button>
if (typeof window.siriusRegisterTld === "function") { call(); return; } </div>`;
// Module still loading — retry until it lands. $("go-register").onclick = () => beginRegister(label);
const btn = $("go-register"); }
const orig = btn?.textContent;
if (btn) { btn.disabled = true; btn.textContent = "loading…"; } // ---------- search wiring ----------
const t = setInterval(() => { let currentLabel = "";
if (typeof window.siriusRegisterTld === "function") { function refreshSearch() {
clearInterval(t); const raw = normLabel($("q").value);
if (btn) { btn.disabled = false; btn.textContent = orig; } currentLabel = raw;
call(); if (!raw) { renderResult("", null); return; }
} if (!validLabel(raw)) { renderResult(raw, "invalid"); return; }
}, 100); if (registeredTlds !== null) {
} renderResult(raw, registeredTlds.includes(raw) ? "taken" : "ok");
return;
// ---------- ?q= deep-link (from landing links etc.) ---------- }
(() => { renderResult(raw, "checking");
const q = normLabel(new URLSearchParams(location.search).get("q") || ""); }
if (!q) return; $("q").addEventListener("input", () => {
$("q").value = q; $("q").value = normLabel($("q").value);
const wait = setInterval(() => { refreshSearch();
if (registeredTlds === null) return; });
clearInterval(wait); $("q").addEventListener("keydown", (e) => {
refreshSearch(); if (e.key === "Enter" && currentLabel && registeredTlds && !registeredTlds.includes(currentLabel)) {
setTimeout(() => $("q").scrollIntoView({ behavior: "smooth", block: "start" }), 100); beginRegister(currentLabel);
}, 150); }
})(); });
</script>
// ---------- mint delegation ----------
<script type="module" src="./js/register-flow.js?v=20260920bits"></script> // Register button hands the label off to the shared modal (register-flow.js
<script src="./js/pricing.js?v=20260920bits"></script> // — window.siriusRegisterTld). That modal owns the wallet-choice, fund,
<script src="./js/session.js?v=20260917dash"></script> // confirm, and mint steps — same UX as name registration.
<script src="./js/pin-escrow.js?v=20260909pin"></script> function beginRegister(label) {
<script defer src="./js/theme.js?v=20260920compact"></script> // Label-based tier pricing lives in siriusPricing (js/pricing.js) so
<script defer src="./js/site-footer.js?v=20260917market"></script> // landing / tld / mint agree. Fall back to the flat DEFAULT_USD if the
<script defer src="./js/profile-menu.js?v=20260920bits"></script> // pricing module hasn't loaded for some reason.
</body> const p = window.siriusPricing?.priceForTld(label);
</html> const fee = p ? p.sats : BigInt(DEFAULT_USD * (window.siriusPricing?.SATS_PER_USD || CHIPNET_SATS_PER_USD));
const call = () => window.siriusRegisterTld(label, { serviceFeeSats: fee });
if (typeof window.siriusRegisterTld === "function") { call(); return; }
// Module still loading — retry until it lands.
const btn = $("go-register");
const orig = btn?.textContent;
if (btn) { btn.disabled = true; btn.textContent = "loading…"; }
const t = setInterval(() => {
if (typeof window.siriusRegisterTld === "function") {
clearInterval(t);
if (btn) { btn.disabled = false; btn.textContent = orig; }
call();
}
}, 100);
}
// ---------- ?q= deep-link (from landing links etc.) ----------
(() => {
const q = normLabel(new URLSearchParams(location.search).get("q") || "");
if (!q) return;
$("q").value = q;
const wait = setInterval(() => {
if (registeredTlds === null) return;
clearInterval(wait);
refreshSearch();
setTimeout(() => $("q").scrollIntoView({ behavior: "smooth", block: "start" }), 100);
}, 150);
})();
</script>
<script type="module" src="./js/register-flow.js?v=20260920bits"></script>
<script src="./js/pricing.js?v=20260920bits"></script>
<script src="./js/session.js?v=20260917dash"></script>
<script src="./js/pin-escrow.js?v=20260909pin"></script>
<script defer src="./js/theme.js?v=20260920compact"></script>
<script defer src="./js/site-footer.js?v=20260917market"></script>
<script defer src="./js/profile-menu.js?v=20260920bits"></script>
<script>
(() => {
const links = document.querySelectorAll(".sidenav a[href^='#']");
if (!links.length) return;
const map = new Map();
links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) map.set(el, a); });
const io = new IntersectionObserver((entries) => {
entries.forEach((en) => {
if (!en.isIntersecting) return;
const a = map.get(en.target); if (!a) return;
links.forEach((l) => l.classList.remove("active"));
a.classList.add("active");
});
}, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });
map.forEach((_, el) => io.observe(el));
})();
</script>
</body>
</html>