Implement production vertical slice foundation
This commit is contained in:
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&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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 & 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 & 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">
|
||||
> [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 |
Reference in new issue
Block a user