continue tu as bien compris le systeme améliore le systeme

index.html

@@ -94,20 +94,24 @@
                     <i data-feather="chevron-right" class="w-4 h-4 mx-2"></i>
                     <span class="text-white">Analyse en Cours</span>
                 </div>
-                <div class="flex items-center space-x-4">
-                    <button class="p-2 rounded-full hover:bg-gray-800 text-gray-400 hover:text-white transition">
-                        <i data-feather="bell" class="w-5 h-5"></i>
+            <div class="flex items-center space-x-4">
+                    <!-- Sound Toggle -->
+                    <button id="btn-sound" class="p-2 rounded-full hover:bg-gray-800 text-gray-400 hover:text-cyber-primary transition" title="Activer/Désactiver les alertes sonores">
+                        <i data-feather="volume-2" class="w-5 h-5"></i>
                     </button>
-                    <button class="p-2 rounded-full hover:bg-gray-800 text-gray-400 hover:text-white transition">
-                        <i data-feather="settings" class="w-5 h-5"></i>
+                    
+                    <!-- Terminal Toggle -->
+                    <button onclick="toggleTerminal()" class="p-2 rounded-full hover:bg-gray-800 text-gray-400 hover:text-cyber-secondary transition" title="Ouvrir le Terminal">
+                        <i data-feather="terminal" class="w-5 h-5"></i>
                     </button>
+
                     <div class="h-8 w-px bg-gray-700 mx-2"></div>
                     <div class="flex items-center">
                         <img src="https://ui-avatars.com/api/?name=Admin+S&background=00f0ff&color=000" alt="User" class="w-8 h-8 rounded-full border border-cyber-primary">
                         <span class="ml-3 text-sm font-medium">Admin_Sys</span>
                     </div>
                 </div>
-            </header>
+</header>
 
             <!-- Dashboard Content -->
             <div class="flex-1 overflow-y-auto p-8 scrollbar-hide">
@@ -352,8 +356,40 @@
 
         </main>
     </div>
+
+    <!-- TERMINAL MODAL -->
+    <div id="terminal-modal" class="fixed inset-0 bg-black/90 z-50 hidden flex items-center justify-center backdrop-blur-sm">
+        <div class="bg-gray-900 border border-cyber-primary w-[800px] h-[500px] rounded-xl shadow-[0_0_50px_rgba(0,240,255,0.2)] flex flex-col overflow-hidden">
+            <!-- Terminal Header -->
+            <div class="bg-gray-800 px-4 py-2 flex justify-between items-center border-b border-gray-700">
+                <div class="flex items-center space-x-2">
+                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                </div>
+                <span class="text-cyber-primary font-mono text-sm">root@cybershield:~</span>
+                <button onclick="toggleTerminal()" class="text-gray-400 hover:text-white">
+                    <i data-feather="x" class="w-5 h-5"></i>
+                </button>
+            </div>
+            
+            <!-- Terminal Output -->
+            <div id="terminal-output" class="flex-1 p-4 overflow-y-auto font-mono text-sm text-green-400 space-y-1">
+                <p>CyberShield System v2.0 [Interactive Mode]</p>
+                <p>Type <span class="text-yellow-400">'help'</span> for available commands.</p>
+                <br>
+            </div>
+
+            <!-- Terminal Input -->
+            <div class="bg-gray-800 p-2 flex items-center border-t border-gray-700">
+                <span class="text-cyber-primary mr-2">root@sys:~$</span>
+                <input type="text" id="terminal-input" class="bg-transparent border-none outline-none text-white w-full font-mono text-sm focus:ring-0" autocomplete="off" autofocus>
+            </div>
+        </div>
+    </div>
+
 <script src="script.js"></script>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -1,6 +1,14 @@
 
+// Audio Context for Sound Effects
+let audioCtx = null;
+let soundEnabled = false;
+
 document.addEventListener('DOMContentLoaded', () => {
     
+    // Initialize Audio on first interaction (browser policy)
+    document.body.addEventListener('click', initAudio, { once: true });
+    document.getElementById('btn-sound').addEventListener('click', toggleSound);
+
     // Initialize UI
     initLiveChart();
     startLogStream();
@@ -15,12 +23,56 @@ document.addEventListener('DOMContentLoaded', () => {
     startInfraStream();
     startMapStream();
 
+    // Terminal Setup
+    setupTerminal();
+
     // Feather Icons re-render
     if (typeof feather !== 'undefined') {
         feather.replace();
     }
 });
 
+// --- Sound Manager ---
+function initAudio() {
+    if (!audioCtx) {
+        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    }
+}
+
+function toggleSound() {
+    soundEnabled = !soundEnabled;
+    const btn = document.getElementById('btn-sound');
+    const icon = btn.querySelector('i');
+    
+    if (soundEnabled) {
+        icon.setAttribute('data-feather', 'volume-2');
+        icon.classList.replace('text-gray-400', 'text-cyber-primary');
+        playBeep(600, 'sine', 0.1); // Confirmation beep
+    } else {
+        icon.setAttribute('data-feather', 'volume-x');
+        icon.classList.replace('text-cyber-primary', 'text-gray-400');
+    }
+    feather.replace();
+}
+
+function playAlertSound() {
+    if (!soundEnabled || !audioCtx) return;
+    
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    
+    osc.type = 'sawtooth';
+    osc.frequency.setValueAtTime(440, audioCtx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(880, audioCtx.currentTime + 0.1);
+    
+    gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);
+    
+    osc.connect(gain);
+    gain.connect(audioCtx.destination);
+    osc.start();
+    osc.stop(audioCtx.currentTime + 0.3);
+}
 // 0. Navigation Logic (SPA)
 function navigateTo(viewId) {
     // Hide all views
@@ -47,42 +99,50 @@ function navigateTo(viewId) {
 // 1. Real-time Chart Initialization
 function initLiveChart() {
     const chartContainer = document.getElementById('liveChart');
-    const barCount = 40;
+    const barCount = 50;
     
     // Create initial bars
     for(let i = 0; i < barCount; i++) {
         const bar = document.createElement('div');
-        bar.className = 'bg-cyber-primary w-2 rounded-t-sm opacity-50 transition-all duration-300';
-        const height = Math.floor(Math.random() * 70) + 10; 
+        bar.className = 'bg-cyber-primary w-1.5 rounded-t-sm opacity-60 transition-all duration-300 ease-in-out hover:opacity-100 hover:bg-white';
+        const height = Math.floor(Math.random() * 60) + 10; 
         bar.style.height = `${height}%`;
         chartContainer.appendChild(bar);
     }
 }
-
 // 2. Fetch Statistics from Backend API
 async function fetchStats() {
     try {
-        const response = await fetch('http://localhost:3000/api/stats');
-        if (!response.ok) throw new Error('Network response was not ok');
-        const data = await response.json();
-        
-        // Update Dashboard Data
-        updateCounterValue('14205', data.threatsBlocked);
-        document.querySelectorAll('.counter')[1].nextElementSibling.innerText = data.serverHealth + "%";
-        document.querySelectorAll('.counter')[2].previousElementSibling.lastElementChild.innerText = data.networkTraffic;
-        document.querySelectorAll('.counter')[3].innerText = data.criticalAlerts.toString().padStart(2, '0');
-
-        // Update System Status Indicator
-        const statusBadge = document.getElementById('system-status');
-        statusBadge.className = "flex items-center justify-between text-sm";
-        statusBadge.innerHTML = `<span class="text-green-400">Securité Active</span><i data-feather="check-circle" class="w-4 h-4 text-green-400"></i>`;
-        feather.replace();
-
-    } catch (error) {
-        console.warn("Backend unreachable. Ensure server.js is running.");
-        // Fallback simulation if backend is down
-        simulateFallbackData();
+    const response = await fetch('http://localhost:3000/api/stats');
+    if (!response.ok) throw new Error('Network response was not ok');
+    const data = await response.json();
+    
+    // Check for new critical alert to trigger sound
+    const currentAlertEl = document.querySelectorAll('.counter')[3];
+    const prevAlert = parseInt(currentAlertEl.innerText);
+    const newAlert = data.criticalAlerts;
+    
+    if (newAlert > prevAlert && newAlert > 0) {
+        playAlertSound(); // Play sound on new alert
     }
+
+    // Update Dashboard Data
+    updateCounterValue('14205', data.threatsBlocked);
+    document.querySelectorAll('.counter')[1].nextElementSibling.innerText = data.serverHealth + "%";
+    document.querySelectorAll('.counter')[2].previousElementSibling.lastElementChild.innerText = data.networkTraffic;
+    document.querySelectorAll('.counter')[3].innerText = data.criticalAlerts.toString().padStart(2, '0');
+
+    // Update System Status Indicator
+    const statusBadge = document.getElementById('system-status');
+    statusBadge.className = "flex items-center justify-between text-sm";
+    statusBadge.innerHTML = `<span class="text-green-400">Securité Active</span><i data-feather="check-circle" class="w-4 h-4 text-green-400"></i>`;
+    feather.replace();
+
+} catch (error) {
+    console.warn("Backend unreachable. Ensure server.js is running.");
+    // Fallback simulation if backend is down
+    simulateFallbackData();
+}
 }
 
 function updateCounterValue(idOrOldVal, newVal) {
@@ -153,23 +213,24 @@ function simulateFallbackData() {
 }
 
 // --- NEW FEATURES: MAP, VULNS, INFRA ---
-
 // 4. Threat Map Logic
 function initMap() {
-    const container = document.getElementById('attack-map-container');
-    // Create a central server node
-    const center = document.createElement('div');
-    center.className = 'w-4 h-4 bg-cyber-primary rounded-full z-20 shadow-[0_0_20px_#00f0ff]';
-    center.style.top = '50%';
-    center.style.left = '50%';
-    center.style.transform = 'translate(-50%, -50%)';
-    container.appendChild(center);
+    // Clear existing svg lines if any
+    const svg = document.getElementById('map-svg-layer');
+    while (svg.lastChild) {
+        svg.removeChild(svg.lastChild);
+    }
 }
 
 async function startMapStream() {
     const container = document.getElementById('geo-log-container');
     const mapArea = document.getElementById('attack-map-container');
+    const svg = document.getElementById('map-svg-layer');
+    const centerNode = document.getElementById('map-center-node'); // Should be centered
 
+    // Get center coordinates relative to mapArea
+    // Note: In CSS, center is 50% 50%. We need pixel approx or just use 50% for SVG line coords.
+    
     const fetchMapData = async () => {
         try {
             const response = await fetch('http://localhost:3000/api/geo');
@@ -185,19 +246,111 @@ async function startMapStream() {
             // Add Visual Node on Map
             const node = document.createElement('div');
             node.className = 'geo-node';
-            // Random pos within 90%
-            node.style.top = Math.random() * 90 + '%';
-            node.style.left = Math.random() * 90 + '%';
+            // Random pos
+            const top = Math.random() * 80 + 10; // Keep within 10-90%
+            const left = Math.random() * 80 + 10;
+            
+            node.style.top = `${top}%`;
+            node.style.left = `${left}%`;
             mapArea.appendChild(node);
 
-            // Remove node after animation
-            setTimeout(() => node.remove(), 2000);
+            // Draw Line from Node to Center
+            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line.setAttribute("x1", `${left}%`);
+            line.setAttribute("y1", `${top}%`);
+            line.setAttribute("x2", "50%");
+            line.setAttribute("y2", "50%");
+            line.setAttribute("stroke", "#00f0ff");
+            line.setAttribute("stroke-width", "2");
+            line.setAttribute("stroke-opacity", "0.5");
+            line.setAttribute("stroke-dasharray", "5,5");
+            
+            // Animate the line
+            const animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
+            animate.setAttribute("attributeName", "stroke-dashoffset");
+            animate.setAttribute("from", "100");
+            animate.setAttribute("to", "0");
+            animate.setAttribute("dur", "1s");
+            animate.setAttribute("repeatCount", "1");
+            
+            line.appendChild(animate);
+            svg.appendChild(line);
+
+            // Remove line and node after animation
+            setTimeout(() => {
+                node.remove();
+                line.remove();
+            }, 2000);
 
         } catch(e) { /* Silent fail if backend down */ }
     };
-    setInterval(fetchMapData, 2000);
+    setInterval(fetchMapData, 1500);
 }
 
+// --- 7. Terminal Logic ---
+function toggleTerminal() {
+    const modal = document.getElementById('terminal-modal');
+    const input = document.getElementById('terminal-input');
+    
+    if (modal.classList.contains('hidden')) {
+        modal.classList.remove('hidden');
+        input.focus();
+    } else {
+        modal.classList.add('hidden');
+    }
+}
+
+function setupTerminal() {
+    const input = document.getElementById('terminal-input');
+    const output = document.getElementById('terminal-output');
+    
+    input.addEventListener('keypress', function (e) {
+        if (e.key === 'Enter') {
+            const command = input.value.trim();
+            if (command) {
+                printToTerminal(`root@sys:~$ ${command}`);
+                executeCommand(command);
+            }
+            input.value = '';
+        }
+    });
+}
+
+function printToTerminal(text, color = 'text-green-400') {
+    const output = document.getElementById('terminal-output');
+    const p = document.createElement('p');
+    p.className = color + " font-mono";
+    p.innerText = text;
+    output.appendChild(p);
+    output.scrollTop = output.scrollHeight;
+}
+
+async function executeCommand(cmd) {
+    const output = document.getElementById('terminal-output');
+    
+    // Simulated commands logic
+    switch(cmd.toLowerCase()) {
+        case 'help':
+            printToTerminal("Available commands: status, scan, clear, uptime, hack (fun)");
+            break;
+        case 'clear':
+            output.innerHTML = '';
+            break;
+        case 'uptime':
+            printToTerminal(`System uptime: ${Math.floor(Math.random() * 100)} days, ${Math.floor(Math.random()*24)} hours`);
+            break;
+        case 'status':
+            printToTerminal("Checking systems...", "text-yellow-400");
+            setTimeout(() => {
+                printToTerminal(">> Firewall: ACTIVE");
+                printToTerminal(">> Encryption: 256-bit AES");
+                printToTerminal(">> All systems nominal.", "text-green-400");
+            }, 800);
+            break;
+        default:
+            printToTerminal(`Command not found: ${cmd}`, "text-red-400");
+    }
+}
 // 5. Vulnerabilities Logic
 async function startVulnStream() {
     const tableBody = document.getElementById('vuln-table-body');