home.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>acdc-wallet — Home Screen Mocks</title> 7 <link rel="preconnect" href="https://fonts.googleapis.com"> 8 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> 9 <style> 10 :root { 11 --alpha: oklch(52.4% 0.22 264); 12 --delta: oklch(80% 0.20 79); 13 --page: oklch(6% 0 0); 14 --surface: oklch(14% 0 0); 15 --raised: oklch(20% 0 0); 16 --border: oklch(35% 0 0); 17 --border-s:oklch(22% 0 0); 18 --text-1: oklch(95% 0 0); 19 --text-2: oklch(65% 0 0); 20 --text-3: oklch(45% 0 0); 21 --success: oklch(65.4% 0.17 162); 22 --error: oklch(60% 0.22 25); 23 --sans: 'Inter', system-ui, sans-serif; 24 --mono: 'JetBrains Mono', monospace; 25 --r-sm: 6px; 26 --r-md: 10px; 27 --r-lg: 16px; 28 } 29 .light { 30 --page: oklch(97% 0 0); 31 --surface: oklch(100% 0 0); 32 --raised: oklch(94% 0 0); 33 --border: oklch(82% 0 0); 34 --border-s:oklch(90% 0 0); 35 --text-1: oklch(12% 0 0); 36 --text-2: oklch(42% 0 0); 37 --text-3: oklch(62% 0 0); 38 } 39 * { box-sizing: border-box; margin: 0; padding: 0; } 40 .theme-toggle { 41 position: fixed; top: 16px; right: 16px; z-index: 999; 42 background: var(--surface); border: 1px solid var(--border); 43 color: var(--text-2); font-family: var(--sans); font-size: 12px; 44 font-weight: 600; padding: 6px 12px; border-radius: 99px; 45 cursor: pointer; letter-spacing: 0.04em; 46 transition: background 0.2s, color 0.2s; 47 } 48 .theme-toggle:hover { color: var(--text-1); } 49 body { 50 background: var(--page); 51 transition: background 0.2s; 52 font-family: var(--sans); 53 color: var(--text-1); 54 padding: 48px 32px; 55 display: flex; 56 gap: 40px; 57 align-items: flex-start; 58 flex-wrap: wrap; 59 } 60 61 /* ── Layout label ── */ 62 .mock-wrap { display: flex; flex-direction: column; gap: 12px; } 63 .mock-label { 64 font-size: 11px; 65 font-weight: 600; 66 letter-spacing: 0.08em; 67 text-transform: uppercase; 68 color: var(--text-3); 69 } 70 71 /* ── Phone shell ── */ 72 .phone { 73 width: 375px; 74 min-height: 680px; 75 background: var(--page); 76 border: 1px solid var(--border); 77 border-radius: 28px; 78 overflow: hidden; 79 display: flex; 80 flex-direction: column; 81 } 82 83 /* ── Shared atoms ── */ 84 .btn { 85 display: inline-flex; align-items: center; justify-content: center; gap: 6px; 86 padding: 10px 16px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; 87 cursor: pointer; border: none; font-family: var(--sans); 88 } 89 .btn-alpha { background: var(--alpha); color: #fff; } 90 .btn-outline { 91 background: transparent; 92 border: 1px solid var(--border); 93 color: var(--text-1); 94 } 95 .btn-ghost { background: var(--surface); color: var(--text-1); } 96 97 .tx-row { 98 display: flex; align-items: center; gap: 12px; 99 padding: 12px 0; 100 border-bottom: 1px solid var(--border-s); 101 } 102 .tx-row:last-child { border-bottom: none; } 103 .tx-icon { 104 width: 32px; height: 32px; border-radius: 50%; 105 display: flex; align-items: center; justify-content: center; 106 font-size: 13px; flex-shrink: 0; 107 } 108 .tx-icon.out { background: oklch(60% 0.22 25 / 0.15); color: var(--error); } 109 .tx-icon.in { background: oklch(65.4% 0.17 162 / 0.15); color: var(--success); } 110 .tx-meta { flex: 1; } 111 .tx-meta .addr { font-size: 12px; font-family: var(--mono); color: var(--text-2); } 112 .tx-meta .label { font-size: 13px; font-weight: 500; color: var(--text-1); } 113 .tx-amount { text-align: right; } 114 .tx-amount .val { font-size: 13px; font-weight: 600; font-family: var(--mono); } 115 .tx-amount .val.out { color: var(--error); } 116 .tx-amount .val.in { color: var(--success); } 117 .tx-amount .time { font-size: 11px; color: var(--text-3); } 118 119 .divider-label { 120 font-size: 11px; font-weight: 600; letter-spacing: 0.06em; 121 text-transform: uppercase; color: var(--text-3); 122 display: flex; align-items: center; gap: 8px; 123 } 124 .divider-label::after { 125 content: ''; flex: 1; height: 1px; background: var(--border-s); 126 } 127 128 129 130 131 /* ════════════════════════════════ 132 VARIANT D — Desktop 133 ════════════════════════════════ */ 134 .dd-frame { 135 width: 1100px; min-height: 640px; 136 background: var(--page); 137 border: 1px solid var(--border); 138 border-radius: 16px; 139 display: flex; flex-direction: column; 140 } 141 .dd-topbar { 142 display: flex; align-items: center; justify-content: space-between; 143 padding: 16px 28px; 144 border-bottom: 1px solid var(--border-s); 145 } 146 .dd-topbar-left { display: flex; align-items: center; gap: 12px; } 147 .dd-topbar-right { display: flex; align-items: center; } 148 .dd-main { display: flex; flex: 1; overflow: visible; } 149 .dd-left { 150 width: 440px; flex-shrink: 0; 151 border-right: 1px solid var(--border-s); 152 display: flex; flex-direction: column; 153 } 154 .dd-right { flex: 1; overflow-y: auto; } 155 .dd-right .d-token-list { padding: 0 28px 24px; } 156 .dd-right .d-token-row { padding: 12px 0; } 157 .dd-treemap-large { height: 330px !important; margin: 0 20px 20px !important; } 158 .dd-section-label { 159 font-size: 11px; font-weight: 600; letter-spacing: 0.06em; 160 text-transform: uppercase; color: var(--text-3); 161 padding: 20px 28px 10px; 162 border-bottom: 1px solid var(--border-s); 163 } 164 165 /* ── VARIANT D ── */ 166 .d-header { 167 display: flex; align-items: center; justify-content: space-between; 168 padding: 20px 20px 16px; 169 border-bottom: 1px solid var(--border-s); 170 } 171 .d-total { 172 padding: 20px 20px 4px; 173 display: flex; flex-direction: column; gap: 2px; 174 } 175 .d-total .label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } 176 .d-total .amount { font-size: 30px; font-weight: 700; font-family: var(--mono); letter-spacing: -0.03em; color: var(--text-1); } 177 .d-total .change { font-size: 12px; color: var(--success); font-weight: 500; } 178 .d-actions { 179 display: grid; grid-template-columns: 1fr 1fr 1fr; 180 gap: 8px; padding: 14px 20px 16px; 181 } 182 /* Treemap — clockwise layout */ 183 .d-treemap { 184 margin: 0 20px 16px; 185 border-radius: var(--r-md); 186 overflow: hidden; 187 display: flex; gap: 2px; 188 height: 190px; 189 } 190 .tm-cell { 191 display: flex; flex-direction: column; justify-content: flex-end; 192 padding: 4px 6px; border-radius: 4px; cursor: pointer; 193 overflow: hidden; transition: filter 0.15s; 194 position: relative; 195 container-type: size; 196 } 197 .tm-cell:hover { filter: brightness(1.15); } 198 .tm-cell .tm-sym { font-size: 11px; font-weight: 700; } 199 .tm-cell .tm-val { font-size: 10px; opacity: 0.8; font-family: var(--mono); } 200 /* Hide label when cell too narrow/short for both symbol + label */ 201 @container (max-width: 40px) { 202 .tm-val { display: none; } 203 } 204 @container (max-height: 36px) { 205 .tm-val { display: none; } 206 } 207 /* Hide symbol when cell too small even for symbol alone */ 208 @container (max-width: 22px) { 209 .tm-sym { display: none; } 210 } 211 @container (max-height: 20px) { 212 .tm-sym { display: none; } 213 } 214 /* Token list */ 215 .d-token-list { padding: 0 20px 24px; } 216 .d-token-row { 217 display: flex; align-items: center; gap: 10px; 218 padding: 10px 0; border-bottom: 1px solid var(--border-s); cursor: pointer; 219 } 220 .d-token-row:last-child { border-bottom: none; } 221 .d-token-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } 222 .d-token-info { flex: 1; } 223 .d-token-name { font-size: 12px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 5px; } 224 .d-token-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; } 225 .d-token-right { text-align: right; } 226 .d-token-denom { font-size: 12px; font-weight: 600; color: var(--text-1); font-family: var(--mono); } 227 .d-token-fiat { font-size: 11px; color: var(--text-3); font-family: var(--mono); margin-top: 1px; } 228 .net-tag { 229 font-size: 9px; font-weight: 600; letter-spacing: 0.04em; 230 padding: 1px 5px; border-radius: 3px; background: var(--raised); 231 border: 1px solid var(--border-s); color: var(--text-3); 232 } 233 234 /* ════════════════════════════════ 235 COMMON COMPONENTS: Native token icons 236 α|δ branded icons — reuse anywhere in the app 237 ════════════════════════════════ */ 238 .icon-ad { 239 width: 28px; height: 28px; border-radius: 50%; 240 display: inline-flex; align-items: center; justify-content: center; 241 flex-shrink: 0; font-family: var(--sans); font-weight: 700; 242 user-select: none; line-height: 1; 243 } 244 /* Alpha (AX): α in alpha-blue on delta-amber background */ 245 .icon-ax { 246 background: oklch(80% 0.20 79); 247 color: oklch(52.4% 0.22 264); 248 font-size: 21px; 249 } 250 /* Delta (DX): δ in delta-amber on alpha-blue background */ 251 .icon-dx { 252 background: oklch(52.4% 0.22 264); 253 color: oklch(80% 0.20 79); 254 font-size: 21px; 255 } 256 /* Synthetic Alpha (sAX): s + α, same coloring as AX. s sits at bottom-left of α */ 257 .icon-sax { 258 background: oklch(80% 0.20 79); 259 color: oklch(52.4% 0.22 264); 260 font-size: 19px; 261 position: relative; 262 } 263 .icon-sax .sax-s { 264 font-size: 11px; 265 font-weight: 700; 266 opacity: 0.80; 267 position: absolute; 268 left: 6px; 269 bottom: 5px; 270 } 271 /* External token logos — no circle frame, just the mark */ 272 .icon-logo { 273 width: 28px; height: 28px; flex-shrink: 0; 274 object-fit: contain; border-radius: 0; 275 } 276 .d-total .amount-fiat { 277 font-size: 14px; 278 color: var(--text-2); 279 font-family: var(--mono); 280 margin-top: 1px; 281 } 282 283 /* ── ADN suffix (α|δ branded, auto-appended) ── */ 284 .adn-suffix { font-size: 12px; font-weight: 700; opacity: 0.90; font-family: 'Inter', Georgia, serif; } 285 .adn-suffix .a { color: var(--alpha); } 286 .adn-suffix .p { color: var(--text-3); } 287 .adn-suffix .d { color: var(--delta); } 288 289 /* ── App switcher dropdown (:: Wallet click) ── */ 290 .app-switch-wrap { position: relative; display: inline-flex; align-items: center; cursor: pointer; } 291 .app-switch-trigger { display: inline-flex; align-items: center; gap: 3px; } 292 .app-switch-trigger .caret { font-size: 8px; color: var(--text-3); margin-left: 2px; } 293 .app-dropdown { 294 display: none; position: absolute; top: calc(100% + 8px); left: 0; 295 background: var(--surface); border: 1px solid var(--border); 296 border-radius: var(--r-md); padding: 6px 0; min-width: 210px; 297 z-index: 500; box-shadow: 0 8px 24px oklch(0% 0 0 / 0.40); 298 } 299 .app-switch-wrap.open .app-dropdown { display: flex; flex-direction: column; } 300 .app-dd-item { 301 display: flex; align-items: center; gap: 10px; 302 padding: 9px 16px; font-size: 13px; font-weight: 500; 303 color: var(--text-1); cursor: pointer; 304 } 305 .app-dd-item:hover { background: var(--raised); } 306 .app-dd-item.active { color: var(--alpha); } 307 .app-dd-item .dd-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; } 308 .app-dd-sub { 309 display: flex; align-items: center; gap: 10px; 310 padding: 7px 16px 7px 44px; font-size: 12px; color: var(--text-2); cursor: pointer; 311 } 312 .app-dd-sub:hover { background: var(--raised); color: var(--text-1); } 313 .app-dd-sub.locked { color: var(--text-3); cursor: default; } 314 .app-dd-sub.locked:hover { background: none; color: var(--text-3); } 315 .app-dd-sep { height: 1px; background: var(--border-s); margin: 4px 0; } 316 .app-dd-badge { 317 margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; 318 padding: 1px 5px; border-radius: 3px; 319 background: var(--raised); border: 1px solid var(--border-s); color: var(--text-3); 320 } 321 322 /* ── Portfolio switcher (α|δ textmark click) ── */ 323 .portfolio-wrap { position: relative; display: inline-flex; align-items: center; cursor: pointer; } 324 .portfolio-dropdown { 325 display: none; position: absolute; top: calc(100% + 8px); left: 0; 326 background: var(--surface); border: 1px solid var(--border); 327 border-radius: var(--r-md); padding: 6px 0; min-width: 190px; 328 z-index: 500; box-shadow: 0 8px 24px oklch(0% 0 0 / 0.40); 329 } 330 .portfolio-wrap.open .portfolio-dropdown { display: flex; flex-direction: column; } 331 .portfolio-dd-item { 332 display: flex; align-items: center; gap: 10px; 333 padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--text-1); cursor: pointer; 334 } 335 .portfolio-dd-item:hover { background: var(--raised); } 336 .portfolio-dd-item.active { color: var(--alpha); } 337 .portfolio-dd-item .pd-dot { 338 width: 14px; height: 14px; border-radius: 50%; 339 border: 2px solid var(--border); flex-shrink: 0; 340 display: flex; align-items: center; justify-content: center; font-size: 8px; 341 } 342 .portfolio-dd-item.active .pd-dot { border-color: var(--alpha); background: var(--alpha); color: #fff; } 343 .portfolio-dd-add { color: var(--text-2); font-size: 12px; } 344 345 /* ── Identity / Paycode selector (top-right header) ── */ 346 .identity-wrap { position: relative; cursor: pointer; } 347 .identity-trigger { 348 display: inline-flex; align-items: center; gap: 5px; 349 font-size: 13px; font-weight: 700; 350 color: var(--text-1); 351 background: var(--surface); padding: 5px 10px; 352 border-radius: var(--r-sm); border: 1px solid var(--border-s); 353 font-family: var(--sans); 354 letter-spacing: -0.01em; 355 } 356 .identity-trigger .id-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; } 357 .identity-trigger .id-name { font-family: var(--mono); font-size: 12px; font-weight: 600; } 358 .identity-trigger .id-caret { font-size: 9px; color: var(--text-3); margin-left: 1px; } 359 .identity-dropdown { 360 display: none; position: absolute; top: calc(100% + 8px); right: 0; 361 background: var(--surface); border: 1px solid var(--border); 362 border-radius: var(--r-md); padding: 6px 0; min-width: 230px; 363 z-index: 500; box-shadow: 0 8px 24px oklch(0% 0 0 / 0.40); 364 } 365 .identity-wrap.open .identity-dropdown { display: flex; flex-direction: column; } 366 .idd-section { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 8px 16px 4px; } 367 .idd-item { 368 display: flex; align-items: center; gap: 8px; 369 padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--text-1); cursor: pointer; 370 } 371 .idd-item:hover { background: var(--raised); } 372 .idd-item.active { color: var(--alpha); } 373 .idd-item.muted { color: var(--text-2); font-size: 12px; } 374 .idd-item.settings { color: var(--text-2); border-top: 1px solid var(--border-s); margin-top: 4px; padding-top: 10px; } 375 .idd-item.settings:hover { color: var(--text-1); background: var(--raised); } 376 .idd-radio { font-size: 13px; flex-shrink: 0; color: var(--text-3); } 377 .idd-radio.on { color: var(--alpha); } 378 .idd-code { font-family: var(--mono); font-size: 11px; color: var(--text-2); flex: 1; } 379 .idd-badge-sm { 380 font-size: 9px; font-weight: 600; letter-spacing: 0.04em; 381 padding: 1px 5px; border-radius: 3px; 382 background: var(--raised); border: 1px solid var(--border-s); color: var(--text-3); 383 flex-shrink: 0; 384 } 385 .idd-badge-sm.gov { color: var(--delta); border-color: oklch(80% 0.20 79 / 0.4); } 386 .idd-badge-sm.primary { color: var(--alpha); border-color: oklch(52.4% 0.22 264 / 0.4); } 387 .idd-adn-suffix { font-size: 11px; font-weight: 700; font-family: 'Inter', Georgia, serif; } 388 .idd-adn-suffix .a { color: var(--alpha); } 389 .idd-adn-suffix .p { color: var(--text-3); } 390 .idd-adn-suffix .d { color: var(--delta); } 391 .idd-plus { font-size: 14px; color: var(--text-3); width: 13px; text-align: center; flex-shrink: 0; } 392 .idd-icon { font-size: 14px; width: 13px; text-align: center; flex-shrink: 0; color: var(--text-2); } 393 .idd-sep { height: 1px; background: var(--border-s); margin: 4px 0; } 394 395 /* ── HAMBURGER NAV ── */ 396 #nav-toggle { position:fixed; top:16px; left:16px; z-index:1000; background:#1C1C2E; border:1px solid rgba(255,255,255,0.12); border-radius:10px; width:40px; height:40px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; } 397 #nav-toggle span { display:block; width:18px; height:2px; background:#a1a1aa; border-radius:2px; } 398 #nav-drawer { position:fixed; top:0; left:-260px; width:240px; height:100vh; background:#0F0F23; border-right:1px solid rgba(255,255,255,0.1); z-index:999; transition:left 0.25s ease; padding:70px 0 24px; display:flex; flex-direction:column; } 399 #nav-drawer.open { left:0; } 400 .nav-section { padding:8px 20px 4px; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#52525b; } 401 .nav-link { display:block; padding:10px 20px; color:#a1a1aa; font-size:14px; font-weight:500; text-decoration:none; transition:background 0.15s, color 0.15s; } 402 .nav-link:hover { background:rgba(99,102,241,0.12); color:#fff; } 403 .nav-link.active { color:oklch(60% 0.26 258); background:rgba(99,102,241,0.08); border-left:2px solid oklch(60% 0.26 258); padding-left:18px; } 404 #nav-overlay { display:none; position:fixed; inset:0; z-index:998; } 405 #nav-overlay.open { display:block; } 406 </style> 407 </head> 408 <body> 409 410 <!-- Hamburger Nav --> 411 <div id="nav-toggle" onclick="toggleNav()" aria-label="Menu"> 412 <span></span><span></span><span></span> 413 </div> 414 <div id="nav-overlay" onclick="toggleNav()"></div> 415 <nav id="nav-drawer"> 416 <div class="nav-section">Wallet</div> 417 <a class="nav-link" href="home.html">Home / Portfolio</a> 418 <a class="nav-link" href="onboarding.html">Onboarding Flow</a> 419 <a class="nav-link" href="send-receive.html">Send / Receive</a> 420 <a class="nav-link" href="swap.html">Swap</a> 421 <div class="nav-section" style="margin-top:12px">Coming Soon</div> 422 <a class="nav-link" style="opacity:0.4;pointer-events:none">Staking</a> 423 <a class="nav-link" style="opacity:0.4;pointer-events:none">Governance</a> 424 <a class="nav-link" style="opacity:0.4;pointer-events:none">Settings</a> 425 <div class="nav-section" style="margin-top:12px">Other Apps</div> 426 <a class="nav-link" style="opacity:0.4;pointer-events:none">Governor</a> 427 <a class="nav-link" style="opacity:0.4;pointer-events:none">Messenger</a> 428 <a class="nav-link" style="opacity:0.4;pointer-events:none">Scanner</a> 429 <a class="nav-link" style="opacity:0.4;pointer-events:none">Docs</a> 430 </nav> 431 <script> 432 function toggleNav() { 433 document.getElementById("nav-drawer").classList.toggle("open"); 434 document.getElementById("nav-overlay").classList.toggle("open"); 435 } 436 var cur = location.pathname.split("/").pop(); 437 document.querySelectorAll(".nav-link").forEach(function(a) { 438 if (a.getAttribute("href") === cur) a.classList.add("active"); 439 }); 440 </script> 441 442 <!-- ── VARIANT D — Desktop ── --> 443 <div class="mock-wrap"> 444 <div class="mock-label">D — Desktop</div> 445 <div class="dd-frame" style="overflow:visible;"> 446 447 <!-- Top bar --> 448 <div class="dd-topbar"> 449 <div class="dd-topbar-left"> 450 <!-- Logo lockup: α|δ textmark + :: App switcher --> 451 <div class="logo" style="font-size:21px;font-weight:700;display:flex;align-items:center;gap:0;margin-left:0;"> 452 <div class="portfolio-wrap" onclick="this.classList.toggle('open');event.stopPropagation();"> 453 <span style="color:var(--alpha)">α</span><span style="color:var(--text-3)">|</span><span style="color:var(--delta)">δ</span> 454 <div class="portfolio-dropdown"> 455 <div class="portfolio-dd-item active"><div class="pd-dot">✓</div>Personal</div> 456 <div class="portfolio-dd-item"><div class="pd-dot"></div>Work</div> 457 <div class="portfolio-dd-item"><div class="pd-dot"></div>Foundation</div> 458 <div class="portfolio-dd-item portfolio-dd-add"><div class="pd-dot" style="border-style:dashed;">+</div>New Portfolio</div> 459 </div> 460 </div> 461 <!-- App switcher --> 462 <div class="app-switch-wrap" onclick="this.classList.toggle('open');event.stopPropagation();" style="margin-left:5px;"> 463 <span class="app-switch-trigger"> 464 <span style="font-weight:700;color:var(--text-2);">::</span> 465 <span style="font-size:15px;color:var(--text-2);font-weight:600;margin-left:4px;position:relative;top:3px;margin-left:1px;">Wallet</span> 466 <span class="caret" style="font-size:10px;">▾</span> 467 </span> 468 <div class="app-dropdown"> 469 <div class="app-dd-item active"><span class="dd-icon">◈</span> Wallet <span class="app-dd-badge">active</span></div> 470 <div class="app-dd-sep"></div> 471 <div class="app-dd-item"><span class="dd-icon">⇄</span> Delta DEX</div> 472 <div class="app-dd-item"><span class="dd-icon">⚖</span> Governance</div> 473 <div class="app-dd-sub">▸ Holder Gov <span class="app-dd-badge" style="color:var(--success);border-color:var(--success);">10k+ DX ✓</span></div> 474 <div class="app-dd-sub locked">▸ Forge / Tech Rep <span class="app-dd-badge">locked</span></div> 475 <div class="app-dd-sub locked">▸ GID Governor <span class="app-dd-badge">locked</span></div> 476 <div class="app-dd-sep"></div> 477 <div class="app-dd-item"><span class="dd-icon">⬡</span> Block Scanner</div> 478 <div class="app-dd-item"><span class="dd-icon">✉</span> Messenger</div> 479 </div> 480 </div> 481 </div><!-- /.logo --> 482 </div> 483 <div class="dd-topbar-right"> 484 <!-- Identity / Paycode selector --> 485 <div class="identity-wrap" onclick="this.classList.toggle('open');event.stopPropagation();"> 486 <div class="identity-trigger"> 487 <div class="id-dot"></div> 488 <span class="id-name">marco<span class="adn-suffix">.<span class="a">α</span><span class="p">|</span><span class="d">δ</span></span></span> 489 <span class="id-caret">▾</span> 490 </div> 491 <div class="identity-dropdown"> 492 <div class="idd-section">Paycode</div> 493 <div class="idd-item active"> 494 <span class="idd-radio on">◉</span> 495 <span class="idd-code">acdc1q4js…r4k2</span> 496 <span class="idd-badge-sm primary">primary</span> 497 </div> 498 <div class="idd-item muted"><span class="idd-plus">+</span> Generate new paycode</div> 499 <div class="idd-sep"></div> 500 <div class="idd-section">Identity</div> 501 <div class="idd-item active"> 502 <span class="idd-radio on">◉</span> 503 marco<span class="idd-adn-suffix">.<span class="a">α</span><span class="p">|</span><span class="d">δ</span></span> 504 </div> 505 <div class="idd-item"> 506 <span class="idd-radio">○</span> 507 marco.uk <span class="idd-badge-sm gov">Governor</span> 508 </div> 509 <div class="idd-item muted"><span class="idd-plus">+</span> Buy new ADN</div> 510 <div class="idd-item settings"><span class="idd-icon">⚙</span> Settings</div> 511 </div> 512 </div> 513 </div> 514 </div> 515 516 <!-- Main content: two columns --> 517 <div class="dd-main"> 518 <!-- Left: Portfolio summary + Treemap --> 519 <div class="dd-left"> 520 <div class="d-total" style="padding:24px 20px 8px;"> 521 <div class="label">Portfolio</div> 522 <div class="amount">31,998.63 K AX</div> 523 <div class="amount-fiat">$33,918.55 K</div> 524 <div class="change">+2.3% today</div> 525 </div> 526 <!-- Fibonacci spiral treemap (same as mobile, larger) --> 527 <div class="d-treemap dd-treemap-large"> 528 <div class="tm-cell" style="flex:38;background:oklch(52.4% 0.22 264);"> 529 <div class="tm-sym" style="color:#fff">AX</div> 530 <div class="tm-val" style="color:rgba(255,255,255,0.75)">31,998.63 K</div> 531 </div> 532 <div style="flex:62;display:flex;flex-direction:column;gap:2px;overflow:hidden;"> 533 <div class="tm-cell" style="flex:44;background:oklch(80% 0.20 79);"> 534 <div class="tm-sym" style="color:oklch(52.4% 0.22 264)">DX</div> 535 <div class="tm-val" style="color:oklch(52.4% 0.22 264 / 0.75)">2,360.00 K</div> 536 </div> 537 <div style="flex:56;display:flex;gap:2px;overflow:hidden;"> 538 <div class="tm-cell" style="flex:20;background:#F7931A;"> 539 <div class="tm-sym" style="color:#fff">BTC</div> 540 <div class="tm-val" style="color:rgba(255,255,255,0.75)">24.73</div> 541 </div> 542 <div style="flex:80;display:flex;flex-direction:column;gap:2px;overflow:hidden;"> 543 <div class="tm-cell" style="flex:22;background:#EF4444;"> 544 <div class="tm-sym" style="color:#fff">TRX</div> 545 <div class="tm-val" style="color:rgba(255,255,255,0.75)">8,420.00 K</div> 546 </div> 547 <div style="flex:78;display:flex;gap:2px;overflow:hidden;"> 548 <div class="tm-cell" style="flex:26;background:oklch(52.4% 0.22 264);"> 549 <div class="tm-sym" style="color:oklch(80% 0.20 79)">sAX</div> 550 <div class="tm-val" style="color:oklch(80% 0.20 79 / 0.75)">1,847.50 K</div> 551 </div> 552 <div style="flex:74;display:flex;flex-direction:column;gap:2px;overflow:hidden;"> 553 <div class="tm-cell" style="flex:30;background:#627EEA;"> 554 <div class="tm-sym" style="color:#fff">ETH</div> 555 <div class="tm-val" style="color:rgba(255,255,255,0.75)">423.14</div> 556 </div> 557 <div style="flex:70;display:flex;gap:2px;overflow:hidden;"> 558 <div class="tm-cell" style="flex:41;background:#9945FF;"> 559 <div class="tm-sym" style="color:#fff">SOL</div> 560 <div class="tm-val" style="color:rgba(255,255,255,0.75)">8,420.10</div> 561 </div> 562 <div style="flex:59;display:flex;flex-direction:column;gap:2px;overflow:hidden;"> 563 <div class="tm-cell" style="flex:63;background:#26A17B;"> 564 <div class="tm-sym" style="color:#fff">USDT</div> 565 </div> 566 <div class="tm-cell" style="flex:37;background:#2775CA;"> 567 <div class="tm-sym" style="color:#fff">USDC</div> 568 </div> 569 </div> 570 </div> 571 </div> 572 </div> 573 </div> 574 </div> 575 </div> 576 </div> 577 </div> 578 579 <!-- Right: Token list --> 580 <div class="dd-right"> 581 <div class="dd-section-label">Assets</div> 582 <div class="d-token-list" style="padding: 0 28px 24px;"> 583 <!-- AX --> 584 <div class="d-token-row"> 585 <div class="icon-ad icon-ax">α</div> 586 <div class="d-token-info"> 587 <div class="d-token-name">Alpha</div> 588 <div class="d-token-sub">Native · Alpha network</div> 589 </div> 590 <div class="d-token-right"> 591 <div class="d-token-denom">12,247.33 K AX</div> 592 <div class="d-token-fiat">$12,982.17 K</div> 593 </div> 594 </div> 595 <!-- DX --> 596 <div class="d-token-row"> 597 <div class="icon-ad icon-dx">δ</div> 598 <div class="d-token-info"> 599 <div class="d-token-name">Delta</div> 600 <div class="d-token-sub">Native · Delta network</div> 601 </div> 602 <div class="d-token-right"> 603 <div class="d-token-denom">2,360.00 K DX</div> 604 <div class="d-token-fiat">$9,133.20 K</div> 605 </div> 606 </div> 607 <!-- sAX --> 608 <div class="d-token-row"> 609 <div class="icon-ad icon-sax"><span class="sax-s">s</span>α</div> 610 <div class="d-token-info"> 611 <div class="d-token-name">Synthetic Alpha</div> 612 <div class="d-token-sub">Synthetic · Alpha network</div> 613 </div> 614 <div class="d-token-right"> 615 <div class="d-token-denom">1,847.50 K sAX</div> 616 <div class="d-token-fiat">$1,958.35 K</div> 617 </div> 618 </div> 619 <!-- BTC --> 620 <div class="d-token-row"> 621 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/btc.svg" alt="BTC"> 622 <div class="d-token-info"> 623 <div class="d-token-name">Bitcoin</div> 624 <div class="d-token-sub">External · Bitcoin network</div> 625 </div> 626 <div class="d-token-right"> 627 <div class="d-token-denom">24.73 BTC</div> 628 <div class="d-token-fiat">$2,411.18 K</div> 629 </div> 630 </div> 631 <!-- TRX --> 632 <div class="d-token-row"> 633 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/trx.svg" alt="TRX"> 634 <div class="d-token-info"> 635 <div class="d-token-name">Tron</div> 636 <div class="d-token-sub">External · Tron network</div> 637 </div> 638 <div class="d-token-right"> 639 <div class="d-token-denom">8,420.00 K TRX</div> 640 <div class="d-token-fiat">$2,020.80 K</div> 641 </div> 642 </div> 643 <!-- ETH --> 644 <div class="d-token-row"> 645 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/eth.svg" alt="ETH"> 646 <div class="d-token-info"> 647 <div class="d-token-name">Ethereum</div> 648 <div class="d-token-sub">External · Ethereum network</div> 649 </div> 650 <div class="d-token-right"> 651 <div class="d-token-denom">423.14 ETH</div> 652 <div class="d-token-fiat">$1,629.09 K</div> 653 </div> 654 </div> 655 <!-- SOL --> 656 <div class="d-token-row"> 657 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/sol.svg" alt="SOL"> 658 <div class="d-token-info"> 659 <div class="d-token-name">Solana</div> 660 <div class="d-token-sub">External · Solana network</div> 661 </div> 662 <div class="d-token-right"> 663 <div class="d-token-denom">8,420.10 SOL</div> 664 <div class="d-token-fiat">$1,557.72 K</div> 665 </div> 666 </div> 667 <!-- Tether --> 668 <div class="d-token-row"> 669 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/usdt.svg" alt="USDT"> 670 <div class="d-token-info"> 671 <div class="d-token-name">Tether</div> 672 <div class="d-token-sub">Stablecoin · Tron network</div> 673 </div> 674 <div class="d-token-right"> 675 <div class="d-token-denom">1,420.00 K USDT</div> 676 <div class="d-token-fiat">$1,420.00 K</div> 677 </div> 678 </div> 679 <!-- USDC --> 680 <div class="d-token-row"> 681 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/usdc.svg" alt="USDC"> 682 <div class="d-token-info"> 683 <div class="d-token-name">USD Coin</div> 684 <div class="d-token-sub">Stablecoin · Ethereum network</div> 685 </div> 686 <div class="d-token-right"> 687 <div class="d-token-denom">842.00 K USDC</div> 688 <div class="d-token-fiat">$842.00 K</div> 689 </div> 690 </div> 691 </div> 692 </div> 693 </div> 694 695 </div> 696 </div> 697 698 <!-- ── VARIANT D — Treemap Portfolio ── --> 699 <div class="mock-wrap"> 700 <div class="mock-label">D — Treemap Portfolio</div> 701 <div class="phone" style="min-height:780px;overflow:visible;"> 702 703 <div class="d-header" style="position:relative;"> 704 <div class="logo" style="font-size:21px;font-weight:700;display:flex;align-items:center;gap:0;margin-left:0;"> 705 <!-- α|δ textmark: click to switch portfolio --> 706 <div class="portfolio-wrap" onclick="this.classList.toggle('open');event.stopPropagation();"> 707 <span style="color:var(--alpha)">α</span><span style="color:var(--text-3)">|</span><span style="color:var(--delta)">δ</span> 708 <div class="portfolio-dropdown"> 709 <div class="portfolio-dd-item active"> 710 <div class="pd-dot">✓</div>Personal 711 </div> 712 <div class="portfolio-dd-item"> 713 <div class="pd-dot"></div>Work 714 </div> 715 <div class="portfolio-dd-item"> 716 <div class="pd-dot"></div>Foundation 717 </div> 718 <div class="app-dd-sep" style="margin:4px 0;"></div> 719 <div class="portfolio-dd-item portfolio-dd-add"> 720 <div class="pd-dot" style="font-size:11px;">+</div>New Portfolio 721 </div> 722 </div> 723 </div> 724 <!-- :: Wallet → app switcher --> 725 <div class="app-switch-wrap" onclick="this.classList.toggle('open');event.stopPropagation();" style="margin-left:5px;"> 726 <span class="app-switch-trigger"> 727 <span style="font-weight:700;color:var(--text-2);">::</span> 728 <span style="font-size:15px;color:var(--text-2);font-weight:600;margin-left:4px;position:relative;top:3px;margin-left:1px;">Wallet</span> 729 <span class="caret" style="font-size:10px;">▾</span> 730 </span> 731 <div class="app-dropdown"> 732 <div class="app-dd-item active"><span class="dd-icon">◈</span> Wallet <span class="app-dd-badge">active</span></div> 733 <div class="app-dd-sep"></div> 734 <div class="app-dd-item"><span class="dd-icon">⇄</span> Delta DEX</div> 735 <div class="app-dd-item"><span class="dd-icon">⚖</span> Governance</div> 736 <div class="app-dd-sub">▸ Holder Gov <span class="app-dd-badge" style="color:var(--success);border-color:var(--success);">10k+ DX ✓</span></div> 737 <div class="app-dd-sub locked">▸ Forge / Tech Rep <span class="app-dd-badge">locked</span></div> 738 <div class="app-dd-sub locked">▸ GID Governor <span class="app-dd-badge">locked</span></div> 739 <div class="app-dd-sep"></div> 740 <div class="app-dd-item"><span class="dd-icon">⬡</span> Block Scanner</div> 741 <div class="app-dd-item"><span class="dd-icon">✉</span> Messenger</div> 742 </div> 743 </div> 744 </div> 745 <!-- Identity / Paycode selector --> 746 <div class="identity-wrap" onclick="this.classList.toggle('open');event.stopPropagation();"> 747 <div class="identity-trigger"> 748 <div class="id-dot"></div> 749 <span class="id-name">marco<span class="adn-suffix">.<span class="a">α</span><span class="p">|</span><span class="d">δ</span></span></span> 750 <span class="id-caret">▾</span> 751 </div> 752 <div class="identity-dropdown"> 753 <div class="idd-section">Paycode</div> 754 <div class="idd-item active"> 755 <span class="idd-radio on">◉</span> 756 <span class="idd-code">acdc1q4js…r4k2</span> 757 <span class="idd-badge-sm primary">primary</span> 758 </div> 759 <div class="idd-item muted"> 760 <span class="idd-plus">+</span> 761 Generate new paycode 762 </div> 763 <div class="idd-sep"></div> 764 <div class="idd-section">Identity</div> 765 <div class="idd-item active"> 766 <span class="idd-radio on">◉</span> 767 marco<span class="idd-adn-suffix">.<span class="a">α</span><span class="p">|</span><span class="d">δ</span></span> 768 </div> 769 <div class="idd-item"> 770 <span class="idd-radio">○</span> 771 marco.uk 772 <span class="idd-badge-sm gov">Governor</span> 773 </div> 774 <div class="idd-item muted"> 775 <span class="idd-plus">+</span> 776 Buy new ADN 777 </div> 778 <div class="idd-item settings"> 779 <span class="idd-icon">⚙</span> 780 Settings 781 </div> 782 </div> 783 </div> 784 </div> 785 786 <div class="d-total"> 787 <div class="label">Portfolio</div> 788 <div class="amount">31,998.63 K AX</div> 789 <div class="amount-fiat">$33,918.55 K</div> 790 <div class="change">+2.3% today</div> 791 </div> 792 793 <!-- Treemap: Fibonacci spiral — each level alternates row/column, spiralling inward --> 794 <div class="d-treemap"> 795 <div class="tm-cell" style="flex:38;background:oklch(52.4% 0.22 264);"> 796 <div class="tm-sym" style="color:#fff">AX</div> 797 <div class="tm-val" style="color:rgba(255,255,255,0.75)">31,998.63 K</div> 798 </div> 799 <div style="flex:62;display:flex;flex-direction:column;gap:2px;overflow:hidden;"> 800 <div class="tm-cell" style="flex:44;background:oklch(80% 0.20 79);"> 801 <div class="tm-sym" style="color:oklch(52.4% 0.22 264)">DX</div> 802 <div class="tm-val" style="color:oklch(52.4% 0.22 264 / 0.75)">2,360.00 K</div> 803 </div> 804 <div style="flex:56;display:flex;gap:2px;overflow:hidden;"> 805 <div class="tm-cell" style="flex:20;background:#F7931A;"> 806 <div class="tm-sym" style="color:#fff">BTC</div> 807 <div class="tm-val" style="color:rgba(255,255,255,0.75)">24.73</div> 808 </div> 809 <div style="flex:80;display:flex;flex-direction:column;gap:2px;overflow:hidden;"> 810 <div class="tm-cell" style="flex:22;background:#EF4444;"> 811 <div class="tm-sym" style="color:#fff">TRX</div> 812 <div class="tm-val" style="color:rgba(255,255,255,0.75)">8,420.00 K</div> 813 </div> 814 <div style="flex:78;display:flex;gap:2px;overflow:hidden;"> 815 <div class="tm-cell" style="flex:26;background:oklch(52.4% 0.22 264);"> 816 <div class="tm-sym" style="color:oklch(80% 0.20 79)">sAX</div> 817 <div class="tm-val" style="color:oklch(80% 0.20 79 / 0.75)">1,847.50 K</div> 818 </div> 819 <div style="flex:74;display:flex;flex-direction:column;gap:2px;overflow:hidden;"> 820 <div class="tm-cell" style="flex:30;background:#627EEA;"> 821 <div class="tm-sym" style="color:#fff">ETH</div> 822 <div class="tm-val" style="color:rgba(255,255,255,0.75)">423.14</div> 823 </div> 824 <div style="flex:70;display:flex;gap:2px;overflow:hidden;"> 825 <div class="tm-cell" style="flex:41;background:#9945FF;"> 826 <div class="tm-sym" style="color:#fff">SOL</div> 827 <div class="tm-val" style="color:rgba(255,255,255,0.75)">8,420.10</div> 828 </div> 829 <div style="flex:59;display:flex;flex-direction:column;gap:2px;overflow:hidden;"> 830 <div class="tm-cell" style="flex:63;background:#26A17B;"> 831 <div class="tm-sym" style="color:#fff">USDT</div> 832 </div> 833 <div class="tm-cell" style="flex:37;background:#2775CA;"> 834 <div class="tm-sym" style="color:#fff">USDC</div> 835 </div> 836 </div> 837 </div> 838 </div> 839 </div> 840 </div> 841 </div> 842 </div> 843 </div> 844 845 <!-- Token list --> 846 <div class="d-token-list"> 847 <div class="divider-label" style="margin-bottom:10px;">Assets</div> 848 849 <div class="d-token-row"> 850 <div class="icon-ad icon-ax">α</div> 851 <div class="d-token-info"> 852 <div class="d-token-name">Alpha</div> 853 <div class="d-token-sub">Native · Alpha network</div> 854 </div> 855 <div class="d-token-right"> 856 <div class="d-token-denom">12,247.33 K AX</div> 857 <div class="d-token-fiat">$12,982.17 K</div> 858 </div> 859 </div> 860 861 <div class="d-token-row"> 862 <div class="icon-ad icon-dx">δ</div> 863 <div class="d-token-info"> 864 <div class="d-token-name">Delta</div> 865 <div class="d-token-sub">Governance · Alpha network</div> 866 </div> 867 <div class="d-token-right"> 868 <div class="d-token-denom">2,360.00 K DX</div> 869 <div class="d-token-fiat">$9,133.20 K</div> 870 </div> 871 </div> 872 873 <div class="d-token-row"> 874 <div class="icon-ad icon-sax"><span class="sax-s">s</span>α</div> 875 <div class="d-token-info"> 876 <div class="d-token-name">Synthetic Alpha</div> 877 <div class="d-token-sub">Synthetic · Alpha network</div> 878 </div> 879 <div class="d-token-right"> 880 <div class="d-token-denom">1,847.50 K sAX</div> 881 <div class="d-token-fiat">$1,958.35 K</div> 882 </div> 883 </div> 884 885 <div class="d-token-row"> 886 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/btc.svg" alt="BTC"> 887 <div class="d-token-info"> 888 <div class="d-token-name">Bitcoin</div> 889 <div class="d-token-sub">External · Bitcoin network</div> 890 </div> 891 <div class="d-token-right"> 892 <div class="d-token-denom">24.73 BTC</div> 893 <div class="d-token-fiat">$2,411.18 K</div> 894 </div> 895 </div> 896 897 <div class="d-token-row"> 898 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/trx.svg" alt="TRX"> 899 <div class="d-token-info"> 900 <div class="d-token-name">Tron</div> 901 <div class="d-token-sub">External · Tron network</div> 902 </div> 903 <div class="d-token-right"> 904 <div class="d-token-denom">8,420.00 K TRX</div> 905 <div class="d-token-fiat">$2,020.80 K</div> 906 </div> 907 </div> 908 909 <div class="d-token-row"> 910 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/eth.svg" alt="ETH"> 911 <div class="d-token-info"> 912 <div class="d-token-name">Ethereum</div> 913 <div class="d-token-sub">External · Ethereum network</div> 914 </div> 915 <div class="d-token-right"> 916 <div class="d-token-denom">423.14 ETH</div> 917 <div class="d-token-fiat">$1,629.09 K</div> 918 </div> 919 </div> 920 921 <div class="d-token-row"> 922 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/sol.svg" alt="SOL"> 923 <div class="d-token-info"> 924 <div class="d-token-name">Solana</div> 925 <div class="d-token-sub">External · Solana network</div> 926 </div> 927 <div class="d-token-right"> 928 <div class="d-token-denom">8,420.10 SOL</div> 929 <div class="d-token-fiat">$1,557.72 K</div> 930 </div> 931 </div> 932 933 <div class="d-token-row"> 934 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/usdt.svg" alt="USDT"> 935 <div class="d-token-info"> 936 <div class="d-token-name">Tether <span class="net-tag">3 networks</span></div> 937 <div class="d-token-sub">Alpha · Ethereum · Tron</div> 938 </div> 939 <div class="d-token-right"> 940 <div class="d-token-denom">1,420.00 K USDT</div> 941 <div class="d-token-fiat">$1,420.00 K</div> 942 </div> 943 </div> 944 945 <div class="d-token-row"> 946 <img class="icon-logo" src="https://cdn.jsdelivr.net/gh/spothq/cryptocurrency-icons@master/svg/color/usdc.svg" alt="USDC"> 947 <div class="d-token-info"> 948 <div class="d-token-name">USD Coin <span class="net-tag">3 networks</span></div> 949 <div class="d-token-sub">Alpha · Ethereum · Solana</div> 950 </div> 951 <div class="d-token-right"> 952 <div class="d-token-denom">842.00 K USDC</div> 953 <div class="d-token-fiat">$842.00 K</div> 954 </div> 955 </div> 956 957 </div> 958 </div> 959 </div> 960 961 962 <button class="theme-toggle" onclick="document.body.classList.toggle('light');this.textContent=document.body.classList.contains('light')?'☀ Light':'◑ Dark'">◑ Dark</button> 963 964 <script> 965 document.addEventListener('click', () => { 966 document.querySelectorAll('.app-switch-wrap.open, .portfolio-wrap.open, .identity-wrap.open').forEach(el => el.classList.remove('open')) 967 }) 968 </script> 969 <script> 970 // Sync phone shell backgrounds with theme 971 document.querySelector('.theme-toggle').addEventListener('click', () => { 972 const isLight = document.body.classList.contains('light') 973 document.querySelectorAll('.b-feed').forEach(el => { 974 el.style.background = isLight ? 'var(--raised)' : 'var(--surface)' 975 }) 976 }) 977 </script> 978 </body> 979 </html>