Hugging Face's logo

Spaces:
sky-meilin
/
NexusNetworkSimulationDashboard
Sleeping

App Files Community
NexusNetworkSimulationDashboard / index.html
sky-meilin's picture
sky-meilin
Update index.html
0aca637 verified
Raw
History Blame Contribute Delete
31.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Nexus W-LAN Routing Dashboard</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
 :root {
 --primary: #3b82f6;
 --success: #10b981;
 --warning: #f59e0b;
 --danger: #ef4444;
 --dark-bg: #0f172a;
 --panel-bg: #1e293b;
 }
 body {
 font-family: 'Inter', sans-serif;
 background-color: var(--dark-bg);
 color: #e2e8f0;
 overflow-x: hidden;
 }
 .font-mono {
 font-family: 'JetBrains Mono', monospace;
 }
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 }
 ::-webkit-scrollbar-track {
 background: #0f172a;
}
 ::-webkit-scrollbar-thumb {
 background: #334155;
border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background: #475569;
}
 /* Animations */
 @keyframes pulse-ring {
 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
 }
.status-dot-pulse {
 animation: pulse-ring 2s infinite;
 }
 .glass-panel {
 background: rgba(30, 41, 59, 0.7);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1px solid rgba(255, 255, 255, 0.08);
 }
 /* Chart Styles */
 canvas {
 width: 100% !important;
 height: 100% !important;
 }
 .slider-track {
 -webkit-appearance: none;
 width: 100%;
 height: 6px;
 background: #334155;
 border-radius: 5px;
 outline: none;
 }
 .slider-track::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: #3b82f6;
 cursor: pointer;
 transition: background .15s ease-in-out;
 }
 .slider-track::-webkit-slider-thumb:hover {
 background: #60a5fa;
 }
 </style>
</head>
<body class="min-h-screen flex flex-col">
<!-- Top Navigation -->
 <nav class="glass-panel sticky top-0 z-50 border-b border-slate-700">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex items-center justify-between h-16">
 <div class="flex items-center gap-3">
 <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-blue-500/30">
 <i class="fas fa-wifi text-white text-lg"></i>
 </div>
 <div>
 <h1 class="text-xl font-bold tracking-tight text-white">Nexus<span class="text-blue-400">Route</span></h1>
 <p class="text-xs text-slate-400 font-mono">W-LAN OS v4.2.0</p>
 </div>
 </div>
<div class="hidden md:flex items-center gap-6">
 <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20">
 <div class="w-2 h-2 rounded-full bg-emerald-500 status-dot-pulse"></div>
 <span class="text-xs font-medium text-emerald-400">Online</span>
 </div>
<div class="text-right">
 <div class="text-xs text-slate-400">Uptime</div>
 <div class="font-mono text-sm font-bold" id="uptime-counter">00:00:00</div>
 </div>
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-500 hover:text-blue-400 transition-colors">Built with anycoder</a>
 </div>
 </div>
 </div>
 </nav>
<!-- Main Content -->
 <main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Status Cards -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
 <!-- Download -->
 <div class="glass-panel rounded-xl p-5 relative overflow-hidden group">
 <div class="absolute right-0 top-0 w-24 h-24 bg-blue-500/10 rounded-bl-full -mr-4 -mt-4 transition-transform group-hover:scale-110"></div>
 <div class="flex justify-between items-start mb-4">
 <div>
 <p class="text-slate-400 text-sm font-medium">Download Speed</p>
 <h3 class="text-2xl font-bold text-white mt-1"><span id="download-speed" class="font-mono">0.0</span> <span class="text-sm text-slate-400">Mbps</span></h3>
 </div>
 <div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400">
 <i class="fas fa-arrow-down"></i>
 </div>
 </div>
 <div class="w-full bg-slate-700 rounded-full h-1.5">
 <div id="download-bar" class="bg-blue-500 h-1.5 rounded-full transition-all duration-500" style="width: 0%"></div>
 </div>
 </div>
<!-- Upload -->
 <div class="glass-panel rounded-xl p-5 relative overflow-hidden group">
 <div class="absolute right-0 top-0 w-24 h-24 bg-purple-500/10 rounded-bl-full -mr-4 -mt-4 transition-transform group-hover:scale-110"></div>
 <div class="flex justify-between items-start mb-4">
 <div>
 <p class="text-slate-400 text-sm font-medium">Upload Speed</p>
 <h3 class="text-2xl font-bold text-white mt-1"><span id="upload-speed" class="font-mono">0.0</span> <span class="text-sm text-slate-400">Mbps</span></h3>
 </div>
 <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
 <i class="fas fa-arrow-up"></i>
 </div>
 </div>
 <div class="w-full bg-slate-700 rounded-full h-1.5">
 <div id="upload-bar" class="bg-purple-500 h-1.5 rounded-full transition-all duration-500" style="width: 0%"></div>
 </div>
 </div>
<!-- Ping -->
 <div class="glass-panel rounded-xl p-5 relative overflow-hidden group">
 <div class="absolute right-0 top-0 w-24 h-24 bg-emerald-500/10 rounded-bl-full -mr-4 -mt-4 transition-transform group-hover:scale-110"></div>
 <div class="flex justify-between items-start mb-4">
 <div>
 <p class="text-slate-400 text-sm font-medium">Latency</p>
 <h3 class="text-2xl font-bold text-white mt-1"><span id="ping-val" class="font-mono">12</span> <span class="text-sm text-slate-400">ms</span></h3>
 </div>
 <div class="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center text-emerald-400">
 <i class="fas fa-exchange-alt"></i>
 </div>
 </div>
 <div class="flex items-center gap-2 text-xs text-emerald-400">
 <i class="fas fa-check-circle"></i>
 <span>Stable Connection</span>
 </div>
 </div>
<!-- Devices -->
 <div class="glass-panel rounded-xl p-5 relative overflow-hidden group">
 <div class="absolute right-0 top-0 w-24 h-24 bg-orange-500/10 rounded-bl-full -mr-4 -mt-4 transition-transform group-hover:scale-110"></div>
 <div class="flex justify-between items-start mb-4">
 <div>
 <p class="text-slate-400 text-sm font-medium">Connected Devices</p>
 <h3 class="text-2xl font-bold text-white mt-1"><span id="device-count" class="font-mono">0</span></h3>
 </div>
 <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center text-orange-400">
 <i class="fas fa-laptop"></i>
 </div>
 </div>
 <button onclick="toggleModal('device-modal')" class="text-xs text-orange-400 hover:text-orange-300 font-medium flex items-center gap-1 transition-colors">
 View Details <i class="fas fa-chevron-right text-[10px]"></i>
 </button>
 </div>
 </div>
<!-- Main Dashboard Grid -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column: Traffic & Signal -->
 <div class="lg:col-span-2 space-y-8">
<!-- Real-time Traffic Chart -->
 <div class="glass-panel rounded-xl p-6 border border-slate-700">
 <div class="flex justify-between items-center mb-6">
 <div>
 <h2 class="text-lg font-semibold text-white">Network Traffic</h2>
 <p class="text-sm text-slate-400">Real-time bandwidth utilization</p>
 </div>
 <div class="flex gap-4 text-sm">
 <div class="flex items-center gap-2">
 <span class="w-3 h-3 rounded-full bg-blue-500"></span>
 <span class="text-slate-300">Download</span>
 </div>
 <div class="flex items-center gap-2">
 <span class="w-3 h-3 rounded-full bg-purple-500"></span>
 <span class="text-slate-300">Upload</span>
 </div>
 </div>
 </div>
 <div class="relative h-64 w-full bg-slate-800/50 rounded-lg overflow-hidden border border-slate-700/50">
 <canvas id="trafficChart"></canvas>
 </div>
 </div>
<!-- Signal Strength Map (Visual Representation) -->
 <div class="glass-panel rounded-xl p-6 border border-slate-700">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold text-white">Signal Coverage Map</h2>
 <span class="text-xs px-2 py-1 rounded bg-blue-500/20 text-blue-400">5GHz Active</span>
 </div>
 <div class="relative h-48 bg-slate-900 rounded-lg border border-slate-700 overflow-hidden group">
 <!-- Grid Background -->
 <div class="absolute inset-0" style="background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px;"></div>
<!-- Router Position -->
 <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20">
 <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center shadow-lg shadow-blue-500/50">
 <i class="fas fa-wifi text-white text-xs"></i>
 </div>
 </div>
<!-- Signal Waves (Animated via JS) -->
 <div id="signal-waves" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none">
 <!-- Waves injected by JS -->
 </div>
<!-- Device Markers (Simulated) -->
 <div class="absolute top-[20%] left-[25%] animate-pulse">
 <i class="fas fa-laptop text-slate-400 text-xs"></i>
 </div>
 <div class="absolute bottom-[30%] right-[20%]">
 <i class="fas fa-mobile-alt text-slate-400 text-xs"></i>
 </div>
 <div class="absolute top-[60%] left-[70%]">
 <i class="fas fa-tv text-slate-400 text-xs"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Right Column: Controls & Logs -->
 <div class="space-y-8">
<!-- Quick Actions -->
 <div class="glass-panel rounded-xl p-6 border border-slate-700">
 <h2 class="text-lg font-semibold text-white mb-4">Quick Actions</h2>
 <div class="grid grid-cols-2 gap-3">
 <button onclick="restartRouter()" class="flex flex-col items-center justify-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 transition-all hover:border-blue-500/50 group">
 <i class="fas fa-sync-alt text-slate-400 group-hover:text-blue-400 mb-2 transition-colors"></i>
 <span class="text-xs font-medium text-slate-300">Reboot</span>
 </button>
 <button onclick="toggleModal('guest-modal')" class="flex flex-col items-center justify-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 transition-all hover:border-purple-500/50 group">
 <i class="fas fa-users text-slate-400 group-hover:text-purple-400 mb-2 transition-colors"></i>
 <span class="text-xs font-medium text-slate-300">Guest Net</span>
 </button>
 <button onclick="toggleFirewall()" id="fw-btn" class="flex flex-col items-center justify-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 transition-all hover:border-emerald-500/50 group">
 <i class="fas fa-shield-alt text-slate-400 group-hover:text-emerald-400 mb-2 transition-colors"></i>
 <span class="text-xs font-medium text-slate-300">Firewall</span>
 </button>
 <button onclick="toggleModal('settings-modal')" class="flex flex-col items-center justify-center p-3 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 transition-all hover:border-orange-500/50 group">
 <i class="fas fa-sliders-h text-slate-400 group-hover:text-orange-400 mb-2 transition-colors"></i>
 <span class="text-xs font-medium text-slate-300">Settings</span>
 </button>
 </div>
 </div>
<!-- Signal Strength Slider -->
 <div class="glass-panel rounded-xl p-6 border border-slate-700">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold text-white">Signal Power</h2>
 <span id="power-val" class="text-sm font-mono text-blue-400">85%</span>
 </div>
 <input type="range" min="0" max="100" value="85" class="slider-track mb-2" id="power-slider">
 <div class="flex justify-between text-xs text-slate-500 font-mono">
 <span>Low</span>
 <span>Medium</span>
 <span>High</span>
 </div>
 </div>
<!-- Live Logs -->
 <div class="glass-panel rounded-xl p-6 border border-slate-700 flex flex-col h-80">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold text-white">System Logs</h2>
 <button onclick="clearLogs()" class="text-xs text-slate-400 hover:text-white"><i class="fas fa-trash"></i></button>
 </div>
 <div id="log-container" class="flex-1 overflow-y-auto font-mono text-xs space-y-2 pr-2">
 <!-- Logs injected via JS -->
 </div>
 </div>
</div>
 </div>
 </main>
<!-- Modals -->
<!-- Device List Modal -->
 <div id="device-modal" class="fixed inset-0 z-[100] hidden">
 <div class="absolute inset-0 bg-black/80 backdrop-blur-sm" onclick="toggleModal('device-modal')"></div>
 <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-white">Connected Devices</h3>
 <button onclick="toggleModal('device-modal')" class="text-slate-400 hover:text-white"><i class="fas fa-times"></i></button>
 </div>
 <div class="overflow-x-auto">
 <table class="w-full text-left text-sm text-slate-400">
 <thead class="bg-slate-800 text-xs uppercase text-slate-300">
 <tr>
 <th class="px-4 py-3 rounded-l-lg">Device</th>
 <th class="px-4 py-3">IP Address</th>
 <th class="px-4 py-3">Connection</th>
 <th class="px-4 py-3 rounded-r-lg">Status</th>
 </tr>
 </thead>
 <tbody id="device-table-body" class="divide-y divide-slate-800">
 <!-- Populated by JS -->
 </tbody>
 </table>
 </div>
 </div>
 </div>
<script>
 // --- Configuration & State ---
 const state = {
 isRunning: true,
 downloadSpeed: 0,
 uploadSpeed: 0,
 maxSpeed: 100, // Mbps
 devices: [
 { name: 'MacBook Pro', ip: '192.168.1.102', type: 'wifi', icon: 'fa-laptop' },
 { name: 'iPhone 13', ip: '192.168.1.104', type: 'wifi', icon: 'fa-mobile-alt' },
 { name: 'Smart TV', ip: '192.168.1.105', type: 'ethernet', icon: 'fa-tv' },
 { name: 'Gaming PC', ip: '192.168.1.110', type: 'ethernet', icon: 'fa-desktop' }
 ],
 logs: [],
 startTime: Date.now()
 };
 // --- Traffic Chart Implementation (Vanilla JS Canvas) ---
 class TrafficChart {
 constructor(canvasId) {
 this.canvas = document.getElementById(canvasId);
 this.ctx = this.canvas.getContext('2d');
 this.dataPoints = 60;
 this.downloadData = new Array(this.dataPoints).fill(0);
 this.uploadData = new Array(this.dataPoints).fill(0);
 this.resize();
 window.addEventListener('resize', () => this.resize());
 }
 resize() {
 const parent = this.canvas.parentElement;
 this.canvas.width = parent.clientWidth;
 this.canvas.height = parent.clientHeight;
 }
 update(download, upload) {
 this.downloadData.push(download);
 this.downloadData.shift();
 this.uploadData.push(upload);
 this.uploadData.shift();
 this.draw();
 }
 draw() {
 const { width, height } = this.canvas;
 const ctx = this.ctx;
 // Clear
 ctx.clearRect(0, 0, width, height);
 // Grid
 ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
 ctx.lineWidth = 1;
 ctx.beginPath();
 for(let i=0; i<width; i+=40) { ctx.moveTo(i,0); ctx.lineTo(i,height); }
 for(let i=0; i<height; i+=40) { ctx.moveTo(0,i); ctx.lineTo(width,i); }
 ctx.stroke();
 // Helper to draw line
 const drawLine = (data, color, fill) => {
 const step = width / (data.length - 1);
 const maxVal = 100; // Assuming 100% for chart scaling relative to max speed capacity visual
 ctx.beginPath();
 ctx.moveTo(0, height);
data.forEach((val, i) => {
 const x = i * step;
 // Invert Y because canvas 0 is top
 // Scale: Max val is 100 (representing chart ceiling)
 const y = height - ((val / state.maxSpeed) * height * 0.8) - 10;
ctx.lineTo(x, y);
 });
 ctx.lineTo(width, height);
 ctx.closePath();
 if (fill) {
 const grad = ctx.createLinearGradient(0, 0, 0, height);
 grad.addColorStop(0, color.replace('1)', '0.5)'));
 grad.addColorStop(1, color.replace('1)', '0.0)'));
 ctx.fillStyle = grad;
 ctx.fill();
 }
ctx.strokeStyle = color;
 ctx.lineWidth = 2;
 ctx.stroke();
 };
 drawLine(this.uploadData, 'rgba(168, 85, 247, 1)', true); // Purple
 drawLine(this.downloadData, 'rgba(59, 130, 246, 1)', true); // Blue
 }
 }
 // --- Logic & Simulation ---
 const chart = new TrafficChart('trafficChart');
 function getRandomSpeed() {
 // Simulate realistic variation
 const base = Math.random() * 40 + 10;
const spike = Math.random() > 0.9 ? Math.random() * 40 : 0;
 return Math.min(base + spike, state.maxSpeed);
 }
 function updateDashboard() {
 if (!state.isRunning) return;
 // 1. Update Speeds
 state.downloadSpeed = getRandomSpeed();
 state.uploadSpeed = getRandomSpeed() * 0.4; // Upload usually lower
 // Update DOM
 document.getElementById('download-speed').innerText = state.downloadSpeed.toFixed(1);
 document.getElementById('upload-speed').innerText = state.uploadSpeed.toFixed(1);
// Update Bars
 document.getElementById('download-bar').style.width = `${(state.downloadSpeed/state.maxSpeed)*100}%`;
 document.getElementById('upload-bar').style.width = `${(state.uploadSpeed/state.maxSpeed)*100}%`;
 // 2. Update Chart
 chart.update(state.downloadSpeed, state.uploadSpeed);
 // 3. Random Log Generation
 if (Math.random() > 0.8) addLogEntry();
 }
 function addLogEntry() {
 const actions = [
 "Packet filtered", "DHCP lease renewed", "Port scan detected",
"QoS rule applied", "Device authenticated", "Handshake successful"
 ];
 const levels = ["info", "warning", "success"];
 const level = levels[Math.floor(Math.random() * levels.length)];
 const action = actions[Math.floor(Math.random() * actions.length)];
const logContainer = document.getElementById('log-container');
 const entry = document.createElement('div');
let colorClass = "text-slate-400";
 if (level === "warning") colorClass = "text-yellow-400";
 if (level === "success") colorClass = "text-emerald-400";
 const time = new Date().toLocaleTimeString('en-US', {hour12: false});
 entry.className = `flex gap-3 ${colorClass} animate-[fadeIn_0.3s_ease-out]`;
 entry.innerHTML = `
 <span class="font-mono opacity-50">[${time}]</span>
 <span>${action}</span>
 `;
logContainer.prepend(entry);
 if (logContainer.children.length > 20) logContainer.lastChild.remove();
 }
 function clearLogs() {
 document.getElementById('log-container').innerHTML = '';
 }
 function updateUptime() {
 const now = Date.now();
 const diff = now - state.startTime;
const hours = Math.floor(diff / 3600000);
 const minutes = Math.floor((diff % 3600000) / 60000);
 const seconds = Math.floor((diff % 60000) / 1000);
 const pad = (n) => n.toString().padStart(2, '0');
 document.getElementById('uptime-counter').innerText = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
 }
 // --- Interactions ---
 function toggleModal(id) {
 const el = document.getElementById(id);
 if (el.classList.contains('hidden')) {
 el.classList.remove('hidden');
 if (id === 'device-modal') renderDeviceTable();
 } else {
 el.classList.add('hidden');
 }
 }
 function renderDeviceTable() {
 const tbody = document.getElementById('device-table-body');
 tbody.innerHTML = '';
 state.devices.forEach(dev => {
 const tr = document.createElement('tr');
 tr.className = 'hover:bg-slate-800/50 transition-colors';
 tr.innerHTML = `
 <td class="px-4 py-3 font-medium text-white flex items-center gap-3">
 <div class="w-8 h-8 rounded bg-slate-700 flex items-center justify-center text-slate-400">
 <i class="fas ${dev.icon}"></i>
 </div>
 ${dev.name}
 </td>
 <td class="px-4 py-3 font-mono text-xs">${dev.ip}</td>
 <td class="px-4 py-3">
 <span class="px-2 py-1 rounded text-xs font-medium ${dev.type === 'wifi' ? 'bg-blue-500/10 text-blue-400' : 'bg-emerald-500/10 text-emerald-400'}">
 ${dev.type === 'wifi' ? '5G WiFi' : 'LAN'}
 </span>
 </td>
 <td class="px-4 py-3 text-emerald-400 text-xs"><i class="fas fa-check-circle"></i> Online</td>
 `;
 tbody.appendChild(tr);
 });
 }
 function restartRouter() {
 if(!confirm("Reboot router? Network will be interrupted for 30 seconds.")) return;
 alert("Router reboot initiated...");
 state.isRunning = false;
 setTimeout(() => {
 state.isRunning = true;
 alert("Router back online.");
 }, 3000);
 }
 function toggleFirewall() {
 const btn = document.getElementById('fw-btn');
 const icon = btn.querySelector('i');
 if (icon.classList.contains('fa-shield-alt')) {
 icon.classList.replace('fa-shield-alt', 'fa-shield-virus');
 btn.classList.add('border-red-500/50');
 addLogEntry("Firewall Disabled", "warning");
 } else {
 icon.classList.replace('fa-shield-virus', 'fa-shield-alt');
 btn.classList.remove('border-red-500/50');
 addLogEntry("Firewall Enabled", "success");
 }
 }
 // --- Initialization ---
 document.addEventListener('DOMContentLoaded', () => {
 // Start Loops
 setInterval(updateDashboard, 1000); // Update traffic every second
 setInterval(updateUptime, 1000); // Clock
// Initial Setup
 document.getElementById('device-count').innerText = state.devices.length;
 updateDashboard();
// Generate initial signal waves
 const waveContainer = document.getElementById('signal-waves');
 for(let i=1; i<=4; i++) {
 const wave = document.createElement('div');
 wave.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full border border-blue-500/30';
 wave.style.width = `${i * 60}px`;
 wave.style.height = `${i * 60}px`;
 wave.style.animation = `pulse-ring ${2 + i*0.5}s cubic-bezier(0.215, 0.61, 0.355, 1) infinite`;
 waveContainer.appendChild(wave);
 }
 // Slider Event
 const slider = document.getElementById('power-slider');
 slider.addEventListener('input', (e) => {
 document.getElementById('power-val').innerText = e.target.value + '%';
 // Adjust max speed simulation based on power
 state.maxSpeed = 50 + (e.target.value / 2);
 });
 });
 </// =============================
// 🧠 INPUT TYPE DETECTION
// =============================
function detectInputType(text) {
 text = text.toLowerCase();
 if (text.includes("const") || text.includes("=>") || text.includes("{")) {
 return "code";
 }
 if (text.includes("detected") || text.includes("authenticated")) {
 return "log";
 }
 return "natural";
}
// =============================
// 🧠 CODE PARSER
// =============================
function parseCode(text) {
 if (text.includes("portScan")) {
 return { event_type: "reconnaissance_attack", risk_level: "high" };
 }
 if (text.toLowerCase().includes("ddos")) {
 return { event_type: "ddos_attack", risk_level: "critical" };
 }
 if (text.includes("intrusion")) {
 return { event_type: "intrusion_attempt", risk_level: "high" };
 }
 if (text.includes("firewallBlock")) {
 return { event_type: "firewall_action", risk_level: "medium" };
 }
 if (text.includes("safe")) {
 return { event_type: "system_safe", risk_level: "low" };
 }
 return { event_type: "unknown", risk_level: "low" };
 }>
</body>
</html>