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>
225 lines
11 KiB
HTML
Executable File
225 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"/>
|
|
<title>L'Archive d'Obsidienne - Statistiques</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary-fixed": "#c185fd",
|
|
"on-secondary-container": "#ffbeda",
|
|
"on-error": "#490013",
|
|
"error-container": "#a70138",
|
|
"tertiary-container": "#fed01b",
|
|
"primary-fixed-dim": "#b378ef",
|
|
"surface": "#100c16",
|
|
"inverse-on-surface": "#59535f",
|
|
"secondary-fixed": "#ffc0db",
|
|
"outline": "#7a7380",
|
|
"surface-container-highest": "#292332",
|
|
"on-primary-container": "#360061",
|
|
"secondary-container": "#85145a",
|
|
"primary": "#cb97ff",
|
|
"on-secondary-fixed": "#690045",
|
|
"on-tertiary-fixed": "#433500",
|
|
"on-tertiary": "#645000",
|
|
"inverse-surface": "#fef7ff",
|
|
"surface-container-low": "#16111d",
|
|
"on-error-container": "#ffb2b9",
|
|
"on-surface": "#f1e8f7",
|
|
"error": "#ff6e84",
|
|
"primary-dim": "#be83fa",
|
|
"error-dim": "#d73357",
|
|
"inverse-primary": "#7c41b5",
|
|
"surface-container-lowest": "#000000",
|
|
"surface-tint": "#cb97ff",
|
|
"primary-container": "#c185fd",
|
|
"surface-container": "#1c1724",
|
|
"on-secondary-fixed-variant": "#922164",
|
|
"on-secondary": "#4a002f",
|
|
"surface-container-high": "#231d2b",
|
|
"on-background": "#f1e8f7",
|
|
"tertiary-fixed-dim": "#eec200",
|
|
"background": "#100c16",
|
|
"secondary-dim": "#f271b5",
|
|
"tertiary-dim": "#eec200",
|
|
"surface-bright": "#302939",
|
|
"on-primary-fixed": "#000000",
|
|
"tertiary-fixed": "#fed01b",
|
|
"surface-variant": "#292332",
|
|
"tertiary": "#ffe083",
|
|
"on-surface-variant": "#b0a8b6",
|
|
"secondary": "#f673b7",
|
|
"on-tertiary-container": "#594700",
|
|
"outline-variant": "#4b4652",
|
|
"on-primary-fixed-variant": "#430077",
|
|
"on-primary": "#46007c",
|
|
"on-tertiary-fixed-variant": "#645000",
|
|
"secondary-fixed-dim": "#ffabd1",
|
|
"surface-dim": "#100c16"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
},
|
|
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(41, 35, 50, 0.6);
|
|
backdrop-filter: blur(40px);
|
|
-webkit-backdrop-filter: blur(40px);
|
|
}
|
|
.gradient-primary {
|
|
background: linear-gradient(135deg, #cb97ff 0%, #c185fd 100%);
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(122, 115, 128, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-on-surface font-body overflow-x-hidden" style="background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);">
|
|
<div class="flex h-screen w-full overflow-hidden">
|
|
<!-- Main Content Area (Sidebar removed, now occupies full width) -->
|
|
<main class="flex-1 flex flex-col overflow-y-auto relative">
|
|
<!-- Header Navigation Tabs -->
|
|
<header class="sticky top-0 z-50 glass-panel border-b border-outline-variant/10 px-8">
|
|
<div class="flex items-center h-16 justify-between max-w-7xl mx-auto w-full">
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-8">
|
|
<a class="text-on-surface-variant font-bold text-sm hover:text-primary transition-colors py-5 border-b-2 border-transparent" href="#" style="">Tableau de bord</a>
|
|
<a class="text-on-surface-variant font-bold text-sm hover:text-primary transition-colors py-5 border-b-2 border-transparent" href="#" style="">Enclos</a>
|
|
<a class="text-on-surface font-bold text-sm py-5 border-b-2 border-primary" href="#" style="">Statistiques</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="p-8 max-w-7xl mx-auto w-full space-y-8">
|
|
<!-- Hero Title Section -->
|
|
<div class="space-y-2">
|
|
<h2 class="font-headline text-4xl font-extrabold tracking-tight text-on-surface" style="">Statistiques d'Élevage</h2>
|
|
<p class="text-on-surface-variant text-base max-w-2xl" style="">Aperçu analytique approfondi des performances biologiques de votre archive.</p>
|
|
</div>
|
|
<!-- KPI Cards Grid -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="bg-surface-container p-6 rounded-2xl flex flex-col justify-between border border-outline-variant/5">
|
|
<p class="font-label text-on-surface-variant text-xs font-bold uppercase tracking-widest" style="">Total Naissances</p>
|
|
<div class="flex items-baseline gap-3 mt-4">
|
|
<span class="font-headline text-4xl font-black text-on-surface" style="">1,284</span>
|
|
<span class="text-tertiary text-sm font-bold bg-tertiary/10 px-2 py-0.5 rounded" style="">+12%</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container p-6 rounded-2xl flex flex-col justify-between border border-outline-variant/5">
|
|
<p class="font-label text-on-surface-variant text-xs font-bold uppercase tracking-widest" style="">Taux de Réussite</p>
|
|
<div class="flex items-baseline gap-3 mt-4">
|
|
<span class="font-headline text-4xl font-black text-on-surface" style="">87%</span>
|
|
<span class="text-tertiary text-sm font-bold bg-tertiary/10 px-2 py-0.5 rounded" style="">+3.2%</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container p-6 rounded-2xl flex flex-col justify-between border border-outline-variant/5">
|
|
<p class="font-label text-on-surface-variant text-xs font-bold uppercase tracking-widest" style="">Couples Actifs</p>
|
|
<div class="flex items-baseline gap-3 mt-4">
|
|
<span class="font-headline text-4xl font-black text-on-surface" style="">42</span>
|
|
<span class="text-error text-sm font-bold bg-error/10 px-2 py-0.5 rounded" style="">-2</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container p-6 rounded-2xl flex flex-col justify-between border border-outline-variant/5">
|
|
<p class="font-label text-on-surface-variant text-xs font-bold uppercase tracking-widest" style="">Races obtenues</p>
|
|
<div class="flex items-baseline gap-3 mt-4">
|
|
<span class="font-headline text-4xl font-black text-on-surface" style="">12</span>
|
|
<span class="text-secondary text-sm font-bold bg-secondary/10 px-2 py-0.5 rounded" style="">Rare</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Chart Area -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Line Chart: Evolution des Naissances -->
|
|
<div class="lg:col-span-2 bg-surface-container-high rounded-3xl p-8 flex flex-col gap-8 border border-outline-variant/5">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-headline text-2xl font-bold" style="">Évolution des Naissances</h3>
|
|
<span class="px-3 py-1 bg-surface-container-highest rounded-full text-xs font-bold text-on-surface tracking-wide" style="">30 DERNIERS JOURS</span>
|
|
</div>
|
|
<!-- Visual Placeholder for Chart -->
|
|
<div class="h-64 w-full relative flex items-end justify-between px-4 pb-6 border-b border-l border-outline-variant/20">
|
|
<div class="w-2.5 h-[20%] bg-primary/20 rounded-t-lg transition-all hover:h-[25%] hover:bg-primary/40"></div>
|
|
<div class="w-2.5 h-[35%] bg-primary/20 rounded-t-lg transition-all hover:h-[40%] hover:bg-primary/40"></div>
|
|
<div class="w-2.5 h-[30%] bg-primary/20 rounded-t-lg transition-all hover:h-[35%] hover:bg-primary/40"></div>
|
|
<div class="w-2.5 h-[45%] bg-primary/20 rounded-t-lg transition-all hover:h-[50%] hover:bg-primary/40"></div>
|
|
<div class="w-2.5 h-[60%] bg-primary/40 rounded-t-lg transition-all hover:h-[65%] hover:bg-primary/60"></div>
|
|
<div class="w-2.5 h-[55%] bg-primary/40 rounded-t-lg transition-all hover:h-[60%] hover:bg-primary/60"></div>
|
|
<div class="w-2.5 h-[80%] gradient-primary rounded-t-lg shadow-[0_0_20px_rgba(203,151,255,0.4)] transition-all hover:scale-x-110"></div>
|
|
<div class="w-2.5 h-[75%] bg-primary/60 rounded-t-lg transition-all hover:h-[80%] hover:bg-primary/80"></div>
|
|
<div class="w-2.5 h-[65%] bg-primary/60 rounded-t-lg transition-all hover:h-[70%] hover:bg-primary/80"></div>
|
|
<div class="w-2.5 h-[90%] gradient-primary rounded-t-lg shadow-[0_0_20px_rgba(203,151,255,0.4)]"></div>
|
|
<div class="w-2.5 h-[85%] bg-primary/80 rounded-t-lg"></div>
|
|
<div class="w-2.5 h-[70%] bg-primary/60 rounded-t-lg"></div>
|
|
<div class="w-2.5 h-[50%] bg-primary/40 rounded-t-lg"></div>
|
|
<div class="w-2.5 h-[40%] bg-primary/30 rounded-t-lg"></div>
|
|
<div class="w-2.5 h-[60%] gradient-primary rounded-t-lg"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Pie Chart: Répartition des Races -->
|
|
<div class="bg-surface-container-high rounded-3xl p-8 flex flex-col gap-8 border border-outline-variant/5">
|
|
<h3 class="font-headline text-2xl font-bold" style="">Répartition des Races</h3>
|
|
<div class="flex-1 flex flex-col justify-center items-center gap-10">
|
|
<div class="relative w-40 h-40 rounded-full border-[15px] border-surface-container-highest flex items-center justify-center">
|
|
<div class="absolute inset-0 border-[15px] border-secondary rounded-full" style="clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);"></div>
|
|
<div class="absolute inset-0 border-[15px] border-primary rounded-full" style="clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 40%);"></div>
|
|
<div class="flex flex-col items-center">
|
|
<span class="font-headline text-3xl font-black" style="">12</span>
|
|
<span class="font-label text-[10px] uppercase font-bold text-on-surface-variant tracking-widest" style="">TYPES</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full space-y-4">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
|
<span class="font-semibold" style="">Ebène</span>
|
|
</div>
|
|
<span class="font-black text-lg" style="">45%</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-3 h-3 rounded-full bg-secondary"></div>
|
|
<span class="font-semibold" style="">Indigo</span>
|
|
</div>
|
|
<span class="font-black text-lg" style="">35%</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-3 h-3 rounded-full bg-tertiary"></div>
|
|
<span class="font-semibold" style="">Dores</span>
|
|
</div>
|
|
<span class="font-black text-lg" style="">20%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |