Code
Transféré par
BittuCode
Transféré par
BittuJe construis un site web nommé Senego qui permet aux utilisateurs de consulter et
réserver des événements culturels, concerts, matchs, etc.
Voici les fonctionnalités principales du site :
Page d’accueil (index.php) avec une barre de navigation, liste d’événements et
boutons "Connexion" / "Inscription".
Quand un utilisateur clique sur "Connexion" ou "Inscription", une interface modale
s’ouvre (popup).
Une fois connecté, le site affiche son avatar, nom, menu déroulant avec "Mon
Profil", "Mes Réservations", "Déconnexion".
J’utilise PHP, HTML, CSS (Tailwind), JS, et maintenant Firebase comme backend.
Je veux gérer l’authentification (connexion/inscription) avec Firebase
Authentication (Email + Mot de passe).
Les données des utilisateurs doivent être enregistrées dans Firebase Firestore, y
compris : nom, email, avatar, date d’inscription, événements réservés.
Je souhaite aussi que Firebase Hosting héberge mon site, et que la
connexion/session fonctionne comme avec PHP sessions (ou Firebase Auth sessions).
La base de données Firestore doit contenir deux collections :
users : id, name, email, avatar, bookings
events : id, title, description, date, image, price
Le site doit être sécurisé, rapide et facile à maintenir. Je veux aussi pouvoir
facilement afficher les événements depuis Firestore, et stocker les images dans
Firebase Storage.
L’interface est en français.
Merci de m’aider à créer la meilleure structure Firebase possible avec toutes les
règles de sécurité et une gestion propre du frontend + backend. . et si possible je
te passe le site et tu me gere le back. voici le index.html (<!DOCTYPE html>
<html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>Sene'Go - Transport au
Sénégal</title> <link href="https://fonts.googleapis.com/css2?
family=Pacifico&family=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet"> <link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <script
src="tailwind-config.js"></script> <script src="script.js"></script> <link
rel="stylesheet" href="style.css"> </head> <!-- Modal Connexion --> <div id="modal-
login" class="modal hidden fixed inset-0 bg-black bg-opacity-50 flex items-center
justify-center z-50 p-4"> <div class="bg-white rounded-lg shadow-xl w-full max-w-md
relative"> <!-- Bouton de fermeture --> <button onclick="closeModal('modal-login')"
class="absolute top-3 right-3 text-gray-500 hover:text-gray-700 transition"> <svg
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button>
<div class="p-6">
<!-- Logo -->
<div class="flex justify-center mb-4">
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center
justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-orange-
500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-
7z" />
</svg>
</div>
</div>
<h2 class="text-2xl font-bold text-center text-gray-800
mb-6">Connexion</h2>
<!-- Formulaire -->
<form method="POST" action="login.php" class="space-y-4">
<div>
<label for="login-email" class="block text-sm font-medium text-
gray-700 mb-1">Email</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5
text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0
00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<input type="email" id="login-email" name="email"
placeholder="[email protected]" required
class="w-full pl-10 pr-3 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition">
</div>
</div>
<div>
<label for="login-password" class="block text-sm font-medium text-
gray-700 mb-1">Mot de passe</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5
text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2
2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input type="password" id="login-password" name="password"
placeholder="••••••••" required
class="w-full pl-10 pr-3 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-orange-500 focus:ring-orange-500
border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-
700">Se souvenir de moi</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-orange-600 hover:text-
orange-500">Mot de passe oublié ?</a>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-
transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-500
hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-
orange-500 transition">
Se connecter
</button>
</div>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">Pas encore inscrit ?
</span>
</div>
</div>
<div class="mt-4">
<button onclick="switchToRegister()"
class="w-full flex justify-center py-2 px-4 border border-
gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-
gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
transition">
Créer un compte
</button>
</div>
</div>
</div>
</div>
</div> <!-- Modal Inscription --> <div id="modal-register" class="modal hidden
fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md relative"> <!-- Bouton de
fermeture --> <button onclick="closeModal('modal-register')" class="absolute top-3
right-3 text-gray-500 hover:text-gray-700 transition"> <svg
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button>
<div class="p-6">
<!-- Logo -->
<div class="flex justify-center mb-4">
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center
justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-orange-
500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0
0112 0v1H3v-1z" />
</svg>
</div>
</div>
<h2 class="text-2xl font-bold text-center text-gray-800 mb-
6">Inscription</h2>
<!-- Formulaire -->
<form method="POST" action="register.php" class="space-y-4">
<div>
<label for="register-name" class="block text-sm font-medium text-
gray-700 mb-1">Nom complet</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5
text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-
7-7z" />
</svg>
</div>
<input type="text" id="register-name" name="name"
placeholder="Votre nom" required
class="w-full pl-10 pr-3 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition">
</div>
</div>
<div>
<label for="register-email" class="block text-sm font-medium text-
gray-700 mb-1">Email</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5
text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0
00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<input type="email" id="register-email" name="email"
placeholder="[email protected]" required
class="w-full pl-10 pr-3 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition">
</div>
</div>
<div>
<label for="register-password" class="block text-sm font-medium
text-gray-700 mb-1">Mot de passe</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5
text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2
2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<input type="password" id="register-password" name="password"
placeholder="••••••••" required minlength="8"
class="w-full pl-10 pr-3 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition">
</div>
<p class="mt-1 text-xs text-gray-500">Minimum 8 caractères</p>
</div>
<div>
<label for="register-confirm-password" class="block text-sm font-
medium text-gray-700 mb-1">Confirmer le mot de passe</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center
pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5
text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<input type="password" id="register-confirm-password"
name="confirm_password" placeholder="••••••••" required minlength="8"
class="w-full pl-10 pr-3 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition">
</div>
</div>
<div class="flex items-center">
<input id="terms" name="terms" type="checkbox" required
class="h-4 w-4 text-orange-500 focus:ring-orange-500 border-
gray-300 rounded">
<label for="terms" class="ml-2 block text-sm text-gray-700">
J'accepte les <a href="#" class="text-orange-600 hover:text-
orange-500">conditions d'utilisation</a>
</label>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-
transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-500
hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-
orange-500 transition">
S'inscrire
</button>
</div>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">Déjà inscrit ?</span>
</div>
</div>
<div class="mt-4">
<button onclick="switchToLogin()"
class="w-full flex justify-center py-2 px-4 border border-
gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-
gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
transition">
Se connecter
</button>
</div>
</div>
</div>
</div>
</div> <script> // Gestion des modales function openModal(modalId)
{ document.getElementById(modalId).classList.remove('hidden');
document.body.classList.add('overflow-hidden'); // Focus sur le premier champ
setTimeout(() => { const firstInput = document.querySelector(`#${modalId} input`);
if (firstInput) firstInput.focus(); }, 100); } function closeModal(modalId)
{ document.getElementById(modalId).classList.add('hidden');
document.body.classList.remove('overflow-hidden'); } // Basculer entre les modales
function switchToRegister() { closeModal('modal-login'); openModal('modal-
register'); } function switchToLogin() { closeModal('modal-register');
openModal('modal-login'); } // Gestion de l'affichage du profil utilisateur
function updateUserInterface() { const userProfile =
document.getElementById('userProfile'); const authButtons =
document.getElementById('authButtons'); // Vérifier si l'utilisateur est connecté
(à adapter selon votre logique d'authentification) const isLoggedIn =
localStorage.getItem('user') !== null; if (isLoggedIn) { const user =
JSON.parse(localStorage.getItem('user'));
document.getElementById('userName').textContent = user.name;
userProfile.classList.remove('hidden'); authButtons.classList.add('hidden'); } else
{ userProfile.classList.add('hidden');
authButtons.classList.remove('hidden'); } } // Appeler la fonction au chargement de
la page document.addEventListener('DOMContentLoaded', function()
{ updateUserInterface(); // Connexion
document.querySelector('a[href="login.php"]').addEventListener('click', function(e)
{ e.preventDefault(); openModal('modal-login'); }); // Inscription
document.querySelector('a[href="register.php"]').addEventListener('click',
function(e) { e.preventDefault(); openModal('modal-register'); }); // Fermer en
cliquant en dehors ou sur ESC document.querySelectorAll('.modal').forEach(modal =>
{ modal.addEventListener('click', function(e) { if (e.target === this)
closeModal(this.id); }); }); document.addEventListener('keydown', function(e) { if
(e.key === 'Escape') { document.querySelectorAll('.modal').forEach(modal => { if (!
modal.classList.contains('hidden')) { closeModal(modal.id); } }); } }); //
Validation du formulaire d'inscription const registerForm =
document.getElementById('modal-register').querySelector('form'); if (registerForm)
{ registerForm.addEventListener('submit', function(e) { const password =
this.querySelector('input[name="password"]').value; const confirmPassword =
this.querySelector('input[name="confirm_password"]').value; if (password !==
confirmPassword) { e.preventDefault(); alert('Les mots de passe ne correspondent
pas !'); return false; } }); } }); </script> <body class="font-poppins bg-gray-50">
<!-- Header --> <header class="bg-white shadow-md"> <div class="container mx-auto
px-4 py-3 flex justify-between items-center"> <a href="#" class="text-2xl font-
pacifico text-primary">Sene'Go</a> <nav class="senego-nav"> <a href="#"
class="senego-nav-link active"> <i class="ri-home-4-line"></i> <span>Accueil</span>
</a> <a href="#reservation" class="senego-nav-link"> <i class="ri-calendar-check-
line"></i> <span>Réservation</span> </a> <a href="#contact" class="senego-nav-
link"> <i class="ri-customer-service-line"></i> <span>Contact</span> </a> </nav>
<div class="flex items-center space-x-4"> <!-- Profil utilisateur (caché par
défaut) --> <div id="userProfile" class="relative group inline-block hidden">
<button class="flex items-center space-x-2 text-gray-700 hover:text-gray-900"> <img
src="default-avatar.jpg" alt="Avatar" class="w-8 h-8 rounded-full"> <span
id="userName">Nom Utilisateur</span> <i class="ri-arrow-down-s-line"></i> </button>
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden
group-hover:block z-50"> <a href="profile.php" class="block px-4 py-2 text-sm text-
gray-700 hover:bg-gray-100">Mon profil</a> <a href="my-bookings.php" class="block
px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mes réservations</a> <a
href="logout.php" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-
100">Déconnexion</a> </div> </div>
<!-- Boutons de connexion/inscription (visibles par défaut) -->
<div id="authButtons">
<a href="#" onclick="openModal('modal-login'); return false;"
class="mr-4">Connexion</a>
<a href="#" onclick="openModal('modal-register'); return false;"
class="bg-orange-500 px-4 py-2 rounded text-white hover:bg-orange-
600">Inscription</a>
</div>
<button id="mobileMenuBtn" class="md:hidden text-2xl text-gray-700"><i
class="ri-menu-line"></i></button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden md:hidden bg-white py-4 px-6 border-t">
<div class="flex flex-col space-y-4">
<a href="#" class="hover:text-primary">Accueil</a>
<a href="#reservation" class="hover:text-primary">Réservation</a>
<a href="#services" class="hover:text-primary">Services</a>
<a href="#contact" class="hover:text-primary">Contact</a>
<div class="pt-4 border-t flex flex-col space-y-3">
<button class="text-left hover:text-primary">Connexion</button>
<button class="bg-primary text-white py-2 rounded-
button">Inscription</button>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="pt-32 pb-20 bg-cover bg-center" style="background-image: linear-
gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('senego.jpg');">
<div class="container mx-auto px-4">
<div class="max-w-2xl text-white">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Voyagez facilement à
travers le Sénégal</h1>
<p class="text-xl mb-8">Réservez vos billets de transport en quelques
clics et profitez d'un voyage confortable et sécurisé.</p>
<button class="bg-primary text-white px-8 py-4 rounded-button text-lg
hover:bg-primary-dark transition">Réserver maintenant</button>
</div>
</div>
</section>
<!-- Booking Form -->
<section id="reservation" class="py-16 -mt-10">
<div class="container mx-auto px-4">
<div class="bg-white p-8 rounded-xl shadow-xl max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-6">Trouvez votre trajet</h2>
<form action="booking.php" method="POST" class="space-y-4">
<input type="hidden" name="trip_id" value="<?= $trip['id'] ?>">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-sm font-medium mb-2">Ville de
départ</label>
<div class="relative">
<i class="ri-map-pin-line absolute left-3 top-3 text-
gray-400"></i>
<select class="w-full pl-10 pr-4 py-3 border rounded-lg
focus:ring-2 focus:ring-primary focus:border-primary">
<option>Sélectionnez une ville</option>
<option>Dakar</option>
<option>Ziguinchor</option>
<option>Saint-Louis</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-
2">Destination</label>
<div class="relative">
<i class="ri-map-pin-fill absolute left-3 top-3 text-
gray-400"></i>
<select class="w-full pl-10 pr-4 py-3 border rounded-lg
focus:ring-2 focus:ring-primary focus:border-primary">
<option>Sélectionnez une ville</option>
<option>Dakar</option>
<option>Ziguinchor</option>
<option>Saint-Louis</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">Date de
départ</label>
<div class="relative">
<i class="ri-calendar-line absolute left-3 top-3 text-
gray-400"></i>
<input type="date" class="w-full pl-10 pr-4 py-3 border
rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">Nombre de
passagers</label>
<div class="relative">
<i class="ri-user-line absolute left-3 top-3 text-gray-
400"></i>
<input type="number" min="1" value="1" class="w-full
pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-
primary">
</div>
</div>
</div>
<!--- <button class="btn-primary"> -->
<button type="submit" class="bg-orange-500 text-white px-4 py-2
rounded hover:bg-orange-600">
<i class="ri-check-line"></i> <!-- Icône Remixicon -->
Réserver maintenant
</button>
</form>
</div>
</div>
</section>
<!-- Popular Destinations -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Destinations populaires</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Découvrez nos voyages les
plus demandés et explorez les plus belles régions du Sénégal.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Destination 1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-
lg transition">
<img src="Dakar.jpg" alt="Dakar-Ziguinchor" class="w-full h-48
object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Dakar - Ziguinchor</h3>
<div class="flex items-center text-gray-600 mb-4">
<i class="ri-time-line mr-2"></i>
<span>5h30 de trajet</span>
</div>
<div class="flex justify-between items-center">
<span class="text-primary font-bold text-xl">12 500
FCFA</span>
<button class="bg-primary text-white px-4 py-2 rounded-
button hover:bg-primary-dark transition">Réserver</button>
</div>
</div>
</div>
<!-- Destination 2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-
lg transition">
<img src="saint.jpg" alt="Dakar-Saint-Louis" class="w-full h-48
object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Dakar - Saint-Louis</h3>
<div class="flex items-center text-gray-600 mb-4">
<i class="ri-time-line mr-2"></i>
<span>3h45 de trajet</span>
</div>
<div class="flex justify-between items-center">
<span class="text-primary font-bold text-xl">8 000
FCFA</span>
<button class="bg-primary text-white px-4 py-2 rounded-
button hover:bg-primary-dark transition">Réserver</button>
</div>
</div>
</div>
<!-- Destination 3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-
lg transition">
<img src="Casa.jpg" alt="Ziguinchor-Casamance" class="w-full h-48
object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Ziguinchor -
Casamance</h3>
<div class="flex items-center text-gray-600 mb-4">
<i class="ri-time-line mr-2"></i>
<span>2h15 de trajet</span>
</div>
<div class="flex justify-between items-center">
<span class="text-primary font-bold text-xl">5 500
FCFA</span>
<button class="bg-primary text-white px-4 py-2 rounded-
button hover:bg-primary-dark transition">Réserver</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="inline-block border border-primary text-primary px-6 py-
3 rounded-button hover:bg-primary hover:text-white transition">Voir toutes les
destinations</button>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Pourquoi choisir Sene'Go ?</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Nous offrons une solution
complète pour vos déplacements au Sénégal avec des services de qualité et une
expérience client exceptionnelle.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Service 1 -->
<div class="bg-gray-50 p-6 rounded-lg text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center
justify-center mx-auto mb-4">
<i class="ri-time-line text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Réservation rapide</h3>
<p class="text-gray-600">Réservez votre billet en moins de 2
minutes. Notre interface simple et intuitive vous permet de trouver et réserver
rapidement le trajet qui vous convient.</p>
</div>
<!-- Service 2 -->
<div class="bg-gray-50 p-6 rounded-lg text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center
justify-center mx-auto mb-4">
<i class="ri-secure-payment-line text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Paiement sécurisé</h3>
<p class="text-gray-600">Effectuez vos paiements en toute sécurité
avec nos différentes options : Orange Money, Wave ou carte bancaire. Vos données
sont protégées.</p>
</div>
<!-- Service 3 -->
<div class="bg-gray-50 p-6 rounded-lg text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center
justify-center mx-auto mb-4">
<i class="ri-customer-service-2-line text-primary
text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Assistance client 24/7</h3>
<p class="text-gray-600">Notre équipe de support client est
disponible 24h/24 et 7j/7 pour répondre à vos questions et vous aider en cas de
besoin pendant votre voyage.</p>
</div>
<!-- Service 4 -->
<div class="bg-gray-50 p-6 rounded-lg text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center
justify-center mx-auto mb-4">
<i class="ri-coupon-line text-primary text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Confort garanti</h3>
<p class="text-gray-600">Voyagez confortablement dans nos bus
climatisés et bien entretenus. Nous accordons une attention particulière à votre
confort et à votre sécurité.</p>
</div>
</div>
</div>
</section>
<!-- Search Results -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="bg-white p-8 rounded-xl shadow-xl mb-8">
<h2 class="text-2xl font-bold mb-6">Résultats de recherche</h2>
<!-- Result 1 -->
<div class="border border-gray-200 rounded-lg p-6 mb-4
hover:border-primary transition">
<div class="flex flex-col md:flex-row justify-between mb-4">
<div>
<div class="flex items-center mb-2">
<i class="ri-bus-line text-primary text-xl mr-
2"></i>
<span class="font-semibold">Dakar →
Ziguinchor</span>
</div>
<div class="flex items-center text-gray-600">
<i class="ri-calendar-line mr-2"></i>
<span>15 avril 2025</span>
<span class="mx-2">•</span>
<i class="ri-time-line mr-2"></i>
<span>08:00 - 13:30</span>
</div>
</div>
<div class="mt-4 md:mt-0 flex flex-col md:flex-row items-
start md:items-center">
<span class="text-primary font-bold text-xl md:mr-4 mb-
2 md:mb-0">12 500 FCFA</span>
<button class="bg-primary text-white px-4 py-2 rounded-
button hover:bg-primary-dark transition">Sélectionner</button>
</div>
</div>
<div class="pt-4 border-t border-gray-100 flex flex-wrap gap-4
text-sm text-gray-600">
<span class="flex items-center"><i class="ri-wifi-line mr-
2"></i> WiFi gratuit</span>
<span class="flex items-center"><i class="ri-plug-line mr-
2"></i> Prises électriques</span>
<span class="flex items-center"><i class="ri-luggage-cart-
line mr-2"></i> Bagages inclus</span>
</div>
</div>
<!-- Result 2 -->
<div class="border border-gray-200 rounded-lg p-6 mb-4
hover:border-primary transition">
<div class="flex flex-col md:flex-row justify-between mb-4">
<div>
<div class="flex items-center mb-2">
<i class="ri-bus-line text-primary text-xl mr-
2"></i>
<span class="font-semibold">Dakar →
Ziguinchor</span>
</div>
<div class="flex items-center text-gray-600">
<i class="ri-calendar-line mr-2"></i>
<span>15 avril 2025</span>
<span class="mx-2">•</span>
<i class="ri-time-line mr-2"></i>
<span>10:30 - 16:00</span>
</div>
</div>
<div class="mt-4 md:mt-0 flex flex-col md:flex-row items-
start md:items-center">
<span class="text-primary font-bold text-xl md:mr-4 mb-
2 md:mb-0">11 000 FCFA</span>
<button class="bg-primary text-white px-4 py-2 rounded-
button hover:bg-primary-dark transition">Sélectionner</button>
</div>
</div>
<div class="pt-4 border-t border-gray-100 flex flex-wrap gap-4
text-sm text-gray-600">
<span class="flex items-center"><i class="ri-wifi-line mr-
2"></i> WiFi gratuit</span>
<span class="flex items-center"><i class="ri-luggage-cart-
line mr-2"></i> Bagages inclus</span>
</div>
</div>
<!-- Result 3 -->
<div class="border border-gray-200 rounded-lg p-6 hover:border-
primary transition">
<div class="flex flex-col md:flex-row justify-between mb-4">
<div>
<div class="flex items-center mb-2">
<i class="ri-bus-line text-primary text-xl mr-
2"></i>
<span class="font-semibold">Dakar →
Ziguinchor</span>
</div>
<div class="flex items-center text-gray-600">
<i class="ri-calendar-line mr-2"></i>
<span>15 avril 2025</span>
<span class="mx-2">•</span>
<i class="ri-time-line mr-2"></i>
<span>22:00 - 03:30</span>
</div>
</div>
<div class="mt-4 md:mt-0 flex flex-col md:flex-row items-
start md:items-center">
<span class="text-primary font-bold text-xl md:mr-4 mb-
2 md:mb-0">9 500 FCFA</span>
<button class="bg-primary text-white px-4 py-2 rounded-
button hover:bg-primary-dark transition">Sélectionner</button>
</div>
</div>
<div class="pt-4 border-t border-gray-100 flex flex-wrap gap-4
text-sm text-gray-600">
<span class="flex items-center"><i class="ri-moon-line mr-
2"></i> Trajet de nuit</span>
<span class="flex items-center"><i class="ri-luggage-cart-
line mr-2"></i> Bagages inclus</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Comment ça marche</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Réserver votre billet avec
Sene'Go est simple et rapide. Suivez ces étapes pour planifier votre prochain
voyage.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-5xl mx-auto">
<!-- Step 1 -->
<div class="text-center relative">
<div class="w-16 h-16 bg-primary text-white rounded-full flex
items-center justify-center mx-auto mb-4 text-2xl font-bold">1</div>
<h3 class="text-lg font-semibold mb-3">Recherchez votre trajet</h3>
<p class="text-gray-600">Sélectionnez votre point de départ, votre
destination et la date de voyage.</p>
</div>
<!-- Step 2 -->
<div class="text-center relative">
<div class="w-16 h-16 bg-primary text-white rounded-full flex
items-center justify-center mx-auto mb-4 text-2xl font-bold">2</div>
<h3 class="text-lg font-semibold mb-3">Choisissez votre
horaire</h3>
<p class="text-gray-600">Comparez les différentes options et
sélectionnez celle qui vous convient le mieux.</p>
</div>
<!-- Step 3 -->
<div class="text-center relative">
<div class="w-16 h-16 bg-primary text-white rounded-full flex
items-center justify-center mx-auto mb-4 text-2xl font-bold">3</div>
<h3 class="text-lg font-semibold mb-3">Réservez et payez</h3>
<p class="text-gray-600">Complétez votre réservation et choisissez
votre mode de paiement préféré.</p>
</div>
<!-- Step 4 -->
<div class="text-center relative">
<div class="w-16 h-16 bg-primary text-white rounded-full flex
items-center justify-center mx-auto mb-4 text-2xl font-bold">4</div>
<h3 class="text-lg font-semibold mb-3">Recevez votre billet</h3>
<p class="text-gray-600">Votre billet électronique sera envoyé par
email et SMS. Présentez-le lors de votre départ.</p>
</div>
</div>
</div>
</section>
<!-- Payment Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Paiement sécurisé</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Nous proposons plusieurs
méthodes de paiement sécurisées pour vous offrir flexibilité et tranquillité
d'esprit.</p>
</div>
<div class="max-w-3xl mx-auto">
<div class="bg-white p-8 rounded-xl shadow-xl">
<h3 class="text-xl font-semibold mb-6">Choisissez votre méthode de
paiement</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<!-- Orange Money -->
<div class="payment-option border-2 border-gray-200 rounded-lg
p-4 text-center cursor-pointer selected" data-payment="orange">
<div class="w-12 h-12 mx-auto mb-3 flex items-center
justify-center">
<i class="ri-smartphone-line text-3xl text-
[#FF6600]"></i>
</div>
<h4 class="font-medium">Orange Money</h4>
</div>
<!-- Wave -->
<div class="payment-option border-2 border-gray-200 rounded-lg
p-4 text-center cursor-pointer" data-payment="wave">
<div class="w-12 h-12 mx-auto mb-3 flex items-center
justify-center">
<i class="ri-wallet-3-line text-3xl
text-[#1DC8F3]"></i>
</div>
<h4 class="font-medium">Wave</h4>
</div>
<!-- Card -->
<div class="payment-option border-2 border-gray-200 rounded-lg
p-4 text-center cursor-pointer" data-payment="card">
<div class="w-12 h-12 mx-auto mb-3 flex items-center
justify-center">
<i class="ri-bank-card-line text-3xl
text-gray-700"></i>
</div>
<h4 class="font-medium">Carte bancaire</h4>
</div>
</div>
<!-- Orange Money Form -->
<div id="orangeForm" class="payment-form">
<div class="mb-6">
<label class="block text-sm font-medium mb-2">Numéro Orange
Money</label>
<div class="relative">
<i class="ri-smartphone-line absolute left-3 top-3
text-gray-400"></i>
<input type="tel" class="w-full pl-10 pr-4 py-3 border
rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="77
123 45 67">
</div>
</div>
</div>
<!-- Wave Form (hidden by default) -->
<div id="waveForm" class="payment-form hidden">
<div class="mb-6">
<label class="block text-sm font-medium mb-2">Numéro
Wave</label>
<div class="relative">
<i class="ri-smartphone-line absolute left-3 top-3
text-gray-400"></i>
<input type="tel" class="w-full pl-10 pr-4 py-3 border
rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="78
123 45 67">
</div>
</div>
</div>
<!-- Card Form (hidden by default) -->
<div id="cardForm" class="payment-form hidden">
<div class="mb-6">
<label class="block text-sm font-medium mb-2">Numéro de
carte</label>
<div class="relative">
<i class="ri-bank-card-line absolute left-3 top-3 text-
gray-400"></i>
<input type="text" class="w-full pl-10 pr-4 py-3 border
rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="1234
5678 9012 3456">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div>
<label class="block text-sm font-medium mb-2">Date
d'expiration</label>
<input type="text" class="w-full py-3 px-4 border
rounded-lg focus:ring-2 focus:ring-primary focus:border-primary"
placeholder="MM/AA">
</div>
<div>
<label class="block text-sm font-medium
mb-2">CVV</label>
<input type="text" class="w-full py-3 px-4 border
rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="123">
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium mb-2">Nom sur la
carte</label>
<input type="text" class="w-full py-3 px-4 border rounded-
lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="PRÉNOM NOM">
</div>
</div>
<div class="flex items-center mb-8">
<div class="custom-checkbox checked" id="termsCheckbox"></div>
<label class="ml-3 text-sm text-gray-600">J'accepte les <a
href="#" class="text-primary hover:underline">conditions générales</a> et la <a
href="#" class="text-primary hover:underline">politique de
confidentialité</a>.</label>
</div>
<button class="w-full bg-primary text-white py-4 rounded-button
font-medium hover:bg-primary-dark transition">Payer maintenant</button>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Contactez-nous</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Vous avez des questions ou
besoin d'aide ? Notre équipe est là pour vous aider.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl mx-auto">
<!-- Contact Form -->
<div class="bg-gray-50 p-8 rounded-xl shadow-md">
<h3 class="text-xl font-semibold mb-6">Envoyez-nous un message</h3>
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium mb-2">Nom
complet</label>
<input type="text" class="w-full py-3 px-4 border
rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
</div>
<div>
<label class="block text-sm font-medium
mb-2">Email</label>
<input type="email" class="w-full py-3 px-4 border
rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Sujet</label>
<select class="w-full py-3 px-4 border rounded-lg
focus:ring-2 focus:ring-primary focus:border-primary">
<option>Sélectionnez un sujet</option>
<option>Question sur ma réservation</option>
<option>Problème de paiement</option>
<option>Demande de remboursement</option>
<option>Autre</option>
</select>
</div>
<div class="mb-6">
<label class="block text-sm font-medium
mb-2">Message</label>
<textarea rows="4" class="w-full py-3 px-4 border rounded-
lg focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
</div>
<button type="submit" class="w-full bg-primary text-white py-4
rounded-button font-medium hover:bg-primary-dark transition">Envoyer le
message</button>
</form>
</div>
<!-- Contact Info -->
<div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md mb-6">
<h3 class="text-xl font-semibold mb-6">Nos coordonnées</h3>
<div class="space-y-6">
<div class="flex">
<div class="w-10 h-10 bg-primary/10 rounded-full flex
items-center justify-center mr-4">
<i class="ri-map-pin-line text-primary"></i>
</div>
<div>
<h4 class="font-medium mb-1">Adresse</h4>
<p class="text-gray-600">123 Avenue Léopold Sédar
Senghor, Ziguinchor, Sénégal</p>
</div>
</div>
<div class="flex">
<div class="w-10 h-10 bg-primary/10 rounded-full flex
items-center justify-center mr-4">
<i class="ri-phone-line text-primary"></i>
</div>
<div>
<h4 class="font-medium mb-1">Téléphone</h4>
<p class="text-gray-600">+221 78 123 45 67</p>
</div>
</div>
<div class="flex">
<div class="w-10 h-10 bg-primary/10 rounded-full flex
items-center justify-center mr-4">
<i class="ri-mail-line text-primary"></i>
</div>
<div>
<h4 class="font-medium mb-1">Email</h4>
<p class="text-gray-600">[email protected]</p>
</div>
</div>
<div class="flex">
<div class="w-10 h-10 bg-primary/10 rounded-full flex
items-center justify-center mr-4">
<i class="ri-time-line text-primary"></i>
</div>
<div>
<h4 class="font-medium mb-1">Heures
d'ouverture</h4>
<p class="text-gray-600">Lundi - Samedi: 8h00 -
19h00<br>Dimanche: 9h00 - 17h00</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-medium mb-4">Suivez-nous</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-white rounded-full flex
items-center justify-center shadow hover:bg-primary hover:text-white transition">
<i class="ri-facebook-fill"></i>
</a>
<a href="#" class="w-10 h-10 bg-white rounded-full flex
items-center justify-center shadow hover:bg-primary hover:text-white transition">
<i class="ri-twitter-x-fill"></i>
</a>
<a href="#" class="w-10 h-10 bg-white rounded-full flex
items-center justify-center shadow hover:bg-primary hover:text-white transition">
<i class="ri-instagram-line"></i>
</a>
<a href="#" class="w-10 h-10 bg-white rounded-full flex
items-center justify-center shadow hover:bg-primary hover:text-white transition">
<i class="ri-whatsapp-line"></i>
</a>
</div>
</div>
</div>
<div class="bg-gray-200 rounded-xl overflow-hidden h-64">
<!-- Map Placeholder -->
<div class="relative h-96 w-full rounded-xl overflow-hidden
border-2 border-white shadow-lg">
<!-- Conteneur de la carte -->
<div id="auto-locate-map" class="h-full w-full bg-gray-100
flex items-center justify-center">
<div class="text-center">
<i class="ri-map-pin-line text-4xl text-gray-400
animate-pulse"></i>
<p class="mt-2 text-gray-500">Chargement de votre
position...</p>
</div>
</div>
<!-- Marqueur animé -->
<div id="user-marker" class="hidden absolute z-10 -
translate-x-1/2 -translate-y-full">
<div class="relative">
<i class="ri-user-location-fill text-3xl text-primary
drop-shadow-lg"></i>
<div class="absolute -bottom-2 left-1/2 w-4 h-4 bg-
primary rounded-full animate-ping opacity-75"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-primary/5">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-6">Abonnez-vous à notre
newsletter</h2>
<p class="text-gray-600 mb-8">Recevez nos dernières offres, promotions
et actualités directement dans votre boîte mail.</p>
<form class="flex flex-col md:flex-row gap-3 max-w-lg mx-auto">
<input type="email" placeholder="Votre adresse email" class="flex-
grow py-3 px-4 border rounded-lg focus:ring-2 focus:ring-primary focus:border-
primary">
<button type="submit" class="bg-primary text-white py-3 px-6
rounded-button font-medium hover:bg-primary-dark transition">S'abonner</button>
</form>
</div>
</div>
</section>
<!-- Admin Access Modal -->
<div id="modal-admin" class="modal hidden fixed inset-0 bg-black bg-opacity-50 flex
items-center justify-center z-50 p-4"> <div class="bg-white rounded-lg shadow-xl w-
full max-w-md relative"> <button onclick="closeModal('modal-admin')"
class="absolute top-3 right-3 text-gray-500 hover:text-gray-700 transition"> <svg
xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button>
<div class="p-6">
<div class="flex justify-center mb-4">
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center
justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-
500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0
002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
</div>
<h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Accès
Administrateur</h2>
<form id="admin-login-form" class="space-y-4">
<div>
<label for="admin-email" class="block text-sm font-medium text-
gray-700 mb-1">Email Admin</label>
<input type="email" id="admin-email" required
class="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:ring-2 focus:ring-red-500 focus:border-red-500 transition">
</div>
<div>
<label for="admin-password" class="block text-sm font-medium text-
gray-700 mb-1">Mot de passe</label>
<input type="password" id="admin-password" required
class="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:ring-2 focus:ring-red-500 focus:border-red-500 transition">
</div>
<div>
<button type="submit"
class="w-full py-2 px-4 border border-transparent rounded-
md shadow-sm text-sm font-medium text-white bg-red-500 hover:bg-red-600
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition">
Accéder au Dashboard
</button>
</div>
</form>
</div>
</div>
</div> <!-- Admin Panel (hidden by default) --> <div id="admin-panel" class="hidden
fixed inset-0 bg-gray-100 z-50 overflow-y-auto"> <div class="min-h-screen"> <!--
Admin Header --> <header class="bg-white shadow-sm"> <div class="container mx-auto
px-4 py-3 flex justify-between items-center"> <div class="flex items-center">
<button onclick="toggleAdminPanel()" class="mr-4 text-gray-600 hover:text-gray-
900"> <i class="ri-close-line text-2xl"></i> </button> <span class="text-xl font-
semibold">Panel Admin Sene'Go</span> </div> <div class="flex items-center space-x-
4"> <span id="admin-greeting" class="text-sm font-medium"></span> <button
onclick="adminLogout()" class="text-sm text-red-500 hover:text-red-
700">Déconnexion</button> </div> </div> </header>
<!-- Admin Content -->
<div class="container mx-auto px-4 py-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<!-- Stats Cards -->
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-500 mb-2">Réservations
aujourd'hui</h3>
<p class="text-3xl font-bold" id="stats-bookings">0</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-500 mb-2">Utilisateurs
inscrits</h3>
<p class="text-3xl font-bold" id="stats-users">0</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-500 mb-2">Revenu ce
mois</h3>
<p class="text-3xl font-bold" id="stats-revenue">0 FCFA</p>
</div>
</div>
<!-- Recent Bookings -->
<div class="bg-white p-6 rounded-lg shadow mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Réservations récentes</h2>
<button class="text-sm text-orange-500 hover:text-orange-700">Voir
tout</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider">ID</th>
<th class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider">Client</th>
<th class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider">Trajet</th>
<th class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider">Prix</th>
<th class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider">Statut</th>
</tr>
</thead>
<tbody id="recent-bookings" class="bg-white divide-y divide-
gray-200">
<!-- Will be populated by JavaScript -->
</tbody>
</table>
</div>
</div>
<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<button onclick="showSection('manage-routes')" class="bg-white p-4
rounded-lg shadow text-center hover:bg-gray-50 transition">
<i class="ri-map-2-line text-2xl text-orange-500 mb-2"></i>
<h3 class="font-medium">Gérer les trajets</h3>
</button>
<button onclick="showSection('manage-vehicles')" class="bg-white p-4
rounded-lg shadow text-center hover:bg-gray-50 transition">
<i class="ri-bus-line text-2xl text-orange-500 mb-2"></i>
<h3 class="font-medium">Gérer les véhicules</h3>
</button>
<button onclick="showSection('manage-users')" class="bg-white p-4
rounded-lg shadow text-center hover:bg-gray-50 transition">
<i class="ri-user-line text-2xl text-orange-500 mb-2"></i>
<h3 class="font-medium">Gérer les utilisateurs</h3>
</button>
<button onclick="showSection('settings')" class="bg-white p-4 rounded-
lg shadow text-center hover:bg-gray-50 transition">
<i class="ri-settings-line text-2xl text-orange-500 mb-2"></i>
<h3 class="font-medium">Paramètres</h3>
</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
<!-- About -->
<div>
<a href="#" class="text-2xl font-pacifico mb-4 inline-
block">Sene'Go</a>
<p class="text-gray-400 mb-6">Votre partenaire de confiance pour
voyager à travers le Sénégal. Réservez facilement vos billets de transport en
ligne.</p>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex
items-center justify-center hover:bg-primary transition">
<i class="ri-facebook-fill"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex
items-center justify-center hover:bg-primary transition">
<i class="ri-twitter-x-fill"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex
items-center justify-center hover:bg-primary transition">
<i class="ri-instagram-line"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex
items-center justify-center hover:bg-primary transition">
<i class="ri-whatsapp-line"></i>
</a>
</div>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-lg font-semibold mb-4">Liens rapides</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white
transition">Accueil</a></li>
<li><a href="#reservation" class="text-gray-400 hover:text-
white transition">Réservation</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white
transition">Services</a></li>
<li><a href="#" class="text-gray-400 hover:text-white
transition">À propos de nous</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white
transition">Contact</a></li>
</ul>
</div>
<!-- Useful Links -->
<div>
<h3 class="text-lg font-semibold mb-4">Liens utiles</h3>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white
transition">Conditions de transport</a></li>
<li><a href="#" class="text-gray-400 hover:text-white
transition">Guide du voyageur</a></li>
<li><a href="#" class="text-gray-400 hover:text-white
transition">FAQ</a></li>
<li><a href="#" class="text-gray-400 hover:text-white
transition">Blog voyage</a></li>
<li><a href="#" class="text-gray-400 hover:text-white
transition">Actualités</a></li>
</ul>
</div>
<!-- Contact Info -->
<div>
<h3 class="text-lg font-semibold mb-4">Nous contacter</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="ri-map-pin-line text-primary mr-2 mt-1"></i>
<span class="text-gray-400">123 Avenue Léopold Sédar
Senghor, Ziguinchor, Sénégal</span>
</li>
<li class="flex items-center">
<i class="ri-phone-line text-primary mr-2"></i>
<span class="text-gray-400">+221 78 123 45 67</span>
</li>
<li class="flex items-center">
<i class="ri-mail-line text-primary mr-2"></i>
<span class="text-gray-400">[email protected]</span>
</li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-800">
<div class="flex flex-wrap justify-center gap-6 mb-6">
<div class="flex items-center">
<i class="ri-visa-fill text-2xl mr-2"></i>
<span class="text-gray-400">Visa</span>
</div>
<div class="flex items-center">
<i class="ri-mastercard-fill text-2xl mr-2"></i>
<span class="text-gray-400">Mastercard</span>
</div>
<div class="flex items-center">
<i class="ri-paypal-fill text-2xl mr-2"></i>
<span class="text-gray-400">PayPal</span>
</div>
<div class="flex items-center">
<i class="ri-smartphone-fill text-2xl mr-2"></i>
<span class="text-gray-400">Orange Money</span>
</div>
<div class="flex items-center">
<i class="ri-wallet-3-fill text-2xl mr-2"></i>
<span class="text-gray-400">Wave</span>
</div>
</div>
<p class="text-center text-gray-400">© 2025 Sene'Go. Tous droits
réservés.</p>
<div class="flex flex-wrap justify-center gap-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white text-sm
transition">Conditions générales</a>
<a href="#" class="text-gray-400 hover:text-white text-sm
transition">Politique de confidentialité</a>
<a href="#" class="text-gray-400 hover:text-white text-sm
transition">Cookies</a>
<a href="#" class="text-gray-400 hover:text-white text-sm
transition">FAQ</a>
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="scrip.js"></script>
</body> </html>) , son css (/* ===== COULEURS GLOBALES ===== */ :root { /* Palette
principale */ --orange: #FF6B00; --orange-dark: #E05E00; --orange-light: #FFF5EE;
--green: #2E8B57; --black: #1E1E1E; --gray: #6B7280; --gray-light: #F3F4F6; --
white: #FFFFFF;
/* Palette principal mais change les couleur
<! --orange: #c73328; /* Orange principal / /--orange-dark: #b52a1f; /* Orange
foncé / /--orange-light: #f8d7d5; /* Orange clair / /--green: #2E8B57; /*
Vert / /--black: #1E1E1E; /* Noir / /--gray: #6B7280; /* Gris / / --gray-light:
#F3F4F6; /* Gris clair / / --white: #FFFFFF; /* Blanc / /--yellow: #FFEB3B; /*
Jaune / /--yellow-light: #FFF9C4; /* Jaune clair / /--yellow-dark: #FBC02D; /*
Jaune foncé / / --red: #F44336; /* Rouge / / --red-light: #FFCDD2; Rouge clair */
/*===== APPLICATION DES COULEURS pour toute la page ===== */
body {
font-family: 'Arial', sans-serif;
background-color: var(--yellow-light);
color: var(--black);
margin: 0;
padding: 0;
padding-top: 70px; /* Ajustez cette valeur selon la hauteur de votre header */
}
/* ===== APPLICATION DES COULEURS ===== */
/* 1. En-tête */ header { background: var(--white); box-shadow: 0 2px 10px
rgba(0,0,0,0.1); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
background-color: white; transition: all 0.3s ease; }
.logo { color: var(--orange); }
.nav-link { color: var(--black); } .nav-link:hover { color: var(--orange); }
/* 2. Héros */ .hero { background: linear-gradient(rgba(0,0,0,0.6), url('hero-
bg.jpg')); color: var(--white); }
/* 3. Boutons */ .btn-primary { background: var(--orange); color: var(--white);
padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 1rem;
border: none; cursor: pointer; transition: all 0.3s ease; position: relative;
overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: inline-flex;
align-items: center; justify-content: center; gap: 0.5rem; }
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 3px
rgba(0,0,0,0.1); }
.btn-primary::after { content: ""; position: absolute; top: 0; left: 0; width:
100%; height: 100%; background: linear-gradient(rgba(255,255,255,0.1),
rgba(255,255,255,0)); opacity: 0; transition: opacity 0.3s; }
.btn-primary:hover::after { opacity: 1; }
/* Optionnel : Ajouter une icône */ .btn-primary i { font-size: 1.2rem; }
.btn-secondary { border: 1px solid var(--orange); color: var(--orange); } .btn-
secondary:hover { background: var(--orange); color: var(--white); }
/* 4. Cartes de destinations */ .destination-card { background: var(--white);
border: 1px solid var(--gray-light); } .destination-card:hover { border-color:
var(--orange); }
.price { color: var(--orange); }
/* 5. Section services */ .service-card { background: var(--orange-
light); } .service-icon { color: var(--orange); }
/* 6. Formulaire */ input, select { border: 1px solid var(--gray); } input:focus
{ border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-light); }
/* 7. Pied de page */ footer { background: var(--black); color: var(--
white); } .footer-link { color: var(--gray); } .footer-link:hover { color: var(--
white); }
/* 8. Éléments interactifs */ .checkbox:checked { background: var(--orange);
border-color: var(--orange); }
.payment-method.selected { border-color: var(--orange); background: var(--orange-
light); }
/* 9. Texte */ .text-primary { color: var(--orange); } .text-secondary { color:
var(--green); } .text-muted { color: var(--gray); }
/* 10. Arrière-plans / .bg-light { background: var(--gray-light); } / Navigation
principale */ .senego-nav { display: flex; gap: 1.25rem; padding: 0.5rem 0; }
.senego-nav-link { display: inline-flex; align-items: center; gap: 0.5rem; padding:
0.75rem 1.25rem; color: #4b5563; /* gray-600 */ font-weight: 500; text-decoration:
none; border-radius: 0.375rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; }
.senego-nav-link:hover { color: #ff6b00; /* orange / background-color: #fff5ee; /
orange-50 */ transform: translateY(-1px); }
.senego-nav-link.active { color: #ff6b00; /* orange */ font-weight: 600; }
/* Animation de soulignement / .senego-nav-link.active::after { content: '';
position: absolute; bottom: -3px; left: 1.25rem; right: 1.25rem; height: 2px;
background: #ff6b00; / orange */ border-radius: 2px; animation: senego-underline
0.3s ease-out; }
/* Effets icônes */ .senego-nav-link i { transition: transform 0.2s ease; }
.senego-nav-link:hover i { transform: scale(1.1); }
@keyframes senego-underline { from { transform: scaleX(0); } to { transform:
scaleX(1); } } /* Animation du marqueur */ @keyframes pulse { 0% { transform:
scale(1); opacity: 1; } 70% { transform: scale(1.5); opacity: 0.7; } 100%
{ transform: scale(1); opacity: 1; } }
.user-location-marker i { animation: pulse 2s infinite; }
.senego-location-marker { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
/* Style de la carte */ .leaflet-container { background-color: #f3f4f6 !important;
transition: all 0.3s ease; }
.leaflet-popup-content { min-width: 150px; font-family: 'Poppins', sans-serif; }
@media (max-width: 768px) { body.menu-open { overflow: hidden; } }) , son script.js
(document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); const mobileMenu =
document.getElementById('mobileMenu');
if (mobileMenuBtn && mobileMenu) {
mobileMenuBtn.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
mobileMenuBtn.innerHTML = mobileMenu.classList.contains('hidden') ?
'<i class="ri-menu-line"></i>' : '<i class="ri-close-line"></i>';
});
}
// Payment Method Selection
const paymentOptions = document.querySelectorAll('.payment-option');
const paymentForms = document.querySelectorAll('.payment-form');
if (paymentOptions.length > 0 && paymentForms.length > 0) {
paymentOptions.forEach(option => {
option.addEventListener('click', function() {
// Remove selected class from all options
paymentOptions.forEach(opt => {
opt.classList.remove('selected');
});
// Add selected class to clicked option
this.classList.add('selected');
// Hide all payment forms
paymentForms.forEach(form => {
form.classList.add('hidden');
});
// Show the selected payment form
const paymentType = this.getAttribute('data-payment');
document.getElementById(`$
{paymentType}Form`).classList.remove('hidden');
});
});
// Select first payment option by default
paymentOptions[0].click();
}
// Terms Checkbox Toggle
const termsCheckbox = document.getElementById('termsCheckbox');
if (termsCheckbox) {
termsCheckbox.addEventListener('click', function() {
this.classList.toggle('checked');
});
}
// Round Trip Switch
const roundTripSwitch = document.getElementById('roundTripSwitch');
const returnDateContainer = document.getElementById('returnDateContainer');
if (roundTripSwitch && returnDateContainer) {
roundTripSwitch.addEventListener('click', function() {
this.classList.toggle('active');
returnDateContainer.classList.toggle('hidden');
});
}
// Smooth Scrolling for Anchor Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Initialisation de la carte avec géolocalisation function initAutoLocateMap()
{ const mapContainer = document.getElementById('auto-locate-map');
// Options par défaut (Dakar si la géoloc échoue)
let defaultPosition = [14.7167, -17.4677];
let zoomLevel = 12;
// Créer la carte
const map = L.map('auto-locate-map').setView(defaultPosition, zoomLevel);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// Style du marqueur
const userIcon = L.divIcon({
className: 'user-location-marker',
html: '<i class="ri-user-location-fill text-3xl text-primary
drop-shadow-lg"></i>',
iconSize: [32, 32],
iconAnchor: [16, 32]
});
// Essayer la géolocalisation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const userPos = [position.coords.latitude, position.coords.longitude];
map.setView(userPos, 15);
// Ajouter marqueur utilisateur
L.marker(userPos, {
icon: userIcon,
zIndexOffset: 1000
}).addTo(map)
.bindPopup("Vous êtes ici")
.openPopup();
// Ajouter marqueur Sene'Go (exemple)
L.marker([14.7167, -17.4677], {
icon: L.divIcon({
html: '<div class="bg-primary text-white p-1 rounded-full border-2
border-white"><i class="ri-bus-fill text-xl"></i></div>',
className: 'senego-location-marker',
iconSize: [32, 32]
})
}).addTo(map)
.bindPopup("<b>Sene'Go Dakar</b><br>Agence principale");
},
(error) => {
console.error("Erreur de géolocalisation:", error);
// Position par défaut si échec
L.marker(defaultPosition, { icon: userIcon })
.addTo(map)
.bindPopup("Position par défaut (Dakar)")
.openPopup();
}
);
} else {
alert("La géolocalisation n'est pas supportée par votre navigateur");
L.marker(defaultPosition, { icon: userIcon })
.addTo(map)
.bindPopup("Position par défaut")
.openPopup();
}
}
// Appeler après chargement document.addEventListener('DOMContentLoaded',
initAutoLocateMap);
// Dans votre fichier script.js window.addEventListener('scroll', function()
{ const header = document.querySelector('header'); if (window.scrollY > 50)
{ header.style.py = '0.5rem'; // Réduit le padding header.style.boxShadow = '0 2px
5px rgba(0,0,0,0.1)'; } else { header.style.py = '0.75rem'; // Retour au padding
original header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)'; } });
// Admin Credentials (à remplacer par des identifiants sécurisés en production)
const ADMIN_CREDENTIALS = { email: "[email protected]", password:
"Moustapha@6" // À changer en production };
// Admin Functions function openAdminModal() { openModal('modal-admin'); }
function toggleAdminPanel() { const panel = document.getElementById('admin-panel');
panel.classList.toggle('hidden'); document.body.classList.toggle('overflow-
hidden'); }
function adminLogin(event) { event.preventDefault();
const email = document.getElementById('admin-email').value; const password =
document.getElementById('admin-password').value;
if (email === ADMIN_CREDENTIALS.email && password === ADMIN_CREDENTIALS.password) {
closeModal('modal-admin'); toggleAdminPanel();
// Update admin UI
document.getElementById('admin-greeting').textContent = `Connecté en tant que $
{email}`;
// Load admin data (simulation)
loadAdminData();
// Store session
localStorage.setItem('adminLoggedIn', 'true');
} else { alert('Identifiants administrateur incorrects !'); } }
function adminLogout() { toggleAdminPanel();
localStorage.removeItem('adminLoggedIn'); }
function loadAdminData() { // Simulated data - in a real app, you would fetch this
from your backend document.getElementById('stats-bookings').textContent = '24';
document.getElementById('stats-users').textContent = '153';
document.getElementById('stats-revenue').textContent = '1 245 000 FCFA';
// Recent bookings const bookings = [ { id: 'BK-1001', client: 'Moussa Diop',
trajet: 'Dakar - Ziguinchor', date: '15/04/2025', prix: '12 500 FCFA', statut:
'Confirmé' }, { id: 'BK-1002', client: 'Aminata Ndiaye', trajet: 'Dakar - Saint-
Louis', date: '15/04/2025', prix: '8 000 FCFA', statut: 'Confirmé' }, { id: 'BK-
1003', client: 'Papa Fall', trajet: 'Ziguinchor - Casamance', date: '14/04/2025',
prix: '5 500 FCFA', statut: 'En attente' }, { id: 'BK-1004', client: 'Fatou Bâ',
trajet: 'Dakar - Thiès', date: '14/04/2025', prix: '3 500 FCFA', statut: 'Annulé' }
];
const bookingsTable = document.getElementById('recent-bookings');
bookingsTable.innerHTML = '';
bookings.forEach(booking => { const row = document.createElement('tr');
row.innerHTML = <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-
gray-900">${booking.id}</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-
gray-500">${booking.client}</td> <td class="px-6 py-4 whitespace-nowrap text-sm
text-gray-500">${booking.trajet}</td> <td class="px-6 py-4 whitespace-nowrap text-
sm text-gray-500">${booking.date}</td> <td class="px-6 py-4 whitespace-nowrap text-
sm text-gray-500">${booking.prix}</td> <td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full $
{booking.statut === 'Confirmé' ? 'bg-green-100 text-green-800' : booking.statut ===
'En attente' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'}"> $
{booking.statut} </span> </td> ; bookingsTable.appendChild(row); }); }
function showSection(sectionId) { alert(Section ${sectionId} sera affichée ici.
Dans une application réelle, cela chargerait une vue différente.); }
// Check if admin is already logged in if (localStorage.getItem('adminLoggedIn')
=== 'true') { toggleAdminPanel(); loadAdminData(); }
// Event Listeners document.addEventListener('DOMContentLoaded', function() { //
Add admin login button (you can place this wherever you want) const adminLoginBtn =
document.createElement('button'); adminLoginBtn.textContent = 'Admin';
adminLoginBtn.className = 'text-sm text-gray-600 hover:text-gray-900 ml-4';
adminLoginBtn.onclick = openAdminModal;
// Add it to the header (adjust selector as needed) const headerActions =
document.querySelector('header .flex.items-center.space-x-4'); if (headerActions) {
headerActions.appendChild(adminLoginBtn); }
// Admin form submission const adminForm = document.getElementById('admin-login-
form'); if (adminForm) { adminForm.addEventListener('submit', adminLogin); } });
}); )
