193 lines
13 KiB
HTML
193 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" class="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Data_analysis - Design System Showcase</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'monospace'],
|
|
},
|
|
colors: {
|
|
indigo: {
|
|
50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc',
|
|
400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca',
|
|
800: '#3730a3', 900: '#312e81', 950: '#1e1b4b',
|
|
},
|
|
slate: {
|
|
50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1',
|
|
400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155',
|
|
800: '#1e293b', 900: '#0f172a', 950: '#020617',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.grid-cell { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
|
|
.transition-theme { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 dark:bg-slate-950 transition-theme min-h-screen p-8 font-sans">
|
|
|
|
<div class="max-w-6xl mx-auto space-y-12">
|
|
|
|
<!-- Header -->
|
|
<header class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-6">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-slate-900 dark:text-white">Design System Showcase</h1>
|
|
<p class="text-slate-500 dark:text-slate-400 mt-1">Composants clés pour Data_analysis • Shadcn UI style</p>
|
|
</div>
|
|
<button onclick="toggleDarkMode()" class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 px-4 py-2 rounded-lg shadow-sm flex items-center gap-2 text-sm font-medium transition-colors hover:bg-slate-50 dark:hover:bg-slate-800 dark:text-white">
|
|
<span class="dark:hidden text-slate-600">🌙 Passer au Mode Sombre</span>
|
|
<span class="hidden dark:block text-slate-300">☀️ Passer au Mode Clair</span>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Section 1: Buttons & Controls -->
|
|
<section class="space-y-6">
|
|
<h2 class="text-xl font-semibold dark:text-white flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-indigo-600 rounded-full"></span>
|
|
Contrôles & Actions
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- Buttons -->
|
|
<div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 space-y-4">
|
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Boutons (Buttons)</p>
|
|
<div class="flex flex-wrap gap-3">
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-all shadow-sm shadow-indigo-200 dark:shadow-none">Primary Action</button>
|
|
<button class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 px-4 py-2 rounded-md text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">Secondary</button>
|
|
<button class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white px-4 py-2 text-sm font-medium">Ghost</button>
|
|
<button class="bg-rose-50 dark:bg-rose-950/30 text-rose-600 dark:text-rose-400 border border-rose-100 dark:border-rose-900/50 px-4 py-2 rounded-md text-sm font-medium hover:bg-rose-100 dark:hover:bg-rose-900/50 transition-colors">Destructive</button>
|
|
</div>
|
|
</div>
|
|
<!-- Badges -->
|
|
<div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 space-y-4">
|
|
<p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Statuts & Badges</p>
|
|
<div class="flex flex-wrap gap-3">
|
|
<span class="bg-emerald-100 dark:bg-emerald-950/30 text-emerald-700 dark:text-emerald-400 px-2.5 py-0.5 rounded-full text-xs font-semibold border border-emerald-200 dark:border-emerald-900/50">Valid Data</span>
|
|
<span class="bg-rose-100 dark:bg-rose-950/30 text-rose-700 dark:text-rose-400 px-2.5 py-0.5 rounded-full text-xs font-semibold border border-rose-200 dark:border-rose-900/50">Outlier Detected</span>
|
|
<span class="bg-indigo-100 dark:bg-indigo-950/30 text-indigo-700 dark:text-indigo-400 px-2.5 py-0.5 rounded-full text-xs font-semibold border border-indigo-200 dark:border-indigo-900/50">Target (Y)</span>
|
|
<span class="bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 px-2.5 py-0.5 rounded-full text-xs font-semibold">Numeric</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: The Smart Grid -->
|
|
<section class="space-y-6">
|
|
<h2 class="text-xl font-semibold dark:text-white flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-indigo-600 rounded-full"></span>
|
|
La Smart Grid (TanStack Table Style)
|
|
</h2>
|
|
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden shadow-sm">
|
|
<table class="w-full border-separate border-spacing-0">
|
|
<thead class="bg-slate-50 dark:bg-slate-800/50">
|
|
<tr>
|
|
<th class="border-b border-r border-slate-200 dark:border-slate-700 p-2 text-center text-xs font-mono text-slate-400">#</th>
|
|
<th class="border-b border-r border-slate-200 dark:border-slate-700 p-3 text-left">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-xs font-bold text-slate-900 dark:text-white">Temperature_C</span>
|
|
<span class="text-[10px] font-mono text-slate-400 uppercase tracking-tighter">C1 • Numeric</span>
|
|
</div>
|
|
</th>
|
|
<th class="border-b border-r border-slate-200 dark:border-slate-700 p-3 text-left">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-bold text-slate-900 dark:text-white">Pressure_Bar</span>
|
|
<span class="w-2 h-2 bg-rose-500 rounded-full animate-pulse"></span>
|
|
</div>
|
|
<span class="text-[10px] font-mono text-slate-400 uppercase tracking-tighter">C2 • Numeric</span>
|
|
</div>
|
|
</th>
|
|
<th class="border-b border-slate-200 dark:border-slate-700 p-3 text-left bg-indigo-50/30 dark:bg-indigo-900/10">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">Yield_Output</span>
|
|
<span class="text-[10px] font-mono text-indigo-400 uppercase tracking-tighter italic">Target Variable</span>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 dark:divide-slate-800">
|
|
<!-- Normal Row -->
|
|
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
|
|
<td class="p-2 text-center text-xs font-mono text-slate-400 border-r border-slate-100 dark:border-slate-800">1</td>
|
|
<td class="p-3 grid-cell text-slate-700 dark:text-slate-300 border-r border-slate-100 dark:border-slate-800">24.50</td>
|
|
<td class="p-3 grid-cell text-slate-700 dark:text-slate-300 border-r border-slate-100 dark:border-slate-800">1.02</td>
|
|
<td class="p-3 grid-cell font-bold text-slate-900 dark:text-white bg-indigo-50/10 dark:bg-indigo-900/5">98.2</td>
|
|
</tr>
|
|
<!-- Outlier Row -->
|
|
<tr class="bg-rose-50/50 dark:bg-rose-900/10">
|
|
<td class="p-2 text-center text-xs font-mono text-rose-400 border-r border-rose-100 dark:border-rose-900/20">2</td>
|
|
<td class="p-3 grid-cell text-slate-700 dark:text-slate-300 border-r border-rose-100 dark:border-rose-900/20">24.52</td>
|
|
<td class="p-3 grid-cell font-bold text-rose-600 dark:text-rose-400 border-r border-rose-100 dark:border-rose-900/20 shadow-inner">9.99*</td>
|
|
<td class="p-3 grid-cell font-bold text-slate-900 dark:text-white opacity-40">45.1</td>
|
|
</tr>
|
|
<!-- Editing Row -->
|
|
<tr class="bg-white dark:bg-slate-900">
|
|
<td class="p-2 text-center text-xs font-mono text-slate-400 border-r border-slate-100 dark:border-slate-800">3</td>
|
|
<td class="p-3 border-r border-slate-100 dark:border-slate-800">
|
|
<input type="text" value="24.48" class="w-full bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-500 dark:border-indigo-400 rounded px-2 py-1 text-sm font-mono dark:text-white outline-none">
|
|
</td>
|
|
<td class="p-3 grid-cell text-slate-700 dark:text-slate-300 border-r border-slate-100 dark:border-slate-800">1.01</td>
|
|
<td class="p-3 grid-cell font-bold text-slate-900 dark:text-white">97.9</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Smart Insights Panel -->
|
|
<section class="space-y-6">
|
|
<h2 class="text-xl font-semibold dark:text-white flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-indigo-600 rounded-full"></span>
|
|
Insight Panel (Explainable AI)
|
|
</h2>
|
|
<div class="max-w-md bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-xl overflow-hidden">
|
|
<div class="p-4 bg-indigo-600 flex items-center justify-between text-white">
|
|
<span class="font-bold text-sm">Smart Insight</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2">Observation</p>
|
|
<p class="text-sm dark:text-slate-300">Column <span class="font-mono text-indigo-600 dark:text-indigo-400 font-bold">Pressure_Bar</span> has 34 outliers.</p>
|
|
</div>
|
|
|
|
<!-- Simulated Chart -->
|
|
<div class="h-24 bg-slate-50 dark:bg-slate-800 rounded-lg flex items-end gap-1 p-2 border border-slate-100 dark:border-slate-700">
|
|
<div class="bg-indigo-400/30 w-full h-[20%] rounded-t"></div>
|
|
<div class="bg-indigo-400/30 w-full h-[40%] rounded-t"></div>
|
|
<div class="bg-indigo-400/30 w-full h-[100%] rounded-t"></div>
|
|
<div class="bg-indigo-400/30 w-full h-[60%] rounded-t"></div>
|
|
<div class="bg-rose-500 w-full h-[15%] rounded-t border-t-2 border-rose-600 shadow-[0_0_8px_rgba(244,63,94,0.4)]"></div>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<p class="text-xs text-slate-500 italic dark:text-slate-400">Excluding these will increase your model accuracy (R²) by <strong>26%</strong>.</p>
|
|
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-bold transition-all shadow-lg shadow-indigo-100 dark:shadow-none">Appliquer la Correction</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function toggleDarkMode() {
|
|
document.documentElement.classList.toggle('dark');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|