MotorSignal-App/docs/stitch-designs/code/26_roles_ranks_builder.html

738 lines
56 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&amp;family=JetBrains+Mono:wght@500;600;700&amp;family=Space+Grotesk:wght@600;700&amp;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&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"/><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">
<div class="w-full px-gutter-lg py-space-lg flex flex-col gap-space-xl">
<!-- HUB MASTHEAD -->
<section class="relative w-full rounded-xl bg-surface-container-low p-space-lg shadow-xl overflow-hidden">
<div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-primary-container/10 blur-3xl pointer-events-none"></div>
<div class="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-secondary-container/15 blur-3xl pointer-events-none"></div>
<div class="relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-space-lg">
<div class="flex flex-col gap-space-xs max-w-3xl">
<div class="flex items-center gap-space-sm">
<span class="px-space-xs py-0.5 rounded bg-primary-container/20 text-primary-container font-label-caption text-label-caption uppercase tracking-wider">Chapter Protocol Engine</span>
<span class="flex items-center gap-1 font-label-data text-label-data text-outline">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container animate-ping"></span>
LADDER MATRIX: V4-SYNCED
</span>
</div>
<h1 class="font-headline-lg text-headline-lg uppercase text-on-surface tracking-tight">
Roles, Ranks &amp; Formation Permissions Builder
</h1>
<p class="font-body-md text-body-md text-on-surface-variant">
Configure organizational hierarchy, telemetry privilege matrices, and ad-hoc mesh communication channels. Changes cascade instantly across all connected 20Hz rider nodes.
</p>
</div>
<div class="flex flex-wrap items-center gap-space-sm shrink-0">
<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 shadow-md hover:bg-surface-variant transition-colors flex items-center gap-space-xs" id="btn-reset-template">
<span class="material-symbols-outlined text-[18px]">restart_alt</span>
Reset to Standard MC Template
</button>
<button class="h-12 px-space-md rounded-lg bg-surface-container text-primary font-label-data text-label-data uppercase tracking-wider shadow-md hover:bg-surface-container-high transition-colors flex items-center gap-space-xs" id="btn-add-rank">
<span class="material-symbols-outlined text-[18px]">add_moderator</span>
+ Add New Custom Rank
</button>
<button class="h-12 px-space-lg rounded-lg bg-primary-container text-on-primary font-label-data text-label-data uppercase tracking-wider shadow-xl hover:bg-primary transition-all duration-200 active:scale-[0.98] flex items-center gap-space-xs" id="btn-save-matrix">
<span class="material-symbols-outlined text-[18px]">save</span>
Save Hierarchy Matrix
</button>
</div>
</div>
</section>
<!-- MAIN TWO-COLUMN SPLIT: LADDER + FORMATION / SIDEBAR ROSTER -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-space-lg">
<!-- LEFT / CENTER COLUMN: LADDER & DIAGRAM (8 COLS) -->
<div class="lg:col-span-8 flex flex-col gap-space-xl min-w-0">
<!-- INTERACTIVE HIERARCHY LADDER -->
<section class="flex flex-col gap-space-md">
<div class="flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="material-symbols-outlined text-primary-container text-[20px]">account_tree</span>
<span class="font-label-data text-label-data text-primary-container uppercase">Active Hierarchy Ladder</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">• 5 Standard Strata Configured</span>
</div>
<span class="font-label-caption text-label-caption text-outline uppercase">Drag Handle to Re-tier Authority</span>
</div>
<!-- LADDER STACK -->
<div class="flex flex-col gap-space-sm" id="ladder-container">
<!-- RANK 1: PRESIDENT -->
<div class="rank-card group rounded-xl bg-surface-container-low p-space-md shadow-lg transition-all duration-150" data-rank="1">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-space-sm">
<div class="flex items-center gap-space-md min-w-0">
<div class="w-10 h-10 rounded-lg bg-primary-container/20 text-primary-container flex items-center justify-center shrink-0">
<span class="font-label-data text-label-data font-bold">R1</span>
</div>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-space-xs flex-wrap">
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface truncate">President / Founder</h2>
<span class="px-space-xs py-0.5 rounded-full bg-primary-container text-on-primary font-label-caption text-label-caption uppercase tracking-wider">Apex Tier</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-primary-container font-label-caption text-label-caption">CH: 01 BROADCAST OVERRIDE</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant truncate">
Full administrative authority, club treasury ledger access, global emergency SOS broadcast, mesh channel priority zero.
</p>
</div>
</div>
<div class="flex items-center gap-space-sm shrink-0 self-end md:self-center">
<div class="text-right hidden sm:block">
<div class="font-label-data text-label-data text-primary">2 Active</div>
<div class="font-label-caption text-label-caption text-on-surface-variant">Allocated Riders</div>
</div>
<button class="h-10 w-10 rounded-lg bg-surface-container text-on-surface hover:text-primary-container flex items-center justify-center transition-colors" title="Edit Permissions">
<span class="material-symbols-outlined text-[20px]">tune</span>
</button>
<span class="material-symbols-outlined text-outline cursor-grab active:cursor-grabbing text-[22px] px-1">drag_indicator</span>
</div>
</div>
<!-- TAGS & TELEMETRY ACCESS SUMMARY -->
<div class="mt-space-sm pt-space-xs flex flex-wrap items-center gap-space-xs">
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary-container text-[14px]">shield</span> Full System Root
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary-container text-[14px]">campaign</span> Priority Mesh Hijack
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary-container text-[14px]">speed</span> 20Hz Raw IMU &amp; Telemetry Trace
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary-container text-[14px]">account_balance_wallet</span> Treasury Sign-Off
</span>
</div>
</div>
<!-- RANK 2: VP & ROAD CAPTAIN -->
<div class="rank-card group rounded-xl bg-surface-container-low p-space-md shadow-lg transition-all duration-150" data-rank="2">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-space-sm">
<div class="flex items-center gap-space-md min-w-0">
<div class="w-10 h-10 rounded-lg bg-secondary-container/30 text-secondary flex items-center justify-center shrink-0">
<span class="font-label-data text-label-data font-bold">R2</span>
</div>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-space-xs flex-wrap">
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface truncate">Vice President &amp; Road Captain</h2>
<span class="px-space-xs py-0.5 rounded-full bg-secondary-container text-on-secondary-container font-label-caption text-label-caption uppercase tracking-wider">Flight Lead</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-secondary font-label-caption text-label-caption">CH: 02 TACTICAL NAV</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant truncate">
Mission creator, pace setter, live waypoint author, dynamic route detour editor, pack navigational telemetry lead.
</p>
</div>
</div>
<div class="flex items-center gap-space-sm shrink-0 self-end md:self-center">
<div class="text-right hidden sm:block">
<div class="font-label-data text-label-data text-secondary">4 Active</div>
<div class="font-label-caption text-label-caption text-on-surface-variant">Allocated Riders</div>
</div>
<button class="h-10 w-10 rounded-lg bg-surface-container text-on-surface hover:text-secondary flex items-center justify-center transition-colors" title="Edit Permissions">
<span class="material-symbols-outlined text-[20px]">tune</span>
</button>
<span class="material-symbols-outlined text-outline cursor-grab active:cursor-grabbing text-[22px] px-1">drag_indicator</span>
</div>
</div>
<div class="mt-space-sm pt-space-xs flex flex-wrap items-center gap-space-xs">
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-secondary text-[14px]">alt_route</span> Route Authoring &amp; Sync
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-secondary text-[14px]">speed</span> Pace Governance
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-secondary text-[14px]">groups</span> Formation Re-Slotting
</span>
</div>
</div>
<!-- RANK 3: SAFETY MARSHAL & TAIL GUNNER -->
<div class="rank-card group rounded-xl bg-surface-container-low p-space-md shadow-lg transition-all duration-150" data-rank="3">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-space-sm">
<div class="flex items-center gap-space-md min-w-0">
<div class="w-10 h-10 rounded-lg bg-tertiary-container/30 text-tertiary flex items-center justify-center shrink-0">
<span class="font-label-data text-label-data font-bold">R3</span>
</div>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-space-xs flex-wrap">
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface truncate">Safety Marshal &amp; Tail Gunner</h2>
<span class="px-space-xs py-0.5 rounded-full bg-surface-variant text-primary font-label-caption text-label-caption uppercase tracking-wider">Sweep Lead</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-primary font-label-caption text-label-caption">CH: 03 MARSHAL SWEEP</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant truncate">
Formation rear guard, sweep beacon broadcaster, roadside medical/mechanical incident triage, gap closure radar alerts.
</p>
</div>
</div>
<div class="flex items-center gap-space-sm shrink-0 self-end md:self-center">
<div class="text-right hidden sm:block">
<div class="font-label-data text-label-data text-primary">3 Active</div>
<div class="font-label-caption text-label-caption text-on-surface-variant">Allocated Riders</div>
</div>
<button class="h-10 w-10 rounded-lg bg-surface-container text-on-surface hover:text-primary flex items-center justify-center transition-colors" title="Edit Permissions">
<span class="material-symbols-outlined text-[20px]">tune</span>
</button>
<span class="material-symbols-outlined text-outline cursor-grab active:cursor-grabbing text-[22px] px-1">drag_indicator</span>
</div>
</div>
<div class="mt-space-sm pt-space-xs flex flex-wrap items-center gap-space-xs">
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary text-[14px]">warning</span> Hazard &amp; Debris Broadcast
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary text-[14px]">medical_services</span> Medical Incident Triage
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary text-[14px]">radar</span> Rear Sweep Ping Beacon
</span>
</div>
</div>
<!-- RANK 4: FULL PATCH / SENIOR RIDER -->
<div class="rank-card group rounded-xl bg-surface-container-low p-space-md shadow-lg transition-all duration-150" data-rank="4">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-space-sm">
<div class="flex items-center gap-space-md min-w-0">
<div class="w-10 h-10 rounded-lg bg-surface-container text-on-surface flex items-center justify-center shrink-0">
<span class="font-label-data text-label-data font-bold">R4</span>
</div>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-space-xs flex-wrap">
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface truncate">Full Patch / Senior Rider</h2>
<span class="px-space-xs py-0.5 rounded-full bg-surface-variant text-on-surface-variant font-label-caption text-label-caption uppercase tracking-wider">Core Pack</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface font-label-caption text-label-caption">CH: 04 COMM INTERCOM</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant truncate">
Access to private mesh audio channels, telemetry trace sharing, club voting rights, hazard acknowledgment.
</p>
</div>
</div>
<div class="flex items-center gap-space-sm shrink-0 self-end md:self-center">
<div class="text-right hidden sm:block">
<div class="font-label-data text-label-data text-on-surface">19 Active</div>
<div class="font-label-caption text-label-caption text-on-surface-variant">Allocated Riders</div>
</div>
<button class="h-10 w-10 rounded-lg bg-surface-container text-on-surface hover:text-primary-container flex items-center justify-center transition-colors" title="Edit Permissions">
<span class="material-symbols-outlined text-[20px]">tune</span>
</button>
<span class="material-symbols-outlined text-outline cursor-grab active:cursor-grabbing text-[22px] px-1">drag_indicator</span>
</div>
</div>
<div class="mt-space-sm pt-space-xs flex flex-wrap items-center gap-space-xs">
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary-container text-[14px]">how_to_vote</span> Quorum Voting
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary-container text-[14px]">record_voice_over</span> Mesh Intercom Transmit
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-primary-container text-[14px]">query_stats</span> Telemetry Trace View
</span>
</div>
</div>
<!-- RANK 5: PROSPECT / STAGED MEMBER -->
<div class="rank-card group rounded-xl bg-surface-container-low p-space-md shadow-lg transition-all duration-150" data-rank="5">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-space-sm">
<div class="flex items-center gap-space-md min-w-0">
<div class="w-10 h-10 rounded-lg bg-surface-container-lowest text-outline flex items-center justify-center shrink-0">
<span class="font-label-data text-label-data font-bold">R5</span>
</div>
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-space-xs flex-wrap">
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface truncate">Prospect / Staged Member</h2>
<span class="px-space-xs py-0.5 rounded-full bg-error-container text-on-error-container font-label-caption text-label-caption uppercase tracking-wider">Probationary</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-outline font-label-caption text-label-caption">CH: 04 RX ONLY</span>
</div>
<p class="font-body-md text-body-md text-on-surface-variant truncate">
Read-only route navigation, mandatory IMU safety telemetry logging, probationary pack positioning (mid-pack inner file only).
</p>
</div>
</div>
<div class="flex items-center gap-space-sm shrink-0 self-end md:self-center">
<div class="text-right hidden sm:block">
<div class="font-label-data text-label-data text-outline">6 Active</div>
<div class="font-label-caption text-label-caption text-on-surface-variant">Allocated Riders</div>
</div>
<button class="h-10 w-10 rounded-lg bg-surface-container text-on-surface hover:text-primary-container flex items-center justify-center transition-colors" title="Edit Permissions">
<span class="material-symbols-outlined text-[20px]">tune</span>
</button>
<span class="material-symbols-outlined text-outline cursor-grab active:cursor-grabbing text-[22px] px-1">drag_indicator</span>
</div>
</div>
<div class="mt-space-sm pt-space-xs flex flex-wrap items-center gap-space-xs">
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-error text-[14px]">lock</span> Read-Only Nav HUD
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-outline text-[14px]">sensors</span> Enforced IMU Data Log
</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption flex items-center gap-1">
<span class="material-symbols-outlined text-outline text-[14px]">volume_off</span> Mesh Mic Muted
</span>
</div>
</div>
</div>
</section>
<!-- PRIVILEGE & TELEMETRY MATRIX EDITOR -->
<section class="flex flex-col gap-space-md">
<div class="flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="material-symbols-outlined text-primary-container text-[20px]">table_chart</span>
<span class="font-label-data text-label-data text-primary-container uppercase">Privilege &amp; Telemetry Matrix Editor</span>
</div>
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Click Cells To Toggle Privileges</span>
</div>
<div class="w-full overflow-x-auto rounded-xl bg-surface-container-low shadow-xl">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-high">
<th class="p-space-md font-label-data text-label-data uppercase text-primary tracking-wider min-w-[240px]">Permission Directive</th>
<th class="p-space-sm font-label-data text-label-data uppercase text-center text-on-surface w-24">R1: Pres</th>
<th class="p-space-sm font-label-data text-label-data uppercase text-center text-on-surface w-24">R2: VP/Cap</th>
<th class="p-space-sm font-label-data text-label-data uppercase text-center text-on-surface w-24">R3: Marshal</th>
<th class="p-space-sm font-label-data text-label-data uppercase text-center text-on-surface w-24">R4: Patch</th>
<th class="p-space-sm font-label-data text-label-data uppercase text-center text-on-surface w-24">R5: Prospect</th>
</tr>
</thead>
<tbody class="divide-y divide-transparent font-body-md text-body-md">
<!-- ROW 1 -->
<tr class="hover:bg-surface-container transition-colors">
<td class="p-space-md flex flex-col">
<span class="font-headline-sm text-body-lg text-on-surface">Create Sanctioned Pack Runs</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Publish official club-wide events and broadcast calendar invites</span>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-surface-variant opacity-30 cursor-not-allowed" disabled="" type="checkbox"/>
</td>
</tr>
<!-- ROW 2 -->
<tr class="hover:bg-surface-container transition-colors">
<td class="p-space-md flex flex-col">
<span class="font-headline-sm text-body-lg text-on-surface">Override Mesh Intercom Channel</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Direct audio injection that ducks all ongoing voice packets</span>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-surface-variant opacity-30 cursor-not-allowed" disabled="" type="checkbox"/>
</td>
</tr>
<!-- ROW 3 -->
<tr class="hover:bg-surface-container transition-colors">
<td class="p-space-md flex flex-col">
<span class="font-headline-sm text-body-lg text-on-surface">Broadcast Hazard Pings</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Inject road surface, debris, and speed radar alerts onto all HUD screens</span>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
</tr>
<!-- ROW 4 -->
<tr class="hover:bg-surface-container transition-colors">
<td class="p-space-md flex flex-col">
<span class="font-headline-sm text-body-lg text-on-surface">View Full Pack Telemetry &amp; Lean Data</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Unrestricted real-time IMU lean angle, throttle delta, and GPS traces</span>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-surface-variant opacity-30 cursor-not-allowed" disabled="" type="checkbox"/>
</td>
</tr>
<!-- ROW 5 -->
<tr class="hover:bg-surface-container transition-colors">
<td class="p-space-md flex flex-col">
<span class="font-headline-sm text-body-lg text-on-surface">Manage Member Roster &amp; Applications</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Promote/demote members, issue badges, revoke mesh keys</span>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-surface-variant opacity-30 cursor-not-allowed" disabled="" type="checkbox"/>
</td>
</tr>
<!-- ROW 6 -->
<tr class="hover:bg-surface-container transition-colors">
<td class="p-space-md flex flex-col">
<span class="font-headline-sm text-body-lg text-on-surface">Export Forensic CSV / GPX Files</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Download millisecond-level telemetry traces for post-ride accident/track debrief</span>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input checked="" class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-primary-container rounded cursor-pointer" type="checkbox"/>
</td>
<td class="p-space-sm text-center">
<input class="w-5 h-5 accent-surface-variant opacity-30 cursor-not-allowed" disabled="" type="checkbox"/>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- FORMATION FLIGHT POSITIONING RULES -->
<section class="flex flex-col gap-space-md">
<div class="flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="material-symbols-outlined text-primary-container text-[20px]">flight_takeoff</span>
<span class="font-label-data text-label-data text-primary-container uppercase">Formation Flight Positioning Rules</span>
</div>
<div class="flex items-center gap-space-sm">
<span class="px-space-xs py-0.5 rounded bg-surface-container text-on-surface-variant font-label-caption text-label-caption uppercase">Pattern: 2x2 Staggered Diamond</span>
<span class="font-label-caption text-label-caption text-primary">Separation: 2.0s</span>
</div>
</div>
<div class="rounded-xl bg-surface-container-low p-space-lg shadow-xl flex flex-col gap-space-lg">
<div class="flex flex-col md:flex-row items-center justify-between gap-space-md">
<p class="font-body-md text-body-md text-on-surface-variant max-w-xl">
Real-time pack radar enforces this staggered flight configuration. If a rider drifts out of their designated rank slot by more than 15 meters, an audible haptic beacon warns the formation.
</p>
<div class="flex items-center gap-space-sm">
<span class="px-space-sm py-1 rounded bg-surface-container text-primary font-label-data text-label-data">FRONT LEFT = ROAD CAPTAIN</span>
<span class="px-space-sm py-1 rounded bg-surface-container text-tertiary font-label-data text-label-data">REAR = TAIL GUNNER</span>
</div>
</div>
<!-- VISUAL SLOTTING RADAR / DIAGRAM -->
<div class="relative w-full rounded-xl bg-surface-container-lowest p-space-lg overflow-hidden flex flex-col items-center justify-center min-h-[380px]">
<!-- Subtle Asphalt Lane Marks -->
<div class="absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 flex flex-col justify-around py-4 opacity-20">
<span class="w-1 h-12 bg-primary"></span>
<span class="w-1 h-12 bg-primary"></span>
<span class="w-1 h-12 bg-primary"></span>
<span class="w-1 h-12 bg-primary"></span>
</div>
<div class="absolute inset-0 bg-[radial-gradient(#00e5ff_1px,transparent_1px)] [background-size:24px_24px] opacity-10"></div>
<!-- FORMATION NODES DISPLAY -->
<div class="relative z-10 w-full max-w-lg flex flex-col gap-space-lg py-space-sm">
<!-- ROW 1: FLIGHT LEAD -->
<div class="flex items-center justify-between w-full px-8">
<!-- LEAD CAPTAIN (FRONT LEFT) -->
<div class="flex items-center gap-space-sm">
<div class="w-12 h-12 rounded-xl bg-primary-container text-on-primary font-label-data text-label-data flex flex-col items-center justify-center shadow-lg font-bold">
<span class="material-symbols-outlined text-[18px]">sports_score</span>
<span>R2</span>
</div>
<div class="flex flex-col">
<span class="font-headline-sm text-body-lg text-primary-container uppercase">Lead Captain</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Slot: Front-Left (Pace Setter)</span>
</div>
</div>
<!-- WINGMAN / PRESIDENT (FRONT RIGHT) -->
<div class="flex items-center gap-space-sm flex-row-reverse text-right">
<div class="w-12 h-12 rounded-xl bg-primary text-on-primary-fixed font-label-data text-label-data flex flex-col items-center justify-center shadow-lg font-bold">
<span class="material-symbols-outlined text-[18px]">star</span>
<span>R1</span>
</div>
<div class="flex flex-col">
<span class="font-headline-sm text-body-lg text-primary uppercase">Wingman / President</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Slot: Front-Right (+0.8s)</span>
</div>
</div>
</div>
<!-- ROW 2: MID-PACK CORE (STAGGERED) -->
<div class="flex items-center justify-between w-full px-16">
<!-- FULL PATCH (LEFT FILE) -->
<div class="flex items-center gap-space-sm">
<div class="w-10 h-10 rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data flex items-center justify-center shadow-md">
<span>R4</span>
</div>
<div class="flex flex-col">
<span class="font-headline-sm text-body-md text-on-surface">Senior Patch</span>
<span class="font-label-caption text-label-caption text-outline">File 1 (+1.6s)</span>
</div>
</div>
<!-- PROSPECT (INNER RIGHT - SAFE BUBBLE) -->
<div class="flex items-center gap-space-sm flex-row-reverse text-right">
<div class="w-10 h-10 rounded-lg bg-surface-container text-outline font-label-data text-label-data flex items-center justify-center shadow-md">
<span>R5</span>
</div>
<div class="flex flex-col">
<span class="font-headline-sm text-body-md text-on-surface-variant">Prospect Staged</span>
<span class="font-label-caption text-label-caption text-outline">Protected Mid-File (+2.4s)</span>
</div>
</div>
</div>
<!-- ROW 3: REAR GUARD & SWEEP -->
<div class="flex flex-col items-center justify-center gap-space-xs pt-space-xs">
<div class="w-12 h-12 rounded-xl bg-secondary-container text-on-secondary-container font-label-data text-label-data flex flex-col items-center justify-center shadow-xl font-bold">
<span class="material-symbols-outlined text-[18px]">security</span>
<span>R3</span>
</div>
<div class="flex flex-col items-center text-center">
<span class="font-headline-sm text-body-lg text-secondary uppercase">Tail Gunner / Sweep Marshal</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Slot: Rear Center • Wide Sweep Mesh Transceiver</span>
</div>
</div>
</div>
<!-- Realtime Radar Mesh Vector Overlay Tag -->
<div class="absolute bottom-3 left-4 flex items-center gap-space-xs font-label-caption text-label-caption text-outline">
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
FORMATION INTEGRITY CALCULATOR: 99.4% OPTIMAL
</div>
</div>
<!-- Formation Rules Toggles -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-space-md">
<div class="p-space-sm rounded-lg bg-surface-container flex flex-col gap-1">
<span class="font-label-data text-label-data text-primary">AUTOMATIC RE-SLOT</span>
<span class="font-body-md text-body-md text-on-surface-variant">If Lead Captain pits or drops out, Wingman automatically promotes to Flight Lead</span>
</div>
<div class="p-space-sm rounded-lg bg-surface-container flex flex-col gap-1">
<span class="font-label-data text-label-data text-primary">PROSPECT RESTRICTION</span>
<span class="font-body-md text-body-md text-on-surface-variant">R5 Prospects locked out of outside edges during high-speed freeway navigation</span>
</div>
<div class="p-space-sm rounded-lg bg-surface-container flex flex-col gap-1">
<span class="font-label-data text-label-data text-primary">SWEEP PROXIMITY BUZZER</span>
<span class="font-body-md text-body-md text-on-surface-variant">Audible alert to Tail Gunner if pack separation exceeds 120 meters</span>
</div>
</div>
</div>
</section>
</div>
<!-- RIGHT COLUMN: MEMBER ASSIGNMENT SIDEBAR / DRAWER (4 COLS) -->
<div class="lg:col-span-4 flex flex-col gap-space-md">
<!-- MEMBER ROSTER CARD -->
<div class="rounded-xl bg-surface-container-low p-space-md shadow-xl flex flex-col gap-space-md sticky top-24">
<div class="flex items-center justify-between">
<div class="flex items-center gap-space-xs">
<span class="material-symbols-outlined text-primary-container text-[20px]">group_add</span>
<span class="font-label-data text-label-data text-primary-container uppercase">Roster Allocation</span>
</div>
<span class="font-label-caption text-label-caption text-on-surface-variant">34 Total Members</span>
</div>
<!-- SEARCH / FILTER -->
<div class="relative w-full">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[18px]">search</span>
<input class="w-full h-11 pl-10 pr-space-md rounded-lg bg-surface-container text-on-surface font-body-md text-body-md focus:outline-none focus:ring-1 focus:ring-primary-container placeholder:text-outline" placeholder="Filter riders or callsigns..." type="text"/>
</div>
<!-- QUICK ASSIGN HELPER -->
<div class="flex items-center justify-between text-outline text-label-caption font-label-caption px-1">
<span>RIDER / CALLSIGN</span>
<span>ASSIGNED TIER</span>
</div>
<!-- SCROLLABLE MEMBER LIST -->
<div class="flex flex-col gap-space-xs max-h-[640px] overflow-y-auto pr-1">
<!-- MEMBER 1: PRESIDENT -->
<div class="p-space-sm rounded-lg bg-surface-container flex items-center justify-between gap-space-sm hover:bg-surface-variant transition-colors">
<div class="flex items-center gap-space-sm min-w-0">
<img class="w-10 h-10 rounded-full object-cover shrink-0" data-alt="Close-up portrait of a rugged motorcycle club president with full helmet and carbon visor reflection with neon highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDDmPAr4phj33myDOVf6_Io_JO2nhIxme-2zcvFOuy7s1ACvres-fwe6Hi4XO5bUnD38KBo1ySEuqWBiBBKhIk9B8JnKN34loTOHASFeaIqT8W_6caznwF8MqWsxAN0wxiqcn9SsJ7ORHWKBadY5FV25dDsejiUpkD457ttVkeZFdkMIJKdClxGNqdtpKdmZsCLaHvBny50enMRrZ0dOSHTX0faYMRDLEs_ymcduV7vl1HdWC6I9Zu2"/>
<div class="flex flex-col min-w-0">
<span class="font-headline-sm text-body-lg text-on-surface truncate">Vance 'Apex' Cole</span>
<span class="font-label-caption text-label-caption text-outline">BMW S1000RR • #001</span>
</div>
</div>
<select class="h-9 px-space-xs rounded bg-surface-container-high text-primary font-label-data text-label-data focus:outline-none cursor-pointer">
<option selected="">R1: Pres</option>
<option>R2: VP/Cap</option>
<option>R3: Marshal</option>
<option>R4: Patch</option>
<option>R5: Prospect</option>
</select>
</div>
<!-- MEMBER 2: VP -->
<div class="p-space-sm rounded-lg bg-surface-container flex items-center justify-between gap-space-sm hover:bg-surface-variant transition-colors">
<div class="flex items-center gap-space-sm min-w-0">
<img class="w-10 h-10 rounded-full object-cover shrink-0" data-alt="Portrait of a female road captain wearing a matte-black modular helmet with glowing cyan comms unit" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCmNFlGVjm1_fpCrnGgLB3Ace5u73OEaYNEjF_J3NUC4-8JoVTUfWqWj3iWLKo5onM7wqypcyM_SwcEC0Nk6Q7WBjnTFlKAMQR9C8tS6oXIXpIT8e66o8Vw5MER5OgTQa-CptpEAPZ0UMyrbJZM6pCA080uWg2RH7aNnFC3lQYjd7cAwaAEFyUYwm4XluWZbJF55Cl9CvJiT2w2nImpY6tspJzo_YbucmqD4CTOB3IZNrXnmdPoIBG5"/>
<div class="flex flex-col min-w-0">
<span class="font-headline-sm text-body-lg text-on-surface truncate">Elena 'Vector' Voss</span>
<span class="font-label-caption text-label-caption text-outline">Ducati Panigale V4 • #004</span>
</div>
</div>
<select class="h-9 px-space-xs rounded bg-surface-container-high text-secondary font-label-data text-label-data focus:outline-none cursor-pointer">
<option>R1: Pres</option>
<option selected="">R2: VP/Cap</option>
<option>R3: Marshal</option>
<option>R4: Patch</option>
<option>R5: Prospect</option>
</select>
</div>
<!-- MEMBER 3: ROAD CAPTAIN 2 -->
<div class="p-space-sm rounded-lg bg-surface-container flex items-center justify-between gap-space-sm hover:bg-surface-variant transition-colors">
<div class="flex items-center gap-space-sm min-w-0">
<img class="w-10 h-10 rounded-full object-cover shrink-0" data-alt="Rider in aerodynamic leather racing suit and carbon helmet standing in a high-tech motorcycle pit garage" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBn4rlyKNxW5PaPjnk_wf3Y0nLt2nzITU8p7HfFyVo7RhLZY8rOgNeksPv9ANDGF8o4OAvlyGLbqcUVcRKB-faQ8ykwSBHd0gHB9woKVj7qqWZMChyB6Y5DZUBRrUyqONxthiKtX_8eZtYF3iG6XeFT--tE5UyP732KCUNZ70RZsxnWhqdbyyLt659YXAlPckLirb87U5XlyvEC9-lZZtiCEKMqzmJE0fPRPYtx4eqzcMnxK78wJrW_"/>
<div class="flex flex-col min-w-0">
<span class="font-headline-sm text-body-lg text-on-surface truncate">Marcus 'Revs' Drake</span>
<span class="font-label-caption text-label-caption text-outline">Yamaha R1M • #012</span>
</div>
</div>
<select class="h-9 px-space-xs rounded bg-surface-container-high text-secondary font-label-data text-label-data focus:outline-none cursor-pointer">
<option>R1: Pres</option>
<option selected="">R2: VP/Cap</option>
<option>R3: Marshal</option>
<option>R4: Patch</option>
<option>R5: Prospect</option>
</select>
</div>
<!-- MEMBER 4: SAFETY MARSHAL -->
<div class="p-space-sm rounded-lg bg-surface-container flex items-center justify-between gap-space-sm hover:bg-surface-variant transition-colors">
<div class="flex items-center gap-space-sm min-w-0">
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center text-primary font-bold font-label-data">
TG
</div>
<div class="flex flex-col min-w-0">
<span class="font-headline-sm text-body-lg text-on-surface truncate">Tariq 'Sweep' Gray</span>
<span class="font-label-caption text-label-caption text-outline">KTM 1290 Super Duke • #019</span>
</div>
</div>
<select class="h-9 px-space-xs rounded bg-surface-container-high text-primary font-label-data text-label-data focus:outline-none cursor-pointer">
<option>R1: Pres</option>
<option>R2: VP/Cap</option>
<option selected="">R3: Marshal</option>
<option>R4: Patch</option>
<option>R5: Prospect</option>
</select>
</div>
<!-- MEMBER 5: SENIOR PATCH -->
<div class="p-space-sm rounded-lg bg-surface-container flex items-center justify-between gap-space-sm hover:bg-surface-variant transition-colors">
<div class="flex items-center gap-space-sm min-w-0">
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface font-bold font-label-data">
KO
</div>
<div class="flex flex-col min-w-0">
<span class="font-headline-sm text-body-lg text-on-surface truncate">Kenji 'Ghost' Ono</span>
<span class="font-label-caption text-label-caption text-outline">Kawasaki ZX-10R • #031</span>
</div>
</div>
<select class="h-9 px-space-xs rounded bg-surface-container-high text-on-surface font-label-data text-label-data focus:outline-none cursor-pointer">
<option>R1: Pres</option>
<option>R2: VP/Cap</option>
<option>R3: Marshal</option>
<option selected="">R4: Patch</option>
<option>R5: Prospect</option>
</select>
</div>
<!-- MEMBER 6: PROSPECT -->
<div class="p-space-sm rounded-lg bg-surface-container flex items-center justify-between gap-space-sm hover:bg-surface-variant transition-colors">
<div class="flex items-center gap-space-sm min-w-0">
<div class="w-10 h-10 rounded-full bg-surface-container-lowest flex items-center justify-center text-outline font-bold font-label-data">
PR
</div>
<div class="flex flex-col min-w-0">
<span class="font-headline-sm text-body-lg text-on-surface truncate">Devon 'Rook' Hall</span>
<span class="font-label-caption text-label-caption text-outline">Honda CBR600RR • Probation #077</span>
</div>
</div>
<select class="h-9 px-space-xs rounded bg-surface-container-high text-outline font-label-data text-label-data focus:outline-none cursor-pointer">
<option>R1: Pres</option>
<option>R2: VP/Cap</option>
<option>R3: Marshal</option>
<option>R4: Patch</option>
<option selected="">R5: Prospect</option>
</select>
</div>
</div>
<!-- BATCH ACTIONS -->
<div class="pt-space-xs flex flex-col gap-space-xs">
<button class="w-full h-11 rounded-lg bg-surface-container-high text-on-surface font-label-data text-label-data uppercase tracking-wider hover:bg-surface-variant transition-colors flex items-center justify-center gap-space-xs">
<span class="material-symbols-outlined text-[18px]">person_search</span>
Audit Inactive Mesh Keys
</button>
<div class="p-space-sm rounded-lg bg-surface-container-lowest flex items-start gap-space-xs text-outline font-label-caption text-label-caption">
<span class="material-symbols-outlined text-primary-container text-[16px] shrink-0">info</span>
<span>All rank promotions trigger a cryptographically signed mesh token re-keying on next rider ignition sequence.</span>
</div>
</div>
</div>
</div>
</div>
<!-- NOTIFICATION TOAST POPUP (INTERACTION FEEDBACK) -->
<div class="fixed bottom-6 right-6 hidden z-50 p-space-md rounded-xl bg-surface-container-high text-on-surface shadow-2xl flex items-center gap-space-md" id="save-toast">
<div class="w-8 h-8 rounded-full bg-primary-container text-on-primary flex items-center justify-center">
<span class="material-symbols-outlined text-[18px]">check</span>
</div>
<div class="flex flex-col">
<span class="font-headline-sm text-body-lg text-primary-container uppercase">Hierarchy Matrix Synced</span>
<span class="font-label-caption text-label-caption text-on-surface-variant">Broadcasted 5 tiers to 34 pack nodes across Kalman Mesh Core.</span>
</div>
</div>
</div>
<!-- CLIENT-SIDE MICRO-INTERACTIONS -->
<script>
// Toast Notification logic
const saveBtn = document.getElementById('btn-save-matrix');
const toast = document.getElementById('save-toast');
if (saveBtn && toast) {
saveBtn.addEventListener('click', () => {
toast.classList.remove('hidden');
toast.classList.add('flex');
setTimeout(() => {
toast.classList.add('hidden');
toast.classList.remove('flex');
}, 3200);
});
}
// Reset Template Logic
const resetBtn = document.getElementById('btn-reset-template');
if (resetBtn) {
resetBtn.addEventListener('click', () => {
alert('Reset to Standard MC Template: Applied 5-tier traditional hierarchy matrix.');
});
}
// Add New Custom Rank Prompt
const addRankBtn = document.getElementById('btn-add-rank');
if (addRankBtn) {
addRankBtn.addEventListener('click', () => {
const rankName = prompt('Enter designation for new custom rank (e.g., Road Marshal II, Tech Lead):');
if (rankName) {
alert('Rank "' + rankName + '" added to draft hierarchy ladder.');
}
});
}
</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 &amp; 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 &amp; 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 &amp; Officer Hub</li><li class="font-body-md text-body-md text-on-surface-variant hover:text-on-surface transition-colors cursor-pointer">Roles &amp; 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 &amp; 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 &lt;14ms</span></div></div></div></footer></body></html>