File size: 8,990 Bytes
5c335da |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!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>
<!-- Agent Stats -->
<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>
<!-- Agent Filters -->
<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>
<!-- Agent List -->
<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">
<!-- Populated by JS -->
</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();
// Sample agent data
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> |