Compare commits
2 Commits
48c648e2ca
...
3414057795
| Author | SHA1 | Date | |
|---|---|---|---|
|
3414057795 | ||
|
|
1acc3e09d4 |
398
.superdesign/design_iterations/dashboard_1.html
Normal file
398
.superdesign/design_iterations/dashboard_1.html
Normal file
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - Modern Card-Based Design</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.glassmorphism {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.metric-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.3);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen gradient-bg">
|
||||
<!-- Main Container -->
|
||||
<div class="min-h-screen p-4 md:p-6 lg:p-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-white mb-2">Tableau de bord</h1>
|
||||
<p class="text-white/80">Gérez vos événements et réservations</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="glassmorphism px-4 py-2 rounded-xl text-gray-800 font-medium hover:bg-white/50 transition-all">
|
||||
<i data-lucide="settings" class="w-5 h-5 inline mr-2"></i>
|
||||
Paramètres
|
||||
</button>
|
||||
<button class="bg-white/20 backdrop-blur-lg px-4 py-2 rounded-xl text-white font-medium hover:bg-white/30 transition-all">
|
||||
<i data-lucide="plus" class="w-5 h-5 inline mr-2"></i>
|
||||
Nouveau
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Mes réservations -->
|
||||
<div class="metric-card p-6 rounded-2xl card-hover">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-600 mb-1">Mes réservations</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mb-2">5</p>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="text-green-600 font-medium">+12%</span>
|
||||
<span class="text-gray-500 ml-1">ce mois</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-green-100 rounded-xl">
|
||||
<i data-lucide="calendar-check" class="w-6 h-6 text-green-600"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Événements aujourd'hui -->
|
||||
<div class="metric-card p-6 rounded-2xl card-hover">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-600 mb-1">Événements aujourd'hui</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mb-2">3</p>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="text-blue-600 font-medium">2 nouveaux</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-blue-100 rounded-xl">
|
||||
<i data-lucide="clock" class="w-6 h-6 text-blue-600"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Événements demain -->
|
||||
<div class="metric-card p-6 rounded-2xl card-hover">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-600 mb-1">Événements demain</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mb-2">7</p>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="text-purple-600 font-medium">Populaire</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-purple-100 rounded-xl">
|
||||
<i data-lucide="calendar" class="w-6 h-6 text-purple-600"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- À venir -->
|
||||
<div class="metric-card p-6 rounded-2xl card-hover">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-600 mb-1">À venir</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mb-2">15</p>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="text-orange-600 font-medium">Cette semaine</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-orange-100 rounded-xl">
|
||||
<i data-lucide="trending-up" class="w-6 h-6 text-orange-600"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Draft Tickets Alert -->
|
||||
<div class="glassmorphism rounded-2xl p-6 mb-8 border-l-4 border-orange-400 card-hover">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="p-3 bg-orange-100 rounded-xl">
|
||||
<i data-lucide="alert-triangle" class="w-6 h-6 text-orange-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Billets en attente de paiement</h3>
|
||||
<p class="text-gray-600 mb-4">Vous avez des billets qui nécessitent un paiement</p>
|
||||
|
||||
<!-- Draft Ticket Item -->
|
||||
<div class="bg-white/80 rounded-xl p-4 mb-4">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900">Soirée Jazz au Sunset</h4>
|
||||
<p class="text-sm text-gray-600 flex items-center">
|
||||
<i data-lucide="calendar" class="w-4 h-4 mr-1"></i>
|
||||
15 Septembre 2024 à 20:00
|
||||
</p>
|
||||
</div>
|
||||
<span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-medium">
|
||||
2 billets
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center justify-between text-sm bg-gray-50 rounded-lg p-3">
|
||||
<span><strong>Standard</strong> - Marie Dubois</span>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-gray-500">Expire dans 25min</span>
|
||||
<span class="font-semibold">€35</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-sm bg-gray-50 rounded-lg p-3">
|
||||
<span><strong>Standard</strong> - Pierre Martin</span>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-gray-500">Expire dans 25min</span>
|
||||
<span class="font-semibold">€35</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm text-gray-600">
|
||||
Tentatives: 1/3
|
||||
<span class="text-orange-600 font-medium ml-2">⚠️ Expire bientôt</span>
|
||||
</div>
|
||||
<button class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-6 py-2 rounded-xl font-medium hover:from-orange-600 hover:to-orange-700 transition-all transform hover:scale-105">
|
||||
Reprendre le paiement
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
<!-- My Booked Events -->
|
||||
<div class="glassmorphism rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-900">Mes événements réservés</h2>
|
||||
<button class="text-blue-600 hover:text-blue-700 text-sm font-medium">Voir tout</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Event Item -->
|
||||
<div class="flex items-center space-x-4 p-4 bg-white/60 rounded-xl hover:bg-white/80 transition-all">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-purple-400 to-purple-600 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="music" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900">Concert Rock Alternative</h3>
|
||||
<p class="text-sm text-gray-600">Aujourd'hui 21:00 • Salle Pleyel</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">Confirmé</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 p-4 bg-white/60 rounded-xl hover:bg-white/80 transition-all">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-blue-400 to-blue-600 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="users" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900">Networking Tech</h3>
|
||||
<p class="text-sm text-gray-600">Demain 19:00 • WeWork République</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">À venir</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 p-4 bg-white/60 rounded-xl hover:bg-white/80 transition-all">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-green-400 to-green-600 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="coffee" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900">Brunch du Dimanche</h3>
|
||||
<p class="text-sm text-gray-600">Dimanche 11:00 • Café de Flore</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium">En attente</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<button class="text-blue-600 hover:text-blue-700 font-medium text-sm hover:underline">
|
||||
Voir tous mes événements →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Events -->
|
||||
<div class="glassmorphism rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-900">Événements du jour</h2>
|
||||
<button class="text-blue-600 hover:text-blue-700 text-sm font-medium">Voir tout</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Event Item -->
|
||||
<div class="flex items-center space-x-4 p-4 bg-white/60 rounded-xl hover:bg-white/80 transition-all cursor-pointer">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-red-400 to-pink-600 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="star" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900">Festival de Cinéma</h3>
|
||||
<p class="text-sm text-gray-600 mb-1">MK2 Bibliothèque • 20:30</p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium">Populaire</span>
|
||||
<span class="text-xs text-gray-500">€25</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 transition-all">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 p-4 bg-white/60 rounded-xl hover:bg-white/80 transition-all cursor-pointer">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-yellow-400 to-orange-600 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="utensils" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900">Cours de Cuisine</h3>
|
||||
<p class="text-sm text-gray-600 mb-1">École Ducasse • 14:00</p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium">Limité</span>
|
||||
<span class="text-xs text-gray-500">€85</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 transition-all">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 p-4 bg-white/60 rounded-xl hover:bg-white/80 transition-all cursor-pointer">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-teal-400 to-cyan-600 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="camera" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900">Exposition Photo</h3>
|
||||
<p class="text-sm text-gray-600 mb-1">Galerie Perrotin • 10:00</p>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="bg-teal-100 text-teal-800 px-2 py-1 rounded-full text-xs font-medium">Gratuit</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 transition-all">
|
||||
Voir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Section -->
|
||||
<div class="mt-8">
|
||||
<div class="glassmorphism rounded-2xl p-6 card-hover">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-900">Autres événements à venir</h2>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="text-gray-600 hover:text-gray-800">
|
||||
<i data-lucide="filter" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 hover:text-gray-800">
|
||||
<i data-lucide="search" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Event Card -->
|
||||
<div class="bg-white/60 rounded-xl p-4 hover:bg-white/80 transition-all cursor-pointer">
|
||||
<div class="w-full h-32 bg-gradient-to-r from-purple-400 to-purple-600 rounded-lg mb-4 flex items-center justify-center">
|
||||
<i data-lucide="music" class="w-12 h-12 text-white"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 mb-2">Concert Électro</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Samedi 21 Sept • Berghain</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-lg font-bold text-gray-900">€45</span>
|
||||
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/60 rounded-xl p-4 hover:bg-white/80 transition-all cursor-pointer">
|
||||
<div class="w-full h-32 bg-gradient-to-r from-green-400 to-teal-600 rounded-lg mb-4 flex items-center justify-center">
|
||||
<i data-lucide="leaf" class="w-12 h-12 text-white"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 mb-2">Marché Bio</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Dimanche 22 Sept • Place des Vosges</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-lg font-bold text-green-600">Gratuit</span>
|
||||
<button class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
|
||||
Voir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/60 rounded-xl p-4 hover:bg-white/80 transition-all cursor-pointer">
|
||||
<div class="w-full h-32 bg-gradient-to-r from-orange-400 to-red-600 rounded-lg mb-4 flex items-center justify-center">
|
||||
<i data-lucide="book-open" class="w-12 h-12 text-white"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 mb-2">Salon du Livre</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Lundi 23 Sept • Grand Palais</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-lg font-bold text-gray-900">€15</span>
|
||||
<button class="bg-orange-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-700 transition-colors">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-center space-x-2 mt-8">
|
||||
<button class="px-3 py-2 rounded-lg bg-white/60 text-gray-600 hover:bg-white/80 transition-all">
|
||||
<i data-lucide="chevron-left" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-blue-600 text-white font-medium">1</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-white/60 text-gray-600 hover:bg-white/80 transition-all">2</button>
|
||||
<button class="px-4 py-2 rounded-lg bg-white/60 text-gray-600 hover:bg-white/80 transition-all">3</button>
|
||||
<button class="px-3 py-2 rounded-lg bg-white/60 text-gray-600 hover:bg-white/80 transition-all">
|
||||
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Add some interactive animations
|
||||
document.querySelectorAll('.card-hover').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-4px) scale(1.01)';
|
||||
});
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
385
.superdesign/design_iterations/dashboard_2.html
Normal file
385
.superdesign/design_iterations/dashboard_2.html
Normal file
@@ -0,0 +1,385 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - Minimalist Typography Design</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.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); }
|
||||
.bg-subtle { background-color: #f8fafc; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="min-h-screen">
|
||||
<!-- Navigation -->
|
||||
<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 -->
|
||||
<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 -->
|
||||
<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 -->
|
||||
<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>
|
||||
|
||||
<!-- Content Sections -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- My Events -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="minimal-card rounded-lg p-6 fade-in">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-semibold">Mes événements</h2>
|
||||
<button class="text-accent text-sm font-medium hover:underline">Voir tout</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<!-- Event Row -->
|
||||
<div class="flex items-center space-x-4 py-3 border-b border-gray-100 last:border-b-0">
|
||||
<div class="w-2 h-12 bg-red-400 rounded-full"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-medium">Concert Rock Alternative</h3>
|
||||
<span class="mono text-xs bg-green-100 text-green-800 px-2 py-1 rounded">CONFIRMÉ</span>
|
||||
</div>
|
||||
<p class="text-sm text-subtle">Aujourd'hui 21:00 • Salle Pleyel</p>
|
||||
</div>
|
||||
<button class="p-2 hover:bg-gray-100 rounded-lg">
|
||||
<i data-lucide="download" class="w-4 h-4 text-gray-500"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 py-3 border-b border-gray-100 last:border-b-0">
|
||||
<div class="w-2 h-12 bg-blue-400 rounded-full"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-medium">Networking Tech</h3>
|
||||
<span class="mono text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">DEMAIN</span>
|
||||
</div>
|
||||
<p class="text-sm text-subtle">19:00 • WeWork République</p>
|
||||
</div>
|
||||
<button class="p-2 hover:bg-gray-100 rounded-lg">
|
||||
<i data-lucide="map-pin" class="w-4 h-4 text-gray-500"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 py-3 border-b border-gray-100 last:border-b-0">
|
||||
<div class="w-2 h-12 bg-green-400 rounded-full"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-medium">Brunch du Dimanche</h3>
|
||||
<span class="mono text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">DIMANCHE</span>
|
||||
</div>
|
||||
<p class="text-sm text-subtle">11:00 • Café de Flore</p>
|
||||
</div>
|
||||
<button class="p-2 hover:bg-gray-100 rounded-lg">
|
||||
<i data-lucide="calendar" class="w-4 h-4 text-gray-500"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions & Today -->
|
||||
<div class="space-y-6">
|
||||
<!-- Quick Actions -->
|
||||
<div class="minimal-card rounded-lg p-6 fade-in">
|
||||
<h3 class="font-semibold mb-4">Actions rapides</h3>
|
||||
<div class="space-y-3">
|
||||
<button class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors text-left">
|
||||
<div class="p-2 bg-blue-100 rounded-lg">
|
||||
<i data-lucide="plus" class="w-4 h-4 text-blue-600"></i>
|
||||
</div>
|
||||
<span class="font-medium text-sm">Nouvel événement</span>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors text-left">
|
||||
<div class="p-2 bg-green-100 rounded-lg">
|
||||
<i data-lucide="search" class="w-4 h-4 text-green-600"></i>
|
||||
</div>
|
||||
<span class="font-medium text-sm">Rechercher</span>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors text-left">
|
||||
<div class="p-2 bg-purple-100 rounded-lg">
|
||||
<i data-lucide="heart" class="w-4 h-4 text-purple-600"></i>
|
||||
</div>
|
||||
<span class="font-medium text-sm">Favoris</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Schedule -->
|
||||
<div class="minimal-card rounded-lg p-6 fade-in">
|
||||
<h3 class="font-semibold mb-4">Aujourd'hui</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="mono text-xs bg-gray-100 px-2 py-1 rounded mt-1">14:00</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium text-sm">Cours de Cuisine</h4>
|
||||
<p class="text-xs text-subtle">École Ducasse</p>
|
||||
</div>
|
||||
<span class="w-2 h-2 bg-yellow-400 rounded-full mt-2"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="mono text-xs bg-gray-100 px-2 py-1 rounded mt-1">20:30</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium text-sm">Festival de Cinéma</h4>
|
||||
<p class="text-xs text-subtle">MK2 Bibliothèque</p>
|
||||
</div>
|
||||
<span class="w-2 h-2 bg-red-400 rounded-full mt-2"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="mono text-xs bg-gray-100 px-2 py-1 rounded mt-1">22:00</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium text-sm">Soirée Jazz</h4>
|
||||
<p class="text-xs text-subtle">Le Sunset</p>
|
||||
</div>
|
||||
<span class="w-2 h-2 bg-blue-400 rounded-full mt-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="minimal-card rounded-lg p-6 fade-in">
|
||||
<h3 class="font-semibold mb-4">Statistiques</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-subtle">Total participations</span>
|
||||
<span class="mono font-medium">127</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-subtle">Événements créés</span>
|
||||
<span class="mono font-medium">12</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-subtle">Note moyenne</span>
|
||||
<span class="mono font-medium">4.8/5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Events Grid -->
|
||||
<div class="mt-12">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-2xl font-semibold">Événements à venir</h2>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="text-sm text-subtle hover:text-gray-900 flex items-center space-x-1">
|
||||
<i data-lucide="filter" class="w-4 h-4"></i>
|
||||
<span>Filtrer</span>
|
||||
</button>
|
||||
<button class="text-sm text-subtle hover:text-gray-900 flex items-center space-x-1">
|
||||
<i data-lucide="grid-3x3" class="w-4 h-4"></i>
|
||||
<span>Vue</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Event Card -->
|
||||
<div class="minimal-card rounded-lg overflow-hidden fade-in">
|
||||
<div class="aspect-video bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
|
||||
<i data-lucide="music" class="w-12 h-12 text-white"></i>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold">Concert Électro</h3>
|
||||
<span class="mono text-xs bg-gray-100 px-2 py-1 rounded">€45</span>
|
||||
</div>
|
||||
<p class="text-sm text-subtle mb-3">Samedi 21 Sept • Berghain</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">12 places restantes</span>
|
||||
<button class="text-accent text-sm font-medium hover:underline">Réserver</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="minimal-card rounded-lg overflow-hidden fade-in">
|
||||
<div class="aspect-video bg-gradient-to-br from-green-400 to-teal-600 flex items-center justify-center">
|
||||
<i data-lucide="leaf" class="w-12 h-12 text-white"></i>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold">Marché Bio</h3>
|
||||
<span class="mono text-xs bg-green-100 text-green-600 px-2 py-1 rounded">GRATUIT</span>
|
||||
</div>
|
||||
<p class="text-sm text-subtle mb-3">Dimanche 22 Sept • Place des Vosges</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded">Accès libre</span>
|
||||
<button class="text-accent text-sm font-medium hover:underline">Voir détails</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="minimal-card rounded-lg overflow-hidden fade-in">
|
||||
<div class="aspect-video bg-gradient-to-br from-orange-400 to-red-600 flex items-center justify-center">
|
||||
<i data-lucide="book-open" class="w-12 h-12 text-white"></i>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold">Salon du Livre</h3>
|
||||
<span class="mono text-xs bg-gray-100 px-2 py-1 rounded">€15</span>
|
||||
</div>
|
||||
<p class="text-sm text-subtle mb-3">Lundi 23 Sept • Grand Palais</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-yellow-600 bg-yellow-100 px-2 py-1 rounded">Populaire</span>
|
||||
<button class="text-accent text-sm font-medium hover:underline">Réserver</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Load More -->
|
||||
<div class="text-center mt-8">
|
||||
<button class="text-accent font-medium hover:underline">Charger plus d'événements</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Stagger animations
|
||||
const fadeElements = document.querySelectorAll('.fade-in');
|
||||
fadeElements.forEach((el, index) => {
|
||||
el.style.animationDelay = `${index * 0.1}s`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
556
.superdesign/design_iterations/dashboard_3.html
Normal file
556
.superdesign/design_iterations/dashboard_3.html
Normal file
@@ -0,0 +1,556 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - Data Visualization Enhanced</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&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
|
||||
.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 class="min-h-screen bg-gray-50">
|
||||
<div class="min-h-screen">
|
||||
<!-- Header -->
|
||||
<div class="gradient-bg px-6 py-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-white mb-2">Dashboard Analytics</h1>
|
||||
<p class="text-blue-100">Analyse détaillée de vos événements et participations</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<select class="bg-white/20 backdrop-blur-lg border border-white/30 rounded-lg px-4 py-2 text-white text-sm">
|
||||
<option>7 derniers jours</option>
|
||||
<option>30 derniers jours</option>
|
||||
<option>3 derniers mois</option>
|
||||
</select>
|
||||
<button class="bg-white/20 backdrop-blur-lg border border-white/30 rounded-lg px-4 py-2 text-white text-sm font-medium hover:bg-white/30 transition-all">
|
||||
<i data-lucide="download" class="w-4 h-4 inline mr-2"></i>
|
||||
Exporter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI Cards with Progress -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Participation Rate -->
|
||||
<div class="stat-card rounded-2xl p-6">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="max-w-7xl mx-auto px-6 py-8">
|
||||
|
||||
<!-- Critical Alert -->
|
||||
<div class="bg-red-50 border border-red-200 rounded-2xl p-6 mb-8">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="p-3 bg-red-100 rounded-xl">
|
||||
<i data-lucide="alert-circle" class="w-6 h-6 text-red-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-red-900 mb-2">Paiements en attente - Action urgente</h3>
|
||||
<p class="text-red-700 mb-4">2 billets expirent dans les 25 prochaines minutes</p>
|
||||
|
||||
<div class="bg-white rounded-xl p-4 border border-red-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900">Soirée Jazz au Sunset</h4>
|
||||
<p class="text-sm text-gray-600">2 billets • Tentative 1/3</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-2xl font-bold text-gray-900">€70</p>
|
||||
<div class="w-24 bg-red-200 rounded-full h-2 mt-1">
|
||||
<div class="bg-red-600 h-2 rounded-full transition-all" style="width: 15%"></div>
|
||||
</div>
|
||||
<p class="text-xs text-red-600 mt-1">25min restantes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-xl font-medium transition-colors">
|
||||
Payer maintenant
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts and Analytics -->
|
||||
<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">
|
||||
<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">
|
||||
<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 -->
|
||||
<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">
|
||||
<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 -->
|
||||
<div class="space-y-6">
|
||||
<!-- Performance Metrics -->
|
||||
<div class="bg-white rounded-2xl p-6 shadow-sm">
|
||||
<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">
|
||||
<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">
|
||||
<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="font-medium">127</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600">Participants totaux</span>
|
||||
<span class="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="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="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
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
529
.superdesign/design_iterations/dashboard_4.html
Normal file
529
.superdesign/design_iterations/dashboard_4.html
Normal file
@@ -0,0 +1,529 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - Mobile-First Responsive</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
|
||||
.swipe-container {
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.swipe-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.swipe-item {
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: 90px;
|
||||
right: 20px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.fab {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 pb-20 md:pb-0">
|
||||
<!-- Mobile Header -->
|
||||
<div class="gradient-bg px-4 pt-12 pb-6 md:pt-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-white">Dashboard</h1>
|
||||
<p class="text-white/80 text-sm">Bonjour Marie 👋</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="p-2 bg-white/20 rounded-xl text-white">
|
||||
<i data-lucide="search" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="p-2 bg-white/20 rounded-xl text-white relative">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i>
|
||||
<span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Critical Alert -->
|
||||
<div class="mobile-card rounded-2xl p-4 mb-6 border-l-4 border-red-400">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="p-2 bg-red-100 rounded-lg">
|
||||
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900 text-sm">Action urgente</h3>
|
||||
<p class="text-xs text-gray-600 mb-2">Billets expirent dans 25min</p>
|
||||
<button class="bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium w-full">
|
||||
Payer maintenant - €70
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swipeable Metrics -->
|
||||
<div class="swipe-container flex space-x-4 overflow-x-auto pb-2">
|
||||
<div class="swipe-item mobile-card rounded-2xl p-4 min-w-[140px]">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<i data-lucide="calendar-check" class="w-4 h-4 text-green-600"></i>
|
||||
<span class="text-xs font-medium text-gray-600">Réservations</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900">5</p>
|
||||
<p class="text-xs text-green-600">+2 ce mois</p>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item mobile-card rounded-2xl p-4 min-w-[140px]">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<i data-lucide="clock" class="w-4 h-4 text-blue-600"></i>
|
||||
<span class="text-xs font-medium text-gray-600">Aujourd'hui</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900">3</p>
|
||||
<p class="text-xs text-blue-600">événements</p>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item mobile-card rounded-2xl p-4 min-w-[140px]">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<i data-lucide="calendar" class="w-4 h-4 text-purple-600"></i>
|
||||
<span class="text-xs font-medium text-gray-600">Demain</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900">7</p>
|
||||
<p class="text-xs text-purple-600">événements</p>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item mobile-card rounded-2xl p-4 min-w-[140px]">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<i data-lucide="trending-up" class="w-4 h-4 text-orange-600"></i>
|
||||
<span class="text-xs font-medium text-gray-600">À venir</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900">15</p>
|
||||
<p class="text-xs text-orange-600">cette semaine</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-4 -mt-4 relative z-10">
|
||||
|
||||
<!-- My Events Card -->
|
||||
<div class="mobile-card rounded-2xl p-6 mb-6 slide-up">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Mes événements</h2>
|
||||
<button class="text-blue-600 text-sm font-medium">Tout voir</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Event List -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-red-400 to-pink-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="music" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 truncate">Concert Rock Alternative</h3>
|
||||
<p class="text-sm text-gray-600">Aujourd'hui 21:00</p>
|
||||
</div>
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">Confirmé</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-blue-400 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="users" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 truncate">Networking Tech</h3>
|
||||
<p class="text-sm text-gray-600">Demain 19:00</p>
|
||||
</div>
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full font-medium">À venir</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-green-400 to-green-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="coffee" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 truncate">Brunch du Dimanche</h3>
|
||||
<p class="text-sm text-gray-600">Dimanche 11:00</p>
|
||||
</div>
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full font-medium">En attente</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Events -->
|
||||
<div class="mobile-card rounded-2xl p-6 mb-6 slide-up">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Aujourd'hui</h2>
|
||||
<button class="text-blue-600 text-sm font-medium">Planning</button>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Scrollable Events -->
|
||||
<div class="swipe-container flex space-x-4 overflow-x-auto">
|
||||
<div class="swipe-item bg-white rounded-xl p-4 min-w-[280px] border">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-purple-400 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="star" class="w-5 h-5 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900">Festival de Cinéma</h3>
|
||||
<p class="text-sm text-gray-600">20:30 • MK2</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">€25</span>
|
||||
</div>
|
||||
<button class="w-full bg-purple-600 text-white py-2 rounded-lg text-sm font-medium">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item bg-white rounded-xl p-4 min-w-[280px] border">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-yellow-400 to-orange-600 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900">Cours de Cuisine</h3>
|
||||
<p class="text-sm text-gray-600">14:00 • École Ducasse</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">€85</span>
|
||||
</div>
|
||||
<button class="w-full bg-orange-600 text-white py-2 rounded-lg text-sm font-medium">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item bg-white rounded-xl p-4 min-w-[280px] border">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-teal-400 to-cyan-600 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="camera" class="w-5 h-5 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900">Exposition Photo</h3>
|
||||
<p class="text-sm text-gray-600">10:00 • Galerie</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Gratuit</span>
|
||||
</div>
|
||||
<button class="w-full bg-teal-600 text-white py-2 rounded-lg text-sm font-medium">
|
||||
Voir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions Grid -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<button class="mobile-card rounded-2xl p-4 text-left slide-up hover:bg-white/60 transition-all">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="p-3 bg-blue-100 rounded-xl">
|
||||
<i data-lucide="search" class="w-6 h-6 text-blue-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 text-sm">Rechercher</h3>
|
||||
<p class="text-xs text-gray-600">Événements</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="mobile-card rounded-2xl p-4 text-left slide-up hover:bg-white/60 transition-all">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="p-3 bg-green-100 rounded-xl">
|
||||
<i data-lucide="heart" class="w-6 h-6 text-green-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 text-sm">Favoris</h3>
|
||||
<p class="text-xs text-gray-600">12 événements</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Events -->
|
||||
<div class="mobile-card rounded-2xl p-6 slide-up">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Prochains événements</h2>
|
||||
<button class="text-blue-600 text-sm font-medium">Tout voir</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Event Item -->
|
||||
<div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-purple-400 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="music" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold text-gray-900">Concert Électro</h3>
|
||||
<span class="text-lg font-bold text-gray-900">€45</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-2">Samedi 21 Sept • Berghain</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">12 places</span>
|
||||
<button class="bg-purple-600 text-white px-4 py-1 rounded-lg text-sm font-medium">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-green-400 to-teal-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="leaf" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold text-gray-900">Marché Bio</h3>
|
||||
<span class="text-sm font-bold text-green-600">Gratuit</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-2">Dimanche 22 Sept • Place des Vosges</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs bg-teal-100 text-teal-800 px-2 py-1 rounded-full">Accès libre</span>
|
||||
<button class="bg-green-600 text-white px-4 py-1 rounded-lg text-sm font-medium">
|
||||
Voir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-orange-400 to-red-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="book-open" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold text-gray-900">Salon du Livre</h3>
|
||||
<span class="text-lg font-bold text-gray-900">€15</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-2">Lundi 23 Sept • Grand Palais</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Populaire</span>
|
||||
<button class="bg-orange-600 text-white px-4 py-1 rounded-lg text-sm font-medium">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weekly Overview - Tablet and Desktop -->
|
||||
<div class="hidden md:block mobile-card rounded-2xl p-6 mb-6 slide-up">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Vue hebdomadaire</h2>
|
||||
<div class="grid grid-cols-7 gap-2">
|
||||
<!-- Days of week -->
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">LUN</p>
|
||||
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-blue-600">18</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="w-2 h-2 bg-blue-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">MAR</p>
|
||||
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-green-600">19</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="w-2 h-2 bg-green-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">MER</p>
|
||||
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-gray-400">20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">JEU</p>
|
||||
<div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-white">21</span>
|
||||
</div>
|
||||
<div class="mt-2 space-y-1">
|
||||
<div class="w-2 h-2 bg-purple-400 rounded-full mx-auto"></div>
|
||||
<div class="w-2 h-2 bg-purple-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">VEN</p>
|
||||
<div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-yellow-600">22</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="w-2 h-2 bg-yellow-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">SAM</p>
|
||||
<div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-red-600">23</span>
|
||||
</div>
|
||||
<div class="mt-2 space-y-1">
|
||||
<div class="w-2 h-2 bg-red-400 rounded-full mx-auto"></div>
|
||||
<div class="w-2 h-2 bg-red-400 rounded-full mx-auto"></div>
|
||||
<div class="w-2 h-2 bg-red-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">DIM</p>
|
||||
<div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-orange-600">24</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="w-2 h-2 bg-orange-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<button class="fab w-14 h-14 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full shadow-lg flex items-center justify-center text-white hover:scale-110 transition-transform">
|
||||
<i data-lucide="plus" class="w-6 h-6"></i>
|
||||
</button>
|
||||
|
||||
<!-- Mobile Bottom Navigation -->
|
||||
<div class="md:hidden fixed bottom-0 left-0 right-0 bottom-nav px-4 py-3">
|
||||
<div class="flex items-center justify-around">
|
||||
<button class="flex flex-col items-center space-y-1 text-blue-600">
|
||||
<i data-lucide="home" class="w-5 h-5"></i>
|
||||
<span class="text-xs font-medium">Accueil</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-1 text-gray-500">
|
||||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||||
<span class="text-xs">Événements</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-1 text-gray-500">
|
||||
<i data-lucide="ticket" class="w-5 h-5"></i>
|
||||
<span class="text-xs">Billets</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-1 text-gray-500 relative">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i>
|
||||
<span class="text-xs">Alertes</span>
|
||||
<span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-1 text-gray-500">
|
||||
<i data-lucide="user" class="w-5 h-5"></i>
|
||||
<span class="text-xs">Profil</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Sidebar Navigation (shown on larger screens) -->
|
||||
<div class="hidden lg:block fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-40">
|
||||
<div class="p-6">
|
||||
<h1 class="text-xl font-bold text-gray-900 mb-8">ApéroNight</h1>
|
||||
<nav class="space-y-2">
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-blue-50 text-blue-700">
|
||||
<i data-lucide="home" class="w-5 h-5"></i>
|
||||
<span class="font-medium">Dashboard</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50">
|
||||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||||
<span>Événements</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50">
|
||||
<i data-lucide="ticket" class="w-5 h-5"></i>
|
||||
<span>Mes billets</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50">
|
||||
<i data-lucide="bar-chart-3" class="w-5 h-5"></i>
|
||||
<span>Analytics</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50">
|
||||
<i data-lucide="settings" class="w-5 h-5"></i>
|
||||
<span>Paramètres</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Adjust content margin for desktop sidebar -->
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
margin-left: 256px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Add touch interactions for mobile
|
||||
let startX, scrollLeft;
|
||||
const sliders = document.querySelectorAll('.swipe-container');
|
||||
|
||||
sliders.forEach(slider => {
|
||||
slider.addEventListener('touchstart', e => {
|
||||
startX = e.touches[0].pageX - slider.offsetLeft;
|
||||
scrollLeft = slider.scrollLeft;
|
||||
});
|
||||
|
||||
slider.addEventListener('touchmove', e => {
|
||||
const x = e.touches[0].pageX - slider.offsetLeft;
|
||||
const walk = (x - startX) * 2;
|
||||
slider.scrollLeft = scrollLeft - walk;
|
||||
});
|
||||
});
|
||||
|
||||
// Stagger animations
|
||||
const slideElements = document.querySelectorAll('.slide-up');
|
||||
slideElements.forEach((el, index) => {
|
||||
el.style.animationDelay = `${index * 0.1}s`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
556
.superdesign/design_iterations/dashboard_5.html
Normal file
556
.superdesign/design_iterations/dashboard_5.html
Normal file
@@ -0,0 +1,556 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - Neo-Brutalism Style</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0 0 0);
|
||||
--primary: oklch(0.6489 0.2370 26.9728);
|
||||
--secondary: oklch(0.9680 0.2110 109.7692);
|
||||
--accent: oklch(0.5635 0.2408 260.8178);
|
||||
--muted: oklch(0.9551 0 0);
|
||||
--border: oklch(0 0 0);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.mono { font-family: 'Space Mono', monospace; }
|
||||
|
||||
.brutal-card {
|
||||
background: var(--background);
|
||||
border: 4px solid var(--border);
|
||||
box-shadow: 8px 8px 0px 0px var(--border);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.brutal-card:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 10px 10px 0px 0px var(--border);
|
||||
}
|
||||
|
||||
.brutal-btn {
|
||||
border: 3px solid var(--border);
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
box-shadow: 4px 4px 0px 0px var(--border);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.brutal-btn:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 6px 6px 0px 0px var(--border);
|
||||
}
|
||||
|
||||
.brutal-btn:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0px 0px var(--border);
|
||||
}
|
||||
|
||||
.brutal-secondary {
|
||||
background: var(--secondary);
|
||||
color: var(--border);
|
||||
}
|
||||
|
||||
.brutal-accent {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.brutal-input {
|
||||
border: 3px solid var(--border);
|
||||
background: var(--background);
|
||||
padding: 12px 16px;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.brutal-input:focus {
|
||||
outline: none;
|
||||
box-shadow: 4px 4px 0px 0px var(--border);
|
||||
}
|
||||
|
||||
.zigzag-border {
|
||||
background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--border) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--border) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--border) 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
}
|
||||
|
||||
.glitch {
|
||||
position: relative;
|
||||
color: var(--primary);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.glitch:before {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--accent);
|
||||
z-index: -1;
|
||||
animation: glitch1 0.5s infinite;
|
||||
}
|
||||
|
||||
.glitch:after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--secondary);
|
||||
z-index: -2;
|
||||
animation: glitch2 0.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes glitch1 {
|
||||
0%, 100% { transform: translate(0); }
|
||||
20% { transform: translate(-1px, 1px); }
|
||||
40% { transform: translate(-1px, -1px); }
|
||||
60% { transform: translate(1px, 1px); }
|
||||
80% { transform: translate(1px, -1px); }
|
||||
}
|
||||
|
||||
@keyframes glitch2 {
|
||||
0%, 100% { transform: translate(0); }
|
||||
20% { transform: translate(1px, -1px); }
|
||||
40% { transform: translate(1px, 1px); }
|
||||
60% { transform: translate(-1px, -1px); }
|
||||
80% { transform: translate(-1px, 1px); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen" style="background: var(--muted);">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative p-6 mb-8" style="background: var(--primary);">
|
||||
<div class="absolute inset-0 zigzag-border opacity-10"></div>
|
||||
<div class="relative z-10 max-w-7xl mx-auto">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="glitch text-4xl md:text-5xl font-black text-white mono" data-text="DASHBOARD">DASHBOARD</h1>
|
||||
<p class="text-white/80 font-bold uppercase tracking-wider text-sm">USER CONTROL PANEL v2.1</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button class="brutal-btn px-4 py-2 text-sm">SETTINGS</button>
|
||||
<button class="brutal-btn brutal-secondary px-4 py-2 text-sm">HELP</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
|
||||
<!-- CRITICAL ALERT -->
|
||||
<div class="brutal-card p-6 mb-8" style="background: #ff4444; border-color: #000; color: white;">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="p-3 bg-white rounded-none border-2 border-black">
|
||||
<i data-lucide="zap" class="w-6 h-6 text-black"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-black text-lg mono uppercase">PAYMENT ALERT!</h3>
|
||||
<p class="text-white/90 text-sm font-bold mb-3">2 TICKETS EXPIRE IN 25 MINUTES</p>
|
||||
|
||||
<div class="bg-white p-3 border-2 border-black text-black">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<span class="mono font-bold text-sm">SOIRÉE JAZZ AU SUNSET</span>
|
||||
<p class="text-xs">2 TICKETS • ATTEMPT 1/3</p>
|
||||
</div>
|
||||
<span class="mono font-black text-lg">€70</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="brutal-btn px-6 py-3 font-black" style="background: white; color: black; border-color: black;">
|
||||
PAY NOW!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Grid -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
|
||||
<div class="brutal-card p-6" style="background: var(--secondary);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<i data-lucide="calendar-check" class="w-8 h-8" style="color: var(--border);"></i>
|
||||
<span class="mono text-xs font-bold" style="color: var(--border);">BOOKINGS</span>
|
||||
</div>
|
||||
<div class="mono text-4xl font-black mb-2" style="color: var(--border);">05</div>
|
||||
<div class="mono text-xs font-bold" style="color: var(--border);">+2 THIS MONTH</div>
|
||||
</div>
|
||||
|
||||
<div class="brutal-card p-6" style="background: var(--accent);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<i data-lucide="clock" class="w-8 h-8 text-white"></i>
|
||||
<span class="mono text-xs font-bold text-white">TODAY</span>
|
||||
</div>
|
||||
<div class="mono text-4xl font-black text-white mb-2">03</div>
|
||||
<div class="mono text-xs font-bold text-white">EVENTS</div>
|
||||
</div>
|
||||
|
||||
<div class="brutal-card p-6" style="background: #ff6b6b;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<i data-lucide="calendar" class="w-8 h-8 text-white"></i>
|
||||
<span class="mono text-xs font-bold text-white">TOMORROW</span>
|
||||
</div>
|
||||
<div class="mono text-4xl font-black text-white mb-2">07</div>
|
||||
<div class="mono text-xs font-bold text-white">EVENTS</div>
|
||||
</div>
|
||||
|
||||
<div class="brutal-card p-6" style="background: #4ecdc4;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<i data-lucide="trending-up" class="w-8 h-8 text-white"></i>
|
||||
<span class="mono text-xs font-bold text-white">UPCOMING</span>
|
||||
</div>
|
||||
<div class="mono text-4xl font-black text-white mb-2">15</div>
|
||||
<div class="mono text-xs font-bold text-white">THIS WEEK</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
<!-- My Events -->
|
||||
<div class="brutal-card p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="mono text-xl font-black uppercase">MY EVENTS</h2>
|
||||
<button class="mono text-sm font-bold underline" style="color: var(--accent);">VIEW ALL</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border-4 border-black p-4" style="background: var(--secondary);">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h3 class="mono font-black text-sm uppercase">CONCERT ROCK ALTERNATIVE</h3>
|
||||
<p class="text-xs font-bold">TODAY 21:00 • SALLE PLEYEL</p>
|
||||
</div>
|
||||
<span class="mono text-xs font-black bg-green-400 text-black px-2 py-1 border-2 border-black">CONFIRMED</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-1">
|
||||
<i data-lucide="users" class="w-3 h-3"></i>
|
||||
<span class="mono text-xs font-bold">156</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1">
|
||||
<i data-lucide="star" class="w-3 h-3 fill-current text-yellow-500"></i>
|
||||
<span class="mono text-xs font-bold">4.7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-4 border-black p-4" style="background: var(--accent);">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h3 class="mono font-black text-sm uppercase text-white">NETWORKING TECH</h3>
|
||||
<p class="text-xs font-bold text-white/90">TOMORROW 19:00 • WEWORK</p>
|
||||
</div>
|
||||
<span class="mono text-xs font-black bg-blue-400 text-black px-2 py-1 border-2 border-black">TOMORROW</span>
|
||||
</div>
|
||||
<div class="w-full bg-white/20 h-2 border border-white">
|
||||
<div class="bg-white h-full" style="width: 84%"></div>
|
||||
</div>
|
||||
<span class="mono text-xs font-bold text-white mt-1">42/50 PARTICIPANTS</span>
|
||||
</div>
|
||||
|
||||
<div class="border-4 border-black p-4" style="background: #ff6b6b;">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<h3 class="mono font-black text-sm uppercase text-white">BRUNCH DU DIMANCHE</h3>
|
||||
<p class="text-xs font-bold text-white/90">SUNDAY 11:00 • CAFÉ DE FLORE</p>
|
||||
</div>
|
||||
<span class="mono text-xs font-black bg-yellow-400 text-black px-2 py-1 border-2 border-black">PENDING</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Events -->
|
||||
<div class="brutal-card p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="mono text-xl font-black uppercase">TODAY'S EVENTS</h2>
|
||||
<button class="mono text-sm font-bold underline" style="color: var(--accent);">VIEW ALL</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border-4 border-black p-4 bg-white relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-16 h-16 transform rotate-45 translate-x-8 -translate-y-8" style="background: var(--primary);"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-12 h-12 border-3 border-black flex items-center justify-center" style="background: #ff4757;">
|
||||
<i data-lucide="star" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mono font-black text-sm uppercase">FESTIVAL CINÉMA</h3>
|
||||
<p class="text-xs font-bold">20:30 • MK2 BIBLIO</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mono font-black text-lg">€25</span>
|
||||
</div>
|
||||
<button class="brutal-btn w-full py-2 text-sm">BOOK NOW!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-4 border-black p-4 bg-white relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-0 h-0 border-t-16 border-r-16" style="border-top-color: var(--secondary); border-right-color: transparent;"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-12 h-12 border-3 border-black flex items-center justify-center" style="background: #ffa502;">
|
||||
<i data-lucide="utensils" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mono font-black text-sm uppercase">COOKING CLASS</h3>
|
||||
<p class="text-xs font-bold">14:00 • ÉCOLE DUCASSE</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mono font-black text-lg">€85</span>
|
||||
</div>
|
||||
<button class="brutal-btn brutal-secondary w-full py-2 text-sm">BOOK NOW!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-4 border-black p-4 bg-white relative overflow-hidden">
|
||||
<div class="absolute bottom-0 right-0 w-0 h-0 border-b-16 border-l-16" style="border-bottom-color: var(--accent); border-left-color: transparent;"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-12 h-12 border-3 border-black flex items-center justify-center" style="background: #2ed573;">
|
||||
<i data-lucide="camera" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mono font-black text-sm uppercase">PHOTO EXPO</h3>
|
||||
<p class="text-xs font-bold">10:00 • GALERIE PERROTIN</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mono font-black text-sm" style="color: var(--accent);">FREE</span>
|
||||
</div>
|
||||
<button class="brutal-btn brutal-accent w-full py-2 text-sm">VIEW DETAILS</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="mt-8 brutal-card p-6">
|
||||
<h2 class="mono text-xl font-black uppercase mb-6">USER STATISTICS</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Performance Chart -->
|
||||
<div class="md:col-span-2">
|
||||
<h3 class="mono font-black text-sm uppercase mb-4">PERFORMANCE METRICS</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono font-bold text-sm">SUCCESS RATE</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-32 h-4 border-2 border-black bg-white">
|
||||
<div class="h-full border-r-2 border-black" style="width: 94%; background: var(--secondary);"></div>
|
||||
</div>
|
||||
<span class="mono font-black">94%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono font-bold text-sm">ENGAGEMENT</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-32 h-4 border-2 border-black bg-white">
|
||||
<div class="h-full border-r-2 border-black" style="width: 78%; background: var(--accent);"></div>
|
||||
</div>
|
||||
<span class="mono font-black">78%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono font-bold text-sm">SATISFACTION</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-32 h-4 border-2 border-black bg-white">
|
||||
<div class="h-full border-r-2 border-black" style="width: 89%; background: var(--primary);"></div>
|
||||
</div>
|
||||
<span class="mono font-black">89%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div>
|
||||
<h3 class="mono font-black text-sm uppercase mb-4">QUICK STATS</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="border-2 border-black p-3 bg-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono text-xs font-bold">TOTAL EVENTS</span>
|
||||
<span class="mono font-black">127</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-black p-3" style="background: var(--secondary);">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono text-xs font-bold">PARTICIPANTS</span>
|
||||
<span class="mono font-black">2,456</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-black p-3" style="background: var(--accent);">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono text-xs font-bold text-white">RATING</span>
|
||||
<span class="mono font-black text-white">4.8/5</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-black p-3" style="background: var(--primary);">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono text-xs font-bold text-white">REVENUE</span>
|
||||
<span class="mono font-black text-white">€12,340</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Events Grid -->
|
||||
<div class="brutal-card p-6 mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="mono text-xl font-black uppercase">UPCOMING EVENTS</h2>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="mono text-xs font-bold px-3 py-1 border-2 border-black bg-white hover:bg-gray-100">FILTER</button>
|
||||
<button class="mono text-xs font-bold px-3 py-1 border-2 border-black bg-white hover:bg-gray-100">SORT</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Event Card 1 -->
|
||||
<div class="border-4 border-black bg-white relative overflow-hidden">
|
||||
<div class="h-32 flex items-center justify-center relative" style="background: linear-gradient(45deg, #ff6b6b, #ffa500);">
|
||||
<i data-lucide="music" class="w-12 h-12 text-white"></i>
|
||||
<div class="absolute top-2 right-2 mono text-xs font-black bg-white text-black px-2 py-1 border border-black">HOT!</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="mono font-black text-sm uppercase mb-2">CONCERT ÉLECTRO</h3>
|
||||
<p class="text-xs font-bold mb-3">SAT 21 SEPT • BERGHAIN</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono font-black text-lg">€45</span>
|
||||
<button class="brutal-btn px-4 py-1 text-xs">BOOK!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Card 2 -->
|
||||
<div class="border-4 border-black bg-white relative overflow-hidden">
|
||||
<div class="h-32 flex items-center justify-center relative" style="background: linear-gradient(45deg, #2ed573, #1e90ff);">
|
||||
<i data-lucide="leaf" class="w-12 h-12 text-white"></i>
|
||||
<div class="absolute top-2 right-2 mono text-xs font-black bg-green-400 text-black px-2 py-1 border border-black">ECO</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="mono font-black text-sm uppercase mb-2">MARCHÉ BIO</h3>
|
||||
<p class="text-xs font-bold mb-3">SUN 22 SEPT • PLACE VOSGES</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono font-black text-lg" style="color: var(--accent);">FREE</span>
|
||||
<button class="brutal-btn brutal-secondary px-4 py-1 text-xs">VIEW</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Card 3 -->
|
||||
<div class="border-4 border-black bg-white relative overflow-hidden">
|
||||
<div class="h-32 flex items-center justify-center relative" style="background: linear-gradient(45deg, #a55eea, #ff6b6b);">
|
||||
<i data-lucide="book-open" class="w-12 h-12 text-white"></i>
|
||||
<div class="absolute top-2 right-2 mono text-xs font-black bg-purple-400 text-black px-2 py-1 border border-black">NEW</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="mono font-black text-sm uppercase mb-2">SALON DU LIVRE</h3>
|
||||
<p class="text-xs font-bold mb-3">MON 23 SEPT • GRAND PALAIS</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="mono font-black text-lg">€15</span>
|
||||
<button class="brutal-btn brutal-accent px-4 py-1 text-xs">BOOK!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||||
<button class="brutal-btn p-6 text-center">
|
||||
<i data-lucide="plus" class="w-8 h-8 mx-auto mb-2"></i>
|
||||
<span class="mono font-black text-sm">CREATE EVENT</span>
|
||||
</button>
|
||||
|
||||
<button class="brutal-btn brutal-secondary p-6 text-center">
|
||||
<i data-lucide="search" class="w-8 h-8 mx-auto mb-2"></i>
|
||||
<span class="mono font-black text-sm">FIND EVENTS</span>
|
||||
</button>
|
||||
|
||||
<button class="brutal-btn brutal-accent p-6 text-center">
|
||||
<i data-lucide="heart" class="w-8 h-8 mx-auto mb-2"></i>
|
||||
<span class="mono font-black text-sm">MY FAVORITES</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<button class="fixed bottom-6 right-6 w-16 h-16 border-4 border-black flex items-center justify-center font-black text-white hover:scale-110 transition-transform z-50" style="background: var(--primary); box-shadow: 6px 6px 0px 0px var(--border);">
|
||||
<i data-lucide="zap" class="w-8 h-8"></i>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Add some brutal interactions
|
||||
document.querySelectorAll('.brutal-card').forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
this.style.transform = 'translate(2px, 2px)';
|
||||
this.style.boxShadow = '4px 4px 0px 0px var(--border)';
|
||||
|
||||
setTimeout(() => {
|
||||
this.style.transform = '';
|
||||
this.style.boxShadow = '';
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
// Brutal shake animation for alerts
|
||||
const alertCard = document.querySelector('.brutal-card');
|
||||
setInterval(() => {
|
||||
if (alertCard && alertCard.style.background === 'rgb(255, 68, 68)') {
|
||||
alertCard.style.animation = 'shake 0.3s ease-in-out';
|
||||
setTimeout(() => {
|
||||
alertCard.style.animation = '';
|
||||
}, 300);
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
// Define shake animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-2px); }
|
||||
75% { transform: translateX(2px); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
642
.superdesign/design_iterations/dashboard_6.html
Normal file
642
.superdesign/design_iterations/dashboard_6.html
Normal 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>
|
||||
@@ -29,6 +29,11 @@ class PagesController < ApplicationController
|
||||
.distinct
|
||||
.limit(5)
|
||||
|
||||
# Draft tickets that can be retried
|
||||
@draft_tickets = current_user.tickets.includes(:ticket_type, :event)
|
||||
.can_retry_payment
|
||||
.order(:expires_at)
|
||||
|
||||
# Events sections
|
||||
@today_events = Event.published.where("DATE(start_time) = ?", Date.current).order(start_time: :asc)
|
||||
@tomorrow_events = Event.published.where("DATE(start_time) = ?", Date.current + 1).order(start_time: :asc)
|
||||
|
||||
@@ -106,6 +106,36 @@ class TicketsController < ApplicationController
|
||||
@tickets = current_user.tickets.includes(:ticket_type)
|
||||
.where(id: draft_ticket_ids, status: "draft")
|
||||
|
||||
# Check for expired tickets and clean them up
|
||||
expired_tickets = @tickets.select(&:expired?)
|
||||
if expired_tickets.any?
|
||||
expired_tickets.each(&:expire_if_overdue!)
|
||||
@tickets = @tickets.reject(&:expired?)
|
||||
|
||||
if @tickets.empty?
|
||||
session.delete(:draft_ticket_ids)
|
||||
redirect_to event_path(@event.slug, @event), alert: "Vos billets ont expiré. Veuillez recommencer votre commande."
|
||||
return
|
||||
end
|
||||
|
||||
flash[:notice] = "Certains billets ont expiré et ont été supprimés de votre commande."
|
||||
end
|
||||
|
||||
# Check if tickets can still be retried
|
||||
non_retryable_tickets = @tickets.reject(&:can_retry_payment?)
|
||||
if non_retryable_tickets.any?
|
||||
non_retryable_tickets.each(&:expire_if_overdue!)
|
||||
@tickets = @tickets.select(&:can_retry_payment?)
|
||||
|
||||
if @tickets.empty?
|
||||
session.delete(:draft_ticket_ids)
|
||||
redirect_to event_path(@event.slug, @event), alert: "Nombre maximum de tentatives de paiement atteint. Veuillez recommencer votre commande."
|
||||
return
|
||||
end
|
||||
|
||||
flash[:notice] = "Certains billets ont atteint le nombre maximum de tentatives de paiement."
|
||||
end
|
||||
|
||||
if @tickets.empty?
|
||||
redirect_to event_path(@event.slug, @event), alert: "Billets non trouvés ou déjà traités"
|
||||
return
|
||||
@@ -113,10 +143,16 @@ class TicketsController < ApplicationController
|
||||
|
||||
@total_amount = @tickets.sum(&:price_cents)
|
||||
|
||||
# Check for expiring soon tickets
|
||||
@expiring_soon = @tickets.any?(&:expiring_soon?)
|
||||
|
||||
# Create Stripe checkout session if Stripe is configured
|
||||
if Rails.application.config.stripe[:secret_key].present?
|
||||
begin
|
||||
@checkout_session = create_stripe_session
|
||||
|
||||
# Only increment payment attempts after successfully creating the session
|
||||
@tickets.each(&:increment_payment_attempt!)
|
||||
rescue => e
|
||||
error_message = e.message.present? ? e.message : "Erreur Stripe inconnue"
|
||||
Rails.logger.error "Stripe checkout session creation failed: #{error_message}"
|
||||
@@ -138,9 +174,6 @@ class TicketsController < ApplicationController
|
||||
return
|
||||
end
|
||||
|
||||
# Stripe is now initialized at application startup, no need to initialize here
|
||||
Rails.logger.debug "Payment success - Using globally initialized Stripe"
|
||||
|
||||
begin
|
||||
stripe_session = Stripe::Checkout::Session.retrieve(session_id)
|
||||
|
||||
@@ -148,7 +181,7 @@ class TicketsController < ApplicationController
|
||||
# Get event_id and ticket_ids from session metadata
|
||||
event_id = stripe_session.metadata["event_id"]
|
||||
ticket_ids_data = stripe_session.metadata["ticket_ids"]
|
||||
|
||||
|
||||
unless event_id.present? && ticket_ids_data.present?
|
||||
redirect_to dashboard_path, alert: "Informations de commande manquantes"
|
||||
return
|
||||
@@ -158,14 +191,14 @@ class TicketsController < ApplicationController
|
||||
@event = Event.find(event_id)
|
||||
ticket_ids = ticket_ids_data.split(",")
|
||||
@tickets = current_user.tickets.where(id: ticket_ids, status: "draft")
|
||||
|
||||
|
||||
if @tickets.empty?
|
||||
redirect_to dashboard_path, alert: "Billets non trouvés"
|
||||
return
|
||||
end
|
||||
|
||||
@tickets.update_all(status: "active")
|
||||
|
||||
|
||||
# Send confirmation emails
|
||||
@tickets.each do |ticket|
|
||||
TicketMailer.purchase_confirmation(ticket).deliver_now
|
||||
@@ -192,16 +225,51 @@ class TicketsController < ApplicationController
|
||||
|
||||
# Handle payment failure/cancellation
|
||||
def payment_cancel
|
||||
redirect_to dashboard_path, alert: "Le paiement a été annulé"
|
||||
# Keep draft tickets for potential retry, just redirect back to checkout
|
||||
draft_ticket_ids = session[:draft_ticket_ids] || []
|
||||
|
||||
if draft_ticket_ids.any?
|
||||
tickets = current_user.tickets.where(id: draft_ticket_ids, status: "draft")
|
||||
retryable_tickets = tickets.select(&:can_retry_payment?)
|
||||
|
||||
if retryable_tickets.any?
|
||||
event = retryable_tickets.first.event
|
||||
redirect_to ticket_checkout_path(event.slug, event.id),
|
||||
alert: "Le paiement a été annulé. Vous pouvez réessayer."
|
||||
else
|
||||
session.delete(:draft_ticket_ids)
|
||||
redirect_to dashboard_path, alert: "Le paiement a été annulé et vos billets ont expiré."
|
||||
end
|
||||
else
|
||||
redirect_to dashboard_path, alert: "Le paiement a été annulé"
|
||||
end
|
||||
end
|
||||
|
||||
def show
|
||||
@ticket = current_user.tickets.includes(:ticket_type, :event).find(params[:ticket_id])
|
||||
@event = @ticket.event
|
||||
rescue ActiveRecord::RecordNotFound
|
||||
redirect_to dashboard_path, alert: "Billet non trouvé"
|
||||
# Allow users to retry payment for failed/cancelled payments
|
||||
def retry_payment
|
||||
@event = Event.includes(:ticket_types).find(params[:id])
|
||||
ticket_ids = params[:ticket_ids]&.split(',') || []
|
||||
|
||||
@tickets = current_user.tickets.where(id: ticket_ids)
|
||||
.select(&:can_retry_payment?)
|
||||
|
||||
if @tickets.empty?
|
||||
redirect_to event_path(@event.slug, @event),
|
||||
alert: "Aucun billet disponible pour un nouveau paiement"
|
||||
return
|
||||
end
|
||||
|
||||
# Set session for checkout
|
||||
session[:draft_ticket_ids] = @tickets.map(&:id)
|
||||
redirect_to ticket_checkout_path(@event.slug, @event.id)
|
||||
end
|
||||
|
||||
def show
|
||||
@ticket = current_user.tickets.includes(:ticket_type, :event).find(params[:ticket_id])
|
||||
@event = @ticket.event
|
||||
rescue ActiveRecord::RecordNotFound
|
||||
redirect_to dashboard_path, alert: "Billet non trouvé"
|
||||
end
|
||||
private
|
||||
|
||||
def set_event
|
||||
|
||||
15
app/jobs/cleanup_expired_drafts_job.rb
Normal file
15
app/jobs/cleanup_expired_drafts_job.rb
Normal file
@@ -0,0 +1,15 @@
|
||||
class CleanupExpiredDraftsJob < ApplicationJob
|
||||
queue_as :default
|
||||
|
||||
def perform
|
||||
expired_count = 0
|
||||
|
||||
Ticket.expired_drafts.find_each do |ticket|
|
||||
Rails.logger.info "Expiring draft ticket #{ticket.id} for user #{ticket.user_id}"
|
||||
ticket.expire_if_overdue!
|
||||
expired_count += 1
|
||||
end
|
||||
|
||||
Rails.logger.info "Expired #{expired_count} draft tickets" if expired_count > 0
|
||||
end
|
||||
end
|
||||
@@ -1,4 +1,8 @@
|
||||
class Ticket < ApplicationRecord
|
||||
# === Constants ===
|
||||
DRAFT_EXPIRY_TIME = 30.minutes
|
||||
MAX_PAYMENT_ATTEMPTS = 3
|
||||
|
||||
# === Associations ===
|
||||
belongs_to :user
|
||||
belongs_to :ticket_type
|
||||
@@ -12,9 +16,17 @@ class Ticket < ApplicationRecord
|
||||
validates :status, presence: true, inclusion: { in: %w[draft active used expired refunded] }
|
||||
validates :first_name, presence: true
|
||||
validates :last_name, presence: true
|
||||
validates :payment_attempts, presence: true, numericality: { greater_than_or_equal_to: 0 }
|
||||
|
||||
# === Scopes ===
|
||||
scope :draft, -> { where(status: "draft") }
|
||||
scope :active, -> { where(status: "active") }
|
||||
scope :expired_drafts, -> { draft.where("expires_at < ?", Time.current) }
|
||||
scope :can_retry_payment, -> { draft.where("payment_attempts < ? AND expires_at > ?", MAX_PAYMENT_ATTEMPTS, Time.current) }
|
||||
|
||||
before_validation :set_price_from_ticket_type, on: :create
|
||||
before_validation :generate_qr_code, on: :create
|
||||
before_validation :set_draft_expiry, on: :create
|
||||
|
||||
# Generate PDF ticket
|
||||
def to_pdf
|
||||
@@ -26,6 +38,38 @@ class Ticket < ApplicationRecord
|
||||
price_cents / 100.0
|
||||
end
|
||||
|
||||
# Check if ticket can be retried for payment
|
||||
def can_retry_payment?
|
||||
draft? && payment_attempts < MAX_PAYMENT_ATTEMPTS && !expired?
|
||||
end
|
||||
|
||||
# Check if ticket is expired
|
||||
def expired?
|
||||
expires_at.present? && expires_at < Time.current
|
||||
end
|
||||
|
||||
# Mark ticket as expired if it"s past expiry time
|
||||
def expire_if_overdue!
|
||||
return unless draft? && expired?
|
||||
|
||||
update!(status: "expired")
|
||||
end
|
||||
|
||||
# Increment payment attempt counter
|
||||
def increment_payment_attempt!
|
||||
update!(
|
||||
payment_attempts: payment_attempts + 1,
|
||||
last_payment_attempt_at: Time.current
|
||||
)
|
||||
end
|
||||
|
||||
# Check if draft is about to expire (within 5 minutes)
|
||||
def expiring_soon?
|
||||
return false unless draft? && expires_at.present?
|
||||
|
||||
expires_at <= 5.minutes.from_now
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def set_price_from_ticket_type
|
||||
@@ -41,4 +85,14 @@ class Ticket < ApplicationRecord
|
||||
break unless Ticket.exists?(qr_code: qr_code)
|
||||
end
|
||||
end
|
||||
|
||||
def set_draft_expiry
|
||||
return unless status == "draft"
|
||||
|
||||
self.expires_at = DRAFT_EXPIRY_TIME.from_now if expires_at.blank?
|
||||
end
|
||||
|
||||
def draft?
|
||||
status == "draft"
|
||||
end
|
||||
end
|
||||
|
||||
@@ -29,18 +29,18 @@
|
||||
|
||||
<div data-header-target="userMenu" class="absolute right-0 mt-2 w-48 rounded-md shadow-lg z-50 hidden">
|
||||
<%= link_to t("header.profile"), edit_user_registration_path,
|
||||
class: "block px-4 py-2 text-sm bg-black text-gray-100 hover:bg-purple-700 first:rounded-t-md" %>
|
||||
class: "block px-4 py-2 text-sm text-gray-100 hover:bg-purple-700 first:rounded-t-md" %>
|
||||
<%= link_to t("header.reservations"), "#",
|
||||
class: "block px-4 py-2 text-sm bg-black text-gray-100 hover:bg-purple-700" %>
|
||||
class: "block px-4 py-2 text-sm text-gray-100 hover:bg-purple-700" %>
|
||||
<%= link_to t("header.logout"), destroy_user_session_path,
|
||||
data: { controller: "logout", action: "click->logout#signOut",
|
||||
logout_url_value: destroy_user_session_path, redirect_url_value: "/", turbo: false },
|
||||
class: "block px-4 py-2 text-sm bg-black text-gray-100 hover:bg-purple-700 last:rounded-b-md" %>
|
||||
class: "block px-4 py-2 text-sm text-gray-100 hover:bg-purple-700 last:rounded-b-md" %>
|
||||
</div>
|
||||
</div>
|
||||
<% else %>
|
||||
<%= link_to t("header.login"), new_user_session_path,
|
||||
class: "bg-black text-gray-100 hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
|
||||
class: "text-gray-100 hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
|
||||
<%= link_to t("header.register"), new_user_registration_path,
|
||||
class: "bg-purple-600 text-white font-medium py-2 px-4 rounded-lg hover:bg-purple-700 transition-colors duration-200" %>
|
||||
<% end %>
|
||||
@@ -63,9 +63,9 @@
|
||||
<div data-header-target="mobileMenu" class="hidden sm:hidden">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1">
|
||||
<%= link_to t("header.parties"), events_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium bg-black text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
<%= link_to t("header.concerts"), "#",
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium bg-black text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 pb-3 border-t border-gray-700">
|
||||
@@ -77,17 +77,17 @@
|
||||
</div>
|
||||
<div class="px-2 space-y-1">
|
||||
<%= link_to t("header.profile"), edit_user_registration_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium bg-black text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
<%= link_to t("header.reservations"), "#",
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium bg-black text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
<%= link_to t("header.logout"), destroy_user_session_path,
|
||||
data: { controller: "logout", action: "click->logout#signOut", logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false },
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium bg-black text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="px-2 space-y-1">
|
||||
<%= link_to t("header.login"), new_user_session_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium bg-black text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
|
||||
<%= link_to t("header.register"), new_user_registration_path,
|
||||
class: "block px-3 py-2 rounded-md text-base font-medium bg-purple-600 text-white hover:bg-purple-700" %>
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,78 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Draft tickets needing payment -->
|
||||
<% if @draft_tickets.any? %>
|
||||
<div class="card hover-lift mb-8 border-orange-200 bg-orange-50">
|
||||
<div class="card-header bg-orange-100 rounded-lg">
|
||||
|
||||
<div class="mx-4 py-4">
|
||||
<h2 class="text-2xl font-bold text-orange-900 flex items-center">
|
||||
<svg class="w-6 h-6 mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
Billets en attente de paiement
|
||||
</h2>
|
||||
<p class="text-orange-700 mt-1">Vous avez des billets qui nécessitent un paiement</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y-4">
|
||||
<% @draft_tickets.group_by(&:event).each do |event, tickets| %>
|
||||
<div class="bg-white rounded-lg p-4 border border-orange-200">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900"><%= event.name %></h3>
|
||||
<p class="text-sm text-gray-600">
|
||||
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<%= event.start_time.strftime("%d %B %Y à %H:%M") %>
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-orange-600 bg-orange-100 px-2 py-1 rounded-full">
|
||||
<%= tickets.count %> billet<%= 's' if tickets.count > 1 %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2 mb-4">
|
||||
<% tickets.each do |ticket| %>
|
||||
<div class="flex items-center justify-between text-sm bg-gray-50 rounded p-2">
|
||||
<div>
|
||||
<span class="font-medium"><%= ticket.ticket_type.name %></span>
|
||||
<span class="text-gray-600">- <%= ticket.first_name %> <%= ticket.last_name %></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-gray-600">Expire <%= time_ago_in_words(ticket.expires_at) %></span>
|
||||
<span class="font-medium text-gray-900"><%= number_to_currency(ticket.price_euros, unit: "€") %></span>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm text-gray-600">
|
||||
<% max_attempts = tickets.map(&:payment_attempts).max %>
|
||||
Tentatives: <%= max_attempts %>/3
|
||||
<% if tickets.any?(&:expiring_soon?) %>
|
||||
<span class="text-orange-600 font-medium ml-2">⚠️ Expire bientôt</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= form_tag ticket_retry_payment_path(event.slug, event.id), method: :post do %>
|
||||
<%= hidden_field_tag :ticket_ids, tickets.map(&:id).join(',') %>
|
||||
<%= submit_tag "Reprendre le paiement",
|
||||
class: "inline-flex items-center px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-colors duration-200" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- User's booked events -->
|
||||
<div class="card hover-lift mb-8">
|
||||
<div class="card-header">
|
||||
|
||||
@@ -31,6 +31,45 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Order Summary -->
|
||||
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
|
||||
<!-- Warning for expiring tickets -->
|
||||
<% if @expiring_soon %>
|
||||
<div class="mb-6 bg-orange-50 border border-orange-200 rounded-lg p-4">
|
||||
<div class="flex items-start">
|
||||
<svg class="w-5 h-5 text-orange-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-medium text-orange-800 mb-1">Attention - Billets bientôt expirés</h3>
|
||||
<p class="text-orange-700 text-sm">Vos billets vont expirer dans quelques minutes. Veuillez procéder rapidement au paiement pour éviter leur suppression automatique.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- Payment attempts warning -->
|
||||
<% max_attempts = @tickets.map(&:payment_attempts).max %>
|
||||
<% if max_attempts >= 0 %>
|
||||
<% current_attempt = max_attempts + 1 %>
|
||||
<div class="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||||
<div class="flex items-start">
|
||||
<svg class="w-5 h-5 text-yellow-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-medium text-yellow-800 mb-1">Tentative de paiement <%= current_attempt %>/3</h3>
|
||||
<p class="text-yellow-700 text-sm">
|
||||
<% remaining_attempts = 3 - current_attempt %>
|
||||
<% if remaining_attempts > 0 %>
|
||||
Il vous reste <%= remaining_attempts %> tentative<%= 's' if remaining_attempts > 1 %> après celle-ci.
|
||||
<% else %>
|
||||
Ceci est votre dernière tentative de paiement.
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="text-center mb-6">
|
||||
<div class="mx-auto bg-green-100 rounded-full p-3 w-16 h-16 flex items-center justify-center mb-4">
|
||||
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
23
config/initializers/ticket_cleanup_scheduler.rb
Normal file
23
config/initializers/ticket_cleanup_scheduler.rb
Normal file
@@ -0,0 +1,23 @@
|
||||
# Schedule regular cleanup of expired draft tickets
|
||||
#
|
||||
# This will run every 10 minutes to clean up expired draft tickets
|
||||
# If you're using a more sophisticated scheduler like sidekiq or whenever,
|
||||
# you can move this logic there.
|
||||
|
||||
Rails.application.config.after_initialize do
|
||||
# Only run in production and development, not in test
|
||||
unless Rails.env.test?
|
||||
# Schedule the cleanup job to run every 10 minutes
|
||||
Thread.new do
|
||||
loop do
|
||||
begin
|
||||
CleanupExpiredDraftsJob.perform_later
|
||||
rescue => e
|
||||
Rails.logger.error "Failed to schedule expired drafts cleanup: #{e.message}"
|
||||
end
|
||||
|
||||
sleep 10.minutes
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -42,6 +42,7 @@ Rails.application.routes.draw do
|
||||
get "events/:slug.:id/tickets/new", to: "tickets#new", as: "ticket_new"
|
||||
post "events/:slug.:id/tickets/create", to: "tickets#create", as: "ticket_create"
|
||||
get "events/:slug.:id/tickets/checkout", to: "tickets#checkout", as: "ticket_checkout"
|
||||
post "events/:slug.:id/tickets/retry", to: "tickets#retry_payment", as: "ticket_retry_payment"
|
||||
|
||||
# Payment routes
|
||||
get "payments/success", to: "tickets#payment_success", as: "payment_success"
|
||||
|
||||
@@ -9,6 +9,14 @@ class CreateTickets < ActiveRecord::Migration[8.0]
|
||||
t.string :first_name
|
||||
t.string :last_name
|
||||
|
||||
# Implemented to "temporize" tickets
|
||||
# If a ticket is not paid in time, it is removed from the database
|
||||
#
|
||||
t.string :stripe_session_id
|
||||
t.timestamp :expires_at
|
||||
t.integer :payment_attempts, default: 0
|
||||
t.timestamp :last_payment_attempt_at
|
||||
|
||||
t.references :user, null: true, foreign_key: false
|
||||
t.references :ticket_type, null: false, foreign_key: false
|
||||
|
||||
@@ -22,5 +30,9 @@ class CreateTickets < ActiveRecord::Migration[8.0]
|
||||
# Add indexes for better performance
|
||||
# add_index :tickets, :first_name unless index_exists?(:tickets, :first_name)
|
||||
# add_index :tickets, :last_name unless index_exists?(:tickets, :last_name)
|
||||
#
|
||||
# add_index :tickets, :stripe_session_id, unique: true
|
||||
# add_index :tickets, [ :status, :expires_at ]
|
||||
# add_index :tickets, [ :user_id, :status ]
|
||||
end
|
||||
end
|
||||
|
||||
7
db/schema.rb
generated
Executable file → Normal file
7
db/schema.rb
generated
Executable file → Normal file
@@ -40,7 +40,6 @@ ActiveRecord::Schema[8.0].define(version: 2025_08_23_171354) do
|
||||
t.integer "quantity"
|
||||
t.datetime "sale_start_at"
|
||||
t.datetime "sale_end_at"
|
||||
t.boolean "requires_id"
|
||||
t.integer "minimum_age"
|
||||
t.bigint "event_id", null: false
|
||||
t.datetime "created_at", null: false
|
||||
@@ -53,9 +52,13 @@ ActiveRecord::Schema[8.0].define(version: 2025_08_23_171354) do
|
||||
create_table "tickets", charset: "utf8mb4", collation: "utf8mb4_uca1400_ai_ci", force: :cascade do |t|
|
||||
t.string "qr_code"
|
||||
t.integer "price_cents"
|
||||
t.string "status", default: "active"
|
||||
t.string "status", default: "draft"
|
||||
t.string "first_name"
|
||||
t.string "last_name"
|
||||
t.string "stripe_session_id"
|
||||
t.timestamp "expires_at"
|
||||
t.integer "payment_attempts", default: 0
|
||||
t.timestamp "last_payment_attempt_at"
|
||||
t.bigint "user_id"
|
||||
t.bigint "ticket_type_id", null: false
|
||||
t.datetime "created_at", null: false
|
||||
|
||||
22
lib/tasks/tickets.rake
Normal file
22
lib/tasks/tickets.rake
Normal file
@@ -0,0 +1,22 @@
|
||||
namespace :tickets do
|
||||
desc "Clean up expired draft tickets"
|
||||
task cleanup_expired_drafts: :environment do
|
||||
puts "Starting cleanup of expired draft tickets..."
|
||||
CleanupExpiredDraftsJob.perform_now
|
||||
puts "Cleanup completed."
|
||||
end
|
||||
|
||||
desc "Show stats about draft tickets"
|
||||
task stats: :environment do
|
||||
total_drafts = Ticket.draft.count
|
||||
expired_drafts = Ticket.expired_drafts.count
|
||||
retryable_drafts = Ticket.can_retry_payment.count
|
||||
|
||||
puts "=== Draft Ticket Statistics ==="
|
||||
puts "Total draft tickets: #{total_drafts}"
|
||||
puts "Expired draft tickets: #{expired_drafts}"
|
||||
puts "Retryable draft tickets: #{retryable_drafts}"
|
||||
puts "Max payment attempts: #{Ticket::MAX_PAYMENT_ATTEMPTS}"
|
||||
puts "Draft expiry time: #{Ticket::DRAFT_EXPIRY_TIME}"
|
||||
end
|
||||
end
|
||||
Reference in New Issue
Block a user