JjpieRazorwing2 commited on
Commit
c28fdfa
·
verified ·
1 Parent(s): ed907a1

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1075 -19
index.html CHANGED
@@ -1,19 +1,1075 @@
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>NEON SURVIVOR - Cyberpunk Zombie Survival</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ :root {
14
+ --neon-cyan: #00f0ff;
15
+ --neon-pink: #ff00ff;
16
+ --neon-green: #39ff14;
17
+ --neon-red: #ff073a;
18
+ --neon-yellow: #ffff00;
19
+ --dark-bg: #0a0a1a;
20
+ --panel-bg: rgba(10, 10, 30, 0.92);
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ touch-action: none;
28
+ -webkit-tap-highlight-color: transparent;
29
+ }
30
+
31
+ body {
32
+ background: var(--dark-bg);
33
+ font-family: 'Rajdhani', sans-serif;
34
+ overflow: hidden;
35
+ user-select: none;
36
+ -webkit-user-select: none;
37
+ width: 100vw;
38
+ height: 100vh;
39
+ }
40
+
41
+ canvas {
42
+ display: block;
43
+ image-rendering: pixelated;
44
+ }
45
+
46
+ /* CRT Scanline Effect */
47
+ .crt-overlay {
48
+ position: fixed;
49
+ inset: 0;
50
+ pointer-events: none;
51
+ z-index: 9999;
52
+ background: repeating-linear-gradient(
53
+ 0deg,
54
+ rgba(0, 0, 0, 0.03) 0px,
55
+ rgba(0, 0, 0, 0.03) 1px,
56
+ transparent 1px,
57
+ transparent 2px
58
+ );
59
+ }
60
+
61
+ .crt-overlay::after {
62
+ content: '';
63
+ position: absolute;
64
+ inset: 0;
65
+ background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
66
+ }
67
+
68
+ /* Neon Glow Utilities */
69
+ .neon-text-cyan {
70
+ color: var(--neon-cyan);
71
+ text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan);
72
+ }
73
+
74
+ .neon-text-pink {
75
+ color: var(--neon-pink);
76
+ text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
77
+ }
78
+
79
+ .neon-text-green {
80
+ color: var(--neon-green);
81
+ text-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-green);
82
+ }
83
+
84
+ .neon-text-red {
85
+ color: var(--neon-red);
86
+ text-shadow: 0 0 10px var(--neon-red), 0 0 20px var(--neon-red);
87
+ }
88
+
89
+ .neon-box {
90
+ border: 2px solid var(--neon-cyan);
91
+ box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 10px rgba(0, 240, 255, 0.1);
92
+ }
93
+
94
+ .neon-box-pink {
95
+ border: 2px solid var(--neon-pink);
96
+ box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px rgba(255, 0, 255, 0.1);
97
+ }
98
+
99
+ /* UI Animations */
100
+ @keyframes glitch {
101
+ 0%, 100% { transform: translate(0); }
102
+ 20% { transform: translate(-2px, 2px); }
103
+ 40% { transform: translate(-2px, -2px); }
104
+ 60% { transform: translate(2px, 2px); }
105
+ 80% { transform: translate(2px, -2px); }
106
+ }
107
+
108
+ .glitch {
109
+ animation: glitch 0.3s ease-in-out;
110
+ }
111
+
112
+ @keyframes pulse-glow {
113
+ 0%, 100% { opacity: 1; }
114
+ 50% { opacity: 0.6; }
115
+ }
116
+
117
+ .pulse-glow {
118
+ animation: pulse-glow 2s ease-in-out infinite;
119
+ }
120
+
121
+ @keyframes float {
122
+ 0%, 100% { transform: translateY(0); }
123
+ 50% { transform: translateY(-10px); }
124
+ }
125
+
126
+ .float {
127
+ animation: float 3s ease-in-out infinite;
128
+ }
129
+
130
+ @keyframes scan-line {
131
+ 0% { top: -5%; }
132
+ 100% { top: 105%; }
133
+ }
134
+
135
+ .scan-line {
136
+ position: absolute;
137
+ left: 0;
138
+ right: 0;
139
+ height: 3px;
140
+ background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
141
+ animation: scan-line 4s linear infinite;
142
+ opacity: 0.5;
143
+ }
144
+
145
+ /* Progress Bars */
146
+ .hp-bar {
147
+ height: 6px;
148
+ background: #333;
149
+ border-radius: 3px;
150
+ overflow: hidden;
151
+ }
152
+
153
+ .hp-fill {
154
+ height: 100%;
155
+ background: linear-gradient(90deg, var(--neon-red), var(--neon-pink));
156
+ transition: width 0.3s ease;
157
+ box-shadow: 0 0 8px var(--neon-red);
158
+ }
159
+
160
+ .xp-bar {
161
+ height: 4px;
162
+ background: #222;
163
+ border-radius: 2px;
164
+ overflow: hidden;
165
+ }
166
+
167
+ .xp-fill {
168
+ height: 100%;
169
+ background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green));
170
+ transition: width 0.3s ease;
171
+ box-shadow: 0 0 6px var(--neon-cyan);
172
+ }
173
+
174
+ /* Buttons */
175
+ .neon-btn {
176
+ position: relative;
177
+ padding: 14px 36px;
178
+ font-family: 'Orbitron', sans-serif;
179
+ font-size: 14px;
180
+ font-weight: 700;
181
+ text-transform: uppercase;
182
+ letter-spacing: 3px;
183
+ color: var(--neon-cyan);
184
+ background: transparent;
185
+ border: 2px solid var(--neon-cyan);
186
+ cursor: pointer;
187
+ overflow: hidden;
188
+ transition: all 0.3s ease;
189
+ }
190
+
191
+ .neon-btn::before {
192
+ content: '';
193
+ position: absolute;
194
+ top: 0;
195
+ left: -100%;
196
+ width: 100%;
197
+ height: 100%;
198
+ background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.3), transparent);
199
+ transition: left 0.5s ease;
200
+ }
201
+
202
+ .neon-btn:hover::before {
203
+ left: 100%;
204
+ }
205
+
206
+ .neon-btn:hover {
207
+ background: rgba(0, 240, 255, 0.1);
208
+ box-shadow: 0 0 20px var(--neon-cyan), inset 0 0 20px rgba(0, 240, 255, 0.1);
209
+ transform: scale(1.05);
210
+ }
211
+
212
+ .neon-btn-pink {
213
+ color: var(--neon-pink);
214
+ border-color: var(--neon-pink);
215
+ }
216
+
217
+ .neon-btn-pink::before {
218
+ background: linear-gradient(90deg, transparent, rgba(255, 0, 255, 0.3), transparent);
219
+ }
220
+
221
+ .neon-btn-pink:hover {
222
+ background: rgba(255, 0, 255, 0.1);
223
+ box-shadow: 0 0 20px var(--neon-pink), inset 0 0 20px rgba(255, 0, 255, 0.1);
224
+ }
225
+
226
+ /* Screens */
227
+ .screen {
228
+ position: fixed;
229
+ inset: 0;
230
+ display: flex;
231
+ flex-direction: column;
232
+ align-items: center;
233
+ justify-content: center;
234
+ z-index: 100;
235
+ transition: opacity 0.5s ease, transform 0.5s ease;
236
+ }
237
+
238
+ .screen.hidden {
239
+ opacity: 0;
240
+ pointer-events: none;
241
+ transform: scale(1.1);
242
+ }
243
+
244
+ /* HUD */
245
+ .hud-panel {
246
+ background: var(--panel-bg);
247
+ border: 1px solid rgba(0, 240, 255, 0.3);
248
+ border-radius: 8px;
249
+ padding: 8px 14px;
250
+ backdrop-filter: blur(10px);
251
+ }
252
+
253
+ /* Skill Cards */
254
+ .skill-card {
255
+ background: rgba(10, 10, 30, 0.9);
256
+ border: 2px solid rgba(0, 240, 255, 0.3);
257
+ border-radius: 12px;
258
+ padding: 20px;
259
+ cursor: pointer;
260
+ transition: all 0.3s ease;
261
+ position: relative;
262
+ overflow: hidden;
263
+ }
264
+
265
+ .skill-card::before {
266
+ content: '';
267
+ position: absolute;
268
+ inset: 0;
269
+ background: linear-gradient(135deg, transparent 40%, rgba(0, 240, 255, 0.1) 100%);
270
+ opacity: 0;
271
+ transition: opacity 0.3s;
272
+ }
273
+
274
+ .skill-card:hover::before {
275
+ opacity: 1;
276
+ }
277
+
278
+ .skill-card:hover {
279
+ border-color: var(--neon-cyan);
280
+ box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
281
+ transform: translateY(-4px);
282
+ }
283
+
284
+ .skill-card.selected {
285
+ border-color: var(--neon-green);
286
+ box-shadow: 0 0 30px rgba(57, 255, 20, 0.3);
287
+ }
288
+
289
+ /* Virtual Joystick */
290
+ .joystick-zone {
291
+ position: fixed;
292
+ bottom: 80px;
293
+ left: 80px;
294
+ width: 140px;
295
+ height: 140px;
296
+ z-index: 50;
297
+ }
298
+
299
+ .joystick-base {
300
+ position: absolute;
301
+ width: 120px;
302
+ height: 120px;
303
+ border: 2px solid rgba(0, 240, 255, 0.3);
304
+ border-radius: 50%;
305
+ background: rgba(0, 240, 255, 0.05);
306
+ }
307
+
308
+ .joystick-stick {
309
+ position: absolute;
310
+ width: 50px;
311
+ height: 50px;
312
+ background: var(--neon-cyan);
313
+ border-radius: 50%;
314
+ box-shadow: 0 0 20px var(--neon-cyan);
315
+ top: 50%;
316
+ left: 50%;
317
+ transform: translate(-50%, -50%);
318
+ transition: none;
319
+ }
320
+
321
+ /* Mobile Controls */
322
+ .action-btn {
323
+ position: fixed;
324
+ width: 70px;
325
+ height: 70px;
326
+ border-radius: 50%;
327
+ border: 2px solid var(--neon-pink);
328
+ background: rgba(255, 0, 255, 0.1);
329
+ color: var(--neon-pink);
330
+ display: flex;
331
+ align-items: center;
332
+ justify-content: center;
333
+ font-size: 24px;
334
+ z-index: 50;
335
+ cursor: pointer;
336
+ box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
337
+ }
338
+
339
+ .action-btn:active {
340
+ background: rgba(255, 0, 255, 0.3);
341
+ transform: scale(0.95);
342
+ }
343
+
344
+ /* Damage numbers */
345
+ .damage-popup {
346
+ position: absolute;
347
+ font-family: 'Orbitron', sans-serif;
348
+ font-weight: 900;
349
+ font-size: 18px;
350
+ pointer-events: none;
351
+ animation: damage-float 1s ease-out forwards;
352
+ z-index: 60;
353
+ }
354
+
355
+ @keyframes damage-float {
356
+ 0% { opacity: 1; transform: translateY(0) scale(1); }
357
+ 100% { opacity: 0; transform: translateY(-60px) scale(1.3); }
358
+ }
359
+
360
+ /* Level up flash */
361
+ @keyframes level-flash {
362
+ 0%, 100% { opacity: 0; }
363
+ 50% { opacity: 0.3; }
364
+ }
365
+
366
+ .level-flash {
367
+ position: fixed;
368
+ inset: 0;
369
+ background: var(--neon-cyan);
370
+ pointer-events: none;
371
+ z-index: 55;
372
+ animation: level-flash 0.5s ease-out;
373
+ }
374
+
375
+ /* Grid background for screens */
376
+ .grid-bg {
377
+ background-image:
378
+ linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
379
+ linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
380
+ background-size: 50px 50px;
381
+ }
382
+
383
+ /* Particle effects container */
384
+ .particles-container {
385
+ position: fixed;
386
+ inset: 0;
387
+ pointer-events: none;
388
+ z-index: 45;
389
+ overflow: hidden;
390
+ }
391
+
392
+ .particle {
393
+ position: absolute;
394
+ border-radius: 50%;
395
+ pointer-events: none;
396
+ }
397
+
398
+ /* Responsive */
399
+ @media (max-width: 768px) {
400
+ .joystick-zone {
401
+ bottom: 60px;
402
+ left: 60px;
403
+ width: 110px;
404
+ height: 110px;
405
+ }
406
+ .joystick-base {
407
+ width: 90px;
408
+ height: 90px;
409
+ }
410
+ .joystick-stick {
411
+ width: 40px;
412
+ height: 40px;
413
+ }
414
+ .action-btn {
415
+ width: 55px;
416
+ height: 55px;
417
+ font-size: 20px;
418
+ }
419
+ }
420
+
421
+ /* Scrollbar */
422
+ ::-webkit-scrollbar {
423
+ width: 6px;
424
+ }
425
+ ::-webkit-scrollbar-track {
426
+ background: #0a0a1a;
427
+ }
428
+ ::-webkit-scrollbar-thumb {
429
+ background: var(--neon-cyan);
430
+ border-radius: 3px;
431
+ }
432
+
433
+ /* Title animation */
434
+ @keyframes title-glow {
435
+ 0%, 100% {
436
+ text-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan), 0 0 80px var(--neon-cyan);
437
+ }
438
+ 50% {
439
+ text-shadow: 0 0 30px var(--neon-pink), 0 0 60px var(--neon-pink), 0 0 100px var(--neon-pink);
440
+ }
441
+ }
442
+
443
+ .title-glow {
444
+ animation: title-glow 3s ease-in-out infinite;
445
+ }
446
+
447
+ /* Combo counter */
448
+ @keyframes combo-pop {
449
+ 0% { transform: scale(0.5); opacity: 0; }
450
+ 50% { transform: scale(1.3); }
451
+ 100% { transform: scale(1); opacity: 1; }
452
+ }
453
+
454
+ .combo-pop {
455
+ animation: combo-pop 0.3s ease-out;
456
+ }
457
+
458
+ /* Wave notification */
459
+ @keyframes wave-slide {
460
+ 0% { transform: translateX(-100%); opacity: 0; }
461
+ 20% { transform: translateX(0); opacity: 1; }
462
+ 80% { transform: translateX(0); opacity: 1; }
463
+ 100% { transform: translateX(100%); opacity: 0; }
464
+ }
465
+
466
+ .wave-notify {
467
+ animation: wave-slide 3s ease-in-out forwards;
468
+ }
469
+
470
+ /* Minimap */
471
+ .minimap {
472
+ width: 120px;
473
+ height: 120px;
474
+ border: 2px solid var(--neon-cyan);
475
+ border-radius: 8px;
476
+ background: rgba(0, 0, 0, 0.7);
477
+ position: relative;
478
+ overflow: hidden;
479
+ }
480
+
481
+ .minimap-dot {
482
+ position: absolute;
483
+ border-radius: 50%;
484
+ }
485
+
486
+ .minimap-player {
487
+ width: 6px;
488
+ height: 6px;
489
+ background: var(--neon-cyan);
490
+ box-shadow: 0 0 6px var(--neon-cyan);
491
+ }
492
+
493
+ .minimap-enemy {
494
+ width: 4px;
495
+ height: 4px;
496
+ background: var(--neon-red);
497
+ }
498
+
499
+ .minimap-orb {
500
+ width: 3px;
501
+ height: 3px;
502
+ background: var(--neon-green);
503
+ }
504
+
505
+ /* Stats display */
506
+ .stat-row {
507
+ display: flex;
508
+ align-items: center;
509
+ gap: 8px;
510
+ padding: 4px 0;
511
+ }
512
+
513
+ .stat-icon {
514
+ width: 24px;
515
+ height: 24px;
516
+ display: flex;
517
+ align-items: center;
518
+ justify-content: center;
519
+ border-radius: 4px;
520
+ font-size: 12px;
521
+ }
522
+
523
+ /* Kill feed */
524
+ .kill-feed {
525
+ position: fixed;
526
+ top: 80px;
527
+ right: 20px;
528
+ z-index: 50;
529
+ display: flex;
530
+ flex-direction: column;
531
+ gap: 4px;
532
+ align-items: flex-end;
533
+ }
534
+
535
+ .kill-entry {
536
+ background: rgba(0, 0, 0, 0.7);
537
+ border-right: 3px solid var(--neon-green);
538
+ padding: 4px 12px;
539
+ border-radius: 4px 0 0 4px;
540
+ font-size: 12px;
541
+ color: #fff;
542
+ animation: kill-slide 2s ease-out forwards;
543
+ }
544
+
545
+ @keyframes kill-slide {
546
+ 0% { transform: translateX(50px); opacity: 0; }
547
+ 20% { transform: translateX(0); opacity: 1; }
548
+ 80% { transform: translateX(0); opacity: 1; }
549
+ 100% { transform: translateX(50px); opacity: 0; }
550
+ }
551
+
552
+ /* Floating text */
553
+ .floating-text {
554
+ position: absolute;
555
+ font-family: 'Orbitron', sans-serif;
556
+ font-weight: 700;
557
+ pointer-events: none;
558
+ z-index: 60;
559
+ animation: float-up 1.5s ease-out forwards;
560
+ }
561
+
562
+ @keyframes float-up {
563
+ 0% { opacity: 1; transform: translateY(0); }
564
+ 100% { opacity: 0; transform: translateY(-80px); }
565
+ }
566
+ </style>
567
+ </head>
568
+ <body>
569
+ <!-- CRT Overlay -->
570
+ <div class="crt-overlay"></div>
571
+
572
+ <!-- Particles Container -->
573
+ <div class="particles-container" id="particlesContainer"></div>
574
+
575
+ <!-- Game Canvas -->
576
+ <canvas id="gameCanvas"></canvas>
577
+
578
+ <!-- Kill Feed -->
579
+ <div class="kill-feed" id="killFeed"></div>
580
+
581
+ <!-- START SCREEN -->
582
+ <div class="screen grid-bg" id="startScreen">
583
+ <div class="scan-line"></div>
584
+ <div class="text-center px-4">
585
+ <div class="mb-2">
586
+ <span class="text-xs tracking-[6px] text-gray-500 uppercase">Built with</span>
587
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs tracking-[6px] text-cyan-400 hover:text-cyan-300 uppercase transition-colors ml-1">anycoder</a>
588
+ </div>
589
+ <h1 class="text-5xl md:text-7xl font-black mb-2 title-glow" style="font-family: 'Orbitron', sans-serif;">
590
+ <span class="neon-text-cyan">NEON</span>
591
+ <span class="neon-text-pink">SURVIVOR</span>
592
+ </h1>
593
+ <p class="text-gray-400 text-sm md:text-base tracking-[4px] mb-8 uppercase">Cyberpunk Zombie Survival</p>
594
+
595
+ <div class="flex flex-col items-center gap-4 mb-8">
596
+ <div class="neon-box rounded-lg p-4 max-w-md w-full">
597
+ <div class="grid grid-cols-2 gap-3 text-xs text-gray-300">
598
+ <div class="flex items-center gap-2">
599
+ <i class="fas fa-keyboard text-cyan-400"></i>
600
+ <span>WASD / Arrows to Move</span>
601
+ </div>
602
+ <div class="flex items-center gap-2">
603
+ <i class="fas fa-mouse text-pink-400"></i>
604
+ <span>Auto-aims nearest enemy</span>
605
+ </div>
606
+ <div class="flex items-center gap-2">
607
+ <i class="fas fa-bolt text-yellow-400"></i>
608
+ <span>Collect orbs to level up</span>
609
+ </div>
610
+ <div class="flex items-center gap-2">
611
+ <i class="fas fa-skull text-red-400"></i>
612
+ <span>Survive endless waves</span>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="flex flex-col sm:flex-row gap-4">
619
+ <button class="neon-btn" id="startBtn">
620
+ <i class="fas fa-play mr-2"></i>Start Game
621
+ </button>
622
+ <button class="neon-btn neon-btn-pink" id="settingsBtn">
623
+ <i class="fas fa-cog mr-2"></i>Settings
624
+ </button>
625
+ </div>
626
+
627
+ <div class="mt-8 text-xs text-gray-600 tracking-wider">
628
+ <p>v2.0.1 | Endless Survival Mode</p>
629
+ </div>
630
+ </div>
631
+ </div>
632
+
633
+ <!-- SETTINGS SCREEN -->
634
+ <div class="screen grid-bg hidden" id="settingsScreen">
635
+ <div class="text-center px-4 max-w-md w-full">
636
+ <h2 class="text-3xl font-bold neon-text-cyan mb-6" style="font-family: 'Orbitron'">SETTINGS</h2>
637
+
638
+ <div class="neon-box rounded-lg p-6 mb-6 space-y-4">
639
+ <div class="flex items-center justify-between">
640
+ <span class="text-gray-300 text-sm">Sound Effects</span>
641
+ <button class="w-12 h-6 rounded-full bg-cyan-900 relative transition-colors" id="soundToggle">
642
+ <div class="w-5 h-5 rounded-full bg-cyan-400 absolute top-0.5 left-0.5 transition-transform" id="soundKnob"></div>
643
+ </button>
644
+ </div>
645
+ <div class="flex items-center justify-between">
646
+ <span class="text-gray-300 text-sm">Music</span>
647
+ <button class="w-12 h-6 rounded-full bg-cyan-900 relative transition-colors" id="musicToggle">
648
+ <div class="w-5 h-5 rounded-full bg-cyan-400 absolute top-0.5 left-0.5 transition-transform" id="musicKnob"></div>
649
+ </button>
650
+ </div>
651
+ <div class="flex items-center justify-between">
652
+ <span class="text-gray-300 text-sm">Screen Shake</span>
653
+ <button class="w-12 h-6 rounded-full bg-cyan-900 relative transition-colors" id="shakeToggle">
654
+ <div class="w-5 h-5 rounded-full bg-cyan-400 absolute top-0.5 left-0.5 transition-transform" id="shakeKnob"></div>
655
+ </button>
656
+ </div>
657
+ <div class="flex items-center justify-between">
658
+ <span class="text-gray-300 text-sm">Show Minimap</span>
659
+ <button class="w-12 h-6 rounded-full bg-cyan-900 relative transition-colors" id="minimapToggle">
660
+ <div class="w-5 h-5 rounded-full bg-cyan-400 absolute top-0.5 left-0.5 transition-transform" id="minimapKnob"></div>
661
+ </button>
662
+ </div>
663
+ <div class="flex items-center justify-between">
664
+ <span class="text-gray-300 text-sm">Particle Effects</span>
665
+ <select class="bg-gray-900 border border-cyan-500/30 rounded px-3 py-1 text-sm text-cyan-400" id="particleSelect">
666
+ <option value="high">High</option>
667
+ <option value="medium">Medium</option>
668
+ <option value="low">Low</option>
669
+ </select>
670
+ </div>
671
+ </div>
672
+
673
+ <button class="neon-btn" id="backBtn">
674
+ <i class="fas fa-arrow-left mr-2"></i>Back
675
+ </button>
676
+ </div>
677
+ </div>
678
+
679
+ <!-- HUD (Heads Up Display) -->
680
+ <div id="hud" class="hidden" style="position: fixed; inset: 0; pointer-events: none; z-index: 40;">
681
+ <!-- Top Left: Stats -->
682
+ <div class="absolute top-4 left-4 space-y-2">
683
+ <div class="hud-panel">
684
+ <div class="flex items-center gap-3 mb-1">
685
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-white text-xs font-bold" id="levelBadge">1</div>
686
+ <div class="flex-1 min-w-[140px]">
687
+ <div class="flex justify-between text-xs mb-0.5">
688
+ <span class="text-cyan-400 font-bold">LVL <span id="levelText">1</span></span>
689
+ <span class="text-gray-400" id="xpText">0/100</span>
690
+ </div>
691
+ <div class="xp-bar">
692
+ <div class="xp-fill" id="xpFill" style="width: 0%"></div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ <div class="hud-panel">
698
+ <div class="flex items-center gap-2 mb-1">
699
+ <i class="fas fa-heart text-red-500 text-xs"></i>
700
+ <div class="flex-1">
701
+ <div class="hp-bar">
702
+ <div class="hp-fill" id="hpFill" style="width: 100%"></div>
703
+ </div>
704
+ </div>
705
+ <span class="text-xs text-red-400 font-bold" id="hpText">100/100</span>
706
+ </div>
707
+ </div>
708
+ <div class="hud-panel flex items-center gap-4 text-xs">
709
+ <div class="flex items-center gap-1">
710
+ <i class="fas fa-clock text-yellow-400"></i>
711
+ <span class="text-yellow-400 font-bold" id="timeText">00:00</span>
712
+ </div>
713
+ <div class="flex items-center gap-1">
714
+ <i class="fas fa-skull text-red-400"></i>
715
+ <span class="text-red-400 font-bold" id="killsText">0</span>
716
+ </div>
717
+ <div class="flex items-center gap-1">
718
+ <i class="fas fa-wave-square text-pink-400"></i>
719
+ <span class="text-pink-400 font-bold" id="waveText">Wave 1</span>
720
+ </div>
721
+ </div>
722
+ </div>
723
+
724
+ <!-- Top Right: Minimap & Combo -->
725
+ <div class="absolute top-4 right-4 space-y-2">
726
+ <div class="hud-panel" id="minimapPanel">
727
+ <div class="minimap" id="minimap">
728
+ <div class="minimap-dot minimap-player" id="minimapPlayer"></div>
729
+ </div>
730
+ </div>
731
+ <div class="hud-panel text-center hidden" id="comboPanel">
732
+ <div class="text-2xl font-black neon-text-yellow" id="comboCount" style="font-family: 'Orbitron'">x1</div>
733
+ <div class="text-xs text-yellow-400">COMBO</div>
734
+ </div>
735
+ </div>
736
+
737
+ <!-- Bottom: Weapons & Skills -->
738
+ <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2" id="weaponBar">
739
+ <!-- Weapon slots generated by JS -->
740
+ </div>
741
+
742
+ <!-- Bottom Right: Mobile Controls -->
743
+ <div class="joystick-zone md:hidden" id="joystickZone">
744
+ <div class="joystick-base"></div>
745
+ <div class="joystick-stick" id="joystickStick"></div>
746
+ </div>
747
+
748
+ <!-- Action buttons for mobile -->
749
+ <div class="md:hidden">
750
+ <div class="action-btn" style="bottom: 80px; right: 80px;" id="dashBtn">
751
+ <i class="fas fa-bolt"></i>
752
+ </div>
753
+ <div class="action-btn" style="bottom: 160px; right: 40px;" id="ultBtn">
754
+ <i class="fas fa-radiation"></i>
755
+ </div>
756
+ </div>
757
+
758
+ <!-- Center notifications -->
759
+ <div class="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none" id="centerNotify"></div>
760
+ </div>
761
+
762
+ <!-- LEVEL UP SCREEN -->
763
+ <div class="screen hidden" id="levelUpScreen" style="background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);">
764
+ <div class="text-center px-4 max-w-2xl w-full">
765
+ <h2 class="text-4xl font-black neon-text-green mb-2 float" style="font-family: 'Orbitron'">LEVEL UP!</h2>
766
+ <p class="text-gray-400 text-sm mb-8 tracking-wider">Choose your upgrade</p>
767
+
768
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="skillCards">
769
+ <!-- Generated by JS -->
770
+ </div>
771
+ </div>
772
+ </div>
773
+
774
+ <!-- PAUSE SCREEN -->
775
+ <div class="screen hidden" id="pauseScreen" style="background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);">
776
+ <div class="text-center px-4">
777
+ <h2 class="text-4xl font-bold neon-text-cyan mb-8" style="font-family: 'Orbitron'">PAUSED</h2>
778
+ <div class="flex flex-col gap-4">
779
+ <button class="neon-btn" id="resumeBtn">
780
+ <i class="fas fa-play mr-2"></i>Resume
781
+ </button>
782
+ <button class="neon-btn neon-btn-pink" id="quitBtn">
783
+ <i class="fas fa-door-open mr-2"></i>Quit to Menu
784
+ </button>
785
+ </div>
786
+ </div>
787
+ </div>
788
+
789
+ <!-- GAME OVER SCREEN -->
790
+ <div class="screen hidden" id="gameOverScreen" style="background: rgba(0,0,0,0.9);">
791
+ <div class="text-center px-4 max-w-md w-full">
792
+ <h2 class="text-5xl font-black neon-text-red mb-4" style="font-family: 'Orbitron'">ELIMINATED</h2>
793
+
794
+ <div class="neon-box-pink rounded-lg p-6 mb-6 space-y-3">
795
+ <div class="flex justify-between text-sm">
796
+ <span class="text-gray-400">Survival Time</span>
797
+ <span class="neon-text-cyan font-bold" id="finalTime">00:00</span>
798
+ </div>
799
+ <div class="flex justify-between text-sm">
800
+ <span class="text-gray-400">Enemies Defeated</span>
801
+ <span class="neon-text-green font-bold" id="finalKills">0</span>
802
+ </div>
803
+ <div class="flex justify-between text-sm">
804
+ <span class="text-gray-400">Level Reached</span>
805
+ <span class="neon-text-yellow font-bold" id="finalLevel">1</span>
806
+ </div>
807
+ <div class="flex justify-between text-sm">
808
+ <span class="text-gray-400">Max Combo</span>
809
+ <span class="neon-text-pink font-bold" id="finalCombo">x1</span>
810
+ </div>
811
+ <div class="flex justify-between text-sm">
812
+ <span class="text-gray-400">Waves Survived</span>
813
+ <span class="neon-text-cyan font-bold" id="finalWave">1</span>
814
+ </div>
815
+ <div class="border-t border-gray-700 pt-2 flex justify-between text-base">
816
+ <span class="text-gray-300 font-bold">SCORE</span>
817
+ <span class="neon-text-green font-black text-xl" id="finalScore">0</span>
818
+ </div>
819
+ </div>
820
+
821
+ <div class="flex flex-col sm:flex-row gap-4">
822
+ <button class="neon-btn" id="restartBtn">
823
+ <i class="fas fa-redo mr-2"></i>Try Again
824
+ </button>
825
+ <button class="neon-btn neon-btn-pink" id="menuBtn">
826
+ <i class="fas fa-home mr-2"></i>Main Menu
827
+ </button>
828
+ </div>
829
+ </div>
830
+ </div>
831
+
832
+ <!-- Wave Notification -->
833
+ <div class="fixed top-1/4 left-0 right-0 text-center pointer-events-none z-50 hidden" id="waveNotify">
834
+ <div class="wave-notify inline-block">
835
+ <h3 class="text-3xl md:text-5xl font-black neon-text-pink" style="font-family: 'Orbitron'" id="waveNotifyText">WAVE 1</h3>
836
+ <p class="text-gray-400 text-sm mt-1" id="waveNotifySub">The horde approaches...</p>
837
+ </div>
838
+ </div>
839
+
840
+ <script>
841
+ // ==================== GAME ENGINE ====================
842
+ const canvas = document.getElementById('gameCanvas');
843
+ const ctx = canvas.getContext('2d');
844
+
845
+ // Game State
846
+ const STATE = {
847
+ MENU: 0,
848
+ PLAYING: 1,
849
+ PAUSED: 2,
850
+ LEVEL_UP: 3,
851
+ GAME_OVER: 4
852
+ };
853
+
854
+ let gameState = STATE.MENU;
855
+ let lastTime = 0;
856
+ let gameTime = 0;
857
+ let frameCount = 0;
858
+
859
+ // Settings
860
+ const settings = {
861
+ sound: true,
862
+ music: false,
863
+ shake: true,
864
+ minimap: true,
865
+ particles: 'high'
866
+ };
867
+
868
+ // Camera
869
+ const camera = { x: 0, y: 0, shakeX: 0, shakeY: 0, shakeIntensity: 0 };
870
+
871
+ // World
872
+ const WORLD_SIZE = 4000;
873
+ const TILE_SIZE = 80;
874
+
875
+ // Player
876
+ const player = {
877
+ x: WORLD_SIZE / 2,
878
+ y: WORLD_SIZE / 2,
879
+ radius: 18,
880
+ speed: 200,
881
+ hp: 100,
882
+ maxHp: 100,
883
+ xp: 0,
884
+ xpToLevel: 100,
885
+ level: 1,
886
+ kills: 0,
887
+ combo: 0,
888
+ maxCombo: 1,
889
+ comboTimer: 0,
890
+ invincible: 0,
891
+ dashCooldown: 0,
892
+ ultCharge: 0,
893
+ ultMax: 100,
894
+ weapons: [],
895
+ skills: {
896
+ damage: 1,
897
+ speed: 1,
898
+ hpRegen: 0,
899
+ pickupRange: 80,
900
+ critChance: 0.05,
901
+ critDamage: 1.5,
902
+ fireRate: 1,
903
+ projectileSpeed: 1,
904
+ pierce: 0,
905
+ area: 1
906
+ },
907
+ facing: 0
908
+ };
909
+
910
+ // Weapons
911
+ const WEAPON_TYPES = {
912
+ PISTOL: { name: 'Plasma Pistol', icon: 'fa-gun', color: '#00f0ff', damage: 12, fireRate: 400, projectileSpeed: 400, pierce: 0, auto: true },
913
+ SHOTGUN: { name: 'Scatter Cannon', icon: 'fa-bullseye', color: '#ff00ff', damage: 8, fireRate: 800, projectileSpeed: 350, pierce: 1, count: 5, spread: 0.3, auto: false },
914
+ RIFLE: { name: 'Pulse Rifle', icon: 'fa-crosshairs', color: '#39ff14', damage: 6, fireRate: 150, projectileSpeed: 500, pierce: 1, auto: true },
915
+ LASER: { name: 'Beam Cutter', icon: 'fa-bolt', color: '#ffff00', damage: 3, fireRate: 50, projectileSpeed: 800, pierce: 3, auto: true },
916
+ ROCKET: { name: 'RPG-7', icon: 'fa-rocket', color: '#ff073a', damage: 40, fireRate: 1500, projectileSpeed: 250, pierce: 0, explosion: 80, auto: false },
917
+ ORBITAL: { name: 'Orbital Drones', icon: 'fa-satellite', color: '#00f0ff', damage: 15, fireRate: 0, orbital: true, orbitRadius: 60, orbitSpeed: 3, auto: true }
918
+ };
919
+
920
+ // Enemies
921
+ const ENEMY_TYPES = {
922
+ WALKER: { name: 'Walker', hp: 30, damage: 10, speed: 80, radius: 16, color: '#ff4444', xp: 10, score: 10 },
923
+ RUNNER: { name: 'Runner', hp: 20, damage: 15, speed: 160, radius: 14, color: '#ff8800', xp: 15, score: 20 },
924
+ TANK: { name: 'Tank', hp: 120, damage: 25, speed: 50, radius: 28, color: '#8800ff', xp: 40, score: 50 },
925
+ SPITTER: { name: 'Spitter', hp: 40, damage: 12, speed: 60, radius: 16, color: '#00ff44', xp: 20, score: 30, ranged: true, projectileSpeed: 200 },
926
+ BOSS: { name: 'Overlord', hp: 500, damage: 40, speed: 40, radius: 45, color: '#ff0088', xp: 200, score: 200, boss: true }
927
+ };
928
+
929
+ // Arrays
930
+ let enemies = [];
931
+ let projectiles = [];
932
+ let particles = [];
933
+ let orbs = [];
934
+ let enemyProjectiles = [];
935
+ let damageNumbers = [];
936
+ let floatingTexts = [];
937
+
938
+ // Wave System
939
+ let wave = 1;
940
+ let waveTimer = 0;
941
+ let waveDuration = 60;
942
+ let spawnTimer = 0;
943
+ let bossSpawned = false;
944
+
945
+ // Input
946
+ const keys = {};
947
+ const mouse = { x: 0, y: 0, worldX: 0, worldY: 0, down: false };
948
+ const joystick = { active: false, dx: 0, dy: 0, startX: 0, startY: 0 };
949
+
950
+ // Resize
951
+ function resize() {
952
+ canvas.width = window.innerWidth;
953
+ canvas.height = window.innerHeight;
954
+ }
955
+ window.addEventListener('resize', resize);
956
+ resize();
957
+
958
+ // ==================== INPUT HANDLING ====================
959
+ document.addEventListener('keydown', e => {
960
+ keys[e.code] = true;
961
+ if (e.code === 'Escape' && gameState === STATE.PLAYING) {
962
+ pauseGame();
963
+ }
964
+ if (e.code === 'KeyP' && gameState === STATE.PLAYING) {
965
+ pauseGame();
966
+ }
967
+ });
968
+ document.addEventListener('keyup', e => keys[e.code] = false);
969
+
970
+ canvas.addEventListener('mousemove', e => {
971
+ mouse.x = e.clientX;
972
+ mouse.y = e.clientY;
973
+ mouse.worldX = e.clientX + camera.x;
974
+ mouse.worldY = e.clientY + camera.y;
975
+ });
976
+ canvas.addEventListener('mousedown', () => mouse.down = true);
977
+ canvas.addEventListener('mouseup', () => mouse.down = false);
978
+
979
+ // Touch / Joystick
980
+ const joystickZone = document.getElementById('joystickZone');
981
+ const joystickStick = document.getElementById('joystickStick');
982
+
983
+ joystickZone.addEventListener('touchstart', e => {
984
+ e.preventDefault();
985
+ const touch = e.touches[0];
986
+ const rect = joystickZone.getBoundingClientRect();
987
+ joystick.active = true;
988
+ joystick.startX = rect.left + rect.width / 2;
989
+ joystick.startY = rect.top + rect.height / 2;
990
+ updateJoystick(touch.clientX, touch.clientY);
991
+ }, { passive: false });
992
+
993
+ joystickZone.addEventListener('touchmove', e => {
994
+ e.preventDefault();
995
+ if (joystick.active) {
996
+ updateJoystick(e.touches[0].clientX, e.touches[0].clientY);
997
+ }
998
+ }, { passive: false });
999
+
1000
+ joystickZone.addEventListener('touchend', e => {
1001
+ e.preventDefault();
1002
+ joystick.active = false;
1003
+ joystick.dx = 0;
1004
+ joystick.dy = 0;
1005
+ joystickStick.style.transform = 'translate(-50%, -50%)';
1006
+ });
1007
+
1008
+ function updateJoystick(x, y) {
1009
+ const maxDist = 45;
1010
+ let dx = x - joystick.startX;
1011
+ let dy = y - joystick.startY;
1012
+ const dist = Math.sqrt(dx * dx + dy * dy);
1013
+ if (dist > maxDist) {
1014
+ dx = (dx / dist) * maxDist;
1015
+ dy = (dy / dist) * maxDist;
1016
+ }
1017
+ joystick.dx = dx / maxDist;
1018
+ joystick.dy = dy / maxDist;
1019
+ joystickStick.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px))`;
1020
+ }
1021
+
1022
+ // Mobile action buttons
1023
+ document.getElementById('dashBtn').addEventListener('touchstart', e => {
1024
+ e.preventDefault();
1025
+ dash();
1026
+ });
1027
+ document.getElementById('ultBtn').addEventListener('touchstart', e => {
1028
+ e.preventDefault();
1029
+ useUltimate();
1030
+ });
1031
+
1032
+ // ==================== SCREEN MANAGEMENT ====================
1033
+ function showScreen(id) {
1034
+ document.querySelectorAll('.screen').forEach(s => s.classList.add('hidden'));
1035
+ document.getElementById(id).classList.remove('hidden');
1036
+ }
1037
+
1038
+ function hideAllScreens() {
1039
+ document.querySelectorAll('.screen').forEach(s => s.classList.add('hidden'));
1040
+ }
1041
+
1042
+ // Start Screen
1043
+ document.getElementById('startBtn').addEventListener('click', startGame);
1044
+ document.getElementById('settingsBtn').addEventListener('click', () => showScreen('settingsScreen'));
1045
+ document.getElementById('backBtn').addEventListener('click', () => showScreen('startScreen'));
1046
+
1047
+ // Settings toggles
1048
+ function setupToggle(id, knobId, settingKey) {
1049
+ const btn = document.getElementById(id);
1050
+ const knob = document.getElementById(knobId);
1051
+ btn.addEventListener('click', () => {
1052
+ settings[settingKey] = !settings[settingKey];
1053
+ btn.style.background = settings[settingKey] ? '#004444' : '#222';
1054
+ knob.style.transform = settings[settingKey] ? 'translateX(24px)' : 'translateX(0)';
1055
+ knob.style.background = settings[settingKey] ? 'var(--neon-cyan)' : '#666';
1056
+ });
1057
+ // Init
1058
+ btn.style.background = settings[settingKey] ? '#004444' : '#222';
1059
+ knob.style.transform = settings[settingKey] ? 'translateX(24px)' : 'translateX(0)';
1060
+ knob.style.background = settings[settingKey] ? 'var(--neon-cyan)' : '#666';
1061
+ }
1062
+
1063
+ setupToggle('soundToggle', 'soundKnob', 'sound');
1064
+ setupToggle('musicToggle', 'musicKnob', 'music');
1065
+ setupToggle('shakeToggle', 'shakeKnob', 'shake');
1066
+ setupToggle('minimapToggle', 'minimapKnob', 'minimap');
1067
+
1068
+ document.getElementById('particleSelect').addEventListener('change', e => {
1069
+ settings.particles = e.target.value;
1070
+ });
1071
+
1072
+ // Pause
1073
+ document.getElementById('resumeBtn').addEventListener('click', resumeGame);
1074
+ document.getElementById('quitBtn').addEventListener('click', () => {
1075
+ gameState = STATE.M