feat: new dashboards
This commit is contained in:
kbe
529
.superdesign/design_iterations/dashboard_4.html
Normal file
529
.superdesign/design_iterations/dashboard_4.html
Normal file
@@ -0,0 +1,529 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - Mobile-First Responsive</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
|
||||
.swipe-container {
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.swipe-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.swipe-item {
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: 90px;
|
||||
right: 20px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.fab {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 pb-20 md:pb-0">
|
||||
<!-- Mobile Header -->
|
||||
<div class="gradient-bg px-4 pt-12 pb-6 md:pt-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-white">Dashboard</h1>
|
||||
<p class="text-white/80 text-sm">Bonjour Marie 👋</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button class="p-2 bg-white/20 rounded-xl text-white">
|
||||
<i data-lucide="search" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="p-2 bg-white/20 rounded-xl text-white relative">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i>
|
||||
<span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Critical Alert -->
|
||||
<div class="mobile-card rounded-2xl p-4 mb-6 border-l-4 border-red-400">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="p-2 bg-red-100 rounded-lg">
|
||||
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900 text-sm">Action urgente</h3>
|
||||
<p class="text-xs text-gray-600 mb-2">Billets expirent dans 25min</p>
|
||||
<button class="bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium w-full">
|
||||
Payer maintenant - €70
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swipeable Metrics -->
|
||||
<div class="swipe-container flex space-x-4 overflow-x-auto pb-2">
|
||||
<div class="swipe-item mobile-card rounded-2xl p-4 min-w-[140px]">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<i data-lucide="calendar-check" class="w-4 h-4 text-green-600"></i>
|
||||
<span class="text-xs font-medium text-gray-600">Réservations</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900">5</p>
|
||||
<p class="text-xs text-green-600">+2 ce mois</p>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item mobile-card rounded-2xl p-4 min-w-[140px]">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<i data-lucide="clock" class="w-4 h-4 text-blue-600"></i>
|
||||
<span class="text-xs font-medium text-gray-600">Aujourd'hui</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900">3</p>
|
||||
<p class="text-xs text-blue-600">événements</p>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item mobile-card rounded-2xl p-4 min-w-[140px]">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<i data-lucide="calendar" class="w-4 h-4 text-purple-600"></i>
|
||||
<span class="text-xs font-medium text-gray-600">Demain</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900">7</p>
|
||||
<p class="text-xs text-purple-600">événements</p>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item mobile-card rounded-2xl p-4 min-w-[140px]">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<i data-lucide="trending-up" class="w-4 h-4 text-orange-600"></i>
|
||||
<span class="text-xs font-medium text-gray-600">À venir</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900">15</p>
|
||||
<p class="text-xs text-orange-600">cette semaine</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="px-4 -mt-4 relative z-10">
|
||||
|
||||
<!-- My Events Card -->
|
||||
<div class="mobile-card rounded-2xl p-6 mb-6 slide-up">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Mes événements</h2>
|
||||
<button class="text-blue-600 text-sm font-medium">Tout voir</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Event List -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-red-400 to-pink-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="music" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 truncate">Concert Rock Alternative</h3>
|
||||
<p class="text-sm text-gray-600">Aujourd'hui 21:00</p>
|
||||
</div>
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">Confirmé</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-blue-400 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="users" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 truncate">Networking Tech</h3>
|
||||
<p class="text-sm text-gray-600">Demain 19:00</p>
|
||||
</div>
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full font-medium">À venir</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-r from-green-400 to-green-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="coffee" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 truncate">Brunch du Dimanche</h3>
|
||||
<p class="text-sm text-gray-600">Dimanche 11:00</p>
|
||||
</div>
|
||||
<div class="text-right flex-shrink-0">
|
||||
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full font-medium">En attente</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Events -->
|
||||
<div class="mobile-card rounded-2xl p-6 mb-6 slide-up">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Aujourd'hui</h2>
|
||||
<button class="text-blue-600 text-sm font-medium">Planning</button>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Scrollable Events -->
|
||||
<div class="swipe-container flex space-x-4 overflow-x-auto">
|
||||
<div class="swipe-item bg-white rounded-xl p-4 min-w-[280px] border">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-purple-400 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="star" class="w-5 h-5 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900">Festival de Cinéma</h3>
|
||||
<p class="text-sm text-gray-600">20:30 • MK2</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">€25</span>
|
||||
</div>
|
||||
<button class="w-full bg-purple-600 text-white py-2 rounded-lg text-sm font-medium">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item bg-white rounded-xl p-4 min-w-[280px] border">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-yellow-400 to-orange-600 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="utensils" class="w-5 h-5 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900">Cours de Cuisine</h3>
|
||||
<p class="text-sm text-gray-600">14:00 • École Ducasse</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">€85</span>
|
||||
</div>
|
||||
<button class="w-full bg-orange-600 text-white py-2 rounded-lg text-sm font-medium">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="swipe-item bg-white rounded-xl p-4 min-w-[280px] border">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-r from-teal-400 to-cyan-600 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="camera" class="w-5 h-5 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900">Exposition Photo</h3>
|
||||
<p class="text-sm text-gray-600">10:00 • Galerie</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Gratuit</span>
|
||||
</div>
|
||||
<button class="w-full bg-teal-600 text-white py-2 rounded-lg text-sm font-medium">
|
||||
Voir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions Grid -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<button class="mobile-card rounded-2xl p-4 text-left slide-up hover:bg-white/60 transition-all">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="p-3 bg-blue-100 rounded-xl">
|
||||
<i data-lucide="search" class="w-6 h-6 text-blue-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 text-sm">Rechercher</h3>
|
||||
<p class="text-xs text-gray-600">Événements</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="mobile-card rounded-2xl p-4 text-left slide-up hover:bg-white/60 transition-all">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="p-3 bg-green-100 rounded-xl">
|
||||
<i data-lucide="heart" class="w-6 h-6 text-green-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 text-sm">Favoris</h3>
|
||||
<p class="text-xs text-gray-600">12 événements</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Events -->
|
||||
<div class="mobile-card rounded-2xl p-6 slide-up">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Prochains événements</h2>
|
||||
<button class="text-blue-600 text-sm font-medium">Tout voir</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Event Item -->
|
||||
<div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-purple-400 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="music" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold text-gray-900">Concert Électro</h3>
|
||||
<span class="text-lg font-bold text-gray-900">€45</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-2">Samedi 21 Sept • Berghain</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">12 places</span>
|
||||
<button class="bg-purple-600 text-white px-4 py-1 rounded-lg text-sm font-medium">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-green-400 to-teal-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="leaf" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold text-gray-900">Marché Bio</h3>
|
||||
<span class="text-sm font-bold text-green-600">Gratuit</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-2">Dimanche 22 Sept • Place des Vosges</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs bg-teal-100 text-teal-800 px-2 py-1 rounded-full">Accès libre</span>
|
||||
<button class="bg-green-600 text-white px-4 py-1 rounded-lg text-sm font-medium">
|
||||
Voir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-xl">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-orange-400 to-red-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="book-open" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="font-semibold text-gray-900">Salon du Livre</h3>
|
||||
<span class="text-lg font-bold text-gray-900">€15</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-2">Lundi 23 Sept • Grand Palais</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Populaire</span>
|
||||
<button class="bg-orange-600 text-white px-4 py-1 rounded-lg text-sm font-medium">
|
||||
Réserver
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weekly Overview - Tablet and Desktop -->
|
||||
<div class="hidden md:block mobile-card rounded-2xl p-6 mb-6 slide-up">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Vue hebdomadaire</h2>
|
||||
<div class="grid grid-cols-7 gap-2">
|
||||
<!-- Days of week -->
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">LUN</p>
|
||||
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-blue-600">18</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="w-2 h-2 bg-blue-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">MAR</p>
|
||||
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-green-600">19</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="w-2 h-2 bg-green-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">MER</p>
|
||||
<div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-gray-400">20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">JEU</p>
|
||||
<div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-white">21</span>
|
||||
</div>
|
||||
<div class="mt-2 space-y-1">
|
||||
<div class="w-2 h-2 bg-purple-400 rounded-full mx-auto"></div>
|
||||
<div class="w-2 h-2 bg-purple-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">VEN</p>
|
||||
<div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-yellow-600">22</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="w-2 h-2 bg-yellow-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">SAM</p>
|
||||
<div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-red-600">23</span>
|
||||
</div>
|
||||
<div class="mt-2 space-y-1">
|
||||
<div class="w-2 h-2 bg-red-400 rounded-full mx-auto"></div>
|
||||
<div class="w-2 h-2 bg-red-400 rounded-full mx-auto"></div>
|
||||
<div class="w-2 h-2 bg-red-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-3">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">DIM</p>
|
||||
<div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center mx-auto">
|
||||
<span class="text-sm font-medium text-orange-600">24</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="w-2 h-2 bg-orange-400 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<button class="fab w-14 h-14 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full shadow-lg flex items-center justify-center text-white hover:scale-110 transition-transform">
|
||||
<i data-lucide="plus" class="w-6 h-6"></i>
|
||||
</button>
|
||||
|
||||
<!-- Mobile Bottom Navigation -->
|
||||
<div class="md:hidden fixed bottom-0 left-0 right-0 bottom-nav px-4 py-3">
|
||||
<div class="flex items-center justify-around">
|
||||
<button class="flex flex-col items-center space-y-1 text-blue-600">
|
||||
<i data-lucide="home" class="w-5 h-5"></i>
|
||||
<span class="text-xs font-medium">Accueil</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-1 text-gray-500">
|
||||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||||
<span class="text-xs">Événements</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-1 text-gray-500">
|
||||
<i data-lucide="ticket" class="w-5 h-5"></i>
|
||||
<span class="text-xs">Billets</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-1 text-gray-500 relative">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i>
|
||||
<span class="text-xs">Alertes</span>
|
||||
<span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center space-y-1 text-gray-500">
|
||||
<i data-lucide="user" class="w-5 h-5"></i>
|
||||
<span class="text-xs">Profil</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Sidebar Navigation (shown on larger screens) -->
|
||||
<div class="hidden lg:block fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-40">
|
||||
<div class="p-6">
|
||||
<h1 class="text-xl font-bold text-gray-900 mb-8">ApéroNight</h1>
|
||||
<nav class="space-y-2">
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg bg-blue-50 text-blue-700">
|
||||
<i data-lucide="home" class="w-5 h-5"></i>
|
||||
<span class="font-medium">Dashboard</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50">
|
||||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||||
<span>Événements</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50">
|
||||
<i data-lucide="ticket" class="w-5 h-5"></i>
|
||||
<span>Mes billets</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50">
|
||||
<i data-lucide="bar-chart-3" class="w-5 h-5"></i>
|
||||
<span>Analytics</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50">
|
||||
<i data-lucide="settings" class="w-5 h-5"></i>
|
||||
<span>Paramètres</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Adjust content margin for desktop sidebar -->
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
margin-left: 256px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Add touch interactions for mobile
|
||||
let startX, scrollLeft;
|
||||
const sliders = document.querySelectorAll('.swipe-container');
|
||||
|
||||
sliders.forEach(slider => {
|
||||
slider.addEventListener('touchstart', e => {
|
||||
startX = e.touches[0].pageX - slider.offsetLeft;
|
||||
scrollLeft = slider.scrollLeft;
|
||||
});
|
||||
|
||||
slider.addEventListener('touchmove', e => {
|
||||
const x = e.touches[0].pageX - slider.offsetLeft;
|
||||
const walk = (x - startX) * 2;
|
||||
slider.scrollLeft = scrollLeft - walk;
|
||||
});
|
||||
});
|
||||
|
||||
// Stagger animations
|
||||
const slideElements = document.querySelectorAll('.slide-up');
|
||||
slideElements.forEach((el, index) => {
|
||||
el.style.animationDelay = `${index * 0.1}s`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user