Hugging Face's logo

Spaces:
zdwalter
/
mount-blade
Running

App Files Community
zdwalter commited on
Commit
6fba95d
·
verified ·
1 Parent(s): 7285f0c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +651 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mount Blade
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: mount-blade
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,651 @@
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>Warband Chronicles II</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=Cinzel:wght@400;700&family=MedievalSharp&display=swap');
11
+
12
+ body {
13
+ font-family: 'Cinzel', serif;
14
+ background-color: #0a0a0a;
15
+ color: #e0d4b0;
16
+ overflow: hidden;
17
+ height: 100vh;
18
+ }
19
+
20
+ .medieval-font {
21
+ font-family: 'MedievalSharp', cursive;
22
+ }
23
+
24
+ .game-container {
25
+ background-image: url('https://images.unsplash.com/photo-1518364538800-6bae7c3f0b56?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
26
+ background-size: cover;
27
+ background-position: center;
28
+ height: 100vh;
29
+ position: relative;
30
+ }
31
+
32
+ .character-card {
33
+ background: rgba(10, 10, 10, 0.7);
34
+ border: 2px solid #5d3a1a;
35
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
36
+ }
37
+
38
+ .health-bar {
39
+ height: 10px;
40
+ background: linear-gradient(to right, #8b0000, #ff0000);
41
+ border-radius: 5px;
42
+ }
43
+
44
+ .map-container {
45
+ background: rgba(20, 20, 20, 0.8);
46
+ border: 2px solid #5d3a1a;
47
+ border-radius: 8px;
48
+ }
49
+
50
+ .map-location {
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .map-location:hover {
55
+ transform: scale(1.1);
56
+ filter: drop-shadow(0 0 5px gold);
57
+ }
58
+
59
+ .combat-log {
60
+ background: rgba(0, 0, 0, 0.7);
61
+ border: 1px solid #5d3a1a;
62
+ max-height: 200px;
63
+ overflow-y: auto;
64
+ }
65
+
66
+ .combat-log::-webkit-scrollbar {
67
+ width: 8px;
68
+ }
69
+
70
+ .combat-log::-webkit-scrollbar-thumb {
71
+ background: #5d3a1a;
72
+ border-radius: 4px;
73
+ }
74
+
75
+ .faction-banner {
76
+ background-size: contain;
77
+ background-repeat: no-repeat;
78
+ background-position: center;
79
+ height: 60px;
80
+ width: 80px;
81
+ }
82
+
83
+ .button-gold {
84
+ background: linear-gradient(to bottom, #d4af37, #a67c00);
85
+ color: #1a1a1a;
86
+ border: 1px solid #ffd700;
87
+ transition: all 0.2s;
88
+ }
89
+
90
+ .button-gold:hover {
91
+ background: linear-gradient(to bottom, #ffd700, #d4af37);
92
+ transform: translateY(-2px);
93
+ box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
94
+ }
95
+
96
+ .modal-overlay {
97
+ background: rgba(0, 0, 0, 0.8);
98
+ }
99
+
100
+ .modal-content {
101
+ background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
102
+ border: 2px solid #5d3a1a;
103
+ box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
104
+ }
105
+
106
+ @keyframes swordSwing {
107
+ 0% { transform: rotate(0deg); }
108
+ 25% { transform: rotate(45deg); }
109
+ 50% { transform: rotate(0deg); }
110
+ 75% { transform: rotate(-45deg); }
111
+ 100% { transform: rotate(0deg); }
112
+ }
113
+
114
+ .sword-animation {
115
+ animation: swordSwing 0.5s ease-in-out;
116
+ }
117
+
118
+ .party-member:hover {
119
+ transform: translateX(5px);
120
+ background: rgba(90, 70, 30, 0.3);
121
+ }
122
+ </style>
123
+ </head>
124
+ <body>
125
+ <div class="game-container flex flex-col h-full">
126
+ <!-- Top Bar -->
127
+ <div class="flex justify-between items-center p-4 bg-black bg-opacity-70 border-b border-amber-800">
128
+ <div class="flex items-center space-x-4">
129
+ <div class="text-amber-400 text-xl">
130
+ <i class="fas fa-coins mr-2"></i>
131
+ <span id="gold">5,250</span> denars
132
+ </div>
133
+ <div class="text-green-400 text-xl">
134
+ <i class="fas fa-users mr-2"></i>
135
+ <span id="party-size">15</span>/<span id="party-capacity">30</span>
136
+ </div>
137
+ <div class="text-red-400 text-xl">
138
+ <i class="fas fa-heart mr-2"></i>
139
+ <span id="renown">1,250</span> renown
140
+ </div>
141
+ </div>
142
+
143
+ <div class="text-2xl font-bold text-amber-300 medieval-font">
144
+ WARBAND CHRONICLES II
145
+ </div>
146
+
147
+ <div class="flex items-center space-x-4">
148
+ <div class="text-blue-400 text-xl">
149
+ <i class="fas fa-calendar-day mr-2"></i>
150
+ Day <span id="day">127</span>, Spring <span id="year">1085</span>
151
+ </div>
152
+ <button id="menu-btn" class="button-gold px-4 py-2 rounded font-bold">
153
+ <i class="fas fa-bars mr-2"></i>Menu
154
+ </button>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Main Content -->
159
+ <div class="flex flex-1 overflow-hidden">
160
+ <!-- Left Sidebar - Character Info -->
161
+ <div class="w-64 bg-black bg-opacity-60 border-r border-amber-800 p-4 flex flex-col">
162
+ <div class="character-card p-4 rounded-lg mb-4">
163
+ <div class="flex justify-between items-center mb-2">
164
+ <h3 class="text-xl font-bold text-amber-300">Lord Edric</h3>
165
+ <span class="text-sm bg-amber-900 px-2 py-1 rounded">Level 12</span>
166
+ </div>
167
+
168
+ <div class="flex justify-center mb-4">
169
+ <div class="relative">
170
+ <img src="https://i.imgur.com/JQHq3Wm.png" alt="Character" class="w-32 h-32 rounded-full border-2 border-amber-600">
171
+ <div class="absolute -bottom-2 left-0 right-0 flex justify-center">
172
+ <div class="bg-amber-800 px-2 py-1 rounded-full text-xs">
173
+ <i class="fas fa-shield-alt mr-1"></i> 45
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="mb-2">
180
+ <div class="flex justify-between text-sm mb-1">
181
+ <span>Health</span>
182
+ <span>78/100</span>
183
+ </div>
184
+ <div class="health-bar rounded-full w-full"></div>
185
+ </div>
186
+
187
+ <div class="mb-2">
188
+ <div class="flex justify-between text-sm mb-1">
189
+ <span>Stamina</span>
190
+ <span>45/100</span>
191
+ </div>
192
+ <div class="bg-gray-700 rounded-full w-full h-2">
193
+ <div class="bg-blue-600 rounded-full h-2" style="width: 45%"></div>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="grid grid-cols-2 gap-2 mt-4">
198
+ <div class="text-center">
199
+ <div class="text-amber-300 font-bold">Strength</div>
200
+ <div class="text-xl">24</div>
201
+ </div>
202
+ <div class="text-center">
203
+ <div class="text-amber-300 font-bold">Agility</div>
204
+ <div class="text-xl">18</div>
205
+ </div>
206
+ <div class="text-center">
207
+ <div class="text-amber-300 font-bold">Intelligence</div>
208
+ <div class="text-xl">15</div>
209
+ </div>
210
+ <div class="text-center">
211
+ <div class="text-amber-300 font-bold">Charisma</div>
212
+ <div class="text-xl">22</div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="character-card p-4 rounded-lg mb-4">
218
+ <h4 class="text-lg font-bold text-amber-300 mb-2">Equipment</h4>
219
+ <div class="grid grid-cols-3 gap-2 text-center">
220
+ <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800">
221
+ <i class="fas fa-helmet-battle text-2xl mb-1"></i>
222
+ <div class="text-xs">Imperial Helmet</div>
223
+ </div>
224
+ <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800">
225
+ <i class="fas fa-vest text-2xl mb-1"></i>
226
+ <div class="text-xs">Lamellar Armor</div>
227
+ </div>
228
+ <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800">
229
+ <i class="fas fa-boot text-2xl mb-1"></i>
230
+ <div class="text-xs">Leather Boots</div>
231
+ </div>
232
+ <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800">
233
+ <i class="fas fa-sword text-2xl mb-1"></i>
234
+ <div class="text-xs">Longsword</div>
235
+ </div>
236
+ <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800">
237
+ <i class="fas fa-shield-alt text-2xl mb-1"></i>
238
+ <div class="text-xs">Kite Shield</div>
239
+ </div>
240
+ <div class="p-2 bg-amber-900 bg-opacity-30 rounded cursor-pointer hover:bg-amber-800">
241
+ <i class="fas fa-horse text-2xl mb-1"></i>
242
+ <div class="text-xs">War Horse</div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="character-card p-4 rounded-lg flex-1">
248
+ <h4 class="text-lg font-bold text-amber-300 mb-2">Party Members</h4>
249
+ <div class="space-y-2 max-h-48 overflow-y-auto">
250
+ <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition">
251
+ <img src="https://i.imgur.com/3QZ2J9W.png" class="w-8 h-8 rounded-full mr-2">
252
+ <div class="flex-1">
253
+ <div class="font-bold text-sm">Alistair</div>
254
+ <div class="text-xs text-gray-400">Veteran Infantry</div>
255
+ </div>
256
+ <div class="text-xs bg-red-900 px-1 rounded">Lvl 8</div>
257
+ </div>
258
+ <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition">
259
+ <img src="https://i.imgur.com/5X3Wm9J.png" class="w-8 h-8 rounded-full mr-2">
260
+ <div class="flex-1">
261
+ <div class="font-bold text-sm">Rowena</div>
262
+ <div class="text-xs text-gray-400">Archer</div>
263
+ </div>
264
+ <div class="text-xs bg-red-900 px-1 rounded">Lvl 6</div>
265
+ </div>
266
+ <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition">
267
+ <img src="https://i.imgur.com/JQHq3Wm.png" class="w-8 h-8 rounded-full mr-2">
268
+ <div class="flex-1">
269
+ <div class="font-bold text-sm">Gareth</div>
270
+ <div class="text-xs text-gray-400">Cavalry</div>
271
+ </div>
272
+ <div class="text-xs bg-red-900 px-1 rounded">Lvl 5</div>
273
+ </div>
274
+ <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition">
275
+ <img src="https://i.imgur.com/3QZ2J9W.png" class="w-8 h-8 rounded-full mr-2">
276
+ <div class="flex-1">
277
+ <div class="font-bold text-sm">Brogan</div>
278
+ <div class="text-xs text-gray-400">Infantry</div>
279
+ </div>
280
+ <div class="text-xs bg-red-900 px-1 rounded">Lvl 4</div>
281
+ </div>
282
+ <div class="party-member flex items-center p-2 bg-amber-900 bg-opacity-20 rounded cursor-pointer transition">
283
+ <img src="https://i.imgur.com/5X3Wm9J.png" class="w-8 h-8 rounded-full mr-2">
284
+ <div class="flex-1">
285
+ <div class="font-bold text-sm">Elara</div>
286
+ <div class="text-xs text-gray-400">Healer</div>
287
+ </div>
288
+ <div class="text-xs bg-red-900 px-1 rounded">Lvl 7</div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Main Game Area -->
295
+ <div class="flex-1 flex flex-col p-4 overflow-hidden">
296
+ <!-- Map and Combat Area -->
297
+ <div class="flex-1 flex">
298
+ <!-- World Map -->
299
+ <div class="map-container flex-1 mr-4 p-4 relative">
300
+ <div class="absolute top-4 left-4 z-10">
301
+ <h3 class="text-xl font-bold text-amber-300 mb-2">Calradia</h3>
302
+ <div class="text-sm">Current Location: <span class="text-amber-300">Praven</span></div>
303
+ </div>
304
+
305
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
306
+ <img src="https://i.imgur.com/Vx5wV0p.png" alt="Calradia Map" class="w-full h-full opacity-70">
307
+
308
+ <!-- Map Locations -->
309
+ <div class="absolute top-[30%] left-[25%] map-location cursor-pointer" title="Praven">
310
+ <div class="w-4 h-4 bg-red-600 rounded-full border-2 border-white"></div>
311
+ <div class="text-xs bg-black bg-opacity-70 px-1 rounded mt-1">Praven</div>
312
+ </div>
313
+ <div class="absolute top-[40%] left-[50%] map-location cursor-pointer" title="Dhirim">
314
+ <div class="w-4 h-4 bg-blue-600 rounded-full border-2 border-white"></div>
315
+ <div class="text-xs bg-black bg-opacity-70 px-1 rounded mt-1">Dhirim</div>
316
+ </div>
317
+ <div class="absolute top-[60%] left-[35%] map-location cursor-pointer" title="Reyvadin">
318
+ <div class="w-4 h-4 bg-green-600 rounded-full border-2 border-white"></div>
319
+ <div class="text-xs bg-black bg-opacity-70 px-1 rounded mt-1">Reyvadin</div>
320
+ </div>
321
+ <div class="absolute top-[20%] left-[70%] map-location cursor-pointer" title="Khudan">
322
+ <div class="w-4 h-4 bg-yellow-600 rounded-full border-2 border-white"></div>
323
+ <div class="text-xs bg-black bg-opacity-70 px-1 rounded mt-1">Khudan</div>
324
+ </div>
325
+
326
+ <!-- Player Marker -->
327
+ <div class="absolute top-[30%] left-[25%] transform -translate-x-1/2 -translate-y-1/2">
328
+ <div class="relative">
329
+ <div class="w-6 h-6 bg-amber-400 rounded-full border-2 border-white animate-pulse"></div>
330
+ <div class="absolute -bottom-4 -left-2 text-xs font-bold text-amber-300">You</div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Faction Banners -->
336
+ <div class="absolute bottom-4 left-4 flex space-x-2">
337
+ <div class="faction-banner" style="background-image: url('https://i.imgur.com/9mJ3WzF.png')" title="Kingdom of Vlandia"></div>
338
+ <div class="faction-banner" style="background-image: url('https://i.imgur.com/4mX3w9J.png')" title="Empire"></div>
339
+ <div class="faction-banner" style="background-image: url('https://i.imgur.com/7nJ2WzF.png')" title="Sturgia"></div>
340
+ <div class="faction-banner" style="background-image: url('https://i.imgur.com/5mX3w9J.png')" title="Aserai"></div>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- Combat/Event Log -->
345
+ <div class="w-80 bg-black bg-opacity-70 border border-amber-800 rounded-lg p-4 flex flex-col">
346
+ <h3 class="text-lg font-bold text-amber-300 mb-2">Events</h3>
347
+ <div class="combat-log flex-1 mb-4 text-sm space-y-2">
348
+ <div class="text-amber-300">Day 127: Arrived in Praven</div>
349
+ <div class="text-green-400">+3 recruits joined your party</div>
350
+ <div class="text-blue-400">Completed quest: Bandit Hideout</div>
351
+ <div class="text-red-400">Lost 2 men in battle</div>
352
+ <div class="text-yellow-400">Sold loot for 1,250 denars</div>
353
+ <div class="text-gray-400">Met with Count Clais</div>
354
+ <div class="text-amber-300">Day 126: Left Reyvadin</div>
355
+ <div class="text-green-400">Alistair promoted to Veteran</div>
356
+ <div class="text-blue-400">Purchased 25 units of grain</div>
357
+ <div class="text-red-400">Skirmish with looters</div>
358
+ <div class="text-yellow-400">Found rare sword in battle</div>
359
+ </div>
360
+
361
+ <h3 class="text-lg font-bold text-amber-300 mb-2">Quick Actions</h3>
362
+ <div class="grid grid-cols-2 gap-2">
363
+ <button class="button-gold px-3 py-2 rounded font-bold text-sm flex items-center justify-center">
364
+ <i class="fas fa-swords mr-2"></i> Fight
365
+ </button>
366
+ <button class="button-gold px-3 py-2 rounded font-bold text-sm flex items-center justify-center">
367
+ <i class="fas fa-people-arrows mr-2"></i> Recruit
368
+ </button>
369
+ <button class="button-gold px-3 py-2 rounded font-bold text-sm flex items-center justify-center">
370
+ <i class="fas fa-warehouse mr-2"></i> Trade
371
+ </button>
372
+ <button class="button-gold px-3 py-2 rounded font-bold text-sm flex items-center justify-center">
373
+ <i class="fas fa-scroll mr-2"></i> Quests
374
+ </button>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Action Buttons -->
380
+ <div class="flex justify-center space-x-4 mt-4">
381
+ <button id="travel-btn" class="button-gold px-6 py-3 rounded-lg font-bold text-lg flex items-center">
382
+ <i class="fas fa-horse mr-2"></i> Travel
383
+ </button>
384
+ <button id="camp-btn" class="button-gold px-6 py-3 rounded-lg font-bold text-lg flex items-center">
385
+ <i class="fas fa-campground mr-2"></i> Camp
386
+ </button>
387
+ <button id="town-btn" class="button-gold px-6 py-3 rounded-lg font-bold text-lg flex items-center">
388
+ <i class="fas fa-city mr-2"></i> Enter Town
389
+ </button>
390
+ <button id="character-btn" class="button-gold px-6 py-3 rounded-lg font-bold text-lg flex items-center">
391
+ <i class="fas fa-user-shield mr-2"></i> Character
392
+ </button>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Combat Modal -->
399
+ <div id="combat-modal" class="fixed inset-0 flex items-center justify-center z-50 modal-overlay hidden">
400
+ <div class="modal-content w-3/4 h-3/4 rounded-lg p-6 relative">
401
+ <button id="close-combat" class="absolute top-4 right-4 text-amber-300 text-2xl">
402
+ <i class="fas fa-times"></i>
403
+ </button>
404
+
405
+ <h2 class="text-3xl font-bold text-center text-amber-300 mb-6 medieval-font">BATTLE!</h2>
406
+
407
+ <div class="flex h-5/6">
408
+ <!-- Player Side -->
409
+ <div class="w-1/3 flex flex-col items-center justify-center">
410
+ <div class="relative mb-4">
411
+ <img src="https://i.imgur.com/JQHq3Wm.png" alt="Player" class="w-40 h-40 rounded-full border-4 border-amber-600">
412
+ <div class="absolute -bottom-2 left-0 right-0 flex justify-center">
413
+ <div class="bg-amber-800 px-3 py-1 rounded-full text-sm font-bold">
414
+ <i class="fas fa-heart mr-1"></i> 78/100
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="text-center mb-4">
420
+ <h3 class="text-xl font-bold text-amber-300">Lord Edric</h3>
421
+ <div class="text-sm text-gray-300">Level 12 Noble</div>
422
+ </div>
423
+
424
+ <div class="grid grid-cols-2 gap-4 mb-6">
425
+ <button id="attack-btn" class="button-gold px-4 py-2 rounded font-bold flex items-center justify-center">
426
+ <i class="fas fa-sword mr-2"></i> Attack
427
+ </button>
428
+ <button class="button-gold px-4 py-2 rounded font-bold flex items-center justify-center">
429
+ <i class="fas fa-shield-alt mr-2"></i> Block
430
+ </button>
431
+ <button class="button-gold px-4 py-2 rounded font-bold flex items-center justify-center">
432
+ <i class="fas fa-horse mr-2"></i> Mount
433
+ </button>
434
+ <button class="button-gold px-4 py-2 rounded font-bold flex items-center justify-center">
435
+ <i class="fas fa-bow-arrow mr-2"></i> Bow
436
+ </button>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Battle Log -->
441
+ <div class="w-1/3 flex flex-col items-center justify-center">
442
+ <div id="battle-animation" class="mb-8 text-6xl">
443
+ <i class="fas fa-swords text-amber-300"></i>
444
+ </div>
445
+
446
+ <div class="combat-log w-full h-64 p-4 mb-4">
447
+ <div class="text-amber-300">Battle begins!</div>
448
+ <div class="text-blue-400">You face 12 looters</div>
449
+ <div class="text-gray-400">Your troops ready their weapons</div>
450
+ </div>
451
+
452
+ <button id="retreat-btn" class="button-gold px-6 py-2 rounded font-bold">
453
+ <i class="fas fa-flag mr-2"></i> Retreat
454
+ </button>
455
+ </div>
456
+
457
+ <!-- Enemy Side -->
458
+ <div class="w-1/3 flex flex-col items-center justify-center">
459
+ <div class="relative mb-4">
460
+ <img src="https://i.imgur.com/3QZ2J9W.png" alt="Enemy" class="w-40 h-40 rounded-full border-4 border-red-600">
461
+ <div class="absolute -bottom-2 left-0 right-0 flex justify-center">
462
+ <div class="bg-red-800 px-3 py-1 rounded-full text-sm font-bold">
463
+ <i class="fas fa-heart mr-1"></i> 45/60
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="text-center mb-4">
469
+ <h3 class="text-xl font-bold text-red-300">Looter Chief</h3>
470
+ <div class="text-sm text-gray-300">Level 8 Bandit</div>
471
+ </div>
472
+
473
+ <div class="grid grid-cols-2 gap-2 mb-6">
474
+ <div class="text-center">
475
+ <div class="text-red-300 font-bold">Strength</div>
476
+ <div class="text-lg">18</div>
477
+ </div>
478
+ <div class="text-center">
479
+ <div class="text-red-300 font-bold">Agility</div>
480
+ <div class="text-lg">22</div>
481
+ </div>
482
+ <div class="text-center">
483
+ <div class="text-red-300 font-bold">Weapon</div>
484
+ <div class="text-lg">Axe</div>
485
+ </div>
486
+ <div class="text-center">
487
+ <div class="text-red-300 font-bold">Armor</div>
488
+ <div class="text-lg">Light</div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Menu Modal -->
497
+ <div id="menu-modal" class="fixed inset-0 flex items-center justify-center z-50 modal-overlay hidden">
498
+ <div class="modal-content w-1/2 h-2/3 rounded-lg p-6 relative">
499
+ <button id="close-menu" class="absolute top-4 right-4 text-amber-300 text-2xl">
500
+ <i class="fas fa-times"></i>
501
+ </button>
502
+
503
+ <h2 class="text-3xl font-bold text-center text-amber-300 mb-8 medieval-font">GAME MENU</h2>
504
+
505
+ <div class="grid grid-cols-2 gap-6 h-3/4">
506
+ <div class="space-y-4">
507
+ <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center">
508
+ <i class="fas fa-save mr-3"></i> Save Game
509
+ </button>
510
+ <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center">
511
+ <i class="fas fa-folder-open mr-3"></i> Load Game
512
+ </button>
513
+ <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center">
514
+ <i class="fas fa-cog mr-3"></i> Settings
515
+ </button>
516
+ </div>
517
+
518
+ <div class="space-y-4">
519
+ <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center">
520
+ <i class="fas fa-book mr-3"></i> Encyclopedia
521
+ </button>
522
+ <button class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center">
523
+ <i class="fas fa-trophy mr-3"></i> Achievements
524
+ </button>
525
+ <button id="exit-btn" class="button-gold w-full py-4 rounded-lg font-bold text-lg flex items-center justify-center">
526
+ <i class="fas fa-door-open mr-3"></i> Exit to Menu
527
+ </button>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <script>
534
+ // DOM Elements
535
+ const menuBtn = document.getElementById('menu-btn');
536
+ const menuModal = document.getElementById('menu-modal');
537
+ const closeMenu = document.getElementById('close-menu');
538
+ const exitBtn = document.getElementById('exit-btn');
539
+
540
+ const travelBtn = document.getElementById('travel-btn');
541
+ const combatModal = document.getElementById('combat-modal');
542
+ const closeCombat = document.getElementById('close-combat');
543
+ const attackBtn = document.getElementById('attack-btn');
544
+ const retreatBtn = document.getElementById('retreat-btn');
545
+ const battleAnimation = document.getElementById('battle-animation');
546
+
547
+ // Menu Handling
548
+ menuBtn.addEventListener('click', () => {
549
+ menuModal.classList.remove('hidden');
550
+ });
551
+
552
+ closeMenu.addEventListener('click', () => {
553
+ menuModal.classList.add('hidden');
554
+ });
555
+
556
+ exitBtn.addEventListener('click', () => {
557
+ if(confirm('Are you sure you want to exit to main menu?')) {
558
+ alert('Returning to main menu...');
559
+ // In a real game, this would redirect to the main menu
560
+ }
561
+ });
562
+
563
+ // Combat Handling
564
+ travelBtn.addEventListener('click', () => {
565
+ // Random chance to encounter combat when traveling
566
+ if(Math.random() > 0.5) {
567
+ combatModal.classList.remove('hidden');
568
+ } else {
569
+ alert('You travel safely to the next location.');
570
+ // Update day counter
571
+ const dayElement = document.getElementById('day');
572
+ dayElement.textContent = parseInt(dayElement.textContent) + 1;
573
+ }
574
+ });
575
+
576
+ closeCombat.addEventListener('click', () => {
577
+ combatModal.classList.add('hidden');
578
+ });
579
+
580
+ attackBtn.addEventListener('click', () => {
581
+ // Add sword swing animation
582
+ battleAnimation.classList.add('sword-animation');
583
+
584
+ // Add combat log entry
585
+ const combatLog = document.querySelector('.combat-log');
586
+ const newEntry = document.createElement('div');
587
+ newEntry.classList.add('text-amber-300');
588
+ newEntry.textContent = 'You swing your sword at the looter chief!';
589
+ combatLog.appendChild(newEntry);
590
+ combatLog.scrollTop = combatLog.scrollHeight;
591
+
592
+ // Remove animation class after animation completes
593
+ setTimeout(() => {
594
+ battleAnimation.classList.remove('sword-animation');
595
+
596
+ // Random chance for enemy to take damage
597
+ if(Math.random() > 0.3) {
598
+ const hitEntry = document.createElement('div');
599
+ hitEntry.classList.add('text-green-400');
600
+ hitEntry.textContent = 'You hit the looter chief for 12 damage!';
601
+ combatLog.appendChild(hitEntry);
602
+
603
+ // Enemy counterattack
604
+ setTimeout(() => {
605
+ const counterEntry = document.createElement('div');
606
+ if(Math.random() > 0.5) {
607
+ counterEntry.classList.add('text-red-400');
608
+ counterEntry.textContent = 'The looter chief hits you for 8 damage!';
609
+ } else {
610
+ counterEntry.classList.add('text-blue-400');
611
+ counterEntry.textContent = 'You block the looter chief\'s attack!';
612
+ }
613
+ combatLog.appendChild(counterEntry);
614
+ combatLog.scrollTop = combatLog.scrollHeight;
615
+ }, 500);
616
+ } else {
617
+ const missEntry = document.createElement('div');
618
+ missEntry.classList.add('text-gray-400');
619
+ missEntry.textContent = 'Your attack misses!';
620
+ combatLog.appendChild(missEntry);
621
+ combatLog.scrollTop = combatLog.scrollHeight;
622
+ }
623
+ }, 500);
624
+ });
625
+
626
+ retreatBtn.addEventListener('click', () => {
627
+ const combatLog = document.querySelector('.combat-log');
628
+ const retreatEntry = document.createElement('div');
629
+ retreatEntry.classList.add('text-yellow-400');
630
+ retreatEntry.textContent = 'You retreat from the battle!';
631
+ combatLog.appendChild(retreatEntry);
632
+ combatLog.scrollTop = combatLog.scrollHeight;
633
+
634
+ setTimeout(() => {
635
+ combatModal.classList.add('hidden');
636
+ }, 1000);
637
+ });
638
+
639
+ // Map location click handlers
640
+ document.querySelectorAll('.map-location').forEach(location => {
641
+ location.addEventListener('click', () => {
642
+ const locationName = location.getAttribute('title');
643
+ alert(`You set course for ${locationName}!`);
644
+
645
+ // Update current location in UI
646
+ document.querySelector('.map-container .text-amber-300').textContent = locationName;
647
+ });
648
+ });
649
+ </script>
650
+ <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=zdwalter/mount-blade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
651
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 制作一个类似骑马与砍杀2的游戏