Hugging Face's logo

Spaces:
exlement
/
hzigra
Running

App Files Community
exlement commited on
Commit
12ada38
·
verified ·
1 Parent(s): 9e3ddcd

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +594 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hzigra
3
- emoji: 👀
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hzigra
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,594 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Global Strategy: World Domination</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Roboto', sans-serif;
14
+ background-color: #0f172a;
15
+ color: #e2e8f0;
16
+ overflow: hidden;
17
+ user-select: none;
18
+ }
19
+
20
+ .map-container {
21
+ background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-_low_resolution.svg/1200px-World_map_-_low_resolution.svg.png');
22
+ background-size: cover;
23
+ background-position: center;
24
+ image-rendering: pixelated;
25
+ }
26
+
27
+ .country {
28
+ position: absolute;
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ transition: all 0.3s ease;
31
+ cursor: pointer;
32
+ }
33
+
34
+ .country:hover {
35
+ filter: brightness(1.2);
36
+ transform: scale(1.02);
37
+ z-index: 10;
38
+ }
39
+
40
+ .unit {
41
+ position: absolute;
42
+ width: 12px;
43
+ height: 12px;
44
+ border-radius: 50%;
45
+ z-index: 5;
46
+ pointer-events: none;
47
+ }
48
+
49
+ .notification {
50
+ animation: slideIn 0.3s forwards;
51
+ }
52
+
53
+ @keyframes slideIn {
54
+ from { transform: translateX(100%); opacity: 0; }
55
+ to { transform: translateX(0); opacity: 1; }
56
+ }
57
+
58
+ .combat-animation {
59
+ animation: pulse 0.5s infinite alternate;
60
+ }
61
+
62
+ @keyframes pulse {
63
+ from { box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
64
+ to { box-shadow: 0 0 15px rgba(255, 0, 0, 0.8); }
65
+ }
66
+
67
+ .diplomacy-relation-bar {
68
+ height: 4px;
69
+ background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
70
+ }
71
+
72
+ .tech-node {
73
+ position: relative;
74
+ width: 80px;
75
+ height: 80px;
76
+ border-radius: 50%;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ cursor: pointer;
81
+ transition: all 0.2s;
82
+ }
83
+
84
+ .tech-node:hover {
85
+ transform: scale(1.1);
86
+ }
87
+
88
+ .tech-line {
89
+ position: absolute;
90
+ height: 2px;
91
+ background-color: #4b5563;
92
+ z-index: -1;
93
+ }
94
+
95
+ .tooltip {
96
+ position: absolute;
97
+ z-index: 100;
98
+ background-color: #1e293b;
99
+ border: 1px solid #334155;
100
+ padding: 8px;
101
+ border-radius: 4px;
102
+ pointer-events: none;
103
+ opacity: 0;
104
+ transition: opacity 0.2s;
105
+ max-width: 300px;
106
+ }
107
+
108
+ .combat-arrow {
109
+ position: absolute;
110
+ height: 2px;
111
+ background-color: #ef4444;
112
+ z-index: 4;
113
+ transform-origin: left center;
114
+ }
115
+
116
+ .combat-arrow::after {
117
+ content: '';
118
+ position: absolute;
119
+ right: -5px;
120
+ top: -4px;
121
+ width: 0;
122
+ height: 0;
123
+ border-left: 5px solid #ef4444;
124
+ border-top: 5px solid transparent;
125
+ border-bottom: 5px solid transparent;
126
+ }
127
+ </style>
128
+ </head>
129
+ <body class="h-screen flex flex-col">
130
+ <!-- Top Bar -->
131
+ <div class="bg-slate-800 p-2 flex justify-between items-center border-b border-slate-700">
132
+ <div class="flex items-center space-x-4">
133
+ <h1 class="text-xl font-bold text-amber-400">GLOBAL STRATEGY</h1>
134
+ <div class="flex space-x-2">
135
+ <button id="pause-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
136
+ <i class="fas fa-pause"></i> Pause
137
+ </button>
138
+ <button id="speed-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
139
+ <i class="fas fa-forward"></i> Speed: 1x
140
+ </button>
141
+ <div class="px-3 py-1 bg-slate-700 rounded">
142
+ <i class="far fa-calendar-alt"></i> <span id="game-date">1936.1.1</span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <div class="flex items-center space-x-6">
147
+ <div class="flex items-center space-x-2">
148
+ <i class="fas fa-coins text-yellow-400"></i>
149
+ <span id="money-counter">1000</span>
150
+ </div>
151
+ <div class="flex items-center space-x-2">
152
+ <i class="fas fa-bolt text-blue-400"></i>
153
+ <span id="energy-counter">500</span>
154
+ </div>
155
+ <div class="flex items-center space-x-2">
156
+ <i class="fas fa-gas-pump text-red-400"></i>
157
+ <span id="oil-counter">200</span>
158
+ </div>
159
+ <div class="flex items-center space-x-2">
160
+ <i class="fas fa-cube text-gray-400"></i>
161
+ <span id="metal-counter">300</span>
162
+ </div>
163
+ <div class="flex items-center space-x-2">
164
+ <i class="fas fa-utensils text-green-400"></i>
165
+ <span id="food-counter">400</span>
166
+ </div>
167
+ <div class="flex items-center space-x-2">
168
+ <i class="fas fa-user text-amber-400"></i>
169
+ <span id="manpower-counter">1000K</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Main Content -->
175
+ <div class="flex flex-1 overflow-hidden">
176
+ <!-- Left Sidebar -->
177
+ <div class="w-64 bg-slate-800 border-r border-slate-700 flex flex-col">
178
+ <div class="p-3 border-b border-slate-700">
179
+ <h2 class="font-bold text-lg mb-2">Nation: <span id="player-nation" class="text-amber-400">United States</span></h2>
180
+ <div class="flex justify-between text-sm">
181
+ <div>
182
+ <div>Stability: <span class="text-green-400">75%</span></div>
183
+ <div>War Support: <span class="text-yellow-400">60%</span></div>
184
+ </div>
185
+ <div>
186
+ <div>Factories: <span>45</span></div>
187
+ <div>Dockyards: <span>12</span></div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Tabs -->
193
+ <div class="flex border-b border-slate-700">
194
+ <button data-tab="country" class="tab-btn flex-1 py-2 bg-slate-700 text-amber-400">
195
+ <i class="fas fa-flag"></i> Country
196
+ </button>
197
+ <button data-tab="military" class="tab-btn flex-1 py-2 hover:bg-slate-700">
198
+ <i class="fas fa-tank"></i> Military
199
+ </button>
200
+ <button data-tab="diplomacy" class="tab-btn flex-1 py-2 hover:bg-slate-700">
201
+ <i class="fas fa-handshake"></i> Diplomacy
202
+ </button>
203
+ </div>
204
+
205
+ <!-- Tab Content -->
206
+ <div class="flex-1 overflow-y-auto">
207
+ <!-- Country Tab -->
208
+ <div id="country-tab" class="tab-content p-3 space-y-4">
209
+ <div>
210
+ <h3 class="font-bold mb-2">Government</h3>
211
+ <div class="bg-slate-700 p-2 rounded">
212
+ <div class="flex justify-between text-sm mb-1">
213
+ <span>Ideology:</span>
214
+ <span class="text-amber-400">Democracy</span>
215
+ </div>
216
+ <div class="flex justify-between text-sm mb-1">
217
+ <span>Leader:</span>
218
+ <span>Franklin D. Roosevelt</span>
219
+ </div>
220
+ <div class="flex justify-between text-sm">
221
+ <span>Party:</span>
222
+ <span>Democratic Party</span>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <div>
228
+ <h3 class="font-bold mb-2">Construction</h3>
229
+ <div class="space-y-2">
230
+ <div class="flex items-center justify-between bg-slate-700 p-2 rounded">
231
+ <div class="flex items-center space-x-2">
232
+ <i class="fas fa-industry text-blue-400"></i>
233
+ <span>Civilian Factory</span>
234
+ </div>
235
+ <button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Build</button>
236
+ </div>
237
+ <div class="flex items-center justify-between bg-slate-700 p-2 rounded">
238
+ <div class="flex items-center space-x-2">
239
+ <i class="fas fa-hard-hat text-red-400"></i>
240
+ <span>Military Factory</span>
241
+ </div>
242
+ <button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Build</button>
243
+ </div>
244
+ <div class="flex items-center justify-between bg-slate-700 p-2 rounded">
245
+ <div class="flex items-center space-x-2">
246
+ <i class="fas fa-ship text-cyan-400"></i>
247
+ <span>Naval Dockyard</span>
248
+ </div>
249
+ <button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Build</button>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <div>
255
+ <h3 class="font-bold mb-2">Production</h3>
256
+ <div class="bg-slate-700 p-2 rounded">
257
+ <div class="flex justify-between text-sm mb-1">
258
+ <span>Civilian Factories:</span>
259
+ <span>30</span>
260
+ </div>
261
+ <div class="flex justify-between text-sm mb-1">
262
+ <span>Military Factories:</span>
263
+ <span>15</span>
264
+ </div>
265
+ <div class="flex justify-between text-sm">
266
+ <span>Naval Dockyards:</span>
267
+ <span>12</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Military Tab -->
274
+ <div id="military-tab" class="tab-content hidden p-3 space-y-4">
275
+ <div>
276
+ <h3 class="font-bold mb-2">Army</h3>
277
+ <div class="bg-slate-700 p-2 rounded">
278
+ <div class="flex justify-between text-sm mb-1">
279
+ <span>Divisions:</span>
280
+ <span>24</span>
281
+ </div>
282
+ <div class="flex justify-between text-sm mb-1">
283
+ <span>Manpower:</span>
284
+ <span>1,200,000</span>
285
+ </div>
286
+ <div class="flex justify-between text-sm">
287
+ <span>Equipment:</span>
288
+ <span>85%</span>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div>
294
+ <h3 class="font-bold mb-2">Recruitment</h3>
295
+ <div class="space-y-2">
296
+ <div class="flex items-center justify-between bg-slate-700 p-2 rounded">
297
+ <div class="flex items-center space-x-2">
298
+ <i class="fas fa-user text-green-400"></i>
299
+ <span>Infantry Division</span>
300
+ </div>
301
+ <button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Train</button>
302
+ </div>
303
+ <div class="flex items-center justify-between bg-slate-700 p-2 rounded">
304
+ <div class="flex items-center space-x-2">
305
+ <i class="fas fa-tank text-red-400"></i>
306
+ <span>Armored Division</span>
307
+ </div>
308
+ <button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Train</button>
309
+ </div>
310
+ <div class="flex items-center justify-between bg-slate-700 p-2 rounded">
311
+ <div class="flex items-center space-x-2">
312
+ <i class="fas fa-plane text-blue-400"></i>
313
+ <span>Fighter Wing</span>
314
+ </div>
315
+ <button class="px-2 py-1 bg-slate-600 rounded hover:bg-slate-500 text-xs">Produce</button>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <div>
321
+ <h3 class="font-bold mb-2">Deployments</h3>
322
+ <div class="space-y-2 max-h-40 overflow-y-auto">
323
+ <div class="bg-slate-700 p-2 rounded text-sm">
324
+ <div class="font-semibold">1st Infantry Division</div>
325
+ <div>Location: Washington</div>
326
+ <div>Strength: 100%</div>
327
+ </div>
328
+ <div class="bg-slate-700 p-2 rounded text-sm">
329
+ <div class="font-semibold">2nd Armored Division</div>
330
+ <div>Location: Texas</div>
331
+ <div>Strength: 85%</div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Diplomacy Tab -->
338
+ <div id="diplomacy-tab" class="tab-content hidden p-3 space-y-4">
339
+ <div>
340
+ <h3 class="font-bold mb-2">Relations</h3>
341
+ <div class="space-y-2 max-h-40 overflow-y-auto">
342
+ <div class="bg-slate-700 p-2 rounded">
343
+ <div class="flex justify-between mb-1">
344
+ <span>United Kingdom</span>
345
+ <span class="text-green-400">+75</span>
346
+ </div>
347
+ <div class="diplomacy-relation-bar h-1 rounded-full" style="width: 75%"></div>
348
+ </div>
349
+ <div class="bg-slate-700 p-2 rounded">
350
+ <div class="flex justify-between mb-1">
351
+ <span>Germany</span>
352
+ <span class="text-yellow-400">-25</span>
353
+ </div>
354
+ <div class="diplomacy-relation-bar h-1 rounded-full" style="width: 25%"></div>
355
+ </div>
356
+ <div class="bg-slate-700 p-2 rounded">
357
+ <div class="flex justify-between mb-1">
358
+ <span>Japan</span>
359
+ <span class="text-red-400">-50</span>
360
+ </div>
361
+ <div class="diplomacy-relation-bar h-1 rounded-full" style="width: 10%"></div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <div>
367
+ <h3 class="font-bold mb-2">Actions</h3>
368
+ <div class="space-y-2">
369
+ <button class="w-full py-1 bg-slate-700 rounded hover:bg-slate-600 text-sm">
370
+ <i class="fas fa-handshake"></i> Form Alliance
371
+ </button>
372
+ <button class="w-full py-1 bg-slate-700 rounded hover:bg-slate-600 text-sm">
373
+ <i class="fas fa-gavel"></i> Declare War
374
+ </button>
375
+ <button class="w-full py-1 bg-slate-700 rounded hover:bg-slate-600 text-sm">
376
+ <i class="fas fa-exchange-alt"></i> Trade Agreement
377
+ </button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Main Map Area -->
385
+ <div class="flex-1 relative overflow-hidden">
386
+ <div id="map" class="map-container w-full h-full relative">
387
+ <!-- Countries will be dynamically added here -->
388
+ </div>
389
+
390
+ <!-- Bottom Toolbar -->
391
+ <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">
392
+ <div class="flex space-x-2">
393
+ <button id="map-mode-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
394
+ <i class="fas fa-globe-americas"></i> Political
395
+ </button>
396
+ <button class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
397
+ <i class="fas fa-chart-line"></i> Resources
398
+ </button>
399
+ <button class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
400
+ <i class="fas fa-industry"></i> Industry
401
+ </button>
402
+ </div>
403
+ <div class="flex space-x-2">
404
+ <button id="tech-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
405
+ <i class="fas fa-flask"></i> Research
406
+ </button>
407
+ <button id="decisions-btn" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
408
+ <i class="fas fa-clipboard-list"></i> Decisions
409
+ </button>
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Selected Country Info -->
414
+ <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">
415
+ <h3 id="selected-name" class="font-bold text-lg mb-2">Country Name</h3>
416
+ <div class="text-sm space-y-1">
417
+ <div class="flex justify-between">
418
+ <span>Government:</span>
419
+ <span id="selected-gov">Democracy</span>
420
+ </div>
421
+ <div class="flex justify-between">
422
+ <span>Leader:</span>
423
+ <span id="selected-leader">Leader Name</span>
424
+ </div>
425
+ <div class="flex justify-between">
426
+ <span>Faction:</span>
427
+ <span id="selected-faction">Allies</span>
428
+ </div>
429
+ <div class="flex justify-between">
430
+ <span>Relation:</span>
431
+ <span id="selected-relation" class="text-green-400">+50</span>
432
+ </div>
433
+ </div>
434
+ <div class="mt-3 flex space-x-2">
435
+ <button id="declare-war-btn" class="flex-1 py-1 bg-red-600 rounded hover:bg-red-700 text-sm">
436
+ <i class="fas fa-gavel"></i> War
437
+ </button>
438
+ <button id="send-aid-btn" class="flex-1 py-1 bg-green-600 rounded hover:bg-green-700 text-sm">
439
+ <i class="fas fa-gift"></i> Aid
440
+ </button>
441
+ <button id="trade-btn" class="flex-1 py-1 bg-blue-600 rounded hover:bg-blue-700 text-sm">
442
+ <i class="fas fa-exchange-alt"></i> Trade
443
+ </button>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Notifications -->
448
+ <div id="notifications" class="absolute top-4 left-1/2 transform -translate-x-1/2 space-y-2"></div>
449
+
450
+ <!-- Technology Tree Modal -->
451
+ <div id="tech-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
452
+ <div class="bg-slate-800 rounded-lg w-4/5 h-4/5 p-4 flex flex-col">
453
+ <div class="flex justify-between items-center mb-4">
454
+ <h2 class="text-xl font-bold">Research & Development</h2>
455
+ <button id="close-tech-modal" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
456
+ <i class="fas fa-times"></i>
457
+ </button>
458
+ </div>
459
+ <div class="flex-1 overflow-auto relative">
460
+ <div id="tech-tree" class="relative" style="width: 2000px; height: 1200px;">
461
+ <!-- Technology nodes will be added here -->
462
+ </div>
463
+ </div>
464
+ <div class="mt-4 bg-slate-700 p-2 rounded">
465
+ <div class="flex justify-between">
466
+ <span>Research Slots:</span>
467
+ <span>2/3</span>
468
+ </div>
469
+ <div class="mt-2 grid grid-cols-3 gap-2">
470
+ <div class="bg-slate-600 p-2 rounded">
471
+ <div class="font-semibold">Basic Infantry Equipment</div>
472
+ <div class="text-xs">Progress: 65%</div>
473
+ <div class="h-1 bg-slate-500 rounded-full mt-1">
474
+ <div class="h-1 bg-blue-400 rounded-full" style="width: 65%"></div>
475
+ </div>
476
+ </div>
477
+ <div class="bg-slate-600 p-2 rounded">
478
+ <div class="font-semibold">Improved Machine Tools</div>
479
+ <div class="text-xs">Progress: 30%</div>
480
+ <div class="h-1 bg-slate-500 rounded-full mt-1">
481
+ <div class="h-1 bg-blue-400 rounded-full" style="width: 30%"></div>
482
+ </div>
483
+ </div>
484
+ <div class="bg-slate-600 p-2 rounded flex items-center justify-center">
485
+ <button class="px-3 py-1 bg-slate-500 rounded hover:bg-slate-400 text-sm">
486
+ <i class="fas fa-plus"></i> Assign Research
487
+ </button>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- Decisions Modal -->
495
+ <div id="decisions-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
496
+ <div class="bg-slate-800 rounded-lg w-2/3 h-2/3 p-4 flex flex-col">
497
+ <div class="flex justify-between items-center mb-4">
498
+ <h2 class="text-xl font-bold">National Decisions</h2>
499
+ <button id="close-decisions-modal" class="px-3 py-1 bg-slate-700 rounded hover:bg-slate-600">
500
+ <i class="fas fa-times"></i>
501
+ </button>
502
+ </div>
503
+ <div class="flex-1 overflow-auto grid grid-cols-2 gap-4">
504
+ <div class="bg-slate-700 p-3 rounded border border-amber-400">
505
+ <h3 class="font-bold text-amber-400 mb-2">Marshall Plan</h3>
506
+ <p class="text-sm mb-3">Provide economic aid to war-torn nations to increase our influence and improve relations.</p>
507
+ <div class="flex justify-between text-xs mb-2">
508
+ <span>Cost:</span>
509
+ <span class="text-yellow-400">500 Money</span>
510
+ </div>
511
+ <div class="flex justify-between text-xs">
512
+ <span>Duration:</span>
513
+ <span>180 Days</span>
514
+ </div>
515
+ <button class="w-full mt-3 py-1 bg-amber-600 rounded hover:bg-amber-700 text-sm">
516
+ Enact Decision
517
+ </button>
518
+ </div>
519
+ <div class="bg-slate-700 p-3 rounded border border-blue-400">
520
+ <h3 class="font-bold text-blue-400 mb-2">Naval Expansion Program</h3>
521
+ <p class="text-sm mb-3">Invest heavily in our naval capabilities to secure dominance at sea.</p>
522
+ <div class="flex justify-between text-xs mb-2">
523
+ <span>Cost:</span>
524
+ <span class="text-yellow-400">300 Money, 200 Metal</span>
525
+ </div>
526
+ <div class="flex justify-between text-xs">
527
+ <span>Duration:</span>
528
+ <span>365 Days</span>
529
+ </div>
530
+ <button class="w-full mt-3 py-1 bg-blue-600 rounded hover:bg-blue-700 text-sm">
531
+ Enact Decision
532
+ </button>
533
+ </div>
534
+ <div class="bg-slate-700 p-3 rounded border border-green-400">
535
+ <h3 class="font-bold text-green-400 mb-2">Agricultural Modernization</h3>
536
+ <p class="text-sm mb-3">Implement modern farming techniques to increase food production.</p>
537
+ <div class="flex justify-between text-xs mb-2">
538
+ <span>Cost:</span>
539
+ <span class="text-yellow-400">200 Money</span>
540
+ </div>
541
+ <div class="flex justify-between text-xs">
542
+ <span>Duration:</span>
543
+ <span>90 Days</span>
544
+ </div>
545
+ <button class="w-full mt-3 py-1 bg-green-600 rounded hover:bg-green-700 text-sm">
546
+ Enact Decision
547
+ </button>
548
+ </div>
549
+ <div class="bg-slate-700 p-3 rounded border border-red-400">
550
+ <h3 class="font-bold text-red-400 mb-2">Military Draft</h3>
551
+ <p class="text-sm mb-3">Implement conscription to increase available manpower, but may decrease stability.</p>
552
+ <div class="flex justify-between text-xs mb-2">
553
+ <span>Cost:</span>
554
+ <span class="text-yellow-400">100 Money</span>
555
+ </div>
556
+ <div class="flex justify-between text-xs">
557
+ <span>Duration:</span>
558
+ <span>Permanent</span>
559
+ </div>
560
+ <button class="w-full mt-3 py-1 bg-red-600 rounded hover:bg-red-700 text-sm">
561
+ Enact Decision
562
+ </button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+
568
+ <!-- Tooltip -->
569
+ <div id="tooltip" class="tooltip"></div>
570
+ </div>
571
+ </div>
572
+
573
+ <script>
574
+ // Game State
575
+ const gameState = {
576
+ date: new Date(1936, 0, 1),
577
+ speed: 1, // 0 = paused, 1 = normal, 2 = fast, 3 = very fast
578
+ resources: {
579
+ money: 1000,
580
+ energy: 500,
581
+ oil: 200,
582
+ metal: 300,
583
+ food: 400,
584
+ manpower: 1000000
585
+ },
586
+ playerNation: 'United States',
587
+ selectedCountry: null,
588
+ countries: [
589
+ { 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 },
590
+ { id: 'uk', name: 'United Kingdom', color: '#ef4444', government: 'Democracy', leader: 'Winston Churchill', faction: 'Allies', relation: 75, x: 48, y: 30, width: 8, height: 10 },
591
+ { id: 'germany', name: 'Germany', color: '#64748b', government: 'Fascism', leader: 'Adolf Hitler', faction: 'Axis', relation: -25, x: 52, y: 35, width: 8, height: 8 },
592
+ { id: 'ussr', name: 'Soviet Union', color: '#dc2626', government: 'Communism', leader: 'Joseph Stalin', faction: 'Comintern', relation: -10, x: 60, y: 30, width: 20, height: 20 },
593
+ { id:
594
+ </html>