Implement production vertical slice foundation
This commit is contained in:
chindit committed
1 parent
9d4a89f355
commit
a18e82eb44
104 files changed
+10595
-268
No files matched your search
@@ -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&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&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"/>
|
||||
<!-- 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>
|
||||
> 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 |
Reference in new issue
Block a user