398 lines
24 KiB
HTML
398 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - 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> |