606 lines
48 KiB
HTML
606 lines
48 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_standard" name="shell-type"/><title>MotorSignal Telemetry</title><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:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" 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": { "on-tertiary": "#3c0091", "on-primary": "#00363d", "error-container": "#93000a", "on-secondary": "#002a78", "inverse-on-surface": "#2d3036", "on-error-container": "#ffdad6", "secondary-fixed": "#dbe1ff", "surface-container-low": "#181c21", "outline-variant": "#3b494c", "surface-variant": "#32353b", "background": "#101419", "on-surface-variant": "#bac9cc", "on-surface": "#e0e2ea", "on-background": "#e0e2ea", "on-primary-container": "#00626e", "on-secondary-container": "#cdd7ff", "primary-container": "#00e5ff", "primary": "#c3f5ff", "on-primary-fixed-variant": "#004f58", "on-primary-fixed": "#001f24", "tertiary": "#f2e9ff", "on-tertiary-fixed-variant": "#5516be", "surface-container-high": "#272a30", "surface-dim": "#101419", "primary-fixed": "#9cf0ff", "tertiary-fixed": "#e9ddff", "on-secondary-fixed": "#00174b", "error": "#ffb4ab", "on-secondary-fixed-variant": "#003ea8", "on-error": "#690005", "inverse-primary": "#006875", "inverse-surface": "#e0e2ea", "surface-container-highest": "#32353b", "secondary": "#b4c5ff", "surface": "#101419", "tertiary-container": "#d9c8ff", "surface-bright": "#36393f", "secondary-container": "#0053db", "on-tertiary-fixed": "#23005c", "surface-container": "#1d2025", "surface-container-lowest": "#0b0e13", "on-tertiary-container": "#6834d1", "secondary-fixed-dim": "#b4c5ff", "outline": "#849396", "surface-tint": "#00daf3", "primary-fixed-dim": "#00daf3", "tertiary-fixed-dim": "#d0bcff" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "margin": "1rem", "gutter-lg": "1.5rem", "space-md": "1rem", "space-xs": "0.25rem", "space-lg": "1.5rem", "space-xl": "2rem", "space-sm": "0.5rem", "margin-lg": "2rem", "gutter": "1rem" }, "fontFamily": { "body-md": ["Inter"], "display-hero": ["Space Grotesk"], "label-data": ["JetBrains Mono"], "telemetry-metric-lg-mobile": ["JetBrains Mono"], "headline-lg": ["Space Grotesk"], "telemetry-metric-lg": ["JetBrains Mono"], "label-caption": ["Inter"], "headline-sm": ["Space Grotesk"], "headline-md": ["Space Grotesk"], "body-lg": ["Inter"], "telemetry-metric-md": ["JetBrains Mono"], "display-hero-mobile": ["Space Grotesk"] }, "fontSize": { "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }], "display-hero": ["56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "label-data": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" }], "telemetry-metric-lg-mobile": ["36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" }], "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }], "telemetry-metric-lg": ["48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" }], "label-caption": ["11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" }], "headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }], "headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }], "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "500" }], "telemetry-metric-md": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }], "display-hero-mobile": ["40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }] } } } };</script></head><body class="bg-surface text-on-surface font-body-md antialiased selection:bg-primary-container selection:text-on-primary"><header class="fixed top-0 left-0 right-0 z-50 bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.4)]"><div class="h-20 w-full px-gutter-lg flex items-center justify-between gap-space-md"><div class="flex items-center gap-space-lg"><a class="flex items-center gap-space-sm group" href="#"><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/AEtjO1UTw8rBQQ-sNGfIk81zYX1u7rT7_IcgGT6GjJCfVJDKecDfGr1MrPEVgjII5_MK3wj6tO6Qw2ZfHhqwrKxHdNrJUGxFOlXalVgFnDtgpjoNDSFtltDk6syCaK_mTdC1xPJqngCTTc2T43fBqyYBnwQANHFTwwGJ646jmbPtJavdn15iGT6wqfLaoJpDew60SUt_hG1nouBFUYDMxOiNIIgnWfkgJ04aTmmTNXr6Ca7776OBqr3haTpFHQ"/><span class="font-headline-sm text-headline-sm uppercase tracking-wider text-primary group-hover:text-primary-container transition-colors">MotorSignal</span></a><nav class="hidden xl:flex items-center gap-space-md" data-active-classes="text-primary-container font-headline-sm"><a aria-current="page" class="uppercase tracking-wider transition-colors px-space-xs py-space-xs text-primary-container font-headline-sm" data-path="features" href="#">Features</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="group-rides" href="#">Group Rides</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="clubs" href="#">Clubs</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="pricing" href="#">Pricing</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="download" href="#">Download</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="support" href="#">Support</a><a class="text-on-surface-variant font-label-data text-label-data uppercase tracking-wider hover:text-on-surface transition-colors px-space-xs py-space-xs" data-path="admin-console" href="#">Admin Console</a></nav></div><div class="flex items-center gap-space-md"><div class="hidden md:flex items-center gap-space-xs px-space-sm py-space-xs rounded-full bg-surface-container-low shadow-[0_0_12px_rgba(0,229,255,0.15)]"><span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span><span class="font-label-data text-label-data text-primary uppercase">20Hz Kalman Online</span></div><a class="inline-flex items-center justify-center h-12 px-space-md rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider shadow-[0_0_16px_rgba(0,229,255,0.35)] hover:bg-primary hover:text-on-primary transition-all duration-200 active:scale-[0.98]" href="#">Download App</a><div class="flex items-center gap-space-xs pl-space-xs"><img alt="Profile" class="w-8 h-8 rounded-full object-cover ring-2 ring-surface-container-high" src="https://lh3.googleusercontent.com/aida/AEtjO1XyAAxLiegDwfGfDOfnmd9desjMVj3kxU_bPrvNgMXtcbq65IhKW7uieorRmFWWL7_4VvnpTq8N2pToWOm8TSGRSiftlbFyjQPawmL20y9w0BQJjvgVum3Q8IdqGLli9RZ-16Yv2wJ36FHEwrk4T1IQTob8mc_BjN7g9c3Ic_Xz0pzHgZVxjjahryKv77ULhtLXK5wYZadicArshGkykAEqRbTPZfDNZ-YNLSAN51PoR4wbt46K46HLSvs"/></div></div></div></header><main class="w-full pt-20 bg-surface min-h-[calc(100vh-80px)]"><div class="flex flex-col w-full">
|
|
<!-- HERO SECTION -->
|
|
<section class="relative w-full overflow-hidden px-margin md:px-margin-lg lg:px-gutter-lg pt-space-lg pb-space-xl">
|
|
<!-- Ambient living background glow -->
|
|
<div class="absolute -top-32 left-1/4 w-[500px] h-[500px] bg-gradient-to-br from-primary-container/15 via-secondary-container/10 to-transparent blur-3xl pointer-events-none rounded-full"></div>
|
|
<div class="absolute top-1/2 -right-24 w-[420px] h-[420px] bg-gradient-to-tr from-on-tertiary-container/15 via-primary-container/10 to-transparent blur-3xl pointer-events-none rounded-full"></div>
|
|
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-space-lg lg:gap-space-xl items-center relative z-10">
|
|
<!-- Left Column: Vision & Primary Calls to Action (7 cols) -->
|
|
<div class="lg:col-span-7 flex flex-col gap-space-md">
|
|
<!-- System Status Pill -->
|
|
<div class="inline-flex items-center gap-space-xs px-space-sm py-space-xs rounded-full bg-surface-container-high w-fit shadow-md">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-ping"></span>
|
|
<span class="font-label-data text-label-data text-primary uppercase tracking-wider">AEROSPACE-GRADE MOTORCYCLE TELEMETRY • V1.0.2 STABLE</span>
|
|
</div>
|
|
<!-- Headline -->
|
|
<h1 class="font-display-hero text-display-hero text-on-surface tracking-tight">
|
|
High-Fidelity Telemetry for <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-primary-container to-secondary">Every Corner</span>
|
|
</h1>
|
|
<!-- Subtitle -->
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
|
|
Experience 20 Hz Kalman sensor fusion, sub-second apex forensic analysis, verified Waze police traps, and offline ad-hoc pack mesh radar engineered for unyielding precision.
|
|
</p>
|
|
<!-- CTA Cluster -->
|
|
<div class="flex flex-wrap items-center gap-space-md pt-space-xs">
|
|
<a class="inline-flex items-center justify-center gap-space-xs h-[52px] px-space-lg rounded-xl bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider shadow-[0_0_24px_rgba(0,229,255,0.4)] hover:bg-primary transition-all duration-200 active:scale-95" href="#download">
|
|
<span class="material-symbols-outlined text-lg">download</span>
|
|
Download Android APK (v1.0.2)
|
|
</a>
|
|
<a class="inline-flex items-center justify-center gap-space-xs h-[52px] px-space-lg rounded-xl bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider hover:bg-surface-bright transition-all duration-200" href="#specs">
|
|
<span class="material-symbols-outlined text-lg">terminal</span>
|
|
Explore Engineering Specs
|
|
</a>
|
|
</div>
|
|
<!-- Ecosystem Platforms Verification -->
|
|
<div class="flex items-center gap-space-lg pt-space-xs">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-primary-container text-lg">verified</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Google Play Verified</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-secondary text-lg">flight_takeoff</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Apple TestFlight Ready</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-primary text-lg">speed</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">20Hz IMU Precision</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: 3D Angled Glass Cockpit HUD Phone Mockup (5 cols) -->
|
|
<div class="lg:col-span-5 relative flex justify-center perspective-[1200px]">
|
|
<!-- Tactile Cockpit HUD Housing Mockup with dynamic glow -->
|
|
<div class="w-full max-w-sm rounded-3xl bg-surface-container-lowest p-space-sm shadow-2xl relative transition-all duration-500 hover:rotate-0 rotate-1 md:rotate-2">
|
|
<!-- Outer Neon Precision Edge -->
|
|
<div class="rounded-[22px] bg-surface-container-low p-space-md flex flex-col gap-space-sm relative overflow-hidden">
|
|
<!-- Live Status Ribbon -->
|
|
<div class="flex items-center justify-between">
|
|
<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 text-primary uppercase">RADAR LOCK • GPS 20Hz</span>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">CANBUS: OK</span>
|
|
</div>
|
|
<!-- Urgent Hazard Alert Banner -->
|
|
<div class="flex items-center gap-space-xs px-space-sm py-space-xs rounded-lg bg-error-container text-on-error-container shadow-[0_0_16px_rgba(239,68,68,0.4)]">
|
|
<span class="material-symbols-outlined text-base animate-bounce">radar</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-label-data uppercase font-bold tracking-wider leading-none">POLICE TRAP AHEAD • 350M</span>
|
|
<span class="font-label-caption text-label-caption opacity-80 uppercase leading-none mt-0.5">Waze Peer Confirmed: Laser Radar</span>
|
|
</div>
|
|
</div>
|
|
<!-- Central HUD Gauge Module -->
|
|
<div class="flex flex-col items-center justify-center py-space-md bg-surface-container rounded-xl relative">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-widest">Ground Velocity</span>
|
|
<div class="flex items-baseline gap-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-primary-container leading-none">68</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">MPH</span>
|
|
</div>
|
|
<!-- Subtle dynamic rev counter bar -->
|
|
<div class="w-4/5 h-1.5 bg-surface-container-highest rounded-full mt-space-xs overflow-hidden flex">
|
|
<div class="h-full bg-primary-container w-[72%]"></div>
|
|
<div class="h-full bg-error-container w-[10%]"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Lean Arc & G-Force Split Screen -->
|
|
<div class="grid grid-cols-2 gap-space-sm">
|
|
<!-- Lean Angle HUD Tile -->
|
|
<div class="flex flex-col items-center p-space-sm bg-surface-container rounded-xl relative">
|
|
<div class="flex items-center justify-between w-full">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Lean Angle</span>
|
|
<span class="font-label-data text-label-data text-secondary">R-APEX</span>
|
|
</div>
|
|
<!-- Dynamic Lean SVG Arc -->
|
|
<div class="relative w-24 h-16 flex items-center justify-center my-space-xs">
|
|
<svg class="w-full h-full" viewbox="0 0 100 60">
|
|
<path class="text-surface-container-highest" d="M 10 50 A 40 40 0 0 1 90 50" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="6"></path>
|
|
<path class="text-primary-container" d="M 50 50 A 40 40 0 0 1 88 42" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="6"></path>
|
|
<line class="text-primary" stroke="currentColor" stroke-linecap="round" stroke-width="2.5" x1="50" x2="84" y1="50" y2="28"></line>
|
|
</svg>
|
|
<span class="absolute bottom-0 font-telemetry-metric-md text-telemetry-metric-md text-on-surface leading-none">49°</span>
|
|
</div>
|
|
<span class="font-label-caption text-label-caption text-primary-container uppercase">Optimal Friction</span>
|
|
</div>
|
|
<!-- G-Force Friction Circle Tile -->
|
|
<div class="flex flex-col items-center p-space-sm bg-surface-container rounded-xl">
|
|
<div class="flex items-center justify-between w-full">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Friction G</span>
|
|
<span class="font-label-data text-label-data text-primary-container">0.84G</span>
|
|
</div>
|
|
<!-- Mini Friction Target Diagram -->
|
|
<div class="relative w-20 h-16 flex items-center justify-center my-space-xs">
|
|
<div class="w-14 h-14 rounded-full bg-surface-container-low flex items-center justify-center relative">
|
|
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center">
|
|
<!-- Active G dot -->
|
|
<div class="w-2.5 h-2.5 rounded-full bg-primary-container translate-x-2 translate-y-1 shadow-[0_0_8px_#00e5ff]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Lat: +0.72G • Lon: -0.41G</span>
|
|
</div>
|
|
</div>
|
|
<!-- Interlock Mode Live Badge -->
|
|
<div class="flex items-center justify-between px-space-sm py-space-xs rounded-lg bg-surface-container-lowest">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-secondary text-sm">volume_off</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Safety Lean Mute</span>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-primary">ACTIVE (>15°)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- LIVE TELEMETRY METRIC STRIP -->
|
|
<section class="w-full px-margin md:px-margin-lg lg:px-gutter-lg py-space-lg bg-surface-container-lowest">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-space-md">
|
|
<!-- Metric Card 1 -->
|
|
<div class="p-space-md rounded-2xl bg-surface-container flex flex-col gap-space-xs shadow-md transition-all hover:bg-surface-container-high">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary-container uppercase">Kalman Core</span>
|
|
<span class="material-symbols-outlined text-primary text-base">sensors</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs mt-space-xs">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">20 Hz</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">IMU ACQUISITION</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mt-space-xs">
|
|
20x sample fidelity vs standard 1 Hz phone GPS. Eliminates signal jitter through high-order Kalman sensor fusion.
|
|
</p>
|
|
</div>
|
|
<!-- Metric Card 2 -->
|
|
<div class="p-space-md rounded-2xl bg-surface-container flex flex-col gap-space-xs shadow-md transition-all hover:bg-surface-container-high">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary-container uppercase">Apex Resolution</span>
|
|
<span class="material-symbols-outlined text-primary text-base">timer</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs mt-space-xs">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">0.05s</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">CADENCE</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mt-space-xs">
|
|
Forensic millisecond trace recording. Dissect entry speed, trail braking limits, and corner-exit throttle delivery.
|
|
</p>
|
|
</div>
|
|
<!-- Metric Card 3 -->
|
|
<div class="p-space-md rounded-2xl bg-surface-container flex flex-col gap-space-xs shadow-md transition-all hover:bg-surface-container-high">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary-container uppercase">Storage Engine</span>
|
|
<span class="material-symbols-outlined text-primary text-base">cloud_off</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs mt-space-xs">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">100%</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">OFFLINE DRIFT</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mt-space-xs">
|
|
Zero cellular dropouts. Embedded SQLite Drift Schema 7 engine logs continuous session vectors deep in canyon dead zones.
|
|
</p>
|
|
</div>
|
|
<!-- Metric Card 4 -->
|
|
<div class="p-space-md rounded-2xl bg-surface-container flex flex-col gap-space-xs shadow-md transition-all hover:bg-surface-container-high">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary-container uppercase">IMU Friction</span>
|
|
<span class="material-symbols-outlined text-primary text-base">adjust</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs mt-space-xs">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">0.01g</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">LAT ACCURACY</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface-variant mt-space-xs">
|
|
Precise lateral and longitudinal friction circle instrumentation calibrated directly to road camber and bike geometry.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- INTERACTIVE LEAN ANGLE PHYSICS & SAFETY INTERLOCK SECTION -->
|
|
<section class="w-full px-margin md:px-margin-lg lg:px-gutter-lg py-space-xl" id="specs">
|
|
<div class="max-w-7xl mx-auto flex flex-col gap-space-lg">
|
|
<!-- Section Header -->
|
|
<div class="flex flex-col gap-space-xs max-w-3xl">
|
|
<div class="inline-flex items-center gap-space-xs">
|
|
<span class="font-label-data text-label-data text-primary-container uppercase">Dynamic Safety Matrix</span>
|
|
<span class="w-12 h-[1px] bg-primary-container"></span>
|
|
</div>
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">
|
|
Lean Angle Physics & Dynamic Acoustic Interlock
|
|
</h2>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">
|
|
Cockpit alerts must adapt to high-risk flight phases. MotorSignal constantly monitors roll dynamics to suppress cognitive clutter at maximum apex commitment.
|
|
</p>
|
|
</div>
|
|
<!-- Main Visualizer Bento Card -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-space-lg items-stretch">
|
|
<!-- Left: Interactive Banking Angle Visualizer (7 cols) -->
|
|
<div class="lg:col-span-7 p-space-lg rounded-3xl bg-surface-container-low flex flex-col justify-between shadow-xl">
|
|
<div>
|
|
<div class="flex items-center justify-between mb-space-md">
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Interactive Angle Simulator</span>
|
|
<span class="px-space-sm py-space-xs rounded-md bg-surface-container font-label-data text-label-data text-primary-container uppercase" id="lean-category">Aggressive Apex (42°)</span>
|
|
</div>
|
|
<!-- Big Interactive Display Gauge -->
|
|
<div class="flex flex-col items-center justify-center py-space-lg relative">
|
|
<div class="w-64 h-36 relative flex items-end justify-center overflow-hidden">
|
|
<!-- Semicircle Guide SVG -->
|
|
<svg class="w-full h-full" viewbox="0 0 200 110">
|
|
<path class="text-surface-container-highest" d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="12"></path>
|
|
<!-- Danger zone (>50) -->
|
|
<path class="text-error" d="M 155 45 A 80 80 0 0 1 180 100" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="12"></path>
|
|
<!-- Active dynamic needle line -->
|
|
<line class="text-primary-container transition-all duration-150" id="needle" stroke="currentColor" stroke-linecap="round" stroke-width="4" x1="100" x2="160" y1="100" y2="40"></line>
|
|
<circle class="text-primary-container" cx="100" cy="100" fill="currentColor" r="8"></circle>
|
|
</svg>
|
|
</div>
|
|
<!-- Numeric Telemetry Value -->
|
|
<div class="flex items-baseline gap-space-xs mt-space-sm">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface" id="lean-value">42</span>
|
|
<span class="font-label-data text-label-data text-primary-container">° DEGREES</span>
|
|
</div>
|
|
</div>
|
|
<!-- Interactive Slider Input -->
|
|
<div class="flex flex-col gap-space-xs px-space-md mt-space-md">
|
|
<div class="flex items-center justify-between font-label-data text-label-data text-on-surface-variant uppercase">
|
|
<span>0° Upright</span>
|
|
<span>15° Interlock Active</span>
|
|
<span>55° Knee Down</span>
|
|
</div>
|
|
<input class="w-full h-3 bg-surface-container-highest rounded-lg appearance-none cursor-pointer accent-primary-container focus:outline-none" id="lean-range" max="55" min="0" type="range" value="42"/>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Telemetry State Output -->
|
|
<div class="grid grid-cols-3 gap-space-sm mt-space-lg pt-space-md bg-surface-container rounded-2xl p-space-sm">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Audio Status</span>
|
|
<span class="font-label-data text-label-data text-error font-semibold uppercase" id="audio-state">SUPPRESSED</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">HUD Target</span>
|
|
<span class="font-label-data text-label-data text-primary uppercase">APEX FOCUSED</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Camber Offset</span>
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">+1.2° COMPENSATED</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Safety Lean Mute Interlock Detail (5 cols) -->
|
|
<div class="lg:col-span-5 p-space-lg rounded-3xl bg-surface-container flex flex-col justify-between shadow-xl">
|
|
<div class="flex flex-col gap-space-md">
|
|
<div class="w-12 h-12 rounded-2xl bg-secondary-container flex items-center justify-center text-on-secondary">
|
|
<span class="material-symbols-outlined text-2xl">hearing_disabled</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">
|
|
Safety Lean Mute Interlock
|
|
</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
High banking angles demand complete cognitive bandwidth. MotorSignal's proprietary safety interlock instantaneously suppresses audio notifications, chime streams, and non-critical comms whenever roll exceeds <span class="text-primary font-semibold">15°</span>.
|
|
</p>
|
|
<div class="flex flex-col gap-space-sm pt-space-xs">
|
|
<div class="flex items-start gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary-container text-lg mt-0.5">check_circle</span>
|
|
<p class="font-body-md text-body-md text-on-surface">Automatic audio resumption 1.2s after motorcycle vertical re-stabilization (<10°).</p>
|
|
</div>
|
|
<div class="flex items-start gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary-container text-lg mt-0.5">check_circle</span>
|
|
<p class="font-body-md text-body-md text-on-surface">Emergency red-flag hazard alerts pierce through interlock threshold via high-frequency haptic pulses.</p>
|
|
</div>
|
|
<div class="flex items-start gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary-container text-lg mt-0.5">check_circle</span>
|
|
<p class="font-body-md text-body-md text-on-surface">Eliminates helmet intercom distractions precisely at apex clipping points.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-space-sm rounded-xl bg-surface-container-high mt-space-md flex items-center gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary-container">shield</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Meets FIM Superbike telemetry latency compliance safety margins.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- 3 CORE VALUE PILLARS -->
|
|
<section class="w-full px-margin md:px-margin-lg lg:px-gutter-lg py-space-xl bg-surface-container-lowest">
|
|
<div class="max-w-7xl mx-auto flex flex-col gap-space-xl">
|
|
<div class="flex flex-col items-center text-center gap-space-xs max-w-2xl mx-auto">
|
|
<span class="font-label-data text-label-data text-primary-container uppercase tracking-widest">Engineered Precision</span>
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Three Foundations of Cockpit Dominance</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Built from the ground up for extreme vibration environments, gloved inputs, and zero cellular trust.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-space-lg">
|
|
<!-- Pillar 1: Tactical Cockpit HUD -->
|
|
<div class="p-space-lg rounded-3xl bg-surface-container flex flex-col justify-between gap-space-md hover:bg-surface-container-high transition-all">
|
|
<div class="flex flex-col gap-space-md">
|
|
<div class="w-12 h-12 rounded-2xl bg-surface-container-highest flex items-center justify-center text-primary-container">
|
|
<span class="material-symbols-outlined text-2xl">dashboard</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface">Tactical Cockpit HUD</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Switch effortlessly between Minimal, Sport, and Touring cockpit dashboards. Oversized 48px hit zones guarantee swift gloved interactions even at triple-digit speeds.
|
|
</p>
|
|
</div>
|
|
<div class="p-space-sm rounded-2xl bg-surface-container-low flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between font-label-caption text-label-caption text-on-surface-variant uppercase">
|
|
<span>View Mode</span>
|
|
<span class="text-primary-container">High Sunlight OLED Contrast</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs pt-1">
|
|
<span class="px-space-xs py-0.5 rounded bg-surface-container-highest font-label-data text-label-data text-primary">SPORT</span>
|
|
<span class="px-space-xs py-0.5 rounded bg-surface font-label-data text-label-data text-on-surface-variant">MINIMAL</span>
|
|
<span class="px-space-xs py-0.5 rounded bg-surface font-label-data text-label-data text-on-surface-variant">TOURING</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pillar 2: Real-Time Police & Camera Swarm -->
|
|
<div class="p-space-lg rounded-3xl bg-surface-container flex flex-col justify-between gap-space-md hover:bg-surface-container-high transition-all">
|
|
<div class="flex flex-col gap-space-md">
|
|
<div class="w-12 h-12 rounded-2xl bg-surface-container-highest flex items-center justify-center text-error">
|
|
<span class="material-symbols-outlined text-2xl">fmd_bad</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface">Real-Time Police Swarm</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Multi-source verified Waze speed traps, fixed laser gantries, and stationary cruisers. Filter false positives through algorithmic peer confidence weighting.
|
|
</p>
|
|
</div>
|
|
<div class="p-space-sm rounded-2xl bg-surface-container-low flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between font-label-caption text-label-caption text-on-surface-variant uppercase">
|
|
<span>Radar Trap Filter</span>
|
|
<span class="text-error font-semibold">CONFIRMED 98.4%</span>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-1">
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">Direct Waze Mesh Pipe</span>
|
|
<span class="font-label-data text-label-data text-primary"><850ms Latency</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pillar 3: Live Pack Mesh Radar -->
|
|
<div class="p-space-lg rounded-3xl bg-surface-container flex flex-col justify-between gap-space-md hover:bg-surface-container-high transition-all">
|
|
<div class="flex flex-col gap-space-md">
|
|
<div class="w-12 h-12 rounded-2xl bg-surface-container-highest flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined text-2xl">hub</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface">Live Pack Mesh Radar</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Keep the pack synchronized without mobile network towers. Ad-hoc peer-to-peer radio mesh broadcasts group formations, gap splits, and instant hazard alerts.
|
|
</p>
|
|
</div>
|
|
<div class="p-space-sm rounded-2xl bg-surface-container-low flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between font-label-caption text-label-caption text-on-surface-variant uppercase">
|
|
<span>Formation Protocol</span>
|
|
<span class="text-secondary font-semibold">12 PEERS LINKED</span>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-1">
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">One-Tap Hazard Signal</span>
|
|
<span class="font-label-data text-label-data text-primary">0.02s Propagation</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- TESTIMONIAL & COMMUNITY SOCIAL PROOF -->
|
|
<section class="w-full px-margin md:px-margin-lg lg:px-gutter-lg py-space-xl">
|
|
<div class="max-w-7xl mx-auto flex flex-col gap-space-lg">
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-space-md">
|
|
<div class="flex flex-col gap-space-xs max-w-xl">
|
|
<span class="font-label-data text-label-data text-primary-container uppercase tracking-widest">Track & Road Verification</span>
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Proven by Riders Who Push the Envelope</h2>
|
|
</div>
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="font-label-data text-label-data text-primary">OVER 4.2M KM LOGGED</span>
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">GLOBAL SESSIONS</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-space-md">
|
|
<!-- Card 1 -->
|
|
<div class="p-space-md rounded-2xl bg-surface-container flex flex-col justify-between gap-space-md shadow-md">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-center gap-space-xs text-primary-container">
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface italic">
|
|
“The Safety Lean Mute feature is game-changing. In fast sweepers on Turn 4 at Laguna Seca, voice cues mute instantly so my mind stays totally on front tire grip.”
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<div class="flex items-center gap-space-sm">
|
|
<img class="w-10 h-10 rounded-full object-cover" data-alt="Close-up portrait of a track day motorcycle racer wearing full leather suit and carbon helmet visor resting on paddock table with neon cyan reflections" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCKngejdZ_85S3s8_r388dRfefUuVH1P0AR-SeeHjNBl29oClBsQlHj7UkMuWr13KXVovEteZE_o2XDZteDFhe5quTs-TwAbDUA2PqeIOis4JKqpuaBNEjN84Bh_xcrMC5WsfpMujfy87TM2gDBaot7PNd6Y7Br36-bYkJGWpBPD5Vs5MDIE721UeW9EKagVLXOf7OFhzMlIEHHJGQWQQ1cs5ie31dqsjZlEnsKxOqMC5FeJQhQ2RJU"/>
|
|
<div class="flex flex-col">
|
|
<span class="font-headline-sm text-sm text-on-surface">Marcus Vance</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Ducati Panigale V4 S</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Max Lean</span>
|
|
<span class="font-label-data text-label-data text-primary-container">54.2°</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2 -->
|
|
<div class="p-space-md rounded-2xl bg-surface-container flex flex-col justify-between gap-space-md shadow-md">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-center gap-space-xs text-primary-container">
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface italic">
|
|
“We manage pack rides of 14 bikes through the Rockies. Mesh radar kept our formation unified even when cellular coverage dropped out completely for three hours.”
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<div class="flex items-center gap-space-sm">
|
|
<img class="w-10 h-10 rounded-full object-cover" data-alt="Rugged road captain standing next to an adventure sport motorcycle at dusk with glowing tail lights and helmet on handlebar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBmvrci29u-2yWm_PfbbIMhCUQue3Ke6cIY0NH1f6SPmvrqouv0xCVk932nGkzmHmTjuzBYb6phtl8c1EV03lTfGfAQfdLVCMrW9w9ICvw8wpJvrjQCK-gR1g_NxJgurEMYtrrCYxTSIy-wBPSNf0n4hIHDytYX_s6d8MFhbz3zWD11FOp6QbOpx-QX5_3dJXF6r3TWVlzD_yLqiGylO1zqlJ_evfItQmgAS0nVtehmNTQdbWDseGOe"/>
|
|
<div class="flex flex-col">
|
|
<span class="font-headline-sm text-sm text-on-surface">Elena Rostova</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">BMW S1000RR M-Pack</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Max Lean</span>
|
|
<span class="font-label-data text-label-data text-primary-container">51.8°</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3 -->
|
|
<div class="p-space-md rounded-2xl bg-surface-container flex flex-col justify-between gap-space-md shadow-md">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-center gap-space-xs text-primary-container">
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
<span class="material-symbols-outlined text-sm">star</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface italic">
|
|
“The 20Hz sensor fusion exposes every flaw in my trail braking. I dropped 1.8 seconds off my home circuit time after auditing three session overlays in the Drift Schema.”
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<div class="flex items-center gap-space-sm">
|
|
<img class="w-10 h-10 rounded-full object-cover" data-alt="Motorcycle track engineer holding diagnostic tablet in pit garage with aerodynamic sports bike under sharp LED overhead lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3GnTcHi024W-SqIa2YlpHvUmlKbWRtaUi8XG0wOePGDw3sGE4rDAxFaDPrQhREkcv6qKV-G75qeZsxb1fGS9ZK6VvIZ8zpZUqIteu6HyAsL7K0as51GYuz_RW4NH54YOMHrwJmwo6-R69WNXs3KrQSSDYJsfVd6VEZumDRZM-IvGyKGaV3tut2QIxCAlqilEFWc6vAxZxYBzYdkpQZFw8-GDl7mE8KGSr9lJVPkuEku4Dv89LV0A8"/>
|
|
<div class="flex flex-col">
|
|
<span class="font-headline-sm text-sm text-on-surface">Taro Takahashi</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Yamaha YZF-R1M</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Max Lean</span>
|
|
<span class="font-label-data text-label-data text-primary-container">53.6°</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- HIGH-IMPACT CONVERSION BANNER -->
|
|
<section class="w-full px-margin md:px-margin-lg lg:px-gutter-lg pb-space-xl" id="download">
|
|
<div class="max-w-7xl mx-auto rounded-3xl bg-surface-container-high p-space-lg lg:p-space-xl relative overflow-hidden shadow-2xl">
|
|
<!-- Ambient backing lights -->
|
|
<div class="absolute -right-16 -top-16 w-80 h-80 bg-primary-container/20 blur-3xl rounded-full pointer-events-none"></div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-space-lg items-center relative z-10">
|
|
<div class="lg:col-span-8 flex flex-col gap-space-md">
|
|
<div class="inline-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 text-primary-container uppercase">Zero Cellular Lag • Direct Hardware APK</span>
|
|
</div>
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">
|
|
Equip Your Cockpit with Aerospace-Grade Telemetry
|
|
</h2>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
|
|
Download the verified release APK directly or scan with your cockpit mobile unit to sync instantly across all bike mounts.
|
|
</p>
|
|
<div class="flex flex-wrap items-center gap-space-md pt-space-xs">
|
|
<a class="inline-flex items-center justify-center gap-space-xs h-[52px] px-space-lg rounded-xl bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider shadow-[0_0_20px_rgba(0,229,255,0.4)] hover:bg-primary transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined text-lg">download</span>
|
|
Download MotorSignal APK
|
|
</a>
|
|
<a class="inline-flex items-center justify-center gap-space-xs h-[52px] px-space-lg rounded-xl bg-surface text-on-surface font-label-data text-label-data uppercase tracking-wider hover:bg-surface-bright transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined text-lg">person_add</span>
|
|
Join iOS Beta Waitlist
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Handoff QR Code Widget -->
|
|
<div class="lg:col-span-4 flex flex-col items-center justify-center">
|
|
<div class="p-space-md rounded-2xl bg-surface-container-lowest flex flex-col items-center gap-space-sm shadow-xl">
|
|
<!-- Simulated Tactical Monochromatic QR Code SVG -->
|
|
<div class="w-40 h-40 bg-on-surface p-space-xs rounded-xl flex items-center justify-center">
|
|
<svg class="w-full h-full text-surface-container-lowest" fill="currentColor" viewbox="0 0 100 100">
|
|
<!-- Outer Corners -->
|
|
<rect height="28" rx="2" width="28" x="5" y="5"></rect>
|
|
<rect fill="white" height="18" width="18" x="10" y="10"></rect>
|
|
<rect height="10" width="10" x="14" y="14"></rect>
|
|
<rect height="28" rx="2" width="28" x="67" y="5"></rect>
|
|
<rect fill="white" height="18" width="18" x="72" y="10"></rect>
|
|
<rect height="10" width="10" x="76" y="14"></rect>
|
|
<rect height="28" rx="2" width="28" x="5" y="67"></rect>
|
|
<rect fill="white" height="18" width="18" x="10" y="72"></rect>
|
|
<rect height="10" width="10" x="14" y="76"></rect>
|
|
<!-- Internal Data Blocks -->
|
|
<rect height="8" width="8" x="40" y="10"></rect>
|
|
<rect height="8" width="8" x="52" y="14"></rect>
|
|
<rect height="8" width="14" x="40" y="26"></rect>
|
|
<rect height="6" width="12" x="10" y="42"></rect>
|
|
<rect height="14" width="16" x="28" y="40"></rect>
|
|
<rect height="10" width="10" x="50" y="40"></rect>
|
|
<rect height="6" width="24" x="68" y="42"></rect>
|
|
<rect height="14" width="15" x="45" y="58"></rect>
|
|
<rect height="16" width="12" x="68" y="56"></rect>
|
|
<rect height="14" width="8" x="40" y="78"></rect>
|
|
<rect height="8" width="16" x="56" y="78"></rect>
|
|
<rect height="14" width="14" x="78" y="78"></rect>
|
|
</svg>
|
|
</div>
|
|
<div class="flex flex-col items-center text-center">
|
|
<span class="font-label-data text-label-data text-primary uppercase">Scan For Mobile Handoff</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase mt-0.5">Direct APK sideload • SHA-256 Verified</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Interactive Lean Angle Physics Script -->
|
|
<script>
|
|
(function initLeanPhysicsVisualizer() {
|
|
const slider = document.getElementById('lean-range');
|
|
const valDisplay = document.getElementById('lean-value');
|
|
const catDisplay = document.getElementById('lean-category');
|
|
const audioState = document.getElementById('audio-state');
|
|
const needle = document.getElementById('needle');
|
|
|
|
if (!slider || !valDisplay || !needle) return;
|
|
|
|
slider.addEventListener('input', function() {
|
|
const angle = parseInt(this.value, 10);
|
|
valDisplay.textContent = angle;
|
|
|
|
// Needle rotation calculation: 0 deg = upright (approx 100, 20), 55 deg = right lean
|
|
// 0 to 55 deg maps from ~90 deg to ~35 deg on normal circular coords
|
|
const rad = ((90 - (angle * 0.95)) * Math.PI) / 180;
|
|
const cx = 100;
|
|
const cy = 100;
|
|
const len = 75;
|
|
const nx = cx + len * Math.cos(rad);
|
|
const ny = cy - len * Math.sin(rad);
|
|
|
|
needle.setAttribute('x2', nx.toFixed(1));
|
|
needle.setAttribute('y2', ny.toFixed(1));
|
|
|
|
// Safety lean mute interlock state update
|
|
if (angle > 15) {
|
|
audioState.textContent = 'SUPPRESSED';
|
|
audioState.className = 'font-label-data text-label-data text-error font-semibold uppercase';
|
|
} else {
|
|
audioState.textContent = 'TRANSPARENT';
|
|
audioState.className = 'font-label-data text-label-data text-primary uppercase font-semibold';
|
|
}
|
|
|
|
// Categorization feedback
|
|
if (angle < 15) {
|
|
catDisplay.textContent = 'Cruising (' + angle + '\u00B0)';
|
|
} else if (angle <= 40) {
|
|
catDisplay.textContent = 'Technical Cornering (' + angle + '\u00B0)';
|
|
} else {
|
|
catDisplay.textContent = 'Aggressive Apex (' + angle + '\u00B0)';
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</div></main><footer class="w-full bg-surface-container-lowest pt-space-xl pb-space-lg"><div class="w-full px-gutter-lg"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-space-lg pb-space-lg"><div class="lg:col-span-2 flex flex-col gap-space-sm"><div class="flex items-center gap-space-sm"><span class="font-headline-sm text-headline-sm uppercase tracking-wider text-primary">MotorSignal</span><span class="px-space-xs py-space-xs rounded font-label-caption text-label-caption bg-surface-container text-primary-container uppercase">Precision Cockpit HUD</span></div><p class="font-body-md text-body-md text-on-surface-variant max-w-md">Next-generation telemetry engine engineered for track day racers, aggressive sport riders, and synchronized pack navigation with real-time IMU lean angle computation.</p><div class="flex items-center gap-space-sm pt-space-xs"><span class="w-2.5 h-2.5 rounded-full bg-primary-container shadow-[0_0_8px_#00e5ff]"></span><span class="font-label-data text-label-data text-on-surface uppercase">Telemetry Core v4.8.2 Active</span></div></div><div class="flex flex-col gap-space-sm"><span class="font-label-data text-label-data text-primary uppercase tracking-wider">Platform Modules</span><ul class="flex flex-col gap-space-xs"><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Telemetry Specs</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Curvy Routes</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Pack Radar</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Draggy Launch</li></ul></div><div class="flex flex-col gap-space-sm"><span class="font-label-data text-label-data text-primary uppercase tracking-wider">Ecosystem</span><ul class="flex flex-col gap-space-xs"><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">OBD-II CANbus Link</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">IMU 6-Axis Calibration</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Corner Trajectory AI</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">G-Force Mapping</li></ul></div><div class="flex flex-col gap-space-sm"><span class="font-label-data text-label-data text-primary uppercase tracking-wider">Governance</span><ul class="flex flex-col gap-space-xs"><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Privacy Architecture</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Telemetry Terms</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Safety Disclaimers</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Mesh Node Protocol</li></ul></div></div><div class="pt-space-md flex flex-col md:flex-row items-center justify-between gap-space-sm"><span class="font-label-caption text-label-caption text-on-surface-variant uppercase">© 2025 MotorSignal Technologies Inc. Built for zero-cognitive lag.</span><div class="flex items-center gap-space-md"><span class="font-label-caption text-label-caption text-on-surface-variant uppercase">All nodes operational</span><span class="font-label-data text-label-data text-primary">99.98% Latency <14ms</span></div></div></div></footer></body></html> |