419 lines
31 KiB
HTML
419 lines
31 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@24,400,0,0" 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&family=JetBrains+Mono:wght@500;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": { "outline-variant": "#3b494c", "on-tertiary-fixed-variant": "#5516be", "on-tertiary-container": "#6834d1", "surface-dim": "#101419", "primary-fixed-dim": "#00daf3", "inverse-primary": "#006875", "surface-container-high": "#272a30", "tertiary-fixed": "#e9ddff", "on-tertiary": "#3c0091", "primary-fixed": "#9cf0ff", "inverse-surface": "#e0e2ea", "error": "#ffb4ab", "surface-container-highest": "#32353b", "on-secondary-fixed-variant": "#003ea8", "tertiary-fixed-dim": "#d0bcff", "secondary-fixed": "#dbe1ff", "on-tertiary-fixed": "#23005c", "secondary-fixed-dim": "#b4c5ff", "surface-container-lowest": "#0b0e13", "on-surface": "#e0e2ea", "on-surface-variant": "#bac9cc", "secondary-container": "#0053db", "secondary": "#b4c5ff", "outline": "#849396", "primary": "#c3f5ff", "on-primary-fixed-variant": "#004f58", "surface-container-low": "#181c21", "on-secondary-fixed": "#00174b", "on-primary-container": "#00626e", "tertiary-container": "#d9c8ff", "error-container": "#93000a", "on-background": "#e0e2ea", "on-error-container": "#ffdad6", "surface": "#101419", "on-secondary-container": "#cdd7ff", "surface-bright": "#36393f", "surface-container": "#1d2025", "primary-container": "#00e5ff", "surface-tint": "#00daf3", "surface-variant": "#32353b", "tertiary": "#f2e9ff", "on-error": "#690005", "on-primary": "#00363d", "on-primary-fixed": "#001f24", "inverse-on-surface": "#2d3036", "background": "#101419", "on-secondary": "#002a78" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "gutter-lg": "1.5rem", "space-xs": "0.25rem", "space-md": "1rem", "space-lg": "1.5rem", "margin-lg": "2rem", "margin": "1rem", "space-sm": "0.5rem", "gutter": "1rem", "space-xl": "2rem" }, "fontFamily": { "body-lg": ["Inter"], "label-data": ["JetBrains Mono"], "headline-md": ["Space Grotesk"], "headline-lg": ["Space Grotesk"], "telemetry-metric-lg-mobile": ["JetBrains Mono"], "display-hero-mobile": ["Space Grotesk"], "headline-sm": ["Space Grotesk"], "telemetry-metric-md": ["JetBrains Mono"], "telemetry-metric-lg": ["JetBrains Mono"], "body-md": ["Inter"], "display-hero": ["Space Grotesk"], "label-caption": ["Inter"] }, "fontSize": { "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "500" }], "label-data": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" }], "headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }], "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }], "telemetry-metric-lg-mobile": ["36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "display-hero-mobile": ["40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }], "headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }], "telemetry-metric-md": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }], "telemetry-metric-lg": ["48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" }], "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }], "display-hero": ["56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "label-caption": ["11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" }] } } } }</script></head><body class="bg-surface-container-lowest font-body-md text-on-surface antialiased selection:bg-primary-container selection:text-on-primary"><header class="fixed top-0 w-full z-50 bg-surface-container-lowest/80 backdrop-blur-xl"><div class="h-16 w-full px-gutter-lg flex items-center justify-between"><div class="flex items-center gap-space-md"><div class="flex items-center gap-space-sm"><span class="font-headline-sm text-headline-sm uppercase text-primary tracking-tight">MotorSignal</span><span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-data text-label-caption tracking-widest uppercase">HUD OS 2.4</span></div></div><div class="flex items-center gap-space-lg"><div class="flex items-center gap-space-xs font-label-data text-label-data text-on-surface-variant"><span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span><span class="uppercase tracking-wider">Telemetry Link: Standby</span></div><div class="h-4 w-px bg-surface-container-high"></div><div class="flex items-center gap-space-xs font-label-data text-label-data text-outline"><span class="material-symbols-outlined text-[16px]">lock</span><span class="uppercase tracking-wider">Secure 256-Bit</span></div></div></div></header><main class="w-full pt-16 min-h-screen bg-surface-container-lowest flex flex-col"><div class="flex flex-col w-full relative">
|
|
<!-- Ambient Telemetry Grid Layer & Trajectory Gradients -->
|
|
<div class="absolute inset-0 pointer-events-none overflow-hidden opacity-30">
|
|
<div class="absolute -top-40 right-1/4 w-[700px] h-[700px] bg-primary-container/10 rounded-full blur-[140px]"></div>
|
|
<div class="absolute top-1/2 -left-32 w-[500px] h-[500px] bg-secondary-container/10 rounded-full blur-[120px]"></div>
|
|
<!-- Fine Tactical Grid Background -->
|
|
<svg class="absolute inset-0 w-full h-full stroke-surface-container-high/40" height="100%" width="100%">
|
|
<defs>
|
|
<pattern height="48" id="tac-grid" patternunits="userSpaceOnUse" width="48">
|
|
<path d="M 48 0 L 0 0 0 48" fill="none" stroke-dasharray="1 7" stroke-width="0.75"></path>
|
|
<circle class="text-primary/40" cx="48" cy="48" fill="currentColor" r="0.8"></circle>
|
|
</pattern>
|
|
</defs>
|
|
<rect fill="url(#tac-grid)" height="100%" width="100%"></rect>
|
|
</svg>
|
|
</div>
|
|
<!-- Sub-Header Tactical Status Ticker Strip -->
|
|
<div class="w-full bg-surface-container-lowest/90 border-b border-surface-container-high/60 backdrop-blur-md sticky top-16 z-40">
|
|
<div class="max-w-7xl mx-auto px-6 h-12 flex items-center justify-between">
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-2 font-label-data text-label-caption text-primary">
|
|
<span class="inline-block w-2 h-2 rounded-full bg-primary-container shadow-[0_0_8px_#00e5ff] animate-ping"></span>
|
|
<span class="font-bold tracking-widest">20HZ KALMAN SYNC ACTIVE</span>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-2 font-label-data text-label-caption text-on-surface-variant">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-surface-bright"></span>
|
|
<span>SECURE_PORT: <span class="text-primary font-semibold">443</span></span>
|
|
</div>
|
|
<div class="hidden lg:flex items-center gap-2 font-label-data text-label-caption text-on-surface-variant">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-surface-bright"></span>
|
|
<span>MESH NODES: <span class="text-on-surface font-semibold">142 ONLINE</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-label-data text-label-caption text-on-surface-variant hidden sm:inline">Already registered?</span>
|
|
<a class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded bg-surface-container-high hover:bg-surface-bright text-primary font-label-data text-label-caption uppercase tracking-wider transition-all duration-200" href="#signin">
|
|
<span>Sign In</span>
|
|
<span class="material-symbols-outlined text-[14px]">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main 12-Column Responsive Cockpit Grid -->
|
|
<div class="max-w-7xl mx-auto w-full px-6 py-10 relative z-10">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
|
|
<!-- LEFT COLUMN: Brand Telemetry Showcase (5 cols) -->
|
|
<div class="lg:col-span-5 flex flex-col gap-6">
|
|
<!-- Header Statement -->
|
|
<div class="flex flex-col gap-3">
|
|
<div class="inline-flex items-center gap-2 px-2.5 py-1 rounded bg-surface-container text-primary-container font-label-data text-label-caption w-fit tracking-wider uppercase">
|
|
<span class="material-symbols-outlined text-[14px]">hub</span>
|
|
<span>GRID SYNCHRONIZATION // REV 2.4</span>
|
|
</div>
|
|
<h1 class="font-headline-lg text-headline-lg text-on-surface tracking-tight uppercase">
|
|
Join The <span class="text-primary-container">Telemetry</span> Grid
|
|
</h1>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Aerospace-grade 20Hz sensor fusion, sub-degree lean analytics, and encrypted squad radar engineered specifically for aggressive street riders and circuit racers.
|
|
</p>
|
|
</div>
|
|
<!-- Telemetry Feature Cards Stack -->
|
|
<div class="flex flex-col gap-3.5">
|
|
<!-- Card 1: 20Hz IMU Logging with Lean Roll Sparkline -->
|
|
<div class="p-4 rounded-xl bg-surface-container-low shadow-sm flex flex-col gap-3 transition-transform hover:-translate-y-0.5 duration-200">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-primary-container">
|
|
<span class="material-symbols-outlined text-[18px]">screen_rotation</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-sm text-[15px] font-semibold text-on-surface leading-tight">20Hz IMU Telemetry Logging</h3>
|
|
<span class="font-label-data text-[10px] text-on-surface-variant uppercase tracking-wider">Sub-degree Lean Arc • 6-Axis Fusion</span>
|
|
</div>
|
|
</div>
|
|
<span class="font-label-data text-label-caption text-primary bg-surface-container px-2 py-0.5 rounded">0.02° ACC</span>
|
|
</div>
|
|
<!-- Roll Angle Inline SVG Visual -->
|
|
<div class="w-full bg-surface-container-lowest p-2.5 rounded-lg flex items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-[10px] text-outline uppercase">Apex Roll Angle</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary font-bold tracking-tight">54.2° <span class="font-label-data text-[11px] text-on-surface-variant font-normal">MAX LEAN</span></span>
|
|
</div>
|
|
<!-- Arc Visualization -->
|
|
<svg class="w-28 h-12 overflow-visible" viewbox="0 0 100 40">
|
|
<path class="text-surface-container-high" d="M 10 35 Q 50 5 90 35" fill="none" stroke="currentColor" stroke-width="2"></path>
|
|
<path class="text-primary-container" d="M 10 35 Q 40 12 70 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></path>
|
|
<circle class="fill-primary-container" cx="70" cy="20" r="3.5"></circle>
|
|
<circle class="fill-primary-container/20 animate-ping" cx="70" cy="20" r="6"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Cloudflare R2 Drift Schema Replays -->
|
|
<div class="p-4 rounded-xl bg-surface-container-low shadow-sm flex flex-col gap-2 transition-transform hover:-translate-y-0.5 duration-200">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined text-[18px]">cloud_sync</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-sm text-[15px] font-semibold text-on-surface leading-tight">SQLite Drift Schema 7 Replays</h3>
|
|
<span class="font-label-data text-[10px] text-on-surface-variant uppercase tracking-wider">Cloudflare R2 WAL • Forensic Cornering</span>
|
|
</div>
|
|
</div>
|
|
<span class="font-label-data text-label-caption text-secondary bg-surface-container px-2 py-0.5 rounded">ZERO LOSS</span>
|
|
</div>
|
|
<p class="font-body-md text-[13px] text-on-surface-variant leading-relaxed">
|
|
Continuous zero-dropout WAL streaming. Millisecond-accurate telemetry replays synced to corner entry, apex trail braking, and power exit.
|
|
</p>
|
|
</div>
|
|
<!-- Card 3: Waze Radar Interlock -->
|
|
<div class="p-4 rounded-xl bg-surface-container-low shadow-sm flex flex-col gap-2 transition-transform hover:-translate-y-0.5 duration-200">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-[18px]">radar</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-sm text-[15px] font-semibold text-on-surface leading-tight">Waze & Mesh Radar Interlock</h3>
|
|
<span class="font-label-data text-[10px] text-on-surface-variant uppercase tracking-wider">Crowdsourced Traps • Surface Hazards</span>
|
|
</div>
|
|
</div>
|
|
<span class="font-label-data text-label-caption text-primary-container bg-surface-container px-2 py-0.5 rounded"><850MS PING</span>
|
|
</div>
|
|
<p class="font-body-md text-[13px] text-on-surface-variant leading-relaxed">
|
|
Ultra-low latency audio helmet warnings for debris, blind-apex obstacles, and verified safety cameras prior to lean commitment.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Live Network Stats Mini-Ticker -->
|
|
<div class="grid grid-cols-3 gap-3 p-3.5 rounded-xl bg-surface-container-lowest">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-[10px] text-outline uppercase tracking-wider">Active Cockpits</span>
|
|
<span class="font-telemetry-metric-md text-[20px] text-on-surface font-bold">4,812</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-[10px] text-outline uppercase tracking-wider">Safety Interlock</span>
|
|
<span class="font-telemetry-metric-md text-[20px] text-primary-container font-bold">99.8%</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-[10px] text-outline uppercase tracking-wider">NorCal Ring</span>
|
|
<span class="font-telemetry-metric-md text-[20px] text-on-surface font-bold">142 Nodes</span>
|
|
</div>
|
|
</div>
|
|
<!-- Security / Cryptographic Badges -->
|
|
<div class="flex items-center gap-4 py-2 text-outline">
|
|
<div class="flex items-center gap-1.5 font-label-data text-[11px] uppercase tracking-wider">
|
|
<span class="material-symbols-outlined text-[16px] text-primary-fixed-dim">verified_user</span>
|
|
<span>AES-GCM-256 ENCRYPTED</span>
|
|
</div>
|
|
<div class="h-3 w-px bg-surface-container-highest"></div>
|
|
<div class="flex items-center gap-1.5 font-label-data text-[11px] uppercase tracking-wider">
|
|
<span class="material-symbols-outlined text-[16px] text-primary-fixed-dim">shield</span>
|
|
<span>FIPS 140-3 COMPLIANT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- RIGHT COLUMN: Commissioning / Registration Card (7 cols) -->
|
|
<div class="lg:col-span-7">
|
|
<div class="relative rounded-2xl bg-surface-container-low/95 p-6 sm:p-8 backdrop-blur-xl shadow-2xl overflow-hidden">
|
|
<!-- Tactical HUD Corner Accent Marks (Top-Right & Bottom-Left) -->
|
|
<div class="absolute top-0 right-0 w-16 h-16 pointer-events-none overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-8 h-1 bg-primary-container"></div>
|
|
<div class="absolute top-0 right-0 w-1 h-8 bg-primary-container"></div>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 w-16 h-16 pointer-events-none overflow-hidden">
|
|
<div class="absolute bottom-0 left-0 w-8 h-1 bg-primary-container/40"></div>
|
|
<div class="absolute bottom-0 left-0 w-1 h-8 bg-primary-container/40"></div>
|
|
</div>
|
|
<!-- Card Header & Protocol Badge -->
|
|
<div class="flex flex-col gap-2 pb-6 border-b border-surface-container-highest">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-2.5 py-0.5 rounded bg-surface-container-highest text-primary font-label-data text-label-caption tracking-widest uppercase">
|
|
ONBOARDING // PROTOCOL 01
|
|
</span>
|
|
<span class="font-label-data text-[11px] text-on-surface-variant uppercase tracking-wider flex items-center gap-1">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
STEP 1 OF 3
|
|
</span>
|
|
</div>
|
|
<h2 class="font-headline-md text-headline-md text-on-surface tracking-tight uppercase">
|
|
New Rider Commissioning
|
|
</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Initialize cryptographic hardware credentials and secure your rider telemetry handle.
|
|
</p>
|
|
</div>
|
|
<!-- Registration Form -->
|
|
<form class="mt-6 flex flex-col gap-5" id="rider-registration-form" onsubmit="event.preventDefault();">
|
|
<!-- ROW 1: Full Name & Callsign Handle (2 cols) -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<!-- Full Name -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-data text-label-caption text-on-surface-variant uppercase tracking-wider flex items-center justify-between">
|
|
<span>Full Legal Name</span>
|
|
<span class="text-outline">RIDER_ID</span>
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<span class="absolute left-3.5 material-symbols-outlined text-outline text-[18px]">person</span>
|
|
<input class="w-full h-12 pl-10 pr-3 rounded-lg bg-surface-container-lowest text-on-surface placeholder:text-outline font-body-md text-body-md focus:bg-surface-container-high focus:outline-none focus:ring-1 focus:ring-primary-container transition-all" placeholder="Marcus Vance" required="" type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- Callsign Handle -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<div class="flex items-center justify-between">
|
|
<label class="font-label-data text-label-caption text-on-surface-variant uppercase tracking-wider">
|
|
Callsign Handle
|
|
</label>
|
|
<span class="font-label-data text-[10px] text-primary-container bg-surface-container px-1.5 py-0.5 rounded uppercase tracking-wider">
|
|
CALLSIGN AVAILABLE
|
|
</span>
|
|
</div>
|
|
<div class="relative flex items-center">
|
|
<span class="absolute left-3.5 font-label-data text-primary text-[14px] font-bold">@</span>
|
|
<input class="w-full h-12 pl-9 pr-8 rounded-lg bg-surface-container-lowest text-on-surface placeholder:text-outline font-label-data text-[13px] font-semibold focus:bg-surface-container-high focus:outline-none focus:ring-1 focus:ring-primary-container transition-all" id="callsign-input" placeholder="ApexMarcus" required="" type="text" value="ApexMarcus"/>
|
|
<span class="absolute right-3 material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ROW 2: Email Address (Full Width) -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<div class="flex items-center justify-between">
|
|
<label class="font-label-data text-label-caption text-on-surface-variant uppercase tracking-wider">
|
|
Pilot Email Endpoint
|
|
</label>
|
|
<span class="font-label-data text-[10px] text-outline uppercase tracking-wider">
|
|
Encrypted OTP Dispatch
|
|
</span>
|
|
</div>
|
|
<div class="relative flex items-center">
|
|
<span class="absolute left-3.5 material-symbols-outlined text-outline text-[18px]">mail</span>
|
|
<input class="w-full h-12 pl-10 pr-3 rounded-lg bg-surface-container-lowest text-on-surface placeholder:text-outline font-body-md text-body-md focus:bg-surface-container-high focus:outline-none focus:ring-1 focus:ring-primary-container transition-all" placeholder="marcus.vance@motorsignal.io" required="" type="email"/>
|
|
</div>
|
|
</div>
|
|
<!-- ROW 3: Passphrase & Live Entropy Bar -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<div class="flex items-center justify-between">
|
|
<label class="font-label-data text-label-caption text-on-surface-variant uppercase tracking-wider">
|
|
Master Cockpit Passphrase
|
|
</label>
|
|
<span class="font-label-data text-[10px] text-primary uppercase tracking-wider">
|
|
Min. 12 Chars + Symbols
|
|
</span>
|
|
</div>
|
|
<div class="relative flex items-center">
|
|
<span class="absolute left-3.5 material-symbols-outlined text-outline text-[18px]">lock</span>
|
|
<input class="w-full h-12 pl-10 pr-12 rounded-lg bg-surface-container-lowest text-on-surface placeholder:text-outline font-body-md text-body-md focus:bg-surface-container-high focus:outline-none focus:ring-1 focus:ring-primary-container transition-all tracking-widest" id="passphrase-input" placeholder="••••••••••••" required="" type="password" value="ApexTelemetry#2024!"/>
|
|
<button aria-label="Toggle password visibility" class="absolute right-3 text-outline hover:text-on-surface p-1 transition-colors" id="toggle-password-btn" type="button">
|
|
<span class="material-symbols-outlined text-[20px]" id="eye-icon">visibility</span>
|
|
</button>
|
|
</div>
|
|
<!-- Live 4-Segment Entropy Meter Bar -->
|
|
<div class="mt-1 flex flex-col gap-1">
|
|
<div class="grid grid-cols-4 gap-1.5 w-full h-1.5">
|
|
<div class="rounded-full bg-primary-container shadow-[0_0_6px_#00e5ff]"></div>
|
|
<div class="rounded-full bg-primary-container shadow-[0_0_6px_#00e5ff]"></div>
|
|
<div class="rounded-full bg-primary-container shadow-[0_0_6px_#00e5ff]"></div>
|
|
<div class="rounded-full bg-primary-container shadow-[0_0_6px_#00e5ff]"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between font-label-data text-[10px]">
|
|
<span class="text-primary-container font-semibold tracking-wider">TELEMETRY-GRADE ENTROPY (128-BIT)</span>
|
|
<span class="text-primary tracking-widest uppercase font-bold">// SECURE STRONG</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ROW 4: Primary Motorcycle & Telemetry Sync Interface (2 cols) -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<!-- Primary Machine Selection -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-data text-label-caption text-on-surface-variant uppercase tracking-wider">
|
|
Primary Motorcycle
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<span class="absolute left-3.5 material-symbols-outlined text-outline text-[18px]">two_wheeler</span>
|
|
<select class="w-full h-12 pl-10 pr-8 rounded-lg bg-surface-container-lowest text-on-surface font-body-md text-body-md focus:bg-surface-container-high focus:outline-none focus:ring-1 focus:ring-primary-container appearance-none cursor-pointer">
|
|
<option selected="" value="panigale-v4s">2024 Ducati Panigale V4 S</option>
|
|
<option value="mt09-sp">2023 Yamaha MT-09 SP</option>
|
|
<option value="s1000rr-m">2024 BMW S1000RR M-Pack</option>
|
|
<option value="duke-890r">2023 KTM 890 Duke R</option>
|
|
<option value="street-triple-rs">2024 Triumph Street Triple 765 RS</option>
|
|
<option value="other">Custom / Other Build</option>
|
|
</select>
|
|
<span class="absolute right-3.5 material-symbols-outlined text-outline text-[18px] pointer-events-none">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Hardware Sync Link -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-data text-label-caption text-on-surface-variant uppercase tracking-wider">
|
|
Telemetry Sync Port
|
|
</label>
|
|
<div class="relative flex items-center">
|
|
<span class="absolute left-3.5 material-symbols-outlined text-outline text-[18px]">settings_input_component</span>
|
|
<select class="w-full h-12 pl-10 pr-8 rounded-lg bg-surface-container-lowest text-on-surface font-body-md text-body-md focus:bg-surface-container-high focus:outline-none focus:ring-1 focus:ring-primary-container appearance-none cursor-pointer">
|
|
<option selected="" value="ble-obdlink">BLE OBDLink (CAN-Bus Direct)</option>
|
|
<option value="phone-imu">Internal 6-Axis IMU (Phone Mount)</option>
|
|
<option value="aim-solo">AiM Solo 2 DL Bridged Hub</option>
|
|
<option value="corsa-pro">Corsa Pro V4 Direct Telemetry</option>
|
|
</select>
|
|
<span class="absolute right-3.5 material-symbols-outlined text-outline text-[18px] pointer-events-none">expand_more</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ROW 5: Riding Discipline Tactical Selector -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-data text-label-caption text-on-surface-variant uppercase tracking-wider">
|
|
Target Telemetry Discipline
|
|
</label>
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2" id="discipline-selector">
|
|
<label class="cursor-pointer">
|
|
<input checked="" class="peer sr-only" name="discipline" type="radio" value="canyon"/>
|
|
<div class="h-12 px-3 rounded-lg bg-surface-container-lowest peer-checked:bg-primary-container/20 peer-checked:text-primary-container flex items-center justify-center gap-1.5 text-on-surface-variant text-[12px] font-label-data font-semibold uppercase tracking-wider transition-all duration-150">
|
|
<span class="material-symbols-outlined text-[16px]">navigation</span>
|
|
<span>Canyon</span>
|
|
</div>
|
|
</label>
|
|
<label class="cursor-pointer">
|
|
<input class="peer sr-only" name="discipline" type="radio" value="track"/>
|
|
<div class="h-12 px-3 rounded-lg bg-surface-container-lowest peer-checked:bg-primary-container/20 peer-checked:text-primary-container flex items-center justify-center gap-1.5 text-on-surface-variant text-[12px] font-label-data font-semibold uppercase tracking-wider transition-all duration-150">
|
|
<span class="material-symbols-outlined text-[16px]">sports_score</span>
|
|
<span>Track / Pro</span>
|
|
</div>
|
|
</label>
|
|
<label class="cursor-pointer">
|
|
<input class="peer sr-only" name="discipline" type="radio" value="adv"/>
|
|
<div class="h-12 px-3 rounded-lg bg-surface-container-lowest peer-checked:bg-primary-container/20 peer-checked:text-primary-container flex items-center justify-center gap-1.5 text-on-surface-variant text-[12px] font-label-data font-semibold uppercase tracking-wider transition-all duration-150">
|
|
<span class="material-symbols-outlined text-[16px]">terrain</span>
|
|
<span>ADV / Trail</span>
|
|
</div>
|
|
</label>
|
|
<label class="cursor-pointer">
|
|
<input class="peer sr-only" name="discipline" type="radio" value="touring"/>
|
|
<div class="h-12 px-3 rounded-lg bg-surface-container-lowest peer-checked:bg-primary-container/20 peer-checked:text-primary-container flex items-center justify-center gap-1.5 text-on-surface-variant text-[12px] font-label-data font-semibold uppercase tracking-wider transition-all duration-150">
|
|
<span class="material-symbols-outlined text-[16px]">motorcycle</span>
|
|
<span>Cruiser</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- ROW 6: Checkbox & Mesh Consent Toggle -->
|
|
<div class="flex flex-col gap-3 pt-2">
|
|
<!-- Consent Checkbox 1 -->
|
|
<label class="flex items-start gap-3 cursor-pointer group">
|
|
<input checked="" class="mt-0.5 w-4 h-4 rounded bg-surface-container-lowest text-primary-container focus:ring-0 accent-primary-container" required="" type="checkbox"/>
|
|
<span class="font-body-md text-[13px] text-on-surface-variant leading-relaxed">
|
|
I accept the Rider Protocol, End User Agreement, and the <a class="text-primary underline hover:text-primary-container transition-colors" href="#privacy">Telemetry Data Sovereignty & GDPR Charter</a>.
|
|
</span>
|
|
</label>
|
|
<!-- Optional Mesh Toggle -->
|
|
<div class="p-3 rounded-lg bg-surface-container-lowest flex items-center justify-between gap-4">
|
|
<div class="flex items-center gap-2.5">
|
|
<span class="material-symbols-outlined text-primary-container text-[20px]">share_location</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-[12px] text-on-surface font-semibold">Decentralized Mesh Road Hazards</span>
|
|
<span class="font-body-md text-[11px] text-on-surface-variant">Contribute real-time surface slip & hazard data to pack riders</span>
|
|
</div>
|
|
</div>
|
|
<!-- 32x56px Rocker Switch -->
|
|
<label class="relative inline-flex items-center cursor-pointer shrink-0">
|
|
<input checked="" class="sr-only peer" id="mesh-toggle" type="checkbox"/>
|
|
<div class="w-14 h-8 bg-surface-container-high peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-6 peer-checked:after:border-surface-container-lowest after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-on-surface after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-primary-container peer-checked:after:bg-surface-container-lowest"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- Primary Submission CTA -->
|
|
<button class="w-full h-14 mt-2 rounded-xl bg-primary-container text-surface-container-lowest font-label-data text-[13px] font-bold uppercase tracking-widest flex items-center justify-center gap-2 hover:bg-primary transition-all duration-200 shadow-[0_0_24px_rgba(0,229,255,0.4)] active:scale-[0.99]" type="submit">
|
|
<span>Create Rider Account & Claim Callsign</span>
|
|
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
|
</button>
|
|
<!-- OAuth Divider & Alternate Sign In -->
|
|
<div class="flex items-center gap-3 my-1">
|
|
<div class="h-px bg-surface-container-highest flex-1"></div>
|
|
<span class="font-label-data text-[10px] text-outline uppercase tracking-widest">Or Register With</span>
|
|
<div class="h-px bg-surface-container-highest flex-1"></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button class="h-12 px-4 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-label-data text-[11px] font-semibold uppercase tracking-wider flex items-center justify-center gap-2 transition-colors duration-150" type="button">
|
|
<svg class="w-4 h-4 fill-current" viewbox="0 0 24 24">
|
|
<path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"></path>
|
|
</svg>
|
|
<span>Google</span>
|
|
</button>
|
|
<button class="h-12 px-4 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-label-data text-[11px] font-semibold uppercase tracking-wider flex items-center justify-center gap-2 transition-colors duration-150" type="button">
|
|
<svg class="w-4 h-4 fill-current" viewbox="0 0 24 24">
|
|
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.37c.61-.75 1.04-1.8 1.01-2.87-.96.04-2.14.65-2.8 1.42-.58.66-1.09 1.73-1.04 2.78 1.08.08 2.22-.58 2.83-1.33z"></path>
|
|
</svg>
|
|
<span>Apple ID</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<!-- Card Bottom Verification Note -->
|
|
<div class="mt-6 pt-4 border-t border-surface-container-highest flex items-center justify-between text-outline font-label-data text-[11px]">
|
|
<span>SYSTEM ENCLAVE: SEC-256</span>
|
|
<a class="text-primary hover:text-primary-container font-semibold uppercase tracking-wider transition-colors" href="#login">
|
|
Already verified? Sign In →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Interactive script for UX micro-interactions -->
|
|
<script>
|
|
(function() {
|
|
const togglePassBtn = document.getElementById('toggle-password-btn');
|
|
const passInput = document.getElementById('passphrase-input');
|
|
const eyeIcon = document.getElementById('eye-icon');
|
|
|
|
if (togglePassBtn && passInput && eyeIcon) {
|
|
togglePassBtn.addEventListener('click', function() {
|
|
const isPass = passInput.getAttribute('type') === 'password';
|
|
passInput.setAttribute('type', isPass ? 'text' : 'password');
|
|
eyeIcon.textContent = isPass ? 'visibility_off' : 'visibility';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</div></main></body></html> |