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

+44
View File
@@ -0,0 +1,44 @@
# Propositions de design UI
Ce dossier conserve les explorations visuelles des menus et réglages. La
spécification autoritaire se trouve dans
[`docs/UI_DESIGN_SYSTEM.md`](../docs/UI_DESIGN_SYSTEM.md).
## Statut des fichiers
### V4 — références conservées
| Proposition | Usage dans le design system |
|---|---|
| `menu_principal_v4_1080p_ransom_s_wake/` | référence visuelle principale |
| `menu_pause_v4_1080p_ransom_s_wake/` | ambiance de pause, à corriger selon la baseline |
| `confirmation_abandon_v4_1080p_ransom_s_wake/` | texte et traitement du danger |
| `r_glages_commandes_v4_1080p_ransom_s_wake/` | remappage et conflit, contenu à corriger |
| `r_glages_accessibilit_v4_1080p_ransom_s_wake/` | groupement des options, sonar à remplacer |
| `r_glages_audio_v4_1080p_ransom_s_wake/` | référence de densité et de curseurs |
| `r_glages_affichage_v4_1080p_ransom_s_wake/` | composants d'affichage, coque à remplacer |
| `variantes_confirmations_v4_1080p_ransom_s_wake/` | variantes de composition et de texte |
| `planche_composants_v4_1080p_ransom_s_wake/` | états et redondance visuelle |
| `sp_cifications_design_v4_ransom_s_wake.md` | note d'intention ayant mené à la baseline |
Les exports PNG actuels font 1600 × 1280 ou 1600 × 1310 malgré leur nom. Ils
sont donc des moodboards, pas une preuve de compatibilité 1080p ou 720p.
### V3 — historique conservé
- `ransom_s_wake_v3/DESIGN.md` ;
- `variantes_confirmations_v3_ransom_s_wake/`.
Ces fichiers documentent une étape de recherche. Ils ne doivent pas guider une
implémentation lorsque la V4 ou la baseline tranche différemment.
## Règles de reprise
- Ne pas copier les HTML dans `game/`.
- Ne pas ajouter Tailwind, Google Fonts, Material Symbols ou une image distante
parce qu'un prototype les référence.
- Ne pas reprendre les données fictives, le jargon système, le combat, la
gestion de flotte ou le radar circulaire.
- Recréer les composants derrière les contrats de présentation et de réglages
définis pour la production.
- Vérifier les écrans réels à 1920 × 1080 et 1280 × 720.
@@ -0,0 +1,250 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>DIVE_OS - Abort Sequence</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"/>
<style>
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.hazard-stripes {
background-image: repeating-linear-gradient(
-45deg,
#93000a,
#93000a 20px,
#09141e 20px,
#09141e 40px
);
}
.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;
}
@keyframes emergency-pulse {
0% { box-shadow: inset 0 0 0px rgba(167, 25, 28, 0); }
50% { box-shadow: inset 0 0 150px rgba(167, 25, 28, 0.15); }
100% { box-shadow: inset 0 0 0px rgba(167, 25, 28, 0); }
}
.bg-emergency {
animation: emergency-pulse 4s infinite;
}
</style>
<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"
},
fontFamily: {
"data-lg": ["JetBrains Mono", "monospace"],
"label-caps": ["Inter", "sans-serif"],
"body-sm": ["Inter", "sans-serif"],
"headline-lg": ["Inter", "sans-serif"],
"headline-md": ["Inter", "sans-serif"],
"data-md": ["JetBrains Mono", "monospace"],
"body-lg": ["Inter", "sans-serif"]
},
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>
</head>
<body class="bg-background text-on-surface h-screen w-screen overflow-hidden flex font-body-lg crt-scanline">
<!-- SideNavBar (Semantic Shell - Active Tab: ABORT DIVE) -->
<aside class="flex flex-col h-full border-r-2 border-outline-variant bg-surface-container dark:bg-surface-container w-64 flex-shrink-0 z-20">
<!-- Header -->
<div class="p-6 border-b-2 border-outline-variant bg-surface-container-high">
<h1 class="font-headline-md text-headline-md text-secondary tracking-tighter">DIVE_OS v2.4</h1>
<p class="font-label-caps text-label-caps text-on-surface-variant mt-2 mb-6">SUBMERSIBLE STATUS: NOMINAL</p>
<div class="w-full aspect-square border-2 border-outline-variant bg-surface-dim flex items-center justify-center relative overflow-hidden" data-alt="Technical schematic wireframe of a deep sea submersible vehicle, monochrome cyan on dark blue, tactical UI style, highly detailed grid lines.">
<!-- Fallback icon if image fails to load in this environment, though instructions say don't use data-alt without placeholder, wait, I will use a simple CSS shape or icon here to represent the avatar to avoid unnecessary image loading as per prompt context preferring UI patterns -->
<span class="material-symbols-outlined text-outline-variant" style="font-size: 64px;">sailing</span>
<div class="absolute inset-0 border border-primary/20 m-2"></div>
</div>
</div>
<!-- Navigation -->
<nav class="flex-1 overflow-y-auto py-4">
<ul class="space-y-1">
<li>
<a class="flex items-center space-x-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 text-label-caps">RESUME</span>
</a>
</li>
<li>
<a class="flex items-center space-x-4 text-on-surface-variant hover:bg-surface-bright px-4 py-3 transition-all" href="#">
<span class="material-symbols-outlined">keyboard</span>
<span class="font-label-caps text-label-caps">CONTROLS</span>
</a>
</li>
<li>
<a class="flex items-center space-x-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 text-label-caps">AUDIO</span>
</a>
</li>
<li>
<a class="flex items-center space-x-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 text-label-caps">DISPLAY</span>
</a>
</li>
<!-- ACTIVE TAB -->
<li>
<a class="flex items-center space-x-4 bg-secondary/10 text-secondary border-l-4 border-secondary px-4 py-3 scale-95 transition-transform" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">warning</span>
<span class="font-label-caps text-label-caps text-secondary">ABORT DIVE</span>
</a>
</li>
</ul>
</nav>
<!-- Footer Actions -->
<div class="border-t-2 border-outline-variant p-4 space-y-2 bg-surface-container-high">
<button class="w-full flex items-center justify-start space-x-4 text-on-surface-variant hover:bg-surface-bright px-4 py-3 transition-all">
<span class="material-symbols-outlined">home</span>
<span class="font-label-caps text-label-caps">MAIN MENU</span>
</button>
<button class="w-full flex items-center justify-start space-x-4 text-on-surface-variant hover:bg-surface-bright px-4 py-3 transition-all">
<span class="material-symbols-outlined">power_settings_new</span>
<span class="font-label-caps text-label-caps">QUIT</span>
</button>
<button class="w-full mt-4 bg-primary text-on-primary py-3 font-label-caps text-label-caps border-2 border-primary hover:bg-transparent hover:text-primary transition-colors">
CONTINUE MISSION
</button>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 relative bg-emergency flex items-center justify-center p-8 z-10">
<!-- Background Grid decoration -->
<div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: linear-gradient(#3c4a47 1px, transparent 1px), linear-gradient(90deg, #3c4a47 1px, transparent 1px); background-size: 40px 40px;"></div>
<!-- Confirmation Modal Panel -->
<div class="relative w-full max-w-3xl bg-surface-container-high border-2 border-error shadow-[0_0_60px_rgba(167,25,28,0.2)] flex flex-col">
<!-- Top Hazard Stripe -->
<div class="h-3 w-full hazard-stripes border-b-2 border-error"></div>
<div class="p-10 flex flex-col items-center text-center space-y-8">
<!-- Warning Icon -->
<div class="w-24 h-24 rounded-full border-4 border-error flex items-center justify-center bg-error-container/20 text-error shadow-[0_0_30px_rgba(255,180,171,0.3)]">
<span class="material-symbols-outlined" style="font-size: 48px; font-variation-settings: 'FILL' 1;">warning</span>
</div>
<!-- Titles and Text -->
<div class="space-y-4 max-w-xl">
<h2 class="font-headline-lg text-headline-lg text-error uppercase tracking-wider">
Abandonner la plongée ?
</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">
Vous serez éjecté puis évacué. Le sous-marin et sa cargaison non sécurisée resteront au fond. Une franchise sera appliquée.
</p>
</div>
<!-- Actions -->
<div class="w-full grid grid-cols-2 gap-6 pt-6 mt-4 border-t border-outline-variant">
<!-- Destructive Action -->
<button class="group flex flex-col items-center justify-center py-6 border-2 border-outline-variant bg-surface-container hover:border-error hover:bg-error-container/30 transition-all focus:outline-none">
<span class="material-symbols-outlined text-error mb-2 group-hover:scale-110 transition-transform">eject</span>
<span class="font-label-caps text-label-caps text-error">S'éjecter et abandonner</span>
</button>
<!-- Primary Action (Focus Initial) -->
<button autofocus="" class="relative flex flex-col items-center justify-center py-6 border-2 border-primary bg-primary text-on-primary hover:bg-primary-fixed-dim transition-all focus:outline-none focus:ring-4 focus:ring-primary/50 shadow-[0_0_20px_rgba(64,224,208,0.4)]">
<span class="material-symbols-outlined mb-2 text-on-primary">anchor</span>
<span class="font-label-caps text-label-caps">Rester en plongée</span>
<!-- Corner accents -->
<div class="absolute top-1 left-1 w-2 h-2 border-t-2 border-l-2 border-on-primary"></div>
<div class="absolute bottom-1 right-1 w-2 h-2 border-b-2 border-r-2 border-on-primary"></div>
</button>
</div>
</div>
<!-- Bottom Hazard Stripe -->
<div class="h-3 w-full hazard-stripes border-t-2 border-error"></div>
<!-- Screw heads decoration -->
<div class="absolute top-4 left-4 w-2 h-2 rounded-full bg-outline-variant"></div>
<div class="absolute top-4 right-4 w-2 h-2 rounded-full bg-outline-variant"></div>
<div class="absolute bottom-4 left-4 w-2 h-2 rounded-full bg-outline-variant"></div>
<div class="absolute bottom-4 right-4 w-2 h-2 rounded-full bg-outline-variant"></div>
</div>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Pause Menu - RANSOM'S WAKE</title>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;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"/>
<!-- Tailwind CSS & Config -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
/* Custom Scanline Effect */
.scanlines {
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0) 50%,
rgba(0,0,0,0.2) 50%,
rgba(0,0,0,0.2)
);
background-size: 100% 4px;
pointer-events: none;
}
/* CRT Flicker Animation */
@keyframes flicker {
0% { opacity: 0.95; }
5% { opacity: 0.85; }
10% { opacity: 0.95; }
15% { opacity: 1; }
100% { opacity: 1; }
}
.flicker-on-active {
animation: flicker 4s infinite;
}
</style>
</head>
<body class="bg-background text-on-surface h-screen w-screen overflow-hidden selection:bg-primary-container selection:text-on-primary-container">
<!-- Background Layer: Darkened Game Scene -->
<div class="absolute inset-0 z-0 bg-cover bg-center" data-alt="A dark, heavily obscured view of a deep ocean trench seen through a thick, grimy submarine viewport. Faint, eerie bioluminescence glows in the distance. The overall aesthetic is industrial maritime, utilizing deep petrol blues and stark shadows to create a tense, isolated mood." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuChlG0vP-IVOAZVwYfPtxnacrpLNc6Gf88xyfslXMGQPcRjO65Ein76J8Kcx3qc3cfSs37NV5KYfqrwLSGTQeHAS7LCo79actMm5BzHceJ9uZPdjo8SpOvHyziZcl_guwjwSoT_bZup6qFY2jeOjnm3EzwZdmixwj0ZbY3-VEP0zeEjO6GirrsfPqrCXwOYf9-i3fQwHQed6gqPGMDoUtJZTgF-WQIJannb4B2vrX2pg1JSOrR7hg3v')">
<div class="absolute inset-0 bg-surface-container-lowest/85 backdrop-blur-xl"></div>
<div class="absolute inset-0 scanlines opacity-50 z-10"></div>
</div>
<!-- Main Layout Grid -->
<div class="relative z-20 flex w-full h-full">
<!-- Sidebar Navigation (Generated from JSON) -->
<nav class="bg-surface-container dark:bg-surface-container text-secondary dark:text-secondary font-technical-sm text-technical-sm font-label-caps text-label-caps uppercase tracking-widest docked h-screen left-0 w-64 border-r-2 border-outline-variant bg-surface-container-high flex flex-col h-full shrink-0 shadow-[4px_0_24px_rgba(0,0,0,0.5)]">
<!-- Header -->
<div class="p-6 border-b-2 border-outline-variant bg-surface-container-highest/50">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-secondary">terminal</span>
<h1 class="font-technical-sm text-secondary font-label-caps text-label-caps">DIVE_OS v2.4</h1>
</div>
<p class="text-[10px] text-on-surface-variant tracking-[0.2em] font-data-md opacity-70">SUBMERSIBLE STATUS: NOMINAL</p>
</div>
<!-- CTA Area -->
<div class="p-4 pb-2">
<button class="w-full bg-primary-container/10 border-2 border-primary-container text-primary-container hover:bg-primary-container hover:text-on-primary-container transition-colors duration-150 py-3 flex items-center justify-center gap-2 group active:scale-95">
<span class="material-symbols-outlined group-hover:animate-pulse" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
<span class="font-label-caps text-label-caps">CONTINUE MISSION</span>
</button>
</div>
<!-- Main Tabs -->
<ul class="flex-1 overflow-y-auto py-2 flex flex-col gap-1">
<!-- Active Tab: RESUME -->
<li>
<a class="bg-secondary/10 text-secondary border-l-4 border-secondary px-4 py-3 hover:bg-surface-bright transition-all active:scale-95 flex items-center gap-4 flicker-on-active shadow-[inset_4px_0_12px_rgba(255,226,171,0.1)]" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
RESUME
</a>
</li>
<!-- Inactive Tabs -->
<li>
<a class="text-on-surface-variant hover:bg-surface-bright px-4 py-3 hover:bg-surface-bright transition-all active:scale-95 flex items-center gap-4" href="#">
<span class="material-symbols-outlined">keyboard</span>
CONTROLS
</a>
</li>
<li>
<a class="text-on-surface-variant hover:bg-surface-bright px-4 py-3 hover:bg-surface-bright transition-all active:scale-95 flex items-center gap-4" href="#">
<span class="material-symbols-outlined">volume_up</span>
AUDIO
</a>
</li>
<li>
<a class="text-on-surface-variant hover:bg-surface-bright px-4 py-3 hover:bg-surface-bright transition-all active:scale-95 flex items-center gap-4" href="#">
<span class="material-symbols-outlined">monitor</span>
DISPLAY
</a>
</li>
<li>
<a class="text-on-surface-variant hover:bg-surface-bright px-4 py-3 hover:bg-surface-bright transition-all active:scale-95 flex items-center gap-4 group" href="#">
<span class="material-symbols-outlined group-hover:text-error transition-colors">warning</span>
<span class="group-hover:text-error transition-colors">ABORT DIVE</span>
</a>
</li>
</ul>
<!-- Footer Tabs -->
<div class="mt-auto border-t-2 border-outline-variant bg-surface-container-highest/30 flex flex-col">
<a class="text-on-surface-variant hover:bg-surface-bright px-4 py-4 hover:bg-surface-bright transition-all active:scale-95 flex items-center gap-4 border-b border-outline-variant/30" href="#">
<span class="material-symbols-outlined">home</span>
MAIN MENU
</a>
<a class="text-on-surface-variant hover:bg-surface-bright px-4 py-4 hover:bg-surface-bright transition-all active:scale-95 flex items-center gap-4 hover:text-error/80 group" href="#">
<span class="material-symbols-outlined group-hover:text-error/80">power_settings_new</span>
QUIT
</a>
</div>
</nav>
<!-- Main Content Area / Canvas -->
<main class="flex-1 relative flex flex-col items-center justify-center p-12">
<!-- Large Watermark Title -->
<div class="absolute top-8 left-12 opacity-20 pointer-events-none select-none">
<h2 class="font-headline-lg text-[64px] text-secondary font-bold tracking-[0.2em] uppercase">PAUSE</h2>
</div>
<!-- Central Data Card: Abort Dive Warning (Simulated active state content for user request) -->
<div class="w-full max-w-xl bg-surface/80 backdrop-blur-md border-2 border-outline-variant p-1 shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
<!-- Inner Bezel -->
<div class="border border-outline-variant/50 p-8 relative flex flex-col items-center text-center">
<!-- Hardware Screws -->
<div class="absolute top-2 left-2 w-1.5 h-1.5 rounded-full bg-outline-variant shadow-inner"></div>
<div class="absolute top-2 right-2 w-1.5 h-1.5 rounded-full bg-outline-variant shadow-inner"></div>
<div class="absolute bottom-2 left-2 w-1.5 h-1.5 rounded-full bg-outline-variant shadow-inner"></div>
<div class="absolute bottom-2 right-2 w-1.5 h-1.5 rounded-full bg-outline-variant shadow-inner"></div>
<!-- Icon -->
<div class="w-16 h-16 rounded-full bg-error-container/20 flex items-center justify-center mb-6 border border-error/30">
<span class="material-symbols-outlined text-[32px] text-error" style="font-variation-settings: 'FILL' 1;">warning</span>
</div>
<!-- Header -->
<h3 class="font-headline-md text-headline-md text-error mb-6 uppercase tracking-widest border-b-2 border-error/20 pb-4 w-full">Protocole d'Évacuation</h3>
<!-- Message Body -->
<div class="font-data-md text-data-md text-on-surface-variant w-full text-left space-y-4 bg-surface-container-highest/50 p-6 border-l-4 border-error/60">
<p class="text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-[16px]">terminal</span>
&gt; SYSTÈME EN ATTENTE
</p>
<p class="text-error/90 font-bold">Vous serez évacué immédiatement.</p>
<p class="text-on-surface-variant opacity-80 leading-relaxed">
Le sous-marin et toutes les découvertes non sécurisées resteront de manière permanente sur le site. Cette action est irréversible.
</p>
</div>
<!-- Action simulation (decorative for pause state) -->
<div class="mt-8 w-full flex justify-between items-center opacity-50">
<span class="font-data-md text-[12px] text-on-surface-variant tracking-widest uppercase animate-pulse">En attente d'entrée utilisateur...</span>
<div class="flex gap-2">
<div class="w-2 h-2 bg-error"></div>
<div class="w-2 h-2 bg-outline-variant"></div>
<div class="w-2 h-2 bg-outline-variant"></div>
</div>
</div>
</div>
</div>
</main>
</div>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

@@ -0,0 +1,210 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Menu Principal - Ransom's Wake</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Material Symbols -->
<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"/>
<!-- Tailwind Config -->
<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>
</head>
<body class="w-screen h-screen bg-background text-on-surface font-body-lg overflow-hidden relative select-none">
<!-- Background Environment -->
<div class="absolute inset-0 z-0">
<div class="w-full h-full bg-cover bg-center" data-alt="A moody, somber underwater scene in deep petrol blues and subtle cyan gradients. In the dark, murky distance, the imposing silhouette of a massive, heavily armored industrial prospecting submarine wreck rests silently on the ocean floor. Minimal lighting, relying on soft, diffused volumetric glow to define the immense scale and the oppressive depth. The overall atmosphere is tense, quiet, and deeply atmospheric, evoking a sense of isolated deep-sea exploration." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDDSBN0RaCpzRvXKy0COpjaQF3YPbCK4nwgVSK2SjSlKjHmvG2G3wVdG32vqAM7eM4tjqCabDSiNv8DGbjd_Hj5Wdj4i3RzW4ZR7AmnaOJ8mke4KBWw6M942J9vIrvmE2QMbyfUxMn2ZkzNDT-bsrO2oFAGtjYNAITnTAWYLTCRUfbH73SWquz8RI0IJzh9hHuX9mTXRSZTGOKmXvuzn1r1b_vXbiyez1mPx5NtL4fYKUsqkN5_2tg4')"></div>
<!-- Depth Overlay (No scanlines, just atmospheric darkening) -->
<div class="absolute inset-0 bg-background/70 backdrop-blur-[4px]"></div>
</div>
<!-- Main Content Area (1920x1080 constraint, 32px Safe Zone) -->
<main class="relative z-10 w-full h-full p-margin flex items-center justify-start max-w-[1920px] mx-auto">
<!-- Navigation Panel (Industrial Console Style) -->
<aside class="w-full max-w-[520px] bg-surface-container-high/95 border-2 border-outline-variant flex flex-col shadow-[inset_0_1px_0_rgba(255,255,255,0.05),_inset_0_-1px_0_rgba(0,0,0,0.5)]">
<!-- Branding Header -->
<header class="p-8 border-b-2 border-outline-variant bg-surface-container-highest/50">
<h1 class="font-headline-lg text-headline-lg text-secondary tracking-tighter mb-2">RANSOM'S WAKE</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant opacity-80">OPÉRATIONS SOUS-MARINES</p>
</header>
<!-- Action Menu -->
<nav class="flex flex-col gap-4 p-8">
<!-- Action: Continuer (Disabled State) -->
<button class="group flex flex-col items-start justify-center p-5 bg-surface-variant border-2 border-outline-variant opacity-50 cursor-not-allowed w-full text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.02),_inset_0_-1px_0_rgba(0,0,0,0.3)]">
<div class="flex items-center justify-between w-full mb-1">
<span class="font-data-lg text-data-lg text-on-surface-variant uppercase">Continuer</span>
<span class="material-symbols-outlined text-on-surface-variant">lock</span>
</div>
<span class="font-body-lg text-body-lg text-on-surface-variant/70">Aucune sauvegarde</span>
</button>
<!-- Action: Nouvelle partie (Initial Focus State) -->
<button class="group flex flex-col items-start justify-center p-5 bg-primary-container/10 border-2 border-primary w-full text-left focus:outline-none transition-all duration-150 shadow-[inset_0_1px_0_rgba(64,224,208,0.15),_inset_0_-1px_0_rgba(0,0,0,0.4)] relative overflow-hidden">
<!-- Physical indicator of focus -->
<div class="absolute left-0 top-0 bottom-0 w-2 bg-primary"></div>
<div class="flex items-center justify-between w-full pl-2">
<span class="font-data-lg text-data-lg text-primary uppercase font-bold tracking-wide">Nouvelle partie</span>
<span class="material-symbols-outlined text-primary">play_arrow</span>
</div>
</button>
<!-- Action: Réglages -->
<button class="group flex items-center justify-between p-5 bg-surface-variant border-2 border-outline-variant w-full text-left hover:bg-surface-bright hover:border-outline transition-all duration-150 active:translate-y-[2px] shadow-[inset_0_1px_0_rgba(255,255,255,0.05),_inset_0_-1px_0_rgba(0,0,0,0.3)]">
<span class="font-data-lg text-data-lg text-on-surface uppercase tracking-wide">Réglages</span>
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-on-surface transition-colors">settings</span>
</button>
<!-- Action: Quitter (Separated slightly to indicate destructive/exit action) -->
<button class="group flex items-center justify-between p-5 bg-surface-variant border-2 border-outline-variant w-full text-left hover:bg-surface-bright hover:border-error/50 transition-all duration-150 active:translate-y-[2px] mt-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.05),_inset_0_-1px_0_rgba(0,0,0,0.3)]">
<span class="font-data-lg text-data-lg text-error uppercase tracking-wide">Quitter</span>
<span class="material-symbols-outlined text-error opacity-80 group-hover:opacity-100 transition-opacity">power_settings_new</span>
</button>
</nav>
<!-- Bottom decorative spacer to match industrial proportions -->
<div class="h-4 bg-surface-container-highest border-t-2 border-outline-variant w-full"></div>
</aside>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 320 KiB

@@ -0,0 +1,397 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Planche de Composants - RANSOM'S WAKE V4</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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" 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"/>
<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>
body {
background-color: #09141e; /* background */
color: #d8e4f2; /* on-background */
}
.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;
}
.beveled-panel {
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.recessed-input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #3c4a47;
}
.glass-viewport {
backdrop-filter: blur(30px);
background-color: rgba(9, 20, 30, 0.6);
/* simulate noise */
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}
</style>
</head>
<body class="min-h-screen p-margin flex flex-col gap-gutter">
<!-- Header -->
<header class="flex justify-between items-end border-b-2 border-outline-variant pb-4 mb-8">
<div>
<h1 class="font-headline-lg text-headline-lg font-bold text-primary tracking-tighter">RANSOM'S WAKE V4</h1>
<p class="font-label-caps text-label-caps text-on-surface-variant mt-2">COMPONENT STATES &amp; SPECIFICATIONS - 1920x1080</p>
</div>
<div class="font-data-md text-data-md text-on-surface-variant text-right">
<div>SYSTEM: ONLINE</div>
<div>RENDER: STATIC_PREVIEW</div>
</div>
</header>
<main class="grid grid-cols-12 gap-gutter h-full">
<!-- Column 1: Buttons & Interactive -->
<section class="col-span-4 flex flex-col gap-gutter">
<!-- Button States -->
<div class="bg-surface-container beveled-panel p-panel-padding border-2 border-outline-variant flex flex-col gap-6">
<h2 class="font-label-caps text-label-caps text-on-surface border-b border-outline-variant pb-2">PRIMARY ACTIONS</h2>
<div class="grid grid-cols-2 gap-4">
<!-- Normal -->
<div class="flex flex-col gap-2">
<span class="font-data-md text-data-md text-on-surface-variant text-xs">NORMAL</span>
<button class="bg-primary-container text-on-primary-container font-label-caps text-label-caps py-3 px-4 flex items-center justify-center gap-2 border-2 border-transparent transition-all hover:bg-surface-container-highest hover:text-primary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">power_settings_new</span>
ENGAGE
</button>
</div>
<!-- Hover -->
<div class="flex flex-col gap-2">
<span class="font-data-md text-data-md text-on-surface-variant text-xs">HOVER</span>
<button class="bg-surface-container-highest text-primary font-label-caps text-label-caps py-3 px-4 flex items-center justify-center gap-2 border-2 border-transparent">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">power_settings_new</span>
ENGAGE
</button>
</div>
<!-- Active/Selected -->
<div class="flex flex-col gap-2">
<span class="font-data-md text-data-md text-on-surface-variant text-xs">ACTIVE / SELECTED</span>
<button class="bg-surface-container text-primary font-label-caps text-label-caps py-3 px-4 flex items-center justify-center gap-2 border-2 border-primary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">power_settings_new</span>
ENGAGE
</button>
</div>
<!-- Pressed -->
<div class="flex flex-col gap-2">
<span class="font-data-md text-data-md text-on-surface-variant text-xs">PRESSED</span>
<button class="bg-primary-container text-on-primary-container font-label-caps text-label-caps py-3 px-4 flex items-center justify-center gap-2 border-2 border-primary translate-y-0.5">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">power_settings_new</span>
ENGAGE
</button>
</div>
<!-- Disabled -->
<div class="flex flex-col gap-2">
<span class="font-data-md text-data-md text-on-surface-variant text-xs opacity-50">DISABLED</span>
<button class="bg-surface-container-lowest text-outline-variant font-label-caps text-label-caps py-3 px-4 flex items-center justify-center gap-2 border-2 border-transparent cursor-not-allowed opacity-50" disabled="">
<span class="material-symbols-outlined">power_settings_new</span>
ENGAGE
</button>
</div>
<!-- Error/Dangerous -->
<div class="flex flex-col gap-2">
<span class="font-data-md text-data-md text-error text-xs">DANGEROUS</span>
<button class="bg-error-container text-on-error-container font-label-caps text-label-caps py-3 px-4 flex items-center justify-center gap-2 border-2 border-error">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">warning</span>
PURGE
</button>
</div>
</div>
</div>
<!-- Inputs & Focus States -->
<div class="bg-surface-container beveled-panel p-panel-padding border-2 border-outline-variant flex flex-col gap-6">
<h2 class="font-label-caps text-label-caps text-on-surface border-b border-outline-variant pb-2">DATA INPUTS</h2>
<div class="flex flex-col gap-4">
<!-- Normal Input -->
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-on-surface-variant text-xs">COORD-X (NORMAL)</label>
<div class="relative">
<input class="w-full bg-surface-container-lowest text-primary font-data-md text-data-md py-2 px-3 recessed-input scanline focus:outline-none" readonly="" type="text" value="34.5692"/>
</div>
</div>
<!-- Focused Input -->
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-primary text-xs">COORD-Y (FOCUS)</label>
<div class="relative">
<input class="w-full bg-surface-container-lowest text-primary font-data-md text-data-md py-2 px-3 recessed-input scanline border border-primary focus:outline-none" readonly="" type="text" value="118.991"/>
<span class="absolute right-3 top-2.5 w-2 h-4 bg-primary animate-pulse"></span>
</div>
</div>
<!-- Modified Input -->
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-secondary-container text-xs">COORD-Z (MODIFIED)</label>
<div class="relative flex items-center">
<div class="w-1 h-full bg-secondary-container absolute left-0"></div>
<input class="w-full bg-surface-container-lowest text-secondary-container font-data-md text-data-md py-2 pl-4 pr-3 recessed-input scanline focus:outline-none border border-transparent" readonly="" type="text" value="-045.22"/>
</div>
</div>
<!-- Error Input -->
<div class="flex flex-col gap-1">
<label class="font-label-caps text-label-caps text-error text-xs">VELOCITY (ERROR)</label>
<div class="relative">
<input class="w-full bg-surface-container-lowest text-error font-data-md text-data-md py-2 px-3 recessed-input scanline border border-error focus:outline-none" readonly="" type="text" value="ERR_OOB"/>
<span class="material-symbols-outlined absolute right-2 top-2 text-error text-sm">error</span>
</div>
</div>
</div>
</div>
</section>
<!-- Column 2: System Status & Save States -->
<section class="col-span-4 flex flex-col gap-gutter">
<div class="bg-surface-container beveled-panel p-panel-padding border-2 border-outline-variant flex flex-col gap-6 flex-grow">
<h2 class="font-label-caps text-label-caps text-on-surface border-b border-outline-variant pb-2">TRANSACTION STATES</h2>
<div class="flex flex-col gap-6">
<!-- Saving... -->
<div class="flex items-center gap-4 bg-surface-container-highest p-3 border-l-4 border-primary">
<span class="material-symbols-outlined animate-spin text-primary">sync</span>
<div class="flex flex-col">
<span class="font-label-caps text-label-caps text-primary">SAUVEGARDE EN COURS...</span>
<span class="font-data-md text-data-md text-on-surface-variant text-xs">WRITING TO VOLATILE MEMORY</span>
</div>
</div>
<!-- Saved -->
<div class="flex items-center gap-4 bg-surface-container-highest p-3 border-l-4 border-[#006058] bg-[#006058]/10">
<span class="material-symbols-outlined text-primary-container" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<div class="flex flex-col">
<span class="font-label-caps text-label-caps text-primary-container">SAUVEGARDE TERMINÉE</span>
<span class="font-data-md text-data-md text-on-surface-variant text-xs">CHECKSUM VERIFIED</span>
</div>
</div>
<!-- Loading... -->
<div class="flex items-center gap-4 bg-surface-container-highest p-3 border-l-4 border-outline-variant">
<div class="w-6 h-6 border-2 border-outline-variant border-t-primary rounded-full animate-spin"></div>
<div class="flex flex-col">
<span class="font-label-caps text-label-caps text-on-surface">CHARGEMENT...</span>
<span class="font-data-md text-data-md text-on-surface-variant text-xs">READING SECTORS</span>
</div>
</div>
<!-- Neutral -->
<div class="flex items-center gap-4 bg-surface-container-lowest p-3 border border-outline-variant border-dashed">
<span class="material-symbols-outlined text-on-surface-variant">description</span>
<div class="flex flex-col">
<span class="font-label-caps text-label-caps text-on-surface-variant">AUCUNE SAUVEGARDE</span>
<span class="font-data-md text-data-md text-on-surface-variant text-xs">SYSTEM IDLE</span>
</div>
</div>
<!-- Warning -->
<div class="flex items-center gap-4 bg-[#6d5000]/20 p-3 border-l-4 border-secondary-container">
<span class="material-symbols-outlined text-secondary-container" style="font-variation-settings: 'FILL' 1;">warning</span>
<div class="flex flex-col">
<span class="font-label-caps text-label-caps text-secondary-container">SAUVEGARDE INVALIDE</span>
<span class="font-data-md text-data-md text-on-surface-variant text-xs">CORRUPTION DETECTED</span>
</div>
</div>
<!-- Error -->
<div class="flex items-center gap-4 bg-error-container/20 p-3 border-l-4 border-error">
<span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">gpp_bad</span>
<div class="flex flex-col">
<span class="font-label-caps text-label-caps text-error">VERSION INCOMPATIBLE</span>
<span class="font-data-md text-data-md text-error/70 text-xs">SCHEMA MISMATCH V3 != V4</span>
</div>
</div>
</div>
</div>
</section>
<!-- Column 3: Data Display & Navigation Logic -->
<section class="col-span-4 flex flex-col gap-gutter">
<div class="bg-surface-container glass-viewport p-panel-padding border-2 border-outline-variant relative overflow-hidden flex-grow">
<h2 class="font-label-caps text-label-caps text-on-surface border-b border-outline-variant pb-2 relative z-10">NAVIGATION &amp; METRICS</h2>
<div class="mt-6 flex flex-col gap-6 relative z-10">
<!-- Nameplate -->
<div class="bg-surface-container-highest p-2 border border-outline-variant flex justify-between items-center relative">
<!-- Screw heads -->
<div class="absolute top-1 left-1 w-1.5 h-1.5 bg-outline-variant rounded-full"></div>
<div class="absolute top-1 right-1 w-1.5 h-1.5 bg-outline-variant rounded-full"></div>
<div class="absolute bottom-1 left-1 w-1.5 h-1.5 bg-outline-variant rounded-full"></div>
<div class="absolute bottom-1 right-1 w-1.5 h-1.5 bg-outline-variant rounded-full"></div>
<span class="font-label-caps text-label-caps text-on-surface ml-4">OPERATOR 04</span>
<div class="flex items-center gap-2 mr-4">
<span class="w-2 h-2 bg-primary animate-pulse"></span>
<span class="font-data-md text-data-md text-primary text-xs">ONLINE</span>
</div>
</div>
<!-- Data Card -->
<div class="border-2 border-outline-variant p-4 flex flex-col gap-2">
<span class="font-headline-md text-headline-md text-on-surface">REACTOR CORE</span>
<div class="flex justify-between items-end border-t border-outline-variant border-dashed pt-2">
<span class="font-label-caps text-label-caps text-on-surface-variant">TEMP</span>
<span class="font-data-lg text-data-lg text-secondary-container">842.1°K</span>
</div>
<div class="flex justify-between items-end border-t border-outline-variant border-dashed pt-2">
<span class="font-label-caps text-label-caps text-on-surface-variant">PRESSURE</span>
<span class="font-data-lg text-data-lg text-primary">120.4 PSI</span>
</div>
</div>
<!-- Mock Nav Tabs (from JSON logic) -->
<div class="flex flex-col gap-2 mt-4">
<span class="font-data-md text-data-md text-on-surface-variant text-xs mb-1">SIDENAV LOGIC PREVIEW</span>
<div class="flex items-center gap-3 bg-primary-container text-on-primary-container border-l-4 border-primary px-4 py-3 font-label-caps text-label-caps">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">terminal</span>
COMMAND (ACTIVE)
</div>
<div class="flex items-center gap-3 text-on-surface-variant px-4 py-3 font-label-caps text-label-caps hover:bg-surface-container-highest hover:text-primary transition-colors cursor-pointer">
<span class="material-symbols-outlined">radar</span>
TACTICAL (INACTIVE)
</div>
</div>
</div>
</div>
</section>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 610 KiB

@@ -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

@@ -0,0 +1,355 @@
<!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 - Affichage V4</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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=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"/>
<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>
body {
background-color: theme('colors.background');
color: theme('colors.on-background');
}
.scanline {
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0) 50%,
rgba(0,0,0,0.2) 50%,
rgba(0,0,0,0.2)
);
background-size: 100% 4px;
}
.beveled-panel {
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.recessed-input {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
/* Custom Checkbox / Toggle */
.cyber-toggle:checked + div {
background-color: theme('colors.primary');
box-shadow: 0 0 10px theme('colors.primary');
}
.cyber-toggle:checked + div:after {
transform: translateX(100%);
background-color: theme('colors.on-primary');
}
/* Select styling */
select {
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23bacac6%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
}
</style>
</head>
<body class="h-screen w-screen overflow-hidden flex flex-col font-body-lg">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-margin h-20 bg-surface border-b-2 border-outline-variant">
<div class="font-headline-lg text-headline-lg font-bold text-primary tracking-tighter">
RANSOM'S WAKE V4
</div>
<nav class="hidden md:flex gap-8">
<a class="text-on-surface-variant font-headline-md text-headline-md hover:text-primary hover:bg-surface-container-highest px-4 py-2 transition-all" href="#">FLEET</a>
<a class="text-on-surface-variant font-headline-md text-headline-md hover:text-primary hover:bg-surface-container-highest px-4 py-2 transition-all" href="#">LOGS</a>
<a class="text-on-surface-variant font-headline-md text-headline-md hover:text-primary hover:bg-surface-container-highest px-4 py-2 transition-all" href="#">NAV-COM</a>
<a class="text-primary border-b-2 border-primary pb-1 font-headline-md text-headline-md hover:text-primary hover:bg-surface-container-highest px-4 py-2 transition-all" href="#">SYSTEMS</a>
</nav>
<div class="flex gap-4">
<button class="text-primary hover:bg-surface-container-highest p-2 rounded transition-colors active:translate-y-0.5">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span>
</button>
<button class="text-on-surface-variant hover:text-primary hover:bg-surface-container-highest p-2 rounded transition-colors active:translate-y-0.5">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">notifications</span>
</button>
</div>
</header>
<!-- SideNavBar -->
<aside class="fixed left-0 top-20 h-[calc(100vh-80px)] w-64 border-r-2 border-outline-variant bg-surface-container flex flex-col pt-panel-padding hidden md:flex z-40">
<div class="px-4 mb-8">
<h2 class="font-headline-md text-headline-md text-on-surface uppercase tracking-wide">OPERATOR 04</h2>
<p class="font-label-caps text-label-caps text-on-surface-variant mt-2 text-primary">Vessel Status: Active</p>
</div>
<nav class="flex-1 flex flex-col gap-2 px-2">
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-3 hover:bg-surface-container-highest hover:text-primary transition-all active:scale-95 font-label-caps text-label-caps uppercase" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">terminal</span>
COMMAND
</a>
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-3 hover:bg-surface-container-highest hover:text-primary transition-all active:scale-95 font-label-caps text-label-caps uppercase" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">radar</span>
TACTICAL
</a>
<a class="flex items-center gap-3 bg-primary-container text-on-primary-container border-l-4 border-primary px-4 py-3 hover:bg-surface-container-highest transition-all active:scale-95 font-label-caps text-label-caps uppercase" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings_input_component</span>
ENGINEERING
</a>
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-3 hover:bg-surface-container-highest hover:text-primary transition-all active:scale-95 font-label-caps text-label-caps uppercase" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">inventory_2</span>
RESOURCES
</a>
<a class="flex items-center gap-3 text-on-surface-variant px-4 py-3 hover:bg-surface-container-highest hover:text-primary transition-all active:scale-95 font-label-caps text-label-caps uppercase" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">history_edu</span>
ARCHIVE
</a>
</nav>
</aside>
<!-- Main Content Canvas -->
<main class="flex-1 mt-20 md:ml-64 p-margin overflow-y-auto bg-background relative scanline z-10">
<!-- Header & Nav -->
<div class="flex justify-between items-end mb-8 pb-4 border-b-2 border-outline-variant">
<div>
<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2 tracking-wide uppercase">ENGINEERING <span class="text-primary-fixed-dim">/</span> AFFICHAGE</h1>
<p class="font-body-sm text-body-sm text-on-surface-variant">Configuration des paramètres de rendu visuel.</p>
</div>
<div class="flex gap-4">
<button class="bg-surface-container border-2 border-outline-variant text-on-surface px-6 py-3 font-label-caps text-label-caps hover:bg-surface-container-highest hover:border-primary transition-colors active:translate-y-0.5 uppercase flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">undo</span>
Rétablir
</button>
<button class="bg-surface-container border-2 border-outline-variant text-on-surface px-6 py-3 font-label-caps text-label-caps hover:bg-surface-container-highest hover:border-primary transition-colors active:translate-y-0.5 uppercase">
Annuler
</button>
<button class="bg-primary-container border-2 border-primary text-on-primary-container px-6 py-3 font-label-caps text-label-caps hover:bg-primary transition-colors active:translate-y-0.5 uppercase flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">save</span>
Appliquer
</button>
</div>
</div>
<!-- Bento Grid Layout -->
<div class="grid grid-cols-12 gap-6 max-w-7xl mx-auto">
<!-- Left Column: Primary Display Settings -->
<div class="col-span-12 lg:col-span-8 flex flex-col gap-6">
<!-- Display Mode Card -->
<div class="bg-surface-container p-6 border-2 border-outline-variant beveled-panel">
<div class="flex items-center gap-3 mb-6 border-b border-outline-variant pb-2">
<span class="material-symbols-outlined text-primary">desktop_windows</span>
<h3 class="font-label-caps text-label-caps text-primary uppercase">Mode d'affichage</h3>
</div>
<div class="grid grid-cols-3 gap-4">
<button class="border-2 border-primary bg-primary/10 p-4 text-center hover:bg-primary/20 transition-colors flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-[32px] text-primary">fullscreen</span>
<span class="font-label-caps text-label-caps text-primary">Plein écran</span>
</button>
<button class="border-2 border-outline-variant bg-surface p-4 text-center hover:border-primary/50 transition-colors flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-[32px] text-on-surface-variant">crop_free</span>
<span class="font-label-caps text-label-caps text-on-surface-variant">Sans bordure</span>
</button>
<button class="border-2 border-outline-variant bg-surface p-4 text-center hover:border-primary/50 transition-colors flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-[32px] text-on-surface-variant">picture_in_picture</span>
<span class="font-label-caps text-label-caps text-on-surface-variant">Fenêtré</span>
</button>
</div>
</div>
<!-- Resolution & VSync -->
<div class="grid grid-cols-2 gap-6">
<!-- Resolution -->
<div class="bg-surface-container p-6 border-2 border-outline-variant beveled-panel">
<div class="flex items-center gap-3 mb-6 border-b border-outline-variant pb-2">
<span class="material-symbols-outlined text-primary">aspect_ratio</span>
<h3 class="font-label-caps text-label-caps text-primary uppercase">Résolution</h3>
</div>
<div class="relative">
<select class="w-full bg-surface border-2 border-outline-variant text-on-surface font-data-md text-data-md p-4 recessed-input focus:border-primary focus:ring-0 cursor-pointer outline-none">
<option>3840 x 2160 (16:9)</option>
<option>2560 x 1440 (16:9)</option>
<option selected="">1920 x 1080 (16:9)</option>
<option>1600 x 900 (16:9)</option>
<option>1280 x 720 (16:9)</option>
</select>
</div>
</div>
<!-- VSync -->
<div class="bg-surface-container p-6 border-2 border-outline-variant beveled-panel flex flex-col justify-between">
<div class="flex items-center justify-between mb-4 border-b border-outline-variant pb-2">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary">sync</span>
<h3 class="font-label-caps text-label-caps text-primary uppercase">Sync Verticale</h3>
</div>
<label class="flex items-center cursor-pointer">
<div class="relative">
<input checked="" class="sr-only cyber-toggle" type="checkbox"/>
<div class="block bg-surface border-2 border-outline-variant w-14 h-8 rounded-full transition-all"></div>
<div class="dot absolute left-1 top-1 bg-on-surface-variant w-6 h-6 rounded-full transition-transform border-2 border-outline-variant"></div>
</div>
</label>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant">Synchronise le framerate avec le taux de rafraîchissement de l'écran pour éviter les déchirements d'image.</p>
</div>
</div>
</div>
<!-- Right Column: Advanced & Monitor Info -->
<div class="col-span-12 lg:col-span-4 flex flex-col gap-6">
<!-- Framerate Limiter -->
<div class="bg-surface-container p-6 border-2 border-outline-variant beveled-panel h-full">
<div class="flex items-center gap-3 mb-6 border-b border-outline-variant pb-2">
<span class="material-symbols-outlined text-primary">speed</span>
<h3 class="font-label-caps text-label-caps text-primary uppercase">Framerate Limit</h3>
</div>
<div class="flex flex-col gap-8 mt-8">
<div class="flex justify-between items-end">
<span class="font-label-caps text-label-caps text-on-surface">Cible FPS</span>
<span class="font-data-lg text-data-lg text-primary">144</span>
</div>
<div class="relative w-full h-4 bg-surface recessed-input border border-outline-variant">
<!-- Slider Track -->
<div class="absolute top-0 left-0 h-full bg-primary/20 w-[60%] border-r-2 border-primary"></div>
<!-- Tick Marks -->
<div class="absolute w-full h-full flex justify-between px-1 items-center pointer-events-none">
<div class="w-1 h-2 bg-outline-variant"></div>
<div class="w-1 h-2 bg-outline-variant"></div>
<div class="w-1 h-2 bg-outline-variant"></div>
<div class="w-1 h-2 bg-outline-variant"></div>
<div class="w-1 h-2 bg-outline-variant"></div>
</div>
<input class="absolute w-full h-full opacity-0 cursor-pointer" max="240" min="30" type="range" value="144"/>
</div>
<div class="flex justify-between text-on-surface-variant font-data-md text-data-md">
<span>30</span>
<span>60</span>
<span>120</span>
<span>144</span>
<span>240</span>
<span>UNLOCKED</span>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- BottomNavBar (Mobile Only) -->
<nav class="md:hidden fixed bottom-0 w-full z-50 flex justify-around items-center px-4 py-2 bg-surface-container-low border-t-2 border-outline-variant">
<a class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-container-high transition-colors active:translate-y-1" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">map</span>
<span class="font-label-caps text-label-caps mt-1">MAP</span>
</a>
<a class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-container-high transition-colors active:translate-y-1" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">satellite_alt</span>
<span class="font-label-caps text-label-caps mt-1">COMMS</span>
</a>
<a class="flex flex-col items-center justify-center text-on-surface-variant p-2 hover:bg-surface-container-high transition-colors active:translate-y-1" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">bolt</span>
<span class="font-label-caps text-label-caps mt-1">POWER</span>
</a>
<a class="flex flex-col items-center justify-center text-primary bg-surface-container-highest rounded-lg p-2 hover:bg-surface-container-high transition-colors active:translate-y-1 border border-primary/30" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">monitor_heart</span>
<span class="font-label-caps text-label-caps mt-1">STATUS</span>
</a>
</nav>
<script>
// Simple script for the slider visual update
const slider = document.querySelector('input[type="range"]');
const track = slider.previousElementSibling.previousElementSibling;
const display = slider.parentElement.previousElementSibling.querySelector('.font-data-lg');
slider.addEventListener('input', (e) => {
const min = e.target.min || 30;
const max = e.target.max || 240;
const val = e.target.value;
const percentage = ((val - min) / (max - min)) * 100;
track.style.width = `${percentage}%`;
display.textContent = val;
});
</script>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

@@ -0,0 +1,340 @@
<!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 - Audio V4</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&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>
/* Custom range slider styling for industrial look */
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 16px;
background: #40e0d0; /* primary-container */
border: 2px solid #003732; /* on-primary */
cursor: pointer;
margin-top: -10px;
border-radius: 2px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #3c4a47; /* outline-variant */
border-radius: 2px;
}
input[type=range]:focus {
outline: none;
}
.industrial-panel {
background-image: linear-gradient(to bottom, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.2) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.5);
}
</style>
</head>
<body class="bg-background text-on-background min-h-screen flex flex-col font-body-lg">
<!-- Suppressed TopAppBar and SideNavBar as per contextual logic (Settings screen) -->
<!-- Main Header -->
<header class="w-full h-20 bg-surface border-b-2 border-outline-variant flex items-center justify-between px-margin shrink-0">
<div class="flex items-center gap-4">
<button aria-label="Retour" class="flex items-center gap-2 text-on-surface hover:text-primary transition-colors active:translate-y-0.5">
<span class="material-symbols-outlined font-headline-md text-headline-md">arrow_back</span>
<span class="font-headline-md text-headline-md tracking-tighter uppercase">Ransom's Wake V4</span>
</button>
<div class="h-8 w-px bg-outline-variant mx-2"></div>
<h1 class="font-headline-lg text-headline-lg text-primary tracking-tighter">RÉGLAGES - AUDIO</h1>
</div>
<div class="flex gap-4">
<!-- Navigation Actions -->
<button class="px-6 py-3 border-2 border-outline-variant bg-surface-container hover:bg-surface-container-highest text-on-surface font-label-caps text-label-caps uppercase active:translate-y-0.5 transition-all">
Rétablir
</button>
<button class="px-6 py-3 border-2 border-outline-variant bg-surface-container hover:bg-surface-container-highest text-on-surface font-label-caps text-label-caps uppercase active:translate-y-0.5 transition-all">
Annuler
</button>
<button class="px-6 py-3 border-2 border-primary bg-primary-container text-on-primary-container font-label-caps text-label-caps uppercase hover:bg-primary-fixed active:translate-y-0.5 transition-all flex items-center gap-2 shadow-[0_0_15px_rgba(64,224,208,0.3)]">
<span class="material-symbols-outlined text-[16px]">check</span>
Appliquer
</button>
</div>
</header>
<!-- Content Canvas -->
<main class="flex-1 overflow-hidden p-margin flex justify-center items-start">
<div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-12 gap-gutter mt-8">
<!-- Audio Settings Container -->
<div class="md:col-span-12 border-2 border-outline-variant bg-surface-container p-8 industrial-panel">
<div class="mb-8 border-b-2 border-outline-variant pb-4 flex justify-between items-end">
<div>
<h2 class="font-headline-md text-headline-md text-primary mb-2">NIVEAUX SONORES</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">Ajustez les volumes des différents canaux du système.</p>
</div>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-outline-variant" style="font-variation-settings: 'FILL' 1;">volume_up</span>
</div>
</div>
<div class="flex flex-col gap-8">
<!-- Principal Volume -->
<div class="grid grid-cols-12 gap-4 items-center bg-surface-container-lowest p-4 border border-outline-variant rounded shadow-inner">
<div class="col-span-3 flex items-center gap-3">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">volume_up</span>
<label class="font-headline-md text-body-lg uppercase tracking-wide text-on-surface" for="vol-principal">Principal</label>
</div>
<div class="col-span-7 flex items-center">
<input class="w-full" id="vol-principal" max="100" min="0" type="range" value="80"/>
</div>
<div class="col-span-2 text-right">
<span class="font-data-lg text-data-lg text-primary bg-surface-dim px-3 py-1 border border-outline-variant inline-block w-16 text-center">80%</span>
</div>
</div>
<!-- Separator -->
<div class="h-px w-full bg-outline-variant opacity-50"></div>
<!-- Sub Volumes Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
<!-- Musique -->
<div class="flex flex-col gap-3">
<div class="flex justify-between items-center">
<label class="font-body-lg text-body-lg text-on-surface-variant flex items-center gap-2" for="vol-musique">
<span class="material-symbols-outlined text-secondary-container text-sm">music_note</span>
Musique
</label>
<span class="font-data-md text-data-md text-on-surface">65%</span>
</div>
<input id="vol-musique" max="100" min="0" type="range" value="65"/>
</div>
<!-- Ambiance -->
<div class="flex flex-col gap-3">
<div class="flex justify-between items-center">
<label class="font-body-lg text-body-lg text-on-surface-variant flex items-center gap-2" for="vol-ambiance">
<span class="material-symbols-outlined text-secondary-container text-sm">water</span>
Ambiance
</label>
<span class="font-data-md text-data-md text-on-surface">90%</span>
</div>
<input id="vol-ambiance" max="100" min="0" type="range" value="90"/>
</div>
<!-- Véhicule -->
<div class="flex flex-col gap-3">
<div class="flex justify-between items-center">
<label class="font-body-lg text-body-lg text-on-surface-variant flex items-center gap-2" for="vol-vehicule">
<span class="material-symbols-outlined text-secondary-container text-sm">directions_boat</span>
Véhicule
</label>
<span class="font-data-md text-data-md text-on-surface">75%</span>
</div>
<input id="vol-vehicule" max="100" min="0" type="range" value="75"/>
</div>
<!-- Interface -->
<div class="flex flex-col gap-3">
<div class="flex justify-between items-center">
<label class="font-body-lg text-body-lg text-on-surface-variant flex items-center gap-2" for="vol-interface">
<span class="material-symbols-outlined text-secondary-container text-sm">touch_app</span>
Interface
</label>
<span class="font-data-md text-data-md text-on-surface">50%</span>
</div>
<input id="vol-interface" max="100" min="0" type="range" value="50"/>
</div>
<!-- Alarmes -->
<div class="flex flex-col gap-3">
<div class="flex justify-between items-center">
<label class="font-body-lg text-body-lg text-error flex items-center gap-2" for="vol-alarmes">
<span class="material-symbols-outlined text-error text-sm">warning</span>
Alarmes
</label>
<span class="font-data-md text-data-md text-error">100%</span>
</div>
<input id="vol-alarmes" max="100" min="0" style="--tw-range-thumb-bg: #ffb4ab;" type="range" value="100"/>
<style>
#vol-alarmes::-webkit-slider-thumb {
background: #ffb4ab;
border-color: #690005;
}
</style>
</div>
</div>
</div>
</div>
<!-- Optional Decorative Panel for industrial feel -->
<div class="md:col-span-12 mt-4 flex justify-between items-center px-4">
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-primary-container shadow-[0_0_8px_rgba(64,224,208,0.8)] animate-pulse"></div>
<div class="w-3 h-3 rounded-full bg-outline-variant"></div>
<div class="w-3 h-3 rounded-full bg-outline-variant"></div>
</div>
<div class="font-data-md text-data-md text-outline-variant tracking-widest">SYS.AUDIO.DIAG.OK</div>
</div>
</div>
</main>
<script>
// Simple script to update data labels when sliders move
document.querySelectorAll('input[type="range"]').forEach(slider => {
slider.addEventListener('input', (e) => {
const val = e.target.value;
const container = e.target.closest('.flex-col, .grid');
if(container) {
const display = container.querySelector('.font-data-md, .font-data-lg');
if(display) display.textContent = val + '%';
}
});
});
</script>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

@@ -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

+139
View File
@@ -0,0 +1,139 @@
---
name: Ransom's Wake V3
colors:
surface: '#09141e'
surface-dim: '#09141e'
surface-bright: '#2f3a46'
surface-container-lowest: '#040f19'
surface-container-low: '#111d27'
surface-container: '#15212b'
surface-container-high: '#202b36'
surface-container-highest: '#2b3641'
on-surface: '#d8e4f2'
on-surface-variant: '#bacac6'
inverse-surface: '#d8e4f2'
inverse-on-surface: '#26313d'
outline: '#859491'
outline-variant: '#3c4a47'
surface-tint: '#3adccc'
primary: '#66fdec'
on-primary: '#003732'
primary-container: '#40e0d0'
on-primary-container: '#006058'
inverse-primary: '#006a62'
secondary: '#ffe2ab'
on-secondary: '#402d00'
secondary-container: '#ffbf00'
on-secondary-container: '#6d5000'
tertiary: '#ffdfdc'
on-tertiary: '#690007'
tertiary-container: '#ffb9b2'
on-tertiary-container: '#a7191c'
error: '#ffb4ab'
on-error: '#690005'
error-container: '#93000a'
on-error-container: '#ffdad6'
primary-fixed: '#61f9e9'
primary-fixed-dim: '#3adccc'
on-primary-fixed: '#00201d'
on-primary-fixed-variant: '#005049'
secondary-fixed: '#ffdfa0'
secondary-fixed-dim: '#fbbc00'
on-secondary-fixed: '#261a00'
on-secondary-fixed-variant: '#5c4300'
tertiary-fixed: '#ffdad6'
tertiary-fixed-dim: '#ffb4ac'
on-tertiary-fixed: '#410003'
on-tertiary-fixed-variant: '#92030f'
background: '#09141e'
on-background: '#d8e4f2'
surface-variant: '#2b3641'
typography:
headline-lg:
fontFamily: Inter
fontSize: 32px
fontWeight: '700'
lineHeight: '1.2'
letterSpacing: -0.02em
headline-md:
fontFamily: Inter
fontSize: 24px
fontWeight: '600'
lineHeight: '1.2'
body-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: '400'
lineHeight: '1.6'
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: '400'
lineHeight: '1.5'
label-caps:
fontFamily: Inter
fontSize: 12px
fontWeight: '700'
lineHeight: '1'
letterSpacing: 0.1em
data-lg:
fontFamily: JetBrains Mono
fontSize: 18px
fontWeight: '500'
lineHeight: '1'
data-md:
fontFamily: JetBrains Mono
fontSize: 14px
fontWeight: '400'
lineHeight: '1'
spacing:
unit: 4px
gutter: 24px
margin: 32px
panel-padding: 16px
---
## Brand & Style
The design system for this product is rooted in **Industrial Maritime** aesthetics, specifically the utilitarian and heavy-duty nature of mid-century naval equipment. The UI evokes a sense of "historical inquiry" and "slow tension," prioritizing functional credibility over modern digital sleekness.
The design style is a hybrid of **Tactile/Skeuomorphic** and **Minimalist Brutalism**. Interfaces should feel like physical control consoles—machined, painted, and worn by environment. Every element must appear to have a physical weight and a specific purpose, avoiding any unnecessary "sci-fi" decorative clutter. Surfaces mimic heavy gauge steel, while interactions feel deliberate and mechanical.
## Colors
The palette is dominated by the **Deep Petrol Blue (#05101a)** base, representing the oppressive depth of the ocean and painted steel hulls.
- **Primary (Desaturated Cyan):** Reserved for active states, selection markers, and focused elements. It should feel like a functional backlight or a steady signal.
- **Secondary (Amber):** Used for safety notices, warnings, and secondary call-outs. It mimics filament-bulb indicators.
- **Tertiary (Muted Red):** Strictly for critical failures, danger, and irreversible actions.
- **Neutrals:** Range from deep navy to weathered greys, used for structural borders and panel segregation.
## Typography
Typography is split between the institutional **Inter** for narrative and labels, and **JetBrains Mono** for technical readouts and numerical data.
To support full French localization, line heights are generous to accommodate frequent diacritics (é, à, ç). Labels should often use uppercase with increased tracking to mimic stamped metal nameplates. Headlines are heavy and condensed, appearing as if stenciled onto surfaces.
## Layout & Spacing
The layout follows a **Fixed Grid** philosophy, organizing content into rigid "Technical Panels." This mimics the modular construction of a submarine bulkhead.
- **Grid:** 12-column system for desktop, collapsing to 4-column for mobile.
- **Margins:** Heavy outer margins (32px+) to create a sense of being "contained" within a vessel.
- **Panel Logic:** Use thick 2px borders to define separate functional areas. Content should not float; it must be housed within a defined container.
## Elevation & Depth
Depth is conveyed through **Tonal Layering** and physical metaphors rather than soft shadows.
- **Base Level:** Deep Petrol (#05101a).
- **Raised Panels:** Slightly lighter blue-grey with a "beveled" edge look achieved via a 1px top-light highlight and a 1px bottom-dark shadow.
- **Glass Elements:** Use high-blur backdrop filters (30px+) with a subtle "condensation" noise texture to simulate thick gauge viewports.
- **Recessed Areas:** Use inner shadows to simulate meters or inputs set deep into the dashboard.
## Shapes
The shape language is strictly **Sharp (0px)** or exceptionally low-radius (2px) to emphasize the industrial, machined nature of the equipment.
Avoid circles where possible; use octagons or chamfered corners for "round" elements like gauges or circular buttons. This reinforces the "angular shapes" requirement and maintains the mechanical aesthetic.
## Components
- **Buttons:** Large, blocky, and high-contrast. The "Active" state must be indicated by a 2px solid border in Primary Cyan (#40e0d0), never just a glow. Include a "pressed" state that shifts the element down 2px.
- **Nameplates:** Use the `label-caps` style on a slightly lighter grey background with visible "screw head" icons in the corners.
- **Input Fields:** Recessed rectangles with a mono-font cursor. Use a subtle "scanline" overlay to simulate a low-refresh rate CRT monitor.
- **Selection Markers:** Use a vertical or horizontal "physical" bar next to the selected item in the Primary color.
- **Status Indicators:** Small square "lamps" that toggle between off (dark) and Secondary Amber or Tertiary Red.
- **Data Cards:** Heavy borders, clear headers using the stenciled headline style, and mono-space values for legibility.
@@ -0,0 +1,22 @@
# Ransom's Wake - Direction Visuelle V4
## Vision
L'interface V4 incarne un équipement maritime industriel moderne, robuste et entretenu. Elle s'éloigne du jargon technique fictif pour privilégier une clarté opérationnelle absolue, renforçant l'immersion dans un environnement sous-marin isolé.
## Palette & Identité
- **Fond :** Bleu pétrole sombre (Surface-dim/lowest).
- **Focus :** Cyan vibrant (Bordure structurelle + icône).
- **Alerte :** Ambre (Sécurité et modifications).
- **Danger :** Rouge (Actions irréversibles).
- **Typographie :** Inter (Sans-serif industrielle) pour la lisibilité, Roboto Mono pour les données numériques.
## Accessibilité
- **Texte :** Minimum 16px pour le corps, 14px pour les labels secondaires.
- **Navigation :** 100% Clavier avec indicateurs de focus par forme (crochets ou bordures doubles).
- **Redondance :** Formes, icônes et couleurs combinées pour chaque état critique.
- **Interaction :** Zones tactiles/clic minimum 44x44px.
## Hypothèses Produit à Confirmer
1. **Sortie en plongée :** Le retour au menu principal ou la fermeture du jeu pendant une mission déclenche les mêmes conséquences qu'un abandon (perte de cargaison non sécurisée) pour préserver l'enjeu du gameplay.
2. **Sauvegarde Manuelle :** Aucune sauvegarde manuelle en mission n'est prévue pour cette verticale, favorisant la tension des ressources.
3. **Traduction :** Les layouts prévoient une expansion de texte de 30% pour la localisation anglaise/allemande sans chevauchement.
@@ -0,0 +1,244 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Confirmation Variants - Ransom's Wake</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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": {
"on-secondary": "#402d00",
"surface-container-low": "#111d27",
"on-surface-variant": "#bacac6",
"outline-variant": "#3c4a47",
"on-tertiary-container": "#a7191c",
"on-primary-fixed": "#00201d",
"on-error-container": "#ffdad6",
"inverse-primary": "#006a62",
"on-background": "#d8e4f2",
"primary-fixed-dim": "#3adccc",
"on-secondary-fixed-variant": "#5c4300",
"inverse-surface": "#d8e4f2",
"on-secondary-fixed": "#261a00",
"secondary": "#ffe2ab",
"tertiary-fixed": "#ffdad6",
"secondary-fixed-dim": "#fbbc00",
"tertiary-fixed-dim": "#ffb4ac",
"secondary-fixed": "#ffdfa0",
"surface-tint": "#3adccc",
"error-container": "#93000a",
"surface-container-lowest": "#040f19",
"on-tertiary": "#690007",
"surface-container-highest": "#2b3641",
"surface-container-high": "#202b36",
"on-tertiary-fixed-variant": "#92030f",
"primary-fixed": "#61f9e9",
"surface-dim": "#09141e",
"on-error": "#690005",
"on-primary-fixed-variant": "#005049",
"on-secondary-container": "#6d5000",
"on-tertiary-fixed": "#410003",
"inverse-on-surface": "#26313d",
"outline": "#859491",
"surface-container": "#15212b",
"secondary-container": "#ffbf00",
"error": "#ffb4ab",
"background": "#09141e",
"tertiary-container": "#ffb9b2",
"on-primary": "#003732",
"surface": "#09141e",
"tertiary": "#ffdfdc",
"on-primary-container": "#006058",
"on-surface": "#d8e4f2",
"surface-bright": "#2f3a46",
"surface-variant": "#2b3641",
"primary-container": "#40e0d0",
"primary": "#66fdec"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"gutter": "24px",
"unit": "4px",
"margin": "32px",
"panel-padding": "16px"
},
"fontFamily": {
"body-lg": ["Inter"],
"data-lg": ["JetBrains Mono"],
"headline-lg": ["Inter"],
"label-caps": ["Inter"],
"data-md": ["JetBrains Mono"],
"body-sm": ["Inter"],
"headline-md": ["Inter"]
},
"fontSize": {
"body-lg": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
"data-lg": ["18px", { "lineHeight": "1", "fontWeight": "500" }],
"headline-lg": ["32px", { "lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"label-caps": ["12px", { "lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "700" }],
"data-md": ["14px", { "lineHeight": "1", "fontWeight": "400" }],
"body-sm": ["14px", { "lineHeight": "1.5", "fontWeight": "400" }],
"headline-md": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
body {
background-image:
linear-gradient(rgba(5, 16, 26, 0.9), rgba(5, 16, 26, 0.95)),
url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M0 40 L40 0 H40 V40 Z" fill="%23111d27" opacity="0.1"/></svg>');
}
.industrial-panel {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.8),
0 10px 30px -10px rgba(0, 0, 0, 0.8);
position: relative;
}
.industrial-panel::before,
.industrial-panel::after,
.screw-bl,
.screw-br {
content: '';
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #3c4a47;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.1);
}
.industrial-panel::before { top: 8px; left: 8px; }
.industrial-panel::after { top: 8px; right: 8px; }
.screw-bl { bottom: 8px; left: 8px; }
.screw-br { bottom: 8px; right: 8px; }
.btn-safe {
box-shadow: inset 0 0 0 2px theme('colors.primary');
}
.btn-danger {
background-color: theme('colors.surface-container-highest');
border: 1px solid theme('colors.outline-variant');
}
.btn-danger:hover {
background-color: theme('colors.error-container');
border-color: theme('colors.error');
color: theme('colors.error');
}
.crt-overlay {
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 4px, 6px 100%;
pointer-events: none;
}
</style>
</head>
<body class="bg-background text-on-surface h-screen w-screen overflow-hidden flex items-center justify-center p-margin relative">
<div class="absolute inset-0 crt-overlay z-50"></div>
<!-- Background texture/image to simulate hull/environment -->
<div class="absolute inset-0 bg-cover bg-center opacity-30 z-0 mix-blend-overlay" data-alt="A dimly lit, claustrophobic industrial maritime control room. Heavy steel bulkheads painted deep petrol blue, showing signs of wear and condensation. Scattered amber indicator lights glow softly in the background shadows. The overall aesthetic is gritty, functional, and tense." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAlqpjOY4khFFZm-GhTcPKZyCj5Dqsn67Wtcu_Yx6Kz4KCvTKCrrCl1ZuJ5r4WBqHaBkiSGdpIDMnXyu708e8x9Fkc380Hwu7_UqYQtzEUY6TL03vEJfM3p13lEYcWs7wjCkbu5t3XH_1uP4xRZba4WNYOpo9127r-67crHrC3lpZg_pL3g1IlcR6fek91lLZBf-XYDElHHaOtndMZFNLIUDMpq3xSNigg-hmYC1OQGHO6BiZ4seUpW')"></div>
<div class="relative z-10 grid grid-cols-2 grid-rows-2 gap-gutter w-full max-w-[1200px] h-full max-h-[800px]">
<!-- Modal 1: Nouvelle partie -->
<div class="industrial-panel bg-surface-container border-2 border-outline-variant p-margin flex flex-col justify-between">
<div class="screw-bl"></div><div class="screw-br"></div>
<div class="flex items-start gap-4 mb-6">
<div class="bg-surface-variant p-2 border border-outline-variant rounded-DEFAULT flex-shrink-0 mt-1">
<span class="material-symbols-outlined text-secondary text-[24px]" style="font-variation-settings: 'FILL' 1;">warning</span>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface mb-2 tracking-tight">NOUVELLE PARTIE</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant">Une expédition est déjà en cours. Commencer une nouvelle partie écrasera vos données actuelles.</p>
</div>
</div>
<div class="flex justify-between items-center gap-4 mt-auto">
<button class="btn-safe flex-1 py-3 px-6 bg-surface-dim font-label-caps text-label-caps text-primary hover:bg-surface-container-highest transition-colors active:translate-y-[2px]">
ANNULER
</button>
<button class="btn-danger flex-1 py-3 px-6 font-label-caps text-label-caps text-on-surface-variant transition-colors active:translate-y-[2px]">
ÉCRASER &amp; DÉMARRER
</button>
</div>
</div>
<!-- Modal 2: Retour menu -->
<div class="industrial-panel bg-surface-container border-2 border-outline-variant p-margin flex flex-col justify-between">
<div class="screw-bl"></div><div class="screw-br"></div>
<div class="flex items-start gap-4 mb-6">
<div class="bg-surface-variant p-2 border border-outline-variant rounded-DEFAULT flex-shrink-0 mt-1">
<span class="material-symbols-outlined text-secondary text-[24px]" style="font-variation-settings: 'FILL' 1;">logout</span>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface mb-2 tracking-tight">RETOUR MENU</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant">Votre progression actuelle sera perdue. Le sous-marin reviendra au port.</p>
</div>
</div>
<div class="flex justify-between items-center gap-4 mt-auto">
<button class="btn-safe flex-1 py-3 px-6 bg-surface-dim font-label-caps text-label-caps text-primary hover:bg-surface-container-highest transition-colors active:translate-y-[2px]">
RESTER
</button>
<button class="btn-danger flex-1 py-3 px-6 font-label-caps text-label-caps text-on-surface-variant transition-colors active:translate-y-[2px]">
RENTRER AU PORT
</button>
</div>
</div>
<!-- Modal 3: Quitter le jeu -->
<div class="industrial-panel bg-surface-container border-2 border-outline-variant p-margin flex flex-col justify-between">
<div class="screw-bl"></div><div class="screw-br"></div>
<div class="flex items-start gap-4 mb-6">
<div class="bg-surface-variant p-2 border border-outline-variant rounded-DEFAULT flex-shrink-0 mt-1">
<span class="material-symbols-outlined text-error text-[24px]" style="font-variation-settings: 'FILL' 1;">power_settings_new</span>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface mb-2 tracking-tight">QUITTER LE JEU</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant">Voulez-vous vraiment quitter ? Les données non sauvegardées seront perdues.</p>
</div>
</div>
<div class="flex justify-between items-center gap-4 mt-auto">
<button class="btn-safe flex-1 py-3 px-6 bg-surface-dim font-label-caps text-label-caps text-primary hover:bg-surface-container-highest transition-colors active:translate-y-[2px]">
RETOURNER AU POSTE
</button>
<button class="btn-danger flex-1 py-3 px-6 font-label-caps text-label-caps text-on-surface-variant transition-colors active:translate-y-[2px]">
QUITTER
</button>
</div>
</div>
<!-- Modal 4: Rétablir par défaut -->
<div class="industrial-panel bg-surface-container border-2 border-outline-variant p-margin flex flex-col justify-between">
<div class="screw-bl"></div><div class="screw-br"></div>
<div class="flex items-start gap-4 mb-6">
<div class="bg-surface-variant p-2 border border-outline-variant rounded-DEFAULT flex-shrink-0 mt-1">
<span class="material-symbols-outlined text-secondary text-[24px]" style="font-variation-settings: 'FILL' 1;">settings_backup_restore</span>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface mb-2 tracking-tight">RÉTABLIR PAR DÉFAUT</h2>
<p class="font-body-sm text-body-sm text-on-surface-variant">Rétablir tous les réglages d'origine ?</p>
</div>
</div>
<div class="flex justify-between items-center gap-4 mt-auto">
<button class="btn-safe flex-1 py-3 px-6 bg-surface-dim font-label-caps text-label-caps text-primary hover:bg-surface-container-highest transition-colors active:translate-y-[2px]">
CONSERVER
</button>
<button class="btn-danger flex-1 py-3 px-6 font-label-caps text-label-caps text-on-surface-variant transition-colors active:translate-y-[2px]">
RÉTABLIR
</button>
</div>
</div>
</div>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 447 KiB

@@ -0,0 +1,298 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Variantes de Confirmation V4</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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>
body {
background-color: #05101a; /* Base Level: Deep Petrol as per Style Guidance */
background-image:
linear-gradient(rgba(43, 54, 65, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(43, 54, 65, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
color: #d8e4f2;
}
/* Tactical/Skeuomorphic Panel Style */
.tactical-panel {
background-color: #09141e; /* bg-surface */
border: 2px solid #3c4a47; /* border-outline-variant */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05), /* 1px top-light highlight */
inset 0 -1px 0 rgba(0, 0, 0, 0.5), /* 1px bottom-dark shadow */
0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
.tactical-btn {
border: 2px solid #3c4a47;
background-color: #15212b;
transition: all 0.1s ease-in-out;
}
.tactical-btn:active {
transform: translateY(2px);
}
.tactical-btn-primary {
border-color: #40e0d0; /* Primary Cyan border */
background-color: #006058; /* on-primary-container */
color: #61f9e9; /* primary-fixed */
}
.tactical-btn-danger {
border-color: #ffb4ab; /* error */
background-color: #93000a; /* error-container */
color: #ffdad6; /* on-error-container */
}
.glass-overlay {
background: rgba(9, 20, 30, 0.7);
backdrop-filter: blur(30px);
/* Minimal noise overlay simulation */
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}
.scanline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
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;
pointer-events: none;
z-index: 10;
}
</style>
</head>
<body class="min-h-screen w-full flex items-center justify-center p-8 overflow-hidden font-body-lg">
<!-- Header / TopAppBar Blueprint -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-margin h-20 bg-surface border-b-2 border-outline-variant">
<div class="flex items-center gap-gutter">
<span class="font-headline-lg text-headline-lg font-bold text-primary tracking-tighter uppercase">RANSOM'S WAKE V4</span>
<div class="hidden md:flex gap-6 border-l-2 border-outline-variant pl-6">
<span class="font-label-caps text-label-caps text-on-surface-variant py-2">SYS_CONFIRM_UI_TEST</span>
<span class="font-label-caps text-label-caps text-primary border-b-2 border-primary pb-1 py-2">DIALOG_VARIANTS</span>
</div>
</div>
<div class="flex items-center gap-4 text-primary">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">terminal</span>
<span class="font-data-md text-data-md">OP_ACTIVE</span>
</div>
</header>
<!-- Main Content Area: Board of Variants -->
<main class="w-full max-w-[1920px] mx-auto mt-24 grid grid-cols-1 md:grid-cols-2 gap-gutter p-margin relative z-10">
<!-- Variant 1: Nouvelle Partie -->
<div class="relative w-full h-[400px] flex items-center justify-center border-2 border-outline-variant bg-surface-container-low overflow-hidden group">
<!-- Simulated Background -->
<div class="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-luminosity grayscale group-hover:grayscale-0 transition-all duration-700" data-alt="A dark, atmospheric industrial control room interior viewed from a first-person perspective. The scene is dominated by heavy steel bulkheads painted in deep petrol blue, with glowing cyan displays illuminating the space. Dust motes float in beams of light cutting through the shadows. The aesthetic is heavily skeuomorphic, reminiscent of mid-century naval equipment modernized with brutalist digital interfaces." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDeDhLbepyxSo_ub0VZBLKNXquy8ZZmAJ_QVvvdoNZN09ENp40qGjOsGVcmee8Cq_eMF5R0Z1qSQLt0FN0vivxYhjmLDbjtP_K_KF71uj015XiaNWqErxfYOM8BkTQJ1em01om8sOtm2FPLy5JLkLosTcqu16ZiNLTEkb6CLg97djPdFLngGdLFG7ifeJXNVYi2IZNPiuPvXzCLYaMslj1YQbVQYcIWAJv-phVLZ2lFxIEUz-yn7X_I')"></div>
<!-- Glass Dialog -->
<div class="relative z-20 tactical-panel w-[480px] p-8 flex flex-col gap-6">
<div class="scanline"></div>
<div class="flex justify-between items-start border-b-2 border-outline-variant pb-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl">save</span>
<h2 class="font-headline-md text-headline-md text-on-surface uppercase">Nouvelle Partie</h2>
</div>
<span class="material-symbols-outlined text-outline-variant">close</span>
</div>
<div class="flex flex-col gap-2">
<p class="font-body-lg text-body-lg text-on-surface">Créer une nouvelle partie écrasera votre sauvegarde actuelle.</p>
<p class="font-data-md text-data-md text-error uppercase">Cette action est irréversible.</p>
</div>
<div class="flex gap-4 mt-4 pt-4 border-t-2 border-outline-variant justify-end">
<button class="tactical-btn px-6 py-3 font-label-caps text-label-caps text-on-surface uppercase flex items-center gap-2">
<span class="material-symbols-outlined text-sm">arrow_back</span>
Annuler
</button>
<button class="tactical-btn tactical-btn-primary px-6 py-3 font-label-caps text-label-caps uppercase flex items-center gap-2">
<span class="material-symbols-outlined text-sm">warning</span>
Écraser la sauvegarde
</button>
</div>
</div>
<div class="absolute bottom-2 left-2 bg-surface-container px-2 py-1 border border-outline-variant">
<span class="font-data-md text-data-md text-on-surface-variant text-[10px]">VAR_01_NEW_GAME</span>
</div>
</div>
<!-- Variant 2: Retour au menu -->
<div class="relative w-full h-[400px] flex items-center justify-center border-2 border-outline-variant bg-surface-container-low overflow-hidden group">
<div class="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-luminosity grayscale group-hover:grayscale-0 transition-all duration-700" data-alt="A gritty, claustrophobic submarine corridor stretching into the darkness, lit only by emergency amber and red lighting. The walls are thick, riveted steel panels showing signs of wear and moisture. Massive pipes and conduits run along the low ceiling. The visual style is realistic, heavy-duty industrial minimalism with a tense, slow-burn atmosphere." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDNKKANCjRmbWUXCAGExTWubkVJNXDWYiapD4G_iUVZy_QjbOmzs0pr2ozqJ1tt5RMZDpIaVPNA7bNLKjc-OEWQmjBJgjcOJU5xw-Y1SNTnbjaU2wT_S9ozmJ-9354rhy8JhGlVQKShNNKbsU56bazkUiArxVrd_kY6pY2Zxwq_OwX6tsLbtxZ1ebrJcnUQq3nZ402PIKdbouTVC8EYyf2bsaXPso3SmXBCm3_G20ObdxgDfvq7gTS7')"></div>
<div class="relative z-20 tactical-panel w-[480px] p-8 flex flex-col gap-6">
<div class="scanline"></div>
<div class="flex justify-between items-start border-b-2 border-outline-variant pb-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-secondary-container text-3xl">logout</span>
<h2 class="font-headline-md text-headline-md text-on-surface uppercase">Retour au Menu</h2>
</div>
</div>
<div class="flex flex-col gap-2">
<p class="font-body-lg text-body-lg text-on-surface">Toute progression non sauvegardée depuis le dernier point de contrôle sera perdue.</p>
<div class="bg-surface-container p-3 border border-outline-variant flex items-center gap-3 mt-2">
<span class="material-symbols-outlined text-outline-variant">history</span>
<span class="font-data-md text-data-md text-on-surface-variant">Dernière sauvegarde: 14:02 T-MINUS</span>
</div>
</div>
<div class="flex gap-4 mt-4 pt-4 border-t-2 border-outline-variant justify-end">
<button class="tactical-btn px-6 py-3 font-label-caps text-label-caps text-on-surface uppercase">
Continuer la mission
</button>
<button class="tactical-btn border-error text-error hover:bg-error-container hover:text-on-error-container px-6 py-3 font-label-caps text-label-caps uppercase transition-colors">
Abandonner la session
</button>
</div>
</div>
<div class="absolute bottom-2 left-2 bg-surface-container px-2 py-1 border border-outline-variant">
<span class="font-data-md text-data-md text-on-surface-variant text-[10px]">VAR_02_MAIN_MENU</span>
</div>
</div>
<!-- Variant 3: Quitter -->
<div class="relative w-full h-[400px] flex items-center justify-center border-2 border-outline-variant bg-surface-container-low overflow-hidden group">
<div class="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-luminosity grayscale group-hover:grayscale-0 transition-all duration-700" data-alt="A close-up view of a complex mechanical locking mechanism on a heavy blast door. The steel is thick, scarred, and painted in a worn military gray. Large, stenciled identification numbers are visible. The lighting is harsh, stark white, creating deep shadows that emphasize the physical weight and brutalist design of the machinery. The mood is definitive and secure." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDebY3xHASsg171P46dasexOiTnQUDA-OvdDQShKZ93_EXJOqlSdJljp679Yzj11T9SUVcvlZ34rtkIof50b8DFPm_sji28yg9Vt7FN3Tn9L6SqzO4ai6exsBwU5yp8mum9z9-dSMnmRLSX6eZmn3msvQ-O3jfx0Grw7h9hXuudGlAhw-SMAJliUn9Y-lOmhOKoym1UOy_4LrgIlc1z1IJ7ocnhXAh3VBzeE1IPoIncedNdY3VPi2hB')"></div>
<div class="relative z-20 tactical-panel w-[480px] p-8 flex flex-col gap-6 border-l-4 border-l-error">
<div class="scanline"></div>
<div class="flex justify-between items-start border-b-2 border-outline-variant pb-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-error text-3xl">power_settings_new</span>
<h2 class="font-headline-md text-headline-md text-on-surface uppercase">Quitter le système</h2>
</div>
</div>
<div class="flex flex-col gap-2">
<p class="font-body-lg text-body-lg text-on-surface">Voulez-vous vraiment fermer l'application et retourner au bureau de l'OS ?</p>
</div>
<div class="flex gap-4 mt-4 pt-4 justify-between w-full">
<button class="tactical-btn px-6 py-3 font-label-caps text-label-caps text-on-surface uppercase w-full">
Rester en poste
</button>
<button class="tactical-btn tactical-btn-danger px-6 py-3 font-label-caps text-label-caps uppercase w-full flex justify-center items-center gap-2">
<span class="material-symbols-outlined text-sm">power_off</span>
Quitter vers l'OS
</button>
</div>
</div>
<div class="absolute bottom-2 left-2 bg-surface-container px-2 py-1 border border-outline-variant">
<span class="font-data-md text-data-md text-on-surface-variant text-[10px]">VAR_03_QUIT_APP</span>
</div>
</div>
<!-- Variant 4: Rétablir réglages -->
<div class="relative w-full h-[400px] flex items-center justify-center border-2 border-outline-variant bg-surface-container-low overflow-hidden group">
<div class="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-luminosity grayscale group-hover:grayscale-0 transition-all duration-700" data-alt="An array of analog dials, toggle switches, and CRT monitors embedded in a massive steel console. The equipment is vintage, mid-century technology, heavily utilitarian without any modern sleekness. The primary colors are deep blacks and stark whites, with occasional glowing indicator lights in cyan and amber. The scene conveys complex, physical data processing in a tense environment." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDHeE86FbqWFqnsl3_rixc_eSPyQf8PJ6br91JLrEHEn_o5u1L1wncKiCiYNnPNu2Nn6wvd5mCvDWe5mGsOzmCUlukXfCnwyvuVRqIzQ-T_JbNUcw7QoX1lKfZgP7IcY50Li-bjF57kJekzjuecrnqwQbYPRfR8pZ8zIF1acD-JEPGj6exdFQM-OzROUhZ2OzIiDQ22bwwqvuRzQCqGAJPDtr0jk1RVHJCDENiePK3JuwaiYPxBrRWv')"></div>
<div class="relative z-20 tactical-panel w-[480px] p-8 flex flex-col gap-6">
<div class="scanline"></div>
<div class="flex justify-between items-start border-b-2 border-outline-variant pb-4">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary-fixed-dim text-3xl">settings_backup_restore</span>
<h2 class="font-headline-md text-headline-md text-on-surface uppercase">Rétablir réglages</h2>
</div>
</div>
<div class="flex flex-col gap-2">
<p class="font-body-lg text-body-lg text-on-surface">Cette action réinitialisera toutes les configurations audio, vidéo et de contrôle aux paramètres d'usine.</p>
</div>
<div class="flex gap-4 mt-4 pt-4 border-t-2 border-outline-variant justify-end">
<button class="tactical-btn px-6 py-3 font-label-caps text-label-caps text-on-surface uppercase">
Conserver actuel
</button>
<button class="tactical-btn px-6 py-3 font-label-caps text-label-caps text-on-surface uppercase border-secondary-container text-secondary-container hover:bg-secondary-container hover:text-on-secondary-container transition-colors">
Restaurer par défaut
</button>
</div>
</div>
<div class="absolute bottom-2 left-2 bg-surface-container px-2 py-1 border border-outline-variant">
<span class="font-data-md text-data-md text-on-surface-variant text-[10px]">VAR_04_RESET_DEFAULTS</span>
</div>
</div>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 527 KiB