add config page and terminal page

2025-03-08 14:43:22 +01:00
5 changed files with 973 additions and 1 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,24 @@
+# NebuleAir Pro 4G Development Guidelines
+
+## Commands
+- `sudo systemctl restart master_nebuleair.service` - Restart main service
+- `sudo systemctl status master_nebuleair.service` - Check service status
+- Manual testing: Run individual Python scripts (e.g., `sudo python3 NPM/get_data_modbus_v3.py`)
+- Installation: `sudo ./installation_part1.sh` followed by `sudo ./installation_part2.sh`
+
+## Code Style
+- **Language:** Python 3 with HTML/JS/CSS for web interface
+- **Structure:** Organized by component (BME280, NPM, RTC, SARA, etc.)
+- **Naming:** snake_case for variables/functions, version suffix for iterations (e.g., `_v2.py`)
+- **Documentation:** Include docstrings with script purpose and usage instructions
+- **Error Handling:** Use try/except blocks for I/O operations, print errors to logs
+- **Configuration:** All settings in `config.json`, avoid hardcoding values
+- **Web Components:** Follow Bootstrap patterns, use fetch() for AJAX
+
+## Best Practices
+- Check if features are enabled in config before execution
+- Close database connections after use
+- Round sensor readings to appropriate precision
+- Keep web interface mobile-responsive
+- Include error handling for network operations
+- Follow existing patterns when adding new functionality
--- a/html/config.html
+++ b/html/config.html
@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NebuleAir - Config Editor</title>
+  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+  <style>
+    body {
+      overflow-x: hidden;
+    }
+    #sidebar a.nav-link {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+    #sidebar a.nav-link:hover {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+    #sidebar a.nav-link svg {
+        margin-right: 8px; /* Add spacing between icons and text */
+    }
+    #sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .offcanvas-backdrop {
+      z-index: 1040;
+    }
+    #jsonEditor {
+      width: 100%;
+      min-height: 400px;
+      font-family: monospace;
+      font-size: 14px;
+      border: 1px solid #ccc;
+      padding: 10px;
+      white-space: pre;
+    }
+    .password-popup {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 2000;
+      justify-content: center;
+      align-items: center;
+    }
+    .password-container {
+      background-color: white;
+      padding: 20px;
+      border-radius: 5px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      width: 300px;
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+   <span id="topbar"></span>
+
+  <!-- Sidebar Offcanvas for Mobile -->
+  <div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
+      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body" id="sidebar_mobile">
+    </div>
+  </div>
+
+  <div class="container-fluid mt-5">
+    <div class="row">
+      <!-- Side bar -->
+      <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-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
+        <h1 class="mt-4">Configuration Editor</h1>
+        
+        <div class="row mb-3">
+          <div class="col-12">
+            <div class="alert alert-warning">
+              <strong>Warning:</strong> Editing the configuration file directly can affect system functionality. 
+              Make changes carefully and ensure valid JSON format.
+            </div>
+            
+            <div class="card">
+              <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">config.json</h5>
+                <div>
+                  <button id="editBtn" class="btn btn-primary me-2">Edit</button>
+                  <button id="saveBtn" class="btn btn-success me-2" disabled>Save</button>
+                  <button id="cancelBtn" class="btn btn-secondary" disabled>Cancel</button>
+                </div>
+              </div>
+              <div class="card-body">
+                <div id="jsonEditor" class="mb-3" readonly></div>
+                <div id="errorMsg" class="alert alert-danger" style="display:none;"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <!-- Password Modal -->
+  <div class="password-popup" id="passwordModal">
+    <div class="password-container">
+      <h5>Authentication Required</h5>
+      <p>Please enter the admin password to edit configuration:</p>
+      <div class="mb-3">
+        <input type="password" class="form-control" id="adminPassword" placeholder="Password">
+      </div>
+      <div class="mb-3 d-flex justify-content-between">
+        <button class="btn btn-secondary" id="cancelPasswordBtn">Cancel</button>
+        <button class="btn btn-primary" id="submitPasswordBtn">Submit</button>
+      </div>
+      <div id="passwordError" class="text-danger mt-2" style="display:none;"></div>
+    </div>
+  </div>
+
+<!-- JAVASCRIPT -->
+
+<!-- Link Ajax locally -->
+<script src="assets/jquery/jquery-3.7.1.min.js"></script>
+<!-- Link Bootstrap JS and Popper.js locally -->
+<script src="assets/js/bootstrap.bundle.js"></script>
+
+<script>
+ document.addEventListener('DOMContentLoaded', function () {
+    const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+    ];
+
+    elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+            .then(response => response.text())
+            .then(data => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.innerHTML = data;
+                }
+            })
+            .catch(error => console.error(`Error loading ${file}:`, error));
+    });
+});
+
+// Add admin password (should be changed to something more secure)
+const ADMIN_PASSWORD = "nebuleair123";
+
+// Global variables for editor
+let originalConfig = '';
+let jsonEditor;
+let editBtn;
+let saveBtn;
+let cancelBtn;
+let passwordModal;
+let adminPassword;
+let submitPasswordBtn;
+let cancelPasswordBtn;
+let passwordError;
+let errorMsg;
+
+// Initialize DOM references after document is loaded
+function initializeElements() {
+    jsonEditor = document.getElementById('jsonEditor');
+    editBtn = document.getElementById('editBtn');
+    saveBtn = document.getElementById('saveBtn');
+    cancelBtn = document.getElementById('cancelBtn');
+    passwordModal = document.getElementById('passwordModal');
+    adminPassword = document.getElementById('adminPassword');
+    submitPasswordBtn = document.getElementById('submitPasswordBtn');
+    cancelPasswordBtn = document.getElementById('cancelPasswordBtn');
+    passwordError = document.getElementById('passwordError');
+    errorMsg = document.getElementById('errorMsg');
+}
+
+// Load config file
+function loadConfigFile() {
+    fetch('../config.json')
+        .then(response => response.text())
+        .then(data => {
+            originalConfig = data;
+            // Format JSON for display with proper indentation
+            try {
+                const jsonObj = JSON.parse(data);
+                const formattedJSON = JSON.stringify(jsonObj, null, 2);
+                jsonEditor.textContent = formattedJSON;
+            } catch (e) {
+                jsonEditor.textContent = data;
+                console.error("Error parsing JSON:", e);
+            }
+        })
+        .catch(error => {
+            console.error('Error loading config.json:', error);
+            jsonEditor.textContent = "Error loading configuration file.";
+        });
+}
+
+// Event listeners
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize DOM elements
+    initializeElements();
+    
+    // Load config file
+    loadConfigFile();
+    
+    // Edit button
+    editBtn.addEventListener('click', function() {
+        passwordModal.style.display = 'flex';
+        adminPassword.value = ''; // Clear password field
+        passwordError.style.display = 'none';
+        adminPassword.focus();
+    });
+    
+    // Password submit button
+    submitPasswordBtn.addEventListener('click', function() {
+        if (adminPassword.value === ADMIN_PASSWORD) {
+            passwordModal.style.display = 'none';
+            enableEditing();
+        } else {
+            passwordError.textContent = 'Invalid password';
+            passwordError.style.display = 'block';
+        }
+    });
+    
+    // Enter key for password
+    adminPassword.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            submitPasswordBtn.click();
+        }
+    });
+    
+    // Cancel password button
+    cancelPasswordBtn.addEventListener('click', function() {
+        passwordModal.style.display = 'none';
+    });
+    
+    // Save button
+    saveBtn.addEventListener('click', function() {
+        saveConfig();
+    });
+    
+    // Cancel button
+    cancelBtn.addEventListener('click', function() {
+        cancelEditing();
+    });
+});
+
+// Enable editing mode
+function enableEditing() {
+    jsonEditor.setAttribute('contenteditable', 'true');
+    jsonEditor.focus();
+    jsonEditor.classList.add('border-primary');
+    editBtn.disabled = true;
+    saveBtn.disabled = false;
+    cancelBtn.disabled = false;
+}
+
+// Cancel editing
+function cancelEditing() {
+    jsonEditor.setAttribute('contenteditable', 'false');
+    jsonEditor.classList.remove('border-primary');
+    jsonEditor.textContent = originalConfig;
+    // Reformat JSON
+    try {
+        const jsonObj = JSON.parse(originalConfig);
+        const formattedJSON = JSON.stringify(jsonObj, null, 2);
+        jsonEditor.textContent = formattedJSON;
+    } catch (e) {
+        jsonEditor.textContent = originalConfig;
+    }
+    editBtn.disabled = false;
+    saveBtn.disabled = true;
+    cancelBtn.disabled = true;
+    errorMsg.style.display = 'none';
+}
+
+// Save config
+function saveConfig() {
+    const newConfig = jsonEditor.textContent;
+    
+    // Validate JSON
+    try {
+        JSON.parse(newConfig);
+        
+        // Send to server
+        $.ajax({
+            url: 'launcher.php',
+            method: 'POST',
+            data: { 
+                type: 'save_config',
+                config: newConfig 
+            },
+            dataType: 'json',
+            success: function(response) {
+                if (response.success) {
+                    originalConfig = newConfig;
+                    jsonEditor.setAttribute('contenteditable', 'false');
+                    jsonEditor.classList.remove('border-primary');
+                    editBtn.disabled = false;
+                    saveBtn.disabled = true;
+                    cancelBtn.disabled = true;
+                    
+                    // Show success message
+                    errorMsg.textContent = 'Configuration saved successfully!';
+                    errorMsg.classList.remove('alert-danger');
+                    errorMsg.classList.add('alert-success');
+                    errorMsg.style.display = 'block';
+                    
+                    // Hide success message after 3 seconds
+                    setTimeout(() => {
+                        errorMsg.style.display = 'none';
+                    }, 3000);
+                } else {
+                    errorMsg.textContent = 'Error saving configuration: ' + response.message;
+                    errorMsg.classList.remove('alert-success');
+                    errorMsg.classList.add('alert-danger');
+                    errorMsg.style.display = 'block';
+                }
+            },
+            error: function(xhr, status, error) {
+                errorMsg.textContent = 'Error saving configuration: ' + error;
+                errorMsg.classList.remove('alert-success');
+                errorMsg.classList.add('alert-danger');
+                errorMsg.style.display = 'block';
+            }
+        });
+    } catch (e) {
+        errorMsg.textContent = 'Invalid JSON format: ' + e.message;
+        errorMsg.classList.remove('alert-success');
+        errorMsg.classList.add('alert-danger');
+        errorMsg.style.display = 'block';
+    }
+}
+</script>
+
+</body>
+</html>
--- a/html/launcher.php
+++ b/html/launcher.php
@@ -4,7 +4,8 @@ header("Content-Type: application/json");
 header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
 header("Pragma: no-cache");

-$type=$_GET['type'];
+// Get request type from GET or POST parameters
+$type = isset($_GET['type']) ? $_GET['type'] : (isset($_POST['type']) ? $_POST['type'] : '');

 if ($type == "get_npm_sqlite_data") {
    $database_path = "/var/www/nebuleair_pro_4g/sqlite/sensors.db";
@@ -484,3 +485,193 @@ if ($type == "wifi_scan_old") {
    echo $json_data;

 }
+
+// Save config.json with password protection
+if ($type == "save_config") {
+    // Verify that the request is using POST method
+    if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+        echo json_encode(['success' => false, 'message' => 'Invalid request method']);
+        exit;
+    }
+    
+    // Get the config content from POST data
+    $config = isset($_POST['config']) ? $_POST['config'] : '';
+    
+    if (empty($config)) {
+        echo json_encode(['success' => false, 'message' => 'No configuration data provided']);
+        exit;
+    }
+    
+    // Validate that the content is valid JSON
+    $decodedConfig = json_decode($config);
+    if (json_last_error() !== JSON_ERROR_NONE) {
+        echo json_encode([
+            'success' => false, 
+            'message' => 'Invalid JSON format: ' . json_last_error_msg()
+        ]);
+        exit;
+    }
+    
+    // Path to the configuration file
+    $configFile = '/var/www/nebuleair_pro_4g/config.json';
+    
+    // Create a backup of the current config
+    $backupFile = '/var/www/nebuleair_pro_4g/config.json.backup-' . date('Y-m-d-H-i-s');
+    if (file_exists($configFile)) {
+        copy($configFile, $backupFile);
+    }
+    
+    // Write the updated configuration to the file
+    $result = file_put_contents($configFile, $config);
+    
+    if ($result === false) {
+        echo json_encode([
+            'success' => false, 
+            'message' => 'Failed to write configuration file. Check permissions.'
+        ]);
+    } else {
+        echo json_encode([
+            'success' => true, 
+            'message' => 'Configuration saved successfully',
+            'bytes_written' => $result
+        ]);
+    }
+}
+
+// Execute shell command with security restrictions
+if ($type == "execute_command") {
+    // Verify that the request is using POST method
+    if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+        echo json_encode(['success' => false, 'message' => 'Invalid request method']);
+        exit;
+    }
+    
+    // Get the command from POST data
+    $command = isset($_POST['command']) ? $_POST['command'] : '';
+    
+    if (empty($command)) {
+        echo json_encode(['success' => false, 'message' => 'No command provided']);
+        exit;
+    }
+    
+    // List of allowed commands (prefixes)
+    $allowedCommands = [
+        'ls', 'cat', 'cd', 'pwd', 'df', 'free', 'ifconfig', 'ip', 'ps', 'date', 'uptime', 
+        'systemctl status', 'whoami', 'hostname', 'uname', 'grep', 'tail', 'head', 'find',
+        'less', 'more', 'du', 'echo'
+    ];
+    
+    // Check if command is allowed
+    $allowed = false;
+    foreach ($allowedCommands as $allowedCmd) {
+        if (strpos($command, $allowedCmd) === 0) {
+            $allowed = true;
+            break;
+        }
+    }
+    
+    // Special case for systemctl restart and reboot
+    if (strpos($command, 'systemctl restart') === 0 || $command === 'reboot') {
+        // These commands don't return output through shell_exec since they change process state
+        // We'll just acknowledge them
+        if ($command === 'reboot') {
+            // Execute the command with exec to avoid waiting for output
+            exec('sudo reboot > /dev/null 2>&1 &');
+            echo json_encode([
+                'success' => true,
+                'output' => 'System is rebooting...'
+            ]);
+        } else {
+            // For systemctl restart, execute it and acknowledge
+            $serviceName = str_replace('systemctl restart ', '', $command);
+            exec('sudo systemctl restart ' . escapeshellarg($serviceName) . ' > /dev/null 2>&1 &');
+            echo json_encode([
+                'success' => true,
+                'output' => 'Service ' . $serviceName . ' is restarting...'
+            ]);
+        }
+        exit;
+    }
+    
+    // Check for prohibited patterns
+    $prohibitedPatterns = [
+        'sudo rm', ';', '&&', '||', '|', '>', '>>', '&',
+        'wget', 'curl', 'nc', 'ssh', 'scp', 'ftp', 'telnet',
+        'iptables', 'passwd', 'chown', 'chmod', 'mkfs', 'dd',
+        'mount', 'umount', 'kill', 'killall'
+    ];
+    
+    foreach ($prohibitedPatterns as $pattern) {
+        if (strpos($command, $pattern) !== false) {
+            echo json_encode([
+                'success' => false,
+                'message' => 'Command contains prohibited operation: ' . $pattern
+            ]);
+            exit;
+        }
+    }
+    
+    if (!$allowed) {
+        echo json_encode([
+            'success' => false,
+            'message' => 'Command not allowed for security reasons'
+        ]);
+        exit;
+    }
+    
+    // Execute the command with timeout protection
+    $descriptorspec = [
+        0 => ["pipe", "r"],  // stdin
+        1 => ["pipe", "w"],  // stdout
+        2 => ["pipe", "w"]   // stderr
+    ];
+    
+    // Escape the command to prevent shell injection
+    $escapedCommand = escapeshellcmd($command);
+    
+    // Add timeout of 5 seconds to prevent long-running commands
+    $process = proc_open("timeout 5 $escapedCommand", $descriptorspec, $pipes);
+    
+    if (is_resource($process)) {
+        // Close stdin pipe
+        fclose($pipes[0]);
+        
+        // Get output from stdout
+        $output = stream_get_contents($pipes[1]);
+        fclose($pipes[1]);
+        
+        // Get any errors
+        $errors = stream_get_contents($pipes[2]);
+        fclose($pipes[2]);
+        
+        // Close the process
+        $returnValue = proc_close($process);
+        
+        // Check for errors
+        if ($returnValue !== 0) {
+            // If there was an error, but we have output, consider it a partial success
+            if (!empty($output)) {
+                echo json_encode([
+                    'success' => true,
+                    'output' => $output . "\n" . $errors . "\nCommand exited with code $returnValue"
+                ]);
+            } else {
+                echo json_encode([
+                    'success' => false,
+                    'message' => empty($errors) ? "Command failed with exit code $returnValue" : $errors
+                ]);
+            }
+        } else {
+            // Success
+            echo json_encode([
+                'success' => true,
+                'output' => $output
+            ]);
+        }
+    } else {
+        echo json_encode([
+            'success' => false,
+            'message' => 'Failed to execute command'
+        ]);
+    }
+}
--- a/html/sidebar.html
+++ b/html/sidebar.html
@@ -47,6 +47,18 @@
        </svg>
        Carte
      </a>
+      <a class="nav-link text-white" href="config.html">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
+          <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+        </svg>
+        Config
+      </a>
+      <a class="nav-link text-white" href="terminal.html">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal-fill" viewBox="0 0 16 16">
+          <path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm9.5 5.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm-6.354-.354a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146z"/>
+        </svg>
+        Terminal
+      </a>
      <a class="nav-link text-white" href="admin.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tools" viewBox="0 0 16 16">
            <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/>
--- a/html/terminal.html
+++ b/html/terminal.html
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NebuleAir - Terminal</title>
+  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+  <style>
+    body {
+      overflow-x: hidden;
+    }
+    #sidebar a.nav-link {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+    #sidebar a.nav-link:hover {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+    #sidebar a.nav-link svg {
+        margin-right: 8px; /* Add spacing between icons and text */
+    }
+    #sidebar {
+      transition: transform 0.3s ease-in-out;
+    }
+    .offcanvas-backdrop {
+      z-index: 1040;
+    }
+    #terminal {
+      width: 100%;
+      min-height: 400px;
+      max-height: 400px;
+      overflow-y: auto;
+      background-color: #000;
+      color: #00ff00;
+      font-family: monospace;
+      padding: 10px;
+      border-radius: 5px;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    #cmdLine {
+      width: 100%;
+      background-color: #000;
+      color: #00ff00;
+      font-family: monospace;
+      padding: 10px;
+      border: none;
+      border-radius: 0 0 5px 5px;
+      margin-top: -1px;
+    }
+    #cmdLine:focus {
+      outline: none;
+    }
+    .command-container {
+      display: none;
+    }
+    .password-popup {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 2000;
+      justify-content: center;
+      align-items: center;
+    }
+    .password-container {
+      background-color: white;
+      padding: 20px;
+      border-radius: 5px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      width: 300px;
+    }
+    .limited-commands {
+      background-color: #f8f9fa;
+      padding: 15px;
+      border-radius: 5px;
+      margin-bottom: 15px;
+    }
+    .limited-commands code {
+      white-space: nowrap;
+      margin-right: 10px;
+      margin-bottom: 5px;
+      display: inline-block;
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <span id="topbar"></span>
+
+  <!-- Sidebar Offcanvas for Mobile -->
+  <div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
+      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body" id="sidebar_mobile">
+    </div>
+  </div>
+
+  <div class="container-fluid mt-5">
+    <div class="row">
+      <!-- Side bar -->
+      <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-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
+        <h1 class="mt-4">Terminal Console</h1>
+        
+        <div class="row mb-3">
+          <div class="col-12">
+            <div class="alert alert-warning">
+              <strong>Warning:</strong> This terminal provides direct access to system commands. 
+              Use with caution as improper commands may affect system functionality.
+            </div>
+
+            <div class="limited-commands">
+              <h5>Quick Commands:</h5>
+              <div>
+                <code onclick="insertCommand('ls -la')">ls -la</code>
+                <code onclick="insertCommand('df -h')">df -h</code>
+                <code onclick="insertCommand('free -h')">free -h</code>
+                <code onclick="insertCommand('uptime')">uptime</code>
+                <code onclick="insertCommand('systemctl status master_nebuleair.service')">service status</code>
+                <code onclick="insertCommand('cat /var/www/nebuleair_pro_4g/config.json')">view config</code>
+              </div>
+            </div>
+            
+            <div class="card">
+              <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">Command Console</h5>
+                <div>
+                  <button id="accessBtn" class="btn btn-primary me-2">Access Terminal</button>
+                  <button id="clearBtn" class="btn btn-secondary" disabled>Clear</button>
+                </div>
+              </div>
+              <div class="card-body p-0">
+                <div class="command-container" id="commandContainer">
+                  <div id="terminal">Welcome to NebuleAir Terminal Console
+Type your commands below. Type 'help' for a list of commands.
+</div>
+                  <input type="text" id="cmdLine" placeholder="Enter command..." disabled>
+                </div>
+                <div id="errorMsg" class="alert alert-danger m-3" style="display:none;"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+
+  <!-- Password Modal -->
+  <div class="password-popup" id="passwordModal">
+    <div class="password-container">
+      <h5>Authentication Required</h5>
+      <p>Please enter the admin password to access the terminal:</p>
+      <div class="mb-3">
+        <input type="password" class="form-control" id="adminPassword" placeholder="Password">
+      </div>
+      <div class="mb-3 d-flex justify-content-between">
+        <button class="btn btn-secondary" id="cancelPasswordBtn">Cancel</button>
+        <button class="btn btn-primary" id="submitPasswordBtn">Submit</button>
+      </div>
+      <div id="passwordError" class="text-danger mt-2" style="display:none;"></div>
+    </div>
+  </div>
+
+  <!-- JAVASCRIPT -->
+  <!-- Link Ajax locally -->
+  <script src="assets/jquery/jquery-3.7.1.min.js"></script>
+  <!-- Link Bootstrap JS and Popper.js locally -->
+  <script src="assets/js/bootstrap.bundle.js"></script>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const elementsToLoad = [
+        { id: 'topbar', file: 'topbar.html' },
+        { id: 'sidebar', file: 'sidebar.html' },
+        { id: 'sidebar_mobile', file: 'sidebar.html' }
+      ];
+
+      elementsToLoad.forEach(({ id, file }) => {
+        fetch(file)
+          .then(response => response.text())
+          .then(data => {
+            const element = document.getElementById(id);
+            if (element) {
+              element.innerHTML = data;
+            }
+          })
+          .catch(error => console.error(`Error loading ${file}:`, error));
+      });
+
+      // Initialize elements
+      initializeElements();
+    });
+
+    // Add admin password (should be changed to something more secure)
+    const ADMIN_PASSWORD = "nebuleair123";
+
+    // Global variables
+    let terminal;
+    let cmdLine;
+    let commandContainer;
+    let accessBtn;
+    let clearBtn;
+    let passwordModal;
+    let adminPassword;
+    let submitPasswordBtn;
+    let cancelPasswordBtn;
+    let passwordError;
+    let errorMsg;
+    let commandHistory = [];
+    let historyIndex = -1;
+
+    // Initialize DOM references after document is loaded
+    function initializeElements() {
+      terminal = document.getElementById('terminal');
+      cmdLine = document.getElementById('cmdLine');
+      commandContainer = document.getElementById('commandContainer');
+      accessBtn = document.getElementById('accessBtn');
+      clearBtn = document.getElementById('clearBtn');
+      passwordModal = document.getElementById('passwordModal');
+      adminPassword = document.getElementById('adminPassword');
+      submitPasswordBtn = document.getElementById('submitPasswordBtn');
+      cancelPasswordBtn = document.getElementById('cancelPasswordBtn');
+      passwordError = document.getElementById('passwordError');
+      errorMsg = document.getElementById('errorMsg');
+
+      // Set up event listeners
+      accessBtn.addEventListener('click', function() {
+        passwordModal.style.display = 'flex';
+        adminPassword.value = ''; // Clear password field
+        passwordError.style.display = 'none';
+        adminPassword.focus();
+      });
+
+      // Password submit button
+      submitPasswordBtn.addEventListener('click', function() {
+        if (adminPassword.value === ADMIN_PASSWORD) {
+          passwordModal.style.display = 'none';
+          enableTerminal();
+        } else {
+          passwordError.textContent = 'Invalid password';
+          passwordError.style.display = 'block';
+        }
+      });
+      
+      // Enter key for password
+      adminPassword.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+          submitPasswordBtn.click();
+        }
+      });
+      
+      // Cancel password button
+      cancelPasswordBtn.addEventListener('click', function() {
+        passwordModal.style.display = 'none';
+      });
+
+      // Clear button
+      clearBtn.addEventListener('click', function() {
+        terminal.innerHTML = 'Terminal cleared.\n';
+      });
+
+      // Command line input events
+      cmdLine.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+          const command = cmdLine.value.trim();
+          if (command) {
+            executeCommand(command);
+            commandHistory.push(command);
+            historyIndex = commandHistory.length;
+            cmdLine.value = '';
+          }
+        }
+      });
+
+      // Command history navigation with arrow keys
+      cmdLine.addEventListener('keydown', function(e) {
+        if (e.key === 'ArrowUp') {
+          if (historyIndex > 0) {
+            historyIndex--;
+            cmdLine.value = commandHistory[historyIndex];
+          }
+          e.preventDefault();
+        } else if (e.key === 'ArrowDown') {
+          if (historyIndex < commandHistory.length - 1) {
+            historyIndex++;
+            cmdLine.value = commandHistory[historyIndex];
+          } else {
+            historyIndex = commandHistory.length;
+            cmdLine.value = '';
+          }
+          e.preventDefault();
+        }
+      });
+    }
+
+    // Enable terminal access
+    function enableTerminal() {
+      commandContainer.style.display = 'block';
+      cmdLine.disabled = false;
+      clearBtn.disabled = false;
+      accessBtn.textContent = 'Authenticated';
+      accessBtn.classList.remove('btn-primary');
+      accessBtn.classList.add('btn-success');
+      accessBtn.disabled = true;
+      cmdLine.focus();
+    }
+
+    // Insert a predefined command
+    function insertCommand(cmd) {
+      // Only allow insertion if terminal is enabled
+      if (cmdLine.disabled === false) {
+        cmdLine.value = cmd;
+        cmdLine.focus();
+      } else {
+        // Alert user that they need to authenticate first
+        alert('Please access the terminal first by clicking "Access Terminal" and entering the password.');
+      }
+    }
+
+    // Execute a command
+    function executeCommand(command) {
+      // Add command to terminal with user prefix
+      terminal.innerHTML += `<span style="color: cyan;">user@nebuleair</span>:<span style="color: yellow;">~</span>$ ${command}\n`;
+      terminal.scrollTop = terminal.scrollHeight;
+
+      // Handle special commands
+      if (command === 'clear') {
+        terminal.innerHTML = 'Terminal cleared.\n';
+        return;
+      }
+
+      if (command === 'help') {
+        terminal.innerHTML += `
+Available commands:
+  help             - Show this help message
+  clear            - Clear the terminal
+  ls [options]     - List directory contents
+  df -h            - Show disk usage
+  free -h          - Show memory usage
+  cat [file]       - Display file contents
+  systemctl        - Control system services
+  ifconfig         - Show network configuration
+  reboot           - Reboot the system (use with caution)
+  
+  [Any other Linux command]\n`;
+        terminal.scrollTop = terminal.scrollHeight;
+        return;
+      }
+
+      // Filter dangerous commands
+      const dangerousCommands = [
+        'rm -rf /', 'rm -rf /*', 'rm -rf ~', 'rm -rf ~/*',
+        'mkfs', 'dd if=/dev/zero', 'dd if=/dev/random',
+        '>>', '>', '|', ';', '&&', '||',
+        'wget', 'curl', 'ssh', 'scp', 'nc',
+        'chmod -R', 'chown -R'
+      ];
+
+      // Check for dangerous commands or command chaining
+      const hasDangerousCommand = dangerousCommands.some(cmd => command.includes(cmd));
+      if (hasDangerousCommand || command.includes('&') || command.includes(';') || command.includes('|')) {
+        terminal.innerHTML += '<span style="color: red;">Error: This command is not allowed for security reasons.</span>\n';
+        terminal.scrollTop = terminal.scrollHeight;
+        return;
+      }
+
+      // Execute the command via AJAX
+      $.ajax({
+        url: 'launcher.php',
+        method: 'POST',
+        data: {
+          type: 'execute_command',
+          command: command
+        },
+        success: function(response) {
+          if (response.success) {
+            // Add command output to terminal
+            terminal.innerHTML += `<span style="color: #00ff00;">${response.output}</span>\n`;
+          } else {
+            terminal.innerHTML += `<span style="color: red;">Error: ${response.message}</span>\n`;
+          }
+          terminal.scrollTop = terminal.scrollHeight;
+        },
+        error: function(xhr, status, error) {
+          terminal.innerHTML += `<span style="color: red;">Error executing command: ${error}</span>\n`;
+          terminal.scrollTop = terminal.scrollHeight;
+        }
+      });
+    }
+  </script>
+</body>
+</html>