chindit/Ransom-s-wake
1
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Implement production vertical slice foundation

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Design-Proposal/variantes_confirmations_v4_1080p_ransom_s_wake/code.html
+298
View File
@@ -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>