|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Operation Void Control | Clawdbot C2</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
void: { |
|
|
900: '#050505', |
|
|
800: '#0a0a0a', |
|
|
700: '#121212', |
|
|
}, |
|
|
neon: { |
|
|
green: '#22c55e', |
|
|
orange: '#f97316', |
|
|
gold: '#ffd700', |
|
|
red: '#ef4444', |
|
|
} |
|
|
}, |
|
|
fontFamily: { |
|
|
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'], |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-void-900 text-gray-300 font-sans antialiased overflow-hidden h-screen flex flex-col relative"> |
|
|
|
|
|
|
|
|
<div class="absolute inset-0 z-0 pointer-events-none opacity-[0.03] pattern-metatron"></div> |
|
|
<div class="absolute inset-0 z-0 pointer-events-none opacity-[0.05] pattern-flower"></div> |
|
|
|
|
|
|
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<div class="flex flex-1 overflow-hidden relative z-10"> |
|
|
|
|
|
<custom-sidebar></custom-sidebar> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 md:p-8 scroll-smooth"> |
|
|
|
|
|
<header class="mb-8 border-b border-gray-800 pb-4 flex justify-between items-end"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-white tracking-wider uppercase font-mono">Tactical Dashboard</h1> |
|
|
<p class="text-sm text-neon-green mt-1 flex items-center gap-2"> |
|
|
<span class="w-2 h-2 rounded-full bg-neon-green animate-pulse"></span> |
|
|
SYSTEM ONLINE // CLAWDBOT v3.2.0 |
|
|
</p> |
|
|
</div> |
|
|
<div class="hidden md:block text-right"> |
|
|
<div class="text-xs text-gray-500 uppercase">Last Sync</div> |
|
|
<div class="text-sm font-mono text-gray-300" id="clock">00:00:00</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-green transition-colors"> |
|
|
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity"> |
|
|
<i data-feather="cpu" class="w-12 h-12 text-neon-green"></i> |
|
|
</div> |
|
|
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Active Agents</h3> |
|
|
<div class="text-3xl font-bold text-white mt-2 font-mono">42</div> |
|
|
<div class="text-xs text-neon-green mt-1 flex items-center"> |
|
|
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 12% increase |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-orange transition-colors"> |
|
|
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity"> |
|
|
<i data-feather="activity" class="w-12 h-12 text-neon-orange"></i> |
|
|
</div> |
|
|
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Pending Tasks</h3> |
|
|
<div class="text-3xl font-bold text-white mt-2 font-mono">08</div> |
|
|
<div class="text-xs text-neon-orange mt-1">Critical Queue</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-gold transition-colors"> |
|
|
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity"> |
|
|
<i data-feather="shield" class="w-12 h-12 text-neon-gold"></i> |
|
|
</div> |
|
|
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Security Level</h3> |
|
|
<div class="text-3xl font-bold text-white mt-2 font-mono">HIGH</div> |
|
|
<div class="text-xs text-neon-gold mt-1">Encryption Active</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-red transition-colors"> |
|
|
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity"> |
|
|
<i data-feather="alert-triangle" class="w-12 h-12 text-neon-red"></i> |
|
|
</div> |
|
|
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Threats Blocked</h3> |
|
|
<div class="text-3xl font-bold text-white mt-2 font-mono">1,024</div> |
|
|
<div class="text-xs text-neon-red mt-1">Last 24h</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8"> |
|
|
<custom-stat-card title="CPU Load" value="67%" color="green" icon="cpu" trend="+2%"></custom-stat-card> |
|
|
<custom-stat-card title="Memory" value="4.2 GB" color="orange" icon="hard-drive" trend="stable"></custom-stat-card> |
|
|
<custom-stat-card title="Network" value="1.2 GB/s" color="gold" icon="wifi" trend="-5%"></custom-stat-card> |
|
|
<custom-stat-card title="Uptime" value="47d 12h" color="green" icon="clock" trend="record"></custom-stat-card> |
|
|
<custom-stat-card title="Nodes" value="156" color="blue" icon="server" trend="+8"></custom-stat-card> |
|
|
</div> |
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-green transition-colors"> |
|
|
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity"> |
|
|
<i data-feather="cpu" class="w-12 h-12 text-neon-green"></i> |
|
|
</div> |
|
|
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Active Agents</h3> |
|
|
<div class="text-3xl font-bold text-white mt-2 font-mono">42</div> |
|
|
<div class="text-xs text-neon-green mt-1 flex items-center"> |
|
|
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 12% increase |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-orange transition-colors"> |
|
|
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity"> |
|
|
<i data-feather="activity" class="w-12 h-12 text-neon-orange"></i> |
|
|
</div> |
|
|
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Pending Tasks</h3> |
|
|
<div class="text-3xl font-bold text-white mt-2 font-mono">08</div> |
|
|
<div class="text-xs text-neon-orange mt-1">Critical Queue</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-gold transition-colors"> |
|
|
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity"> |
|
|
<i data-feather="shield" class="w-12 h-12 text-neon-gold"></i> |
|
|
</div> |
|
|
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Security Level</h3> |
|
|
<div class="text-3xl font-bold text-white mt-2 font-mono">HIGH</div> |
|
|
<div class="text-xs text-neon-gold mt-1">Encryption Active</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-red transition-colors"> |
|
|
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity"> |
|
|
<i data-feather="alert-triangle" class="w-12 h-12 text-neon-red"></i> |
|
|
</div> |
|
|
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Threats Blocked</h3> |
|
|
<div class="text-3xl font-bold text-white mt-2 font-mono">1,024</div> |
|
|
<div class="text-xs text-neon-red mt-1">Last 24h</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8"> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 bg-void-800 border border-gray-700 rounded-xl shadow-2xl relative overflow-hidden"> |
|
|
<div class="absolute top-0 right-0 p-4 opacity-20"> |
|
|
<i data-feather="crosshair" class="w-24 h-24 text-gray-500"></i> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 border-b border-gray-700 bg-gradient-to-r from-void-900 to-void-800"> |
|
|
<h2 class="text-xl font-bold text-white flex items-center gap-2"> |
|
|
<i data-feather="settings" class="text-neon-green"></i> |
|
|
Operation Control |
|
|
</h2> |
|
|
<p class="text-gray-400 text-sm mt-1">Manual override for attack simulation and fleet deployment.</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-8"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<div class="flex flex-col"> |
|
|
<span class="text-xs text-gray-500 uppercase tracking-wider mb-1">Current State</span> |
|
|
<span id="sim-status-text" class="text-2xl font-mono font-bold text-neon-green animate-pulse">IDLE</span> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="text-xs text-gray-500 uppercase tracking-wider mb-1 block">Runtime</span> |
|
|
<span id="sim-timer" class="text-2xl font-mono text-white">00:00:00</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full bg-gray-900 rounded-full h-2.5 mb-8 border border-gray-700"> |
|
|
<div id="sim-progress" class="bg-gradient-to-r from-neon-green to-neon-gold h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> |
|
|
<button id="btn-advance" class="group relative px-6 py-4 bg-void-700 border border-neon-green/30 rounded-lg overflow-hidden hover:border-neon-green transition-all"> |
|
|
<div class="absolute inset-0 bg-neon-green/5 translate-y-full group-hover:translate-y-0 transition-transform"></div> |
|
|
<div class="flex flex-col items-center relative z-10"> |
|
|
<i data-feather="play" class="w-6 h-6 text-neon-green mb-2 fill-current"></i> |
|
|
<span class="text-sm font-bold text-gray-200 group-hover:text-white">ADVANCE</span> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
<button id="btn-pause" class="group relative px-6 py-4 bg-void-700 border border-neon-orange/30 rounded-lg overflow-hidden hover:border-neon-orange transition-all"> |
|
|
<div class="absolute inset-0 bg-neon-orange/5 translate-y-full group-hover:translate-y-0 transition-transform"></div> |
|
|
<div class="flex flex-col items-center relative z-10"> |
|
|
<i data-feather="pause" class="w-6 h-6 text-neon-orange mb-2 fill-current"></i> |
|
|
<span class="text-sm font-bold text-gray-200 group-hover:text-white">PAUSE</span> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
<button id="btn-reset" class="group relative px-6 py-4 bg-void-700 border border-neon-red/30 rounded-lg overflow-hidden hover:border-neon-red transition-all"> |
|
|
<div class="absolute inset-0 bg-neon-red/5 translate-y-full group-hover:translate-y-0 transition-transform"></div> |
|
|
<div class="flex flex-col items-center relative z-10"> |
|
|
<i data-feather="rotate-ccw" class="w-6 h-6 text-neon-red mb-2 fill-current"></i> |
|
|
<span class="text-sm font-bold text-gray-200 group-hover:text-white">RESET</span> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 text-center"> |
|
|
<p class="text-xs text-gray-600 font-mono">COMMAND AUTHORIZATION LEVEL 4 REQUIRED</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-700 rounded-xl flex flex-col h-[500px] lg:h-auto shadow-2xl relative overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-700 bg-void-900 flex justify-between items-center"> |
|
|
<h2 class="text-sm font-bold text-white flex items-center gap-2"> |
|
|
<i data-feather="cpu" class="text-neon-gold"></i> |
|
|
AI COMPANION |
|
|
</h2> |
|
|
<div class="flex gap-2"> |
|
|
<span id="nlp-status" class="text-[10px] bg-gray-800 px-2 py-0.5 rounded text-gray-400 border border-gray-600">VOICE OFF</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-history" class="flex-1 overflow-y-auto p-4 space-y-4 scroll-smooth"> |
|
|
|
|
|
<div class="flex items-start gap-3"> |
|
|
<div class="w-8 h-8 rounded bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center border border-gray-600"> |
|
|
<i data-feather="aperture" class="w-4 h-4 text-neon-gold"></i> |
|
|
</div> |
|
|
<div class="bg-void-700 p-3 rounded-lg rounded-tl-none text-sm text-gray-200 border border-gray-700 shadow-sm"> |
|
|
<p class="mb-1">Greetings, Commander. I am ready to assist.</p> |
|
|
<p class="text-xs text-gray-500 font-mono mt-1">SYS: NLP Module Active</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 bg-void-900 border-t border-gray-700"> |
|
|
<div class="relative"> |
|
|
<input type="text" id="ai-input" placeholder="Type or use voice command..." class="w-full bg-void-800 border border-gray-700 rounded-lg py-3 pl-4 pr-12 text-sm text-white focus:outline-none focus:border-neon-green transition-colors"> |
|
|
<button id="voice-btn" class="absolute right-2 top-2 p-1.5 rounded-md hover:bg-gray-700 text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="mic" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-2 flex gap-2 overflow-x-auto pb-1"> |
|
|
<button class="cmd-chip text-[10px] bg-gray-800 hover:bg-gray-700 border border-gray-700 px-2 py-1 rounded text-gray-300">Status Report</button> |
|
|
<button class="cmd-chip text-[10px] bg-gray-800 hover:bg-gray-700 border border-gray-700 px-2 py-1 rounded text-gray-300">Pause Sim</button> |
|
|
<button class="cmd-chip text-[10px] bg-gray-800 hover:bg-gray-700 border border-gray-700 px-2 py-1 rounded text-gray-300">Analyze</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> |
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-xl shadow-lg"> |
|
|
<div class="p-4 border-b border-gray-700 flex justify-between items-center"> |
|
|
<h3 class="text-lg font-bold text-white">Resource Usage</h3> |
|
|
<div class="flex gap-2"> |
|
|
<span class="w-3 h-3 rounded-full bg-neon-green"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-neon-orange"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-neon-gold"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<custom-chart type="line" data="65,72,68,75,80,78,82,85,79,73" labels="00,02,04,06,08,10,12,14,16,18"></custom-chart> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-xl shadow-lg"> |
|
|
<div class="p-4 border-b border-gray-700 flex justify-between items-center"> |
|
|
<h3 class="text-lg font-bold text-white">Network Topology</h3> |
|
|
<button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-gray-300 transition-colors">Refresh</button> |
|
|
</div> |
|
|
<div class="p-6 relative h-64" id="network-map"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="w-32 h-32 rounded-full border-2 border-neon-green/30 flex items-center justify-center animate-pulse"> |
|
|
<div class="w-20 h-20 rounded-full border border-neon-green/50 flex items-center justify-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-neon-green/20 flex items-center justify-center"> |
|
|
<i data-feather="server" class="w-6 h-6 text-neon-green"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute top-4 left-1/4 w-8 h-8 rounded-full bg-neon-orange/20 border border-neon-orange flex items-center justify-center"> |
|
|
<i data-feather="box" class="w-4 h-4 text-neon-orange"></i> |
|
|
</div> |
|
|
<div class="absolute top-8 right-1/4 w-8 h-8 rounded-full bg-neon-gold/20 border border-neon-gold flex items-center justify-center"> |
|
|
<i data-feather="database" class="w-4 h-4 text-neon-gold"></i> |
|
|
</div> |
|
|
<div class="absolute bottom-8 left-1/3 w-8 h-8 rounded-full bg-blue-500/20 border border-blue-500 flex items-center justify-center"> |
|
|
<i data-feather="cloud" class="w-4 h-4 text-blue-500"></i> |
|
|
</div> |
|
|
<div class="absolute bottom-4 right-1/3 w-8 h-8 rounded-full bg-purple-500/20 border border-purple-500 flex items-center justify-center"> |
|
|
<i data-feather="lock" class="w-4 h-4 text-purple-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-xl shadow-lg mb-8"> |
|
|
<div class="p-4 border-b border-gray-700"> |
|
|
<h3 class="text-lg font-bold text-white">Quick Actions</h3> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
<button class="quick-action flex flex-col items-center gap-2 p-4 bg-void-700 rounded-lg border border-gray-700 hover:border-neon-green hover:bg-void-900 transition-all group"> |
|
|
<i data-feather="play-circle" class="w-8 h-8 text-neon-green group-hover:scale-110 transition-transform"></i> |
|
|
<span class="text-xs text-gray-400 group-hover:text-white">Deploy</span> |
|
|
</button> |
|
|
<button class="quick-action flex flex-col items-center gap-2 p-4 bg-void-700 rounded-lg border border-gray-700 hover:border-neon-orange hover:bg-void-900 transition-all group"> |
|
|
<i data-feather="refresh-cw" class="w-8 h-8 text-neon-orange group-hover:scale-110 transition-transform"></i> |
|
|
<span class="text-xs text-gray-400 group-hover:text-white">Sync</span> |
|
|
</button> |
|
|
<button class="quick-action flex flex-col items-center gap-2 p-4 bg-void-700 rounded-lg border border-gray-700 hover:border-neon-gold hover:bg-void-900 transition-all group"> |
|
|
<i data-feather="download" class="w-8 h-8 text-neon-gold group-hover:scale-110 transition-transform"></i> |
|
|
<span class="text-xs text-gray-400 group-hover:text-white">Export</span> |
|
|
</button> |
|
|
<button class="quick-action flex flex-col items-center gap-2 p-4 bg-void-700 rounded-lg border border-gray-700 hover:border-blue-500 hover:bg-void-900 transition-all group"> |
|
|
<i data-feather="upload" class="w-8 h-8 text-blue-500 group-hover:scale-110 transition-transform"></i> |
|
|
<span class="text-xs text-gray-400 group-hover:text-white">Import</span> |
|
|
</button> |
|
|
<button class="quick-action flex flex-col items-center gap-2 p-4 bg-void-700 rounded-lg border border-gray-700 hover:border-purple-500 hover:bg-void-900 transition-all group"> |
|
|
<i data-feather="search" class="w-8 h-8 text-purple-500 group-hover:scale-110 transition-transform"></i> |
|
|
<span class="text-xs text-gray-400 group-hover:text-white">Analyze</span> |
|
|
</button> |
|
|
<button class="quick-action flex flex-col items-center gap-2 p-4 bg-void-700 rounded-lg border border-gray-700 hover:border-neon-red hover:bg-void-900 transition-all group"> |
|
|
<i data-feather="power" class="w-8 h-8 text-neon-red group-hover:scale-110 transition-transform"></i> |
|
|
<span class="text-xs text-gray-400 group-hover:text-white">Shutdown</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-xl shadow-lg mb-8"> |
|
|
<div class="p-4 border-b border-gray-700 flex justify-between items-center"> |
|
|
<h3 class="text-lg font-bold text-white flex items-center gap-2"> |
|
|
<i data-feather="terminal" class="text-neon-green"></i> |
|
|
System Terminal |
|
|
</h3> |
|
|
<div class="flex gap-2"> |
|
|
<button id="clear-terminal" class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-gray-300 transition-colors">Clear</button> |
|
|
<button class="text-xs bg-neon-green/10 hover:bg-neon-green/20 text-neon-green border border-neon-green/30 px-3 py-1 rounded transition-colors">Expand</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="terminal-output" class="p-4 h-48 overflow-y-auto font-mono text-sm space-y-1 bg-void-900"> |
|
|
<div class="text-gray-500">[SYSTEM] Initializing Clawdbot C2 v3.2.0...</div> |
|
|
<div class="text-neon-green">[OK] Core modules loaded</div> |
|
|
<div class="text-neon-green">[OK] Network interface active</div> |
|
|
<div class="text-neon-green">[OK] Security protocols engaged</div> |
|
|
<div class="text-gray-500">[INFO] 42 agents connected</div> |
|
|
<div class="text-neon-orange">[WARN] High memory usage on Node-07</div> |
|
|
<div class="text-gray-500">[SYSTEM] Ready for commands</div> |
|
|
</div> |
|
|
<div class="p-3 border-t border-gray-700 bg-void-900"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<span class="text-neon-green font-mono">$</span> |
|
|
<input type="text" id="terminal-input" placeholder="Enter command..." class="flex-1 bg-transparent border-none outline-none text-white font-mono text-sm"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-void-800 border border-gray-800 rounded-xl overflow-hidden shadow-lg"> |
|
|
<div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center"> |
|
|
<h3 class="text-lg font-bold text-white">Agent Fleet</h3> |
|
|
<button class="text-xs bg-neon-green/10 text-neon-green border border-neon-green/30 px-3 py-1 rounded hover:bg-neon-green/20 transition-colors flex items-center gap-1"> |
|
|
<i data-feather="plus" class="w-3 h-3"></i> Deploy New |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full text-left border-collapse"> |
|
|
<thead> |
|
|
<tr class="text-xs text-gray-500 uppercase bg-void-900 border-b border-gray-800"> |
|
|
<th class="px-6 py-3 font-medium">Agent ID</th> |
|
|
<th class="px-6 py-3 font-medium">Status</th> |
|
|
<th class="px-6 py-3 font-medium">Location</th> |
|
|
<th class="px-6 py-3 font-medium">Latency</th> |
|
|
<th class="px-6 py-3 font-medium text-right">Action</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="text-sm divide-y divide-gray-800"> |
|
|
<tr class="group hover:bg-white/5 transition-colors"> |
|
|
<td class="px-6 py-4 font-mono text-neon-green">AGNT-099</td> |
|
|
<td class="px-6 py-4"><span class="px-2 py-1 rounded text-[10px] bg-neon-green/10 text-neon-green border border-neon-green/20">ONLINE</span></td> |
|
|
<td class="px-6 py-4 text-gray-400">US-East-1</td> |
|
|
<td class="px-6 py-4 text-gray-400 font-mono">24ms</td> |
|
|
<td class="px-6 py-4 text-right"> |
|
|
<a href="#" class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="group hover:bg-white/5 transition-colors"> |
|
|
<td class="px-6 py-4 font-mono text-neon-orange">AGNT-104</td> |
|
|
<td class="px-6 py-4"><span class="px-2 py-1 rounded text-[10px] bg-neon-orange/10 text-neon-orange border border-neon-orange/20">BUSY</span></td> |
|
|
<td class="px-6 py-4 text-gray-400">EU-West-2</td> |
|
|
<td class="px-6 py-4 text-gray-400 font-mono">112ms</td> |
|
|
<td class="px-6 py-4 text-right"> |
|
|
<a href="#" class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="group hover:bg-white/5 transition-colors"> |
|
|
<td class="px-6 py-4 font-mono text-gray-500">AGNT-112</td> |
|
|
<td class="px-6 py-4"><span class="px-2 py-1 rounded text-[10px] bg-gray-700/30 text-gray-400 border border-gray-600">OFFLINE</span></td> |
|
|
<td class="px-6 py-4 text-gray-400">Asia-Pac-3</td> |
|
|
<td class="px-6 py-4 text-gray-400 font-mono">--</td> |
|
|
<td class="px-6 py-4 text-right"> |
|
|
<a href="#" class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="toast-container" class="fixed bottom-4 right-4 z-50 space-y-2"></div> |
|
|
|
|
|
|
|
|
<div id="modal-container"></div> |
|
|
|
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/sidebar.js"></script> |
|
|
<script src="components/stat-card.js"></script> |
|
|
<script src="components/chart.js"></script> |
|
|
<script src="components/terminal.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
