Illishx08/sama-sante at main

50.5 kB

Ctrl+K

1 contributor

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sama Santé</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script src="https://cdn.tailwindcss.com"></script> <style> @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } .fade-in { animation: fadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .pulse-hover:hover { animation: pulse 1.5s infinite; } .heartbeat { animation: heartbeat 1.5s infinite; } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } .nav-item { position: relative; transition: all 0.3s ease; } .nav-item.active::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background-color: #0d9488; border-radius: 50%; } .emergency-card { transition: all 0.3s ease; } .emergency-card:hover { transform: scale(1.02); } .floating-btn { box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3); } .floating-btn:hover { box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4); } .search-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2); } .chatbot-bubble { position: fixed; bottom: 80px; right: 20px; z-index: 100; } /* Styles pour le chatbot */ .chatbot-container { position: fixed; bottom: 160px; right: 20px; width: 320px; max-height: 400px; background: white; border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); overflow: hidden; display: none; flex-direction: column; z-index: 1000; } .chatbot-header { background: linear-gradient(to right, #0d9488, #0f766e); color: white; padding: 12px 16px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; } .chatbot-messages { flex: 1; padding: 16px; overflow-y: auto; background: #f9fafb; } .message { margin-bottom: 12px; max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; } .bot-message { background: white; border-top-left-radius: 4px; align-self: flex-start; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .user-message { background: #0d9488; color: white; border-top-right-radius: 4px; align-self: flex-end; } .chatbot-input { display: flex; padding: 12px; border-top: 1px solid #e5e7eb; background: white; } .chatbot-input input { flex: 1; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 20px; outline: none; font-size: 14px; } .chatbot-input button { margin-left: 8px; background: #0d9488; color: white; border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .quick-reply { background: #e5e7eb; border: none; border-radius: 16px; padding: 6px 12px; font-size: 12px; cursor: pointer; transition: background 0.2s; } .quick-reply:hover { background: #d1d5db; } @media (max-width: 640px) { .emergency-number { font-size: 1.5rem; } .chatbot-container { width: 90%; right: 5%; bottom: 140px; max-height: 60vh; } } </style> </head> <body class="bg-gradient-to-b from-teal-50 to-white flex flex-col min-h-screen font-sans"> <header class="bg-gradient-to-r from-teal-700 to-teal-600 text-white p-4 shadow-lg sticky top-0 z-20"> <div class="container mx-auto flex items-center justify-between"> <div id="logo" class="flex items-center gap-3"> <div class="relative"> <svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="pulse-hover"> <circle cx="32" cy="32" r="30" stroke="white" stroke-width="3" fill="none" class="animate-spin-slow" style="animation-duration: 15s"/> <path d="M32 16V48M16 32H48" stroke="white" stroke-width="4" stroke-linecap="round"/> <circle cx="32" cy="32" r="10" fill="white" class="transition-all duration-300 group-hover:fill-teal-200"/> </svg> </div> <div> <div class="text-2xl font-bold tracking-tight">Sama Santé</div> <div class="text-sm text-teal-100 font-light tracking-wider">Votre santé, notre priorité</div> </div> </div> <button class="md:hidden text-white focus:outline-none"> <i class="fas fa-bars text-xl"></i> </button> </div> </header> <main class="flex-1 container mx-auto p-4 pb-24">  <div class="mb-6 relative"> <input type="text" placeholder="Rechercher un hôpital, un médicament..." class="w-full p-4 pl-12 rounded-xl border border-teal-200 focus:border-teal-400 search-input shadow-sm"> <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-teal-500"></i> </div> <section id="structures" class="section active fade-in"> <h2 class="text-2xl font-bold text-teal-800 mb-6 flex items-center justify-center gap-3"> <i class="fas fa-map-marker-alt text-teal-600"></i> <span class="bg-gradient-to-r from-teal-600 to-teal-400 bg-clip-text text-transparent"> Structures de santé </span> </h2> <div class="bg-white rounded-xl shadow-md p-5 mb-5 card-hover"> <h3 class="text-xl font-semibold text-teal-700 mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> <i class="fas fa-hospital"></i> </div> Hôpitaux Nationaux </h3> <ul class="space-y-3 pl-2"> <li class="flex items-start gap-2"> <div class="w-5 h-5 mt-1 flex-shrink-0 text-teal-500"> <i class="fas fa-star"></i> </div> <div> <strong class="text-teal-800">CHU de Fann</strong> (Dakar) - Spécialités multiples<br> <span class="text-sm text-gray-600">Ouvert 24h/24 • Urgences disponibles</span> </div> </li> <li class="flex items-start gap-2"> <div class="w-5 h-5 mt-1 flex-shrink-0 text-teal-500"> <i class="fas fa-star"></i> </div> <div> <strong class="text-teal-800">Hôpital Aristide Le Dantec</strong> (Dakar) - Médecine générale<br> <span class="text-sm text-gray-600">Spécialistes qualifiés</span> </div> </li> <li class="flex items-start gap-2"> <div class="w-5 h-5 mt-1 flex-shrink-0 text-teal-500"> <i class="fas fa-star"></i> </div> <div> <strong class="text-teal-800">Hôpital Principal</strong> (Dakar) - Urgences et chirurgie<br> <span class="text-sm text-gray-600">Service de traumatologie</span> </div> </li> </ul> </div> <div class="bg-white rounded-xl shadow-md p-5 mb-5 card-hover"> <h3 class="text-xl font-semibold text-teal-700 mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> <i class="fas fa-clinic-medical"></i> </div> Centres de Santé par Région </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> <div class="bg-gradient-to-br from-teal-50 to-white p-4 rounded-lg border border-teal-100 flex items-start gap-3"> <div class="text-teal-600 mt-1"> <i class="fas fa-location-dot"></i> </div> <div> <strong class="text-teal-800">Dakar:</strong> <div class="text-sm">Poste de santé Grand-Yoff, Centre de santé Philippe Maguilen Senghor</div> </div> </div> <div class="bg-gradient-to-br from-teal-50 to-white p-4 rounded-lg border border-teal-100 flex items-start gap-3"> <div class="text-teal-600 mt-1"> <i class="fas fa-location-dot"></i> </div> <div> <strong class="text-teal-800">Thiès:</strong> <div class="text-sm">Hôpital régional, Centre de santé Mbour</div> </div> </div> <div class="bg-gradient-to-br from-teal-50 to-white p-4 rounded-lg border border-teal-100 flex items-start gap-3"> <div class="text-teal-600 mt-1"> <i class="fas fa-location-dot"></i> </div> <div> <strong class="text-teal-800">Saint-Louis:</strong> <div class="text-sm">Hôpital régional, Centre de santé Pikine</div> </div> </div> <div class="bg-gradient-to-br from-teal-50 to-white p-4 rounded-lg border border-teal-100 flex items-start gap-3"> <div class="text-teal-600 mt-1"> <i class="fas fa-location-dot"></i> </div> <div> <strong class="text-teal-800">Ziguinchor:</strong> <div class="text-sm">Hôpital régional de la Paix, Centre de santé Bignona</div> </div> </div> </div> </div> </section> <section id="conseils" class="section hidden fade-in"> <h2 class="text-2xl font-bold text-teal-800 mb-6 flex items-center justify-center gap-3"> <i class="fas fa-book-medical text-teal-600"></i> <span class="bg-gradient-to-r from-teal-600 to-teal-400 bg-clip-text text-transparent"> Conseils santé </span> </h2> <div class="bg-white rounded-xl shadow-md p-5 mb-5 card-hover"> <h3 class="text-xl font-semibold text-teal-700 mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> <i class="fas fa-broom"></i> </div> Hygiène de base </h3> <div class="space-y-3"> <div class="flex items-start gap-3"> <div class="w-6 h-6 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-check text-xs"></i> </div> <div>Lavez-vous les mains régulièrement avec du savon, surtout avant de manger et après être allé aux toilettes</div> </div> <div class="flex items-start gap-3"> <div class="w-6 h-6 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-check text-xs"></i> </div> <div>Utilisez de l'eau potable ou traitée pour boire et cuisiner</div> </div> <div class="flex items-start gap-3"> <div class="w-6 h-6 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-check text-xs"></i> </div> <div>Maintenez votre environnement propre pour éviter la prolifération des moustiques</div> </div> </div> </div> <div class="bg-white rounded-xl shadow-md p-5 mb-5 card-hover"> <h3 class="text-xl font-semibold text-teal-700 mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> <i class="fas fa-utensils"></i> </div> Alimentation saine </h3> <div class="grid grid-cols-2 gap-4"> <div class="bg-gradient-to-br from-teal-50 to-white p-3 rounded-lg border border-teal-100 text-center"> <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center"> <i class="fas fa-bread-slice"></i> </div> <div class="text-sm font-medium text-teal-800">Céréales locales</div> <div class="text-xs text-gray-600">mil, maïs, riz</div> </div> <div class="bg-gradient-to-br from-teal-50 to-white p-3 rounded-lg border border-teal-100 text-center"> <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center"> <i class="fas fa-apple-alt"></i> </div> <div class="text-sm font-medium text-teal-800">Fruits de saison</div> <div class="text-xs text-gray-600">mangue, papaye, goyave</div> </div> <div class="bg-gradient-to-br from-teal-50 to-white p-3 rounded-lg border border-teal-100 text-center"> <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center"> <i class="fas fa-fish"></i> </div> <div class="text-sm font-medium text-teal-800">Protéines</div> <div class="text-xs text-gray-600">poisson, poulet, œufs</div> </div> <div class="bg-gradient-to-br from-teal-50 to-white p-3 rounded-lg border border-teal-100 text-center"> <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center"> <i class="fas fa-leaf"></i> </div> <div class="text-sm font-medium text-teal-800">Légumes</div> <div class="text-xs text-gray-600">aubergine, gombo, carotte</div> </div> </div> </div> <div class="bg-white rounded-xl shadow-md p-5 mb-5 card-hover"> <h3 class="text-xl font-semibold text-teal-700 mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> <i class="fas fa-syringe"></i> </div> Vaccination </h3> <div class="space-y-3"> <div class="flex items-start gap-3"> <div class="w-6 h-6 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-check text-xs"></i> </div> <div>Vérifiez que vos vaccins sont à jour selon le calendrier vaccinal national</div> </div> <div class="flex items-start gap-3"> <div class="w-6 h-6 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-check text-xs"></i> </div> <div>Les enfants doivent être vaccinés contre la polio, la rougeole et la tuberculose</div> </div> <div class="flex items-start gap-3"> <div class="w-6 h-6 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-check text-xs"></i> </div> <div>Consultez votre centre de santé pour les vaccins contre la fièvre jaune avant de voyager</div> </div> </div> </div> </section> <section id="assistance" class="section hidden fade-in"> <h2 class="text-2xl font-bold text-teal-800 mb-6 flex items-center justify-center gap-3"> <i class="fas fa-comments text-teal-600"></i> <span class="bg-gradient-to-r from-teal-600 to-teal-400 bg-clip-text text-transparent"> Assistance médicale </span> </h2> <div class="bg-gradient-to-br from-teal-600 to-teal-500 text-white rounded-xl shadow-xl p-5 mb-5 card-hover"> <h3 class="text-xl font-semibold mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> <i class="fas fa-robot"></i> </div> Chatbot Santé </h3> <p class="mb-4 opacity-90">Obtenez des réponses instantanées à vos questions de santé</p> <button id="open-chatbot-btn" class="w-full bg-white hover:bg-gray-100 text-teal-700 font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center gap-2 shadow-md hover:shadow-lg"> <i class="fas fa-comment-dots"></i> Lancer le chatbot </button> </div> <div class="bg-white rounded-xl shadow-md p-5 mb-5 card-hover"> <h3 class="text-xl font-semibold text-teal-700 mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> <i class="fas fa-first-aid"></i> </div> Premiers secours </h3> <div class="space-y-4"> <div class="flex items-start gap-3"> <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-fire"></i> </div> <div> <strong class="text-teal-800">Brûlure:</strong> <div class="text-sm">Refroidir à l'eau courante 15 min, ne pas percer les cloques</div> </div> </div> <div class="flex items-start gap-3"> <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-tint"></i> </div> <div> <strong class="text-teal-800">Hémorragie:</strong> <div class="text-sm">Comprimer la plaie avec un tissu propre, surélever le membre</div> </div> </div> <div class="flex items-start gap-3"> <div class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-bolt"></i> </div> <div> <strong class="text-teal-800">Étouffement:</strong> <div class="text-sm">5 claques dans le dos puis manœuvre de Heimlich si nécessaire</div> </div> </div> <div class="flex items-start gap-3"> <div class="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-bug"></i> </div> <div> <strong class="text-teal-800">Piqûre:</strong> <div class="text-sm">Retirer le dard, désinfecter, appliquer du froid</div> </div> </div> </div> </div> <div class="bg-white rounded-xl shadow-md p-5 mb-5 card-hover"> <h3 class="text-xl font-semibold text-teal-700 mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> <i class="fas fa-pills"></i> </div> Pharmacies de garde </h3> <div class="space-y-4"> <div class="flex items-start gap-3 p-3 hover:bg-teal-50 rounded-lg transition"> <div class="w-8 h-8 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-map-marker-alt"></i> </div> <div> <strong class="text-teal-800">Pharmacie du Plateau</strong> <div class="text-sm text-gray-600">Avenue Albert Sarraut, Dakar</div> <div class="text-sm mt-1 text-teal-600 font-medium"> <i class="fas fa-phone-alt mr-1"></i> <a href="tel:338212424" class="hover:underline">33 821 24 24</a> </div> </div> </div> <div class="flex items-start gap-3 p-3 hover:bg-teal-50 rounded-lg transition"> <div class="w-8 h-8 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-map-marker-alt"></i> </div> <div> <strong class="text-teal-800">Pharmacie de la Gueule Tapée</strong> <div class="text-sm text-gray-600">Rue 10, Dakar</div> <div class="text-sm mt-1 text-teal-600 font-medium"> <i class="fas fa-phone-alt mr-1"></i> <a href="tel:338222020" class="hover:underline">33 822 20 20</a> </div> </div> </div> </div> </div> </section> <section id="urgence" class="section hidden fade-in"> <h2 class="text-2xl font-bold text-teal-800 mb-6 flex items-center justify-center gap-3"> <i class="fas fa-ambulance text-teal-600"></i> <span class="bg-gradient-to-r from-teal-600 to-teal-400 bg-clip-text text-transparent"> Urgences </span> </h2> <div class="space-y-4 mb-6"> <div class="emergency-card bg-gradient-to-r from-red-500 to-red-600 text-white rounded-xl shadow-lg p-4 flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> <i class="fas fa-phone-alt"></i> </div> <div> <div class="font-medium">SAMU (Service d'Aide Médicale Urgente)</div> <div class="text-sm opacity-90">Appel gratuit 24h/24</div> </div> </div> <a href="tel:15" class="text-2xl font-bold tracking-wider emergency-number hover:underline">15</a> </div> <div class="emergency-card bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-xl shadow-lg p-4 flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> <i class="fas fa-fire-extinguisher"></i> </div> <div> <div class="font-medium">Pompiers</div> <div class="text-sm opacity-90">Intervention rapide</div> </div> </div> <a href="tel:18" class="text-2xl font-bold tracking-wider emergency-number hover:underline">18</a> </div> <div class="emergency-card bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl shadow-lg p-4 flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> <i class="fas fa-shield-alt"></i> </div> <div> <div class="font-medium">Police Secours</div> <div class="text-sm opacity-90">Urgences sécuritaires</div> </div> </div> <a href="tel:17" class="text-2xl font-bold tracking-wider emergency-number hover:underline">17</a> </div> </div> <div class="bg-white rounded-xl shadow-md p-5 card-hover"> <h3 class="text-xl font-semibold text-teal-700 mb-3 flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600"> <i class="fas fa-hospital"></i> </div> Hôpitaux d'urgence à Dakar </h3> <div class="space-y-4"> <div class="flex items-start gap-3 p-3 hover:bg-teal-50 rounded-lg transition"> <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-plus"></i> </div> <div> <strong class="text-teal-800">Hôpital Principal</strong> <div class="text-sm text-gray-600">24h/24 • Avenue Nelson Mandela, Dakar</div> <div class="text-sm mt-1 text-teal-600 font-medium"> <i class="fas fa-phone-alt mr-1"></i> <a href="tel:338395050" class="hover:underline">33 839 50 50</a> </div> </div> </div> <div class="flex items-start gap-3 p-3 hover:bg-teal-50 rounded-lg transition"> <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-plus"></i> </div> <div> <strong class="text-teal-800">CHU de Fann</strong> <div class="text-sm text-gray-600">Urgences médicales • Route de l'Aéroport</div> <div class="text-sm mt-1 text-teal-600 font-medium"> <i class="fas fa-phone-alt mr-1"></i> <a href="tel:338691010" class="hover:underline">33 869 10 10</a> </div> </div> </div> <div class="flex items-start gap-3 p-3 hover:bg-teal-50 rounded-lg transition"> <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mt-1 flex-shrink-0"> <i class="fas fa-plus"></i> </div> <div> <strong class="text-teal-800">Hôpital Aristide Le Dantec</strong> <div class="text-sm text-gray-600">Urgences spécialisées • Avenue Pasteur</div> <div class="text-sm mt-1 text-teal-600 font-medium"> <i class="fas fa-phone-alt mr-1"></i> <a href="tel:338395050" class="hover:underline">33 839 50 50</a> </div> </div> </div> </div> </div> </section> </main>  <div class="chatbot-container" id="chatbot"> <div class="chatbot-header"> <span>Assistant Santé</span> <button id="close-chatbot" class="text-white focus:outline-none"> <i class="fas fa-times"></i> </button> </div> <div class="chatbot-messages" id="chatbot-messages"> <div class="message bot-message"> Bonjour ! Je suis votre assistant santé. Comment puis-je vous aider aujourd'hui ? </div> <div class="quick-replies mt-2"> <button class="quick-reply" onclick="sendQuickReply('Où trouver un hôpital proche ?')">Hôpitaux proches</button> <button class="quick-reply" onclick="sendQuickReply('Que faire en cas de fièvre ?')">Fièvre</button> <button class="quick-reply" onclick="sendQuickReply('Conseils pour une bonne hygiène')">Hygiène</button> </div> </div> <div class="chatbot-input"> <input type="text" id="chatbot-input" placeholder="Posez votre question..." onkeypress="handleChatbotKeyPress(event)"> <button id="send-message" onclick="sendChatbotMessage()"> <i class="fas fa-paper-plane"></i> </button> </div> </div>  <div class="chatbot-bubble"> <button id="chatbot-btn" class="w-16 h-16 rounded-full bg-teal-600 text-white flex items-center justify-center shadow-xl floating-btn hover:bg-teal-700 transition duration-300 heartbeat"> <i class="fas fa-comment-medical text-2xl"></i> </button> </div>  <nav class="fixed bottom-0 w-full bg-white shadow-2xl rounded-t-2xl flex justify-around p-2 z-10 border-t border-gray-100"> <button onclick="showSection('structures', this)" class="nav-item flex flex-col items-center p-2 rounded-xl text-teal-600 hover:bg-teal-50 transition duration-300 active"> <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center mb-1"> <i class="fas fa-hospital text-lg"></i> </div> <span class="text-xs font-medium">Structures</span> </button> <button onclick="showSection('conseils', this)" class="nav-item flex flex-col items-center p-2 rounded-xl text-gray-500 hover:bg-teal-50 transition duration-300"> <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-1"> <i class="fas fa-lightbulb text-lg"></i> </div> <span class="text-xs font-medium">Conseils</span> </button> <button onclick="showSection('assistance', this)" class="nav-item flex flex-col items-center p-2 rounded-xl text-gray-500 hover:bg-teal-50 transition duration-300"> <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-1"> <i class="fas fa-hands-helping text-lg"></i> </div> <span class="text-xs font-medium">Aide</span> </button> <button onclick="showSection('urgence', this)" class="nav-item flex flex-col items-center p-2 rounded-xl text-gray-500 hover:bg-teal-50 transition duration-300"> <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mb-1"> <i class="fas fa-ambulance text-lg"></i> </div> <span class="text-xs font-medium">Urgences</span> </button> </nav> <script> // Fonction pour afficher les sections function showSection(id, el) { // Hide all sections document.querySelectorAll('.section').forEach(sec => { sec.classList.add('hidden'); sec.classList.remove('active', 'fade-in'); }); // Show selected section with animation const section = document.getElementById(id); section.classList.remove('hidden'); section.classList.add('active'); setTimeout(() => { section.classList.add('fade-in'); }, 10); // Update active button const buttons = document.querySelectorAll('nav button'); buttons.forEach(btn => { btn.classList.remove('text-teal-600', 'active'); btn.querySelector('div').classList.remove('bg-teal-100'); btn.querySelector('div').classList.add('bg-gray-100'); }); el.classList.add('text-teal-600', 'active'); el.querySelector('div').classList.remove('bg-gray-100'); el.querySelector('div').classList.add('bg-teal-100'); } // Fonctionnalités du chatbot const chatbot = document.getElementById('chatbot'); const chatbotBtn = document.getElementById('chatbot-btn'); const openChatbotBtn = document.getElementById('open-chatbot-btn'); const closeChatbotBtn = document.getElementById('close-chatbot'); const chatbotMessages = document.getElementById('chatbot-messages'); const chatbotInput = document.getElementById('chatbot-input'); const sendMessageBtn = document.getElementById('send-message'); // Ouvrir le chatbot function openChatbot() { chatbot.style.display = 'flex'; chatbotBtn.style.display = 'none'; showSection('assistance', document.querySelector('nav button:nth-child(3)')); } // Fermer le chatbot function closeChatbot() { chatbot.style.display = 'none'; chatbotBtn.style.display = 'flex'; } // Envoyer un message function sendChatbotMessage() { const message = chatbotInput.value.trim(); if (message) { addMessage(message, 'user'); chatbotInput.value = ''; setTimeout(() => { respondToMessage(message); }, 500); } } // Envoyer une réponse rapide function sendQuickReply(message) { addMessage(message, 'user'); setTimeout(() => { respondToMessage(message); }, 500); } // Gérer la touche Entrée function handleChatbotKeyPress(e) { if (e.key === 'Enter') { sendChatbotMessage(); } } // Ajouter un message au chat function addMessage(text, sender) { const messageDiv = document.createElement('div'); messageDiv.classList.add('message'); messageDiv.classList.add(sender === 'user' ? 'user-message' : 'bot-message'); messageDiv.textContent = text; chatbotMessages.appendChild(messageDiv); chatbotMessages.scrollTop = chatbotMessages.scrollHeight; } // Réponses du chatbot function respondToMessage(message) { let response = ""; let quickReplies = []; // Convertir le message en minuscules pour faciliter la comparaison const lowerMessage = message.toLowerCase(); if (lowerMessage.includes('hôpital') || lowerMessage.includes('hopital') || lowerMessage.includes('clinique') || lowerMessage.includes('médecin') || lowerMessage.includes('medecin')) { response = "Voici quelques hôpitaux et centres de santé disponibles :\n\n" + "• CHU de Fann (Dakar) - Urgences 24h/24\n" + "• Hôpital Principal (Dakar) - Service de traumatologie\n" + "• Hôpital Aristide Le Dantec (Dakar) - Spécialistes qualifiés\n\n" + "Vous pouvez aussi consulter la section 'Structures de santé' dans l'application pour plus de détails."; quickReplies = ['Où trouver un hôpital proche ?', 'Comment contacter un médecin ?']; } else if (lowerMessage.includes('fièvre') || lowerMessage.includes('fievre') || lowerMessage.includes('température') || lowerMessage.includes('temperature')) { response = "En cas de fièvre :\n\n" + "1. Prenez votre température\n" + "2. Buvez beaucoup d'eau\n" + "3. Reposez-vous\n" + "4. Prenez du paracétamol si nécessaire\n\n" + "Consultez un médecin si la fièvre persiste plus de 48h ou dépasse 39°C."; quickReplies = ['Que faire en cas de fièvre élevée ?', 'Quand consulter pour une fièvre ?']; } else if (lowerMessage.includes('hygiène') || lowerMessage.includes('hygiene') || lowerMessage.includes('propre') || lowerMessage.includes('lavage')) { response = "Conseils d'hygiène de base :\n\n" + "• Lavez-vous les mains régulièrement avec du savon\n" + "• Utilisez de l'eau potable ou traitée\n" + "• Maintenez votre environnement propre\n" + "• Couvrez-vous la bouche quand vous toussez\n\n" + "Une bonne hygiène prévient de nombreuses maladies."; quickReplies = ['Comment bien se laver les mains ?', 'Comment traiter l\'eau ?']; } else if (lowerMessage.includes('urgence') || lowerMessage.includes('urgent') || lowerMessage.includes('accident')) { response = "En cas d'urgence médicale :\n\n" + "• Composez le 15 pour le SAMU (Service d'Aide Médicale Urgente)\n" + "• Restez calme et donnez votre localisation exacte\n" + "• Suivez les instructions de l'opérateur\n\n" + "Ne raccrochez pas avant d'y être invité."; quickReplies = ['Numéros d\'urgence', 'Que faire en cas de brûlure ?']; } else if (lowerMessage.includes('vaccin') || lowerMessage.includes('vaccination')) { response = "Informations sur la vaccination :\n\n" + "• Les enfants doivent être vaccinés selon le calendrier national\n" + "• Les vaccins contre la polio, la rougeole et la tuberculose sont essentiels\n" + "• Consultez votre centre de santé pour les vaccins de voyage (fièvre jaune)\n\n" + "La vaccination sauve des vies et prévient les épidémies."; quickReplies = ['Calendrier vaccinal', 'Vaccins pour voyager']; } else { response = "Je ne suis pas sûr de comprendre votre question. Voici quelques sujets que je peux traiter :\n\n" + "• Localisation d'hôpitaux et centres de santé\n" + "• Conseils pour les symptômes courants\n" + "• Informations sur l'hygiène et la prévention\n" + "• Numéros d'urgence\n\n" + "Pouvez-vous reformuler votre question ou choisir un sujet ci-dessous ?"; quickReplies = ['Où trouver un hôpital ?', 'Que faire en cas de fièvre ?', 'Conseils d\'hygiène']; } // Ajouter la réponse du bot addMessage(response, 'bot'); // Ajouter les réponses rapides if (quickReplies.length > 0) { const quickRepliesDiv = document.createElement('div'); quickRepliesDiv.classList.add('quick-replies', 'mt-2'); quickReplies.forEach(reply => { const button = document.createElement('button'); button.classList.add('quick-reply'); button.textContent = reply; button.onclick = function() { sendQuickReply(reply); }; quickRepliesDiv.appendChild(button); }); chatbotMessages.appendChild(quickRepliesDiv); chatbotMessages.scrollTop = chatbotMessages.scrollHeight; } } // Événements chatbotBtn.addEventListener('click', openChatbot); openChatbotBtn.addEventListener('click', openChatbot); closeChatbotBtn.addEventListener('click', closeChatbot); sendMessageBtn.addEventListener('click', sendChatbotMessage); // Initialiser les liens d'appel document.querySelectorAll('a[href^="tel:"]').forEach(link => { link.addEventListener('click', function(e) { if (!confirm(`Voulez-vous appeler ${this.textContent.trim()} ?`)) { e.preventDefault(); } }); }); // Initialiser le chatbot avec un message de bienvenue setTimeout(() => { if (!localStorage.getItem('chatbotGreeted')) { addMessage("Bonjour ! Je suis votre assistant santé. Posez-moi vos questions sur les hôpitaux, les symptômes ou les conseils de santé.", 'bot'); localStorage.setItem('chatbotGreeted', 'true'); } }, 1000); </script> </body> </html> - Initial Deployment

77ae18b verified 10 months ago