mickael/dd-timer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity
0c3b5e27a7
dd-timer/refonte_graphique/enclos.html
POL Mickaël 0c3b5e27a7 rename: Minuteur Dragodinde → Obsidienne 
- Renommage complet dans package.json, main.ts, UI, tray, notifications
- GUID NSIS fixe pour mise à jour propre (pas de doublon d'installation)
- Migration automatique des données depuis %APPDATA%\Minuteur Dragodinde\
- Rétrocompatibilité import : backups 'minuteur-dragodinde' toujours acceptés
- Mise à jour README changelog, CLAUDE.md, docs, maquettes, page ntfy

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-06 07:34:07 +02:00

228 lines
13 KiB
HTML
Executable File
Raw Blame History

<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>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&amp;family=Outfit:wght@400;600;700&amp;family=Material+Icons+Round&amp;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>
Reference in New Issue View Git Blame Copy Permalink