mickael/dd-timer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity
0c3b5e27a7
dd-timer/refonte_graphique/accouplement.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

260 lines
16 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"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Manrope:wght@600;700;800&amp;family=Plus+Jakarta+Sans:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary-fixed": "#c185fd",
"on-error": "#490013",
"surface-bright": "#302939",
"primary": "#cb97ff",
"surface-dim": "#100c16",
"inverse-primary": "#7c41b5",
"on-secondary": "#4a002f",
"background": "#0a0a0f",
"on-tertiary-container": "#594700",
"on-primary": "#46007c",
"on-tertiary-fixed": "#433500",
"error-container": "#a70138",
"on-primary-fixed-variant": "#430077",
"secondary-fixed-dim": "#ffabd1",
"surface-container-lowest": "#000000",
"primary-dim": "#be83fa",
"outline": "#7a7380",
"surface-container-highest": "#292332",
"surface-container-low": "#16111d",
"on-secondary-container": "#ffbeda",
"outline-variant": "#4b4652",
"on-surface-variant": "#b0a8b6",
"tertiary-fixed-dim": "#eec200",
"tertiary-dim": "#eec200",
"surface": "#100c16",
"tertiary-container": "#fed01b",
"tertiary-fixed": "#fed01b",
"surface-tint": "#cb97ff",
"primary-fixed-dim": "#b378ef",
"surface-container": "#1c1724",
"error": "#ff6e84",
"error-dim": "#d73357",
"on-secondary-fixed": "#690045",
"secondary-fixed": "#ffc0db",
"inverse-on-surface": "#59535f",
"primary-container": "#c185fd",
"on-background": "#f1e8f7",
"secondary-container": "#85145a",
"surface-container-high": "#231d2b",
"on-error-container": "#ffb2b9",
"on-tertiary-fixed-variant": "#645000",
"on-primary-container": "#360061",
"on-secondary-fixed-variant": "#922164",
"on-tertiary": "#645000",
"surface-variant": "#292332",
"secondary": "#f673b7",
"inverse-surface": "#fef7ff",
"tertiary": "#ffe083",
"on-surface": "#f1e8f7",
"secondary-dim": "#f271b5",
"on-primary-fixed": "#000000"
},
fontFamily: {
"headline": ["Manrope"],
"body": ["Inter"],
"label": ["Plus Jakarta Sans"]
},
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
},
},
}
</script>
<style>
body {
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
min-height: 100vh;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.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: #4b4652;
border-radius: 10px;
}
</style>
</head>
<body class="text-on-surface font-body selection:bg-primary/30">
<!-- TopNavBar (Now full width) -->
<header class="sticky top-0 w-full flex justify-between items-center px-8 z-40 h-16 border-b border-white/5 bg-[#171721]/70 backdrop-blur-md font-manrope font-semibold text-sm uppercase tracking-widest">
<div class="flex items-center gap-12">
<nav class="flex gap-6">
<a class="text-[#b0a8b6] hover:text-[#cb97ff] pb-4 transition-colors" href="#">Dashboard</a>
<a class="text-[#b0a8b6] hover:text-[#cb97ff] pb-4 transition-colors" href="#">Enclos</a>
<a class="text-[#f1e8f7] border-b-2 border-[#cb97ff] pb-4" href="#">Statistiques</a>
</nav>
</div>
<div class="flex items-center gap-4">
</div>
</header>
<!-- Main Content (Full width, no left margin) -->
<main class="p-8 min-h-[calc(100vh-4rem)] max-w-[1600px] mx-auto">
<!-- Parent Selection Layout -->
<div class="grid grid-cols-12 gap-6 mb-8">
<!-- Parent 1 Selection -->
<section class="col-span-12 lg:col-span-5 flex flex-col gap-4">
<div class="flex justify-between items-end px-2">
<h2 class="font-headline text-lg font-bold text-on-surface uppercase tracking-tighter">Sélection du Parent 1</h2>
<span class="text-[10px] text-secondary font-bold font-label px-2 py-0.5 rounded bg-secondary-container/20">MÂLE REQUIS</span>
</div>
<div class="h-48 rounded-2xl glass-panel flex items-center justify-center group cursor-pointer hover:bg-white/10 transition-all">
<div class="text-center">
<div class="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl text-primary opacity-40">add</span>
</div>
<p class="text-xs font-label font-medium text-on-surface-variant">Cliquer pour choisir un mâle</p>
</div>
</div>
</section>
<!-- Pairing Visualization -->
<div class="col-span-12 lg:col-span-2 flex flex-col items-center justify-center gap-4 py-8 lg:py-0">
<div class="w-12 h-12 rounded-full bg-gradient-to-tr from-primary to-secondary flex items-center justify-center shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-on-primary-fixed" style="font-variation-settings: 'FILL' 1;">favorite</span>
</div>
<div class="w-full flex flex-col gap-4 mb-4">
<div class="space-y-1.5">
<label class="block text-[10px] font-headline font-bold text-on-surface-variant uppercase tracking-widest text-center px-1">Nombre de couples</label>
<input class="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-center text-sm font-bold text-primary focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-all" min="1" type="number" value="1"/>
</div>
<div class="space-y-1.5">
<label class="block text-[10px] font-headline font-bold text-on-surface-variant uppercase tracking-widest text-center px-1">Bébés obtenus</label>
<input class="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-center text-sm font-bold text-secondary focus:ring-1 focus:ring-secondary focus:border-secondary outline-none transition-all" min="0" type="number" value="1"/>
</div>
</div>
<button class="px-6 py-2.5 bg-gradient-to-r from-primary to-primary-container text-on-primary font-headline font-extrabold text-xs rounded-full shadow-lg shadow-primary/30 active:scale-[0.98] transition-all">ENREGISTRER</button>
</div>
<!-- Parent 2 Selection -->
<section class="col-span-12 lg:col-span-5 flex flex-col gap-4">
<div class="flex justify-between items-end px-2">
<h2 class="font-headline text-lg font-bold text-on-surface uppercase tracking-tighter">Sélection du Parent 2</h2>
<span class="text-[10px] text-primary font-bold font-label px-2 py-0.5 rounded bg-primary-container/20">FEMELLE REQUISE</span>
</div>
<div class="h-48 rounded-2xl glass-panel flex items-center justify-center group cursor-pointer hover:bg-white/10 transition-all">
<div class="text-center">
<div class="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl text-secondary opacity-40">add</span>
</div>
<p class="text-xs font-label font-medium text-on-surface-variant">Cliquer pour choisir une femelle</p>
</div>
</div>
</section>
</div>
<!-- Filters & Inventory Grid -->
<div class="glass-panel rounded-3xl p-6 shadow-xl">
<!-- Generation Chips -->
<div class="flex flex-wrap items-center gap-2 mb-8 border-b border-white/10 pb-6">
<span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mr-4">Générations</span>
<button class="px-4 py-1.5 rounded-full bg-primary text-on-primary text-[11px] font-bold font-label">Toutes</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 1</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 2</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 3</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 4</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 5</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 6</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 7</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 8</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 9</button>
<button class="px-4 py-1.5 rounded-full bg-white/5 text-on-surface-variant hover:text-on-surface text-[11px] font-bold font-label transition-colors">Gen 10</button>
</div>
<!-- Dense Grid of Dragodindes -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
<!-- Dragon Card -->
<div class="bg-white/5 rounded-2xl p-3 border border-white/5 hover:border-primary/40 group cursor-pointer transition-all hover:shadow-lg hover:shadow-black/40">
<div class="relative aspect-square rounded-xl bg-white/5 mb-3 flex items-center justify-center overflow-hidden">
<img alt="stylized digital illustration of a colorful fantasy creature icon" class="w-16 h-16 opacity-80 group-hover:scale-110 transition-transform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDRM-afQsjjBpV0HP4BYAI80wKFk5S0M67ep684jxQ2BDLO8JS-DEpHuiAdQgcKcOIkYh05r6ONm9mzqnhjsh6ds_u1_oxPT_naIl7A5jPtaBbzxCodn-dhpT_rmthdfzuIp5VHj4VFowFxL_9IIFFXvKhXYKKyyFhafw2MCF6Y1CIm5Rvk4DRut0eu0xor8BieftbB41EUx4MwxV0N_b0xO9DRFM9OECBXX01uUnpRqADH6aysiMEKNHeikR41DXtKoFt_9ASwDwjt"/>
<div class="absolute top-1 right-1 px-1.5 py-0.5 rounded-md bg-black/60 backdrop-blur text-[8px] font-bold text-tertiary">GEN 1</div>
</div>
<div class="space-y-1">
<p class="text-[11px] font-bold text-on-surface truncate">Rousse</p>
<div class="flex justify-between items-center">
<span class="text-[9px] text-on-surface-variant font-label">Niv. 17</span>
<span class="w-2 h-2 rounded-full bg-tertiary"></span>
</div>
</div>
</div>
<div class="bg-white/5 rounded-2xl p-3 border border-white/5 hover:border-primary/40 group cursor-pointer transition-all hover:shadow-lg hover:shadow-black/40">
<div class="relative aspect-square rounded-xl bg-white/5 mb-3 flex items-center justify-center overflow-hidden">
<img alt="stylized digital illustration" class="w-16 h-16 opacity-80 group-hover:scale-110 transition-transform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhsMf1JFbigN3qPl53FehUJQhlj_A6JRTo1pDS0dPzl6iaWGLABthGR3GE_eg7Foio2Mzm8MguOliXQHnteMs5sNAJmoVn2_sJfJq7Hq4LaLedXVuRbvdZIN3honqSubxZlHPUM8A1bwBa3RCJz9yKDmlqoi1x_gOZu6qGbhEBbdwJrEMp4l1VlAxYx7x3zRPjJvbTS3pJWsbFncHCLwhWx_Vf6I21O34kgFInRusWRkbtqpHkYa_sUL_yj-GZTrSqLur2W2dK-XFa"/>
<div class="absolute top-1 right-1 px-1.5 py-0.5 rounded-md bg-black/60 backdrop-blur text-[8px] font-bold text-tertiary">GEN 1</div>
</div>
<div class="space-y-1">
<p class="text-[11px] font-bold text-on-surface truncate">Amande</p>
<div class="flex justify-between items-center">
<span class="text-[9px] text-on-surface-variant font-label">Niv. 94</span>
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
</div>
</div>
</div>
<div class="bg-white/5 rounded-2xl p-3 border border-white/5 hover:border-primary/40 group cursor-pointer transition-all hover:shadow-lg hover:shadow-black/40">
<div class="relative aspect-square rounded-xl bg-white/5 mb-3 flex items-center justify-center overflow-hidden">
<img alt="stylized digital illustration" class="w-16 h-16 opacity-80 group-hover:scale-110 transition-transform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDRZsFBYf10uMTQEyysxPn7_Z9SMLi73puPVwzIS6mPEs8k6d4zimbR0zfKm45AiPOzgBFZu0XmUa4njK-UBZYLbhDuVrouSnetSVlSzRSrIYYGS6vt0cmtEmS1BurlJ1RUIjrken1K51z6shq8xwOLa0csjR9P-92FBu3UROyMcXsYErlF3IVtV-zIjiVSaeAnjBKH-lAh68UGkurrzDwGJ6zIJ4_EuBA7jJmT82uJPwFQi6NlS4I-pRfnv0Zy_XEA_cqjjSoOq5Y4"/>
<div class="absolute top-1 right-1 px-1.5 py-0.5 rounded-md bg-black/60 backdrop-blur text-[8px] font-bold text-tertiary">GEN 1</div>
</div>
<div class="space-y-1">
<p class="text-[11px] font-bold text-on-surface truncate">Dorée</p>
<div class="flex justify-between items-center">
<span class="text-[9px] text-on-surface-variant font-label">Niv. 80</span>
<span class="w-2 h-2 rounded-full bg-outline-variant"></span>
</div>
</div>
</div>
<div class="bg-white/5 rounded-2xl p-3 border border-white/5 hover:border-primary/40 group cursor-pointer transition-all hover:shadow-lg hover:shadow-black/40">
<div class="relative aspect-square rounded-xl bg-white/5 mb-3 flex items-center justify-center overflow-hidden">
<img alt="stylized digital illustration" class="w-16 h-16 opacity-80 group-hover:scale-110 transition-transform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAp7D0WuZUSm9OFonKWZCGCLzuEKAp1xabohZcfhge-ku3-dfwypsxCRiI84B_4794z0-Ws3JtnWzEBTqthQaOqmwsrU4-_A_K1-LGgi9Cn04QdTrq__1yK2zs6CRuRFDYDsIUH5w4asdaof3OY76ZmStYXMQ0UAMk3ezJZ7oM9ZnZav4gRacHMleej6K_jqp__W2ZphV075XgiGQZXgiCtp40l2SM_dX9H1sauDDTNxwK5M7dEvwjGbxPKddcKsCJ-L3FsJkZ1qj1e"/>
<div class="absolute top-1 right-1 px-1.5 py-0.5 rounded-md bg-black/60 backdrop-blur text-[8px] font-bold text-tertiary">GEN 2</div>
</div>
<div class="space-y-1">
<p class="text-[11px] font-bold text-on-surface truncate">Indigo</p>
<div class="flex justify-between items-center">
<span class="text-[9px] text-on-surface-variant font-label">Niv. 46</span>
<span class="w-2 h-2 rounded-full bg-tertiary"></span>
</div>
</div>
</div>
</div>
<!-- Load More / Pagination -->
<div class="mt-8 flex justify-center">
<button class="flex items-center gap-2 px-6 py-2 rounded-xl bg-white/5 text-[11px] font-bold text-on-surface-variant hover:text-on-surface transition-all">
VOIR PLUS DE DRAGODINDES
<span class="material-symbols-outlined text-sm">expand_more</span>
</button>
</div>
</div>
</main>
<!-- Footer Mini Data (Full width) -->
<footer class="w-full px-8 py-4 border-t border-white/5 flex justify-between items-center text-[10px] text-on-surface-variant/60 font-label tracking-widest uppercase bg-black/20">
<div class="flex gap-6">
<span>Archive ID: #882-AMTHST</span>
<span>Total Accouplements: 1,204</span>
</div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary shadow-[0_0_8px_rgba(203,151,255,0.6)]"></span>
SYSTEM ONLINE
</div>
</footer>
</body></html>
Reference in New Issue View Git Blame Copy Permalink