|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Global Strategy: World Domination</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=Roboto:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: #e2e8f0; |
|
|
overflow: hidden; |
|
|
user-select: none; |
|
|
} |
|
|
|
|
|
.map-container { |
|
|
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-_low_resolution.svg/1200px-World_map_-_low_resolution.svg.png'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
image-rendering: pixelated; |
|
|
} |
|
|
|
|
|
.country { |
|
|
position: absolute; |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.country:hover { |
|
|
filter: brightness(1.2); |
|
|
transform: scale(1.02); |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.unit { |
|
|
position: absolute; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
z-index: 5; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.notification { |
|
|
animation: slideIn 0.3s forwards; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.combat-animation { |
|
|
animation: pulse 0.5s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
from { box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); } |
|
|
to { box-shadow: 0 0 15px rgba(255, 0, 0, 0.8); } |
|
|
} |
|
|
|
|
|
.diplomacy-relation-bar { |
|
|
height: 4px; |
|
|
background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%); |
|
|
} |
|
|
|
|
|
.tech-node { |
|
|
position: relative; |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.tech-node:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.tech-line { |
|
|
position: absolute; |
|
|
height: 2px; |
|
|
background-color: #4b5563; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: absolute; |
|
|
z-index: 100; |
|
|
background-color: #1e293b; |
|
|
border: 1px solid #334155; |
|
|
padding: 8px; |
|
|
border-radius: 4px; |
|
|
pointer-events: none; |
|
|
opacity: 0; |
|
|
transition: opacity 0.2s; |
|
|
max-width: 300px; |
|
|
} |
|
|
|
|
|
.combat-arrow { |
|
|
position: absolute; |
|
|
height: 2px; |
|
|
background-color: #ef4444; |
|
|
z-index: 4; |
|
|
transform-origin: left center; |
|
|
} |
|
|
|
|
|
.combat-arrow::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
right: -5px; |
|
|
top: -4px; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border-left: 5px solid #ef4444; |
|
|
border-top: 5px solid transparent; |
|
|
border-bottom: 5px solid transparent; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="h-screen flex flex-col"> |
|
|
|
|
|
<div class="bg-slate-800 p-2 flex justify-between items-center border-b border-slate-700"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<h1 class="text-xl font-bold text-amber-400">GLOBAL STRATEGY</h1> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="pause-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-pause"></i> Pause |
|
|
</button> |
|
|
<button id="speed-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-forward"></i> Speed: 1x |
|
|
</button> |
|
|
<div class="px-3 py-1 bg-slate-700 rounded"> |
|
|
<i class="far fa-calendar-alt"></i> <span id="game-date">1936.1.1</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-6"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-coins text-yellow-400"></i> |
|
|
<span id="money-counter">1000</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-bolt text-blue-400"></i> |
|
|
<span id="energy-counter">500</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-gas-pump text-red-400"></i> |
|
|
<span id="oil-counter">200</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-cube text-gray-400"></i> |
|
|
<span id="metal-counter">300</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-utensils text-green-400"></i> |
|
|
<span id="food-counter">400</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-user text-amber-400"></i> |
|
|
<span id="manpower-counter">1000K</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="w-64 bg-slate-800 border-r border-slate-700 flex flex-col"> |
|
|
<div class="p-3 border-b border-slate-700"> |
|
|
<h2 class="font-bold text-lg mb-2">Nation: <span id="player-nation" class="text-amber-400">United States</span></h2> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<div> |
|
|
<div>Stability: <span class="text-green-400">75%</span></div> |
|
|
<div>War Support: <span class="text-yellow-400">60%</span></div> |
|
|
</div> |
|
|
<div> |
|
|
<div>Factories: <span>45</span></div> |
|
|
<div>Dockyards: <span>12</span></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex border-b border-slate-700"> |
|
|
<button data-tab="country" class="tab-btn flex-1 py-2 bg-slate-700 text-amber-400"> |
|
|
<i class="fas fa-flag"></i> Country |
|
|
</button> |
|
|
<button data-tab="military" class="tab-btn flex-1 py-2 hover:bg-slate-700"> |
|
|
<i class="fas fa-tank"></i> Military |
|
|
</button> |
|
|
<button data-tab="diplomacy" class="tab-btn flex-1 py-2 hover:bg-slate-700"> |
|
|
<i class="fas fa-handshake"></i> Diplomacy |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
|
|
|
<div id="country-tab" class="tab-content p-3 space-y-4"> |
|
|
<div> |
|
|
<h3 class="font-bold mb-2">Government</h3> |
|
|
<div class="bg-slate-700 p-2 rounded"> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Ideology:</span> |
|
|
<span class="text-amber-400">Democracy</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Leader:</span> |
|
|
<span>Franklin D. Roosevelt</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>Party:</span> |
|
|
<span>Democratic Party</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-bold mb-2">Construction</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center justify-between bg-slate-700 p-2 rounded"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-industry text-blue-400"></i> |
|
|
<span>Civilian Factory</span> |
|
|
</div> |
|
|
<button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Build</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between bg-slate-700 p-2 rounded"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-hard-hat text-red-400"></i> |
|
|
<span>Military Factory</span> |
|
|
</div> |
|
|
<button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Build</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between bg-slate-700 p-2 rounded"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-ship text-cyan-400"></i> |
|
|
<span>Naval Dockyard</span> |
|
|
</div> |
|
|
<button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Build</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-bold mb-2">Production</h3> |
|
|
<div class="bg-slate-700 p-2 rounded"> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Civilian Factories:</span> |
|
|
<span>30</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Military Factories:</span> |
|
|
<span>15</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>Naval Dockyards:</span> |
|
|
<span>12</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="military-tab" class="tab-content hidden p-3 space-y-4"> |
|
|
<div> |
|
|
<h3 class="font-bold mb-2">Army</h3> |
|
|
<div class="bg-slate-700 p-2 rounded"> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Divisions:</span> |
|
|
<span>24</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Manpower:</span> |
|
|
<span>1,200,000</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span>Equipment:</span> |
|
|
<span>85%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-bold mb-2">Recruitment</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center justify-between bg-slate-700 p-2 rounded"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-user text-green-400"></i> |
|
|
<span>Infantry Division</span> |
|
|
</div> |
|
|
<button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Train</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between bg-slate-700 p-2 rounded"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-tank text-red-400"></i> |
|
|
<span>Armored Division</span> |
|
|
</div> |
|
|
<button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Train</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between bg-slate-700 p-2 rounded"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-plane text-blue-400"></i> |
|
|
<span>Fighter Wing</span> |
|
|
</div> |
|
|
<button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Produce</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-bold mb-2">Deployments</h3> |
|
|
<div class="space-y-2 max-h-40 overflow-y-auto"> |
|
|
<div class="bg-slate-700 p-2 rounded text-sm"> |
|
|
<div class="font-semibold">1st Infantry Division</div> |
|
|
<div>Location: Washington</div> |
|
|
<div>Strength: 100%</div> |
|
|
</div> |
|
|
<div class="bg-slate-700 p-2 rounded text-sm"> |
|
|
<div class="font-semibold">2nd Armored Division</div> |
|
|
<div>Location: Texas</div> |
|
|
<div>Strength: 85%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="diplomacy-tab" class="tab-content hidden p-3 space-y-4"> |
|
|
<div> |
|
|
<h3 class="font-bold mb-2">Relations</h3> |
|
|
<div class="space-y-2 max-h-40 overflow-y-auto"> |
|
|
<div class="bg-slate-700 p-2 rounded"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>United Kingdom</span> |
|
|
<span class="text-green-400">+75</span> |
|
|
</div> |
|
|
<div class="diplomacy-relation-bar h-1 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
<div class="bg-slate-700 p-2 rounded"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Germany</span> |
|
|
<span class="text-yellow-400">-25</span> |
|
|
</div> |
|
|
<div class="diplomacy-relation-bar h-1 rounded-full" style="width: 25%"></div> |
|
|
</div> |
|
|
<div class="bg-slate-700 p-2 rounded"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span>Japan</span> |
|
|
<span class="text-red-400">-50</span> |
|
|
</div> |
|
|
<div class="diplomacy-relation-bar h-1 rounded-full" style="width: 10%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-bold mb-2">Actions</h3> |
|
|
<div class="space-y-2"> |
|
|
<button class="w-full py-1 bg-slate-700 rounded hover:bg-slate-600 text-sm"> |
|
|
<i class="fas fa-handshake"></i> Form Alliance |
|
|
</button> |
|
|
<button class="w-full py-1 bg-slate-700 rounded hover:bg-slate-600 text-sm"> |
|
|
<i class="fas fa-gavel"></i> Declare War |
|
|
</button> |
|
|
<button class="w-full py-1 bg-slate-700 rounded hover:bg-slate-600 text-sm"> |
|
|
<i class="fas fa-exchange-alt"></i> Trade Agreement |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 relative overflow-hidden"> |
|
|
<div id="map" class="map-container w-full h-full relative"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 bg-slate-800 bg-opacity-90 p-2 flex justify-between items-center border-t border-slate-700"> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="map-mode-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-globe-americas"></i> Political |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-chart-line"></i> Resources |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-industry"></i> Industry |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="tech-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-flask"></i> Research |
|
|
</button> |
|
|
<button id="decisions-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-clipboard-list"></i> Decisions |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="selected-info" class="absolute top-4 right-4 bg-slate-800 bg-opacity-90 p-3 rounded border border-slate-700 w-64 hidden"> |
|
|
<h3 id="selected-name" class="font-bold text-lg mb-2">Country Name</h3> |
|
|
<div class="text-sm space-y-1"> |
|
|
<div class="flex justify-between"> |
|
|
<span>Government:</span> |
|
|
<span id="selected-gov">Democracy</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Leader:</span> |
|
|
<span id="selected-leader">Leader Name</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Faction:</span> |
|
|
<span id="selected-faction">Allies</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Relation:</span> |
|
|
<span id="selected-relation" class="text-green-400">+50</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button id="declare-war-btn" class="flex-1 py-1 bg-red-600 rounded hover:bg-red-700 text-sm"> |
|
|
<i class="fas fa-gavel"></i> War |
|
|
</button> |
|
|
<button id="send-aid-btn" class="flex-1 py-1 bg-green-600 rounded hover:bg-green-700 text-sm"> |
|
|
<i class="fas fa-gift"></i> Aid |
|
|
</button> |
|
|
<button id="trade-btn" class="flex-1 py-1 bg-blue-600 rounded hover:bg-blue-700 text-sm"> |
|
|
<i class="fas fa-exchange-alt"></i> Trade |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notifications" class="absolute top-4 left-1/2 transform -translate-x-1/2 space-y-2"></div> |
|
|
|
|
|
|
|
|
<div id="tech-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-slate-800 rounded-lg w-4/5 h-4/5 p-4 flex flex-col"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">Research & Development</h2> |
|
|
<button id="close-tech-modal" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-1 overflow-auto relative"> |
|
|
<div id="tech-tree" class="relative" style="width: 2000px; height: 1200px;"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 bg-slate-700 p-2 rounded"> |
|
|
<div class="flex justify-between"> |
|
|
<span>Research Slots:</span> |
|
|
<span>2/3</span> |
|
|
</div> |
|
|
<div class="mt-2 grid grid-cols-3 gap-2"> |
|
|
<div class="bg-slate-600 p-2 rounded"> |
|
|
<div class="font-semibold">Basic Infantry Equipment</div> |
|
|
<div class="text-xs">Progress: 65%</div> |
|
|
<div class="h-1 bg-slate-500 rounded-full mt-1"> |
|
|
<div class="h-1 bg-blue-400 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-slate-600 p-2 rounded"> |
|
|
<div class="font-semibold">Improved Machine Tools</div> |
|
|
<div class="text-xs">Progress: 30%</div> |
|
|
<div class="h-1 bg-slate-500 rounded-full mt-1"> |
|
|
<div class="h-1 bg-blue-400 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-slate-600 p-2 rounded flex items-center justify-center"> |
|
|
<button class="px-3 py-1 bg-slate-500 rounded hover:bg-slate-400 text-sm"> |
|
|
<i class="fas fa-plus"></i> Assign Research |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="decisions-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-slate-800 rounded-lg w-2/3 h-2/3 p-4 flex flex-col"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold">National Decisions</h2> |
|
|
<button id="close-decisions-modal" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-1 overflow-auto grid grid-cols-2 gap-4"> |
|
|
<div class="bg-slate-700 p-3 rounded border border-amber-400"> |
|
|
<h3 class="font-bold text-amber-400 mb-2">Marshall Plan</h3> |
|
|
<p class="text-sm mb-3">Provide economic aid to war-torn nations to increase our influence and improve relations.</p> |
|
|
<div class="flex justify-between text-xs mb-2"> |
|
|
<span>Cost:</span> |
|
|
<span class="text-yellow-400">500 Money</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span>Duration:</span> |
|
|
<span>180 Days</span> |
|
|
</div> |
|
|
<button class="w-full mt-3 py-1 bg-amber-600 rounded hover:bg-amber-700 text-sm"> |
|
|
Enact Decision |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-slate-700 p-3 rounded border border-blue-400"> |
|
|
<h3 class="font-bold text-blue-400 mb-2">Naval Expansion Program</h3> |
|
|
<p class="text-sm mb-3">Invest heavily in our naval capabilities to secure dominance at sea.</p> |
|
|
<div class="flex justify-between text-xs mb-2"> |
|
|
<span>Cost:</span> |
|
|
<span class="text-yellow-400">300 Money, 200 Metal</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span>Duration:</span> |
|
|
<span>365 Days</span> |
|
|
</div> |
|
|
<button class="w-full mt-3 py-1 bg-blue-600 rounded hover:bg-blue-700 text-sm"> |
|
|
Enact Decision |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-slate-700 p-3 rounded border border-green-400"> |
|
|
<h3 class="font-bold text-green-400 mb-2">Agricultural Modernization</h3> |
|
|
<p class="text-sm mb-3">Implement modern farming techniques to increase food production.</p> |
|
|
<div class="flex justify-between text-xs mb-2"> |
|
|
<span>Cost:</span> |
|
|
<span class="text-yellow-400">200 Money</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span>Duration:</span> |
|
|
<span>90 Days</span> |
|
|
</div> |
|
|
<button class="w-full mt-3 py-1 bg-green-600 rounded hover:bg-green-700 text-sm"> |
|
|
Enact Decision |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-slate-700 p-3 rounded border border-red-400"> |
|
|
<h3 class="font-bold text-red-400 mb-2">Military Draft</h3> |
|
|
<p class="text-sm mb-3">Implement conscription to increase available manpower, but may decrease stability.</p> |
|
|
<div class="flex justify-between text-xs mb-2"> |
|
|
<span>Cost:</span> |
|
|
<span class="text-yellow-400">100 Money</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span>Duration:</span> |
|
|
<span>Permanent</span> |
|
|
</div> |
|
|
<button class="w-full mt-3 py-1 bg-red-600 rounded hover:bg-red-700 text-sm"> |
|
|
Enact Decision |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tooltip" class="tooltip"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const gameState = { |
|
|
date: new Date(1936, 0, 1), |
|
|
speed: 1, |
|
|
resources: { |
|
|
money: 1000, |
|
|
energy: 500, |
|
|
oil: 200, |
|
|
metal: 300, |
|
|
food: 400, |
|
|
manpower: 1000000 |
|
|
}, |
|
|
playerNation: 'United States', |
|
|
selectedCountry: null, |
|
|
countries: [ |
|
|
{ id: 'usa', name: 'United States', color: '#3b82f6', government: 'Democracy', leader: 'Franklin D. Roosevelt', faction: 'Allies', relation: 0, x: 25, y: 40, width: 15, height: 20 }, |
|
|
{ id: 'uk', name: 'United Kingdom', color: '#ef4444', government: 'Democracy', leader: 'Winston Churchill', faction: 'Allies', relation: 75, x: 48, y: 30, width: 8, height: 10 }, |
|
|
{ id: 'germany', name: 'Germany', color: '#64748b', government: 'Fascism', leader: 'Adolf Hitler', faction: 'Axis', relation: -25, x: 52, y: 35, width: 8, height: 8 }, |
|
|
{ id: 'ussr', name: 'Soviet Union', color: '#dc2626', government: 'Communism', leader: 'Joseph Stalin', faction: 'Comintern', relation: -10, x: 60, y: 30, width: 20, height: 20 }, |
|
|
{ id: |
|
|
</html> |
