From 4df29fc157f3d2576158d098bedea2ec91ada9cd Mon Sep 17 00:00:00 2001
From: PaulVua <you@example.com>
Date: Thu, 9 Jan 2025 16:55:31 +0100
Subject: [PATCH] update

---
 README.md               |    5 +-
 SARA/sara.py            |    3 +
 SARA/sara_setAPN.py     |   68 +++
 config.json.dist        |    6 +-
 html/launcher.php       |    2 +-
 html/saraR4.html        |   15 +-
 html/wifi.html          |  208 ++++++-
 index.html              | 1273 ++-------------------------------------
 index_old.html          | 1235 +++++++++++++++++++++++++++++++++++++
 loop/1_NPM/send_data.py |    4 +-
 10 files changed, 1580 insertions(+), 1239 deletions(-)
 mode change 100644 => 100755 README.md
 create mode 100755 SARA/sara_setAPN.py
 create mode 100755 index_old.html

diff --git a/README.md b/README.md
old mode 100644
new mode 100755
index 3adcf96..5c160ed
--- a/README.md
+++ b/README.md
@@ -25,13 +25,14 @@ sudo mkdir /var/www/nebuleair_pro_4g/logs
 sudo touch /var/www/nebuleair_pro_4g/logs/app.log /var/www/nebuleair_pro_4g/logs/loop.log
 sudo cp /var/www/nebuleair_pro_4g/config.json.dist /var/www/nebuleair_pro_4g/config.json
 sudo chmod -R 777 /var/www/nebuleair_pro_4g/
-git config core.fileMode false
+git config --global core.fileMode false
+git config --global --add safe.directory /var/www/nebuleair_pro_4g
 sudo crontab /var/www/nebuleair_pro_4g/cron_jobs
 ```
 ## Apache
 Configuration of Apache to redirect to the html homepage project
 ```
-sudo sed -i 's|DocumentRoot /var/www/html|DocumentRoot /var/www/nebuleair_pro_4g/html|' /etc/apache2/sites-available/000-default.conf
+sudo sed -i 's|DocumentRoot /var/www/html|DocumentRoot /var/www/nebuleair_pro_4g|' /etc/apache2/sites-available/000-default.conf
 sudo systemctl reload apache2
 ```
 
diff --git a/SARA/sara.py b/SARA/sara.py
index 74872f3..c4cc291 100755
--- a/SARA/sara.py
+++ b/SARA/sara.py
@@ -2,6 +2,9 @@
 Script to see if the SARA-R410 is running
 ex: 
 python3 /var/www/nebuleair_pro_4g/SARA/sara.py ttyAMA2 AT+CCID? 2
+ex 2 (turn on blue light):
+python3 /var/www/nebuleair_pro_4g/SARA/sara.py ttyAMA2 AT+UGPIOC=16,2 2
+
 '''
 
 import serial
diff --git a/SARA/sara_setAPN.py b/SARA/sara_setAPN.py
new file mode 100755
index 0000000..330e6fd
--- /dev/null
+++ b/SARA/sara_setAPN.py
@@ -0,0 +1,68 @@
+'''
+Script to connect SARA-R410 to APN
+AT+CGDCONT=1,"IP","data.mono"
+
+/usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_setAPN.py ttyAMA2 data.mono 2
+'''
+
+import serial
+import time
+import sys
+import json
+
+parameter = sys.argv[1:]  # Exclude the script name
+port='/dev/'+parameter[0] # ex: ttyAMA2
+apn_address = parameter[1]  # ex: data.mono
+timeout = float(parameter[2])  # ex:2
+
+
+#get baudrate
+def load_config(config_file):
+    try:
+        with open(config_file, 'r') as file:
+            config_data = json.load(file)
+        return config_data
+    except Exception as e:
+        print(f"Error loading config file: {e}")
+        return {}
+
+# Define the config file path
+config_file = '/var/www/nebuleair_pro_4g/config.json'
+# Load the configuration data
+config = load_config(config_file)
+# Access the shared variables
+baudrate = config.get('SaraR4_baudrate', 115200)
+
+ser = serial.Serial(
+    port=port,  #USB0 or ttyS0
+    baudrate=baudrate, #115200 ou 9600
+    parity=serial.PARITY_NONE, #PARITY_NONE, PARITY_EVEN or PARITY_ODD
+    stopbits=serial.STOPBITS_ONE,
+    bytesize=serial.EIGHTBITS,
+    timeout = timeout
+)
+
+command = f'AT+CGDCONT=1,"IP","{apn_address}"\r'
+ser.write((command + '\r').encode('utf-8'))
+
+
+try:
+    # Read lines until a timeout occurs
+    response_lines = []
+    while True:
+        line = ser.readline().decode('utf-8').strip()
+        if not line:
+            break  # Break the loop if an empty line is encountered
+        response_lines.append(line)
+
+    # Print the response
+    for line in response_lines:
+        print(line)
+
+except serial.SerialException as e:
+    print(f"Error: {e}")
+
+finally:
+    if ser.is_open:
+        ser.close()
+        #print("Serial closed")
diff --git a/config.json.dist b/config.json.dist
index 6c31450..17b1cae 100755
--- a/config.json.dist
+++ b/config.json.dist
@@ -6,7 +6,7 @@
   "NextPM_ports": [
     "ttyAMA5"
   ],
-  "i2C_sound": true,
+  "i2C_sound": false,
   "i2c_BME": false,
   "sshTunnel_port": 59228,
   "npm1_status": "connected",
@@ -14,10 +14,10 @@
   "SARA_R4_SIM_status": "connected",
   "SARA_R4_network_status": "connected",
   "WIFI_status": "connected",
-  "MQTT_GUI": true,
+  "MQTT_GUI": false,
   "envea_sondes": [
     {
-      "connected": true,
+      "connected": false,
       "port": "ttyAMA4",
       "name": "h2s",
       "coefficient" : 4
diff --git a/html/launcher.php b/html/launcher.php
index ea5355a..150e346 100755
--- a/html/launcher.php
+++ b/html/launcher.php
@@ -115,7 +115,7 @@ if ($type == "sara_APN") {
     $port=$_GET['port'];
     $timeout=$_GET['timeout'];
     $APN_address=$_GET['APN_address'];
-    $command = '/usr/bin/python3 /var/www/moduleair_pro_4g/SARA/sara_setAPN.py ' . $port . ' ' . $APN_address . ' ' . $timeout;
+    $command = '/usr/bin/python3 /var/www/nebuleair_pro_4g/SARA/sara_setAPN.py ' . $port . ' ' . $APN_address . ' ' . $timeout;
     $output = shell_exec($command);
     echo $output;
 }
diff --git a/html/saraR4.html b/html/saraR4.html
index d9e6849..80ced94 100755
--- a/html/saraR4.html
+++ b/html/saraR4.html
@@ -55,6 +55,7 @@
           Status 
             <span id="modem-status" class="badge">Loading...</span>
           </h3>
+          
           <div class="row mb-3">
 
             <div class="col-sm-3">
@@ -111,6 +112,7 @@
           </div>
       
           <h3>Connexion 4G Network</h3>
+          
           <div class="row mb-3">
       
             <div class="col-sm-6">
@@ -118,6 +120,8 @@
             
                 <div class="card-body">
                   <p class="card-text">Network scan. Attention: 2 min scan.</p>
+                  <p class="card-text">Orange FR (20801), SFR (20810), Bouygues (20820)</p>
+
                   <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+COPS=?', 120)">Scan</button>
                   <div id="loading_ttyAMA2_AT_COPS__" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
                   <div id="response_ttyAMA2_AT_COPS__"></div>
@@ -152,7 +156,8 @@
                     <span class="input-group-text" id="inputGroup-sizing-sm">Address</span>
                     <input type="text" id="messageInput_APN" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
                   </div>
-                  <button class="btn btn-primary" onclick="connectAPN_saraR4('ttyAMA2', document.getElementById('messageInput_APN').value, 5)">Connect</button>
+                  <button class="btn btn-primary" onclick="connectAPN_saraR4('ttyAMA2', document.getElementById('messageInput_APN').value, 5)">Set APN</button>
+
                   <button class="btn btn-secondary" onclick="getData_saraR4('ttyAMA2','AT+CGDCONT?', 5)">Get APN</button>
       
                   <div id="loading_ttyAMA2_APN" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
@@ -536,11 +541,12 @@ function getData_saraR4(port, command, timeout){
             }
 
       function sendMessage_saraR4(port, endpoint){
+        
         console.log("Send message from SaraR4 (port "+port+" and endpoint "+endpoint+"):");
 
         $("#loading_"+port+"_message_send").show();
 
-                $.ajax({
+              $.ajax({
                 url: 'launcher.php?type=sara_sendMessage&port='+port+'&endpoint='+encodeURIComponent(endpoint),
                 //dataType: 'json', // Specify that you expect a JSON response
                 method: 'GET', // Use GET or POST depending on your needs
@@ -558,9 +564,12 @@ function getData_saraR4(port, command, timeout){
             }
 
       function connectAPN_saraR4(port, APN_address, timeout){
+        
         console.log(" Set APN (port "+port+" and adress "+APN_address+"):");
+
         $("#loading_"+port+"_APN").show();
-                $.ajax({
+        
+        $.ajax({
                 url: 'launcher.php?type=sara_APN&port='+port+'&APN_address='+encodeURIComponent(APN_address)+'&timeout='+timeout,
                 //dataType: 'json', // Specify that you expect a JSON response
                 method: 'GET', // Use GET or POST depending on your needs
diff --git a/html/wifi.html b/html/wifi.html
index 589a0c0..d1c63d2 100755
--- a/html/wifi.html
+++ b/html/wifi.html
@@ -45,12 +45,68 @@
 
   <div class="container-fluid mt-5">
     <div class="row">
-        <aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
-        </aside>
+      <aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
+      </aside>
       <!-- Main content -->
-      <main class="col-md-9 ms-sm-auto col-lg-10 offset-md-3 offset-lg-2 px-md-4">
+      <main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
         <h1 class="mt-4">Connection WIFI</h1>
         <p>La connexion WIFI n'est pas obligatoire mais elle vous permet d'effectuer des mises à jour et d'activer le contrôle à distance.</p>
+      
+        <h3>Status
+          <span id="wifi-status" class="badge">Loading...</span>
+        </h3>
+      
+        <div class="row mb-3">
+
+          <div class="col-sm-4">
+            <div class="card text-dark bg-light">
+              <div class="card-body">
+                <h5 class="card-title">WIFI / Ethernet</h5>
+                <p class="card-text">General information.</p>
+                <button class="btn btn-primary" onclick="get_internet()">Get Data</button>
+                <table class="table table-striped-columns">
+                  <tbody id="data-table-body_internet_general"></tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+      
+          <div class="col-sm-8">
+            <div class="card text-dark bg-light">
+              <div class="card-body">
+                <h5 class="card-title">Wifi Scan</h5>
+                <p class="card-text">Scan des réseaux WIFI disponibles.</p>
+                <button class="btn btn-primary" onclick="wifi_scan()">Scan</button>
+                <table class="table">
+                  <tbody id="data-table-body_wifi_scan"></tbody>
+                </table>
+                </table>
+              </div>
+            </div>
+          </div>
+
+            <!-- Modal WIFI PASSWORD -->
+            <!-- filled with JS -->
+            <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+              <div class="modal-dialog">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="myModalLabel">Modal title</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  </div>
+                  <div class="modal-body" id="myModalBody">
+                    ...
+                  </div>
+                  <div class="modal-footer" id="myModalFooter">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+        <div>
+      
       </main>
     </div>
   </div>
@@ -64,6 +120,8 @@
 
 <script>
  document.addEventListener('DOMContentLoaded', function () {
+    console.log("DOMContentLoaded");
+
     const elementsToLoad = [
         { id: 'topbar', file: 'topbar.html' },
         { id: 'sidebar', file: 'sidebar.html' },
@@ -81,7 +139,151 @@
             })
             .catch(error => console.error(`Error loading ${file}:`, error));
     });
+
+    
 });
+
+
+function get_internet(){
+        console.log("Getting internet general infos");
+                $.ajax({
+                url: 'launcher.php?type=internet',
+                dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            let tableBody = document.getElementById('data-table-body_internet_general');
+                            tableBody.innerHTML = '';  // Clear existing table content
+
+                            // Iterate through the data and create rows
+                            for (let key in response) {
+                                let row = `
+                                    <tr>
+                                        <td>${key}</td>
+                                        <td>${response[key].connection}</td>
+                                        <td>${response[key].IP ? response[key].IP : "No IP"}</td>
+                                    </tr>
+                                `;
+                                tableBody.innerHTML += row; // Append row to table body
+                            }
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+
+  function wifi_connect(SSID, PASS){
+        console.log("Connecting to wifi");
+        console.log(SSID);
+        console.log(PASS);
+        if (typeof PASS === 'undefined') {
+          console.log("Need to add password");
+          //open bootstrap modal to ask for password
+          var myModal = new bootstrap.Modal(document.getElementById('myModal'));
+          //modifiy modal title
+          document.getElementById('myModalLabel').innerHTML = "Enter password for "+SSID;
+          //add input field to modal body
+          document.getElementById('myModalBody').innerHTML = "<input type='text' id='wifi_pass' class='form-control' placeholder='Password'>";
+          //add button to modal footer
+          document.getElementById('myModalFooter').innerHTML = "<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick='wifi_connect(\""+SSID+"\", document.getElementById(\"wifi_pass\").value)'>Se connecter</button>";
+          myModal.show();
+        } else {
+          console.log("Will try to connect to "+SSID+" with password "+PASS);
+          console.log("Start PHP script:");
+          
+          $.ajax({
+                url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS,
+                dataType: 'text', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                         
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+                
+        }
+            }
+
+  function wifi_scan(){
+        console.log("Scanning Wifi");
+                $.ajax({
+                url: 'launcher.php?type=wifi_scan',
+                dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            const tableBody = document.getElementById("data-table-body_wifi_scan");
+
+                            // Clear the existing table body
+                            tableBody.innerHTML = "";
+
+                            // Loop through the wifiNetworks array and create rows
+                            response.forEach(network => {
+                                const row = document.createElement("tr");
+
+                                // Create and append cells for SSID, BARS, and SIGNAL
+                                const ssidCell = document.createElement("td");
+                                 // Truncate SSID to 25 characters
+                                const truncatedSSID = network.SSID.length > 20 ? network.SSID.substring(0, 20) + '...' : network.SSID;
+                                ssidCell.textContent = truncatedSSID;
+                                row.appendChild(ssidCell);
+
+                                /*
+                                const signalCell = document.createElement("td");
+                                signalCell.textContent = network.SIGNAL;
+                                row.appendChild(signalCell);
+                                */
+
+                                 // Create a button
+                                const buttonCell = document.createElement("td");
+                                const button = document.createElement("button");
+                                button.textContent = "Connect"; // Button text
+                                button.classList.add("btn", "btn-primary"); // Bootstrap button classes
+
+                                // Determine button color based on SIGNAL value
+                                const signalValue = parseInt(network.SIGNAL, 10); // Assuming SIGNAL is a numeric value
+                                 // Calculate color based on the signal strength
+                                let buttonColor;
+                                if (signalValue >= 100) {
+                                    buttonColor = "success"; // Green for strong signal
+                                } else if (signalValue >= 50) {
+                                    buttonColor = "warning"; // Yellow for moderate signal
+                                } else {
+                                    buttonColor = "danger"; // Red for weak signal
+                                }
+                                // Add Bootstrap button classes along with color
+                                button.classList.add("btn", `btn-${buttonColor}`);
+
+
+                                //Trigger function as soon as the button is clicked
+                                button.addEventListener("click", () => wifi_connect(network.SSID));
+
+
+                                // Append the button to the button cell
+                                buttonCell.appendChild(button);
+                                row.appendChild(buttonCell);
+
+                                // Append the row to the table body
+                                tableBody.appendChild(row);
+                            });
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+
+  
+  function confirmSubmit() {
+        // You can display a simple confirmation message or customize the behavior
+        return confirm("Are you sure you want to connect to this Wi-Fi network?");
+    }
 </script>
 
 </body>
diff --git a/index.html b/index.html
index c13a6e0..5b73e67 100755
--- a/index.html
+++ b/index.html
@@ -1,1235 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NebuleAir Pro</title>
-   <!-- Link Bootstrap CSS locally -->
-   <link rel="stylesheet" href="html/assets/css/bootstrap.min.css">
-   <style>
- 
-    .deviceID {
-        margin-top: 2px; /* Add some top margin for spacing */
-        font-size: 1.5rem; /* Adjust the font size */
-        color: #33577c; /* Bootstrap primary color */
-        text-align: center;
-    }
-</style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome Page</title>
+    <style>
+        /* Reset default browser styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        /* Center the content on the page */
+        body {
+            margin: 0;
+            display: flex;
+            justify-content: center; /* Center horizontally */
+            align-items: center;    /* Center vertically */
+            height: 100vh;          /* Full viewport height */
+            background-color: #ffffff; /* Adjust background color */
+            font-family: Arial, sans-serif;
+        }
+
+        /* Logo styling */
+        #logo {
+            opacity: 0; /* Start fully transparent */
+            transition: opacity 3s ease-in-out; /* Fade-in effect */
+            max-width: 80%; /* Ensure logo scales well */
+            max-height: 80%; /* Prevent logo from being too large */
+        }
+    </style>
 </head>
 <body>
+    <!-- Logo Image -->
+        <img id="logo" src="/html/assets/img/LogoNebuleAir.png" alt="Logo">
 
-  <nav class="navbar bg-body-tertiary">
-    <div class="container-fluid d-flex justify-content-between align-items-center">
-      <!-- Texte aligné à gauche -->
+    <script>
+        // Add the fade-in effect
+        document.addEventListener("DOMContentLoaded", function () {
+            const logo = document.getElementById("logo");
 
-      <a class="navbar-brand" href="#">
-        <img src="html/assets/img/LogoNebuleAir.png" alt="Logo" height="30" class="d-inline-block align-text-top">
-      </a>
-      <!-- Texte centré au milieu -->
-      <div class="mx-auto text-center">
-        <span id="pageTitle_plus_ID">Texte au milieu</span>
-      </div>
-  
-
-      <!-- Texte à droite -->
-      <div class="text-end">
-        <button type="button" class="btn btn-outline-secondary" id="RTC_time">loading...</button>
-      </div>
-
-    </div> 
-  </nav>
-
-  <div class="container">
-
-
-    <h3>Capteurs</h3>
-
-    <!-- NEXT PM & I2C sound -->
-    <div class="row mb-3" id="card-container"></div>
-
-    <h3>
-      Modem 4G status 
-      <span id="modem-status" class="badge">Loading...</span>
-    </h3>
-
-    <div class="row mb-3">
-
-      <div class="col-sm-4">
-        <div class="card">
-       
-          <div class="card-body">
-            <p class="card-text">General information. </p>
-            <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'ATI', 2)">Get Data</button>
-            <div id="loading_ttyAMA2_ATI" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-            <div id="response_ttyAMA2_ATI"></div>
-
-          </div>
-        </div>
-      </div>
-
-      <div class="col-sm-4">
-        <div class="card">
-     
-          <div class="card-body">
-            <p class="card-text">SIM card information.</p>
-            <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+CCID?', 2)">Get Data</button>
-            <div id="loading_ttyAMA2_AT_CCID_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-            <div id="response_ttyAMA2_AT_CCID_"></div>
-          </div>
-        </div>
-      </div>
-
-      <div class="col-sm-4">
-        <div class="card">
-        
-          <div class="card-body">
-            <p class="card-text">Actual Network connection</p>
-            <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+COPS?', 2)">Get Data</button>
-            <div id="loading_ttyAMA2_AT_COPS_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-            <div id="response_ttyAMA2_AT_COPS_"></div>
-
-            </table>
-          </div>
-        </div>
-      </div>
-
-    </div>
-
-    <h3>Connexion 4G Network</h3>
-    <div class="row mb-3">
-
-      <div class="col-sm-8">
-        <div class="card text-dark bg-light">
-      
-          <div class="card-body">
-            <p class="card-text">Network scan. Attention: 2 min scan.</p>
-            <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+COPS=?', 120)">Scan</button>
-            <div id="loading_ttyAMA2_AT_COPS__" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-            <div id="response_ttyAMA2_AT_COPS__"></div>
-            <div id="table-network"></div>
-
-
-          </div>
-        </div>
-      </div>
-
-      <div class="col-sm-4">
-        <div class="card text-dark bg-light">
-        
-          <div class="card-body">
-            <p class="card-text">Network connexion.</p>
-            <div class="input-group input-group-sm mb-3">
-              <span class="input-group-text" id="inputGroup-sizing-sm">Numeric Operator</span>
-              <input type="text" id="messageInput_network" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
-            </div>
-            <button class="btn btn-primary" onclick="connectNetwork_saraR4('ttyAMA2', document.getElementById('messageInput_network').value, 60)">Connect</button>
-            <div id="loading_ttyAMA2_AT_COPS_Connect" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-            <div id="response_ttyAMA2_AT_COPS_Connect"></div>
-          </div>
-        </div>
-      </div>
-
-
-    </div>
-  
-  <h3>MQTT</h3>
-  <div class="row mb-3">
-  <!-- Get CONFIG -->
-    <div class="col-sm-4">
-      <div class="card">
-        <div class="card-body">
-          <p class="card-text">Get config.</p>
-          <button class="btn btn-primary" onclick="mqtt_getConfig_saraR4('ttyAMA2', 2)">Get Data</button>
-          <div id="loading_mqtt_getConfig" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-          <div id="response_mqtt_getConfig"></div>
-        </div>
-      </div>
-    </div>
-
-        <!-- MQTT LOGIN -->
-
-    <div class="col-sm-4">
-      <div class="card">
-        <div class="card-body">
-          <p class="card-text">Login / logout</p>
-          
-          <button class="btn btn-success" onclick="mqtt_login_logout('ttyAMA2', 1, 6)">Login </button>
-          <button class="btn btn-danger" onclick="mqtt_login_logout('ttyAMA2', 0, 6)">Logout </button>
-          <div id="loading_mqtt_login_logout" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-          <div id="response_mqtt_login_logout"></div>
-        </div>
-      </div>
-    </div>
-
-   <!-- Send MESSAGE -->
-
-    <div class="col-sm-4">
-      <div class="card">
-        <div class="card-body">
-          <p class="card-text">Send message (MQTT publish) .</p>
-          <div class="input-group input-group-sm mb-3">
-            <span class="input-group-text" id="inputGroup-sizing-sm">Text</span>
-            <input type="text" id="MQTTmessageInput" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
-          </div>
-          <button class="btn btn-primary" onclick="mqtt_publish('ttyAMA2', document.getElementById('MQTTmessageInput').value, 2)">Send Message</button>
-          <div id="loading_mqtt_publish" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-          <div id="response_mqtt_publish"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <h3>Send message (test)</h3>
-  <div class="row mb-3">
-  <!-- SET URL -->
-
-    <div class="col-sm-4">
-      <div class="card">
-        <div class="card-body">
-          <p class="card-text">Set url (HTTP).</p>
-          <button class="btn btn-primary" onclick="setURL_saraR4('ttyAMA2', 'data.nebuleair.fr')">Set URL</button>
-          <div id="loading_ttyAMA2_setURL" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-          <div id="response_ttyAMA2_setURL"></div>
-        </div>
-      </div>
-    </div>
-
-        <!-- WRITE MESSAGE to memory -->
-
-    <div class="col-sm-4">
-      <div class="card">
-        <div class="card-body">
-          <p class="card-text">Write message (local storage).</p>
-          <div class="input-group input-group-sm mb-3">
-            <span class="input-group-text" id="inputGroup-sizing-sm">Text</span>
-            <input type="text" id="messageInput" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
-          </div>
-          <button class="btn btn-primary" onclick="writeMessage_saraR4('ttyAMA2', document.getElementById('messageInput').value , 'write')">Write </button>
-          <button class="btn btn-warning" onclick="writeMessage_saraR4('ttyAMA2', 'Hello', 'read')">Read </button>
-          <button class="btn btn-danger" onclick="writeMessage_saraR4('ttyAMA2', 'Hello', 'erase')">Empty </button>
-          <div id="loading_ttyAMA2_message_write" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-          <div id="response_ttyAMA2_message_write"></div>
-        </div>
-      </div>
-    </div>
-
-   <!-- Send MESSAGE -->
-
-    <div class="col-sm-4">
-      <div class="card">
-        <div class="card-body">
-          <p class="card-text">Send message .</p>
-          <button class="btn btn-primary" onclick="sendMessage_saraR4('ttyAMA2', '/pro_4G/notif_message.php')">Send Message</button>
-          <div id="loading_ttyAMA2_message_send" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-          <div id="response_ttyAMA2_message_send"></div>
-        </div>
-      </div>
-    </div>
-
-
-  </div>
-  
-  <!-- WIFI -->
-  <h3>WIFI status
-    <span id="wifi-status" class="badge">Loading...</span>
-  </h3>
-  
-  <div class="row mb-3">
-
-    <div class="col-sm-4">
-      <div class="card text-dark bg-light">
-        <div class="card-body">
-          <h5 class="card-title">WIFI / Ethernet</h5>
-          <p class="card-text">General information.</p>
-          <button class="btn btn-primary" onclick="get_internet()">Get Data</button>
-          <table class="table table-striped-columns">
-            <tbody id="data-table-body_internet_general"></tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-sm-8">
-      <div class="card text-dark bg-light">
-        <div class="card-body">
-          <h5 class="card-title">Wifi Scan</h5>
-          <p class="card-text">Scan des réseaux WIFI disponibles.</p>
-          <button class="btn btn-primary" onclick="wifi_scan()">Scan</button>
-          <table class="table">
-            <tbody id="data-table-body_wifi_scan"></tbody>
-          </table>
-          </table>
-        </div>
-      </div>
-    </div>
-
-
-    <!-- Modal WIFI PASSWORD -->
-    <!-- filled with JS -->
-    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h1 class="modal-title fs-5" id="myModalLabel">Modal title</h1>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
-          <div class="modal-body" id="myModalBody">
-            ...
-          </div>
-          <div class="modal-footer" id="myModalFooter">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="button" class="btn btn-primary">Save changes</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!--
-    <div class="col-sm-4">
-      <div class="card">
-        <div class="card-body">
-          <h5 class="card-title">WIFI Connect</h5>
-          <p class="card-text">Connect to WIFI.</p>
-          <form action="launcher.php" method="get" onsubmit="return confirmSubmit()">
-            <div class="mb-3">
-              <label for="SSID_" class="form-label">SSID</label>
-              <input type="text" name="SSID" class="form-control" id="SSID_" aria-describedby="emailHelp">
-            </div>
-            <div class="mb-3">
-              <label for="exampleInputPassword1" class="form-label">Password</label>
-              <input type="password" name="pass" class="form-control" id="exampleInputPassword1">
-            </div>
-            <input type="hidden" name="type" value="wifi_connect">
-
-            <button type="submit" class="btn btn-primary">Submit</button>
-          </form>
-
-          <div id="response_hotspot_status"></div>
-        </div>
-      </div>
-    </div>
-    -->
-   <!--
-    <div class="col-sm-4">
-      <div class="card">
-        <div class="card-body">
-          <h5 class="card-title">WIFI Hotspot</h5>
-          <p class="card-text">Check if wifi Hotspot (AP) is activated.</p>
-          <button class="btn btn-primary" onclick="get_hotspot_status()">Check</button>
-          <div id="response_hotspot_status"></div>
-        </div>
-      </div>
-    </div>
-    -->
-  </div> 
-  <!-- end row -->
-
-  <h3>Logs</h3>
-
-  <div class="row mb-3">
-    <div class="col-sm-4">
-
-    <!-- Button trigger modal -->
-    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bootLog_modal">
-      Boot Logs
-    </button>
-
-    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loopLog_modal">
-      Loop Logs
-    </button>
-
-    <!-- Modal Boot Logs -->
-    <div class="modal fade" id="bootLog_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h1 class="modal-title fs-5" id="exampleModalLabel">Boot logs</h1>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
-          <div class="modal-body">
-            <pre id="log-content" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
-
-            ...
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="button" class="btn btn-primary" id="refreshBootLog">Refresh</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Modal Loop Logs -->
-    <div class="modal fade" id="loopLog_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h1 class="modal-title fs-5" id="exampleModalLabel">Loop logs</h1>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
-          <div class="modal-body">
-            ...
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="button" class="btn btn-primary" id="refreshLoopLog">Refresh</button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-
-  </div> 
-
-
-  </div> 
-  <!-- end row -->
-
-
-  <h3>Admin</h3>
-  <div class="row mb-3">
-    <div class="col-sm-10">
-      <button type="button" class="btn btn-danger" onclick="rebootDevice()">
-        Reboot
-      </button>
-      <button type="button" class="btn btn-info" onclick="startSSHTunnel()">
-        Start SSH Tunnel
-      </button>
-      <button type="button" id="updateButton" class="btn btn-success" onclick="updateGitPull()">
-        Update
-      </button>
-    </div>
-
-  </div>
-  
-  </div>
-    <!-- end container -->
+            // Trigger fade-in by changing the opacity
+            setTimeout(() => {
+                logo.style.opacity = "1";
+            }, 100); // Slight delay before starting the fade-in effect
 
+            // Redirect after 10 seconds
+            setTimeout(() => {
+                window.location.href = "html/index.html"; // Replace with your target URL
+            }, 3000);
+        });
+    </script>
 </body>
-
-
-
-<!-- JAVASCRIPT -->
-
-<!-- Link Ajax locally -->
-<script src="html/assets/jquery/jquery-3.7.1.min.js"></script>
-<!-- Link Bootstrap JS and Popper.js locally -->
-<script src="html/assets/js/bootstrap.bundle.js"></script>
-
-<script>
-
-
-function updateGitPull(){
-    console.log("Updating device (git pull)");
-
-        $.ajax({
-            url: 'launcher.php?type=git_pull',
-            method: 'GET', // Use GET or POST depending on your needs
-            success: function(response) {
-                // Handle success response if needed
-                console.log(response);
-                alert(response);
-                // Reload the page after the device update
-                location.reload(); // This will reload the page
-
-            },
-            error: function(xhr, status, error) {
-                console.error('AJAX request failed:', status, error);
-            }
-        });
-      }
-
-function startSSHTunnel(){
-    console.log("Will start ssh tunnel");
-    console.log("need to retreive ssh port");
-
-    fetch('config.json') // Replace 'deviceID.txt' with 'config.json'
-        .then(response => response.json()) // Parse response as JSON
-        .then(data => {
-            //get device ID
-            const deviceSSH_port = data.sshTunnel_port
-            console.log("Device SSH port retrieved: " + deviceSSH_port);
-            startSSHTunnel_2(deviceSSH_port);
-
-           })
-        .catch(error => {
-      console.error('Error retrieving device ssh port:', error);
-      alert('An error occurred while fetching the device ID.');
-    });
-      }
-   
-      function startSSHTunnel_2(deviceSSH_port){
-        $.ajax({
-            url: 'launcher.php?type=sshTunnel&ssh_port='+deviceSSH_port,
-            method: 'GET', // Use GET or POST depending on your needs
-            success: function(response) {
-                // Handle success response if needed
-                console.log(response);
-                alert("Tunnel started");
-
-
-            },
-            error: function(xhr, status, error) {
-                console.error('AJAX request failed:', status, error);
-            }
-        });
-
-      }
-  
-
-  function rebootDevice(){
-    console.log("Will reboot system");
-    var userConfirmed = confirm("Are you sure you want to reboot the system? If so, press ok and wait few seconds before reloading page.");
-
-    if (userConfirmed) {
-        $.ajax({
-            url: 'launcher.php?type=reboot',
-            method: 'GET', // Use GET or POST depending on your needs
-            success: function(response) {
-                // Handle success response if needed
-            },
-            error: function(xhr, status, error) {
-                console.error('AJAX request failed:', status, error);
-            }
-        });
-    } else {
-        console.log("Reboot canceled.");
-    }
-  }
-
-  function getNPM_values(port){
-      console.log("Data from NPM (port "+port+"):");
-      $("#loading_"+port).show();
-
-            $.ajax({
-              url: 'launcher.php?type=npm&port='+port,
-              dataType: 'json', // Specify that you expect a JSON response
-              method: 'GET', // Use GET or POST depending on your needs
-              success: function(response) {
-                        console.log(response);
-                        const tableBody = document.getElementById("data-table-body_"+port);
-                        tableBody.innerHTML = "";
-
-                        $("#loading_"+port).hide();
-                        // Create an array of the desired keys
-                        const keysToShow = ["PM1", "PM25", "PM10"];
-                        // Add only the specified elements to the table
-                        keysToShow.forEach(key => {
-                            if (response[key] !== undefined) { // Check if the key exists in the response
-                                const value = response[key];
-                                $("#data-table-body_"+port).append(`
-                                    <tr>
-                                        <td>${key}</td>
-                                        <td>${value} µg/m³</td>
-                                    </tr>
-                                `);
-                            }
-                        });
-                    },
-                    error: function(xhr, status, error) {
-                        console.error('AJAX request failed:', status, error);
-                    }
-            });
-        }
-      
-    function getNoise_values(){
-      console.log("Data from I2C Noise Sensor:");
-      $("#loading_noise").show();
-
-            $.ajax({
-              url: 'launcher.php?type=noise',
-              method: 'GET', // Use GET or POST depending on your needs
-              success: function(response) {
-                        console.log(response);
-                        const tableBody = document.getElementById("data-table-body_noise");
-                        tableBody.innerHTML = "";
-                        $("#loading_noise").hide();
-                        
-                        // Create an array of the desired keys
-                        const keysToShow = ["Noise"];
-                        // Add only the specified elements to the table
-                        keysToShow.forEach(key => {
-                            if (response !== undefined) { // Check if the key exists in the response
-                                const value = response;
-                                $("#data-table-body_noise").append(`
-                                    <tr>
-                                        <td>${key}</td>
-                                        <td>${value} DB</td>
-                                    </tr>
-                                `);
-                            }
-                        });
-                    },
-                    error: function(xhr, status, error) {
-                        console.error('AJAX request failed:', status, error);
-                    }
-            });
-        }
-
-    function getBME280_values(){
-      console.log("Data from I2C BME280:");
-      $("#loading_BME280").show();
-
-            $.ajax({
-              url: 'launcher.php?type=BME280',
-              method: 'GET', // Use GET or POST depending on your needs
-              success: function(response) {
-                        console.log(response);
-
-                        const tableBody = document.getElementById("data-table-body_BME280");
-                        tableBody.innerHTML = "";
-                        $("#loading_BME280").hide();
-                        
-                        // Parse the JSON response
-                        const data = JSON.parse(response);
-                        const keysToShow = ["temp", "hum", "press"];
-
-
-                        // Add only the specified elements to the table
-                        keysToShow.forEach(key => {
-                            if (response !== undefined) { // Check if the key exists in the response
-                                const value = data[key];
-                                const unit = key === "temp" ? "°C"
-                            : key === "hum" ? "%"
-                            : key === "press" ? "hPa"
-                            : ""; // Add appropriate units
-
-                                $("#data-table-body_BME280").append(`
-                                   <tr>
-                        <td>${key.charAt(0).toUpperCase() + key.slice(1)}</td>
-                        <td>${value} ${unit}</td>
-                    </tr>
-                                `);
-                            }
-                        });
-                    },
-                    error: function(xhr, status, error) {
-                        console.error('AJAX request failed:', status, error);
-                    }
-            });
-        }
-
-    function getData_saraR4(port, command, timeout){
-        console.log("Data from SaraR4");
-        console.log("Port: " + port );
-        console.log("Command: " + command );
-        console.log("Timeout: " + timeout );
-
-        const safeCommand = command.replace(/[?+=]/g, "_");
-        console.log(safeCommand);
-        
-        $("#loading_"+port+"_"+safeCommand).show();
-
-                $.ajax({
-                url: 'launcher.php?type=sara&port='+port+'&command='+encodeURIComponent(command)+'&timeout='+timeout,
-                //dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            //log response
-                            console.log(response);
-                            //hide spinning wheel
-                            $("#loading_"+port+"_"+safeCommand).hide();
-
-                            // si on fait le scan de network on veut une liste des réseaux
-                            if (command == "AT+COPS=?") {
-                               // Extract data within parentheses
-                              const matches = response.match(/\(.*?\)/g); // Matches all `(...)` sections
-                              const container = document.getElementById('table-network'); // Bootstrap container
-                               // Check if matches exist
-                              if (matches) {
-                                const table = document.createElement('table');
-                                table.className = 'table table-striped'; // Add Bootstrap table styling
-                                const thead = document.createElement('thead');
-                                const tbody = document.createElement('tbody');
-
-                                // Table header (you can customize this based on your data)
-                                const headerRow = document.createElement('tr');
-                                const header1 = document.createElement('th');
-                                header1.textContent = 'Status';
-                                const header2 = document.createElement('th');
-                                header2.textContent = 'Long oper';
-                                const header3 = document.createElement('th');
-                                header3.textContent = 'Short opeer';
-                                const header4 = document.createElement('th');
-                                header4.textContent = 'Numeric oper';
-                                const header5 = document.createElement('th');
-                                header5.textContent = 'AcT';
-                                headerRow.appendChild(header1);
-                                headerRow.appendChild(header2);
-                                headerRow.appendChild(header3);
-                                headerRow.appendChild(header4);
-                                headerRow.appendChild(header5);
-                                thead.appendChild(headerRow);
-                                table.appendChild(thead);
-
-                                // Loop through each match and create a row in the table
-                                matches.forEach((item) => {
-                                  // Skip empty sections
-                                  if (item === "()") return;
-
-                                  const row = document.createElement('tr');
-                                  const values = item.slice(1, -1).split(','); // Remove parentheses and split by commas
-
-                                  // Add table cells (td) for each value
-                                  values.forEach((value) => {
-                                    const cell = document.createElement('td');
-                                    cell.textContent = value.trim(); // Remove extra spaces
-                                    row.appendChild(cell);
-                                  });
-
-                                  tbody.appendChild(row);
-                                });
-
-                                // Add tbody to table and append the table to the container
-                                table.appendChild(tbody);
-                                container.appendChild(table);
-                              } else {
-                                console.error('No valid data found in response.');
-                              }
-                            } else{
-                              // si c'est une commande AT normale
-                              // Replace newline characters with <br> tags
-                            const formattedResponse = response.replace(/\n/g, "<br>");
-                            $("#response_"+port+"_"+safeCommand).html(formattedResponse);
-                            }
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-      function connectNetwork_saraR4(port, networkID, timeout){
-        console.log(" Connect to network (port "+port+" and network id "+networkID+"):");
-        $("#loading_"+port+"_AT_COPS_Connect").show();
-                $.ajax({
-                url: 'launcher.php?type=sara_connectNetwork&port='+port+'&networkID='+encodeURIComponent(networkID)+'&timeout='+timeout,
-                //dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            $("#loading_"+port+"_AT_COPS_Connect").hide();
-                            // Replace newline characters with <br> tags
-                            const formattedResponse = response.replace(/\n/g, "<br>");
-                            $("#response_"+port+"_AT_COPS_Connect").html(formattedResponse);
-
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-      function mqtt_getConfig_saraR4(port, timeout){
-        console.log("GET MQTT config (port "+port+"):");
-        $("#loading_mqtt_getConfig").show();
-                $.ajax({
-                url: 'launcher.php?type=sara_getMQTT_config&port='+port+'&timeout='+timeout,
-                //dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            $("#loading_mqtt_getConfig").hide();
-                            // Replace newline characters with <br> tags
-                            const formattedResponse = response.replace(/\n/g, "<br>");
-                            $("#response_mqtt_getConfig").html(formattedResponse);
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-      function mqtt_login_logout(port, login_logout, timeout){
-        console.log("GET MQTT login / logout (port "+port+"):");
-        $("#loading_mqtt_login_logout").show();
-                $.ajax({
-                url: 'launcher.php?type=sara_getMQTT_login_logout&port='+port+'&login_logout='+login_logout+'&timeout='+timeout,
-                //dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            $("#loading_mqtt_login_logout").hide();
-                            const formattedResponse = response.replace(/\n/g, "<br>");
-                            $("#response_mqtt_login_logout").html(formattedResponse);
-
-                            const regex = /^\+UMQTTC:\s*(\d+),(\d+)/m; // Match "+UMQTTC:", followed by two numbers separated by a comma
-                            const match = response.match(regex);
-
-                            if (match) {
-                                const firstNumber = match[1]; // The first number after ":"
-                                const secondNumber = match[2]; // The second number after the ","
-                                if (firstNumber == 0) {
-                                  console.log("MQTT LOGOUT:");
-                                  $("#response_mqtt_login_logout").append("<p>logout</p>");
-                                }
-                                if (firstNumber == 1) {
-                                  console.log("MQTT LOGIN:");
-                                  $("#response_mqtt_login_logout").append("<p>login</p>");
-                                }
-                                if (secondNumber == 0) {
-                                  console.log("ERROR");
-                                  $("#response_mqtt_login_logout").append("<p>error</p>");
-                                }
-                                if (secondNumber == 1) {
-                                  console.log("SUCCESS");
-                                  $("#response_mqtt_login_logout").append("<p>success</p>");
-                                }
-
-                            } else {
-                                console.log("No matching line found");
-}
-                            
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-      
-      function mqtt_publish(port, message, timeout){
-        console.log(" MQTT publish (port "+port+"):");
-        $("#loading_mqtt_publish").show();
-                $.ajax({
-                url: 'launcher.php?type=sara_MQTT_publish&port='+port+'&timeout='+timeout+'&message='+message,
-                //dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            $("#loading_mqtt_publish").hide();
-                            // Replace newline characters with <br> tags
-                            const formattedResponse = response.replace(/\n/g, "<br>");
-                            $("#response_mqtt_publish").html(formattedResponse);
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-      function setURL_saraR4(port, url){
-        console.log("Set URL for HTTP (port "+port+" and URL "+url+"):");
-        $("#loading_"+port+"_setURL").show();
-                $.ajax({
-                url: 'launcher.php?type=sara_setURL&port='+port+'&url='+encodeURIComponent(url),
-                //dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            $("#loading_"+port+"_setURL").hide();
-                            // Replace newline characters with <br> tags
-                            const formattedResponse = response.replace(/\n/g, "<br>");
-                            $("#response_"+port+"_setURL").html(formattedResponse);
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-      function writeMessage_saraR4(port, message, type){
-        console.log(type +" message to SARA R4 memory (port "+port+" and message "+message+"):");
-        $("#loading_"+port+"_message_write").show();
-                $.ajax({
-                url: 'launcher.php?type=sara_writeMessage&port='+port+'&message='+encodeURIComponent(message)+'&type2='+type,
-                //dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            $("#loading_"+port+"_message_write").hide();
-                            // Replace newline characters with <br> tags
-                            const formattedResponse = response.replace(/\n/g, "<br>");
-                            $("#response_"+port+"_message_write").html(formattedResponse);
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-      function sendMessage_saraR4(port, endpoint){
-        console.log("Send message from SaraR4 (port "+port+" and endpoint "+endpoint+"):");
-
-        $("#loading_"+port+"_message_send").show();
-
-                $.ajax({
-                url: 'launcher.php?type=sara_sendMessage&port='+port+'&endpoint='+encodeURIComponent(endpoint),
-                //dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            $("#loading_"+port+"_message_send").hide();
-                            // Replace newline characters with <br> tags
-                            const formattedResponse = response.replace(/\n/g, "<br>");
-                            $("#response_"+port+"_message_send").html(formattedResponse);
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-
-      function get_internet(){
-        console.log("Getting internet general infos");
-                $.ajax({
-                url: 'launcher.php?type=internet',
-                dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            let tableBody = document.getElementById('data-table-body_internet_general');
-                            tableBody.innerHTML = '';  // Clear existing table content
-
-                            // Iterate through the data and create rows
-                            for (let key in response) {
-                                let row = `
-                                    <tr>
-                                        <td>${key}</td>
-                                        <td>${response[key].connection}</td>
-                                        <td>${response[key].IP ? response[key].IP : "No IP"}</td>
-                                    </tr>
-                                `;
-                                tableBody.innerHTML += row; // Append row to table body
-                            }
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-      function wifi_connect(SSID, PASS){
-        console.log("Connecting to wifi");
-        console.log(SSID);
-        console.log(PASS);
-        if (typeof PASS === 'undefined') {
-          console.log("Need to add password");
-          //open bootstrap modal to ask for password
-          var myModal = new bootstrap.Modal(document.getElementById('myModal'));
-          //modifiy modal title
-          document.getElementById('myModalLabel').innerHTML = "Enter password for "+SSID;
-          //add input field to modal body
-          document.getElementById('myModalBody').innerHTML = "<input type='text' id='wifi_pass' class='form-control' placeholder='Password'>";
-          //add button to modal footer
-          document.getElementById('myModalFooter').innerHTML = "<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick='wifi_connect(\""+SSID+"\", document.getElementById(\"wifi_pass\").value)'>Se connecter</button>";
-          myModal.show();
-        } else {
-          console.log("Will try to connect to "+SSID+" with password "+PASS);
-          console.log("Start PHP script:");
-          
-          $.ajax({
-                url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS,
-                dataType: 'text', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                         
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-                
-        }
-            }
-
-      function wifi_scan(){
-        console.log("Scanning Wifi");
-                $.ajax({
-                url: 'launcher.php?type=wifi_scan',
-                dataType: 'json', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log(response);
-                            const tableBody = document.getElementById("data-table-body_wifi_scan");
-
-                            // Clear the existing table body
-                            tableBody.innerHTML = "";
-
-                            // Loop through the wifiNetworks array and create rows
-                            response.forEach(network => {
-                                const row = document.createElement("tr");
-
-                                // Create and append cells for SSID, BARS, and SIGNAL
-                                const ssidCell = document.createElement("td");
-                                 // Truncate SSID to 25 characters
-                                const truncatedSSID = network.SSID.length > 20 ? network.SSID.substring(0, 20) + '...' : network.SSID;
-                                ssidCell.textContent = truncatedSSID;
-                                row.appendChild(ssidCell);
-
-                                /*
-                                const signalCell = document.createElement("td");
-                                signalCell.textContent = network.SIGNAL;
-                                row.appendChild(signalCell);
-                                */
-
-                                 // Create a button
-                                const buttonCell = document.createElement("td");
-                                const button = document.createElement("button");
-                                button.textContent = "Connect"; // Button text
-                                button.classList.add("btn", "btn-primary"); // Bootstrap button classes
-
-                                // Determine button color based on SIGNAL value
-                                const signalValue = parseInt(network.SIGNAL, 10); // Assuming SIGNAL is a numeric value
-                                 // Calculate color based on the signal strength
-                                let buttonColor;
-                                if (signalValue >= 100) {
-                                    buttonColor = "success"; // Green for strong signal
-                                } else if (signalValue >= 50) {
-                                    buttonColor = "warning"; // Yellow for moderate signal
-                                } else {
-                                    buttonColor = "danger"; // Red for weak signal
-                                }
-                                // Add Bootstrap button classes along with color
-                                button.classList.add("btn", `btn-${buttonColor}`);
-
-
-                                //Trigger function as soon as the button is clicked
-                                button.addEventListener("click", () => wifi_connect(network.SSID));
-
-
-                                // Append the button to the button cell
-                                buttonCell.appendChild(button);
-                                row.appendChild(buttonCell);
-
-                                // Append the row to the table body
-                                tableBody.appendChild(row);
-                            });
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-            }
-
-
-      function confirmSubmit() {
-        // You can display a simple confirmation message or customize the behavior
-        return confirm("Are you sure you want to connect to this Wi-Fi network?");
-    }
-
-    let intervalId;
-
-    function startNoise() {
-            // Check if interval is already running
-            if (!intervalId) {
-                intervalId = setInterval(getNoise_values, 1000);
-                console.log("Function started");
-            }
-        }
-
-        function stopNoise() {
-            if (intervalId) {
-                clearInterval(intervalId);
-                intervalId = null; // Reset intervalId to indicate that the function is stopped
-                console.log("Function stopped");
-            }
-        }
-    //setInterval(getNoise_values, 1000);
-
-    window.onload = function() {
-    fetch('config.json') // Replace 'deviceID.txt' with 'config.json'
-        .then(response => response.json()) // Parse response as JSON
-        .then(data => {
-            //get device ID
-            const deviceID = data.deviceID.trim().toUpperCase();
-            document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
-
-            //get SARA_R4 connection status
-            const SARA_statusElement = document.getElementById("modem-status");
-            console.log("SARA R4 is: " + data.SARA_R4_network_status);
-            
-            if (data.SARA_R4_network_status === "connected") {
-              SARA_statusElement.textContent = "Connected";
-              SARA_statusElement.className = "badge text-bg-success";
-            } else if (data.SARA_R4_network_status === "disconnected") {
-              SARA_statusElement.textContent = "Disconnected";
-              SARA_statusElement.className = "badge text-bg-danger";
-            } else {
-              SARA_statusElement.textContent = "Unknown";
-              SARA_statusElement.className = "badge text-bg-secondary";
-            }
-
-            //get wifi connection status
-            const WIFI_statusElement = document.getElementById("wifi-status");
-            console.log("WIFI is: " + data.WIFI_status);
-
-            if (data.WIFI_status === "connected") {
-              WIFI_statusElement.textContent = "Connected";
-              WIFI_statusElement.className = "badge text-bg-success";
-            } else if (data.WIFI_status === "hotspot") {
-              WIFI_statusElement.textContent = "Hotspot";
-              WIFI_statusElement.className = "badge text-bg-warning";
-            } else {
-              WIFI_statusElement.textContent = "Unknown";
-              WIFI_statusElement.className = "badge text-bg-secondary";
-            }
-
-            //get local RTC
-            $.ajax({
-                url: 'launcher.php?type=RTC_time',
-                dataType: 'text', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
-                success: function(response) {
-                            console.log("Local RTC: " + response);
-                            const RTC_Element = document.getElementById("RTC_time");
-                            RTC_Element.textContent = response;
-
-                        },
-                        error: function(xhr, status, error) {
-                            console.error('AJAX request failed:', status, error);
-                        }
-                });
-
-            const container = document.getElementById('card-container'); // Conteneur des cartes
-            //creates NPM cards
-            const ports = data.NextPM_ports; // Récupère les ports
-            
-            // Générer les cartes dynamiquement
-            ports.forEach((port, index) => {
-              const cardHTML = `
-                <div class="col-sm-3">
-                  <div class="card">
-                    <div class="card-header">
-                      Port UART ${port.replace('ttyAMA', '')}
-                    </div>
-                    <div class="card-body">
-                      <h5 class="card-title">NextPM ${String.fromCharCode(65 + index)}</h5>
-                      <p class="card-text">Capteur particules fines.</p>
-                      <button class="btn btn-primary" onclick="getNPM_values('${port}')">Get Data</button>
-                      <div id="loading_${port}" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-                      <table class="table table-striped-columns">
-                        <tbody id="data-table-body_${port}"></tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>`;
-              container.innerHTML += cardHTML; // Ajouter la carte au conteneur
-            });
-
-            //creates i2c BME280 card
-            if (data.i2c_BME) {
-              const i2C_BME_HTML = `
-                <div class="col-sm-3">
-                  <div class="card">
-                    <div class="card-header">
-                      Port I2C
-                    </div>
-                    <div class="card-body">
-                      <h5 class="card-title">BME280 Temp/Hum sensor</h5>
-                      <p class="card-text">Capteur température et humidité sur le port I2C.</p>
-                      <button class="btn btn-primary mb-1" onclick="getBME280_values()">Get Data</button>
-                      <br>
-                      <div id="loading_BME280" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-                      <table class="table table-striped-columns">
-                        <tbody id="data-table-body_BME280"></tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>`;
-              
-              container.innerHTML += i2C_BME_HTML; // Add the I2C card if condition is met
-            }
-
-             //creates i2c sound card
-             if (data.i2C_sound) {
-              const i2C_HTML = `
-                <div class="col-sm-3">
-                  <div class="card">
-                    <div class="card-header">
-                      Port I2C
-                    </div>
-                    <div class="card-body">
-                      <h5 class="card-title">Decibel Meter</h5>
-                      <p class="card-text">Capteur bruit sur le port I2C.</p>
-                      <button class="btn btn-primary mb-1" onclick="getNoise_values()">Get Data</button>
-                      <br>
-                      <button class="btn btn-success" onclick="startNoise()">Start recording</button>
-                      <button class="btn btn-danger" onclick="stopNoise()">Stop recording</button>
-                      <div id="loading_noise" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
-                      <table class="table table-striped-columns">
-                        <tbody id="data-table-body_noise"></tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>`;
-              
-              container.innerHTML += i2C_HTML; // Add the I2C card if condition is met
-            }
-
-        })
-        .catch(error => console.error('Error loading config.json:', error));
-      }
-
-
-        // LOGS modal
-        document.addEventListener('DOMContentLoaded', () => {
-        // Get the modal body
-        const modal_loop_Body = document.querySelector('#loopLog_modal .modal-body');
-        const modal_boot_Body = document.querySelector('#bootLog_modal .modal-body');
-
-        // LOOP
-        function fetchLoopLogs() {
-          fetch('logs/loop.log')
-            .then((response) => {
-              if (!response.ok) {
-                throw new Error('Failed to fetch the log file.');
-              }
-              return response.text();
-            })
-            .then((data) => {
-              const lines = data.split('\n');
-
-              // Format log content
-              const formattedLog = lines
-                .map((line) => line.trim()) // Remove extra whitespace
-                .filter((line) => line) // Remove empty lines
-                .join('<br>'); // Join formatted lines with line breaks
-
-              modal_loop_Body.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${formattedLog}</pre>`;
-            })
-            .catch((error) => {
-              console.error(error);
-              modal_loop_Body.textContent = 'Error loading log file.';
-            });
-        }
-        //BOOT
-        function fetchBootLogs() {
-          fetch('logs/app.log')
-            .then((response) => {
-              if (!response.ok) {
-                throw new Error('Failed to fetch the log file.');
-              }
-              return response.text();
-            })
-            .then((data) => {
-              const lines = data.split('\n');
-
-              // Format log content
-              const formattedLog = lines
-                .map((line) => line.trim()) // Remove extra whitespace
-                .filter((line) => line) // Remove empty lines
-                .join('<br>'); // Join formatted lines with line breaks
-
-                modal_boot_Body.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${formattedLog}</pre>`;
-            })
-            .catch((error) => {
-              console.error(error);
-              modal_boot_Body.textContent = 'Error loading log file.';
-            });
-        }
-
-        document.getElementById('loopLog_modal').addEventListener('show.bs.modal', fetchLoopLogs);
-        document.getElementById('refreshLoopLog').addEventListener('click', fetchLoopLogs);
-
-        document.getElementById('bootLog_modal').addEventListener('show.bs.modal', fetchBootLogs);
-        document.getElementById('refreshBootLog').addEventListener('click', fetchBootLogs);
-
-      });
-
-      
-
-
-</script>
-</html>
\ No newline at end of file
+</html>
diff --git a/index_old.html b/index_old.html
new file mode 100755
index 0000000..c13a6e0
--- /dev/null
+++ b/index_old.html
@@ -0,0 +1,1235 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NebuleAir Pro</title>
+   <!-- Link Bootstrap CSS locally -->
+   <link rel="stylesheet" href="html/assets/css/bootstrap.min.css">
+   <style>
+ 
+    .deviceID {
+        margin-top: 2px; /* Add some top margin for spacing */
+        font-size: 1.5rem; /* Adjust the font size */
+        color: #33577c; /* Bootstrap primary color */
+        text-align: center;
+    }
+</style>
+</head>
+<body>
+
+  <nav class="navbar bg-body-tertiary">
+    <div class="container-fluid d-flex justify-content-between align-items-center">
+      <!-- Texte aligné à gauche -->
+
+      <a class="navbar-brand" href="#">
+        <img src="html/assets/img/LogoNebuleAir.png" alt="Logo" height="30" class="d-inline-block align-text-top">
+      </a>
+      <!-- Texte centré au milieu -->
+      <div class="mx-auto text-center">
+        <span id="pageTitle_plus_ID">Texte au milieu</span>
+      </div>
+  
+
+      <!-- Texte à droite -->
+      <div class="text-end">
+        <button type="button" class="btn btn-outline-secondary" id="RTC_time">loading...</button>
+      </div>
+
+    </div> 
+  </nav>
+
+  <div class="container">
+
+
+    <h3>Capteurs</h3>
+
+    <!-- NEXT PM & I2C sound -->
+    <div class="row mb-3" id="card-container"></div>
+
+    <h3>
+      Modem 4G status 
+      <span id="modem-status" class="badge">Loading...</span>
+    </h3>
+
+    <div class="row mb-3">
+
+      <div class="col-sm-4">
+        <div class="card">
+       
+          <div class="card-body">
+            <p class="card-text">General information. </p>
+            <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'ATI', 2)">Get Data</button>
+            <div id="loading_ttyAMA2_ATI" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+            <div id="response_ttyAMA2_ATI"></div>
+
+          </div>
+        </div>
+      </div>
+
+      <div class="col-sm-4">
+        <div class="card">
+     
+          <div class="card-body">
+            <p class="card-text">SIM card information.</p>
+            <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+CCID?', 2)">Get Data</button>
+            <div id="loading_ttyAMA2_AT_CCID_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+            <div id="response_ttyAMA2_AT_CCID_"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-sm-4">
+        <div class="card">
+        
+          <div class="card-body">
+            <p class="card-text">Actual Network connection</p>
+            <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+COPS?', 2)">Get Data</button>
+            <div id="loading_ttyAMA2_AT_COPS_" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+            <div id="response_ttyAMA2_AT_COPS_"></div>
+
+            </table>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <h3>Connexion 4G Network</h3>
+    <div class="row mb-3">
+
+      <div class="col-sm-8">
+        <div class="card text-dark bg-light">
+      
+          <div class="card-body">
+            <p class="card-text">Network scan. Attention: 2 min scan.</p>
+            <button class="btn btn-primary" onclick="getData_saraR4('ttyAMA2', 'AT+COPS=?', 120)">Scan</button>
+            <div id="loading_ttyAMA2_AT_COPS__" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+            <div id="response_ttyAMA2_AT_COPS__"></div>
+            <div id="table-network"></div>
+
+
+          </div>
+        </div>
+      </div>
+
+      <div class="col-sm-4">
+        <div class="card text-dark bg-light">
+        
+          <div class="card-body">
+            <p class="card-text">Network connexion.</p>
+            <div class="input-group input-group-sm mb-3">
+              <span class="input-group-text" id="inputGroup-sizing-sm">Numeric Operator</span>
+              <input type="text" id="messageInput_network" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
+            </div>
+            <button class="btn btn-primary" onclick="connectNetwork_saraR4('ttyAMA2', document.getElementById('messageInput_network').value, 60)">Connect</button>
+            <div id="loading_ttyAMA2_AT_COPS_Connect" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+            <div id="response_ttyAMA2_AT_COPS_Connect"></div>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+  
+  <h3>MQTT</h3>
+  <div class="row mb-3">
+  <!-- Get CONFIG -->
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="card-text">Get config.</p>
+          <button class="btn btn-primary" onclick="mqtt_getConfig_saraR4('ttyAMA2', 2)">Get Data</button>
+          <div id="loading_mqtt_getConfig" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+          <div id="response_mqtt_getConfig"></div>
+        </div>
+      </div>
+    </div>
+
+        <!-- MQTT LOGIN -->
+
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="card-text">Login / logout</p>
+          
+          <button class="btn btn-success" onclick="mqtt_login_logout('ttyAMA2', 1, 6)">Login </button>
+          <button class="btn btn-danger" onclick="mqtt_login_logout('ttyAMA2', 0, 6)">Logout </button>
+          <div id="loading_mqtt_login_logout" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+          <div id="response_mqtt_login_logout"></div>
+        </div>
+      </div>
+    </div>
+
+   <!-- Send MESSAGE -->
+
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="card-text">Send message (MQTT publish) .</p>
+          <div class="input-group input-group-sm mb-3">
+            <span class="input-group-text" id="inputGroup-sizing-sm">Text</span>
+            <input type="text" id="MQTTmessageInput" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
+          </div>
+          <button class="btn btn-primary" onclick="mqtt_publish('ttyAMA2', document.getElementById('MQTTmessageInput').value, 2)">Send Message</button>
+          <div id="loading_mqtt_publish" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+          <div id="response_mqtt_publish"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h3>Send message (test)</h3>
+  <div class="row mb-3">
+  <!-- SET URL -->
+
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="card-text">Set url (HTTP).</p>
+          <button class="btn btn-primary" onclick="setURL_saraR4('ttyAMA2', 'data.nebuleair.fr')">Set URL</button>
+          <div id="loading_ttyAMA2_setURL" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+          <div id="response_ttyAMA2_setURL"></div>
+        </div>
+      </div>
+    </div>
+
+        <!-- WRITE MESSAGE to memory -->
+
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="card-text">Write message (local storage).</p>
+          <div class="input-group input-group-sm mb-3">
+            <span class="input-group-text" id="inputGroup-sizing-sm">Text</span>
+            <input type="text" id="messageInput" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
+          </div>
+          <button class="btn btn-primary" onclick="writeMessage_saraR4('ttyAMA2', document.getElementById('messageInput').value , 'write')">Write </button>
+          <button class="btn btn-warning" onclick="writeMessage_saraR4('ttyAMA2', 'Hello', 'read')">Read </button>
+          <button class="btn btn-danger" onclick="writeMessage_saraR4('ttyAMA2', 'Hello', 'erase')">Empty </button>
+          <div id="loading_ttyAMA2_message_write" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+          <div id="response_ttyAMA2_message_write"></div>
+        </div>
+      </div>
+    </div>
+
+   <!-- Send MESSAGE -->
+
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="card-text">Send message .</p>
+          <button class="btn btn-primary" onclick="sendMessage_saraR4('ttyAMA2', '/pro_4G/notif_message.php')">Send Message</button>
+          <div id="loading_ttyAMA2_message_send" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+          <div id="response_ttyAMA2_message_send"></div>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+  
+  <!-- WIFI -->
+  <h3>WIFI status
+    <span id="wifi-status" class="badge">Loading...</span>
+  </h3>
+  
+  <div class="row mb-3">
+
+    <div class="col-sm-4">
+      <div class="card text-dark bg-light">
+        <div class="card-body">
+          <h5 class="card-title">WIFI / Ethernet</h5>
+          <p class="card-text">General information.</p>
+          <button class="btn btn-primary" onclick="get_internet()">Get Data</button>
+          <table class="table table-striped-columns">
+            <tbody id="data-table-body_internet_general"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-sm-8">
+      <div class="card text-dark bg-light">
+        <div class="card-body">
+          <h5 class="card-title">Wifi Scan</h5>
+          <p class="card-text">Scan des réseaux WIFI disponibles.</p>
+          <button class="btn btn-primary" onclick="wifi_scan()">Scan</button>
+          <table class="table">
+            <tbody id="data-table-body_wifi_scan"></tbody>
+          </table>
+          </table>
+        </div>
+      </div>
+    </div>
+
+
+    <!-- Modal WIFI PASSWORD -->
+    <!-- filled with JS -->
+    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 class="modal-title fs-5" id="myModalLabel">Modal title</h1>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body" id="myModalBody">
+            ...
+          </div>
+          <div class="modal-footer" id="myModalFooter">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">WIFI Connect</h5>
+          <p class="card-text">Connect to WIFI.</p>
+          <form action="launcher.php" method="get" onsubmit="return confirmSubmit()">
+            <div class="mb-3">
+              <label for="SSID_" class="form-label">SSID</label>
+              <input type="text" name="SSID" class="form-control" id="SSID_" aria-describedby="emailHelp">
+            </div>
+            <div class="mb-3">
+              <label for="exampleInputPassword1" class="form-label">Password</label>
+              <input type="password" name="pass" class="form-control" id="exampleInputPassword1">
+            </div>
+            <input type="hidden" name="type" value="wifi_connect">
+
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </form>
+
+          <div id="response_hotspot_status"></div>
+        </div>
+      </div>
+    </div>
+    -->
+   <!--
+    <div class="col-sm-4">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">WIFI Hotspot</h5>
+          <p class="card-text">Check if wifi Hotspot (AP) is activated.</p>
+          <button class="btn btn-primary" onclick="get_hotspot_status()">Check</button>
+          <div id="response_hotspot_status"></div>
+        </div>
+      </div>
+    </div>
+    -->
+  </div> 
+  <!-- end row -->
+
+  <h3>Logs</h3>
+
+  <div class="row mb-3">
+    <div class="col-sm-4">
+
+    <!-- Button trigger modal -->
+    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bootLog_modal">
+      Boot Logs
+    </button>
+
+    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loopLog_modal">
+      Loop Logs
+    </button>
+
+    <!-- Modal Boot Logs -->
+    <div class="modal fade" id="bootLog_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 class="modal-title fs-5" id="exampleModalLabel">Boot logs</h1>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <pre id="log-content" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
+
+            ...
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary" id="refreshBootLog">Refresh</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal Loop Logs -->
+    <div class="modal fade" id="loopLog_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 class="modal-title fs-5" id="exampleModalLabel">Loop logs</h1>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            ...
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary" id="refreshLoopLog">Refresh</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+  </div> 
+
+
+  </div> 
+  <!-- end row -->
+
+
+  <h3>Admin</h3>
+  <div class="row mb-3">
+    <div class="col-sm-10">
+      <button type="button" class="btn btn-danger" onclick="rebootDevice()">
+        Reboot
+      </button>
+      <button type="button" class="btn btn-info" onclick="startSSHTunnel()">
+        Start SSH Tunnel
+      </button>
+      <button type="button" id="updateButton" class="btn btn-success" onclick="updateGitPull()">
+        Update
+      </button>
+    </div>
+
+  </div>
+  
+  </div>
+    <!-- end container -->
+
+</body>
+
+
+
+<!-- JAVASCRIPT -->
+
+<!-- Link Ajax locally -->
+<script src="html/assets/jquery/jquery-3.7.1.min.js"></script>
+<!-- Link Bootstrap JS and Popper.js locally -->
+<script src="html/assets/js/bootstrap.bundle.js"></script>
+
+<script>
+
+
+function updateGitPull(){
+    console.log("Updating device (git pull)");
+
+        $.ajax({
+            url: 'launcher.php?type=git_pull',
+            method: 'GET', // Use GET or POST depending on your needs
+            success: function(response) {
+                // Handle success response if needed
+                console.log(response);
+                alert(response);
+                // Reload the page after the device update
+                location.reload(); // This will reload the page
+
+            },
+            error: function(xhr, status, error) {
+                console.error('AJAX request failed:', status, error);
+            }
+        });
+      }
+
+function startSSHTunnel(){
+    console.log("Will start ssh tunnel");
+    console.log("need to retreive ssh port");
+
+    fetch('config.json') // Replace 'deviceID.txt' with 'config.json'
+        .then(response => response.json()) // Parse response as JSON
+        .then(data => {
+            //get device ID
+            const deviceSSH_port = data.sshTunnel_port
+            console.log("Device SSH port retrieved: " + deviceSSH_port);
+            startSSHTunnel_2(deviceSSH_port);
+
+           })
+        .catch(error => {
+      console.error('Error retrieving device ssh port:', error);
+      alert('An error occurred while fetching the device ID.');
+    });
+      }
+   
+      function startSSHTunnel_2(deviceSSH_port){
+        $.ajax({
+            url: 'launcher.php?type=sshTunnel&ssh_port='+deviceSSH_port,
+            method: 'GET', // Use GET or POST depending on your needs
+            success: function(response) {
+                // Handle success response if needed
+                console.log(response);
+                alert("Tunnel started");
+
+
+            },
+            error: function(xhr, status, error) {
+                console.error('AJAX request failed:', status, error);
+            }
+        });
+
+      }
+  
+
+  function rebootDevice(){
+    console.log("Will reboot system");
+    var userConfirmed = confirm("Are you sure you want to reboot the system? If so, press ok and wait few seconds before reloading page.");
+
+    if (userConfirmed) {
+        $.ajax({
+            url: 'launcher.php?type=reboot',
+            method: 'GET', // Use GET or POST depending on your needs
+            success: function(response) {
+                // Handle success response if needed
+            },
+            error: function(xhr, status, error) {
+                console.error('AJAX request failed:', status, error);
+            }
+        });
+    } else {
+        console.log("Reboot canceled.");
+    }
+  }
+
+  function getNPM_values(port){
+      console.log("Data from NPM (port "+port+"):");
+      $("#loading_"+port).show();
+
+            $.ajax({
+              url: 'launcher.php?type=npm&port='+port,
+              dataType: 'json', // Specify that you expect a JSON response
+              method: 'GET', // Use GET or POST depending on your needs
+              success: function(response) {
+                        console.log(response);
+                        const tableBody = document.getElementById("data-table-body_"+port);
+                        tableBody.innerHTML = "";
+
+                        $("#loading_"+port).hide();
+                        // Create an array of the desired keys
+                        const keysToShow = ["PM1", "PM25", "PM10"];
+                        // Add only the specified elements to the table
+                        keysToShow.forEach(key => {
+                            if (response[key] !== undefined) { // Check if the key exists in the response
+                                const value = response[key];
+                                $("#data-table-body_"+port).append(`
+                                    <tr>
+                                        <td>${key}</td>
+                                        <td>${value} µg/m³</td>
+                                    </tr>
+                                `);
+                            }
+                        });
+                    },
+                    error: function(xhr, status, error) {
+                        console.error('AJAX request failed:', status, error);
+                    }
+            });
+        }
+      
+    function getNoise_values(){
+      console.log("Data from I2C Noise Sensor:");
+      $("#loading_noise").show();
+
+            $.ajax({
+              url: 'launcher.php?type=noise',
+              method: 'GET', // Use GET or POST depending on your needs
+              success: function(response) {
+                        console.log(response);
+                        const tableBody = document.getElementById("data-table-body_noise");
+                        tableBody.innerHTML = "";
+                        $("#loading_noise").hide();
+                        
+                        // Create an array of the desired keys
+                        const keysToShow = ["Noise"];
+                        // Add only the specified elements to the table
+                        keysToShow.forEach(key => {
+                            if (response !== undefined) { // Check if the key exists in the response
+                                const value = response;
+                                $("#data-table-body_noise").append(`
+                                    <tr>
+                                        <td>${key}</td>
+                                        <td>${value} DB</td>
+                                    </tr>
+                                `);
+                            }
+                        });
+                    },
+                    error: function(xhr, status, error) {
+                        console.error('AJAX request failed:', status, error);
+                    }
+            });
+        }
+
+    function getBME280_values(){
+      console.log("Data from I2C BME280:");
+      $("#loading_BME280").show();
+
+            $.ajax({
+              url: 'launcher.php?type=BME280',
+              method: 'GET', // Use GET or POST depending on your needs
+              success: function(response) {
+                        console.log(response);
+
+                        const tableBody = document.getElementById("data-table-body_BME280");
+                        tableBody.innerHTML = "";
+                        $("#loading_BME280").hide();
+                        
+                        // Parse the JSON response
+                        const data = JSON.parse(response);
+                        const keysToShow = ["temp", "hum", "press"];
+
+
+                        // Add only the specified elements to the table
+                        keysToShow.forEach(key => {
+                            if (response !== undefined) { // Check if the key exists in the response
+                                const value = data[key];
+                                const unit = key === "temp" ? "°C"
+                            : key === "hum" ? "%"
+                            : key === "press" ? "hPa"
+                            : ""; // Add appropriate units
+
+                                $("#data-table-body_BME280").append(`
+                                   <tr>
+                        <td>${key.charAt(0).toUpperCase() + key.slice(1)}</td>
+                        <td>${value} ${unit}</td>
+                    </tr>
+                                `);
+                            }
+                        });
+                    },
+                    error: function(xhr, status, error) {
+                        console.error('AJAX request failed:', status, error);
+                    }
+            });
+        }
+
+    function getData_saraR4(port, command, timeout){
+        console.log("Data from SaraR4");
+        console.log("Port: " + port );
+        console.log("Command: " + command );
+        console.log("Timeout: " + timeout );
+
+        const safeCommand = command.replace(/[?+=]/g, "_");
+        console.log(safeCommand);
+        
+        $("#loading_"+port+"_"+safeCommand).show();
+
+                $.ajax({
+                url: 'launcher.php?type=sara&port='+port+'&command='+encodeURIComponent(command)+'&timeout='+timeout,
+                //dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            //log response
+                            console.log(response);
+                            //hide spinning wheel
+                            $("#loading_"+port+"_"+safeCommand).hide();
+
+                            // si on fait le scan de network on veut une liste des réseaux
+                            if (command == "AT+COPS=?") {
+                               // Extract data within parentheses
+                              const matches = response.match(/\(.*?\)/g); // Matches all `(...)` sections
+                              const container = document.getElementById('table-network'); // Bootstrap container
+                               // Check if matches exist
+                              if (matches) {
+                                const table = document.createElement('table');
+                                table.className = 'table table-striped'; // Add Bootstrap table styling
+                                const thead = document.createElement('thead');
+                                const tbody = document.createElement('tbody');
+
+                                // Table header (you can customize this based on your data)
+                                const headerRow = document.createElement('tr');
+                                const header1 = document.createElement('th');
+                                header1.textContent = 'Status';
+                                const header2 = document.createElement('th');
+                                header2.textContent = 'Long oper';
+                                const header3 = document.createElement('th');
+                                header3.textContent = 'Short opeer';
+                                const header4 = document.createElement('th');
+                                header4.textContent = 'Numeric oper';
+                                const header5 = document.createElement('th');
+                                header5.textContent = 'AcT';
+                                headerRow.appendChild(header1);
+                                headerRow.appendChild(header2);
+                                headerRow.appendChild(header3);
+                                headerRow.appendChild(header4);
+                                headerRow.appendChild(header5);
+                                thead.appendChild(headerRow);
+                                table.appendChild(thead);
+
+                                // Loop through each match and create a row in the table
+                                matches.forEach((item) => {
+                                  // Skip empty sections
+                                  if (item === "()") return;
+
+                                  const row = document.createElement('tr');
+                                  const values = item.slice(1, -1).split(','); // Remove parentheses and split by commas
+
+                                  // Add table cells (td) for each value
+                                  values.forEach((value) => {
+                                    const cell = document.createElement('td');
+                                    cell.textContent = value.trim(); // Remove extra spaces
+                                    row.appendChild(cell);
+                                  });
+
+                                  tbody.appendChild(row);
+                                });
+
+                                // Add tbody to table and append the table to the container
+                                table.appendChild(tbody);
+                                container.appendChild(table);
+                              } else {
+                                console.error('No valid data found in response.');
+                              }
+                            } else{
+                              // si c'est une commande AT normale
+                              // Replace newline characters with <br> tags
+                            const formattedResponse = response.replace(/\n/g, "<br>");
+                            $("#response_"+port+"_"+safeCommand).html(formattedResponse);
+                            }
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+      function connectNetwork_saraR4(port, networkID, timeout){
+        console.log(" Connect to network (port "+port+" and network id "+networkID+"):");
+        $("#loading_"+port+"_AT_COPS_Connect").show();
+                $.ajax({
+                url: 'launcher.php?type=sara_connectNetwork&port='+port+'&networkID='+encodeURIComponent(networkID)+'&timeout='+timeout,
+                //dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            $("#loading_"+port+"_AT_COPS_Connect").hide();
+                            // Replace newline characters with <br> tags
+                            const formattedResponse = response.replace(/\n/g, "<br>");
+                            $("#response_"+port+"_AT_COPS_Connect").html(formattedResponse);
+
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+      function mqtt_getConfig_saraR4(port, timeout){
+        console.log("GET MQTT config (port "+port+"):");
+        $("#loading_mqtt_getConfig").show();
+                $.ajax({
+                url: 'launcher.php?type=sara_getMQTT_config&port='+port+'&timeout='+timeout,
+                //dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            $("#loading_mqtt_getConfig").hide();
+                            // Replace newline characters with <br> tags
+                            const formattedResponse = response.replace(/\n/g, "<br>");
+                            $("#response_mqtt_getConfig").html(formattedResponse);
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+      function mqtt_login_logout(port, login_logout, timeout){
+        console.log("GET MQTT login / logout (port "+port+"):");
+        $("#loading_mqtt_login_logout").show();
+                $.ajax({
+                url: 'launcher.php?type=sara_getMQTT_login_logout&port='+port+'&login_logout='+login_logout+'&timeout='+timeout,
+                //dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            $("#loading_mqtt_login_logout").hide();
+                            const formattedResponse = response.replace(/\n/g, "<br>");
+                            $("#response_mqtt_login_logout").html(formattedResponse);
+
+                            const regex = /^\+UMQTTC:\s*(\d+),(\d+)/m; // Match "+UMQTTC:", followed by two numbers separated by a comma
+                            const match = response.match(regex);
+
+                            if (match) {
+                                const firstNumber = match[1]; // The first number after ":"
+                                const secondNumber = match[2]; // The second number after the ","
+                                if (firstNumber == 0) {
+                                  console.log("MQTT LOGOUT:");
+                                  $("#response_mqtt_login_logout").append("<p>logout</p>");
+                                }
+                                if (firstNumber == 1) {
+                                  console.log("MQTT LOGIN:");
+                                  $("#response_mqtt_login_logout").append("<p>login</p>");
+                                }
+                                if (secondNumber == 0) {
+                                  console.log("ERROR");
+                                  $("#response_mqtt_login_logout").append("<p>error</p>");
+                                }
+                                if (secondNumber == 1) {
+                                  console.log("SUCCESS");
+                                  $("#response_mqtt_login_logout").append("<p>success</p>");
+                                }
+
+                            } else {
+                                console.log("No matching line found");
+}
+                            
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+      
+      function mqtt_publish(port, message, timeout){
+        console.log(" MQTT publish (port "+port+"):");
+        $("#loading_mqtt_publish").show();
+                $.ajax({
+                url: 'launcher.php?type=sara_MQTT_publish&port='+port+'&timeout='+timeout+'&message='+message,
+                //dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            $("#loading_mqtt_publish").hide();
+                            // Replace newline characters with <br> tags
+                            const formattedResponse = response.replace(/\n/g, "<br>");
+                            $("#response_mqtt_publish").html(formattedResponse);
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+      function setURL_saraR4(port, url){
+        console.log("Set URL for HTTP (port "+port+" and URL "+url+"):");
+        $("#loading_"+port+"_setURL").show();
+                $.ajax({
+                url: 'launcher.php?type=sara_setURL&port='+port+'&url='+encodeURIComponent(url),
+                //dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            $("#loading_"+port+"_setURL").hide();
+                            // Replace newline characters with <br> tags
+                            const formattedResponse = response.replace(/\n/g, "<br>");
+                            $("#response_"+port+"_setURL").html(formattedResponse);
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+      function writeMessage_saraR4(port, message, type){
+        console.log(type +" message to SARA R4 memory (port "+port+" and message "+message+"):");
+        $("#loading_"+port+"_message_write").show();
+                $.ajax({
+                url: 'launcher.php?type=sara_writeMessage&port='+port+'&message='+encodeURIComponent(message)+'&type2='+type,
+                //dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            $("#loading_"+port+"_message_write").hide();
+                            // Replace newline characters with <br> tags
+                            const formattedResponse = response.replace(/\n/g, "<br>");
+                            $("#response_"+port+"_message_write").html(formattedResponse);
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+      function sendMessage_saraR4(port, endpoint){
+        console.log("Send message from SaraR4 (port "+port+" and endpoint "+endpoint+"):");
+
+        $("#loading_"+port+"_message_send").show();
+
+                $.ajax({
+                url: 'launcher.php?type=sara_sendMessage&port='+port+'&endpoint='+encodeURIComponent(endpoint),
+                //dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            $("#loading_"+port+"_message_send").hide();
+                            // Replace newline characters with <br> tags
+                            const formattedResponse = response.replace(/\n/g, "<br>");
+                            $("#response_"+port+"_message_send").html(formattedResponse);
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+
+      function get_internet(){
+        console.log("Getting internet general infos");
+                $.ajax({
+                url: 'launcher.php?type=internet',
+                dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            let tableBody = document.getElementById('data-table-body_internet_general');
+                            tableBody.innerHTML = '';  // Clear existing table content
+
+                            // Iterate through the data and create rows
+                            for (let key in response) {
+                                let row = `
+                                    <tr>
+                                        <td>${key}</td>
+                                        <td>${response[key].connection}</td>
+                                        <td>${response[key].IP ? response[key].IP : "No IP"}</td>
+                                    </tr>
+                                `;
+                                tableBody.innerHTML += row; // Append row to table body
+                            }
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+      function wifi_connect(SSID, PASS){
+        console.log("Connecting to wifi");
+        console.log(SSID);
+        console.log(PASS);
+        if (typeof PASS === 'undefined') {
+          console.log("Need to add password");
+          //open bootstrap modal to ask for password
+          var myModal = new bootstrap.Modal(document.getElementById('myModal'));
+          //modifiy modal title
+          document.getElementById('myModalLabel').innerHTML = "Enter password for "+SSID;
+          //add input field to modal body
+          document.getElementById('myModalBody').innerHTML = "<input type='text' id='wifi_pass' class='form-control' placeholder='Password'>";
+          //add button to modal footer
+          document.getElementById('myModalFooter').innerHTML = "<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick='wifi_connect(\""+SSID+"\", document.getElementById(\"wifi_pass\").value)'>Se connecter</button>";
+          myModal.show();
+        } else {
+          console.log("Will try to connect to "+SSID+" with password "+PASS);
+          console.log("Start PHP script:");
+          
+          $.ajax({
+                url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS,
+                dataType: 'text', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                         
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+                
+        }
+            }
+
+      function wifi_scan(){
+        console.log("Scanning Wifi");
+                $.ajax({
+                url: 'launcher.php?type=wifi_scan',
+                dataType: 'json', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log(response);
+                            const tableBody = document.getElementById("data-table-body_wifi_scan");
+
+                            // Clear the existing table body
+                            tableBody.innerHTML = "";
+
+                            // Loop through the wifiNetworks array and create rows
+                            response.forEach(network => {
+                                const row = document.createElement("tr");
+
+                                // Create and append cells for SSID, BARS, and SIGNAL
+                                const ssidCell = document.createElement("td");
+                                 // Truncate SSID to 25 characters
+                                const truncatedSSID = network.SSID.length > 20 ? network.SSID.substring(0, 20) + '...' : network.SSID;
+                                ssidCell.textContent = truncatedSSID;
+                                row.appendChild(ssidCell);
+
+                                /*
+                                const signalCell = document.createElement("td");
+                                signalCell.textContent = network.SIGNAL;
+                                row.appendChild(signalCell);
+                                */
+
+                                 // Create a button
+                                const buttonCell = document.createElement("td");
+                                const button = document.createElement("button");
+                                button.textContent = "Connect"; // Button text
+                                button.classList.add("btn", "btn-primary"); // Bootstrap button classes
+
+                                // Determine button color based on SIGNAL value
+                                const signalValue = parseInt(network.SIGNAL, 10); // Assuming SIGNAL is a numeric value
+                                 // Calculate color based on the signal strength
+                                let buttonColor;
+                                if (signalValue >= 100) {
+                                    buttonColor = "success"; // Green for strong signal
+                                } else if (signalValue >= 50) {
+                                    buttonColor = "warning"; // Yellow for moderate signal
+                                } else {
+                                    buttonColor = "danger"; // Red for weak signal
+                                }
+                                // Add Bootstrap button classes along with color
+                                button.classList.add("btn", `btn-${buttonColor}`);
+
+
+                                //Trigger function as soon as the button is clicked
+                                button.addEventListener("click", () => wifi_connect(network.SSID));
+
+
+                                // Append the button to the button cell
+                                buttonCell.appendChild(button);
+                                row.appendChild(buttonCell);
+
+                                // Append the row to the table body
+                                tableBody.appendChild(row);
+                            });
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+            }
+
+
+      function confirmSubmit() {
+        // You can display a simple confirmation message or customize the behavior
+        return confirm("Are you sure you want to connect to this Wi-Fi network?");
+    }
+
+    let intervalId;
+
+    function startNoise() {
+            // Check if interval is already running
+            if (!intervalId) {
+                intervalId = setInterval(getNoise_values, 1000);
+                console.log("Function started");
+            }
+        }
+
+        function stopNoise() {
+            if (intervalId) {
+                clearInterval(intervalId);
+                intervalId = null; // Reset intervalId to indicate that the function is stopped
+                console.log("Function stopped");
+            }
+        }
+    //setInterval(getNoise_values, 1000);
+
+    window.onload = function() {
+    fetch('config.json') // Replace 'deviceID.txt' with 'config.json'
+        .then(response => response.json()) // Parse response as JSON
+        .then(data => {
+            //get device ID
+            const deviceID = data.deviceID.trim().toUpperCase();
+            document.getElementById('pageTitle_plus_ID').innerText = 'token: ' + deviceID;
+
+            //get SARA_R4 connection status
+            const SARA_statusElement = document.getElementById("modem-status");
+            console.log("SARA R4 is: " + data.SARA_R4_network_status);
+            
+            if (data.SARA_R4_network_status === "connected") {
+              SARA_statusElement.textContent = "Connected";
+              SARA_statusElement.className = "badge text-bg-success";
+            } else if (data.SARA_R4_network_status === "disconnected") {
+              SARA_statusElement.textContent = "Disconnected";
+              SARA_statusElement.className = "badge text-bg-danger";
+            } else {
+              SARA_statusElement.textContent = "Unknown";
+              SARA_statusElement.className = "badge text-bg-secondary";
+            }
+
+            //get wifi connection status
+            const WIFI_statusElement = document.getElementById("wifi-status");
+            console.log("WIFI is: " + data.WIFI_status);
+
+            if (data.WIFI_status === "connected") {
+              WIFI_statusElement.textContent = "Connected";
+              WIFI_statusElement.className = "badge text-bg-success";
+            } else if (data.WIFI_status === "hotspot") {
+              WIFI_statusElement.textContent = "Hotspot";
+              WIFI_statusElement.className = "badge text-bg-warning";
+            } else {
+              WIFI_statusElement.textContent = "Unknown";
+              WIFI_statusElement.className = "badge text-bg-secondary";
+            }
+
+            //get local RTC
+            $.ajax({
+                url: 'launcher.php?type=RTC_time',
+                dataType: 'text', // Specify that you expect a JSON response
+                method: 'GET', // Use GET or POST depending on your needs
+                success: function(response) {
+                            console.log("Local RTC: " + response);
+                            const RTC_Element = document.getElementById("RTC_time");
+                            RTC_Element.textContent = response;
+
+                        },
+                        error: function(xhr, status, error) {
+                            console.error('AJAX request failed:', status, error);
+                        }
+                });
+
+            const container = document.getElementById('card-container'); // Conteneur des cartes
+            //creates NPM cards
+            const ports = data.NextPM_ports; // Récupère les ports
+            
+            // Générer les cartes dynamiquement
+            ports.forEach((port, index) => {
+              const cardHTML = `
+                <div class="col-sm-3">
+                  <div class="card">
+                    <div class="card-header">
+                      Port UART ${port.replace('ttyAMA', '')}
+                    </div>
+                    <div class="card-body">
+                      <h5 class="card-title">NextPM ${String.fromCharCode(65 + index)}</h5>
+                      <p class="card-text">Capteur particules fines.</p>
+                      <button class="btn btn-primary" onclick="getNPM_values('${port}')">Get Data</button>
+                      <div id="loading_${port}" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+                      <table class="table table-striped-columns">
+                        <tbody id="data-table-body_${port}"></tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>`;
+              container.innerHTML += cardHTML; // Ajouter la carte au conteneur
+            });
+
+            //creates i2c BME280 card
+            if (data.i2c_BME) {
+              const i2C_BME_HTML = `
+                <div class="col-sm-3">
+                  <div class="card">
+                    <div class="card-header">
+                      Port I2C
+                    </div>
+                    <div class="card-body">
+                      <h5 class="card-title">BME280 Temp/Hum sensor</h5>
+                      <p class="card-text">Capteur température et humidité sur le port I2C.</p>
+                      <button class="btn btn-primary mb-1" onclick="getBME280_values()">Get Data</button>
+                      <br>
+                      <div id="loading_BME280" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+                      <table class="table table-striped-columns">
+                        <tbody id="data-table-body_BME280"></tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>`;
+              
+              container.innerHTML += i2C_BME_HTML; // Add the I2C card if condition is met
+            }
+
+             //creates i2c sound card
+             if (data.i2C_sound) {
+              const i2C_HTML = `
+                <div class="col-sm-3">
+                  <div class="card">
+                    <div class="card-header">
+                      Port I2C
+                    </div>
+                    <div class="card-body">
+                      <h5 class="card-title">Decibel Meter</h5>
+                      <p class="card-text">Capteur bruit sur le port I2C.</p>
+                      <button class="btn btn-primary mb-1" onclick="getNoise_values()">Get Data</button>
+                      <br>
+                      <button class="btn btn-success" onclick="startNoise()">Start recording</button>
+                      <button class="btn btn-danger" onclick="stopNoise()">Stop recording</button>
+                      <div id="loading_noise" class="spinner-border spinner-border-sm" style="display: none;" role="status"></div>
+                      <table class="table table-striped-columns">
+                        <tbody id="data-table-body_noise"></tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>`;
+              
+              container.innerHTML += i2C_HTML; // Add the I2C card if condition is met
+            }
+
+        })
+        .catch(error => console.error('Error loading config.json:', error));
+      }
+
+
+        // LOGS modal
+        document.addEventListener('DOMContentLoaded', () => {
+        // Get the modal body
+        const modal_loop_Body = document.querySelector('#loopLog_modal .modal-body');
+        const modal_boot_Body = document.querySelector('#bootLog_modal .modal-body');
+
+        // LOOP
+        function fetchLoopLogs() {
+          fetch('logs/loop.log')
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error('Failed to fetch the log file.');
+              }
+              return response.text();
+            })
+            .then((data) => {
+              const lines = data.split('\n');
+
+              // Format log content
+              const formattedLog = lines
+                .map((line) => line.trim()) // Remove extra whitespace
+                .filter((line) => line) // Remove empty lines
+                .join('<br>'); // Join formatted lines with line breaks
+
+              modal_loop_Body.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${formattedLog}</pre>`;
+            })
+            .catch((error) => {
+              console.error(error);
+              modal_loop_Body.textContent = 'Error loading log file.';
+            });
+        }
+        //BOOT
+        function fetchBootLogs() {
+          fetch('logs/app.log')
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error('Failed to fetch the log file.');
+              }
+              return response.text();
+            })
+            .then((data) => {
+              const lines = data.split('\n');
+
+              // Format log content
+              const formattedLog = lines
+                .map((line) => line.trim()) // Remove extra whitespace
+                .filter((line) => line) // Remove empty lines
+                .join('<br>'); // Join formatted lines with line breaks
+
+                modal_boot_Body.innerHTML = `<pre style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">${formattedLog}</pre>`;
+            })
+            .catch((error) => {
+              console.error(error);
+              modal_boot_Body.textContent = 'Error loading log file.';
+            });
+        }
+
+        document.getElementById('loopLog_modal').addEventListener('show.bs.modal', fetchLoopLogs);
+        document.getElementById('refreshLoopLog').addEventListener('click', fetchLoopLogs);
+
+        document.getElementById('bootLog_modal').addEventListener('show.bs.modal', fetchBootLogs);
+        document.getElementById('refreshBootLog').addEventListener('click', fetchBootLogs);
+
+      });
+
+      
+
+
+</script>
+</html>
\ No newline at end of file
diff --git a/loop/1_NPM/send_data.py b/loop/1_NPM/send_data.py
index f50defb..b3e5cb7 100755
--- a/loop/1_NPM/send_data.py
+++ b/loop/1_NPM/send_data.py
@@ -368,7 +368,7 @@ try:
             # 2.2 code 1 (HHTP succeded)
             else:
                 # Si la commande HTTP a réussi
-                print('<span style="color: green; font-weight: bold;">HTTP operation successful.</span>')
+                print('<span class="badge text-bg-success">HTTP operation successful.</span>')
                 update_json_key(config_file, "SARA_R4_network_status", "connected")
                 print("Turning on the blue LED...")
                 for _ in range(4):  # Faire clignoter 4 fois
@@ -382,7 +382,9 @@ try:
                 response_SARA_4 = read_complete_response(ser_sara)
                 if need_to_log:
                     print("Reply from server:")
+                    print('<p class="text-success">')
                     print(response_SARA_4)
+                    print('</p>')
 
     #5. empty json
     ser_sara.write(b'AT+UDELFILE="sensordata.json"\r')