onboarding.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 — Onboarding 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&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: 1400px; 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: 60px 24px 36px; 97 position: relative; 98 overflow: hidden; 99 } 100 101 /* ── SHARED ELEMENTS ── */ 102 103 .back-link { 104 color: oklch(60% 0.26 258); 105 font-size: 15px; 106 font-weight: 500; 107 margin-bottom: 28px; 108 display: flex; 109 align-items: center; 110 gap: 4px; 111 cursor: pointer; 112 width: fit-content; 113 } 114 115 .back-link svg { 116 width: 16px; 117 height: 16px; 118 } 119 120 .screen-title { 121 color: #ffffff; 122 font-size: 24px; 123 font-weight: 700; 124 margin-bottom: 10px; 125 line-height: 1.25; 126 } 127 128 .screen-subtitle { 129 color: #a1a1aa; 130 font-size: 14px; 131 line-height: 1.6; 132 margin-bottom: 24px; 133 } 134 135 .btn-primary { 136 width: 100%; 137 padding: 16px 24px; 138 background: oklch(60% 0.26 258); 139 color: #ffffff; 140 border: none; 141 border-radius: 12px; 142 font-family: 'Inter', sans-serif; 143 font-size: 16px; 144 font-weight: 600; 145 cursor: pointer; 146 text-align: center; 147 letter-spacing: 0.01em; 148 } 149 150 .btn-secondary { 151 width: 100%; 152 padding: 15px 24px; 153 background: transparent; 154 color: oklch(60% 0.26 258); 155 border: 1.5px solid oklch(60% 0.26 258); 156 border-radius: 12px; 157 font-family: 'Inter', sans-serif; 158 font-size: 16px; 159 font-weight: 600; 160 cursor: pointer; 161 text-align: center; 162 letter-spacing: 0.01em; 163 } 164 165 .btn-neutral { 166 width: 100%; 167 padding: 15px 24px; 168 background: transparent; 169 color: #71717a; 170 border: 1.5px solid #3f3f46; 171 border-radius: 12px; 172 font-family: 'Inter', sans-serif; 173 font-size: 16px; 174 font-weight: 600; 175 cursor: pointer; 176 text-align: center; 177 } 178 179 /* ── SCREEN 1: WELCOME ── */ 180 181 .s1-logo-wrap { 182 display: flex; 183 flex-direction: column; 184 align-items: center; 185 margin-top: 32px; 186 margin-bottom: 40px; 187 } 188 189 .s1-logo { 190 display: flex; 191 align-items: center; 192 justify-content: center; 193 margin-bottom: 32px; 194 } 195 196 .s1-logo-text { 197 font-size: 210px; 198 font-weight: 800; 199 font-style: normal; 200 letter-spacing: -0.04em; 201 line-height: 1; 202 } 203 .s1-logo-text .alpha { color: oklch(60% 0.26 258); } 204 .s1-logo-text .sep { color: #52525b; } 205 .s1-logo-text .delta { color: oklch(80% 0.20 79); } 206 207 .s1-title { 208 color: #ffffff; 209 font-size: 28px; 210 font-weight: 700; 211 text-align: center; 212 margin-bottom: 10px; 213 } 214 215 .s1-subtitle { 216 color: #a1a1aa; 217 font-size: 16px; 218 text-align: center; 219 line-height: 1.5; 220 } 221 222 .s1-actions { 223 margin-top: auto; 224 display: flex; 225 flex-direction: column; 226 gap: 12px; 227 } 228 229 .s1-footer { 230 color: #52525b; 231 font-size: 12px; 232 text-align: center; 233 margin-top: 20px; 234 line-height: 1.5; 235 } 236 237 /* ── SCREEN 2: RECOVERY PHRASE ── */ 238 239 .warning-banner { 240 background: #2D1010; 241 border: 1px solid #dc2626; 242 border-radius: 10px; 243 padding: 12px 14px; 244 color: #fca5a5; 245 font-size: 12.5px; 246 line-height: 1.5; 247 margin-bottom: 20px; 248 display: flex; 249 align-items: flex-start; 250 gap: 8px; 251 } 252 253 .warning-icon { 254 flex-shrink: 0; 255 margin-top: 1px; 256 font-size: 13px; 257 } 258 259 .word-grid { 260 display: grid; 261 grid-template-columns: repeat(4, 1fr); 262 gap: 6px; 263 margin-bottom: 20px; 264 } 265 266 .word-cell { 267 background: #16162A; 268 border: 1px solid #27274A; 269 border-radius: 8px; 270 padding: 6px 5px; 271 display: flex; 272 flex-direction: column; 273 align-items: flex-start; 274 } 275 276 .word-num { 277 color: #52525b; 278 font-size: 9px; 279 font-weight: 600; 280 margin-bottom: 2px; 281 line-height: 1; 282 } 283 284 .word-text { 285 color: #e4e4e7; 286 font-size: 11px; 287 font-weight: 500; 288 line-height: 1; 289 } 290 291 .checkbox-row { 292 display: flex; 293 align-items: flex-start; 294 gap: 10px; 295 margin-bottom: 20px; 296 } 297 298 .checkbox-box { 299 width: 18px; 300 height: 18px; 301 min-width: 18px; 302 background: oklch(60% 0.26 258); 303 border-radius: 5px; 304 display: flex; 305 align-items: center; 306 justify-content: center; 307 margin-top: 1px; 308 } 309 310 .checkbox-box svg { 311 width: 11px; 312 height: 11px; 313 } 314 315 .checkbox-label { 316 color: #d4d4d8; 317 font-size: 12.5px; 318 line-height: 1.5; 319 } 320 321 /* ── SCREEN 3: VERIFY ── */ 322 323 .input-group { 324 margin-bottom: 16px; 325 } 326 327 .input-label { 328 color: #a1a1aa; 329 font-size: 13px; 330 font-weight: 500; 331 margin-bottom: 6px; 332 display: block; 333 } 334 335 .input-field { 336 width: 100%; 337 background: #16162A; 338 border: 1.5px solid #27274A; 339 border-radius: 10px; 340 padding: 13px 14px; 341 color: #e4e4e7; 342 font-family: 'Inter', sans-serif; 343 font-size: 15px; 344 } 345 346 .input-field::placeholder { 347 color: #3f3f46; 348 } 349 350 .input-field:focus { 351 outline: none; 352 border-color: oklch(60% 0.26 258); 353 } 354 355 /* first input shows focused state */ 356 .input-field.focused { 357 border-color: oklch(60% 0.26 258); 358 background: #1a1a30; 359 box-shadow: 0 0 0 3px rgba(99,102,241,0.15); 360 } 361 362 .verify-hint { 363 background: #16162A; 364 border: 1px solid #27274A; 365 border-radius: 10px; 366 padding: 14px; 367 margin-bottom: 24px; 368 } 369 370 .verify-hint-title { 371 color: #a1a1aa; 372 font-size: 12px; 373 font-weight: 600; 374 text-transform: uppercase; 375 letter-spacing: 0.08em; 376 margin-bottom: 6px; 377 } 378 379 .verify-hint-text { 380 color: #52525b; 381 font-size: 12px; 382 line-height: 1.5; 383 } 384 385 /* ── SCREEN 4: BIOMETRIC ── */ 386 387 .biometric-center { 388 display: flex; 389 flex-direction: column; 390 align-items: center; 391 margin-top: 24px; 392 margin-bottom: 40px; 393 } 394 395 .biometric-circle { 396 width: 120px; 397 height: 120px; 398 background: linear-gradient(135deg, #1e1b4b, #312e81); 399 border: 2px solid rgba(99,102,241,0.4); 400 border-radius: 50%; 401 display: flex; 402 align-items: center; 403 justify-content: center; 404 margin-bottom: 32px; 405 box-shadow: 0 0 40px rgba(99,102,241,0.2), 0 4px 16px rgba(99,102,241,0.15); 406 } 407 408 /* ── SCREEN 5: COMPLETE ── */ 409 410 .success-center { 411 display: flex; 412 flex-direction: column; 413 align-items: center; 414 margin-top: 20px; 415 margin-bottom: 32px; 416 } 417 418 .success-circle { 419 width: 120px; 420 height: 120px; 421 background: oklch(65% 0.18 145); 422 border-radius: 50%; 423 display: flex; 424 align-items: center; 425 justify-content: center; 426 margin-bottom: 24px; 427 box-shadow: 0 0 48px rgba(16,185,129,0.3), 0 4px 16px rgba(16,185,129,0.2); 428 } 429 430 .s5-title { 431 color: #ffffff; 432 font-size: 26px; 433 font-weight: 700; 434 text-align: center; 435 margin-bottom: 10px; 436 } 437 438 .s5-subtitle { 439 color: #a1a1aa; 440 font-size: 14px; 441 text-align: center; 442 line-height: 1.6; 443 margin-bottom: 28px; 444 } 445 446 .feature-list { 447 display: flex; 448 flex-direction: column; 449 gap: 10px; 450 margin-bottom: 24px; 451 } 452 453 .feature-card { 454 background: #1C1C2E; 455 border: 1px solid #27274A; 456 border-radius: 12px; 457 padding: 14px 16px; 458 display: flex; 459 align-items: center; 460 gap: 14px; 461 } 462 463 .feature-icon { 464 width: 36px; 465 height: 36px; 466 background: #16162A; 467 border: 1px solid #27274A; 468 border-radius: 10px; 469 display: flex; 470 align-items: center; 471 justify-content: center; 472 font-size: 16px; 473 flex-shrink: 0; 474 } 475 476 .feature-text-wrap {} 477 478 .feature-name { 479 color: #e4e4e7; 480 font-size: 14px; 481 font-weight: 600; 482 margin-bottom: 2px; 483 } 484 485 .feature-desc { 486 color: #71717a; 487 font-size: 12px; 488 line-height: 1.4; 489 } 490 491 /* Status bar simulation */ 492 .status-bar { 493 position: absolute; 494 top: 0; 495 left: 0; 496 right: 0; 497 height: 44px; 498 display: flex; 499 align-items: center; 500 justify-content: space-between; 501 padding: 12px 24px 0; 502 z-index: 50; 503 } 504 505 .status-time { 506 color: #e4e4e7; 507 font-size: 15px; 508 font-weight: 600; 509 } 510 511 .status-icons { 512 display: flex; 513 align-items: center; 514 gap: 6px; 515 } 516 517 .status-icons svg { 518 color: #e4e4e7; 519 } 520 521 /* ── HAMBURGER NAV ── */ 522 #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; } 523 #nav-toggle span { display:block; width:18px; height:2px; background:#a1a1aa; border-radius:2px; transition:all 0.2s; } 524 #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; } 525 #nav-drawer.open { left:0; } 526 .nav-section { padding:8px 20px 4px; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#52525b; } 527 .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; } 528 .nav-link:hover { background:rgba(99,102,241,0.12); color:#fff; } 529 .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; } 530 #nav-overlay { display:none; position:fixed; inset:0; z-index:998; } 531 #nav-overlay.open { display:block; } 532 </style> 533 </head> 534 <body> 535 536 <!-- Hamburger Nav --> 537 <div id="nav-toggle" onclick="toggleNav()" aria-label="Menu"> 538 <span></span><span></span><span></span> 539 </div> 540 <div id="nav-overlay" onclick="toggleNav()"></div> 541 <nav id="nav-drawer"> 542 <div class="nav-section">Wallet</div> 543 <a class="nav-link" href="home.html">Home / Portfolio</a> 544 <a class="nav-link" href="onboarding.html">Onboarding Flow</a> 545 <a class="nav-link" href="send-receive.html">Send / Receive</a> 546 <a class="nav-link" href="swap.html">Swap</a> 547 <div class="nav-section" style="margin-top:12px">Coming Soon</div> 548 <a class="nav-link" style="opacity:0.4;pointer-events:none">Staking</a> 549 <a class="nav-link" style="opacity:0.4;pointer-events:none">Governance</a> 550 <a class="nav-link" style="opacity:0.4;pointer-events:none">Settings</a> 551 <div class="nav-section" style="margin-top:12px">Other Apps</div> 552 <a class="nav-link" style="opacity:0.4;pointer-events:none">Governor</a> 553 <a class="nav-link" style="opacity:0.4;pointer-events:none">Messenger</a> 554 <a class="nav-link" style="opacity:0.4;pointer-events:none">Scanner</a> 555 <a class="nav-link" style="opacity:0.4;pointer-events:none">Docs</a> 556 </nav> 557 <script> 558 function toggleNav() { 559 document.getElementById("nav-drawer").classList.toggle("open"); 560 document.getElementById("nav-overlay").classList.toggle("open"); 561 } 562 var cur = location.pathname.split("/").pop(); 563 document.querySelectorAll(".nav-link").forEach(function(a) { 564 if (a.getAttribute("href") === cur) a.classList.add("active"); 565 }); 566 </script> 567 568 <p class="page-title">ACDC Wallet — Onboarding Flow — Mobile Mockup — 390×844 (iPhone 14)</p> 569 570 <div class="frames-row"> 571 572 <!-- ═══════════════════════════════════════ 573 SCREEN 1 — WELCOME 574 ═══════════════════════════════════════ --> 575 <div class="frame-wrapper"> 576 <span class="frame-label">1 — Welcome</span> 577 <div class="phone-frame"> 578 579 <!-- Status bar --> 580 <div class="status-bar"> 581 <span class="status-time">9:41</span> 582 <div class="status-icons"> 583 <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"> 584 <rect x="0" y="4" width="3" height="8" rx="1" opacity="0.4"/> 585 <rect x="4.5" y="2.5" width="3" height="9.5" rx="1" opacity="0.6"/> 586 <rect x="9" y="0.5" width="3" height="11.5" rx="1" opacity="0.8"/> 587 <rect x="13.5" y="0" width="3" height="12" rx="1"/> 588 </svg> 589 <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"> 590 <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"/> 591 <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"/> 592 <circle cx="8" cy="10" r="1.5"/> 593 </svg> 594 <svg width="25" height="12" viewBox="0 0 25 12" fill="none"> 595 <rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="currentColor" stroke-opacity="0.35"/> 596 <rect x="2" y="2" width="16" height="8" rx="2" fill="currentColor"/> 597 <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"/> 598 </svg> 599 </div> 600 </div> 601 602 <div class="screen" style="padding-top: 52px; justify-content: flex-start;"> 603 <div class="s1-logo-wrap"> 604 <div class="s1-logo"> 605 <span class="s1-logo-text"><span class="alpha">α</span><span class="sep">|</span><span class="delta">δ</span></span> 606 </div> 607 </div> 608 609 <div style="text-align:center; padding: 24px 16px 28px;"> 610 <h1 class="s1-title">Welcome</h1> 611 <p class="s1-subtitle" style="font-size: 16px; padding: 0 8px;">A sovereign monetary scaffold</p> 612 </div> 613 614 <div class="s1-actions"> 615 <button class="btn-primary">Create New Wallet</button> 616 <div style="display:flex; flex-direction:column; gap:10px; width:100%;"> 617 <button class="btn-secondary">Restore with Seed Phrase</button> 618 <button class="btn-secondary">Recover with Shamir Shares</button> 619 </div> 620 <p class="s1-footer">By continuing, you agree to our<br/><span style="color:oklch(60% 0.26 258);">Terms of Service</span></p> 621 </div> 622 </div> 623 </div> 624 </div> 625 626 <!-- ═══════════════════════════════════════ 627 SCREEN 2 — RECOVERY PHRASE 628 ═══════════════════════════════════════ --> 629 <div class="frame-wrapper"> 630 <span class="frame-label">2 — Recovery Phrase</span> 631 <div class="phone-frame"> 632 633 <div class="status-bar"> 634 <span class="status-time">9:41</span> 635 <div class="status-icons"> 636 <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> 637 <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> 638 <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> 639 </div> 640 </div> 641 642 <div class="screen" style="padding-top: 52px; overflow-y: auto;"> 643 <div class="back-link"> 644 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg> 645 Back 646 </div> 647 648 <h2 class="screen-title" style="font-size: 20px;">Your Recovery Phrase</h2> 649 <p class="screen-subtitle" style="font-size: 13px;">Write down these 24 words in order. Never share your recovery phrase.</p> 650 651 <div class="warning-banner"> 652 <span class="warning-icon">⚠</span> 653 <span>Never share your recovery phrase with anyone. Anyone with these words can access your funds.</span> 654 </div> 655 656 <div class="word-grid"> 657 <!-- 24 BIP-39 placeholder words --> 658 <div class="word-cell"><span class="word-num">1</span><span class="word-text">abandon</span></div> 659 <div class="word-cell"><span class="word-num">2</span><span class="word-text">ability</span></div> 660 <div class="word-cell"><span class="word-num">3</span><span class="word-text">able</span></div> 661 <div class="word-cell"><span class="word-num">4</span><span class="word-text">about</span></div> 662 <div class="word-cell"><span class="word-num">5</span><span class="word-text">above</span></div> 663 <div class="word-cell"><span class="word-num">6</span><span class="word-text">absent</span></div> 664 <div class="word-cell"><span class="word-num">7</span><span class="word-text">absorb</span></div> 665 <div class="word-cell"><span class="word-num">8</span><span class="word-text">abstract</span></div> 666 <div class="word-cell"><span class="word-num">9</span><span class="word-text">absurd</span></div> 667 <div class="word-cell"><span class="word-num">10</span><span class="word-text">abuse</span></div> 668 <div class="word-cell"><span class="word-num">11</span><span class="word-text">access</span></div> 669 <div class="word-cell"><span class="word-num">12</span><span class="word-text">accident</span></div> 670 <div class="word-cell"><span class="word-num">13</span><span class="word-text">account</span></div> 671 <div class="word-cell"><span class="word-num">14</span><span class="word-text">accuse</span></div> 672 <div class="word-cell"><span class="word-num">15</span><span class="word-text">achieve</span></div> 673 <div class="word-cell"><span class="word-num">16</span><span class="word-text">acid</span></div> 674 <div class="word-cell"><span class="word-num">17</span><span class="word-text">acoustic</span></div> 675 <div class="word-cell"><span class="word-num">18</span><span class="word-text">acquire</span></div> 676 <div class="word-cell"><span class="word-num">19</span><span class="word-text">across</span></div> 677 <div class="word-cell"><span class="word-num">20</span><span class="word-text">action</span></div> 678 <div class="word-cell"><span class="word-num">21</span><span class="word-text">actor</span></div> 679 <div class="word-cell"><span class="word-num">22</span><span class="word-text">actual</span></div> 680 <div class="word-cell"><span class="word-num">23</span><span class="word-text">adapt</span></div> 681 <div class="word-cell"><span class="word-num">24</span><span class="word-text">add</span></div> 682 </div> 683 684 <div class="checkbox-row"> 685 <div class="checkbox-box"> 686 <svg viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 6 5 9 10 3"/></svg> 687 </div> 688 <span class="checkbox-label">I have written down and safely stored my recovery phrase</span> 689 </div> 690 691 <button class="btn-primary" style="margin-top: auto;">Continue</button> 692 </div> 693 </div> 694 </div> 695 696 <!-- ═══════════════════════════════════════ 697 SCREEN 3 — VERIFY RECOVERY PHRASE 698 ═══════════════════════════════════════ --> 699 <div class="frame-wrapper"> 700 <span class="frame-label">3 — Verify Recovery Phrase</span> 701 <div class="phone-frame"> 702 703 <div class="status-bar"> 704 <span class="status-time">9:41</span> 705 <div class="status-icons"> 706 <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> 707 <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> 708 <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> 709 </div> 710 </div> 711 712 <div class="screen" style="padding-top: 52px;"> 713 <div class="back-link"> 714 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg> 715 Back 716 </div> 717 718 <h2 class="screen-title">Verify Recovery Phrase</h2> 719 <p class="screen-subtitle">Enter the words at the positions shown below to confirm you've saved your phrase.</p> 720 721 <div class="verify-hint"> 722 <div class="verify-hint-title">Instructions</div> 723 <div class="verify-hint-text">Enter the exact words from your recovery phrase at the numbered positions. Words are case-sensitive.</div> 724 </div> 725 726 <div class="input-group"> 727 <label class="input-label">Word #4</label> 728 <input class="input-field focused" type="text" placeholder="Enter word 4" value="about" /> 729 </div> 730 731 <div class="input-group"> 732 <label class="input-label">Word #11</label> 733 <input class="input-field" type="text" placeholder="Enter word 11" /> 734 </div> 735 736 <div class="input-group"> 737 <label class="input-label">Word #19</label> 738 <input class="input-field" type="text" placeholder="Enter word 19" /> 739 </div> 740 741 <div style="margin-top: auto; padding-top: 24px;"> 742 <button class="btn-primary">Verify Phrase</button> 743 </div> 744 </div> 745 </div> 746 </div> 747 748 <!-- ═══════════════════════════════════════ 749 SCREEN 4 — BIOMETRIC UNLOCK 750 ═══════════════════════════════════════ --> 751 <div class="frame-wrapper"> 752 <span class="frame-label">4 — Biometric Unlock</span> 753 <div class="phone-frame"> 754 755 <div class="status-bar"> 756 <span class="status-time">9:41</span> 757 <div class="status-icons"> 758 <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> 759 <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> 760 <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> 761 </div> 762 </div> 763 764 <div class="screen" style="padding-top: 52px;"> 765 <div class="back-link"> 766 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg> 767 Back 768 </div> 769 770 <h2 class="screen-title" style="font-size: 22px; text-align: center; margin-bottom: 12px;">Enable Biometric Unlock</h2> 771 <p class="screen-subtitle" style="text-align: center; font-size: 14px; padding: 0 8px;">Use fingerprint or face recognition for faster, secure access to your wallet.</p> 772 773 <div class="biometric-center"> 774 <div class="biometric-circle"> 775 <!-- Fingerprint SVG --> 776 <svg width="56" height="56" viewBox="0 0 56 56" fill="none"> 777 <path d="M28 8C17 8 8 17 8 28" stroke="#818cf8" stroke-width="2.5" stroke-linecap="round"/> 778 <path d="M28 8C39 8 48 17 48 28" stroke="oklch(60% 0.26 258)" stroke-width="2.5" stroke-linecap="round"/> 779 <path d="M20 28C20 23.6 23.6 20 28 20C32.4 20 36 23.6 36 28C36 33 32 37 28 40" stroke="#818cf8" stroke-width="2.5" stroke-linecap="round"/> 780 <path d="M24 28C24 25.8 25.8 24 28 24C30.2 24 32 25.8 32 28C32 30.5 30.5 32.5 28 34" stroke="oklch(60% 0.26 258)" stroke-width="2.5" stroke-linecap="round"/> 781 <circle cx="28" cy="28" r="2" fill="#818cf8"/> 782 <path d="M14 33C14 33 15 38 18 42" stroke="oklch(60% 0.26 258)" stroke-width="2.5" stroke-linecap="round"/> 783 <path d="M42 33C42 33 41 38 38 42" stroke="#818cf8" stroke-width="2.5" stroke-linecap="round"/> 784 <path d="M17 22C15 24.5 14 26.2 14 28" stroke="oklch(60% 0.26 258)" stroke-width="2.5" stroke-linecap="round"/> 785 <path d="M39 22C41 24.5 42 26.2 42 28" stroke="#818cf8" stroke-width="2.5" stroke-linecap="round"/> 786 </svg> 787 </div> 788 789 <!-- Security badges --> 790 <div style="display:flex; gap:8px; flex-wrap:wrap; justify-content:center;"> 791 <div style="background:#16162A; border:1px solid #27274A; border-radius:8px; padding:6px 12px; display:flex; align-items:center; gap:6px;"> 792 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="oklch(65% 0.18 145)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> 793 <span style="color:#a1a1aa; font-size:12px;">Secure Enclave</span> 794 </div> 795 <div style="background:#16162A; border:1px solid #27274A; border-radius:8px; padding:6px 12px; display:flex; align-items:center; gap:6px;"> 796 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="oklch(65% 0.18 145)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> 797 <span style="color:#a1a1aa; font-size:12px;">On-Device Only</span> 798 </div> 799 </div> 800 </div> 801 802 <div style="margin-top: auto; display:flex; flex-direction:column; gap:12px;"> 803 <button class="btn-primary">Enable Biometric</button> 804 <button class="btn-neutral">Skip for now</button> 805 </div> 806 </div> 807 </div> 808 </div> 809 810 <!-- ═══════════════════════════════════════ 811 SCREEN 5 — IMPORT EXTERNAL WALLET 812 ═══════════════════════════════════════ --> 813 <div class="frame-wrapper"> 814 <span class="frame-label">5 — Import External Wallet</span> 815 <div class="phone-frame"> 816 817 <div class="status-bar"> 818 <span class="status-time">9:41</span> 819 <div class="status-icons"> 820 <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> 821 <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> 822 <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> 823 </div> 824 </div> 825 826 <div class="screen" style="padding-top: 52px; justify-content: flex-start;"> 827 <div class="back-link"> 828 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg> 829 Back 830 </div> 831 832 <h2 class="screen-title">Import External Wallet</h2> 833 <p class="screen-subtitle" style="margin-bottom: 8px;">Import assets from other chains. Private keys are encrypted with your local seed.</p> 834 835 <!-- Security note --> 836 <div style="background:#1a1a0e; border:1px solid #78350f; border-radius:10px; padding:10px 14px; margin-bottom:20px; display:flex; gap:10px; align-items:flex-start;"> 837 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="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> 838 <p style="color:#d97706; font-size:12px; line-height:1.5; margin:0;">Keys are encrypted locally with your seed. Never transmitted.</p> 839 </div> 840 841 <!-- Import options --> 842 <div style="display:flex; flex-direction:column; gap:10px; width:100%; margin-bottom:20px;"> 843 844 <div style="background:#1C1C2E; border:1px solid #2d2d4a; border-radius:14px; padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer;"> 845 <div style="width:40px; height:40px; border-radius:10px; background:#16213e; display:flex; align-items:center; justify-content:center; flex-shrink:0;"> 846 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="oklch(60% 0.26 258)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M3 9h18M9 21V9"/></svg> 847 </div> 848 <div style="flex:1;"> 849 <p style="color:#fff; font-size:14px; font-weight:600; margin:0 0 2px;">Seed Phrase</p> 850 <p style="color:#71717a; font-size:12px; margin:0;">12 or 24 words — BIP39 compatible</p> 851 </div> 852 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg> 853 </div> 854 855 <div style="background:#1C1C2E; border:1px solid #2d2d4a; border-radius:14px; padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer;"> 856 <div style="width:40px; height:40px; border-radius:10px; background:#16213e; display:flex; align-items:center; justify-content:center; flex-shrink:0;"> 857 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="oklch(60% 0.26 258)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg> 858 </div> 859 <div style="flex:1;"> 860 <p style="color:#fff; font-size:14px; font-weight:600; margin:0 0 2px;">Private Key</p> 861 <p style="color:#71717a; font-size:12px; margin:0;">Hex or WIF format</p> 862 </div> 863 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg> 864 </div> 865 866 <div style="background:#1C1C2E; border:1px solid #2d2d4a; border-radius:14px; padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer;"> 867 <div style="width:40px; height:40px; border-radius:10px; background:#16213e; display:flex; align-items:center; justify-content:center; flex-shrink:0;"> 868 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="oklch(60% 0.26 258)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/><path d="M8 6h8M8 10h8M8 14h4"/></svg> 869 </div> 870 <div style="flex:1;"> 871 <p style="color:#fff; font-size:14px; font-weight:600; margin:0 0 2px;">Keystore File</p> 872 <p style="color:#71717a; font-size:12px; margin:0;">Encrypted JSON — Ethereum compatible</p> 873 </div> 874 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg> 875 </div> 876 877 <div style="background:#1C1C2E; border:1px solid #2d2d4a; border-radius:14px; padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer;"> 878 <div style="width:40px; height:40px; border-radius:10px; background:#16213e; display:flex; align-items:center; justify-content:center; flex-shrink:0;"> 879 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="oklch(60% 0.26 258)" stroke-width="2" stroke-linecap="round" stroke-linejoin="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="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="3" height="3"/><rect x="18" y="14" width="3" height="3"/><rect x="14" y="18" width="3" height="3"/><rect x="18" y="18" width="3" height="3"/></svg> 880 </div> 881 <div style="flex:1;"> 882 <p style="color:#fff; font-size:14px; font-weight:600; margin:0 0 2px;">Scan QR / Barcode</p> 883 <p style="color:#71717a; font-size:12px; margin:0;">Camera scan — paper wallets, WIF QR codes</p> 884 </div> 885 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#52525b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg> 886 </div> 887 888 </div> 889 890 <!-- Skip --> 891 <button style="background:none; border:none; color:#52525b; font-size:14px; font-family:inherit; cursor:pointer; padding:8px; width:100%; text-align:center;">Skip for now</button> 892 </div> 893 </div> 894 </div> 895 896 <!-- ═══════════════════════════════════════ 897 SCREEN 6 — SETUP COMPLETE 898 ═══════════════════════════════════════ --> 899 <div class="frame-wrapper"> 900 <span class="frame-label">6 — Setup Complete</span> 901 <div class="phone-frame"> 902 903 <div class="status-bar"> 904 <span class="status-time">9:41</span> 905 <div class="status-icons"> 906 <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> 907 <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> 908 <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> 909 </div> 910 </div> 911 912 <div class="screen" style="padding-top: 52px;"> 913 <div class="success-center"> 914 <div class="success-circle"> 915 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"> 916 <polyline points="20 6 9 17 4 12"/> 917 </svg> 918 </div> 919 <h2 class="s5-title">Your wallet is ready!</h2> 920 <p class="s5-subtitle" style="padding: 0 8px;">You can now send, receive, and manage your assets securely.</p> 921 </div> 922 923 <div class="feature-list"> 924 <div class="feature-card"> 925 <div class="feature-icon"> 926 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="oklch(60% 0.26 258)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 927 <line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/> 928 <line x1="12" y1="5" x2="12" y2="19" transform="translate(0,-8)"/><polyline points="5 8 12 1 19 8" transform="translate(0,0)"/> 929 </svg> 930 </div> 931 <div class="feature-text-wrap"> 932 <div class="feature-name">Send & Receive</div> 933 <div class="feature-desc">Transfer assets across Alpha and Delta chains</div> 934 </div> 935 </div> 936 937 <div class="feature-card"> 938 <div class="feature-icon"> 939 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="oklch(60% 0.26 258)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 940 <polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/> 941 <polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/> 942 </svg> 943 </div> 944 <div class="feature-text-wrap"> 945 <div class="feature-name">Cross-Chain Swaps</div> 946 <div class="feature-desc">Seamlessly swap between chains</div> 947 </div> 948 </div> 949 950 <div class="feature-card"> 951 <div class="feature-icon"> 952 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="oklch(60% 0.26 258)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 953 <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/> 954 </svg> 955 </div> 956 <div class="feature-text-wrap"> 957 <div class="feature-name">Secure Storage</div> 958 <div class="feature-desc">Your keys are encrypted and stored locally</div> 959 </div> 960 </div> 961 </div> 962 963 <div style="margin-top: auto;"> 964 <button class="btn-primary">Go to Wallet</button> 965 </div> 966 </div> 967 </div> 968 </div> 969 970 </div><!-- end .frames-row --> 971 972 </body> 973 </html>