POL Mickaël
62ae4c54eb
- Design system glassmorphism avec Material Design 3 - 14 composants : App, Sidebar, Dashboard, EnclosView, DragodindeCard, AccouplementView, ReapproView, InventaireView, WorkflowsView, StatistiquesView, ParametresView, UpdateBanner, Toast, ConfirmModal - UndoManager pour annulation des actions destructives (Ctrl+Z) - Toast notifications (success/error) avec bouton Annuler - Modale de confirmation glassmorphism (remplace confirm() natif) - Export/import global des données depuis Paramètres - Maquettes HTML/PNG de la refonte graphique Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
215 lines
11 KiB
HTML
Executable File
215 lines
11 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="fr"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600&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: {
|
|
"inverse-primary": "#7c41b5",
|
|
"error-container": "#a70138",
|
|
"outline": "#7a7380",
|
|
"on-secondary-container": "#ffbeda",
|
|
"tertiary-container": "#fed01b",
|
|
"surface-bright": "#302939",
|
|
"tertiary-dim": "#eec200",
|
|
"primary-fixed-dim": "#b378ef",
|
|
"on-tertiary-fixed": "#433500",
|
|
"secondary-container": "#85145a",
|
|
"primary-fixed": "#c185fd",
|
|
"outline-variant": "#4b4652",
|
|
"on-primary-fixed-variant": "#430077",
|
|
"on-error": "#490013",
|
|
"surface-container-lowest": "#000000",
|
|
"primary": "#cb97ff",
|
|
"on-primary-container": "#360061",
|
|
"surface-container-low": "#16111d",
|
|
"inverse-surface": "#fef7ff",
|
|
"background": "#100c16",
|
|
"on-secondary-fixed": "#690045",
|
|
"on-secondary": "#4a002f",
|
|
"on-secondary-fixed-variant": "#922164",
|
|
"on-tertiary-fixed-variant": "#645000",
|
|
"secondary-fixed-dim": "#ffabd1",
|
|
"on-background": "#f1e8f7",
|
|
"tertiary-fixed": "#fed01b",
|
|
"inverse-on-surface": "#59535f",
|
|
"on-tertiary": "#645000",
|
|
"secondary-fixed": "#ffc0db",
|
|
"secondary-dim": "#f271b5",
|
|
"on-primary-fixed": "#000000",
|
|
"tertiary-fixed-dim": "#eec200",
|
|
"surface-tint": "#cb97ff",
|
|
"on-primary": "#46007c",
|
|
"secondary": "#f673b7",
|
|
"surface": "#100c16",
|
|
"on-surface-variant": "#b0a8b6",
|
|
"surface-dim": "#100c16",
|
|
"on-tertiary-container": "#594700",
|
|
"primary-container": "#c185fd",
|
|
"surface-variant": "#292332",
|
|
"on-surface": "#f1e8f7",
|
|
"error-dim": "#d73357",
|
|
"surface-container-highest": "#292332",
|
|
"on-error-container": "#ffb2b9",
|
|
"tertiary": "#ffe083",
|
|
"error": "#ff6e84",
|
|
"primary-dim": "#be83fa",
|
|
"surface-container-high": "#231d2b",
|
|
"surface-container": "#1c1724"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
|
min-height: 100vh;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(28, 23, 36, 0.6);
|
|
backdrop-filter: blur(40px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body text-on-surface selection:bg-primary selection:text-on-primary">
|
|
<!-- TopNavBar -->
|
|
<header class="w-full top-0 sticky bg-[#1c1724]/60 backdrop-blur-xl shadow-[0_24px_40px_rgba(0,0,0,0.15)] z-50">
|
|
<div class="flex justify-between items-center px-8 h-16 w-full max-w-none">
|
|
<nav class="hidden md:flex items-center space-x-8 h-full">
|
|
<a class="text-[#b0a8b6] hover:text-[#f1e8f7] transition-colors font-headline font-bold text-lg h-full flex items-center" href="#">Tableau de bord</a>
|
|
<a class="text-[#b0a8b6] hover:text-[#f1e8f7] transition-colors font-headline font-bold text-lg h-full flex items-center" href="#">Enclos</a>
|
|
<a class="text-[#b0a8b6] hover:text-[#f1e8f7] transition-colors font-headline font-bold text-lg h-full flex items-center" href="#">Statistiques</a>
|
|
</nav>
|
|
<div class="flex items-center space-x-4">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="max-w-6xl mx-auto px-8 py-12">
|
|
<div class="mb-12">
|
|
<h1 class="font-headline font-extrabold text-5xl text-on-surface tracking-tight mb-2">Paramètres</h1>
|
|
<p class="font-label text-on-surface-variant text-base">Personnalisez votre expérience au sein du coffre-fort éthéré.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
<!-- Left Column: Navigation Summary (Desktop) -->
|
|
<div class="lg:col-span-4 space-y-6">
|
|
<div class="surface-container rounded-xl p-6 border border-outline-variant/15">
|
|
<nav class="space-y-2">
|
|
<button class="w-full flex items-center space-x-3 px-4 py-3 bg-surface-variant rounded-xl text-primary font-medium">
|
|
<span class="material-symbols-outlined">tune</span>
|
|
<span>Général</span>
|
|
</button>
|
|
<button class="w-full flex items-center space-x-3 px-4 py-3 hover:bg-surface-variant/40 rounded-xl text-on-surface-variant transition-all">
|
|
<span class="material-symbols-outlined">notifications_active</span>
|
|
<span>Alerte & Rappels</span>
|
|
</button>
|
|
<button class="w-full flex items-center space-x-3 px-4 py-3 hover:bg-surface-variant/40 rounded-xl text-on-surface-variant transition-all">
|
|
<span class="material-symbols-outlined">shield</span>
|
|
<span>Confidentialité</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Settings Content -->
|
|
<div class="lg:col-span-8 space-y-8">
|
|
<!-- Section 1: Son de l'alarme -->
|
|
<section class="surface-container rounded-xl p-8 border border-outline-variant/15">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<span class="material-symbols-outlined text-primary">campaign</span>
|
|
<h2 class="font-headline font-bold text-2xl">Son de l'alarme</h2>
|
|
</div>
|
|
<p class="font-body text-on-surface-variant mb-6 text-sm">Définissez l'ambiance sonore qui marquera vos rappels d'archivage.</p>
|
|
<div class="relative max-w-md">
|
|
<label class="font-label text-xs text-on-surface-variant mb-2 block uppercase tracking-wider font-semibold">Sélecteur de mélodie</label>
|
|
<div class="relative group">
|
|
<select class="w-full bg-surface-container-low border border-outline-variant/30 text-on-surface rounded-xl px-4 py-4 appearance-none focus:outline-none focus:border-primary/50 focus:ring-4 focus:ring-primary/10 transition-all font-medium cursor-pointer">
|
|
<option value="arpege">Arpège</option>
|
|
<option value="bip_bip">Bip Bip</option>
|
|
<option selected="" value="melodie_amethyste">Mélodie Améthyste</option>
|
|
<option value="obsidienne">Obsidienne</option>
|
|
</select>
|
|
<div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-primary">
|
|
<span class="material-symbols-outlined">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex items-center space-x-2 text-primary-fixed-dim text-xs bg-primary/10 w-fit px-3 py-1.5 rounded-full font-medium">
|
|
<span class="material-symbols-outlined !text-sm" data-weight="fill">play_circle</span>
|
|
<span>Écouter l'aperçu</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section 2: Notifications -->
|
|
<section class="surface-container rounded-xl p-8 border border-outline-variant/15">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<span class="material-symbols-outlined text-secondary">notifications_active</span>
|
|
<h2 class="font-headline font-bold text-2xl">Notifications</h2>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<!-- Switch Item -->
|
|
<div class="flex items-center justify-between p-4 bg-surface-container-high rounded-xl hover:bg-surface-variant/40 transition-all border border-transparent hover:border-outline-variant/10">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-10 h-10 rounded-xl bg-surface-container-low flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-surface-variant">desktop_windows</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-headline font-bold">Notifications PC Windows</p>
|
|
<p class="font-label text-xs text-on-surface-variant">Alertes natives sur votre système d'exploitation.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Toggle Component -->
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
|
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary shadow-sm"></div>
|
|
</label>
|
|
</div>
|
|
<!-- Modal Trigger Item -->
|
|
<div class="flex items-center justify-between p-4 bg-surface-container-high rounded-xl hover:bg-surface-variant/40 transition-all border border-transparent hover:border-outline-variant/10">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-10 h-10 rounded-xl bg-surface-container-low flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-surface-variant">smartphone</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-headline font-bold">Notifications Mobile</p>
|
|
<p class="font-label text-xs text-on-surface-variant">Synchronisez vos alertes sur iOS ou Android.</p>
|
|
</div>
|
|
</div>
|
|
<button class="px-6 py-2.5 bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold rounded-xl text-sm shadow-lg shadow-primary/20 scale-95 hover:scale-100 active:scale-95 transition-all">
|
|
Configurer Mobile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Additional High-End Detail: Information Card -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer class="w-full border-t border-[#4b4652]/15 bg-[#100c16] mt-24">
|
|
<div class="flex flex-row justify-between items-center px-8 py-6 w-full max-w-6xl mx-auto">
|
|
<div class="font-['Plus_Jakarta_Sans'] text-xs font-medium text-[#b0a8b6] opacity-80">
|
|
© 2024 L'Archive d'Obsidienne. Tous droits réservés.
|
|
</div>
|
|
<div class="flex items-center space-x-6">
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs font-medium text-[#b0a8b6] hover:text-[#f1e8f7] underline transition-all opacity-80 hover:opacity-100" href="#">Confidentialité</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs font-medium text-[#b0a8b6] hover:text-[#f1e8f7] underline transition-all opacity-80 hover:opacity-100" href="#">Aide</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs font-medium text-[#b0a8b6] hover:text-[#f1e8f7] underline transition-all opacity-80 hover:opacity-100" href="#">Conditions d'utilisation</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |