Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NetStrike - Battlefield Ping Optimizer</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); | |
| } | |
| .network-node { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .ping-graph { | |
| height: 200px; | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 8px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ping-line { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, rgba(16, 185, 129, 0) 0%, #10b981 50%, rgba(16, 185, 129, 0) 100%); | |
| } | |
| .server-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3); | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip-text { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #0f172a; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 8px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-yellow-400 text-3xl mr-3"></i> | |
| <h1 class="text-3xl font-bold">NetStrike <span class="text-yellow-400">Pro</span></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-blue-900/50 px-4 py-2 rounded-full flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-400 mr-2"></div> | |
| <span class="text-sm">AI Active</span> | |
| </div> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 px-4 py-2 rounded-full font-medium transition"> | |
| <i class="fas fa-crown mr-2"></i> Upgrade | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Panel --> | |
| <div class="lg:col-span-2 space-y-8"> | |
| <!-- Real-time Ping Monitor --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-chart-line text-yellow-400 mr-3"></i> | |
| Real-time Network Analysis | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Battlefield 2042</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">EA Servers</button> | |
| </div> | |
| </div> | |
| <div class="ping-graph mb-4"> | |
| <div class="ping-line" id="pingLine"></div> | |
| </div> | |
| <div class="grid grid-cols-4 gap-4 text-center"> | |
| <div> | |
| <div class="text-2xl font-bold text-green-400" id="currentPing">24ms</div> | |
| <div class="text-xs text-gray-400">Current Ping</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold" id="packetLoss">0%</div> | |
| <div class="text-xs text-gray-400">Packet Loss</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold" id="jitter">2ms</div> | |
| <div class="text-xs text-gray-400">Jitter</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold" id="serverHealth">98%</div> | |
| <div class="text-xs text-gray-400">Server Health</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Optimization Panel --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-brain text-purple-400 mr-3"></i> | |
| Neural Network Optimization | |
| </h2> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-400 mr-2"></div> | |
| <span class="text-sm">Learning Mode: Active</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-gray-700/50 p-4 rounded-lg"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Route Analysis</span> | |
| <span class="text-xs bg-green-900/50 text-green-400 px-2 py-1 rounded">Optimized</span> | |
| </div> | |
| <div class="h-2 bg-gray-600 rounded-full mb-1"> | |
| <div class="h-2 bg-green-400 rounded-full" style="width: 92%"></div> | |
| </div> | |
| <div class="text-xs text-gray-400 flex justify-between"> | |
| <span>12% faster</span> | |
| <span>3 hops reduced</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/50 p-4 rounded-lg"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Traffic Shaping</span> | |
| <span class="text-xs bg-blue-900/50 text-blue-400 px-2 py-1 rounded">Balanced</span> | |
| </div> | |
| <div class="h-2 bg-gray-600 rounded-full mb-1"> | |
| <div class="h-2 bg-blue-400 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <div class="text-xs text-gray-400 flex justify-between"> | |
| <span>QoS Priority</span> | |
| <span>Game: 78% BW</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/50 p-4 rounded-lg"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">AI Predictions</span> | |
| <span class="text-xs bg-purple-900/50 text-purple-400 px-2 py-1 rounded">87% Acc</span> | |
| </div> | |
| <div class="h-2 bg-gray-600 rounded-full mb-1"> | |
| <div class="h-2 bg-purple-400 rounded-full" style="width: 87%"></div> | |
| </div> | |
| <div class="text-xs text-gray-400 flex justify-between"> | |
| <span>Next 30s</span> | |
| <span>Stable</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900/50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-500/20 p-2 rounded-full mr-3"> | |
| <i class="fas fa-robot text-purple-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <h4 class="font-medium mb-1">AI Recommendation</h4> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded">Just Now</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Based on current network patterns, I recommend enabling <span class="text-yellow-400">Turbo Mode</span> for this match. Detected optimal server: <span class="text-green-400">Frankfurt #4</span> (22ms). Traffic shaping adjusted for 64-player conquest.</p> | |
| <div class="flex space-x-2 mt-3"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm">Apply</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">See Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Server Selection --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-server text-blue-400 mr-3"></i> | |
| Intelligent Server Selection | |
| </h2> | |
| <div class="flex items-center text-sm"> | |
| <i class="fas fa-sync-alt mr-2 text-gray-400"></i> | |
| Updated: Just now | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="server-card bg-gray-700/50 hover:bg-gray-700/70 rounded-lg p-4 transition cursor-pointer border border-green-900/50"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-medium">Frankfurt #4</h3> | |
| <div class="text-xs text-gray-400">EA Official | 64p Conquest</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-green-400 font-bold mr-2">22ms</span> | |
| <div class="w-2 h-2 rounded-full bg-green-400"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs mb-3"> | |
| <span class="text-gray-400">Load: <span class="text-green-400">Medium</span></span> | |
| <span class="text-gray-400">Stability: <span class="text-green-400">98%</span></span> | |
| </div> | |
| <div class="h-1 bg-gray-600 rounded-full mb-1"> | |
| <div class="h-1 bg-green-400 rounded-full" style="width: 98%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>AI Score: 9.7/10</span> | |
| <span>Optimal for your location</span> | |
| </div> | |
| </div> | |
| <div class="server-card bg-gray-700/50 hover:bg-gray-700/70 rounded-lg p-4 transition cursor-pointer"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-medium">London #2</h3> | |
| <div class="text-xs text-gray-400">EA Official | 128p Breakthrough</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="font-bold mr-2">28ms</span> | |
| <div class="w-2 h-2 rounded-full bg-yellow-400"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs mb-3"> | |
| <span class="text-gray-400">Load: <span class="text-yellow-400">High</span></span> | |
| <span class="text-gray-400">Stability: <span class="text-green-400">94%</span></span> | |
| </div> | |
| <div class="h-1 bg-gray-600 rounded-full mb-1"> | |
| <div class="h-1 bg-yellow-400 rounded-full" style="width: 94%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>AI Score: 8.2/10</span> | |
| <span>Good alternative</span> | |
| </div> | |
| </div> | |
| <div class="server-card bg-gray-700/50 hover:bg-gray-700/70 rounded-lg p-4 transition cursor-pointer"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-medium">Amsterdam #1</h3> | |
| <div class="text-xs text-gray-400">Community | 32p Rush</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="font-bold mr-2">31ms</span> | |
| <div class="w-2 h-2 rounded-full bg-yellow-400"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs mb-3"> | |
| <span class="text-gray-400">Load: <span class="text-green-400">Low</span></span> | |
| <span class="text-gray-400">Stability: <span class="text-yellow-400">89%</span></span> | |
| </div> | |
| <div class="h-1 bg-gray-600 rounded-full mb-1"> | |
| <div class="h-1 bg-yellow-400 rounded-full" style="width: 89%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>AI Score: 7.5/10</span> | |
| <span>Custom rules enabled</span> | |
| </div> | |
| </div> | |
| <div class="server-card bg-gray-700/50 hover:bg-gray-700/70 rounded-lg p-4 transition cursor-pointer"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <div> | |
| <h3 class="font-medium">Paris #3</h3> | |
| <div class="text-xs text-gray-400">EA Official | 64p TDM</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="font-bold mr-2">35ms</span> | |
| <div class="w-2 h-2 rounded-full bg-yellow-400"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs mb-3"> | |
| <span class="text-gray-400">Load: <span class="text-yellow-400">High</span></span> | |
| <span class="text-gray-400">Stability: <span class="text-yellow-400">86%</span></span> | |
| </div> | |
| <div class="h-1 bg-gray-600 rounded-full mb-1"> | |
| <div class="h-1 bg-yellow-400 rounded-full" style="width: 86%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>AI Score: 6.9/10</span> | |
| <span>Higher ping but good routing</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel --> | |
| <div class="space-y-8"> | |
| <!-- Connection Map --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-semibold flex items-center mb-6"> | |
| <i class="fas fa-map-marked-alt text-red-400 mr-3"></i> | |
| Network Path Visualization | |
| </h2> | |
| <div class="relative h-64 bg-gray-900/50 rounded-lg mb-4"> | |
| <!-- Simplified network path visualization --> | |
| <div class="absolute top-1/4 left-1/4 network-node w-4 h-4 rounded-full bg-green-400"></div> | |
| <div class="absolute top-1/2 left-1/2 network-node w-4 h-4 rounded-full bg-blue-400"></div> | |
| <div class="absolute top-3/4 left-3/4 network-node w-4 h-4 rounded-full bg-yellow-400"></div> | |
| <div class="absolute top-1/4 left-1/4 w-1/2 h-1 border-t-2 border-dashed border-green-400"></div> | |
| <div class="absolute top-1/2 left-1/2 w-1/4 h-1 border-t-2 border-dashed border-blue-400"></div> | |
| <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 text-xs bg-gray-800 px-2 py-1 rounded"> | |
| Your Location | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs bg-gray-800 px-2 py-1 rounded"> | |
| Frankfurt Node | |
| </div> | |
| <div class="absolute top-3/4 left-3/4 transform -translate-x-1/2 -translate-y-1/2 text-xs bg-gray-800 px-2 py-1 rounded"> | |
| Game Server | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Route Efficiency:</span> | |
| <span class="font-medium">92% <span class="text-green-400">(Optimal)</span></span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Bypassed Nodes:</span> | |
| <span class="font-medium">3 <span class="text-blue-400">(Saved 8ms)</span></span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Peak Traffic Avoided:</span> | |
| <span class="font-medium">2 routes</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-semibold flex items-center mb-6"> | |
| <i class="fas fa-tachometer-alt text-yellow-400 mr-3"></i> | |
| Performance Toolkit | |
| </h2> | |
| <div class="grid grid-cols-2 gap-3 mb-6"> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-3 rounded-lg flex flex-col items-center transition"> | |
| <i class="fas fa-bolt text-yellow-400 text-xl mb-2"></i> | |
| <span class="text-sm">Turbo Mode</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-3 rounded-lg flex flex-col items-center transition"> | |
| <i class="fas fa-shield-alt text-blue-400 text-xl mb-2"></i> | |
| <span class="text-sm">Anti-DDoS</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-3 rounded-lg flex flex-col items-center transition"> | |
| <i class="fas fa-route text-green-400 text-xl mb-2"></i> | |
| <span class="text-sm">Smart Routing</span> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-3 rounded-lg flex flex-col items-center transition"> | |
| <i class="fas fa-wifi text-purple-400 text-xl mb-2"></i> | |
| <span class="text-sm">QoS Control</span> | |
| </button> | |
| </div> | |
| <div class="bg-gray-900/50 rounded-lg p-4"> | |
| <h4 class="font-medium mb-2 flex items-center"> | |
| <i class="fas fa-magic text-purple-400 mr-2"></i> | |
| One-Click Optimize | |
| </h4> | |
| <p class="text-xs text-gray-300 mb-3">Let NetStrike AI analyze and apply all optimal settings for your current match.</p> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg font-medium transition flex items-center justify-center"> | |
| <i class="fas fa-rocket mr-2"></i> Optimize Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Advanced Settings --> | |
| <div class="bg-gray-800/50 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-semibold flex items-center mb-6"> | |
| <i class="fas fa-sliders-h text-blue-400 mr-3"></i> | |
| Advanced Configuration | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <label class="text-sm">Traffic Priority</label> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded">Game: 78%</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="78" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <label class="text-sm">Packet Preemption</label> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded">Aggressive</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="85" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <label class="text-sm">AI Learning Rate</label> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded">Adaptive</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="65" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div class="flex items-center justify-between pt-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="deepPacket" class="form-checkbox h-4 w-4 text-yellow-400" checked> | |
| <label for="deepPacket" class="ml-2 text-sm">Deep Packet Inspection</label> | |
| </div> | |
| <div class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltip-text">Analyzes game packets for optimal routing and prioritization</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="predictiveMode" class="form-checkbox h-4 w-4 text-purple-400" checked> | |
| <label for="predictiveMode" class="ml-2 text-sm">Predictive Mode</label> | |
| </div> | |
| <div class="tooltip"> | |
| <i class="fas fa-info-circle text-gray-400"></i> | |
| <span class="tooltip-text">AI predicts network conditions and pre-optimizes routes</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simulate real-time ping fluctuations | |
| function simulatePing() { | |
| const pingValues = [22, 23, 24, 25, 24, 23, 22, 21, 22, 23, 24, 25, 26, 25, 24, 23, 22]; | |
| let currentIndex = 0; | |
| setInterval(() => { | |
| // Update current ping display | |
| document.getElementById('currentPing').textContent = pingValues[currentIndex] + 'ms'; | |
| // Update packet loss randomly | |
| const packetLoss = Math.random() > 0.9 ? Math.floor(Math.random() * 5) : 0; | |
| document.getElementById('packetLoss').textContent = packetLoss + '%'; | |
| document.getElementById('packetLoss').className = packetLoss > 0 ? | |
| 'text-2xl font-bold text-yellow-400' : 'text-2xl font-bold text-green-400'; | |
| // Update jitter | |
| const jitter = Math.floor(Math.random() * 4); | |
| document.getElementById('jitter').textContent = jitter + 'ms'; | |
| document.getElementById('jitter').className = jitter > 2 ? | |
| 'text-2xl font-bold text-yellow-400' : 'text-2xl font-bold text-green-400'; | |
| // Update server health | |
| const health = 95 + Math.floor(Math.random() * 4); | |
| document.getElementById('serverHealth').textContent = health + '%'; | |
| // Create ping line animation | |
| const pingLine = document.getElementById('pingLine'); | |
| pingLine.style.transform = `scaleX(${1 - (pingValues[currentIndex] / 100)})`; | |
| currentIndex = (currentIndex + 1) % pingValues.length; | |
| }, 1000); | |
| } | |
| // Initialize tooltips | |
| function initTooltips() { | |
| const tooltips = document.querySelectorAll('.tooltip'); | |
| tooltips.forEach(tooltip => { | |
| tooltip.addEventListener('mouseenter', function() { | |
| this.querySelector('.tooltip-text').style.visibility = 'visible'; | |
| this.querySelector('.tooltip-text').style.opacity = '1'; | |
| }); | |
| tooltip.addEventListener('mouseleave', function() { | |
| this.querySelector('.tooltip-text').style.visibility = 'hidden'; | |
| this.querySelector('.tooltip-text').style.opacity = '0'; | |
| }); | |
| }); | |
| } | |
| // Server card interactions | |
| function initServerCards() { | |
| const cards = document.querySelectorAll('.server-card'); | |
| cards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| // Remove border from all cards | |
| cards.forEach(c => c.classList.remove('border', 'border-green-900/50')); | |
| // Add border to selected card | |
| this.classList.add('border', 'border-green-900/50'); | |
| // Update ping display to this server's ping | |
| const pingDisplay = this.querySelector('span.font-bold').textContent; | |
| document.getElementById('currentPing').textContent = pingDisplay; | |
| }); | |
| }); | |
| } | |
| // Initialize everything when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| simulatePing(); | |
| initTooltips(); | |
| initServerCards(); | |
| // One-click optimize button | |
| document.querySelector('.bg-purple-600').addEventListener('click', function() { | |
| alert('NetStrike AI has optimized your connection! Ping reduced by 15%, packet routing improved.'); | |
| document.getElementById('currentPing').textContent = '19ms'; | |
| document.getElementById('currentPing').className = 'text-2xl font-bold text-green-400'; | |
| }); | |
| }); | |
| </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=JoshuaSmart/lag" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |