192 lines
14 KiB
HTML
192 lines
14 KiB
HTML
<h2>Signup Wizard — Step-by-Step Flow</h2>
|
|
<p class="subtitle">3 steps for email signup, 2 steps for social signup</p>
|
|
|
|
<div class="section">
|
|
<h3>Step 1: Account Creation</h3>
|
|
<div class="mockup">
|
|
<div class="mockup-header">Email Signup — Step 1 of 3</div>
|
|
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
|
|
<!-- Step indicator -->
|
|
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 20px;">
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: #eb3779;"></div>
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Create your account</div>
|
|
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">Choose how you'd like to sign up</div>
|
|
</div>
|
|
|
|
<!-- Social buttons -->
|
|
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
|
|
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🔵 Google</button>
|
|
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🟣 Discord</button>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
|
|
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
|
|
<span style="font-size: 11px; color: rgba(235,228,241,0.4);">or use email</span>
|
|
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
|
|
</div>
|
|
|
|
<!-- Form fields -->
|
|
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Email</label>
|
|
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 12px; box-sizing: border-box;" placeholder="you@example.com" />
|
|
|
|
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Password</label>
|
|
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 8px; box-sizing: border-box;" type="password" placeholder="Min. 10 characters" />
|
|
|
|
<!-- Password strength meter -->
|
|
<div style="margin-bottom: 16px;">
|
|
<div style="display: flex; gap: 4px; margin-bottom: 6px;">
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #ef4444;"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
</div>
|
|
<div style="font-size: 11px; color: #ef4444;">Weak — add uppercase, number, special char</div>
|
|
</div>
|
|
|
|
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Continue</button>
|
|
|
|
<div style="text-align: center; margin-top: 14px; font-size: 12px;">
|
|
<span style="color: rgba(235,228,241,0.5);">Already have an account? </span>
|
|
<a style="color: #eb3779;">Sign in</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Step 2: Email Verification (OTP)</h3>
|
|
<div class="mockup">
|
|
<div class="mockup-header">Email Signup — Step 2 of 3</div>
|
|
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
|
|
<!-- Step indicator -->
|
|
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 20px;">
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: #22c55e;"></div>
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: #eb3779;"></div>
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Verify your email</div>
|
|
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">We sent a 6-digit code to <strong style="color: #ebe4f1;">user@example.com</strong></div>
|
|
</div>
|
|
|
|
<!-- OTP Input boxes -->
|
|
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 16px;">
|
|
<div style="width: 44px; height: 52px; border-radius: 8px; border: 2px solid #eb3779; background: rgba(235,55,121,0.05); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: #ebe4f1;">4</div>
|
|
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: #ebe4f1;">7</div>
|
|
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
|
|
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
|
|
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
|
|
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
|
|
</div>
|
|
|
|
<!-- Timer and resend -->
|
|
<div style="text-align: center; margin-bottom: 16px; font-size: 12px;">
|
|
<span style="color: rgba(235,228,241,0.4);">Resend code in </span>
|
|
<span style="color: #eb3779; font-weight: 600;">4:23</span>
|
|
</div>
|
|
|
|
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600; opacity: 0.5;" disabled>Verify</button>
|
|
|
|
<div style="text-align: center; margin-top: 14px; font-size: 12px;">
|
|
<a style="color: rgba(235,228,241,0.5);">← Back to signup</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Step 3: Passkey Setup (Optional)</h3>
|
|
<div class="mockup">
|
|
<div class="mockup-header">Email Signup — Step 3 of 3 (Optional)</div>
|
|
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
|
|
<!-- Step indicator -->
|
|
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 20px;">
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: #22c55e;"></div>
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: #22c55e;"></div>
|
|
<div style="width: 32px; height: 4px; border-radius: 2px; background: #eb3779;"></div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<div style="font-size: 40px; margin-bottom: 8px;">🔑</div>
|
|
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Set up a passkey</div>
|
|
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px; line-height: 1.5;">Sign in faster with biometrics or your device's security key. No password needed.</div>
|
|
</div>
|
|
|
|
<!-- Benefits -->
|
|
<div style="background: rgba(255,255,255,0.02); border-radius: 8px; padding: 14px; margin-bottom: 20px;">
|
|
<div style="font-size: 12px; color: rgba(235,228,241,0.6); display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
|
<span style="color: #22c55e;">✓</span> Faster sign-in with fingerprint or face
|
|
</div>
|
|
<div style="font-size: 12px; color: rgba(235,228,241,0.6); display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
|
<span style="color: #22c55e;">✓</span> More secure than passwords
|
|
</div>
|
|
<div style="font-size: 12px; color: rgba(235,228,241,0.6); display: flex; align-items: center; gap: 8px;">
|
|
<span style="color: #22c55e;">✓</span> Works across your devices
|
|
</div>
|
|
</div>
|
|
|
|
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600; margin-bottom: 10px;">Set up passkey</button>
|
|
<button style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(235,228,241,0.6); font-size: 13px;">Skip for now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Social Signup Flow (2 steps)</h3>
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 16px;">
|
|
<p style="color: rgba(235,228,241,0.7); font-size: 13px; margin: 0;">
|
|
<strong>Step 1:</strong> User clicks Google/Discord → OAuth redirect → authenticated<br>
|
|
<strong>Step 2:</strong> Passkey setup (optional, same as Step 3 above) → Done<br><br>
|
|
<em>OTP step is skipped — email is already verified by the OAuth provider.</em>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Password Strength Meter — States</h3>
|
|
<div style="display: flex; flex-direction: column; gap: 8px;">
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px;">
|
|
<div style="display: flex; gap: 4px; margin-bottom: 4px;">
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #ef4444;"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
</div>
|
|
<div style="font-size: 11px; color: #ef4444;">Weak — add 8+ chars, uppercase, number, special char</div>
|
|
</div>
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px;">
|
|
<div style="display: flex; gap: 4px; margin-bottom: 4px;">
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #f59e0b;"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #f59e0b;"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
|
|
</div>
|
|
<div style="font-size: 11px; color: #f59e0b;">Fair — add a special character and more length</div>
|
|
</div>
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px;">
|
|
<div style="display: flex; gap: 4px; margin-bottom: 4px;">
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
|
|
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
|
|
</div>
|
|
<div style="font-size: 11px; color: #22c55e;">Strong — great password!</div>
|
|
</div>
|
|
</div>
|
|
</div> |