| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CyberSec Simulator - Édition Éthique</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap'); |
| |
| body { |
| font-family: 'Orbitron', monospace; |
| background: #0a0a0a; |
| color: #00ff41; |
| overflow-x: hidden; |
| } |
| |
| .glitch { |
| animation: glitch 2s infinite; |
| } |
| |
| @keyframes glitch { |
| 0% { text-shadow: 0 0 5px #00ff41; } |
| 20% { text-shadow: -2px 0 #ff0040, 2px 2px #00ff41; } |
| 40% { text-shadow: 2px -2px #ff0040, -2px 2px #00ff41; } |
| 60% { text-shadow: 0 0 5px #00ff41; } |
| 100% { text-shadow: 0 0 5px #00ff41; } |
| } |
| |
| .scan-line { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: linear-gradient(to right, transparent, #00ff41, transparent); |
| animation: scan 3s linear infinite; |
| } |
| |
| @keyframes scan { |
| 0% { top: 0; } |
| 100% { top: 100%; } |
| } |
| |
| .matrix-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.1; |
| } |
| |
| .terminal-cursor { |
| animation: blink 1s infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 50% { opacity: 1; } |
| 51%, 100% { opacity: 0; } |
| } |
| </style> |
| </head> |
| <body class="bg-black text-green-400 min-h-screen"> |
| |
| <canvas id="matrix" class="matrix-bg"></canvas> |
| |
| |
| <header class="border-b border-green-500/30 p-4"> |
| <div class="flex justify-between items-center"> |
| <h1 class="text-2xl md:text-4xl font-bold glitch"> |
| <i class="fas fa-shield-alt mr-2"></i>CyberSec Simulator |
| </h1> |
| <div class="text-sm"> |
| <span id="datetime" class="block"></span> |
| <span class="text-red-400">ETHICAL MODE ACTIVATED</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <nav class="flex flex-wrap gap-2 p-4 border-b border-green-500/30"> |
| <button onclick="switchTab('wifi')" class="tab-btn px-4 py-2 bg-green-900/30 border border-green-500/50 hover:bg-green-500/20 transition-all"> |
| <i class="fas fa-wifi mr-2"></i>Réseaux Wi-Fi |
| </button> |
| <button onclick="switchTab('cameras')" class="tab-btn px-4 py-2 bg-green-900/30 border border-green-500/50 hover:bg-green-500/20 transition-all"> |
| <i class="fas fa-video mr-2"></i>Caméras |
| </button> |
| <button onclick="switchTab('mobile')" class="tab-btn px-4 py-2 bg-green-900/30 border border-green-500/50 hover:bg-green-500/20 transition-all"> |
| <i class="fas fa-mobile-alt mr-2"></i>Appareils Mobiles |
| </button> |
| </nav> |
|
|
| |
| <main class="p-4"> |
| |
| <section id="wifi-section" class="tab-content"> |
| <h2 class="text-xl mb-4 text-green-300"> |
| <i class="fas fa-signal mr-2"></i>Analyseur de Réseaux Wi-Fi |
| </h2> |
| <div class="grid md:grid-cols-2 gap-4"> |
| <div class="bg-black/50 border border-green-500/30 p-4 rounded"> |
| <h3 class="text-lg mb-2">Réseaux détectés</h3> |
| <div class="space-y-2" id="wifi-list"> |
| |
| </div> |
| </div> |
| <div class="bg-black/50 border border-green-500/30 p-4 rounded"> |
| <h3 class="text-lg mb-2">Analyse de sécurité</h3> |
| <div id="security-analysis" class="text-sm"> |
| <p>> Scanning...</p> |
| <p class="terminal-cursor">_</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="cameras-section" class="tab-content hidden"> |
| <h2 class="text-xl mb-4 text-green-300"> |
| <i class="fas fa-eye mr-2"></i>Détection Caméras IP |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-black/50 border border-green-500/30 p-4 rounded"> |
| <div class="aspect-video bg-green-900/20 border border-green-500/50 flex items-center justify-center"> |
| <i class="fas fa-video text-4xl opacity-50"></i> |
| </div> |
| <p class="text-sm mt-2">Caméra 1 - 192.168.1.100</p> |
| <p class="text-xs text-red-400">Mot de passe faible détecté</p> |
| </div> |
| <div class="bg-black/50 border border-green-500/30 p-4 rounded"> |
| <div class="aspect-video bg-green-900/20 border border-green-500/50 flex items-center justify-center"> |
| <i class="fas fa-video text-4xl opacity-50"></i> |
| </div> |
| <p class="text-sm mt-2">Caméra 2 - 192.168.1.105</p> |
| <p class="text-xs text-green-400">Sécurisée</p> |
| </div> |
| <div class="bg-black/50 border border-green-500/30 p-4 rounded"> |
| <div class="aspect-video bg-green-900/20 border border-green-500/50 flex items-center justify-center"> |
| <i class="fas fa-video text-4xl opacity-50"></i> |
| </div> |
| <p class="text-sm mt-2">Caméra 3 - 192.168.1.110</p> |
| <p class="text-xs text-yellow-400">Configuration par défaut</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="mobile-section" class="tab-content hidden"> |
| <h2 class="text-xl mb-4 text-green-300"> |
| <i class="fas fa-mobile-alt mr-2"></i>Analyse d'Appareils Mobiles |
| </h2> |
| <div class="grid md:grid-cols-2 gap-4"> |
| <div class="bg-black/50 border border-green-500/30 p-4 rounded"> |
| <h3 class="text-lg mb-2">Bluetooth Scan</h3> |
| <div id="bluetooth-devices"> |
| <p>> Recherche en cours...</p> |
| <p class="terminal-cursor">_</p> |
| </div> |
| </div> |
| <div class="bg-black/50 border border-green-500/30 p-4 rounded"> |
| <h3 class="text-lg mb-2">Vulnérabilités</h3> |
| <ul class="text-sm space-y-1"> |
| <li>> CVE-2023-XXXX - Bluetooth</li> |
| <li>> CVE-2023-YYYY - Wi-Fi Direct</li> |
| <li>> CVE-2023-ZZZZ - NFC</li> |
| </ul> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="fixed bottom-0 left-0 right-0 bg-black/80 border-t border-green-500/30"> |
| <div class="p-2"> |
| <div class="flex items-center"> |
| <span class="text-green-400 mr-2">></span> |
| <input type="text" id="terminal-input" |
| class="flex-1 bg-transparent outline-none text-green-400 font-mono text-sm" |
| placeholder="Entrez une commande (help pour la liste)"> |
| </div> |
| <div id="terminal-output" class="text-xs text-green-300 mt-1 font-mono"></div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const canvas = document.getElementById('matrix'); |
| const ctx = canvas.getContext('2d'); |
| canvas.height = window.innerHeight; |
| canvas.width = window.innerWidth; |
| |
| const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; |
| const drops = []; |
| |
| for (let i = 0; i < 100; i++) { |
| drops[i] = 1; |
| } |
| |
| function drawMatrix() { |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| |
| ctx.fillStyle = '#00ff41'; |
| ctx.font = '15px monospace'; |
| |
| for (let i = 0; i < drops.length; i++) { |
| const text = chars[Math.floor(Math.random() * chars.length)]; |
| ctx.fillText(text, i * 15, drops[i] * 15); |
| |
| if (drops[i] * 15 > canvas.height || Math.random() > 0.975) { |
| drops[i] = 0; |
| } |
| drops[i]++; |
| } |
| } |
| |
| setInterval(drawMatrix, 33); |
| |
| |
| function updateDateTime() { |
| const now = new Date(); |
| document.getElementById('datetime').textContent = now.toLocaleString('fr-FR'); |
| } |
| setInterval(updateDateTime, 1000); |
| |
| |
| function switchTab(tab) { |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden')); |
| document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('bg-green-500/30')); |
| |
| document.getElementById(tab + '-section').classList.remove('hidden'); |
| event.target.classList.add('bg-green-500/30'); |
| } |
| |
| |
| const wifiNetworks = [ |
| { name: "NETGEAR56", security: "WPA2", signal: 85 }, |
| { name: "Linksys_Ext", security: "WEP", signal: 72 }, |
| { name: "Freebox-4A2B", security: "WPA3", signal: 94 }, |
| { name: "Livebox-5F8C", security: "WPA2", signal: 67 } |
| ]; |
| |
| function generateWifiList() { |
| const list = document.getElementById('wifi-list'); |
| list.innerHTML = ''; |
| |
| wifiNetworks.forEach(network => { |
| const div = document.createElement('div'); |
| div.className = 'flex justify-between items-center p-2 border border-green-500/20'; |
| div.innerHTML = ` |
| <div> |
| <span class="font-bold">${network.name}</span> |
| <span class="text-xs ml-2">${network.security}</span> |
| </div> |
| <div class="text-sm">${network.signal}%</div> |
| `; |
| list.appendChild(div); |
| }); |
| } |
| |
| |
| const terminalInput = document.getElementById('terminal-input'); |
| const terminalOutput = document.getElementById('terminal-output'); |
| |
| const commands = { |
| help: () => "Commandes disponibles: scan, ping, whoami, date, clear", |
| scan: () => "Scanning network... 3 devices found", |
| ping: () => "64 bytes from 192.168.1.1: icmp_seq=1 ttl=64 time=1.23 ms", |
| whoami: () => "cybersec-ethical-hacker", |
| date: () => new Date().toString(), |
| clear: () => { terminalOutput.innerHTML = ''; return ''; } |
| }; |
| |
| terminalInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| const cmd = terminalInput.value.trim(); |
| const response = commands[cmd] ? commands[cmd]() : `Commande '${cmd}' non reconnue`; |
| |
| const line = document.createElement('div'); |
| line.innerHTML = `$ ${cmd}<br>${response}`; |
| terminalOutput.appendChild(line); |
| terminalInput.value = ''; |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; |
| } |
| }); |
| |
| |
| generateWifiList(); |
| updateDateTime(); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Halile258/cyber-sec" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
