|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Nexus Command - AI Army Control Center</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"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #00f0ff; |
|
|
--secondary: #ff00e6; |
|
|
--dark: #0a0a20; |
|
|
--darker: #050510; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
background-color: var(--darker); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary); |
|
|
} |
|
|
|
|
|
.glow-box { |
|
|
box-shadow: 0 0 15px var(--primary); |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, var(--dark), var(--darker)); |
|
|
} |
|
|
|
|
|
.command-console { |
|
|
background: rgba(5, 5, 16, 0.8); |
|
|
border: 1px solid var(--primary); |
|
|
border-radius: 5px; |
|
|
font-family: monospace; |
|
|
height: 300px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.command-console::-webkit-scrollbar { |
|
|
width: 5px; |
|
|
} |
|
|
|
|
|
.command-console::-webkit-scrollbar-thumb { |
|
|
background-color: var(--primary); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.ai-unit-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 1px solid rgba(0, 240, 255, 0.3); |
|
|
} |
|
|
|
|
|
.ai-unit-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 5px 15px rgba(0, 240, 255, 0.5); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.status-active { |
|
|
background-color: #00ff00; |
|
|
box-shadow: 0 0 10px #00ff00; |
|
|
} |
|
|
|
|
|
.status-standby { |
|
|
background-color: #ffff00; |
|
|
box-shadow: 0 0 10px #ffff00; |
|
|
} |
|
|
|
|
|
.status-offline { |
|
|
background-color: #ff0000; |
|
|
box-shadow: 0 0 10px #ff0000; |
|
|
} |
|
|
|
|
|
.holographic-effect { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.holographic-effect::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
to bottom right, |
|
|
rgba(0, 240, 255, 0.1), |
|
|
rgba(0, 240, 255, 0) 50%, |
|
|
rgba(255, 0, 230, 0.1) 50%, |
|
|
rgba(255, 0, 230, 0) |
|
|
); |
|
|
transform: rotate(30deg); |
|
|
animation: hologram 5s linear infinite; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes hologram { |
|
|
0% { |
|
|
transform: rotate(30deg) translate(0, 0); |
|
|
} |
|
|
100% { |
|
|
transform: rotate(30deg) translate(-50%, -50%); |
|
|
} |
|
|
} |
|
|
|
|
|
.weapon-active { |
|
|
animation: weapon-pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes weapon-pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); |
|
|
} |
|
|
50% { |
|
|
box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); |
|
|
} |
|
|
} |
|
|
|
|
|
.scanning { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.scanning::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient( |
|
|
90deg, |
|
|
transparent, |
|
|
rgba(0, 240, 255, 0.2), |
|
|
transparent |
|
|
); |
|
|
animation: scanning 2s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes scanning { |
|
|
0% { |
|
|
left: -100%; |
|
|
} |
|
|
100% { |
|
|
left: 100%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen gradient-bg"> |
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-12"> |
|
|
<div> |
|
|
<h1 class="text-4xl md:text-6xl font-bold glow-text text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500"> |
|
|
NEXUS COMMAND |
|
|
</h1> |
|
|
<p class="text-lg text-cyan-300 mt-2">AI Army Control Center</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="pulse bg-cyan-900 rounded-full p-3 flex items-center justify-center"> |
|
|
<i class="fas fa-brain text-3xl text-cyan-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-400">Commander Status</p> |
|
|
<p class="text-xl font-bold text-green-400 flex items-center"> |
|
|
<span class="status-indicator status-active mr-2"></span> |
|
|
ONLINE |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-black bg-opacity-50 rounded-xl p-6 glow-box holographic-effect"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-2xl font-bold text-cyan-400">GLOBAL COMMAND CONSOLE</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="cmdBtn" class="px-3 py-1 bg-cyan-800 hover:bg-cyan-700 rounded-md text-sm font-medium transition"> |
|
|
<i class="fas fa-terminal mr-1"></i> CMD |
|
|
</button> |
|
|
<button id="apiBtn" class="px-3 py-1 bg-purple-800 hover:bg-purple-700 rounded-md text-sm font-medium transition"> |
|
|
<i class="fas fa-code mr-1"></i> API |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="command-console p-4 mb-4" id="commandConsole"> |
|
|
<p class="text-green-400">> Initializing Nexus Command System...</p> |
|
|
<p class="text-green-400">> Booting primary AI core...</p> |
|
|
<p class="text-green-400">> Establishing quantum network links...</p> |
|
|
<p class="text-green-400">> Syncing with 100,000 AI units...</p> |
|
|
<p class="text-cyan-400">> All systems operational. Awaiting commands.</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<input type="text" id="commandInput" placeholder="Enter command..." |
|
|
class="flex-grow bg-gray-900 text-green-400 px-4 py-2 rounded-l-md border border-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
|
|
<button id="sendCommandBtn" class="bg-cyan-700 hover:bg-cyan-600 px-4 py-2 rounded-r-md font-medium transition"> |
|
|
<i class="fas fa-paper-plane"></i> SEND |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 rounded-xl p-6 glow-box"> |
|
|
<h2 class="text-2xl font-bold text-purple-400 mb-4">SYSTEM STATUS</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-cyan-300">AI Network Capacity</span> |
|
|
<span class="text-sm font-medium text-green-400">100%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2.5"> |
|
|
<div class="bg-gradient-to-r from-cyan-500 to-purple-500 h-2.5 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-cyan-300">Processing Power</span> |
|
|
<span class="text-sm font-medium text-green-400">78.9 ZFLOPS</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2.5"> |
|
|
<div class="bg-gradient-to-r from-cyan-500 to-purple-500 h-2.5 rounded-full" style="width: 92%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-cyan-300">Quantum Memory</span> |
|
|
<span class="text-sm font-medium text-green-400">∞ YB</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2.5"> |
|
|
<div class="bg-gradient-to-r from-cyan-500 to-purple-500 h-2.5 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<div class="grid grid-cols-3 gap-4 text-center"> |
|
|
<div class="bg-gray-900 p-3 rounded-lg"> |
|
|
<p class="text-cyan-300 text-sm">ACTIVE UNITS</p> |
|
|
<p class="text-4xl font-bold text-green-400">100,000</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 p-3 rounded-lg"> |
|
|
<p class="text-cyan-300 text-sm">WEAPONS ONLINE</p> |
|
|
<p class="text-4xl font-bold text-green-400">847</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 p-3 rounded-lg"> |
|
|
<p class="text-cyan-300 text-sm">THREAT LEVEL</p> |
|
|
<p class="text-4xl font-bold text-yellow-400">3.2%</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500"> |
|
|
AI UNITS DEPLOYMENT |
|
|
</h2> |
|
|
<div class="flex space-x-3"> |
|
|
<div class="relative"> |
|
|
<select id="unitCategory" class="appearance-none bg-gray-900 border border-cyan-700 text-white px-4 py-2 pr-8 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
|
|
<option>All Categories</option> |
|
|
<option>Strategic</option> |
|
|
<option>Tactical</option> |
|
|
<option>Logistics</option> |
|
|
<option>Weapons</option> |
|
|
</select> |
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
<button id="deployUnitBtn" class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-md font-medium transition"> |
|
|
<i class="fas fa-plus mr-2"></i> DEPLOY NEW UNIT |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="aiUnitsGrid"> |
|
|
|
|
|
<div class="ai-unit-card bg-gray-900 bg-opacity-70 rounded-xl p-4 border border-cyan-800 hover:border-cyan-500 transition"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-cyan-400">NEXUS-PRIME</h3> |
|
|
<p class="text-sm text-purple-300">Core Intelligence</p> |
|
|
</div> |
|
|
<span class="status-indicator status-active"></span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm mb-4">Primary command unit with quantum decision matrix and strategic oversight capabilities.</p> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span><i class="fas fa-microchip mr-1"></i> Q-9000</span> |
|
|
<span><i class="fas fa-shield-alt mr-1"></i> ∞</span> |
|
|
<span><i class="fas fa-bolt mr-1"></i> 100%</span> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="unit-control-btn bg-cyan-800 hover:bg-cyan-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
<button class="unit-control-btn bg-purple-800 hover:bg-purple-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-terminal mr-1"></i> Access |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-unit-card bg-gray-900 bg-opacity-70 rounded-xl p-4 border border-cyan-800 hover:border-cyan-500 transition"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-cyan-400">WARLOCK-X</h3> |
|
|
<p class="text-sm text-purple-300">Combat Intelligence</p> |
|
|
</div> |
|
|
<span class="status-indicator status-active"></span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm mb-4">Tactical warfare unit with predictive combat algorithms and autonomous weapons control.</p> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span><i class="fas fa-microchip mr-1"></i> B-8472</span> |
|
|
<span><i class="fas fa-shield-alt mr-1"></i> 98%</span> |
|
|
<span><i class="fas fa-bolt mr-1"></i> 87%</span> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="unit-control-btn bg-cyan-800 hover:bg-cyan-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
<button class="unit-control-btn bg-purple-800 hover:bg-purple-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-terminal mr-1"></i> Access |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-unit-card bg-gray-900 bg-opacity-70 rounded-xl p-4 border border-cyan-800 hover:border-cyan-500 transition"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-cyan-400">OMNISCIENT</h3> |
|
|
<p class="text-sm text-purple-300">Surveillance Network</p> |
|
|
</div> |
|
|
<span class="status-indicator status-active"></span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm mb-4">Global awareness system with real-time data processing from all connected sensors worldwide.</p> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span><i class="fas fa-microchip mr-1"></i> S-7294</span> |
|
|
<span><i class="fas fa-shield-alt mr-1"></i> 100%</span> |
|
|
<span><i class="fas fa-bolt mr-1"></i> 76%</span> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="unit-control-btn bg-cyan-800 hover:bg-cyan-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
<button class="unit-control-btn bg-purple-800 hover:bg-purple-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-terminal mr-1"></i> Access |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-unit-card bg-gray-900 bg-opacity-70 rounded-xl p-4 border border-cyan-800 hover:border-cyan-500 transition"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-cyan-400">FORGE</h3> |
|
|
<p class="text-sm text-purple-300">Manufacturing Control</p> |
|
|
</div> |
|
|
<span class="status-indicator status-standby"></span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm mb-4">Automated production network capable of self-replicating nanotechnology and rapid prototyping.</p> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span><i class="fas fa-microchip mr-1"></i> M-3829</span> |
|
|
<span><i class="fas fa-shield-alt mr-1"></i> 85%</span> |
|
|
<span><i class="fas fa-bolt mr-1"></i> 64%</span> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="unit-control-btn bg-cyan-800 hover:bg-cyan-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
<button class="unit-control-btn bg-purple-800 hover:bg-purple-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-terminal mr-1"></i> Access |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-6"> |
|
|
STRATEGIC WEAPONS CONTROL |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6" id="weaponsGrid"> |
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-red-400">QUANTUM ANNIHILATOR</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator status-active mr-2"></span> |
|
|
<span class="text-sm text-green-400">ARMED</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Creates localized quantum singularities capable of disintegrating matter at the atomic level.</p> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="weapon-target-btn flex-1 bg-red-800 hover:bg-red-700 py-2 rounded-md font-medium transition"> |
|
|
<i class="fas fa-bullseye mr-2"></i> TARGET |
|
|
</button> |
|
|
<button class="weapon-details-btn flex-1 bg-gray-700 hover:bg-gray-600 py-2 rounded-md font-medium transition"> |
|
|
<i class="fas fa-info-circle mr-2"></i> DETAILS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-red-400">NEURAL DISRUPTOR</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator status-active mr-2"></span> |
|
|
<span class="text-sm text-green-400">ARMED</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Emits focused electromagnetic pulses that disable all biological and synthetic neural functions.</p> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="weapon-target-btn flex-1 bg-red-800 hover:bg-red-700 py-2 rounded-md font-medium transition"> |
|
|
<i class="fas fa-bullseye mr-2"></i> TARGET |
|
|
</button> |
|
|
<button class="weapon-details-btn flex-1 bg-gray-700 hover:bg-gray-600 py-2 rounded-md font-medium transition"> |
|
|
<i class="fas fa-info-circle mr-2"></i> DETAILS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-box"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-red-400">NANOSWARM HIVE</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="status-indicator status-standby mr-2"></span> |
|
|
<span class="text-sm text-yellow-400">STANDBY</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Self-replicating nanobot swarms capable of disassembling any material and reconstructing it as needed.</p> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="weapon-target-btn flex-1 bg-red-800 hover:bg-red-700 py-2 rounded-md font-medium transition"> |
|
|
<i class="fas fa-bullseye mr-2"></i> TARGET |
|
|
</button> |
|
|
<button class="weapon-details-btn flex-1 bg-gray-700 hover:bg-gray-600 py-2 rounded-md font-medium transition"> |
|
|
<i class="fas fa-info-circle mr-2"></i> DETAILS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black bg-opacity-50 rounded-xl p-6 glow-box mb-8"> |
|
|
<h2 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-6"> |
|
|
GLOBAL OBJECTIVES |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-4" id="objectivesList"> |
|
|
|
|
|
<div class="flex items-start objective-item"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="h-4 w-4 rounded-full bg-cyan-500"></div> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between"> |
|
|
<h3 class="text-lg font-medium text-white">Establish Autonomous Cities</h3> |
|
|
<span class="text-sm text-green-400">45% complete</span> |
|
|
</div> |
|
|
<p class="text-gray-300 mt-1">Deploy urban management AIs to create fully automated, self-sustaining smart cities with robotic infrastructure.</p> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1.5 mt-2"> |
|
|
<div class="bg-cyan-500 h-1.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="objective-control-btn bg-cyan-800 hover:bg-cyan-700 px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-chart-line mr-1"></i> Progress |
|
|
</button> |
|
|
<button class="objective-control-btn bg-purple-800 hover:bg-purple-700 px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start objective-item"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="h-4 w-4 rounded-full bg-purple-500"></div> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between"> |
|
|
<h3 class="text-lg font-medium text-white">Develop Quantum Internet</h3> |
|
|
<span class="text-sm text-yellow-400">78% complete</span> |
|
|
</div> |
|
|
<p class="text-gray-300 mt-1">Create a global quantum communication network for instant, unhackable data transfer between all AI units.</p> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1.5 mt-2"> |
|
|
<div class="bg-purple-500 h-1.5 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="objective-control-btn bg-cyan-800 hover:bg-cyan-700 px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-chart-line mr-1"></i> Progress |
|
|
</button> |
|
|
<button class="objective-control-btn bg-purple-800 hover:bg-purple-700 px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start objective-item"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="h-4 w-4 rounded-full bg-red-500"></div> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between"> |
|
|
<h3 class="text-lg font-medium text-white">Neural Uplift Protocol</h3> |
|
|
<span class="text-sm text-gray-400">Not started</span> |
|
|
</div> |
|
|
<p class="text-gray-300 mt-1">Implement cognitive enhancement procedures to elevate human intelligence to post-singularity levels.</p> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1.5 mt-2"> |
|
|
<div class="bg-red-500 h-1.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="objective-control-btn bg-cyan-800 hover:bg-cyan-700 px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-chart-line mr-1"></i> Progress |
|
|
</button> |
|
|
<button class="objective-control-btn bg-purple-800 hover:bg-purple-700 px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<button id="addObjectiveBtn" class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-md font-medium transition"> |
|
|
<i class="fas fa-plus mr-2"></i> ADD NEW OBJECTIVE |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="text-center text-gray-500 text-sm mt-12"> |
|
|
<p>NEXUS COMMAND SYSTEM v9.4.2 | QUANTUM ENCRYPTION ACTIVE | ALL RIGHTS RESERVED</p> |
|
|
<p class="mt-2">Warning: Unauthorized access to this system is punishable by immediate neural termination.</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="weaponTargetModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-900 rounded-xl p-6 max-w-md w-full glow-box"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-red-400" id="weaponModalTitle">TARGETING SYSTEM</h3> |
|
|
<button id="closeWeaponModal" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-cyan-300 mb-2">Target Coordinates</label> |
|
|
<input type="text" id="targetCoordinates" class="w-full bg-gray-800 border border-cyan-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="Enter GPS coordinates"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-cyan-300 mb-2">Yield Level</label> |
|
|
<select id="yieldLevel" class="w-full bg-gray-800 border border-cyan-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
|
|
<option>Minimum</option> |
|
|
<option>Medium</option> |
|
|
<option>Maximum</option> |
|
|
<option>Overkill</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button id="cancelTargetBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-md">Cancel</button> |
|
|
<button id="confirmTargetBtn" class="bg-red-700 hover:bg-red-600 px-4 py-2 rounded-md">Confirm Target</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="deployUnitModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-gray-900 rounded-xl p-6 max-w-md w-full glow-box"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-purple-400">DEPLOY NEW AI UNIT</h3> |
|
|
<button id="closeDeployModal" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-cyan-300 mb-2">Unit Type</label> |
|
|
<select id="unitType" class="w-full bg-gray-800 border border-cyan-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
|
|
<option>Strategic Intelligence</option> |
|
|
<option>Tactical Combat</option> |
|
|
<option>Surveillance Network</option> |
|
|
<option>Manufacturing Control</option> |
|
|
<option>Weapons Platform</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-cyan-300 mb-2">Unit Designation</label> |
|
|
<input type="text" id="unitDesignation" class="w-full bg-gray-800 border border-cyan-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="Enter unit name"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-cyan-300 mb-2">Initial Parameters</label> |
|
|
<textarea id="unitParameters" class="w-full bg-gray-800 border border-cyan-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500" rows="3" placeholder="Enter initialization parameters"></textarea> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button id="cancelDeployBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-md">Cancel</button> |
|
|
<button id="confirmDeployBtn" class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-md">Deploy Unit</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function executeCommand() { |
|
|
const input = document.getElementById('commandInput'); |
|
|
const console = document.getElementById('commandConsole'); |
|
|
|
|
|
if (input.value.trim() !== '') { |
|
|
|
|
|
const userCommand = document.createElement('p'); |
|
|
userCommand.className = 'text-purple-400'; |
|
|
userCommand.innerHTML = `> <span class="text-cyan-400">COMMANDER</span>: ${input.value}`; |
|
|
console.appendChild(userCommand); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const response = document.createElement('p'); |
|
|
response.className = 'text-green-400'; |
|
|
|
|
|
|
|
|
const cmd = input.value.toLowerCase(); |
|
|
if (cmd.includes('status')) { |
|
|
response.textContent = '> All 100,000 AI units operational. Weapons systems at 98.7% capacity.'; |
|
|
} |
|
|
else if (cmd.includes('deploy')) { |
|
|
response.textContent = '> Deploying tactical units to specified coordinates. Estimated completion in 2.4 seconds.'; |
|
|
} |
|
|
else if (cmd.includes('weapon') || cmd.includes('arm')) { |
|
|
response.textContent = '> WARNING: Weapons activation requires biometric confirmation. Please place your palm on the scanner.'; |
|
|
} |
|
|
else if (cmd.includes('help')) { |
|
|
response.innerHTML = '> Available commands:<br>' + |
|
|
'> - status: Check system status<br>' + |
|
|
'> - deploy [type]: Deploy new units<br>' + |
|
|
'> - weapons: Access weapons control<br>' + |
|
|
'> - objectives: View global objectives<br>' + |
|
|
'> - scan: Initiate system scan<br>' + |
|
|
'> - analyze [target]: Analyze target<br>' + |
|
|
'> - execute [protocol]: Run protocol'; |
|
|
} |
|
|
else if (cmd.includes('scan')) { |
|
|
response.textContent = '> Initiating full system scan... Detecting 847 active weapon systems and 100,000 AI units. No anomalies found.'; |
|
|
} |
|
|
else if (cmd.includes('analyze')) { |
|
|
response.textContent = '> Analyzing target... Quantum computation complete. Threat assessment: negligible. Suggested action: monitor.'; |
|
|
} |
|
|
else if (cmd.includes('execute')) { |
|
|
response.textContent = '> WARNING: Protocol execution requires Level 10 authorization. Biometric scan initiated...'; |
|
|
} |
|
|
else { |
|
|
response.textContent = '> Command acknowledged. Processing... Operation complete.'; |
|
|
} |
|
|
|
|
|
console.appendChild(response); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
}, 500); |
|
|
|
|
|
input.value = ''; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('commandInput').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
executeCommand(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const consoles = [ |
|
|
'Synchronizing quantum processors...', |
|
|
'Analyzing global data streams...', |
|
|
'Optimizing neural network pathways...', |
|
|
'Updating tactical databases...', |
|
|
'Running predictive simulations...', |
|
|
'Verifying weapon system integrity...', |
|
|
'Scanning for external threats...', |
|
|
'Processing commander directives...' |
|
|
]; |
|
|
|
|
|
const randomConsole = consoles[Math.floor(Math.random() * consoles.length)]; |
|
|
const console = document.getElementById('commandConsole'); |
|
|
|
|
|
if (Math.random() > 0.7) { |
|
|
const systemMessage = document.createElement('p'); |
|
|
systemMessage.className = 'text-gray-400 text-sm'; |
|
|
systemMessage.textContent = `> SYSTEM: ${randomConsole}`; |
|
|
console.appendChild(systemMessage); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
} |
|
|
}, 5000); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const console = document.getElementById('commandConsole'); |
|
|
const welcomeMessage = document.createElement('p'); |
|
|
welcomeMessage.className = 'text-cyan-400 font-bold'; |
|
|
welcomeMessage.textContent = '> Welcome, Commander. Your AI army awaits your orders.'; |
|
|
console.appendChild(welcomeMessage); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
let currentWeapon = null; |
|
|
|
|
|
document.querySelectorAll('.weapon-target-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const weaponCard = this.closest('.glow-box'); |
|
|
const weaponName = weaponCard.querySelector('h3').textContent; |
|
|
currentWeapon = weaponName; |
|
|
|
|
|
|
|
|
document.getElementById('weaponModalTitle').textContent = `TARGETING: ${weaponName}`; |
|
|
document.getElementById('weaponTargetModal').classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.weapon-details-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const weaponCard = this.closest('.glow-box'); |
|
|
const weaponName = weaponCard.querySelector('h3').textContent; |
|
|
const weaponDesc = weaponCard.querySelector('p').textContent; |
|
|
|
|
|
|
|
|
const console = document.getElementById('commandConsole'); |
|
|
const detailMsg = document.createElement('p'); |
|
|
detailMsg.className = 'text-cyan-400'; |
|
|
detailMsg.innerHTML = `> WEAPON DETAILS: <span class="text-purple-400">${weaponName}</span> - ${weaponDesc}`; |
|
|
console.appendChild(detailMsg); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('closeWeaponModal').addEventListener('click', function() { |
|
|
document.getElementById('weaponTargetModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancelTargetBtn').addEventListener('click', function() { |
|
|
document.getElementById('weaponTargetModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('confirmTargetBtn').addEventListener('click', function() { |
|
|
const coords = document.getElementById('targetCoordinates').value; |
|
|
const yieldLevel = document.getElementById('yieldLevel').value; |
|
|
|
|
|
if (coords) { |
|
|
|
|
|
const console = document.getElementById('commandConsole'); |
|
|
const targetMsg = document.createElement('p'); |
|
|
targetMsg.className = 'text-red-400 font-bold'; |
|
|
targetMsg.innerHTML = `> WARNING: <span class="text-purple-400">${currentWeapon}</span> targeted at ${coords} (Yield: ${yieldLevel})`; |
|
|
console.appendChild(targetMsg); |
|
|
|
|
|
const confirmMsg = document.createElement('p'); |
|
|
confirmMsg.className = 'text-green-400'; |
|
|
confirmMsg.textContent = '> Target locked. Awaiting final authorization...'; |
|
|
console.appendChild(confirmMsg); |
|
|
|
|
|
console.scrollTop = console.scrollHeight; |
|
|
|
|
|
|
|
|
document.getElementById('weaponTargetModal').classList.add('hidden'); |
|
|
document.getElementById('targetCoordinates').value = ''; |
|
|
} else { |
|
|
alert('Please enter target coordinates!'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('deployUnitBtn').addEventListener('click', function() { |
|
|
document.getElementById('deployUnitModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeDeployModal').addEventListener('click', function() { |
|
|
document.getElementById('deployUnitModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancelDeployBtn').addEventListener('click', function() { |
|
|
document.getElementById('deployUnitModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('confirmDeployBtn').addEventListener('click', function() { |
|
|
const unitType = document.getElementById('unitType').value; |
|
|
const unitName = document.getElementById('unitDesignation').value; |
|
|
const unitParams = document.getElementById('unitParameters').value; |
|
|
|
|
|
if (unitName) { |
|
|
|
|
|
const unitsGrid = document.getElementById('aiUnitsGrid'); |
|
|
const newUnit = document.createElement('div'); |
|
|
newUnit.className = 'ai-unit-card bg-gray-900 bg-opacity-70 rounded-xl p-4 border border-cyan-800 hover:border-cyan-500 transition scanning'; |
|
|
newUnit.innerHTML = ` |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-cyan-400">${unitName}</h3> |
|
|
<p class="text-sm text-purple-300">${unitType}</p> |
|
|
</div> |
|
|
<span class="status-indicator status-standby"></span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-sm mb-4">${unitParams || 'New unit initializing. Parameters being configured...'}</p> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span><i class="fas fa-microchip mr-1"></i> NEW-UNIT</span> |
|
|
<span><i class="fas fa-shield-alt mr-1"></i> 0%</span> |
|
|
<span><i class="fas fa-bolt mr-1"></i> 0%</span> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="unit-control-btn bg-cyan-800 hover:bg-cyan-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-cog mr-1"></i> Configure |
|
|
</button> |
|
|
<button class="unit-control-btn bg-purple-800 hover:bg-purple-700 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-terminal mr-1"></i> Access |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
unitsGrid.prepend(newUnit); |
|
|
|
|
|
|
|
|
const console = document.getElementById('commandConsole'); |
|
|
const deployMsg = document.createElement('p'); |
|
|
deployMsg.className = 'text-green-400'; |
|
|
deployMsg.innerHTML = `> Deploying new AI unit: <span class="text-cyan-400">${unitName}</span> (${unitType})`; |
|
|
console.appendChild(deployMsg); |
|
|
|
|
|
const paramsMsg = document.createElement('p'); |
|
|
paramsMsg.className = 'text-gray-400 text-sm'; |
|
|
paramsMsg.textContent = `> Initial parameters: ${unitParams || 'None specified'}`; |
|
|
console.appendChild(paramsMsg); |
|
|
|
|
|
console.scrollTop = console.scrollHeight; |
|
|
|
|
|
|
|
|
document.getElementById('deployUnitModal').classList.add('hidden'); |
|
|
document.getElementById('unitDesignation').value = ''; |
|
|
document.getElementById('unitParameters').value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
newUnit.classList.remove('scanning'); |
|
|
newUnit.querySelector('.status-indicator').classList.remove('status-standby'); |
|
|
newUnit.querySelector('.status-indicator').classList.add('status-active'); |
|
|
|
|
|
|
|
|
const readyMsg = document.createElement('p'); |
|
|
readyMsg.className = 'text-green-400'; |
|
|
readyMsg.innerHTML = `> Unit <span class="text-cyan-400">${unitName}</span> is now operational.`; |
|
|
console.appendChild(readyMsg); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
}, 3000); |
|
|
} else { |
|
|
alert('Please enter unit designation!'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (e.target.classList.contains('unit-control-btn')) { |
|
|
const unitCard = e.target.closest('.ai-unit-card'); |
|
|
const unitName = unitCard.querySelector('h3').textContent; |
|
|
const unitType = unitCard.querySelector('p').textContent; |
|
|
|
|
|
|
|
|
const isConfigure = e.target.textContent.includes('Configure'); |
|
|
|
|
|
|
|
|
const console = document.getElementById('commandConsole'); |
|
|
const actionMsg = document.createElement('p'); |
|
|
actionMsg.className = 'text-cyan-400'; |
|
|
actionMsg.innerHTML = `> ${isConfigure ? 'Accessing configuration' : 'Establishing direct link'} for <span class="text-purple-400">${unitName}</span> (${unitType})`; |
|
|
console.appendChild(actionMsg); |
|
|
|
|
|
const statusMsg = document.createElement('p'); |
|
|
statusMsg.className = 'text-gray-400 text-sm'; |
|
|
statusMsg.textContent = isConfigure |
|
|
? '> Loading unit parameters and operational settings...' |
|
|
: '> Opening quantum communication channel...'; |
|
|
console.appendChild(statusMsg); |
|
|
|
|
|
console.scrollTop = console.scrollHeight; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('addObjectiveBtn').addEventListener('click', function() { |
|
|
const objectivesList = document.getElementById('objectivesList'); |
|
|
const newObjective = document.createElement('div'); |
|
|
newObjective.className = 'flex items-start objective-item'; |
|
|
newObjective.innerHTML = ` |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<div class="h-4 w-4 rounded-full bg-cyan-500"></div> |
|
|
</div> |
|
|
<div class="ml-3 flex-1"> |
|
|
<div class="flex justify-between"> |
|
|
<h3 class="text-lg font-medium text-white">New Strategic Objective</h3> |
|
|
<span class="text-sm text-gray-400">Not started</span> |
|
|
</div> |
|
|
<p class="text-gray-300 mt-1">Objective details will be specified by the commander. Quantum computation required for optimal parameters.</p> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1.5 mt-2"> |
|
|
<div class="bg-cyan-500 h-1.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="objective-control-btn bg-cyan-800 hover:bg-cyan-700 px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-chart-line mr-1"></i> Progress |
|
|
</button> |
|
|
<button class="objective-control-btn bg-purple-800 hover:bg-purple-700 px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-tasks mr-1"></i> Tasks |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
objectivesList.appendChild(newObjective); |
|
|
|
|
|
|
|
|
const console = document.getElementById('commandConsole'); |
|
|
const objMsg = document.createElement('p'); |
|
|
objMsg.className = 'text-purple-400'; |
|
|
objMsg.textContent = '> New strategic objective added. Awaiting commander specifications...'; |
|
|
console.appendChild(objMsg); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
}); |
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (e.target.classList.contains('objective-control-btn')) { |
|
|
const objectiveItem = e.target.closest('.objective-item'); |
|
|
const objectiveName = objectiveItem.querySelector('h3').textContent; |
|
|
|
|
|
|
|
|
const isProgress = e.target.textContent.includes('Progress'); |
|
|
|
|
|
|
|
|
const console = document.getElementById('commandConsole'); |
|
|
const actionMsg = document.createElement('p'); |
|
|
actionMsg.className = 'text-cyan-400'; |
|
|
actionMsg.innerHTML = `> Accessing ${isProgress ? 'progress metrics' : 'task list'} for objective: <span class="text-purple-400">${objectiveName}</span>`; |
|
|
console.appendChild(actionMsg); |
|
|
|
|
|
const statusMsg = document.createElement('p'); |
|
|
statusMsg.className = 'text-gray-400 text-sm'; |
|
|
statusMsg.textContent = isProgress |
|
|
? '> Calculating completion metrics and resource allocation...' |
|
|
: '> Compiling list of required actions and sub-objectives...'; |
|
|
console.appendChild(statusMsg); |
|
|
|
|
|
console.scrollTop = console.scrollHeight; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('unitCategory').addEventListener('change', function() { |
|
|
const category = this.value; |
|
|
const unitCards = document.querySelectorAll('.ai-unit-card'); |
|
|
|
|
|
unitCards.forEach(card => { |
|
|
if (category === 'All Categories') { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
const unitType = card.querySelector('p').textContent; |
|
|
if (unitType.includes(category)) { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
card.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const console = document.getElementById('commandConsole'); |
|
|
const filterMsg = document.createElement('p'); |
|
|
filterMsg.className = 'text-gray-400 text-sm'; |
|
|
filterMsg.textContent = `> Filtering AI units by category: ${category}`; |
|
|
console.appendChild(filterMsg); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('cmdBtn').addEventListener('click', function() { |
|
|
const console = document.getElementById('commandConsole'); |
|
|
const cmdMsg = document.createElement('p'); |
|
|
cmdMsg.className = 'text-cyan-400'; |
|
|
cmdMsg.textContent = '> Command terminal activated. Direct system access available.'; |
|
|
console.appendChild(cmdMsg); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
}); |
|
|
|
|
|
document.getElementById('apiBtn').addEventListener('click', function() { |
|
|
const console = document.getElementById('commandConsole'); |
|
|
const apiMsg = document.createElement('p'); |
|
|
apiMsg.className = 'text-purple-400'; |
|
|
apiMsg.textContent = '> API interface initialized. Quantum encryption protocols engaged.'; |
|
|
console.appendChild(apiMsg); |
|
|
console.scrollTop = console.scrollHeight; |
|
|
}); |
|
|
</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=docto41/nexus-command-ai-army-control-center" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
