MotorSignal-App/docs/stitch-designs/code/52_rider_sign_in.html

180 lines
20 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&amp;family=JetBrains+Mono:wght@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": { "secondary-fixed": "#dbe1ff", "secondary-container": "#0053db", "on-error": "#690005", "outline": "#849396", "error": "#ffb4ab", "on-secondary-fixed-variant": "#003ea8", "primary-container": "#00e5ff", "on-secondary-container": "#cdd7ff", "surface-dim": "#101419", "on-tertiary-container": "#6834d1", "tertiary-fixed-dim": "#d0bcff", "on-secondary-fixed": "#00174b", "on-primary-fixed": "#001f24", "surface-container-high": "#272a30", "primary-fixed": "#9cf0ff", "on-primary-fixed-variant": "#004f58", "on-background": "#e0e2ea", "on-tertiary": "#3c0091", "tertiary": "#f2e9ff", "on-surface": "#e0e2ea", "inverse-on-surface": "#2d3036", "surface-bright": "#36393f", "on-tertiary-fixed": "#23005c", "surface-container-low": "#181c21", "error-container": "#93000a", "outline-variant": "#3b494c", "on-primary": "#00363d", "surface-container-lowest": "#0b0e13", "inverse-surface": "#e0e2ea", "primary-fixed-dim": "#00daf3", "inverse-primary": "#006875", "on-primary-container": "#00626e", "background": "#101419", "surface-tint": "#00daf3", "on-error-container": "#ffdad6", "on-tertiary-fixed-variant": "#5516be", "secondary-fixed-dim": "#b4c5ff", "primary": "#c3f5ff", "secondary": "#b4c5ff", "surface-container": "#1d2025", "tertiary-container": "#d9c8ff", "on-surface-variant": "#bac9cc", "surface-variant": "#32353b", "on-secondary": "#002a78", "surface-container-highest": "#32353b", "tertiary-fixed": "#e9ddff", "surface": "#101419" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "gutter": "1rem", "space-sm": "0.5rem", "space-xs": "0.25rem", "space-md": "1rem", "space-xl": "2rem", "gutter-lg": "1.5rem", "space-lg": "1.5rem", "margin-lg": "2rem", "margin": "1rem" }, "fontFamily": { "display-hero": [ "Space Grotesk" ], "headline-sm": [ "Space Grotesk" ], "label-caption": [ "Inter" ], "label-data": [ "JetBrains Mono" ], "telemetry-metric-lg": [ "JetBrains Mono" ], "body-lg": [ "Inter" ], "telemetry-metric-lg-mobile": [ "JetBrains Mono" ], "display-hero-mobile": [ "Space Grotesk" ], "headline-md": [ "Space Grotesk" ], "body-md": [ "Inter" ], "telemetry-metric-md": [ "JetBrains Mono" ], "headline-lg": [ "Space Grotesk" ] }, "fontSize": { "display-hero": [ "56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" } ], "headline-sm": [ "20px", { "lineHeight": "28px", "fontWeight": "600" } ], "label-caption": [ "11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" } ], "label-data": [ "12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" } ], "telemetry-metric-lg": [ "48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" } ], "body-lg": [ "16px", { "lineHeight": "24px", "fontWeight": "500" } ], "telemetry-metric-lg-mobile": [ "36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" } ], "display-hero-mobile": [ "40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" } ], "headline-md": [ "24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" } ], "body-md": [ "14px", { "lineHeight": "20px", "fontWeight": "400" } ], "telemetry-metric-md": [ "28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" } ], "headline-lg": [ "32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" } ] } } } }</script></head><body class="bg-surface-container-lowest text-on-surface min-h-screen selection:bg-primary-container selection:text-on-primary-container relative flex flex-col justify-between"><header class="w-full bg-surface-container-lowest/90 backdrop-blur-md"><div class="w-full px-gutter-lg h-14 flex items-center justify-between"><div class="flex items-center gap-space-md"><span class="font-headline-sm text-headline-sm uppercase tracking-wider text-primary font-bold">MotorSignal</span><span class="font-label-data text-label-data px-space-xs py-0.5 rounded bg-surface-container-high text-on-surface-variant uppercase tracking-widest">Telemetry Cloud</span></div><div class="flex items-center gap-space-lg"><div class="flex items-center gap-space-sm bg-surface-container px-space-sm py-1 rounded"><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-container tracking-wider uppercase">20Hz Kalman Sync Active</span></div><div class="hidden md:flex items-center gap-space-xs text-on-surface-variant font-label-data text-label-data"><span class="material-symbols-outlined text-[16px] text-primary">lock</span><span class="uppercase tracking-wider">SECURE_PORT: 443</span></div></div></div></header><main class="flex-1 flex flex-col items-center justify-center w-full px-gutter py-space-xl"><div class="flex flex-col w-full relative items-center justify-center py-space-lg selection:bg-primary-container selection:text-on-primary-container overflow-hidden">
<div class="absolute inset-0 pointer-events-none overflow-hidden opacity-30">
<svg class="w-full h-full" preserveaspectratio="none" viewbox="0 0 1440 900" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern height="48" id="tactical-grid" patternunits="userSpaceOnUse" width="48">
<path class="text-outline-variant" d="M 48 0 L 0 0 0 48" fill="none" stroke="currentColor" stroke-dasharray="2 6" stroke-width="0.5"></path>
<circle class="text-primary-container" cx="0" cy="0" fill="currentColor" opacity="0.6" r="1"></circle>
</pattern>
<lineargradient id="lean-gradient-1" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#00daf3" stop-opacity="0.8"></stop>
<stop offset="50%" stop-color="#0053db" stop-opacity="0.4"></stop>
<stop offset="100%" stop-color="#00e5ff" stop-opacity="0"></stop>
</lineargradient>
<lineargradient id="lean-gradient-2" x1="100%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#00e5ff" stop-opacity="0.6"></stop>
<stop offset="100%" stop-color="#6834d1" stop-opacity="0.1"></stop>
</lineargradient>
</defs>
<rect fill="url(#tactical-grid)" height="100%" width="100%"></rect>
<path d="M -100 480 C 320 520, 520 220, 780 290 S 1180 720, 1600 560" fill="none" stroke="url(#lean-gradient-1)" stroke-linecap="round" stroke-width="2.5"></path>
<path d="M -80 620 C 260 700, 580 410, 890 490 S 1240 180, 1560 310" fill="none" stroke="url(#lean-gradient-2)" stroke-dasharray="8 6" stroke-width="1.5"></path>
<line class="text-outline-variant" opacity="0.4" stroke="currentColor" stroke-dasharray="4 8" stroke-width="1" x1="720" x2="720" y1="0" y2="900"></line>
<line class="text-outline-variant" opacity="0.4" stroke="currentColor" stroke-dasharray="4 8" stroke-width="1" x1="0" x2="1440" y1="450" y2="450"></line>
<g class="text-primary-container" transform="translate(680, 260)">
<circle cx="40" cy="40" fill="none" opacity="0.7" r="32" stroke="currentColor" stroke-dasharray="4 4" stroke-width="1"></circle>
<line stroke="currentColor" stroke-width="1.5" x1="8" x2="72" y1="72" y2="8"></line>
<text class="font-label-data text-label-caption text-primary tracking-widest" fill="currentColor" x="80" y="36">APEX: 48.2° ROLL</text>
</g>
</svg>
</div>
<div class="relative z-10 w-full max-w-xl flex flex-col items-center">
<div class="flex flex-col items-center text-center mb-space-lg">
<div class="relative mb-space-sm group">
<div class="absolute -inset-2 bg-primary-container/20 rounded-xl blur-lg transition duration-700 group-hover:bg-primary-container/40"></div>
<img alt="MotorSignal Precision Telemetry Logo" class="relative h-12 w-auto object-contain rounded-md" src="https://lh3.googleusercontent.com/aida/AEtjO1VyjwCl13wJcsQT-sMTi-VRmFxtZ-9XIra_-xqqK4kTFuOW8p1wBa1sxe4tYYuCb6dn_KEKD4eafHUh8YVgowbEvhZZs8cw7zL-NoUhnJvkrvVr2L3D6B7AbSXsYPHpoPD3cGefuUyVyNzO6s5TraxSTMpmQ31_ZNphdAPtB96fnxjTpL5y_m4qrKjJwN1LMV2eblQNfn-ubgQY5A0ier_SAIa3satIVrBXUeDO5Tg8mutucmfwYgVCrA"/>
</div>
<div class="inline-flex items-center gap-space-xs px-space-sm py-0.5 rounded-full bg-surface-container-high/80 mb-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-caption text-primary tracking-widest uppercase">20Hz ENCRYPTED MESH RELAY // ONLINE</span>
</div>
<h1 class="font-headline-md text-headline-md tracking-wider text-on-surface uppercase font-bold">
MotorSignal Telemetry Cloud
</h1>
<p class="font-body-md text-body-md text-on-surface-variant/90 max-w-md mt-0.5">
Precision Cockpit Telemetry &amp; High-G Sensor Fusion Platform
</p>
</div>
<div class="w-full relative rounded-xl bg-surface-container-low/75 backdrop-blur-md shadow-2xl p-space-lg sm:p-space-xl">
<div class="absolute -top-1 -left-1 w-3 h-3 bg-primary-container/80 rounded-tl-sm pointer-events-none"></div>
<div class="absolute -top-1 -right-1 w-3 h-3 bg-primary-container/80 rounded-tr-sm pointer-events-none"></div>
<div class="absolute -bottom-1 -left-1 w-3 h-3 bg-primary-container/80 rounded-bl-sm pointer-events-none"></div>
<div class="absolute -bottom-1 -right-1 w-3 h-3 bg-primary-container/80 rounded-br-sm pointer-events-none"></div>
<div class="flex items-center justify-between pb-space-sm mb-space-md">
<div>
<span class="font-label-data text-label-caption text-primary tracking-widest uppercase block">SYS.AUTH // PROTOCOL 9</span>
<h2 class="font-headline-sm text-headline-sm text-on-surface uppercase font-bold tracking-wide">Workstation Authentication</h2>
<p class="font-body-md text-body-md text-on-surface-variant text-xs mt-0.5">Enter telemetry credentials to initialize secure session</p>
</div>
<div class="p-2 rounded-lg bg-surface-container-highest text-primary-container hidden sm:block">
<span class="material-symbols-outlined text-[24px]">terminal</span>
</div>
</div>
<form class="flex flex-col gap-space-md" id="auth-form" onsubmit="event.preventDefault(); handleTelemetryAuth();">
<div class="flex flex-col gap-1">
<label class="font-label-data text-label-data uppercase tracking-wider text-on-surface-variant flex items-center justify-between" for="callsign-input">
<span>Rider Callsign / Telemetry Email</span>
<span class="text-primary-container font-label-caption">REQ_KEY</span>
</label>
<div class="relative flex items-center bg-surface-container-lowest rounded-lg">
<span class="material-symbols-outlined text-[20px] text-on-surface-variant/70 absolute left-3 pointer-events-none">key</span>
<input class="w-full bg-transparent pl-10 pr-3 py-3 font-label-data text-label-data text-on-surface placeholder:text-on-surface-variant/40 focus:outline-none focus:bg-surface-container rounded-lg transition-colors" id="callsign-input" placeholder="e.g. CALLSIGN-901 or pilot@motorsignal.net" required="" type="text"/>
</div>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-data text-label-data uppercase tracking-wider text-on-surface-variant flex items-center justify-between" for="password-input">
<span>Passphrase</span>
<span class="text-primary-container font-label-caption">AES_SYNC</span>
</label>
<div class="relative flex items-center bg-surface-container-lowest rounded-lg">
<span class="material-symbols-outlined text-[20px] text-on-surface-variant/70 absolute left-3 pointer-events-none">lock</span>
<input class="w-full bg-transparent pl-10 pr-12 py-3 font-label-data text-label-data text-on-surface placeholder:text-on-surface-variant/40 focus:outline-none focus:bg-surface-container rounded-lg transition-colors" id="password-input" placeholder="••••••••••••••••" required="" type="password"/>
<button aria-label="Toggle password visibility" class="absolute right-2 p-1.5 rounded text-on-surface-variant/70 hover:text-primary transition-colors flex items-center justify-center focus:outline-none" onclick="togglePasswordVisibility()" type="button">
<span class="material-symbols-outlined text-[20px]" id="pwd-eye-icon">visibility</span>
</button>
</div>
</div>
<div class="flex items-center justify-between pt-1">
<label class="flex items-center gap-space-sm cursor-pointer select-none">
<input checked="" class="sr-only peer" id="workstation-persist" type="checkbox"/>
<div class="w-10 h-6 bg-surface-container-high peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-primary peer-checked:bg-secondary-container after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-primary-container after:rounded-full after:h-5 after:w-5 after:transition-all relative"></div>
<span class="font-body-md text-body-md text-xs text-on-surface tracking-wide">Remember workstation</span>
</label>
<a class="font-label-data text-label-caption text-primary hover:text-primary-fixed-dim uppercase tracking-wider underline underline-offset-4 transition-colors" href="javascript:void(0)">
Forgot Passphrase?
</a>
</div>
<button class="w-full min-h-[52px] mt-2 rounded-lg bg-primary-container hover:bg-primary-fixed-dim text-on-primary-container font-headline-sm text-headline-sm uppercase font-bold tracking-widest shadow-xl shadow-primary-container/20 hover:shadow-primary-container/40 flex items-center justify-center gap-space-sm transition-all transform active:scale-[0.99]" id="submit-btn" type="submit">
<span>Sign In To Cockpit</span>
<span class="material-symbols-outlined text-[22px] transition-transform group-hover:translate-x-1">arrow_forward</span>
</button>
</form>
<div class="relative my-space-lg flex items-center justify-center">
<div class="absolute inset-0 flex items-center">
<div class="w-full h-[1px] bg-surface-container-highest"></div>
</div>
<div class="relative bg-surface-container-low px-space-md">
<span class="font-label-data text-label-caption text-on-surface-variant uppercase tracking-widest">Or Authenticate With</span>
</div>
</div>
<div class="grid grid-cols-2 gap-space-md">
<button class="min-h-[48px] rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface flex items-center justify-center gap-space-sm px-4 transition-colors shadow-sm focus:outline-none" type="button">
<svg class="w-4 h-4 fill-current" viewbox="0 0 24 24">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" fill="#FBBC05"></path>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z" fill="#EA4335"></path>
</svg>
<span class="font-headline-sm text-label-data uppercase tracking-wider font-semibold">Google</span>
</button>
<button class="min-h-[48px] rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface flex items-center justify-center gap-space-sm px-4 transition-colors shadow-sm focus:outline-none" type="button">
<svg class="w-4 h-4 fill-current text-on-surface" viewbox="0 0 170 170">
<path d="M150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.19-2.12-9.97-3.17-14.34-3.17-4.58 0-9.49 1.05-14.75 3.17-5.26 2.13-9.5 3.24-12.74 3.35-4.35.13-9.16-1.9-14.42-6.08-3.69-3.04-7.6-7.79-11.74-14.24-6.84-10.74-12.22-22.61-16.14-35.6-3.92-12.99-5.88-25.29-5.88-36.9 0-16.74 4.58-30.43 13.74-41.07 9.16-10.64 20.37-16.08 33.64-16.33 5.48 0 11.39 1.48 17.72 4.44 6.33 2.96 10.22 4.49 11.66 4.6 2.06-.23 6.13-1.87 12.22-4.93 6.09-3.05 11.74-4.46 16.96-4.23 12.56.63 22.9 5.09 31.02 13.39 8.12 8.3 13.25 18.23 15.39 29.8-11.09 6.74-16.49 16.09-16.2 28.05.32 11.31 4.54 20.66 12.65 28.05 3.69 3.38 7.82 5.92 12.39 7.62-2.5 7.18-5.65 14.38-9.47 21.6zm-26.68-112.5c0 7.83-2.88 15.22-8.64 22.18-5.76 6.96-12.74 11.19-20.94 12.7-.22-1.3-.33-2.61-.33-3.92 0-7.39 2.99-14.79 8.97-22.18 5.98-7.39 13.04-11.63 21.18-12.72.22 1.3.33 2.61.33 3.94z"></path>
</svg>
<span class="font-headline-sm text-label-data uppercase tracking-wider font-semibold">Apple ID</span>
</button>
</div>
<div class="mt-space-lg text-center">
<span class="font-body-md text-body-md text-on-surface-variant text-xs">New to MotorSignal?</span>
<a class="font-label-data text-label-data text-primary hover:text-primary-fixed-dim uppercase tracking-wider ml-1 underline underline-offset-4" href="javascript:void(0)">
Create a rider account
</a>
</div>
</div>
<div class="mt-space-md flex flex-wrap items-center justify-center gap-space-xs text-center px-4">
<span class="material-symbols-outlined text-[14px] text-primary-container">verified_user</span>
<span class="font-label-data text-label-caption text-on-surface-variant/60 tracking-widest uppercase">
SEC-LEVEL 4 // AES-GCM-256 ENCRYPTED HARDWARE PROTOCOL // FIPS 140-3 COMPLIANT
</span>
</div>
</div>
<script>
function togglePasswordVisibility() {
const pwdInput = document.getElementById('password-input');
const eyeIcon = document.getElementById('pwd-eye-icon');
if (pwdInput.type === 'password') {
pwdInput.type = 'text';
eyeIcon.textContent = 'visibility_off';
} else {
pwdInput.type = 'password';
eyeIcon.textContent = 'visibility';
}
}
function handleTelemetryAuth() {
const btn = document.getElementById('submit-btn');
const originalHTML = btn.innerHTML;
btn.innerHTML = '<span class="material-symbols-outlined animate-spin text-[20px]">sync</span><span>SYNCHRONIZING TELEMETRY...</span>';
btn.disabled = true;
btn.classList.add('opacity-80');
setTimeout(() => {
btn.innerHTML = '<span class="material-symbols-outlined text-[20px]">check_circle</span><span>SESSION INITIALIZED</span>';
btn.classList.remove('bg-primary-container', 'text-on-primary-container');
btn.classList.add('bg-secondary-container', 'text-on-secondary-container');
setTimeout(() => {
btn.innerHTML = originalHTML;
btn.disabled = false;
btn.classList.remove('opacity-80', 'bg-secondary-container', 'text-on-secondary-container');
btn.classList.add('bg-primary-container', 'text-on-primary-container');
}, 1800);
}, 1200);
}
</script>
</div></main><footer class="w-full bg-surface-container-lowest/80 py-space-md"><div class="w-full px-gutter-lg flex flex-col sm:flex-row items-center justify-between gap-space-sm text-on-surface-variant"><div class="flex items-center gap-space-md"><span class="font-label-data text-label-data text-on-surface-variant/70">CLUSTER: AP-NORTH-CORE-01</span><span class="font-label-data text-label-data text-on-surface-variant/70">MESH: MTR-9821</span></div><span class="font-label-caption text-label-caption text-on-surface-variant/50">© 2024 MOTORSIGNAL MOTORSPORT TELEMETRY SYSTEMS. RESTRICTED ACCESS.</span></div></footer></body></html>