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>
464 lines
24 KiB
HTML
Executable File
464 lines
24 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 - Réapprovisionnement</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@300;400;500;600&family=Material+Icons+Round&display=swap" rel="stylesheet"/>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: "#9d4edd", // Amethyst Purple
|
||
"background-light": "#f8f9fa",
|
||
"background-dark": "#0d0b14", // Deep Obsidian
|
||
secondary: "#ff006e", // Pink accent
|
||
surface: "#1a1625",
|
||
},
|
||
fontFamily: {
|
||
display: ["Cinzel", "serif"],
|
||
sans: ["Inter", "sans-serif"],
|
||
},
|
||
borderRadius: {
|
||
DEFAULT: "0.5rem",
|
||
'xl': '1rem',
|
||
},
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
.font-display {
|
||
font-family: 'Cinzel', serif;
|
||
}
|
||
.glass-panel {
|
||
background: rgba(26, 22, 37, 0.7);
|
||
backdrop-filter: blur(12px);
|
||
border: 1px solid rgba(157, 78, 221, 0.2);
|
||
}
|
||
.scroll-custom::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.scroll-custom::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
.scroll-custom::-webkit-scrollbar-thumb {
|
||
background: #3c3350;
|
||
border-radius: 10px;
|
||
}
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.no-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
@keyframes pulse-bounce {
|
||
0%, 100% {
|
||
transform: translateY(0) scale(1);
|
||
opacity: 0.4;
|
||
}
|
||
50% {
|
||
transform: translateY(6px) scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
.animate-pulse-bounce {
|
||
animation: pulse-bounce 2s ease-in-out infinite;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="text-slate-800 dark:text-slate-200 min-h-screen" style="background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);">
|
||
<main class="flex flex-col h-screen overflow-hidden">
|
||
<header class="h-16 border-b border-slate-200 dark:border-white/10 flex items-center px-8 bg-white/50 dark:bg-surface/50 backdrop-blur-md sticky top-0 z-50">
|
||
<nav class="flex items-center gap-8 h-full">
|
||
<a class="h-full flex items-center text-sm font-bold tracking-widest text-slate-400 hover:text-primary transition-colors border-b-2 border-transparent uppercase font-display" href="#" style="">
|
||
Tableau de bord
|
||
</a>
|
||
<a class="h-full flex items-center text-sm font-bold tracking-widest text-slate-400 hover:text-primary transition-colors border-b-2 border-transparent uppercase font-display" href="#" style="">
|
||
Enclos
|
||
</a>
|
||
<a class="h-full flex items-center text-sm font-bold tracking-widest text-slate-400 hover:text-primary transition-colors border-b-2 border-transparent uppercase font-display" href="#" style="">
|
||
Statistiques
|
||
</a>
|
||
</nav>
|
||
<div class="ml-auto flex items-center gap-4">
|
||
<span class="text-[10px] bg-primary/20 text-primary px-2 py-0.5 rounded font-mono font-bold" style="">v1.1.5</span>
|
||
</div>
|
||
</header>
|
||
<div class="flex-1 overflow-y-auto p-8 scroll-custom space-y-12">
|
||
<!-- Target Selection -->
|
||
<section class="max-w-[1600px] mx-auto w-full space-y-6">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h2 class="text-xs uppercase tracking-[0.2em] text-slate-400 font-bold" style="">Sélectionne ta cible</h2>
|
||
<div class="h-1 w-12 bg-primary mt-1 rounded-full"></div>
|
||
</div>
|
||
<div class="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
|
||
<button class="px-4 py-1.5 rounded-full text-xs font-semibold bg-primary text-white" style="">Toutes</button>
|
||
<button class="px-4 py-1.5 rounded-full text-xs font-semibold bg-slate-200 dark:bg-white/5 hover:bg-primary/20 transition-colors text-slate-600 dark:text-slate-400" style="">Gen 1</button>
|
||
<button class="px-4 py-1.5 rounded-full text-xs font-semibold bg-slate-200 dark:bg-white/5 hover:bg-primary/20 transition-colors text-slate-600 dark:text-slate-400" style="">Gen 2</button>
|
||
<button class="px-4 py-1.5 rounded-full text-xs font-semibold bg-slate-200 dark:bg-white/5 hover:bg-primary/20 transition-colors text-slate-600 dark:text-slate-400" style="">Gen 5</button>
|
||
<button class="px-4 py-1.5 rounded-full text-xs font-semibold bg-slate-200 dark:bg-white/5 hover:bg-primary/20 transition-colors text-slate-600 dark:text-slate-400" style="">Gen 10</button>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-10 gap-4" id="target-grid">
|
||
<div class="glass-panel p-3 rounded-xl border border-primary ring-2 ring-primary/50 relative cursor-pointer group hover:scale-105 transition-all">
|
||
<div class="absolute top-2 right-2 flex gap-1">
|
||
<span class="text-[9px] font-bold bg-primary text-white px-1.5 rounded shadow-sm" style="">Gen 5</span>
|
||
</div>
|
||
<div class="w-full aspect-square bg-slate-800/50 rounded-lg mb-2 flex items-center justify-center overflow-hidden">
|
||
<img alt="Dragodinde Pourpre" class="w-16 h-16 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAubvgfO9M_y6AI1RIslf8TR7z3dfXXDUaysxgQy9rn-mtjeRREg862eXeC5nazwn5SncSd6jgNY0vXdogwhX9_voY2jWgX836Z3f9zDY2_3tECSqV9xQ805xrIloAj2P8diUPNoH6rI8A1cpFkJlCepeUbic0VdZ5OY60vgWz_46pO2sWy29QZgsVTrgBrzvasr_bRJbqJ23IXw_tWOuSYdGYPI2mQY7M2oaYk6i0ZymH2DNkPzFxU-w0UrdcgTWmHq0doypPjC41D" style=""/>
|
||
</div>
|
||
<p class="text-xs font-bold text-center truncate" style="">Pourpre</p>
|
||
<div class="absolute inset-0 bg-primary/5 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
</div>
|
||
<!-- Other cards are injected via JS -->
|
||
</div>
|
||
</section>
|
||
<!-- Replenishment Plan -->
|
||
<section class="max-w-[1600px] mx-auto w-full space-y-6">
|
||
<div>
|
||
<h2 class="text-xs uppercase tracking-[0.2em] text-slate-400 font-bold" style="">Plan de Croisement</h2>
|
||
<div class="h-1 w-12 bg-secondary mt-1 rounded-full"></div>
|
||
</div>
|
||
<div class="space-y-4 pb-24">
|
||
<!-- GEN 1 -->
|
||
<div class="glass-panel rounded-2xl overflow-hidden border-l-4 border-l-primary">
|
||
<div class="bg-primary/10 px-6 py-3 flex justify-between items-center">
|
||
<h3 class="font-display text-sm tracking-wider flex items-center gap-2" style="">
|
||
<span class="bg-primary text-white w-6 h-6 rounded flex items-center justify-center text-xs" style="">1</span>
|
||
MATIÈRES PREMIÈRES — GÉNÉRATION 1
|
||
</h3>
|
||
<span class="text-xs text-slate-400 font-bold" style="">Total : 16 dragodindes requises</span>
|
||
</div>
|
||
<div class="p-8 flex flex-wrap gap-8 justify-center">
|
||
<div class="text-center group">
|
||
<div class="w-16 h-16 bg-slate-800 rounded-full border-2 border-amber-500 p-1 mb-2 shadow-lg transition-transform group-hover:scale-110">
|
||
<div class="w-full h-full rounded-full bg-amber-500/20"></div>
|
||
</div>
|
||
<p class="text-[10px] font-bold" style="">Amande ♂</p>
|
||
<p class="text-secondary font-bold text-sm" style="">×6</p>
|
||
</div>
|
||
<div class="text-center group">
|
||
<div class="w-16 h-16 bg-slate-800 rounded-full border-2 border-orange-500 p-1 mb-2 shadow-lg transition-transform group-hover:scale-110">
|
||
<div class="w-full h-full rounded-full bg-orange-500/20"></div>
|
||
</div>
|
||
<p class="text-[10px] font-bold" style="">Rousse ♂</p>
|
||
<p class="text-secondary font-bold text-sm" style="">×2</p>
|
||
</div>
|
||
<div class="text-center group">
|
||
<div class="w-16 h-16 bg-slate-800 rounded-full border-2 border-orange-500 p-1 mb-2 shadow-lg transition-transform group-hover:scale-110">
|
||
<div class="w-full h-full rounded-full bg-orange-500/20"></div>
|
||
</div>
|
||
<p class="text-[10px] font-bold" style="">Rousse ♀</p>
|
||
<p class="text-secondary font-bold text-sm" style="">×4</p>
|
||
</div>
|
||
<div class="text-center group">
|
||
<div class="w-16 h-16 bg-slate-800 rounded-full border-2 border-yellow-500 p-1 mb-2 shadow-lg transition-transform group-hover:scale-110">
|
||
<div class="w-full h-full rounded-full bg-yellow-500/20"></div>
|
||
</div>
|
||
<p class="text-[10px] font-bold" style="">Dorée ♀</p>
|
||
<p class="text-secondary font-bold text-sm" style="">×4</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center py-2">
|
||
<span class="material-icons-round text-primary/40 animate-pulse-bounce" style="">expand_more</span>
|
||
</div>
|
||
<!-- GEN 2 -->
|
||
<div class="glass-panel rounded-2xl overflow-hidden border-l-4 border-l-slate-500">
|
||
<div class="bg-white/5 px-6 py-3 flex justify-between items-center">
|
||
<h3 class="font-display text-sm tracking-wider flex items-center gap-2" style="">
|
||
<span class="bg-slate-700 text-white w-6 h-6 rounded flex items-center justify-center text-xs" style="">2</span>
|
||
CROISEMENTS — GÉNÉRATION 2
|
||
</h3>
|
||
</div>
|
||
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- Pairing A -->
|
||
<div class="flex flex-col items-center gap-4 bg-white/5 p-4 rounded-xl border border-white/5 ring-1 ring-primary/30">
|
||
<div class="flex items-center gap-4">
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 bg-slate-800 rounded-full border border-amber-500/50 mb-1"></div>
|
||
<p class="text-[8px] text-slate-400 uppercase" style="">Amande ♂</p>
|
||
</div>
|
||
<span class="material-icons-round text-slate-600 text-xs" style="">add</span>
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 bg-slate-800 rounded-full border border-orange-500/50 mb-1"></div>
|
||
<p class="text-[8px] text-slate-400 uppercase" style="">Rousse ♀</p>
|
||
</div>
|
||
<span class="material-icons-round text-primary text-sm" style="">arrow_forward</span>
|
||
<div class="text-center">
|
||
<div class="w-14 h-14 bg-slate-800 rounded-full border-2 border-primary mb-1 relative flex items-center justify-center">
|
||
<span class="absolute -top-1 -right-1 bg-primary text-[7px] px-1 rounded font-bold" style="">G2</span>
|
||
<div class="w-8 h-8 rounded-full bg-primary/20"></div>
|
||
</div>
|
||
<p class="text-[9px] font-bold" style="">Amande & Rousse</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-4 pt-3 border-t border-white/5 w-full justify-center">
|
||
<label class="flex items-center gap-2 cursor-pointer group" style="">
|
||
<input checked="" class="rounded-sm border-slate-700 bg-slate-900 text-primary focus:ring-primary h-4 w-4" type="checkbox"/>
|
||
<span class="text-[10px] font-medium text-slate-400" style="">Reproducteur</span>
|
||
</label>
|
||
<div class="flex items-center gap-2 bg-slate-900/80 rounded-lg px-3 py-1 border border-white/5">
|
||
<input class="bg-transparent border-none text-xs w-8 p-0 focus:ring-0 text-center font-bold text-primary" type="number" value="3"/>
|
||
<span class="text-[8px] text-slate-500 uppercase font-bold tracking-wider" style="">Couples</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Pairing B -->
|
||
<div class="flex flex-col items-center gap-4 bg-white/5 p-4 rounded-xl border border-white/5 ring-1 ring-primary/30">
|
||
<div class="flex items-center gap-4">
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 bg-slate-800 rounded-full border border-yellow-500/50 mb-1"></div>
|
||
<p class="text-[8px] text-slate-400 uppercase" style="">Dorée ♂</p>
|
||
</div>
|
||
<span class="material-icons-round text-slate-600 text-xs" style="">add</span>
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 bg-slate-800 rounded-full border border-orange-500/50 mb-1"></div>
|
||
<p class="text-[8px] text-slate-400 uppercase" style="">Rousse ♀</p>
|
||
</div>
|
||
<span class="material-icons-round text-primary text-sm" style="">arrow_forward</span>
|
||
<div class="text-center">
|
||
<div class="w-14 h-14 bg-slate-800 rounded-full border-2 border-primary mb-1 relative flex items-center justify-center">
|
||
<span class="absolute -top-1 -right-1 bg-primary text-[7px] px-1 rounded font-bold" style="">G2</span>
|
||
<div class="w-8 h-8 rounded-full bg-amber-500/20"></div>
|
||
</div>
|
||
<p class="text-[9px] font-bold" style="">Dorée & Rousse</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-4 pt-3 border-t border-white/5 w-full justify-center">
|
||
<label class="flex items-center gap-2 cursor-pointer group" style="">
|
||
<input checked="" class="rounded-sm border-slate-700 bg-slate-900 text-primary focus:ring-primary h-4 w-4" type="checkbox"/>
|
||
<span class="text-[10px] font-medium text-slate-400" style="">Reproducteur</span>
|
||
</label>
|
||
<div class="flex items-center gap-2 bg-slate-900/80 rounded-lg px-3 py-1 border border-white/5">
|
||
<input class="bg-transparent border-none text-xs w-8 p-0 focus:ring-0 text-center font-bold text-primary" type="number" value="2"/>
|
||
<span class="text-[8px] text-slate-500 uppercase font-bold tracking-wider" style="">Couples</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center py-2">
|
||
<span class="material-icons-round text-primary/40 animate-pulse-bounce" style="">expand_more</span>
|
||
</div>
|
||
<!-- GEN 3 -->
|
||
<div class="glass-panel rounded-2xl overflow-hidden border-l-4 border-l-slate-500">
|
||
<div class="bg-white/5 px-6 py-3 flex justify-between items-center">
|
||
<h3 class="font-display text-sm tracking-wider flex items-center gap-2" style="">
|
||
<span class="bg-slate-700 text-white w-6 h-6 rounded flex items-center justify-center text-xs" style="">3</span>
|
||
CROISEMENTS — GÉNÉRATION 3
|
||
</h3>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex flex-col items-center gap-4 bg-white/5 p-4 rounded-xl border border-white/5 max-w-md mx-auto ring-1 ring-primary/30">
|
||
<div class="flex items-center gap-4">
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 bg-slate-800 rounded-full border border-purple-500/50 mb-1"></div>
|
||
<p class="text-[8px] text-slate-400 uppercase" style="">Amande/Rousse</p>
|
||
</div>
|
||
<span class="material-icons-round text-slate-600 text-xs" style="">add</span>
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 bg-slate-800 rounded-full border border-amber-700/50 mb-1"></div>
|
||
<p class="text-[8px] text-slate-400 uppercase" style="">Dorée/Rousse</p>
|
||
</div>
|
||
<span class="material-icons-round text-primary text-sm" style="">arrow_forward</span>
|
||
<div class="text-center">
|
||
<div class="w-14 h-14 bg-slate-800 rounded-full border-2 border-primary mb-1 relative flex items-center justify-center">
|
||
<span class="absolute -top-1 -right-1 bg-primary text-[7px] px-1 rounded font-bold" style="">G3</span>
|
||
<div class="w-8 h-8 rounded-full bg-slate-900"></div>
|
||
</div>
|
||
<p class="text-[9px] font-bold" style="">Ebène</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-4 pt-3 border-t border-white/5 w-full justify-center">
|
||
<label class="flex items-center gap-2 cursor-pointer group" style="">
|
||
<input checked="" class="rounded-sm border-slate-700 bg-slate-900 text-primary focus:ring-primary h-4 w-4" type="checkbox"/>
|
||
<span class="text-[10px] font-medium text-slate-400" style="">Reproducteur</span>
|
||
</label>
|
||
<div class="flex items-center gap-2 bg-slate-900/80 rounded-lg px-3 py-1 border border-white/5">
|
||
<input class="bg-transparent border-none text-xs w-8 p-0 focus:ring-0 text-center font-bold text-primary" type="number" value="2"/>
|
||
<span class="text-[8px] text-slate-500 uppercase font-bold tracking-wider" style="">Couples</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center py-2">
|
||
<span class="material-icons-round text-primary/40 animate-pulse-bounce" style="">expand_more</span>
|
||
</div>
|
||
<!-- GEN 4 -->
|
||
<div class="glass-panel rounded-2xl overflow-hidden border-l-4 border-l-slate-500">
|
||
<div class="bg-white/5 px-6 py-3 flex justify-between items-center">
|
||
<h3 class="font-display text-sm tracking-wider flex items-center gap-2" style="">
|
||
<span class="bg-slate-700 text-white w-6 h-6 rounded flex items-center justify-center text-xs" style="">4</span>
|
||
CROISEMENTS — GÉNÉRATION 4
|
||
</h3>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex flex-col items-center gap-4 bg-white/5 p-4 rounded-xl border border-white/5 max-w-md mx-auto ring-1 ring-primary/30">
|
||
<div class="flex items-center gap-4">
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 bg-slate-800 rounded-full border border-slate-900 mb-1"></div>
|
||
<p class="text-[8px] text-slate-400 uppercase" style="">Ebène ♂</p>
|
||
</div>
|
||
<span class="material-icons-round text-slate-600 text-xs" style="">add</span>
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 bg-slate-800 rounded-full border border-blue-600/50 mb-1"></div>
|
||
<p class="text-[8px] text-slate-400 uppercase" style="">Indigo ♀</p>
|
||
</div>
|
||
<span class="material-icons-round text-primary text-sm" style="">arrow_forward</span>
|
||
<div class="text-center">
|
||
<div class="w-14 h-14 bg-slate-800 rounded-full border-2 border-primary mb-1 relative flex items-center justify-center">
|
||
<span class="absolute -top-1 -right-1 bg-primary text-[7px] px-1 rounded font-bold" style="">G4</span>
|
||
<div class="w-8 h-8 rounded-full bg-cyan-500/20"></div>
|
||
</div>
|
||
<p class="text-[9px] font-bold" style="">Turquoise</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-4 pt-3 border-t border-white/5 w-full justify-center">
|
||
<label class="flex items-center gap-2 cursor-pointer group" style="">
|
||
<input checked="" class="rounded-sm border-slate-700 bg-slate-900 text-primary focus:ring-primary h-4 w-4" type="checkbox"/>
|
||
<span class="text-[10px] font-medium text-slate-400" style="">Reproducteur</span>
|
||
</label>
|
||
<div class="flex items-center gap-2 bg-slate-900/80 rounded-lg px-3 py-1 border border-white/5">
|
||
<input class="bg-transparent border-none text-xs w-8 p-0 focus:ring-0 text-center font-bold text-primary" type="number" value="1"/>
|
||
<span class="text-[8px] text-slate-500 uppercase font-bold tracking-wider" style="">Couples</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center py-2">
|
||
<span class="material-icons-round text-primary animate-pulse-bounce" style="">expand_more</span>
|
||
</div>
|
||
<!-- FINAL STEP GEN 5 -->
|
||
<div class="glass-panel rounded-2xl overflow-hidden border-l-4 border-l-primary ring-1 ring-primary/20">
|
||
<div class="bg-primary/20 px-6 py-3 flex justify-between items-center">
|
||
<h3 class="font-display text-sm tracking-wider flex items-center gap-2" style="">
|
||
<span class="bg-primary text-white w-6 h-6 rounded flex items-center justify-center text-xs" style="">5</span>
|
||
ÉTAPE FINALE — GÉNÉRATION 5
|
||
</h3>
|
||
<span class="text-[10px] uppercase font-bold tracking-widest text-primary" style="">Objectif final</span>
|
||
</div>
|
||
<div class="p-8">
|
||
<div class="flex flex-col items-center gap-6 bg-primary/5 p-6 rounded-2xl border border-primary/20 opacity-60 grayscale-[0.5]">
|
||
<div class="flex items-center gap-8">
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-slate-800 rounded-full border-2 border-emerald-500/50 mb-1"></div>
|
||
<p class="text-[10px] text-slate-400" style="">Émeraude ♂</p>
|
||
</div>
|
||
<span class="material-icons-round text-slate-500" style="">add</span>
|
||
<div class="text-center">
|
||
<div class="w-16 h-16 bg-slate-800 rounded-full border-2 border-cyan-500/50 mb-1"></div>
|
||
<p class="text-[10px] text-slate-400" style="">Turquoise ♀</p>
|
||
</div>
|
||
<span class="material-icons-round text-primary" style="">arrow_forward</span>
|
||
<div class="text-center">
|
||
<div class="w-24 h-24 bg-slate-800 rounded-full border-4 border-primary mb-1 relative flex items-center justify-center shadow-xl shadow-primary/20">
|
||
<span class="absolute -top-2 -right-2 bg-primary text-xs px-2 py-0.5 rounded-full font-bold shadow-lg" style="">CIBLE</span>
|
||
<img alt="Pourpre" class="w-16 h-16 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAubvgfO9M_y6AI1RIslf8TR7z3dfXXDUaysxgQy9rn-mtjeRREg862eXeC5nazwn5SncSd6jgNY0vXdogwhX9_voY2jWgX836Z3f9zDY2_3tECSqV9xQ805xrIloAj2P8diUPNoH6rI8A1cpFkJlCepeUbic0VdZ5OY60vgWz_46pO2sWy29QZgsVTrgBrzvasr_bRJbqJ23IXw_tWOuSYdGYPI2mQY7M2oaYk6i0ZymH2DNkPzFxU-w0UrdcgTWmHq0doypPjC41D" style=""/>
|
||
</div>
|
||
<p class="text-sm font-bold text-slate-100 mt-2" style="">Pourpre</p>
|
||
<p class="text-secondary font-bold text-lg" style="">×1</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-6 pt-4 border-t border-white/5 w-full justify-center">
|
||
<label class="flex items-center gap-3 cursor-pointer group" style="">
|
||
<input class="rounded-md border-slate-700 bg-slate-900 text-primary focus:ring-primary h-5 w-5 transition-all" type="checkbox"/>
|
||
<span class="text-sm font-medium text-slate-400 group-hover:text-slate-200 transition-colors" style="">Garder comme Reproducteur</span>
|
||
</label>
|
||
<div class="flex items-center gap-3 bg-slate-900/80 rounded-xl px-4 py-2 border border-white/5">
|
||
<span class="material-icons-round text-sm text-slate-500" style="">group</span>
|
||
<input class="bg-transparent border-none text-sm w-12 p-0 focus:ring-0 text-center font-bold text-primary" type="number" value="1"/>
|
||
<span class="text-[10px] text-slate-500 uppercase font-bold tracking-wider" style="">Couples</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<footer class="p-6 border-t border-slate-200 dark:border-white/10 bg-white dark:bg-surface flex justify-between items-center shadow-2xl relative z-[60]">
|
||
<div class="flex items-center gap-4">
|
||
<div class="px-4 py-2 bg-slate-100 dark:bg-white/5 rounded-2xl flex items-center gap-4 border border-slate-200 dark:border-white/5">
|
||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-purple-700 flex items-center justify-center text-white shadow-lg">
|
||
<span class="material-icons-round" style="">auto_awesome</span>
|
||
</div>
|
||
<div>
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider leading-none mb-1" style="">Cible de réapprovisionnement</p>
|
||
<p class="text-sm font-bold text-primary" style="">Pourpre (Génération 5)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<button class="px-6 py-3 rounded-xl border border-slate-300 dark:border-white/10 font-bold text-sm hover:bg-slate-100 dark:hover:bg-white/5 transition-all text-slate-600 dark:text-slate-400" style="">
|
||
Annuler
|
||
</button>
|
||
<button class="px-10 py-3 rounded-xl bg-gradient-to-r from-primary to-purple-600 text-white font-bold text-sm flex items-center gap-3 shadow-xl shadow-primary/30 hover:shadow-primary/50 hover:-translate-y-1 active:translate-y-0 transition-all" style="">
|
||
<span class="material-icons-round text-lg" style="">save</span>
|
||
Sauvegarder ce plan
|
||
</button>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
<script>
|
||
// Mounts data for the grid
|
||
const targetGrid = document.getElementById('target-grid');
|
||
const mounts = [
|
||
{ name: 'Amande et Rousse', gen: 2, color: 'bg-amber-500' },
|
||
{ name: 'Dorée et Rousse', gen: 2, color: 'bg-amber-700' },
|
||
{ name: 'Ebène', gen: 3, color: 'bg-slate-900' },
|
||
{ name: 'Indigo', gen: 3, color: 'bg-blue-600' },
|
||
{ name: 'Turquoise', gen: 4, color: 'bg-cyan-500' },
|
||
{ name: 'Emeraude', gen: 5, color: 'bg-emerald-600' },
|
||
{ name: 'Prune', gen: 6, color: 'bg-fuchsia-800' },
|
||
{ name: 'Ivoire', gen: 7, color: 'bg-slate-100' },
|
||
{ name: 'Smaragdine', gen: 10, color: 'bg-emerald-400' }
|
||
];
|
||
|
||
mounts.forEach(m => {
|
||
const card = document.createElement('div');
|
||
card.className = "glass-panel p-3 rounded-xl border border-white/5 hover:border-primary/50 cursor-pointer group transition-all relative";
|
||
card.innerHTML = `
|
||
<div class="absolute top-2 right-2">
|
||
<span class="text-[9px] font-bold bg-slate-700 text-white px-1.5 rounded">Gen ${m.gen}</span>
|
||
</div>
|
||
<div class="w-full aspect-square bg-slate-800/30 rounded-lg mb-2 flex items-center justify-center overflow-hidden">
|
||
<div class="w-12 h-12 rounded-full ${m.color} opacity-40 blur-md group-hover:scale-125 transition-transform"></div>
|
||
</div>
|
||
<p class="text-xs font-medium text-center truncate dark:text-slate-400 group-hover:text-primary transition-colors">${m.name}</p>
|
||
`;
|
||
targetGrid.appendChild(card);
|
||
});
|
||
|
||
// Interactive state simulation for checkboxes
|
||
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
||
const updateState = (cb) => {
|
||
const parent = cb.closest('.flex-col');
|
||
if (!parent) return;
|
||
if (cb.checked) {
|
||
parent.classList.remove('opacity-60', 'grayscale-[0.5]');
|
||
parent.classList.add('ring-1', 'ring-primary/30');
|
||
} else {
|
||
parent.classList.add('opacity-60', 'grayscale-[0.5]');
|
||
parent.classList.remove('ring-1', 'ring-primary/30');
|
||
}
|
||
};
|
||
|
||
checkbox.addEventListener('change', (e) => updateState(e.target));
|
||
// Initial run
|
||
updateState(checkbox);
|
||
});
|
||
</script>
|
||
</body></html> |