Implement production vertical slice foundation

This commit is contained in:
chindit committed 2026-10-02 15:27:48 +02:00
1 parent 9d4a89f355
commit a18e82eb44
104 files changed
+10595 -268

No files matched your search

@@ -0,0 +1,506 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>DIVE_OS - Accessibility</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"tertiary-container": "#ffb9b2",
"outline-variant": "#3c4a47",
"on-secondary-fixed-variant": "#5c4300",
"on-tertiary-fixed-variant": "#92030f",
"error": "#ffb4ab",
"on-tertiary": "#690007",
"inverse-on-surface": "#26313d",
"secondary-container": "#ffbf00",
"tertiary-fixed": "#ffdad6",
"on-primary-container": "#006058",
"on-surface": "#d8e4f2",
"surface-dim": "#09141e",
"on-tertiary-container": "#a7191c",
"on-background": "#d8e4f2",
"error-container": "#93000a",
"tertiary-fixed-dim": "#ffb4ac",
"on-primary": "#003732",
"inverse-primary": "#006a62",
"inverse-surface": "#d8e4f2",
"on-error-container": "#ffdad6",
"primary-container": "#40e0d0",
"secondary-fixed": "#ffdfa0",
"surface-container-highest": "#2b3641",
"secondary-fixed-dim": "#fbbc00",
"surface": "#09141e",
"background": "#09141e",
"surface-container-lowest": "#040f19",
"outline": "#859491",
"on-error": "#690005",
"on-tertiary-fixed": "#410003",
"surface-container": "#15212b",
"on-secondary": "#402d00",
"on-primary-fixed": "#00201d",
"tertiary": "#ffdfdc",
"surface-variant": "#2b3641",
"on-secondary-fixed": "#261a00",
"on-secondary-container": "#6d5000",
"on-primary-fixed-variant": "#005049",
"surface-container-high": "#202b36",
"primary-fixed-dim": "#3adccc",
"on-surface-variant": "#bacac6",
"primary": "#66fdec",
"primary-fixed": "#61f9e9",
"surface-bright": "#2f3a46",
"surface-tint": "#3adccc",
"secondary": "#ffe2ab",
"surface-container-low": "#111d27"
},
borderRadius: {
DEFAULT: "0.25rem",
lg: "0.5rem",
xl: "0.75rem",
full: "9999px"
},
spacing: {
"panel-padding": "16px",
"unit": "4px",
"gutter": "24px",
"margin": "32px"
},
fontFamily: {
"data-lg": ["JetBrains Mono"],
"label-caps": ["Inter"],
"body-sm": ["Inter"],
"headline-lg": ["Inter"],
"headline-md": ["Inter"],
"data-md": ["JetBrains Mono"],
"body-lg": ["Inter"]
},
fontSize: {
"data-lg": ["18px", { lineHeight: "1", fontWeight: "500" }],
"label-caps": ["12px", { lineHeight: "1", letterSpacing: "0.1em", fontWeight: "700" }],
"body-sm": ["14px", { lineHeight: "1.5", fontWeight: "400" }],
"headline-lg": ["32px", { lineHeight: "1.2", letterSpacing: "-0.02em", fontWeight: "700" }],
"headline-md": ["24px", { lineHeight: "1.2", fontWeight: "600" }],
"data-md": ["14px", { lineHeight: "1", fontWeight: "400" }],
"body-lg": ["16px", { lineHeight: "1.6", fontWeight: "400" }]
}
}
}
}
</script>
<style>
/* Industrial Utility Styles */
body {
background-color: #05101a; /* Deep Petrol Base Overridden */
background-image:
linear-gradient(rgba(43, 54, 65, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(43, 54, 65, 0.3) 1px, transparent 1px);
background-size: 20px 20px;
}
.technical-panel {
box-shadow:
inset 1px 1px 0px 0px rgba(255, 255, 255, 0.05),
inset -1px -1px 0px 0px rgba(0, 0, 0, 0.5),
0 4px 6px -1px rgba(0, 0, 0, 0.5);
position: relative;
}
.screw-head {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #2b3641;
border: 1px solid #15212b;
box-shadow: inset 0.5px 0.5px 1px rgba(255,255,255,0.2);
}
.screw-tl { top: 6px; left: 6px; }
.screw-tr { top: 6px; right: 6px; }
.screw-bl { bottom: 6px; left: 6px; }
.screw-br { bottom: 6px; right: 6px; }
.crt-scanline {
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0) 50%,
rgba(0,0,0,0.1) 50%,
rgba(0,0,0,0.1)
);
background-size: 100% 4px;
}
/* Custom Toggle Switch */
.toggle-checkbox:checked {
right: 0;
border-color: theme('colors.primary');
}
.toggle-checkbox:checked + .toggle-label {
background-color: theme('colors.primary-container');
}
.toggle-checkbox:checked + .toggle-label:after {
transform: translateX(100%);
background-color: theme('colors.primary');
}
/* State Indicators */
.status-lamp {
transition: all 0.2s ease;
}
.status-lamp.active {
box-shadow: 0 0 10px 2px currentColor;
}
</style>
</head>
<body class="flex h-screen w-screen overflow-hidden text-on-surface select-none">
<!--
ANCHOR: SideNavBar
JSON Identity Maintained. Active Tab: DISPLAY (matches Accessibility context)
-->
<nav class="flex flex-col h-full border-r-2 border-outline-variant bg-surface-container-high w-64 shrink-0 z-20 shadow-[4px_0_15px_rgba(0,0,0,0.5)]" style="border-right-width: 2px; border-color: theme('colors.outline-variant'); background-color: theme('colors.surface-container-high');">
<!-- Header -->
<div class="p-6 border-b-2 border-outline-variant bg-surface-container-highest">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-secondary" data-icon="directions_boat" style="font-variation-settings: 'FILL' 1;">directions_boat</span>
<h1 class="font-data-md text-data-md text-secondary tracking-widest font-bold">DIVE_OS v2.4</h1>
</div>
<div class="font-label-caps text-label-caps text-on-surface-variant flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-primary animate-pulse"></div>
SUBMERSIBLE STATUS: NOMINAL
</div>
</div>
<!-- Navigation Links -->
<div class="flex-1 overflow-y-auto py-4 flex flex-col gap-1">
<!-- RESUME -->
<a class="flex items-center gap-4 px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest text-on-surface-variant hover:bg-surface-bright transition-all group" href="#">
<span class="material-symbols-outlined group-hover:text-primary transition-colors" data-icon="play_arrow">play_arrow</span>
RESUME
</a>
<!-- CONTROLS -->
<a class="flex items-center gap-4 px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest text-on-surface-variant hover:bg-surface-bright transition-all group" href="#">
<span class="material-symbols-outlined group-hover:text-primary transition-colors" data-icon="keyboard">keyboard</span>
CONTROLS
</a>
<!-- AUDIO -->
<a class="flex items-center gap-4 px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest text-on-surface-variant hover:bg-surface-bright transition-all group" href="#">
<span class="material-symbols-outlined group-hover:text-primary transition-colors" data-icon="volume_up">volume_up</span>
AUDIO
</a>
<!-- DISPLAY (ACTIVE) - Maps to "bg-secondary/10 text-secondary border-l-4 border-secondary px-4 py-3" but adjusted padding for layout match -->
<a class="flex items-center gap-4 pl-5 pr-6 py-3 font-label-caps text-label-caps uppercase tracking-widest bg-secondary/10 text-secondary border-l-4 border-secondary transition-all" href="#">
<span class="material-symbols-outlined" data-icon="monitor" style="font-variation-settings: 'FILL' 1;">monitor</span>
DISPLAY
</a>
<!-- ABORT DIVE -->
<a class="flex items-center gap-4 px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest text-on-surface-variant hover:bg-error/10 hover:text-error transition-all group mt-8" href="#">
<span class="material-symbols-outlined group-hover:text-error transition-colors" data-icon="warning">warning</span>
ABORT DIVE
</a>
</div>
<!-- CTA Button -->
<div class="p-4 border-t-2 border-outline-variant">
<button class="w-full bg-primary/10 text-primary border-2 border-primary hover:bg-primary hover:text-on-primary transition-colors font-label-caps text-label-caps py-3 uppercase tracking-widest">
CONTINUE MISSION
</button>
</div>
<!-- Footer Links -->
<div class="flex flex-col border-t-2 border-outline-variant bg-surface-container-highest pb-2">
<a class="flex items-center gap-4 px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest text-on-surface-variant hover:bg-surface-bright transition-all group" href="#">
<span class="material-symbols-outlined group-hover:text-primary" data-icon="home">home</span>
MAIN MENU
</a>
<a class="flex items-center gap-4 px-6 py-3 font-label-caps text-label-caps uppercase tracking-widest text-on-surface-variant hover:bg-surface-bright transition-all group" href="#">
<span class="material-symbols-outlined group-hover:text-primary" data-icon="power_settings_new">power_settings_new</span>
QUIT
</a>
</div>
</nav>
<!-- Main Content Canvas -->
<main class="flex-1 h-full overflow-y-auto p-margin relative z-10">
<!-- Header -->
<header class="flex justify-between items-end mb-8 border-b-2 border-outline-variant pb-4">
<div>
<div class="font-data-md text-data-md text-primary mb-2 opacity-70">SYS.CFG // ACC.4</div>
<h2 class="font-headline-lg text-headline-lg text-on-surface uppercase tracking-tight">Réglages - Accessibilité V4</h2>
</div>
<div class="font-data-md text-data-md text-on-surface-variant bg-surface-container-high px-4 py-2 border border-outline-variant rounded-sm flex items-center gap-2">
<span class="material-symbols-outlined text-sm" data-icon="info">info</span>
MODIFICATIONS APPLIED IMMEDIATELY
</div>
</header>
<!-- Bento Grid Layout -->
<div class="grid grid-cols-12 gap-gutter max-w-7xl mx-auto pb-12">
<!-- Panel 1: Text Size -->
<div class="col-span-4 bg-surface-container border-2 border-outline-variant p-panel-padding technical-panel rounded-sm">
<div class="screw-head screw-tl"></div><div class="screw-head screw-tr"></div>
<div class="screw-head screw-bl"></div><div class="screw-head screw-br"></div>
<h3 class="font-headline-md text-headline-md text-secondary mb-6 flex items-center gap-2 border-b border-outline-variant/50 pb-2">
<span class="material-symbols-outlined" data-icon="text_fields">text_fields</span>
TAILLE DU TEXTE
</h3>
<div class="flex flex-col gap-3">
<button class="option-btn text-size-btn flex items-center justify-between p-4 border-2 border-outline-variant bg-surface-container-low hover:border-primary/50 transition-colors w-full text-left" data-size="normal">
<span class="font-label-caps text-label-caps uppercase tracking-widest">Normal</span>
<span class="font-body-sm text-body-sm">A</span>
</button>
<button class="option-btn text-size-btn flex items-center justify-between p-4 border-2 border-primary bg-primary/10 text-primary w-full text-left" data-size="grand">
<span class="font-label-caps text-label-caps uppercase tracking-widest">Grand</span>
<span class="font-headline-md text-headline-md leading-none">A</span>
</button>
<button class="option-btn text-size-btn flex items-center justify-between p-4 border-2 border-outline-variant bg-surface-container-low hover:border-primary/50 transition-colors w-full text-left" data-size="tres-grand">
<span class="font-label-caps text-label-caps uppercase tracking-widest">Très grand</span>
<span class="font-headline-lg text-headline-lg leading-none">A</span>
</button>
</div>
</div>
<!-- Panel 2: Motion & Effects -->
<div class="col-span-4 bg-surface-container border-2 border-outline-variant p-panel-padding technical-panel rounded-sm flex flex-col">
<div class="screw-head screw-tl"></div><div class="screw-head screw-tr"></div>
<div class="screw-head screw-bl"></div><div class="screw-head screw-br"></div>
<h3 class="font-headline-md text-headline-md text-secondary mb-6 flex items-center gap-2 border-b border-outline-variant/50 pb-2">
<span class="material-symbols-outlined" data-icon="waves">waves</span>
CINÉTIQUE &amp; EFFETS
</h3>
<div class="flex flex-col gap-6 flex-1 justify-center">
<!-- Toggle 1 -->
<div class="flex items-center justify-between">
<div>
<div class="font-label-caps text-label-caps uppercase tracking-widest text-on-surface mb-1">Réduction Mouvements</div>
<div class="font-data-md text-[10px] text-on-surface-variant opacity-70">DISABLE UI PARALLAX</div>
</div>
<div class="relative inline-block w-12 align-middle select-none transition duration-200 ease-in">
<input checked="" class="toggle-checkbox absolute block w-6 h-6 rounded-sm bg-surface-bright border-2 border-outline-variant appearance-none cursor-pointer z-10 transition-transform duration-200 checked:translate-x-6 checked:bg-primary" id="toggle-motion" name="toggle" type="checkbox"/>
<label class="toggle-label block overflow-hidden h-6 rounded-sm bg-surface-container-lowest border-2 border-outline-variant cursor-pointer relative" for="toggle-motion"></label>
</div>
</div>
<!-- Toggle 2 -->
<div class="flex items-center justify-between">
<div>
<div class="font-label-caps text-label-caps uppercase tracking-widest text-on-surface mb-1">Désactiver Roulis</div>
<div class="font-data-md text-[10px] text-on-surface-variant opacity-70">STABILIZE CAMERA</div>
</div>
<div class="relative inline-block w-12 align-middle select-none transition duration-200 ease-in">
<input class="toggle-checkbox absolute block w-6 h-6 rounded-sm bg-surface-bright border-2 border-outline-variant appearance-none cursor-pointer z-10 transition-transform duration-200 checked:translate-x-6 checked:bg-primary" id="toggle-roll" name="toggle" type="checkbox"/>
<label class="toggle-label block overflow-hidden h-6 rounded-sm bg-surface-container-lowest border-2 border-outline-variant cursor-pointer relative" for="toggle-roll"></label>
</div>
</div>
<!-- Toggle 3 -->
<div class="flex items-center justify-between">
<div>
<div class="font-label-caps text-label-caps uppercase tracking-widest text-on-surface mb-1">Atténuer Flashs</div>
<div class="font-data-md text-[10px] text-on-surface-variant opacity-70">PREVENT STROBE FX</div>
</div>
<div class="relative inline-block w-12 align-middle select-none transition duration-200 ease-in">
<input checked="" class="toggle-checkbox absolute block w-6 h-6 rounded-sm bg-surface-bright border-2 border-outline-variant appearance-none cursor-pointer z-10 transition-transform duration-200 checked:translate-x-6 checked:bg-primary" id="toggle-flash" name="toggle" type="checkbox"/>
<label class="toggle-label block overflow-hidden h-6 rounded-sm bg-surface-container-lowest border-2 border-outline-variant cursor-pointer relative" for="toggle-flash"></label>
</div>
</div>
</div>
</div>
<!-- Panel 3: Audio & Alerts -->
<div class="col-span-4 bg-surface-container border-2 border-outline-variant p-panel-padding technical-panel rounded-sm">
<div class="screw-head screw-tl"></div><div class="screw-head screw-tr"></div>
<div class="screw-head screw-bl"></div><div class="screw-head screw-br"></div>
<h3 class="font-headline-md text-headline-md text-secondary mb-6 flex items-center gap-2 border-b border-outline-variant/50 pb-2">
<span class="material-symbols-outlined" data-icon="hearing">hearing</span>
ALERTES &amp; AUDIO
</h3>
<div class="bg-surface-container-lowest border border-outline-variant p-4 rounded-sm mb-6 relative overflow-hidden">
<div class="crt-scanline absolute inset-0 opacity-20 pointer-events-none"></div>
<div class="font-data-md text-data-md text-primary mb-2 flex items-center gap-2">
<span class="w-2 h-2 bg-primary rounded-full animate-pulse"></span>
SYSTEM LOG
</div>
<div class="font-body-sm text-body-sm text-on-surface opacity-80 pl-4 border-l-2 border-outline-variant h-12 flex items-center">
&gt; [CRITICAL] HULL PRESSURE EXCEEDS NOMINAL PARAMETERS
</div>
</div>
<div class="flex items-center justify-between bg-surface-container-high p-4 border border-outline-variant">
<div>
<div class="font-label-caps text-label-caps uppercase tracking-widest text-on-surface mb-1">Sous-titrage alarmes</div>
<div class="font-data-md text-[10px] text-on-surface-variant opacity-70">VISUAL ALERT OVERLAYS</div>
</div>
<div class="relative inline-block w-12 align-middle select-none transition duration-200 ease-in">
<input checked="" class="toggle-checkbox absolute block w-6 h-6 rounded-sm bg-surface-bright border-2 border-outline-variant appearance-none cursor-pointer z-10 transition-transform duration-200 checked:translate-x-6 checked:bg-primary" id="toggle-subtitles" name="toggle" type="checkbox"/>
<label class="toggle-label block overflow-hidden h-6 rounded-sm bg-surface-container-lowest border-2 border-outline-variant cursor-pointer relative" for="toggle-subtitles"></label>
</div>
</div>
</div>
<!-- Panel 4: Sonar Configuration (Full Width span) -->
<div class="col-span-12 bg-surface-container border-2 border-outline-variant p-panel-padding technical-panel rounded-sm mt-4">
<div class="screw-head screw-tl"></div><div class="screw-head screw-tr"></div>
<div class="screw-head screw-bl"></div><div class="screw-head screw-br"></div>
<h3 class="font-headline-md text-headline-md text-secondary mb-6 flex items-center gap-2 border-b border-outline-variant/50 pb-2">
<span class="material-symbols-outlined" data-icon="radar">radar</span>
CALIBRATION SONAR
</h3>
<div class="grid grid-cols-12 gap-8">
<!-- Controls Left -->
<div class="col-span-7 flex flex-col gap-8">
<!-- Contrast -->
<div>
<div class="font-label-caps text-label-caps text-on-surface-variant mb-4 uppercase tracking-widest">Contraste Sonar</div>
<div class="flex gap-2">
<button class="flex-1 py-3 border-2 border-outline-variant bg-surface-container-low text-on-surface-variant hover:border-primary/50 font-label-caps text-label-caps transition-colors">FAIBLE</button>
<button class="flex-1 py-3 border-2 border-primary bg-primary/10 text-primary font-label-caps text-label-caps transition-colors">NORMAL</button>
<button class="flex-1 py-3 border-2 border-outline-variant bg-surface-container-low text-on-surface-variant hover:border-primary/50 font-label-caps text-label-caps transition-colors">ÉLEVÉ</button>
</div>
</div>
<!-- Palette (Shape Redundancy Critical) -->
<div>
<div class="font-label-caps text-label-caps text-on-surface-variant mb-4 uppercase tracking-widest flex justify-between items-end">
<span>Palette Sonar</span>
<span class="text-[10px] opacity-70">SHAPE/COLOR REDUNDANCY ACTIVE</span>
</div>
<div class="grid grid-cols-3 gap-3">
<!-- Blue -->
<button class="palette-btn flex items-center gap-3 p-3 border-2 border-outline-variant bg-surface-container-low hover:bg-surface-bright transition-all text-left group" data-color="#3b82f6" data-name="Bleu Profond">
<div class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-surface-container-lowest text-[#3b82f6] group-[.active]:border-[#3b82f6] group-[.active]:bg-[#3b82f6]/20">
<span class="material-symbols-outlined" data-icon="circle">circle</span>
</div>
<span class="font-label-caps text-[10px] uppercase tracking-wider text-on-surface group-[.active]:text-[#3b82f6]">Bleu</span>
</button>
<!-- Cyan (Primary) -->
<button class="palette-btn active flex items-center gap-3 p-3 border-2 border-primary bg-primary/10 transition-all text-left group" data-color="#40e0d0" data-name="Cyan (Défaut)">
<div class="w-8 h-8 flex items-center justify-center border border-primary bg-primary/20 text-primary">
<span class="material-symbols-outlined" data-icon="change_history">change_history</span>
</div>
<span class="font-label-caps text-[10px] uppercase tracking-wider text-primary">Cyan</span>
</button>
<!-- Green -->
<button class="palette-btn flex items-center gap-3 p-3 border-2 border-outline-variant bg-surface-container-low hover:bg-surface-bright transition-all text-left group" data-color="#22c55e" data-name="Vert Bio">
<div class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-surface-container-lowest text-[#22c55e] group-[.active]:border-[#22c55e] group-[.active]:bg-[#22c55e]/20">
<span class="material-symbols-outlined" data-icon="square">square</span>
</div>
<span class="font-label-caps text-[10px] uppercase tracking-wider text-on-surface group-[.active]:text-[#22c55e]">Vert</span>
</button>
<!-- Yellow -->
<button class="palette-btn flex items-center gap-3 p-3 border-2 border-outline-variant bg-surface-container-low hover:bg-surface-bright transition-all text-left group" data-color="#eab308" data-name="Jaune Topo">
<div class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-surface-container-lowest text-[#eab308] group-[.active]:border-[#eab308] group-[.active]:bg-[#eab308]/20">
<span class="material-symbols-outlined" data-icon="pentagon">pentagon</span>
</div>
<span class="font-label-caps text-[10px] uppercase tracking-wider text-on-surface group-[.active]:text-[#eab308]">Jaune</span>
</button>
<!-- Red -->
<button class="palette-btn flex items-center gap-3 p-3 border-2 border-outline-variant bg-surface-container-low hover:bg-surface-bright transition-all text-left group" data-color="#ef4444" data-name="Rouge Thermique">
<div class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-surface-container-lowest text-[#ef4444] group-[.active]:border-[#ef4444] group-[.active]:bg-[#ef4444]/20">
<span class="material-symbols-outlined" data-icon="hexagon">hexagon</span>
</div>
<span class="font-label-caps text-[10px] uppercase tracking-wider text-on-surface group-[.active]:text-[#ef4444]">Rouge</span>
</button>
<!-- Orange -->
<button class="palette-btn flex items-center gap-3 p-3 border-2 border-outline-variant bg-surface-container-low hover:bg-surface-bright transition-all text-left group" data-color="#f97316" data-name="Orange Risque">
<div class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-surface-container-lowest text-[#f97316] group-[.active]:border-[#f97316] group-[.active]:bg-[#f97316]/20">
<span class="material-symbols-outlined" data-icon="star" style="font-variation-settings: 'FILL' 1;">star</span>
</div>
<span class="font-label-caps text-[10px] uppercase tracking-wider text-on-surface group-[.active]:text-[#f97316]">Orange</span>
</button>
</div>
</div>
</div>
<!-- Preview Right -->
<div class="col-span-5 border-2 border-outline-variant bg-surface-container-lowest p-2 relative">
<div class="absolute top-0 left-0 bg-surface-container px-2 py-1 font-data-md text-[10px] text-on-surface-variant z-10 border-b border-r border-outline-variant">APERÇU IMMÉDIAT</div>
<div class="absolute top-0 right-0 px-2 py-1 font-data-md text-[10px] text-primary z-10" id="preview-label">CYAN (DÉFAUT)</div>
<!-- Simulated Sonar Display -->
<div class="w-full aspect-video md:aspect-square bg-[#020810] relative overflow-hidden flex items-center justify-center crt-scanline" id="sonar-preview" style="--sonar-color: #40e0d0; box-shadow: inset 0 0 50px rgba(0,0,0,0.8);">
<!-- Grid rings -->
<div class="absolute w-[90%] h-[90%] rounded-full border border-[var(--sonar-color)] opacity-20"></div>
<div class="absolute w-[60%] h-[60%] rounded-full border border-[var(--sonar-color)] opacity-30"></div>
<div class="absolute w-[30%] h-[30%] rounded-full border border-[var(--sonar-color)] opacity-40"></div>
<!-- Crosshairs -->
<div class="absolute w-full h-px bg-[var(--sonar-color)] opacity-30"></div>
<div class="absolute h-full w-px bg-[var(--sonar-color)] opacity-30"></div>
<!-- Sweep Effect (simulated with static gradient for simplicity in static HTML, would animate in real implementation) -->
<div class="absolute inset-0 bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_270deg,var(--sonar-color)_360deg)] opacity-30 rounded-full" style="transform: rotate(45deg);"></div>
<div class="absolute w-1/2 h-[2px] bg-white top-1/2 left-1/2 origin-left opacity-60 shadow-[0_0_10px_var(--sonar-color)]" style="transform: rotate(45deg);"></div>
<!-- "Blips" with shape redundancy -->
<!-- Primary Blip (Triangle for Cyan default) -->
<div class="absolute top-[30%] left-[65%] text-[var(--sonar-color)] flex flex-col items-center shadow-[0_0_15px_var(--sonar-color)] drop-shadow-[0_0_5px_var(--sonar-color)]" id="sonar-blip">
<span class="material-symbols-outlined text-sm" data-icon="change_history" style="font-variation-settings: 'FILL' 1;">change_history</span>
<span class="font-data-md text-[8px] mt-1">OBJ-01</span>
</div>
<div class="absolute bottom-[20%] left-[25%] text-[var(--sonar-color)] opacity-60 flex flex-col items-center">
<span class="material-symbols-outlined text-xs" data-icon="change_history" id="sonar-blip-2" style="font-variation-settings: 'FILL' 1;">change_history</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
// Simple Interaction Logic for UI Demo
document.addEventListener('DOMContentLoaded', () => {
// Text Size Selection
const textBtns = document.querySelectorAll('.text-size-btn');
textBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Reset all
textBtns.forEach(b => {
b.classList.remove('border-primary', 'bg-primary/10', 'text-primary');
b.classList.add('border-outline-variant', 'bg-surface-container-low', 'text-on-surface');
});
// Set active
btn.classList.add('border-primary', 'bg-primary/10', 'text-primary');
btn.classList.remove('border-outline-variant', 'bg-surface-container-low', 'text-on-surface');
});
});
// Palette Selection Logic
const paletteBtns = document.querySelectorAll('.palette-btn');
const sonarPreview = document.getElementById('sonar-preview');
const previewLabel = document.getElementById('preview-label');
const blip1 = document.getElementById('sonar-blip').querySelector('span');
const blip2 = document.getElementById('sonar-blip-2');
paletteBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Reset styling on all buttons
paletteBtns.forEach(b => {
b.classList.remove('active', 'border-primary', 'bg-primary/10');
b.classList.add('border-outline-variant', 'bg-surface-container-low');
});
// Apply active styling
btn.classList.add('active');
btn.classList.remove('border-outline-variant', 'bg-surface-container-low');
// Hacky way to set border color dynamically for the demo since tailwind classes are utility
// In a real app we'd toggle classes, but we need the specific hex color for the border
const color = btn.dataset.color;
btn.style.borderColor = color;
btn.style.backgroundColor = `${color}20`; // 20% opacity hex
// Reset others inline styles
paletteBtns.forEach(b => {
if (b !== btn) {
b.style.borderColor = '';
b.style.backgroundColor = '';
}
});
// Update Sonar Preview
sonarPreview.style.setProperty('--sonar-color', color);
previewLabel.textContent = btn.dataset.name.toUpperCase();
previewLabel.style.color = color;
// Update Shapes for Redundancy
const iconName = btn.querySelector('.material-symbols-outlined').textContent;
blip1.textContent = iconName;
blip2.textContent = iconName;
});
});
});
</script>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB