File size: 12,089 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 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks | 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>
<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 flex justify-between items-end">
<div>
<h1 class="text-3xl font-bold text-white tracking-wider uppercase font-mono">Task Queue</h1>
<p class="text-sm text-neon-green mt-1">Manage operations and mission directives</p>
</div>
<button class="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> New Task
</button>
</header>
<!-- Task 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 Tasks</h3>
<div class="text-2xl font-bold text-white mt-2 font-mono">1,247</div>
</div>
<div class="bg-void-800 border border-gray-800 rounded-lg p-5">
<h3 class="text-gray-400 text-xs uppercase">Pending</h3>
<div class="text-2xl font-bold text-neon-orange mt-2 font-mono">23</div>
</div>
<div class="bg-void-800 border border-gray-800 rounded-lg p-5">
<h3 class="text-gray-400 text-xs uppercase">In Progress</h3>
<div class="text-2xl font-bold text-neon-blue-400 mt-2 font-mono">8</div>
</div>
<div class="bg-void-800 border border-gray-800 rounded-lg p-5">
<h3 class="text-gray-400 text-xs uppercase">Completed</h3>
<div class="text-2xl font-bold text-neon-green mt-2 font-mono">1,216</div>
</div>
</div>
<!-- Task Columns -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Pending Column -->
<div class="bg-void-800 border border-gray-800 rounded-xl overflow-hidden">
<div class="p-4 border-b border-gray-700 bg-void-900 flex justify-between items-center">
<h3 class="font-bold text-neon-orange flex items-center gap-2">
<i data-feather="clock" class="w-4 h-4"></i> Pending
</h3>
<span class="bg-neon-orange/10 text-neon-orange px-2 py-0.5 rounded text-xs">23</span>
</div>
<div class="p-4 space-y-4 max-h-[600px] overflow-y-auto">
<div class="bg-void-700 border border-gray-700 rounded-lg p-4 hover:border-neon-orange/50 transition-colors cursor-pointer">
<div class="flex justify-between items-start mb-2">
<span class="badge badge-orange">HIGH</span>
<button class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></button>
</div>
<h4 class="text-white font-medium mb-1">Network Reconnaissance</h4>
<p class="text-gray-400 text-sm mb-3">Scan target subnet for vulnerabilities</p>
<div class="flex items-center justify-between text-xs text-gray-500">
<span><i data-feather="map-pin" class="w-3 h-3 inline"></i> EU-West-1</span>
<span><i data-feather="calendar" class="w-3 h-3 inline"></i> Due in 2h</span>
</div>
</div>
<div class="bg-void-700 border border-gray-700 rounded-lg p-4 hover:border-neon-orange/50 transition-colors cursor-pointer">
<div class="flex justify-between items-start mb-2">
<span class="badge badge-gold">MEDIUM</span>
<button class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></button>
</div>
<h4 class="text-white font-medium mb-1">Data Extraction</h4>
<p class="text-gray-400 text-sm mb-3">Extract encrypted payload from Node-42</p>
<div class="flex items-center justify-between text-xs text-gray-500">
<span><i data-feather="map-pin" class="w-3 h-3 inline"></i> US-East-1</span>
<span><i data-feather="calendar" class="w-3 h-3 inline"></i> Due in 6h</span>
</div>
</div>
</div>
</div>
<!-- In Progress Column -->
<div class="bg-void-800 border border-gray-800 rounded-xl overflow-hidden">
<div class="p-4 border-b border-gray-700 bg-void-900 flex justify-between items-center">
<h3 class="font-bold text-blue-400 flex items-center gap-2">
<i data-feather="activity" class="w-4 h-4"></i> In Progress
</h3>
<span class="bg-blue-400/10 text-blue-400 px-2 py-0.5 rounded text-xs">8</span>
</div>
<div class="p-4 space-y-4 max-h-[600px] overflow-y-auto">
<div class="bg-void-700 border border-blue-400/30 rounded-lg p-4">
<div class="flex justify-between items-start mb-2">
<span class="badge badge-red">CRITICAL</span>
<button class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></button>
</div>
<h4 class="text-white font-medium mb-1">Security Patch Deployment</h4>
<p class="text-gray-400 text-sm mb-3">Deploy critical security update to all nodes</p>
<div class="mb-3">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Progress</span>
<span>78%</span>
</div>
<div class="progress-bar">
<div class="progress-fill blue" style="width: 78%"></div>
</div>
</div>
<div class="flex items-center justify-between text-xs text-gray-500">
<span><i data-feather="cpu" class="w-3 h-3 inline"></i> AGNT-001</span>
<span class="text-neon-green animate-pulse">● Active</span>
</div>
</div>
<div class="bg-void-700 border border-gray-700 rounded-lg p-4">
<div class="flex justify-between items-start mb-2">
<span class="badge badge-green">NORMAL</span>
<button class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></button>
</div>
<h4 class="text-white font-medium mb-1">Log Analysis</h4>
<p class="text-gray-400 text-sm mb-3">Analyze system logs for anomalies</p>
<div class="mb-3">
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Progress</span>
<span>45%</span>
</div>
<div class="progress-bar">
<div class="progress-fill green" style="width: 45%"></div>
</div>
</div>
<div class="flex items-center justify-between text-xs text-gray-500">
<span><i data-feather="cpu" class="w-3 h-3 inline"></i> AGNT-099</span>
<span class="text-neon-green animate-pulse">● Active</span>
</div>
</div>
</div>
</div>
<!-- Completed Column -->
<div class="bg-void-800 border border-gray-800 rounded-xl overflow-hidden">
<div class="p-4 border-b border-gray-700 bg-void-900 flex justify-between items-center">
<h3 class="font-bold text-neon-green flex items-center gap-2">
<i data-feather="check-circle" class="w-4 h-4"></i> Completed
</h3>
<span class="bg-neon-green/10 text-neon-green px-2 py-0.5 rounded text-xs">1,216</span>
</div>
<div class="p-4 space-y-4 max-h-[600px] overflow-y-auto">
<div class="bg-void-700/50 border border-gray-700 rounded-lg p-4 opacity-70">
<div class="flex justify-between items-start mb-2">
<span class="badge badge-gray">DONE</span>
<span class="text-gray-500 text-xs">2m ago</span>
</div>
<h4 class="text-white font-medium mb-1">System Backup</h4>
<p class="text-gray-400 text-sm">Completed full system backup</p>
</div>
<div class="bg-void-700/50 border border-gray-700 rounded-lg p-4 opacity-70">
<div class="flex justify-between items-start mb-2">
<span class="badge badge-gray">DONE</span>
<span class="text-gray-500 text-xs">15m ago</span>
</div>
<h4 class="text-white font-medium mb-1">Agent Health Check</h4>
<p class="text-gray-400 text-sm">All agents verified operational</p>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="components/navbar.js"></script>
<script src="components/sidebar.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html> |