244 lines
13 KiB
HTML
244 lines
13 KiB
HTML
<!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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"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 & 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> |