157 lines
16 KiB
HTML
157 lines
16 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&family=JetBrains+Mono:wght@600;700&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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":{"inverse-primary":"#006875","tertiary":"#f2e9ff","primary-fixed-dim":"#00daf3","tertiary-fixed":"#e9ddff","surface-tint":"#00daf3","on-primary":"#00363d","on-error-container":"#ffdad6","on-error":"#690005","on-primary-container":"#00626e","on-secondary-container":"#cdd7ff","on-primary-fixed-variant":"#004f58","on-tertiary-container":"#6834d1","on-surface":"#e0e2ea","surface-container":"#1d2025","on-secondary-fixed":"#00174b","on-tertiary-fixed-variant":"#5516be","outline-variant":"#3b494c","on-background":"#e0e2ea","primary-container":"#00e5ff","secondary-fixed":"#dbe1ff","surface":"#101419","error":"#ffb4ab","on-secondary":"#002a78","surface-container-lowest":"#0b0e13","on-tertiary":"#3c0091","outline":"#849396","error-container":"#93000a","surface-dim":"#101419","on-tertiary-fixed":"#23005c","primary":"#c3f5ff","secondary-container":"#0053db","inverse-on-surface":"#2d3036","inverse-surface":"#e0e2ea","secondary":"#b4c5ff","secondary-fixed-dim":"#b4c5ff","tertiary-container":"#d9c8ff","surface-container-highest":"#32353b","tertiary-fixed-dim":"#d0bcff","surface-bright":"#36393f","surface-container-low":"#181c21","on-secondary-fixed-variant":"#003ea8","surface-container-high":"#272a30","surface-variant":"#32353b","background":"#101419","on-surface-variant":"#bac9cc","primary-fixed":"#9cf0ff","on-primary-fixed":"#001f24"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"space-sm":"0.5rem","gutter-lg":"1.5rem","gutter":"1rem","space-lg":"1.5rem","space-md":"1rem","space-xl":"2rem","space-xs":"0.25rem","margin":"1rem","margin-lg":"2rem"},"fontFamily":{"body-md":["Inter"],"display-hero-mobile":["Space Grotesk"],"headline-sm":["Space Grotesk"],"body-lg":["Inter"],"telemetry-metric-lg":["JetBrains Mono"],"label-data":["JetBrains Mono"],"headline-md":["Space Grotesk"],"display-hero":["Space Grotesk"],"telemetry-metric-lg-mobile":["JetBrains Mono"],"headline-lg":["Space Grotesk"],"label-caption":["Inter"],"telemetry-metric-md":["JetBrains Mono"]},"fontSize":{"body-md":["14px",{"lineHeight":"20px","fontWeight":"400"}],"display-hero-mobile":["40px",{"lineHeight":"44px","letterSpacing":"-0.02em","fontWeight":"700"}],"headline-sm":["20px",{"lineHeight":"28px","fontWeight":"600"}],"body-lg":["16px",{"lineHeight":"24px","fontWeight":"500"}],"telemetry-metric-lg":["48px",{"lineHeight":"48px","letterSpacing":"-0.04em","fontWeight":"700"}],"label-data":["12px",{"lineHeight":"16px","letterSpacing":"0.08em","fontWeight":"600"}],"headline-md":["24px",{"lineHeight":"32px","letterSpacing":"-0.01em","fontWeight":"600"}],"display-hero":["56px",{"lineHeight":"60px","letterSpacing":"-0.03em","fontWeight":"700"}],"telemetry-metric-lg-mobile":["36px",{"lineHeight":"36px","letterSpacing":"-0.03em","fontWeight":"700"}],"headline-lg":["32px",{"lineHeight":"40px","letterSpacing":"-0.02em","fontWeight":"700"}],"label-caption":["11px",{"lineHeight":"14px","letterSpacing":"0.05em","fontWeight":"600"}],"telemetry-metric-md":["28px",{"lineHeight":"32px","letterSpacing":"-0.02em","fontWeight":"600"}]}}}};</script></head><body class="bg-surface-container-lowest text-on-surface font-body-md text-body-md min-h-screen flex flex-col justify-between relative overflow-x-hidden selection:bg-primary-container selection:text-on-primary"><div class="absolute inset-0 pointer-events-none opacity-20 bg-[radial-gradient(#00daf3_1px,transparent_1px)] [background-size:24px_24px]"></div><div class="absolute inset-0 pointer-events-none bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,229,255,0.15),transparent)]"></div><header class="relative z-20 w-full bg-surface-container-lowest/80 backdrop-blur-md"><div class="w-full px-gutter-lg py-space-md flex flex-wrap items-center justify-between gap-space-md"><div class="flex items-center gap-space-md"><img alt="Brand logo. - Primary color: #00e5ff
|
|
- Font: spaceGrotesk
|
|
- Mode: dark
|
|
- Roundness: rounded-md
|
|
" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida/AEtjO1VyjwCl13wJcsQT-sMTi-VRmFxtZ-9XIra_-xqqK4kTFuOW8p1wBa1sxe4tYYuCb6dn_KEKD4eafHUh8YVgowbEvhZZs8cw7zL-NoUhnJvkrvVr2L3D6B7AbSXsYPHpoPD3cGefuUyVyNzO6s5TraxSTMpmQ31_ZNphdAPtB96fnxjTpL5y_m4qrKjJwN1LMV2eblQNfn-ubgQY5A0ier_SAIa3satIVrBXUeDO5Tg8mutucmfwYgVCrA"/><div class="flex flex-col"><span class="font-headline-sm text-headline-sm uppercase tracking-wider text-on-surface leading-none">MotorSignal</span><span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-widest">Telemetry Core Systems</span></div></div><div class="flex items-center gap-space-lg"><div class="flex items-center gap-space-xs bg-surface-container-low px-space-md py-space-xs rounded"><span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span><span class="font-label-data text-label-data text-primary-fixed">20HZ KALMAN SYNC ACTIVE</span></div><div class="hidden sm:flex items-center gap-space-xs bg-surface-container-low px-space-md py-space-xs rounded"><span class="material-symbols-outlined text-primary-fixed-dim text-[16px]">lock</span><span class="font-label-data text-label-data text-on-surface-variant">SECURE_PORT: 443</span></div><div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"><span class="material-symbols-outlined text-on-primary text-[18px]">person</span></div></div></div></header><main class="relative z-10 flex-1 flex items-center justify-center w-full px-gutter-lg py-space-xl"><div class="flex flex-col w-full relative">
|
|
<div class="relative w-full max-w-7xl mx-auto flex flex-col items-center justify-center min-h-[calc(100vh-14rem)] py-space-xl">
|
|
<!-- Ambient Tactical Grid & Oscilloscope Wave Overlay (Self-contained) -->
|
|
<div class="absolute inset-0 pointer-events-none flex items-center justify-center overflow-hidden">
|
|
<!-- Glow Nodes -->
|
|
<div class="absolute w-[500px] h-[500px] rounded-full bg-primary-container/10 blur-[120px] -top-20"></div>
|
|
<div class="absolute w-[400px] h-[400px] rounded-full bg-secondary-container/15 blur-[100px] -bottom-24"></div>
|
|
<!-- Vector Telemetry Waveform -->
|
|
<svg class="w-full max-w-5xl h-64 opacity-25 text-primary-fixed-dim" fill="none" viewbox="0 0 1000 200">
|
|
<path class="animate-pulse" d="M0 100 H200 L230 40 L260 160 L290 80 L310 120 L330 100 H550 L580 20 L610 180 L640 60 L670 140 L700 100 H1000" stroke="currentColor" stroke-dasharray="4 4" stroke-width="1.5"></path>
|
|
<path d="M0 100 H210 L235 60 L265 140 L285 90 L305 110 L325 100 H560 L585 45 L615 155 L635 80 L665 120 L695 100 H1000" stroke="currentColor" stroke-width="0.75"></path>
|
|
</svg>
|
|
</div>
|
|
<!-- Centered Tactical Recovery Console Card -->
|
|
<div class="relative w-full max-w-[480px] bg-surface-container-low/90 backdrop-blur-xl rounded-xl shadow-2xl p-space-lg md:p-space-xl z-10 transition-all duration-300">
|
|
<!-- Tactical Corner Targeting Accents (Precision HUD) -->
|
|
<div class="absolute -top-1 -left-1 w-4 h-4 border-t-2 border-l-2 border-primary-container"></div>
|
|
<div class="absolute -top-1 -right-1 w-4 h-4 border-t-2 border-r-2 border-primary-container"></div>
|
|
<div class="absolute -bottom-1 -left-1 w-4 h-4 border-b-2 border-l-2 border-primary-container"></div>
|
|
<div class="absolute -bottom-1 -right-1 w-4 h-4 border-b-2 border-r-2 border-primary-container"></div>
|
|
<!-- Protocol Metadata Header -->
|
|
<div class="flex items-center justify-between gap-space-xs bg-surface-container-lowest px-space-md py-space-xs rounded-lg mb-space-lg">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-container opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary-container"></span>
|
|
</span>
|
|
<span class="font-label-data text-label-data text-primary-fixed tracking-widest uppercase">SYS.RECOVERY // P-14</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-[14px] text-primary-fixed-dim">verified</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">ENCRYPTED DISPATCH</span>
|
|
</div>
|
|
</div>
|
|
<!-- Icon & Screen Identification -->
|
|
<div class="flex flex-col items-center text-center mb-space-lg">
|
|
<div class="relative mb-space-md">
|
|
<div class="absolute inset-0 rounded-full bg-primary-container/20 blur-md"></div>
|
|
<div class="relative w-16 h-16 rounded-full bg-surface-container flex items-center justify-center text-primary-container shadow-inner">
|
|
<span class="material-symbols-outlined text-[32px]">lock_reset</span>
|
|
</div>
|
|
</div>
|
|
<h1 class="font-headline-md text-headline-md uppercase text-on-surface tracking-tight mb-space-xs">
|
|
Recover Account Access
|
|
</h1>
|
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-sm">
|
|
Enter your registered telemetry callsign or email endpoint to authorize cryptographic one-time clearance token.
|
|
</p>
|
|
</div>
|
|
<!-- Interactive Form Module -->
|
|
<form class="space-y-space-md" id="recoveryForm" onsubmit="handleRecoverySubmit(event)">
|
|
<!-- Input Group -->
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between">
|
|
<label class="font-label-data text-label-data text-on-surface uppercase tracking-wider" for="recovery-endpoint">
|
|
PILOT EMAIL ENDPOINT / TELEMETRY ID
|
|
</label>
|
|
<span class="font-label-caption text-label-caption text-primary-fixed-dim bg-surface-container-high px-space-xs py-0.5 rounded uppercase">
|
|
AES-256 SYNC
|
|
</span>
|
|
</div>
|
|
<div class="relative flex items-center">
|
|
<span class="absolute left-space-md material-symbols-outlined text-outline text-[20px] pointer-events-none">
|
|
alternate_email
|
|
</span>
|
|
<input autocomplete="email" class="w-full h-[52px] pl-11 pr-space-md bg-surface-container-lowest text-on-surface placeholder:text-outline font-label-data text-label-data rounded-lg focus:outline-none focus:bg-surface-container transition-all" id="recovery-endpoint" name="endpoint" placeholder="pilot@motorsignal.io or callsign" required="" type="text"/>
|
|
</div>
|
|
<p class="font-label-caption text-label-caption text-on-surface-variant mt-1 flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-[13px] text-outline">schedule</span>
|
|
<span>Cryptographic one-time token will expire in 10 minutes. Check primary and secondary relay vaults.</span>
|
|
</p>
|
|
</div>
|
|
<!-- Primary Action CTA -->
|
|
<button class="w-full min-h-[52px] bg-primary-container text-on-primary font-headline-sm text-headline-sm uppercase tracking-wider rounded-lg flex items-center justify-center gap-space-sm hover:brightness-110 active:scale-[0.99] transition-all cursor-pointer shadow-lg" id="submitBtn" type="submit">
|
|
<span class="font-headline-sm text-[16px] tracking-widest" id="btnText">SEND RECOVERY CODE</span>
|
|
<span class="material-symbols-outlined text-[18px]" id="btnIcon">arrow_forward</span>
|
|
</button>
|
|
</form>
|
|
<!-- Feedback / Confirmation Toast Container (Dynamic State) -->
|
|
<div class="hidden mt-space-md p-space-md bg-surface-container rounded-lg flex items-start gap-space-md" id="statusToast">
|
|
<span class="material-symbols-outlined text-primary-fixed text-[20px] mt-0.5">check_circle</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-label-data text-primary-fixed uppercase tracking-wider">DISPATCH COMMENCED</span>
|
|
<span class="font-body-md text-body-md text-on-surface-variant text-[13px]">One-time PIN routing through mesh relay. Verify inbox node headers.</span>
|
|
</div>
|
|
</div>
|
|
<!-- Security Hardware Token Secondary Route -->
|
|
<div class="mt-space-lg bg-surface-container-lowest p-space-md rounded-lg flex items-start gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary-fixed-dim text-[20px] mt-0.5 shrink-0">key</span>
|
|
<p class="font-body-md text-body-md text-on-surface-variant text-[12px] leading-relaxed">
|
|
Hardware Token Verification available via <span class="text-primary-fixed font-medium">YubiKey NFC</span> or
|
|
<span class="text-primary-fixed font-medium">20Hz Authenticator App</span> if email dispatch channels are restricted or offline.
|
|
</p>
|
|
</div>
|
|
<!-- Split Auxiliary Links -->
|
|
<div class="mt-space-lg pt-space-md flex flex-col sm:flex-row items-center justify-between gap-space-sm font-label-data text-label-data text-on-surface-variant">
|
|
<a class="flex items-center gap-space-xs text-primary-fixed hover:text-primary-container transition-colors group" href="#/login">
|
|
<span class="material-symbols-outlined text-[16px] group-hover:-translate-x-1 transition-transform">arrow_back</span>
|
|
<span>RETURN TO SIGN IN</span>
|
|
</a>
|
|
<a class="text-on-surface-variant hover:text-on-surface transition-colors flex items-center gap-space-xs" href="#/support">
|
|
<span class="material-symbols-outlined text-[14px]">contact_support</span>
|
|
<span>OPS SUPPORT</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Telemetry System Diagnostics Monospace Ribbon Below Card -->
|
|
<div class="mt-space-lg flex flex-wrap items-center justify-center gap-x-space-lg gap-y-space-xs text-on-surface-variant font-label-data text-label-data opacity-60">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary-fixed"></span>
|
|
<span>NODE: CENTRAL-US-01</span>
|
|
</div>
|
|
<span>//</span>
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary-fixed"></span>
|
|
<span>LATENCY: 12ms</span>
|
|
</div>
|
|
<span>//</span>
|
|
<div>SHA-512 ROUTING ACTIVE</div>
|
|
</div>
|
|
</div>
|
|
<!-- Interactive Validation Script -->
|
|
<script>
|
|
function handleRecoverySubmit(event) {
|
|
event.preventDefault();
|
|
const btn = document.getElementById('submitBtn');
|
|
const btnText = document.getElementById('btnText');
|
|
const btnIcon = document.getElementById('btnIcon');
|
|
const toast = document.getElementById('statusToast');
|
|
const input = document.getElementById('recovery-endpoint');
|
|
|
|
if (!input.value) return;
|
|
|
|
// Loading State Simulation
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-80', 'cursor-not-allowed');
|
|
btnText.innerText = 'TRANSMITTING TOKEN...';
|
|
btnIcon.innerText = 'sync';
|
|
btnIcon.classList.add('animate-spin');
|
|
|
|
setTimeout(() => {
|
|
btnText.innerText = 'DISPATCH TRANSMITTED';
|
|
btnIcon.innerText = 'done_all';
|
|
btnIcon.classList.remove('animate-spin');
|
|
toast.classList.remove('hidden');
|
|
input.disabled = true;
|
|
}, 950);
|
|
}
|
|
</script>
|
|
</div></main><footer class="relative z-20 w-full bg-surface-container-lowest/80 backdrop-blur-md"><div class="w-full px-gutter-lg py-space-md flex flex-wrap items-center justify-between gap-space-md text-on-surface-variant"><div class="flex flex-wrap items-center gap-space-md"><span class="flex items-center gap-space-xs font-label-data text-label-data text-primary"><span class="material-symbols-outlined text-[16px] text-primary-fixed-dim">verified_user</span>SEC-LEVEL 4 // AES-GCM-256</span><span class="hidden md:inline-block font-label-data text-label-data text-outline">|</span><span class="font-label-data text-label-data">FIPS 140-3 COMPLIANT</span></div><div class="font-label-caption text-label-caption tracking-normal">© 2024 MotorSignal Motorsport Telemetry Systems. Restricted Access Node.</div></div></footer></body></html> |