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/r_glages_affichage_v4_1080p_ransom_s_wake/code.html
+355
View File
@@ -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>
Design-Proposal/r_glages_affichage_v4_1080p_ransom_s_wake/screen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB