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,347 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Réglages - Commandes V4</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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;600;700&amp;family=JetBrains+Mono:wght@400;500&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>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Physical/Tactile styling utilities */
.recessed-panel {
box-shadow: inset 0 3px 6px rgba(0,0,0,0.5), inset 0 1px 2px rgba(0,0,0,0.8);
}
.raised-panel {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.5);
}
.physical-button {
transition: all 0.1s ease-in-out;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
}
.physical-button:active {
transform: translateY(2px);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
/* Custom scrollbar for industrial look */
::-webkit-scrollbar {
width: 12px;
background: #040f19; /* surface-container-lowest */
border-left: 2px solid #3c4a47; /* outline-variant */
}
::-webkit-scrollbar-thumb {
background: #2b3641; /* surface-variant */
border: 2px solid #3c4a47;
}
::-webkit-scrollbar-thumb:hover {
background: #40e0d0; /* primary-container */
}
</style>
</head>
<body class="bg-surface text-on-surface h-screen w-screen overflow-hidden flex font-body-lg selection:bg-primary-container selection:text-on-primary-container">
<!-- Global Layout Shell: SideNav (Left) + Main Content (Right) -->
<!-- SideNavBar Component (Sourced from JSON) -->
<aside class="flex flex-col h-full border-r-2 border-outline-variant bg-surface-container dark:bg-surface-container docked h-screen left-0 w-64 z-20 shrink-0">
<!-- Header -->
<div class="p-6 border-b-2 border-outline-variant bg-surface-container-high flex flex-col gap-2">
<div class="flex items-center gap-3 text-secondary dark:text-secondary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">sailing</span>
<span class="font-technical-sm font-label-caps uppercase tracking-widest">DIVE_OS v2.4</span>
</div>
<div class="text-[10px] uppercase font-data-md text-primary tracking-wider mt-2 border border-primary/30 bg-primary/5 p-1 inline-block text-center">
SUBMERSIBLE STATUS: NOMINAL
</div>
</div>
<!-- Navigation Tabs -->
<nav class="flex-1 overflow-y-auto py-4 flex flex-col gap-1">
<!-- Inactive Tab -->
<a class="flex items-center gap-4 text-on-surface-variant hover:bg-surface-bright px-4 py-3 transition-all" href="#">
<span class="material-symbols-outlined">play_arrow</span>
<span class="font-label-caps uppercase tracking-widest text-label-caps">RESUME</span>
</a>
<!-- Active Tab (Based on JSON matching page intent "Réglages - Commandes V4") -->
<a class="flex items-center gap-4 bg-secondary/10 text-secondary border-l-4 border-secondary px-4 py-3 scale-[0.98] transition-transform" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">keyboard</span>
<span class="font-label-caps uppercase tracking-widest text-label-caps font-bold">CONTROLS</span>
</a>
<!-- Inactive Tabs -->
<a class="flex items-center gap-4 text-on-surface-variant hover:bg-surface-bright px-4 py-3 transition-all" href="#">
<span class="material-symbols-outlined">volume_up</span>
<span class="font-label-caps uppercase tracking-widest text-label-caps">AUDIO</span>
</a>
<a class="flex items-center gap-4 text-on-surface-variant hover:bg-surface-bright px-4 py-3 transition-all" href="#">
<span class="material-symbols-outlined">monitor</span>
<span class="font-label-caps uppercase tracking-widest text-label-caps">DISPLAY</span>
</a>
<a class="flex items-center gap-4 text-on-surface-variant hover:bg-surface-bright px-4 py-3 transition-all mt-8 text-error opacity-80 hover:opacity-100" href="#">
<span class="material-symbols-outlined">warning</span>
<span class="font-label-caps uppercase tracking-widest text-label-caps">ABORT DIVE</span>
</a>
</nav>
<!-- Footer -->
<div class="p-4 border-t-2 border-outline-variant bg-surface-container-high flex flex-col gap-2">
<button class="w-full flex justify-center items-center gap-2 physical-button border-2 border-primary bg-primary/10 text-primary font-label-caps text-label-caps uppercase py-3 hover:bg-primary/20">
<span>CONTINUE MISSION</span>
</button>
<div class="flex mt-2 divide-x-2 divide-outline-variant border-2 border-outline-variant">
<a class="flex-1 flex justify-center py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright transition-colors" href="#" title="MAIN MENU">
<span class="material-symbols-outlined">home</span>
</a>
<a class="flex-1 flex justify-center py-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright transition-colors" href="#" title="QUIT">
<span class="material-symbols-outlined">power_settings_new</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="flex-1 flex flex-col bg-surface relative min-w-0">
<!-- Subtle industrial background pattern -->
<div class="absolute inset-0 pointer-events-none opacity-[0.03]" style="background-image: radial-gradient(#d8e4f2 1px, transparent 1px); background-size: 20px 20px;"></div>
<!-- Page Header -->
<header class="h-24 px-margin border-b-2 border-outline-variant bg-surface-container-low flex items-end pb-6 shrink-0 relative z-10">
<div>
<h1 class="font-headline-lg text-headline-lg text-on-surface uppercase tracking-tight flex items-center gap-4">
<span class="material-symbols-outlined text-[32px] text-primary">settings_applications</span>
COMMANDES SYSTÈME <span class="text-outline-variant">|</span> <span class="text-secondary">V4</span>
</h1>
<p class="font-data-md text-data-md text-on-surface-variant mt-1">CONFIG: MATÉRIEL DE PONT ET MANŒUVRES</p>
</div>
</header>
<!-- Configuration List (Scrollable Area) -->
<div class="flex-1 overflow-y-auto p-margin relative z-10">
<!-- Controls Table/Grid -->
<div class="max-w-5xl mx-auto flex flex-col gap-unit">
<!-- Table Header (Visual only, stenciled look) -->
<div class="grid grid-cols-12 gap-4 px-4 py-2 border-b-2 border-outline-variant/50 text-label-caps font-label-caps text-on-surface-variant mb-2">
<div class="col-span-3">ACTION SYSTÈME</div>
<div class="col-span-2 text-center">ENTRÉE (TOUCHE)</div>
<div class="col-span-3 text-center">MÉTHODE D'ENTRÉE</div>
<div class="col-span-4 text-right">MODIFICATION</div>
</div>
<!-- Row 1: Avancer -->
<div class="grid grid-cols-12 gap-4 items-center bg-surface-container-low border-2 border-outline-variant p-3 hover:bg-surface-container transition-colors group">
<div class="col-span-3 flex items-center gap-3">
<span class="material-symbols-outlined text-outline-variant group-hover:text-primary transition-colors">keyboard_double_arrow_up</span>
<span class="font-body-lg text-body-lg uppercase tracking-wide">Avancer</span>
</div>
<div class="col-span-2 flex justify-center">
<div class="recessed-panel bg-surface-container-lowest border border-outline-variant/50 px-6 py-2 min-w-[80px] text-center">
<span class="font-data-lg text-data-lg text-primary">Z</span>
</div>
</div>
<div class="col-span-3 flex justify-center">
<!-- Custom Segmented Control (Maintenir/Basculer) -->
<div class="flex border-2 border-outline-variant bg-surface-container-lowest p-1 rounded-sm w-full max-w-[200px]">
<button class="flex-1 py-1 font-label-caps text-label-caps bg-primary-container text-on-primary-container raised-panel text-center">MAINTENIR</button>
<button class="flex-1 py-1 font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface text-center transition-colors">BASCULER</button>
</div>
</div>
<div class="col-span-4 flex justify-end">
<button class="physical-button bg-surface-bright border-2 border-outline-variant hover:border-primary text-on-surface px-6 py-2 flex items-center gap-2">
<span class="font-label-caps text-label-caps uppercase">REMAPPER</span>
<span class="material-symbols-outlined text-[16px]">edit</span>
</button>
</div>
</div>
<!-- Row 2: Tirer -->
<div class="grid grid-cols-12 gap-4 items-center bg-surface-container-low border-2 border-outline-variant p-3 hover:bg-surface-container transition-colors group">
<div class="col-span-3 flex items-center gap-3">
<span class="material-symbols-outlined text-outline-variant group-hover:text-primary transition-colors">my_location</span>
<span class="font-body-lg text-body-lg uppercase tracking-wide">Tirer</span>
</div>
<div class="col-span-2 flex justify-center">
<div class="recessed-panel bg-surface-container-lowest border border-outline-variant/50 px-4 py-2 min-w-[80px] text-center">
<span class="font-data-lg text-data-lg text-primary uppercase text-sm">Souris 1</span>
</div>
</div>
<div class="col-span-3 flex justify-center">
<div class="flex border-2 border-outline-variant bg-surface-container-lowest p-1 rounded-sm w-full max-w-[200px]">
<button class="flex-1 py-1 font-label-caps text-label-caps bg-primary-container text-on-primary-container raised-panel text-center">MAINTENIR</button>
<button class="flex-1 py-1 font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface text-center transition-colors">BASCULER</button>
</div>
</div>
<div class="col-span-4 flex justify-end">
<button class="physical-button bg-surface-bright border-2 border-outline-variant hover:border-primary text-on-surface px-6 py-2 flex items-center gap-2">
<span class="font-label-caps text-label-caps uppercase">REMAPPER</span>
<span class="material-symbols-outlined text-[16px]">edit</span>
</button>
</div>
</div>
<!-- Row 3: Sonar (CONFLICT STATE) -->
<div class="grid grid-cols-12 gap-4 items-center bg-error/10 border-2 border-error p-3 group relative overflow-hidden">
<!-- Warning Stripe Pattern Background overlay -->
<div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: repeating-linear-gradient(45deg, #ffb4ab, #ffb4ab 10px, transparent 10px, transparent 20px);"></div>
<div class="col-span-3 flex items-center gap-3 relative z-10">
<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">radar</span>
<span class="font-body-lg text-body-lg uppercase tracking-wide text-error">Sonar</span>
</div>
<div class="col-span-2 flex justify-center relative z-10">
<div class="recessed-panel bg-error-container border-2 border-error px-6 py-2 min-w-[80px] text-center shadow-[0_0_10px_rgba(147,0,10,0.5)]">
<span class="font-data-lg text-data-lg text-on-error-container animate-pulse">E</span>
</div>
</div>
<div class="col-span-3 flex justify-center relative z-10">
<div class="flex border-2 border-error/50 bg-surface-container-lowest p-1 rounded-sm w-full max-w-[200px]">
<button class="flex-1 py-1 font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface text-center transition-colors">MAINTENIR</button>
<button class="flex-1 py-1 font-label-caps text-label-caps bg-surface-variant text-on-surface raised-panel text-center">BASCULER</button>
</div>
</div>
<div class="col-span-4 flex justify-end items-center gap-4 relative z-10">
<div class="text-right">
<span class="block font-label-caps text-label-caps text-error">CONFLIT D'ENTRÉE</span>
<span class="block font-data-md text-[10px] text-error/80 uppercase">Assigné à: INTERAGIR</span>
</div>
<button class="physical-button bg-error text-on-error border-2 border-error hover:bg-error/80 px-6 py-2 flex items-center gap-2">
<span class="font-label-caps text-label-caps uppercase">RÉSOUDRE</span>
<span class="material-symbols-outlined text-[16px]">warning</span>
</button>
</div>
</div>
<!-- Row 4: Plongée -->
<div class="grid grid-cols-12 gap-4 items-center bg-surface-container-low border-2 border-outline-variant p-3 hover:bg-surface-container transition-colors group">
<div class="col-span-3 flex items-center gap-3">
<span class="material-symbols-outlined text-outline-variant group-hover:text-primary transition-colors">keyboard_double_arrow_down</span>
<span class="font-body-lg text-body-lg uppercase tracking-wide">Plongée</span>
</div>
<div class="col-span-2 flex justify-center">
<div class="recessed-panel bg-surface-container-lowest border border-outline-variant/50 px-4 py-2 min-w-[80px] text-center">
<span class="font-data-lg text-data-lg text-primary uppercase text-sm">L-CTRL</span>
</div>
</div>
<div class="col-span-3 flex justify-center">
<div class="flex border-2 border-outline-variant bg-surface-container-lowest p-1 rounded-sm w-full max-w-[200px]">
<button class="flex-1 py-1 font-label-caps text-label-caps bg-primary-container text-on-primary-container raised-panel text-center">MAINTENIR</button>
<button class="flex-1 py-1 font-label-caps text-label-caps text-on-surface-variant hover:text-on-surface text-center transition-colors">BASCULER</button>
</div>
</div>
<div class="col-span-4 flex justify-end">
<button class="physical-button bg-surface-bright border-2 border-outline-variant hover:border-primary text-on-surface px-6 py-2 flex items-center gap-2">
<span class="font-label-caps text-label-caps uppercase">REMAPPER</span>
<span class="material-symbols-outlined text-[16px]">edit</span>
</button>
</div>
</div>
</div>
</div>
<!-- Permanent Navigation Bar (Bottom) -->
<footer class="h-24 px-margin border-t-2 border-outline-variant bg-surface-container-high flex justify-between items-center shrink-0 z-20 relative">
<!-- Left Action -->
<button class="physical-button flex items-center gap-2 text-on-surface-variant hover:text-on-surface bg-surface-container border-2 border-outline-variant px-6 py-3">
<span class="material-symbols-outlined">arrow_back</span>
<span class="font-label-caps text-label-caps uppercase tracking-widest">RETOUR</span>
</button>
<!-- Right Actions Group -->
<div class="flex items-center gap-4">
<button class="physical-button flex items-center gap-2 text-on-surface-variant hover:text-on-surface bg-surface-container border-2 border-outline-variant px-6 py-3">
<span class="material-symbols-outlined text-[18px]">restore</span>
<span class="font-label-caps text-label-caps uppercase tracking-widest">RÉTABLIR PAR DÉFAUT</span>
</button>
<div class="h-8 w-px bg-outline-variant mx-2"></div> <!-- Separator -->
<button class="physical-button flex items-center gap-2 text-on-surface bg-surface-bright border-2 border-outline-variant hover:border-error hover:text-error px-6 py-3 transition-colors">
<span class="font-label-caps text-label-caps uppercase tracking-widest">ANNULER</span>
</button>
<!-- Primary Call to Action -->
<button class="physical-button flex items-center gap-2 bg-primary/10 text-primary border-2 border-primary px-8 py-3 hover:bg-primary/20 shadow-[0_0_15px_rgba(102,253,236,0.1)]">
<span class="material-symbols-outlined text-[18px]">save</span>
<span class="font-label-caps text-label-caps uppercase tracking-widest font-bold">APPLIQUER</span>
</button>
</div>
</footer>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB