Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Red Alert Command 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;700&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background-color: #0a0a0a; | |
| color: #e0e0e0; | |
| overflow: hidden; | |
| user-select: none; | |
| } | |
| .game-container { | |
| background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); | |
| border: 2px solid #3a3a3a; | |
| box-shadow: 0 0 20px rgba(255, 50, 50, 0.3); | |
| } | |
| .minimap { | |
| background: linear-gradient(135deg, #1a2a1a 0%, #0a1a0a 100%); | |
| border: 2px solid #4a4a4a; | |
| box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.3); | |
| } | |
| .unit-button { | |
| background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); | |
| border: 1px solid #4a4a4a; | |
| transition: all 0.2s; | |
| } | |
| .unit-button:hover { | |
| background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%); | |
| border-color: #ff3232; | |
| transform: translateY(-2px); | |
| } | |
| .unit-button:active { | |
| transform: translateY(0); | |
| } | |
| .health-bar { | |
| height: 4px; | |
| background: linear-gradient(90deg, #ff3232 0%, #32ff32 100%); | |
| } | |
| .construction-progress { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .selection-box { | |
| position: absolute; | |
| border: 1px dashed rgba(255, 255, 255, 0.7); | |
| background-color: rgba(100, 200, 255, 0.1); | |
| pointer-events: none; | |
| } | |
| .alert-flash { | |
| animation: alertFlash 0.5s infinite alternate; | |
| } | |
| @keyframes alertFlash { | |
| from { box-shadow: 0 0 5px rgba(255, 50, 50, 0.5); } | |
| to { box-shadow: 0 0 20px rgba(255, 50, 50, 0.9); } | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen w-screen flex items-center justify-center p-4"> | |
| <div class="game-container relative w-full h-full rounded-lg overflow-hidden flex flex-col"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-900 bg-opacity-90 p-2 flex justify-between items-center border-b border-gray-800"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-red-500 font-bold text-xl"> | |
| <span class="text-gray-400">SOVIET</span> COMMAND CENTER | |
| </div> | |
| <div class="text-yellow-400 flex items-center"> | |
| <i class="fas fa-coins mr-1"></i> | |
| <span id="credits">10,000</span> | |
| </div> | |
| <div class="text-blue-400 flex items-center"> | |
| <i class="fas fa-bolt mr-1"></i> | |
| <span id="power">100/150</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-green-400 flex items-center"> | |
| <i class="fas fa-user-shield mr-1"></i> | |
| <span id="units">12/50</span> | |
| </div> | |
| <div class="text-purple-400 flex items-center"> | |
| <i class="fas fa-flask mr-1"></i> | |
| <span id="tech-level">1</span> | |
| </div> | |
| <button id="options-btn" class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Game Area --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-900 bg-opacity-80 border-r border-gray-800 flex flex-col"> | |
| <!-- Construction Queue --> | |
| <div class="p-2 border-b border-gray-800"> | |
| <div class="text-gray-400 text-sm mb-1">CONSTRUCTION QUEUE</div> | |
| <div id="construction-queue" class="space-y-1"> | |
| <div class="construction-item bg-gray-800 p-1 rounded flex items-center"> | |
| <div class="w-8 h-8 bg-red-900 rounded mr-2 flex items-center justify-center"> | |
| <i class="fas fa-hard-hat text-yellow-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-xs">War Factory</div> | |
| <div class="construction-progress h-1 bg-red-500 rounded-full mt-1" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="construction-item bg-gray-800 p-1 rounded flex items-center opacity-70"> | |
| <div class="w-8 h-8 bg-red-900 rounded mr-2 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-blue-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-xs">Tesla Coil</div> | |
| <div class="h-1 bg-gray-700 rounded-full mt-1"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Unit Info --> | |
| <div id="unit-info" class="p-2 border-b border-gray-800 flex-1"> | |
| <div class="text-gray-400 text-sm mb-1">SELECTED UNITS (3)</div> | |
| <div class="bg-gray-800 rounded p-2 mb-2"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Conscript Squad</span> | |
| <span class="text-yellow-400">$100</span> | |
| </div> | |
| <div class="health-bar rounded-full mb-1"></div> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>Health: 75%</span> | |
| <span>Rank: Veteran</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <i class="fas fa-running text-green-400 mb-1"></i> | |
| <span class="text-xs">Move</span> | |
| </button> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <i class="fas fa-crosshairs text-red-400 mb-1"></i> | |
| <span class="text-xs">Attack</span> | |
| </button> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <i class="fas fa-undo text-blue-400 mb-1"></i> | |
| <span class="text-xs">Stop</span> | |
| </button> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <i class="fas fa-vector-square text-yellow-400 mb-1"></i> | |
| <span class="text-xs">Guard</span> | |
| </button> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <i class="fas fa-people-carry text-purple-400 mb-1"></i> | |
| <span class="text-xs">Capture</span> | |
| </button> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <i class="fas fa-layer-group text-gray-400 mb-1"></i> | |
| <span class="text-xs">Formation</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Build Menu --> | |
| <div id="build-menu" class="p-2"> | |
| <div class="text-gray-400 text-sm mb-1">BUILD MENU</div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <div class="w-10 h-10 bg-red-900 rounded-full mb-1 flex items-center justify-center"> | |
| <i class="fas fa-hard-hat text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs">War Factory</span> | |
| <span class="text-xs text-yellow-400">$2000</span> | |
| </button> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <div class="w-10 h-10 bg-red-900 rounded-full mb-1 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-blue-400"></i> | |
| </div> | |
| <span class="text-xs">Tesla Coil</span> | |
| <span class="text-xs text-yellow-400">$1500</span> | |
| </button> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <div class="w-10 h-10 bg-red-900 rounded-full mb-1 flex items-center justify-center"> | |
| <i class="fas fa-radiation text-green-400"></i> | |
| </div> | |
| <span class="text-xs">Nuclear Reactor</span> | |
| <span class="text-xs text-yellow-400">$2500</span> | |
| </button> | |
| <button class="unit-button rounded p-2 flex flex-col items-center"> | |
| <div class="w-10 h-10 bg-red-900 rounded-full mb-1 flex items-center justify-center"> | |
| <i class="fas fa-flag text-red-400"></i> | |
| </div> | |
| <span class="text-xs">Barracks</span> | |
| <span class="text-xs text-yellow-400">$1000</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game View --> | |
| <div class="flex-1 relative overflow-hidden" id="game-view"> | |
| <!-- This would be the actual game canvas in a real implementation --> | |
| <div class="absolute inset-0 bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center"> | |
| <div class="text-center text-gray-600"> | |
| <i class="fas fa-gamepad text-5xl mb-4"></i> | |
| <div>GAME VIEW AREA</div> | |
| </div> | |
| <!-- Example units --> | |
| <div class="absolute top-1/4 left-1/4 w-12 h-12 bg-red-800 rounded-sm flex items-center justify-center cursor-pointer hover:bg-red-700 border border-red-900"> | |
| <i class="fas fa-tank text-gray-300"></i> | |
| </div> | |
| <div class="absolute top-1/3 left-1/3 w-12 h-12 bg-red-800 rounded-sm flex items-center justify-center cursor-pointer hover:bg-red-700 border border-red-900"> | |
| <i class="fas fa-soldier text-gray-300"></i> | |
| </div> | |
| <div class="absolute top-1/2 left-1/2 w-16 h-16 bg-red-900 rounded-sm flex items-center justify-center cursor-pointer hover:bg-red-800 border border-red-700"> | |
| <i class="fas fa-hard-hat text-yellow-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <!-- Selection box (hidden by default) --> | |
| <div class="selection-box hidden" id="selection-box"></div> | |
| </div> | |
| <!-- Minimap --> | |
| <div class="w-48 h-48 bg-gray-900 bg-opacity-80 border-l border-gray-800 flex flex-col"> | |
| <div class="p-1 text-center text-xs text-gray-400 border-b border-gray-800">TACTICAL MAP</div> | |
| <div class="minimap flex-1 m-2 relative"> | |
| <!-- Minimap content --> | |
| <div class="absolute inset-0"> | |
| <!-- This would be the actual minimap in a real implementation --> | |
| <div class="w-full h-full relative"> | |
| <!-- Terrain --> | |
| <div class="absolute top-0 left-0 w-full h-full bg-green-900 opacity-30"></div> | |
| <!-- Units --> | |
| <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-red-500 rounded-full"></div> | |
| <div class="absolute top-1/3 left-1/3 w-2 h-2 bg-red-500 rounded-full"></div> | |
| <div class="absolute top-1/2 left-1/2 w-3 h-3 bg-red-700 rounded-sm"></div> | |
| <!-- Viewport indicator --> | |
| <div class="absolute border border-yellow-400" style="top: 20%; left: 20%; width: 30%; height: 30%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-1 flex justify-between"> | |
| <button class="text-xs px-2 py-1 bg-gray-800 hover:bg-gray-700 rounded"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <button class="text-xs px-2 py-1 bg-gray-800 hover:bg-gray-700 rounded"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <button class="text-xs px-2 py-1 bg-gray-800 hover:bg-gray-700 rounded"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Bar --> | |
| <div class="bg-gray-900 bg-opacity-90 p-1 flex justify-between items-center border-t border-gray-800"> | |
| <div class="flex items-center space-x-2"> | |
| <button id="sell-btn" class="px-2 py-1 bg-red-900 hover:bg-red-800 rounded text-xs"> | |
| <i class="fas fa-dollar-sign mr-1"></i> Sell | |
| </button> | |
| <button id="repair-btn" class="px-2 py-1 bg-blue-900 hover:bg-blue-800 rounded text-xs"> | |
| <i class="fas fa-wrench mr-1"></i> Repair | |
| </button> | |
| <div class="ml-2 text-xs text-gray-400"> | |
| <span id="game-time">12:34</span> | | |
| <span id="game-date">June 5, 1946</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button id="chat-btn" class="px-2 py-1 bg-gray-800 hover:bg-gray-700 rounded text-xs"> | |
| <i class="fas fa-comment-alt mr-1"></i> Chat | |
| </button> | |
| <button id="help-btn" class="px-2 py-1 bg-gray-800 hover:bg-gray-700 rounded text-xs"> | |
| <i class="fas fa-question-circle mr-1"></i> Help | |
| </button> | |
| <button id="menu-btn" class="px-2 py-1 bg-gray-800 hover:bg-gray-700 rounded text-xs"> | |
| <i class="fas fa-bars mr-1"></i> Menu | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Alert Message --> | |
| <div id="alert-message" class="absolute top-20 left-1/2 transform -translate-x-1/2 bg-red-900 bg-opacity-90 px-4 py-2 rounded-lg shadow-lg alert-flash hidden"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> | |
| <span>ENEMY UNITS DETECTED NEAR BASE!</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game state | |
| let credits = 10000; | |
| let power = 100; | |
| let maxPower = 150; | |
| let units = 12; | |
| let maxUnits = 50; | |
| let techLevel = 1; | |
| let gameTime = 0; | |
| // Selection state | |
| let isSelecting = false; | |
| let startX, startY; | |
| // DOM elements | |
| const gameView = document.getElementById('game-view'); | |
| const selectionBox = document.getElementById('selection-box'); | |
| const creditsDisplay = document.getElementById('credits'); | |
| const powerDisplay = document.getElementById('power'); | |
| const unitsDisplay = document.getElementById('units'); | |
| const techLevelDisplay = document.getElementById('tech-level'); | |
| const gameTimeDisplay = document.getElementById('game-time'); | |
| const gameDateDisplay = document.getElementById('game-date'); | |
| const alertMessage = document.getElementById('alert-message'); | |
| // Initialize game | |
| function initGame() { | |
| updateDisplays(); | |
| startGameClock(); | |
| // Show alert message after 3 seconds | |
| setTimeout(() => { | |
| showAlert("ENEMY UNITS DETECTED NEAR BASE!"); | |
| }, 3000); | |
| } | |
| // Update all displays | |
| function updateDisplays() { | |
| creditsDisplay.textContent = credits.toLocaleString(); | |
| powerDisplay.textContent = `${power}/${maxPower}`; | |
| unitsDisplay.textContent = `${units}/${maxUnits}`; | |
| techLevelDisplay.textContent = techLevel; | |
| } | |
| // Game clock | |
| function startGameClock() { | |
| setInterval(() => { | |
| gameTime += 1; | |
| const minutes = Math.floor(gameTime / 60); | |
| const seconds = gameTime % 60; | |
| gameTimeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| // Update date occasionally | |
| if (gameTime % 300 === 0) { | |
| const days = Math.floor(gameTime / 300); | |
| gameDateDisplay.textContent = `June ${5 + days}, 1946`; | |
| } | |
| }, 1000); | |
| } | |
| // Show alert message | |
| function showAlert(message) { | |
| alertMessage.querySelector('span').textContent = message; | |
| alertMessage.classList.remove('hidden'); | |
| setTimeout(() => { | |
| alertMessage.classList.add('hidden'); | |
| }, 5000); | |
| } | |
| // Selection handling | |
| gameView.addEventListener('mousedown', (e) => { | |
| if (e.button === 0) { // Left mouse button | |
| isSelecting = true; | |
| startX = e.clientX - gameView.getBoundingClientRect().left; | |
| startY = e.clientY - gameView.getBoundingClientRect().top; | |
| selectionBox.style.left = `${startX}px`; | |
| selectionBox.style.top = `${startY}px`; | |
| selectionBox.style.width = '0'; | |
| selectionBox.style.height = '0'; | |
| selectionBox.classList.remove('hidden'); | |
| } | |
| }); | |
| gameView.addEventListener('mousemove', (e) => { | |
| if (isSelecting) { | |
| const currentX = e.clientX - gameView.getBoundingClientRect().left; | |
| const currentY = e.clientY - gameView.getBoundingClientRect().top; | |
| selectionBox.style.left = `${Math.min(startX, currentX)}px`; | |
| selectionBox.style.top = `${Math.min(startY, currentY)}px`; | |
| selectionBox.style.width = `${Math.abs(currentX - startX)}px`; | |
| selectionBox.style.height = `${Math.abs(currentY - startY)}px`; | |
| } | |
| }); | |
| gameView.addEventListener('mouseup', (e) => { | |
| if (isSelecting && e.button === 0) { | |
| isSelecting = false; | |
| selectionBox.classList.add('hidden'); | |
| // In a real game, we'd select units within the box here | |
| } | |
| }); | |
| // Handle button clicks | |
| document.querySelectorAll('.unit-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Add visual feedback | |
| button.classList.add('bg-gray-700'); | |
| setTimeout(() => { | |
| button.classList.remove('bg-gray-700'); | |
| }, 100); | |
| // In a real game, execute the command | |
| }); | |
| }); | |
| // Initialize the game when the page loads | |
| window.addEventListener('load', initGame); | |
| </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=chenwl/red-alert-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |