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>
231 lines
12 KiB
HTML
Executable File
231 lines
12 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>The Obsidian Archive - Sommaire des Workflows</title>
|
|
<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;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 id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"on-error-container": "#ffb2b9",
|
|
"secondary-fixed-dim": "#ffabd1",
|
|
"on-primary-container": "#360061",
|
|
"surface-dim": "#100c16",
|
|
"on-secondary-fixed-variant": "#922164",
|
|
"tertiary-container": "#fed01b",
|
|
"secondary-dim": "#f271b5",
|
|
"inverse-on-surface": "#59535f",
|
|
"on-background": "#f1e8f7",
|
|
"inverse-surface": "#fef7ff",
|
|
"on-primary": "#46007c",
|
|
"error-container": "#a70138",
|
|
"surface-container": "#1c1724",
|
|
"secondary": "#f673b7",
|
|
"on-error": "#490013",
|
|
"tertiary": "#ffe083",
|
|
"on-primary-fixed": "#000000",
|
|
"background": "#0a0a0f",
|
|
"tertiary-fixed": "#fed01b",
|
|
"tertiary-fixed-dim": "#eec200",
|
|
"surface-container-lowest": "#000000",
|
|
"surface-container-high": "#171721",
|
|
"on-secondary": "#4a002f",
|
|
"on-surface-variant": "#b0a8b6",
|
|
"surface-container-highest": "#23232d",
|
|
"on-secondary-container": "#ffbeda",
|
|
"outline-variant": "#4b4652",
|
|
"inverse-primary": "#7c41b5",
|
|
"surface-bright": "#302939",
|
|
"on-surface": "#f1e8f7",
|
|
"tertiary-dim": "#eec200",
|
|
"secondary-fixed": "#ffc0db",
|
|
"primary-container": "#c185fd",
|
|
"outline": "#7a7380",
|
|
"error-dim": "#d73357",
|
|
"primary-fixed-dim": "#b378ef",
|
|
"primary": "#cb97ff",
|
|
"error": "#ff6e84",
|
|
"surface-container-low": "#111119",
|
|
"primary-fixed": "#c185fd",
|
|
"on-tertiary-fixed-variant": "#645000",
|
|
"on-secondary-fixed": "#690045",
|
|
"secondary-container": "#85145a",
|
|
"primary-dim": "#be83fa",
|
|
"on-primary-fixed-variant": "#430077",
|
|
"surface-variant": "#292332",
|
|
"surface": "#0a0a0f",
|
|
"on-tertiary-container": "#594700",
|
|
"surface-tint": "#cb97ff",
|
|
"on-tertiary-fixed": "#433500",
|
|
"on-tertiary": "#645000"
|
|
},
|
|
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;
|
|
vertical-align: middle;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
|
color: #f1e8f7;
|
|
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);
|
|
}
|
|
.glow-bar-fill {
|
|
box-shadow: 0 0 10px rgba(203, 151, 255, 0.4);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col min-h-screen">
|
|
<!-- TopNavBar -->
|
|
<header class="h-20 flex justify-between items-center w-full px-12 bg-[#0a0a0f]/80 backdrop-blur-md sticky top-0 z-30 border-b border-[#4b4652]/15">
|
|
<div class="flex items-center gap-12 h-full">
|
|
<nav class="flex h-full gap-8">
|
|
<a class="flex items-center text-[#b0a8b6] hover:text-[#f1e8f7] transition-colors text-sm font-medium font-body border-b-2 border-transparent" href="#">Tableau de bord</a>
|
|
<a class="flex items-center text-[#b0a8b6] hover:text-[#f1e8f7] transition-colors text-sm font-medium font-body border-b-2 border-transparent" href="#">Enclos</a>
|
|
<a class="flex items-center hover:text-[#f1e8f7] transition-colors text-sm font-medium font-body border-b-2 text-[#cb97ff] border-[#cb97ff] font-semibold" href="#">Statistiques</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-1 flex flex-col bg-transparent min-h-screen">
|
|
<!-- Content Area -->
|
|
<div class="max-w-7xl mx-auto w-full p-12 space-y-12">
|
|
<!-- Welcome/Header Section -->
|
|
<section class="flex justify-between items-end">
|
|
<div>
|
|
<h3 class="text-4xl font-extrabold font-headline text-[#f1e8f7] tracking-tight">Sommaire des Plans</h3>
|
|
<p class="text-[#b0a8b6] font-body mt-2 text-lg">Gérez et suivez l'évolution de vos plans de reproduction.</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-[10px] font-label text-on-surface-variant bg-surface-container-high px-4 py-2 rounded-full uppercase tracking-widest border border-outline-variant/20">3 Plans Actifs</span>
|
|
</div>
|
|
</section>
|
|
<!-- Bento Grid of Breeding Plans -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Card 1: Dynastie Pourpre G5 -->
|
|
<div class="group bg-surface-container-high rounded-xl p-8 transition-all duration-300 hover:bg-surface-container-highest border border-white/5 hover:border-primary/20 relative overflow-hidden shadow-xl shadow-black/20">
|
|
<div class="flex justify-between items-start mb-8">
|
|
<div class="space-y-1">
|
|
<span class="text-[10px] text-primary font-label font-bold uppercase tracking-wider">Lignée Royale</span>
|
|
<h4 class="text-2xl font-bold font-headline text-on-surface">Amande/Rousse</h4>
|
|
</div>
|
|
<div class="w-14 h-14 bg-secondary-container/30 rounded-full flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined text-3xl" data-icon="dna" style='font-variation-settings: "FILL" 1;'>genetics</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-end text-sm">
|
|
<span class="text-on-surface-variant font-body">Progression Actuelle</span>
|
|
<span class="text-primary font-bold font-headline text-lg">85%</span>
|
|
</div>
|
|
<div class="w-full h-2.5 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="h-full bg-gradient-to-r from-primary to-primary-container rounded-full glow-bar-fill" style="width: 85%"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-6 border-t border-outline-variant/10">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm text-on-surface-variant" data-icon="history">history</span>
|
|
<span class="text-[11px] text-on-surface-variant font-label">Dernière modif : Hier, 14:20</span>
|
|
</div>
|
|
<button class="p-3 rounded-full bg-surface-container-low text-primary group-hover:bg-primary group-hover:text-on-primary transition-all duration-300 transform group-hover:translate-x-1 shadow-lg">
|
|
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: Projet Nébuleuse G2 -->
|
|
<div class="group bg-surface-container-high rounded-xl p-8 transition-all duration-300 hover:bg-surface-container-highest border border-white/5 hover:border-primary/20 relative overflow-hidden shadow-xl shadow-black/20">
|
|
<div class="flex justify-between items-start mb-8">
|
|
<div class="space-y-1">
|
|
<span class="text-[10px] text-tertiary font-label font-bold uppercase tracking-wider">Lignée Expérimentale</span>
|
|
<h4 class="text-2xl font-bold font-headline text-on-surface">Rousse/Dorée</h4>
|
|
</div>
|
|
<div class="w-14 h-14 bg-tertiary-container/10 rounded-full flex items-center justify-center text-tertiary">
|
|
<span class="material-symbols-outlined text-3xl" data-icon="hub" style='font-variation-settings: "FILL" 1;'>hub</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-end text-sm">
|
|
<span class="text-on-surface-variant font-body">Progression Actuelle</span>
|
|
<span class="text-tertiary font-bold font-headline text-lg">32%</span>
|
|
</div>
|
|
<div class="w-full h-2.5 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="h-full bg-tertiary rounded-full glow-bar-fill" style="width: 32%"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-6 border-t border-outline-variant/10">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm text-on-surface-variant" data-icon="history">history</span>
|
|
<span class="text-[11px] text-on-surface-variant font-label">Dernière modif : 3 janv.</span>
|
|
</div>
|
|
<button class="p-3 rounded-full bg-surface-container-low text-tertiary group-hover:bg-tertiary group-hover:text-on-tertiary transition-all duration-300 transform group-hover:translate-x-1 shadow-lg">
|
|
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: Gardiens Onyx G8 -->
|
|
<div class="group bg-surface-container-high rounded-xl p-8 transition-all duration-300 hover:bg-surface-container-highest border border-white/5 hover:border-primary/20 relative overflow-hidden shadow-xl shadow-black/20">
|
|
<div class="flex justify-between items-start mb-8">
|
|
<div class="space-y-1">
|
|
<span class="text-[10px] text-secondary font-label font-bold uppercase tracking-wider">Lignée Défensive</span>
|
|
<h4 class="text-2xl font-bold font-headline text-on-surface">Amande/Dorée</h4>
|
|
</div>
|
|
<div class="w-14 h-14 bg-secondary-container/20 rounded-full flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined text-3xl" data-icon="shield" style='font-variation-settings: "FILL" 1;'>shield</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-end text-sm">
|
|
<span class="text-on-surface-variant font-body">Progression Actuelle</span>
|
|
<span class="text-secondary font-bold font-headline text-lg">61%</span>
|
|
</div>
|
|
<div class="w-full h-2.5 bg-surface-container-highest rounded-full overflow-hidden">
|
|
<div class="h-full bg-secondary rounded-full glow-bar-fill" style="width: 61%"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-6 border-t border-outline-variant/10">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm text-on-surface-variant" data-icon="history">history</span>
|
|
<span class="text-[11px] text-on-surface-variant font-label">Dernière modif : 22 déc.</span>
|
|
</div>
|
|
<button class="p-3 rounded-full bg-surface-container-low text-secondary group-hover:bg-secondary group-hover:text-on-secondary transition-all duration-300 transform group-hover:translate-x-1 shadow-lg">
|
|
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 4: New Plan Template (Subtle CTA) -->
|
|
<div class="group border-2 border-dashed border-outline-variant/30 rounded-xl p-8 transition-all duration-300 hover:border-primary/50 hover:bg-primary/5 flex flex-col items-center justify-center gap-6 cursor-pointer min-h-[300px]">
|
|
<div class="w-20 h-20 rounded-full bg-surface-container-highest flex items-center justify-center text-primary-container group-hover:scale-110 transition-transform shadow-inner">
|
|
<span class="material-symbols-outlined text-5xl" data-icon="add_circle">add_circle</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<h4 class="text-xl font-bold font-headline text-on-surface">Nouveau Plan</h4>
|
|
<p class="text-sm text-on-surface-variant font-body mt-2">Lancer un nouveau cycle de sélection</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |