642 lines
34 KiB
HTML
642 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - Hybrid Minimalist + Data Visualization</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary: #1a1a1a;
|
|
--secondary: #6b7280;
|
|
--accent: #3b82f6;
|
|
--background: #fafafa;
|
|
--surface: #ffffff;
|
|
--border: #e5e7eb;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--background);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.mono { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
.minimal-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.minimal-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.metric-number {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.text-subtle { color: var(--secondary); }
|
|
|
|
.progress-ring {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.progress-ring__circle {
|
|
transition: stroke-dashoffset 0.35s;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
.stat-card {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 200px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="min-h-screen">
|
|
<!-- Navigation (from dashboard_2) -->
|
|
<nav class="border-b border-gray-200 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center space-x-8">
|
|
<h1 class="text-xl font-semibold">ApéroNight</h1>
|
|
<div class="flex space-x-6">
|
|
<a href="#" class="text-gray-900 border-b-2 border-blue-500 pb-1">Dashboard</a>
|
|
<a href="#" class="text-gray-500 hover:text-gray-900">Événements</a>
|
|
<a href="#" class="text-gray-500 hover:text-gray-900">Profil</a>
|
|
</div>
|
|
</div>
|
|
<button class="p-2 rounded-lg hover:bg-gray-100">
|
|
<i data-lucide="bell" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
<!-- Header (from dashboard_2) -->
|
|
<div class="mb-12 fade-in">
|
|
<h1 class="text-4xl font-bold mb-2">Bonjour, Marie</h1>
|
|
<p class="text-lg text-subtle">Voici un aperçu de vos activités et événements</p>
|
|
</div>
|
|
|
|
<!-- Critical Alert - Draft Tickets (from dashboard_2 style) -->
|
|
<div class="minimal-card rounded-lg p-6 mb-8 border-l-4 border-orange-400 bg-orange-50 fade-in">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-start space-x-3">
|
|
<div class="p-2 bg-orange-100 rounded-lg">
|
|
<i data-lucide="clock" class="w-5 h-5 text-orange-600"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-1">Action requise</h3>
|
|
<p class="text-sm text-gray-600 mb-3">2 billets en attente de paiement expirent dans 25 minutes</p>
|
|
|
|
<!-- Ticket Details -->
|
|
<div class="bg-white rounded-lg p-3 mb-3">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<span class="font-medium text-sm">Soirée Jazz au Sunset</span>
|
|
<span class="text-xs text-gray-500 ml-2">2 billets • €70</span>
|
|
</div>
|
|
<span class="mono text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">1/3 tentatives</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="bg-orange-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-700 transition-colors">
|
|
Payer maintenant
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metrics Grid (from dashboard_2) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12 fade-in">
|
|
<div class="minimal-card rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-sm font-medium text-subtle">Réservations</span>
|
|
<i data-lucide="calendar-check" class="w-4 h-4 text-green-500"></i>
|
|
</div>
|
|
<div class="metric-number text-3xl text-gray-900 mb-1">05</div>
|
|
<div class="text-xs text-subtle">+2 ce mois</div>
|
|
</div>
|
|
|
|
<div class="minimal-card rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-sm font-medium text-subtle">Aujourd'hui</span>
|
|
<i data-lucide="clock" class="w-4 h-4 text-blue-500"></i>
|
|
</div>
|
|
<div class="metric-number text-3xl text-gray-900 mb-1">03</div>
|
|
<div class="text-xs text-subtle">événements</div>
|
|
</div>
|
|
|
|
<div class="minimal-card rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-sm font-medium text-subtle">Demain</span>
|
|
<i data-lucide="calendar" class="w-4 h-4 text-purple-500"></i>
|
|
</div>
|
|
<div class="metric-number text-3xl text-gray-900 mb-1">07</div>
|
|
<div class="text-xs text-subtle">événements</div>
|
|
</div>
|
|
|
|
<div class="minimal-card rounded-lg p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-sm font-medium text-subtle">À venir</span>
|
|
<i data-lucide="trending-up" class="w-4 h-4 text-orange-500"></i>
|
|
</div>
|
|
<div class="metric-number text-3xl text-gray-900 mb-1">15</div>
|
|
<div class="text-xs text-subtle">cette semaine</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Cards with Progress (from dashboard_3) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- Participation Rate -->
|
|
<div class="stat-card rounded-2xl p-6 minimal-card fade-in">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-gray-600">Taux de participation</h3>
|
|
<p class="text-3xl font-bold text-gray-900 mt-2">87%</p>
|
|
</div>
|
|
<div class="relative">
|
|
<svg class="progress-ring w-16 h-16" viewBox="0 0 40 40">
|
|
<circle class="progress-ring__circle" stroke="#e5e7eb" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"/>
|
|
<circle class="progress-ring__circle" stroke="#10b981" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"
|
|
stroke-dasharray="87 13" stroke-linecap="round"/>
|
|
</svg>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="trending-up" class="w-6 h-6 text-green-600"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center text-sm">
|
|
<span class="text-green-600 font-medium">+5%</span>
|
|
<span class="text-gray-500 ml-1">vs. mois dernier</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Événements créés -->
|
|
<div class="stat-card rounded-2xl p-6 minimal-card fade-in">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-gray-600">Événements créés</h3>
|
|
<p class="text-3xl font-bold text-gray-900 mt-2">12</p>
|
|
</div>
|
|
<div class="relative">
|
|
<svg class="progress-ring w-16 h-16" viewBox="0 0 40 40">
|
|
<circle class="progress-ring__circle" stroke="#e5e7eb" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"/>
|
|
<circle class="progress-ring__circle" stroke="#3b82f6" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"
|
|
stroke-dasharray="60 40" stroke-linecap="round"/>
|
|
</svg>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="plus-circle" class="w-6 h-6 text-blue-600"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center text-sm">
|
|
<span class="text-blue-600 font-medium">+3</span>
|
|
<span class="text-gray-500 ml-1">ce mois</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Revenus -->
|
|
<div class="stat-card rounded-2xl p-6 minimal-card fade-in">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-gray-600">Revenus</h3>
|
|
<p class="text-3xl font-bold text-gray-900 mt-2">€2,340</p>
|
|
</div>
|
|
<div class="relative">
|
|
<svg class="progress-ring w-16 h-16" viewBox="0 0 40 40">
|
|
<circle class="progress-ring__circle" stroke="#e5e7eb" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"/>
|
|
<circle class="progress-ring__circle" stroke="#8b5cf6" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"
|
|
stroke-dasharray="78 22" stroke-linecap="round"/>
|
|
</svg>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="euro" class="w-6 h-6 text-purple-600"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center text-sm">
|
|
<span class="text-purple-600 font-medium">+18%</span>
|
|
<span class="text-gray-500 ml-1">vs. mois dernier</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Satisfaction -->
|
|
<div class="stat-card rounded-2xl p-6 minimal-card fade-in">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-gray-600">Satisfaction</h3>
|
|
<p class="text-3xl font-bold text-gray-900 mt-2">4.8</p>
|
|
</div>
|
|
<div class="relative">
|
|
<svg class="progress-ring w-16 h-16" viewBox="0 0 40 40">
|
|
<circle class="progress-ring__circle" stroke="#e5e7eb" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"/>
|
|
<circle class="progress-ring__circle" stroke="#f59e0b" stroke-width="3" fill="transparent" r="16" cx="20" cy="20"
|
|
stroke-dasharray="96 4" stroke-linecap="round"/>
|
|
</svg>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i data-lucide="star" class="w-6 h-6 text-yellow-500 fill-current"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center text-sm">
|
|
<span class="text-yellow-600 font-medium">+0.2</span>
|
|
<span class="text-gray-500 ml-1">vs. mois dernier</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts and Analytics (from dashboard_3) -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
|
|
<!-- Event Participation Chart -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm minimal-card">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900">Participation aux événements</h3>
|
|
<div class="flex items-center space-x-2">
|
|
<button class="text-sm bg-blue-100 text-blue-700 px-3 py-1 rounded-full">7j</button>
|
|
<button class="text-sm text-gray-500 px-3 py-1 rounded-full">30j</button>
|
|
<button class="text-sm text-gray-500 px-3 py-1 rounded-full">3m</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="participationChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event Categories Pie Chart -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm minimal-card">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-6">Catégories d'événements</h3>
|
|
<div class="chart-container">
|
|
<canvas id="categoriesChart"></canvas>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-3 h-3 bg-blue-500 rounded-full"></div>
|
|
<span class="text-sm text-gray-600">Concert (40%)</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
|
|
<span class="text-sm text-gray-600">Cuisine (25%)</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
|
<span class="text-sm text-gray-600">Tech (20%)</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-3 h-3 bg-purple-500 rounded-full"></div>
|
|
<span class="text-sm text-gray-600">Art (15%)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline and Events (from dashboard_3) -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Event Timeline -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm minimal-card">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-900">Timeline des événements</h3>
|
|
<button class="text-blue-600 text-sm font-medium hover:underline">Voir tout</button>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="absolute left-4 top-0 bottom-0 w-px bg-gray-200"></div>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Timeline Item -->
|
|
<div class="relative pl-10 pb-6">
|
|
<div class="timeline-item text-green-600">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Concert Rock Alternative</h4>
|
|
<p class="text-sm text-gray-600 mt-1">Aujourd'hui 21:00 • Salle Pleyel</p>
|
|
<div class="flex items-center space-x-4 mt-2">
|
|
<div class="flex items-center text-xs">
|
|
<i data-lucide="users" class="w-3 h-3 mr-1"></i>
|
|
<span>156 participants</span>
|
|
</div>
|
|
<div class="flex items-center text-xs">
|
|
<i data-lucide="star" class="w-3 h-3 mr-1 fill-current text-yellow-500"></i>
|
|
<span>4.7/5</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">CONFIRMÉ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative pl-10 pb-6">
|
|
<div class="timeline-item text-blue-600">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Networking Tech</h4>
|
|
<p class="text-sm text-gray-600 mt-1">Demain 19:00 • WeWork République</p>
|
|
<div class="flex items-center space-x-4 mt-2">
|
|
<div class="flex items-center text-xs">
|
|
<i data-lucide="users" class="w-3 h-3 mr-1"></i>
|
|
<span>42/50 participants</span>
|
|
</div>
|
|
<div class="w-16 bg-gray-200 rounded-full h-1">
|
|
<div class="bg-blue-600 h-1 rounded-full" style="width: 84%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">DEMAIN</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative pl-10 pb-6">
|
|
<div class="timeline-item text-purple-600">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Brunch du Dimanche</h4>
|
|
<p class="text-sm text-gray-600 mt-1">Dimanche 11:00 • Café de Flore</p>
|
|
<div class="flex items-center space-x-4 mt-2">
|
|
<div class="flex items-center text-xs">
|
|
<i data-lucide="users" class="w-3 h-3 mr-1"></i>
|
|
<span>8/12 participants</span>
|
|
</div>
|
|
<div class="w-16 bg-gray-200 rounded-full h-1">
|
|
<div class="bg-purple-600 h-1 rounded-full" style="width: 67%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium">EN COURS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative pl-10 pb-6">
|
|
<div class="timeline-item text-gray-400">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Cours de Photographie</h4>
|
|
<p class="text-sm text-gray-600 mt-1">Mercredi 18:00 • Studio Martin</p>
|
|
<div class="flex items-center space-x-4 mt-2">
|
|
<div class="flex items-center text-xs">
|
|
<i data-lucide="calendar" class="w-3 h-3 mr-1"></i>
|
|
<span>Dans 3 jours</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-xs font-medium">PLANIFIÉ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Sidebar (from dashboard_3) -->
|
|
<div class="space-y-6">
|
|
<!-- Performance Metrics -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm minimal-card">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Performance</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Taux de réussite</span>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-20 bg-gray-200 rounded-full h-2">
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 94%"></div>
|
|
</div>
|
|
<span class="text-sm font-medium">94%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Engagement</span>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-20 bg-gray-200 rounded-full h-2">
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 78%"></div>
|
|
</div>
|
|
<span class="text-sm font-medium">78%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Recommandations</span>
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-20 bg-gray-200 rounded-full h-2">
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 89%"></div>
|
|
</div>
|
|
<span class="text-sm font-medium">89%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Categories -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm minimal-card">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Top catégories</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="music" class="w-4 h-4 text-blue-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-medium text-sm">Concert</span>
|
|
<span class="text-sm text-gray-500">40%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1 mt-1">
|
|
<div class="bg-blue-600 h-1 rounded-full" style="width: 40%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="utensils" class="w-4 h-4 text-green-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-medium text-sm">Cuisine</span>
|
|
<span class="text-sm text-gray-500">25%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1 mt-1">
|
|
<div class="bg-green-600 h-1 rounded-full" style="width: 25%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="laptop" class="w-4 h-4 text-yellow-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-medium text-sm">Tech</span>
|
|
<span class="text-sm text-gray-500">20%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1 mt-1">
|
|
<div class="bg-yellow-600 h-1 rounded-full" style="width: 20%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="palette" class="w-4 h-4 text-purple-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-medium text-sm">Art</span>
|
|
<span class="text-sm text-gray-500">15%</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1 mt-1">
|
|
<div class="bg-purple-600 h-1 rounded-full" style="width: 15%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm minimal-card">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Statistiques rapides</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Événements créés</span>
|
|
<span class="mono font-medium">127</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Participants totaux</span>
|
|
<span class="mono font-medium">2,456</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Note moyenne</span>
|
|
<span class="mono font-medium">4.8/5</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Revenus</span>
|
|
<span class="mono font-medium">€12,340</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
// Participation Chart
|
|
const participationCtx = document.getElementById('participationChart').getContext('2d');
|
|
new Chart(participationCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
|
|
datasets: [{
|
|
label: 'Participations',
|
|
data: [12, 19, 8, 15, 24, 18, 22],
|
|
borderColor: '#3b82f6',
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
display: false
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Categories Chart
|
|
const categoriesCtx = document.getElementById('categoriesChart').getContext('2d');
|
|
new Chart(categoriesCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Concert', 'Cuisine', 'Tech', 'Art'],
|
|
datasets: [{
|
|
data: [40, 25, 20, 15],
|
|
backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Stagger animations
|
|
const fadeElements = document.querySelectorAll('.fade-in');
|
|
fadeElements.forEach((el, index) => {
|
|
el.style.animationDelay = `${index * 0.1}s`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |