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,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&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 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>
|
||||
Reference in new issue
Block a user