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>
203 lines
11 KiB
HTML
Executable File
203 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;600;700;800&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&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": {
|
|
"surface-dim": "#100c16",
|
|
"error-container": "#a70138",
|
|
"inverse-on-surface": "#59535f",
|
|
"secondary-container": "#85145a",
|
|
"outline": "#7a7380",
|
|
"error-dim": "#d73357",
|
|
"on-surface-variant": "#b0a8b6",
|
|
"inverse-primary": "#7c41b5",
|
|
"inverse-surface": "#fef7ff",
|
|
"on-tertiary-container": "#594700",
|
|
"surface-container-low": "#16111d",
|
|
"on-primary-fixed": "#000000",
|
|
"on-tertiary-fixed-variant": "#645000",
|
|
"on-secondary-fixed-variant": "#922164",
|
|
"surface": "#100c16",
|
|
"on-secondary-fixed": "#690045",
|
|
"primary": "#cb97ff",
|
|
"surface-container-high": "#231d2b",
|
|
"on-primary": "#46007c",
|
|
"secondary": "#f673b7",
|
|
"on-primary-fixed-variant": "#430077",
|
|
"primary-fixed-dim": "#b378ef",
|
|
"primary-fixed": "#c185fd",
|
|
"background": "#100c16",
|
|
"tertiary-dim": "#eec200",
|
|
"on-surface": "#f1e8f7",
|
|
"on-tertiary-fixed": "#433500",
|
|
"on-secondary": "#4a002f",
|
|
"secondary-fixed-dim": "#ffabd1",
|
|
"on-error-container": "#ffb2b9",
|
|
"on-background": "#f1e8f7",
|
|
"outline-variant": "#4b4652",
|
|
"secondary-fixed": "#ffc0db",
|
|
"primary-dim": "#be83fa",
|
|
"tertiary": "#ffe083",
|
|
"surface-tint": "#cb97ff",
|
|
"surface-container-highest": "#292332",
|
|
"secondary-dim": "#f271b5",
|
|
"on-primary-container": "#360061",
|
|
"surface-bright": "#302939",
|
|
"surface-container": "#1c1724",
|
|
"on-error": "#490013",
|
|
"tertiary-fixed": "#fed01b",
|
|
"tertiary-fixed-dim": "#eec200",
|
|
"on-tertiary": "#645000",
|
|
"on-secondary-container": "#ffbeda",
|
|
"tertiary-container": "#fed01b",
|
|
"primary-container": "#c185fd",
|
|
"error": "#ff6e84",
|
|
"surface-variant": "#292332",
|
|
"surface-container-lowest": "#000000"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.sidebar-glass {
|
|
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(203, 151, 255, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(203, 151, 255, 0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-dim text-on-surface font-body overflow-hidden">
|
|
<!-- Wrapper to simulate application layout -->
|
|
<div class="flex h-screen w-full">
|
|
<!-- SideNavBar Component -->
|
|
<!-- style_component_shape: h-screen w-64 fixed left-0 top-0 -->
|
|
<!-- style_shell_layout: flex flex-col h-full py-6 border-r border-white/10 -->
|
|
<!-- style_bg_color: bg-purple-950/60 backdrop-blur-xl -->
|
|
<aside class="h-screen w-64 left-0 top-0 flex flex-col h-full py-6 sidebar-glass backdrop-blur-xl border-r border-white/10 shadow-2xl shadow-black/50 font-headline antialiased tracking-tight">
|
|
<!-- Header Section -->
|
|
<div class="px-6 mb-10 flex items-center gap-4 group">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-secondary-container flex items-center justify-center p-0.5 shadow-lg shadow-primary/20">
|
|
<div class="w-full h-full bg-surface-dim rounded-[7px] flex items-center justify-center overflow-hidden">
|
|
<img alt="Logo L'Archive d'Obsidienne" class="w-full h-full object-cover" data-alt="Stylized obsidian crystal shard with glowing violet cracks, deep purple and black color palette, elegant fantasy aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtmw3Vkb-yhKfdwdDCCp_A-crxkp-1Z_h-WSZrhRYh4mZCP4iwtU1KmmNQ-x547g23QAHkfKdyClESpK3My9dh0lgHObrnQiiLLr6o6Xvj5mtsXqurBYVThaWWKtBpLU5qHx52m7ZPwazg2TfvesKszIYwOzR2kAS89BvpMzTIcgyB61FBEr6HbRTDzI1hNuSJfxkbkVEezqqpK_MT3AhQrRg3y8NyCKd8NOrqaACMxvl7SW9OI-1p8gxIS9jfq8a8zFcNT2_NtVrm"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-xl font-bold tracking-tighter text-violet-300">Obsidienne</span>
|
|
<span class="text-[10px] font-label font-bold uppercase tracking-widest text-on-surface-variant/60">Gestion d'élevage</span>
|
|
</div>
|
|
</div>
|
|
<!-- Navigation Scroll Area -->
|
|
<div class="flex-1 overflow-y-auto px-3 space-y-8 custom-scrollbar">
|
|
<!-- PRINCIPAL -->
|
|
<div>
|
|
<h3 class="px-4 mb-3 text-[11px] font-label font-bold uppercase tracking-[0.2em] text-on-surface-variant/40">Principal</h3>
|
|
<nav class="space-y-1">
|
|
<!-- Active Item -->
|
|
<!-- style_active_navigation: relative flex items-center gap-3 px-4 py-3 text-violet-300 before:absolute before:left-1 before:h-8 before:w-1 before:bg-violet-500 before:rounded-full -->
|
|
<a class="relative flex items-center gap-3 px-4 py-3 text-violet-300 bg-white/5 rounded-xl before:absolute before:left-1 before:h-8 before:w-1 before:bg-violet-500 before:rounded-full active:scale-95 transition-all duration-300" href="#">
|
|
<span class="material-symbols-outlined text-violet-400" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
|
<span class="text-sm font-semibold">Tableau de bord</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<!-- ENCLOS -->
|
|
<div>
|
|
<h3 class="px-4 mb-3 text-[11px] font-label font-bold uppercase tracking-[0.2em] text-on-surface-variant/40">Enclos</h3>
|
|
<nav class="space-y-1">
|
|
<!-- Inactive Items -->
|
|
<!-- style_inactive_navigation: flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 -->
|
|
<!-- style_universal_hover: hover:bg-white/5 hover:text-violet-200 transition-all duration-300 -->
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
|
<span class="text-sm font-medium">Enclos Alpha</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
|
<span class="text-sm font-medium">Enclos Bêta</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
|
<span class="text-sm font-medium">Enclos Gamma</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
|
<span class="text-sm font-medium">Enclos Delta</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
|
<span class="text-sm font-medium">Enclos Epsilon</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
|
<span class="text-sm font-medium">Enclos Zêta</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<!-- OUTILS -->
|
|
<div>
|
|
<h3 class="px-4 mb-3 text-[11px] font-label font-bold uppercase tracking-[0.2em] text-on-surface-variant/40">Outils</h3>
|
|
<nav class="space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">favorite</span>
|
|
<span class="text-sm font-medium">Accouplement</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">inventory_2</span>
|
|
<span class="text-sm font-medium">Inventaire</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">account_tree</span>
|
|
<span class="text-sm font-medium">Workflows</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Section -->
|
|
<div class="mt-auto pt-6 px-3 border-t border-white/5">
|
|
<nav class="space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
|
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">settings</span>
|
|
<span class="text-sm font-medium">Paramètres</span>
|
|
</a>
|
|
<div class="flex items-center gap-3 px-4 py-2 text-on-surface-variant/40">
|
|
<span class="material-symbols-outlined text-xs">info</span>
|
|
<span class="text-[10px] font-label font-bold uppercase tracking-wider">v1.1.5 DEV</span>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area (Background) -->
|
|
</div>
|
|
</body></html> |