MotorSignal-App/docs/stitch-designs/code/46_membership_applications_...

448 lines
41 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&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: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":{"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 aria-current="page" class="flex items-center justify-between min-h-[48px] px-space-md rounded-lg transition-all bg-primary-container text-on-primary-container font-headline-sm" 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 &amp; 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 &amp; 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">
<!-- Command Header & Telemetry Status Banner -->
<section class="relative w-full rounded-xl bg-surface-container-low p-space-lg mb-gutter-lg overflow-hidden shadow-xl">
<div class="absolute -right-20 -top-24 w-96 h-96 rounded-full bg-primary-container/5 blur-3xl pointer-events-none"></div>
<div class="absolute right-0 bottom-0 opacity-10 pointer-events-none">
<svg fill="none" height="120" viewbox="0 0 280 120" width="280">
<path d="M0 100 L40 60 L80 85 L140 15 L190 70 L240 30 L280 60" stroke="#00e5ff" stroke-dasharray="4 4" stroke-width="2"></path>
<circle cx="140" cy="15" fill="#00e5ff" r="4"></circle>
</svg>
</div>
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-space-md relative z-10">
<div class="flex flex-col gap-space-xs">
<div class="flex items-center gap-space-sm">
<span class="px-space-xs py-0.5 rounded bg-surface-container-high font-label-data text-label-data text-primary uppercase">SECURITY LEVEL: O-4 PATCH AUTHORITY</span>
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase tracking-wider">// WEB-12 QUEUE</span>
</div>
<h1 class="font-headline-lg text-headline-lg text-on-surface uppercase tracking-tight">
Applicant Screening Vault // Pacific Coast Riders
</h1>
<p class="font-body-md text-body-md text-on-surface-variant max-w-3xl">
Review rider telemetry credentials, verified safety records, and discipline fit before granting patch. Decisions are cryptographically signed to the chapter ledger.
</p>
</div>
<!-- Quick Metrics Counter Group -->
<div class="flex items-center gap-space-md">
<div class="px-space-md py-space-sm rounded-lg bg-surface-container flex flex-col items-start min-w-[130px]">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Mesh Influx</span>
<span class="font-telemetry-metric-md text-telemetry-metric-md text-primary mt-1">4.2<span class="text-sm font-label-data text-outline">/WK</span></span>
</div>
<div class="px-space-md py-space-sm rounded-lg bg-surface-container flex flex-col items-start min-w-[130px]">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Screened Rate</span>
<span class="font-telemetry-metric-md text-telemetry-metric-md text-on-surface mt-1">87.5%</span>
</div>
</div>
</div>
<!-- Filter Tab Bar & Tactical Search Matrix -->
<div class="mt-space-lg pt-space-md flex flex-col lg:flex-row lg:items-center justify-between gap-space-md bg-surface-container-lowest/80 p-space-sm rounded-lg backdrop-blur-md">
<!-- Status Tabs -->
<div class="flex items-center gap-space-xs overflow-x-auto pb-1 lg:pb-0" id="queue-filter-tabs">
<button class="flex items-center gap-space-sm px-space-md h-12 rounded-lg bg-primary-container text-on-primary-container font-headline-sm text-xs tracking-wider uppercase transition-all shadow-[0_0_12px_rgba(0,229,255,0.35)]">
<span>Pending Review</span>
<span class="px-1.5 py-0.5 rounded-full bg-surface-container-lowest text-primary font-label-data text-label-data font-bold">4</span>
</button>
<button class="flex items-center gap-space-sm px-space-md h-12 rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface font-headline-sm text-xs tracking-wider uppercase transition-all">
<span>Approved</span>
<span class="px-1.5 py-0.5 rounded-full bg-surface-container-high text-on-surface font-label-data text-label-data">38</span>
</button>
<button class="flex items-center gap-space-sm px-space-md h-12 rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface font-headline-sm text-xs tracking-wider uppercase transition-all">
<span>Declined</span>
<span class="px-1.5 py-0.5 rounded-full bg-surface-container-high text-on-surface-variant font-label-data text-label-data">12</span>
</button>
</div>
<!-- Controls: Search & Sort Dropdown -->
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-space-sm">
<div class="relative flex-1 sm:w-80">
<span class="material-symbols-outlined absolute left-3 top-3.5 text-outline text-lg pointer-events-none">manage_search</span>
<input class="w-full h-12 pl-10 pr-4 rounded-lg bg-surface-container text-on-surface font-label-data text-label-data placeholder:text-outline focus:outline-none focus:ring-1 focus:ring-primary-container transition-all" placeholder="Search by callsign, bike, or telemetry ID..." type="text"/>
</div>
<div class="flex items-center gap-space-xs bg-surface-container px-space-sm rounded-lg h-12">
<span class="material-symbols-outlined text-outline text-sm">swap_vert</span>
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Sort:</span>
<select class="bg-transparent text-primary font-label-data text-label-data uppercase focus:outline-none pr-space-xs cursor-pointer">
<option class="bg-surface-container-lowest text-on-surface">Newest First</option>
<option class="bg-surface-container-lowest text-on-surface">Max Lean Angle (Hi-Lo)</option>
<option class="bg-surface-container-lowest text-on-surface">Cohesion Score</option>
<option class="bg-surface-container-lowest text-on-surface">Mesh Link Stability</option>
</select>
</div>
</div>
</div>
</section>
<!-- Screening Queue Stack -->
<div class="flex flex-col gap-space-lg w-full">
<!-- APPLICANT CARD 1: @Sarah_Canyon -->
<article class="relative w-full rounded-xl bg-surface-container-low p-space-lg transition-all hover:shadow-[0_4px_24px_rgba(0,0,0,0.6)] flex flex-col gap-space-md">
<!-- Glow accent top strip -->
<div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-primary-container/40 to-transparent"></div>
<!-- Top Row: Pilot Profile & Meta -->
<div class="flex flex-col xl:flex-row xl:items-center justify-between gap-space-md">
<div class="flex items-start sm:items-center gap-space-md">
<div class="relative flex-shrink-0">
<img class="w-16 h-16 rounded-xl object-cover" data-alt="Intense female sportbike pilot in dark matte race gear with cyan helmet accents, shot against high contrast neon pit lane shadows, high fidelity motorsport telemetry portrait." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBV6n3NKCmlJlBGuOJNwlc6YPyIXghAVHzp3EnhK_Qx-LCeK72no1FVAUqEPHPOVcclrfG7fXxqTLz990nSdAFpQHnKJjVAvJZGneB9qasw00EEAPMMtgpoeGvS2tklds0VX9LqiaHcmWlZnQx6rQj8OsreING1KU-_xGXbXkeR2yTJ4sbaoYydkI7xx0rytYk3aW6deeVGThvtji1aGI7iy31PiXb2oHu9gA_7_n1j8Z7PiPbwtlnZ"/>
<div class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-surface-container-lowest flex items-center justify-center">
<span class="material-symbols-outlined text-xs text-primary-container">sports_motorsports</span>
</div>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-space-sm flex-wrap">
<span class="font-headline-md text-headline-md text-on-surface">@Sarah_Canyon</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container-high font-label-caption text-label-caption text-primary uppercase">SARAH LIN</span>
<span class="px-space-xs py-0.5 rounded bg-primary-container/20 text-primary-container font-label-data text-label-data uppercase font-bold">PROSPECT TIER 1</span>
</div>
<div class="flex items-center gap-space-md text-on-surface-variant font-label-data text-label-data mt-1 flex-wrap">
<span class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-sm">schedule</span> Received 2 hours ago
</span>
<span>•</span>
<span class="text-on-surface">2023 Yamaha MT-09 SP</span>
<span>•</span>
<span>6 Years Riding</span>
<span>•</span>
<span class="px-1.5 py-0.5 rounded bg-surface-container text-on-surface">Pace 3 Brisk Certified</span>
</div>
</div>
</div>
<!-- Telemetry Summary Badges Matrix -->
<div class="flex flex-wrap items-center gap-space-xs">
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="w-2 h-2 rounded-full bg-primary-container animate-ping"></span>
<span class="font-label-data text-label-data text-primary uppercase">Verified 20Hz Rider</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Max Lean:</span>
<span class="font-label-data text-label-data text-on-surface font-bold text-primary">48.4°</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Safety:</span>
<span class="font-label-data text-label-data text-on-surface font-bold">0 Crashes</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Link Sync:</span>
<span class="font-label-data text-label-data text-on-surface font-bold">98.2%</span>
</div>
</div>
</div>
<!-- Telemetry Visualizer & Q&A Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-space-md pt-space-xs">
<!-- Left: Lean & Mesh Waveform Telemetry Visual -->
<div class="lg:col-span-4 rounded-xl bg-surface-container-lowest p-space-md flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface-variant uppercase">20Hz Telemetry Arc &amp; Stability</span>
<span class="font-label-caption text-label-caption text-primary">LOG_ID: #8841-B</span>
</div>
<!-- Inline Telemetry SVG Lean / G-Force trace -->
<div class="py-space-sm">
<svg class="w-full h-20" fill="none" viewbox="0 0 320 80">
<path d="M0 60 Q 40 55, 70 35 T 140 18 T 200 45 T 260 20 T 320 50" stroke="#00e5ff" stroke-linecap="round" stroke-width="2.5"></path>
<path d="M0 60 Q 40 55, 70 35 T 140 18 T 200 45 T 260 20 T 320 50 L 320 80 L 0 80 Z" fill="url(#grad1)" opacity="0.15"></path>
<circle cx="140" cy="18" fill="#c3f5ff" r="4"></circle>
<text fill="#00e5ff" font-family="JetBrains Mono" font-size="9" font-weight="bold" x="148" y="20">48.4° APEX</text>
<defs>
<lineargradient id="grad1" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#00e5ff"></stop>
<stop offset="100%" stop-color="transparent"></stop>
</lineargradient>
</defs>
</svg>
</div>
<div class="flex items-center justify-between text-on-surface-variant font-label-caption text-label-caption pt-space-xs">
<span>PACK INTERVAL DELTA: +0.22s</span>
<span class="text-primary font-label-data text-label-data">CLEAN RECOVERY (100%)</span>
</div>
</div>
<!-- Center-Right: Screening Question Response -->
<div class="lg:col-span-8 rounded-xl bg-surface-container p-space-md flex flex-col justify-between">
<div class="flex flex-col gap-space-xs">
<span class="font-label-caption text-label-caption text-primary uppercase tracking-wider">Screening Inquiry // Fit &amp; Ethos</span>
<h4 class="font-headline-sm text-headline-sm text-xs text-on-surface uppercase">
"Why do you want to ride with PCR?"
</h4>
<div class="mt-space-xs p-space-md rounded-lg bg-surface-container-low font-body-md text-body-md text-on-surface leading-relaxed">
"I ride Skyline and CA-9 every weekend morning. Looking for a disciplined pack that respects lane positioning, uses 20Hz mesh for road hazard comms, and rides brisk without reckless behavior."
</div>
</div>
<div class="mt-space-md flex items-center justify-between flex-wrap gap-space-sm">
<div class="flex items-center gap-space-xs text-on-surface-variant font-label-caption text-label-caption">
<span class="material-symbols-outlined text-sm text-primary">verified_user</span>
<span>VERIFIED VETTING SPONSOR: @Ghost_Lead (CH-01)</span>
</div>
<span class="font-label-data text-label-data text-primary">DISCIPLINE RATING: 99.4</span>
</div>
</div>
</div>
<!-- Action Footer: Approve / Decline / Inspect -->
<div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-space-md pt-space-xs mt-space-xs">
<div class="flex items-center gap-space-sm">
<button class="h-12 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm text-primary">play_circle</span>
Inspect 20Hz Ride Replays
</button>
<button class="h-12 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm">chat</span>
Direct Ping
</button>
</div>
<div class="flex items-center gap-space-sm">
<button class="h-12 px-space-lg rounded-lg bg-surface-container hover:bg-error-container text-error hover:text-on-error font-headline-sm text-xs uppercase tracking-wider flex items-center justify-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm">block</span>
Decline Application
</button>
<button class="h-12 px-space-xl rounded-lg bg-primary-container text-on-primary-container hover:bg-primary-fixed-dim font-headline-sm text-xs uppercase tracking-wider font-bold shadow-[0_0_16px_rgba(0,229,255,0.4)] flex items-center justify-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm font-bold">verified</span>
Approve &amp; Issue Patch
</button>
</div>
</div>
</article>
<!-- APPLICANT CARD 2: @TorqueJunkie -->
<article class="relative w-full rounded-xl bg-surface-container-low p-space-lg transition-all hover:shadow-[0_4px_24px_rgba(0,0,0,0.6)] flex flex-col gap-space-md">
<!-- Glow accent top strip -->
<div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-primary-container/20 to-transparent"></div>
<!-- Top Row: Pilot Profile & Meta -->
<div class="flex flex-col xl:flex-row xl:items-center justify-between gap-space-md">
<div class="flex items-start sm:items-center gap-space-md">
<div class="relative flex-shrink-0">
<img class="w-16 h-16 rounded-xl object-cover" data-alt="Aggressive male trackday motorcycle racer in race suit sitting on paddock wall, wearing dark reflective visor, electric cyan cinematic rim lighting and raw high speed telemetry backdrop." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBnba5UUY324bkggEXPOG76M0SYXg5Lfyo1VPrkfmV2MLvkj2hci3UJ6VJ9ZPLlDONGPeLn7V8ePIqcN0VWPC83ZFcOwK7C-euzKUCZMJO3SBT1T_Nm_hguGLAT9GUFyTSZ4yHxWd1GfLugTnOCLjQ2M_7MbOkj36eQ8M-yVhy3JPGBhBmgl2X_v5ge4n08c7yePCOKXaEuGetTVYoZiMBnLFBCtldSzvoXfqsd6G80wOcxE-m1RkVZ"/>
<div class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-surface-container-lowest flex items-center justify-center">
<span class="material-symbols-outlined text-xs text-primary-container">speed</span>
</div>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-space-sm flex-wrap">
<span class="font-headline-md text-headline-md text-on-surface">@TorqueJunkie</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container-high font-label-caption text-label-caption text-primary uppercase">MARCUS THORNE</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container-highest text-on-surface font-label-data text-label-data uppercase">EXPERIENCED PILOT</span>
</div>
<div class="flex items-center gap-space-md text-on-surface-variant font-label-data text-label-data mt-1 flex-wrap">
<span class="flex items-center gap-1 text-on-surface-variant">
<span class="material-symbols-outlined text-sm">schedule</span> Received 1 day ago
</span>
<span>•</span>
<span class="text-on-surface">2024 KTM 890 Duke R</span>
<span>•</span>
<span>4 Years Riding</span>
<span>•</span>
<span class="px-1.5 py-0.5 rounded bg-surface-container text-on-surface">Pace 4 Technical</span>
</div>
</div>
</div>
<!-- Telemetry Summary Badges Matrix -->
<div class="flex flex-wrap items-center gap-space-xs">
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<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">Verified 20Hz Rider</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Max Lean:</span>
<span class="font-label-data text-label-data text-primary font-bold">51.2°</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Safety:</span>
<span class="font-label-data text-label-data text-on-surface font-bold">0 Incidents</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Link Sync:</span>
<span class="font-label-data text-label-data text-on-surface font-bold">96.5%</span>
</div>
</div>
</div>
<!-- Telemetry Visualizer & Q&A Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-space-md pt-space-xs">
<!-- Left: Lean & Mesh Waveform Telemetry Visual -->
<div class="lg:col-span-4 rounded-xl bg-surface-container-lowest p-space-md flex flex-col justify-between">
<div class="flex items-center justify-between">
<span class="font-label-data text-label-data text-on-surface-variant uppercase">Aggression Vector &amp; Apex Telemetry</span>
<span class="font-label-caption text-label-caption text-primary">LOG_ID: #8792-K</span>
</div>
<div class="py-space-sm">
<svg class="w-full h-20" fill="none" viewbox="0 0 320 80">
<path d="M0 65 Q 50 60, 80 40 T 160 12 T 220 50 T 270 25 T 320 40" stroke="#00daf3" stroke-linecap="round" stroke-width="2.5"></path>
<path d="M0 65 Q 50 60, 80 40 T 160 12 T 220 50 T 270 25 T 320 40 L 320 80 L 0 80 Z" fill="url(#grad2)" opacity="0.15"></path>
<circle cx="160" cy="12" fill="#00e5ff" r="4"></circle>
<text fill="#00e5ff" font-family="JetBrains Mono" font-size="9" font-weight="bold" x="168" y="16">51.2° PEAK</text>
<defs>
<lineargradient id="grad2" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#00daf3"></stop>
<stop offset="100%" stop-color="transparent"></stop>
</lineargradient>
</defs>
</svg>
</div>
<div class="flex items-center justify-between text-on-surface-variant font-label-caption text-label-caption pt-space-xs">
<span>PACK DELTA: +0.08s (TIGHT)</span>
<span class="text-primary font-label-data text-label-data">BRAKING STABILITY (94%)</span>
</div>
</div>
<!-- Center-Right: Screening Question Response -->
<div class="lg:col-span-8 rounded-xl bg-surface-container p-space-md flex flex-col justify-between">
<div class="flex flex-col gap-space-xs">
<span class="font-label-caption text-label-caption text-primary uppercase tracking-wider">Screening Inquiry // Fit &amp; Ethos</span>
<h4 class="font-headline-sm text-headline-sm text-xs text-on-surface uppercase">
"Why do you want to ride with PCR?"
</h4>
<div class="mt-space-xs p-space-md rounded-lg bg-surface-container-low font-body-md text-body-md text-on-surface leading-relaxed">
"Looking for trackday and aggressive canyon carving buddies with shared telemetry analysis."
</div>
</div>
<div class="mt-space-md flex items-center justify-between flex-wrap gap-space-sm">
<div class="flex items-center gap-space-xs text-on-surface-variant font-label-caption text-label-caption">
<span class="material-symbols-outlined text-sm text-primary">radar</span>
<span>BEACON ACCREDITATION: LEVEL 2 COMPLIANT</span>
</div>
<span class="font-label-data text-label-data text-primary">DISCIPLINE RATING: 91.8</span>
</div>
</div>
</div>
<!-- Action Footer: Approve / Decline / Inspect -->
<div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-space-md pt-space-xs mt-space-xs">
<div class="flex items-center gap-space-sm">
<button class="h-12 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm text-primary">play_circle</span>
Inspect 20Hz Ride Replays
</button>
<button class="h-12 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm">chat</span>
Direct Ping
</button>
</div>
<div class="flex items-center gap-space-sm">
<button class="h-12 px-space-lg rounded-lg bg-surface-container hover:bg-error-container text-error hover:text-on-error font-headline-sm text-xs uppercase tracking-wider flex items-center justify-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm">block</span>
Decline Application
</button>
<button class="h-12 px-space-xl rounded-lg bg-primary-container text-on-primary-container hover:bg-primary-fixed-dim font-headline-sm text-xs uppercase tracking-wider font-bold shadow-[0_0_16px_rgba(0,229,255,0.4)] flex items-center justify-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm font-bold">verified</span>
Approve &amp; Issue Patch
</button>
</div>
</div>
</article>
<!-- APPLICANT CARD 3: @Apex_Novice (Pace Mismatch Advisory) -->
<article class="relative w-full rounded-xl bg-surface-container-low p-space-lg transition-all hover:shadow-[0_4px_24px_rgba(0,0,0,0.6)] flex flex-col gap-space-md">
<!-- Advisory alert bar top strip -->
<div class="absolute top-0 left-6 right-6 h-0.5 bg-gradient-to-r from-transparent via-error/60 to-transparent"></div>
<!-- Top Row: Pilot Profile & Meta -->
<div class="flex flex-col xl:flex-row xl:items-center justify-between gap-space-md">
<div class="flex items-start sm:items-center gap-space-md">
<div class="relative flex-shrink-0">
<div class="w-16 h-16 rounded-xl bg-surface-container-highest flex items-center justify-center text-on-surface-variant">
<span class="material-symbols-outlined text-3xl">person</span>
</div>
<div class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-error-container flex items-center justify-center">
<span class="material-symbols-outlined text-xs text-error font-bold">warning</span>
</div>
</div>
<div class="flex flex-col">
<div class="flex items-center gap-space-sm flex-wrap">
<span class="font-headline-md text-headline-md text-on-surface">@Apex_Novice</span>
<span class="px-space-xs py-0.5 rounded bg-surface-container-high font-label-caption text-label-caption text-on-surface-variant uppercase">KEVIN ROWE</span>
<span class="px-space-xs py-0.5 rounded bg-error-container text-error font-label-data text-label-data uppercase font-bold">DISCIPLINE CHECK</span>
</div>
<div class="flex items-center gap-space-md text-on-surface-variant font-label-data text-label-data mt-1 flex-wrap">
<span class="flex items-center gap-1 text-on-surface-variant">
<span class="material-symbols-outlined text-sm">schedule</span> Received 3 days ago
</span>
<span>•</span>
<span class="text-on-surface">2022 Kawasaki Ninja 400</span>
<span>•</span>
<span>1 Year Riding</span>
<span>•</span>
<span class="px-1.5 py-0.5 rounded bg-surface-container text-outline">Pace 1 Touring</span>
</div>
</div>
</div>
<!-- Telemetry Summary Badges Matrix -->
<div class="flex flex-wrap items-center gap-space-xs">
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="w-2 h-2 rounded-full bg-outline"></span>
<span class="font-label-data text-label-data text-outline uppercase">Standard Mesh</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Max Lean:</span>
<span class="font-label-data text-label-data text-error font-bold">31.8°</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Safety:</span>
<span class="font-label-data text-label-data text-on-surface font-bold">0 Crashes</span>
</div>
<div class="px-space-md py-1.5 rounded-lg bg-surface-container-lowest flex items-center gap-space-xs">
<span class="font-label-caption text-label-caption text-on-surface-variant uppercase">Link Sync:</span>
<span class="font-label-data text-label-data text-on-surface font-bold">88.4%</span>
</div>
</div>
</div>
<!-- Advisory Notification Banner (Highlighted Warning) -->
<div class="p-space-md rounded-xl bg-error-container/20 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-space-md">
<div class="flex items-center gap-space-md">
<div class="w-10 h-10 rounded-lg bg-error-container flex items-center justify-center flex-shrink-0">
<span class="material-symbols-outlined text-error">notification_important</span>
</div>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm text-xs text-error uppercase">Automated Telemetry Flag: Pace Mismatch</span>
<span class="font-body-md text-body-md text-on-surface-variant">
Applicant operates at Pace 1 (&lt;35° Lean). Club minimum standard for group canyon deployments is Pace 3 Brisk.
</span>
</div>
</div>
<div class="flex items-center gap-space-xs px-space-md py-1 rounded bg-surface-container font-label-data text-label-data text-error uppercase flex-shrink-0">
DELTA: -16.6° LEAN GAP
</div>
</div>
<!-- Action Footer: Conditional Prospect vs Outright Decline -->
<div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-space-md pt-space-xs mt-space-xs">
<div class="flex items-center gap-space-sm">
<button class="h-12 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm text-primary">school</span>
Assign Mentor Pilot
</button>
<button class="h-12 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface font-label-data text-label-data uppercase tracking-wider flex items-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm">visibility</span>
View Ride Logs
</button>
</div>
<div class="flex items-center gap-space-sm">
<button class="h-12 px-space-lg rounded-lg bg-surface-container hover:bg-error-container text-error hover:text-on-error font-headline-sm text-xs uppercase tracking-wider flex items-center justify-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm">block</span>
Decline Application
</button>
<button class="h-12 px-space-xl rounded-lg bg-surface-container-highest hover:bg-surface-bright text-on-surface font-headline-sm text-xs uppercase tracking-wider font-semibold flex items-center justify-center gap-space-xs transition-all">
<span class="material-symbols-outlined text-sm text-primary">history_edu</span>
Conditionally Approve as Prospect
</button>
</div>
</div>
</article>
</div>
<!-- Bottom Ledger & Audit Footprint -->
<footer class="mt-gutter-lg p-space-md rounded-xl bg-surface-container-lowest flex flex-col md:flex-row items-center justify-between gap-space-md text-on-surface-variant">
<div class="flex items-center gap-space-md">
<span class="w-2.5 h-2.5 rounded-full bg-primary-container"></span>
<span class="font-label-data text-label-data uppercase">VAULT LEDGER NODE: PACIFIC-MESH-HQ-01</span>
<span class="hidden sm:inline font-label-caption text-label-caption text-outline">|</span>
<span class="hidden sm:inline font-label-data text-label-data text-outline uppercase">BLOCK 908,124</span>
</div>
<div class="flex items-center gap-space-lg font-label-data text-label-data text-xs">
<span class="text-primary">ENCRYPTED TELEMETRY STREAM V4.2</span>
<span>CHAPTER DISCIPLINE STANDARD: PACE 3+</span>
</div>
</footer>
</div>
<script>
// Simple interactive tab state toggling
document.querySelectorAll('#queue-filter-tabs button').forEach(button => {
button.addEventListener('click', function() {
document.querySelectorAll('#queue-filter-tabs button').forEach(b => {
b.className = 'flex items-center gap-space-sm px-space-md h-12 rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface font-headline-sm text-xs tracking-wider uppercase transition-all';
});
this.className = 'flex items-center gap-space-sm px-space-md h-12 rounded-lg bg-primary-container text-on-primary-container font-headline-sm text-xs tracking-wider uppercase transition-all shadow-[0_0_12px_rgba(0,229,255,0.35)]';
});
});
</script></main></div></body></html>