87c70d745e
The dashboard was capped at 1200px with single-column lists, so a 1920px display showed a narrow strip of cards. Above 1280px it now widens to 1720px with a 260px sidebar, name/TLD lists become card grids (auto-fill, 360-400px columns), and Settings and TLD detail lay their cards out in two or three columns. Narrow screens are unchanged. The header Dashboard button was hidden until sign-in, which left new visitors with no obvious way in; it is now always shown and lands on the portal's sign-in when signed out. Also closes a Settings-pane markup bug: the Wallet card ended one div early, which pushed the "Reading, language & help" and "This device" cards outside the pane so they appeared under every other pane.
130 lines
8.5 KiB
HTML
130 lines
8.5 KiB
HTML
<!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}
|
||
.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=20260917h"></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="./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 & 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=20260917market"></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=20260917wide"></script>
|
||
</body>
|
||
</html>
|