35076606c7
Snapshot of the shared working tree's outstanding changes (multiple concurrent workstreams), excluding generated runtime state files (.football-tote-state.json, .tote-platform-state.json, .usdm-historical-chart.html). Spans: wallet shell (connect/, keystore MultiKeyStore+vault, screens, currency picker, sign-message), verify artifacts, new Potidaea/DRA/tote contracts + regtest suites, cross-chain/T6 + WalletConnect Parameters, a telegram-orderbook subproject, design mockups, and docs. See shells/app/WALLET-COORDINATION.md for the per-file ownership split. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
150 lines
12 KiB
HTML
150 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Deviant · Asset detail (Metroon) · CosmoGenesis mockup</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<link href="../cosmo-genesis.css" rel="stylesheet">
|
||
<style>
|
||
body { display:flex; justify-content:center; padding:28px 0; }
|
||
.phone { position:relative; z-index:1; width:392px; min-height:840px; background: linear-gradient(180deg, rgba(19,26,42,.55), rgba(10,15,28,.55)); border:1px solid var(--border); border-radius:30px; padding:22px 18px 92px; backdrop-filter: blur(2px); overflow:hidden; }
|
||
.scroll { max-height:740px; overflow-y:auto; margin:0 -4px; padding:0 4px; } .scroll::-webkit-scrollbar { width:0; }
|
||
|
||
.flow-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
|
||
.back { font-size:20px; color:var(--ink-soft); cursor:pointer; background:0; border:0; line-height:1; }
|
||
.menu { margin-left:auto; color:var(--muted); cursor:pointer; font-size:18px; }
|
||
|
||
/* ① identity */
|
||
.ident { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
|
||
.ai { width:50px; height:50px; flex:none; border-radius:14px; display:grid; place-items:center; font-family:var(--font-mono); font-size:17px; color:var(--acid); background:var(--surface-2); box-shadow:0 0 16px var(--acid-dim); }
|
||
.an { font-family:var(--font-display); font-weight:500; font-size:23px; color:var(--ink-bright); }
|
||
.at { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:3px; }
|
||
|
||
/* ② chips line */
|
||
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
|
||
.chip { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:7px; border:1px solid var(--border-strong); color:var(--ink-soft); }
|
||
.chip.tier { color:var(--ink-bright); border-color:var(--ink-soft); }
|
||
.chip.ver { color:var(--acid); border-color:rgba(214,255,61,.45); text-shadow:0 0 6px var(--acid-halo); }
|
||
.chip.sub { color:var(--muted); }
|
||
|
||
/* ③ value region */
|
||
.value { text-align:center; padding:20px; border-radius:18px; background:var(--surface-1); border:1px solid var(--border); margin-bottom:16px; }
|
||
.pnv-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
|
||
.pnv { font-family:var(--font-mono); font-size:30px; color:var(--ink-bright); margin:8px 0 4px; }
|
||
.pnv-bch { font-family:var(--font-mono); font-size:12px; color:var(--acid); }
|
||
.pnv-raw { font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:6px; }
|
||
|
||
/* ④ actions */
|
||
.actions { display:flex; gap:9px; margin-bottom:18px; }
|
||
.act-btn { flex:1; text-align:center; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:13px 6px; border-radius:12px; cursor:pointer; background:transparent; color:var(--ink-soft); border:1px solid var(--border-strong); }
|
||
.act-btn.primary { background:var(--acid); color:var(--sky-deep); border-color:var(--acid); box-shadow:0 0 14px var(--acid-halo); }
|
||
|
||
.sec-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:18px 2px 9px; }
|
||
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:16px; padding:14px 15px; }
|
||
.brow { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; }
|
||
.brow:last-child { border-bottom:0; }
|
||
.brow .k { color:var(--muted); } .brow .v { color:var(--ink); text-align:right; }
|
||
|
||
/* ⑥ activity */
|
||
.act { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
|
||
.act:last-child { border-bottom:0; }
|
||
.act .ico { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-soft); font-size:13px; }
|
||
.act .a-title { font-family:var(--font-display); font-size:13px; color:var(--ink); }
|
||
.act .a-sub { font-family:var(--font-mono); font-size:9px; color:var(--muted); margin-top:2px; }
|
||
.act .a-amt { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-bright); }
|
||
.act .a-amt.in { color:#0ac18e; }
|
||
|
||
.tabbar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:14px 10px 18px; border-top:1px solid var(--border); background: linear-gradient(0deg, var(--sky-deep), transparent); border-radius:0 0 30px 30px; }
|
||
.tab { display:flex; flex-direction:column; align-items:center; gap:6px; background:0; border:0; cursor:pointer; }
|
||
.tab .ico { font-size:24px; color: var(--muted); } .tab .lbl { font-family: var(--font-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); }
|
||
.tab.active .ico { color: var(--acid); } .tab:not(.active) .bch-b { opacity:.6; }
|
||
.bch-b { display:inline-grid; place-items:center; line-height:0; border-radius:50%; } .bch-b .bch-logo { width:100%; height:100%; } .bch-b.sm { width:28px; height:28px; }
|
||
.fab { position:relative; margin-top:-28px; flex:none; width:58px; height:58px; border-radius:50%; background: var(--acid); color: var(--sky-deep); border:4px solid var(--sky-deep); cursor:pointer; display:grid; place-items:center; font-size:23px; box-shadow: 0 0 18px var(--acid-glow), 0 0 34px var(--acid-halo); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||
<div class="phone">
|
||
<div class="scroll">
|
||
<div class="flow-head">
|
||
<button class="back" data-link="assets">←</button>
|
||
<span class="menu">⋯</span>
|
||
</div>
|
||
|
||
<!-- ① identity -->
|
||
<div class="ident">
|
||
<div class="ai">NV</div>
|
||
<div><div class="an">Nova</div><div class="at">NOVA · category 9c2f…a410</div></div>
|
||
</div>
|
||
|
||
<!-- ② tier + asset-type + verification -->
|
||
<div class="chips">
|
||
<span class="chip tier">[A]</span>
|
||
<span class="chip">MBA</span>
|
||
<span class="chip">permissionless</span>
|
||
<span class="chip">unlimited</span>
|
||
<span class="chip sub">DEA</span>
|
||
<span class="chip ver">DEA-Verified</span>
|
||
</div>
|
||
|
||
<!-- ③ value region — PNV + raw-BCH co-display -->
|
||
<div class="value">
|
||
<div class="pnv-label">Protocol Net Value</div>
|
||
<div class="pnv">120 NOVA</div>
|
||
<div class="pnv-bch">PNV ≈ 0.0120 BCH</div>
|
||
<div class="pnv-raw">120 × 10,000 sat = 1,200,000 sat backing · inside the FT UTXOs</div>
|
||
</div>
|
||
|
||
<!-- ④ action row -->
|
||
<div class="actions">
|
||
<div class="act-btn primary">Swap</div>
|
||
<div class="act-btn">Send</div>
|
||
<div class="act-btn">Receive</div>
|
||
</div>
|
||
<!-- Redeem is not a separate action — it's Swap → BCH (mirrors Mint = Swap ← BCH).
|
||
Tapping Swap on an MBA defaults the target to BCH, so "cash out / redeem at
|
||
rate" is one tap; the swap panel labels the BCH leg "redeem at rate". -->
|
||
|
||
|
||
<!-- ⑤ rate & backing breakdown -->
|
||
<div class="sec-label">Rate & backing</div>
|
||
<div class="card">
|
||
<div class="brow"><span class="k">Backing rate</span><span class="v">10,000 sat / unit 🔒</span></div>
|
||
<div class="brow"><span class="k">Redeem</span><span class="v">P2PKH spend · no fee (§4.4)</span></div>
|
||
<div class="brow"><span class="k">Swap path</span><span class="v" style="color:var(--acid)">✓ ASM · counterparty-free</span></div>
|
||
<div class="brow"><span class="k">Mint-side fee</span><span class="v">0.5% (cap 2.0% 🔒)</span></div>
|
||
</div>
|
||
|
||
<!-- ⑥ asset-scoped activity -->
|
||
<div class="sec-label">Nova activity</div>
|
||
<div class="card">
|
||
<div class="act"><div class="ico">↓</div><div><div class="a-title">Claimed</div><div class="a-sub">Nova reservoir · DEA · 2d</div></div><div class="a-amt in">+120 NOVA</div></div>
|
||
<div class="act"><div class="ico">⇄</div><div><div class="a-title">Orbital swap</div><div class="a-sub">50 NOVA → 0.005 BCH · ASM · 1d</div></div><div class="a-amt">atomic</div></div>
|
||
</div>
|
||
|
||
<!-- ⑦ asset info -->
|
||
<div class="sec-label">Asset info</div>
|
||
<div class="card">
|
||
<div class="brow"><span class="k">Category ID</span><span class="v" style="color:var(--acid)">9c2f…a410 ↗</span></div>
|
||
<div class="brow"><span class="k">Founder</span><span class="v">bchtest:qp2…7lm</span></div>
|
||
<div class="brow"><span class="k">BCMR metadata</span><span class="v">present ↗</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="tabbar">
|
||
<button class="tab"><span class="ico"><span class="bch-b sm"><svg class="bch-logo" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" fill="#fff"/><path fill="#0ac18e" d="m10.84 11.22-.688-2.568c.728-.18 2.839-1.051 3.39.506.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313.755 2.829c.868-.228 3.496-.46 3.241-2.351-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202.643-.57.969-1.401.57-2.488-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114-1.285.332.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138 1.285-.332-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141 1.285-.332-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z"/></svg></span></span><span class="lbl">Main</span></button>
|
||
<button class="tab active"><span class="ico">⬡</span><span class="lbl">Agora</span></button>
|
||
<button class="fab" id="fab"><span style="display:inline-block;transform:rotate(45deg)">⇅</span></button>
|
||
<button class="tab"><span class="ico">△</span><span class="lbl">Artemision</span></button>
|
||
<button class="tab"><span class="ico">⧉</span><span class="lbl">Apps</span></button>
|
||
</nav>
|
||
</div>
|
||
<script>
|
||
(function generateStars(){const c=document.getElementById('stars');if(!c)return;const n=window.innerWidth<700?100:180;const f=document.createDocumentFragment();for(let i=0;i<n;i++){const s=document.createElement('div');s.className='star';const r=Math.random();let sz,o,d;if(r<.78){sz=1+Math.random()*.4;o=.18+Math.random()*.22;d=14+Math.random()*8;}else if(r<.95){sz=1.4+Math.random()*.6;o=.32+Math.random()*.22;d=10+Math.random()*6;}else{sz=1.8+Math.random()*.8;o=.45+Math.random()*.25;d=8+Math.random()*5;}s.style.width=sz+'px';s.style.height=sz+'px';s.style.left=Math.random()*100+'%';s.style.top=Math.random()*100+'%';s.style.opacity=o;s.style.setProperty('--twinkle-duration',d+'s');s.style.setProperty('--twinkle-delay',(Math.random()*d)+'s');f.appendChild(s);}c.appendChild(f);})();
|
||
(function(){var map={main:'main-tab.html',agora:'agora.html',artemision:'artemision-tab.html',apps:'apps-tab.html'};document.querySelectorAll('.tabbar .tab').forEach(function(t){var el=t.querySelector('.lbl');if(!el)return;var d=map[el.textContent.trim().toLowerCase()];if(d){t.style.cursor='pointer';t.addEventListener('click',function(){location.href=d;});}});document.querySelectorAll('[data-link="assets"]').forEach(function(b){b.addEventListener('click',function(){location.href='assets-tab.html';});});})();
|
||
</script>
|
||
</body>
|
||
</html>
|