MotorSignal-App/docs/stitch-designs/code/40_group_rides_hub.html

451 lines
26 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"/>
<title>MOTORSIGNAL HUD // Group Rides Hub</title>
<!-- Material Symbols Outlined -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Fonts -->
<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&amp;family=JetBrains+Mono:wght@500;600;700;800&amp;family=Space+Grotesk:wght@500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-tertiary-fixed-variant": "#5516be",
"surface-variant": "#32353b",
"outline": "#849396",
"tertiary": "#f2e9ff",
"on-secondary-fixed": "#00174b",
"error-container": "#93000a",
"surface-dim": "#101419",
"primary-fixed-dim": "#00daf3",
"surface-bright": "#36393f",
"on-primary-container": "#00626e",
"primary-fixed": "#9cf0ff",
"on-primary-fixed": "#001f24",
"on-surface-variant": "#bac9cc",
"tertiary-container": "#d9c8ff",
"outline-variant": "#3b494c",
"on-background": "#e0e2ea",
"surface-tint": "#00daf3",
"surface-container-highest": "#32353b",
"background": "#101419",
"inverse-surface": "#e0e2ea",
"primary-container": "#00e5ff",
"on-tertiary-fixed": "#23005c",
"on-surface": "#e0e2ea",
"on-tertiary": "#3c0091",
"on-secondary-fixed-variant": "#003ea8",
"tertiary-fixed-dim": "#d0bcff",
"surface-container": "#1d2025",
"on-secondary-container": "#cdd7ff",
"inverse-primary": "#006875",
"surface": "#101419",
"secondary-fixed": "#dbe1ff",
"on-error-container": "#ffdad6",
"inverse-on-surface": "#2d3036",
"on-secondary": "#002a78",
"surface-container-lowest": "#0b0e13",
"on-primary-fixed-variant": "#004f58",
"surface-container-low": "#181c21",
"surface-container-high": "#272a30",
"on-primary": "#00363d",
"error": "#ffb4ab",
"secondary-fixed-dim": "#b4c5ff",
"secondary-container": "#0053db",
"primary": "#c3f5ff",
"on-error": "#690005",
"tertiary-fixed": "#e9ddff",
"secondary": "#b4c5ff",
"on-tertiary-container": "#6834d1"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"space-md": "1rem",
"gutter": "1rem",
"space-xs": "0.25rem",
"space-lg": "1.5rem",
"gutter-lg": "1.5rem",
"margin": "1rem",
"space-sm": "0.5rem",
"margin-lg": "2rem",
"space-xl": "2rem"
},
"fontFamily": {
"telemetry-metric-md": ["JetBrains Mono"],
"headline-md": ["Space Grotesk"],
"body-lg": ["Inter"],
"label-caption": ["Inter"],
"label-data": ["JetBrains Mono"],
"display-hero-mobile": ["Space Grotesk"],
"headline-lg": ["Space Grotesk"],
"telemetry-metric-lg": ["JetBrains Mono"],
"headline-sm": ["Space Grotesk"],
"body-md": ["Inter"],
"telemetry-metric-lg-mobile": ["JetBrains Mono"],
"display-hero": ["Space Grotesk"]
},
"fontSize": {
"telemetry-metric-md": ["28px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
"headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
"body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "500" }],
"label-caption": ["11px", { "lineHeight": "14px", "letterSpacing": "0.05em", "fontWeight": "600" }],
"label-data": ["12px", { "lineHeight": "16px", "letterSpacing": "0.08em", "fontWeight": "600" }],
"display-hero-mobile": ["40px", { "lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"telemetry-metric-lg": ["48px", { "lineHeight": "48px", "letterSpacing": "-0.04em", "fontWeight": "700" }],
"headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"telemetry-metric-lg-mobile": ["36px", { "lineHeight": "36px", "letterSpacing": "-0.03em", "fontWeight": "700" }],
"display-hero": ["56px", { "lineHeight": "60px", "letterSpacing": "-0.03em", "fontWeight": "700" }]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
/* Glow utilities mapped to design system */
.glow-cyan-sm {
box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}
.glow-cyan-md {
box-shadow: 0 0 20px rgba(0, 229, 255, 0.45);
}
.glow-blue-card {
box-shadow: 0 0 16px rgba(37, 99, 235, 0.15);
}
.radar-pulse {
animation: pulseRadar 2s infinite ease-out;
}
@keyframes pulseRadar {
0% { transform: scale(0.95); opacity: 0.9; }
50% { transform: scale(1.3); opacity: 0.3; }
100% { transform: scale(0.95); opacity: 0.9; }
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface antialiased selection:bg-primary-container selection:text-on-primary min-h-screen pb-28">
<!-- TOP APP BAR (Shared Components JSON Anchor) -->
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-gutter h-14 bg-surface-container-lowest border-b border-outline-variant">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary-container" data-icon="sensors">sensors</span>
<span class="text-headline-sm font-headline-sm font-bold tracking-wider text-primary-container">MOTORSIGNAL HUD</span>
</div>
<div class="flex items-center gap-3">
<!-- Cockpit mini diagnostics -->
<div class="hidden sm:flex items-center gap-2 font-label-data text-label-data text-outline">
<span class="text-primary-container">MESH: CH-04</span>
<span class="text-outline-variant">•</span>
<span>GNSS: 20Hz</span>
</div>
<button aria-label="System Alerts" class="flex items-center justify-center p-2 rounded-lg text-primary-container hover:bg-surface-container active:scale-95 duration-100 ease-out">
<span class="material-symbols-outlined" data-icon="warning">warning</span>
</button>
</div>
</header>
<!-- MAIN HUD CONTENT CANVAS -->
<main class="pt-16 px-gutter max-w-xl mx-auto space-y-space-md">
<!-- SUB-HUD REALTIME STATUS BAR -->
<section class="bg-surface-container-lowest border border-outline-variant rounded-xl p-space-sm flex items-center justify-between text-label-data font-label-data">
<div class="flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="radar-pulse absolute inline-flex h-full w-full rounded-full bg-primary-container opacity-75"></span>
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-primary-container"></span>
</span>
<span class="text-primary tracking-wider font-semibold">MESH ONLINE [CH-04]</span>
</div>
<div class="flex items-center gap-3 text-outline">
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-[16px] text-primary" data-icon="gps_fixed">gps_fixed</span>
<span>20Hz LOCK</span>
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-[16px] text-primary-container" data-icon="battery_charging_full">battery_charging_full</span>
<span class="text-on-surface">98%</span>
</div>
<div class="w-6 h-6 rounded-full border border-outline-variant bg-surface-container-high flex items-center justify-center overflow-hidden">
<span class="material-symbols-outlined text-[16px] text-primary" data-icon="sports_motorsports">sports_motorsports</span>
</div>
</div>
</section>
<!-- SECTION TITLE: RECON & TELEMETRY CLUSTER -->
<section class="space-y-1">
<div class="flex items-center justify-between">
<h1 class="text-headline-md font-headline-md tracking-tight text-on-surface">GROUP RIDES // RECON</h1>
<span class="px-2 py-0.5 rounded border border-outline-variant bg-surface-container-low font-label-data text-label-data text-primary-container">915MHz P2P</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant">Live telemetry radar, tactical formation locks, and decentralized mesh packs.</p>
</section>
<!-- QUICK JOIN PACK CARD (Top Priority Module) -->
<section class="bg-surface-container-low border border-outline-variant rounded-xl p-space-md space-y-space-sm relative overflow-hidden">
<!-- Background subtle grid accent -->
<div class="absolute -right-10 -bottom-10 opacity-5 pointer-events-none select-none text-primary-container font-headline-lg">
<span class="material-symbols-outlined text-[140px]" data-icon="cell_tower">cell_tower</span>
</div>
<div class="flex items-center justify-between border-b border-outline-variant pb-2">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary-container" data-icon="radio">radio</span>
<span class="font-label-data text-label-data uppercase tracking-wider text-on-surface font-semibold">Enter Pack Join Code</span>
</div>
<span class="flex items-center gap-1 text-label-caption font-label-caption px-2 py-0.5 rounded bg-surface-container border border-outline-variant text-outline">
<span class="material-symbols-outlined text-[14px] text-primary" data-icon="lock">lock</span>
<span>AES-256</span>
</span>
</div>
<!-- Character PIN layout -->
<div class="grid grid-cols-6 gap-2 pt-1">
<div class="h-12 bg-surface-container-lowest border border-outline-variant rounded-lg flex items-center justify-center font-telemetry-metric-md text-telemetry-metric-md text-primary-container font-bold">8</div>
<div class="h-12 bg-surface-container-lowest border border-outline-variant rounded-lg flex items-center justify-center font-telemetry-metric-md text-telemetry-metric-md text-primary-container font-bold">4</div>
<div class="h-12 bg-surface-container-lowest border border-outline-variant rounded-lg flex items-center justify-center font-telemetry-metric-md text-telemetry-metric-md text-primary-container font-bold">9</div>
<div class="h-12 bg-surface-container-lowest border border-outline-variant rounded-lg flex items-center justify-center font-telemetry-metric-md text-telemetry-metric-md text-outline">2</div>
<div class="h-12 bg-surface-container-lowest border border-outline-variant rounded-lg flex items-center justify-center font-telemetry-metric-md text-telemetry-metric-md text-outline">0</div>
<div class="h-12 bg-surface-container-lowest border border-outline-variant rounded-lg flex items-center justify-center font-telemetry-metric-md text-telemetry-metric-md text-outline">1</div>
</div>
<!-- Join Mesh CTA -->
<div class="pt-1">
<button class="w-full min-h-[48px] bg-primary-container text-on-primary-fixed font-headline-sm text-headline-sm font-bold tracking-wider rounded-lg flex items-center justify-center gap-2 glow-cyan-sm hover:brightness-110 active:scale-95 duration-100 ease-out">
<span class="material-symbols-outlined" data-icon="bolt">bolt</span>
<span>JOIN MESH</span>
</button>
</div>
<div class="flex items-center justify-between text-label-caption font-label-caption text-on-surface-variant pt-0.5">
<span class="flex items-center gap-1">
<span class="material-symbols-outlined text-[14px] text-primary" data-icon="wifi_tethering">wifi_tethering</span>
<span>Direct P2P 915MHz RF sync or encrypted cloud relay</span>
</span>
<button class="text-primary hover:underline">Scan QR</button>
</div>
</section>
<!-- GLOVE-FRIENDLY SEGMENTED FILTER TABS -->
<nav aria-label="Ride Filters" class="flex items-center gap-2 p-1 bg-surface-container-lowest border border-outline-variant rounded-xl">
<!-- Active Pill -->
<button class="flex-1 min-h-[48px] px-3 py-2 rounded-lg bg-surface-container-high border border-primary-container text-primary-container font-headline-sm text-headline-sm flex items-center justify-center gap-2 glow-cyan-sm">
<span class="relative flex h-2 w-2">
<span class="radar-pulse absolute inline-flex h-full w-full rounded-full bg-primary-container opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary-container"></span>
</span>
<span class="text-label-caption font-label-caption font-bold tracking-wider uppercase">Happening Now</span>
</button>
<!-- Inactive Tabs -->
<button class="flex-1 min-h-[48px] px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container active:scale-95 duration-100 flex items-center justify-center gap-1.5">
<span class="text-label-caption font-label-caption font-semibold tracking-wider uppercase">Upcoming</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-outline font-label-data text-[10px]">12</span>
</button>
<button class="flex-1 min-h-[48px] px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container active:scale-95 duration-100 flex items-center justify-center gap-1.5">
<span class="text-label-caption font-label-caption font-semibold tracking-wider uppercase">My Pack</span>
<span class="px-1.5 py-0.2 rounded bg-surface-container-high text-outline font-label-data text-[10px]">3</span>
</button>
</nav>
<!-- ACTIVE RIDE CARD ('HAPPENING NOW' SPOTLIGHT) -->
<article class="bg-surface-container-low border border-primary-container rounded-xl p-space-md space-y-space-md glow-blue-card relative">
<!-- Top Meta line -->
<div class="flex items-start justify-between gap-2">
<div class="space-y-1">
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-surface-container-high border border-primary text-primary font-label-data text-label-data font-semibold">
<span class="h-1.5 w-1.5 rounded-full bg-primary animate-ping"></span>
<span>LIVE MESH • 6 RIDERS LIVE</span>
</span>
</div>
<h2 class="text-headline-sm font-headline-sm text-on-surface font-bold">Skyline Ridge Dawn Patrol</h2>
</div>
<!-- Cohesion Metric Circular Tile -->
<div class="text-right p-2 rounded-lg bg-surface-container-lowest border border-outline-variant">
<div class="text-[10px] font-label-data text-outline">COHESION</div>
<div class="text-headline-sm font-telemetry-metric-md text-primary-container font-bold">98%</div>
</div>
</div>
<!-- Telemetry Grid Badges -->
<div class="grid grid-cols-2 gap-2 text-label-data font-label-data">
<div class="bg-surface-container-lowest p-2 rounded-lg border border-outline-variant flex items-center justify-between">
<span class="text-outline">PACE</span>
<span class="px-1.5 py-0.5 rounded bg-surface-container text-primary-container font-semibold border border-outline-variant">Pace 4 Tech</span>
</div>
<div class="bg-surface-container-lowest p-2 rounded-lg border border-outline-variant flex items-center justify-between">
<span class="text-outline">LEAD</span>
<span class="text-primary font-semibold">@Dave_Lead</span>
</div>
</div>
<!-- Location & Route details -->
<div class="space-y-2 bg-surface-container-lowest p-3 rounded-lg border border-outline-variant text-label-data font-label-data">
<div class="flex items-start gap-2">
<span class="material-symbols-outlined text-primary text-[18px] mt-0.5" data-icon="location_on">location_on</span>
<div class="flex-1">
<div class="text-outline text-[11px]">STAGING POINT</div>
<div class="text-on-surface font-medium">Alice's Restaurant (Skyline Blvd &amp; CA-84)</div>
</div>
</div>
<div class="flex items-start gap-2 pt-1 border-t border-outline-variant">
<span class="material-symbols-outlined text-primary text-[18px] mt-0.5" data-icon="alt_route">alt_route</span>
<div class="flex-1 flex justify-between items-center">
<div>
<div class="text-outline text-[11px]">ROUTE SEGMENT</div>
<div class="text-on-surface font-medium">CA-35 Crest &amp; Saratoga Descent</div>
</div>
<span class="text-primary-container font-bold text-body-lg">64.2 mi</span>
</div>
</div>
<div class="flex items-center justify-between pt-1 border-t border-outline-variant text-[11px] text-outline">
<span>CHANNEL: RF CH-04</span>
<span>REFRESH: 20Hz REALTIME</span>
</div>
</div>
<!-- Action Buttons Cluster (Glove-sized min-h 48px) -->
<div class="grid grid-cols-2 gap-2 pt-1">
<button class="min-h-[48px] px-3 py-2 rounded-lg bg-surface-container-high border border-primary text-primary font-headline-sm text-headline-sm font-semibold flex items-center justify-center gap-1.5 hover:bg-surface-container hover:text-primary-fixed active:scale-95 duration-100 ease-out">
<span class="material-symbols-outlined text-[20px]" data-icon="visibility">visibility</span>
<span>INSPECT PACK</span>
</button>
<button class="min-h-[48px] px-3 py-2 rounded-lg bg-primary-container text-on-primary-fixed font-headline-sm text-headline-sm font-bold flex items-center justify-center gap-1.5 glow-cyan-sm hover:brightness-110 active:scale-95 duration-100 ease-out">
<span class="material-symbols-outlined text-[20px]" data-icon="sync">sync</span>
<span>SYNC COCKPIT</span>
</button>
</div>
</article>
<!-- SECTION: UPCOMING RECON RAIDS -->
<section class="space-y-space-sm pt-2">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary-container" data-icon="calendar_month">calendar_month</span>
<h2 class="text-headline-sm font-headline-sm text-on-surface uppercase tracking-wide">Upcoming Packs</h2>
</div>
<span class="font-label-data text-label-data text-outline">SORT: KSU TIME</span>
</div>
<!-- UPCOMING CARD 1 -->
<article class="bg-surface-container-lowest border border-outline-variant rounded-xl p-space-md space-y-3 hover:border-outline duration-150">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 text-label-data font-label-data">
<span class="text-primary-container font-semibold">Saturday 07:30 PST</span>
<span class="text-outline-variant">•</span>
<span class="px-1.5 py-0.5 rounded bg-surface-container-high text-primary font-label-caption text-[11px] font-bold">KSU in 2h 15m</span>
</div>
<h3 class="text-headline-sm font-headline-sm text-on-surface font-semibold pt-1">Mulholland Snake &amp; Rock Store Pace Lap</h3>
</div>
<span class="material-symbols-outlined text-outline" data-icon="two_wheeler">two_wheeler</span>
</div>
<div class="grid grid-cols-3 gap-2 text-label-caption font-label-caption">
<div class="p-2 rounded bg-surface-container-low border border-outline-variant">
<span class="text-outline block">PACE</span>
<span class="text-on-surface font-label-data font-bold">Brisk (Pace 3)</span>
</div>
<div class="p-2 rounded bg-surface-container-low border border-outline-variant">
<span class="text-outline block">CONFIRMED</span>
<span class="text-primary-container font-label-data font-bold">14 Riders</span>
</div>
<div class="p-2 rounded bg-surface-container-low border border-outline-variant">
<span class="text-outline block">DISTANCE</span>
<span class="text-on-surface font-label-data font-bold">44.2 mi</span>
</div>
</div>
<div class="flex items-center justify-between pt-2 border-t border-outline-variant">
<div class="flex items-center gap-1.5 font-label-data text-label-data text-outline">
<span class="material-symbols-outlined text-[16px] text-primary" data-icon="shield_person">shield_person</span>
<span>Sweep: <span class="text-on-surface font-semibold">@Sarah_Sweep</span></span>
</div>
<button class="min-h-[48px] px-4 py-2 rounded-lg bg-surface-container-high border border-outline-variant text-on-surface font-headline-sm text-headline-sm font-semibold flex items-center gap-1.5 hover:border-primary-container hover:text-primary-container active:scale-95 duration-100 ease-out">
<span class="material-symbols-outlined text-[18px]" data-icon="download">download</span>
<span>SYNC GPX</span>
</button>
</div>
</article>
<!-- UPCOMING CARD 2 -->
<article class="bg-surface-container-lowest border border-outline-variant rounded-xl p-space-md space-y-3 hover:border-outline duration-150">
<div class="flex items-start justify-between">
<div>
<div class="flex items-center gap-2 text-label-data font-label-data">
<span class="text-primary-container font-semibold">Sunday 06:00 PST</span>
<span class="text-outline-variant">•</span>
<span class="px-1.5 py-0.5 rounded bg-surface-container-high text-on-surface-variant font-label-caption text-[11px] font-bold">ADV MIXED</span>
</div>
<h3 class="text-headline-sm font-headline-sm text-on-surface font-semibold pt-1">Sierra Foothills ADV Trans-Sierra</h3>
</div>
<span class="material-symbols-outlined text-outline" data-icon="terrain">terrain</span>
</div>
<div class="grid grid-cols-3 gap-2 text-label-caption font-label-caption">
<div class="p-2 rounded bg-surface-container-low border border-outline-variant">
<span class="text-outline block">TERRAIN</span>
<span class="text-primary font-label-data font-bold">60% Dirt / 40% Tarmac</span>
</div>
<div class="p-2 rounded bg-surface-container-low border border-outline-variant">
<span class="text-outline block">CONFIRMED</span>
<span class="text-primary-container font-label-data font-bold">8 Riders</span>
</div>
<div class="p-2 rounded bg-surface-container-low border border-outline-variant">
<span class="text-outline block">ELEVATION</span>
<span class="text-on-surface font-label-data font-bold">+6,400 ft</span>
</div>
</div>
<div class="flex items-center justify-between pt-2 border-t border-outline-variant">
<div class="flex items-center gap-1.5 font-label-data text-label-data text-outline">
<span class="material-symbols-outlined text-[16px] text-primary" data-icon="person">person</span>
<span>Lead: <span class="text-on-surface font-semibold">@ElenaADV</span></span>
</div>
<button class="min-h-[48px] px-4 py-2 rounded-lg bg-surface-container-high border border-outline-variant text-on-surface font-headline-sm text-headline-sm font-semibold flex items-center gap-1.5 hover:border-primary-container hover:text-primary-container active:scale-95 duration-100 ease-out">
<span class="material-symbols-outlined text-[18px]" data-icon="check_circle">check_circle</span>
<span>RSVP MESH</span>
</button>
</div>
</article>
</section>
</main>
<!-- FIXED FLOATING PRIMARY CTA: HOST PACK RIDE -->
<div class="fixed bottom-20 right-4 left-4 z-40 max-w-xl mx-auto pointer-events-none flex justify-end">
<button class="pointer-events-auto min-h-[52px] px-6 py-3 rounded-xl bg-primary-container text-on-primary-fixed font-headline-sm text-headline-sm font-bold tracking-wider flex items-center gap-2 glow-cyan-md hover:brightness-110 active:scale-95 duration-100 ease-out border border-primary">
<span class="material-symbols-outlined text-[24px]" data-icon="add_circle">add_circle</span>
<span>HOST PACK RIDE</span>
</button>
</div>
<!-- BOTTOM NAVIGATION BAR (Shared Components JSON Anchor) -->
<nav aria-label="Global Cockpit Navigation" class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-space-xs py-space-xs bg-surface-container-lowest border-t border-outline-variant">
<!-- Tab 1: Dash -->
<a class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
<span class="material-symbols-outlined" data-icon="speed">speed</span>
<span class="text-label-caption font-label-caption">Dash</span>
</a>
<!-- Tab 2: Map -->
<a class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
<span class="material-symbols-outlined" data-icon="navigation">navigation</span>
<span class="text-label-caption font-label-caption">Map</span>
</a>
<!-- Tab 3: Activity (Group/Recon Pack Hub - Active) -->
<a class="flex flex-col items-center justify-center bg-surface-container-high text-primary-container rounded-lg px-2 py-1 min-h-[48px] active:scale-95 duration-100 ease-out" href="#">
<span class="material-symbols-outlined" data-icon="analytics" style="font-variation-settings: 'FILL' 1;">analytics</span>
<span class="text-label-caption font-label-caption font-bold">Activity</span>
</a>
<!-- Tab 4: Garage -->
<a class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
<span class="material-symbols-outlined" data-icon="two_wheeler">two_wheeler</span>
<span class="text-label-caption font-label-caption">Garage</span>
</a>
<!-- Tab 5: Settings -->
<a class="flex flex-col items-center justify-center text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low hover:text-primary-fixed active:scale-95 duration-100 ease-out" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="text-label-caption font-label-caption">Settings</span>
</a>
</nav>
</body></html>