< !
DOCTYPE html>
<html lang= »fr »>
<head>
<meta charset= »UTF-8 »>
<meta name= »viewport » content= »width=device-width, initial-
scale=1.0 »>
<title>Pharmacies de Garde – Burkina Faso</title>
<style>
Body {
Font-family : Arial, sans-serif ;
Margin : 0 ;
Padding : 0 ;
Background-color : #f4f4f4 ;
Display : flex ;
/* --- MENU VERTICAL --- */
#menu {
Width : 250px ;
Background : #2E7D32 ;
Color : white ;
Padding : 1rem ;
Height : 100vh ;
Position : fixed ;
#menu h2 {
Text-align : center ;
Border-bottom : 1px solid white ;
Padding-bottom : 10px ;
#menu ul {
List-style : none ;
Padding : 0 ;
#menu li {
Padding : 10px ;
Border-bottom : 1px solid #fff ;
Cursor : pointer ;
#menu li :hover {
Background : #388E3C ;
/* --- CONTENU PRINCIPAL --- */
#content {
Margin-left : 260px ;
Padding : 20px ;
Width : calc(100% - 260px) ;
Header {
Background-color : #4CAF50 ;
Color : white ;
Padding : 1rem ;
Text-align : center ;
Select, #geoBtn {
Padding : 0.5rem ;
Margin : 0.5rem ;
#pharmacies-list {
Display : flex ;
Flex-wrap : wrap ;
Justify-content : center ;
Padding : 1rem ;
.pharmacy-card {
Background : white ;
Border : 1px solid #ddd ;
Border-radius : 5px ;
Margin : 0.5rem ;
Padding : 1rem ;
Width : 300px ;
Box-shadow : 0 2px 5px rgba(0, 0, 0, 0.1) ;
/* --- MESSAGERIE --- */
#chat {
Margin-top : 20px ;
Padding : 1rem ;
Max-width : 600px ;
Background : white ;
Border : 1px solid #ddd ;
Border-radius : 5px ;
#messages {
Height : 200px ;
Overflow-y : scroll ;
Border : 1px solid #ddd ;
Padding : 0.5rem ;
Margin-bottom : 1rem ;
#messageInput {
Width : calc(100% - 80px) ;
Padding : 0.5rem ;
#sendBtn {
Width : 70px ;
Padding : 0.5rem ;
</style>
</head>
<body>
< !—MENU VERTICAL
<div id= »menu »>
<h2>Menu</h2>
<ul>
<li onclick= »showSection(‘pharmacies’) »>📋 Liste des
pharmacies</li>
<li onclick= »showSection(‘chat’) »>💬 Messagerie</li>
<li onclick= »showSection(‘geo’) »>📍 Géolocalisation</li>
<li onclick= »showSection(‘orders’) »>🛒 Commandes</li>
</ul>
</div>
<div id= »content »>
< !—HEADER
<header>
<h1>Pharmacies de Garde</h1>
<select id= »citySelect »>
<option value= » »>Sélectionner une ville</option>
<option value= »Koudougou »>Koudougou</option>
<option value= »Ouagadougou »>Ouagadougou</option>
<option value= »Gourci »>Gourci</option>
</select>
<button id= »geoBtn »>📍 Géolocalisation</button>
</header>
< !—LISTE DES PHARMACIES
<section id= »pharmacies »>
<div id= »pharmacies-list »></div>
</section>
< !—MESSAGERIE
<section id= »chat » style= »display : none ; »>
<h2>Messagerie</h2>
<div id= »messages »></div>
<input type= »text » id= »messageInput » placeholder= »Écrivez un
message… »>
<button id= »sendBtn »>Envoyer</button>
</section>
< !—SECTION GÉOLOCALISATION (À DÉVELOPPER)
<section id= »geo » style= »display : none ; »>
<h2>📍 Géolocalisation</h2>
<p>Ajoutez ici la carte et la localisation des pharmacies.</p>
</section>
< !—SECTION COMMANDES (À DÉVELOPPER)
<section id= »orders » style= »display : none ; »>
<h2>🛒 Commandes</h2>
<p>Ajoutez ici le formulaire de commande des médicaments.</p>
</section>
</div>
<script>
Const pharmaciesData = {
« Koudougou » : [
{ name : « Pharmacie Kuilg-noore », address : « Rue 1 », phone : « 70
00 00 01 », garde : « 20h – 8h » },
{ name : « Pharmacie Habib », address : « Rue 2 », phone : « 70 00
00 02 », garde : « 20h – 8h » },
{ name : « Pharmacie Galys », address : « Rue 3 », phone : « 70 00
00 03 », garde : « 8h – 20h » },
{ name : « Pharmacie Zoodo », address : « Rue 4 », phone : « 70 00
00 04 », garde : « 24h/24 » }
],
« Ouagadougou » : [
{ name : « Pharmacie Centrale », address : « Rue A », phone : « 70
11 11 11 », garde : « 24h/24 » },
{ name : « Pharmacie Yennenga », address : « Rue B », phone : « 70
11 11 12 », garde : « 20h – 8h » },
{ name : « Pharmacie Paix », address : « Rue C », phone : « 70 11 11
13 », garde : « 20h – 8h » }
],
« Gourci » : [
{ name : « Pharmacie Espoir », address : « Quartier 1 », phone : « 70
22 22 21 », garde : « 24h/24 » },
{ name : « Pharmacie Vie », address : « Quartier 2 », phone : « 70 22
22 22 », garde : « 20h – 8h » },
{ name : « Pharmacie Santé », address : « Quartier 3 », phone : « 70
22 22 23 », garde : « 8h – 20h » }
};
[Link](‘citySelect’).addEventListener(‘change’,
function () {
Const city = [Link] ;
Const list = [Link](‘pharmacies-list’) ;
[Link] = ‘’ ;
If (city && pharmaciesData[city]) {
pharmaciesData[city].forEach(pharmacy => {
[Link] += `
<div class= »pharmacy-card »>
<h3>${[Link]}</h3>
<p>${[Link]}</p>
<p>📞 ${[Link]}</p>
<p>🕒 ${[Link]}</p>
</div>
`;
}) ;
}) ;
Function showSection(id) {
[Link](‘section’).forEach(sec => [Link]
= « none ») ;
[Link](id).[Link] = « block » ;
</script>
</body>
</html>
