Hugging Face's logo

Spaces:
jkind
/
medibook
Running

App Files Community
medibook / index.html
jkind's picture
jkind
Add 3 files
9bb0b82 verified
raw
history blame contribute delete
44.8 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>MediBook - Votre solution de rendez-vous médicaux</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 /* Custom CSS for elements that need more precise styling */
 .calendar-day {
 transition: all 0.2s ease;
 }
 .calendar-day:hover:not(.disabled) {
 background-color: #3b82f6;
 color: white;
 cursor: pointer;
 }
 .calendar-day.selected {
 background-color: #3b82f6;
 color: white;
 }
 .time-slot:hover {
 background-color: #3b82f6;
 color: white;
 cursor: pointer;
 }
 .time-slot.selected {
 background-color: #3b82f6;
 color: white;
 }
 .doctor-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 #searchResults {
 max-height: 400px;
 overflow-y: auto;
 }
 .nav-link.active {
 border-bottom: 3px solid #3b82f6;
 color: #3b82f6;
 }
 .dropdown:hover .dropdown-menu {
 display: block;
 }
 .tab-content {
 display: none;
 }
 .tab-content.active {
 display: block;
 }
 .fade-in {
 animation: fadeIn 0.3s ease-in;
 }
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
 </style>
</head>
<body class="font-sans bg-gray-50">
 <!-- Header -->
 <header class="bg-white shadow-sm sticky top-0 z-50">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-8">
 <a href="#" class="text-2xl font-bold text-blue-600">MediBook</a>
 <nav class="hidden md:flex space-x-6">
 <a href="#" class="nav-link active py-2 px-1">Trouver un médecin</a>
 <a href="#" class="nav-link py-2 px-1">Prendre RDV</a>
 <a href="#" class="nav-link py-2 px-1">Téléconsultation</a>
 <div class="dropdown relative">
 <button class="nav-link py-2 px-1 flex items-center">
 Professionnels <i class="fas fa-chevron-down ml-1 text-xs"></i>
 </button>
 <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-1 py-1 w-48">
 <a href="#" class="block px-4 py-2 hover:bg-blue-50">Espace professionnel</a>
 <a href="#" class="block px-4 py-2 hover:bg-blue-50">Devenir partenaire</a>
 <a href="#" class="block px-4 py-2 hover:bg-blue-50">Solutions pour cliniques</a>
 </div>
 </div>
 </nav>
 </div>
 <div class="flex items-center space-x-4">
 <button class="hidden md:block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
 Se connecter
 </button>
 <button class="md:hidden text-gray-600">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Hero Section -->
 <section class="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-16">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-8 md:mb-0">
 <h1 class="text-4xl md:text-5xl font-bold mb-4">Prenez rendez-vous avec votre médecin en ligne</h1>
 <p class="text-xl mb-8">Trouvez un professionnel de santé disponible près de chez vous et réservez votre consultation en quelques clics.</p>
 <div class="flex flex-col sm:flex-row gap-4">
 <button class="bg-white text-blue-600 px-6 py-3 rounded-md font-semibold hover:bg-blue-50 transition">
 Trouver un médecin
 </button>
 <button class="bg-transparent border-2 border-white px-6 py-3 rounded-md font-semibold hover:bg-blue-600 transition">
 En savoir plus
 </button>
 </div>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <img src="https://via.placeholder.com/500x350" alt="Doctor consultation" class="rounded-lg shadow-xl">
 </div>
 </div>
 </div>
 </section>
<!-- Search Section -->
 <section class="container mx-auto px-4 py-8 -mt-12 relative z-10">
 <div class="bg-white rounded-xl shadow-lg p-6">
 <div class="flex flex-col md:flex-row gap-4">
 <div class="flex-1 relative">
 <input type="text" id="searchInput" placeholder="Spécialité, médecin, établissement..."
class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-search absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
 <div id="searchResults" class="absolute left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg hidden">
 <!-- Search results will be populated here by JavaScript -->
 </div>
 </div>
 <div class="flex-1 relative">
 <input type="text" id="locationInput" placeholder="Ville, code postal ou adresse"
class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-map-marker-alt absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
 </div>
 <button class="bg-blue-600 text-white px-6 py-4 rounded-lg font-semibold hover:bg-blue-700 transition whitespace-nowrap">
 <i class="fas fa-search mr-2"></i> Rechercher
 </button>
 </div>
 <div class="mt-4 flex flex-wrap gap-2">
 <span class="text-sm font-medium">Recherches fréquentes :</span>
 <a href="#" class="text-sm text-blue-600 hover:underline">Médecin généraliste</a>
 <span class="text-gray-400">•</span>
 <a href="#" class="text-sm text-blue-600 hover:underline">Dentiste</a>
 <span class="text-gray-400">•</span>
 <a href="#" class="text-sm text-blue-600 hover:underline">Dermatologue</a>
 <span class="text-gray-400">•</span>
 <a href="#" class="text-sm text-blue-600 hover:underline">Ophtalmologue</a>
 </div>
 </div>
 </section>
<!-- Specialties Section -->
 <section class="container mx-auto px-4 py-12">
 <h2 class="text-3xl font-bold mb-8 text-center">Spécialités médicales</h2>
 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
 <i class="fas fa-user-md text-blue-600 text-2xl"></i>
 </div>
 <span class="font-medium">Médecin généraliste</span>
 </a>
 <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
 <i class="fas fa-tooth text-blue-600 text-2xl"></i>
 </div>
 <span class="font-medium">Dentiste</span>
 </a>
 <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
 <i class="fas fa-eye text-blue-600 text-2xl"></i>
 </div>
 <span class="font-medium">Ophtalmologue</span>
 </a>
 <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
 <i class="fas fa-heart text-blue-600 text-2xl"></i>
 </div>
 <span class="font-medium">Cardiologue</span>
 </a>
 <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
 <i class="fas fa-brain text-blue-600 text-2xl"></i>
 </div>
 <span class="font-medium">Psychiatre</span>
 </a>
 <a href="#" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
 <i class="fas fa-bone text-blue-600 text-2xl"></i>
 </div>
 <span class="font-medium">Rhumatologue</span>
 </a>
 </div>
 <div class="text-center mt-8">
 <a href="#" class="text-blue-600 font-medium hover:underline">Voir toutes les spécialités <i class="fas fa-chevron-right ml-1"></i></a>
 </div>
 </section>
<!-- How It Works Section -->
 <section class="bg-gray-100 py-12">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold mb-12 text-center">Comment ça marche</h2>
 <div class="grid md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-lg shadow-sm text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <span class="text-blue-600 font-bold text-2xl">1</span>
 </div>
 <h3 class="text-xl font-semibold mb-2">Trouvez votre médecin</h3>
 <p class="text-gray-600">Recherchez par spécialité, localisation ou nom de médecin parmi nos 300 000 professionnels de santé.</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-sm text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <span class="text-blue-600 font-bold text-2xl">2</span>
 </div>
 <h3 class="text-xl font-semibold mb-2">Choisissez un créneau</h3>
 <p class="text-gray-600">Consultez les disponibilités en temps réel et sélectionnez le créneau qui vous convient.</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-sm text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <span class="text-blue-600 font-bold text-2xl">3</span>
 </div>
 <h3 class="text-xl font-semibold mb-2">Confirmez votre RDV</h3>
 <p class="text-gray-600">Recevez une confirmation par email et SMS avec des rappels automatiques avant votre consultation.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Doctors Section -->
 <section class="container mx-auto px-4 py-12">
 <div class="flex justify-between items-center mb-8">
 <h2 class="text-3xl font-bold">Médecins disponibles près de chez vous</h2>
 <a href="#" class="text-blue-600 font-medium hover:underline">Voir plus <i class="fas fa-chevron-right ml-1"></i></a>
 </div>
 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="doctorsContainer">
 <!-- Doctors will be populated here by JavaScript -->
 </div>
 </section>
<!-- Booking Modal (hidden by default) -->
 <div id="bookingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-2xl font-bold">Prendre rendez-vous</h3>
 <button id="closeModal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times text-xl"></i>
 </button>
 </div>
<div class="flex flex-col md:flex-row gap-6">
 <!-- Doctor Info -->
 <div class="md:w-1/3">
 <div class="bg-gray-100 p-4 rounded-lg mb-4">
 <div class="flex items-center mb-4">
 <img src="https://via.placeholder.com/80" alt="Doctor" class="w-16 h-16 rounded-full mr-4">
 <div>
 <h4 class="font-bold" id="modalDoctorName">Dr. Jean Dupont</h4>
 <p class="text-gray-600 text-sm" id="modalDoctorSpecialty">Médecin généraliste</p>
 </div>
 </div>
 <div class="flex items-center text-sm mb-2">
 <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i>
 <span id="modalDoctorAddress">15 Rue de la Paix, 75002 Paris</span>
 </div>
 <div class="flex items-center text-sm">
 <i class="fas fa-euro-sign text-gray-500 mr-2"></i>
 <span id="modalDoctorPrice">25€ (non remboursé)</span>
 </div>
 </div>
<div class="bg-blue-50 p-4 rounded-lg">
 <h4 class="font-bold mb-2">Motif de consultation</h4>
 <select class="w-full p-2 border border-gray-300 rounded mb-2">
 <option>Consultation générale</option>
 <option>Certificat médical</option>
 <option>Renouvellement ordonnance</option>
 <option>Autre motif</option>
 </select>
 <p class="text-sm text-gray-600">Durée estimée : 30 minutes</p>
 </div>
 </div>
<!-- Calendar and Time Selection -->
 <div class="md:w-2/3">
 <div class="mb-6">
 <h4 class="font-bold mb-4">Choisissez une date</h4>
 <div class="flex justify-between mb-4">
 <button id="prevMonth" class="text-blue-600"><i class="fas fa-chevron-left"></i></button>
 <h5 class="font-semibold" id="currentMonth">Juillet 2023</h5>
 <button id="nextMonth" class="text-blue-600"><i class="fas fa-chevron-right"></i></button>
 </div>
 <div class="grid grid-cols-7 gap-2 mb-2">
 <div class="text-center text-sm font-medium text-gray-500">Lun</div>
 <div class="text-center text-sm font-medium text-gray-500">Mar</div>
 <div class="text-center text-sm font-medium text-gray-500">Mer</div>
 <div class="text-center text-sm font-medium text-gray-500">Jeu</div>
 <div class="text-center text-sm font-medium text-gray-500">Ven</div>
 <div class="text-center text-sm font-medium text-gray-500">Sam</div>
 <div class="text-center text-sm font-medium text-gray-500">Dim</div>
 </div>
 <div class="grid grid-cols-7 gap-2" id="calendarDays">
 <!-- Calendar days will be populated by JavaScript -->
 </div>
 </div>
<div id="timeSlotsSection" class="hidden">
 <h4 class="font-bold mb-4">Choisissez un horaire</h4>
 <div class="grid grid-cols-2 md:grid-cols-3 gap-2" id="timeSlots">
 <!-- Time slots will be populated by JavaScript -->
 </div>
 </div>
 </div>
 </div>
<div class="mt-6 pt-6 border-t border-gray-200 flex justify-end">
 <button id="confirmBooking" class="bg-blue-600 text-white px-6 py-2 rounded-md font-semibold hover:bg-blue-700 transition hidden">
 Confirmer le rendez-vous
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Testimonials Section -->
 <section class="bg-blue-50 py-12">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold mb-8 text-center">Ce que nos patients disent</h2>
 <div class="grid md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-lg shadow-sm">
 <div class="flex items-center mb-4">
 <div class="flex items-center mr-4">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 </div>
 <span class="text-sm text-gray-500">12 juillet 2023</span>
 </div>
 <p class="text-gray-700 mb-4">"Très pratique pour prendre rendez-vous rapidement avec mon médecin traitant. Les rappels par SMS sont très utiles."</p>
 <div class="flex items-center">
 <img src="https://via.placeholder.com/40" alt="Patient" class="w-8 h-8 rounded-full mr-2">
 <span class="font-medium">Marie L.</span>
 </div>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-sm">
 <div class="flex items-center mb-4">
 <div class="flex items-center mr-4">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star-half-alt text-yellow-400"></i>
 </div>
 <span class="text-sm text-gray-500">5 juillet 2023</span>
 </div>
 <p class="text-gray-700 mb-4">"J'ai trouvé un dentiste disponible le week-end grâce à MediBook. La prise de rendez-vous est très simple et intuitive."</p>
 <div class="flex items-center">
 <img src="https://via.placeholder.com/40" alt="Patient" class="w-8 h-8 rounded-full mr-2">
 <span class="font-medium">Pierre D.</span>
 </div>
 </div>
 <div class="bg-white p-6 rounded-lg shadow-sm">
 <div class="flex items-center mb-4">
 <div class="flex items-center mr-4">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 </div>
 <span class="text-sm text-gray-500">28 juin 2023</span>
 </div>
 <p class="text-gray-700 mb-4">"En tant que professionnel de santé, MediBook m'a permis d'optimiser mon agenda et de réduire considérablement les rendez-vous manqués."</p>
 <div class="flex items-center">
 <img src="https://via.placeholder.com/40" alt="Patient" class="w-8 h-8 rounded-full mr-2">
 <span class="font-medium">Dr. Sophie M.</span>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- App Download Section -->
 <section class="container mx-auto px-4 py-12">
 <div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white rounded-xl p-8 md:p-12">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-8 md:mb-0">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">Téléchargez notre application mobile</h2>
 <p class="text-lg mb-6">Prenez rendez-vous avec votre médecin où que vous soyez et gérez vos consultations en quelques clics.</p>
 <div class="flex flex-col sm:flex-row gap-4">
 <a href="#" class="bg-black text-white px-6 py-3 rounded-md font-semibold hover:bg-gray-800 transition flex items-center justify-center">
 <i class="fab fa-apple text-2xl mr-2"></i>
 <div class="text-left">
 <div class="text-xs">Disponible sur</div>
 <div class="text-lg">App Store</div>
 </div>
 </a>
 <a href="#" class="bg-black text-white px-6 py-3 rounded-md font-semibold hover:bg-gray-800 transition flex items-center justify-center">
 <i class="fab fa-google-play text-2xl mr-2"></i>
 <div class="text-left">
 <div class="text-xs">Disponible sur</div>
 <div class="text-lg">Google Play</div>
 </div>
 </a>
 </div>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <img src="https://via.placeholder.com/300x400" alt="Mobile App" class="rounded-lg shadow-xl">
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-900 text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
 <div class="col-span-2">
 <h3 class="text-2xl font-bold mb-4">MediBook</h3>
 <p class="text-gray-400 mb-4">La solution de prise de rendez-vous médicaux en ligne la plus utilisée en France.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
 </div>
 </div>
 <div>
 <h4 class="font-bold mb-4 text-lg">Patients</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white">Trouver un médecin</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Prendre RDV</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Téléconsultation</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Mon compte</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Aide</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-bold mb-4 text-lg">Professionnels</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white">Espace pro</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Devenir partenaire</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Solutions pour cliniques</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Tarifs</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Formation</a></li>
 </ul>
 </div>
 <div>
 <h4 class="font-bold mb-4 text-lg">Entreprise</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
 </ul>
 </div>
 </div>
 <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
 <div class="text-gray-400 text-sm mb-4 md:mb-0">
 © 2023 MediBook. Tous droits réservés.
 </div>
 <div class="flex space-x-6">
 <a href="#" class="text-gray-400 hover:text-white text-sm">Mentions légales</a>
 <a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a>
 <a href="#" class="text-gray-400 hover:text-white text-sm">Conditions générales</a>
 <a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a>
 </div>
 </div>
 </div>
 </footer>
<script>
 // Sample data for doctors
 const doctors = [
 {
 id: 1,
 name: "Dr. Jean Dupont",
 specialty: "Médecin généraliste",
 address: "15 Rue de la Paix, 75002 Paris",
 distance: "0.5 km",
 price: "25€ (non remboursé)",
 rating: 4.8,
 reviews: 124,
 availableToday: true,
 image: "https://via.placeholder.com/100"
 },
 {
 id: 2,
 name: "Dr. Sophie Martin",
 specialty: "Dermatologue",
 address: "22 Avenue des Champs-Élysées, 75008 Paris",
 distance: "1.2 km",
 price: "50€ (remboursé à 70%)",
 rating: 4.9,
 reviews: 87,
 availableToday: false,
 image: "https://via.placeholder.com/100"
 },
 {
 id: 3,
 name: "Dr. Pierre Lambert",
 specialty: "Dentiste",
 address: "8 Boulevard Saint-Germain, 75005 Paris",
 distance: "0.8 km",
 price: "30€ (remboursé à 70%)",
 rating: 4.7,
 reviews: 56,
 availableToday: true,
 image: "https://via.placeholder.com/100"
 },
 {
 id: 4,
 name: "Dr. Claire Dubois",
 specialty: "Ophtalmologue",
 address: "5 Rue de Rivoli, 75004 Paris",
 distance: "1.5 km",
 price: "45€ (remboursé à 60%)",
 rating: 4.6,
 reviews: 42,
 availableToday: true,
 image: "https://via.placeholder.com/100"
 },
 {
 id: 5,
 name: "Dr. Antoine Leroy",
 specialty: "Cardiologue",
 address: "12 Rue de Sèvres, 75006 Paris",
 distance: "2.1 km",
 price: "60€ (remboursé à 70%)",
 rating: 4.9,
 reviews: 103,
 availableToday: false,
 image: "https://via.placeholder.com/100"
 },
 {
 id: 6,
 name: "Dr. Élise Petit",
 specialty: "Pédiatre",
 address: "18 Rue du Faubourg Saint-Honoré, 75008 Paris",
 distance: "1.8 km",
 price: "35€ (remboursé à 80%)",
 rating: 4.8,
 reviews: 76,
 availableToday: true,
 image: "https://via.placeholder.com/100"
 }
 ];
 // Sample data for specialties
 const specialties = [
 "Médecin généraliste", "Dentiste", "Dermatologue", "Ophtalmologue",
"Cardiologue", "Gynécologue", "Pédiatre", "Psychiatre",
"ORL", "Rhumatologue", "Urologue", "Chirurgien"
 ];
 // Sample data for locations
 const locations = [
 "Paris", "Lyon", "Marseille", "Toulouse", "Nice",
"Nantes", "Strasbourg", "Montpellier", "Bordeaux", "Lille"
 ];
 // DOM Elements
 const searchInput = document.getElementById('searchInput');
 const locationInput = document.getElementById('locationInput');
 const searchResults = document.getElementById('searchResults');
 const doctorsContainer = document.getElementById('doctorsContainer');
 const bookingModal = document.getElementById('bookingModal');
 const closeModal = document.getElementById('closeModal');
 const currentMonth = document.getElementById('currentMonth');
 const calendarDays = document.getElementById('calendarDays');
 const timeSlotsSection = document.getElementById('timeSlotsSection');
 const timeSlots = document.getElementById('timeSlots');
 const confirmBooking = document.getElementById('confirmBooking');
 const prevMonth = document.getElementById('prevMonth');
 const nextMonth = document.getElementById('nextMonth');
 const modalDoctorName = document.getElementById('modalDoctorName');
 const modalDoctorSpecialty = document.getElementById('modalDoctorSpecialty');
 const modalDoctorAddress = document.getElementById('modalDoctorAddress');
 const modalDoctorPrice = document.getElementById('modalDoctorPrice');
 // Current date
 let currentDate = new Date();
 let selectedDate = null;
 let selectedTime = null;
 let selectedDoctor = null;
 // Initialize the page
 document.addEventListener('DOMContentLoaded', function() {
 renderDoctors();
 setupEventListeners();
 renderCalendar();
 });
 // Render doctors list
 function renderDoctors() {
 doctorsContainer.innerHTML = '';
 doctors.forEach(doctor => {
 const doctorCard = document.createElement('div');
 doctorCard.className = 'bg-white rounded-lg shadow-sm p-6 doctor-card transition';
 doctorCard.innerHTML = `
 <div class="flex mb-4">
 <img src="${doctor.image}" alt="${doctor.name}" class="w-16 h-16 rounded-full mr-4">
 <div>
 <h3 class="font-bold">${doctor.name}</h3>
 <p class="text-gray-600">${doctor.specialty}</p>
 <div class="flex items-center mt-1">
 <div class="flex items-center mr-2">
 ${renderStars(doctor.rating)}
 </div>
 <span class="text-sm text-gray-500">${doctor.reviews} avis</span>
 </div>
 </div>
 </div>
 <div class="flex items-center text-sm mb-2">
 <i class="fas fa-map-marker-alt text-gray-500 mr-2"></i>
 <span>${doctor.address} (${doctor.distance})</span>
 </div>
 <div class="flex items-center text-sm mb-4">
 <i class="fas fa-euro-sign text-gray-500 mr-2"></i>
 <span>${doctor.price}</span>
 </div>
 <div class="flex justify-between items-center">
 ${doctor.availableToday ?
'<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Disponible aujourd\'hui</span>' :
'<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Prochain RDV dans 3 jours</span>'}
 <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition book-button" data-id="${doctor.id}">
 Prendre RDV
 </button>
 </div>
 `;
 doctorsContainer.appendChild(doctorCard);
 });
 }
 // Render star rating
 function renderStars(rating) {
 let stars = '';
 const fullStars = Math.floor(rating);
 const hasHalfStar = rating % 1 >= 0.5;
for (let i = 0; i < fullStars; i++) {
 stars += '<i class="fas fa-star text-yellow-400"></i>';
 }
if (hasHalfStar) {
 stars += '<i class="fas fa-star-half-alt text-yellow-400"></i>';
 }
const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
 for (let i = 0; i < emptyStars; i++) {
 stars += '<i class="far fa-star text-yellow-400"></i>';
 }
return stars;
 }
 // Setup event listeners
 function setupEventListeners() {
 // Search functionality
 searchInput.addEventListener('input', handleSearch);
 locationInput.addEventListener('input', handleLocationSearch);
// Modal controls
 closeModal.addEventListener('click', () => bookingModal.classList.add('hidden'));
 bookingModal.addEventListener('click', (e) => {
 if (e.target === bookingModal) {
 bookingModal.classList.add('hidden');
 }
 });
// Calendar navigation
 prevMonth.addEventListener('click', () => {
 currentDate.setMonth(currentDate.getMonth() - 1);
 renderCalendar();
 });
nextMonth.addEventListener('click', () => {
 currentDate.setMonth(currentDate.getMonth() + 1);
 renderCalendar();
 });
// Booking confirmation
 confirmBooking.addEventListener('click', () => {
 alert(`Rendez-vous confirmé avec ${selectedDoctor.name} le ${selectedDate.toLocaleDateString()} à ${selectedTime}`);
 bookingModal.classList.add('hidden');
 });
// Book buttons for doctors
 document.querySelectorAll('.book-button').forEach(button => {
 button.addEventListener('click', (e) => {
 const doctorId = parseInt(e.target.getAttribute('data-id'));
 openBookingModal(doctorId);
 });
 });
 }
 // Handle search input
 function handleSearch() {
 const query = searchInput.value.toLowerCase();
 if (query.length < 2) {
 searchResults.classList.add('hidden');
 return;
 }
const matches = specialties.filter(spec =>
spec.toLowerCase().includes(query)
 );
if (matches.length > 0) {
 searchResults.innerHTML = matches.map(spec => `
 <div class="p-3 hover:bg-gray-100 cursor-pointer">${spec}</div>
 `).join('');
 searchResults.classList.remove('hidden');
 } else {
 searchResults.classList.add('hidden');
 }
 }
 // Handle location search
 function handleLocationSearch() {
 const query = locationInput.value.toLowerCase();
 if (query.length < 2) {
 return;
 }
// In a real app, this would call a geolocation API
 console.log("Searching for location:", query);
 }
 // Open booking modal for a specific doctor
 function openBookingModal(doctorId) {
 selectedDoctor = doctors.find(d => d.id === doctorId);
 if (!selectedDoctor) return;
// Update modal with doctor info
 modalDoctorName.textContent = selectedDoctor.name;
 modalDoctorSpecialty.textContent = selectedDoctor.specialty;
 modalDoctorAddress.textContent = selectedDoctor.address;
 modalDoctorPrice.textContent = selectedDoctor.price;
// Reset selections
 selectedDate = null;
 selectedTime = null;
 timeSlotsSection.classList.add('hidden');
 confirmBooking.classList.add('hidden');
// Show modal
 bookingModal.classList.remove('hidden');
 }
 // Render calendar
 function renderCalendar() {
 // Update month display
 const options = { month: 'long', year: 'numeric' };
 currentMonth.textContent = currentDate.toLocaleDateString('fr-FR', options);
// Get first day of month and total days in month
 const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay();
 const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
// Adjust for Monday as first day (French calendar)
 const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
// Clear previous calendar
 calendarDays.innerHTML = '';
// Add empty cells for days before the first day of the month
 for (let i = 0; i < adjustedFirstDay; i++) {
 const emptyCell = document.createElement('div');
 emptyCell.className = 'h-10';
 calendarDays.appendChild(emptyCell);
 }
// Add cells for each day of the month
 for (let i = 1; i <= daysInMonth; i++) {
 const dayCell = document.createElement('div');
 dayCell.className = 'calendar-day h-10 flex items-center justify-center rounded-full';
 dayCell.textContent = i;
// Mark today
 const today = new Date();
 if (currentDate.getMonth() === today.getMonth() &&
currentDate.getFullYear() === today.getFullYear() &&
i === today.getDate()) {
 dayCell.classList.add('font-bold', 'border-2', 'border-blue-500');
 }
// Disable past days
 if (currentDate.getMonth() === today.getMonth() &&
currentDate.getFullYear() === today.getFullYear() &&
i < today.getDate()) {
 dayCell.classList.add('disabled', 'text-gray-400');
 } else {
 dayCell.addEventListener('click', () => selectDate(i));
 }
calendarDays.appendChild(dayCell);
 }
 }
 // Select a date
 function selectDate(day) {
 // Remove previous selection
 document.querySelectorAll('.calendar-day').forEach(cell => {
 cell.classList.remove('selected');
 });
// Mark selected cell
 const selectedCell = [...document.querySelectorAll('.calendar-day')].find(cell =>
cell.textContent == day && !cell.classList.contains('disabled')
 );
if (selectedCell) {
 selectedCell.classList.add('selected');
// Set selected date
 selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
// Generate time slots
 generateTimeSlots();
 timeSlotsSection.classList.remove('hidden');
// Reset time selection
 selectedTime = null;
 confirmBooking.classList.add('hidden');
 }
 }
 // Generate time slots
 function generateTimeSlots() {
 timeSlots.innerHTML = '';
// In a real app, this would fetch available slots from an API
 const slots = [
 '08:00', '08:30', '09:00', '09:30', '10:00',
'10:30', '11:00', '11:30', '14:00', '14:30',
'15:00', '15:30', '16:00', '16:30', '17:00'
 ];
slots.forEach(slot => {
 const slotElement = document.createElement('div');
 slotElement.className = 'time-slot p-2 text-center border border-gray-200 rounded-md';
 slotElement.textContent = slot;
 slotElement.addEventListener('click', () => selectTime(slot));
 timeSlots.appendChild(slotElement);
 });
 }
 // Select a time slot
 function selectTime(time) {
 // Remove previous selection
 document.querySelectorAll('.time-slot').forEach(slot => {
 slot.classList.remove('selected');
 });
// Mark selected slot
 const selectedSlot = [...document.querySelectorAll('.time-slot')].find(slot =>
slot.textContent === time
 );
if (selectedSlot) {
 selectedSlot.classList.add('selected');
 selectedTime = time;
 confirmBooking.classList.remove('hidden');
 }
 }
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jkind/medibook" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>