|
|
<!DOCTYPE html> |
|
|
<html lang="fr" class="scroll-smooth"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Pharmacie de Garde Kénitra | Trouvez une pharmacie ouverte</title> |
|
|
<meta name="description" content="Trouvez rapidement une pharmacie de garde ouverte à Kénitra, 24h/24 et 7j/7."> |
|
|
<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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3b82f6', |
|
|
secondary: '#10b981', |
|
|
accent: '#ef4444', |
|
|
dark: '#1e293b', |
|
|
light: '#f8fafc', |
|
|
moroccoBlue: '#002366', |
|
|
moroccoRed: '#C1272D' |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.pharmacy-card { |
|
|
animation: fadeIn 0.6s ease-out forwards; |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.pharmacy-card:hover { |
|
|
transform: translateY(-5px) !important; |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.status-open { |
|
|
background-color: #10b981; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.status-closed { |
|
|
background-color: #6b7280; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border: 5px solid #f3f3f3; |
|
|
border-top: 5px solid #3b82f6; |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.arabic-text { |
|
|
direction: rtl; |
|
|
font-family: Arial, sans-serif; |
|
|
} |
|
|
|
|
|
#map { |
|
|
height: 500px; |
|
|
width: 100%; |
|
|
border-radius: 0.75rem; |
|
|
} |
|
|
|
|
|
.search-highlight { |
|
|
background-color: #FFED4F; |
|
|
padding: 0 2px; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
.custom-dropdown { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
max-width: 300px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.custom-dropdown select { |
|
|
appearance: none; |
|
|
-webkit-appearance: none; |
|
|
-moz-appearance: none; |
|
|
width: 100%; |
|
|
padding: 12px 16px; |
|
|
border: 1px solid #d1d5db; |
|
|
border-radius: 8px; |
|
|
background-color: white; |
|
|
cursor: pointer; |
|
|
font-size: 14px; |
|
|
color: #1f2937; |
|
|
} |
|
|
|
|
|
.custom-dropdown::after { |
|
|
content: '\25BC'; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
right: 16px; |
|
|
transform: translateY(-50%); |
|
|
color: #4b5563; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.custom-dropdown select:focus { |
|
|
outline: none; |
|
|
border-color: #3b82f6; |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-white shadow-md 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-2"> |
|
|
<i class="fas fa-prescription-bottle-alt text-3xl text-moroccoBlue"></i> |
|
|
<h1 class="text-2xl font-bold text-dark">Pharma<span class="text-moroccoRed">Kénitra</span></h1> |
|
|
</div> |
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="text-dark hover:text-moroccoBlue font-medium transition">Accueil</a> |
|
|
<a href="#search" class="text-dark hover:text-moroccoBlue font-medium transition">Recherche</a> |
|
|
<a href="#pharmacies" class="text-dark hover:text-moroccoBlue font-medium transition">Pharmacies</a> |
|
|
<a href="#faq" class="text-dark hover:text-moroccoBlue font-medium transition">FAQ</a> |
|
|
</nav> |
|
|
|
|
|
<button id="mobile-menu-button" class="md:hidden text-dark"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-2 flex flex-col space-y-3"> |
|
|
<a href="#home" class="text-dark hover:text-moroccoBlue font-medium py-2 transition">Accueil</a> |
|
|
<a href="#search" class="text-dark hover:text-moroccoBlue font-medium py-2 transition">Recherche</a> |
|
|
<a href="#pharmacies" class="text-dark hover:text-moroccoBlue font-medium py-2 transition">Pharmacies</a> |
|
|
<a href="#faq" class="text-dark hover:text-moroccoBlue font-medium py-2 transition">FAQ</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="home" class="bg-gradient-to-r from-moroccoBlue to-moroccoRed text-white py-16"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">Trouvez une pharmacie de garde à Kénitra</h2> |
|
|
<p class="text-xl mb-6">Service disponible 24h/24 et 7j/7 pour répondre à vos besoins urgents en médicaments.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#pharmacies" class="bg-white text-moroccoBlue font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition inline-block text-center"> |
|
|
Voir toutes les pharmacies |
|
|
</a> |
|
|
<a href="tel:05373-85323" class="bg-white text-moroccoBlue font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition inline-block text-center"> |
|
|
<i class="fas fa-phone mr-2"></i> Urgence |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1630&q=80" |
|
|
alt="Pharmacie de garde" |
|
|
class="rounded-lg shadow-xl w-full max-w-lg object-cover h-80"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="search" class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-dark mb-10">Recherche rapide</h2> |
|
|
|
|
|
<div class="max-w-3xl mx-auto bg-gray-50 rounded-xl p-6 shadow-md"> |
|
|
<div class="relative"> |
|
|
<input type="text" id="search-input" placeholder="Rechercher une pharmacie par nom ou adresse..." |
|
|
class="w-full px-4 py-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-moroccoBlue focus:border-transparent pl-12"> |
|
|
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
|
</div> |
|
|
<div id="search-results" class="mt-4 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-sm max-h-60 overflow-y-auto hidden" id="results-dropdown"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-3xl mx-auto mt-6 bg-gray-50 rounded-xl p-6 shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-4 text-center">Filtrer par quartier</h3> |
|
|
<div class="flex justify-center"> |
|
|
<div class="custom-dropdown"> |
|
|
<select id="quartiers-select"> |
|
|
<option value="all">Tous les quartiers</option> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pharmacies" class="py-12 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center mb-8"> |
|
|
<h3 class="text-2xl font-bold text-dark mb-4 md:mb-0">Pharmacies de garde à Kénitra</h3> |
|
|
<div id="results-count" class="text-gray-600 text-lg bg-white px-4 py-2 rounded-full shadow-sm"> |
|
|
<span id="pharmacies-count">52</span> pharmacies disponibles |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8 flex flex-wrap gap-2"> |
|
|
<button class="filter-tag active bg-moroccoBlue text-white px-4 py-2 rounded-full text-sm font-medium transition" data-tag="all"> |
|
|
Toutes |
|
|
</button> |
|
|
<button class="filter-tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-300 transition" data-tag="livraison"> |
|
|
<i class="fas fa-truck mr-1"></i> Livraison |
|
|
</button> |
|
|
<button class="filter-tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-300 transition" data-tag="polyclinique"> |
|
|
<i class="fas fa-hospital mr-1"></i> Polyclinique |
|
|
</button> |
|
|
<button class="filter-tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-300 transition" data-tag="urgence"> |
|
|
<i class="fas fa-first-aid mr-1"></i> Urgence |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="pharmacy-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="no-results" class="hidden text-center py-10"> |
|
|
<div class="max-w-md mx-auto"> |
|
|
<i class="fas fa-info-circle text-5xl text-gray-300 mb-4"></i> |
|
|
<h3 class="text-xl font-medium text-gray-600 mb-2">Aucune pharmacie trouvée</h3> |
|
|
<p class="text-gray-500">Essayez de modifier vos filtres ou votre recherche pour voir plus de résultats.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="faq" class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-dark mb-10">Foire aux questions</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto space-y-4"> |
|
|
<div class="bg-gray-50 rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<button class="faq-question w-full text-left px-6 py-4 hover:bg-gray-100 transition font-medium text-dark flex justify-between items-center"> |
|
|
Comment puis-je être sûr qu'une pharmacie est ouverte ? |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-answer px-6 py-4 hidden"> |
|
|
<p class="text-gray-700">Toutes les pharmacies listées sur notre site sont actuellement en service de garde. Nous mettons à jour régulièrement les informations. Nous vous recommandons d'appeler la pharmacie avant de vous déplacer pour confirmer.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<button class="faq-question w-full text-left px-6 py-4 hover:bg-gray-100 transition font-medium text-dark flex justify-between items-center"> |
|
|
Certaines pharmacies font-elles des livraisons à domicile ? |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-answer px-6 py-4 hidden"> |
|
|
<p class="text-gray-700">Oui, plusieurs pharmacies de Kénitra proposent un service de livraison à domicile. Vous pouvez filtrer les résultats avec le tag "Livraison" pour les identifier facilement. Le service peut être payant selon les pharmacies.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<button class="faq-question w-full text-left px-6 py-4 hover:bg-gray-100 transition font-medium text-dark flex justify-between items-center"> |
|
|
Que faire en cas d'urgence médicale grave ? |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-answer px-6 py-4 hidden"> |
|
|
<p class="text-gray-700">En cas d'urgence médicale grave (difficultés respiratoires, douleurs thoraciques, perte de connaissance, etc.), composez immédiatement le 15 (SAMU) ou le 112 (numéro d'urgence européen). Ne vous rendez pas directement dans une pharmacie dans ces cas.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-dark text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4">PharmaKénitra</h3> |
|
|
<p class="text-gray-400">Service de recherche de pharmacies de garde dans la ville de Kénitra.</p> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Contact</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt mr-3 text-moroccoBlue"></i> |
|
|
<span>Kénitra, Maroc</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone-alt mr-3 text-moroccoBlue"></i> |
|
|
<a href="tel:05373-85323" class="hover:text-white">0537 38 53 23</a> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope mr-3 text-moroccoBlue"></i> |
|
|
<a href="mailto:contact@pharmakenitra.ma" class="hover:text-white">contact@pharmakenitra.ma</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Liens utiles</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white">Ministère de la Santé</a></li> |
|
|
<li><a href="#" class="hover:text-white">Ordre des Pharmaciens</a></li> |
|
|
<li><a href="#" class="hover:text-white">Urgences Kénitra</a></li> |
|
|
<li><a href="#" class="hover:text-white">Hôpitaux et cliniques</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 PharmaKénitra. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 bg-moroccoBlue text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition transform hover:scale-110 hidden z-50"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const pharmaciesData = [ |
|
|
{ "name": "Pharmacie Al Ghofrane", "address": "lotis el ouafaa 3,N 128, magasin 1, saknia, Kénitra", "phone": "05373-85323", "status": "open", "tags": ["urgence"], "quartier": "Saknia" }, |
|
|
{ "name": "Pharmacie Zouhair", "address": "Kénitra", "phone": "05373-83436", "status": "open", "tags": [], "quartier": "Centre-Ville" }, |
|
|
{ "name": "KENIPHARMA", "address": "Angle Rue Saad Zaghloul Et, Rue Moulay slimane, Kenitra 14000", "phone": "05373-07000", "status": "open", "tags": [], "quartier": "Centre-Ville" }, |
|
|
{ "name": "Pharmacie Irchad", "address": "6FR2+FJ8, Av. El Massira, Kénitra", "phone": "05373-92900", "status": "open", "tags": [], "quartier": "El Massira" }, |
|
|
{ "name": "Pharmacie Diour PAM", "address": "6FX4+459, Kénitra", "phone": "N/A", "status": "open", "tags": [], "quartier": "Diour Jamaa" }, |
|
|
{ "name": "Pharmacie Cherkaoui", "address": "6CRX+HG4, Kénitra", "phone": "05373-92444", "status": "open", "tags": [], "quartier": "Bir Rami" }, |
|
|
{ "name": "Pharmacie alboustane", "address": "Bir Rami", "phone": "0530-963339", "status": "open", "tags": [], "quartier": "Bir Rami" }, |
|
|
{ "name": "Pharmacie al hamd", "address": "Lotis maghreb El Arabi Bloc D,N°659, Kénitra 14006", "phone": "05373-57473", "status": "open", "tags": [], "quartier": "Maghreb El Arabi" }, |
|
|
{ "name": "صيدلية المصلى", "address": "Kénitra", "phone": "0700-805267", "status": "open", "tags": [], "arabic": true, "quartier": "Masjid" }, |
|
|
{ "name": "Pharmacie Hay al Wafa", "address": "1130 Lotissement Wafa 4, Ain Sebaa, Kénitra", "phone": "05373-85051", "status": "open", "tags": [], "quartier": "Ain Sebaa" }, |
|
|
{ "name": "Pharmacie Hamza", "address": "6CVW+QCR, Av. El Massira, Kénitra", "phone": "05373-92136", "status": "open", "tags": [], "quartier": "El Massira" }, |
|
|
{ "name": "pharmacie de garde kenitra livraison à domicile", "address": "Rue de Séville, Kénitra 14000", "phone": "0602-805818", "status": "open", "tags": ["livraison"], "quartier": "Souk Sebt" }, |
|
|
{ "name": "Pharmacie El Andalous", "address": "Av. Bacha Abdelhamid El Alaoui, Kénitra", "phone": "05373-80622", "status": "open", "tags": [], "quartier": "Andalous" }, |
|
|
{ "name": "Commendé Liya", "address": "Av. El Massira, Kénitra 14040", "phone": "0629-799982", "status": "open", "tags": [], "quartier": "El Massira" }, |
|
|
{ "name": "صيدلية الأزهر Pharmacie Al Azhar", "address": "69XW+H28, Kénitra", "phone": "05373-63683", "status": "open", "tags": [], "arabic": true, "quartier": "Al Azhar" }, |
|
|
{ "name": "Pharmacie Sidi Larbi Boujemaâ", "address": "272 Av. Mohamed V, Kénitra", "phone": "05373-64898", "status": "open", "tags": [], "quartier": "Mohamed V" }, |
|
|
{ "name": "Pharmacie kenitra", "address": "53 Hay Al Amal, Kénitra", "phone": "0624-289299", "status": "open", "tags": [], "quartier": "Hay Al Amal" }, |
|
|
{ "name": "Pharmacie Du Passage", "address": "133 Rue 206, Kénitra 14000", "phone": "05373-63162", "status": "open", "tags": [], "quartier": "Passage" }, |
|
|
{ "name": "Pharmacie Sebou", "address": "7C77+J6X, Kenitra", "phone": "N/A", "status": "open", "tags": [], "quartier": "Sebou" }, |
|
|
{ "name": "Pharmacie Bab- Fès", "address": "7C9Q+43C, Av. Mohamed V, Kénitra", "phone": "05373-64664", "status": "open", "tags": [], "quartier": "Bab Fès" }, |
|
|
{ "name": "Pharmacie Avicennes", "address": "Av Said Daoudi, Quartier des Mimosas, 14080, Kenitra 14000", "phone": "05373-74874", "status": "open", "tags": ["urgence"], "quartier": "Mimosas" }, |
|
|
{ "name": "Pharmacie Centre Ville", "address": "7C58+3P6, P4266, Kénitra", "phone": "05373-76729", "status": "open", "tags": [], "quartier": "Centre-Ville" }, |
|
|
{ "name": "Pharmacie ismailia kenitra", "address": "bloc G, l 355, Kénitra", "phone": "05373-53616", "status": "open", "tags": [], "quartier": "Ismailia" }, |
|
|
{ "name": "Pharmacie REGRAGUI", "address": "PHARAMACIE REGRAGUI, 8 Rue Yacoub El Mansour Quartier, 1400, Kenitra 14000", "phone": "05373-61318", "status": "open", "tags": [], "quartier": "Yacoub El Mansour" }, |
|
|
{ "name": "Pharmacie Permanonece", "address": "7C36+J9R, Rue Abdelaziz Boutaleb, Kénitra", "phone": "N/A", "status": "open", "tags": [], "quartier": "Boutaleb" }, |
|
|
{ "name": "pharmacie SAOUMAÂ صيدلية الصومعة", "address": "Kénitra", "phone": "05373-57540", "status": "open", "tags": [], "arabic": true, "quartier": "Saoumaa" }, |
|
|
{ "name": "Pharmacie granada", "address": "792Q+74R, Kenitra", "phone": "05373-72606", "status": "open", "tags": [], "quartier": "Granada" }, |
|
|
{ "name": "Pharmacie DAR DOUA", "address": "7C37+HFP, Kénitra", "phone": "05373-60288", "status": "open", "tags": [], "quartier": "Dar Doua" }, |
|
|
{ "name": "Pharmacie Ait El Cadi", "address": "793P+63Q, Avenue E, Kénitra", "phone": "05373-73433", "status": "open", "tags": [], "quartier": "Ait El Cadi" }, |
|
|
{ "name": "Pharmacie de la Grande Avenue", "address": "Lot 446 , Bir Rami Sud - Zone Industrielle - Rocade Sud, Kénitra 14000", "phone": "05373-75430", "status": "open", "tags": [], "quartier": "Bir Rami" }, |
|
|
{ "name": "Pharmacie Et Parapharmacie Du Rif", "address": "6CX3+7VM, Av. 2 Mars, Kénitra", "phone": "05373-63300", "status": "open", "tags": [], "quartier": "2 Mars" }, |
|
|
{ "name": "Pharmacie Firdaouss", "address": "7C6C+QCX, Kenitra", "phone": "05373-71679", "status": "open", "tags": [], "quartier": "Firdaouss" }, |
|
|
{ "name": "Pharmacie Youssef Dr.Ahlam Benwahhoud.", "address": "Route de Mehdia,lot Ismailia n°1777, Kénitra", "phone": "05373-51605", "status": "open", "tags": [], "quartier": "Route Mehdia" }, |
|
|
{ "name": "Pharmacie Omar", "address": "7CF2+45R, Kénitra", "phone": "05373-66364", "status": "open", "tags": [], "quartier": "Omar" }, |
|
|
{ "name": "PHARMACIE HAY ESSALAM", "address": "7C93+79M, Kénitra", "phone": "05373-87810", "status": "open", "tags": [], "quartier": "Hay Essalam" }, |
|
|
{ "name": "Pharmacie De La Ville Haute", "address": "15, Rue Jamil Sidki Zouhaoui, 14020, Kénitra 14000", "phone": "05373-70453", "status": "open", "tags": [], "quartier": "Ville Haute" }, |
|
|
{ "name": "Pharmacie Ghani", "address": "Rue 1, Bir Rami 14000", "phone": "05373-79806", "status": "open", "tags": [], "quartier": "Bir Rami" }, |
|
|
{ "name": "Pharmacie moustachfa idrissi", "address": "Kénitra", "phone": "05373-73276", "status": "open", "tags": ["polyclinique"], "quartier": "Moustachfa" }, |
|
|
{ "name": "Pharmacie Rayane", "address": "79CV+69X, Kénitra", "phone": "05373-52957", "status": "open", "tags": [], "quartier": "Rayane" }, |
|
|
{ "name": "Pharmacie Sanae", "address": "798H+MJ6، Unnamed Road, Kenitra", "phone": "05373-55655", "status": "open", "tags": [], "quartier": "Sanae" }, |
|
|
{ "name": "Pharmacie des FAR", "address": "7C3C+M6X, Ave des FAR, Kenitra", "phone": "05373-66748", "status": "open", "tags": [], "quartier": "FAR" }, |
|
|
{ "name": "Pharmacie touijer ait oukhadda", "address": "n° 20, Zenqa 36, khabazat 14000", "phone": "05373-76243", "status": "open", "tags": [], "quartier": "Khabazat" }, |
|
|
{ "name": "Pharmacie Hind", "address": "Angle boulevard Youssef Ibn Tachfin et, Rue Farahat Hachad، hached 14000", "phone": "05373-61296", "status": "open", "tags": [], "quartier": "Hached" }, |
|
|
{ "name": "Pharmacie Azzahrae", "address": "792H+4VM, Kenitra", "phone": "05373-55071", "status": "open", "tags": [], "quartier": "Azzahrae" }, |
|
|
{ "name": "Pharmacie SARAH", "address": "7C85+MRF, Av. Abou Bakr Seddik, Kénitra", "phone": "05373-64541", "status": "open", "tags": [], "quartier": "Abou Bakr Seddik" }, |
|
|
{ "name": "Pharmacie Siham", "address": "794P+79W, Kenitra", "phone": "05373-60805", "status": "open", "tags": ["livraison"], "quartier": "Siham" }, |
|
|
{ "name": "Pharmacie ezzoubair", "address": "Bir Rami 14000", "phone": "0530-210775", "status": "open", "tags": [], "quartier": "Bir Rami" }, |
|
|
{ "name": "Pharmacie Venezia", "address": "79GW+57H, Ismailia, Kenitra 14000", "phone": "05373-55065", "status": "open", "tags": [], "quartier": "Venezia" }, |
|
|
{ "name": "Pharmacie principale al bassatine", "address": "Unnamed Road, Kénitra", "phone": "0660-915475", "status": "open", "tags": [], "quartier": "Al Bassatine" }, |
|
|
{ "name": "Pharmacie La Nouvelle Ville De Sidi Taibi", "address": "Douar Ouled Nsar Gharbia, C/R Sidi Taibi, Kénitra 14000", "phone": "05373-73447", "status": "open", "tags": [], "quartier": "Sidi Taibi" }, |
|
|
{ "name": "Pharmacie Arrohama", "address": "Lot 456 al wafa 1 souk sebt, Kenitra 14000", "phone": "05373-83136", "status": "open", "tags": ["livraison"], "quartier": "Souk Sebt" }, |
|
|
{ "name": "Pharmacie Benlahsen", "address": "12 Rue Ibn Battouta, Kénitra 14000", "phone": "05373-70350", "status": "open", "tags": [], "quartier": "Ibn Battouta" }, |
|
|
{ "name": "Pharmacie Les IRIS", "address": "79CP+WGC, Kénitra", "phone": "05373-51718", "status": "open", "tags": [], "quartier": "Les Iris" }, |
|
|
{ "name": "Pharmacie Aljamai", "address": "4, Av Hassan Ii, Hay Essalam Bloc F, Sidi Slimane, Kénitra 14000", "phone": "05375-01850", "status": "open", "tags": [], "quartier": "Hay Essalam" }, |
|
|
{ "name": "Pharmacie Route Mehdia", "address": "Lotiss. Azharoune, Lot 134 N°1, Kénitra 14000", "phone": "05373-55407", "status": "open", "tags": [], "quartier": "Route Mehdia" }, |
|
|
{ "name": "Pharmacie Arsat Elcadi", "address": "7C9Q+XXW, Av. Mohamed V, Kénitra 14000", "phone": "05373-82309", "status": "open", "tags": [], "quartier": "Arsat Elcadi" }, |
|
|
{ "name": "Pharmacie Yaacoub صيدلية يعقوب", "address": "Ouled Arfa. Saknia, Lotissement Al Andalous. N 385, Kénitra 14000", "phone": "N/A", "status": "open", "tags": [], "arabic": true, "quartier": "Andalous" }, |
|
|
{ "name": "Pharmacie Mimosas / صيدلية ميموزة", "address": "Av. Mohamed V, Kénitra", "phone": "05373-74523", "status": "open", "tags": [], "arabic": true, "quartier": "Mimosas" }, |
|
|
{ "name": "Pharmacie Amine", "address": "69VP+7PP, Kénitra", "phone": "0665-306388", "status": "open", "tags": ["livraison", "urgence"], "quartier": "Amine" } |
|
|
]; |
|
|
|
|
|
|
|
|
const quartiers = [...new Set(pharmaciesData.map(pharmacy => pharmacy.quartier))]; |
|
|
|
|
|
|
|
|
const pharmacyResults = document.getElementById('pharmacy-results'); |
|
|
const searchInput = document.getElementById('search-input'); |
|
|
const resultsDropdown = document.getElementById('results-dropdown'); |
|
|
const filterTags = document.querySelectorAll('.filter-tag'); |
|
|
const pharmaciesCount = document.getElementById('pharmacies-count'); |
|
|
const quartiersSelect = document.getElementById('quartiers-select'); |
|
|
const noResultsMessage = document.getElementById('no-results'); |
|
|
|
|
|
|
|
|
let filteredPharmacies = [...pharmaciesData]; |
|
|
let activeTag = 'all'; |
|
|
let activeQuartier = 'all'; |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const faqQuestions = document.querySelectorAll('.faq-question'); |
|
|
|
|
|
faqQuestions.forEach(question => { |
|
|
question.addEventListener('click', () => { |
|
|
const answer = question.nextElementSibling; |
|
|
const icon = question.querySelector('i'); |
|
|
|
|
|
|
|
|
answer.classList.toggle('hidden'); |
|
|
|
|
|
|
|
|
icon.classList.toggle('rotate-180'); |
|
|
|
|
|
|
|
|
faqQuestions.forEach(q => { |
|
|
if (q !== question) { |
|
|
q.nextElementSibling.classList.add('hidden'); |
|
|
q.querySelector('i').classList.remove('rotate-180'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('hidden'); |
|
|
} else { |
|
|
backToTopButton.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
function initQuartiersDropdown() { |
|
|
|
|
|
quartiers.forEach(quartier => { |
|
|
const option = document.createElement('option'); |
|
|
option.value = quartier; |
|
|
option.textContent = quartier; |
|
|
quartiersSelect.appendChild(option); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function displayPharmacies(pharmacies) { |
|
|
pharmacyResults.innerHTML = ''; |
|
|
|
|
|
if (pharmacies.length === 0) { |
|
|
noResultsMessage.classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
noResultsMessage.classList.add('hidden'); |
|
|
|
|
|
pharmacies.forEach((pharmacy, index) => { |
|
|
|
|
|
const delay = index * 100; |
|
|
|
|
|
const isArabic = pharmacy.arabic || false; |
|
|
const phoneDisplay = pharmacy.phone === "N/A" ? "Non disponible" : pharmacy.phone; |
|
|
const encodedAddress = encodeURIComponent(`${pharmacy.name}, ${pharmacy.address}`); |
|
|
const googleMapsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodedAddress}`; |
|
|
|
|
|
const pharmacyCard = document.createElement('div'); |
|
|
pharmacyCard.className = `pharmacy-card bg-white rounded-xl shadow-md overflow-hidden relative ${isArabic ? 'arabic-text' : ''}`; |
|
|
pharmacyCard.style.animationDelay = `${delay}ms`; |
|
|
|
|
|
|
|
|
const statusClass = pharmacy.status === "open" ? "status-open" : "status-closed"; |
|
|
const statusText = pharmacy.status === "open" ? "OUVERT" : "FERMÉ"; |
|
|
|
|
|
|
|
|
let tagsHtml = ''; |
|
|
pharmacy.tags.forEach(tag => { |
|
|
let tagClass = ''; |
|
|
let icon = ''; |
|
|
|
|
|
if (tag === 'livraison') { |
|
|
tagClass = 'bg-green-100 text-green-800'; |
|
|
icon = '<i class="fas fa-truck mr-1"></i>'; |
|
|
} else if (tag === 'urgence') { |
|
|
tagClass = 'bg-red-100 text-red-800'; |
|
|
icon = '<i class="fas fa-first-aid mr-1"></i>'; |
|
|
} else if (tag === 'polyclinique') { |
|
|
tagClass = 'bg-blue-100 text-blue-800'; |
|
|
icon = '<i class="fas fa-hospital mr-1"></i>'; |
|
|
} |
|
|
|
|
|
tagsHtml += `<span class="text-xs font-medium px-2 py-1 rounded-full ${tagClass} mr-2">${icon}${tag}</span>`; |
|
|
}); |
|
|
|
|
|
pharmacyCard.innerHTML = ` |
|
|
<div class="relative h-40 bg-gradient-to-r from-gray-100 to-gray-200 flex items-center justify-center"> |
|
|
<i class="fas fa-prescription-bottle-alt text-5xl text-gray-300"></i> |
|
|
<div class="absolute top-3 left-3 flex flex-wrap">${tagsHtml}</div> |
|
|
<div class="absolute top-4 right-4 ${statusClass} text-white text-xs font-bold px-3 py-1 rounded-full"> |
|
|
${statusText} |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h4 class="text-xl font-bold text-dark mb-2">${pharmacy.name}</h4> |
|
|
|
|
|
<div class="flex items-start text-gray-600 mb-3"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-2 text-sm text-moroccoBlue"></i> |
|
|
<span class="text-sm">${pharmacy.address || 'Adresse non disponible'}</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center text-gray-600 mb-4"> |
|
|
<i class="fas fa-phone-alt mr-2 text-sm text-moroccoBlue"></i> |
|
|
${phoneDisplay === "Non disponible" ? |
|
|
`<span class="text-sm">${phoneDisplay}</span>` : |
|
|
`<a href="tel:${phoneDisplay.replace(/-/g, '')}" class="text-sm hover:text-moroccoBlue transition">${phoneDisplay}</a>`} |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center pt-3 border-t border-gray-100"> |
|
|
<a href="${googleMapsUrl}" target="_blank" class="text-moroccoBlue text-sm font-medium flex items-center hover:text-moroccoRed transition"> |
|
|
<i class="fas fa-directions mr-1"></i> Itinéraire |
|
|
</a> |
|
|
<button class="text-moroccoBlue text-sm font-medium flex items-center hover:text-moroccoRed transition"> |
|
|
<i class="far fa-heart mr-1"></i> Favoris |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
pharmacyResults.appendChild(pharmacyCard); |
|
|
}); |
|
|
|
|
|
|
|
|
pharmaciesCount.textContent = pharmacies.length; |
|
|
} |
|
|
|
|
|
|
|
|
function filterByTag(tag) { |
|
|
activeTag = tag; |
|
|
applyFilters(); |
|
|
} |
|
|
|
|
|
|
|
|
function filterByQuartier(quartier) { |
|
|
activeQuartier = quartier; |
|
|
applyFilters(); |
|
|
} |
|
|
|
|
|
|
|
|
function applyFilters() { |
|
|
filteredPharmacies = pharmaciesData.filter(pharmacy => { |
|
|
|
|
|
const tagMatch = activeTag === 'all' || pharmacy.tags.includes(activeTag); |
|
|
|
|
|
|
|
|
const quartierMatch = activeQuartier === 'all' || pharmacy.quartier === activeQuartier; |
|
|
|
|
|
return tagMatch && quartierMatch; |
|
|
}); |
|
|
|
|
|
displayPharmacies(filteredPharmacies); |
|
|
} |
|
|
|
|
|
|
|
|
function searchPharmacies(query) { |
|
|
if (!query) { |
|
|
resultsDropdown.classList.add('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const searchTerm = query.toLowerCase(); |
|
|
const results = pharmaciesData.filter(pharmacy => { |
|
|
return ( |
|
|
pharmacy.name.toLowerCase().includes(searchTerm) || |
|
|
(pharmacy.address && pharmacy.address.toLowerCase().includes(searchTerm)) || |
|
|
(pharmacy.quartier && pharmacy.quartier.toLowerCase().includes(searchTerm)) |
|
|
); |
|
|
}); |
|
|
|
|
|
|
|
|
resultsDropdown.innerHTML = ''; |
|
|
|
|
|
if (results.length > 0) { |
|
|
results.slice(0, 5).forEach(pharmacy => { |
|
|
const resultItem = document.createElement('div'); |
|
|
resultItem.className = 'p-3 hover:bg-gray-100 cursor-pointer flex justify-between items-center'; |
|
|
|
|
|
|
|
|
const nameHighlight = pharmacy.name.toLowerCase().includes(searchTerm) ? |
|
|
pharmacy.name.replace(new RegExp(searchTerm, 'gi'), match => `<span class="search-highlight">${match}</span>`) : |
|
|
pharmacy.name; |
|
|
|
|
|
const addressHighlight = pharmacy.address && pharmacy.address.toLowerCase().includes(searchTerm) ? |
|
|
pharmacy.address.replace(new RegExp(searchTerm, 'gi'), match => `<span class="search-highlight">${match}</span>`) : |
|
|
(pharmacy.address || ''); |
|
|
|
|
|
resultItem.innerHTML = ` |
|
|
<div> |
|
|
<div class="font-medium">${nameHighlight}</div> |
|
|
<div class="text-xs text-gray-600">${addressHighlight}</div> |
|
|
${pharmacy.quartier ? `<div class="text-xs text-gray-500 mt-1"><i class="fas fa-map-marker-alt mr-1"></i>${pharmacy.quartier}</div>` : ''} |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
`; |
|
|
|
|
|
resultItem.addEventListener('click', () => { |
|
|
|
|
|
document.getElementById('pharmacies').scrollIntoView({ behavior: 'smooth' }); |
|
|
|
|
|
|
|
|
filteredPharmacies = [pharmacy]; |
|
|
displayPharmacies(filteredPharmacies); |
|
|
|
|
|
|
|
|
searchInput.value = ''; |
|
|
resultsDropdown.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
resultsDropdown.appendChild(resultItem); |
|
|
}); |
|
|
|
|
|
resultsDropdown.classList.remove('hidden'); |
|
|
} else { |
|
|
resultsDropdown.innerHTML = '<div class="p-3 text-gray-500">Aucun résultat trouvé</div>'; |
|
|
resultsDropdown.classList.remove('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
searchInput.addEventListener('input', (e) => { |
|
|
searchPharmacies(e.target.value); |
|
|
}); |
|
|
|
|
|
searchInput.addEventListener('focus', () => { |
|
|
if (searchInput.value) { |
|
|
resultsDropdown.classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!searchInput.contains(e.target) && !resultsDropdown.contains(e.target)) { |
|
|
resultsDropdown.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
quartiersSelect.addEventListener('change', (e) => { |
|
|
filterByQuartier(e.target.value); |
|
|
}); |
|
|
|
|
|
|
|
|
filterTags.forEach(tag => { |
|
|
tag.addEventListener('click', () => { |
|
|
|
|
|
filterTags.forEach(t => t.classList.remove('active', 'bg-moroccoBlue', 'text-white')); |
|
|
filterTags.forEach(t => t.classList.add('bg-gray-200', 'text-gray-700')); |
|
|
|
|
|
tag.classList.add('active', 'bg-moroccoBlue', 'text-white'); |
|
|
tag.classList.remove('bg-gray-200', 'text-gray-700'); |
|
|
|
|
|
|
|
|
filterByTag(tag.dataset.tag); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
initQuartiersDropdown(); |
|
|
displayPharmacies(pharmaciesData); |
|
|
</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=med5457/ggg" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
