598 lines
49 KiB
HTML
598 lines
49 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"/>
|
|
<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" 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 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="motorsignal-public-homepage" href="#">Home</a><a aria-current="page" class="uppercase tracking-wider transition-colors px-space-xs py-space-xs text-primary-container font-headline-sm" data-path="group-rides-discovery" 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="live-telemetry-showcase" href="#">Live Telemetry</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="ride-organizer-hub" href="#">Ride Hub</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-directory" 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="founder-officer-hub" href="#">Officer Hub</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="roles-ranks-builder" href="#">Ranks Builder</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="operations-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">
|
|
<!-- Top Tactical Context Header & Filter Array -->
|
|
<section class="w-full px-gutter-lg py-space-xl bg-surface-container-lowest">
|
|
<div class="w-full max-w-[1440px] mx-auto flex flex-col gap-space-lg">
|
|
<!-- Overline & Main Title -->
|
|
<div class="flex flex-col lg:flex-row lg:items-end justify-between gap-space-md">
|
|
<div class="flex flex-col gap-space-xs max-w-3xl">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="inline-flex items-center gap-space-xs px-space-sm py-space-xs rounded bg-surface-container text-primary font-label-data text-label-data uppercase tracking-wider">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-ping"></span>
|
|
Synchronized Pack Array
|
|
</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Grid: Sectors 01-09 Active</span>
|
|
</div>
|
|
<h1 class="font-display-hero text-display-hero text-on-surface tracking-tight uppercase">
|
|
Group Rides <span class="text-primary-container">& Pack Runs</span>
|
|
</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">
|
|
Discover community rides, sanctioned club runs, and trackday convoys with live 20Hz telemetry tracking, lean angle verification, and ad-hoc mesh formation grids.
|
|
</p>
|
|
</div>
|
|
<!-- Quick Status Counter Tile -->
|
|
<div class="flex items-center gap-space-md p-space-md rounded-xl bg-surface-container shadow-md">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Active Convoys</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary">38 <span class="text-on-surface-variant text-label-data">PACKS</span></span>
|
|
</div>
|
|
<div class="w-px h-10 bg-outline-variant"></div>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Mesh Nodes Linked</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">412 <span class="text-on-surface-variant text-label-data">BIKES</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tactical Filtering Console Bar -->
|
|
<div class="p-space-lg rounded-xl bg-surface-container shadow-xl flex flex-col gap-space-md">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-6 gap-space-md">
|
|
<!-- Search input -->
|
|
<div class="xl:col-span-2 flex flex-col gap-space-xs">
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase">Search Pack / Corridor</label>
|
|
<div class="relative flex items-center h-12 bg-surface-container-lowest rounded-lg px-space-sm text-on-surface shadow-inner">
|
|
<span class="material-symbols-outlined text-outline">search</span>
|
|
<input class="w-full bg-transparent border-none text-on-surface font-body-md text-body-md px-space-xs focus:outline-none placeholder:text-on-surface-variant/50" placeholder="e.g. Skyline, Crest, Mulholland..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<!-- Sector Selector -->
|
|
<div class="flex flex-col gap-space-xs">
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase">Region / Sector</label>
|
|
<div class="relative flex items-center h-12 bg-surface-container-lowest rounded-lg px-space-sm">
|
|
<select class="w-full bg-transparent border-none text-on-surface font-label-data text-label-data uppercase focus:outline-none appearance-none cursor-pointer">
|
|
<option class="bg-surface-container-lowest text-on-surface" value="norcal">NorCal Basin</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="socal">SoCal Canyons</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="pnw">Pacific Northwest</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="alps">European Alps Pass</option>
|
|
</select>
|
|
<span class="material-symbols-outlined text-outline pointer-events-none absolute right-3">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Target Pace -->
|
|
<div class="flex flex-col gap-space-xs">
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase">Pace Classification</label>
|
|
<div class="relative flex items-center h-12 bg-surface-container-lowest rounded-lg px-space-sm">
|
|
<select class="w-full bg-transparent border-none text-on-surface font-label-data text-label-data uppercase focus:outline-none appearance-none cursor-pointer">
|
|
<option class="bg-surface-container-lowest text-on-surface" value="all">All Paces</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="p1">Pace 1: Relaxed Cruiser</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="p2">Pace 2: Scenic Sweeper</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="p3">Pace 3: Brisk Technical</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="p4">Pace 4: Aggressive Track</option>
|
|
</select>
|
|
<span class="material-symbols-outlined text-outline pointer-events-none absolute right-3">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Curviness Profile -->
|
|
<div class="flex flex-col gap-space-xs">
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase">Curviness & Camber</label>
|
|
<div class="relative flex items-center h-12 bg-surface-container-lowest rounded-lg px-space-sm">
|
|
<select class="w-full bg-transparent border-none text-on-surface font-label-data text-label-data uppercase focus:outline-none appearance-none cursor-pointer">
|
|
<option class="bg-surface-container-lowest text-on-surface" value="all">Any Profile</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="twisty">Scenic Twisty (<35°)</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="apex">Severe Apex (>45°)</option>
|
|
<option class="bg-surface-container-lowest text-on-surface" value="switchback">Hairpin Switchbacks</option>
|
|
</select>
|
|
<span class="material-symbols-outlined text-outline pointer-events-none absolute right-3">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<!-- Date / Calendar -->
|
|
<div class="flex flex-col gap-space-xs">
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase">Launch Window</label>
|
|
<div class="relative flex items-center h-12 bg-surface-container-lowest rounded-lg px-space-sm">
|
|
<input class="w-full bg-transparent border-none text-on-surface font-label-data text-label-data focus:outline-none cursor-pointer [color-scheme:dark]" type="date" value="2025-05-18"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Secondary Filter Controls & Live Mesh Toggle -->
|
|
<div class="flex flex-wrap items-center justify-between gap-space-md pt-space-xs">
|
|
<div class="flex flex-wrap items-center gap-space-sm">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Quick Toggles:</span>
|
|
<button class="inline-flex items-center gap-space-xs h-9 px-space-sm rounded-lg bg-surface-container-high text-primary hover:bg-surface-container-highest transition-colors font-label-data text-label-data uppercase">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary-container"></span>
|
|
IMU Lean Logging Required
|
|
</button>
|
|
<button class="inline-flex items-center gap-space-xs h-9 px-space-sm rounded-lg bg-surface-container-high text-on-surface-variant hover:text-on-surface hover:bg-surface-container-highest transition-colors font-label-data text-label-data uppercase">
|
|
Sanctioned MC Only
|
|
</button>
|
|
<button class="inline-flex items-center gap-space-xs h-9 px-space-sm rounded-lg bg-surface-container-high text-on-surface-variant hover:text-on-surface hover:bg-surface-container-highest transition-colors font-label-data text-label-data uppercase">
|
|
Sweep Rider Assigned
|
|
</button>
|
|
</div>
|
|
<!-- Physical Cockpit-Style Toggle -->
|
|
<div class="flex items-center gap-space-sm p-space-xs rounded-lg bg-surface-container-lowest">
|
|
<span class="font-label-data text-label-data text-on-surface uppercase pl-space-xs">Mesh Protocol (CH-01 - 16)</span>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" id="meshFilterToggle" type="checkbox"/>
|
|
<div class="w-14 h-7 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-surface peer-checked:bg-primary-container after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-on-primary-fixed-variant after:border-surface after:rounded-full after:h-6 after:w-6 after:transition-all"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Featured Mission Banner: Pacific Coast Riders MC -->
|
|
<section class="w-full px-gutter-lg py-space-lg">
|
|
<div class="w-full max-w-[1440px] mx-auto">
|
|
<div class="relative rounded-xl overflow-hidden bg-surface-container shadow-2xl">
|
|
<!-- Background Imagery with Gradient Scrim -->
|
|
<div class="absolute inset-0 bg-cover bg-center" data-alt="Dynamic shot of high-powered sport motorcycles carving through the redwoods of California Skyline Boulevard at golden hour. Damp tarmac with sun glinting off carbon fiber fairings and electric cyan LED daytime running lights, foggy redwood canopy in the backdrop with high cinematic contrast." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBnd7qcZCmr774rl_Sl-EO9DLXqUpLrxpPszHFoSFqJI4FhSk77UAuBcnxR5G8DXWhtGlLEnrgT340g7wT_BUxeiOaIETAYtTcLmxXJyT7QbDtuYJC9wmPn1ha9Vsl61gkwX3CGELVWcTnvCkANyawDPl_LNuSYGUCFiswPPzZseDdhsddNSF6mmaSGCqk2VtC_wlvRtNszGQt1nzbCX_khVJYc7bfRWwOtasQyUX2dHNkYWlKaphfX')"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-r from-surface-container-lowest via-surface-container-lowest/90 to-surface-container-lowest/40"></div>
|
|
<div class="relative z-10 p-space-lg lg:p-space-xl flex flex-col justify-between gap-space-lg min-h-[460px]">
|
|
<!-- Card Header & Badge row -->
|
|
<div class="flex flex-wrap items-center justify-between gap-space-sm">
|
|
<div class="flex flex-wrap items-center gap-space-sm">
|
|
<span class="px-space-sm py-space-xs rounded-md bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider shadow-[0_0_12px_rgba(0,229,255,0.4)]">
|
|
★ Sanctioned Mission
|
|
</span>
|
|
<span class="px-space-sm py-space-xs rounded-md bg-surface-container-highest text-secondary-fixed font-label-data text-label-data uppercase tracking-wider">
|
|
Pacific Coast Riders MC · Chap. 04
|
|
</span>
|
|
<span class="inline-flex items-center gap-space-xs px-space-sm py-space-xs rounded-md bg-surface-container-high text-primary font-label-data text-label-data uppercase">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
|
|
Live Telemetry Synchronized
|
|
</span>
|
|
</div>
|
|
<!-- KSU Real-time Countdown Box -->
|
|
<div class="flex items-center gap-space-sm px-space-md py-space-xs rounded-lg bg-surface-container-lowest shadow-md">
|
|
<span class="font-label-caption text-label-caption text-error uppercase">KSU Countdown:</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-error tracking-wider" id="ksu-timer">00:35:07</span>
|
|
</div>
|
|
</div>
|
|
<!-- Mission Overview & Vital Specs -->
|
|
<div class="flex flex-col gap-space-md max-w-3xl">
|
|
<h2 class="font-display-hero text-display-hero text-on-surface uppercase tracking-tight">
|
|
Skyline to Santa Cruz Coastal Arc
|
|
</h2>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
|
|
High-cadence descent down CA-9 through Saratoga Gap to Davenport. Tight technical esses transitioning to high-speed coastal sweeps. Required telemetry beacon broadcast on Mesh CH-04.
|
|
</p>
|
|
<!-- Mission Stat Chips -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-space-sm pt-space-xs">
|
|
<div class="p-space-sm rounded-lg bg-surface-container-lowest flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Staging Status</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary">22 / 25 <span class="font-label-data text-label-data text-on-surface-variant">BIKES</span></span>
|
|
</div>
|
|
<div class="p-space-sm rounded-lg bg-surface-container-lowest flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Mission Distance</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">64.2 <span class="font-label-data text-label-data text-on-surface-variant">MI</span></span>
|
|
</div>
|
|
<div class="p-space-sm rounded-lg bg-surface-container-lowest flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Curve Count</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">184 <span class="font-label-data text-label-data text-on-surface-variant">APEXES</span></span>
|
|
</div>
|
|
<div class="p-space-sm rounded-lg bg-surface-container-lowest flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Radio / Mesh</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-secondary">CH-04 <span class="font-label-data text-label-data text-on-surface-variant">915MHz</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mission Action Bar -->
|
|
<div class="flex flex-wrap items-center justify-between gap-space-md pt-space-sm">
|
|
<div class="flex flex-wrap items-center gap-space-md">
|
|
<button class="inline-flex items-center justify-center gap-space-xs h-12 px-space-lg rounded-lg 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 active:scale-95">
|
|
<span class="material-symbols-outlined text-lg">sensors</span>
|
|
RSVP & Sync Telemetry
|
|
</button>
|
|
<button class="inline-flex items-center justify-center gap-space-xs h-12 px-space-md rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider hover:bg-surface-container-highest transition-colors">
|
|
<span class="material-symbols-outlined text-lg">timeline</span>
|
|
Inspect Route Profile
|
|
</button>
|
|
<button class="inline-flex items-center justify-center gap-space-xs h-12 px-space-md rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider hover:bg-surface-container-highest transition-colors">
|
|
<span class="material-symbols-outlined text-lg">groups</span>
|
|
View Squad Hierarchy
|
|
</button>
|
|
</div>
|
|
<!-- Host Lead Micro Profile -->
|
|
<div class="flex items-center gap-space-sm p-space-xs px-space-sm rounded-full bg-surface-container-lowest">
|
|
<img class="w-8 h-8 rounded-full object-cover" data-alt="Close up profile picture of veteran track instructor with matte black Shoei helmet, mirrored visor, and leather Alpinestars race suit against twilight pit lane." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBnRyElmCRbfahgdm88lEpmSD8O53hEE-yhN9It5SPbox5KJtU3PIdKt1UZEw8nGpcMY4WgbpufvAYzeH0_uz1f_05LGST0dT7UiE4WaN5S9nSHMB2hYnJTeY1I2NlvLg4U1x9WtbsgziQfsbewz6xCZojzfGeE-38GZ3IQ2M-bJtxm4lhvm4WM45We5w-Yp5RcBofLEa8ZCxVW1eiPiCqtJabpkXPJyz3eK7mAwO_-r2e0CQOIp1Dv"/>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Ride Lead</span>
|
|
<span class="font-label-data text-label-data text-primary">Viper_Lead (Road Captain)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Main Content Mosaic: Grid of Rides + Interactive Tactical Radar Preview Dock -->
|
|
<section class="w-full px-gutter-lg py-space-lg">
|
|
<div class="w-full max-w-[1440px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-space-lg">
|
|
<!-- Left 8 Cols: Interactive Ride Cards Grid -->
|
|
<div class="lg:col-span-8 flex flex-col gap-space-md">
|
|
<div class="flex items-center justify-between pb-space-xs">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-primary-container">sports_motorsports</span>
|
|
<span class="font-headline-sm text-headline-sm uppercase text-on-surface">Available Group Convoys</span>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Sorted By: Departure Proximity</span>
|
|
</div>
|
|
<!-- 2x2 Bento of Discovery Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-space-md">
|
|
<!-- Card 1: Mulholland Snake -->
|
|
<div class="flex flex-col justify-between p-space-md rounded-xl bg-surface-container shadow-lg hover:shadow-[0_0_24px_rgba(0,229,255,0.15)] transition-all">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-space-xs py-space-xs rounded bg-surface-container-highest text-error font-label-data text-label-data uppercase">
|
|
Pace 4 Hyper
|
|
</span>
|
|
<div class="flex items-center gap-space-xs text-primary-container font-label-data text-label-data uppercase">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
|
|
14 Riders Linked
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<h3 class="font-headline-md text-headline-md uppercase text-on-surface">
|
|
Mulholland Snake & Rock Store Pace Lap
|
|
</h3>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase pt-space-xs">
|
|
Sector: SoCal Canyons · Malibu Crest Corridor
|
|
</span>
|
|
</div>
|
|
<!-- Sparkline Lean Angle Visualizer Inline SVG -->
|
|
<div class="p-space-xs rounded-lg bg-surface-container-lowest flex items-center justify-between gap-space-sm">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Peak Lean Recorded</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary">48° <span class="text-label-data text-on-surface-variant">LEFT</span></span>
|
|
</div>
|
|
<!-- Inline SVG Lean Arc Sparkline -->
|
|
<svg class="w-28 h-10 text-primary-container" fill="none" viewbox="0 0 100 36">
|
|
<path d="M2 18 Q 20 2, 40 18 T 75 32 T 98 10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></path>
|
|
<circle cx="75" cy="32" fill="#00e5ff" r="3"></circle>
|
|
</svg>
|
|
</div>
|
|
<!-- Telemetry Metadata Matrix -->
|
|
<div class="grid grid-cols-2 gap-space-xs">
|
|
<div class="flex flex-col p-space-xs rounded bg-surface-container-high">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Distance</span>
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">44.2 Miles</span>
|
|
</div>
|
|
<div class="flex flex-col p-space-xs rounded bg-surface-container-high">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Hazard Traps</span>
|
|
<span class="font-label-data text-label-data text-secondary uppercase">All Clear (Waze 0)</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Host:</span>
|
|
<span class="font-label-data text-label-data text-primary">Sarah_Sweep (Certified Marshal)</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card Bottom Action -->
|
|
<div class="pt-space-md">
|
|
<button class="w-full h-12 rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider flex items-center justify-center gap-space-xs shadow-[0_0_12px_rgba(0,229,255,0.3)] hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-base">radar</span>
|
|
Join Mesh Radar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Mount Tamalpais Sunrise Sweeper -->
|
|
<div class="flex flex-col justify-between p-space-md rounded-xl bg-surface-container shadow-lg hover:shadow-[0_0_24px_rgba(0,229,255,0.15)] transition-all">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-space-xs py-space-xs rounded bg-surface-container-highest text-secondary-fixed font-label-data text-label-data uppercase">
|
|
Pace 2 Scenic
|
|
</span>
|
|
<div class="flex items-center gap-space-xs text-on-surface-variant font-label-data text-label-data uppercase">
|
|
8 Riders Staged
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<h3 class="font-headline-md text-headline-md uppercase text-on-surface">
|
|
Mount Tamalpais Sunrise Sweeper
|
|
</h3>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase pt-space-xs">
|
|
Sector: NorCal Marin · Panoramic Highway Arc
|
|
</span>
|
|
</div>
|
|
<!-- Sparkline Elevation Gain Inline SVG -->
|
|
<div class="p-space-xs rounded-lg bg-surface-container-lowest flex items-center justify-between gap-space-sm">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Total Vert Climb</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-secondary">+2,800 <span class="text-label-data text-on-surface-variant">FT</span></span>
|
|
</div>
|
|
<!-- Inline SVG Elevation Profile -->
|
|
<svg class="w-28 h-10 text-secondary" fill="none" viewbox="0 0 100 36">
|
|
<path d="M2 32 L 25 28 L 50 15 L 75 8 L 98 4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></path>
|
|
<path d="M2 32 L 25 28 L 50 15 L 75 8 L 98 4 V 36 H 2 Z" fill="currentColor" fill-opacity="0.1"></path>
|
|
</svg>
|
|
</div>
|
|
<!-- Telemetry Metadata Matrix -->
|
|
<div class="grid grid-cols-2 gap-space-xs">
|
|
<div class="flex flex-col p-space-xs rounded bg-surface-container-high">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Distance</span>
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">52.0 Miles</span>
|
|
</div>
|
|
<div class="flex flex-col p-space-xs rounded bg-surface-container-high">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Expected Lean</span>
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">38° Max Arc</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Host:</span>
|
|
<span class="font-label-data text-label-data text-on-surface">MarinBikers_Guild</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card Bottom Action -->
|
|
<div class="pt-space-md">
|
|
<button class="w-full h-12 rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center justify-center gap-space-xs hover:bg-surface-container-highest transition-colors">
|
|
<span class="material-symbols-outlined text-base">check_circle</span>
|
|
RSVP Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: Angeles Crest Fast Pack -->
|
|
<div class="flex flex-col justify-between p-space-md rounded-xl bg-surface-container shadow-lg hover:shadow-[0_0_24px_rgba(0,229,255,0.15)] transition-all">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-space-xs py-space-xs rounded bg-surface-container-highest text-primary-container font-label-data text-label-data uppercase">
|
|
Pace 3 Brisk
|
|
</span>
|
|
<div class="flex items-center gap-space-xs text-primary-container font-label-data text-label-data uppercase">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
|
|
19 Riders Linked
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<h3 class="font-headline-md text-headline-md uppercase text-on-surface">
|
|
Angeles Crest Highway Fast Pack
|
|
</h3>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase pt-space-xs">
|
|
Sector: SoCal Canyons · La Cañada to Newcomb's
|
|
</span>
|
|
</div>
|
|
<!-- Sparkline High G-Force Inline SVG -->
|
|
<div class="p-space-xs rounded-lg bg-surface-container-lowest flex items-center justify-between gap-space-sm">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Peak Lean Recorded</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">51° <span class="text-label-data text-on-surface-variant">RIGHT</span></span>
|
|
</div>
|
|
<!-- Inline SVG Lean Sparkline -->
|
|
<svg class="w-28 h-10 text-primary-container" fill="none" viewbox="0 0 100 36">
|
|
<path d="M2 15 Q 30 35, 55 10 T 98 25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></path>
|
|
<circle cx="55" cy="10" fill="#00daf3" r="3"></circle>
|
|
</svg>
|
|
</div>
|
|
<!-- Telemetry Metadata Matrix -->
|
|
<div class="grid grid-cols-2 gap-space-xs">
|
|
<div class="flex flex-col p-space-xs rounded bg-surface-container-high">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Distance</span>
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">78.5 Miles</span>
|
|
</div>
|
|
<div class="flex flex-col p-space-xs rounded bg-surface-container-high">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">IMU Kalman</span>
|
|
<span class="font-label-data text-label-data text-primary uppercase">Active (20Hz)</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Host:</span>
|
|
<span class="font-label-data text-label-data text-primary-fixed">ApexMarcus (Pro)</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card Bottom Action -->
|
|
<div class="pt-space-md">
|
|
<button class="w-full h-12 rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider flex items-center justify-center gap-space-xs shadow-[0_0_12px_rgba(0,229,255,0.3)] hover:bg-primary transition-colors">
|
|
<span class="material-symbols-outlined text-base">radar</span>
|
|
Join Mesh Radar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 4: Lick Observatory Mt Hamilton -->
|
|
<div class="flex flex-col justify-between p-space-md rounded-xl bg-surface-container shadow-lg hover:shadow-[0_0_24px_rgba(0,229,255,0.15)] transition-all">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="px-space-xs py-space-xs rounded bg-surface-container-highest text-tertiary-fixed-dim font-label-data text-label-data uppercase">
|
|
Pace 3 Technical
|
|
</span>
|
|
<div class="flex items-center gap-space-xs text-on-surface-variant font-label-data text-label-data uppercase">
|
|
11 Riders Staged
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<h3 class="font-headline-md text-headline-md uppercase text-on-surface">
|
|
Lick Observatory Mt Hamilton Climb
|
|
</h3>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase pt-space-xs">
|
|
Sector: NorCal South Bay · CA-130 Switchbacks
|
|
</span>
|
|
</div>
|
|
<!-- Curve Density Meter Inline SVG -->
|
|
<div class="p-space-xs rounded-lg bg-surface-container-lowest flex items-center justify-between gap-space-sm">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Curve Count</span>
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-tertiary">365 <span class="text-label-data text-on-surface-variant">TURNS</span></span>
|
|
</div>
|
|
<!-- Inline SVG Hairpin Arc -->
|
|
<svg class="w-28 h-10 text-tertiary-container" fill="none" viewbox="0 0 100 36">
|
|
<path d="M5 30 C 15 5, 30 5, 40 30 C 50 5, 65 5, 75 30 C 85 5, 95 5, 98 15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2.5"></path>
|
|
</svg>
|
|
</div>
|
|
<!-- Telemetry Metadata Matrix -->
|
|
<div class="grid grid-cols-2 gap-space-xs">
|
|
<div class="flex flex-col p-space-xs rounded bg-surface-container-high">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Distance</span>
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">32.4 Miles</span>
|
|
</div>
|
|
<div class="flex flex-col p-space-xs rounded bg-surface-container-high">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Peak Lean</span>
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">45° Apex Lean</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Host:</span>
|
|
<span class="font-label-data text-label-data text-on-surface">SanJose_Apex_Squad</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card Bottom Action -->
|
|
<div class="pt-space-md">
|
|
<button class="w-full h-12 rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center justify-center gap-space-xs hover:bg-surface-container-highest transition-colors">
|
|
<span class="material-symbols-outlined text-base">description</span>
|
|
View Briefing
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right 4 Cols: Tactical Map Preview Dock & Active Mesh Staging Panel -->
|
|
<div class="lg:col-span-4 flex flex-col gap-space-md">
|
|
<div class="flex items-center justify-between pb-space-xs">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-primary-container">satellite_alt</span>
|
|
<span class="font-headline-sm text-headline-sm uppercase text-on-surface">Live Radar Blips</span>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-primary uppercase">Sector: NorCal</span>
|
|
</div>
|
|
<!-- Tactical Dock Wrapper -->
|
|
<div class="flex flex-col p-space-md rounded-xl bg-surface-container shadow-xl gap-space-md">
|
|
<!-- Map Preview Canvas Frame using data-location -->
|
|
<div class="relative w-full h-64 rounded-lg overflow-hidden shadow-inner">
|
|
<div class="w-full h-full bg-cover bg-center" data-location="Santa Cruz Mountains, California" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDqy-TmDac6ZS3OrGg-wxSp-90lZj4rtGs4ggjCFOQjPuI8rK8FitboJgGwK348xTdh3fUejRvwVq9IYjB1a783LjMytxTNOJnTZZJXOIW7_8L3YCE3fHsaDo93v0jPArohO3RpaJiwTVSYpI7L_DqnVc5tfXiVjbCmiSZqgOtNIZA94VWVJomTpxGRVpNaNS7fLLyNdyZou2TyAfPN_xquubY_6bI0hv8DzxbbE4qIW_ForIxGhRa7')"></div>
|
|
<!-- Neon HUD overlay graphic elements -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-surface-container via-transparent to-transparent pointer-events-none"></div>
|
|
<div class="absolute top-2 left-2 flex items-center gap-space-xs px-space-xs py-1 rounded bg-surface-container-lowest/80 backdrop-blur-md">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
|
|
<span class="font-label-caption text-label-caption text-primary uppercase">Live Doppler Mesh</span>
|
|
</div>
|
|
<!-- Interactive Radar Ping Hotspot 1 -->
|
|
<div class="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-space-xs cursor-pointer group">
|
|
<div class="relative">
|
|
<span class="w-3 h-3 rounded-full bg-primary-container block"></span>
|
|
<span class="w-8 h-8 rounded-full border border-primary-container absolute -top-2.5 -left-2.5 animate-ping opacity-75"></span>
|
|
</div>
|
|
<span class="hidden group-hover:inline-block px-space-xs py-0.5 rounded bg-surface-container-lowest text-primary font-label-data text-label-data uppercase shadow-lg">
|
|
Squad Arc (22 BIKES)
|
|
</span>
|
|
</div>
|
|
<!-- Interactive Radar Ping Hotspot 2 -->
|
|
<div class="absolute bottom-6 right-8 flex items-center gap-space-xs cursor-pointer group">
|
|
<div class="relative">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-secondary block"></span>
|
|
</div>
|
|
<span class="hidden group-hover:inline-block px-space-xs py-0.5 rounded bg-surface-container-lowest text-secondary font-label-data text-label-data uppercase shadow-lg">
|
|
Tamalpais Pack
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Weather & Atmospheric Warning Module -->
|
|
<div class="p-space-sm rounded-lg bg-surface-container-lowest flex items-start gap-space-sm">
|
|
<span class="material-symbols-outlined text-error text-xl pt-0.5">warning</span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-label-data text-error uppercase">Active Route Advisory</span>
|
|
<span class="font-body-md text-body-md text-on-surface">Dense ridge fog & damp fallen pine needles between Castle Rock and Highway 9 apex corridor. Reduce pace tier by 1.</span>
|
|
</div>
|
|
</div>
|
|
<!-- Staged Packs Live Feed List -->
|
|
<div class="flex flex-col gap-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">
|
|
Staging In Progress (Telemetry Ready)
|
|
</span>
|
|
<!-- Rider Entry 1 -->
|
|
<div class="flex items-center justify-between p-space-sm rounded-lg bg-surface-container-high hover:bg-surface-container-highest transition-colors">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">Skyline Sweep Lead</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">Alice_S1000RR · Mesh Lock</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="font-label-data text-label-data text-primary">61.4 MPH</span>
|
|
<span class="block font-label-caption text-label-caption text-on-surface-variant">AVG PACK</span>
|
|
</div>
|
|
</div>
|
|
<!-- Rider Entry 2 -->
|
|
<div class="flex items-center justify-between p-space-sm rounded-lg bg-surface-container-high hover:bg-surface-container-highest transition-colors">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">Crest Fast Squad</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">Marcus_KTM890 · Syncing</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="font-label-data text-label-data text-secondary">54.8 MPH</span>
|
|
<span class="block font-label-caption text-label-caption text-on-surface-variant">AVG PACK</span>
|
|
</div>
|
|
</div>
|
|
<!-- Rider Entry 3 -->
|
|
<div class="flex items-center justify-between p-space-sm rounded-lg bg-surface-container-high hover:bg-surface-container-highest transition-colors">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="w-2 h-2 rounded-full bg-outline"></span>
|
|
<div class="flex flex-col">
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">Tamalpais Cruiser Cohort</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">Dave_Scrambler · Staged</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">38.2 MPH</span>
|
|
<span class="block font-label-caption text-label-caption text-on-surface-variant">AVG PACK</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Calibration Status Badge -->
|
|
<div class="flex items-center justify-between p-space-xs rounded bg-surface-container-lowest">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Mesh Frequency Sync</span>
|
|
<span class="font-label-data text-label-data text-primary">Kalman Active (0.02ms Jitter)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Bottom CTA: Organizer Launchpad -->
|
|
<section class="w-full px-gutter-lg py-space-xl bg-surface-container-lowest">
|
|
<div class="w-full max-w-[1440px] mx-auto">
|
|
<div class="p-space-lg lg:p-space-xl rounded-xl bg-surface-container flex flex-col lg:flex-row lg:items-center justify-between gap-space-lg shadow-2xl">
|
|
<div class="flex flex-col gap-space-xs max-w-2xl">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-primary-container">route</span>
|
|
<span class="font-label-data text-label-data uppercase tracking-wider text-primary">Ride Dispatch Architecture</span>
|
|
</div>
|
|
<h2 class="font-headline-lg text-headline-lg uppercase text-on-surface tracking-tight">
|
|
Organizing a Pack Run or Club Convoy?
|
|
</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Coordinate up to 50 riders with synchronized turn cues, automatic formation scatter alerts, real-time sweep rider beacons, and club rank privileges.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-space-md">
|
|
<button class="inline-flex items-center justify-center gap-space-xs h-14 px-space-xl rounded-lg 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 active:scale-95">
|
|
<span class="material-symbols-outlined text-lg">flag</span>
|
|
Launch Ride Organizer Hub
|
|
</button>
|
|
<button class="inline-flex items-center justify-center gap-space-xs h-14 px-space-lg rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider hover:bg-surface-container-highest transition-colors">
|
|
Read Lead Marshal Guide
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
// Simple countdown simulation for KSU Timer
|
|
(function() {
|
|
var timerEl = document.getElementById('ksu-timer');
|
|
if (!timerEl) return;
|
|
var totalSeconds = 35 * 60 + 7;
|
|
setInterval(function() {
|
|
if (totalSeconds <= 0) return;
|
|
totalSeconds--;
|
|
var hrs = Math.floor(totalSeconds / 3600);
|
|
var mins = Math.floor((totalSeconds % 3600) / 60);
|
|
var secs = totalSeconds % 60;
|
|
var strH = hrs < 10 ? '0' + hrs : hrs;
|
|
var strM = mins < 10 ? '0' + mins : mins;
|
|
var strS = secs < 10 ? '0' + secs : secs;
|
|
timerEl.textContent = strH + ':' + strM + ':' + strS;
|
|
}, 1000);
|
|
})();
|
|
</script></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">Community & Rides</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">Group Rides Discovery</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Live Telemetry Showcase</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Ride Organizer Hub</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Pack Formation Grid</li></ul></div><div class="flex flex-col gap-space-sm"><span class="font-label-data text-label-data text-primary uppercase tracking-wider">Clubs & 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">Motorcycle Clubs Directory</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Founder & Officer Hub</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Roles & Ranks Builder</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Chapter Charter System</li></ul></div><div class="flex flex-col gap-space-sm"><span class="font-label-data text-label-data text-primary uppercase tracking-wider">Operations Core</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">Operations & Admin Console</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><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Telemetry Calibration</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Safety Disclaimers</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> |