kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: new dashboards

Browse Source
This commit is contained in:
kbe
2025-08-31 17:41:15 +02:00
parent 1acc3e09d4
commit 3414057795
6 changed files with 3066 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

642
.superdesign/design_iterations/dashboard_6.html Normal file
View File

@@ -0,0 +1,642 @@
<!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>