bc8c5114dc
Reviewed both pages at desktop and phone widths. Desktop was fine; on phones three things were wrong. The top bar wrapped into four rows because the font-comparison pill and full-size links all stayed; on screens under 640px the pill is hidden and links and buttons tighten. The dashboard menu rendered as five full-width blocks because the wide-screen width:100% rule outranked the phone override; it is now a row of pills, the wallet block collapses to one line (short address, live balance, refresh), and the sub-tabs scroll sideways instead of wrapping. The long address had also been pushing the whole page wider than the viewport, fixed with minmax(0,1fr) on the grid column. The market showed an empty filter bar and a one-line status when there were no listings; it now shows a proper empty state with the two things a visitor can do (sell from the dashboard, register a new name) and hides the filters until there is something to filter. Buy buttons go full width on phones.
137 lines
9.1 KiB
HTML
137 lines
9.1 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}
|
||
.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=20260920a"></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=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>
|