411 lines
38 KiB
HTML
411 lines
38 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_dashboard" name="shell-type"/><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" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600;700&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config={darkMode:"class",theme:{extend:{"colors":{"primary-fixed":"#9cf0ff","on-primary":"#00363d","surface-container":"#1d2025","inverse-surface":"#e0e2ea","background":"#101419","on-background":"#e0e2ea","on-secondary":"#002a78","on-secondary-fixed-variant":"#003ea8","secondary-container":"#0053db","surface":"#101419","error-container":"#93000a","surface-variant":"#32353b","surface-bright":"#36393f","on-surface-variant":"#bac9cc","on-tertiary":"#3c0091","surface-container-lowest":"#0b0e13","on-tertiary-container":"#6834d1","tertiary":"#f2e9ff","secondary-fixed-dim":"#b4c5ff","inverse-on-surface":"#2d3036","surface-container-low":"#181c21","on-tertiary-fixed-variant":"#5516be","error":"#ffb4ab","on-secondary-container":"#cdd7ff","on-primary-fixed-variant":"#004f58","inverse-primary":"#006875","on-secondary-fixed":"#00174b","surface-container-highest":"#32353b","surface-dim":"#101419","on-error":"#690005","on-tertiary-fixed":"#23005c","on-error-container":"#ffdad6","primary-container":"#00e5ff","on-surface":"#e0e2ea","tertiary-fixed":"#e9ddff","tertiary-fixed-dim":"#d0bcff","surface-tint":"#00daf3","primary":"#c3f5ff","tertiary-container":"#d9c8ff","surface-container-high":"#272a30","outline-variant":"#3b494c","on-primary-container":"#00626e","on-primary-fixed":"#001f24","outline":"#849396","primary-fixed-dim":"#00daf3","secondary":"#b4c5ff","secondary-fixed":"#dbe1ff"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"space-xs":"0.25rem","gutter-lg":"1.5rem","gutter":"1rem","margin-lg":"2rem","margin":"1rem","space-sm":"0.5rem","space-lg":"1.5rem","space-md":"1rem","space-xl":"2rem"},"fontFamily":{"headline-md":["Space Grotesk"],"display-hero":["Space Grotesk"],"telemetry-metric-md":["JetBrains Mono"],"label-caption":["Inter"],"headline-sm":["Space Grotesk"],"display-hero-mobile":["Space Grotesk"],"headline-lg":["Space Grotesk"],"telemetry-metric-lg":["JetBrains Mono"],"body-md":["Inter"],"telemetry-metric-lg-mobile":["JetBrains Mono"],"label-data":["JetBrains Mono"],"body-lg":["Inter"]},"fontSize":{"headline-md":["24px",{"lineHeight":"32px","letterSpacing":"-0.01em","fontWeight":"600"}],"display-hero":["56px",{"lineHeight":"60px","letterSpacing":"-0.03em","fontWeight":"700"}],"telemetry-metric-md":["28px",{"lineHeight":"32px","letterSpacing":"-0.02em","fontWeight":"600"}],"label-caption":["11px",{"lineHeight":"14px","letterSpacing":"0.05em","fontWeight":"600"}],"headline-sm":["20px",{"lineHeight":"28px","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"}],"body-md":["14px",{"lineHeight":"20px","fontWeight":"400"}],"telemetry-metric-lg-mobile":["36px",{"lineHeight":"36px","letterSpacing":"-0.03em","fontWeight":"700"}],"label-data":["12px",{"lineHeight":"16px","letterSpacing":"0.08em","fontWeight":"600"}],"body-lg":["16px",{"lineHeight":"24px","fontWeight":"500"}]}}}}</script></head><body class="bg-surface font-body-md text-on-surface antialiased selection:bg-primary-container selection:text-on-primary-container"><aside class="fixed left-0 top-0 h-full w-72 bg-surface-container-lowest z-50 flex flex-col justify-between shadow-[0_1px_8px_rgba(0,0,0,0.4)]"><div class="flex flex-col"><div class="h-20 px-space-lg flex items-center justify-between bg-surface-container-low"><div class="flex items-center gap-space-sm"><div class="w-2.5 h-2.5 rounded-full bg-primary-container animate-pulse"></div><div class="flex flex-col"><span class="font-label-data text-label-data text-primary uppercase">HQ NODE 01</span><span class="font-label-caption text-label-caption text-on-surface-variant uppercase">OFFICER ACCESS</span></div></div><div class="px-space-xs py-0.5 rounded bg-surface-container-high text-on-surface-variant font-label-data text-label-data">SYS.ON</div></div><div class="px-space-md pt-space-lg pb-space-sm"><span class="px-space-sm font-label-data text-label-data uppercase text-outline">Operational Modules</span></div><nav class="flex flex-col gap-space-xs px-space-md" data-active-classes="bg-primary-container text-on-primary-container font-headline-sm"><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="overview" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">grid_view</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Overview</span></div></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="branding" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">verified</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Branding</span></div></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="applications" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">assignment_ind</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Applications</span></div><span class="px-space-sm py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-data text-label-data font-bold">4</span></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="roles-ranks" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">shield_person</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Roles & Ranks</span></div></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="scheduled-rides" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">route</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Scheduled Rides</span></div></a><a class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="governance-settings" href="#"><div class="flex items-center gap-space-md"><span class="material-symbols-outlined text-outline">tune</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Governance / Settings</span></div></a></nav></div><div class="p-space-md flex flex-col gap-space-md bg-surface-container-lowest"><div class="p-space-md rounded-xl bg-surface-container-low flex flex-col gap-space-xs"><div class="flex items-center justify-between"><span class="font-label-data text-label-data text-on-surface-variant uppercase">MESH LATENCY</span><span class="font-label-data text-label-data text-primary">14 MS</span></div><div class="flex items-center justify-between"><span class="font-label-data text-label-data text-on-surface-variant uppercase">TELEMETRY FEED</span><span class="font-label-data text-label-data text-primary">SYNCED</span></div></div><a class="flex items-center gap-space-md min-h-[48px] px-space-md rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="back-to-directory" href="#"><span class="material-symbols-outlined text-outline">arrow_back</span><span class="font-headline-sm text-headline-sm text-sm tracking-wide uppercase">Back to Directory</span></a></div></aside><div class="pl-72"><header class="fixed top-0 left-72 right-0 h-20 bg-surface/90 backdrop-blur-xl z-40 shadow-[0_1px_8px_rgba(0,0,0,0.5)] flex items-center justify-between px-gutter-lg"><div class="flex items-center gap-space-lg"><div class="flex items-center gap-space-md"><img alt="Brand logo. - Primary color: #00e5ff
|
|
- Font: spaceGrotesk
|
|
- Mode: dark
|
|
- Roundness: rounded-md
|
|
" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida/AEtjO1VyjwCl13wJcsQT-sMTi-VRmFxtZ-9XIra_-xqqK4kTFuOW8p1wBa1sxe4tYYuCb6dn_KEKD4eafHUh8YVgowbEvhZZs8cw7zL-NoUhnJvkrvVr2L3D6B7AbSXsYPHpoPD3cGefuUyVyNzO6s5TraxSTMpmQ31_ZNphdAPtB96fnxjTpL5y_m4qrKjJwN1LMV2eblQNfn-ubgQY5A0ier_SAIa3satIVrBXUeDO5Tg8mutucmfwYgVCrA"/><div class="flex flex-col"><span class="font-headline-sm text-headline-sm uppercase text-on-surface tracking-wider leading-none">PACIFIC COAST RIDERS // CHAPTER HQ</span><span class="font-label-caption text-label-caption uppercase text-primary mt-0.5">FOUNDER & OFFICER COMMAND CONSOLE</span></div></div><div class="hidden xl:flex items-center gap-space-sm pl-space-md"><div class="flex items-center gap-space-xs px-space-md py-1.5 rounded-full bg-surface-container-high"><span class="w-2 h-2 rounded-full bg-primary-container"></span><span class="font-label-data text-label-data text-on-surface uppercase">42 Active Members</span></div><div class="flex items-center gap-space-xs px-space-md py-1.5 rounded-full bg-surface-container-high"><span class="w-2 h-2 rounded-full bg-primary"></span><span class="font-label-data text-label-data text-on-surface uppercase">Channel CH-04 MESH</span></div><div class="flex items-center gap-space-xs px-space-md py-1.5 rounded-full bg-surface-container-high"><span class="w-2 h-2 rounded-full bg-secondary"></span><span class="font-label-data text-label-data text-on-surface uppercase">3 Staged Rides</span></div></div></div><div class="flex items-center gap-space-lg"><div class="flex items-center gap-space-sm"><div class="flex items-center gap-space-xs px-space-sm py-1 rounded bg-surface-container-low"><span class="material-symbols-outlined text-sm text-primary">satellite_alt</span><span class="font-label-data text-label-data text-on-surface-variant uppercase">NET LOCK</span></div><div class="flex items-center gap-space-xs px-space-sm py-1 rounded bg-surface-container-low"><span class="material-symbols-outlined text-sm text-secondary">sensors</span><span class="font-label-data text-label-data text-on-surface-variant uppercase">BEACON ACTIVE</span></div></div><div class="flex items-center gap-space-md pl-space-md"><div class="flex flex-col items-end"><span class="font-headline-sm text-headline-sm text-xs uppercase text-on-surface">CALLSIGN: VIPER-1</span><span class="font-label-caption text-label-caption text-primary uppercase">ROAD CAPTAIN // FOUNDER</span></div><img alt="Profile" class="w-8 h-8 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida/AEtjO1WVxZBfZMbTdHeRSt73fWRy6gjWk3_qTm8SSSfoWQnQsHYP2ngztRX-GwRDxracXqrxt42j0x_3rYX-Deu1wGtF7R_qj3ZMExn0d6mErdfGFPGmEtddnnmd0i_Ez6Mv8kj3AYzks1N9Gq4hr9VObylWxDqngSG4Yi5vS-Sj7j3tfyZc_6dknnGpnnb5vC4PQmhuUp58_MzZvopIwkRWq0S27smUu_5zRLguTCXTKrFUEw9TiLBSRA4aXu4"/></div></div></header><main class="relative w-full pt-20 bg-surface px-gutter-lg py-gutter-lg"><div class="flex flex-col w-full">
|
|
<!-- System Diagnostic Header Strip -->
|
|
<div class="flex flex-col lg:flex-row lg:items-center justify-between pb-space-lg mb-space-lg">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="px-space-sm py-0.5 rounded bg-surface-container-high text-primary font-label-data text-label-data uppercase tracking-widest">WEB-15 // /clubs/pcr-01/settings</span>
|
|
<span class="inline-flex items-center gap-1.5 px-space-sm py-0.5 rounded bg-error-container/40 text-error font-label-caption text-label-caption uppercase tracking-wider">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-error animate-ping"></span>
|
|
AUTHORITY: PRESIDENT ONLY
|
|
</span>
|
|
</div>
|
|
<h1 class="font-headline-lg text-headline-lg text-on-surface uppercase tracking-tight">
|
|
Club Governance & Architecture Settings
|
|
</h1>
|
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-3xl">
|
|
Configure operational mesh security, real-time RF communication layers, telemetry ingress standards, and chapter presidential authority bindings for the Pacific Coast Riders chapter.
|
|
</p>
|
|
</div>
|
|
<!-- Quick Action / Status Badge -->
|
|
<div class="mt-space-md lg:mt-0 flex items-center gap-space-md bg-surface-container-low p-space-md rounded-xl shadow-md">
|
|
<div class="flex flex-col text-right">
|
|
<span class="font-label-caption text-label-caption uppercase text-on-surface-variant">NODE CIPHER STATE</span>
|
|
<span class="font-label-data text-label-data text-primary">AES-256-GCM ARMED</span>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-lg bg-surface-container-high flex items-center justify-center text-primary-container">
|
|
<span class="material-symbols-outlined text-xl">encrypted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Multi-Column Control Deck -->
|
|
<div class="grid grid-cols-1 xl:grid-cols-12 gap-space-lg mb-space-xl">
|
|
<!-- LEFT COLUMN (Span 8): Policies, Rules, Join Cryptography -->
|
|
<div class="xl:col-span-8 flex flex-col gap-space-lg">
|
|
<!-- SECTION 1: Membership & Discovery Policy -->
|
|
<section class="bg-surface-container-low rounded-xl p-space-lg shadow-md flex flex-col gap-space-md relative overflow-hidden">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary text-xl">hub</span>
|
|
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface">1. Membership & Discovery Policy</h2>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">ACTIVE: GATE-02 ENFORCED</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Determines how unverified riders locate this chapter in the global radar directory and submit telemetry vetting proofs.
|
|
</p>
|
|
<!-- 3 Selectable Radio Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-space-md mt-space-xs">
|
|
<!-- Card 1: Public -->
|
|
<div class="policy-card group cursor-pointer p-space-md rounded-xl bg-surface-container transition-all flex flex-col justify-between hover:bg-surface-container-high" data-policy="public" onclick="selectPolicyCard(this)">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-outline group-hover:text-primary">POLICY 01</span>
|
|
<div class="radio-indicator w-4 h-4 rounded-full bg-surface-container-highest flex items-center justify-center">
|
|
<div class="w-2 h-2 rounded-full bg-transparent"></div>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-base text-on-surface uppercase mt-1">Public Directory</h3>
|
|
<p class="font-body-md text-body-md text-xs text-on-surface-variant">
|
|
Visible to all active pilots in regional mesh. Instant application intake with automated entry queue.
|
|
</p>
|
|
</div>
|
|
<div class="mt-space-md pt-space-xs flex items-center gap-space-xs">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-outline"></span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Zero Pre-screening</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Application & Screening (Selected) -->
|
|
<div class="policy-card group cursor-pointer p-space-md rounded-xl bg-surface-container-high shadow-lg transition-all flex flex-col justify-between ring-1 ring-primary-container" data-policy="screening" onclick="selectPolicyCard(this)">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-primary-container font-bold">SELECTED // ACTIVE</span>
|
|
<div class="radio-indicator w-4 h-4 rounded-full bg-primary-container flex items-center justify-center">
|
|
<div class="w-2 h-2 rounded-full bg-surface-container-lowest"></div>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-base text-primary uppercase mt-1">Application & Screening</h3>
|
|
<p class="font-body-md text-body-md text-xs text-on-surface">
|
|
Listed in sector directory. Candidates must submit 20-hour verified telemetry track logs and answer questionnaire.
|
|
</p>
|
|
</div>
|
|
<div class="mt-space-md pt-space-xs flex items-center gap-space-xs">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary-container animate-pulse"></span>
|
|
<span class="font-label-caption text-label-caption text-primary font-bold uppercase">Strict Telemetry Gate</span>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: Hidden Mesh -->
|
|
<div class="policy-card group cursor-pointer p-space-md rounded-xl bg-surface-container transition-all flex flex-col justify-between hover:bg-surface-container-high" data-policy="hidden" onclick="selectPolicyCard(this)">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-data text-label-data text-outline group-hover:text-primary">POLICY 03</span>
|
|
<div class="radio-indicator w-4 h-4 rounded-full bg-surface-container-highest flex items-center justify-center">
|
|
<div class="w-2 h-2 rounded-full bg-transparent"></div>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-base text-on-surface uppercase mt-1">Hidden Mesh</h3>
|
|
<p class="font-body-md text-body-md text-xs text-on-surface-variant">
|
|
Unlisted ghost chapter. Stealth transponder mode. Joins strictly require ephemeral 6-digit cryptographic PIN or NFC handshake.
|
|
</p>
|
|
</div>
|
|
<div class="mt-space-md pt-space-xs flex items-center gap-space-xs">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Stealth Transponder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 2: Telemetry & Staging Sharing Policy -->
|
|
<section class="bg-surface-container-low rounded-xl p-space-lg shadow-md flex flex-col gap-space-md">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary text-xl">sensors</span>
|
|
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface">2. Telemetry & Staging Sharing Policy</h2>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-primary">REALTIME COCKPIT RULES</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-space-md mt-space-xs">
|
|
<!-- Toggle 1: Broadcast Live Pack Locations -->
|
|
<div class="bg-surface-container p-space-md rounded-xl flex items-center justify-between gap-space-md">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<span class="font-headline-sm text-headline-sm text-sm uppercase text-on-surface">Broadcast Pack On Public Radar</span>
|
|
<span class="font-body-md text-body-md text-xs text-on-surface-variant">Pin squad coordinates to open sector viewer for spectators & support crew.</span>
|
|
</div>
|
|
<button aria-checked="false" class="w-14 h-8 flex-shrink-0 bg-surface-container-highest rounded-full p-1 transition-all flex items-center" onclick="toggleSwitch(this)" role="switch" type="button">
|
|
<div class="w-6 h-6 rounded-full bg-outline transition-transform duration-200"></div>
|
|
</button>
|
|
</div>
|
|
<!-- Toggle 2: Enforce 20Hz Telemetry Sync -->
|
|
<div class="bg-surface-container p-space-md rounded-xl flex items-center justify-between gap-space-md">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="font-headline-sm text-headline-sm text-sm uppercase text-on-surface">Enforce 20Hz Telemetry Sync</span>
|
|
<span class="px-1.5 py-0.2 bg-primary-container/20 text-primary font-label-caption text-label-caption rounded">MANDATORY</span>
|
|
</div>
|
|
<span class="font-body-md text-body-md text-xs text-on-surface-variant">Requires Kalman filter lock before pilot can link into staged formation.</span>
|
|
</div>
|
|
<button aria-checked="true" class="w-14 h-8 flex-shrink-0 bg-primary-container rounded-full p-1 transition-all flex items-center justify-end shadow-[0_0_12px_rgba(0,229,255,0.4)]" onclick="toggleSwitch(this)" role="switch" type="button">
|
|
<div class="w-6 h-6 rounded-full bg-surface-container-lowest transition-transform duration-200"></div>
|
|
</button>
|
|
</div>
|
|
<!-- Toggle 3: Auto-Mute Helmet Intercom on >15° Lean -->
|
|
<div class="bg-surface-container p-space-md rounded-xl flex items-center justify-between gap-space-md">
|
|
<div class="flex flex-col gap-space-xs">
|
|
<span class="font-headline-sm text-headline-sm text-sm uppercase text-on-surface">Cornering Comms Filter</span>
|
|
<span class="font-body-md text-body-md text-xs text-on-surface-variant">Auto-mutes squad radio chat when bike roll exceeds >15° lean angle to preserve cornering focus.</span>
|
|
</div>
|
|
<button aria-checked="true" class="w-14 h-8 flex-shrink-0 bg-primary-container rounded-full p-1 transition-all flex items-center justify-end shadow-[0_0_12px_rgba(0,229,255,0.4)]" onclick="toggleSwitch(this)" role="switch" type="button">
|
|
<div class="w-6 h-6 rounded-full bg-surface-container-lowest transition-transform duration-200"></div>
|
|
</button>
|
|
</div>
|
|
<!-- Selector: Minimum Required Pace Clearance -->
|
|
<div class="bg-surface-container p-space-md rounded-xl flex flex-col justify-between gap-space-sm">
|
|
<div class="flex flex-col">
|
|
<span class="font-headline-sm text-headline-sm text-sm uppercase text-on-surface">Minimum Required Pace Clearance</span>
|
|
<span class="font-body-md text-body-md text-xs text-on-surface-variant">Staging filter automatically denies pack slots if verified track telemetry is below rank.</span>
|
|
</div>
|
|
<div class="relative">
|
|
<select class="w-full h-12 px-space-md rounded-lg bg-surface-container-low text-primary font-label-data text-label-data uppercase appearance-none cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary-container shadow-inner">
|
|
<option value="pace-1">Pace 1 Cruiser (18°-28° Lean capability)</option>
|
|
<option value="pace-2">Pace 2 Moderate (30°-40° Lean capability)</option>
|
|
<option selected="" value="pace-3">Pace 3 Brisk (42°-49° Lean capability)</option>
|
|
<option value="pace-4">Pace 4 Apex Predator (50°+ MotoGP Drag Clearance)</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-3 text-primary pointer-events-none">unfold_more</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 3: Join Code & Mesh Radio Frequency -->
|
|
<section class="bg-surface-container-low rounded-xl p-space-lg shadow-md flex flex-col gap-space-md">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary text-xl">cell_tower</span>
|
|
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface">3. Join Code & Mesh Radio Frequency</h2>
|
|
</div>
|
|
<span class="font-label-data text-label-data text-on-surface-variant">ENCRYPTED LORAWAN / P2P</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-space-lg">
|
|
<!-- Ephemeral Join Code Card -->
|
|
<div class="bg-surface-container p-space-lg rounded-xl flex flex-col justify-between gap-space-md">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-caption text-label-caption uppercase text-on-surface-variant">EPHEMERAL ACCESS TOKEN</span>
|
|
<span class="px-space-xs py-0.5 rounded bg-surface-container-high text-primary font-label-data text-label-data">TTL: 23h 48m</span>
|
|
</div>
|
|
<!-- PIN Display Visual -->
|
|
<div class="bg-surface-container-lowest p-space-md rounded-lg flex items-center justify-center gap-space-sm py-4">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary tracking-widest font-bold drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]" id="mesh-pin-code">8 4 9 2 0 1</span>
|
|
</div>
|
|
<div class="flex items-center gap-space-sm">
|
|
<button class="flex-1 h-12 px-space-md bg-surface-container-high hover:bg-surface-container-highest text-on-surface rounded-lg font-label-data text-label-data uppercase tracking-wider flex items-center justify-center gap-space-xs transition-all active:scale-95" onclick="regeneratePin()" type="button">
|
|
<span class="material-symbols-outlined text-primary text-base">sync</span>
|
|
Regenerate Code
|
|
</button>
|
|
<button class="h-12 w-12 bg-surface-container-high hover:bg-surface-container-highest text-primary rounded-lg flex items-center justify-center transition-all" onclick="copyPin()" type="button">
|
|
<span class="material-symbols-outlined text-lg" id="copy-icon">content_copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Mesh RF Channel Settings -->
|
|
<div class="bg-surface-container p-space-lg rounded-xl flex flex-col justify-between gap-space-md">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-label-caption text-label-caption uppercase text-on-surface-variant">MESH RF BROADCAST BAND</span>
|
|
<div class="flex items-center gap-1.5">
|
|
<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">99.8% LINK INTEGRITY</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-space-xs">
|
|
<label class="font-label-caption text-label-caption uppercase text-on-surface-variant">Primary Channel Freq</label>
|
|
<div class="relative">
|
|
<select class="w-full h-12 px-space-md rounded-lg bg-surface-container-low text-primary font-label-data text-label-data appearance-none cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary-container">
|
|
<option value="ch-01">Channel CH-01 (902.300 MHz Direct)</option>
|
|
<option value="ch-02">Channel CH-02 (906.800 MHz Repeater-A)</option>
|
|
<option value="ch-03">Channel CH-03 (910.400 MHz High-Noise)</option>
|
|
<option selected="" value="ch-04">Channel CH-04 (915.200 MHz P2P Mesh Default)</option>
|
|
<option value="ch-05">Channel CH-05 (920.100 MHz Mountain Relays)</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-3 text-primary pointer-events-none">tune</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-space-xs">
|
|
<button class="w-full h-12 bg-surface-container-high hover:bg-surface-container-highest text-on-surface rounded-lg font-label-data text-label-data uppercase tracking-wider flex items-center justify-center gap-space-xs transition-all active:scale-95" type="button">
|
|
<span class="material-symbols-outlined text-secondary text-base">radio</span>
|
|
Re-tune Squad Frequency
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- RIGHT COLUMN (Span 4): Governance Roster & Danger Zone -->
|
|
<div class="xl:col-span-4 flex flex-col gap-space-lg">
|
|
<!-- SECTION 4A: Leadership Succession -->
|
|
<section class="bg-surface-container-low rounded-xl p-space-lg shadow-md flex flex-col gap-space-md">
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="material-symbols-outlined text-primary text-xl">military_tech</span>
|
|
<h2 class="font-headline-sm text-headline-sm uppercase text-on-surface">Leadership Succession</h2>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-xs text-on-surface-variant">
|
|
Transfer chapter charter authority and cryptographic master keys to an appointed active road officer.
|
|
</p>
|
|
<div class="flex flex-col gap-space-sm">
|
|
<label class="font-label-caption text-label-caption uppercase text-on-surface-variant">Designate Successor</label>
|
|
<div class="relative">
|
|
<select class="w-full h-12 px-space-md rounded-lg bg-surface-container text-on-surface font-label-data text-label-data appearance-none cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary-container">
|
|
<option value="dave">@Dave_Lead — Vice President (Callsign: Ghost-2)</option>
|
|
<option value="sarah">@Sarah_Sweep — Road Captain (Callsign: Valkyrie)</option>
|
|
<option value="marcus">@Marcus_Tech — Sergeant-at-Arms (Callsign: Ironclad)</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-3 text-on-surface-variant pointer-events-none">arrow_drop_down</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-space-sm rounded-lg bg-surface-container-lowest flex items-start gap-space-sm">
|
|
<span class="material-symbols-outlined text-outline text-lg mt-0.5">info</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant leading-tight">
|
|
Transfers all telemetry export permissions, member ban powers, and Stripe dues payout account bindings.
|
|
</span>
|
|
</div>
|
|
<button class="h-12 w-full px-space-md bg-surface-container-high hover:bg-surface-container-highest text-secondary rounded-lg font-label-data text-label-data uppercase tracking-wider flex items-center justify-center gap-space-xs transition-all" type="button">
|
|
<span class="material-symbols-outlined text-base">supervisor_account</span>
|
|
Transfer President Authority
|
|
</button>
|
|
</section>
|
|
<!-- Telemetry Diagnostics & Live Quorum Mini Card -->
|
|
<div class="bg-surface-container-low rounded-xl p-space-md shadow-md flex flex-col gap-space-sm">
|
|
<span class="font-label-caption text-label-caption uppercase text-on-surface-variant">OFFICER VOTING QUORUM</span>
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary">3 / 4</span>
|
|
<span class="px-space-xs py-0.5 rounded bg-primary-container/20 text-primary font-label-data text-label-data">75% CONCURRENCE</span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-highest h-1.5 rounded-full overflow-hidden">
|
|
<div class="bg-primary-container h-full rounded-full" style="width: 75%;"></div>
|
|
</div>
|
|
<div class="flex justify-between items-center text-on-surface-variant font-label-caption text-label-caption mt-1">
|
|
<span>Charter Bylaws v4.2</span>
|
|
<span>Last Vote: 3d ago</span>
|
|
</div>
|
|
</div>
|
|
<!-- SECTION 4B: DANGER ZONE -->
|
|
<section class="bg-error-container/10 rounded-xl p-space-lg shadow-xl flex flex-col gap-space-md border border-error/30 relative overflow-hidden">
|
|
<div class="absolute -right-6 -top-6 w-24 h-24 bg-error/10 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="flex items-center gap-space-sm">
|
|
<span class="material-symbols-outlined text-error text-xl animate-pulse">warning</span>
|
|
<h2 class="font-headline-sm text-headline-sm uppercase text-error">Danger Zone</h2>
|
|
</div>
|
|
<div class="flex flex-col gap-space-xs">
|
|
<h3 class="font-headline-sm text-headline-sm text-base text-on-surface">Disband Motorcycle Club & Purge Chapter Mesh</h3>
|
|
<p class="font-body-md text-body-md text-xs text-on-surface-variant leading-relaxed">
|
|
This action is irreversible. All 42 rider roster bindings, historical 20Hz group telemetry logs, and dedicated RF channels will be immediately purged from satellite node caches.
|
|
</p>
|
|
</div>
|
|
<div class="p-space-sm rounded-lg bg-surface-container-lowest/80 flex items-center gap-space-xs">
|
|
<span class="w-2 h-2 rounded-full bg-error"></span>
|
|
<span class="font-label-caption text-label-caption text-error uppercase font-bold tracking-wider">Zero Recovery Fallback</span>
|
|
</div>
|
|
<button class="h-12 w-full px-space-md bg-error-container text-on-error hover:bg-error rounded-lg font-label-data text-label-data uppercase tracking-wider flex items-center justify-center gap-space-xs transition-all shadow-[0_0_16px_rgba(239,68,68,0.35)] active:scale-95" onclick="confirmDisband()" type="button">
|
|
<span class="material-symbols-outlined text-base">delete_forever</span>
|
|
Disband Club & Archive Roster
|
|
</button>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<!-- STICKY ACTION CONSOLE (BOTTOM BAR) -->
|
|
<div class="sticky bottom-4 w-full bg-surface-container-low/95 backdrop-blur-xl p-space-md rounded-2xl shadow-[0_4px_24px_rgba(0,0,0,0.8)] z-30 flex flex-col sm:flex-row items-center justify-between gap-space-md">
|
|
<div class="flex items-center gap-space-md">
|
|
<div class="w-3 h-3 rounded-full bg-primary-container animate-ping"></div>
|
|
<div class="flex flex-col">
|
|
<span class="font-headline-sm text-headline-sm text-xs uppercase text-on-surface tracking-wide">Configuration Staged // Unsaved Revisions: 0</span>
|
|
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Mesh node deployment target: US-WEST-LORANET-08</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-space-md w-full sm:w-auto">
|
|
<button class="flex-1 sm:flex-initial h-12 px-space-lg rounded-xl bg-surface-container-high text-on-surface hover:bg-surface-container-highest font-label-data text-label-data uppercase tracking-wider transition-all" type="button">
|
|
Discard Changes
|
|
</button>
|
|
<button class="flex-1 sm:flex-initial h-12 px-space-xl rounded-xl bg-primary-container text-on-primary-container hover:bg-primary-fixed-dim font-label-data text-label-data uppercase tracking-wider font-bold transition-all shadow-[0_0_20px_rgba(0,229,255,0.4)] flex items-center justify-center gap-space-xs active:scale-95" id="save-btn" onclick="saveGovernance()" type="button">
|
|
<span class="material-symbols-outlined text-lg">verified</span>
|
|
<span>Save Governance Configuration</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function selectPolicyCard(element) {
|
|
const cards = document.querySelectorAll('.policy-card');
|
|
cards.forEach(card => {
|
|
card.classList.remove('bg-surface-container-high', 'ring-1', 'ring-primary-container', 'shadow-lg');
|
|
card.classList.add('bg-surface-container');
|
|
const radio = card.querySelector('.radio-indicator');
|
|
radio.className = 'radio-indicator w-4 h-4 rounded-full bg-surface-container-highest flex items-center justify-center';
|
|
radio.innerHTML = '<div class="w-2 h-2 rounded-full bg-transparent"></div>';
|
|
|
|
const badge = card.querySelector('span[class*="POLICY"]');
|
|
if (badge) {
|
|
badge.className = 'font-label-data text-label-data text-outline group-hover:text-primary';
|
|
badge.textContent = badge.getAttribute('data-default-label') || 'POLICY OPTION';
|
|
}
|
|
const title = card.querySelector('h3');
|
|
if (title) title.className = 'font-headline-sm text-headline-sm text-base text-on-surface uppercase mt-1';
|
|
});
|
|
|
|
element.classList.remove('bg-surface-container');
|
|
element.classList.add('bg-surface-container-high', 'ring-1', 'ring-primary-container', 'shadow-lg');
|
|
const radio = element.querySelector('.radio-indicator');
|
|
radio.className = 'radio-indicator w-4 h-4 rounded-full bg-primary-container flex items-center justify-center';
|
|
radio.innerHTML = '<div class="w-2 h-2 rounded-full bg-surface-container-lowest"></div>';
|
|
|
|
const topLabel = element.querySelector('.font-label-data');
|
|
if (topLabel) {
|
|
topLabel.className = 'font-label-data text-label-data text-primary-container font-bold';
|
|
topLabel.textContent = 'SELECTED // ACTIVE';
|
|
}
|
|
const title = element.querySelector('h3');
|
|
if (title) title.className = 'font-headline-sm text-headline-sm text-base text-primary uppercase mt-1';
|
|
}
|
|
|
|
function toggleSwitch(button) {
|
|
const isChecked = button.getAttribute('aria-checked') === 'true';
|
|
const knob = button.querySelector('div');
|
|
if (isChecked) {
|
|
button.setAttribute('aria-checked', 'false');
|
|
button.className = 'w-14 h-8 flex-shrink-0 bg-surface-container-highest rounded-full p-1 transition-all flex items-center';
|
|
knob.className = 'w-6 h-6 rounded-full bg-outline transition-transform duration-200';
|
|
} else {
|
|
button.setAttribute('aria-checked', 'true');
|
|
button.className = 'w-14 h-8 flex-shrink-0 bg-primary-container rounded-full p-1 transition-all flex items-center justify-end shadow-[0_0_12px_rgba(0,229,255,0.4)]';
|
|
knob.className = 'w-6 h-6 rounded-full bg-surface-container-lowest transition-transform duration-200';
|
|
}
|
|
}
|
|
|
|
function regeneratePin() {
|
|
const pinEl = document.getElementById('mesh-pin-code');
|
|
const digits = Array.from({length: 6}, () => Math.floor(Math.random() * 10)).join(' ');
|
|
pinEl.textContent = digits;
|
|
pinEl.classList.add('scale-105');
|
|
setTimeout(() => pinEl.classList.remove('scale-105'), 200);
|
|
}
|
|
|
|
function copyPin() {
|
|
const pinEl = document.getElementById('mesh-pin-code');
|
|
const text = pinEl.textContent.replace(/\s+/g, '');
|
|
navigator.clipboard.writeText(text);
|
|
const icon = document.getElementById('copy-icon');
|
|
icon.textContent = 'check';
|
|
setTimeout(() => icon.textContent = 'content_copy', 1500);
|
|
}
|
|
|
|
function confirmDisband() {
|
|
if (confirm("CRITICAL WARNING: Disbanding Pacific Coast Riders will irrevocably decommission the mesh node, release 915.200 MHz, and unbind 42 active racers. Proceed with Chapter purge?")) {
|
|
alert("Purge sequence initiated. Dispatching deauth packets to member units...");
|
|
}
|
|
}
|
|
|
|
function saveGovernance() {
|
|
const saveBtn = document.getElementById('save-btn');
|
|
const originalContent = saveBtn.innerHTML;
|
|
saveBtn.innerHTML = '<span class="material-symbols-outlined text-lg animate-spin">refresh</span><span>Transmitting to Mesh...</span>';
|
|
setTimeout(() => {
|
|
saveBtn.innerHTML = '<span class="material-symbols-outlined text-lg">done_all</span><span>Mesh Synced (200 OK)</span>';
|
|
setTimeout(() => {
|
|
saveBtn.innerHTML = originalContent;
|
|
}, 2000);
|
|
}, 800);
|
|
}
|
|
</script></main></div></body></html> |