send-receive.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 — Send & Receive Flow Mockup</title> 7 <link rel="preconnect" href="https://fonts.googleapis.com" /> 8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> 10 <style> 11 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 12 13 body { 14 background: #060614; 15 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 16 min-height: 100vh; 17 min-width: max-content; 18 padding: 48px 32px 80px; 19 overflow-x: auto; 20 } 21 22 .page-title { 23 text-align: center; 24 color: #a1a1aa; 25 font-size: 13px; 26 font-weight: 500; 27 letter-spacing: 0.12em; 28 text-transform: uppercase; 29 margin-bottom: 48px; 30 } 31 32 .frames-row { 33 display: flex; 34 flex-direction: row; 35 flex-wrap: wrap; 36 gap: 32px; 37 justify-content: center; 38 align-items: flex-start; 39 max-width: 1600px; 40 margin: 0 auto; 41 } 42 43 .frame-wrapper { 44 display: flex; 45 flex-direction: column; 46 align-items: center; 47 gap: 16px; 48 } 49 50 .frame-label { 51 color: #71717a; 52 font-size: 12px; 53 font-weight: 600; 54 letter-spacing: 0.08em; 55 text-transform: uppercase; 56 } 57 58 /* iPhone 14 frame: 390×844 */ 59 .phone-frame { 60 width: 390px; 61 height: 844px; 62 border: 1px solid rgba(255,255,255,0.18); 63 border-radius: 44px; 64 overflow: hidden; 65 background: #0F0F23; 66 position: relative; 67 box-shadow: 68 0 0 0 1px rgba(99,102,241,0.08), 69 0 32px 80px rgba(0,0,0,0.7), 70 0 8px 24px rgba(99,102,241,0.12); 71 flex-shrink: 0; 72 } 73 74 /* Notch */ 75 .phone-frame::before { 76 content: ''; 77 position: absolute; 78 top: 0; 79 left: 50%; 80 transform: translateX(-50%); 81 width: 126px; 82 height: 34px; 83 background: #0F0F23; 84 border-radius: 0 0 20px 20px; 85 z-index: 100; 86 border-bottom: 1px solid rgba(255,255,255,0.1); 87 border-left: 1px solid rgba(255,255,255,0.1); 88 border-right: 1px solid rgba(255,255,255,0.1); 89 } 90 91 .screen { 92 width: 100%; 93 height: 100%; 94 display: flex; 95 flex-direction: column; 96 padding: 56px 20px 32px; 97 position: relative; 98 overflow: hidden; 99 } 100 101 /* Status bar */ 102 .status-bar { 103 position: absolute; 104 top: 0; 105 left: 0; 106 right: 0; 107 height: 44px; 108 display: flex; 109 align-items: center; 110 justify-content: space-between; 111 padding: 12px 24px 0; 112 z-index: 50; 113 } 114 115 .status-time { 116 color: #e4e4e7; 117 font-size: 15px; 118 font-weight: 600; 119 } 120 121 .status-icons { 122 display: flex; 123 align-items: center; 124 gap: 6px; 125 color: #e4e4e7; 126 } 127 128 /* ── SHARED COMPONENTS ── */ 129 130 .screen-header { 131 display: flex; 132 align-items: center; 133 justify-content: center; 134 position: relative; 135 margin-bottom: 20px; 136 } 137 138 .screen-header-title { 139 color: #ffffff; 140 font-size: 18px; 141 font-weight: 700; 142 letter-spacing: -0.01em; 143 } 144 145 .network-badge { 146 position: absolute; 147 right: 0; 148 top: 50%; 149 transform: translateY(-50%); 150 padding: 4px 10px; 151 border-radius: 20px; 152 font-size: 11px; 153 font-weight: 600; 154 letter-spacing: 0.02em; 155 } 156 157 .network-badge.alpha { 158 background: oklch(60% 0.26 258 / 0.22); 159 color: oklch(80% 0.20 258); 160 border: 1px solid oklch(60% 0.26 258 / 0.35); 161 } 162 163 .network-badge.delta { 164 background: oklch(80% 0.20 79 / 0.18); 165 color: oklch(90% 0.18 79); 166 border: 1px solid oklch(80% 0.20 79 / 0.35); 167 } 168 169 .avail-row { 170 display: flex; 171 justify-content: space-between; 172 align-items: baseline; 173 margin-bottom: 14px; 174 } 175 176 .avail-label { 177 color: #52525b; 178 font-size: 12px; 179 font-weight: 500; 180 } 181 182 .avail-value { 183 color: #a1a1aa; 184 font-size: 12px; 185 font-weight: 500; 186 font-family: 'JetBrains Mono', monospace; 187 } 188 189 .input-group { 190 margin-bottom: 12px; 191 } 192 193 .input-label { 194 color: #a1a1aa; 195 font-size: 12px; 196 font-weight: 500; 197 margin-bottom: 6px; 198 display: block; 199 } 200 201 .input-wrap { 202 position: relative; 203 } 204 205 .input-field { 206 width: 100%; 207 background: #1C1C2E; 208 border: 1.5px solid rgba(255,255,255,0.08); 209 border-radius: 10px; 210 padding: 12px 14px; 211 color: #e4e4e7; 212 font-family: 'Inter', sans-serif; 213 font-size: 14px; 214 } 215 216 .input-field.mono { 217 font-family: 'JetBrains Mono', monospace; 218 font-size: 12px; 219 } 220 221 .input-field::placeholder { color: #3f3f46; } 222 223 .input-field.valid { 224 border-color: oklch(65% 0.18 145 / 0.5); 225 } 226 227 .input-action { 228 position: absolute; 229 right: 12px; 230 top: 50%; 231 transform: translateY(-50%); 232 color: oklch(60% 0.26 258); 233 font-size: 11px; 234 font-weight: 600; 235 cursor: pointer; 236 display: flex; 237 align-items: center; 238 gap: 4px; 239 } 240 241 .valid-icon { 242 position: absolute; 243 right: 72px; 244 top: 50%; 245 transform: translateY(-50%); 246 color: oklch(65% 0.18 145); 247 line-height: 1; 248 } 249 250 .amount-wrap { 251 position: relative; 252 } 253 254 .amount-input { 255 width: 100%; 256 background: #1C1C2E; 257 border: 1.5px solid oklch(60% 0.26 258 / 0.4); 258 border-radius: 10px; 259 padding: 14px 60px 14px 14px; 260 color: #ffffff; 261 font-family: 'Inter', sans-serif; 262 font-size: 22px; 263 font-weight: 700; 264 letter-spacing: -0.01em; 265 box-shadow: 0 0 0 3px oklch(60% 0.26 258 / 0.12); 266 } 267 268 .amount-input.delta-focus { 269 border-color: oklch(80% 0.20 79 / 0.4); 270 box-shadow: 0 0 0 3px oklch(80% 0.20 79 / 0.10); 271 } 272 273 .amount-badge { 274 position: absolute; 275 right: 12px; 276 top: 50%; 277 transform: translateY(-50%); 278 background: #16162A; 279 border: 1px solid rgba(255,255,255,0.08); 280 border-radius: 6px; 281 padding: 3px 8px; 282 color: #a1a1aa; 283 font-size: 11px; 284 font-weight: 600; 285 letter-spacing: 0.04em; 286 } 287 288 .max-row { 289 display: flex; 290 justify-content: flex-end; 291 margin-top: 5px; 292 margin-bottom: 6px; 293 } 294 295 .max-link { 296 color: oklch(60% 0.26 258); 297 font-size: 11px; 298 font-weight: 600; 299 cursor: pointer; 300 } 301 302 .fee-row { 303 display: flex; 304 justify-content: space-between; 305 align-items: center; 306 padding: 8px 0; 307 } 308 309 .fee-label { 310 color: #52525b; 311 font-size: 12px; 312 } 313 314 .fee-value { 315 color: #a1a1aa; 316 font-size: 12px; 317 font-family: 'JetBrains Mono', monospace; 318 } 319 320 .total-card { 321 background: #16162A; 322 border: 1px solid oklch(60% 0.26 258 / 0.25); 323 border-radius: 10px; 324 padding: 12px 14px; 325 display: flex; 326 justify-content: space-between; 327 align-items: center; 328 margin: 8px 0 16px; 329 } 330 331 .total-card.delta-border { 332 border-color: oklch(80% 0.20 79 / 0.25); 333 } 334 335 .total-label { 336 color: #e4e4e7; 337 font-size: 13px; 338 font-weight: 500; 339 } 340 341 .total-value { 342 color: oklch(60% 0.26 258); 343 font-size: 15px; 344 font-weight: 700; 345 font-family: 'JetBrains Mono', monospace; 346 } 347 348 .total-value.delta { 349 color: oklch(80% 0.20 79); 350 } 351 352 .btn-primary { 353 width: 100%; 354 padding: 15px 24px; 355 background: oklch(60% 0.26 258); 356 color: #ffffff; 357 border: none; 358 border-radius: 12px; 359 font-family: 'Inter', sans-serif; 360 font-size: 15px; 361 font-weight: 600; 362 cursor: pointer; 363 text-align: center; 364 letter-spacing: 0.01em; 365 margin-top: auto; 366 } 367 368 .btn-primary.delta { 369 background: oklch(80% 0.20 79); 370 color: #0F0F23; 371 } 372 373 .btn-outlined { 374 width: 100%; 375 padding: 14px 24px; 376 background: transparent; 377 color: oklch(60% 0.26 258); 378 border: 1.5px solid oklch(60% 0.26 258); 379 border-radius: 12px; 380 font-family: 'Inter', sans-serif; 381 font-size: 15px; 382 font-weight: 600; 383 cursor: pointer; 384 text-align: center; 385 display: flex; 386 align-items: center; 387 justify-content: center; 388 gap: 8px; 389 } 390 391 .btn-ghost { 392 flex: 1; 393 padding: 14px; 394 background: transparent; 395 color: #a1a1aa; 396 border: 1.5px solid rgba(255,255,255,0.1); 397 border-radius: 12px; 398 font-family: 'Inter', sans-serif; 399 font-size: 14px; 400 font-weight: 600; 401 cursor: pointer; 402 text-align: center; 403 } 404 405 .btn-confirm { 406 flex: 1; 407 padding: 14px; 408 background: oklch(60% 0.26 258); 409 color: #ffffff; 410 border: none; 411 border-radius: 12px; 412 font-family: 'Inter', sans-serif; 413 font-size: 14px; 414 font-weight: 600; 415 cursor: pointer; 416 text-align: center; 417 } 418 419 /* ── SCREEN 3: CONFIRM MODAL ── */ 420 421 .modal-backdrop { 422 position: absolute; 423 inset: 0; 424 background: rgba(6,6,20,0.72); 425 backdrop-filter: blur(2px); 426 z-index: 10; 427 } 428 429 .bottom-sheet { 430 position: absolute; 431 bottom: 0; 432 left: 0; 433 right: 0; 434 background: #1C1C2E; 435 border-radius: 24px 24px 0 0; 436 border-top: 1px solid rgba(255,255,255,0.1); 437 border-left: 1px solid rgba(255,255,255,0.06); 438 border-right: 1px solid rgba(255,255,255,0.06); 439 z-index: 20; 440 padding: 12px 20px 28px; 441 height: 500px; 442 display: flex; 443 flex-direction: column; 444 } 445 446 .sheet-handle { 447 width: 36px; 448 height: 4px; 449 background: rgba(255,255,255,0.15); 450 border-radius: 2px; 451 margin: 0 auto 18px; 452 } 453 454 .sheet-title { 455 color: #ffffff; 456 font-size: 17px; 457 font-weight: 700; 458 text-align: center; 459 margin-bottom: 20px; 460 } 461 462 .confirm-row { 463 display: flex; 464 justify-content: space-between; 465 align-items: center; 466 padding: 10px 0; 467 border-bottom: 1px solid rgba(255,255,255,0.06); 468 } 469 470 .confirm-row:last-of-type { 471 border-bottom: none; 472 } 473 474 .confirm-key { 475 color: #71717a; 476 font-size: 13px; 477 } 478 479 .confirm-val { 480 color: #e4e4e7; 481 font-size: 13px; 482 font-family: 'JetBrains Mono', monospace; 483 display: flex; 484 align-items: center; 485 gap: 6px; 486 } 487 488 .confirm-total-row { 489 display: flex; 490 justify-content: space-between; 491 align-items: center; 492 padding: 14px 0 10px; 493 } 494 495 .confirm-total-key { 496 color: #e4e4e7; 497 font-size: 15px; 498 font-weight: 600; 499 } 500 501 .confirm-total-val { 502 color: oklch(60% 0.26 258); 503 font-size: 17px; 504 font-weight: 700; 505 font-family: 'JetBrains Mono', monospace; 506 } 507 508 .confirm-divider { 509 height: 1px; 510 background: rgba(255,255,255,0.08); 511 margin: 2px 0; 512 } 513 514 .warning-text { 515 color: oklch(80% 0.20 79); 516 font-size: 11.5px; 517 text-align: center; 518 margin: 10px 0 14px; 519 } 520 521 .confirm-btn-row { 522 display: flex; 523 gap: 10px; 524 margin-top: auto; 525 } 526 527 .copy-icon { 528 color: #52525b; 529 cursor: pointer; 530 } 531 532 /* ── SCREENS 4 & 5: RECEIVE ── */ 533 534 .qr-container { 535 display: flex; 536 flex-direction: column; 537 align-items: center; 538 margin-bottom: 16px; 539 } 540 541 .qr-box { 542 background: #ffffff; 543 border-radius: 14px; 544 padding: 12px; 545 display: flex; 546 align-items: center; 547 justify-content: center; 548 margin-bottom: 14px; 549 } 550 551 .address-display { 552 color: #52525b; 553 font-size: 11px; 554 font-family: 'JetBrains Mono', monospace; 555 text-align: center; 556 line-height: 1.5; 557 padding: 0 8px; 558 margin-bottom: 14px; 559 word-break: break-all; 560 } 561 562 .divider-or { 563 display: flex; 564 align-items: center; 565 gap: 10px; 566 margin: 12px 0; 567 color: #3f3f46; 568 font-size: 11px; 569 } 570 571 .divider-or::before, 572 .divider-or::after { 573 content: ''; 574 flex: 1; 575 height: 1px; 576 background: rgba(255,255,255,0.07); 577 } 578 579 .payment-code { 580 color: #52525b; 581 font-size: 11px; 582 font-family: 'JetBrains Mono', monospace; 583 text-align: center; 584 } 585 586 .inline-link { 587 color: oklch(60% 0.26 258); 588 font-size: 11px; 589 font-weight: 600; 590 cursor: pointer; 591 } 592 593 .btn-row-2 { 594 display: flex; 595 gap: 10px; 596 } 597 598 .btn-half { 599 flex: 1; 600 padding: 13px 10px; 601 background: transparent; 602 color: oklch(60% 0.26 258); 603 border: 1.5px solid oklch(60% 0.26 258); 604 border-radius: 12px; 605 font-family: 'Inter', sans-serif; 606 font-size: 13px; 607 font-weight: 600; 608 cursor: pointer; 609 text-align: center; 610 display: flex; 611 align-items: center; 612 justify-content: center; 613 gap: 6px; 614 } 615 616 /* ── SCREEN 5: REQUEST ── */ 617 618 .request-section-label { 619 color: #52525b; 620 font-size: 11px; 621 font-weight: 600; 622 letter-spacing: 0.08em; 623 text-transform: uppercase; 624 margin-bottom: 10px; 625 } 626 627 .requesting-caption { 628 color: #a1a1aa; 629 font-size: 12px; 630 text-align: center; 631 margin-bottom: 10px; 632 } 633 634 /* ── SCREEN 6: SUCCESS ── */ 635 636 .success-center { 637 display: flex; 638 flex-direction: column; 639 align-items: center; 640 flex: 1; 641 justify-content: center; 642 } 643 644 .success-circle { 645 width: 120px; 646 height: 120px; 647 background: oklch(65% 0.18 145); 648 border-radius: 50%; 649 display: flex; 650 align-items: center; 651 justify-content: center; 652 margin-bottom: 28px; 653 box-shadow: 0 0 60px oklch(65% 0.18 145 / 0.35), 0 4px 20px oklch(65% 0.18 145 / 0.25); 654 } 655 656 .success-title { 657 color: #ffffff; 658 font-size: 28px; 659 font-weight: 700; 660 margin-bottom: 10px; 661 letter-spacing: -0.01em; 662 } 663 664 .success-subtitle { 665 color: #a1a1aa; 666 font-size: 13px; 667 text-align: center; 668 line-height: 1.6; 669 padding: 0 16px; 670 margin-bottom: 20px; 671 } 672 673 .tx-row { 674 display: flex; 675 align-items: center; 676 gap: 8px; 677 background: #1C1C2E; 678 border: 1px solid rgba(255,255,255,0.08); 679 border-radius: 10px; 680 padding: 10px 14px; 681 width: 100%; 682 margin-bottom: 32px; 683 } 684 685 .tx-label { 686 color: #52525b; 687 font-size: 11px; 688 font-weight: 600; 689 } 690 691 .tx-hash { 692 color: #71717a; 693 font-size: 11px; 694 font-family: 'JetBrains Mono', monospace; 695 flex: 1; 696 overflow: hidden; 697 text-overflow: ellipsis; 698 white-space: nowrap; 699 } 700 701 .tx-view-link { 702 color: oklch(60% 0.26 258); 703 font-size: 11px; 704 font-weight: 600; 705 cursor: pointer; 706 white-space: nowrap; 707 } 708 709 .success-btn-row { 710 display: flex; 711 gap: 10px; 712 width: 100%; 713 } 714 715 .success-btn-outlined { 716 flex: 1; 717 padding: 14px; 718 background: transparent; 719 color: #a1a1aa; 720 border: 1.5px solid rgba(255,255,255,0.12); 721 border-radius: 12px; 722 font-family: 'Inter', sans-serif; 723 font-size: 14px; 724 font-weight: 600; 725 cursor: pointer; 726 text-align: center; 727 } 728 729 .success-btn-primary { 730 flex: 1; 731 padding: 14px; 732 background: oklch(60% 0.26 258); 733 color: #ffffff; 734 border: none; 735 border-radius: 12px; 736 font-family: 'Inter', sans-serif; 737 font-size: 14px; 738 font-weight: 600; 739 cursor: pointer; 740 text-align: center; 741 } 742 743 /* ── HAMBURGER NAV ── */ 744 #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; } 745 #nav-toggle span { display:block; width:18px; height:2px; background:#a1a1aa; border-radius:2px; transition:all 0.2s; } 746 #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; } 747 #nav-drawer.open { left:0; } 748 .nav-section { padding:8px 20px 4px; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#52525b; } 749 .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; } 750 .nav-link:hover { background:rgba(99,102,241,0.12); color:#fff; } 751 .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; } 752 #nav-overlay { display:none; position:fixed; inset:0; z-index:998; } 753 #nav-overlay.open { display:block; } 754 755 </style> 756 </head> 757 <body> 758 759 <!-- Hamburger Nav --> 760 <div id="nav-toggle" onclick="toggleNav()" aria-label="Menu"> 761 <span></span><span></span><span></span> 762 </div> 763 <div id="nav-overlay" onclick="toggleNav()"></div> 764 <nav id="nav-drawer"> 765 <div class="nav-section">Wallet</div> 766 <a class="nav-link" href="home.html">Home / Portfolio</a> 767 <a class="nav-link" href="onboarding.html">Onboarding Flow</a> 768 <a class="nav-link active" href="send-receive.html">Send / Receive</a> 769 <a class="nav-link" href="swap.html">Swap</a> 770 <div class="nav-section" style="margin-top:12px">Coming Soon</div> 771 <a class="nav-link" style="opacity:0.4;pointer-events:none">Staking</a> 772 <a class="nav-link" style="opacity:0.4;pointer-events:none">Governance</a> 773 <a class="nav-link" style="opacity:0.4;pointer-events:none">Settings</a> 774 <div class="nav-section" style="margin-top:12px">Other Apps</div> 775 <a class="nav-link" style="opacity:0.4;pointer-events:none">Governor</a> 776 <a class="nav-link" style="opacity:0.4;pointer-events:none">Messenger</a> 777 <a class="nav-link" style="opacity:0.4;pointer-events:none">Scanner</a> 778 <a class="nav-link" style="opacity:0.4;pointer-events:none">Docs</a> 779 </nav> 780 <script> 781 function toggleNav() { 782 document.getElementById("nav-drawer").classList.toggle("open"); 783 document.getElementById("nav-overlay").classList.toggle("open"); 784 } 785 var cur = location.pathname.split("/").pop(); 786 document.querySelectorAll(".nav-link").forEach(function(a) { 787 if (a.getAttribute("href") === cur) a.classList.add("active"); 788 }); 789 </script> 790 791 <p class="page-title">ACDC Wallet — Send & Receive Flow — Mobile Mockup — 390×844 (iPhone 14)</p> 792 793 <div class="frames-row"> 794 795 <!-- ═══════════════════════════════════════ 796 SCREEN 1 — SEND · AX 797 ═══════════════════════════════════════ --> 798 <div class="frame-wrapper"> 799 <span class="frame-label">1 — Send · AX</span> 800 <div class="phone-frame"> 801 802 <div class="status-bar"> 803 <span class="status-time">9:41</span> 804 <div class="status-icons"> 805 <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="4" width="3" height="8" rx="1" opacity="0.4"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" opacity="0.6"/><rect x="9" y="0.5" width="3" height="11.5" rx="1" opacity="0.8"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg> 806 <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.5C9.93 2.5 11.68 3.27 12.96 4.54L14.37 3.13C12.72 1.49 10.47 0.5 8 0.5C5.53 0.5 3.28 1.49 1.63 3.13L3.04 4.54C4.32 3.27 6.07 2.5 8 2.5Z" opacity="0.5"/><path d="M8 5.5C9.1 5.5 10.1 5.94 10.83 6.66L12.24 5.25C11.14 4.16 9.65 3.5 8 3.5C6.35 3.5 4.86 4.16 3.76 5.25L5.17 6.66C5.9 5.94 6.9 5.5 8 5.5Z" opacity="0.75"/><circle cx="8" cy="10" r="1.5"/></svg> 807 <svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" stroke-opacity="0.35"/><rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor"/><path d="M23 4.5V7.5C23.8 7.17 24.5 6.4 24.5 6C24.5 5.6 23.8 4.83 23 4.5Z" fill="currentColor" opacity="0.4"/></svg> 808 </div> 809 </div> 810 811 <div class="screen"> 812 <!-- Header --> 813 <div class="screen-header"> 814 <span class="screen-header-title">Send</span> 815 <span class="network-badge alpha">Alpha · AX</span> 816 </div> 817 818 <!-- Available balance --> 819 <div class="avail-row"> 820 <span class="avail-label">Available</span> 821 <span class="avail-value">31,998.6300 AX</span> 822 </div> 823 824 <!-- Recipient --> 825 <div class="input-group"> 826 <label class="input-label">To</label> 827 <div class="input-wrap"> 828 <input class="input-field mono valid" type="text" value="ax1qxy2kgdygjrsqtzq2n0yrf29..." style="padding-right: 104px;" readonly /> 829 <span class="valid-icon"> 830 <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6.5" fill="oklch(65% 0.18 145)" stroke="oklch(65% 0.18 145)"/><path d="M4 7l2 2 4-4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> 831 </span> 832 <span class="input-action"> 833 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg> 834 Scan QR 835 </span> 836 </div> 837 </div> 838 839 <!-- Amount --> 840 <div class="input-group"> 841 <label class="input-label">Amount</label> 842 <div class="amount-wrap"> 843 <input class="amount-input" type="text" value="1,250" readonly /> 844 <span class="amount-badge">AX</span> 845 </div> 846 <div class="max-row"> 847 <span class="max-link">MAX</span> 848 </div> 849 </div> 850 851 <!-- Memo --> 852 <div class="input-group"> 853 <label class="input-label">Memo (optional)</label> 854 <input class="input-field" type="text" placeholder="Add a note..." readonly /> 855 </div> 856 857 <!-- Fee --> 858 <div class="fee-row"> 859 <span class="fee-label">Network Fee</span> 860 <span class="fee-value">~0.0012 AX</span> 861 </div> 862 863 <!-- Total --> 864 <div class="total-card"> 865 <span class="total-label">Total</span> 866 <span class="total-value">1,250.0012 AX</span> 867 </div> 868 869 <button class="btn-primary">Review Transaction</button> 870 </div> 871 </div> 872 </div> 873 874 <!-- ═══════════════════════════════════════ 875 SCREEN 2 — SEND · DX 876 ═══════════════════════════════════════ --> 877 <div class="frame-wrapper"> 878 <span class="frame-label">2 — Send · DX</span> 879 <div class="phone-frame"> 880 881 <div class="status-bar"> 882 <span class="status-time">9:41</span> 883 <div class="status-icons"> 884 <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="4" width="3" height="8" rx="1" opacity="0.4"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" opacity="0.6"/><rect x="9" y="0.5" width="3" height="11.5" rx="1" opacity="0.8"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg> 885 <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.5C9.93 2.5 11.68 3.27 12.96 4.54L14.37 3.13C12.72 1.49 10.47 0.5 8 0.5C5.53 0.5 3.28 1.49 1.63 3.13L3.04 4.54C4.32 3.27 6.07 2.5 8 2.5Z" opacity="0.5"/><path d="M8 5.5C9.1 5.5 10.1 5.94 10.83 6.66L12.24 5.25C11.14 4.16 9.65 3.5 8 3.5C6.35 3.5 4.86 4.16 3.76 5.25L5.17 6.66C5.9 5.94 6.9 5.5 8 5.5Z" opacity="0.75"/><circle cx="8" cy="10" r="1.5"/></svg> 886 <svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" stroke-opacity="0.35"/><rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor"/><path d="M23 4.5V7.5C23.8 7.17 24.5 6.4 24.5 6C24.5 5.6 23.8 4.83 23 4.5Z" fill="currentColor" opacity="0.4"/></svg> 887 </div> 888 </div> 889 890 <div class="screen"> 891 <!-- Header --> 892 <div class="screen-header"> 893 <span class="screen-header-title">Send</span> 894 <span class="network-badge delta">Delta · DX</span> 895 </div> 896 897 <!-- Available balance --> 898 <div class="avail-row"> 899 <span class="avail-label">Available</span> 900 <span class="avail-value">42,800 DX</span> 901 </div> 902 903 <!-- Recipient --> 904 <div class="input-group"> 905 <label class="input-label">To</label> 906 <div class="input-wrap"> 907 <input class="input-field mono" type="text" placeholder="dx1... or acdc1..." style="padding-right: 72px; opacity:0.4; pointer-events:none;" readonly /> 908 <span class="input-action"> 909 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg> 910 Scan QR 911 </span> 912 </div> 913 </div> 914 915 <!-- Amount --> 916 <div class="input-group"> 917 <label class="input-label">Amount</label> 918 <div class="amount-wrap"> 919 <input class="amount-input delta-focus" type="text" value="500" style="opacity:0.4; pointer-events:none;" readonly /> 920 <span class="amount-badge">DX</span> 921 </div> 922 <div class="max-row"> 923 <span class="max-link" style="color: oklch(80% 0.20 79)">MAX</span> 924 </div> 925 </div> 926 927 <!-- Memo --> 928 <div class="input-group"> 929 <label class="input-label">Memo (optional)</label> 930 <input class="input-field" type="text" placeholder="Add a note..." readonly /> 931 </div> 932 933 <!-- DX disabled banner --> 934 <div style="margin:12px 0 8px; border:1px solid #78350f; background:rgba(120,53,15,0.12); border-radius:10px; padding:12px 14px; display:flex; gap:10px; align-items:flex-start;"> 935 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2.5" stroke-linecap="round" style="flex-shrink:0;margin-top:1px"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> 936 <p style="color:#fbbf24;font-size:12px;line-height:1.5;margin:0;">DX cannot be sent directly. Earn DX through staking or trade on the DEX.</p> 937 </div> 938 939 <!-- Fee --> 940 <div class="fee-row"> 941 <span class="fee-label">Network Fee</span> 942 <span class="fee-value">~1 DX</span> 943 </div> 944 945 <!-- Total --> 946 <div class="total-card delta-border"> 947 <span class="total-label">Total</span> 948 <span class="total-value delta">500 DX</span> 949 </div> 950 951 <button class="btn-primary" style="background:#27272a;color:#52525b;cursor:not-allowed;" disabled>Review Transaction</button> 952 </div> 953 </div> 954 </div> 955 956 <!-- ═══════════════════════════════════════ 957 SCREEN 3 — SEND · CONFIRM MODAL 958 ═══════════════════════════════════════ --> 959 <div class="frame-wrapper"> 960 <span class="frame-label">3 — Send · Confirm</span> 961 <div class="phone-frame"> 962 963 <div class="status-bar"> 964 <span class="status-time">9:41</span> 965 <div class="status-icons"> 966 <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="4" width="3" height="8" rx="1" opacity="0.4"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" opacity="0.6"/><rect x="9" y="0.5" width="3" height="11.5" rx="1" opacity="0.8"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg> 967 <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.5C9.93 2.5 11.68 3.27 12.96 4.54L14.37 3.13C12.72 1.49 10.47 0.5 8 0.5C5.53 0.5 3.28 1.49 1.63 3.13L3.04 4.54C4.32 3.27 6.07 2.5 8 2.5Z" opacity="0.5"/><path d="M8 5.5C9.1 5.5 10.1 5.94 10.83 6.66L12.24 5.25C11.14 4.16 9.65 3.5 8 3.5C6.35 3.5 4.86 4.16 3.76 5.25L5.17 6.66C5.9 5.94 6.9 5.5 8 5.5Z" opacity="0.75"/><circle cx="8" cy="10" r="1.5"/></svg> 968 <svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" stroke-opacity="0.35"/><rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor"/><path d="M23 4.5V7.5C23.8 7.17 24.5 6.4 24.5 6C24.5 5.6 23.8 4.83 23 4.5Z" fill="currentColor" opacity="0.4"/></svg> 969 </div> 970 </div> 971 972 <!-- Dimmed background (send screen) --> 973 <div class="screen" style="opacity:0.35; filter: blur(1px); padding-top: 56px;"> 974 <div class="screen-header"> 975 <span class="screen-header-title">Send</span> 976 <span class="network-badge alpha">Alpha · AX</span> 977 </div> 978 <div class="avail-row" style="margin-top:8px"> 979 <span class="avail-label">Available</span> 980 <span class="avail-value">31,998.6300 AX</span> 981 </div> 982 <div class="input-group"> 983 <label class="input-label">To</label> 984 <input class="input-field mono" type="text" value="ax1qxy2kgdygjrsqtzq2n0yrf29..." readonly /> 985 </div> 986 <div class="input-group"> 987 <label class="input-label">Amount</label> 988 <div class="amount-wrap"> 989 <input class="amount-input" type="text" value="1,250" readonly /> 990 <span class="amount-badge">AX</span> 991 </div> 992 </div> 993 </div> 994 995 <!-- Modal backdrop --> 996 <div class="modal-backdrop"></div> 997 998 <!-- Bottom sheet --> 999 <div class="bottom-sheet"> 1000 <div class="sheet-handle"></div> 1001 <div class="sheet-title">Confirm Transaction</div> 1002 1003 <div class="confirm-row"> 1004 <span class="confirm-key">To</span> 1005 <span class="confirm-val"> 1006 ax1qxy...f29x 1007 <span class="copy-icon"> 1008 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> 1009 </span> 1010 </span> 1011 </div> 1012 1013 <div class="confirm-row"> 1014 <span class="confirm-key">Amount</span> 1015 <span class="confirm-val">1,250.0000 AX</span> 1016 </div> 1017 1018 <div class="confirm-row"> 1019 <span class="confirm-key">Fee</span> 1020 <span class="confirm-val">0.0012 AX</span> 1021 </div> 1022 1023 <div class="confirm-divider"></div> 1024 1025 <div class="confirm-total-row"> 1026 <span class="confirm-total-key">Total</span> 1027 <span class="confirm-total-val">1,250.0012 AX</span> 1028 </div> 1029 1030 <div class="confirm-row" style="border-bottom: none; padding-top: 4px;"> 1031 <span class="confirm-key">Memo</span> 1032 <span class="confirm-val" style="font-family: 'Inter', sans-serif; color: #a1a1aa;">Coffee payment</span> 1033 </div> 1034 1035 <p class="warning-text"> 1036 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="display:inline;vertical-align:-2px;margin-right:4px"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> 1037 This action cannot be undone 1038 </p> 1039 1040 <div class="confirm-btn-row"> 1041 <button class="btn-ghost">Cancel</button> 1042 <button class="btn-confirm">Confirm & Send</button> 1043 </div> 1044 </div> 1045 1046 </div> 1047 </div> 1048 1049 <!-- ═══════════════════════════════════════ 1050 SCREEN 4 — RECEIVE · AX 1051 ═══════════════════════════════════════ --> 1052 <div class="frame-wrapper"> 1053 <span class="frame-label">4 — Receive · AX</span> 1054 <div class="phone-frame"> 1055 1056 <div class="status-bar"> 1057 <span class="status-time">9:41</span> 1058 <div class="status-icons"> 1059 <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="4" width="3" height="8" rx="1" opacity="0.4"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" opacity="0.6"/><rect x="9" y="0.5" width="3" height="11.5" rx="1" opacity="0.8"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg> 1060 <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.5C9.93 2.5 11.68 3.27 12.96 4.54L14.37 3.13C12.72 1.49 10.47 0.5 8 0.5C5.53 0.5 3.28 1.49 1.63 3.13L3.04 4.54C4.32 3.27 6.07 2.5 8 2.5Z" opacity="0.5"/><path d="M8 5.5C9.1 5.5 10.1 5.94 10.83 6.66L12.24 5.25C11.14 4.16 9.65 3.5 8 3.5C6.35 3.5 4.86 4.16 3.76 5.25L5.17 6.66C5.9 5.94 6.9 5.5 8 5.5Z" opacity="0.75"/><circle cx="8" cy="10" r="1.5"/></svg> 1061 <svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" stroke-opacity="0.35"/><rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor"/><path d="M23 4.5V7.5C23.8 7.17 24.5 6.4 24.5 6C24.5 5.6 23.8 4.83 23 4.5Z" fill="currentColor" opacity="0.4"/></svg> 1062 </div> 1063 </div> 1064 1065 <div class="screen"> 1066 <div class="screen-header"> 1067 <span class="screen-header-title">Receive</span> 1068 <span class="network-badge alpha">Alpha · AX</span> 1069 </div> 1070 1071 <!-- QR Code --> 1072 <div class="qr-container" style="margin-top: 12px;"> 1073 <div class="qr-box"> 1074 <svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"> 1075 <!-- White background already from container --> 1076 <!-- Top-left finder --> 1077 <rect x="10" y="10" width="70" height="70" rx="4" fill="#1a1a2e"/> 1078 <rect x="20" y="20" width="50" height="50" rx="2" fill="white"/> 1079 <rect x="28" y="28" width="34" height="34" rx="1" fill="#1a1a2e"/> 1080 <!-- Top-right finder --> 1081 <rect x="160" y="10" width="70" height="70" rx="4" fill="#1a1a2e"/> 1082 <rect x="170" y="20" width="50" height="50" rx="2" fill="white"/> 1083 <rect x="178" y="28" width="34" height="34" rx="1" fill="#1a1a2e"/> 1084 <!-- Bottom-left finder --> 1085 <rect x="10" y="160" width="70" height="70" rx="4" fill="#1a1a2e"/> 1086 <rect x="20" y="170" width="50" height="50" rx="2" fill="white"/> 1087 <rect x="28" y="178" width="34" height="34" rx="1" fill="#1a1a2e"/> 1088 <!-- Data modules (simulated pattern) --> 1089 <rect x="92" y="10" width="8" height="8" fill="#1a1a2e"/><rect x="106" y="10" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="10" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="10" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="10" width="8" height="8" fill="#1a1a2e"/> 1090 <rect x="92" y="24" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="24" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="24" width="8" height="8" fill="#1a1a2e"/> 1091 <rect x="106" y="38" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="38" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="38" width="8" height="8" fill="#1a1a2e"/> 1092 <rect x="92" y="52" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="52" width="8" height="8" fill="#1a1a2e"/> 1093 <rect x="106" y="66" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="66" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="66" width="8" height="8" fill="#1a1a2e"/> 1094 <rect x="10" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="24" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="52" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="66" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="92" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="190" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="218" y="92" width="8" height="8" fill="#1a1a2e"/> 1095 <rect x="38" y="106" width="8" height="8" fill="#1a1a2e"/><rect x="66" y="106" width="8" height="8" fill="#1a1a2e"/><rect x="106" y="106" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="106" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="106" width="8" height="8" fill="#1a1a2e"/><rect x="204" y="106" width="8" height="8" fill="#1a1a2e"/> 1096 <rect x="10" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="52" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="92" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="176" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="218" y="120" width="8" height="8" fill="#1a1a2e"/> 1097 <rect x="24" y="134" width="8" height="8" fill="#1a1a2e"/><rect x="66" y="134" width="8" height="8" fill="#1a1a2e"/><rect x="106" y="134" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="134" width="8" height="8" fill="#1a1a2e"/><rect x="190" y="134" width="8" height="8" fill="#1a1a2e"/><rect x="204" y="134" width="8" height="8" fill="#1a1a2e"/> 1098 <rect x="10" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="38" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="92" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="176" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="218" y="148" width="8" height="8" fill="#1a1a2e"/> 1099 <rect x="92" y="162" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="162" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="162" width="8" height="8" fill="#1a1a2e"/><rect x="190" y="162" width="8" height="8" fill="#1a1a2e"/> 1100 <rect x="106" y="176" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="176" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="176" width="8" height="8" fill="#1a1a2e"/><rect x="176" y="176" width="8" height="8" fill="#1a1a2e"/><rect x="204" y="176" width="8" height="8" fill="#1a1a2e"/><rect x="218" y="176" width="8" height="8" fill="#1a1a2e"/> 1101 <rect x="92" y="190" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="190" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="190" width="8" height="8" fill="#1a1a2e"/><rect x="204" y="190" width="8" height="8" fill="#1a1a2e"/> 1102 <rect x="106" y="204" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="204" width="8" height="8" fill="#1a1a2e"/><rect x="176" y="204" width="8" height="8" fill="#1a1a2e"/><rect x="218" y="204" width="8" height="8" fill="#1a1a2e"/> 1103 <rect x="92" y="218" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="218" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="218" width="8" height="8" fill="#1a1a2e"/><rect x="190" y="218" width="8" height="8" fill="#1a1a2e"/> 1104 </svg> 1105 </div> 1106 </div> 1107 1108 <!-- Address --> 1109 <p class="address-display">ax1qxy2kgdygjrsqtzq2n0yrf29x<br>4mk9srgbj7pky5ry8qd</p> 1110 1111 <!-- Copy button --> 1112 <button class="btn-outlined" style="margin-bottom: 10px;"> 1113 <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> 1114 Copy Address 1115 </button> 1116 1117 <!-- Share button --> 1118 <button class="btn-outlined" style="margin-bottom: 4px;"> 1119 <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg> 1120 Share 1121 </button> 1122 1123 <div class="divider-or">— or show payment code —</div> 1124 1125 <p class="payment-code"> 1126 acdc1f3q8vk29...mxn7 <span class="inline-link">Copy</span> 1127 </p> 1128 1129 </div> 1130 </div> 1131 </div> 1132 1133 <!-- ═══════════════════════════════════════ 1134 SCREEN 5 — RECEIVE · PAYMENT REQUEST 1135 ═══════════════════════════════════════ --> 1136 <div class="frame-wrapper"> 1137 <span class="frame-label">5 — Receive · Request</span> 1138 <div class="phone-frame"> 1139 1140 <div class="status-bar"> 1141 <span class="status-time">9:41</span> 1142 <div class="status-icons"> 1143 <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="4" width="3" height="8" rx="1" opacity="0.4"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" opacity="0.6"/><rect x="9" y="0.5" width="3" height="11.5" rx="1" opacity="0.8"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg> 1144 <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.5C9.93 2.5 11.68 3.27 12.96 4.54L14.37 3.13C12.72 1.49 10.47 0.5 8 0.5C5.53 0.5 3.28 1.49 1.63 3.13L3.04 4.54C4.32 3.27 6.07 2.5 8 2.5Z" opacity="0.5"/><path d="M8 5.5C9.1 5.5 10.1 5.94 10.83 6.66L12.24 5.25C11.14 4.16 9.65 3.5 8 3.5C6.35 3.5 4.86 4.16 3.76 5.25L5.17 6.66C5.9 5.94 6.9 5.5 8 5.5Z" opacity="0.75"/><circle cx="8" cy="10" r="1.5"/></svg> 1145 <svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" stroke-opacity="0.35"/><rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor"/><path d="M23 4.5V7.5C23.8 7.17 24.5 6.4 24.5 6C24.5 5.6 23.8 4.83 23 4.5Z" fill="currentColor" opacity="0.4"/></svg> 1146 </div> 1147 </div> 1148 1149 <div class="screen"> 1150 <div class="screen-header"> 1151 <span class="screen-header-title">Receive</span> 1152 <span class="network-badge alpha">Alpha · AX</span> 1153 </div> 1154 1155 <p class="request-section-label" style="margin-top: 8px;">Request specific amount</p> 1156 1157 <!-- Amount input --> 1158 <div class="input-group"> 1159 <label class="input-label">Amount</label> 1160 <div class="amount-wrap"> 1161 <input class="amount-input" type="text" value="500" readonly /> 1162 <span class="amount-badge">AX</span> 1163 </div> 1164 </div> 1165 1166 <!-- Memo --> 1167 <div class="input-group"> 1168 <label class="input-label">Memo (optional)</label> 1169 <input class="input-field" type="text" placeholder="What is this for?" readonly /> 1170 </div> 1171 1172 <!-- Generate QR button --> 1173 <button class="btn-primary" style="margin-top: 4px; margin-bottom: 18px; border-radius: 12px; font-size: 14px; padding: 13px 20px;">Generate QR</button> 1174 1175 <!-- Generated QR (smaller) --> 1176 <div style="display:flex; flex-direction:column; align-items:center;"> 1177 <div class="qr-box" style="padding: 10px; margin-bottom: 10px;"> 1178 <svg width="200" height="200" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"> 1179 <rect x="10" y="10" width="70" height="70" rx="4" fill="#1a1a2e"/> 1180 <rect x="20" y="20" width="50" height="50" rx="2" fill="white"/> 1181 <rect x="28" y="28" width="34" height="34" rx="1" fill="#1a1a2e"/> 1182 <rect x="160" y="10" width="70" height="70" rx="4" fill="#1a1a2e"/> 1183 <rect x="170" y="20" width="50" height="50" rx="2" fill="white"/> 1184 <rect x="178" y="28" width="34" height="34" rx="1" fill="#1a1a2e"/> 1185 <rect x="10" y="160" width="70" height="70" rx="4" fill="#1a1a2e"/> 1186 <rect x="20" y="170" width="50" height="50" rx="2" fill="white"/> 1187 <rect x="28" y="178" width="34" height="34" rx="1" fill="#1a1a2e"/> 1188 <rect x="92" y="10" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="10" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="10" width="8" height="8" fill="#1a1a2e"/> 1189 <rect x="92" y="24" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="24" width="8" height="8" fill="#1a1a2e"/> 1190 <rect x="106" y="38" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="38" width="8" height="8" fill="#1a1a2e"/> 1191 <rect x="92" y="52" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="52" width="8" height="8" fill="#1a1a2e"/> 1192 <rect x="10" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="52" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="92" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="176" y="92" width="8" height="8" fill="#1a1a2e"/><rect x="218" y="92" width="8" height="8" fill="#1a1a2e"/> 1193 <rect x="24" y="106" width="8" height="8" fill="#1a1a2e"/><rect x="92" y="106" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="106" width="8" height="8" fill="#1a1a2e"/><rect x="204" y="106" width="8" height="8" fill="#1a1a2e"/> 1194 <rect x="10" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="66" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="120" width="8" height="8" fill="#1a1a2e"/><rect x="218" y="120" width="8" height="8" fill="#1a1a2e"/> 1195 <rect x="38" y="134" width="8" height="8" fill="#1a1a2e"/><rect x="92" y="134" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="134" width="8" height="8" fill="#1a1a2e"/><rect x="190" y="134" width="8" height="8" fill="#1a1a2e"/> 1196 <rect x="10" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="52" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="120" y="148" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="148" width="8" height="8" fill="#1a1a2e"/> 1197 <rect x="92" y="162" width="8" height="8" fill="#1a1a2e"/><rect x="134" y="162" width="8" height="8" fill="#1a1a2e"/><rect x="190" y="162" width="8" height="8" fill="#1a1a2e"/> 1198 <rect x="106" y="176" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="176" width="8" height="8" fill="#1a1a2e"/><rect x="204" y="176" width="8" height="8" fill="#1a1a2e"/> 1199 <rect x="92" y="190" width="8" height="8" fill="#1a1a2e"/><rect x="176" y="190" width="8" height="8" fill="#1a1a2e"/> 1200 <rect x="120" y="204" width="8" height="8" fill="#1a1a2e"/><rect x="162" y="204" width="8" height="8" fill="#1a1a2e"/> 1201 <rect x="92" y="218" width="8" height="8" fill="#1a1a2e"/><rect x="148" y="218" width="8" height="8" fill="#1a1a2e"/> 1202 </svg> 1203 </div> 1204 1205 <p class="requesting-caption">Requesting <strong style="color:#e4e4e7">500 AX</strong></p> 1206 1207 <div class="btn-row-2" style="width:100%; margin-top: 8px;"> 1208 <button class="btn-half"> 1209 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg> 1210 Copy Link 1211 </button> 1212 <button class="btn-half"> 1213 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg> 1214 Share 1215 </button> 1216 </div> 1217 </div> 1218 1219 </div> 1220 </div> 1221 </div> 1222 1223 <!-- ═══════════════════════════════════════ 1224 SCREEN 6 — SEND · SUCCESS 1225 ═══════════════════════════════════════ --> 1226 <div class="frame-wrapper"> 1227 <span class="frame-label">6 — Send · Success</span> 1228 <div class="phone-frame"> 1229 1230 <div class="status-bar"> 1231 <span class="status-time">9:41</span> 1232 <div class="status-icons"> 1233 <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="4" width="3" height="8" rx="1" opacity="0.4"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" opacity="0.6"/><rect x="9" y="0.5" width="3" height="11.5" rx="1" opacity="0.8"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg> 1234 <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.5C9.93 2.5 11.68 3.27 12.96 4.54L14.37 3.13C12.72 1.49 10.47 0.5 8 0.5C5.53 0.5 3.28 1.49 1.63 3.13L3.04 4.54C4.32 3.27 6.07 2.5 8 2.5Z" opacity="0.5"/><path d="M8 5.5C9.1 5.5 10.1 5.94 10.83 6.66L12.24 5.25C11.14 4.16 9.65 3.5 8 3.5C6.35 3.5 4.86 4.16 3.76 5.25L5.17 6.66C5.9 5.94 6.9 5.5 8 5.5Z" opacity="0.75"/><circle cx="8" cy="10" r="1.5"/></svg> 1235 <svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" stroke-opacity="0.35"/><rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor"/><path d="M23 4.5V7.5C23.8 7.17 24.5 6.4 24.5 6C24.5 5.6 23.8 4.83 23 4.5Z" fill="currentColor" opacity="0.4"/></svg> 1236 </div> 1237 </div> 1238 1239 <div class="screen"> 1240 <div class="success-center"> 1241 1242 <!-- Success circle --> 1243 <div class="success-circle"> 1244 <svg width="56" height="56" viewBox="0 0 56 56" fill="none"> 1245 <path d="M14 28l10 10 18-18" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> 1246 </svg> 1247 </div> 1248 1249 <h2 class="success-title">Sent!</h2> 1250 1251 <p class="success-subtitle"> 1252 1,250.0000 AX sent to<br> 1253 <span style="font-family:'JetBrains Mono',monospace; font-size:12px;">ax1qxy...f29x</span> 1254 </p> 1255 1256 <!-- Tx hash --> 1257 <div class="tx-row"> 1258 <span class="tx-label">Tx</span> 1259 <span class="tx-hash">ax1txhashxq9fvm3...abc123</span> 1260 <span class="tx-view-link">View</span> 1261 </div> 1262 1263 <div class="success-btn-row"> 1264 <button class="success-btn-outlined">Send Again</button> 1265 <button class="success-btn-primary">Done</button> 1266 </div> 1267 1268 </div> 1269 </div> 1270 </div> 1271 </div> 1272 1273 <!-- ═══════════════════════════════════════ 1274 SCREEN 7 — RECEIVE · DX (DISABLED) 1275 ═══════════════════════════════════════ --> 1276 <div class="frame-wrapper"> 1277 <span class="frame-label">7 — Receive · DX (disabled)</span> 1278 <div class="phone-frame"> 1279 1280 <div class="status-bar"> 1281 <span class="status-time">9:41</span> 1282 <div class="status-icons"> 1283 <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="4" width="3" height="8" rx="1" opacity="0.4"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" opacity="0.6"/><rect x="9" y="0.5" width="3" height="11.5" rx="1" opacity="0.8"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg> 1284 <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.5C9.93 2.5 11.68 3.27 12.96 4.54L14.37 3.13C12.72 1.49 10.47 0.5 8 0.5C5.53 0.5 3.28 1.49 1.63 3.13L3.04 4.54C4.32 3.27 6.07 2.5 8 2.5Z" opacity="0.5"/><path d="M8 5.5C9.1 5.5 10.1 5.94 10.83 6.66L12.24 5.25C11.14 4.16 9.65 3.5 8 3.5C6.35 3.5 4.86 4.16 3.76 5.25L5.17 6.66C5.9 5.94 6.9 5.5 8 5.5Z" opacity="0.75"/><circle cx="8" cy="10" r="1.5"/></svg> 1285 <svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" stroke-opacity="0.35"/><rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor"/><path d="M23 4.5V7.5C23.8 7.17 24.5 6.4 24.5 6C24.5 5.6 23.8 4.83 23 4.5Z" fill="currentColor" opacity="0.4"/></svg> 1286 </div> 1287 </div> 1288 1289 <div class="screen"> 1290 <!-- Header --> 1291 <div class="screen-header"> 1292 <span class="screen-header-title">Receive</span> 1293 <span class="network-badge delta">Delta · DX</span> 1294 </div> 1295 1296 <!-- DX disabled info card (replaces QR area) --> 1297 <div style="background:#1C1C2E; border:1px solid #78350f; border-radius:12px; padding:24px 20px; text-align:center; margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:0;"> 1298 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:12px;"> 1299 <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> 1300 <path d="M7 11V7a5 5 0 0 1 10 0v4"/> 1301 </svg> 1302 <h3 style="color:#ffffff; font-size:15px; font-weight:600; margin:0 0 8px; line-height:1.3;">DX cannot be received directly</h3> 1303 <p style="color:#a1a1aa; font-size:12px; line-height:1.5; margin:0 0 20px;"> 1304 DX is earned through staking rewards. To acquire DX, stake AX or trade on the DEX. 1305 </p> 1306 <div style="display:flex; gap:10px; width:100%;"> 1307 <button style="flex:1; background:transparent; border:1px solid #3b82f6; color:#3b82f6; border-radius:8px; padding:10px 14px; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit;">Stake AX →</button> 1308 <button style="flex:1; background:transparent; border:1px solid #f59e0b; color:#f59e0b; border-radius:8px; padding:10px 14px; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit;">Go to DEX →</button> 1309 </div> 1310 </div> 1311 </div> 1312 </div> 1313 </div> 1314 1315 </div><!-- /.frames-row --> 1316 1317 </body> 1318 </html>