723 lines
57 KiB
HTML
723 lines
57 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 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-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">
|
|
<!-- AMBIENT GLOW BACKDROP -->
|
|
<div class="relative w-full overflow-hidden">
|
|
<div class="absolute -top-32 left-1/4 w-[600px] h-[350px] bg-primary-container/10 rounded-full blur-[140px] pointer-events-none"></div>
|
|
<div class="absolute top-96 right-10 w-[450px] h-[280px] bg-secondary-container/15 rounded-full blur-[160px] pointer-events-none"></div>
|
|
<div class="w-full px-gutter-lg py-space-lg flex flex-col gap-space-xl max-w-[1600px] mx-auto">
|
|
<!-- SECTION 1: COMMAND HEADER & TELEMETRY STRIP -->
|
|
<section class="flex flex-col gap-space-md">
|
|
<!-- TOP BREADCRUMB / MESH CHIP BAR -->
|
|
<div class="flex flex-wrap items-center justify-between gap-space-sm">
|
|
<div class="flex items-center gap-space-sm flex-wrap">
|
|
<span class="px-space-sm py-space-xs rounded bg-surface-container-high text-primary font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
|
|
SEC-NORCAL-04
|
|
</span>
|
|
<span class="text-outline font-label-data text-label-data">/</span>
|
|
<span class="text-on-surface-variant font-label-data text-label-data uppercase">SANCTIONED SQUADRON #884</span>
|
|
<span class="text-outline font-label-data text-label-data">/</span>
|
|
<span class="px-space-sm py-space-xs rounded bg-surface-container text-secondary font-label-data text-label-data uppercase flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-sm">sensors</span>
|
|
MESH RADIO CH-04 • 915.200 MHz FSK
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs text-on-surface-variant font-label-data text-label-data">
|
|
<span class="text-primary-container">●</span>
|
|
<span>TELEMETRY SYNC: 18ms PACK-MESH KALMAN</span>
|
|
</div>
|
|
</div>
|
|
<!-- HERO IDENTITY PANEL -->
|
|
<div class="relative rounded-xl bg-surface-container-low p-space-lg overflow-hidden shadow-xl">
|
|
<div class="relative z-10 flex flex-col xl:flex-row xl:items-center justify-between gap-space-lg">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="px-space-xs py-0.5 rounded bg-primary-container/20 text-primary font-label-caption text-label-caption uppercase tracking-wider">OFFICER ACCESS LEVEL 5</span>
|
|
<span class="text-outline font-label-caption text-label-caption">•</span>
|
|
<span class="text-on-surface-variant font-label-caption text-label-caption uppercase tracking-wider">CHARTER #CA-PC-1994</span>
|
|
</div>
|
|
<h1 class="font-display-hero text-display-hero uppercase tracking-tight text-on-surface">
|
|
PACIFIC COAST RIDERS <span class="text-primary-container">MC</span>
|
|
</h1>
|
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">
|
|
Tactical Squadron Command Dashboard & IMU Telemetry Nexus. Overseeing high-speed canyon operations, formation delta spacing, and biometric interlock compliance across coastal corridors.
|
|
</p>
|
|
</div>
|
|
<!-- ACTION BUTTON MATRIX -->
|
|
<div class="flex flex-wrap sm:flex-nowrap items-center gap-space-sm xl:self-end">
|
|
<button class="h-12 px-space-md rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs shadow-lg hover:bg-primary transition-all duration-200 active:scale-95" id="btnStageMission">
|
|
<span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">add_circle</span>
|
|
<span>+ Stage Official Mission</span>
|
|
</button>
|
|
<button class="h-12 px-space-md rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs hover:bg-surface-variant transition-all duration-200">
|
|
<span class="material-symbols-outlined text-lg">badge</span>
|
|
<span>Manage Roster & Dues</span>
|
|
</button>
|
|
<button class="h-12 w-12 rounded-lg bg-surface-container-high text-on-surface hover:text-primary flex items-center justify-center transition-all duration-200" title="Export Telemetry Archives">
|
|
<span class="material-symbols-outlined text-lg">download</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- SUB-METRIC STATUS BAR -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-space-sm pt-space-lg mt-space-lg">
|
|
<div class="rounded-lg bg-surface-container p-space-sm flex flex-col justify-between">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Roster Strength</span>
|
|
<span class="material-symbols-outlined text-base text-primary">groups</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs pt-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">58</span>
|
|
<span class="font-label-data text-label-data text-primary uppercase">/ 64 Cap</span>
|
|
</div>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant pt-space-xs">4 Active Officers In-Cockpit</span>
|
|
</div>
|
|
<div class="rounded-lg bg-surface-container p-space-sm flex flex-col justify-between">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Missions (2025)</span>
|
|
<span class="material-symbols-outlined text-base text-secondary">sports_score</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs pt-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">14</span>
|
|
<span class="font-label-data text-label-data text-secondary uppercase">Sanctioned</span>
|
|
</div>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant pt-space-xs">100% Successful Sweep Rate</span>
|
|
</div>
|
|
<div class="rounded-lg bg-surface-container p-space-sm flex flex-col justify-between">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Canyon Logged</span>
|
|
<span class="material-symbols-outlined text-base text-primary-container">alt_route</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs pt-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-on-surface">12,450</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">MILES</span>
|
|
</div>
|
|
<span class="font-label-caption text-label-caption text-primary-container pt-space-xs">+1,840 mi vs last quarter</span>
|
|
</div>
|
|
<div class="rounded-lg bg-surface-container p-space-sm flex flex-col justify-between">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Safety Compliance</span>
|
|
<span class="material-symbols-outlined text-base text-primary">verified_user</span>
|
|
</div>
|
|
<div class="flex items-baseline gap-space-xs pt-space-xs">
|
|
<span class="font-telemetry-metric-lg text-telemetry-metric-lg text-primary">99.4%</span>
|
|
<span class="font-label-data text-label-data text-on-surface-variant uppercase">INTERLOCK</span>
|
|
</div>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant pt-space-xs">Zero Critical Safety Breaches</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 2: BENTO GRID - MISSION STAGING & LIVE PACK RADAR -->
|
|
<section class="grid grid-cols-1 lg:grid-cols-12 gap-space-lg">
|
|
<!-- UPCOMING MISSION DISPATCH (7 COLS) -->
|
|
<div class="lg:col-span-7 flex flex-col gap-space-md rounded-xl bg-surface-container-low p-space-lg shadow-md">
|
|
<div class="flex flex-wrap items-center justify-between gap-space-sm">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="w-3 h-3 rounded-sm bg-primary-container"></div>
|
|
<h2 class="font-headline-sm text-headline-sm uppercase tracking-wide text-on-surface">Sanctioned Run Dispatch & Staging</h2>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs bg-surface-container px-space-xs py-1 rounded">
|
|
<button class="px-space-xs py-0.5 rounded text-on-surface bg-surface-container-high font-label-data text-label-data uppercase">Upcoming (3)</button>
|
|
<button class="px-space-xs py-0.5 rounded text-on-surface-variant hover:text-on-surface font-label-data text-label-data uppercase">Archive</button>
|
|
</div>
|
|
</div>
|
|
<!-- PRIMARY STAGED MISSION CARD -->
|
|
<div class="rounded-lg bg-surface-container p-space-md flex flex-col gap-space-md">
|
|
<div class="flex flex-wrap items-start justify-between gap-space-sm">
|
|
<div>
|
|
<div class="flex items-center gap-space-xs pb-1">
|
|
<span class="px-space-xs py-0.5 rounded bg-error-container text-error font-label-caption text-label-caption uppercase tracking-wider flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-error animate-ping"></span>
|
|
STAGING PHASE 1
|
|
</span>
|
|
<span class="text-on-surface-variant font-label-caption text-label-caption">• KSU: SAT 06:45 PST</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface uppercase">Hwy 1 Big Sur Technical Ridge Run</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Monterey Wharfs ➔ Big Sur River Inn ➔ Nacimiento-Fergusson Summit Pass</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">34 / 40</span>
|
|
<span class="block font-label-caption text-label-caption text-on-surface-variant uppercase">CONFIRMED PILOTS</span>
|
|
</div>
|
|
</div>
|
|
<!-- ROUTE SPECS PILL ROW -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-space-xs text-center">
|
|
<div class="rounded bg-surface-container-high p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase block">Distance</span>
|
|
<span class="font-label-data text-label-data text-on-surface">148.2 MI</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container-high p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase block">Target Pace</span>
|
|
<span class="font-label-data text-label-data text-primary">Class-A Swift</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container-high p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase block">Elevation Delta</span>
|
|
<span class="font-label-data text-label-data text-on-surface">+4,120 FT</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container-high p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase block">Apex Count</span>
|
|
<span class="font-label-data text-label-data text-secondary">312 Curves</span>
|
|
</div>
|
|
</div>
|
|
<!-- LEADERSHIP ASSIGNED ROW -->
|
|
<div class="flex flex-wrap items-center justify-between gap-space-sm pt-space-xs">
|
|
<div class="flex items-center gap-space-md">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">LEAD:</span>
|
|
<span class="font-label-data text-label-data text-primary">@Viper_Lead (Panigale V4)</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">SWEEP:</span>
|
|
<span class="font-label-data text-label-data text-secondary">@Sarah_Sweep (890 Duke R)</span>
|
|
</div>
|
|
</div>
|
|
<button class="h-10 px-space-md rounded bg-primary text-on-primary font-label-data text-label-data uppercase tracking-wider hover:bg-primary-container transition-colors shadow">
|
|
Launch Staging Console
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- SECONDARY MISSION ROWS -->
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="rounded-lg bg-surface-container p-space-sm flex flex-col sm:flex-row sm:items-center justify-between gap-space-sm hover:bg-surface-container-high transition-colors">
|
|
<div class="flex items-center gap-space-md">
|
|
<div class="rounded p-space-xs bg-surface-container-highest text-primary font-label-data text-label-data text-center w-12">
|
|
<span class="block text-xs uppercase text-on-surface-variant">NOV</span>
|
|
<span class="text-base font-bold">16</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline-sm text-headline-sm text-on-surface">Skaggs Springs Apex Endurance</h4>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">Lead: @Dave_Lead • 82 mi • 22 RSVPs • Mesh Lock Enabled</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-sm self-end sm:self-center">
|
|
<span class="px-space-xs py-0.5 rounded bg-surface-container-highest text-secondary font-label-caption text-label-caption uppercase">STAGED</span>
|
|
<button class="p-space-xs rounded text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-base">tune</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-lg bg-surface-container p-space-sm flex flex-col sm:flex-row sm:items-center justify-between gap-space-sm hover:bg-surface-container-high transition-colors">
|
|
<div class="flex items-center gap-space-md">
|
|
<div class="rounded p-space-xs bg-surface-container-highest text-primary font-label-data text-label-data text-center w-12">
|
|
<span class="block text-xs uppercase text-on-surface-variant">NOV</span>
|
|
<span class="text-base font-bold">23</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline-sm text-headline-sm text-on-surface">Alice's Restaurant & Skyline Night Prowl</h4>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">Lead: @KevBlade • 64 mi • 45 RSVPs • Low-Light Interlock Active</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-sm self-end sm:self-center">
|
|
<span class="px-space-xs py-0.5 rounded bg-surface-container-highest text-on-surface-variant font-label-caption text-label-caption uppercase">DRAFTING</span>
|
|
<button class="p-space-xs rounded text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-base">tune</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- LIVE FORMATION TELEMETRY & COMPLIANCE RADAR (5 COLS) -->
|
|
<div class="lg:col-span-5 flex flex-col gap-space-md rounded-xl bg-surface-container-low p-space-lg shadow-md">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="w-3 h-3 rounded-sm bg-secondary"></div>
|
|
<h2 class="font-headline-sm text-headline-sm uppercase tracking-wide text-on-surface">Formation Telemetry Sync</h2>
|
|
</div>
|
|
<span class="px-space-xs py-0.5 rounded bg-primary-container/10 text-primary font-label-data text-label-data">LIVE SENSORS</span>
|
|
</div>
|
|
<!-- RADAR SVG VISUALIZATION -->
|
|
<div class="relative w-full rounded-lg bg-surface-container p-space-md flex flex-col items-center justify-center overflow-hidden">
|
|
<div class="w-full flex items-center justify-between text-on-surface-variant font-label-caption text-label-caption pb-space-xs">
|
|
<span>PACK STAGGER DELTA</span>
|
|
<span>GRID ACCURACY: ±0.02s</span>
|
|
</div>
|
|
<svg class="w-full h-44 text-primary" fill="none" viewbox="0 0 360 170">
|
|
<!-- Radial Grid Lines -->
|
|
<circle cx="180" cy="150" r="130" stroke="currentColor" stroke-dasharray="4 4" stroke-opacity="0.08"></circle>
|
|
<circle cx="180" cy="150" r="90" stroke="currentColor" stroke-opacity="0.12"></circle>
|
|
<circle cx="180" cy="150" r="50" stroke="currentColor" stroke-opacity="0.2"></circle>
|
|
<line stroke="currentColor" stroke-opacity="0.15" x1="50" x2="310" y1="150" y2="150"></line>
|
|
<line stroke="currentColor" stroke-opacity="0.2" x1="180" x2="180" y1="20" y2="150"></line>
|
|
<line stroke="currentColor" stroke-opacity="0.08" x1="90" x2="180" y1="60" y2="150"></line>
|
|
<line stroke="currentColor" stroke-opacity="0.08" x1="270" x2="180" y1="60" y2="150"></line>
|
|
<!-- Scan Sweep Effect -->
|
|
<polygon fill="currentColor" fill-opacity="0.04" points="180,150 140,30 220,30"></polygon>
|
|
<!-- Pack Riders Nodes (Staggered V formation) -->
|
|
<!-- Road Captain / Point -->
|
|
<circle cx="180" cy="45" fill="#00e5ff" r="5"></circle>
|
|
<circle class="animate-ping" cx="180" cy="45" r="10" stroke="#00e5ff" stroke-opacity="0.5" stroke-width="1.5"></circle>
|
|
<text fill="#e0e2ea" font-family="JetBrains Mono" font-size="9" x="190" y="48">#01 LEAD</text>
|
|
<!-- Officer 2 (Left Slot) -->
|
|
<circle cx="150" cy="75" fill="#b4c5ff" r="4"></circle>
|
|
<text fill="#bac9cc" font-family="JetBrains Mono" font-size="8" x="100" y="78">#02 KEVBLADE</text>
|
|
<!-- Officer 3 (Right Slot) -->
|
|
<circle cx="210" cy="80" fill="#b4c5ff" r="4"></circle>
|
|
<text fill="#bac9cc" font-family="JetBrains Mono" font-size="8" x="218" y="83">#03 DAVE</text>
|
|
<!-- Pack Body -->
|
|
<circle cx="140" cy="110" fill="#e0e2ea" fill-opacity="0.7" r="3.5"></circle>
|
|
<circle cx="220" cy="115" fill="#e0e2ea" fill-opacity="0.7" r="3.5"></circle>
|
|
<!-- Sweep / Tail Gunner -->
|
|
<circle cx="180" cy="135" fill="#00e5ff" r="4.5"></circle>
|
|
<text fill="#00e5ff" font-family="JetBrains Mono" font-size="8" x="192" y="138">#05 SWEEP</text>
|
|
</svg>
|
|
<div class="w-full flex items-center justify-between pt-space-xs font-label-data text-label-data">
|
|
<span class="text-on-surface-variant">TARGET INTERVAL: <strong class="text-on-surface">1.2s</strong></span>
|
|
<span class="text-primary-container">CURRENT SPREAD: 0.82 MI</span>
|
|
</div>
|
|
</div>
|
|
<!-- COMPLIANCE GAUGES -->
|
|
<div class="grid grid-cols-2 gap-space-sm">
|
|
<div class="rounded-lg bg-surface-container p-space-sm">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase block">LEAN MUTE INTERLOCK</span>
|
|
<div class="flex items-baseline gap-space-xs pt-1">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary">100%</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">ACTIVE</span>
|
|
</div>
|
|
<p class="font-label-caption text-label-caption text-on-surface-variant pt-1">HUD audio suppressed past 35° lean angle to preserve focus.</p>
|
|
</div>
|
|
<div class="rounded-lg bg-surface-container p-space-sm">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase block">HAZARD / INCIDENT FLAG</span>
|
|
<div class="flex items-baseline gap-space-xs pt-1">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">0</span>
|
|
<span class="font-label-caption text-label-caption text-primary">CRITICAL (L12M)</span>
|
|
</div>
|
|
<p class="font-label-caption text-label-caption text-on-surface-variant pt-1">Clean protocol track record on certified squadron missions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 3: OFFICER CORPS & COMMAND STAFF MANAGEMENT GRID -->
|
|
<section class="flex flex-col gap-space-md">
|
|
<div class="flex flex-wrap items-end justify-between gap-space-sm">
|
|
<div>
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="font-label-caption text-label-caption text-primary uppercase">GOVERNANCE & TACTICAL ROSTER</span>
|
|
</div>
|
|
<h2 class="font-headline-lg text-headline-lg uppercase text-on-surface">Officer Command Staff</h2>
|
|
</div>
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="font-label-data text-label-data text-on-surface-variant">5/5 Active Seats Filled</span>
|
|
<a class="inline-flex items-center gap-space-xs text-primary font-label-data text-label-data uppercase hover:text-primary-container transition-colors" href="#">
|
|
<span>Launch Ranks Builder</span>
|
|
<span class="material-symbols-outlined text-sm">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- 5 TACTICAL OFFICER CARDS -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-space-md">
|
|
<!-- OFFICER 1: PRESIDENT -->
|
|
<div class="rounded-xl bg-surface-container-low p-space-md flex flex-col justify-between gap-space-md shadow hover:bg-surface-container transition-all group">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-start justify-between">
|
|
<div class="relative">
|
|
<img class="w-14 h-14 rounded-lg object-cover" data-alt="Intense high contrast portrait of a motorcycle club president wearing a carbon fiber helmet visor slightly tilted up with a rugged tactical look in dark garage lighting with cyan neon reflections" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAy1kh17AxGEn4dSEwTCYxjQpk55IipoOtJOhZYQzlbSxPz9e_2IbLNrYNpe1AOC-DU6eJgqZfHGF49N5Yr4lcL6K09d_YbDmFk09vYjBcV5cFDQocjzBUEExLoPLmj810B0LFMBBt1mQjoy2cuwvVjLWPMPptyZpa1eOQ6Ghxmi2oHQ7QeGPvXAd9TL9pujxL4iFLVhaj-bQOX1xE6ZW3S8wc9chN49vkPOOgxaZuOk2Pr78bx_-2h"/>
|
|
<span class="absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full bg-primary-container ring-2 ring-surface-container-low"></span>
|
|
</div>
|
|
<span class="px-space-xs py-0.5 rounded bg-primary-container text-on-primary font-label-caption text-label-caption uppercase tracking-wider font-bold">PRESIDENT</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary transition-colors">@KevBlade</h3>
|
|
<span class="font-label-data text-label-data text-primary-container">Kevin Vance • Founder</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container-high p-space-xs flex flex-col gap-0.5">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Assigned Cockpit</span>
|
|
<span class="font-label-data text-label-data text-on-surface truncate">2024 BMW S1000RR M</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-space-xs text-center pt-space-xs">
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">PEAK LEAN</span>
|
|
<span class="font-label-data text-label-data text-primary">52.4°</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">MESH LINK</span>
|
|
<span class="font-label-data text-label-data text-on-surface">ONLINE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">STATUS: ON PAVEMENT</span>
|
|
<button class="text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- OFFICER 2: VICE PRESIDENT -->
|
|
<div class="rounded-xl bg-surface-container-low p-space-md flex flex-col justify-between gap-space-md shadow hover:bg-surface-container transition-all group">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-start justify-between">
|
|
<div class="relative">
|
|
<img class="w-14 h-14 rounded-lg object-cover" data-alt="Athletic female motorcyclist officer portrait wearing dark leather racing suit and sleek communication headset in high tech moto club briefing room" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABoNePv0lQW_3JDVLQC93DHj0rwwqzGsj-6wwj33eGKzewxAN2WJI-QYtlxGzgUzSHOs4Jrim9qTViTE4jwf8ZaDbUtglp6EcgKAh8cJL_Aj4tMLpbTKCun_DH012iyBZLMu_HLDM4s__2iRJ_1SWpmOj1I_xB7rhzNcNtOICyy_qHtHE9KGxfA9cUTF1h7S0aQIuOFErI9ciHNJ69Fazjjb7XUYMK22vWVSVMpvbnjPOpS7dQBYAr"/>
|
|
<span class="absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full bg-primary-container ring-2 ring-surface-container-low"></span>
|
|
</div>
|
|
<span class="px-space-xs py-0.5 rounded bg-secondary-container text-on-secondary-container font-label-caption text-label-caption uppercase tracking-wider font-bold">VICE PRES</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-secondary transition-colors">@Viper_Lead</h3>
|
|
<span class="font-label-data text-label-data text-secondary">Elena Rostova • Tactical VP</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container-high p-space-xs flex flex-col gap-0.5">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Assigned Cockpit</span>
|
|
<span class="font-label-data text-label-data text-on-surface truncate">2024 Ducati Panigale V4 S</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-space-xs text-center pt-space-xs">
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">PEAK LEAN</span>
|
|
<span class="font-label-data text-label-data text-primary">54.1°</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">ROLE</span>
|
|
<span class="font-label-data text-label-data text-on-surface">LEAD CAPT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">STATUS: STAGING #01</span>
|
|
<button class="text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- OFFICER 3: ROAD CAPTAIN -->
|
|
<div class="rounded-xl bg-surface-container-low p-space-md flex flex-col justify-between gap-space-md shadow hover:bg-surface-container transition-all group">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-start justify-between">
|
|
<div class="relative">
|
|
<img class="w-14 h-14 rounded-lg object-cover" data-alt="Portrait of seasoned road captain rider with aerodynamic helmet strap and focused gaze in front of glowing map screens and telemetry telemetry monitors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAEPk4EmsgfQL578CZrsRLbKFXE83aPN6t75BRHs7TAPZDfLTJd3OhuAyv7nGIWALqITCnhOymYN_PGOoDo5lrgekZQA7Jop9Gu1uUYPTL8Lrl1jJyMqPc3okbVDanvVTmvQIlSLsOL3JJ1baKuYVT5OBG7KYGycxlGSv3tc64DcXxEE117A0uy2K13wOdjywmnAAglAFBue415jB5ZV33SipATyBUqSXw7kxEs0PJbV-72jSTrA98E"/>
|
|
<span class="absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full bg-primary-container ring-2 ring-surface-container-low"></span>
|
|
</div>
|
|
<span class="px-space-xs py-0.5 rounded bg-surface-container-highest text-primary font-label-caption text-label-caption uppercase tracking-wider font-bold">ROAD CAPT</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary transition-colors">@Dave_Lead</h3>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">Marcus David • Route Lead</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container-high p-space-xs flex flex-col gap-0.5">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Assigned Cockpit</span>
|
|
<span class="font-label-data text-label-data text-on-surface truncate">2023 Aprilia Tuono V4 1100</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-space-xs text-center pt-space-xs">
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">PEAK LEAN</span>
|
|
<span class="font-label-data text-label-data text-primary">50.8°</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">NAV NODE</span>
|
|
<span class="font-label-data text-label-data text-on-surface">STRATEGIST</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">STATUS: ACTIVE</span>
|
|
<button class="text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- OFFICER 4: TAIL GUNNER / SAFETY MARSHAL -->
|
|
<div class="rounded-xl bg-surface-container-low p-space-md flex flex-col justify-between gap-space-md shadow hover:bg-surface-container transition-all group">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-start justify-between">
|
|
<div class="relative">
|
|
<img class="w-14 h-14 rounded-lg object-cover" data-alt="Tactical female safety officer motorcyclist portrait equipped with orange first response telemetry patch and ballistic riding gear against dark urban asphalt background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAkU9TSw4mUfdc4iB1MAMbtm_FQr1FD-7LcAgRyva4wn-HLT0MBw5cPI5Q-YHsvrd-7_ZA9Z1WRr8nbX-vjS_nlWN64iDw5rVZsMLSaQpAirzdi6Ayf3BOoOL9Q-6UPdpnyvyShue3zI0JYmTgO2jbp6tpsNXSDVsX1g71hELCKbYp7anywYyzy6IKgj90C3D9XUpPr6VUJZwu7KDQo38gVvAf2R7mO1d2JrEvGFLJ6EY8re9HjsaJT"/>
|
|
<span class="absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full bg-primary-container ring-2 ring-surface-container-low"></span>
|
|
</div>
|
|
<span class="px-space-xs py-0.5 rounded bg-surface-container-highest text-secondary font-label-caption text-label-caption uppercase tracking-wider font-bold">SAFETY SWEEP</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-secondary transition-colors">@Sarah_Sweep</h3>
|
|
<span class="font-label-data text-label-data text-secondary">Dr. Sarah Jin • Lead Med</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container-high p-space-xs flex flex-col gap-0.5">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Assigned Cockpit</span>
|
|
<span class="font-label-data text-label-data text-on-surface truncate">2024 KTM 890 Duke R</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-space-xs text-center pt-space-xs">
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">PAYLOAD</span>
|
|
<span class="font-label-data text-label-data text-error font-bold">TRAUMA I</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">SWEEP RATE</span>
|
|
<span class="font-label-data text-label-data text-on-surface">100% RET</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">STATUS: STANDBY PREP</span>
|
|
<button class="text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- OFFICER 5: TECHNICAL MARSHAL -->
|
|
<div class="rounded-xl bg-surface-container-low p-space-md flex flex-col justify-between gap-space-md shadow hover:bg-surface-container transition-all group">
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div class="flex items-start justify-between">
|
|
<div class="relative">
|
|
<img class="w-14 h-14 rounded-lg object-cover" data-alt="Technical motorcycle tuner and telemetry engineer portrait working on electronic telemetry HUD tablet with sport bike engine components visible in background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAiUJau1jftNl03EdsoZrdUwq64ciEqSzlMimwWYUzSbMcr-IQFRAgZitKnDQEsnZkvBsHicFUsx_Exte6369Iz2DGlmM-g62L80jhADwO7m_M_4PAX-UVnfR0siHyIy0_ZVQLgq-okMwg6ur7hTPAkiA_F7q87CcQ_lRT5QwA6HYUcHli3h4HfGW6s6yXELLas7quWtv8EsKVzp2iX1ooYb1WupJ1hveDHntv-0bSILFodwHRWPuae"/>
|
|
<span class="absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full bg-primary-container ring-2 ring-surface-container-low"></span>
|
|
</div>
|
|
<span class="px-space-xs py-0.5 rounded bg-surface-container-highest text-primary-container font-label-caption text-label-caption uppercase tracking-wider font-bold">TECH MARSHAL</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary transition-colors">@Kenji_R1</h3>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">Kenji Takahashi • CAN-Bus</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container-high p-space-xs flex flex-col gap-0.5">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Assigned Cockpit</span>
|
|
<span class="font-label-data text-label-data text-on-surface truncate">2024 Yamaha YZF-R1M</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-space-xs text-center pt-space-xs">
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">OBD-II CAN</span>
|
|
<span class="font-label-data text-label-data text-primary">20Hz SYNC</span>
|
|
</div>
|
|
<div class="rounded bg-surface-container p-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant block">RADIO GW</span>
|
|
<span class="font-label-data text-label-data text-on-surface">CH-04 MESH</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">STATUS: CALIBRATING</span>
|
|
<button class="text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 4: TACTICAL TELEMETRY AUDIT LOG & COMPLIANCE RULES -->
|
|
<section class="grid grid-cols-1 lg:grid-cols-12 gap-space-lg">
|
|
<!-- COMPLIANCE LOG TABLE (8 COLS) -->
|
|
<div class="lg:col-span-8 flex flex-col gap-space-md rounded-xl bg-surface-container-low p-space-lg shadow-md">
|
|
<div class="flex flex-wrap items-center justify-between gap-space-sm">
|
|
<div>
|
|
<span class="font-label-caption text-label-caption text-primary uppercase">TELEMETRY AUDIT ENGINE</span>
|
|
<h3 class="font-headline-sm text-headline-sm uppercase text-on-surface">Pack Member Compliance & Interlock Stream</h3>
|
|
</div>
|
|
<div class="flex items-center gap-space-xs">
|
|
<button class="px-space-sm py-1 rounded bg-surface-container text-on-surface-variant hover:text-on-surface font-label-data text-label-data uppercase">Filter: All Nodes</button>
|
|
<button class="p-1 rounded bg-surface-container text-on-surface-variant hover:text-on-surface">
|
|
<span class="material-symbols-outlined text-base">refresh</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- TABLE-STYLE DATA STREAM -->
|
|
<div class="flex flex-col gap-1 overflow-x-auto">
|
|
<div class="grid grid-cols-12 gap-space-xs px-space-sm py-space-xs text-on-surface-variant font-label-caption text-label-caption uppercase tracking-wider">
|
|
<span class="col-span-4">Pilot & Machine</span>
|
|
<span class="col-span-2 text-center">Peak Lean</span>
|
|
<span class="col-span-3 text-center">Interlock Status</span>
|
|
<span class="col-span-2 text-center">Mesh Delay</span>
|
|
<span class="col-span-1 text-right">Audit</span>
|
|
</div>
|
|
<!-- ROW 1 -->
|
|
<div class="grid grid-cols-12 gap-space-xs items-center px-space-sm py-space-sm rounded bg-surface-container hover:bg-surface-container-high transition-colors">
|
|
<div class="col-span-4 flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
<span class="font-label-data text-label-data text-on-surface font-bold">@GhostRider_09</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant truncate hidden sm:inline">(GSX-R 1000)</span>
|
|
</div>
|
|
<div class="col-span-2 text-center font-label-data text-label-data text-primary">48.2°</div>
|
|
<div class="col-span-3 flex justify-center">
|
|
<span class="px-space-xs py-0.5 rounded bg-primary-container/15 text-primary font-label-caption text-label-caption">AUDIO-MUTE OK</span>
|
|
</div>
|
|
<div class="col-span-2 text-center font-label-data text-label-data text-on-surface">12 ms</div>
|
|
<div class="col-span-1 text-right">
|
|
<span class="material-symbols-outlined text-sm text-primary">check_circle</span>
|
|
</div>
|
|
</div>
|
|
<!-- ROW 2 -->
|
|
<div class="grid grid-cols-12 gap-space-xs items-center px-space-sm py-space-sm rounded bg-surface-container hover:bg-surface-container-high transition-colors">
|
|
<div class="col-span-4 flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-primary-container"></span>
|
|
<span class="font-label-data text-label-data text-on-surface font-bold">@TarmacApex</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant truncate hidden sm:inline">(Streetfighter V4)</span>
|
|
</div>
|
|
<div class="col-span-2 text-center font-label-data text-label-data text-primary">51.0°</div>
|
|
<div class="col-span-3 flex justify-center">
|
|
<span class="px-space-xs py-0.5 rounded bg-primary-container/15 text-primary font-label-caption text-label-caption">AUDIO-MUTE OK</span>
|
|
</div>
|
|
<div class="col-span-2 text-center font-label-data text-label-data text-on-surface">16 ms</div>
|
|
<div class="col-span-1 text-right">
|
|
<span class="material-symbols-outlined text-sm text-primary">check_circle</span>
|
|
</div>
|
|
</div>
|
|
<!-- ROW 3 -->
|
|
<div class="grid grid-cols-12 gap-space-xs items-center px-space-sm py-space-sm rounded bg-surface-container hover:bg-surface-container-high transition-colors">
|
|
<div class="col-span-4 flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
<span class="font-label-data text-label-data text-on-surface font-bold">@CanyonCarver_X</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant truncate hidden sm:inline">(ZX-10R KRT)</span>
|
|
</div>
|
|
<div class="col-span-2 text-center font-label-data text-label-data text-primary">44.6°</div>
|
|
<div class="col-span-3 flex justify-center">
|
|
<span class="px-space-xs py-0.5 rounded bg-primary-container/15 text-primary font-label-caption text-label-caption">AUDIO-MUTE OK</span>
|
|
</div>
|
|
<div class="col-span-2 text-center font-label-data text-label-data text-on-surface">22 ms</div>
|
|
<div class="col-span-1 text-right">
|
|
<span class="material-symbols-outlined text-sm text-primary">check_circle</span>
|
|
</div>
|
|
</div>
|
|
<!-- ROW 4 -->
|
|
<div class="grid grid-cols-12 gap-space-xs items-center px-space-sm py-space-sm rounded bg-surface-container hover:bg-surface-container-high transition-colors">
|
|
<div class="col-span-4 flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
|
<span class="font-label-data text-label-data text-on-surface font-bold">@RedlineRider</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant truncate hidden sm:inline">(MT-09 SP)</span>
|
|
</div>
|
|
<div class="col-span-2 text-center font-label-data text-label-data text-primary">47.3°</div>
|
|
<div class="col-span-3 flex justify-center">
|
|
<span class="px-space-xs py-0.5 rounded bg-primary-container/15 text-primary font-label-caption text-label-caption">AUDIO-MUTE OK</span>
|
|
</div>
|
|
<div class="col-span-2 text-center font-label-data text-label-data text-on-surface">19 ms</div>
|
|
<div class="col-span-1 text-right">
|
|
<span class="material-symbols-outlined text-sm text-primary">check_circle</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- QUICK OFFICER DISPATCH TOOLS (4 COLS) -->
|
|
<div class="lg:col-span-4 flex flex-col gap-space-md rounded-xl bg-surface-container-low p-space-lg shadow-md">
|
|
<div class="flex items-center gap-space-xs">
|
|
<span class="material-symbols-outlined text-primary">settings_suggest</span>
|
|
<h3 class="font-headline-sm text-headline-sm uppercase text-on-surface">Officer Quick Actions</h3>
|
|
</div>
|
|
<!-- QUICK LINKS CARDS -->
|
|
<div class="flex flex-col gap-space-sm">
|
|
<a class="rounded-lg bg-surface-container p-space-md flex items-center justify-between hover:bg-surface-container-high transition-all group" href="#">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="p-space-xs rounded bg-surface-container-highest text-primary">
|
|
<span class="material-symbols-outlined text-xl">military_tech</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary transition-colors">Roles & Ranks Builder</h4>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">Configure patch badges & permissions</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform">chevron_right</span>
|
|
</a>
|
|
<a class="rounded-lg bg-surface-container p-space-md flex items-center justify-between hover:bg-surface-container-high transition-all group" href="#">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="p-space-xs rounded bg-surface-container-highest text-secondary">
|
|
<span class="material-symbols-outlined text-xl">podcasts</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-secondary transition-colors">Mesh Channel Broadcaster</h4>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">Switch 915 MHz frequency & repeaters</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform">chevron_right</span>
|
|
</a>
|
|
<a class="rounded-lg bg-surface-container p-space-md flex items-center justify-between hover:bg-surface-container-high transition-all group" href="#">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="p-space-xs rounded bg-surface-container-highest text-primary-container">
|
|
<span class="material-symbols-outlined text-xl">receipt_long</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-headline-sm text-headline-sm text-on-surface group-hover:text-primary-container transition-colors">Charter & Bylaws Archive</h4>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant">Safety covenants & formation protocols</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform">chevron_right</span>
|
|
</a>
|
|
<!-- QUICK BROADCAST TOGGLE -->
|
|
<div class="rounded-lg bg-surface-container p-space-md flex flex-col gap-space-xs mt-space-xs">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-on-surface uppercase">SQUADRON EMERGENCY MUTE</span>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" id="emergencyMuteSwitch" type="checkbox" value=""/>
|
|
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-container"></div>
|
|
</label>
|
|
</div>
|
|
<p class="font-label-caption text-label-caption text-on-surface-variant">When enabled, road captains can override all member HUD audio with one-touch emergency channel alert.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<!-- INTERACTIVE MODAL / QUICK STAGING TRIGGER OVERLAY -->
|
|
<div class="hidden fixed inset-0 z-50 flex items-center justify-center p-space-md bg-surface-container-lowest/80 backdrop-blur-md" id="stagingModal">
|
|
<div class="w-full max-w-xl rounded-xl bg-surface-container p-space-lg shadow-2xl flex flex-col gap-space-md">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-space-xs text-primary">
|
|
<span class="material-symbols-outlined">satellite_alt</span>
|
|
<span class="font-headline-sm text-headline-sm uppercase text-on-surface">Stage Official Squadron Run</span>
|
|
</div>
|
|
<button class="text-on-surface-variant hover:text-on-surface" id="btnCloseModal">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col gap-space-sm">
|
|
<div>
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase block pb-1">Run Designation / Title</label>
|
|
<input class="w-full h-12 px-space-md rounded bg-surface-container-low text-on-surface font-body-md focus:outline-none focus:ring-1 focus:ring-primary-container" type="text" value="Sonoma Coastal Ridge Apex Sprint"/>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-space-sm">
|
|
<div>
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase block pb-1">Designated Lead</label>
|
|
<select class="w-full h-12 px-space-md rounded bg-surface-container-low text-on-surface font-body-md focus:outline-none focus:ring-1 focus:ring-primary-container">
|
|
<option>@Viper_Lead (Elena R.)</option>
|
|
<option>@KevBlade (Kevin V.)</option>
|
|
<option>@Dave_Lead (Marcus D.)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase block pb-1">Designated Sweep</label>
|
|
<select class="w-full h-12 px-space-md rounded bg-surface-container-low text-on-surface font-body-md focus:outline-none focus:ring-1 focus:ring-primary-container">
|
|
<option>@Sarah_Sweep (KTM 890 Med-1)</option>
|
|
<option>@Kenji_R1 (Yamaha R1M Tech)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-space-sm">
|
|
<div>
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase block pb-1">Kickstands Up (KSU)</label>
|
|
<input class="w-full h-12 px-space-md rounded bg-surface-container-low text-on-surface font-label-data text-label-data focus:outline-none focus:ring-1 focus:ring-primary-container" type="datetime-local" value="2025-11-23T07:00"/>
|
|
</div>
|
|
<div>
|
|
<label class="font-label-data text-label-data text-on-surface-variant uppercase block pb-1">Formation Radio Mesh</label>
|
|
<input class="w-full h-12 px-space-md rounded bg-surface-container-low text-primary font-label-data text-label-data focus:outline-none" readonly="" type="text" value="CH-04 / 915.2 MHz"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-space-sm pt-space-xs">
|
|
<button class="h-10 px-space-md rounded bg-surface-container-high text-on-surface font-label-data text-label-data uppercase hover:bg-surface-variant transition-colors" id="btnCancelModal">
|
|
Cancel
|
|
</button>
|
|
<button class="h-10 px-space-md rounded bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider hover:bg-primary transition-colors shadow" id="btnConfirmStage">
|
|
Broadcast Staging Alert
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Quick Interactive Logic for Mission Staging Modal
|
|
const btnStage = document.getElementById('btnStageMission');
|
|
const modal = document.getElementById('stagingModal');
|
|
const btnClose = document.getElementById('btnCloseModal');
|
|
const btnCancel = document.getElementById('btnCancelModal');
|
|
const btnConfirm = document.getElementById('btnConfirmStage');
|
|
|
|
if (btnStage && modal) {
|
|
btnStage.addEventListener('click', () => modal.classList.remove('hidden'));
|
|
}
|
|
|
|
const closeModal = () => modal && modal.classList.add('hidden');
|
|
if (btnClose) btnClose.addEventListener('click', closeModal);
|
|
if (btnCancel) btnCancel.addEventListener('click', closeModal);
|
|
if (btnConfirm) {
|
|
btnConfirm.addEventListener('click', () => {
|
|
btnConfirm.textContent = 'TRANSMITTING 20Hz...';
|
|
setTimeout(() => {
|
|
btnConfirm.textContent = 'BROADCAST ACTIVE!';
|
|
setTimeout(closeModal, 800);
|
|
}, 600);
|
|
});
|
|
}
|
|
</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">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> |