MotorSignal-App/docs/stitch-designs/code/42_account_security_setting...

547 lines
31 KiB
HTML

<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>Account &amp; Security Settings - MotorSignal HUD</title>
<!-- Material Symbols Outlined -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@500;600;700&amp;family=Space+Grotesk:wght@600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"secondary-fixed": "#dbe1ff",
"on-secondary-container": "#cdd7ff",
"surface-container-lowest": "#0b0e13",
"on-tertiary-fixed-variant": "#5516be",
"on-error": "#690005",
"tertiary-fixed": "#e9ddff",
"secondary-fixed-dim": "#b4c5ff",
"inverse-on-surface": "#2d3036",
"surface-bright": "#36393f",
"tertiary-container": "#d9c8ff",
"on-secondary-fixed-variant": "#003ea8",
"on-surface-variant": "#bac9cc",
"on-tertiary-container": "#6834d1",
"background": "#101419",
"on-primary": "#00363d",
"tertiary-fixed-dim": "#d0bcff",
"on-secondary": "#002a78",
"tertiary": "#f2e9ff",
"inverse-primary": "#006875",
"secondary-container": "#0053db",
"on-primary-container": "#00626e",
"secondary": "#b4c5ff",
"on-tertiary": "#3c0091",
"inverse-surface": "#e0e2ea",
"on-tertiary-fixed": "#23005c",
"surface-variant": "#32353b",
"outline-variant": "#3b494c",
"error-container": "#93000a",
"primary-container": "#00e5ff",
"surface": "#101419",
"error": "#ffb4ab",
"on-surface": "#e0e2ea",
"surface-tint": "#00daf3",
"surface-container": "#1d2025",
"on-error-container": "#ffdad6",
"primary-fixed": "#9cf0ff",
"primary": "#c3f5ff",
"outline": "#849396",
"surface-dim": "#101419",
"surface-container-low": "#181c21",
"on-background": "#e0e2ea",
"surface-container-highest": "#32353b",
"primary-fixed-dim": "#00daf3",
"surface-container-high": "#272a30",
"on-secondary-fixed": "#00174b",
"on-primary-fixed": "#001f24",
"on-primary-fixed-variant": "#004f58"
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
spacing: {
"margin-lg": "2rem",
"gutter": "1rem",
"space-xs": "0.25rem",
"space-xl": "2rem",
"margin": "1rem",
"gutter-lg": "1.5rem",
"space-sm": "0.5rem",
"space-md": "1rem",
"space-lg": "1.5rem"
},
fontFamily: {
"telemetry-metric-lg-mobile": ["JetBrains Mono"],
"display-hero": ["Space Grotesk"],
"body-lg": ["Inter"],
"headline-lg": ["Space Grotesk"],
"telemetry-metric-md": ["JetBrains Mono"],
"telemetry-metric-lg": ["JetBrains Mono"],
"headline-md": ["Space Grotesk"],
"body-md": ["Inter"],
"label-data": ["JetBrains Mono"],
"label-caption": ["Inter"],
"headline-sm": ["Space Grotesk"],
"display-hero-mobile": ["Space Grotesk"]
},
fontSize: {
"telemetry-metric-lg-mobile": ["36px", { lineHeight: "36px", letterSpacing: "-0.03em", fontWeight: "700" }],
"display-hero": ["56px", { lineHeight: "60px", letterSpacing: "-0.03em", fontWeight: "700" }],
"body-lg": ["16px", { lineHeight: "24px", fontWeight: "500" }],
"headline-lg": ["32px", { lineHeight: "40px", letterSpacing: "-0.02em", fontWeight: "700" }],
"telemetry-metric-md": ["28px", { lineHeight: "32px", letterSpacing: "-0.02em", fontWeight: "600" }],
"telemetry-metric-lg": ["48px", { lineHeight: "48px", letterSpacing: "-0.04em", fontWeight: "700" }],
"headline-md": ["24px", { lineHeight: "32px", letterSpacing: "-0.01em", fontWeight: "600" }],
"body-md": ["14px", { lineHeight: "20px", fontWeight: "400" }],
"label-data": ["12px", { lineHeight: "16px", letterSpacing: "0.08em", 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" }]
}
}
}
}
</script>
<style>
/* Physical tactical touches & glove focus ring */
.tactical-border {
border: 1px solid #1E293B;
}
.tactical-cyan-border {
border: 1px solid rgba(0, 229, 255, 0.4);
box-shadow: 0 0 16px rgba(0, 229, 255, 0.08);
}
.tactical-danger-border {
border: 1px solid rgba(239, 68, 68, 0.35);
box-shadow: 0 0 18px rgba(239, 68, 68, 0.12);
}
.glow-cyan {
box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}
/* Oversized custom toggle */
.glove-toggle {
width: 58px;
height: 32px;
appearance: none;
background-color: #181c21;
border: 1px solid #3b494c;
border-radius: 9999px;
position: relative;
cursor: pointer;
outline: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.glove-toggle::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background-color: #bac9cc;
border-radius: 9999px;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
}
.glove-toggle:checked {
background-color: rgba(0, 229, 255, 0.18);
border-color: #00e5ff;
box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}
.glove-toggle:checked::after {
transform: translateX(26px);
background-color: #00e5ff;
}
</style>
</head>
<body class="bg-[#070A0F] text-on-surface antialiased min-h-screen pb-24 selection:bg-primary-container selection:text-surface-container-lowest">
<!-- TOP APP BAR & HARDWARE STATUS HUD -->
<header class="fixed top-0 left-0 w-full z-50 bg-surface-container-lowest/95 backdrop-blur-md border-b border-outline-variant">
<!-- Live Telemetry Status Strip -->
<div class="flex items-center justify-between px-gutter py-1 bg-[#05070a] border-b border-surface-variant/40">
<div class="flex items-center space-x-2">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-primary-container animate-pulse"></span>
<span class="font-label-data text-label-data text-primary-container tracking-wider">20Hz KALMAN LOCK</span>
</div>
<div class="flex items-center space-x-3 text-on-surface-variant">
<div class="flex items-center space-x-1">
<span class="material-symbols-outlined text-[13px] text-primary" data-icon="lock" style="font-variation-settings: 'FILL' 1;">lock</span>
<span class="font-label-data text-label-data text-on-surface">AES-GCM-256</span>
</div>
<div class="flex items-center space-x-1">
<span class="material-symbols-outlined text-[14px] text-primary-container" data-icon="battery_full">battery_full</span>
<span class="font-label-data text-label-data text-on-surface">98%</span>
</div>
</div>
</div>
<!-- Main Navigation Header -->
<div class="flex items-center justify-between px-gutter h-14">
<div class="flex items-center space-x-2.5">
<button aria-label="Navigate Back" class="w-12 h-12 flex items-center justify-center rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container hover:bg-surface-container active:scale-95 transition-all" type="button">
<span class="material-symbols-outlined text-2xl" data-icon="arrow_back">arrow_back</span>
</button>
<div>
<h1 class="font-headline-sm text-headline-sm font-bold tracking-tight text-on-surface leading-tight">ACCOUNT &amp; SECURITY</h1>
<p class="font-label-data text-label-data text-primary-container flex items-center space-x-1">
<span>SEC-09 // AUTH &amp; VAULT</span>
</p>
</div>
</div>
<div class="flex items-center space-x-1">
<span class="w-2.5 h-2.5 rounded-full bg-primary-container/20 border border-primary-container flex items-center justify-center">
<span class="w-1 h-1 rounded-full bg-primary-container"></span>
</span>
<span class="font-label-data text-label-data text-on-surface-variant">ARMED</span>
</div>
</div>
</header>
<!-- MAIN SCROLLABLE CONTENT CANVAS -->
<main class="max-w-md mx-auto pt-24 px-gutter space-y-5">
<!-- RIDER QUICK IDENTIFIER HERO TILE -->
<div class="tactical-border rounded-xl bg-[#0D131F] p-space-md relative overflow-hidden">
<!-- Glow ambient background light -->
<div class="absolute -top-10 -right-10 w-32 h-32 bg-primary-container/10 rounded-full blur-2xl pointer-events-none"></div>
<div class="flex items-center space-x-4">
<!-- Helmet Profile Avatar -->
<div class="relative shrink-0">
<img alt="Rider Marcus Helmet Telemetry HUD profile avatar" class="w-16 h-16 rounded-xl object-cover border border-primary-container/50 shadow-md" src="https://lh3.googleusercontent.com/aida/AEtjO1WVxZBfZMbTdHeRSt73fWRy6gjWk3_qTm8SSSfoWQnQsHYP2ngztRX-GwRDxracXqrxt42j0x_3rYX-Deu1wGtF7R_qj3ZMExn0d6mErdfGFPGmEtddnnmd0i_Ez6Mv8kj3AYzks1N9Gq4hr9VObylWxDqngSG4Yi5vS-Sj7j3tfyZc_6dknnGpnnb5vC4PQmhuUp58_MzZvopIwkRWq0S27smUu_5zRLguTCXTKrFUEw9TiLBSRA4aXu4"/>
<span class="absolute -bottom-1 -right-1 bg-surface-container-lowest border border-primary-container rounded-full p-0.5">
<span class="material-symbols-outlined text-[14px] text-primary-container block" data-icon="verified" style="font-variation-settings: 'FILL' 1;">verified</span>
</span>
</div>
<div class="min-w-0 flex-1">
<div class="flex items-center space-x-2">
<span class="font-headline-sm text-headline-sm font-bold text-on-surface truncate">@ApexMarcus</span>
<span class="bg-primary-container/15 border border-primary-container text-primary-container font-label-data text-label-data px-1.5 py-0.5 rounded tracking-wider font-bold">PRO</span>
</div>
<p class="font-label-data text-label-data text-on-surface-variant mt-0.5 truncate">CRYPTO-SIGN // 0x9AF8..C104</p>
<div class="flex items-center gap-2 mt-1.5">
<span class="inline-flex items-center text-label-caption font-label-caption text-primary-fixed bg-surface-container-high px-2 py-0.5 rounded">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container mr-1.5"></span>
IMU Linked
</span>
<span class="text-label-caption font-label-caption text-on-surface-variant">KTM 890 R</span>
</div>
</div>
</div>
</div>
<!-- SECTION 1: IDENTITY & AUTHENTICATION -->
<section class="space-y-3">
<div class="flex items-center justify-between px-1">
<div class="flex items-center space-x-2">
<span class="material-symbols-outlined text-primary-container text-lg" data-icon="fingerprint">fingerprint</span>
<h2 class="font-headline-sm text-headline-sm font-bold text-on-surface text-base tracking-wide">Identity &amp; Authentication</h2>
</div>
<span class="font-label-data text-label-data text-on-surface-variant">SEC-LEVEL 4</span>
</div>
<div class="tactical-border rounded-xl bg-[#0D131F] p-4 space-y-4">
<!-- Callsign Handle (Immutable) -->
<div>
<label class="block font-label-data text-label-data text-on-surface-variant uppercase mb-1.5">Rider Callsign (Telemetry Signature)</label>
<div class="flex items-center justify-between h-12 px-3 rounded-lg bg-surface-container-lowest border border-surface-variant/60 text-on-surface">
<span class="font-label-data text-label-data text-on-surface font-bold tracking-wider">@ApexMarcus</span>
<div class="flex items-center space-x-1 text-on-surface-variant">
<span class="material-symbols-outlined text-base" data-icon="lock" style="font-variation-settings: 'FILL' 1;">lock</span>
<span class="font-label-caption text-label-caption">LOCKED</span>
</div>
</div>
<p class="font-label-caption text-label-caption text-on-surface-variant mt-1">Cryptographically tied to your hardware telemetry blackbox.</p>
</div>
<!-- Email Field -->
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="font-label-data text-label-data text-on-surface-variant uppercase">Cockpit Dispatch Email</label>
<span class="inline-flex items-center text-primary-container font-label-data text-label-data text-[10px] bg-primary-container/10 border border-primary-container/40 px-1.5 py-0.2 rounded font-bold">
<span class="material-symbols-outlined text-[12px] mr-1" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
VERIFIED
</span>
</div>
<div class="flex flex-col sm:flex-row gap-2">
<div class="flex-1 flex items-center h-12 px-3 rounded-lg bg-surface-container-lowest border border-outline-variant text-on-surface">
<span class="material-symbols-outlined text-on-surface-variant text-lg mr-2" data-icon="alternate_email">alternate_email</span>
<input aria-label="Dispatch Email Address" class="bg-transparent border-0 p-0 text-sm font-body-md text-on-surface focus:ring-0 w-full" readonly="" type="text" value="marcus.apex@motorsignal.io"/>
</div>
<button class="h-12 px-4 rounded-lg bg-surface-container text-primary-fixed border border-outline-variant hover:border-primary-container active:scale-95 transition-all font-label-data text-label-data flex items-center justify-center shrink-0" type="button">
CHANGE EMAIL
</button>
</div>
</div>
<!-- Tactical Separator -->
<div class="border-t border-surface-variant/50 pt-2"></div>
<!-- Change Password Module -->
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="font-headline-sm text-sm font-bold text-on-surface uppercase tracking-wider">Change Password</span>
<span class="font-label-data text-label-data text-primary-container">HASH: ARGON2ID</span>
</div>
<!-- Current Password -->
<div>
<label class="block font-label-data text-label-data text-on-surface-variant uppercase mb-1">Current Password</label>
<div class="relative flex items-center">
<input aria-label="Current Password" class="w-full h-12 pl-3 pr-12 rounded-lg bg-surface-container-lowest border border-outline-variant text-on-surface text-sm font-label-data focus:border-primary-container focus:ring-1 focus:ring-primary-container tracking-widest" type="password" value="SuperSecretPassword123"/>
<button aria-label="Toggle Password Visibility" class="absolute right-0 top-0 h-12 w-12 flex items-center justify-center text-on-surface-variant hover:text-primary-container" type="button">
<span class="material-symbols-outlined text-xl" data-icon="visibility">visibility</span>
</button>
</div>
</div>
<!-- New Password & Strength Meter -->
<div>
<label class="block font-label-data text-label-data text-on-surface-variant uppercase mb-1">New Password</label>
<div class="relative flex items-center">
<input aria-label="New Password" class="w-full h-12 pl-3 pr-12 rounded-lg bg-surface-container-lowest border border-primary-container/60 text-on-surface text-sm font-label-data focus:border-primary-container focus:ring-1 focus:ring-primary-container tracking-widest" type="password" value="Nurburgring#2024$TelemetryApex!"/>
<button aria-label="Toggle New Password Visibility" class="absolute right-0 top-0 h-12 w-12 flex items-center justify-center text-primary-container" type="button">
<span class="material-symbols-outlined text-xl" data-icon="visibility_off">visibility_off</span>
</button>
</div>
<!-- 4-Segment Tactical Strength Meter -->
<div class="mt-2.5 space-y-1.5">
<div class="flex justify-between items-center text-label-data font-label-data">
<span class="text-on-surface-variant">ENTROPY RATING:</span>
<span class="text-primary-container font-bold flex items-center">
<span class="w-1.5 h-1.5 rounded-full bg-primary-container mr-1.5 shadow-[0_0_8px_#00e5ff]"></span>
TELEMETRY-GRADE (128-BIT)
</span>
</div>
<div class="grid grid-cols-4 gap-1.5 h-2">
<!-- Bar 1: Weak -->
<div class="h-full rounded-sm bg-primary-container shadow-[0_0_6px_#00e5ff]"></div>
<!-- Bar 2: Moderate -->
<div class="h-full rounded-sm bg-primary-container shadow-[0_0_6px_#00e5ff]"></div>
<!-- Bar 3: Strong -->
<div class="h-full rounded-sm bg-primary-container shadow-[0_0_6px_#00e5ff]"></div>
<!-- Bar 4: Telemetry-Grade Active -->
<div class="h-full rounded-sm bg-primary-container shadow-[0_0_10px_#00e5ff]"></div>
</div>
<p class="font-label-caption text-label-caption text-on-surface-variant">Entropy verified against NIST SP 800-63B standards.</p>
</div>
</div>
<!-- Re-enter Password -->
<div>
<label class="block font-label-data text-label-data text-on-surface-variant uppercase mb-1">Confirm New Password</label>
<input aria-label="Confirm New Password" class="w-full h-12 px-3 rounded-lg bg-surface-container-lowest border border-outline-variant text-on-surface text-sm font-label-data focus:border-primary-container focus:ring-1 focus:ring-primary-container tracking-widest" type="password" value="Nurburgring#2024$TelemetryApex!"/>
</div>
<!-- Update Credentials Button (Glove friendly 48px+) -->
<button class="w-full h-[52px] rounded-lg bg-primary-container text-surface-container-lowest font-label-data text-label-data font-bold tracking-wider hover:bg-primary-fixed-dim glow-cyan active:scale-[0.98] transition-all flex items-center justify-center space-x-2" type="button">
<span class="material-symbols-outlined text-lg font-bold" data-icon="key">key</span>
<span>UPDATE CREDENTIALS</span>
</button>
</div>
<!-- Tactical Separator -->
<div class="border-t border-surface-variant/50 pt-2"></div>
<!-- 2FA / MFA Section -->
<div class="space-y-3">
<div class="flex items-start justify-between">
<div class="pr-2">
<div class="flex items-center space-x-2">
<span class="font-headline-sm text-sm font-bold text-on-surface uppercase">Two-Factor Authentication</span>
<span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
</div>
<p class="font-body-md text-xs text-on-surface-variant mt-0.5">TOTP Active (YubiKey 5 NFC / Google Authenticator)</p>
</div>
<!-- Glove-sized physical toggle -->
<label class="relative inline-flex items-center cursor-pointer shrink-0">
<input aria-label="Two Factor Authentication Active" checked="" class="glove-toggle" type="checkbox"/>
</label>
</div>
<div class="flex items-center justify-between p-3 rounded-lg bg-surface-container-lowest border border-outline-variant/80">
<div class="flex items-center space-x-2.5">
<span class="material-symbols-outlined text-primary-container text-xl" data-icon="vpn_key" style="font-variation-settings: 'FILL' 1;">vpn_key</span>
<div>
<p class="font-label-data text-label-data text-on-surface">HARDWARE KEY SYNC</p>
<p class="font-label-caption text-label-caption text-on-surface-variant">Slot 1: YubiKey 5C NFC Primary</p>
</div>
</div>
<span class="font-label-data text-label-data text-primary-fixed bg-surface-container-high px-2 py-1 rounded">PAIR 2ND</span>
</div>
<button class="w-full h-12 rounded-lg bg-surface-container-low border border-outline-variant text-on-surface hover:text-primary-container hover:border-primary-container font-label-data text-label-data tracking-wider transition-all flex items-center justify-center space-x-2 active:scale-98" type="button">
<span class="material-symbols-outlined text-lg" data-icon="history_edu">history_edu</span>
<span>CONFIGURE BACKUP CODES</span>
</button>
</div>
</div>
</section>
<!-- SECTION 2: CLOUD TELEMETRY & SYNC -->
<section class="space-y-3">
<div class="flex items-center justify-between px-1">
<div class="flex items-center space-x-2">
<span class="material-symbols-outlined text-primary-container text-lg" data-icon="cloud_sync">cloud_sync</span>
<h2 class="font-headline-sm text-headline-sm font-bold text-on-surface text-base tracking-wide">Cloud Telemetry &amp; Sync</h2>
</div>
<span class="font-label-data text-label-data text-primary-fixed">R2 MESH // SYNCED</span>
</div>
<div class="tactical-border rounded-xl bg-[#0D131F] p-4 space-y-4">
<!-- Cloudflare R2 Master Toggle -->
<div class="flex items-center justify-between pb-3 border-b border-surface-variant/40">
<div class="pr-2">
<div class="flex items-center space-x-2">
<span class="font-headline-sm text-sm font-bold text-on-surface">Cloudflare R2 Telemetry Bucket</span>
<span class="bg-primary-container/20 text-primary-container text-[10px] font-label-data px-1.5 py-0.5 rounded font-bold">R2 HIGH-SPEED</span>
</div>
<p class="font-body-md text-xs text-on-surface-variant mt-0.5">Encrypted object storage for SQLite Drift Schema 7</p>
</div>
<input aria-label="Enable Cloudflare R2 Bucket Sync" checked="" class="glove-toggle shrink-0" type="checkbox"/>
</div>
<!-- Automatic Ride Upload -->
<div class="flex items-center justify-between pb-3 border-b border-surface-variant/40">
<div class="pr-2">
<span class="font-headline-sm text-sm font-bold text-on-surface">Automatic Ride Upload</span>
<p class="font-body-md text-xs text-on-surface-variant mt-0.5">Auto-stream 20Hz IMU vectors &amp; apex coordinates upon KSU completion</p>
</div>
<input aria-label="Automatic Ride Upload" checked="" class="glove-toggle shrink-0" type="checkbox"/>
</div>
<!-- Cellular Data Sync Cap -->
<div class="flex items-center justify-between pb-2">
<div class="pr-2">
<span class="font-headline-sm text-sm font-bold text-on-surface">Wi-Fi Only for 20Hz Raw Logs</span>
<p class="font-body-md text-xs text-on-surface-variant mt-0.5">Prevents high roaming usage on mountain passes and remote canyon routes</p>
</div>
<input aria-label="Wi-Fi Only for Raw Logs" checked="" class="glove-toggle shrink-0" type="checkbox"/>
</div>
<!-- Cloud Storage Usage Bar -->
<div class="bg-surface-container-lowest p-3.5 rounded-lg border border-outline-variant space-y-3">
<div class="flex justify-between items-baseline">
<div>
<span class="font-label-data text-label-data text-on-surface uppercase">R2 VAULT ALLOCATION</span>
<p class="font-telemetry-metric-md text-lg text-on-surface font-bold">1.4 GB <span class="text-xs text-on-surface-variant font-normal">/ 10.0 GB</span></p>
</div>
<span class="font-label-data text-label-data text-primary-container font-bold px-2 py-0.5 bg-primary-container/10 border border-primary-container/30 rounded">14% USED</span>
</div>
<!-- Multi-tier progress meter bar -->
<div class="w-full h-3 rounded-full bg-surface-container-high overflow-hidden flex">
<!-- 1.1 GB Raw IMU (78% of used space) -->
<div class="bg-primary-container h-full" style="width: 11%;"></div>
<!-- 240 MB GPS & Map (17% of used space) -->
<div class="bg-secondary-container h-full" style="width: 2.4%;"></div>
<!-- 60 MB Replays (4% of used space) -->
<div class="bg-tertiary-fixed-dim h-full" style="width: 0.6%;"></div>
</div>
<!-- Breakdown Legend -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 pt-1 text-xs">
<div class="flex items-center space-x-1.5">
<span class="w-2.5 h-2.5 rounded-sm bg-primary-container shrink-0"></span>
<span class="font-label-caption text-on-surface-variant truncate">1.1 GB Raw 20Hz IMU</span>
</div>
<div class="flex items-center space-x-1.5">
<span class="w-2.5 h-2.5 rounded-sm bg-secondary-container shrink-0"></span>
<span class="font-label-caption text-on-surface-variant truncate">240 MB GPS &amp; Traces</span>
</div>
<div class="flex items-center space-x-1.5">
<span class="w-2.5 h-2.5 rounded-sm bg-tertiary-fixed-dim shrink-0"></span>
<span class="font-label-caption text-on-surface-variant truncate">60 MB Replays</span>
</div>
</div>
<!-- Glove-friendly Cache Purge Button (48px) -->
<button class="w-full h-12 mt-2 rounded-lg bg-surface-container hover:bg-surface-container-high text-primary-container border border-outline-variant hover:border-primary-container font-label-data text-label-data font-bold tracking-wider transition-all flex items-center justify-center space-x-2 active:scale-95" type="button">
<span class="material-symbols-outlined text-lg" data-icon="cleaning_services">cleaning_services</span>
<span>OPTIMIZE &amp; PURGE LOCAL CACHE</span>
</button>
</div>
</div>
</section>
<!-- SECTION 3: DANGER ZONE & DATA SOVEREIGNTY -->
<section class="space-y-3">
<div class="flex items-center justify-between px-1">
<div class="flex items-center space-x-2">
<span class="material-symbols-outlined text-error text-lg" data-icon="warning" style="font-variation-settings: 'FILL' 1;">warning</span>
<h2 class="font-headline-sm text-headline-sm font-bold text-error text-base tracking-wide">Danger Zone &amp; Sovereignty</h2>
</div>
<span class="font-label-data text-label-data text-error font-bold tracking-wider">RESTRICTED</span>
</div>
<div class="tactical-danger-border rounded-xl bg-[#0D131F] p-4 space-y-4">
<!-- Export Telemetry Action -->
<div class="space-y-2">
<div class="flex items-start justify-between">
<div>
<p class="font-headline-sm text-sm font-bold text-on-surface">Export All Telemetry Data</p>
<p class="font-body-md text-xs text-on-surface-variant mt-0.5">Download entire multi-year riding vault (JSON, GPX, CSV). Compliant with GDPR Art. 20 &amp; CCPA.</p>
</div>
</div>
<button class="w-full h-12 rounded-lg bg-surface-container-lowest border border-outline text-on-surface hover:text-primary-container hover:border-primary-container font-label-data text-label-data font-bold tracking-wider flex items-center justify-center space-x-2 active:scale-95 transition-all" type="button">
<span class="material-symbols-outlined text-lg text-primary-container" data-icon="download">download</span>
<span>EXPORT ARCHIVE (.TAR.GZ)</span>
</button>
</div>
<div class="border-t border-surface-variant/40 pt-2"></div>
<!-- Sign Out Button -->
<div>
<button class="w-full h-12 rounded-lg bg-surface-container-low border border-outline-variant text-on-surface hover:text-error hover:border-error font-label-data text-label-data font-bold tracking-wider flex items-center justify-center space-x-2 active:scale-95 transition-all" type="button">
<span class="material-symbols-outlined text-lg text-on-surface-variant" data-icon="logout">logout</span>
<span>SIGN OUT OF THIS COCKPIT UNIT</span>
</button>
</div>
<!-- Delete Account & Purge Vault Button -->
<div class="pt-1">
<button class="w-full h-[52px] rounded-lg bg-error-container/20 border border-error/60 text-error hover:bg-error-container/40 font-label-data text-label-data font-bold tracking-wider flex items-center justify-center space-x-2 active:scale-95 transition-all shadow-[0_0_12px_rgba(239,68,68,0.2)]" type="button">
<span class="material-symbols-outlined text-xl" data-icon="delete_forever" style="font-variation-settings: 'FILL' 1;">delete_forever</span>
<span>DELETE ACCOUNT &amp; PURGE VAULT</span>
</button>
<div class="flex items-center justify-center space-x-1.5 mt-2">
<span class="material-symbols-outlined text-[13px] text-error" data-icon="info">info</span>
<span class="font-label-caption text-label-caption text-error">Irreversible. Erases cryptographic signature and leaderboards.</span>
</div>
</div>
</div>
</section>
<!-- Telemetry System Diagnostics Footer -->
<div class="text-center pt-2 pb-6 space-y-1">
<p class="font-label-data text-label-data text-on-surface-variant text-[11px]">MOTORSIGNAL CORE OS v4.18.9-PRO // BUILD 8831</p>
<p class="font-label-caption text-label-caption text-outline">HARDWARE ID: BCM-2837-AF9 // KERNEL 6.1-RT-TELEMETRY</p>
</div>
</main>
<!-- SHARED BOTTOM NAVIGATION BAR -->
<!-- Mapped from Shared Components JSON: BottomNavBar with Settings active -->
<nav aria-label="Cockpit Navigation" class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-space-xs py-space-xs bg-surface-container-lowest dark:bg-surface-container-lowest border-t border-outline-variant dark:border-outline-variant">
<!-- Item 1: Dash (Inactive) -->
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out transition-all" href="#dash">
<span class="material-symbols-outlined text-2xl" data-icon="speed">speed</span>
<span class="text-label-caption font-label-caption">Dash</span>
</a>
<!-- Item 2: Map (Inactive) -->
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out transition-all" href="#map">
<span class="material-symbols-outlined text-2xl" data-icon="navigation">navigation</span>
<span class="text-label-caption font-label-caption">Map</span>
</a>
<!-- Item 3: Activity (Inactive) -->
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out transition-all" href="#activity">
<span class="material-symbols-outlined text-2xl" data-icon="analytics">analytics</span>
<span class="text-label-caption font-label-caption">Activity</span>
</a>
<!-- Item 4: Garage (Inactive) -->
<a class="flex flex-col items-center justify-center text-on-surface-variant dark:text-on-surface-variant px-2 py-1 min-h-[48px] hover:bg-surface-container-low dark:hover:bg-surface-container-low hover:text-primary-fixed dark:hover:text-primary-fixed active:scale-95 duration-100 ease-out transition-all" href="#garage">
<span class="material-symbols-outlined text-2xl" data-icon="two_wheeler">two_wheeler</span>
<span class="text-label-caption font-label-caption">Garage</span>
</a>
<!-- Item 5: Settings (ACTIVE - mapped exactly to style_active_navigation) -->
<a class="flex flex-col items-center justify-center bg-surface-container-high dark:bg-surface-container-high text-primary-container dark:text-primary-container rounded-lg px-2 py-1 min-h-[48px] active:scale-95 duration-100 ease-out shadow-[0_0_12px_rgba(0,229,255,0.2)]" href="#settings">
<span class="material-symbols-outlined text-2xl" data-icon="settings" style="font-variation-settings: 'FILL' 1;">settings</span>
<span class="text-label-caption font-label-caption font-bold">Settings</span>
</a>
</nav>
<!-- Lightweight Inline Tactical Micro-Interactions -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// Audio or haptic tactical feedback mock for glove clicks
const tacticalButtons = document.querySelectorAll('button, .glove-toggle');
tacticalButtons.forEach(btn => {
btn.addEventListener('click', () => {
if (window.navigator && window.navigator.vibrate) {
window.navigator.vibrate(30);
}
});
});
});
</script>
</body></html>