Hugging Face's logo

Spaces:
weltenschmid
/
dg-rpg
Running

App Files Community
weltenschmid commited on
Commit
bc8821f
·
verified ·
1 Parent(s): f49e7fe

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +914 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dg Rpg
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: red
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: dg-rpg
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
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,914 @@
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>Chronicles of Eldoria - RPG Strategy Game</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=MedievalSharp&family=Roboto:wght@300;400;500;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #4a2c12;
14
+ --secondary: #8b5a2b;
15
+ --accent: #d4af37;
16
+ --dark: #1a120b;
17
+ --light: #f5deb3;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Roboto', sans-serif;
22
+ background-color: var(--dark);
23
+ color: var(--light);
24
+ overflow: hidden;
25
+ height: 100vh;
26
+ }
27
+
28
+ .medieval-font {
29
+ font-family: 'MedievalSharp', cursive;
30
+ }
31
+
32
+ .health-bar {
33
+ height: 20px;
34
+ background: linear-gradient(to right, #dc2626, #ef4444);
35
+ border-radius: 4px;
36
+ transition: width 0.3s ease;
37
+ }
38
+
39
+ .mana-bar {
40
+ height: 20px;
41
+ background: linear-gradient(to right, #3b82f6, #93c5fd);
42
+ border-radius: 4px;
43
+ transition: width 0.3s ease;
44
+ }
45
+
46
+ .action-btn {
47
+ background: linear-gradient(to bottom, var(--secondary), var(--primary));
48
+ border: 2px solid var(--accent);
49
+ transition: all 0.2s ease;
50
+ }
51
+
52
+ .action-btn:hover {
53
+ transform: translateY(-2px);
54
+ box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
55
+ }
56
+
57
+ .action-btn:active {
58
+ transform: translateY(0);
59
+ }
60
+
61
+ .parchment-bg {
62
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%234a2c12" opacity="0.8"/><path d="M0,0 L100,0 L100,10 C70,15 60,25 50,30 C40,25 30,15 0,10 L0,0 Z" fill="%238b5a2b" opacity="0.3"/><path d="M0,90 L50,95 C30,85 20,80 0,70 L0,90 Z" fill="%238b5a2b" opacity="0.3"/></svg>');
63
+ background-size: 200px 200px;
64
+ border: 2px solid var(--accent);
65
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
66
+ }
67
+
68
+ .character-portrait {
69
+ border: 3px solid var(--accent);
70
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
71
+ transition: all 0.3s ease;
72
+ }
73
+
74
+ .character-portrait:hover {
75
+ transform: scale(1.05);
76
+ box-shadow: 0 6px 12px rgba(212, 175, 55, 0.5);
77
+ }
78
+
79
+ .enemy-highlight {
80
+ animation: pulse 1.5s infinite;
81
+ }
82
+
83
+ @keyframes pulse {
84
+ 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
85
+ 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
86
+ 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
87
+ }
88
+
89
+ .fade-in {
90
+ animation: fadeIn 0.5s ease-in;
91
+ }
92
+
93
+ @keyframes fadeIn {
94
+ from { opacity: 0; }
95
+ to { opacity: 1; }
96
+ }
97
+
98
+ .damage-text {
99
+ position: absolute;
100
+ color: #ef4444;
101
+ font-weight: bold;
102
+ animation: floatUp 1s forwards;
103
+ pointer-events: none;
104
+ text-shadow: 1px 1px 2px black;
105
+ }
106
+
107
+ @keyframes floatUp {
108
+ 0% { transform: translateY(0); opacity: 1; }
109
+ 100% { transform: translateY(-50px); opacity: 0; }
110
+ }
111
+
112
+ .round-indicator {
113
+ background: linear-gradient(to right, var(--primary), var(--secondary));
114
+ border: 2px solid var(--accent);
115
+ box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
116
+ }
117
+
118
+ /* New UI Animation Styles */
119
+ .ui-panel {
120
+ transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
121
+ transform-origin: center;
122
+ }
123
+
124
+ .left-panel {
125
+ transform: translateX(-100%);
126
+ }
127
+
128
+ .right-panel {
129
+ transform: translateX(100%);
130
+ }
131
+
132
+ .bottom-panel {
133
+ transform: translateY(100%);
134
+ }
135
+
136
+ .top-panel {
137
+ transform: translateY(-100%);
138
+ }
139
+
140
+ .panel-visible {
141
+ transform: translate(0);
142
+ }
143
+
144
+ .panel-hidden {
145
+ opacity: 0.5;
146
+ filter: blur(2px);
147
+ }
148
+
149
+ .panel-minimized {
150
+ transform: translate(0) scale(0.9);
151
+ opacity: 0.7;
152
+ }
153
+
154
+ .first-person-overlay {
155
+ position: absolute;
156
+ inset: 0;
157
+ pointer-events: none;
158
+ background: radial-gradient(circle at center, transparent 60%, rgba(0,0,0,0.7) 100%);
159
+ z-index: 5;
160
+ }
161
+
162
+ .weapon-swing {
163
+ animation: weaponSwing 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
164
+ }
165
+
166
+ @keyframes weaponSwing {
167
+ 0% { transform: translateX(0) rotate(0deg); }
168
+ 50% { transform: translateX(20px) rotate(5deg); }
169
+ 100% { transform: translateX(0) rotate(0deg); }
170
+ }
171
+
172
+ .spell-cast {
173
+ animation: spellCast 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) both;
174
+ }
175
+
176
+ @keyframes spellCast {
177
+ 0% { transform: scale(1); opacity: 1; }
178
+ 50% { transform: scale(1.2); opacity: 0.8; }
179
+ 100% { transform: scale(1); opacity: 1; }
180
+ }
181
+
182
+ .ui-notification {
183
+ animation: notificationPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
184
+ }
185
+
186
+ @keyframes notificationPop {
187
+ 0% { transform: scale(0); opacity: 0; }
188
+ 100% { transform: scale(1); opacity: 1; }
189
+ }
190
+
191
+ .fade-out {
192
+ animation: fadeOut 0.3s ease-out forwards;
193
+ }
194
+
195
+ @keyframes fadeOut {
196
+ to { opacity: 0; }
197
+ }
198
+ </style>
199
+ </head>
200
+ <body class="relative h-full">
201
+ <!-- Game Canvas with First-Person View -->
202
+ <div id="gameCanvas" class="absolute inset-0 bg-gray-900 overflow-hidden">
203
+ <!-- Simulated First-Person Environment -->
204
+ <div class="absolute inset-0 bg-gradient-to-b from-gray-900 to-gray-800">
205
+ <!-- Ground -->
206
+ <div class="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-stone-800 to-stone-700">
207
+ <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"%23d4af37\" opacity=\"0.1\"/><path d=\"M20,20 Q50,10 80,20 T100,40\" fill=\"none\" stroke=\"%23d4af37\" stroke-width=\"1\" opacity=\"0.2\"/></svg>');"></div>
208
+ </div>
209
+
210
+ <!-- Sky -->
211
+ <div class="absolute top-0 left-0 right-0 h-2/3 bg-gradient-to-b from-gray-900 to-gray-800">
212
+ <div class="absolute top-1/4 left-1/2 w-32 h-32 rounded-full bg-yellow-600 opacity-20 blur-xl"></div>
213
+ <div class="absolute top-1/3 right-1/4 w-16 h-16 rounded-full bg-blue-500 opacity-10 blur-lg"></div>
214
+ </div>
215
+
216
+ <!-- Environment Objects -->
217
+ <div class="absolute bottom-1/4 left-1/4 w-32 h-32 bg-stone-600 transform -skew-x-12 opacity-70"></div>
218
+ <div class="absolute bottom-1/3 right-1/4 w-40 h-40 bg-stone-700 transform skew-x-12 opacity-80"></div>
219
+
220
+ <!-- Crosshair -->
221
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4">
222
+ <div class="absolute top-0 left-1/2 w-px h-2 bg-amber-200 transform -translate-x-1/2"></div>
223
+ <div class="absolute bottom-0 left-1/2 w-px h-2 bg-amber-200 transform -translate-x-1/2"></div>
224
+ <div class="absolute top-1/2 left-0 w-2 h-px bg-amber-200 transform -translate-y-1/2"></div>
225
+ <div class="absolute top-1/2 right-0 w-2 h-px bg-amber-200 transform -translate-y-1/2"></div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- First-Person Overlay Effect -->
230
+ <div class="first-person-overlay"></div>
231
+ </div>
232
+
233
+ <!-- Top Bar - Game Info (Slides down when needed) -->
234
+ <div id="topPanel" class="absolute top-0 left-0 right-0 flex justify-between items-center p-4 bg-black bg-opacity-70 z-10 ui-panel top-panel">
235
+ <div class="flex items-center space-x-4">
236
+ <div class="round-indicator px-4 py-2 rounded-full">
237
+ <span class="medieval-font text-lg text-amber-200">Round: <span id="roundNumber">1</span></span>
238
+ </div>
239
+ <div class="flex items-center space-x-2">
240
+ <i class="fas fa-hourglass-half text-amber-200"></i>
241
+ <span class="medieval-font text-lg">Time Left: <span id="timeLeft">30</span>s</span>
242
+ </div>
243
+ </div>
244
+ <div class="flex items-center space-x-6">
245
+ <div class="flex items-center space-x-2">
246
+ <i class="fas fa-coins text-amber-200"></i>
247
+ <span class="medieval-font text-lg">Gold: <span id="goldAmount">1250</span></span>
248
+ </div>
249
+ <div class="flex items-center space-x-2">
250
+ <i class="fas fa-crown text-amber-200"></i>
251
+ <span class="medieval-font text-lg">Faction: <span id="playerFaction">Knights of Loria</span></span>
252
+ </div>
253
+ <button id="toggleTopPanel" class="text-amber-200 hover:text-amber-400">
254
+ <i class="fas fa-chevron-up"></i>
255
+ </button>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Left Sidebar - Character Info (Slides in from left) -->
260
+ <div id="leftPanel" class="absolute left-0 top-1/4 w-64 bg-black bg-opacity-70 p-4 rounded-r-lg z-10 parchment-bg ui-panel left-panel">
261
+ <button id="toggleLeftPanel" class="absolute -right-3 top-1/2 transform -translate-y-1/2 bg-amber-700 text-amber-200 w-6 h-12 rounded-r-full flex items-center justify-center shadow-lg">
262
+ <i class="fas fa-chevron-right"></i>
263
+ </button>
264
+
265
+ <div class="flex flex-col items-center mb-4">
266
+ <div class="character-portrait w-24 h-24 rounded-full bg-gray-700 mb-2 flex items-center justify-center overflow-hidden">
267
+ <img src="https://i.imgur.com/JQ9qy0E.png" alt="Character" class="w-full h-full object-cover">
268
+ </div>
269
+ <h3 class="medieval-font text-xl text-amber-200">Sir Galadric</h3>
270
+ <p class="text-sm text-amber-100">Level 12 Paladin</p>
271
+ </div>
272
+
273
+ <div class="mb-4">
274
+ <div class="flex justify-between mb-1">
275
+ <span class="text-sm">Health</span>
276
+ <span class="text-sm" id="healthText">85/120</span>
277
+ </div>
278
+ <div class="health-bar rounded-full" style="width: 70%"></div>
279
+ </div>
280
+
281
+ <div class="mb-4">
282
+ <div class="flex justify-between mb-1">
283
+ <span class="text-sm">Mana</span>
284
+ <span class="text-sm" id="manaText">45/80</span>
285
+ </div>
286
+ <div class="mana-bar rounded-full" style="width: 56%"></div>
287
+ </div>
288
+
289
+ <div class="grid grid-cols-2 gap-2 mb-4">
290
+ <div class="text-center">
291
+ <p class="text-sm">Attack</p>
292
+ <p class="medieval-font text-amber-200">24</p>
293
+ </div>
294
+ <div class="text-center">
295
+ <p class="text-sm">Defense</p>
296
+ <p class="medieval-font text-amber-200">18</p>
297
+ </div>
298
+ <div class="text-center">
299
+ <p class="text-sm">Speed</p>
300
+ <p class="medieval-font text-amber-200">12</p>
301
+ </div>
302
+ <div class="text-center">
303
+ <p class="text-sm">Magic</p>
304
+ <p class="medieval-font text-amber-200">16</p>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="border-t border-amber-800 pt-2">
309
+ <p class="text-sm text-center text-amber-100">Active Effects</p>
310
+ <div class="flex justify-center space-x-2 mt-2">
311
+ <div class="tooltip relative">
312
+ <div class="w-8 h-8 rounded-full bg-red-900 flex items-center justify-center">
313
+ <i class="fas fa-fire text-red-400 text-xs"></i>
314
+ </div>
315
+ <span class="tooltip-text">Fire Resistance +15% (3 rounds)</span>
316
+ </div>
317
+ <div class="tooltip relative">
318
+ <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center">
319
+ <i class="fas fa-shield-alt text-blue-400 text-xs"></i>
320
+ </div>
321
+ <span class="tooltip-text">Divine Protection (2 rounds)</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Right Sidebar - Party Info (Slides in from right) -->
328
+ <div id="rightPanel" class="absolute right-0 top-1/4 w-64 bg-black bg-opacity-70 p-4 rounded-l-lg z-10 parchment-bg ui-panel right-panel">
329
+ <button id="toggleRightPanel" class="absolute -left-3 top-1/2 transform -translate-y-1/2 bg-amber-700 text-amber-200 w-6 h-12 rounded-l-full flex items-center justify-center shadow-lg">
330
+ <i class="fas fa-chevron-left"></i>
331
+ </button>
332
+
333
+ <h3 class="medieval-font text-xl text-amber-200 mb-4 text-center">Party</h3>
334
+
335
+ <div class="space-y-4">
336
+ <!-- Party Member 1 -->
337
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-amber-900 hover:bg-opacity-30 cursor-pointer transition">
338
+ <div class="character-portrait w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center overflow-hidden">
339
+ <img src="https://i.imgur.com/3QZ2Q0X.png" alt="Party Member" class="w-full h-full object-cover">
340
+ </div>
341
+ <div class="flex-1">
342
+ <p class="medieval-font text-amber-100">Elandra</p>
343
+ <div class="flex items-center space-x-1">
344
+ <div class="health-bar w-16" style="width: 80%"></div>
345
+ <span class="text-xs">64/80</span>
346
+ </div>
347
+ </div>
348
+ <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
349
+ <i class="fas fa-check text-white text-xs"></i>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Party Member 2 -->
354
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-amber-900 hover:bg-opacity-30 cursor-pointer transition">
355
+ <div class="character-portrait w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center overflow-hidden">
356
+ <img src="https://i.imgur.com/5t5wY9j.png" alt="Party Member" class="w-full h-full object-cover">
357
+ </div>
358
+ <div class="flex-1">
359
+ <p class="medieval-font text-amber-100">Thorgar</p>
360
+ <div class="flex items-center space-x-1">
361
+ <div class="health-bar w-16" style="width: 45%"></div>
362
+ <span class="text-xs">36/80</span>
363
+ </div>
364
+ </div>
365
+ <div class="w-6 h-6 rounded-full bg-yellow-500 flex items-center justify-center">
366
+ <i class="fas fa-clock text-white text-xs"></i>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Party Member 3 -->
371
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-amber-900 hover:bg-opacity-30 cursor-pointer transition">
372
+ <div class="character-portrait w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center overflow-hidden">
373
+ <img src="https://i.imgur.com/7VvX7Qq.png" alt="Party Member" class="w-full h-full object-cover">
374
+ </div>
375
+ <div class="flex-1">
376
+ <p class="medieval-font text-amber-100">Merlin</p>
377
+ <div class="flex items-center space-x-1">
378
+ <div class="mana-bar w-16" style="width: 30%"></div>
379
+ <span class="text-xs">12/40</span>
380
+ </div>
381
+ </div>
382
+ <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
383
+ <i class="fas fa-check text-white text-xs"></i>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Party Member 4 -->
388
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-amber-900 hover:bg-opacity-30 cursor-pointer transition">
389
+ <div class="character-portrait w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center overflow-hidden">
390
+ <img src="https://i.imgur.com/9t5wY9j.png" alt="Party Member" class="w-full h-full object-cover">
391
+ </div>
392
+ <div class="flex-1">
393
+ <p class="medieval-font text-amber-100">Lydia</p>
394
+ <div class="flex items-center space-x-1">
395
+ <div class="health-bar w-16" style="width: 90%"></div>
396
+ <span class="text-xs">54/60</span>
397
+ </div>
398
+ </div>
399
+ <div class="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center">
400
+ <i class="fas fa-skull text-white text-xs"></i>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="mt-4 pt-3 border-t border-amber-800">
406
+ <h4 class="medieval-font text-lg text-amber-200 mb-2">Party Buffs</h4>
407
+ <div class="space-y-2">
408
+ <div class="flex items-center space-x-2">
409
+ <div class="w-6 h-6 rounded-full bg-blue-800 flex items-center justify-center">
410
+ <i class="fas fa-moon text-blue-300 text-xs"></i>
411
+ </div>
412
+ <span class="text-sm">Moonlight Blessing (+10% magic)</span>
413
+ </div>
414
+ <div class="flex items-center space-x-2">
415
+ <div class="w-6 h-6 rounded-full bg-green-800 flex items-center justify-center">
416
+ <i class="fas fa-leaf text-green-300 text-xs"></i>
417
+ </div>
418
+ <span class="text-sm">Nature's Renewal (2 HP/turn)</span>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <!-- Bottom Center - Action Bar (Slides up when needed) -->
425
+ <div id="bottomPanel" class="absolute bottom-0 left-0 right-0 flex justify-center p-4 z-10 ui-panel bottom-panel">
426
+ <div class="bg-black bg-opacity-70 rounded-lg p-4 parchment-bg max-w-4xl w-full">
427
+ <div class="flex justify-between items-center mb-4">
428
+ <h3 class="medieval-font text-xl text-amber-200">Actions</h3>
429
+ <div class="flex items-center space-x-2">
430
+ <button id="toggleBottomPanel" class="text-amber-200 hover:text-amber-400 mr-2">
431
+ <i class="fas fa-chevron-down"></i>
432
+ </button>
433
+ <button id="endTurnBtn" class="action-btn px-4 py-2 rounded text-amber-100 medieval-font flex items-center space-x-2">
434
+ <i class="fas fa-flag"></i>
435
+ <span>End Turn</span>
436
+ </button>
437
+ <button class="action-btn px-4 py-2 rounded text-amber-100 medieval-font flex items-center space-x-2">
438
+ <i class="fas fa-cog"></i>
439
+ <span>Settings</span>
440
+ </button>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="grid grid-cols-4 gap-3">
445
+ <!-- Attack Actions -->
446
+ <div class="action-btn p-3 rounded-lg cursor-pointer group" onclick="castAction('Holy Strike')">
447
+ <div class="flex items-center space-x-2">
448
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center">
449
+ <i class="fas fa-sword text-red-300"></i>
450
+ </div>
451
+ <div>
452
+ <p class="medieval-font text-amber-100">Holy Strike</p>
453
+ <div class="flex items-center space-x-1">
454
+ <i class="fas fa-bolt text-yellow-400 text-xs"></i>
455
+ <span class="text-xs">2 AP</span>
456
+ <i class="fas fa-heart text-red-400 text-xs"></i>
457
+ <span class="text-xs">12-18</span>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ <p class="text-xs mt-1 text-amber-100 opacity-0 group-hover:opacity-100 transition">
462
+ A divine attack that smites enemies with holy energy.
463
+ </p>
464
+ </div>
465
+
466
+ <!-- Defensive Actions -->
467
+ <div class="action-btn p-3 rounded-lg cursor-pointer group" onclick="castAction('Divine Shield')">
468
+ <div class="flex items-center space-x-2">
469
+ <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center">
470
+ <i class="fas fa-shield-alt text-blue-300"></i>
471
+ </div>
472
+ <div>
473
+ <p class="medieval-font text-amber-100">Divine Shield</p>
474
+ <div class="flex items-center space-x-1">
475
+ <i class="fas fa-bolt text-yellow-400 text-xs"></i>
476
+ <span class="text-xs">1 AP</span>
477
+ <i class="fas fa-gem text-purple-400 text-xs"></i>
478
+ <span class="text-xs">10 MP</span>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ <p class="text-xs mt-1 text-amber-100 opacity-0 group-hover:opacity-100 transition">
483
+ Creates a protective barrier that reduces damage by 50% for 1 round.
484
+ </p>
485
+ </div>
486
+
487
+ <!-- Magic Actions -->
488
+ <div class="action-btn p-3 rounded-lg cursor-pointer group" onclick="castAction('Fireball')">
489
+ <div class="flex items-center space-x-2">
490
+ <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center">
491
+ <i class="fas fa-fire text-orange-300"></i>
492
+ </div>
493
+ <div>
494
+ <p class="medieval-font text-amber-100">Fireball</p>
495
+ <div class="flex items-center space-x-1">
496
+ <i class="fas fa-bolt text-yellow-400 text-xs"></i>
497
+ <span class="text-xs">3 AP</span>
498
+ <i class="fas fa-gem text-purple-400 text-xs"></i>
499
+ <span class="text-xs">25 MP</span>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ <p class="text-xs mt-1 text-amber-100 opacity-0 group-hover:opacity-100 transition">
504
+ Launches a fiery projectile that explodes on impact, damaging all enemies in area.
505
+ </p>
506
+ </div>
507
+
508
+ <!-- Utility Actions -->
509
+ <div class="action-btn p-3 rounded-lg cursor-pointer group" onclick="castAction('Healing Light')">
510
+ <div class="flex items-center space-x-2">
511
+ <div class="w-10 h-10 rounded-full bg-green-900 flex items-center justify-center">
512
+ <i class="fas fa-hand-holding-medical text-green-300"></i>
513
+ </div>
514
+ <div>
515
+ <p class="medieval-font text-amber-100">Healing Light</p>
516
+ <div class="flex items-center space-x-1">
517
+ <i class="fas fa-bolt text-yellow-400 text-xs"></i>
518
+ <span class="text-xs">2 AP</span>
519
+ <i class="fas fa-gem text-purple-400 text-xs"></i>
520
+ <span class="text-xs">15 MP</span>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ <p class="text-xs mt-1 text-amber-100 opacity-0 group-hover:opacity-100 transition">
525
+ Restores 20-30 HP to target ally. Can be cast on self.
526
+ </p>
527
+ </div>
528
+ </div>
529
+
530
+ <div class="mt-4 flex justify-between items-center">
531
+ <div class="flex items-center space-x-4">
532
+ <div class="flex items-center space-x-2">
533
+ <i class="fas fa-bolt text-yellow-400"></i>
534
+ <span>Action Points: <span class="medieval-font text-amber-200" id="actionPoints">4</span>/6</span>
535
+ </div>
536
+ <div class="flex items-center space-x-2">
537
+ <i class="fas fa-gem text-purple-400"></i>
538
+ <span>Mana: <span class="medieval-font text-amber-200" id="manaPoints">45</span>/80</span>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="flex space-x-2">
543
+ <button class="action-btn px-3 py-1 rounded text-sm">
544
+ <i class="fas fa-book mr-1"></i> Spellbook
545
+ </button>
546
+ <button class="action-btn px-3 py-1 rounded text-sm">
547
+ <i class="fas fa-briefcase mr-1"></i> Inventory
548
+ </button>
549
+ <button class="action-btn px-3 py-1 rounded text-sm">
550
+ <i class="fas fa-map mr-1"></i> Tactical Map
551
+ </button>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- Combat Log (Slides up with bottom panel) -->
558
+ <div id="combatLogPanel" class="absolute bottom-24 left-4 w-96 bg-black bg-opacity-70 rounded-lg p-3 parchment-bg z-10 max-h-40 overflow-y-auto ui-panel bottom-panel">
559
+ <h3 class="medieval-font text-lg text-amber-200 mb-2 flex justify-between items-center">
560
+ <span>Combat Log</span>
561
+ <button class="text-xs action-btn px-2 py-1 rounded">Clear</button>
562
+ </h3>
563
+ <div id="combatLog" class="text-sm space-y-1">
564
+ <p class="text-amber-100"><span class="text-red-400">Orc Warrior</span> attacks <span class="text-blue-400">Sir Galadric</span> for 12 damage.</p>
565
+ <p class="text-amber-100"><span class="text-blue-400">Sir Galadric</span> uses <span class="text-yellow-400">Holy Strike</span> on <span class="text-red-400">Orc Warrior</span> for 18 damage.</p>
566
+ <p class="text-amber-100"><span class="text-green-400">Elandra</span> heals <span class="text-blue-400">Sir Galadric</span> for 15 HP.</p>
567
+ <p class="text-amber-100"><span class="text-red-400">Dark Mage</span> casts <span class="text-purple-400">Shadow Bolt</span> on <span class="text-blue-400">Thorgar</span> for 22 damage.</p>
568
+ <p class="text-amber-100">Round 1 ends. Preparing for Round 2...</p>
569
+ </div>
570
+ </div>
571
+
572
+ <!-- Enemy Targets (Floating) -->
573
+ <div id="enemyTargets" class="absolute inset-0 pointer-events-none z-0">
574
+ <!-- These would be positioned over enemies in the game world -->
575
+ <div class="absolute top-1/3 left-1/4 transform -translate-x-1/2 -translate-y-1/2 enemy-highlight w-24 h-24 rounded-full border-4 border-red-500 cursor-pointer pointer-events-auto" onclick="showDamageText(this, 18)">
576
+ <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 px-2 py-1 rounded">
577
+ <p class="medieval-font text-sm text-white">Orc Warrior</p>
578
+ <div class="health-bar w-20" style="width: 60%"></div>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="absolute top-2/5 right-1/3 transform translate-x-1/2 -translate-y-1/2 enemy-highlight w-24 h-24 rounded-full border-4 border-red-500 cursor-pointer pointer-events-auto" onclick="showDamageText(this, 24)">
583
+ <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 px-2 py-1 rounded">
584
+ <p class="medieval-font text-sm text-white">Dark Mage</p>
585
+ <div class="health-bar w-20" style="width: 40%"></div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Modal - Spell Details -->
591
+ <div id="spellModal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
592
+ <div class="bg-black bg-opacity-90 border border-amber-700 rounded-lg p-6 w-full max-w-md parchment-bg">
593
+ <div class="flex justify-between items-center mb-4">
594
+ <h3 class="medieval-font text-2xl text-amber-200">Holy Strike</h3>
595
+ <button onclick="closeModal()" class="text-amber-200 hover:text-amber-400">
596
+ <i class="fas fa-times"></i>
597
+ </button>
598
+ </div>
599
+
600
+ <div class="flex items-center space-x-4 mb-4">
601
+ <div class="w-16 h-16 rounded-full bg-red-900 flex items-center justify-center">
602
+ <i class="fas fa-sword text-red-300 text-2xl"></i>
603
+ </div>
604
+ <div>
605
+ <div class="flex items-center space-x-2">
606
+ <span class="px-2 py-1 bg-amber-800 text-amber-200 rounded text-xs">Attack</span>
607
+ <span class="px-2 py-1 bg-blue-800 text-blue-200 rounded text-xs">Holy</span>
608
+ </div>
609
+ <div class="flex items-center space-x-3 mt-2">
610
+ <div class="flex items-center">
611
+ <i class="fas fa-bolt text-yellow-400 mr-1"></i>
612
+ <span>2 AP</span>
613
+ </div>
614
+ <div class="flex items-center">
615
+ <i class="fas fa-gem text-purple-400 mr-1"></i>
616
+ <span>10 MP</span>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="mb-4">
623
+ <h4 class="medieval-font text-lg text-amber-200 mb-2">Description</h4>
624
+ <p class="text-amber-100">Channel divine energy into your weapon, striking an enemy for 12-18 holy damage. Has a 20% chance to stun undead enemies for 1 round.</p>
625
+ </div>
626
+
627
+ <div class="grid grid-cols-2 gap-4 mb-4">
628
+ <div>
629
+ <h4 class="medieval-font text-lg text-amber-200 mb-2">Damage</h4>
630
+ <p class="text-amber-100">Base: 12-18</p>
631
+ <p class="text-amber-100">+20% vs Undead</p>
632
+ </div>
633
+ <div>
634
+ <h4 class="medieval-font text-lg text-amber-200 mb-2">Effects</h4>
635
+ <p class="text-amber-100">20% Stun (Undead)</p>
636
+ <p class="text-amber-100">Range: Melee</p>
637
+ </div>
638
+ </div>
639
+
640
+ <div class="flex justify-end space-x-3">
641
+ <button onclick="closeModal()" class="action-btn px-4 py-2 rounded">Close</button>
642
+ <button class="action-btn px-4 py-2 rounded bg-green-800 border-green-600">Cast Spell</button>
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+ <!-- Notification System -->
648
+ <div id="notificationContainer" class="fixed top-4 right-4 space-y-2 z-50"></div>
649
+
650
+ <script>
651
+ // Game state
652
+ let currentRound = 1;
653
+ let timeLeft = 30;
654
+ let actionPoints = 4;
655
+ let mana = 45;
656
+ let uiVisible = true;
657
+ let timer;
658
+
659
+ // Initialize UI
660
+ document.addEventListener('DOMContentLoaded', () => {
661
+ // Show all panels with animation
662
+ setTimeout(() => {
663
+ document.getElementById('topPanel').classList.add('panel-visible');
664
+ document.getElementById('leftPanel').classList.add('panel-visible');
665
+ document.getElementById('rightPanel').classList.add('panel-visible');
666
+ document.getElementById('bottomPanel').classList.add('panel-visible');
667
+ document.getElementById('combatLogPanel').classList.add('panel-visible');
668
+ }, 100);
669
+
670
+ // Setup toggle buttons
671
+ document.getElementById('toggleTopPanel').addEventListener('click', toggleTopPanel);
672
+ document.getElementById('toggleLeftPanel').addEventListener('click', toggleLeftPanel);
673
+ document.getElementById('toggleRightPanel').addEventListener('click', toggleRightPanel);
674
+ document.getElementById('toggleBottomPanel').addEventListener('click', toggleBottomPanel);
675
+
676
+ // Start game timer
677
+ startTimer();
678
+
679
+ // Add hover effects to action buttons
680
+ document.querySelectorAll('.action-btn').forEach(btn => {
681
+ btn.addEventListener('mouseenter', () => {
682
+ btn.style.transform = 'translateY(-2px)';
683
+ btn.style.boxShadow = '0 4px 8px rgba(212, 175, 55, 0.3)';
684
+ });
685
+
686
+ btn.addEventListener('mouseleave', () => {
687
+ btn.style.transform = '';
688
+ btn.style.boxShadow = '';
689
+ });
690
+ });
691
+
692
+ // Show welcome notification
693
+ showNotification('Welcome to Chronicles of Eldoria!', 'fas fa-scroll');
694
+ });
695
+
696
+ // Timer functions
697
+ function startTimer() {
698
+ timer = setInterval(() => {
699
+ timeLeft--;
700
+ document.getElementById('timeLeft').textContent = timeLeft;
701
+
702
+ if (timeLeft <= 5) {
703
+ showNotification(`Time running out! ${timeLeft}s left`, 'fas fa-hourglass-end', 'text-red-400');
704
+ }
705
+
706
+ if (timeLeft <= 0) {
707
+ clearInterval(timer);
708
+ endTurn();
709
+ }
710
+ }, 1000);
711
+ }
712
+
713
+ function endTurn() {
714
+ currentRound++;
715
+ document.getElementById('roundNumber').textContent = currentRound;
716
+ timeLeft = 30;
717
+ document.getElementById('timeLeft').textContent = timeLeft;
718
+ actionPoints = 6;
719
+ document.getElementById('actionPoints').textContent = actionPoints;
720
+ mana = Math.min(mana + 10, 80);
721
+ document.getElementById('manaPoints').textContent = mana;
722
+
723
+ // Add to combat log
724
+ const log = document.getElementById('combatLog');
725
+ const newEntry = document.createElement('p');
726
+ newEntry.className = 'text-amber-100';
727
+ newEntry.innerHTML = `Round ${currentRound-1} ends. Preparing for Round ${currentRound}...`;
728
+ log.appendChild(newEntry);
729
+ log.scrollTop = log.scrollHeight;
730
+
731
+ // Show notification
732
+ showNotification(`Round ${currentRound} begins!`, 'fas fa-flag', 'text-amber-300');
733
+
734
+ // Restart timer
735
+ startTimer();
736
+ }
737
+
738
+ document.getElementById('endTurnBtn').addEventListener('click', endTurn);
739
+
740
+ // UI Panel Toggles
741
+ function toggleTopPanel() {
742
+ const panel = document.getElementById('topPanel');
743
+ panel.classList.toggle('panel-visible');
744
+ panel.classList.toggle('panel-hidden');
745
+ }
746
+
747
+ function toggleLeftPanel() {
748
+ const panel = document.getElementById('leftPanel');
749
+ panel.classList.toggle('panel-visible');
750
+ panel.classList.toggle('panel-hidden');
751
+ }
752
+
753
+ function toggleRightPanel() {
754
+ const panel = document.getElementById('rightPanel');
755
+ panel.classList.toggle('panel-visible');
756
+ panel.classList.toggle('panel-hidden');
757
+ }
758
+
759
+ function toggleBottomPanel() {
760
+ const panel = document.getElementById('bottomPanel');
761
+ const combatLog = document.getElementById('combatLogPanel');
762
+
763
+ if (panel.classList.contains('panel-visible')) {
764
+ panel.classList.remove('panel-visible');
765
+ panel.classList.add('panel-hidden');
766
+ combatLog.classList.remove('panel-visible');
767
+ combatLog.classList.add('panel-hidden');
768
+ } else {
769
+ panel.classList.remove('panel-hidden');
770
+ panel.classList.add('panel-visible');
771
+ combatLog.classList.remove('panel-hidden');
772
+ combatLog.classList.add('panel-visible');
773
+ }
774
+ }
775
+
776
+ // Game Actions
777
+ function showDamageText(element, damage) {
778
+ const rect = element.getBoundingClientRect();
779
+ const x = rect.left + rect.width / 2;
780
+ const y = rect.top + rect.height / 2;
781
+
782
+ const damageText = document.createElement('div');
783
+ damageText.className = 'damage-text';
784
+ damageText.textContent = `-${damage}`;
785
+ damageText.style.left = `${x}px`;
786
+ damageText.style.top = `${y}px`;
787
+
788
+ document.body.appendChild(damageText);
789
+
790
+ // Remove after animation
791
+ setTimeout(() => {
792
+ damageText.remove();
793
+ }, 1000);
794
+
795
+ // Update action points if we have enough
796
+ if (actionPoints >= 2) {
797
+ actionPoints -= 2;
798
+ document.getElementById('actionPoints').textContent = actionPoints;
799
+
800
+ // Add to combat log
801
+ const log = document.getElementById('combatLog');
802
+ const newEntry = document.createElement('p');
803
+ newEntry.className = 'text-amber-100';
804
+ newEntry.innerHTML = `<span class="text-blue-400">Sir Galadric</span> attacks <span class="text-red-400">${element.querySelector('p').textContent}</span> for ${damage} damage.`;
805
+ log.appendChild(newEntry);
806
+ log.scrollTop = log.scrollHeight;
807
+
808
+ // Show weapon swing effect
809
+ const gameCanvas = document.getElementById('gameCanvas');
810
+ gameCanvas.classList.add('weapon-swing');
811
+ setTimeout(() => {
812
+ gameCanvas.classList.remove('weapon-swing');
813
+ }, 500);
814
+ } else {
815
+ showNotification('Not enough Action Points!', 'fas fa-bolt', 'text-red-400');
816
+ }
817
+ }
818
+
819
+ function castAction(spellName) {
820
+ if (actionPoints > 0) {
821
+ // Show spell casting effect
822
+ const gameCanvas = document.getElementById('gameCanvas');
823
+ gameCanvas.classList.add('spell-cast');
824
+ setTimeout(() => {
825
+ gameCanvas.classList.remove('spell-cast');
826
+ }, 800);
827
+
828
+ showNotification(`Casting ${spellName}...`, 'fas fa-magic', 'text-purple-400');
829
+ } else {
830
+ showNotification('Not enough Action Points!', 'fas fa-bolt', 'text-red-400');
831
+ }
832
+ }
833
+
834
+ // Modal functions
835
+ function openSpellModal() {
836
+ document.getElementById('spellModal').classList.remove('hidden');
837
+ }
838
+
839
+ function closeModal() {
840
+ document.getElementById('spellModal').classList.add('hidden');
841
+ }
842
+
843
+ // Notification system
844
+ function showNotification(message, icon, textColor = 'text-amber-200') {
845
+ const container = document.getElementById('notificationContainer');
846
+ const notification = document.createElement('div');
847
+ notification.className = `ui-notification bg-black bg-opacity-80 border border-amber-700 rounded-lg p-3 flex items-center space-x-2 ${textColor}`;
848
+ notification.innerHTML = `
849
+ <i class="${icon}"></i>
850
+ <span>${message}</span>
851
+ `;
852
+
853
+ container.appendChild(notification);
854
+
855
+ // Remove after delay
856
+ setTimeout(() => {
857
+ notification.classList.add('fade-out');
858
+ setTimeout(() => {
859
+ notification.remove();
860
+ }, 300);
861
+ }, 3000);
862
+ }
863
+
864
+ // Keyboard shortcuts
865
+ document.addEventListener('keydown', (e) => {
866
+ // Toggle UI with Tab key
867
+ if (e.key === 'Tab') {
868
+ e.preventDefault();
869
+ toggleUI();
870
+ }
871
+
872
+ // End turn with Space key
873
+ if (e.key === ' ') {
874
+ e.preventDefault();
875
+ endTurn();
876
+ }
877
+ });
878
+
879
+ function toggleUI() {
880
+ const topPanel = document.getElementById('topPanel');
881
+ const leftPanel = document.getElementById('leftPanel');
882
+ const rightPanel = document.getElementById('rightPanel');
883
+ const bottomPanel = document.getElementById('bottomPanel');
884
+ const combatLog = document.getElementById('combatLogPanel');
885
+
886
+ if (uiVisible) {
887
+ topPanel.classList.remove('panel-visible');
888
+ topPanel.classList.add('panel-hidden');
889
+ leftPanel.classList.remove('panel-visible');
890
+ leftPanel.classList.add('panel-hidden');
891
+ rightPanel.classList.remove('panel-visible');
892
+ rightPanel.classList.add('panel-hidden');
893
+ bottomPanel.classList.remove('panel-visible');
894
+ bottomPanel.classList.add('panel-hidden');
895
+ combatLog.classList.remove('panel-visible');
896
+ combatLog.classList.add('panel-hidden');
897
+ } else {
898
+ topPanel.classList.remove('panel-hidden');
899
+ topPanel.classList.add('panel-visible');
900
+ leftPanel.classList.remove('panel-hidden');
901
+ leftPanel.classList.add('panel-visible');
902
+ rightPanel.classList.remove('panel-hidden');
903
+ rightPanel.classList.add('panel-visible');
904
+ bottomPanel.classList.remove('panel-hidden');
905
+ bottomPanel.classList.add('panel-visible');
906
+ combatLog.classList.remove('panel-hidden');
907
+ combatLog.classList.add('panel-visible');
908
+ }
909
+
910
+ uiVisible = !uiVisible;
911
+ }
912
+ </script>
913
+ <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=weltenschmid/dg-rpg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
914
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Can you design me an game interface for a first person, round-based RPG, Strategy game?
2
+ Could you update the interface to be either smoothly sliding in or more harmonic to the first person view?