mickael/dd-timer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity
2893013093
dd-timer/refonte_graphique/dashboard.html
POL Mickaël 62ae4c54eb feat: design Obsidienne + composants UI + toast/undo/backup 
- 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>
2026-04-06 05:43:20 +02:00

361 lines
17 KiB
HTML
Executable File
Raw Blame History

<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Minuteur Dragodinde - L'Archive d'Obsidienne</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=Cinzel:wght@400;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#a855f7",
"background-light": "#f8fafc",
"background-dark": "#0a0a0f",
"obsidian": "#121017",
"amethyst": "#a855f7",
"glass": "rgba(23, 23, 33, 0.6)",
},
fontFamily: {
display: ["Cinzel", "serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
min-height: 100vh;
}
.glass-panel {
background: rgba(23, 23, 33, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(168, 85, 247, 0.15);
}
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(168, 85, 247, 0.2);
border-radius: 10px;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 transition-colors duration-300">
<div class="flex h-screen overflow-hidden">
<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
<header class="h-16 flex-shrink-0 bg-white/5 dark:bg-transparent border-b border-white/5 flex items-center justify-between px-10 glass-panel border-none rounded-none">
<div class="flex items-center gap-10 h-full">
<a class="h-full flex items-center border-b-2 border-primary text-primary font-semibold text-sm relative" href="#">
Tableau de bord
<span class="absolute -bottom-[1px] left-0 w-full h-[2px] bg-primary rounded-full"></span>
</a>
<a class="h-full flex items-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-200 font-semibold text-sm transition-all" href="#">Enclos</a>
<a class="h-full flex items-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-200 font-semibold text-sm transition-all" href="#">Statistiques</a>
</div>
<div class="flex items-center gap-8">
</div>
</header>
<div class="flex-1 overflow-y-auto custom-scrollbar p-10 space-y-12">
<section>
<div class="flex items-center justify-between mb-6">
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">Statistiques Globales</h2>
<button class="text-sm text-rose-500 hover:text-rose-400 font-bold flex items-center gap-2">
<span class="material-icons-round text-base">restart_alt</span>
Réinitialiser
</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
<div class="glass-panel p-6 rounded-2xl">
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Total Bébés</p>
<div class="flex items-baseline gap-3">
<span class="text-5xl font-display font-extrabold text-primary">13</span>
<span class="text-sm text-green-500 font-bold">+2</span>
</div>
</div>
<div class="glass-panel p-6 rounded-2xl">
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Dragodindes Actives</p>
<span class="text-5xl font-display font-extrabold text-primary">15</span>
</div>
<div class="glass-panel p-6 rounded-2xl">
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Couples Formés</p>
<span class="text-5xl font-display font-extrabold text-primary">35</span>
</div>
<div class="glass-panel p-6 rounded-2xl">
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Taux de Réussite</p>
<span class="text-5xl font-display font-extrabold text-primary">37%</span>
</div>
<div class="glass-panel p-6 rounded-2xl border-primary/20 bg-primary/5">
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Races Obtenues</p>
<span class="text-5xl font-display font-extrabold text-primary">2</span>
</div>
</div>
</section>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-stretch">
<div class="lg:col-span-8 space-y-12">
<section>
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-6">Aperçu - Tous les enclos</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Enclos Alpha -->
<div class="glass-panel p-8 rounded-3xl hover:border-primary/40 transition-all flex flex-col gap-6">
<div class="w-full flex flex-col gap-4">
<div class="flex justify-between items-start">
<h3 class="font-display text-2xl font-bold tracking-wide">ENCLOS ALPHA</h3>
<p class="text-xs font-bold flex items-center justify-end gap-2 text-green-500">
<span class="w-2 h-2 rounded-full bg-green-500"></span> Actif
</p>
</div>
<div class="flex justify-between items-end">
<div class="flex flex-col">
<p class="text-4xl font-display font-extrabold leading-none">10 <span class="text-base font-sans text-slate-500 font-medium ml-1">DD</span></p>
<p class="text-[11px] text-slate-400 uppercase tracking-widest mt-1 font-bold">Capacité max</p>
</div>
<div class="space-y-1.5 text-right">
<p class="text-xs font-bold text-primary flex items-center justify-end gap-2">
<span class="material-icons-round text-sm">hourglass_top</span>
Restant: 02:45:00
</p>
<p class="text-xs text-slate-500 flex items-center justify-end gap-2 font-medium">
<span class="material-icons-round text-sm">schedule</span>
Écoulé: 01:15:00
</p>
</div>
</div>
</div>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1.5 rounded-lg bg-amber-500/10 text-amber-500 text-xs font-bold flex items-center gap-2 border border-amber-500/20">
<span class="material-icons-round text-sm">restaurant</span> Mangeoire
</span>
<span class="px-3 py-1.5 rounded-lg bg-pink-500/10 text-pink-500 text-xs font-bold flex items-center gap-2 border border-pink-500/20">
<span class="material-icons-round text-sm">spa</span> Caresseur
</span>
</div>
<button class="w-full py-3.5 bg-white/5 hover:bg-primary/20 text-slate-300 hover:text-primary rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-3 border border-white/5">
Gérer cet enclos
<span class="material-icons-round text-base">arrow_forward</span>
</button>
</div>
<!-- Enclos Gamma -->
<div class="glass-panel p-8 rounded-3xl hover:border-primary/40 transition-all flex flex-col gap-6 ring-1 ring-primary/20">
<div class="w-full flex flex-col gap-4">
<div class="flex justify-between items-start">
<h3 class="font-display text-2xl font-bold tracking-wide">ENCLOS GAMMA</h3>
<p class="text-xs font-bold flex items-center justify-end gap-2 text-green-500">
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> Actif
</p>
</div>
<div class="flex justify-between items-end">
<div class="flex flex-col">
<p class="text-4xl font-display font-extrabold leading-none">5 <span class="text-base font-sans text-slate-500 font-medium ml-1">DD</span></p>
<p class="text-[11px] text-slate-400 uppercase tracking-widest mt-1 font-bold">Capacité max</p>
</div>
<div class="space-y-1.5 text-right">
<p class="text-xs font-bold text-primary flex items-center justify-end gap-2">
<span class="material-icons-round text-sm">hourglass_top</span>
Restant: 12:00:00
</p>
<p class="text-xs text-slate-500 flex items-center justify-end gap-2 font-medium">
<span class="material-icons-round text-sm">schedule</span>
Écoulé: 24:00:00
</p>
</div>
</div>
</div>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1.5 rounded-lg bg-amber-500/10 text-amber-500 text-xs font-bold flex items-center gap-2 border border-amber-500/20">
<span class="material-icons-round text-sm">restaurant</span> Mangeoire
</span>
</div>
<button class="w-full py-3.5 bg-primary text-white rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-3 shadow-xl shadow-primary/20">
Gérer cet enclos
<span class="material-icons-round text-base">arrow_forward</span>
</button>
</div>
<!-- Enclos Beta (Inactive) -->
<div class="glass-panel p-8 rounded-3xl hover:border-primary/40 transition-all flex flex-col gap-6">
<div class="w-full flex flex-col gap-4">
<div class="flex justify-between items-start">
<h3 class="font-display text-2xl font-bold tracking-wide">ENCLOS BETA</h3>
<p class="text-xs font-bold flex items-center justify-end gap-2 text-slate-500">
<span class="w-2 h-2 rounded-full bg-slate-500"></span> Inactif
</p>
</div>
<div class="flex justify-between items-end">
<div class="flex flex-col">
<p class="text-4xl font-display font-extrabold leading-none text-slate-600">0 <span class="text-base font-sans text-slate-500 font-medium ml-1">DD</span></p>
<p class="text-[11px] text-slate-400 uppercase tracking-widest mt-1 font-bold">Capacité max</p>
</div>
<div class="space-y-1.5 text-right">
<p class="text-xs font-bold text-slate-500 flex items-center justify-end gap-2">
<span class="material-icons-round text-sm">hourglass_empty</span>
--:--:--
</p>
<p class="text-xs text-slate-500 flex items-center justify-end gap-2 font-medium">
<span class="material-icons-round text-sm">schedule</span>
--:--:--
</p>
</div>
</div>
</div>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-slate-500 text-xs font-bold border border-white/5">
Aucune jauge active
</span>
</div>
<button class="w-full py-3.5 bg-white/5 hover:bg-primary/20 text-slate-300 hover:text-primary rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-3 border border-white/5">
Gérer cet enclos
<span class="material-icons-round text-base">arrow_forward</span>
</button>
</div>
<!-- Enclos Epsilon -->
<div class="glass-panel p-8 rounded-3xl hover:border-primary/40 transition-all flex flex-col gap-6">
<div class="w-full flex flex-col gap-4">
<div class="flex justify-between items-start">
<h3 class="font-display text-2xl font-bold tracking-wide">ENCLOS EPSILON</h3>
<p class="text-xs font-bold flex items-center justify-end gap-2 text-green-500">
<span class="w-2 h-2 rounded-full bg-green-500"></span> Actif
</p>
</div>
<div class="flex justify-between items-end">
<div class="flex flex-col">
<p class="text-4xl font-display font-extrabold leading-none">2 <span class="text-base font-sans text-slate-500 font-medium ml-1">DD</span></p>
<p class="text-[11px] text-slate-400 uppercase tracking-widest mt-1 font-bold">Capacité max</p>
</div>
<div class="space-y-1.5 text-right">
<p class="text-xs font-bold text-primary flex items-center justify-end gap-2">
<span class="material-icons-round text-sm">hourglass_top</span>
Restant: 00:30:15
</p>
<p class="text-xs text-slate-500 flex items-center justify-end gap-2 font-medium">
<span class="material-icons-round text-sm">schedule</span>
Écoulé: 05:20:00
</p>
</div>
</div>
</div>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1.5 rounded-lg bg-pink-500/10 text-pink-500 text-xs font-bold flex items-center gap-2 border border-pink-500/20">
<span class="material-icons-round text-sm">spa</span> Caresseur
</span>
</div>
<button class="w-full py-3.5 bg-white/5 hover:bg-primary/20 text-slate-300 hover:text-primary rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-3 border border-white/5">
Gérer cet enclos
<span class="material-icons-round text-base">arrow_forward</span>
</button>
</div>
</div>
</section>
</div>
<div class="lg:col-span-4 flex flex-col space-y-10">
<section class="flex flex-col">
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-6">Activité récente</h2>
<div class="glass-panel p-8 rounded-3xl flex-1">
<ul class="space-y-8">
<li class="flex gap-5">
<div class="w-3 h-3 rounded-full bg-green-500 mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(34,197,94,0.4)]"></div>
<div>
<p class="text-base font-bold">Naissance réussie</p>
<p class="text-sm text-slate-500 mt-0.5">2 Dragodindes rousses • Il y a 10 min</p>
</div>
</li>
<li class="flex gap-5">
<div class="w-3 h-3 rounded-full bg-amber-500 mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(245,158,11,0.4)]"></div>
<div>
<p class="text-base font-bold">Enclos Alpha - Mangeoires</p>
<p class="text-sm text-slate-500 mt-0.5">Réapprovisionnement requis • Il y a 1h</p>
</div>
</li>
<li class="flex gap-5">
<div class="w-3 h-3 rounded-full bg-primary mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(168,85,247,0.4)]"></div>
<div>
<p class="text-base font-bold">Nouvelle race découverte</p>
<p class="text-sm text-slate-500 mt-0.5">Ébène enregistrée • Il y a 3h</p>
</div>
</li>
<li class="flex gap-5">
<div class="w-3 h-3 rounded-full bg-blue-500 mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.4)]"></div>
<div>
<p class="text-base font-bold">Accouplement programmé</p>
<p class="text-sm text-slate-500 mt-0.5">Enclos Gamma • Il y a 4h</p>
</div>
</li>
<li class="flex gap-5">
<div class="w-3 h-3 rounded-full bg-pink-500 mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(236,72,153,0.4)]"></div>
<div>
<p class="text-base font-bold">Sérénité stabilisée</p>
<p class="text-sm text-slate-500 mt-0.5">Enclos Epsilon • Il y a 5h</p>
</div>
</li>
</ul>
</div>
</section>
<section class="flex flex-col flex-1 min-h-0">
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-6">Progression des races</h2>
<div class="glass-panel p-8 rounded-3xl space-y-7 flex-1 overflow-y-auto custom-scrollbar">
<div>
<div class="flex justify-between text-xs font-extrabold mb-3">
<span class="text-amber-500 uppercase tracking-wider">Dorée et Rousse</span>
<span>10/10 (Terminé)</span>
</div>
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
<div class="h-full bg-amber-500 rounded-full" style="width: 100%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs font-extrabold mb-3">
<span class="text-indigo-400 uppercase tracking-wider">Ébène</span>
<span>3/10</span>
</div>
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
<div class="h-full bg-indigo-500 rounded-full" style="width: 30%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs font-extrabold mb-3">
<span class="text-primary uppercase tracking-wider">Indigo</span>
<span>0/10</span>
</div>
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
<div class="h-full bg-primary rounded-full" style="width: 0%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs font-extrabold mb-3">
<span class="text-pink-400 uppercase tracking-wider">Amande</span>
<span>0/10</span>
</div>
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
<div class="h-full bg-pink-500 rounded-full" style="width: 0%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs font-extrabold mb-3">
<span class="text-emerald-400 uppercase tracking-wider">Émeraude</span>
<span>0/10</span>
</div>
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
<div class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
</div>
</body></html>
Reference in New Issue View Git Blame Copy Permalink