tu es un ingenieur en sybersecurité active tout ça reel fais moi de bon travaille.Carte des Menaces

index.html

@@ -47,27 +47,25 @@
                 <i data-feather="shield" class="text-cyber-primary w-8 h-8 mr-2"></i>
                 <span class="text-xl font-bold tracking-wider text-white">CYBER<span class="text-cyber-secondary">SHIELD</span></span>
             </div>
-
             <nav class="flex-1 px-4 py-6 space-y-2">
-                <a href="#" class="flex items-center px-4 py-3 bg-gray-800/50 text-cyber-primary rounded-lg border border-gray-700">
+                <a href="#" onclick="navigateTo('dashboard')" id="nav-dashboard" class="nav-link active flex items-center px-4 py-3 bg-gray-800/50 text-cyber-primary rounded-lg border border-gray-700 transition-colors">
                     <i data-feather="activity" class="w-5 h-5 mr-3"></i>
                     <span>Moniteur Temps Réel</span>
                 </a>
-                <a href="#" class="flex items-center px-4 py-3 text-gray-400 hover:text-white hover:bg-gray-800/30 rounded-lg transition-colors">
+                <a href="#" onclick="navigateTo('map')" id="nav-map" class="nav-link flex items-center px-4 py-3 text-gray-400 hover:text-white hover:bg-gray-800/30 rounded-lg transition-colors">
                     <i data-feather="map" class="w-5 h-5 mr-3"></i>
                     <span>Carte des Menaces</span>
                 </a>
-                <a href="#" class="flex items-center px-4 py-3 text-gray-400 hover:text-white hover:bg-gray-800/30 rounded-lg transition-colors">
+                <a href="#" onclick="navigateTo('vulns')" id="nav-vulns" class="nav-link flex items-center px-4 py-3 text-gray-400 hover:text-white hover:bg-gray-800/30 rounded-lg transition-colors">
                     <i data-feather="lock" class="w-5 h-5 mr-3"></i>
                     <span>Vulnérabilités</span>
                 </a>
-                <a href="#" class="flex items-center px-4 py-3 text-gray-400 hover:text-white hover:bg-gray-800/30 rounded-lg transition-colors">
+                <a href="#" onclick="navigateTo('infra')" id="nav-infra" class="nav-link flex items-center px-4 py-3 text-gray-400 hover:text-white hover:bg-gray-800/30 rounded-lg transition-colors">
                     <i data-feather="server" class="w-5 h-5 mr-3"></i>
                     <span>Infrastructure</span>
                 </a>
             </nav>
-
-            <div class="p-4 border-t border-gray-800">
+<div class="p-4 border-t border-gray-800">
                 <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                     <p class="text-xs text-gray-500 uppercase mb-1">Système</p>
                     <div class="flex items-center justify-between text-sm">
@@ -264,10 +262,97 @@
                 </div>
 
             </div>
+
+            <!-- VIEW: THREAT MAP -->
+            <div id="view-map" class="hidden h-full flex flex-col p-8 animate-fade-in">
+                <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
+                    <i data-feather="globe" class="mr-3 text-red-500"></i> Analyse Géographique des Menaces
+                </h2>
+                
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 h-full">
+                    <!-- Map Visual -->
+                    <div class="lg:col-span-2 bg-cyber-panel rounded-xl border border-gray-800 relative overflow-hidden p-6">
+                        <div class="absolute inset-0 cyber-grid opacity-20"></div>
+                        <h3 class="text-lg font-bold text-white mb-4 relative z-10">Flux d'Attaque en Direct (Live Feed)</h3>
+                        <div id="attack-map-container" class="relative h-[500px] w-full bg-black/50 rounded border border-gray-800 flex items-center justify-center overflow-hidden">
+                            <!-- Animated Nodes injected via JS -->
+                            <div class="text-gray-500 font-mono text-xs">INITIALISATION DU RADAR GÉOGRAPHIQUE...</div>
+                        </div>
+                    </div>
+
+                    <!-- Live Feed List -->
+                    <div class="bg-black rounded-xl border border-gray-800 p-4 font-mono text-sm flex flex-col h-[550px]">
+                        <div class="flex justify-between items-center mb-4 border-b border-gray-800 pb-2">
+                            <span class="text-red-500 font-bold flex items-center">
+                                <span class="w-2 h-2 bg-red-500 rounded-full mr-2 animate-ping"></span> DETECTIONS RÉCENTES
+                            </span>
+                            <span class="text-xs text-gray-500">GEO_IP</span>
+                        </div>
+                        <div id="geo-log-container" class="flex-1 overflow-y-auto space-y-2">
+                            <!-- Logs -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- VIEW: VULNERABILITIES -->
+            <div id="view-vulns" class="hidden h-full flex flex-col p-8 animate-fade-in">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-white flex items-center">
+                        <i data-feather="alert-octagon" class="mr-3 text-orange-500"></i> Gestion des Vulnérabilités
+                    </h2>
+                    <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm font-mono border border-red-400 transition flex items-center">
+                        <i data-feather="download" class="w-4 h-4 mr-2"></i> SCAN COMPLET
+                    </button>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    <div class="bg-cyber-panel p-4 rounded border border-gray-800 border-t-4 border-t-red-500">
+                        <p class="text-gray-400 text-sm">Critique</p>
+                        <p class="text-3xl font-bold text-white mt-1" id="vuln-critical-count">0</p>
+                    </div>
+                    <div class="bg-cyber-panel p-4 rounded border border-gray-800 border-t-4 border-t-yellow-500">
+                        <p class="text-gray-400 text-sm">Haute</p>
+                        <p class="text-3xl font-bold text-white mt-1" id="vuln-high-count">0</p>
+                    </div>
+                    <div class="bg-cyber-panel p-4 rounded border border-gray-800 border-t-4 border-t-blue-500">
+                        <p class="text-gray-400 text-sm"> Moyenne</p>
+                        <p class="text-3xl font-bold text-white mt-1" id="vuln-med-count">0</p>
+                    </div>
+                </div>
+
+                <div class="bg-cyber-panel rounded-xl border border-gray-800 overflow-hidden flex-1">
+                    <table class="w-full text-left text-sm text-gray-400">
+                        <thead class="bg-gray-900 text-gray-200 uppercase font-medium">
+                            <tr>
+                                <th class="px-6 py-4">CVE ID</th>
+                                <th class="px-6 py-4">Composant</th>
+                                <th class="px-6 py-4">Score (CVSS)</th>
+                                <th class="px-6 py-4">Statut</th>
+                                <th class="px-6 py-4">Action</th>
+                            </tr>
+                        </thead>
+                        <tbody id="vuln-table-body" class="divide-y divide-gray-800">
+                            <!-- Rows injected via JS -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- VIEW: INFRASTRUCTURE -->
+            <div id="view-infra" class="hidden h-full flex flex-col p-8 animate-fade-in">
+                <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
+                    <i data-feather="cpu" class="mr-3 text-cyber-secondary"></i> Health Check Infrastructure
+                </h2>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 overflow-y-auto pb-20" id="server-rack-container">
+                    <!-- Server Cards injected via JS -->
+                </div>
+            </div>
+
         </main>
     </div>
-
-    <script src="script.js"></script>
+<script src="script.js"></script>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

script.js

@@ -4,17 +4,46 @@ document.addEventListener('DOMContentLoaded', () => {
     // Initialize UI
     initLiveChart();
     startLogStream();
+    initMap(); // Initialize Map
     
     // Start Real-time Data Fetching from Backend
     fetchStats();
     setInterval(fetchStats, 1000); // Poll every second
 
+    // Start secondary data streams
+    startVulnStream();
+    startInfraStream();
+    startMapStream();
+
     // Feather Icons re-render
     if (typeof feather !== 'undefined') {
         feather.replace();
     }
 });
 
+// 0. Navigation Logic (SPA)
+function navigateTo(viewId) {
+    // Hide all views
+    document.querySelectorAll('[id^="view-"]').forEach(el => el.classList.add('hidden'));
+    // Show selected
+    document.getElementById(`view-${viewId}`).classList.remove('hidden');
+    
+    // Reset Nav Styles
+    document.querySelectorAll('.nav-link').forEach(el => {
+        el.classList.remove('active', 'bg-gray-800/50', 'text-cyber-primary', 'border-gray-700');
+        el.classList.add('text-gray-400');
+    });
+    
+    // Set Active Nav
+    const activeNav = document.getElementById(`nav-${viewId}`);
+    if(activeNav) {
+        activeNav.classList.add('active', 'bg-gray-800/50', 'text-cyber-primary', 'border-gray-700');
+        activeNav.classList.remove('text-gray-400');
+    }
+
+    // Re-init icons
+    feather.replace();
+}
 // 1. Real-time Chart Initialization
 function initLiveChart() {
     const chartContainer = document.getElementById('liveChart');
@@ -100,7 +129,6 @@ async function startLogStream() {
     // Poll every 2.5 seconds
     setInterval(fetchLog, 2500);
 }
-
 // Fallback to simulate data if user doesn't run the server
 function simulateFallbackData() {
     // Just ensures the chart keeps moving if no server is present
@@ -123,3 +151,152 @@ function simulateFallbackData() {
         lastBar.className = 'bg-cyber-primary w-2 rounded-t-sm opacity-50 transition-all duration-300';
     }
 }
+
+// --- 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);
+}
+
+async function startMapStream() {
+    const container = document.getElementById('geo-log-container');
+    const mapArea = document.getElementById('attack-map-container');
+
+    const fetchMapData = async () => {
+        try {
+            const response = await fetch('http://localhost:3000/api/geo');
+            const data = await response.json();
+
+            // Add Log
+            const logLine = document.createElement('div');
+            logLine.className = 'border-b border-gray-900 pb-1 text-xs font-mono animate-fade-in';
+            logLine.innerHTML = `<span class="text-red-400">[${data.country}]</span> Attaque ${data.type} depuis <span class="text-white">${data.ip}</span>`;
+            container.prepend(logLine);
+            if(container.children.length > 15) container.lastChild.remove();
+
+            // 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 + '%';
+            mapArea.appendChild(node);
+
+            // Remove node after animation
+            setTimeout(() => node.remove(), 2000);
+
+        } catch(e) { /* Silent fail if backend down */ }
+    };
+    setInterval(fetchMapData, 2000);
+}
+
+// 5. Vulnerabilities Logic
+async function startVulnStream() {
+    const tableBody = document.getElementById('vuln-table-body');
+    
+    const fetchVulns = async () => {
+        try {
+            const response = await fetch('http://localhost:3000/api/vulns');
+            const data = await response.json();
+            
+            // Update Counts
+            document.getElementById('vuln-critical-count').innerText = data.stats.critical;
+            document.getElementById('vuln-high-count').innerText = data.stats.high;
+            document.getElementById('vuln-med-count').innerText = data.stats.medium;
+
+            // Render List (Simplified: Re-rendering top 5 for demo)
+            tableBody.innerHTML = ''; 
+            data.list.forEach(vuln => {
+                let color = 'text-blue-400';
+                if(vuln.score >= 9) color = 'text-red-400 font-bold';
+                else if(vuln.score >= 7) color = 'text-orange-400';
+
+                const row = `
+                    <tr class="hover:bg-gray-800/30 transition border-b border-gray-800/50">
+                        <td class="px-6 py-3 font-mono text-white">${vuln.id}</td>
+                        <td class="px-6 py-3">${vuln.component}</td>
+                        <td class="px-6 py-3 ${color}">${vuln.score}</td>
+                        <td class="px-6 py-3"><span class="bg-gray-800 text-gray-300 px-2 py-1 rounded text-xs">Non corrigé</span></td>
+                        <td class="px-6 py-3"><button class="text-cyber-primary hover:underline text-xs">APPLY PATCH</button></td>
+                    </tr>
+                `;
+                tableBody.innerHTML += row;
+            });
+            feather.replace();
+        } catch(e) {}
+    };
+    fetchVulns();
+    setInterval(fetchVulns, 5000);
+}
+
+// 6. Infrastructure Logic
+async function startInfraStream() {
+    const container = document.getElementById('server-rack-container');
+    
+    const fetchInfra = async () => {
+        try {
+            const response = await fetch('http://localhost:3000/api/infra');
+            const data = await response.json;
+            
+            // For visual stability, we only update existing or create if empty
+            // In a real app, we'd match IDs. Here we simulate a dynamic list.
+            if(container.children.length === 0) {
+                data.servers.forEach(srv => {
+                    const card = document.createElement('div');
+                    card.className = 'server-card p-4 rounded-xl shadow-lg relative';
+                    card.id = `srv-${srv.id}`;
+                    container.appendChild(card);
+                });
+            }
+
+            // Update values
+            data.servers.forEach(srv => {
+                const card = document.getElementById(`srv-${srv.id}`);
+                if(card) {
+                    const loadColor = srv.load > 80 ? 'bg-red-500' : (srv.load > 50 ? 'bg-yellow-400' : 'bg-cyber-secondary');
+                    
+                    card.innerHTML = `
+                        <div class="flex justify-between items-center mb-4">
+                            <h4 class="font-bold text-white text-sm">${srv.name}</h4>
+                            <span class="text-xs ${srv.status === 'Online' ? 'text-green-400' : 'text-red-400'} flex items-center">
+                                <div class="w-1.5 h-1.5 rounded-full bg-current mr-1 ${srv.status === 'Online' ? 'animate-pulse' : ''}"></div>
+                                ${srv.status}
+                            </span>
+                        </div>
+                        <div class="space-y-3">
+                            <div>
+                                <div class="flex justify-between text-xs text-gray-400 mb-1">
+                                    <span>CPU Load</span>
+                                    <span>${srv.load}%</span>
+                                </div>
+                                <div class="w-full bg-gray-800 rounded-full h-1.5">
+                                    <div class="${loadColor} h-1.5 rounded-full transition-all duration-500" style="width: ${srv.load}%"></div>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 gap-2 mt-4">
+                                <div class="bg-gray-900 p-2 rounded border border-gray-800">
+                                    <p class="text-[10px] text-gray-500">RAM</p>
+                                    <p class="text-xs font-mono text-white">${srv.ram} GB</p>
+                                </div>
+                                <div class="bg-gray-900 p-2 rounded border border-gray-800">
+                                    <p class="text-[10px] text-gray-500">TEMP</p>
+                                    <p class="text-xs font-mono ${srv.temp > 70 ? 'text-red-400' : 'text-white'}">${srv.temp}°C</p>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }
+            });
+        } catch(e) {}
+    };
+    fetchInfra();
+    setInterval(fetchInfra, 2000);
+}

style.css

@@ -87,8 +87,58 @@ body {
 .log-entry {
     animation: fadeIn 0.3s ease-in;
 }
-
 @keyframes fadeIn {
     from { opacity: 0; transform: translateX(-10px); }
     to { opacity: 1; transform: translateX(0); }
-}
+}
+
+/* Navigation Active State */
+.nav-link.active {
+    background: rgba(0, 240, 255, 0.1);
+    border-color: #00f0ff;
+    color: #00f0ff;
+    box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
+}
+
+/* Threat Map Nodes */
+.geo-node {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #00f0ff;
+    box-shadow: 0 0 10px #00f0ff;
+    z-index: 10;
+}
+
+.geo-node::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #00f0ff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    animation: ripple 2s infinite;
+}
+
+@keyframes ripple {
+    0% { width: 0; height: 0; opacity: 1; }
+    100% { width: 60px; height: 60px; opacity: 0; }
+}
+
+.server-card {
+    background: linear-gradient(145deg, #13131f, #0a0a12);
+    border: 1px solid #374151;
+    position: relative;
+    overflow: hidden;
+}
+
+.server-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; height: 2px;
+    background: linear-gradient(90deg, transparent, #00ff9d, transparent);
+}