chore: gitignore refonte_graphique/ et .claude/
Supprime les maquettes graphiques et les fichiers Claude du suivi Git. Les fichiers restent sur le disque local. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
0c3b5e27a7
commit
a98ee9c029
4
.gitignore
vendored
4
.gitignore
vendored
@ -15,3 +15,7 @@ test-results/
|
||||
playwright-report/
|
||||
# Coverage
|
||||
coverage/
|
||||
# Maquettes graphiques
|
||||
refonte_graphique/
|
||||
# Claude Code
|
||||
.claude/
|
||||
|
||||
@ -1,260 +0,0 @@
|
||||
<!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&family=Manrope:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600&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: {
|
||||
"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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
@ -1,361 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="fr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Obsidienne - Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cinzel:wght@400;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#a855f7",
|
||||
"background-light": "#f8fafc",
|
||||
"background-dark": "#0a0a0f",
|
||||
"obsidian": "#121017",
|
||||
"amethyst": "#a855f7",
|
||||
"glass": "rgba(23, 23, 33, 0.6)",
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Cinzel", "serif"],
|
||||
sans: ["Inter", "sans-serif"],
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: "0.75rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
||||
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);
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-200 transition-colors duration-300">
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
<header class="h-16 flex-shrink-0 bg-white/5 dark:bg-transparent border-b border-white/5 flex items-center justify-between px-10 glass-panel border-none rounded-none">
|
||||
<div class="flex items-center gap-10 h-full">
|
||||
<a class="h-full flex items-center border-b-2 border-primary text-primary font-semibold text-sm relative" href="#">
|
||||
Tableau de bord
|
||||
<span class="absolute -bottom-[1px] left-0 w-full h-[2px] bg-primary rounded-full"></span>
|
||||
</a>
|
||||
<a class="h-full flex items-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-200 font-semibold text-sm transition-all" href="#">Enclos</a>
|
||||
<a class="h-full flex items-center border-b-2 border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-200 font-semibold text-sm transition-all" href="#">Statistiques</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-10 space-y-12">
|
||||
<section>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">Statistiques Globales</h2>
|
||||
<button class="text-sm text-rose-500 hover:text-rose-400 font-bold flex items-center gap-2">
|
||||
<span class="material-icons-round text-base">restart_alt</span>
|
||||
Réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
|
||||
<div class="glass-panel p-6 rounded-2xl">
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Total Bébés</p>
|
||||
<div class="flex items-baseline gap-3">
|
||||
<span class="text-5xl font-display font-extrabold text-primary">13</span>
|
||||
<span class="text-sm text-green-500 font-bold">+2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-panel p-6 rounded-2xl">
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Dragodindes Actives</p>
|
||||
<span class="text-5xl font-display font-extrabold text-primary">15</span>
|
||||
</div>
|
||||
<div class="glass-panel p-6 rounded-2xl">
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Couples Formés</p>
|
||||
<span class="text-5xl font-display font-extrabold text-primary">35</span>
|
||||
</div>
|
||||
<div class="glass-panel p-6 rounded-2xl">
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Taux de Réussite</p>
|
||||
<span class="text-5xl font-display font-extrabold text-primary">37%</span>
|
||||
</div>
|
||||
<div class="glass-panel p-6 rounded-2xl border-primary/20 bg-primary/5">
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Races Obtenues</p>
|
||||
<span class="text-5xl font-display font-extrabold text-primary">2</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-stretch">
|
||||
<div class="lg:col-span-8 space-y-12">
|
||||
<section>
|
||||
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-6">Aperçu - Tous les enclos</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Enclos Alpha -->
|
||||
<div class="glass-panel p-8 rounded-3xl hover:border-primary/40 transition-all flex flex-col gap-6">
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-display text-2xl font-bold tracking-wide">ENCLOS ALPHA</h3>
|
||||
<p class="text-xs font-bold flex items-center justify-end gap-2 text-green-500">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span> Actif
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<div class="flex flex-col">
|
||||
<p class="text-4xl font-display font-extrabold leading-none">10 <span class="text-base font-sans text-slate-500 font-medium ml-1">DD</span></p>
|
||||
<p class="text-[11px] text-slate-400 uppercase tracking-widest mt-1 font-bold">Capacité max</p>
|
||||
</div>
|
||||
<div class="space-y-1.5 text-right">
|
||||
<p class="text-xs font-bold text-primary flex items-center justify-end gap-2">
|
||||
<span class="material-icons-round text-sm">hourglass_top</span>
|
||||
Restant: 02:45:00
|
||||
</p>
|
||||
<p class="text-xs text-slate-500 flex items-center justify-end gap-2 font-medium">
|
||||
<span class="material-icons-round text-sm">schedule</span>
|
||||
Écoulé: 01:15:00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<span class="px-3 py-1.5 rounded-lg bg-amber-500/10 text-amber-500 text-xs font-bold flex items-center gap-2 border border-amber-500/20">
|
||||
<span class="material-icons-round text-sm">restaurant</span> Mangeoire
|
||||
</span>
|
||||
<span class="px-3 py-1.5 rounded-lg bg-pink-500/10 text-pink-500 text-xs font-bold flex items-center gap-2 border border-pink-500/20">
|
||||
<span class="material-icons-round text-sm">spa</span> Caresseur
|
||||
</span>
|
||||
</div>
|
||||
<button class="w-full py-3.5 bg-white/5 hover:bg-primary/20 text-slate-300 hover:text-primary rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-3 border border-white/5">
|
||||
Gérer cet enclos
|
||||
<span class="material-icons-round text-base">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Enclos Gamma -->
|
||||
<div class="glass-panel p-8 rounded-3xl hover:border-primary/40 transition-all flex flex-col gap-6 ring-1 ring-primary/20">
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-display text-2xl font-bold tracking-wide">ENCLOS GAMMA</h3>
|
||||
<p class="text-xs font-bold flex items-center justify-end gap-2 text-green-500">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> Actif
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<div class="flex flex-col">
|
||||
<p class="text-4xl font-display font-extrabold leading-none">5 <span class="text-base font-sans text-slate-500 font-medium ml-1">DD</span></p>
|
||||
<p class="text-[11px] text-slate-400 uppercase tracking-widest mt-1 font-bold">Capacité max</p>
|
||||
</div>
|
||||
<div class="space-y-1.5 text-right">
|
||||
<p class="text-xs font-bold text-primary flex items-center justify-end gap-2">
|
||||
<span class="material-icons-round text-sm">hourglass_top</span>
|
||||
Restant: 12:00:00
|
||||
</p>
|
||||
<p class="text-xs text-slate-500 flex items-center justify-end gap-2 font-medium">
|
||||
<span class="material-icons-round text-sm">schedule</span>
|
||||
Écoulé: 24:00:00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<span class="px-3 py-1.5 rounded-lg bg-amber-500/10 text-amber-500 text-xs font-bold flex items-center gap-2 border border-amber-500/20">
|
||||
<span class="material-icons-round text-sm">restaurant</span> Mangeoire
|
||||
</span>
|
||||
</div>
|
||||
<button class="w-full py-3.5 bg-primary text-white rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-3 shadow-xl shadow-primary/20">
|
||||
Gérer cet enclos
|
||||
<span class="material-icons-round text-base">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Enclos Beta (Inactive) -->
|
||||
<div class="glass-panel p-8 rounded-3xl hover:border-primary/40 transition-all flex flex-col gap-6">
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-display text-2xl font-bold tracking-wide">ENCLOS BETA</h3>
|
||||
<p class="text-xs font-bold flex items-center justify-end gap-2 text-slate-500">
|
||||
<span class="w-2 h-2 rounded-full bg-slate-500"></span> Inactif
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<div class="flex flex-col">
|
||||
<p class="text-4xl font-display font-extrabold leading-none text-slate-600">0 <span class="text-base font-sans text-slate-500 font-medium ml-1">DD</span></p>
|
||||
<p class="text-[11px] text-slate-400 uppercase tracking-widest mt-1 font-bold">Capacité max</p>
|
||||
</div>
|
||||
<div class="space-y-1.5 text-right">
|
||||
<p class="text-xs font-bold text-slate-500 flex items-center justify-end gap-2">
|
||||
<span class="material-icons-round text-sm">hourglass_empty</span>
|
||||
--:--:--
|
||||
</p>
|
||||
<p class="text-xs text-slate-500 flex items-center justify-end gap-2 font-medium">
|
||||
<span class="material-icons-round text-sm">schedule</span>
|
||||
--:--:--
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<span class="px-3 py-1.5 rounded-lg bg-white/5 text-slate-500 text-xs font-bold border border-white/5">
|
||||
Aucune jauge active
|
||||
</span>
|
||||
</div>
|
||||
<button class="w-full py-3.5 bg-white/5 hover:bg-primary/20 text-slate-300 hover:text-primary rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-3 border border-white/5">
|
||||
Gérer cet enclos
|
||||
<span class="material-icons-round text-base">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Enclos Epsilon -->
|
||||
<div class="glass-panel p-8 rounded-3xl hover:border-primary/40 transition-all flex flex-col gap-6">
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<h3 class="font-display text-2xl font-bold tracking-wide">ENCLOS EPSILON</h3>
|
||||
<p class="text-xs font-bold flex items-center justify-end gap-2 text-green-500">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span> Actif
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<div class="flex flex-col">
|
||||
<p class="text-4xl font-display font-extrabold leading-none">2 <span class="text-base font-sans text-slate-500 font-medium ml-1">DD</span></p>
|
||||
<p class="text-[11px] text-slate-400 uppercase tracking-widest mt-1 font-bold">Capacité max</p>
|
||||
</div>
|
||||
<div class="space-y-1.5 text-right">
|
||||
<p class="text-xs font-bold text-primary flex items-center justify-end gap-2">
|
||||
<span class="material-icons-round text-sm">hourglass_top</span>
|
||||
Restant: 00:30:15
|
||||
</p>
|
||||
<p class="text-xs text-slate-500 flex items-center justify-end gap-2 font-medium">
|
||||
<span class="material-icons-round text-sm">schedule</span>
|
||||
Écoulé: 05:20:00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<span class="px-3 py-1.5 rounded-lg bg-pink-500/10 text-pink-500 text-xs font-bold flex items-center gap-2 border border-pink-500/20">
|
||||
<span class="material-icons-round text-sm">spa</span> Caresseur
|
||||
</span>
|
||||
</div>
|
||||
<button class="w-full py-3.5 bg-white/5 hover:bg-primary/20 text-slate-300 hover:text-primary rounded-xl text-sm font-bold transition-all flex items-center justify-center gap-3 border border-white/5">
|
||||
Gérer cet enclos
|
||||
<span class="material-icons-round text-base">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="lg:col-span-4 flex flex-col space-y-10">
|
||||
<section class="flex flex-col">
|
||||
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-6">Activité récente</h2>
|
||||
<div class="glass-panel p-8 rounded-3xl flex-1">
|
||||
<ul class="space-y-8">
|
||||
<li class="flex gap-5">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500 mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(34,197,94,0.4)]"></div>
|
||||
<div>
|
||||
<p class="text-base font-bold">Naissance réussie</p>
|
||||
<p class="text-sm text-slate-500 mt-0.5">2 Dragodindes rousses • Il y a 10 min</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-5">
|
||||
<div class="w-3 h-3 rounded-full bg-amber-500 mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(245,158,11,0.4)]"></div>
|
||||
<div>
|
||||
<p class="text-base font-bold">Enclos Alpha - Mangeoires</p>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Réapprovisionnement requis • Il y a 1h</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-5">
|
||||
<div class="w-3 h-3 rounded-full bg-primary mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(168,85,247,0.4)]"></div>
|
||||
<div>
|
||||
<p class="text-base font-bold">Nouvelle race découverte</p>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Ébène enregistrée • Il y a 3h</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-5">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-500 mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(59,130,246,0.4)]"></div>
|
||||
<div>
|
||||
<p class="text-base font-bold">Accouplement programmé</p>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Enclos Gamma • Il y a 4h</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex gap-5">
|
||||
<div class="w-3 h-3 rounded-full bg-pink-500 mt-2 flex-shrink-0 shadow-[0_0_10px_rgba(236,72,153,0.4)]"></div>
|
||||
<div>
|
||||
<p class="text-base font-bold">Sérénité stabilisée</p>
|
||||
<p class="text-sm text-slate-500 mt-0.5">Enclos Epsilon • Il y a 5h</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex flex-col flex-1 min-h-0">
|
||||
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-6">Progression des races</h2>
|
||||
<div class="glass-panel p-8 rounded-3xl space-y-7 flex-1 overflow-y-auto custom-scrollbar">
|
||||
<div>
|
||||
<div class="flex justify-between text-xs font-extrabold mb-3">
|
||||
<span class="text-amber-500 uppercase tracking-wider">Dorée et Rousse</span>
|
||||
<span>10/10 (Terminé)</span>
|
||||
</div>
|
||||
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
|
||||
<div class="h-full bg-amber-500 rounded-full" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs font-extrabold mb-3">
|
||||
<span class="text-indigo-400 uppercase tracking-wider">Ébène</span>
|
||||
<span>3/10</span>
|
||||
</div>
|
||||
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
|
||||
<div class="h-full bg-indigo-500 rounded-full" style="width: 30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs font-extrabold mb-3">
|
||||
<span class="text-primary uppercase tracking-wider">Indigo</span>
|
||||
<span>0/10</span>
|
||||
</div>
|
||||
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
|
||||
<div class="h-full bg-primary rounded-full" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs font-extrabold mb-3">
|
||||
<span class="text-pink-400 uppercase tracking-wider">Amande</span>
|
||||
<span>0/10</span>
|
||||
</div>
|
||||
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
|
||||
<div class="h-full bg-pink-500 rounded-full" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs font-extrabold mb-3">
|
||||
<span class="text-emerald-400 uppercase tracking-wider">Émeraude</span>
|
||||
<span>0/10</span>
|
||||
</div>
|
||||
<div class="w-full h-2.5 bg-slate-900 rounded-full overflow-hidden border border-white/5">
|
||||
<div class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 330 KiB |
@ -1,228 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="fr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Obsidienne - Enclos 1</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700&family=Material+Icons+Round&display=swap" rel="stylesheet"/>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#a855f7",
|
||||
"background-light": "#f8fafc",
|
||||
"background-dark": "#0a0a0f",
|
||||
"glass-dark": "rgba(23, 23, 33, 0.7)",
|
||||
"glass-border": "rgba(168, 85, 247, 0.2)",
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Outfit", "sans-serif"],
|
||||
sans: ["Inter", "sans-serif"],
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: "12px",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
||||
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);
|
||||
}
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.stat-badge {
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
border: 1px solid rgba(168, 85, 247, 0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-sans selection:bg-primary/30">
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<main class="flex-1 flex flex-col overflow-hidden relative">
|
||||
<header class="h-16 border-b border-white/5 flex items-center px-8 justify-between glass-panel z-10">
|
||||
<div class="flex items-center gap-8">
|
||||
<a class="text-sm font-semibold text-slate-400 hover:text-white transition-colors" href="#">Tableau de bord</a>
|
||||
<a class="text-sm font-semibold text-primary relative" href="#">
|
||||
Enclos
|
||||
<span class="absolute -bottom-5 left-0 w-full h-1 bg-primary rounded-full"></span>
|
||||
</a>
|
||||
<a class="text-sm font-semibold text-slate-400 hover:text-white transition-colors" href="#">Statistiques</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex-1 overflow-y-auto p-8 scrollbar-hide">
|
||||
<section class="glass-panel rounded-2xl p-6 mb-8 border border-white/10">
|
||||
<div class="flex flex-wrap items-center justify-between mb-8 gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="font-display text-4xl font-bold tracking-tight">Enclos 1</h2>
|
||||
<button class="bg-red-500/10 hover:bg-red-500/20 text-red-500 text-[11px] font-bold px-4 py-1.5 rounded-full uppercase border border-red-500/20 transition-all">
|
||||
Vider l'enclos
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex flex-col items-end mr-4 opacity-70">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-[11px] text-slate-500 font-bold uppercase tracking-widest">Temps Écoulé</span>
|
||||
</div>
|
||||
<span class="text-3xl font-display font-bold text-[#cb97ff] leading-none tracking-wider">00:00:00</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-end">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="material-icons-round text-[12px] text-[#00FF00]">notifications</span>
|
||||
<span class="text-[11px] text-slate-500 font-bold uppercase tracking-widest">Alarme dans</span>
|
||||
</div>
|
||||
<span class="text-5xl font-display font-bold text-[#00FF00] leading-none drop-shadow-[0_0_12px_rgba(0,255,0,0.4)]">--:--:--</span>
|
||||
</div>
|
||||
<button class="bg-primary hover:bg-primary/90 text-white flex items-center gap-3 px-8 py-4 rounded-xl font-bold text-lg shadow-xl shadow-primary/20 transition-all active:scale-95">
|
||||
<span class="material-icons-round">play_arrow</span>
|
||||
DÉMARRER
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Jauges Actives Row -->
|
||||
<div class="flex flex-wrap gap-2 mb-8">
|
||||
<span class="text-[12px] font-bold text-slate-500 uppercase flex items-center mr-2">Jauges Actives :</span>
|
||||
<button class="px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-xs font-bold border border-white/5 hover:bg-slate-700 transition-all flex items-center gap-2">
|
||||
<span class="material-icons-round text-sm">remove_circle_outline</span> Baffeur
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-primary/20 text-primary text-xs font-bold border border-primary/30 transition-all flex items-center gap-2">
|
||||
<span class="material-icons-round text-sm">add</span> Caresseur
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-xs font-bold border border-white/5 hover:bg-slate-700 transition-all flex items-center gap-2">
|
||||
<span class="material-icons-round text-sm">bolt</span> Foudroyeur
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-xs font-bold border border-white/5 hover:bg-slate-700 transition-all flex items-center gap-2">
|
||||
<span class="material-icons-round text-sm">water_drop</span> Abreuvoir
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-xs font-bold border border-white/5 hover:bg-slate-700 transition-all flex items-center gap-2">
|
||||
<span class="material-icons-round text-sm">favorite</span> Dragofesse
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-primary/20 text-primary text-xs font-bold border border-primary/30 transition-all flex items-center gap-2">
|
||||
<span class="material-icons-round text-sm">restaurant</span> Mangeoire
|
||||
</button>
|
||||
</div>
|
||||
<!-- Mangeoire and Caresseur Cards Row (Inverted layout preserved) -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="p-5 rounded-xl border border-white/5 bg-white/5">
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-icons-round text-orange-400">restaurant</span>
|
||||
<span class="font-bold text-base uppercase tracking-wide">Mangeoire</span>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold bg-orange-500/20 text-orange-400 px-3 py-1 rounded border border-orange-500/20 uppercase">Tier 3 · ±30/tick</span>
|
||||
</div>
|
||||
<div class="h-5 w-full bg-slate-900 rounded-full overflow-hidden mb-3 p-0.5 border border-white/5">
|
||||
<div class="h-full w-[90%] bg-gradient-to-r from-orange-600 to-orange-400 rounded-full"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[12px] font-bold text-slate-500">
|
||||
<span>90 000 / 100 000</span>
|
||||
<span>Vide en 17h 07m 50s</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 rounded-xl border border-white/5 bg-white/5">
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-icons-round text-pink-400">add</span>
|
||||
<span class="font-bold text-base uppercase tracking-wide">Caresseur</span>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold bg-pink-500/20 text-pink-400 px-3 py-1 rounded border border-pink-500/20 uppercase">Tier 3 · ±10/tick</span>
|
||||
</div>
|
||||
<div class="h-5 w-full bg-slate-900 rounded-full overflow-hidden mb-3 p-0.5 border border-white/5">
|
||||
<div class="h-full w-0 bg-gradient-to-r from-pink-600 to-pink-400 rounded-full"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[12px] font-bold text-slate-500">
|
||||
<span>0 / 100 000</span>
|
||||
<span>Vide en 0s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="flex justify-between items-end mb-6">
|
||||
<h3 class="font-display text-2xl font-bold flex items-center gap-3">
|
||||
Dragodindes <span class="text-slate-500 text-lg">10/10</span>
|
||||
</h3>
|
||||
<button class="text-sm font-bold text-primary hover:bg-primary/10 px-5 py-2 rounded-lg border border-primary/20 transition-all flex items-center gap-2">
|
||||
<span class="material-icons-round text-base">add</span>
|
||||
Ajouter une Dragodinde
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
|
||||
<script>
|
||||
const stats = [
|
||||
{ icon: 'sentiment_satisfied_alt', val: '0', color: 'text-blue-400' },
|
||||
{ icon: 'bolt', val: '0', color: 'text-yellow-400' },
|
||||
{ icon: 'water_drop', val: '0', color: 'text-cyan-400' },
|
||||
{ icon: 'favorite', val: '0', color: 'text-red-400' },
|
||||
{ icon: 'star', val: '1', color: 'text-yellow-200' },
|
||||
];
|
||||
for(let i = 1; i <= 10; i++) {
|
||||
const isDragofesse = i % 2 === 0;
|
||||
document.write(`
|
||||
<div class="glass-panel rounded-xl overflow-hidden border border-white/5 hover:border-primary/40 transition-all group">
|
||||
<div class="p-4 border-b border-white/5 flex justify-between items-center bg-white/5">
|
||||
<span class="text-sm font-bold uppercase tracking-wide">Dragodinde ${i}</span>
|
||||
<span class="material-icons-round text-base text-slate-600 hover:text-red-400 cursor-pointer transition-colors">close</span>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="grid grid-cols-5 gap-1.5 mb-5">
|
||||
${stats.map(s => `
|
||||
<div class="flex flex-col items-center p-2 rounded-lg bg-slate-900/50 border border-white/5">
|
||||
<span class="material-icons-round text-[16px] ${s.color}">${s.icon}</span>
|
||||
<span class="text-[11px] font-bold mt-1">${s.val}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
<div class="space-y-4 mb-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-icons-round text-[18px] text-blue-400">sentiment_satisfied_alt</span>
|
||||
<span class="text-[11px] font-bold text-slate-400">Cible</span>
|
||||
</div>
|
||||
<div class="h-2 w-28 bg-slate-900 rounded-full overflow-hidden border border-white/5">
|
||||
<div class="h-full w-0 bg-pink-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-icons-round text-[18px] text-yellow-500">stars</span>
|
||||
<span class="text-[11px] font-bold text-slate-400">Niveau</span>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold text-slate-500">17h 07m 50s</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end justify-between border-t border-white/5 pt-4">
|
||||
<div>
|
||||
<p class="text-[11px] font-bold text-primary tracking-wider uppercase">Niv. 1</p>
|
||||
<p class="text-[10px] text-slate-500 uppercase font-medium">XP 0%</p>
|
||||
</div>
|
||||
<span class="text-[13px] font-mono font-bold text-slate-300">17:07:50</span>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-white/5">
|
||||
<button class="w-full flex items-center justify-between py-2.5 px-4 rounded-lg bg-primary/10 border border-primary/20 text-primary hover:bg-primary/20 transition-all">
|
||||
<span class="flex items-center gap-2 font-bold text-[11px] uppercase">
|
||||
<span class="material-icons-round text-sm">${isDragofesse ? 'favorite' : 'add'}</span> ${isDragofesse ? 'Dragofesse' : 'Caresseur'}
|
||||
</span>
|
||||
<span class="text-[11px] font-mono opacity-80 font-bold">--:--:--</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 438 KiB |
@ -1,396 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="fr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Obsidian Archive - Inventaire & Breeding Planner</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;600;700;800&family=Inter:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600&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"/>
|
||||
<style>
|
||||
body {
|
||||
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(41, 35, 50, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-tertiary-fixed": "#433500",
|
||||
"on-primary-fixed": "#000000",
|
||||
"surface-container-high": "#231d2b",
|
||||
"on-secondary": "#4a002f",
|
||||
"secondary-container": "#85145a",
|
||||
"error-dim": "#d73357",
|
||||
"tertiary-fixed-dim": "#eec200",
|
||||
"surface-container-low": "#16111d",
|
||||
"primary-fixed": "#c185fd",
|
||||
"on-primary-fixed-variant": "#430077",
|
||||
"primary-fixed-dim": "#b378ef",
|
||||
"outline-variant": "#4b4652",
|
||||
"on-secondary-fixed-variant": "#922164",
|
||||
"secondary-dim": "#f271b5",
|
||||
"on-tertiary-fixed-variant": "#645000",
|
||||
"on-error": "#490013",
|
||||
"on-primary": "#46007c",
|
||||
"tertiary-dim": "#eec200",
|
||||
"primary-dim": "#be83fa",
|
||||
"on-primary-container": "#360061",
|
||||
"surface": "#100c16",
|
||||
"on-tertiary-container": "#594700",
|
||||
"outline": "#7a7380",
|
||||
"on-secondary-fixed": "#690045",
|
||||
"primary": "#cb97ff",
|
||||
"on-tertiary": "#645000",
|
||||
"surface-dim": "#100c16",
|
||||
"on-surface": "#f1e8f7",
|
||||
"tertiary-fixed": "#fed01b",
|
||||
"tertiary-container": "#fed01b",
|
||||
"surface-tint": "#cb97ff",
|
||||
"on-background": "#f1e8f7",
|
||||
"inverse-primary": "#7c41b5",
|
||||
"error": "#ff6e84",
|
||||
"error-container": "#a70138",
|
||||
"secondary-fixed": "#ffc0db",
|
||||
"surface-container-highest": "#292332",
|
||||
"surface-variant": "#292332",
|
||||
"background": "#100c16",
|
||||
"inverse-on-surface": "#59535f",
|
||||
"on-error-container": "#ffb2b9",
|
||||
"primary-container": "#c185fd",
|
||||
"on-surface-variant": "#b0a8b6",
|
||||
"secondary-fixed-dim": "#ffabd1",
|
||||
"surface-bright": "#302939",
|
||||
"on-secondary-container": "#ffbeda",
|
||||
"surface-container-lowest": "#000000",
|
||||
"inverse-surface": "#fef7ff",
|
||||
"tertiary": "#ffe083",
|
||||
"surface-container": "#1c1724",
|
||||
"secondary": "#f673b7"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="font-body text-on-surface">
|
||||
<!-- Top Navigation -->
|
||||
<header class="fixed top-0 right-0 left-0 flex items-center justify-between px-8 h-16 bg-surface/40 backdrop-blur-md border-b border-white/5 z-40">
|
||||
<div class="flex items-center gap-8">
|
||||
<nav class="flex gap-6 font-headline font-semibold tracking-wide uppercase text-xs">
|
||||
<a class="text-slate-400 hover:text-purple-300 transition-colors" href="#">Dashboard</a>
|
||||
<a class="text-slate-400 hover:text-purple-300 transition-colors" href="#">Enclos</a>
|
||||
<a class="text-slate-400 hover:text-purple-300 transition-colors" href="#">Statistiques</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="px-6 py-2 text-slate-400 font-headline font-semibold uppercase text-xs hover:text-white transition-colors">RÉINITIALISER</button>
|
||||
<button class="px-8 py-2 bg-primary text-on-primary-fixed rounded-full font-headline font-extrabold uppercase text-xs tracking-widest shadow-lg shadow-primary/30">CALCULER</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-auto pt-24 p-8 space-y-12 max-w-[1600px]">
|
||||
<!-- Inventaire Actuel Section -->
|
||||
<section>
|
||||
<div class="flex items-baseline justify-between mb-8">
|
||||
<h2 class="text-3xl font-headline font-extrabold tracking-tight text-white">Inventaire Actuel</h2>
|
||||
<span class="text-on-surface-variant font-label text-sm uppercase tracking-widest">348 Dragons au total</span>
|
||||
</div>
|
||||
<!-- Search and Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-6 mb-10 items-end">
|
||||
<div class="flex-1 w-full max-w-md">
|
||||
<label class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-2 px-1">Rechercher une Dragodinde</label>
|
||||
<div class="relative group">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline group-focus-within:text-primary transition-colors">search</span>
|
||||
<input class="w-full bg-surface-container-high/60 border border-white/5 rounded-2xl py-3 pl-12 pr-4 text-sm text-white placeholder:text-outline focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Nom du type..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 w-full overflow-x-auto pb-1">
|
||||
<label class="block text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-2 px-1">Filtrer par Génération</label>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-4 py-2 rounded-xl bg-primary text-on-primary-fixed font-bold text-xs whitespace-nowrap">TOUTES</button>
|
||||
<button class="px-4 py-2 rounded-xl bg-surface-container-high/60 border border-white/5 text-on-surface-variant hover:text-white hover:bg-surface-container-highest transition-all font-bold text-xs whitespace-nowrap">GEN 1</button>
|
||||
<button class="px-4 py-2 rounded-xl bg-surface-container-high/60 border border-white/5 text-on-surface-variant hover:text-white hover:bg-surface-container-highest transition-all font-bold text-xs whitespace-nowrap">GEN 2</button>
|
||||
<button class="px-4 py-2 rounded-xl bg-surface-container-high/60 border border-white/5 text-on-surface-variant hover:text-white hover:bg-surface-container-highest transition-all font-bold text-xs whitespace-nowrap">GEN 3</button>
|
||||
<button class="px-4 py-2 rounded-xl bg-surface-container-high/60 border border-white/5 text-on-surface-variant hover:text-white hover:bg-surface-container-highest transition-all font-bold text-xs whitespace-nowrap">GEN 4</button>
|
||||
<button class="px-4 py-2 rounded-xl bg-surface-container-high/60 border border-white/5 text-on-surface-variant hover:text-white hover:bg-surface-container-highest transition-all font-bold text-xs whitespace-nowrap">GEN 5+</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-6 py-3 bg-surface-container-high/60 border border-white/5 rounded-2xl text-on-surface-variant hover:text-white transition-all">
|
||||
<span class="material-symbols-outlined text-sm">filter_list</span>
|
||||
<span class="font-bold text-xs uppercase">Plus de filtres</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-8">
|
||||
<!-- Dragon Card 1 -->
|
||||
<div class="flex flex-col items-center group cursor-pointer">
|
||||
<span class="mb-2 px-2 py-0.5 bg-surface-container-highest text-tertiary text-[10px] font-bold rounded-lg border border-tertiary/20">GEN 1</span>
|
||||
<div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden shadow-2xl group-hover:scale-105 transition-transform">
|
||||
<img alt="Dragodinde Amande" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAk49rcwXwOwlhp8heebFzmYpdV9rucwpeWCdOtD5PjUxo3DVTHtGp6SySHbKTy4YV1FBRmcbHV45u84LCnN5vB8kNCQT2rqFxBo3OycJriQIaYdOVzEEYrFJF_lTVE-ncf2vdcNnzr_HgSGTDFyI68JfNUQHjnLGEEF_G2PWfFTbSLXM6fpeUDL9t2LgGZ4MTOGA6ul_Q1Bpkl9d84IBa2H4O_ZqKr3rtbZyV1UiYsJ9-u9qbV-HkGq6-BuFNKgWcXfmAvIuu3x96H"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="font-headline font-bold text-white text-sm">Amande</h4>
|
||||
<div class="flex gap-3 mt-1 text-xs font-medium text-on-surface-variant">
|
||||
<span class="text-blue-400">♂ 12</span>
|
||||
<span class="text-pink-400">♀ 8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dragon Card 2 -->
|
||||
<div class="flex flex-col items-center group cursor-pointer">
|
||||
<span class="mb-2 px-2 py-0.5 bg-surface-container-highest text-tertiary text-[10px] font-bold rounded-lg border border-tertiary/20">GEN 1</span>
|
||||
<div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden shadow-2xl group-hover:scale-105 transition-transform">
|
||||
<img alt="Dragodinde Rousse" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdavE5jSFTnOENKdZYBWDsqG8NuKUesnMVwACJRWX4fck7y1D2zBLFETt0UJeY_fxRcsAyxX9JMS0IEPJ7-rbduSrMFL292LRD5c4Rf6JlqIuHlD8fUJwGinBBh9D8eNGSW2QR1erRXIbDQxYlQpxBTPBl6i82rQ_Si_Z09f9FZrnm1qouXO8XXbCuhnAar5Rqic_siBxeyUBpV15iLPC5AVf70ryDarB0iex822LoTI25bx_k0X1FhANwIWK4KWzB_buBd7cTUkwH"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="font-headline font-bold text-white text-sm">Rousse</h4>
|
||||
<div class="flex gap-3 mt-1 text-xs font-medium text-on-surface-variant">
|
||||
<span class="text-blue-400">♂ 15</span>
|
||||
<span class="text-pink-400">♀ 11</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dragon Card 3 -->
|
||||
<div class="flex flex-col items-center group cursor-pointer">
|
||||
<span class="mb-2 px-2 py-0.5 bg-surface-container-highest text-tertiary text-[10px] font-bold rounded-lg border border-tertiary/20">GEN 2</span>
|
||||
<div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden shadow-2xl group-hover:scale-105 transition-transform">
|
||||
<img alt="Dragodinde Pourpre" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuATaZa2N5eXJds9_zkdVSkZc2Tj2Ep7UkXWBXJqfrlWvyzPhBcfALl--HbPAd9lMDueoHvs5g0c0Xl1VJqIh4-CqUUAZD9HcZodIhrVbalMy3pIls670GVGUqD7_pcQOz781mxaNjNdugNS7ENZ6st-sxmTy-9fiaBhIVrRliPAdsOjKBghTkIDKGTcLLVzk9GjXDcyRRYMavPkdXhmV49iMKcaclnWR3MRmPdm-lXZ1FuMs9ebwAl-7ebh9cVn0U2oZ6PawK26XgqW"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="font-headline font-bold text-white text-sm">Pourpre</h4>
|
||||
<div class="flex gap-3 mt-1 text-xs font-medium text-on-surface-variant">
|
||||
<span class="text-blue-400">♂ 4</span>
|
||||
<span class="text-pink-400">♀ 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dragon Card 4 -->
|
||||
<div class="flex flex-col items-center group cursor-pointer">
|
||||
<span class="mb-2 px-2 py-0.5 bg-surface-container-highest text-tertiary text-[10px] font-bold rounded-lg border border-tertiary/20">GEN 3</span>
|
||||
<div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden shadow-2xl group-hover:scale-105 transition-transform">
|
||||
<img alt="Dragodinde Emeraude" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCA8q9Y2f4f38tD4mOIbK9KGlQCkvQeJ5QNa6uf-_zRYYXRbTou2SbgLuIKOwlSrZ1xvPcUWCvj1r-Am9XAA1H5u9rjZABXFCsUb4phcVmTqMGGciMiDRBHZ0Gug8POHKYK0W_rGU3_FPa9xLlOygj6B5X4pDrcdhTfE2x5tkVtUHH2JE3dy8J1v0ONGuVBw1AZ2dVG35iGmauKOyot4pAHuFANeQT6AMZi6Vq1uRZIKPnzs78lNU3IJbxbBGDY-69_G-fCqP1-OoO1"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="font-headline font-bold text-white text-sm">Émeraude</h4>
|
||||
<div class="flex gap-3 mt-1 text-xs font-medium text-on-surface-variant">
|
||||
<span class="text-blue-400">♂ 8</span>
|
||||
<span class="text-pink-400">♀ 10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dragon Card 5 -->
|
||||
<div class="flex flex-col items-center group cursor-pointer">
|
||||
<span class="mb-2 px-2 py-0.5 bg-surface-container-highest text-tertiary text-[10px] font-bold rounded-lg border border-tertiary/20">GEN 4</span>
|
||||
<div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden shadow-2xl group-hover:scale-105 transition-transform">
|
||||
<img alt="Dragodinde Ivoire" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4AVv_UMaKl5ydywMdMBN_odcH3RqemhzOnJiWGvN7OkfiruZUylLY-OnOC2CZXWxr-AwPfq4NFYOptcERp_C3RjbnGk6icgBMYgMwx-Vu8mfZnYDB4cMopMOVvmMA2peeof6Utp9p47PFffe5zJXJ8yDLrCwCwXdzGA4sSIOdTDAyekvOcG8my20pi_F-Jq75WvZJ3IVXNp3YGn6qskYBQbxYwwFyNzYkPfsbqh8sgQ10VrambO71-zinbVggxkd0l-CcJx3kUnHO"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="font-headline font-bold text-white text-sm">Ivoire</h4>
|
||||
<div class="flex gap-3 mt-1 text-xs font-medium text-on-surface-variant">
|
||||
<span class="text-blue-400">♂ 2</span>
|
||||
<span class="text-pink-400">♀ 1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dragon Card 6 -->
|
||||
<div class="flex flex-col items-center group cursor-pointer">
|
||||
<span class="mb-2 px-2 py-0.5 bg-surface-container-highest text-tertiary text-[10px] font-bold rounded-lg border border-tertiary/20">GEN 1</span>
|
||||
<div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden shadow-2xl group-hover:scale-105 transition-transform">
|
||||
<img alt="Dragodinde Indigo" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmywpQJgkDokcBzsndlzSasQswZ78gv18ctUwWFJNjJ1bp6XRjf53ruJE6G-4aOJVXqOo3TXVtZ_dvmyQPnQUcR3VbyGi8eCY3wZd_PCW-l0E-1IJdIVqylna4X2fE0jwiF_WDbzzi8LRtoYFp0-Qhnd04IKYvvn-LjW-cYWRlwkfeeA-Pke7JRirOHqB15yPEmdvrKJ40yTI6Bk9InHVgHGA90OXtKX-Z4E-8QvTgTtXTj5zKHnNe-TdxxWqlMPqQJZSGv0x1wl7w"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="font-headline font-bold text-white text-sm">Indigo</h4>
|
||||
<div class="flex gap-3 mt-1 text-xs font-medium text-on-surface-variant">
|
||||
<span class="text-blue-400">♂ 5</span>
|
||||
<span class="text-pink-400">♀ 3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dragon Card 7 -->
|
||||
<div class="flex flex-col items-center group cursor-pointer">
|
||||
<span class="mb-2 px-2 py-0.5 bg-surface-container-highest text-tertiary text-[10px] font-bold rounded-lg border border-tertiary/20">GEN 1</span>
|
||||
<div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden shadow-2xl group-hover:scale-105 transition-transform">
|
||||
<img alt="Dragodinde Ébène" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcVYO2jGvV-mgGh5iiiyUIimizjw6tJsUuK3F3qSz2lHurwhca8WBQX71xOa0P-BOK5Piov3CMbTLTSZ3WVuz_8PSIgsesLrr-8xtaH8-UTthkqg1d5gVtuIPpkLj_iyWHcKHWMho9qjMHYtjEpu7_RmEQy3ky6CYRhAqSPYRqnnu9nbQUDmgRiBJO3tZuVSqRmrlsZlCWmeFl017ub16K-6bPC3mmg3OJserIOpOOTBp9mNnZkoppFjdZXVi_-a9D0uFa4lgIUS6n"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="font-headline font-bold text-white text-sm">Ébène</h4>
|
||||
<div class="flex gap-3 mt-1 text-xs font-medium text-on-surface-variant">
|
||||
<span class="text-blue-400">♂ 7</span>
|
||||
<span class="text-pink-400">♀ 6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dragon Card 8 -->
|
||||
<div class="flex flex-col items-center group cursor-pointer">
|
||||
<span class="mb-2 px-2 py-0.5 bg-surface-container-highest text-tertiary text-[10px] font-bold rounded-lg border border-tertiary/20">GEN 2</span>
|
||||
<div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden shadow-2xl group-hover:scale-105 transition-transform">
|
||||
<img alt="Dragodinde Turquoise" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXH8EGWBBEmFntlQJMdD8kZnxM9Q2-GhLWQaV4EFdGkUi__hzsiUDmgHEIwYrYJW86IFXwFFEzlxVAfHqRQE8awwzvtqV-BiGAS4LGowzs3SJvM_699lEXodC-AkSMq4KsLxrjz9G89IGV0fhuoE27wRBwvRGr845dKoCmYmoLP8GK1cOiRV2a-WIjxGmp-3seZuDQ9UkC-Q_k_duSXg7-b3YBdP-FU60hb5ZuUzPQiTgrkZEhdmLfwsNdJD3ABENdaCQTcrvBzYqH"/>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h4 class="font-headline font-bold text-white text-sm">Turquoise</h4>
|
||||
<div class="flex gap-3 mt-1 text-xs font-medium text-on-surface-variant">
|
||||
<span class="text-blue-400">♂ 5</span>
|
||||
<span class="text-pink-400">♀ 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Calculateur de Croisements Section -->
|
||||
<section class="glass-panel rounded-3xl p-10 border border-white/5">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<span class="material-symbols-outlined text-primary p-3 bg-primary/10 rounded-2xl">science</span>
|
||||
<h2 class="text-2xl font-headline font-extrabold text-white">Calculateur de Croisements</h2>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<!-- Step 1 -->
|
||||
<div class="flex flex-col lg:flex-row items-center gap-8 bg-surface-container-low/40 p-6 rounded-2xl border border-white/[0.02]">
|
||||
<div class="flex flex-col gap-2 min-w-[120px]">
|
||||
<span class="text-[10px] font-bold uppercase tracking-widest text-primary-dim">Étape 01</span>
|
||||
<h3 class="font-headline font-bold text-lg text-white">Parents Requis</h3>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center gap-6">
|
||||
<div class="flex space-x-4">
|
||||
<div class="relative w-14 h-14 rounded-full border-2 border-primary overflow-hidden shadow-lg" title="Amande ♂ x3">
|
||||
<img alt="Dragon" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCuG3w6EZAOoNzP6o5oX6TfRrjddr6QhL0KFGd8g0kHd8D_yz2okPRNSEwFVaqfkVYUiDHeplOESteJjGM8vZfaXV4AYhG8olI0iHx7f7YyPEtk7w9n_v6U38ruF2Pt8BM9rJf5pNRr-cIEfy8huYJaaUvNXD_Q9NNvhkQ7P_nS0w59bh0BbzAkLkYn9jrDpClqaszVk1sOzzj_qWIIK1UbQ9osFvcXGJPAUiEH0W94oGosGamNMSCaYbZnfMfWVAv-8aY7PcDLxwtT"/>
|
||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center text-[10px] font-bold">♂ x3</div>
|
||||
</div>
|
||||
<div class="relative w-14 h-14 rounded-full border-2 border-primary overflow-hidden shadow-lg" title="Rousse ♀ x3">
|
||||
<img alt="Dragon" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxJAsvx2ewZiHBj9hoP-mueRFml_SfpKIuIjxGGxcTP9wI2ZOyXxf-HbvynPsN_HkFk_HIfGGQGWDxvv7MVWkDBT8LT7I3dh9U8CkgFnuGEQvgkV1O5oHhLZ8iUEFjLUmWkg6gqRaEdrlZSgJaYColFBvlZxG7aGRC9VoqprlvlIBcCY08xAglHoJ16wtEq1kD4zbl_OSlRiIiFqM7j5EV9xq-CKYd6lXFF1c0ARkMdCpOmckhZ9bA7MIlzD5e-5GQywcMN36ePE7n"/>
|
||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center text-[10px] font-bold">♀ x3</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">arrow_forward</span>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant">RÉSULTAT</span>
|
||||
<div class="w-14 h-14 rounded-full border-2 border-secondary overflow-hidden shadow-lg">
|
||||
<img alt="Résultat" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_NB67axTiAn461kidHCU_vmcEkuLSxps7d80A0tZe3_2anRUPDasqqP8vhICUU9Xeu37oW4Aco_NbFYp8PPPWN16g9N-IUZuMK5rRy7Ct-gShT90pOYMYr0gQEj8YVD8jTbgvEnA3WJD4VU7hLzCsl2c97oUAJElfR0PGR31eiAF1HTTk09VrYYU7ENF03mp2uud6EZOPNphimnvPHMhjqznOT-du68Q3-Xt9kMrV2SE_8yc2BhxbLofygIUV5RtLyrQuWPr8zVk8"/>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-white">Amande & Rousse</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 pl-8 lg:border-l border-white/5">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input checked="" class="w-5 h-5 rounded border-outline-variant bg-surface-container text-primary focus:ring-primary/20" type="checkbox"/>
|
||||
<span class="text-sm font-label text-on-surface-variant">Reproducteur</span>
|
||||
</label>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant uppercase">Nb couples</span>
|
||||
<input class="w-20 bg-surface-container-high border-none rounded-lg text-white font-bold text-center py-1" type="number" value="3"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 2 -->
|
||||
<div class="flex flex-col lg:flex-row items-center gap-8 bg-surface-container-low/40 p-6 rounded-2xl border border-white/[0.02]">
|
||||
<div class="flex flex-col gap-2 min-w-[120px]">
|
||||
<span class="text-[10px] font-bold uppercase tracking-widest text-primary-dim">Étape 02</span>
|
||||
<h3 class="font-headline font-bold text-lg text-white">Parents Requis</h3>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center gap-6">
|
||||
<div class="flex space-x-4">
|
||||
<div class="relative w-14 h-14 rounded-full border-2 border-primary overflow-hidden shadow-lg">
|
||||
<img alt="Dragon" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmywpQJgkDokcBzsndlzSasQswZ78gv18ctUwWFJNjJ1bp6XRjf53ruJE6G-4aOJVXqOo3TXVtZ_dvmyQPnQUcR3VbyGi8eCY3wZd_PCW-l0E-1IJdIVqylna4X2fE0jwiF_WDbzzi8LRtoYFp0-Qhnd04IKYvvn-LjW-cYWRlwkfeeA-Pke7JRirOHqB15yPEmdvrKJ40yTI6Bk9InHVgHGA90OXtKX-Z4E-8QvTgTtXTj5zKHnNe-TdxxWqlMPqQJZSGv0x1wl7w"/>
|
||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center text-[10px] font-bold">♂ x1</div>
|
||||
</div>
|
||||
<div class="relative w-14 h-14 rounded-full border-2 border-primary overflow-hidden shadow-lg">
|
||||
<img alt="Dragon" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcVYO2jGvV-mgGh5iiiyUIimizjw6tJsUuK3F3qSz2lHurwhca8WBQX71xOa0P-BOK5Piov3CMbTLTSZ3WVuz_8PSIgsesLrr-8xtaH8-UTthkqg1d5gVtuIPpkLj_iyWHcKHWMho9qjMHYtjEpu7_RmEQy3ky6CYRhAqSPYRqnnu9nbQUDmgRiBJO3tZuVSqRmrlsZlCWmeFl017ub16K-6bPC3mmg3OJserIOpOOTBp9mNnZkoppFjdZXVi_-a9D0uFa4lgIUS6n"/>
|
||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center text-[10px] font-bold">♀ x1</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">arrow_forward</span>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant">RÉSULTAT</span>
|
||||
<div class="w-14 h-14 rounded-full border-2 border-secondary overflow-hidden shadow-lg">
|
||||
<img alt="Résultat" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCKZdwb71qmK2SBqKl5oit3pzD1ruttmWA75mUdp1nxJJffPF4SxTU5X5PKP6U5xpqSpGz7oJKtpAoWbN1FG8yZoH6tefDkzRr1vJg4ZyX3LK6U1n1hNj3n7k3iyroUjhXS2x8hwHlxz1PWIPgxjOy-v_8NPnS72_g9iGWE-SgrCBYxlUAjHZTnppNnmYPxLES6sTjjJ8RBc4-Wn_OUmarh7UYdKxAx7ltOmb5wniF3d7LbtnZr4X90UPbJeeLDWPOobxk2dnBxTYyg"/>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-white">Indigo & Ébène</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 pl-8 lg:border-l border-white/5">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input class="w-5 h-5 rounded border-outline-variant bg-surface-container text-primary focus:ring-primary/20" type="checkbox"/>
|
||||
<span class="text-sm font-label text-on-surface-variant">Reproducteur</span>
|
||||
</label>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant uppercase">Nb couples</span>
|
||||
<input class="w-20 bg-surface-container-high border-none rounded-lg text-white font-bold text-center py-1 opacity-50" type="number" value="1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Dragodindes Restantes Section -->
|
||||
<section>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-headline font-extrabold text-white">Dragodindes Restantes</h3>
|
||||
<span class="text-xs font-label text-secondary tracking-widest uppercase bg-secondary/10 px-4 py-1 rounded-full">Non-utilisées dans le plan</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<div class="flex items-center gap-4 p-4 bg-surface-container-high/40 rounded-2xl border border-white/[0.03]">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
|
||||
<img alt="Dragon" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXH8EGWBBEmFntlQJMdD8kZnxM9Q2-GhLWQaV4EFdGkUi__hzsiUDmgHEIwYrYJW86IFXwFFEzlxVAfHqRQE8awwzvtqV-BiGAS4LGowzs3SJvM_699lEXodC-AkSMq4KsLxrjz9G89IGV0fhuoE27wRBwvRGr845dKoCmYmoLP8GK1cOiRV2a-WIjxGmp-3seZuDQ9UkC-Q_k_duSXg7-b3YBdP-FU60hb5ZuUzPQiTgrkZEhdmLfwsNdJD3ABENdaCQTcrvBzYqH"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-sm text-white">Turquoise</p>
|
||||
<p class="text-[10px] font-bold text-on-surface-variant">♂ 5 ♀ 2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-4 bg-surface-container-high/40 rounded-2xl border border-white/[0.03]">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
|
||||
<img alt="Dragon" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8DuxGlfBtFO61gE3PgrJVPiledqR6SzOdgtDSfykBZmHeudgLIIo8ziEwGnCv9-jc88k3I7alDZs05E_Zsbw6dKVxZOYlbLI36T4U8RCRWj5XCapupE5tttpzdazWE3N9QW8skSBAqVLdm5E0iHyEdN2Wsr-9rv9dlfvNq6mP5C4-iqgYQ-OLfNVnsDGbKyzToR8R3J6UiHQZ688dPVLYdl5uN04Y4uumFuJJh8oLCEJPf9msOo1hqGybjVt2UfbllRLpUpDvpME1"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-sm text-white">Orchidée</p>
|
||||
<p class="text-[10px] font-bold text-on-surface-variant">♂ 1 ♀ 4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-4 bg-surface-container-high/40 rounded-2xl border border-white/[0.03]">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
|
||||
<img alt="Dragon" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXU9A9BJspohmUXlHNOkzHzLoAM_VD5wlriXoSCUzsx32ZVJSIFzcRUpDeLfs9nl-xkdckB2F54JzMSJxWLuX-LrgXgUrGe_lXGFUF0AwE8-7bJ6oY2Kgazk-rE7YAVBEmEv8nWeBTt3wJCzypXQICQP0MTeFVWVLGtY5GUlskyzbNovJdW5AWA9AtnTMJvgLpqV5Cx7uE2ZUJZkYykHAb08AG7HNCmMCLeJ1VDfExCTWEINbD0dVXx7rYXzdHgb4tK8A4250BY2DE"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-sm text-white">Prune</p>
|
||||
<p class="text-[10px] font-bold text-on-surface-variant">♂ 3 ♀ 0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-4 bg-surface-container-high/40 rounded-2xl border border-white/[0.03]">
|
||||
<div class="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
|
||||
<img alt="Dragon" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAn7-zVVKN9M5vbMW0UFqJBiKqpZim4gN9pNeMConK0hKsH5N4h2ozIIjCP2lozPWCWL3GIgiLIgVPsSmc2IwFMqCEOLCZ4iJnPXclMmCV9tWKh_MzrE-eee1gRb4u0bPMPflT8xWQyVlB4UH8epaj-oUIkdNOrpC2EcHmHLZDrAlEe2Bj-ArkusbMDgGjLfjHPmAmFpYKa4lc1M3iF8vnI7k1iEqCU0iGDBYkCqjGaW1etIh8OatJBth46wxH4KyMoQyRIBThikHtl"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-sm text-white">Dorée</p>
|
||||
<p class="text-[10px] font-bold text-on-surface-variant">♂ 0 ♀ 2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 459 KiB |
@ -1,342 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="fr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Obsidian Amethyst - Guide de Style</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Inter:wght@100..900&family=Plus+Jakarta+Sans:wght@200..800&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"/>
|
||||
<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-primary": "#46007c",
|
||||
"tertiary-fixed-dim": "#eec200",
|
||||
"secondary-dim": "#f271b5",
|
||||
"surface-container-lowest": "#000000",
|
||||
"on-tertiary": "#645000",
|
||||
"on-primary-fixed-variant": "#430077",
|
||||
"outline": "#7a7380",
|
||||
"surface-container-low": "#16111d",
|
||||
"on-secondary-container": "#ffbeda",
|
||||
"secondary": "#f673b7",
|
||||
"primary-dim": "#be83fa",
|
||||
"on-surface-variant": "#b0a8b6",
|
||||
"surface-tint": "#cb97ff",
|
||||
"tertiary-fixed": "#fed01b",
|
||||
"on-primary-fixed": "#000000",
|
||||
"on-secondary-fixed-variant": "#922164",
|
||||
"on-primary-container": "#360061",
|
||||
"inverse-surface": "#fef7ff",
|
||||
"surface-container-high": "#231d2b",
|
||||
"secondary-container": "#85145a",
|
||||
"error": "#ff6e84",
|
||||
"surface-container": "#1c1724",
|
||||
"secondary-fixed-dim": "#ffabd1",
|
||||
"primary-fixed": "#c185fd",
|
||||
"surface": "#100c16",
|
||||
"surface-bright": "#302939",
|
||||
"on-secondary": "#4a002f",
|
||||
"on-tertiary-container": "#594700",
|
||||
"tertiary": "#ffe083",
|
||||
"error-dim": "#d73357",
|
||||
"on-error": "#490013",
|
||||
"error-container": "#a70138",
|
||||
"surface-container-highest": "#292332",
|
||||
"tertiary-container": "#fed01b",
|
||||
"inverse-primary": "#7c41b5",
|
||||
"background": "#100c16",
|
||||
"secondary-fixed": "#ffc0db",
|
||||
"primary": "#cb97ff",
|
||||
"on-tertiary-fixed": "#433500",
|
||||
"on-error-container": "#ffb2b9",
|
||||
"tertiary-dim": "#eec200",
|
||||
"on-secondary-fixed": "#690045",
|
||||
"primary-fixed-dim": "#b378ef",
|
||||
"on-background": "#f1e8f7",
|
||||
"inverse-on-surface": "#59535f",
|
||||
"on-surface": "#f1e8f7",
|
||||
"surface-dim": "#100c16",
|
||||
"surface-variant": "#292332",
|
||||
"primary-container": "#c185fd",
|
||||
"on-tertiary-fixed-variant": "#645000",
|
||||
"outline-variant": "#4b4652"
|
||||
},
|
||||
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-card {
|
||||
background: rgba(41, 35, 50, 0.6);
|
||||
backdrop-filter: blur(40px);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
}
|
||||
.no-line-rule { border: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-[#1c1724]/60 backdrop-blur-xl shadow-[0_24px_40px_rgba(0,0,0,0.15)] flex justify-between items-center px-8 h-20 w-full">
|
||||
<div class="text-2xl font-black tracking-tighter text-[#cb97ff] uppercase font-headline">Obsidian Amethyst</div>
|
||||
<nav class="hidden md:flex gap-8 items-center">
|
||||
<a class="font-headline font-bold text-lg tracking-tight text-[#cb97ff] border-b-2 border-[#cb97ff] pb-1 hover:text-[#f1e8f7] transition-colors duration-300" href="#">Foundations</a>
|
||||
<a class="font-headline font-bold text-lg tracking-tight text-[#b0a8b6] font-medium hover:text-[#f1e8f7] transition-colors duration-300" href="#">Components</a>
|
||||
<a class="font-headline font-bold text-lg tracking-tight text-[#b0a8b6] font-medium hover:text-[#f1e8f7] transition-colors duration-300" href="#">Tokens</a>
|
||||
<a class="font-headline font-bold text-lg tracking-tight text-[#b0a8b6] font-medium hover:text-[#f1e8f7] transition-colors duration-300" href="#">Patterns</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="material-symbols-outlined text-[#cb97ff] cursor-pointer active:scale-95 transition-transform">contrast</span>
|
||||
<span class="material-symbols-outlined text-[#cb97ff] cursor-pointer active:scale-95 transition-transform">settings</span>
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden bg-surface-container-highest">
|
||||
<img alt="User profile avatar" data-alt="close up of a digital minimalist avatar with violet and black highlights on a dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB7tEgejfWyafFzblGSBwbCNGUVd0T7F2o_Cg1fQ7pnUxXPhw698nGv5VnibVMIVgoKT3sS-arThlXa207nOmTzTe-NtWVrTHeD2v9vvoNkPO_pMRf5Ksx27BQ5crLqdGO2reAwUy9dDntX2Qrez_DReI0HObXCWOPIXdGpSvhjChyNtBwmpuBX9lNi8XDT9XFx2tbvKWQCiAPR5C_kj-a80WE_RD3F2qWXD5S3jk1ivu3Epd7aqUoNpI1tRjtTz3flPkNHylNj3QP4"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-screen w-64 z-40 bg-[#1c1724]/60 backdrop-blur-2xl shadow-2xl flex flex-col h-full py-8 hidden md:flex">
|
||||
<div class="px-8 mb-12 mt-20">
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-on-primary">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||||
</div>
|
||||
<h2 class="text-[#f1e8f7] font-bold text-xl">Design System</h2>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant uppercase tracking-widest font-label">v1.0.4</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<div class="flex items-center gap-3 bg-gradient-to-r from-[#cb97ff]/20 to-transparent text-[#cb97ff] border-l-4 border-[#cb97ff] px-6 py-4 font-['Inter'] text-sm font-semibold cursor-pointer transition-all active:translate-x-1">
|
||||
<span class="material-symbols-outlined">palette</span>
|
||||
<span>Colors</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer active:translate-x-1">
|
||||
<span class="material-symbols-outlined">text_fields</span>
|
||||
<span>Typography</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer active:translate-x-1">
|
||||
<span class="material-symbols-outlined">layers</span>
|
||||
<span>Elevation</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer active:translate-x-1">
|
||||
<span class="material-symbols-outlined">grid_view</span>
|
||||
<span>Layout</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer active:translate-x-1">
|
||||
<span class="material-symbols-outlined">auto_awesome</span>
|
||||
<span>Motion</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-auto px-6 space-y-4">
|
||||
<div class="flex items-center gap-3 text-[#b0a8b6] px-6 py-4 font-['Inter'] text-sm font-semibold hover:bg-[#292332] hover:text-[#f1e8f7] transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
<span>Documentation</span>
|
||||
</div>
|
||||
<button class="w-full py-3 bg-primary text-on-primary rounded-xl font-bold hover:brightness-110 transition-all shadow-lg shadow-primary/20">
|
||||
Download Assets
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="md:ml-64 pt-28 px-8 pb-12">
|
||||
<!-- Header Section -->
|
||||
<section class="mb-16">
|
||||
<h1 class="font-headline font-extrabold text-5xl tracking-tighter text-on-surface mb-2">Guide de Style</h1>
|
||||
<p class="text-on-surface-variant font-label text-lg">Spécifications visuelles et identité de l'archive Obsidian.</p>
|
||||
</section>
|
||||
<!-- Bento Grid for Sections -->
|
||||
<div class="grid grid-cols-1 xl:grid-cols-12 gap-8">
|
||||
<!-- 1. Color Palette Section -->
|
||||
<section class="xl:col-span-8 flex flex-col gap-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">palette</span>
|
||||
<h2 class="font-headline font-bold text-2xl text-on-surface">Palette de Couleurs</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Primary Amethyst -->
|
||||
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
||||
<div class="h-32 bg-[#8B5CF6] group-hover:brightness-110 transition-all"></div>
|
||||
<div class="p-4">
|
||||
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Améthyste Primaire</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-headline font-bold text-on-surface">#8B5CF6</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Amethyst Variant -->
|
||||
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
||||
<div class="h-32 bg-[#CB97FF] group-hover:brightness-110 transition-all"></div>
|
||||
<div class="p-4">
|
||||
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Améthyste Éclat</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-headline font-bold text-on-surface">#CB97FF</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Secondary Pink -->
|
||||
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
||||
<div class="h-32 bg-[#F673B7] group-hover:brightness-110 transition-all"></div>
|
||||
<div class="p-4">
|
||||
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Rose Secondaire</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-headline font-bold text-on-surface">#F673B7</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Deep Background -->
|
||||
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
||||
<div class="h-32 bg-[#0A0A0F] group-hover:brightness-110 transition-all"></div>
|
||||
<div class="p-4">
|
||||
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Noir Profond</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-headline font-bold text-on-surface">#0A0A0F</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Surface Deep -->
|
||||
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
||||
<div class="h-32 bg-[#1C1724] group-hover:brightness-110 transition-all"></div>
|
||||
<div class="p-4">
|
||||
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Surface Obsidian</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-headline font-bold text-on-surface">#1C1724</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- UI Grey -->
|
||||
<div class="bg-surface-container rounded-xl overflow-hidden shadow-2xl group transition-all duration-300">
|
||||
<div class="h-32 bg-[#4B4652] group-hover:brightness-110 transition-all"></div>
|
||||
<div class="p-4">
|
||||
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant mb-1">Gris d'Interface</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-headline font-bold text-on-surface">#4B4652</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm cursor-pointer hover:text-primary">content_copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 2. Typography Section -->
|
||||
<section class="xl:col-span-4 glass-card rounded-xl p-8 shadow-2xl border-none">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<span class="material-symbols-outlined text-secondary text-3xl">text_fields</span>
|
||||
<h2 class="font-headline font-bold text-2xl text-on-surface">Typographie</h2>
|
||||
</div>
|
||||
<div class="space-y-12">
|
||||
<div>
|
||||
<p class="text-xs text-on-surface-variant uppercase tracking-widest mb-4 font-label">Police Headline: Manrope</p>
|
||||
<div class="space-y-4">
|
||||
<h1 class="font-headline font-extrabold text-4xl tracking-tighter">Affichage Large</h1>
|
||||
<h2 class="font-headline font-bold text-2xl tracking-tight">Titre de Section</h2>
|
||||
<h3 class="font-headline font-semibold text-xl tracking-tight">Sous-titre informatif</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-on-surface-variant uppercase tracking-widest mb-4 font-label">Police Body: Inter</p>
|
||||
<div class="space-y-4">
|
||||
<p class="font-body text-base text-on-surface leading-relaxed">
|
||||
Le corps de texte utilise Inter pour une lisibilité maximale. Idéal pour les descriptions longues et les données complexes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-on-surface-variant uppercase tracking-widest mb-4 font-label">Police Label: Plus Jakarta Sans</p>
|
||||
<div class="space-y-2">
|
||||
<p class="font-label text-sm font-medium text-on-surface">Metadata et petits détails</p>
|
||||
<p class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Boutons et Indicateurs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 3. Components Preview Section -->
|
||||
<section class="xl:col-span-12 mt-8">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<span class="material-symbols-outlined text-tertiary text-3xl">widgets</span>
|
||||
<h2 class="font-headline font-bold text-2xl text-on-surface">Composants & Glassmorphism</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Glass Card Example -->
|
||||
<div class="glass-card p-8 rounded-xl relative overflow-hidden group">
|
||||
<div class="absolute -right-10 -top-10 w-32 h-32 bg-primary/20 rounded-full blur-3xl transition-all duration-500 group-hover:bg-primary/40"></div>
|
||||
<span class="material-symbols-outlined text-primary mb-4 text-4xl" style="font-variation-settings: 'FILL' 1;">diamond</span>
|
||||
<h3 class="font-headline font-bold text-xl mb-3">Carte Vitrée</h3>
|
||||
<p class="text-on-surface-variant text-sm mb-6 leading-relaxed">Illustration du style glassmorphism avec flou d'arrière-plan et bordures fantômes subtiles.</p>
|
||||
<div class="w-full h-1.5 bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="w-2/3 h-full bg-gradient-to-r from-primary to-primary-container shadow-[0_0_12px_rgba(203,151,255,0.4)]"></div>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-between">
|
||||
<span class="text-[10px] font-label uppercase text-on-surface-variant">Progression</span>
|
||||
<span class="text-[10px] font-label font-bold text-primary">66%</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Buttons Section -->
|
||||
<div class="bg-surface-container p-8 rounded-xl">
|
||||
<h3 class="font-headline font-bold text-xl mb-6">Boutons & Actions</h3>
|
||||
<div class="space-y-4">
|
||||
<button class="w-full py-4 bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold rounded-xl active:scale-95 transition-all shadow-xl shadow-primary/10">
|
||||
Action Principale
|
||||
</button>
|
||||
<button class="w-full py-4 bg-secondary-container text-secondary-fixed font-bold rounded-xl active:scale-95 transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">bolt</span>
|
||||
Action Secondaire
|
||||
</button>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 py-3 bg-surface-variant/40 hover:bg-surface-variant text-on-surface-variant font-semibold rounded-xl transition-all text-sm">Annuler</button>
|
||||
<button class="flex-1 py-3 bg-error/10 text-error hover:bg-error/20 font-semibold rounded-xl transition-all text-sm">Supprimer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Visual Assets / Imagery Style -->
|
||||
<div class="bg-surface-container rounded-xl overflow-hidden relative group">
|
||||
<img alt="Imagery Style" class="w-full h-full object-cover opacity-60 group-hover:scale-110 transition-transform duration-700" data-alt="abstract flowing silk textures in deep purple and magenta tones with cinematic atmospheric lighting and soft shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuACsNwGWZEtZWVb6zrAF8BxLMSCA7dslwDZV3Ge4P7A79P0aI4dDPzDPZBdldlqbxTeMJjBQWUwQ7aHT8MEOIgASFSLm2fl4LjGLM_VhVpJR4_non8giL3x04BXtndSWE66YMW4HdilOW0MRuhT9-hE4kD48dPbEfb3YUzAC6wpITiaqCTcaHDqEqITdj_Zd76rcJhVskVYOh99YGyco8HT26C7k4Ld_XJUbiQIUn1bMjaI1RKPKrCXpk_vwTkA2pQTr-I-egKxZXuY"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-[#100c16] via-transparent to-transparent p-8 flex flex-col justify-end">
|
||||
<h3 class="font-headline font-bold text-xl text-[#f1e8f7]">Style Imagerie</h3>
|
||||
<p class="text-on-surface-variant text-sm mt-1">Sombres, cinématiques, avec accents néon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Footer Export Branding -->
|
||||
<footer class="mt-20 pt-12 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-surface-container rounded-full flex items-center justify-center text-primary font-black text-xl">Ω</div>
|
||||
<div>
|
||||
<p class="font-headline font-bold text-on-surface">Obsidian Amethyst System</p>
|
||||
<p class="text-xs text-on-surface-variant font-label">Propriété de l'Archive Améthyste © 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="px-6 py-2 bg-surface-container-highest rounded-full text-xs font-bold text-on-surface tracking-wider uppercase flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
Export Prêt
|
||||
</div>
|
||||
<div class="px-6 py-2 bg-surface-container-highest rounded-full text-xs font-bold text-on-surface tracking-wider uppercase">
|
||||
A3 / Digital Standard
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
<!-- Contextual FAB Suppression: Hide for Guide/Style screens as per rules -->
|
||||
</body></html>
|
||||
@ -1,215 +0,0 @@
|
||||
<!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=Manrope:wght@400;700;800&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600&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"/>
|
||||
<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: {
|
||||
"inverse-primary": "#7c41b5",
|
||||
"error-container": "#a70138",
|
||||
"outline": "#7a7380",
|
||||
"on-secondary-container": "#ffbeda",
|
||||
"tertiary-container": "#fed01b",
|
||||
"surface-bright": "#302939",
|
||||
"tertiary-dim": "#eec200",
|
||||
"primary-fixed-dim": "#b378ef",
|
||||
"on-tertiary-fixed": "#433500",
|
||||
"secondary-container": "#85145a",
|
||||
"primary-fixed": "#c185fd",
|
||||
"outline-variant": "#4b4652",
|
||||
"on-primary-fixed-variant": "#430077",
|
||||
"on-error": "#490013",
|
||||
"surface-container-lowest": "#000000",
|
||||
"primary": "#cb97ff",
|
||||
"on-primary-container": "#360061",
|
||||
"surface-container-low": "#16111d",
|
||||
"inverse-surface": "#fef7ff",
|
||||
"background": "#100c16",
|
||||
"on-secondary-fixed": "#690045",
|
||||
"on-secondary": "#4a002f",
|
||||
"on-secondary-fixed-variant": "#922164",
|
||||
"on-tertiary-fixed-variant": "#645000",
|
||||
"secondary-fixed-dim": "#ffabd1",
|
||||
"on-background": "#f1e8f7",
|
||||
"tertiary-fixed": "#fed01b",
|
||||
"inverse-on-surface": "#59535f",
|
||||
"on-tertiary": "#645000",
|
||||
"secondary-fixed": "#ffc0db",
|
||||
"secondary-dim": "#f271b5",
|
||||
"on-primary-fixed": "#000000",
|
||||
"tertiary-fixed-dim": "#eec200",
|
||||
"surface-tint": "#cb97ff",
|
||||
"on-primary": "#46007c",
|
||||
"secondary": "#f673b7",
|
||||
"surface": "#100c16",
|
||||
"on-surface-variant": "#b0a8b6",
|
||||
"surface-dim": "#100c16",
|
||||
"on-tertiary-container": "#594700",
|
||||
"primary-container": "#c185fd",
|
||||
"surface-variant": "#292332",
|
||||
"on-surface": "#f1e8f7",
|
||||
"error-dim": "#d73357",
|
||||
"surface-container-highest": "#292332",
|
||||
"on-error-container": "#ffb2b9",
|
||||
"tertiary": "#ffe083",
|
||||
"error": "#ff6e84",
|
||||
"primary-dim": "#be83fa",
|
||||
"surface-container-high": "#231d2b",
|
||||
"surface-container": "#1c1724"
|
||||
},
|
||||
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(28, 23, 36, 0.6);
|
||||
backdrop-filter: blur(40px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body text-on-surface selection:bg-primary selection:text-on-primary">
|
||||
<!-- TopNavBar -->
|
||||
<header class="w-full top-0 sticky bg-[#1c1724]/60 backdrop-blur-xl shadow-[0_24px_40px_rgba(0,0,0,0.15)] z-50">
|
||||
<div class="flex justify-between items-center px-8 h-16 w-full max-w-none">
|
||||
<nav class="hidden md:flex items-center space-x-8 h-full">
|
||||
<a class="text-[#b0a8b6] hover:text-[#f1e8f7] transition-colors font-headline font-bold text-lg h-full flex items-center" href="#">Tableau de bord</a>
|
||||
<a class="text-[#b0a8b6] hover:text-[#f1e8f7] transition-colors font-headline font-bold text-lg h-full flex items-center" href="#">Enclos</a>
|
||||
<a class="text-[#b0a8b6] hover:text-[#f1e8f7] transition-colors font-headline font-bold text-lg h-full flex items-center" href="#">Statistiques</a>
|
||||
</nav>
|
||||
<div class="flex items-center space-x-4">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="max-w-6xl mx-auto px-8 py-12">
|
||||
<div class="mb-12">
|
||||
<h1 class="font-headline font-extrabold text-5xl text-on-surface tracking-tight mb-2">Paramètres</h1>
|
||||
<p class="font-label text-on-surface-variant text-base">Personnalisez votre expérience au sein du coffre-fort éthéré.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Left Column: Navigation Summary (Desktop) -->
|
||||
<div class="lg:col-span-4 space-y-6">
|
||||
<div class="surface-container rounded-xl p-6 border border-outline-variant/15">
|
||||
<nav class="space-y-2">
|
||||
<button class="w-full flex items-center space-x-3 px-4 py-3 bg-surface-variant rounded-xl text-primary font-medium">
|
||||
<span class="material-symbols-outlined">tune</span>
|
||||
<span>Général</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center space-x-3 px-4 py-3 hover:bg-surface-variant/40 rounded-xl text-on-surface-variant transition-all">
|
||||
<span class="material-symbols-outlined">notifications_active</span>
|
||||
<span>Alerte & Rappels</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center space-x-3 px-4 py-3 hover:bg-surface-variant/40 rounded-xl text-on-surface-variant transition-all">
|
||||
<span class="material-symbols-outlined">shield</span>
|
||||
<span>Confidentialité</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Settings Content -->
|
||||
<div class="lg:col-span-8 space-y-8">
|
||||
<!-- Section 1: Son de l'alarme -->
|
||||
<section class="surface-container rounded-xl p-8 border border-outline-variant/15">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<span class="material-symbols-outlined text-primary">campaign</span>
|
||||
<h2 class="font-headline font-bold text-2xl">Son de l'alarme</h2>
|
||||
</div>
|
||||
<p class="font-body text-on-surface-variant mb-6 text-sm">Définissez l'ambiance sonore qui marquera vos rappels d'archivage.</p>
|
||||
<div class="relative max-w-md">
|
||||
<label class="font-label text-xs text-on-surface-variant mb-2 block uppercase tracking-wider font-semibold">Sélecteur de mélodie</label>
|
||||
<div class="relative group">
|
||||
<select class="w-full bg-surface-container-low border border-outline-variant/30 text-on-surface rounded-xl px-4 py-4 appearance-none focus:outline-none focus:border-primary/50 focus:ring-4 focus:ring-primary/10 transition-all font-medium cursor-pointer">
|
||||
<option value="arpege">Arpège</option>
|
||||
<option value="bip_bip">Bip Bip</option>
|
||||
<option selected="" value="melodie_amethyste">Mélodie Améthyste</option>
|
||||
<option value="obsidienne">Obsidienne</option>
|
||||
</select>
|
||||
<div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-primary">
|
||||
<span class="material-symbols-outlined">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center space-x-2 text-primary-fixed-dim text-xs bg-primary/10 w-fit px-3 py-1.5 rounded-full font-medium">
|
||||
<span class="material-symbols-outlined !text-sm" data-weight="fill">play_circle</span>
|
||||
<span>Écouter l'aperçu</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 2: Notifications -->
|
||||
<section class="surface-container rounded-xl p-8 border border-outline-variant/15">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<span class="material-symbols-outlined text-secondary">notifications_active</span>
|
||||
<h2 class="font-headline font-bold text-2xl">Notifications</h2>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- Switch Item -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-high rounded-xl hover:bg-surface-variant/40 transition-all border border-transparent hover:border-outline-variant/10">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-surface-container-low flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">desktop_windows</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-headline font-bold">Notifications PC Windows</p>
|
||||
<p class="font-label text-xs text-on-surface-variant">Alertes natives sur votre système d'exploitation.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle Component -->
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input checked="" class="sr-only peer" type="checkbox" value=""/>
|
||||
<div class="w-11 h-6 bg-surface-container-highest peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary shadow-sm"></div>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Modal Trigger Item -->
|
||||
<div class="flex items-center justify-between p-4 bg-surface-container-high rounded-xl hover:bg-surface-variant/40 transition-all border border-transparent hover:border-outline-variant/10">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-surface-container-low flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">smartphone</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-headline font-bold">Notifications Mobile</p>
|
||||
<p class="font-label text-xs text-on-surface-variant">Synchronisez vos alertes sur iOS ou Android.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="px-6 py-2.5 bg-gradient-to-r from-primary to-primary-container text-on-primary font-bold rounded-xl text-sm shadow-lg shadow-primary/20 scale-95 hover:scale-100 active:scale-95 transition-all">
|
||||
Configurer Mobile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Additional High-End Detail: Information Card -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="w-full border-t border-[#4b4652]/15 bg-[#100c16] mt-24">
|
||||
<div class="flex flex-row justify-between items-center px-8 py-6 w-full max-w-6xl mx-auto">
|
||||
<div class="font-['Plus_Jakarta_Sans'] text-xs font-medium text-[#b0a8b6] opacity-80">
|
||||
© 2024 L'Archive d'Obsidienne. Tous droits réservés.
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<a class="font-['Plus_Jakarta_Sans'] text-xs font-medium text-[#b0a8b6] hover:text-[#f1e8f7] underline transition-all opacity-80 hover:opacity-100" href="#">Confidentialité</a>
|
||||
<a class="font-['Plus_Jakarta_Sans'] text-xs font-medium text-[#b0a8b6] hover:text-[#f1e8f7] underline transition-all opacity-80 hover:opacity-100" href="#">Aide</a>
|
||||
<a class="font-['Plus_Jakarta_Sans'] text-xs font-medium text-[#b0a8b6] hover:text-[#f1e8f7] underline transition-all opacity-80 hover:opacity-100" href="#">Conditions d'utilisation</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 321 KiB |
@ -1,157 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="fr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>NOTIFICATIONS MOBILES - The Obsidian Archive</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&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"/>
|
||||
<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: {
|
||||
"tertiary-fixed": "#fed01b",
|
||||
"on-tertiary-fixed-variant": "#645000",
|
||||
"error-container": "#a70138",
|
||||
"inverse-primary": "#7c41b5",
|
||||
"on-error-container": "#ffb2b9",
|
||||
"tertiary-fixed-dim": "#eec200",
|
||||
"on-tertiary": "#645000",
|
||||
"on-primary-fixed": "#000000",
|
||||
"outline": "#7a7380",
|
||||
"primary-fixed-dim": "#b378ef",
|
||||
"surface-tint": "#cb97ff",
|
||||
"background": "#100c16",
|
||||
"primary-container": "#c185fd",
|
||||
"surface-variant": "#292332",
|
||||
"inverse-surface": "#fef7ff",
|
||||
"on-secondary-fixed-variant": "#922164",
|
||||
"surface-container-high": "#231d2b",
|
||||
"primary-dim": "#be83fa",
|
||||
"outline-variant": "#4b4652",
|
||||
"on-primary-fixed-variant": "#430077",
|
||||
"on-primary": "#46007c",
|
||||
"surface-container": "#1c1724",
|
||||
"surface-bright": "#302939",
|
||||
"on-tertiary-fixed": "#433500",
|
||||
"surface": "#100c16",
|
||||
"on-error": "#490013",
|
||||
"on-surface": "#f1e8f7",
|
||||
"tertiary-container": "#fed01b",
|
||||
"primary-fixed": "#c185fd",
|
||||
"tertiary": "#ffe083",
|
||||
"secondary-container": "#85145a",
|
||||
"on-primary-container": "#360061",
|
||||
"on-surface-variant": "#b0a8b6",
|
||||
"surface-container-low": "#16111d",
|
||||
"secondary-dim": "#f271b5",
|
||||
"on-secondary-fixed": "#690045",
|
||||
"secondary": "#f673b7",
|
||||
"primary": "#cb97ff",
|
||||
"on-tertiary-container": "#594700",
|
||||
"inverse-on-surface": "#59535f",
|
||||
"secondary-fixed-dim": "#ffabd1",
|
||||
"error": "#ff6e84",
|
||||
"on-secondary": "#4a002f",
|
||||
"error-dim": "#d73357",
|
||||
"secondary-fixed": "#ffc0db",
|
||||
"on-secondary-container": "#ffbeda",
|
||||
"tertiary-dim": "#eec200",
|
||||
"surface-dim": "#100c16",
|
||||
"surface-container-lowest": "#000000",
|
||||
"surface-container-highest": "#292332",
|
||||
"on-background": "#f1e8f7"
|
||||
},
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(28, 23, 36, 0.6);
|
||||
backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(203, 151, 255, 0.15);
|
||||
}
|
||||
.neon-glow {
|
||||
box-shadow: 0 0 20px rgba(203, 151, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body text-on-surface">
|
||||
<!-- Modal Container -->
|
||||
<div class="relative w-full max-w-4xl mx-4">
|
||||
<!-- Header Shell (Reference TopAppBar Logic) -->
|
||||
<header class="glass-panel rounded-t-xl px-8 py-6 flex justify-between items-center border-b-0">
|
||||
<h1 class="font-headline text-2xl font-extrabold text-primary tracking-tight uppercase">NOTIFICATIONS MOBILES</h1>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="close">close</span>
|
||||
</button>
|
||||
</header>
|
||||
<!-- Main Modal Content -->
|
||||
<main class="glass-panel p-8 flex flex-col md:flex-row gap-8 border-t-0">
|
||||
<!-- Section 1: Installer l'app -->
|
||||
<section class="flex-1 bg-surface-container-high/40 rounded-xl p-6 border border-outline-variant/10 flex flex-col items-center text-center">
|
||||
<h2 class="font-headline text-lg font-bold text-on-surface mb-4">1. Installer l'app ntfy</h2>
|
||||
<p class="text-on-surface-variant text-sm mb-6 leading-relaxed">
|
||||
Téléchargez l'application ntfy sur votre appareil mobile. Scannez ce code pour ouvrir directement la page sur l'App Store ou le Play Store.
|
||||
</p>
|
||||
<div class="relative p-4 bg-white rounded-xl neon-glow">
|
||||
<img alt="QR Code" class="w-40 h-40 object-contain" data-alt="high-contrast minimalist black and white QR code on a clean white background with subtle purple accent border" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCoHplz4v5lFmIppdNJovVc5-hSkDERe2wzaISOEQMcC-QcKql7PhubFgs0waRtVzcK-kSj7aZMns7SgSpda3qFMFsejuj3X6-dd4fmYnNxGlH-7D6bqp769kx9eh1RPWh9lPPXOFk6HRMEWaT14Lo7bJNd2r9KV9-L9rs2Maw6xYteeyNHhkjVq8xGs3WCUPtlzw4o2TYPm-AsKtcl0wZ9W708asChAR7XIC8XN9VvrCBjmzZY80FfFqkLRYpEy2Fu436fdYNMi9Gw"/>
|
||||
</div>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<span class="material-symbols-outlined text-primary-dim" data-icon="phone_iphone">phone_iphone</span>
|
||||
<span class="material-symbols-outlined text-primary-dim" data-icon="shop">shop</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 2: Scanne pour t'abonner -->
|
||||
<section class="flex-1 bg-surface-container-high/40 rounded-xl p-6 border border-outline-variant/10 flex flex-col items-center text-center">
|
||||
<h2 class="font-headline text-lg font-bold text-on-surface mb-4">2. Scanne pour t'abonner</h2>
|
||||
<p class="text-on-surface-variant text-sm mb-6 leading-relaxed">
|
||||
Une fois l'application installée, scannez ce code pour ajouter automatiquement le canal de l'Archive et recevoir vos alertes en temps réel.
|
||||
</p>
|
||||
<div class="relative p-4 bg-white rounded-xl neon-glow">
|
||||
<img alt="QR Code" class="w-40 h-40 object-contain" data-alt="complex technical QR code pattern with dark violet details on a bright white square background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBr49FhRSsP6Y6oldsSFE4b3EgyZbvhiIx0AzPULASiY7WfBL4nluQA79isPxpgM6cQ_6mILGmFEwhQuZ4VlnVPpZSf_ZSw1LaJcByhRZjsAfGUPDqz3hYFdK_utRXzSS4fBbCRYCZ7BCHsS1Z1tDPpajw8y8GpaWTxFSyqtTo6DP3KFn1tiaGBhelUWlDSfdtMmpbdDPdR_fiDqHbbpMjYq5_VTNlCtYxdpLZURNIIcffduDakzPrMvUzqYgA39dPGww_fHO_eH-RP"/>
|
||||
</div>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="notifications_active">notifications_active</span>
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="key">key</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Action Footer -->
|
||||
<footer class="glass-panel rounded-b-xl px-8 py-6 flex justify-end items-center gap-4 border-t-0">
|
||||
<button class="flex items-center gap-2 px-6 py-2.5 rounded-full font-label font-bold text-sm bg-surface-container-highest text-on-surface hover:bg-surface-bright transition-all active:scale-95">
|
||||
Fermer
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-8 py-2.5 rounded-full font-label font-bold text-sm bg-gradient-to-r from-primary to-primary-container text-on-primary shadow-lg shadow-primary/20 hover:opacity-90 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="notifications">notifications</span>
|
||||
Tester
|
||||
</button>
|
||||
</footer>
|
||||
<!-- Bottom Accent Line -->
|
||||
<div class="h-1 w-full bg-gradient-to-r from-transparent via-primary/50 to-transparent absolute -bottom-0.5 left-0 blur-sm"></div>
|
||||
</div>
|
||||
<!-- Background Decoration Elements -->
|
||||
<div class="fixed top-20 left-20 w-64 h-64 bg-primary/10 rounded-full blur-[100px] -z-10"></div>
|
||||
<div class="fixed bottom-20 right-20 w-96 h-96 bg-secondary/10 rounded-full blur-[120px] -z-10"></div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 325 KiB |
@ -1,464 +0,0 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 297 KiB |
@ -1,203 +0,0 @@
|
||||
<!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=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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": {
|
||||
"surface-dim": "#100c16",
|
||||
"error-container": "#a70138",
|
||||
"inverse-on-surface": "#59535f",
|
||||
"secondary-container": "#85145a",
|
||||
"outline": "#7a7380",
|
||||
"error-dim": "#d73357",
|
||||
"on-surface-variant": "#b0a8b6",
|
||||
"inverse-primary": "#7c41b5",
|
||||
"inverse-surface": "#fef7ff",
|
||||
"on-tertiary-container": "#594700",
|
||||
"surface-container-low": "#16111d",
|
||||
"on-primary-fixed": "#000000",
|
||||
"on-tertiary-fixed-variant": "#645000",
|
||||
"on-secondary-fixed-variant": "#922164",
|
||||
"surface": "#100c16",
|
||||
"on-secondary-fixed": "#690045",
|
||||
"primary": "#cb97ff",
|
||||
"surface-container-high": "#231d2b",
|
||||
"on-primary": "#46007c",
|
||||
"secondary": "#f673b7",
|
||||
"on-primary-fixed-variant": "#430077",
|
||||
"primary-fixed-dim": "#b378ef",
|
||||
"primary-fixed": "#c185fd",
|
||||
"background": "#100c16",
|
||||
"tertiary-dim": "#eec200",
|
||||
"on-surface": "#f1e8f7",
|
||||
"on-tertiary-fixed": "#433500",
|
||||
"on-secondary": "#4a002f",
|
||||
"secondary-fixed-dim": "#ffabd1",
|
||||
"on-error-container": "#ffb2b9",
|
||||
"on-background": "#f1e8f7",
|
||||
"outline-variant": "#4b4652",
|
||||
"secondary-fixed": "#ffc0db",
|
||||
"primary-dim": "#be83fa",
|
||||
"tertiary": "#ffe083",
|
||||
"surface-tint": "#cb97ff",
|
||||
"surface-container-highest": "#292332",
|
||||
"secondary-dim": "#f271b5",
|
||||
"on-primary-container": "#360061",
|
||||
"surface-bright": "#302939",
|
||||
"surface-container": "#1c1724",
|
||||
"on-error": "#490013",
|
||||
"tertiary-fixed": "#fed01b",
|
||||
"tertiary-fixed-dim": "#eec200",
|
||||
"on-tertiary": "#645000",
|
||||
"on-secondary-container": "#ffbeda",
|
||||
"tertiary-container": "#fed01b",
|
||||
"primary-container": "#c185fd",
|
||||
"error": "#ff6e84",
|
||||
"surface-variant": "#292332",
|
||||
"surface-container-lowest": "#000000"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.sidebar-glass {
|
||||
background: radial-gradient(circle at top right, #1e1b4b, #0a0a0f);
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(203, 151, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(203, 151, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-dim text-on-surface font-body overflow-hidden">
|
||||
<!-- Wrapper to simulate application layout -->
|
||||
<div class="flex h-screen w-full">
|
||||
<!-- SideNavBar Component -->
|
||||
<!-- style_component_shape: h-screen w-64 fixed left-0 top-0 -->
|
||||
<!-- style_shell_layout: flex flex-col h-full py-6 border-r border-white/10 -->
|
||||
<!-- style_bg_color: bg-purple-950/60 backdrop-blur-xl -->
|
||||
<aside class="h-screen w-64 left-0 top-0 flex flex-col h-full py-6 sidebar-glass backdrop-blur-xl border-r border-white/10 shadow-2xl shadow-black/50 font-headline antialiased tracking-tight">
|
||||
<!-- Header Section -->
|
||||
<div class="px-6 mb-10 flex items-center gap-4 group">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-secondary-container flex items-center justify-center p-0.5 shadow-lg shadow-primary/20">
|
||||
<div class="w-full h-full bg-surface-dim rounded-[7px] flex items-center justify-center overflow-hidden">
|
||||
<img alt="Logo L'Archive d'Obsidienne" class="w-full h-full object-cover" data-alt="Stylized obsidian crystal shard with glowing violet cracks, deep purple and black color palette, elegant fantasy aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtmw3Vkb-yhKfdwdDCCp_A-crxkp-1Z_h-WSZrhRYh4mZCP4iwtU1KmmNQ-x547g23QAHkfKdyClESpK3My9dh0lgHObrnQiiLLr6o6Xvj5mtsXqurBYVThaWWKtBpLU5qHx52m7ZPwazg2TfvesKszIYwOzR2kAS89BvpMzTIcgyB61FBEr6HbRTDzI1hNuSJfxkbkVEezqqpK_MT3AhQrRg3y8NyCKd8NOrqaACMxvl7SW9OI-1p8gxIS9jfq8a8zFcNT2_NtVrm"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xl font-bold tracking-tighter text-violet-300">Obsidienne</span>
|
||||
<span class="text-[10px] font-label font-bold uppercase tracking-widest text-on-surface-variant/60">Gestion d'élevage</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation Scroll Area -->
|
||||
<div class="flex-1 overflow-y-auto px-3 space-y-8 custom-scrollbar">
|
||||
<!-- PRINCIPAL -->
|
||||
<div>
|
||||
<h3 class="px-4 mb-3 text-[11px] font-label font-bold uppercase tracking-[0.2em] text-on-surface-variant/40">Principal</h3>
|
||||
<nav class="space-y-1">
|
||||
<!-- Active Item -->
|
||||
<!-- style_active_navigation: relative flex items-center gap-3 px-4 py-3 text-violet-300 before:absolute before:left-1 before:h-8 before:w-1 before:bg-violet-500 before:rounded-full -->
|
||||
<a class="relative flex items-center gap-3 px-4 py-3 text-violet-300 bg-white/5 rounded-xl before:absolute before:left-1 before:h-8 before:w-1 before:bg-violet-500 before:rounded-full active:scale-95 transition-all duration-300" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
||||
<span class="text-sm font-semibold">Tableau de bord</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- ENCLOS -->
|
||||
<div>
|
||||
<h3 class="px-4 mb-3 text-[11px] font-label font-bold uppercase tracking-[0.2em] text-on-surface-variant/40">Enclos</h3>
|
||||
<nav class="space-y-1">
|
||||
<!-- Inactive Items -->
|
||||
<!-- style_inactive_navigation: flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 -->
|
||||
<!-- style_universal_hover: hover:bg-white/5 hover:text-violet-200 transition-all duration-300 -->
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
||||
<span class="text-sm font-medium">Enclos Alpha</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
||||
<span class="text-sm font-medium">Enclos Bêta</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
||||
<span class="text-sm font-medium">Enclos Gamma</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
||||
<span class="text-sm font-medium">Enclos Delta</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
||||
<span class="text-sm font-medium">Enclos Epsilon</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">pentagon</span>
|
||||
<span class="text-sm font-medium">Enclos Zêta</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- OUTILS -->
|
||||
<div>
|
||||
<h3 class="px-4 mb-3 text-[11px] font-label font-bold uppercase tracking-[0.2em] text-on-surface-variant/40">Outils</h3>
|
||||
<nav class="space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">favorite</span>
|
||||
<span class="text-sm font-medium">Accouplement</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">inventory_2</span>
|
||||
<span class="text-sm font-medium">Inventaire</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">account_tree</span>
|
||||
<span class="text-sm font-medium">Workflows</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Section -->
|
||||
<div class="mt-auto pt-6 px-3 border-t border-white/5">
|
||||
<nav class="space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 opacity-80 hover:bg-white/5 hover:text-violet-200 transition-all duration-300 active:scale-95 group" href="#">
|
||||
<span class="material-symbols-outlined text-violet-400/50 group-hover:text-violet-400">settings</span>
|
||||
<span class="text-sm font-medium">Paramètres</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-3 px-4 py-2 text-on-surface-variant/40">
|
||||
<span class="material-symbols-outlined text-xs">info</span>
|
||||
<span class="text-[10px] font-label font-bold uppercase tracking-wider">v1.1.5 DEV</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area (Background) -->
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
@ -1,225 +0,0 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 233 KiB |
@ -1,305 +0,0 @@
|
||||
<!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&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 280 KiB |
@ -1,231 +0,0 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB |
Loading…
Reference in New Issue
Block a user