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

305 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>L'Archive d'Obsidienne - Suivi de Workflow</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&amp;family=Inter:wght@300;400;500;600;700&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#a855f7", // Vibrant Purple/Amethyst
secondary: "#ec4899", // Pink accent
"background-light": "#fdfaff",
"background-dark": "#0f0913", // Deep obsidian dark
"surface-dark": "#1a1221",
"border-dark": "#2d1b3d",
},
fontFamily: {
display: ["Cinzel", "serif"],
sans: ["Inter", "sans-serif"],
mono: ["JetBrains Mono", "monospace"],
},
borderRadius: {
DEFAULT: "0.75rem",
'xl': '1rem',
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
scrollbar-width: thin;
scrollbar-color: #4b2c6d #0f0913;
}
.obsidian-glass {
background: rgba(26, 18, 33, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(168, 85, 247, 0.15);
}
.step-connector {
width: 2px;
background: linear-gradient(to bottom, #a855f7, #ec4899);
height: 40px;
margin: 0 auto;
}
.glow-amethyst {
box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}
.text-gradient {
background: linear-gradient(135deg, #e9d5ff, #fbcfe8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="text-slate-800 dark:text-slate-100 min-h-screen flex flex-col overflow-hidden" style="background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);">
<header class="h-16 border-b border-slate-200 dark:border-border-dark flex items-center justify-between px-8 backdrop-blur-md z-30 bg-transparent">
<div class="flex items-center gap-6">
<div class="h-8 w-px bg-slate-300 dark:bg-border-dark mx-2"></div>
<button class="flex items-center gap-2 text-slate-500 hover:text-primary transition-colors">
<span class="material-icons-round">arrow_back</span>
<span class="text-sm font-medium">Retour au planneur</span>
</button>
<div class="h-4 w-px bg-slate-300 dark:bg-border-dark mx-2"></div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
<span class="material-icons-round text-primary text-sm">timeline</span>
</div>
<h2 class="font-display text-lg tracking-wide uppercase text-gradient">Objectif : Pourpre et Rousse</h2>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex flex-col items-end">
<span class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Progression Globale</span>
<span class="text-lg font-mono font-bold text-secondary">14%</span>
</div>
<div class="w-48 h-2 bg-slate-200 dark:bg-border-dark rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-secondary w-[14%] rounded-full"></div>
</div>
</div>
</header>
<main class="flex-1 overflow-y-auto scroll-smooth">
<div class="max-w-6xl mx-auto p-8 space-y-6">
<div class="obsidian-glass glow-amethyst p-6 rounded-2xl flex items-center justify-between">
<div class="flex items-center gap-6">
<div class="relative">
<div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 border border-primary/30 flex items-center justify-center overflow-hidden">
<img alt="Dragodinde Cible" class="w-16 h-16 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCoKu4mNqXi35MRSKnXVTjEuySXB77DjEY_yLEczHlrEaSZq1nML0kCKxwokv0FadOz-tPD9IFRhICZqDs7kz3XUVRH_tA2_bccC4eC8O-wfP6EpDLHVYXEVaeLfjgscRdjN5_DvmiY2akAFIB84r6GvsVV4wa5Pqpz68INTvKdJd7fI9JShSMVZW3u-0MC-xHmlSWA94RHuUp2tlQBhl5_-rwf3wIpN4M5tPWP0P0h7Eqqk9kLqQruN-BTIEYaYiIfv5d1UDvyJa-9"/>
</div>
<span class="absolute -top-2 -right-2 bg-secondary px-2 py-0.5 rounded text-[10px] font-bold text-white shadow-lg">GEN 6</span>
</div>
<div>
<h3 class="text-2xl font-display font-bold tracking-wide">1x Pourpre et Rousse</h3>
<p class="text-slate-400 text-sm mt-1">Estimation : ~42 jours de reproduction • Plan de croisement optimisé</p>
</div>
</div>
<div class="flex gap-4">
<div class="text-center px-4 py-2 bg-white/5 rounded-xl border border-white/5">
<p class="text-[10px] uppercase tracking-widest text-slate-500 mb-1">Naissances</p>
<p class="font-mono text-xl font-bold">0 / 21</p>
</div>
<div class="text-center px-4 py-2 bg-white/5 rounded-xl border border-white/5">
<p class="text-[10px] uppercase tracking-widest text-slate-500 mb-1">Croisements</p>
<p class="font-mono text-xl font-bold">0 / 8</p>
</div>
</div>
</div>
<div class="relative">
<div class="flex items-center gap-3 mb-4">
<span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-[10px] font-bold tracking-tighter uppercase border border-primary/30">Étape 1/6</span>
<h4 class="font-display text-sm tracking-[0.2em] uppercase text-slate-300">Géniteurs de Base (Matières Premières)</h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="obsidian-glass p-4 rounded-xl flex items-center gap-4 hover:border-primary/50 transition-all cursor-pointer group">
<div class="w-14 h-14 bg-slate-800/50 rounded-lg flex items-center justify-center relative">
<img alt="Rousse" class="w-10 h-10 opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBocEHO9lFNQTkugJfpR3cNLYnhj7h16V_DN4IMbeDf8vtGwues9fwpGeUxhMAveO9URvc-E2tc8XWN53BFXdOyYUgJ9VjVjQBTGWN3U9my7ImWn5n40xmnD-J1BNLEgwxslhss50HN82FDrBagfpC_YnKXV_Pj1OHxa5SI822GYJCnbOeNCJmnyH1yq0fD0aVHe6NDY1eC0VEq_WnYBSUVjuZ7raYyTRni2RAN72VvLUwgfo6c065ZB1hF8o1A7bNP64qyYArsl_c0"/>
<span class="absolute bottom-0 right-0 bg-orange-500/20 text-orange-400 text-[8px] px-1 font-bold rounded">G1</span>
</div>
<div class="flex-1">
<p class="font-semibold text-sm">Dragodinde Rousse</p>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-slate-500">Besoin: <span class="text-slate-200">5</span></span>
<div class="flex items-center gap-2">
<span class="text-xs font-mono font-bold text-primary">0 / 5</span>
<div class="w-12 h-1 bg-white/10 rounded-full overflow-hidden">
<div class="h-full bg-primary w-0"></div>
</div>
</div>
</div>
</div>
</div>
<div class="obsidian-glass p-4 rounded-xl flex items-center gap-4 hover:border-primary/50 transition-all cursor-pointer group border-emerald-500/20 bg-emerald-500/5">
<div class="w-14 h-14 bg-slate-800/50 rounded-lg flex items-center justify-center relative">
<img alt="Amande" class="w-10 h-10 opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyA9PM-9qDKQec3mMWUdg29cUN3F-4M6ST6sgCAyrXy_vf99mviA33fYNgq-7zt-m5LkWIlApVCM5RiPJuYy9QEy7U7ofnxTq7WO3q7s7L7l5VoyEbroiQdhnHHmGOTAMUAt-zgmizspyiJDoGjeYWv7pH6z0V2kZBMKJVEDxunMTO3ey2HYPoxUYjrC_WKrmiX7gnnnvwN59YbVjb22vQx1DGVDlqze_t-f9VNMTqv1Z6wYs83VP3zkWPj6Z8dn-Ft8bwqLyxKDKo"/>
<span class="absolute bottom-0 right-0 bg-emerald-500/20 text-emerald-400 text-[8px] px-1 font-bold rounded">G1</span>
</div>
<div class="flex-1">
<div class="flex items-center justify-between">
<p class="font-semibold text-sm">Dragodinde Amande</p>
<span class="material-icons-round text-emerald-500 text-sm">check_circle</span>
</div>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-slate-500">Besoin: <span class="text-slate-200">4</span></span>
<div class="flex items-center gap-2">
<span class="text-xs font-mono font-bold text-emerald-400">4 / 4</span>
<div class="w-12 h-1 bg-white/10 rounded-full overflow-hidden">
<div class="h-full bg-emerald-500 w-full"></div>
</div>
</div>
</div>
</div>
</div>
<div class="obsidian-glass p-4 rounded-xl flex items-center gap-4 hover:border-primary/50 transition-all cursor-pointer group">
<div class="w-14 h-14 bg-slate-800/50 rounded-lg flex items-center justify-center relative">
<img alt="Dorée" class="w-10 h-10 opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_2jjG8HOhZSNs4GDsGtFUzqjGzSJn1yFMaAtiYIwtSr1i4ukS1lEWFZ079Pv5Tw09mvw2yiBEWOYdFrRwun4LM9i-pGnR7P9b6pYpuNnRSaojkNLh7f6aMPxl2974om_CjM60pObo6XqelcoXnq79lC4cs2R5rtnfz7tSfXuz8gxsXXVJs9BQxNotSFLXBCzWgg4CZXglzo3iVpPrrhXolBt4oiR9bgnlbRWPG1gzg73QrZHF89FdPrSivvoQb8xxqsW38BsNfVHF"/>
<span class="absolute bottom-0 right-0 bg-yellow-500/20 text-yellow-400 text-[8px] px-1 font-bold rounded">G1</span>
</div>
<div class="flex-1">
<p class="font-semibold text-sm">Dragodinde Dorée</p>
<div class="flex items-center justify-between mt-2">
<span class="text-xs text-slate-500">Besoin: <span class="text-slate-200">2</span></span>
<div class="flex items-center gap-2">
<span class="text-xs font-mono font-bold text-primary">0 / 2</span>
<div class="w-12 h-1 bg-white/10 rounded-full overflow-hidden">
<div class="h-full bg-primary w-0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="step-connector"></div>
<div>
<div class="flex items-center gap-3 mb-4">
<span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-[10px] font-bold tracking-tighter uppercase border border-primary/30">Étape 2/6</span>
<h4 class="font-display text-sm tracking-[0.2em] uppercase text-slate-300">Croisements — Génération 2</h4>
</div>
<div class="space-y-4">
<div class="obsidian-glass p-6 rounded-xl relative overflow-hidden">
<div class="absolute top-0 right-0 bg-white/5 px-4 py-1 rounded-bl-xl border-l border-b border-white/5 text-[10px] font-bold text-slate-500 uppercase">Couple Actif</div>
<div class="flex items-center justify-center gap-12">
<div class="flex items-center gap-4 text-center">
<div class="w-16 h-16 rounded-xl bg-slate-800 flex items-center justify-center relative border border-white/5">
<img alt="Parent 1" class="w-12 h-12" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDza0z0RrsUScR9foq9x4Id3lHyEHM8b4kjomX9WHXhQkwqYaapBmqunPABwrBo4VqT6B_oVL77KBbTq3MJmjZxFKQDyrvsJM6IoJchPtqMK29E3jhp20kVa2S7inUmI3OWv0VE4lYIn3cteIg6jNAZ_xRFeHjCJhucAJ3q5FtA-cAIUtH35WbvXVSQcRCH0IUHRCxpqo0NfBeH0Ec-N70swYENSJ_PCPRQOkSUYkmHlGjMO5diZybOCqVxxnayVXFslp7EqHvnORla"/>
<span class="absolute -top-2 -left-2 bg-emerald-500/20 text-emerald-400 text-[8px] px-1.5 py-0.5 font-bold rounded">G1</span>
</div>
<span class="text-slate-500 font-bold">+</span>
<div class="w-16 h-16 rounded-xl bg-slate-800 flex items-center justify-center relative border border-white/5">
<img alt="Parent 2" class="w-12 h-12" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBREtxx1FAMTP5eSgKwcHSCmNiDKRZ-8MFTQjUq3BVRKAEl1L21YOP981NLH5GIjtxYGWB4Ar9TPWcpTjwJXVizukh0G3uF81cYALzK40Kicrt-YxC9_21RVBdic1MbQ3Y2A4dXHWLQfA0Hjhn3ykvbx5DXAPQ4ZrcNXksCk0YWEmTS_3Z_AO5NuYedZaEnFyMrNi6pT31M0DISu_RL-1TffWA8DtyTQ98bdAmxrgsds_81OK12pzp4sBwoWSlbiMa38mepfGbryps6"/>
<span class="absolute -top-2 -right-2 bg-orange-500/20 text-orange-400 text-[8px] px-1.5 py-0.5 font-bold rounded">G1</span>
</div>
</div>
<span class="material-icons-round text-primary text-3xl">double_arrow</span>
<div class="flex items-center gap-6">
<div class="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center relative border-2 border-primary/40">
<img alt="Result" class="w-14 h-14" src="https://lh3.googleusercontent.com/aida-public/AB6AXuChxzuJKl7IwLukMnkl63Ea0oMoaB3BMVHFY8Ikktabn8uGhO9XfyBkIEmmnEsa24yvNBJX1GCM8dXVE5WxPiGlpnpid8qCXa9OS6IS1HNwJTeZF6WZh9oMJwInUzjkwFtU__zyn-FPmldyvzAywLnGi36aTYc1YRjZ9Q5k9hmJ7yE0KPSW6J_Kxkw1k_JphFnlgGM76yfe1GIhS2VYjEgY4xYEDdwbQ2PspIKIjRhgVVmyzdh99ZQOLJIus2VoJcz85ASeD9l4KVD_"/>
<span class="absolute -bottom-2 -right-2 bg-primary text-white text-[10px] px-2 py-0.5 font-bold rounded shadow-lg">G2</span>
</div>
<div class="text-left">
<p class="font-bold text-lg">Amande et Rousse</p>
<p class="text-xs text-slate-500 mb-2 font-medium">Objectif : <span class="text-slate-200">3 réussis</span></p>
<div class="flex items-center gap-3">
<div class="flex gap-1">
<span class="w-2 h-2 rounded-full bg-primary shadow-[0_0_8px_rgba(168,85,247,0.6)]"></span>
<span class="w-2 h-2 rounded-full bg-primary/20"></span>
<span class="w-2 h-2 rounded-full bg-primary/20"></span>
</div>
<span class="text-xs font-mono font-bold text-primary">1 / 3</span>
</div>
</div>
</div>
</div>
</div>
<div class="obsidian-glass p-6 rounded-xl opacity-60">
<div class="flex items-center justify-center gap-12">
<div class="flex items-center gap-4 text-center">
<div class="w-16 h-16 rounded-xl bg-slate-800 flex items-center justify-center relative border border-white/5">
<img alt="Parent 1" class="w-12 h-12" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6J8mSJ9lOBN8lxvUpIGvivBaqALKlL7SHNH8RRrL4m0LWXsquT9c2BVpi2Yz93NAggWc_LyUz4mD7Nw0m35yCAm15sshTcVDkSR5uzDdqYhbytSK0DpMIILsc9A-e2XdfgyqvFTfb7PlSYzZjzswtFRg3MieZrrr9HubftsyXjX3holy2mUZLcfykrv6jWvAha8IWVBkmx3YXtb4YJjK3Sx8PcZpBKhQlBRywOX00flOxAkdX1CHvwyBjA_LIfPsZBS5kQSdGV2dZ"/>
<span class="absolute -top-2 -left-2 bg-orange-500/20 text-orange-400 text-[8px] px-1.5 py-0.5 font-bold rounded">G1</span>
</div>
<span class="text-slate-500 font-bold">+</span>
<div class="w-16 h-16 rounded-xl bg-slate-800 flex items-center justify-center relative border border-white/5">
<img alt="Parent 2" class="w-12 h-12" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAHIkloRWUlYHmSWpbDWUSvdL9avx28sqz463AxAuIIQXWuW5YNMz2DplTGtg7IbTYdnhOFjX9j3kbrI5V3xUEPkxApedxT6nn-xbWI_RbwqvMhNWca1Po0piz6Zdjkdn3RwSiFHr1oqu2XDHFyiVblfiVhdGybI62ckdskq4LFZ6XRQeeAQHZXCcxPvgug4M6fYt-9XKSRqtnh7pVpX3e_CPTlVP7vgWpF_Xrff3UAynpHdH7a-GmdZvwLLcUlXZrlu3odxIG9-5tf"/>
<span class="absolute -top-2 -right-2 bg-yellow-500/20 text-yellow-400 text-[8px] px-1.5 py-0.5 font-bold rounded">G1</span>
</div>
</div>
<span class="material-icons-round text-slate-700 text-3xl">double_arrow</span>
<div class="flex items-center gap-6">
<div class="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center relative border border-white/10">
<img alt="Result" class="w-14 h-14 grayscale opacity-40" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVW-vdt9zhIcIW99l32-Bv_1s1f1wB83YyC3AVHA7PX7Q9Z707fi91Pxog9Cq1Q4MyeWebnm1u1sUoaBvJet26M-A9ODYazuZXsM_wmebUK4OhlwZ0prjlkSOzrZdCENm6bXiZ-h6HPNazpkvdC10QzodONxcjq0Oeyf4H8xS3rjs6nq2_vWl8mdBwJ70B8GEtyF0bf7tGA4vJW1zW-bSH42eXuSVajkcY9SPcfucdOz5ksnDqQaINJzCLSynKMkb6fq31h6faBWyg"/>
<span class="absolute -bottom-2 -right-2 bg-slate-700 text-white text-[10px] px-2 py-0.5 font-bold rounded">G2</span>
</div>
<div class="text-left">
<p class="font-bold text-lg text-slate-500">Dorée et Rousse</p>
<p class="text-xs text-slate-600 mb-2 font-medium">Objectif : <span class="text-slate-400">1 réussi</span></p>
<div class="flex items-center gap-3">
<div class="flex gap-1">
<span class="w-2 h-2 rounded-full bg-slate-700"></span>
</div>
<span class="text-xs font-mono font-bold text-slate-600">0 / 1</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="step-connector"></div>
<div class="opacity-40">
<div class="flex items-center gap-3 mb-4">
<span class="bg-slate-800 text-slate-500 px-3 py-1 rounded-full text-[10px] font-bold tracking-tighter uppercase border border-white/5">Étape 3/6</span>
<h4 class="font-display text-sm tracking-[0.2em] uppercase text-slate-600">Croisements — Génération 3</h4>
</div>
<div class="obsidian-glass p-12 rounded-xl flex items-center justify-center border-dashed border-slate-800">
<div class="text-center">
<span class="material-icons-round text-slate-700 text-4xl mb-2">lock</span>
<p class="text-sm font-medium text-slate-600">Terminez les étapes précédentes pour débloquer</p>
</div>
</div>
</div>
<div class="h-20"></div>
</div>
</main>
<footer class="bg-surface-dark border-t border-border-dark p-4 flex items-center justify-between px-8 z-30">
<div class="flex items-center gap-8">
<div class="flex flex-col">
<span class="text-[10px] text-slate-500 uppercase font-bold tracking-wider">État du stock global</span>
<div class="flex gap-4 mt-1">
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
<span class="text-xs font-mono">4 Amandes</span>
</div>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-orange-500"></span>
<span class="text-xs font-mono">0/5 Rousses</span>
</div>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
<span class="text-xs font-mono">0/2 Dorées</span>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="px-4 py-1.5 rounded-lg bg-primary/10 border border-primary/20 text-primary text-xs font-bold flex items-center gap-2">
<span class="material-icons-round text-sm">auto_awesome</span>
Calculateur de rentabilité : Optimal
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-xl font-bold text-sm transition-all shadow-lg shadow-primary/20 flex items-center gap-2">
<span class="material-icons-round text-sm">sync</span>
Mettre à jour le stock
</button>
</div>
</footer>
</body></html>
Reference in New Issue View Git Blame Copy Permalink