From 624fb4abbc3ea154ce15e1bf1585dc16afaa645a Mon Sep 17 00:00:00 2001
From: PaulVua <paulvuarambon@gmail.com>
Date: Tue, 6 Jan 2026 16:29:44 +0100
Subject: [PATCH] Add sidebar i18n support and fix language selector visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extended the internationalization system to support sidebar navigation menu with French/English translations. Fixed language selector dropdown styling to improve text visibility with proper contrast (gray background instead of transparent).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 html/lang/en.json | 11 +++++++++++
 html/lang/fr.json | 11 +++++++++++
 html/sidebar.html | 20 ++++++++++----------
 html/topbar.html  |  6 +++---
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/html/lang/en.json b/html/lang/en.json
index 9f696c4..7bda85d 100644
--- a/html/lang/en.json
+++ b/html/lang/en.json
@@ -49,5 +49,16 @@
     "deviceName": "Device Name",
     "deviceID": "Device ID",
     "modemVersion": "Modem Version"
+  },
+  "sidebar": {
+    "home": "Home",
+    "sensors": "Sensors",
+    "database": "Database",
+    "modem4g": "4G Modem",
+    "wifi": "WIFI",
+    "logs": "Logs",
+    "map": "Map",
+    "terminal": "Terminal",
+    "admin": "Admin"
   }
 }
diff --git a/html/lang/fr.json b/html/lang/fr.json
index bceb6b0..3eee6a7 100644
--- a/html/lang/fr.json
+++ b/html/lang/fr.json
@@ -49,5 +49,16 @@
     "deviceName": "Nom de l'appareil",
     "deviceID": "ID de l'appareil",
     "modemVersion": "Version du modem"
+  },
+  "sidebar": {
+    "home": "Accueil",
+    "sensors": "Capteurs",
+    "database": "Base de données",
+    "modem4g": "Modem 4G",
+    "wifi": "WIFI",
+    "logs": "Logs",
+    "map": "Carte",
+    "terminal": "Terminal",
+    "admin": "Admin"
   }
 }
diff --git a/html/sidebar.html b/html/sidebar.html
index 3d40307..ae237b0 100755
--- a/html/sidebar.html
+++ b/html/sidebar.html
@@ -4,34 +4,34 @@
         <svg class="bi me-2" width="16" height="16" fill="currentColor" aria-hidden="true">
             <use xlink:href="assets/icons/bootstrap-icons.svg#house"></use>
         </svg>
-        Home
+        <span data-i18n="sidebar.home">Accueil</span>
       </a>
       <a class="nav-link text-white" href="sensors.html">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-thermometer-sun" viewBox="0 0 16 16">
             <path d="M5 12.5a1.5 1.5 0 1 1-2-1.415V2.5a.5.5 0 0 1 1 0v8.585A1.5 1.5 0 0 1 5 12.5"/>
             <path d="M1 2.5a2.5 2.5 0 0 1 5 0v7.55a3.5 3.5 0 1 1-5 0zM3.5 1A1.5 1.5 0 0 0 2 2.5v7.987l-.167.15a2.5 2.5 0 1 0 3.333 0L5 10.486V2.5A1.5 1.5 0 0 0 3.5 1m5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5m4.243 1.757a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 1 1-.708-.708l.708-.707a.5.5 0 0 1 .707 0M8 5.5a.5.5 0 0 1 .5-.5 3 3 0 1 1 0 6 .5.5 0 0 1 0-1 2 2 0 0 0 0-4 .5.5 0 0 1-.5-.5M12.5 8a.5.5 0 0 1 .5-.5h1a.5.5 0 1 1 0 1h-1a.5.5 0 0 1-.5-.5m-1.172 2.828a.5.5 0 0 1 .708 0l.707.708a.5.5 0 0 1-.707.707l-.708-.707a.5.5 0 0 1 0-.708M8.5 12a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5"/>
           </svg>
-        Capteurs
+        <span data-i18n="sidebar.sensors">Capteurs</span>
       </a>
       <a class="nav-link text-white" href="database.html">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-database" viewBox="0 0 16 16">
           <path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313M13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A5 5 0 0 0 13 5.698M14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A5 5 0 0 0 13 8.698m0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525"/>
         </svg>
-      
-        DataBase
+
+        <span data-i18n="sidebar.database">Base de données</span>
       </a>
       <a class="nav-link text-white" href="saraR4.html">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reception-4" viewBox="0 0 16 16">
             <path d="M0 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5z"/>
           </svg>
-        Modem 4G
+        <span data-i18n="sidebar.modem4g">Modem 4G</span>
       </a>
       <a class="nav-link text-white" href="wifi.html">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wifi" viewBox="0 0 16 16">
             <path d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.44 12.44 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.52.52 0 0 0 .668.05A11.45 11.45 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049"/>
             <path d="M13.229 8.271a.482.482 0 0 0-.063-.745A9.46 9.46 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065m-2.183 2.183c.226-.226.185-.605-.1-.75A6.5 6.5 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.5 5.5 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091zM9.06 12.44c.196-.196.198-.52-.04-.66A2 2 0 0 0 8 11.5a2 2 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z"/>
           </svg>
-         WIFI
+         <span data-i18n="sidebar.wifi">WIFI</span>
       </a>
       <a class="nav-link text-white" href="logs.html">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16">
@@ -39,25 +39,25 @@
             <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"/>
             <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"/>
           </svg>
-        Logs
+        <span data-i18n="sidebar.logs">Logs</span>
       </a>
       <a class="nav-link text-white" href="map.html">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
           <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
         </svg>
-        Carte
+        <span data-i18n="sidebar.map">Carte</span>
       </a>
       <a class="nav-link text-white" href="terminal.html">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal-fill" viewBox="0 0 16 16">
           <path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm9.5 5.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm-6.354-.354a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146z"/>
         </svg>
-        Terminal
+        <span data-i18n="sidebar.terminal">Terminal</span>
       </a>
       <a class="nav-link text-white" href="admin.html">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tools" viewBox="0 0 16 16">
             <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/>
           </svg>
-        Admin
+        <span data-i18n="sidebar.admin">Admin</span>
       </a>
 
        <!-- New content at the bottom -->
diff --git a/html/topbar.html b/html/topbar.html
index e029fb8..7aac71b 100755
--- a/html/topbar.html
+++ b/html/topbar.html
@@ -13,9 +13,9 @@
                 -->
 
             <!-- Language Switcher -->
-            <select class="form-select form-select-sm me-2" id="languageSwitcher" style="width: auto; background-color: transparent; color: white; border-color: white;" onchange="i18n.setLanguage(this.value)">
-                <option value="fr">🇫🇷 FR</option>
-                <option value="en">🇬🇧 EN</option>
+            <select class="form-select form-select-sm me-2" id="languageSwitcher" style="width: auto; background-color: #6c757d; color: white; border-color: white;" onchange="i18n.setLanguage(this.value)">
+                <option value="fr" style="background-color: #6c757d; color: white;">🇫🇷 FR</option>
+                <option value="en" style="background-color: #6c757d; color: white;">🇬🇧 EN</option>
             </select>
 
             <button type="button" class="btn btn-outline-light" id="RTC_time">loading...</button>