sirius/market.html
Local Dev 8ee9fc1a63 fix(studio): open the page the name actually serves, not an empty folder
Sirius Studio only looked in its own folder, bns/<name>/. Every site
published the conventional way lives at bns/<label>/ (the s3 record),
or inline in the h record, so the editor opened those names as "new
site" with a template picker instead of the current build.

The gateway's site read gains a read-only ?src=live view that follows
the on-chain record: list and fetch from whatever bucket s3 points at,
or serve the h HTML as index.html. Writes are unchanged and still
confined to bns/<name>/.

The editor now starts from the live page when there is no draft:
relative image and link URLs are resolved against the public site URL,
stylesheets are inlined (cross-origin ones such as font CDNs are kept
as links and re-emitted on export), scripts dropped. When a draft
exists but the name serves something else, or index.html on Sia is
newer than the draft, a notice says so with a one-click import. An
"Import live site" button is always available. Verified with
aloevera.test, which is hosted at bns/aloevera/.
2026-09-20 01:22:21 +02:00

138 lines
9.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Market — names for sale on Sirius.X</title>
<meta name="description" content="Buy and sell BCNR names. Every sale is one Bitcoin Cash transaction: the seller is paid in the same transaction that hands you the certificate, or not at all.">
<link rel="icon" href="./assets/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{--bg:#050810;--panel:#141a24;--panel2:#0a0f1c;--line:rgba(255,255,255,.06);--sky-mid:#0a0f1c;--sky-rim:#131a2a;
--ink:#f1f4fa;--mut:#b8c2d4;--dim:#6a7488;--acid:#d6ff3d;--ok:#4fd1a5;--taken:#f6768a;--warn:#ffc75f;
--serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,var(--sky-rim) 0%,transparent 60%),var(--bg);background-attachment:fixed;color:var(--ink);font:15px/1.55 var(--sans);min-height:100vh}
h1,h2,h3{font-family:var(--serif)}
a{color:var(--acid)}
.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);border-bottom:1px solid var(--line)}
.topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px}
.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:hover{color:var(--ink);background:var(--panel)}
.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}
.wrap{max-width:900px;margin:0 auto;padding:0 1.2rem 3rem}
header.hero{text-align:center;padding:3rem 1.2rem 1rem}
.mark{font-size:44px;line-height:1}
h1{font-size:clamp(1.6rem,4.5vw,2.2rem);margin:.3rem 0}
h1 .g{color:var(--acid)}
.tag{color:var(--mut);max-width:620px;margin:0 auto}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 8px}
input[type=text],select{padding:9px 12px;border-radius:10px;border:1px solid #ffffff22;background:#0e131b;color:var(--ink);font:inherit;font-size:14px;outline:none}
select{appearance:auto}
.status{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--mut);margin-top:10px}
.status.err{border-left:3px solid var(--taken);color:var(--taken)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 16px;align-items:center;padding:14px 16px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;margin-top:8px}
.row .n{font-family:var(--mono);font-size:16px}
.row .n .tld{color:var(--acid)}
.row .price{font-family:var(--mono);text-align:right}
.row .price b{font-size:16px}
.row .price span{display:block;color:var(--dim);font-size:12px}
.row .meta{grid-column:1/-1;color:var(--dim);font-size:12px;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;background:#4b7bec;color:#fff;font:inherit;font-size:14px;border:none;cursor:pointer;text-decoration:none;line-height:1.2}
.btn.acid{background:var(--acid);color:#0b0e14;font-weight:600}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.small{padding:6px 11px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:999px;font-weight:600;background:rgba(214,255,61,.14);color:var(--acid)}
.empty{padding:28px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:12px;margin-top:10px}
.empty.big{padding:40px 24px;border-style:solid;background:var(--panel2)}
.empty.big .ico{font-size:34px;line-height:1;opacity:.8}
.empty.big h3{margin:.6rem 0 .3rem;font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.empty.big p{margin:0 auto;max-width:460px;font-size:14px}
.empty.big .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.toolbar[hidden],.status[hidden]{display:none}
@media (max-width:560px){.row > div:nth-child(3){grid-column:1/-1}.row > div:nth-child(3) .btn{width:100%;justify-content:center}}
.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.6rem}
.note b{color:var(--ink)}
/* buy dialog */
.modal{position:fixed;inset:0;background:rgba(6,9,14,.85);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow-y:auto;z-index:50}
.modal.open{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:560px;width:100%;padding:24px 26px;position:relative}
.sheet h3{margin:0 0 .3rem;font-family:var(--mono);font-size:1.2rem}
.sheet .sub{color:var(--mut);font-size:13px;margin:0 0 1rem}
.sheet .x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:13.5px}
.kv .k{color:var(--dim)} .kv .v{font-family:var(--mono);word-break:break-all}
.steps{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--mut);background:#0e131b;border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:150px;overflow:auto;display:none}
.steps.on{display:block}
.steps div::before{content:" ";color:var(--acid)}
.msg{font-size:13px;margin-top:12px} .msg.err{color:var(--taken)} .msg.ok{color:var(--ok)}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
@media (max-width:560px){.row{grid-template-columns:1fr auto}.row .price{grid-column:1/-1;text-align:left}}
</style>
<script src="./js/i18n.js?v=20260920b"></script>
</head>
<body>
<nav class="topnav">
<a class="brand" href="./"><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="./market.html" 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="./portal.html" class="portal">🔑 Sign in</a>
</nav>
<header class="hero">
<div class="mark">🛒</div>
<h1>Names <span class="g">for sale</span></h1>
<p class="tag">Every sale is a single Bitcoin Cash transaction. The seller signed an offer that pays them only when the
certificate moves to you — you add your coins, sign, broadcast. No escrow, no middleman, no way for either side to cheat.</p>
</header>
<div class="wrap">
<div class="toolbar">
<input type="text" id="q" placeholder="Filter names…" autocomplete="off" style="max-width:300px">
<select id="sort"><option value="price">Sort: price</option><option value="name">Sort: name</option><option value="new">Sort: newest</option></select>
<select id="tld"><option value="">All TLDs</option></select>
<span id="count" style="color:var(--dim);font-size:12.5px"></span>
</div>
<div class="status" id="status">Loading listings…</div>
<div id="list"></div>
<div class="note"><b>Selling a name?</b> Open it in your <a href="./portal.html">dashboard</a>, choose <b>Sell</b>, set a price. The listing is a signed offer stored by the gateway; cancelling it moves your certificate once so the old offer can never be used.</div>
</div>
<div class="modal" id="buy">
<div class="sheet">
<button class="x" id="buy-close" title="close">×</button>
<h3 id="buy-name"></h3>
<p class="sub">One transaction: your coins pay the seller, the certificate lands in your wallet, and the registry is told about the new owner. Records stay as they are — you can change them in the dashboard right after.</p>
<div class="kv" id="buy-kv"></div>
<div class="steps" id="buy-steps"></div>
<div class="msg" id="buy-msg"></div>
<div class="actions">
<button class="btn ghost" id="buy-cancel">Cancel</button>
<a class="btn ghost" id="buy-signin" href="./portal.html" hidden>Sign in to buy →</a>
<button class="btn acid" id="buy-go" disabled>Buy — sign &amp; broadcast</button>
</div>
</div>
</div>
<footer id="site-footer"></footer>
<script type="importmap">
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
</script>
<script src="./js/session.js?v=20260917dash"></script>
<script src="./js/pricing.js?v=20260917market"></script>
<script type="module" src="./js/market.js?v=20260920m"></script>
<script defer src="./js/theme.js?v=20260910font"></script>
<script defer src="./js/site-footer.js?v=20260917market"></script>
<script defer src="./js/profile-menu.js?v=20260920m"></script>
</body>
</html>