|
|
<!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> |
|
|
|
|
|
.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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
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" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const specialties = [ |
|
|
"Médecin généraliste", "Dentiste", "Dermatologue", "Ophtalmologue", |
|
|
"Cardiologue", "Gynécologue", "Pédiatre", "Psychiatre", |
|
|
"ORL", "Rhumatologue", "Urologue", "Chirurgien" |
|
|
]; |
|
|
|
|
|
|
|
|
const locations = [ |
|
|
"Paris", "Lyon", "Marseille", "Toulouse", "Nice", |
|
|
"Nantes", "Strasbourg", "Montpellier", "Bordeaux", "Lille" |
|
|
]; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
let currentDate = new Date(); |
|
|
let selectedDate = null; |
|
|
let selectedTime = null; |
|
|
let selectedDoctor = null; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
renderDoctors(); |
|
|
setupEventListeners(); |
|
|
renderCalendar(); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
function setupEventListeners() { |
|
|
|
|
|
searchInput.addEventListener('input', handleSearch); |
|
|
locationInput.addEventListener('input', handleLocationSearch); |
|
|
|
|
|
|
|
|
closeModal.addEventListener('click', () => bookingModal.classList.add('hidden')); |
|
|
bookingModal.addEventListener('click', (e) => { |
|
|
if (e.target === bookingModal) { |
|
|
bookingModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
prevMonth.addEventListener('click', () => { |
|
|
currentDate.setMonth(currentDate.getMonth() - 1); |
|
|
renderCalendar(); |
|
|
}); |
|
|
|
|
|
nextMonth.addEventListener('click', () => { |
|
|
currentDate.setMonth(currentDate.getMonth() + 1); |
|
|
renderCalendar(); |
|
|
}); |
|
|
|
|
|
|
|
|
confirmBooking.addEventListener('click', () => { |
|
|
alert(`Rendez-vous confirmé avec ${selectedDoctor.name} le ${selectedDate.toLocaleDateString()} à ${selectedTime}`); |
|
|
bookingModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.book-button').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
const doctorId = parseInt(e.target.getAttribute('data-id')); |
|
|
openBookingModal(doctorId); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function handleLocationSearch() { |
|
|
const query = locationInput.value.toLowerCase(); |
|
|
if (query.length < 2) { |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
console.log("Searching for location:", query); |
|
|
} |
|
|
|
|
|
|
|
|
function openBookingModal(doctorId) { |
|
|
selectedDoctor = doctors.find(d => d.id === doctorId); |
|
|
if (!selectedDoctor) return; |
|
|
|
|
|
|
|
|
modalDoctorName.textContent = selectedDoctor.name; |
|
|
modalDoctorSpecialty.textContent = selectedDoctor.specialty; |
|
|
modalDoctorAddress.textContent = selectedDoctor.address; |
|
|
modalDoctorPrice.textContent = selectedDoctor.price; |
|
|
|
|
|
|
|
|
selectedDate = null; |
|
|
selectedTime = null; |
|
|
timeSlotsSection.classList.add('hidden'); |
|
|
confirmBooking.classList.add('hidden'); |
|
|
|
|
|
|
|
|
bookingModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function renderCalendar() { |
|
|
|
|
|
const options = { month: 'long', year: 'numeric' }; |
|
|
currentMonth.textContent = currentDate.toLocaleDateString('fr-FR', options); |
|
|
|
|
|
|
|
|
const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay(); |
|
|
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate(); |
|
|
|
|
|
|
|
|
const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1; |
|
|
|
|
|
|
|
|
calendarDays.innerHTML = ''; |
|
|
|
|
|
|
|
|
for (let i = 0; i < adjustedFirstDay; i++) { |
|
|
const emptyCell = document.createElement('div'); |
|
|
emptyCell.className = 'h-10'; |
|
|
calendarDays.appendChild(emptyCell); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function selectDate(day) { |
|
|
|
|
|
document.querySelectorAll('.calendar-day').forEach(cell => { |
|
|
cell.classList.remove('selected'); |
|
|
}); |
|
|
|
|
|
|
|
|
const selectedCell = [...document.querySelectorAll('.calendar-day')].find(cell => |
|
|
cell.textContent == day && !cell.classList.contains('disabled') |
|
|
); |
|
|
|
|
|
if (selectedCell) { |
|
|
selectedCell.classList.add('selected'); |
|
|
|
|
|
|
|
|
selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day); |
|
|
|
|
|
|
|
|
generateTimeSlots(); |
|
|
timeSlotsSection.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
selectedTime = null; |
|
|
confirmBooking.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function generateTimeSlots() { |
|
|
timeSlots.innerHTML = ''; |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function selectTime(time) { |
|
|
|
|
|
document.querySelectorAll('.time-slot').forEach(slot => { |
|
|
slot.classList.remove('selected'); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
