|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Agents | Operation Void Control</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"> |
|
|
<header class="mb-8 border-b border-gray-800 pb-4"> |
|
|
<h1 class="text-3xl font-bold text-white tracking-wider uppercase font-mono">Agent Fleet</h1> |
|
|
<p class="text-sm text-neon-green mt-1">Manage and monitor deployed agents</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5"> |
|
|
<h3 class="text-gray-400 text-xs uppercase">Total Agents</h3> |
|
|
<div class="text-2xl font-bold text-white mt-2 font-mono">156</div> |
|
|
</div> |
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5"> |
|
|
<h3 class="text-gray-400 text-xs uppercase">Online</h3> |
|
|
<div class="text-2xl font-bold text-neon-green mt-2 font-mono">142</div> |
|
|
</div> |
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5"> |
|
|
<h3 class="text-gray-400 text-xs uppercase">Busy</h3> |
|
|
<div class="text-2xl font-bold text-neon-orange mt-2 font-mono">12</div> |
|
|
</div> |
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-5"> |
|
|
<h3 class="text-gray-400 text-xs uppercase">Offline</h3> |
|
|
<div class="text-2xl font-bold text-gray-500 mt-2 font-mono">2</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-lg p-4 mb-6 flex flex-wrap gap-4 items-center"> |
|
|
<input type="text" placeholder="Search agents..." class="bg-void-900 border border-gray-700 rounded-lg px-4 py-2 text-sm text-white focus:border-neon-green focus:outline-none"> |
|
|
<select class="bg-void-900 border border-gray-700 rounded-lg px-4 py-2 text-sm text-gray-300 focus:border-neon-green focus:outline-none"> |
|
|
<option>All Status</option> |
|
|
<option>Online</option> |
|
|
<option>Busy</option> |
|
|
<option>Offline</option> |
|
|
</select> |
|
|
<select class="bg-void-900 border border-gray-700 rounded-lg px-4 py-2 text-sm text-gray-300 focus:border-neon-green focus:outline-none"> |
|
|
<option>All Regions</option> |
|
|
<option>US-East-1</option> |
|
|
<option>US-West-2</option> |
|
|
<option>EU-West-1</option> |
|
|
<option>Asia-Pac-1</option> |
|
|
</select> |
|
|
<button class="ml-auto bg-neon-green/10 text-neon-green border border-neon-green/30 px-4 py-2 rounded-lg text-sm hover:bg-neon-green/20 transition-colors flex items-center gap-2"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> Deploy New |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-void-800 border border-gray-800 rounded-xl overflow-hidden"> |
|
|
<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">Agent ID</th> |
|
|
<th class="px-6 py-3">Status</th> |
|
|
<th class="px-6 py-3">Region</th> |
|
|
<th class="px-6 py-3">IP Address</th> |
|
|
<th class="px-6 py-3">Latency</th> |
|
|
<th class="px-6 py-3">Uptime</th> |
|
|
<th class="px-6 py-3">Last Seen</th> |
|
|
<th class="px-6 py-3 text-right">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="text-sm divide-y divide-gray-800" id="agent-table"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/sidebar.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const agents = [ |
|
|
{ id: 'AGNT-001', status: 'online', region: 'US-East-1', ip: '192.168.1.42', latency: '24ms', uptime: '47d 12h', lastSeen: '2s ago' }, |
|
|
{ id: 'AGNT-002', status: 'busy', region: 'EU-West-1', ip: '10.0.0.156', latency: '89ms', uptime: '32d 8h', lastSeen: '5s ago' }, |
|
|
{ id: 'AGNT-003', status: 'online', region: 'Asia-Pac-1', ip: '172.16.0.78', latency: '156ms', uptime: '15d 4h', lastSeen: '1s ago' }, |
|
|
{ id: 'AGNT-004', status: 'online', region: 'US-West-2', ip: '203.0.113.45', latency: '67ms', uptime: '61d 19h', lastSeen: '3s ago' }, |
|
|
{ id: 'AGNT-005', status: 'offline', region: 'EU-Central-1', ip: '198.51.100.23', latency: '--', uptime: '0d 0h', lastSeen: '2h ago' }, |
|
|
{ id: 'AGNT-006', status: 'online', region: 'US-East-1', ip: '192.0.2.167', latency: '31ms', uptime: '28d 14h', lastSeen: '1s ago' }, |
|
|
{ id: 'AGNT-007', status: 'busy', region: 'Asia-Pac-2', ip: '10.1.2.89', latency: '203ms', uptime: '19d 7h', lastSeen: '8s ago' }, |
|
|
{ id: 'AGNT-008', status: 'online', region: 'SA-East-1', ip: '177.44.12.9', latency: '178ms', uptime: '52d 3h', lastSeen: '2s ago' }, |
|
|
]; |
|
|
|
|
|
const statusColors = { |
|
|
online: 'bg-neon-green/10 text-neon-green border-neon-green/20', |
|
|
busy: 'bg-neon-orange/10 text-neon-orange border-neon-orange/20', |
|
|
offline: 'bg-gray-700/30 text-gray-400 border-gray-600' |
|
|
}; |
|
|
|
|
|
const tbody = document.getElementById('agent-table'); |
|
|
tbody.innerHTML = agents.map(agent => ` |
|
|
<tr class="group hover:bg-white/5 transition-colors"> |
|
|
<td class="px-6 py-4 font-mono text-neon-green">${agent.id}</td> |
|
|
<td class="px-6 py-4"><span class="px-2 py-1 rounded text-[10px] border ${statusColors[agent.status]}">${agent.status.toUpperCase()}</span></td> |
|
|
<td class="px-6 py-4 text-gray-400">${agent.region}</td> |
|
|
<td class="px-6 py-4 text-gray-400 font-mono">${agent.ip}</td> |
|
|
<td class="px-6 py-4 text-gray-400 font-mono">${agent.latency}</td> |
|
|
<td class="px-6 py-4 text-gray-400 font-mono">${agent.uptime}</td> |
|
|
<td class="px-6 py-4 text-gray-400">${agent.lastSeen}</td> |
|
|
<td class="px-6 py-4 text-right"> |
|
|
<div class="flex justify-end gap-2"> |
|
|
<button class="p-1 rounded hover:bg-gray-700 text-gray-400 hover:text-white" title="View Details"> |
|
|
<i data-feather="eye" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="p-1 rounded hover:bg-gray-700 text-gray-400 hover:text-white" title="Connect"> |
|
|
<i data-feather="link" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="p-1 rounded hover:bg-gray-700 text-gray-400 hover:text-neon-red" title="Terminate"> |
|
|
<i data-feather="x-circle" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
`).join(''); |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
