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,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&family=JetBrains+Mono:wght@400;500&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>
|
||||
.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 |
Reference in new issue
Block a user