Hugging Face's logo

Spaces:
priom7
/
hacktool
Running

App Files Community
hacktool / index.html
priom7's picture
priom7
Add 2 files
2ae501c verified
raw
history blame contribute delete
48.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Cyber Sentinel - Hacking Tool Simulator</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">
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;500;700&display=swap');
:root {
 --primary: #00ff88;
 --primary-dark: #00cc6a;
 --secondary: #00a8ff;
 --accent: #ff2d75;
 --dark: #0a0e17;
 --darker: #050a14;
 --light: #e0f7fa;
 }
body {
 font-family: 'Share Tech Mono', monospace;
 background-color: var(--darker);
 color: var(--light);
 overflow-x: hidden;
 }
.font-futuristic {
 font-family: 'Orbitron', sans-serif;
 }
.console-font {
 font-family: 'Share Tech Mono', monospace;
 }
.glass-effect {
 background: rgba(5, 10, 20, 0.7);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid rgba(0, 255, 136, 0.1);
 }
.gradient-text {
 background: linear-gradient(90deg, #00ff88, #00a8ff, #ff2d75);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.terminal {
 background-color: rgba(0, 0, 0, 0.8);
 border: 1px solid rgba(0, 255, 136, 0.2);
 }
.terminal-header {
 background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 255, 136, 0.1));
 border-bottom: 1px solid rgba(0, 255, 136, 0.2);
 }
.terminal-body {
 background: rgba(0, 5, 15, 0.7);
 }
.terminal-input {
 background: transparent;
 border: none;
 outline: none;
 color: var(--light);
 caret-color: var(--primary);
 }
.terminal-input::placeholder {
 color: rgba(0, 255, 136, 0.5);
 }
.blinking-cursor {
 animation: blink 1s infinite;
 }
@keyframes blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0; }
 }
.glow-effect {
 box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
 }
.glow-effect:hover {
 box-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
 }
.scanning-animation {
 position: relative;
 overflow: hidden;
 }
.scanning-animation::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 5px;
 background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.7), transparent);
 animation: scan 2s linear infinite;
 }
@keyframes scan {
 0% { transform: translateY(0); }
 100% { transform: translateY(100vh); }
 }
.progress-ring {
 transform: rotate(-90deg);
 }
.progress-ring-circle {
 transition: stroke-dashoffset 0.5s;
 }
.map-container {
 height: 100%;
 width: 100%;
 border-radius: 0.5rem;
 overflow: hidden;
 }
.hacker-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0, 255, 136, 0.3);
 }
.typewriter {
 overflow: hidden;
 border-right: 2px solid var(--primary);
 white-space: nowrap;
 margin: 0 auto;
 letter-spacing: 2px;
 animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
 }
@keyframes typing {
 from { width: 0 }
 to { width: 100% }
 }
@keyframes blink-caret {
 from, to { border-color: transparent }
 50% { border-color: var(--primary) }
 }
/* Custom scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 }
::-webkit-scrollbar-track {
 background: rgba(10, 14, 23, 0.5);
 }
::-webkit-scrollbar-thumb {
 background: #00ff88;
 border-radius: 4px;
 }
::-webkit-scrollbar-thumb:hover {
 background: #00cc6a;
 }
/* Matrix rain effect */
 .matrix-rain {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 opacity: 0.1;
 }
 </style>
</head>
<body class="min-h-screen">
 <div class="matrix-rain" id="matrixRain"></div>
<div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="glass-effect w-20 md:w-64 flex-shrink-0 flex flex-col transition-all duration-300 z-10">
 <div class="p-4 flex items-center justify-center md:justify-start">
 <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center glow-effect">
 <i class="fas fa-shield-halved text-black"></i>
 </div>
 <span class="ml-3 text-xl font-futuristic hidden md:block gradient-text">CYBER SENTINEL</span>
 </div>
<nav class="flex-1 mt-8 px-2 space-y-2">
 <a href="#" class="flex items-center p-3 rounded-lg text-white bg-green-900/50 hover:bg-green-800/50 transition-colors">
 <i class="fas fa-terminal w-6 text-center"></i>
 <span class="ml-3 hidden md:block">Dashboard</span>
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-slate-800/50 transition-colors">
 <i class="fas fa-globe w-6 text-center"></i>
 <span class="ml-3 hidden md:block">Network Map</span>
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-slate-800/50 transition-colors">
 <i class="fas fa-bug w-6 text-center"></i>
 <span class="ml-3 hidden md:block">Exploits</span>
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-slate-800/50 transition-colors">
 <i class="fas fa-user-secret w-6 text-center"></i>
 <span class="ml-3 hidden md:block">Spyware</span>
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-slate-800/50 transition-colors">
 <i class="fas fa-chart-line w-6 text-center"></i>
 <span class="ml-3 hidden md:block">Analytics</span>
 </a>
 <a href="#" class="flex items-center p-3 rounded-lg text-gray-300 hover:bg-slate-800/50 transition-colors">
 <i class="fas fa-tools w-6 text-center"></i>
 <span class="ml-3 hidden md:block">Tools</span>
 </a>
 </nav>
<div class="p-4 hidden md:block">
 <div class="bg-slate-800/50 rounded-lg p-4 border border-green-500/20">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
 <i class="fas fa-lock text-black"></i>
 </div>
 <div class="ml-3">
 <div class="text-sm font-medium text-white">Secure Connection</div>
 <div class="text-xs text-green-400">Encrypted</div>
 </div>
 </div>
 <button class="mt-3 w-full bg-gradient-to-r from-green-500 to-blue-500 text-black py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
 New Session
 </button>
 </div>
 </div>
<div class="p-4 flex items-center">
 <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
 <span class="text-black text-sm font-medium">AD</span>
 </div>
 <div class="ml-3 hidden md:block">
 <div class="text-sm font-medium text-white">Admin</div>
 <div class="text-xs text-green-400">root@cybersentinel</div>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 flex flex-col overflow-hidden">
 <!-- Top Navigation -->
 <header class="glass-effect border-b border-green-900/50 flex items-center justify-between p-4">
 <div class="flex items-center">
 <button class="md:hidden text-gray-400 hover:text-white mr-2">
 <i class="fas fa-bars"></i>
 </button>
 <h1 class="text-xl font-futuristic gradient-text">HACKING SIMULATOR v4.2.0</h1>
 </div>
<div class="flex items-center space-x-4">
 <div class="relative hidden md:block">
 <input type="text" placeholder="Search targets..." class="bg-slate-800/50 border border-green-500/20 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 w-64">
 <i class="fas fa-search absolute left-3 top-3 text-green-400"></i>
 </div>
<button class="text-gray-400 hover:text-white relative">
 <i class="fas fa-bell"></i>
 <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
 </button>
<button class="text-gray-400 hover:text-white">
 <i class="fas fa-random"></i>
 </button>
<div class="hidden md:flex items-center space-x-2">
 <span class="text-sm font-medium text-green-400">VPN: <span class="text-white">TOR_OVPN</span></span>
 <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
 </div>
 </div>
 </header>
<!-- Dashboard Content -->
 <main class="flex-1 overflow-y-auto p-4 md:p-6 bg-gradient-to-br from-slate-900 to-slate-800">
 <!-- Stats Cards -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
 <div class="glass-effect rounded-xl p-6 hover:glow-effect transition-all border border-green-500/20">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-400 text-sm">ACTIVE TARGETS</p>
 <h3 class="text-2xl font-bold mt-1 text-green-400">24</h3>
 <p class="text-blue-400 text-sm mt-2 flex items-center">
 <i class="fas fa-arrow-up mr-1"></i> 3 new connections
 </p>
 </div>
 <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
 <i class="fas fa-bullseye text-green-400"></i>
 </div>
 </div>
 </div>
<div class="glass-effect rounded-xl p-6 hover:glow-effect transition-all border border-blue-500/20">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-400 text-sm">DATA EXFILTRATED</p>
 <h3 class="text-2xl font-bold mt-1 text-blue-400">4.7GB</h3>
 <p class="text-green-400 text-sm mt-2 flex items-center">
 <i class="fas fa-database mr-1"></i> 12.4MB/s
 </p>
 </div>
 <div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center">
 <i class="fas fa-cloud-download-alt text-blue-400"></i>
 </div>
 </div>
 </div>
<div class="glass-effect rounded-xl p-6 hover:glow-effect transition-all border border-purple-500/20">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-400 text-sm">EXPLOITS RUNNING</p>
 <h3 class="text-2xl font-bold mt-1 text-purple-400">8</h3>
 <p class="text-yellow-400 text-sm mt-2 flex items-center">
 <i class="fas fa-bolt mr-1"></i> 3 critical
 </p>
 </div>
 <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center">
 <i class="fas fa-bug text-purple-400"></i>
 </div>
 </div>
 </div>
<div class="glass-effect rounded-xl p-6 hover:glow-effect transition-all border border-red-500/20">
 <div class="flex justify-between items-start">
 <div>
 <p class="text-gray-400 text-sm">DETECTION RISK</p>
 <h3 class="text-2xl font-bold mt-1 text-red-400">12%</h3>
 <p class="text-green-400 text-sm mt-2 flex items-center">
 <i class="fas fa-shield-alt mr-1"></i> Stealth mode active
 </p>
 </div>
 <div class="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center">
 <i class="fas fa-radar text-red-400"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Main Content Grid -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Left Column -->
 <div class="lg:col-span-2 space-y-6">
 <!-- Network Map -->
 <div class="glass-effect rounded-xl p-6 border border-green-500/20 h-96">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-lg font-semibold">GLOBAL NETWORK MAP</h2>
 <div class="flex items-center space-x-2">
 <button class="text-xs bg-green-500/20 text-green-400 px-3 py-1 rounded-lg hover:bg-green-500/30 flex items-center">
 <i class="fas fa-sync-alt mr-1"></i> Refresh
 </button>
 <button class="text-xs bg-blue-500/20 text-blue-400 px-3 py-1 rounded-lg hover:bg-blue-500/30">
 Scan
 </button>
 </div>
 </div>
<div class="map-container" id="networkMap"></div>
 </div>
<!-- Spyware Control Panel -->
 <div class="glass-effect rounded-xl p-6 border border-purple-500/20">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-lg font-semibold">SPYWARE CONTROL PANEL</h2>
 <button class="text-xs bg-purple-500/20 text-purple-400 px-3 py-1 rounded-lg hover:bg-purple-500/30 flex items-center">
 <i class="fas fa-plus mr-1"></i> Deploy New
 </button>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="hacker-card bg-slate-800/50 rounded-lg p-4 border border-green-500/20 hover:border-green-500/50 transition-all cursor-pointer">
 <div class="flex items-center justify-between">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-3">
 <i class="fas fa-keyboard text-green-400"></i>
 </div>
 <div>
 <h4 class="font-medium">KEYSTROKE LOGGER</h4>
 <p class="text-xs text-gray-400 mt-1">Active: 3 targets</p>
 </div>
 </div>
 <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <div class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">Running</div>
 <button class="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded hover:bg-red-500/30">
 <i class="fas fa-stop"></i>
 </button>
 </div>
 </div>
<div class="hacker-card bg-slate-800/50 rounded-lg p-4 border border-blue-500/20 hover:border-blue-500/50 transition-all cursor-pointer">
 <div class="flex items-center justify-between">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-3">
 <i class="fas fa-camera text-blue-400"></i>
 </div>
 <div>
 <h4 class="font-medium">WEBCAM CAPTURE</h4>
 <p class="text-xs text-gray-400 mt-1">Active: 2 targets</p>
 </div>
 </div>
 <div class="w-3 h-3 rounded-full bg-blue-500 animate-pulse"></div>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <div class="text-xs bg-blue-500/20 text-blue-400 px-2 py-1 rounded">Running</div>
 <button class="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded hover:bg-red-500/30">
 <i class="fas fa-stop"></i>
 </button>
 </div>
 </div>
<div class="hacker-card bg-slate-800/50 rounded-lg p-4 border border-purple-500/20 hover:border-purple-500/50 transition-all cursor-pointer">
 <div class="flex items-center justify-between">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
 <i class="fas fa-microphone text-purple-400"></i>
 </div>
 <div>
 <h4 class="font-medium">AUDIO SURVEILLANCE</h4>
 <p class="text-xs text-gray-400 mt-1">Active: 1 target</p>
 </div>
 </div>
 <div class="w-3 h-3 rounded-full bg-purple-500 animate-pulse"></div>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <div class="text-xs bg-purple-500/20 text-purple-400 px-2 py-1 rounded">Running</div>
 <button class="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded hover:bg-red-500/30">
 <i class="fas fa-stop"></i>
 </button>
 </div>
 </div>
<div class="hacker-card bg-slate-800/50 rounded-lg p-4 border border-yellow-500/20 hover:border-yellow-500/50 transition-all cursor-pointer">
 <div class="flex items-center justify-between">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center mr-3">
 <i class="fas fa-file-alt text-yellow-400"></i>
 </div>
 <div>
 <h4 class="font-medium">DOCUMENT SNIFFER</h4>
 <p class="text-xs text-gray-400 mt-1">Active: 4 targets</p>
 </div>
 </div>
 <div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <div class="text-xs bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded">Running</div>
 <button class="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded hover:bg-red-500/30">
 <i class="fas fa-stop"></i>
 </button>
 </div>
 </div>
<div class="hacker-card bg-slate-800/50 rounded-lg p-4 border border-red-500/20 hover:border-red-500/50 transition-all cursor-pointer">
 <div class="flex items-center justify-between">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center mr-3">
 <i class="fas fa-location-dot text-red-400"></i>
 </div>
 <div>
 <h4 class="font-medium">GPS TRACKER</h4>
 <p class="text-xs text-gray-400 mt-1">Active: 3 targets</p>
 </div>
 </div>
 <div class="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <div class="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded">Running</div>
 <button class="text-xs bg-red-500/20 text-red-400 px-2 py-1 rounded hover:bg-red-500/30">
 <i class="fas fa-stop"></i>
 </button>
 </div>
 </div>
<div class="hacker-card bg-slate-800/50 rounded-lg p-4 border border-green-500/20 hover:border-green-500/50 transition-all cursor-pointer flex items-center justify-center">
 <div class="text-center">
 <div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-2">
 <i class="fas fa-plus text-green-400"></i>
 </div>
 <p class="text-xs text-gray-400">Deploy New Spyware</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Right Column -->
 <div class="space-y-6">
 <!-- Terminal Console -->
 <div class="terminal rounded-xl overflow-hidden">
 <div class="terminal-header flex items-center justify-between p-3">
 <div class="flex items-center">
 <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
 <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
 <div class="w-3 h-3 rounded-full bg-green-500"></div>
 <span class="ml-3 text-sm font-medium">root@cybersentinel:~</span>
 </div>
 <div class="flex items-center space-x-2">
 <button class="text-xs text-gray-400 hover:text-white">
 <i class="fas fa-expand"></i>
 </button>
 <button class="text-xs text-gray-400 hover:text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
 </div>
 <div class="terminal-body p-4 h-96 overflow-y-auto console-font text-green-400 text-sm" id="terminalOutput">
 <div class="mb-2">Cyber Sentinel v4.2.0 - Advanced Hacking Toolkit</div>
 <div class="mb-2">Initializing secure connection...</div>
 <div class="mb-2 text-white">[βœ“] TOR network routing established</div>
 <div class="mb-2 text-white">[βœ“] VPN tunnel encrypted (AES-256)</div>
 <div class="mb-2 text-white">[βœ“] MAC address spoofed</div>
 <div class="mb-2">----------------------------------------</div>
 <div class="mb-2">Active modules:</div>
 <div class="mb-2 ml-4">- Network scanner (3 targets)</div>
 <div class="mb-2 ml-4">- Keylogger (2 devices)</div>
 <div class="mb-2 ml-4">- RAT controller (1 host)</div>
 <div class="mb-2">----------------------------------------</div>
 <div class="mb-2">Last intrusion detected: 12 minutes ago</div>
 <div class="mb-4">Current threat level: <span class="text-yellow-400">MODERATE</span></div>
 <div class="flex items-center">
 <span class="mr-2">root@cybersentinel:~#</span>
 <input type="text" class="terminal-input flex-1" placeholder="Enter command..." id="terminalInput" autocomplete="off">
 <span class="blinking-cursor">|</span>
 </div>
 </div>
 </div>
<!-- Data Exfiltration Graph -->
 <div class="glass-effect rounded-xl p-6 border border-blue-500/20">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-lg font-semibold">DATA EXFILTRATION</h2>
 <div class="flex items-center space-x-2">
 <button class="text-xs bg-blue-500/20 text-blue-400 px-2 py-1 rounded hover:bg-blue-500/30">
 <i class="fas fa-chart-bar"></i>
 </button>
 <button class="text-xs bg-blue-500/20 text-blue-400 px-2 py-1 rounded hover:bg-blue-500/30">
 <i class="fas fa-sliders-h"></i>
 </button>
 </div>
 </div>
<canvas id="dataChart" height="200"></canvas>
<div class="mt-4 grid grid-cols-3 gap-2 text-center">
 <div class="p-2 bg-slate-800/50 rounded">
 <div class="text-xs text-gray-400">TODAY</div>
 <div class="text-green-400 font-medium">1.2GB</div>
 </div>
 <div class="p-2 bg-slate-800/50 rounded">
 <div class="text-xs text-gray-400">WEEKLY</div>
 <div class="text-blue-400 font-medium">8.7GB</div>
 </div>
 <div class="p-2 bg-slate-800/50 rounded">
 <div class="text-xs text-gray-400">MONTHLY</div>
 <div class="text-purple-400 font-medium">34.2GB</div>
 </div>
 </div>
 </div>
<!-- System Status -->
 <div class="glass-effect rounded-xl p-6 border border-green-500/20">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-lg font-semibold">SYSTEM STATUS</h2>
 <div class="flex items-center space-x-1">
 <span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">STEALTH MODE</span>
 </div>
 </div>
<div class="space-y-4">
 <div>
 <div class="flex justify-between items-center mb-1">
 <span class="text-sm">CPU Usage</span>
 <span class="text-sm text-green-400">42%</span>
 </div>
 <div class="w-full bg-slate-800 rounded-full h-2">
 <div class="bg-green-500 h-2 rounded-full" style="width: 42%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between items-center mb-1">
 <span class="text-sm">Memory</span>
 <span class="text-sm text-blue-400">68%</span>
 </div>
 <div class="w-full bg-slate-800 rounded-full h-2">
 <div class="bg-blue-500 h-2 rounded-full" style="width: 68%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between items-center mb-1">
 <span class="text-sm">Network</span>
 <span class="text-sm text-purple-400">12.4MB/s</span>
 </div>
 <div class="w-full bg-slate-800 rounded-full h-2">
 <div class="bg-purple-500 h-2 rounded-full" style="width: 75%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between items-center mb-1">
 <span class="text-sm">Detection Risk</span>
 <span class="text-sm text-red-400">12%</span>
 </div>
 <div class="w-full bg-slate-800 rounded-full h-2">
 <div class="bg-red-500 h-2 rounded-full" style="width: 12%"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
 </div>
 </div>
<script>
 // Initialize map
 document.addEventListener('DOMContentLoaded', function() {
 // Create map
 const map = L.map('networkMap').setView([20, 0], 2);
// Add tile layer (using dark map style)
 L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
 attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);
// Add some fake target markers
 const targets = [
 { lat: 40.7128, lng: -74.0060, name: "TARGET-01", type: "corporate" },
 { lat: 34.0522, lng: -118.2437, name: "TARGET-02", type: "government" },
 { lat: 51.5074, lng: -0.1278, name: "TARGET-03", type: "corporate" },
 { lat: 35.6762, lng: 139.6503, name: "TARGET-04", type: "individual" },
 { lat: 48.8566, lng: 2.3522, name: "TARGET-05", type: "government" },
 { lat: 55.7558, lng: 37.6173, name: "TARGET-06", type: "corporate" },
 { lat: -33.8688, lng: 151.2093, name: "TARGET-07", type: "individual" }
 ];
targets.forEach(target => {
 const color = target.type === "corporate" ? "blue" :
target.type === "government" ? "red" : "green";
const marker = L.circleMarker([target.lat, target.lng], {
 radius: 8,
 fillColor: color,
 color: "#000",
 weight: 1,
 opacity: 1,
 fillOpacity: 0.8
 }).addTo(map);
marker.bindPopup(`<b>${target.name}</b><br>Type: ${target.type}<br>Status: <span style="color:#00ff88">Compromised</span>`);
// Add pulsing animation
 setInterval(() => {
 marker.setRadius(Math.random() > 0.5 ? 10 : 8);
 }, 1000 + Math.random() * 2000);
 });
// Add connection lines
 const connections = [
 [[40.7128, -74.0060], [34.0522, -118.2437]],
 [[51.5074, -0.1278], [40.7128, -74.0060]],
 [[48.8566, 2.3522], [51.5074, -0.1278]],
 [[55.7558, 37.6173], [48.8566, 2.3522]],
 [[35.6762, 139.6503], [-33.8688, 151.2093]]
 ];
connections.forEach(conn => {
 const line = L.polyline(conn, {
 color: '#00ff88',
 weight: 1,
 opacity: 0.7,
 dashArray: '5, 5'
 }).addTo(map);
// Animate the dash offset
 let offset = 0;
 setInterval(() => {
 offset = (offset + 1) % 20;
 line.setStyle({ dashOffset: offset });
 }, 100);
 });
// Initialize data chart
 const ctx = document.getElementById('dataChart').getContext('2d');
 const dataChart = new Chart(ctx, {
 type: 'line',
 data: {
 labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
 datasets: [
 {
 label: 'Data Exfiltrated',
 data: [120, 190, 300, 500, 800, 1000, 1200],
 borderColor: '#00a8ff',
 backgroundColor: 'rgba(0, 168, 255, 0.1)',
 borderWidth: 2,
 fill: true,
 tension: 0.4
 },
 {
 label: 'Detection Risk',
 data: [15, 20, 18, 25, 30, 20, 12],
 borderColor: '#ff2d75',
 backgroundColor: 'rgba(255, 45, 117, 0.1)',
 borderWidth: 2,
 fill: true,
 tension: 0.4
 }
 ]
 },
 options: {
 responsive: true,
 plugins: {
 legend: {
 display: false
 }
 },
 scales: {
 y: {
 beginAtZero: true,
 grid: {
 color: 'rgba(255, 255, 255, 0.1)'
 },
 ticks: {
 color: '#e0f7fa'
 }
 },
 x: {
 grid: {
 color: 'rgba(255, 255, 255, 0.1)'
 },
 ticks: {
 color: '#e0f7fa'
 }
 }
 }
 }
 });
// Terminal functionality
 const terminalInput = document.getElementById('terminalInput');
 const terminalOutput = document.getElementById('terminalOutput');
terminalInput.addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 const command = terminalInput.value.trim();
 terminalInput.value = '';
// Add command to output
 const commandElement = document.createElement('div');
 commandElement.className = 'mb-2';
 commandElement.innerHTML = `<span class="text-white">root@cybersentinel:~# ${command}</span>`;
 terminalOutput.insertBefore(commandElement, terminalOutput.lastElementChild);
// Process command
 let response = '';
if (command === 'help' || command === '') {
 response = `Available commands:<br>
 scan - Run network scan<br>
 exploit - Launch exploit toolkit<br>
 spyware - Manage spyware modules<br>
 clear - Clear terminal<br>
 help - Show this help message`;
 }
else if (command === 'scan') {
 response = `[+] Initializing network scan...<br>
 [βœ“] Found 7 potential targets<br>
 [βœ“] 3 targets vulnerable to CVE-2023-32456<br>
 [βœ“] 2 targets vulnerable to CVE-2023-28771<br>
 Scan completed in 12.4s`;
 }
 else if (command === 'exploit') {
 response = `[!] Exploit toolkit requires root privileges<br>
 [*] Use 'sudo exploit' to continue`;
 }
 else if (command === 'spyware list') {
 response = `Active spyware modules:<br>
 - KEYSTROKE LOGGER (3 targets)<br>
 - WEBCAM CAPTURE (2 targets)<br>
 - AUDIO SURVEILLANCE (1 target)<br>
 - DOCUMENT SNIFFER (4 targets)<br>
 - GPS TRACKER (3 targets)`;
 }
 else if (command === 'clear') {
 // Remove all children except the last one (input line)
 while (terminalOutput.children.length > 1) {
 terminalOutput.removeChild(terminalOutput.firstChild);
 }
 return;
 }
 else {
 response = `-bash: ${command}: command not found<br>
 Type 'help' for available commands`;
 }
const responseElement = document.createElement('div');
 responseElement.className = 'mb-2';
 responseElement.innerHTML = response;
 terminalOutput.insertBefore(responseElement, terminalOutput.lastElementChild);
// Scroll to bottom
 terminalOutput.scrollTop = terminalOutput.scrollHeight;
 }
 });
// Matrix rain effect
 const matrixRain = document.getElementById('matrixRain');
 const chars = "01をむウエγ‚ͺγ‚«γ‚­γ‚―γ‚±γ‚³γ‚΅γ‚·γ‚Ήγ‚»γ‚½γ‚Ώγƒγƒ„γƒ†γƒˆγƒŠγƒ‹γƒŒγƒγƒŽγƒγƒ’γƒ•γƒ˜γƒ›γƒžγƒŸγƒ γƒ‘γƒ’γƒ€γƒ¦γƒ¨γƒ©γƒͺルレロワヲン";
function createMatrixRain() {
 const columns = Math.floor(window.innerWidth / 20);
 let html = '';
for (let i = 0; i < columns; i++) {
 const speed = 50 + Math.random() * 50;
 const delay = Math.random() * 5;
 const length = 10 + Math.floor(Math.random() * 20);
html += `<div class="absolute top-0 text-green-400 text-xs" style="left: ${i * 20}px; animation: matrixRain ${speed}s ${delay}s linear infinite;">`;
for (let j = 0; j < length; j++) {
 const char = chars[Math.floor(Math.random() * chars.length)];
 const opacity = j === length - 1 ? 1 : j / length;
 html += `<div style="opacity: ${opacity};">${char}</div>`;
 }
html += `</div>`;
 }
matrixRain.innerHTML = html;
// Add keyframes
 const style = document.createElement('style');
 style.innerHTML = `
 @keyframes matrixRain {
 0% { transform: translateY(-100%); }
 100% { transform: translateY(100vh); }
 }
 `;
 document.head.appendChild(style);
 }
createMatrixRain();
 window.addEventListener('resize', createMatrixRain);
// Add scanning animation to spyware cards
 const spywareCards = document.querySelectorAll('.hacker-card');
 spywareCards.forEach(card => {
 const scanLine = document.createElement('div');
 scanLine.className = 'absolute top-0 left-0 w-full h-0.5 bg-green-500 opacity-0';
 card.appendChild(scanLine);
setInterval(() => {
 scanLine.style.opacity = '0.8';
 scanLine.style.transition = 'none';
 scanLine.style.transform = 'translateY(0)';
setTimeout(() => {
 scanLine.style.transition = 'transform 1.5s linear, opacity 0.5s 1s';
 scanLine.style.transform = `translateY(${card.offsetHeight}px)`;
 scanLine.style.opacity = '0';
 }, 10);
 }, 2000 + Math.random() * 3000);
 });
// Simulate active connections
 setInterval(() => {
 const activeTargets = document.querySelector('h3.text-green-400');
 const current = parseInt(activeTargets.textContent);
 activeTargets.textContent = (current + (Math.random() > 0.7 ? 1 : -1)).toString();
const dataExfiltrated = document.querySelector('h3.text-blue-400');
 const currentData = parseFloat(dataExfiltrated.textContent);
 dataExfiltrated.textContent = (currentData + (Math.random() * 0.2)).toFixed(1) + 'GB';
const detectionRisk = document.querySelector('h3.text-red-400');
 const currentRisk = parseInt(detectionRisk.textContent);
 detectionRisk.textContent = (currentRisk + (Math.random() > 0.5 ? 1 : -1)).toString() + '%';
 }, 3000);
 });
 </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=priom7/hacktool" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>