Translate links and buttons in hardcoded french
This commit is contained in:
kbe
@@ -1,398 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,529 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,556 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,642 +0,0 @@
|
|||||||
<!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>
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,618 +0,0 @@
|
|||||||
/* Enhanced Aperonight Design System - Event Booking Optimized */
|
|
||||||
:root {
|
|
||||||
/* Enhanced Purple gradient system with more depth */
|
|
||||||
--color-primary-50: #faf5ff;
|
|
||||||
--color-primary-100: #f3e8ff;
|
|
||||||
--color-primary-200: #e9d5ff;
|
|
||||||
--color-primary-300: #d8b4fe;
|
|
||||||
--color-primary-400: #c084fc;
|
|
||||||
--color-primary-500: #a855f7;
|
|
||||||
--color-primary-600: #9333ea;
|
|
||||||
--color-primary-700: #7e22ce;
|
|
||||||
--color-primary-800: #6b21a8;
|
|
||||||
--color-primary-900: #581c87;
|
|
||||||
--color-primary-950: #3b0764; /* Added for deeper contrast */
|
|
||||||
|
|
||||||
/* Enhanced Pink gradient for event highlights */
|
|
||||||
--color-accent-300: #f9a8d4;
|
|
||||||
--color-accent-400: #f472b6;
|
|
||||||
--color-accent-500: #ec4899;
|
|
||||||
--color-accent-600: #db2777;
|
|
||||||
--color-accent-700: #be185d; /* Added for better hierarchy */
|
|
||||||
|
|
||||||
/* Enhanced Neutral system with warmer tones */
|
|
||||||
--color-neutral-50: #f8fafc;
|
|
||||||
--color-neutral-100: #f1f5f9;
|
|
||||||
--color-neutral-200: #e2e8f0;
|
|
||||||
--color-neutral-300: #cbd5e1;
|
|
||||||
--color-neutral-400: #94a3b8;
|
|
||||||
--color-neutral-500: #64748b;
|
|
||||||
--color-neutral-600: #475569;
|
|
||||||
--color-neutral-700: #334155;
|
|
||||||
--color-neutral-800: #1e293b;
|
|
||||||
--color-neutral-900: #0f172a;
|
|
||||||
--color-neutral-950: #020617; /* Added for deeper backgrounds */
|
|
||||||
|
|
||||||
/* Event-specific semantic colors */
|
|
||||||
--color-success-light: #dcfce7;
|
|
||||||
--color-success: #16a34a;
|
|
||||||
--color-success-dark: #15803d;
|
|
||||||
--color-warning-light: #fef3c7;
|
|
||||||
--color-warning: #f59e0b;
|
|
||||||
--color-warning-dark: #d97706;
|
|
||||||
--color-danger-light: #fee2e2;
|
|
||||||
--color-danger: #dc2626;
|
|
||||||
--color-danger-dark: #b91c1c;
|
|
||||||
|
|
||||||
/* Event status colors */
|
|
||||||
--color-event-featured: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
||||||
--color-event-available: var(--color-success);
|
|
||||||
--color-event-limited: var(--color-warning);
|
|
||||||
--color-event-sold-out: var(--color-danger);
|
|
||||||
--color-event-vip: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
|
|
||||||
|
|
||||||
/* Enhanced Typography with better hierarchy */
|
|
||||||
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--font-display: 'Outfit', var(--font-sans); /* For headings and key content */
|
|
||||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', monospace;
|
|
||||||
|
|
||||||
/* Enhanced font sizes with golden ratio scaling */
|
|
||||||
--text-xs: 0.75rem; /* 12px */
|
|
||||||
--text-sm: 0.875rem; /* 14px */
|
|
||||||
--text-base: 1rem; /* 16px */
|
|
||||||
--text-lg: 1.125rem; /* 18px */
|
|
||||||
--text-xl: 1.25rem; /* 20px */
|
|
||||||
--text-2xl: 1.5rem; /* 24px */
|
|
||||||
--text-3xl: 1.875rem; /* 30px */
|
|
||||||
--text-4xl: 2.25rem; /* 36px */
|
|
||||||
--text-5xl: 3rem; /* 48px - for hero sections */
|
|
||||||
--text-6xl: 3.75rem; /* 60px - for major headings */
|
|
||||||
|
|
||||||
/* Enhanced spacing system */
|
|
||||||
--space-px: 1px;
|
|
||||||
--space-0-5: 0.125rem; /* 2px */
|
|
||||||
--space-1: 0.25rem; /* 4px */
|
|
||||||
--space-1-5: 0.375rem; /* 6px */
|
|
||||||
--space-2: 0.5rem; /* 8px */
|
|
||||||
--space-2-5: 0.625rem; /* 10px */
|
|
||||||
--space-3: 0.75rem; /* 12px */
|
|
||||||
--space-3-5: 0.875rem; /* 14px */
|
|
||||||
--space-4: 1rem; /* 16px */
|
|
||||||
--space-5: 1.25rem; /* 20px */
|
|
||||||
--space-6: 1.5rem; /* 24px */
|
|
||||||
--space-7: 1.75rem; /* 28px */
|
|
||||||
--space-8: 2rem; /* 32px */
|
|
||||||
--space-9: 2.25rem; /* 36px */
|
|
||||||
--space-10: 2.5rem; /* 40px */
|
|
||||||
--space-11: 2.75rem; /* 44px */
|
|
||||||
--space-12: 3rem; /* 48px */
|
|
||||||
--space-14: 3.5rem; /* 56px */
|
|
||||||
--space-16: 4rem; /* 64px */
|
|
||||||
--space-20: 5rem; /* 80px */
|
|
||||||
--space-24: 6rem; /* 96px */
|
|
||||||
|
|
||||||
/* Enhanced border radius system */
|
|
||||||
--radius-none: 0px;
|
|
||||||
--radius-sm: 0.25rem; /* 4px */
|
|
||||||
--radius-md: 0.375rem; /* 6px */
|
|
||||||
--radius: 0.5rem; /* 8px */
|
|
||||||
--radius-lg: 0.75rem; /* 12px */
|
|
||||||
--radius-xl: 1rem; /* 16px */
|
|
||||||
--radius-2xl: 1.5rem; /* 24px */
|
|
||||||
--radius-3xl: 2rem; /* 32px */
|
|
||||||
--radius-full: 9999px;
|
|
||||||
|
|
||||||
/* Enhanced shadow system with color variations */
|
|
||||||
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
||||||
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
||||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
||||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
||||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
||||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
||||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
||||||
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
||||||
|
|
||||||
/* Purple-tinted shadows for premium feel */
|
|
||||||
--shadow-purple-sm: 0 1px 3px 0 rgb(147 51 234 / 0.1), 0 1px 2px -1px rgb(147 51 234 / 0.1);
|
|
||||||
--shadow-purple-md: 0 4px 6px -1px rgb(147 51 234 / 0.1), 0 2px 4px -2px rgb(147 51 234 / 0.1);
|
|
||||||
--shadow-purple-lg: 0 10px 15px -3px rgb(147 51 234 / 0.15), 0 4px 6px -4px rgb(147 51 234 / 0.1);
|
|
||||||
|
|
||||||
/* Pink-tinted shadows for event highlights */
|
|
||||||
--shadow-pink-sm: 0 1px 3px 0 rgb(236 72 153 / 0.1), 0 1px 2px -1px rgb(236 72 153 / 0.1);
|
|
||||||
--shadow-pink-md: 0 4px 6px -1px rgb(236 72 153 / 0.1), 0 2px 4px -2px rgb(236 72 153 / 0.1);
|
|
||||||
|
|
||||||
/* Animation durations */
|
|
||||||
--duration-fast: 0.15s;
|
|
||||||
--duration-normal: 0.2s;
|
|
||||||
--duration-slow: 0.3s;
|
|
||||||
--duration-slower: 0.5s;
|
|
||||||
|
|
||||||
/* Easing functions */
|
|
||||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
||||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
||||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced Component Styles */
|
|
||||||
|
|
||||||
/* Buttons with improved hierarchy */
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: var(--space-2);
|
|
||||||
font-family: var(--font-display);
|
|
||||||
font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
transition: all var(--duration-normal) var(--ease-in-out);
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-sm {
|
|
||||||
padding: var(--space-2) var(--space-3);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-md {
|
|
||||||
padding: var(--space-3) var(--space-4);
|
|
||||||
font-size: var(--text-base);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-lg {
|
|
||||||
padding: var(--space-4) var(--space-6);
|
|
||||||
font-size: var(--text-lg);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
||||||
color: white;
|
|
||||||
box-shadow: var(--shadow-purple-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-accent-600) 100%);
|
|
||||||
box-shadow: var(--shadow-purple-md);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: var(--shadow-purple-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: white;
|
|
||||||
color: var(--color-primary-600);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: var(--color-primary-50);
|
|
||||||
border-color: var(--color-primary-300);
|
|
||||||
box-shadow: var(--shadow-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--color-primary-600);
|
|
||||||
border: 2px solid var(--color-primary-600);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline:hover {
|
|
||||||
background: var(--color-primary-600);
|
|
||||||
color: white;
|
|
||||||
box-shadow: var(--shadow-purple-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-ghost {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--color-neutral-600);
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-ghost:hover {
|
|
||||||
background: var(--color-neutral-100);
|
|
||||||
color: var(--color-primary-600);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced Cards */
|
|
||||||
.card {
|
|
||||||
background: white;
|
|
||||||
border-radius: var(--radius-xl);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all var(--duration-normal) var(--ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-interactive {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-interactive:hover {
|
|
||||||
box-shadow: var(--shadow-xl);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: var(--color-primary-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
padding: var(--space-6);
|
|
||||||
border-bottom: 1px solid var(--color-neutral-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
padding: var(--space-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-footer {
|
|
||||||
padding: var(--space-4) var(--space-6);
|
|
||||||
background: var(--color-neutral-50);
|
|
||||||
border-top: 1px solid var(--color-neutral-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Event-specific cards */
|
|
||||||
.event-card {
|
|
||||||
position: relative;
|
|
||||||
background: white;
|
|
||||||
border-radius: var(--radius-xl);
|
|
||||||
box-shadow: var(--shadow-md);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all var(--duration-slow) var(--ease-out);
|
|
||||||
border: 1px solid var(--color-neutral-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card:hover {
|
|
||||||
box-shadow: var(--shadow-2xl);
|
|
||||||
transform: translateY(-6px) scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card-featured {
|
|
||||||
border: 2px solid transparent;
|
|
||||||
background: linear-gradient(white, white) padding-box,
|
|
||||||
linear-gradient(135deg, var(--color-primary-600), var(--color-accent-500)) border-box;
|
|
||||||
box-shadow: var(--shadow-purple-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card-featured::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 4px;
|
|
||||||
background: var(--color-event-featured);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card-image {
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card-image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: transform var(--duration-slow) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card:hover .event-card-image img {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced Forms */
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: var(--space-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-label {
|
|
||||||
display: block;
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-neutral-700);
|
|
||||||
margin-bottom: var(--space-2);
|
|
||||||
font-family: var(--font-display);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input,
|
|
||||||
.form-select,
|
|
||||||
.form-textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: var(--space-3) var(--space-4);
|
|
||||||
font-size: var(--text-base);
|
|
||||||
color: var(--color-neutral-900);
|
|
||||||
background: white;
|
|
||||||
border: 1px solid var(--color-neutral-300);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
transition: all var(--duration-normal) var(--ease-in-out);
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input:focus,
|
|
||||||
.form-select:focus,
|
|
||||||
.form-textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--color-primary-500);
|
|
||||||
box-shadow: 0 0 0 3px rgb(168 85 247 / 0.1);
|
|
||||||
background: var(--color-primary-50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-error {
|
|
||||||
color: var(--color-danger);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
margin-top: var(--space-1);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced Badges */
|
|
||||||
.badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-1);
|
|
||||||
padding: var(--space-1-5) var(--space-3);
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
font-family: var(--font-display);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-available {
|
|
||||||
background: var(--color-success-light);
|
|
||||||
color: var(--color-success-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-limited {
|
|
||||||
background: var(--color-warning-light);
|
|
||||||
color: var(--color-warning-dark);
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-sold-out {
|
|
||||||
background: var(--color-danger-light);
|
|
||||||
color: var(--color-danger-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-featured {
|
|
||||||
background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100));
|
|
||||||
color: var(--color-primary-800);
|
|
||||||
border: 1px solid var(--color-primary-200);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-vip {
|
|
||||||
background: linear-gradient(135deg, #fef3c7, #fde68a);
|
|
||||||
color: #92400e;
|
|
||||||
border: 1px solid #fbbf24;
|
|
||||||
box-shadow: var(--shadow-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced Navigation */
|
|
||||||
.nav {
|
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border-bottom: 1px solid var(--color-neutral-200);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-2);
|
|
||||||
padding: var(--space-3) var(--space-4);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--color-neutral-600);
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
transition: all var(--duration-normal) var(--ease-in-out);
|
|
||||||
font-family: var(--font-display);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link:hover,
|
|
||||||
.nav-link.active {
|
|
||||||
color: var(--color-primary-600);
|
|
||||||
background: var(--color-primary-50);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced Layout */
|
|
||||||
.container {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 var(--space-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.container { padding: 0 var(--space-6); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.container { padding: 0 var(--space-8); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-responsive {
|
|
||||||
display: grid;
|
|
||||||
gap: var(--space-6);
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.grid-responsive { grid-template-columns: repeat(2, 1fr); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.grid-responsive { grid-template-columns: repeat(3, 1fr); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-events {
|
|
||||||
display: grid;
|
|
||||||
gap: var(--space-8);
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.grid-events { grid-template-columns: repeat(2, 1fr); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.grid-events { grid-template-columns: repeat(3, 1fr); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1280px) {
|
|
||||||
.grid-events { grid-template-columns: repeat(4, 1fr); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced animations */
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% {
|
|
||||||
background-position: -200% 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 200% 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-fadeInUp {
|
|
||||||
animation: fadeInUp 0.6s var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-slideInRight {
|
|
||||||
animation: slideInRight 0.4s var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-pulse {
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-shimmer {
|
|
||||||
background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: shimmer 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced hover effects */
|
|
||||||
.hover-lift {
|
|
||||||
transition: transform var(--duration-normal) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-lift:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-glow {
|
|
||||||
transition: all var(--duration-normal) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-glow:hover {
|
|
||||||
box-shadow: var(--shadow-purple-lg);
|
|
||||||
filter: brightness(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focus states with better accessibility */
|
|
||||||
.focus-ring {
|
|
||||||
transition: all var(--duration-fast) var(--ease-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus-ring:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 3px rgb(168 85 247 / 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark mode enhancements */
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--color-background: var(--color-neutral-900);
|
|
||||||
--color-surface: var(--color-neutral-800);
|
|
||||||
--color-border: var(--color-neutral-700);
|
|
||||||
--color-text-primary: var(--color-neutral-50);
|
|
||||||
--color-text-secondary: var(--color-neutral-300);
|
|
||||||
--color-text-muted: var(--color-neutral-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: var(--color-neutral-800);
|
|
||||||
border-color: var(--color-neutral-700);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input,
|
|
||||||
.form-select,
|
|
||||||
.form-textarea {
|
|
||||||
background: var(--color-neutral-700);
|
|
||||||
border-color: var(--color-neutral-600);
|
|
||||||
color: var(--color-neutral-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
background: rgba(30, 41, 59, 0.95);
|
|
||||||
border-bottom-color: var(--color-neutral-700);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Print styles */
|
|
||||||
@media print {
|
|
||||||
.btn,
|
|
||||||
.nav,
|
|
||||||
.card:hover {
|
|
||||||
box-shadow: none !important;
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card {
|
|
||||||
break-inside: avoid;
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,627 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>APERONIGHT - RADICAL EVENT BOOKING</title>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
||||||
<link rel="stylesheet" href="neo_brutalist_theme.css">
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
line-height: 1.4;
|
|
||||||
color: var(--foreground);
|
|
||||||
background: var(--background);
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
45deg,
|
|
||||||
var(--secondary) 0px,
|
|
||||||
var(--secondary) 20px,
|
|
||||||
transparent 20px,
|
|
||||||
transparent 40px
|
|
||||||
), var(--background);
|
|
||||||
padding: 100px 0;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
border-bottom: 6px solid var(--border);
|
|
||||||
box-shadow: 0 6px 0px 0px var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
left: 20px;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
border: 4px solid var(--border);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
|
||||||
font-size: clamp(2.5rem, 8vw, 6rem);
|
|
||||||
font-weight: 900;
|
|
||||||
margin-bottom: var(--space-8);
|
|
||||||
color: var(--foreground);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
text-shadow: 4px 4px 0px var(--accent);
|
|
||||||
animation: glitch 3s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glitch {
|
|
||||||
0%, 100% { transform: translateX(0); }
|
|
||||||
20% { transform: translateX(-2px); }
|
|
||||||
40% { transform: translateX(2px); }
|
|
||||||
60% { transform: translateX(-1px); }
|
|
||||||
80% { transform: translateX(1px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero p {
|
|
||||||
font-size: var(--text-2xl);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: var(--space-12);
|
|
||||||
max-width: 800px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-section {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-8);
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 var(--space-4);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: var(--space-20) 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section:nth-child(odd) {
|
|
||||||
background: linear-gradient(135deg, var(--secondary) 25%, transparent 25%),
|
|
||||||
linear-gradient(225deg, var(--secondary) 25%, transparent 25%),
|
|
||||||
linear-gradient(45deg, var(--secondary) 25%, transparent 25%),
|
|
||||||
linear-gradient(315deg, var(--secondary) 25%, var(--background) 25%);
|
|
||||||
background-size: 40px 40px;
|
|
||||||
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: clamp(2rem, 6vw, 4rem);
|
|
||||||
font-weight: 900;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: var(--space-16);
|
|
||||||
color: var(--foreground);
|
|
||||||
text-transform: uppercase;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title::after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 100px;
|
|
||||||
height: 8px;
|
|
||||||
background: var(--accent);
|
|
||||||
margin: var(--space-4) auto 0;
|
|
||||||
box-shadow: var(--shadow-brutal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
||||||
gap: var(--space-12);
|
|
||||||
margin-bottom: var(--space-16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.brutal-event-card {
|
|
||||||
background: var(--background);
|
|
||||||
border: 4px solid var(--border);
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brutal-event-card::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -8px;
|
|
||||||
left: -8px;
|
|
||||||
right: -20px;
|
|
||||||
bottom: -20px;
|
|
||||||
background: var(--primary);
|
|
||||||
z-index: -1;
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brutal-event-card:hover {
|
|
||||||
transform: translate(8px, 8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.brutal-event-card:hover::before {
|
|
||||||
transform: translate(-8px, -8px);
|
|
||||||
background: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 250px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-bottom: 4px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-content {
|
|
||||||
padding: var(--space-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-title {
|
|
||||||
font-size: var(--text-2xl);
|
|
||||||
font-weight: 900;
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
color: var(--foreground);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-date {
|
|
||||||
color: var(--foreground);
|
|
||||||
font-size: var(--text-lg);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-3);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-description {
|
|
||||||
color: var(--foreground);
|
|
||||||
margin-bottom: var(--space-6);
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: var(--space-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-price {
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: var(--text-2xl);
|
|
||||||
color: var(--foreground);
|
|
||||||
background: var(--secondary);
|
|
||||||
padding: var(--space-2) var(--space-4);
|
|
||||||
border: 3px solid var(--border);
|
|
||||||
box-shadow: var(--shadow-brutal);
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
gap: var(--space-12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.brutal-feature {
|
|
||||||
text-align: center;
|
|
||||||
padding: var(--space-8);
|
|
||||||
background: var(--background);
|
|
||||||
border: 4px solid var(--border);
|
|
||||||
position: relative;
|
|
||||||
box-shadow: var(--shadow-brutal-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.brutal-feature::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -12px;
|
|
||||||
left: -12px;
|
|
||||||
right: -24px;
|
|
||||||
bottom: -24px;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
45deg,
|
|
||||||
var(--accent) 0px,
|
|
||||||
var(--accent) 10px,
|
|
||||||
transparent 10px,
|
|
||||||
transparent 20px
|
|
||||||
);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-icon {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
background: var(--primary);
|
|
||||||
color: white;
|
|
||||||
border: 4px solid var(--border);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0 auto var(--space-6);
|
|
||||||
box-shadow: var(--shadow-brutal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.brutal-feature h3 {
|
|
||||||
font-size: var(--text-2xl);
|
|
||||||
font-weight: 900;
|
|
||||||
margin-bottom: var(--space-4);
|
|
||||||
color: var(--foreground);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brutal-feature p {
|
|
||||||
color: var(--foreground);
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats {
|
|
||||||
background: var(--foreground);
|
|
||||||
color: var(--background);
|
|
||||||
padding: var(--space-20) 0;
|
|
||||||
border-top: 6px solid var(--accent);
|
|
||||||
border-bottom: 6px solid var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: var(--space-12);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
padding: var(--space-8);
|
|
||||||
background: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
border: 4px solid var(--background);
|
|
||||||
box-shadow: var(--shadow-brutal-xl);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -8px;
|
|
||||||
left: -8px;
|
|
||||||
right: -16px;
|
|
||||||
bottom: -16px;
|
|
||||||
background: var(--accent);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-number {
|
|
||||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--primary);
|
|
||||||
display: block;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
color: var(--foreground);
|
|
||||||
margin-top: var(--space-2);
|
|
||||||
font-weight: 900;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
font-size: var(--text-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
background: var(--border);
|
|
||||||
color: var(--background);
|
|
||||||
padding: var(--space-16) 0;
|
|
||||||
border-top: 6px solid var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-content {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: var(--space-8);
|
|
||||||
margin-bottom: var(--space-8);
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a {
|
|
||||||
color: var(--background);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 900;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
padding: var(--space-2) var(--space-4);
|
|
||||||
border: 3px solid var(--background);
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a:hover {
|
|
||||||
background: var(--background);
|
|
||||||
color: var(--border);
|
|
||||||
box-shadow: 4px 4px 0px 0px var(--accent);
|
|
||||||
transform: translate(-2px, -2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.noise-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0.03;
|
|
||||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.cta-section {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.events-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: var(--space-8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: var(--space-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="noise-overlay"></div>
|
|
||||||
|
|
||||||
<!-- Navigation -->
|
|
||||||
<nav class="nav">
|
|
||||||
<div class="container">
|
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0;">
|
|
||||||
<div style="display: flex; align-items: center; gap: var(--space-4);">
|
|
||||||
<div style="width: 50px; height: 50px; background: var(--primary); border: 4px solid var(--border); display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; box-shadow: var(--shadow-brutal); font-size: var(--text-xl);">A</div>
|
|
||||||
<span style="font-size: var(--text-2xl); font-weight: 900; color: var(--foreground); text-transform: uppercase; letter-spacing: -0.02em;">APERONIGHT</span>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; gap: var(--space-4); align-items: center;">
|
|
||||||
<a href="#" class="nav-link">EVENTS</a>
|
|
||||||
<a href="#" class="nav-link">ABOUT</a>
|
|
||||||
<a href="#" class="nav-link">CONTACT</a>
|
|
||||||
<button class="btn-primary">SIGN IN</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<section class="hero">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="glitch-text" data-text="RADICAL EVENTS">RADICAL EVENTS</h1>
|
|
||||||
<p>BREAK THE BORING. JOIN THE REVOLUTION. EXPERIENCE EVENTS THAT MATTER.</p>
|
|
||||||
<div class="cta-section">
|
|
||||||
<button class="btn-primary">FIND EVENTS</button>
|
|
||||||
<div style="width: 4px; height: 60px; background: var(--border); box-shadow: var(--shadow-brutal);"></div>
|
|
||||||
<button class="btn-secondary">HOST EVENT</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Featured Events -->
|
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="section-title">FEATURED CHAOS</h2>
|
|
||||||
<div class="events-grid">
|
|
||||||
<div class="brutal-event-card">
|
|
||||||
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=250&fit=crop" alt="TECH CHAOS" class="event-image">
|
|
||||||
<div class="event-content">
|
|
||||||
<h3 class="event-title">TECH CHAOS NIGHT</h3>
|
|
||||||
<div class="event-date">
|
|
||||||
<i data-lucide="zap" style="width: 24px; height: 24px;"></i>
|
|
||||||
THU MAR 15 • 6PM
|
|
||||||
</div>
|
|
||||||
<p class="event-description">SMASH NETWORKING BARRIERS. CODE. DRINKS. CHAOS. REPEAT.</p>
|
|
||||||
<div class="event-footer">
|
|
||||||
<span class="event-price">€25</span>
|
|
||||||
<div style="display: flex; gap: var(--space-3);">
|
|
||||||
<span class="badge-available">LIVE</span>
|
|
||||||
<button class="btn-destructive" style="padding: var(--space-3) var(--space-4);">GRAB IT</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="brutal-event-card">
|
|
||||||
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=250&fit=crop" alt="SOUND ASSAULT" class="event-image">
|
|
||||||
<div class="event-content">
|
|
||||||
<h3 class="event-title">SOUND ASSAULT</h3>
|
|
||||||
<div class="event-date">
|
|
||||||
<i data-lucide="volume-2" style="width: 24px; height: 24px;"></i>
|
|
||||||
SAT MAR 18 • 8PM
|
|
||||||
</div>
|
|
||||||
<p class="event-description">UNDERGROUND BEATS. ROOF ACCESS. CITY DOMINATION.</p>
|
|
||||||
<div class="event-footer">
|
|
||||||
<span class="event-price">€35</span>
|
|
||||||
<div style="display: flex; gap: var(--space-3);">
|
|
||||||
<span class="badge-featured">★ HOT</span>
|
|
||||||
<button class="btn-primary" style="padding: var(--space-3) var(--space-4);">INVADE</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="brutal-event-card">
|
|
||||||
<img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=250&fit=crop" alt="ART REBELLION" class="event-image">
|
|
||||||
<div class="event-content">
|
|
||||||
<h3 class="event-title">ART REBELLION</h3>
|
|
||||||
<div class="event-date">
|
|
||||||
<i data-lucide="paintbrush" style="width: 24px; height: 24px;"></i>
|
|
||||||
FRI MAR 22 • 7PM
|
|
||||||
</div>
|
|
||||||
<p class="event-description">DESTROY CONVENTIONS. CREATE CHAOS. WINE INCLUDED.</p>
|
|
||||||
<div class="event-footer">
|
|
||||||
<span class="event-price">€20</span>
|
|
||||||
<div style="display: flex; gap: var(--space-3);">
|
|
||||||
<span class="badge-sold-out">DANGER</span>
|
|
||||||
<button class="btn-secondary" style="padding: var(--space-3) var(--space-4);">RISK IT</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<button class="btn-secondary" style="font-size: var(--text-xl); padding: var(--space-4) var(--space-8);">MORE CHAOS</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="section-title">WHY WE RULE</h2>
|
|
||||||
<div class="features-grid">
|
|
||||||
<div class="brutal-feature">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<i data-lucide="skull" style="width: 40px; height: 40px;"></i>
|
|
||||||
</div>
|
|
||||||
<h3>CURATED MADNESS</h3>
|
|
||||||
<p>HANDPICKED EVENTS THAT DESTROY BORING AND CREATE LEGENDS.</p>
|
|
||||||
</div>
|
|
||||||
<div class="brutal-feature">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<i data-lucide="shield" style="width: 40px; height: 40px;"></i>
|
|
||||||
</div>
|
|
||||||
<h3>BULLETPROOF BOOKING</h3>
|
|
||||||
<p>SECURE PAYMENTS. INSTANT TICKETS. NO BULLSHIT REFUNDS.</p>
|
|
||||||
</div>
|
|
||||||
<div class="brutal-feature">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<i data-lucide="rocket" style="width: 40px; height: 40px;"></i>
|
|
||||||
</div>
|
|
||||||
<h3>ZERO FRICTION</h3>
|
|
||||||
<p>FIND EVENT. BOOK TICKET. DESTROY EXPECTATIONS. REPEAT.</p>
|
|
||||||
</div>
|
|
||||||
<div class="brutal-feature">
|
|
||||||
<div class="feature-icon">
|
|
||||||
<i data-lucide="users" style="width: 40px; height: 40px;"></i>
|
|
||||||
</div>
|
|
||||||
<h3>TRIBE BUILDING</h3>
|
|
||||||
<p>CONNECT WITH REBELS WHO GET IT. BUILD YOUR EMPIRE.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Stats -->
|
|
||||||
<section class="stats">
|
|
||||||
<div class="container">
|
|
||||||
<div class="stats-grid">
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-number">50+</span>
|
|
||||||
<div class="stat-label">EVENTS MONTHLY</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-number">2.5K</span>
|
|
||||||
<div class="stat-label">REBELS JOINED</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-number">100+</span>
|
|
||||||
<div class="stat-label">VENUES CONQUERED</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-number">95%</span>
|
|
||||||
<div class="stat-label">MINDS BLOWN</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="footer">
|
|
||||||
<div class="container">
|
|
||||||
<div class="footer-content">
|
|
||||||
<div class="footer-links">
|
|
||||||
<a href="#">ABOUT</a>
|
|
||||||
<a href="#">EVENTS</a>
|
|
||||||
<a href="#">SUPPORT</a>
|
|
||||||
<a href="#">PRIVACY</a>
|
|
||||||
<a href="#">TERMS</a>
|
|
||||||
</div>
|
|
||||||
<p style="font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;">© 2024 APERONIGHT. CHAOS RESERVED.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Initialize Lucide icons
|
|
||||||
lucide.createIcons();
|
|
||||||
|
|
||||||
// Add brutal animations on scroll
|
|
||||||
const observerOptions = {
|
|
||||||
threshold: 0.2,
|
|
||||||
rootMargin: '0px 0px -100px 0px'
|
|
||||||
};
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
|
||||||
entries.forEach(entry => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
entry.target.style.animation = 'none';
|
|
||||||
entry.target.offsetHeight; // Trigger reflow
|
|
||||||
entry.target.style.animation = 'shake-brutal 0.5s ease-in-out';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, observerOptions);
|
|
||||||
|
|
||||||
document.querySelectorAll('.brutal-event-card, .brutal-feature, .stat-item').forEach(el => {
|
|
||||||
observer.observe(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add random glitch effects
|
|
||||||
setInterval(() => {
|
|
||||||
const elements = document.querySelectorAll('.section-title, .event-title');
|
|
||||||
const randomElement = elements[Math.floor(Math.random() * elements.length)];
|
|
||||||
if (randomElement && Math.random() > 0.9) {
|
|
||||||
randomElement.style.animation = 'glitch 0.3s ease-in-out';
|
|
||||||
setTimeout(() => {
|
|
||||||
randomElement.style.animation = '';
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
}, 2000);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,417 +0,0 @@
|
|||||||
/* Neo-Brutalist Design System for Event Booking */
|
|
||||||
:root {
|
|
||||||
/* Colors - Bold and high contrast */
|
|
||||||
--background: #ffffff;
|
|
||||||
--foreground: #000000;
|
|
||||||
--card: #ffffff;
|
|
||||||
--card-foreground: #000000;
|
|
||||||
--popover: #ffffff;
|
|
||||||
--popover-foreground: #000000;
|
|
||||||
--primary: #ff6b35;
|
|
||||||
--primary-foreground: #ffffff;
|
|
||||||
--secondary: #00f5ff;
|
|
||||||
--secondary-foreground: #000000;
|
|
||||||
--muted: #f0f0f0;
|
|
||||||
--muted-foreground: #333333;
|
|
||||||
--accent: #ff1744;
|
|
||||||
--accent-foreground: #ffffff;
|
|
||||||
--destructive: #000000;
|
|
||||||
--destructive-foreground: #ffffff;
|
|
||||||
--border: #000000;
|
|
||||||
--input: #ffffff;
|
|
||||||
--ring: #ff6b35;
|
|
||||||
|
|
||||||
/* Event-specific colors - Bold and vibrant */
|
|
||||||
--event-featured: #7c4dff;
|
|
||||||
--event-sold-out: #000000;
|
|
||||||
--event-available: #00c853;
|
|
||||||
--ticket-premium: #ffc107;
|
|
||||||
--ticket-standard: #9e9e9e;
|
|
||||||
|
|
||||||
/* Typography - Bold and impactful */
|
|
||||||
--font-sans: 'Space Grotesk', 'Arial Black', sans-serif;
|
|
||||||
--font-mono: 'Space Mono', 'Courier New', monospace;
|
|
||||||
|
|
||||||
/* Font sizes - Exaggerated scale */
|
|
||||||
--text-xs: 0.75rem;
|
|
||||||
--text-sm: 0.875rem;
|
|
||||||
--text-base: 1rem;
|
|
||||||
--text-lg: 1.25rem;
|
|
||||||
--text-xl: 1.5rem;
|
|
||||||
--text-2xl: 2rem;
|
|
||||||
--text-3xl: 2.5rem;
|
|
||||||
--text-4xl: 3.5rem;
|
|
||||||
|
|
||||||
/* Spacing - Generous */
|
|
||||||
--space-1: 0.25rem;
|
|
||||||
--space-2: 0.5rem;
|
|
||||||
--space-3: 0.75rem;
|
|
||||||
--space-4: 1rem;
|
|
||||||
--space-6: 1.5rem;
|
|
||||||
--space-8: 2rem;
|
|
||||||
--space-12: 3rem;
|
|
||||||
--space-16: 4rem;
|
|
||||||
--space-20: 5rem;
|
|
||||||
|
|
||||||
/* Border radius - Sharp edges */
|
|
||||||
--radius: 0px;
|
|
||||||
--radius-sm: 0px;
|
|
||||||
--radius-md: 0px;
|
|
||||||
--radius-lg: 0px;
|
|
||||||
--radius-xl: 0px;
|
|
||||||
|
|
||||||
/* Shadows - Bold and offset */
|
|
||||||
--shadow-brutal: 8px 8px 0px 0px #000000;
|
|
||||||
--shadow-brutal-lg: 12px 12px 0px 0px #000000;
|
|
||||||
--shadow-brutal-xl: 16px 16px 0px 0px #000000;
|
|
||||||
--shadow-brutal-color: 8px 8px 0px 0px var(--accent);
|
|
||||||
--shadow-inset: inset 4px 4px 0px 0px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Typography overrides */
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: var(--font-sans) !important;
|
|
||||||
font-weight: 900 !important;
|
|
||||||
text-transform: uppercase !important;
|
|
||||||
letter-spacing: -0.02em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 { font-size: var(--text-4xl) !important; }
|
|
||||||
h2 { font-size: var(--text-3xl) !important; }
|
|
||||||
h3 { font-size: var(--text-2xl) !important; }
|
|
||||||
|
|
||||||
/* Component styles */
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--primary);
|
|
||||||
color: var(--primary-foreground);
|
|
||||||
padding: 16px 32px;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
font-weight: 900;
|
|
||||||
border: 3px solid var(--border);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
box-shadow: var(--shadow-brutal);
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translate(4px, 4px);
|
|
||||||
box-shadow: 4px 4px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:active {
|
|
||||||
transform: translate(8px, 8px);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: var(--secondary);
|
|
||||||
color: var(--secondary-foreground);
|
|
||||||
padding: 16px 32px;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
font-weight: 900;
|
|
||||||
border: 3px solid var(--border);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
box-shadow: var(--shadow-brutal);
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
transform: translate(4px, 4px);
|
|
||||||
box-shadow: 4px 4px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-destructive {
|
|
||||||
background: var(--destructive);
|
|
||||||
color: var(--destructive-foreground);
|
|
||||||
padding: 16px 32px;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
font-weight: 900;
|
|
||||||
border: 3px solid var(--border);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
box-shadow: var(--shadow-brutal-color);
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: var(--card);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
box-shadow: var(--shadow-brutal-lg);
|
|
||||||
padding: var(--space-8);
|
|
||||||
border: 4px solid var(--border);
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -4px;
|
|
||||||
left: -4px;
|
|
||||||
right: -16px;
|
|
||||||
bottom: -16px;
|
|
||||||
background: var(--accent);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
transform: translate(4px, 4px);
|
|
||||||
box-shadow: 8px 8px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card {
|
|
||||||
background: var(--card);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
overflow: visible;
|
|
||||||
box-shadow: var(--shadow-brutal-xl);
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
border: 4px solid var(--border);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -8px;
|
|
||||||
left: -8px;
|
|
||||||
right: -24px;
|
|
||||||
bottom: -24px;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
45deg,
|
|
||||||
transparent,
|
|
||||||
transparent 10px,
|
|
||||||
var(--secondary) 10px,
|
|
||||||
var(--secondary) 20px
|
|
||||||
);
|
|
||||||
z-index: -1;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card:hover::after {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-card:hover {
|
|
||||||
transform: translate(8px, 8px);
|
|
||||||
box-shadow: 8px 8px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-card {
|
|
||||||
background: var(--muted);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
padding: var(--space-6);
|
|
||||||
border: 3px solid var(--border);
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
box-shadow: var(--shadow-brutal);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-card.selected {
|
|
||||||
background: var(--primary);
|
|
||||||
color: var(--primary-foreground);
|
|
||||||
transform: translate(4px, 4px);
|
|
||||||
box-shadow: 4px 4px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-card.selected::before {
|
|
||||||
content: '✓';
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
right: -10px;
|
|
||||||
background: var(--accent);
|
|
||||||
color: white;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 900;
|
|
||||||
border: 3px solid var(--border);
|
|
||||||
box-shadow: 4px 4px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input {
|
|
||||||
background: var(--input);
|
|
||||||
border: 3px solid var(--border);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
padding: 16px 20px;
|
|
||||||
font-size: var(--text-lg);
|
|
||||||
font-weight: 700;
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
box-shadow: var(--shadow-inset);
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--primary);
|
|
||||||
box-shadow: var(--shadow-brutal-color);
|
|
||||||
transform: translate(-2px, -2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
font-weight: 900;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
border: 2px solid var(--border);
|
|
||||||
box-shadow: 4px 4px 0px 0px #000000;
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-available {
|
|
||||||
background: var(--event-available);
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-sold-out {
|
|
||||||
background: var(--event-sold-out);
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-featured {
|
|
||||||
background: var(--event-featured);
|
|
||||||
color: #ffffff;
|
|
||||||
animation: pulse-brutal 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-premium {
|
|
||||||
background: var(--ticket-premium);
|
|
||||||
color: #000000;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-premium::after {
|
|
||||||
content: '★';
|
|
||||||
margin-left: 8px;
|
|
||||||
animation: rotate 3s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation */
|
|
||||||
.nav {
|
|
||||||
background: var(--background);
|
|
||||||
border-bottom: 6px solid var(--border);
|
|
||||||
box-shadow: 0 6px 0px 0px var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
color: var(--foreground);
|
|
||||||
font-weight: 900;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
transition: all 0.1s ease;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
border: 3px solid transparent;
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link:hover, .nav-link.active {
|
|
||||||
background: var(--primary);
|
|
||||||
color: var(--primary-foreground);
|
|
||||||
border-color: var(--border);
|
|
||||||
box-shadow: 4px 4px 0px 0px #000000;
|
|
||||||
transform: translate(-2px, -2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes pulse-brutal {
|
|
||||||
0%, 100% {
|
|
||||||
transform: scale(1);
|
|
||||||
box-shadow: 4px 4px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 6px 6px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shake-brutal {
|
|
||||||
0%, 100% { transform: translateX(0); }
|
|
||||||
25% { transform: translateX(-8px); }
|
|
||||||
75% { transform: translateX(8px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-shake {
|
|
||||||
animation: shake-brutal 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Special effects */
|
|
||||||
.glitch-text {
|
|
||||||
position: relative;
|
|
||||||
color: var(--primary);
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch-text::before,
|
|
||||||
.glitch-text::after {
|
|
||||||
content: attr(data-text);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch-text::before {
|
|
||||||
color: var(--accent);
|
|
||||||
animation: glitch-1 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch-text::after {
|
|
||||||
color: var(--secondary);
|
|
||||||
animation: glitch-2 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glitch-1 {
|
|
||||||
0%, 100% { transform: translateX(0); }
|
|
||||||
20% { transform: translateX(-2px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glitch-2 {
|
|
||||||
0%, 100% { transform: translateX(0); }
|
|
||||||
20% { transform: translateX(2px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
:root {
|
|
||||||
--space-4: 0.75rem;
|
|
||||||
--space-6: 1rem;
|
|
||||||
--space-8: 1.5rem;
|
|
||||||
--text-4xl: 2.5rem;
|
|
||||||
--text-3xl: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary, .btn-secondary, .btn-destructive {
|
|
||||||
padding: 12px 24px;
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: var(--space-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-brutal, .shadow-brutal-lg, .shadow-brutal-xl {
|
|
||||||
box-shadow: 4px 4px 0px 0px #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
82
app/helpers/lucide_helper.rb
Normal file
82
app/helpers/lucide_helper.rb
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
module LucideHelper
|
||||||
|
# Create a Lucide icon element
|
||||||
|
#
|
||||||
|
# @param name [String] The name of the Lucide icon
|
||||||
|
# @param options [Hash] Additional options
|
||||||
|
# @option options [String] :class Additional CSS classes
|
||||||
|
# @option options [String] :size Size class (e.g., 'w-4 h-4', 'w-6 h-6')
|
||||||
|
# @option options [Hash] :data Additional data attributes
|
||||||
|
#
|
||||||
|
# @return [String] HTML string for the icon
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# lucide_icon('user')
|
||||||
|
# lucide_icon('check-circle', class: 'text-green-500', size: 'w-5 h-5')
|
||||||
|
# lucide_icon('menu', data: { action: 'click->header#toggleMenu' })
|
||||||
|
def lucide_icon(name, options = {})
|
||||||
|
css_classes = ["lucide-icon"]
|
||||||
|
css_classes << options[:size] if options[:size]
|
||||||
|
css_classes << options[:class] if options[:class]
|
||||||
|
|
||||||
|
data_attributes = { lucide: name }
|
||||||
|
data_attributes.merge!(options[:data]) if options[:data]
|
||||||
|
|
||||||
|
content_tag :i, "",
|
||||||
|
class: css_classes.join(" "),
|
||||||
|
data: data_attributes,
|
||||||
|
**options.except(:class, :size, :data)
|
||||||
|
end
|
||||||
|
|
||||||
|
# Create a button with a Lucide icon
|
||||||
|
#
|
||||||
|
# @param name [String] The name of the Lucide icon
|
||||||
|
# @param options [Hash] Button options
|
||||||
|
# @option options [String] :text Button text (optional)
|
||||||
|
# @option options [String] :class Additional CSS classes for button
|
||||||
|
# @option options [String] :icon_class Additional CSS classes for icon
|
||||||
|
# @option options [String] :icon_size Size class for icon
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# lucide_button('plus', text: 'Add Item', class: 'btn btn-primary')
|
||||||
|
# lucide_button('trash-2', class: 'btn-danger', data: { confirm: 'Are you sure?' })
|
||||||
|
def lucide_button(name, options = {})
|
||||||
|
text = options.delete(:text)
|
||||||
|
icon_class = options.delete(:icon_class)
|
||||||
|
icon_size = options.delete(:icon_size) || 'w-4 h-4'
|
||||||
|
|
||||||
|
icon = lucide_icon(name, class: icon_class, size: icon_size)
|
||||||
|
|
||||||
|
content = if text.present?
|
||||||
|
safe_join([icon, " ", text])
|
||||||
|
else
|
||||||
|
icon
|
||||||
|
end
|
||||||
|
|
||||||
|
content_tag :button, content, options
|
||||||
|
end
|
||||||
|
|
||||||
|
# Create a link with a Lucide icon
|
||||||
|
#
|
||||||
|
# @param name [String] The name of the Lucide icon
|
||||||
|
# @param url [String] The URL for the link
|
||||||
|
# @param options [Hash] Link options
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# lucide_link('edit', edit_user_path(user), text: 'Edit')
|
||||||
|
# lucide_link('external-link', 'https://example.com', text: 'Visit', target: '_blank')
|
||||||
|
def lucide_link(name, url, options = {})
|
||||||
|
text = options.delete(:text)
|
||||||
|
icon_class = options.delete(:icon_class)
|
||||||
|
icon_size = options.delete(:icon_size) || 'w-4 h-4'
|
||||||
|
|
||||||
|
icon = lucide_icon(name, class: icon_class, size: icon_size)
|
||||||
|
|
||||||
|
content = if text.present?
|
||||||
|
safe_join([icon, " ", text])
|
||||||
|
else
|
||||||
|
icon
|
||||||
|
end
|
||||||
|
|
||||||
|
link_to content, url, options
|
||||||
|
end
|
||||||
|
end
|
||||||
68
app/javascript/controllers/lucide_controller.js
Normal file
68
app/javascript/controllers/lucide_controller.js
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
import { Controller } from "@hotwired/stimulus"
|
||||||
|
|
||||||
|
// Connects to data-controller="lucide"
|
||||||
|
export default class extends Controller {
|
||||||
|
static targets = ["icon"]
|
||||||
|
|
||||||
|
connect() {
|
||||||
|
this.initializeIcons()
|
||||||
|
|
||||||
|
// Listen for Turbo navigation events to reinitialize icons
|
||||||
|
document.addEventListener('turbo:render', this.handleTurboRender.bind(this))
|
||||||
|
document.addEventListener('turbo:frame-render', this.handleTurboFrameRender.bind(this))
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnect() {
|
||||||
|
// Clean up event listeners
|
||||||
|
document.removeEventListener('turbo:render', this.handleTurboRender.bind(this))
|
||||||
|
document.removeEventListener('turbo:frame-render', this.handleTurboFrameRender.bind(this))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize all Lucide icons in the controller scope
|
||||||
|
initializeIcons() {
|
||||||
|
if (typeof lucide !== 'undefined') {
|
||||||
|
// Initialize icons within this controller's element
|
||||||
|
lucide.createIcons({
|
||||||
|
element: this.element
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
console.warn('Lucide not loaded yet, retrying...')
|
||||||
|
// Retry after a short delay if Lucide hasn't loaded yet
|
||||||
|
setTimeout(() => this.initializeIcons(), 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method to reinitialize icons after dynamic content changes
|
||||||
|
reinitialize() {
|
||||||
|
this.initializeIcons()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method to create a specific icon programmatically
|
||||||
|
createIcon(iconName, element = null) {
|
||||||
|
if (typeof lucide !== 'undefined') {
|
||||||
|
const targetElement = element || this.element
|
||||||
|
lucide.createIcons({
|
||||||
|
element: targetElement,
|
||||||
|
icons: {
|
||||||
|
[iconName]: lucide[iconName]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle Turbo page renders
|
||||||
|
handleTurboRender() {
|
||||||
|
// Small delay to ensure DOM is fully updated
|
||||||
|
setTimeout(() => this.initializeIcons(), 10)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle Turbo frame renders
|
||||||
|
handleTurboFrameRender(event) {
|
||||||
|
// Initialize icons within the specific frame that was rendered
|
||||||
|
if (event.detail && event.detail.newFrame) {
|
||||||
|
lucide.createIcons({
|
||||||
|
element: event.detail.newFrame
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -5,17 +5,17 @@
|
|||||||
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
|
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
|
||||||
<% end %>
|
<% end %>
|
||||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
|
||||||
<%= t('devise.passwords.new.title') %>
|
Mot de passe oublié ?
|
||||||
</h2>
|
</h2>
|
||||||
<p class="mt-2 text-center text-sm text-neutral-600">
|
<p class="mt-2 text-center text-sm text-neutral-600">
|
||||||
<%= t('devise.passwords.new.description') %>
|
Entrez votre adresse email ci-dessous et nous vous enverrons un lien pour réinitialiser votre mot de passe.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: "mt-8 space-y-6" }) do |f| %>
|
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: "mt-8 space-y-6" }) do |f| %>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
|
<%= f.label :email, "Adresse Email", class: "block text-sm font-medium text-neutral-700" %>
|
||||||
<div class="mt-1">
|
<div class="mt-1">
|
||||||
<%= f.email_field :email, autofocus: true, autocomplete: "email",
|
<%= f.email_field :email, autofocus: true, autocomplete: "email",
|
||||||
class: "appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm",
|
class: "appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm",
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<%= f.submit t('devise.passwords.new.submit'),
|
<%= f.submit "Envoyer le lien de réinitialisation",
|
||||||
class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
|
class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
@@ -35,7 +35,7 @@
|
|||||||
<div class="w-full border-t border-neutral-300"></div>
|
<div class="w-full border-t border-neutral-300"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex justify-center text-sm">
|
<div class="relative flex justify-center text-sm">
|
||||||
<span class="px-2 bg-neutral-50 text-neutral-600"> <%= t('devise.sessions.new.continue_with') %> </span>
|
<span class="px-2 bg-neutral-50 text-neutral-600">Continuer avec</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -4,14 +4,9 @@
|
|||||||
<%= link_to "/" do %>
|
<%= link_to "/" do %>
|
||||||
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
|
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
|
||||||
<% end %>
|
<% end %>
|
||||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">Créer un compte</h2>
|
||||||
<%= t('devise.registrations.new.title') %>
|
|
||||||
</h2>
|
|
||||||
<p class="mt-2 text-center text-sm text-neutral-600">
|
<p class="mt-2 text-center text-sm text-neutral-600">
|
||||||
<%= t('devise.registrations.new.or') %>
|
ou <a href="<%= new_user_session_path %>" class="font-medium text-purple-600 hover:text-purple-500">se connecter à votre compte</a>
|
||||||
<a href="<%= new_user_session_path %>" class="font-medium text-purple-600 hover:text-purple-500">
|
|
||||||
<%= t('devise.registrations.new.sign_in_link') %>
|
|
||||||
</a>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -19,13 +14,13 @@
|
|||||||
|
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<%= f.label :email, class: "block text-sm font-medium text-neutral-700" %>
|
<%= f.label :email, "Adresse email", class: "block text-sm font-medium text-neutral-700" %>
|
||||||
<%= f.email_field :email, autofocus: true, autocomplete: "email",
|
<%= f.email_field :email, autofocus: true, autocomplete: "email",
|
||||||
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
|
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<%= f.label :password, class: "block text-sm font-medium text-neutral-700" %>
|
<%= f.label :password, "Mot de passe", class: "block text-sm font-medium text-neutral-700" %>
|
||||||
<% if @minimum_password_length %>
|
<% if @minimum_password_length %>
|
||||||
<em class="text-sm text-neutral-500">(<%= t('devise.registrations.new.minimum_password_length', count: @minimum_password_length) %>)</em>
|
<em class="text-sm text-neutral-500">(<%= t('devise.registrations.new.minimum_password_length', count: @minimum_password_length) %>)</em>
|
||||||
<% end %>
|
<% end %>
|
||||||
@@ -34,14 +29,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<%= f.label :password_confirmation, class: "block text-sm font-medium text-neutral-700" %>
|
<%= f.label :password_confirmation, "Confirmation du mot de passe", class: "block text-sm font-medium text-neutral-700" %>
|
||||||
<%= f.password_field :password_confirmation, autocomplete: "new-password",
|
<%= f.password_field :password_confirmation, autocomplete: "new-password",
|
||||||
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
|
class: "mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="actions">
|
<div class="acthons">
|
||||||
<%= f.submit t('devise.registrations.new.sign_up'), class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
|
<%= f.submit "Créer un compte", class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
@@ -51,7 +46,7 @@
|
|||||||
<div class="w-full border-t border-neutral-300"></div>
|
<div class="w-full border-t border-neutral-300"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex justify-center text-sm">
|
<div class="relative flex justify-center text-sm">
|
||||||
<span class="px-2 bg-neutral-50 text-neutral-600"> <%= t('devise.registrations.new.continue_with') %> </span>
|
<span class="px-2 bg-neutral-50 text-neutral-600">Continuer avec</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -5,12 +5,12 @@
|
|||||||
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
|
<img class="mx-auto h-12 w-auto" src="/icon.svg" alt="Aperonight" />
|
||||||
<% end %>
|
<% end %>
|
||||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-neutral-900">
|
||||||
<%= t('devise.sessions.new.title') %>
|
Se connecter à votre compte
|
||||||
</h2>
|
</h2>
|
||||||
<p class="mt-2 text-center text-sm text-neutral-600">
|
<p class="mt-2 text-center text-sm text-neutral-600">
|
||||||
<%= t('devise.sessions.new.or') %>
|
ou
|
||||||
<a href="<%= new_user_registration_path %>" class="font-medium text-purple-600 hover:text-purple-500">
|
<a href="<%= new_user_registration_path %>" class="font-medium text-purple-600 hover:text-purple-500">
|
||||||
<%= t('devise.sessions.new.sign_up_link') %>
|
créer un compte
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -19,17 +19,17 @@
|
|||||||
|
|
||||||
<div class="rounded-md shadow-sm -space-y-px">
|
<div class="rounded-md shadow-sm -space-y-px">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<%= f.label :email, class: "sr-only" %>
|
<%= f.label :email, "Email", class: "sr-only" %>
|
||||||
<%= f.email_field :email, autofocus: true, autocomplete: "email",
|
<%= f.email_field :email, autofocus: true, autocomplete: "email",
|
||||||
class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm",
|
class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm",
|
||||||
placeholder: t('devise.sessions.new.email_placeholder') %>
|
placeholder: "Adresse email" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<%= f.label :password, class: "sr-only" %>
|
<%= f.label :password, "Mot de passe", class: "sr-only" %>
|
||||||
<%= f.password_field :password, autocomplete: "current-password",
|
<%= f.password_field :password, autocomplete: "current-password",
|
||||||
class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm",
|
class: "appearance-none rounded-none relative block w-full px-3 py-2 border border-neutral-300 placeholder-neutral-500 text-neutral-900 bg-white rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm",
|
||||||
placeholder: t('devise.sessions.new.password_placeholder') %>
|
placeholder: "Mot de passe" %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -37,14 +37,14 @@
|
|||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<%= f.check_box :remember_me, class: "h-4 w-4 text-purple-600 focus:ring-purple-500 border-neutral-300 rounded bg-white" %>
|
<%= f.check_box :remember_me, class: "h-4 w-4 text-purple-600 focus:ring-purple-500 border-neutral-300 rounded bg-white" %>
|
||||||
<label for="user_remember_me" class="ml-2 block text-sm text-neutral-700"> <%= t('devise.sessions.new.remember_me') %> </label>
|
<label for="user_remember_me" class="ml-2 block text-sm text-neutral-700"> Se souvenir de moi </label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<%= f.submit t('devise.sessions.new.sign_in'), class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
|
<%= f.submit "Se connecter", class: "group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-50 focus:ring-purple-500" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@
|
|||||||
<div class="w-full border-t border-neutral-300"></div>
|
<div class="w-full border-t border-neutral-300"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative flex justify-center text-sm">
|
<div class="relative flex justify-center text-sm">
|
||||||
<span class="px-2 bg-neutral-50 text-neutral-600"> <%= t('devise.sessions.new.continue_with') %> </span>
|
<span class="px-2 bg-neutral-50 text-neutral-600">Continuer avec</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,38 +1,38 @@
|
|||||||
<div class="mt-4 space-y-4">
|
<div class="mt-4 space-y-4">
|
||||||
<%- if controller_name != "sessions" %>
|
<%- if controller_name != "sessions" %>
|
||||||
<div class="w-full flex justify-center py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
<div class="w-full flex justify-center py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
||||||
<%= link_to t('devise.shared.links.sign_in'), new_session_path(resource_name), class: "block" %>
|
<%= link_to "Se connecter", new_session_path(resource_name), class: "block" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<%- if devise_mapping.registerable? && controller_name != "registrations" %>
|
<%- if devise_mapping.registerable? && controller_name != "registrations" %>
|
||||||
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
||||||
<%= link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name), class: "block" %>
|
<%= link_to "Créer un compte", new_registration_path(resource_name), class: "block" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<%- if devise_mapping.recoverable? && controller_name != "passwords" && controller_name != "registrations" %>
|
<%- if devise_mapping.recoverable? && controller_name != "passwords" && controller_name != "registrations" %>
|
||||||
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
||||||
<%= link_to t('devise.shared.links.forgot_password'), new_password_path(resource_name), class: "block" %>
|
<%= link_to "Mot de passe oublié ?", new_password_path(resource_name), class: "block" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<%- if devise_mapping.confirmable? && controller_name != "confirmations" %>
|
<%- if devise_mapping.confirmable? && controller_name != "confirmations" %>
|
||||||
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
||||||
<%= link_to t('devise.shared.links.confirmation_instructions'), new_confirmation_path(resource_name), class: "block" %>
|
<%= link_to "Renvoyer le lien de confirmation", new_confirmation_path(resource_name), class: "block" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != "unlocks" %>
|
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != "unlocks" %>
|
||||||
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
||||||
<%= link_to t('devise.shared.links.unlock_instructions'), new_unlock_path(resource_name), class: "block" %>
|
<%= link_to "Renvoyer le lien de déblocage", new_unlock_path(resource_name), class: "block" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<%- if devise_mapping.omniauthable? %>
|
<%- if devise_mapping.omniauthable? %>
|
||||||
<%- resource_class.omniauth_providers.each do |provider| %>
|
<%- resource_class.omniauth_providers.each do |provider| %>
|
||||||
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
<div class="w-full flex justify-center mt-4 py-2 px-4 border border-neutral-300 rounded-md shadow-sm text-sm font-medium text-purple-600 bg-white hover:bg-neutral-50 hover:border-purple-500 transition-all duration-200">
|
||||||
<%= button_to t('devise.shared.links.sign_in_with', provider: OmniAuth::Utils.camelize(provider)), omniauth_authorize_path(resource_name, provider), data: { turbo: false }, class: "block" %>
|
<%= button_to "Se connecter avec #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false }, class: "block" %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
Reference in New Issue
Block a user