MotorSignal-App/docs/stitch-designs/code/55_email_verification_chall...

206 lines
21 KiB
HTML

<!DOCTYPE html>
<html class="dark" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><meta content="web_blank" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@500;600;700&amp;family=Space+Grotesk:wght@600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { "colors": { "error": "#ffb4ab", "surface-container-high": "#272a30", "inverse-on-surface": "#2d3036", "secondary-fixed-dim": "#b4c5ff", "secondary": "#b4c5ff", "surface-tint": "#00daf3", "on-tertiary-fixed": "#23005c", "on-background": "#e0e2ea", "secondary-fixed": "#dbe1ff", "on-primary": "#00363d", "surface-container": "#1d2025", "error-container": "#93000a", "surface-bright": "#36393f", "on-primary-container": "#00626e", "on-surface": "#e0e2ea", "background": "#101419", "on-surface-variant": "#bac9cc", "primary-fixed-dim": "#00daf3", "surface-container-low": "#181c21", "inverse-primary": "#006875", "on-tertiary": "#3c0091", "outline": "#849396", "surface-container-lowest": "#0b0e13", "surface-variant": "#32353b", "surface-container-highest": "#32353b", "primary": "#c3f5ff", "outline-variant": "#3b494c", "primary-fixed": "#9cf0ff", "on-secondary-fixed": "#00174b", "on-tertiary-fixed-variant": "#5516be", "on-secondary": "#002a78", "tertiary-fixed": "#e9ddff", "secondary-container": "#0053db", "on-error-container": "#ffdad6", "on-primary-fixed": "#001f24", "primary-container": "#00e5ff", "tertiary-container": "#d9c8ff", "on-primary-fixed-variant": "#004f58", "surface-dim": "#101419", "tertiary-fixed-dim": "#d0bcff", "inverse-surface": "#e0e2ea", "tertiary": "#f2e9ff", "on-error": "#690005", "on-secondary-fixed-variant": "#003ea8", "on-secondary-container": "#cdd7ff", "on-tertiary-container": "#6834d1", "surface": "#101419" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "margin-lg": "2rem", "space-xs": "0.25rem", "gutter-lg": "1.5rem", "space-lg": "1.5rem", "margin": "1rem", "gutter": "1rem", "space-md": "1rem", "space-sm": "0.5rem", "space-xl": "2rem" }, "fontFamily": { "headline-md": ["Space Grotesk"], "headline-sm": ["Space Grotesk"], "telemetry-metric-md": ["JetBrains Mono"], "label-caption": ["Inter"], "label-data": ["JetBrains Mono"], "body-md": ["Inter"], "display-hero-mobile": ["Space Grotesk"], "body-lg": ["Inter"], "headline-lg": ["Space Grotesk"], "telemetry-metric-lg-mobile": ["JetBrains Mono"], "display-hero": ["Space Grotesk"], "telemetry-metric-lg": ["JetBrains Mono"] }, "fontSize": { "headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }], "headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }], "telemetry-metric-md": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }], "label-caption": ["11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" }], "label-data": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" }], "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }], "display-hero-mobile": ["40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }], "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "500" }], "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }], "telemetry-metric-lg-mobile": ["36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "display-hero": ["56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "telemetry-metric-lg": ["48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" }] } } } }</script></head><body class="min-h-screen bg-surface-container-lowest text-on-surface font-body-md text-body-md flex flex-col justify-between selection:bg-primary-container selection:text-on-primary-fixed relative overflow-x-hidden"><div class="pointer-events-none fixed inset-0 z-0 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:24px_24px] opacity-25"></div><div class="pointer-events-none fixed inset-0 z-0 opacity-20"><svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg"><path d="M0,320 Q360,280 720,380 T1440,240" fill="none" opacity="0.4" stroke="#00e5ff" stroke-width="1.5"></path><path d="M0,580 Q480,620 960,490 T1440,540" fill="none" opacity="0.2" stroke="#00daf3" stroke-width="1"></path></svg></div><header class="relative z-10 w-full px-gutter-lg pt-space-lg"><div class="w-full max-w-7xl mx-auto flex items-center justify-between py-space-sm px-space-md rounded-xl bg-surface-container-low/70 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.5)]"><div class="flex items-center gap-space-md"><div class="flex items-center gap-space-xs"><span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span><span class="font-label-data text-label-data uppercase tracking-wider text-primary">20Hz Kalman Sync Active</span></div><span class="text-outline-variant font-label-data text-label-data">//</span><div class="flex items-center gap-space-xs text-on-surface-variant"><span class="material-symbols-outlined text-[16px] text-primary-fixed-dim">lock</span><span class="font-label-data text-label-data tracking-wide">Secure Port 443</span></div></div><div class="flex items-center gap-space-lg"><div class="flex items-center gap-space-xs"><span class="font-label-caption text-label-caption uppercase text-on-surface-variant">LATENCY</span><span class="font-label-data text-label-data text-primary">14ms</span></div><div class="flex items-center gap-space-xs"><span class="font-label-caption text-label-caption uppercase text-on-surface-variant">HOST</span><span class="font-label-data text-label-data text-on-surface">NODE-09.ALPHA</span></div></div></div></header><main class="relative z-10 w-full max-w-7xl mx-auto px-gutter-lg flex-1 flex flex-col justify-center items-center py-space-xl"><div class="flex flex-col w-full items-center justify-center py-space-md">
<!-- Tactical Container (Max-Width 560px for cockpit ergonomics) -->
<div class="relative w-full max-w-[560px] mx-auto">
<!-- Ambient Luminous Underglow Halo -->
<div class="absolute -inset-1 bg-gradient-to-b from-primary-container/20 via-secondary-container/10 to-transparent blur-2xl opacity-60 pointer-events-none rounded-xl"></div>
<!-- Targeting Corner Brackets (HUD Reticle Motifs) -->
<div class="absolute -top-2 -left-2 w-5 h-5 border-t-2 border-l-2 border-primary-container pointer-events-none z-20"></div>
<div class="absolute -top-2 -right-2 w-5 h-5 border-t-2 border-r-2 border-primary-container pointer-events-none z-20"></div>
<div class="absolute -bottom-2 -left-2 w-5 h-5 border-b-2 border-l-2 border-primary-container pointer-events-none z-20"></div>
<div class="absolute -bottom-2 -right-2 w-5 h-5 border-b-2 border-r-2 border-primary-container pointer-events-none z-20"></div>
<!-- Main Cryptographic Shield Card -->
<div class="relative z-10 w-full bg-surface-container-low/90 backdrop-blur-2xl rounded-xl p-space-xl shadow-[0_12px_48px_rgba(0,0,0,0.85)] flex flex-col items-center">
<!-- Top Telemetry Protocol Badges -->
<div class="w-full flex items-center justify-between pb-space-md mb-space-md bg-surface-container-lowest/40 px-space-md py-space-xs rounded-lg">
<div class="flex items-center gap-space-xs">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container animate-ping"></span>
<span class="font-label-data text-label-data uppercase tracking-wider text-primary">SYS.VERIFY // TOKEN-CHALLENGE</span>
</div>
<div class="flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption uppercase text-on-surface-variant">HANDSHAKE:</span>
<span class="font-label-data text-label-data text-primary uppercase">ACTIVE // TLS 1.3</span>
</div>
</div>
<!-- Illuminated Shield / Cryptographic Halo Icon -->
<div class="relative flex items-center justify-center my-space-sm">
<div class="absolute w-20 h-20 rounded-full bg-primary-container/15 blur-xl animate-pulse"></div>
<div class="relative w-16 h-16 rounded-full bg-surface-container-high flex items-center justify-center shadow-[0_0_24px_rgba(0,229,255,0.35)]">
<span class="material-symbols-outlined text-[32px] text-primary-container" style="font-variation-settings: 'FILL' 1;">
verified_user
</span>
<!-- Dynamic Scanner Ring Sweep -->
<svg class="absolute inset-0 w-full h-full animate-[spin_8s_linear_infinite]" viewbox="0 0 64 64">
<circle cx="32" cy="32" fill="none" opacity="0.8" r="30" stroke="#00e5ff" stroke-dasharray="16 32" stroke-linecap="round" stroke-width="1.5"></circle>
</svg>
</div>
</div>
<!-- Cryptographic Header Title -->
<h1 class="font-headline-lg text-headline-lg uppercase text-center text-on-surface tracking-tight mt-space-sm mb-space-xs">
VERIFY TELEMETRY SIGNATURE
</h1>
<!-- Dispatch Destination with Inline Action -->
<div class="text-center mb-space-lg px-space-xs">
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
Dispatched 6-digit authentication token to
<span class="font-label-data text-label-data text-primary bg-surface-container-high px-space-xs py-0.5 rounded">marcus.apex@motorsignal.app</span>
</p>
<button class="mt-space-xs inline-flex items-center gap-space-xs text-primary-fixed-dim hover:text-primary transition-colors cursor-pointer group" type="button">
<span class="material-symbols-outlined text-[14px] group-hover:-translate-x-0.5 transition-transform">edit</span>
<span class="font-label-caption text-label-caption uppercase tracking-wider underline underline-offset-4">Switch Endpoint / Change Email</span>
</button>
</div>
<!-- 6-Digit Auto-Advancing Telemetry Input Grid -->
<form class="w-full flex flex-col items-center gap-space-md" id="token-form" onsubmit="event.preventDefault(); triggerLaunch();">
<div class="w-full flex items-center justify-between gap-space-xs sm:gap-space-sm" id="otp-container">
<!-- Digits filled with default cryptographic challenge mock '8-4-9-2-0-1' -->
<div class="relative flex-1 aspect-square max-w-[68px]">
<input autofocus="" class="otp-digit w-full h-full text-center bg-surface-container-lowest text-primary font-telemetry-metric-md text-telemetry-metric-md rounded-lg shadow-inner focus:outline-none focus:bg-surface-container-high focus:shadow-[0_0_16px_rgba(0,229,255,0.45)] transition-all caret-primary-container" data-index="0" inputmode="numeric" maxlength="1" type="text" value="8"/>
<div class="absolute bottom-1 left-2 right-2 h-0.5 bg-primary-container/40 rounded-full"></div>
</div>
<div class="relative flex-1 aspect-square max-w-[68px]">
<input class="otp-digit w-full h-full text-center bg-surface-container-lowest text-primary font-telemetry-metric-md text-telemetry-metric-md rounded-lg shadow-inner focus:outline-none focus:bg-surface-container-high focus:shadow-[0_0_16px_rgba(0,229,255,0.45)] transition-all caret-primary-container" data-index="1" inputmode="numeric" maxlength="1" type="text" value="4"/>
<div class="absolute bottom-1 left-2 right-2 h-0.5 bg-primary-container/40 rounded-full"></div>
</div>
<div class="relative flex-1 aspect-square max-w-[68px]">
<input class="otp-digit w-full h-full text-center bg-surface-container-lowest text-primary font-telemetry-metric-md text-telemetry-metric-md rounded-lg shadow-inner focus:outline-none focus:bg-surface-container-high focus:shadow-[0_0_16px_rgba(0,229,255,0.45)] transition-all caret-primary-container" data-index="2" inputmode="numeric" maxlength="1" type="text" value="9"/>
<div class="absolute bottom-1 left-2 right-2 h-0.5 bg-primary-container/40 rounded-full"></div>
</div>
<!-- Tactical Dash Separator -->
<span class="text-outline-variant font-headline-md select-none px-0.5">-</span>
<div class="relative flex-1 aspect-square max-w-[68px]">
<input class="otp-digit w-full h-full text-center bg-surface-container-lowest text-primary font-telemetry-metric-md text-telemetry-metric-md rounded-lg shadow-inner focus:outline-none focus:bg-surface-container-high focus:shadow-[0_0_16px_rgba(0,229,255,0.45)] transition-all caret-primary-container" data-index="3" inputmode="numeric" maxlength="1" type="text" value="2"/>
<div class="absolute bottom-1 left-2 right-2 h-0.5 bg-primary-container/40 rounded-full"></div>
</div>
<div class="relative flex-1 aspect-square max-w-[68px]">
<input class="otp-digit w-full h-full text-center bg-surface-container-lowest text-primary font-telemetry-metric-md text-telemetry-metric-md rounded-lg shadow-inner focus:outline-none focus:bg-surface-container-high focus:shadow-[0_0_16px_rgba(0,229,255,0.45)] transition-all caret-primary-container" data-index="4" inputmode="numeric" maxlength="1" type="text" value="0"/>
<div class="absolute bottom-1 left-2 right-2 h-0.5 bg-primary-container/40 rounded-full"></div>
</div>
<div class="relative flex-1 aspect-square max-w-[68px]">
<input class="otp-digit w-full h-full text-center bg-surface-container-lowest text-primary font-telemetry-metric-md text-telemetry-metric-md rounded-lg shadow-inner focus:outline-none focus:bg-surface-container-high focus:shadow-[0_0_16px_rgba(0,229,255,0.45)] transition-all caret-primary-container" data-index="5" inputmode="numeric" maxlength="1" type="text" value="1"/>
<div class="absolute bottom-1 left-2 right-2 h-0.5 bg-primary-container/40 rounded-full"></div>
</div>
</div>
<!-- Live Countdown & Re-dispatch Controller -->
<div class="w-full flex items-center justify-between px-space-xs text-on-surface-variant font-label-data text-label-data mt-space-xs">
<div class="flex items-center gap-space-xs">
<span class="material-symbols-outlined text-[16px] text-primary-fixed-dim">schedule</span>
<span>TOKEN EXPIRATION:</span>
<span class="text-primary font-bold" id="countdown-val">00:42</span>
</div>
<button class="text-primary-container hover:text-primary transition-colors cursor-pointer uppercase tracking-wider font-semibold disabled:opacity-40 disabled:pointer-events-none" disabled="" id="resend-btn" type="button">
RESEND CODE
</button>
</div>
<!-- Primary Action Trigger -->
<button class="w-full mt-space-md h-[54px] rounded-lg bg-primary-container text-on-primary font-headline-sm text-headline-sm uppercase tracking-wider flex items-center justify-center gap-space-sm shadow-[0_0_20px_rgba(0,229,255,0.45)] hover:shadow-[0_0_30px_rgba(0,229,255,0.7)] active:scale-[0.99] transition-all cursor-pointer" id="submit-btn" type="submit">
<span>VERIFY &amp; LAUNCH COCKPIT</span>
<span class="material-symbols-outlined text-[20px] transition-transform group-hover:translate-x-1">arrow_forward</span>
</button>
</form>
<!-- Security Advisory Warning Card -->
<div class="w-full bg-surface-container-high/60 rounded-lg p-space-md mt-space-lg flex items-start gap-space-sm">
<span class="material-symbols-outlined text-secondary text-[20px] shrink-0 mt-0.5">info</span>
<p class="font-body-md text-body-md text-on-surface-variant leading-tight">
Single-use cryptographic token expires in 10 minutes. If email relay is delayed, check spam or use
<span class="text-on-surface font-semibold">20Hz Authenticator App</span> for hardware bypass.
</p>
</div>
<!-- Secondary Hardware & Navigation Controls -->
<div class="w-full mt-space-lg flex flex-col sm:flex-row items-center justify-between gap-space-sm pt-space-md bg-surface-container-lowest/30 px-space-md py-space-sm rounded-lg">
<a class="inline-flex items-center gap-space-xs text-on-surface-variant hover:text-primary transition-colors font-label-data text-label-data" href="#">
<span class="material-symbols-outlined text-[16px]">arrow_back</span>
<span>RETURN TO SIGN IN</span>
</a>
<button class="inline-flex items-center gap-space-xs text-primary-fixed-dim hover:text-primary transition-colors font-label-data text-label-data uppercase" type="button">
<span class="material-symbols-outlined text-[16px]">key</span>
<span>HARDWARE KEY (FIDO2 / YUBIKEY)</span>
</button>
</div>
<!-- Real-time Verification Metadata Strip -->
<div class="w-full mt-space-md flex items-center justify-center gap-space-md text-outline font-label-caption text-label-caption uppercase tracking-widest text-center flex-wrap">
<span>NODE: CENTRAL-US-01</span>
<span class="text-outline-variant font-label-data text-label-data">//</span>
<span>LATENCY: 14MS</span>
<span class="text-outline-variant font-label-data text-label-data">//</span>
<span class="text-primary-fixed-dim flex items-center gap-1">
<span class="material-symbols-outlined text-[13px]">lock</span>
ED25519 VERIFIED
</span>
</div>
</div>
</div>
<!-- Interactive Input Auto-Advancing & Live Resend Countdown Script -->
<script>
(function initAuthChallenge() {
const inputs = Array.from(document.querySelectorAll('.otp-digit'));
const countdownEl = document.getElementById('countdown-val');
const resendBtn = document.getElementById('resend-btn');
const submitBtn = document.getElementById('submit-btn');
// Auto-advance & Backspace mechanics
inputs.forEach((input, index) => {
input.addEventListener('input', (e) => {
const val = e.target.value.replace(/[^0-9]/g, '');
e.target.value = val;
if (val && index < inputs.length - 1) {
inputs[index + 1].focus();
inputs[index + 1].select();
}
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Backspace' && !e.target.value && index > 0) {
inputs[index - 1].focus();
inputs[index - 1].select();
} else if (e.key === 'ArrowRight' && index < inputs.length - 1) {
inputs[index + 1].focus();
} else if (e.key === 'ArrowLeft' && index > 0) {
inputs[index - 1].focus();
}
});
input.addEventListener('focus', (e) => {
e.target.select();
});
});
// 42-second Resend countdown cycle
let secondsLeft = 42;
const timer = setInterval(() => {
secondsLeft--;
if (secondsLeft < 0) {
clearInterval(timer);
countdownEl.textContent = '00:00';
countdownEl.classList.remove('text-primary');
countdownEl.classList.add('text-error');
resendBtn.disabled = false;
resendBtn.classList.remove('opacity-40');
} else {
const formatted = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;
countdownEl.textContent = '00:' + formatted;
}
}, 1000);
resendBtn.addEventListener('click', () => {
secondsLeft = 60;
resendBtn.disabled = true;
countdownEl.classList.remove('text-error');
countdownEl.classList.add('text-primary');
countdownEl.textContent = '01:00';
});
window.triggerLaunch = function() {
const code = inputs.map(i => i.value).join('');
submitBtn.innerHTML = '<span class="material-symbols-outlined text-[20px] animate-spin">sync</span><span>SYNCHRONIZING TELEMETRY...</span>';
submitBtn.classList.add('opacity-90');
setTimeout(() => {
submitBtn.innerHTML = '<span class="material-symbols-outlined text-[20px]">check_circle</span><span>AUTHENTICATION GRANTED</span>';
submitBtn.classList.replace('bg-primary-container', 'bg-surface-tint');
}, 800);
};
})();
</script>
</div></main><footer class="relative z-10 w-full px-gutter-lg pb-space-lg"><div class="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between py-space-md px-space-lg rounded-xl bg-surface-container-low/70 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.5)] gap-space-sm"><div class="flex items-center gap-space-md flex-wrap"><div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded bg-surface-container-high"><span class="material-symbols-outlined text-[14px] text-primary-container">verified_user</span><span class="font-label-data text-label-data text-primary uppercase">SEC-LEVEL 4 // AES-GCM-256</span></div><div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded bg-surface-container-high"><span class="material-symbols-outlined text-[14px] text-secondary">shield</span><span class="font-label-data text-label-data text-on-surface-variant uppercase">FIPS 140-3 COMPLIANT</span></div></div><div class="flex items-center gap-space-sm"><span class="font-label-caption text-label-caption text-outline">TERMINAL ID: MS-WS-8840-X</span><span class="text-outline-variant font-label-data text-label-data">//</span><span class="font-label-caption text-label-caption text-outline">MOTORSIGNAL TELEMETRY SUITE</span></div></div></footer></body></html>