451 lines
26 KiB
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&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&family=JetBrains+Mono:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&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"/>
|
|
<!-- 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 & 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 & 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 & 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> |