Hugging Face's logo

Spaces:
MagicBullets
/
dosegame-com
Running

App Files Community
MagicBullets commited on
Commit
9203a64
·
verified ·
1 Parent(s): 082c7f6

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1305 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dosegame Com
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: purple
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: dosegame-com
3
+ emoji: 🐳
4
+ colorFrom: purple
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,1305 @@
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>DoseGame - Retro Arcade Gaming</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
+ <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --neon-purple: #b967ff;
13
+ --neon-cyan: #00ffff;
14
+ --dark-bg: #0a0a1a;
15
+ }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
+ background-color: var(--dark-bg);
26
+ color: white;
27
+ overflow-x: hidden;
28
+ position: relative;
29
+ min-height: 100vh;
30
+ background-image:
31
+ radial-gradient(circle at 10% 20%, rgba(185, 103, 255, 0.1) 0%, transparent 20%),
32
+ radial-gradient(circle at 90% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 20%);
33
+ }
34
+
35
+ /* CRT Effect */
36
+ .crt::before {
37
+ content: " ";
38
+ display: block;
39
+ position: fixed;
40
+ top: 0;
41
+ left: 0;
42
+ bottom: 0;
43
+ right: 0;
44
+ background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
45
+ linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
46
+ z-index: 1000;
47
+ background-size: 100% 2px, 3px 100%;
48
+ pointer-events: none;
49
+ animation: flicker 0.15s infinite;
50
+ }
51
+
52
+ @keyframes flicker {
53
+ 0% { opacity: 0.8; }
54
+ 50% { opacity: 0.6; }
55
+ 100% { opacity: 0.8; }
56
+ }
57
+
58
+ /* Pixel Art Header */
59
+ .pixel-header {
60
+ font-family: 'Press Start 2P', cursive;
61
+ text-transform: uppercase;
62
+ text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
63
+ animation: neon-pulse 2s infinite alternate;
64
+ }
65
+
66
+ @keyframes neon-pulse {
67
+ 0% { text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple); }
68
+ 100% { text-shadow: 0 0 15px var(--neon-purple), 0 0 30px var(--neon-purple), 0 0 40px var(--neon-cyan); }
69
+ }
70
+
71
+ /* Neon Buttons */
72
+ .neon-btn {
73
+ transition: all 0.3s ease;
74
+ border: 2px solid var(--neon-purple);
75
+ box-shadow: 0 0 10px var(--neon-purple);
76
+ }
77
+
78
+ .neon-btn:hover {
79
+ background-color: var(--neon-purple);
80
+ box-shadow: 0 0 20px var(--neon-purple), 0 0 30px var(--neon-cyan);
81
+ transform: translateY(-2px);
82
+ }
83
+
84
+ .neon-cyan-btn {
85
+ border-color: var(--neon-cyan);
86
+ box-shadow: 0 0 10px var(--neon-cyan);
87
+ }
88
+
89
+ .neon-cyan-btn:hover {
90
+ background-color: var(--neon-cyan);
91
+ box-shadow: 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-purple);
92
+ }
93
+
94
+ /* Game Cards */
95
+ .game-card {
96
+ transition: all 0.3s ease;
97
+ background: rgba(20, 20, 40, 0.7);
98
+ border: 1px solid rgba(185, 103, 255, 0.3);
99
+ overflow: hidden;
100
+ }
101
+
102
+ .game-card:hover {
103
+ transform: translateY(-5px);
104
+ border-color: var(--neon-purple);
105
+ box-shadow: 0 0 20px rgba(185, 103, 255, 0.5);
106
+ }
107
+
108
+ /* Retro Inputs */
109
+ .retro-input {
110
+ background: rgba(0, 0, 0, 0.5);
111
+ border: 2px solid var(--neon-cyan);
112
+ color: white;
113
+ padding: 0.5rem 1rem;
114
+ }
115
+
116
+ .retro-input:focus {
117
+ outline: none;
118
+ border-color: var(--neon-purple);
119
+ box-shadow: 0 0 10px var(--neon-purple);
120
+ }
121
+
122
+ /* Particle Background */
123
+ #particles-js {
124
+ position: fixed;
125
+ width: 100%;
126
+ height: 100%;
127
+ top: 0;
128
+ left: 0;
129
+ z-index: -1;
130
+ }
131
+
132
+ /* Custom Scrollbar */
133
+ ::-webkit-scrollbar {
134
+ width: 8px;
135
+ }
136
+
137
+ ::-webkit-scrollbar-track {
138
+ background: rgba(10, 10, 26, 0.8);
139
+ }
140
+
141
+ ::-webkit-scrollbar-thumb {
142
+ background: var(--neon-purple);
143
+ border-radius: 4px;
144
+ }
145
+
146
+ ::-webkit-scrollbar-thumb:hover {
147
+ background: var(--neon-cyan);
148
+ }
149
+
150
+ /* Retro Radio Buttons */
151
+ .retro-radio input[type="radio"] {
152
+ display: none;
153
+ }
154
+
155
+ .retro-radio label {
156
+ display: inline-block;
157
+ padding: 0.5rem 1rem;
158
+ border: 2px solid var(--neon-cyan);
159
+ cursor: pointer;
160
+ transition: all 0.3s;
161
+ }
162
+
163
+ .retro-radio input[type="radio"]:checked + label {
164
+ background-color: var(--neon-cyan);
165
+ color: black;
166
+ font-weight: bold;
167
+ }
168
+
169
+ /* Pixel Art Elements */
170
+ .pixel-art {
171
+ image-rendering: pixelated;
172
+ image-rendering: -moz-crisp-edges;
173
+ image-rendering: crisp-edges;
174
+ }
175
+
176
+ /* Asteroids Game Canvas */
177
+ #asteroids-canvas {
178
+ border: 3px solid var(--neon-purple);
179
+ box-shadow: 0 0 20px rgba(185, 103, 255, 0.5);
180
+ background: black;
181
+ }
182
+
183
+ /* Achievement Badges */
184
+ .achievement-badge {
185
+ width: 80px;
186
+ height: 80px;
187
+ border-radius: 50%;
188
+ background: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
189
+ display: flex;
190
+ align-items: center;
191
+ justify-content: center;
192
+ font-size: 2rem;
193
+ box-shadow: 0 0 10px var(--neon-purple);
194
+ position: relative;
195
+ }
196
+
197
+ .achievement-badge::after {
198
+ content: "";
199
+ position: absolute;
200
+ width: 70px;
201
+ height: 70px;
202
+ border-radius: 50%;
203
+ background: var(--dark-bg);
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: center;
207
+ }
208
+
209
+ .achievement-badge i {
210
+ z-index: 1;
211
+ }
212
+
213
+ /* Mobile Navigation */
214
+ .mobile-menu {
215
+ transform: translateX(100%);
216
+ transition: transform 0.3s ease;
217
+ }
218
+
219
+ .mobile-menu.active {
220
+ transform: translateX(0);
221
+ }
222
+
223
+ /* Customization Preview */
224
+ .customization-preview {
225
+ border: 3px dashed var(--neon-cyan);
226
+ background: rgba(0, 0, 0, 0.5);
227
+ }
228
+
229
+ /* Shopping Cart */
230
+ .cart-item {
231
+ border-bottom: 1px solid rgba(185, 103, 255, 0.3);
232
+ }
233
+
234
+ .cart-item:last-child {
235
+ border-bottom: none;
236
+ }
237
+ </style>
238
+ </head>
239
+ <body class="crt">
240
+ <!-- Particle Background -->
241
+ <div id="particles-js"></div>
242
+
243
+ <!-- Header -->
244
+ <header class="sticky top-0 z-50 bg-black bg-opacity-80 backdrop-blur-sm border-b border-purple-500">
245
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
246
+ <div class="flex items-center">
247
+ <div class="pixel-header text-2xl md:text-3xl">DOSEGAME</div>
248
+ </div>
249
+
250
+ <!-- Desktop Navigation -->
251
+ <nav class="hidden md:flex space-x-6">
252
+ <a href="#hero" class="text-purple-300 hover:text-cyan-300 transition">Home</a>
253
+ <a href="#library" class="text-purple-300 hover:text-cyan-300 transition">Games</a>
254
+ <a href="#customize" class="text-purple-300 hover:text-cyan-300 transition">Customize</a>
255
+ <a href="#shop" class="text-purple-300 hover:text-cyan-300 transition">Shop</a>
256
+ <a href="#asteroids" class="text-purple-300 hover:text-cyan-300 transition">Play Asteroids</a>
257
+ </nav>
258
+
259
+ <div class="flex items-center space-x-4">
260
+ <div class="relative">
261
+ <button id="cartButton" class="text-2xl text-cyan-300 relative">
262
+ <i class="fas fa-shopping-cart"></i>
263
+ <span id="cartCount" class="absolute -top-2 -right-2 bg-purple-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
264
+ </button>
265
+ </div>
266
+
267
+ <div class="hidden md:flex space-x-2">
268
+ <button class="neon-btn px-4 py-1 rounded">Login</button>
269
+ <button class="neon-cyan-btn px-4 py-1 rounded">Register</button>
270
+ </div>
271
+
272
+ <!-- Mobile Menu Button -->
273
+ <button id="mobileMenuButton" class="md:hidden text-2xl text-purple-300">
274
+ <i class="fas fa-bars"></i>
275
+ </button>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Mobile Navigation -->
280
+ <div id="mobileMenu" class="mobile-menu fixed top-0 right-0 h-full w-64 bg-black bg-opacity-95 backdrop-blur-lg z-50 p-6">
281
+ <div class="flex justify-end mb-8">
282
+ <button id="closeMenuButton" class="text-2xl text-purple-300">
283
+ <i class="fas fa-times"></i>
284
+ </button>
285
+ </div>
286
+ <nav class="flex flex-col space-y-6">
287
+ <a href="#hero" class="text-purple-300 hover:text-cyan-300 transition text-xl">Home</a>
288
+ <a href="#library" class="text-purple-300 hover:text-cyan-300 transition text-xl">Games</a>
289
+ <a href="#customize" class="text-purple-300 hover:text-cyan-300 transition text-xl">Customize</a>
290
+ <a href="#shop" class="text-purple-300 hover:text-cyan-300 transition text-xl">Shop</a>
291
+ <a href="#asteroids" class="text-purple-300 hover:text-cyan-300 transition text-xl">Play Asteroids</a>
292
+ <div class="pt-4 border-t border-purple-800">
293
+ <button class="neon-btn w-full py-2 rounded mb-3">Login</button>
294
+ <button class="neon-cyan-btn w-full py-2 rounded">Register</button>
295
+ </div>
296
+ </nav>
297
+ </div>
298
+ </header>
299
+
300
+ <!-- Hero Section -->
301
+ <section id="hero" class="py-16 md:py-24 relative">
302
+ <div class="container mx-auto px-4 text-center">
303
+ <h1 class="pixel-header text-3xl md:text-5xl mb-8 animate-pulse">
304
+ Play Classic Arcade Games Online - Free!
305
+ </h1>
306
+
307
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
308
+ <!-- Pac-Man Card -->
309
+ <div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
310
+ <div class="bg-gray-800 h-48 flex items-center justify-center">
311
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
312
+ </div>
313
+ <div class="p-4">
314
+ <h3 class="text-xl font-bold mb-2">Pac-Man</h3>
315
+ <button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Asteroids Card -->
320
+ <div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
321
+ <div class="bg-gray-800 h-48 flex items-center justify-center">
322
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
323
+ </div>
324
+ <div class="p-4">
325
+ <h3 class="text-xl font-bold mb-2">Asteroids</h3>
326
+ <button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Space Invaders Card -->
331
+ <div class="game-card rounded-lg overflow-hidden transform transition-all duration-300">
332
+ <div class="bg-gray-800 h-48 flex items-center justify-center">
333
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
334
+ </div>
335
+ <div class="p-4">
336
+ <h3 class="text-xl font-bold mb-2">Space Invaders</h3>
337
+ <button class="neon-btn w-full py-2 rounded">PLAY NOW</button>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </section>
343
+
344
+ <!-- Game Library -->
345
+ <section id="library" class="py-16 bg-black bg-opacity-30">
346
+ <div class="container mx-auto px-4">
347
+ <h2 class="pixel-header text-3xl mb-2 text-center">Game Library</h2>
348
+ <p class="text-center text-purple-300 mb-10">Choose from our collection of classic arcade games</p>
349
+
350
+ <!-- Filters and Search -->
351
+ <div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
352
+ <div class="flex flex-wrap gap-2">
353
+ <button class="neon-cyan-btn px-4 py-1 rounded">All Games</button>
354
+ <button class="neon-btn px-4 py-1 rounded">Action</button>
355
+ <button class="neon-btn px-4 py-1 rounded">Puzzle</button>
356
+ <button class="neon-btn px-4 py-1 rounded">Classic</button>
357
+ <button class="neon-btn px-4 py-1 rounded">Most Popular</button>
358
+ </div>
359
+
360
+ <div class="relative">
361
+ <input type="text" placeholder="Search games..." class="retro-input rounded-full pl-4 pr-10 py-2 w-64">
362
+ <i class="fas fa-search absolute right-3 top-3 text-cyan-300"></i>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Game Grid -->
367
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
368
+ <!-- Example Game Card -->
369
+ <div class="game-card rounded-lg overflow-hidden">
370
+ <div class="bg-gray-800 h-40 flex items-center justify-center">
371
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
372
+ </div>
373
+ <div class="p-4">
374
+ <div class="flex justify-between items-start mb-2">
375
+ <h3 class="text-lg font-bold">Pac-Man</h3>
376
+ <div class="flex items-center">
377
+ <i class="fas fa-star text-yellow-400"></i>
378
+ <span class="ml-1">4.8</span>
379
+ </div>
380
+ </div>
381
+ <div class="flex justify-between items-center mb-3">
382
+ <span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 12.4K plays</span>
383
+ <span class="text-sm text-gray-400">1980</span>
384
+ </div>
385
+ <div class="flex gap-2">
386
+ <button class="neon-btn flex-1 py-1 rounded">PLAY</button>
387
+ <button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Additional game cards would go here -->
393
+ <!-- For brevity, I'll duplicate one card -->
394
+ <div class="game-card rounded-lg overflow-hidden">
395
+ <div class="bg-gray-800 h-40 flex items-center justify-center">
396
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
397
+ </div>
398
+ <div class="p-4">
399
+ <div class="flex justify-between items-start mb-2">
400
+ <h3 class="text-lg font-bold">Tetris</h3>
401
+ <div class="flex items-center">
402
+ <i class="fas fa-star text-yellow-400"></i>
403
+ <span class="ml-1">4.9</span>
404
+ </div>
405
+ </div>
406
+ <div class="flex justify-between items-center mb-3">
407
+ <span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 8.7K plays</span>
408
+ <span class="text-sm text-gray-400">1984</span>
409
+ </div>
410
+ <div class="flex gap-2">
411
+ <button class="neon-btn flex-1 py-1 rounded">PLAY</button>
412
+ <button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="game-card rounded-lg overflow-hidden">
418
+ <div class="bg-gray-800 h-40 flex items-center justify-center">
419
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
420
+ </div>
421
+ <div class="p-4">
422
+ <div class="flex justify-between items-start mb-2">
423
+ <h3 class="text-lg font-bold">Space Invaders</h3>
424
+ <div class="flex items-center">
425
+ <i class="fas fa-star text-yellow-400"></i>
426
+ <span class="ml-1">4.7</span>
427
+ </div>
428
+ </div>
429
+ <div class="flex justify-between items-center mb-3">
430
+ <span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 9.2K plays</span>
431
+ <span class="text-sm text-gray-400">1978</span>
432
+ </div>
433
+ <div class="flex gap-2">
434
+ <button class="neon-btn flex-1 py-1 rounded">PLAY</button>
435
+ <button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="game-card rounded-lg overflow-hidden">
441
+ <div class="bg-gray-800 h-40 flex items-center justify-center">
442
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
443
+ </div>
444
+ <div class="p-4">
445
+ <div class="flex justify-between items-start mb-2">
446
+ <h3 class="text-lg font-bold">Donkey Kong</h3>
447
+ <div class="flex items-center">
448
+ <i class="fas fa-star text-yellow-400"></i>
449
+ <span class="ml-1">4.6</span>
450
+ </div>
451
+ </div>
452
+ <div class="flex justify-between items-center mb-3">
453
+ <span class="text-sm text-gray-400"><i class="fas fa-play mr-1"></i> 6.3K plays</span>
454
+ <span class="text-sm text-gray-400">1981</span>
455
+ </div>
456
+ <div class="flex gap-2">
457
+ <button class="neon-btn flex-1 py-1 rounded">PLAY</button>
458
+ <button class="neon-cyan-btn flex-1 py-1 rounded">CUSTOMIZE</button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="text-center mt-10">
465
+ <button class="neon-cyan-btn px-6 py-2 rounded">Load More Games</button>
466
+ </div>
467
+ </div>
468
+ </section>
469
+
470
+ <!-- Customization Section -->
471
+ <section id="customize" class="py-16">
472
+ <div class="container mx-auto px-4">
473
+ <h2 class="pixel-header text-3xl mb-2 text-center">Game Customization</h2>
474
+ <p class="text-center text-purple-300 mb-10">Make It Personal!</p>
475
+
476
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
477
+ <!-- Form -->
478
+ <div>
479
+ <form class="space-y-6">
480
+ <div>
481
+ <label class="block text-cyan-300 mb-2">Player Name</label>
482
+ <input type="text" class="retro-input w-full rounded" placeholder="Enter your name">
483
+ </div>
484
+
485
+ <div>
486
+ <label class="block text-cyan-300 mb-2">Family Members</label>
487
+ <div class="space-y-3">
488
+ <input type="text" class="retro-input w-full rounded" placeholder="Family member 1">
489
+ <input type="text" class="retro-input w-full rounded" placeholder="Family member 2">
490
+ <button type="button" class="neon-btn py-1 px-4 rounded">+ Add Member</button>
491
+ </div>
492
+ </div>
493
+
494
+ <div>
495
+ <label class="block text-cyan-300 mb-2">Custom Colors</label>
496
+ <div class="grid grid-cols-2 gap-4">
497
+ <div>
498
+ <label class="block mb-1">Player Color</label>
499
+ <input type="color" class="w-full h-10" value="#b967ff">
500
+ </div>
501
+ <div>
502
+ <label class="block mb-1">Enemy Color</label>
503
+ <input type="color" class="w-full h-10" value="#00ffff">
504
+ </div>
505
+ </div>
506
+ </div>
507
+
508
+ <div>
509
+ <label class="block text-cyan-300 mb-2">Difficulty Level</label>
510
+ <div class="retro-radio flex gap-4">
511
+ <div>
512
+ <input type="radio" id="easy" name="difficulty" checked>
513
+ <label for="easy">Easy</label>
514
+ </div>
515
+ <div>
516
+ <input type="radio" id="medium" name="difficulty">
517
+ <label for="medium">Medium</label>
518
+ </div>
519
+ <div>
520
+ <input type="radio" id="hard" name="difficulty">
521
+ <label for="hard">Hard</label>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <button class="neon-cyan-btn w-full py-3 rounded-lg text-lg font-bold">Save Custom Game</button>
527
+ </form>
528
+ </div>
529
+
530
+ <!-- Preview -->
531
+ <div class="flex flex-col">
532
+ <h3 class="text-xl font-bold mb-4 text-center">Live Preview</h3>
533
+ <div class="customization-preview flex-grow rounded-lg p-6 flex flex-col items-center justify-center">
534
+ <div class="bg-gray-800 w-full max-w-md h-64 flex items-center justify-center mb-6">
535
+ <div class="text-center">
536
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 mx-auto mb-4" />
537
+ <p class="text-cyan-300">Player: <span class="text-purple-300">YourName</span></p>
538
+ <p class="mt-2 text-gray-400">Difficulty: Easy</p>
539
+ </div>
540
+ </div>
541
+ <p class="text-gray-400 text-center">Your customized game will appear here</p>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </section>
547
+
548
+ <!-- Shopping Cart -->
549
+ <section id="shop" class="py-16 bg-black bg-opacity-30">
550
+ <div class="container mx-auto px-4">
551
+ <h2 class="pixel-header text-3xl mb-2 text-center">Premium Features</h2>
552
+ <p class="text-center text-purple-300 mb-10">Enhance your gaming experience</p>
553
+
554
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
555
+ <!-- Shop Item -->
556
+ <div class="game-card rounded-lg p-6 text-center">
557
+ <div class="text-4xl text-cyan-300 mb-4">
558
+ <i class="fas fa-ad"></i>
559
+ </div>
560
+ <h3 class="text-xl font-bold mb-2">Remove Ads</h3>
561
+ <p class="text-gray-300 mb-4">Enjoy ad-free gaming experience</p>
562
+ <p class="text-2xl font-bold text-purple-300 mb-4">$4.99</p>
563
+ <button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Remove Ads" data-price="4.99">Add to Cart</button>
564
+ </div>
565
+
566
+ <!-- Shop Item -->
567
+ <div class="game-card rounded-lg p-6 text-center">
568
+ <div class="text-4xl text-cyan-300 mb-4">
569
+ <i class="fas fa-palette"></i>
570
+ </div>
571
+ <h3 class="text-xl font-bold mb-2">Custom Themes</h3>
572
+ <p class="text-gray-300 mb-4">10+ exclusive themes for all games</p>
573
+ <p class="text-2xl font-bold text-purple-300 mb-4">$9.99</p>
574
+ <button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Custom Themes" data-price="9.99">Add to Cart</button>
575
+ </div>
576
+
577
+ <!-- Shop Item -->
578
+ <div class="game-card rounded-lg p-6 text-center">
579
+ <div class="text-4xl text-cyan-300 mb-4">
580
+ <i class="fas fa-heart"></i>
581
+ </div>
582
+ <h3 class="text-xl font-bold mb-2">Extra Lives</h3>
583
+ <p class="text-gray-300 mb-4">Get 25 extra lives for all games</p>
584
+ <p class="text-2xl font-bold text-purple-300 mb-4">$2.99</p>
585
+ <button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Extra Lives" data-price="2.99">Add to Cart</button>
586
+ </div>
587
+
588
+ <!-- Shop Item -->
589
+ <div class="game-card rounded-lg p-6 text-center">
590
+ <div class="text-4xl text-cyan-300 mb-4">
591
+ <i class="fas fa-trophy"></i>
592
+ </div>
593
+ <h3 class="text-xl font-bold mb-2">Leaderboard Access</h3>
594
+ <p class="text-gray-300 mb-4">Compete on global high score boards</p>
595
+ <p class="text-2xl font-bold text-purple-300 mb-4">$7.99</p>
596
+ <button class="neon-btn w-full py-2 rounded add-to-cart" data-item="Leaderboard Access" data-price="7.99">Add to Cart</button>
597
+ </div>
598
+ </div>
599
+
600
+ <!-- Cart Display (hidden by default) -->
601
+ <div id="cartDisplay" class="hidden bg-black bg-opacity-50 rounded-lg p-6 max-w-3xl mx-auto">
602
+ <h3 class="text-2xl font-bold mb-6 text-center">Your Shopping Cart</h3>
603
+
604
+ <div id="cartItems" class="mb-6">
605
+ <!-- Cart items will be added here dynamically -->
606
+ </div>
607
+
608
+ <div class="flex justify-between items-center mb-6">
609
+ <span class="text-xl">Total:</span>
610
+ <span id="cartTotal" class="text-2xl font-bold text-purple-300">$0.00</span>
611
+ </div>
612
+
613
+ <button id="checkoutButton" class="neon-cyan-btn w-full py-3 rounded-lg text-lg font-bold">Proceed to Checkout</button>
614
+ </div>
615
+ </div>
616
+ </section>
617
+
618
+ <!-- Asteroids Game -->
619
+ <section id="asteroids" class="py-16">
620
+ <div class="container mx-auto px-4">
621
+ <h2 class="pixel-header text-3xl mb-2 text-center">Play Asteroids</h2>
622
+ <p class="text-center text-purple-300 mb-10">Use arrow keys to move, spacebar to shoot</p>
623
+
624
+ <div class="flex justify-center">
625
+ <div class="relative">
626
+ <canvas id="asteroids-canvas" width="800" height="500" class="w-full max-w-full"></canvas>
627
+ <div id="gameOver" class="hidden absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center">
628
+ <h3 class="pixel-header text-4xl mb-4 text-red-500">GAME OVER</h3>
629
+ <p class="text-2xl mb-2">Score: <span id="finalScore">0</span></p>
630
+ <p class="text-xl mb-6">High Score: <span id="highScore">0</span></p>
631
+ <div class="flex gap-4">
632
+ <button id="playAgainBtn" class="neon-cyan-btn px-6 py-2 rounded">Play Again</button>
633
+ <button class="neon-btn px-6 py-2 rounded">Customize</button>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="mt-8 max-w-2xl mx-auto">
640
+ <div class="grid grid-cols-3 gap-4 mb-6">
641
+ <div class="bg-black bg-opacity-50 p-4 rounded text-center">
642
+ <p class="text-gray-400">SCORE</p>
643
+ <p id="scoreDisplay" class="text-2xl font-bold">0</p>
644
+ </div>
645
+ <div class="bg-black bg-opacity-50 p-4 rounded text-center">
646
+ <p class="text-gray-400">LIVES</p>
647
+ <p id="livesDisplay" class="text-2xl font-bold">3</p>
648
+ </div>
649
+ <div class="bg-black bg-opacity-50 p-4 rounded text-center">
650
+ <p class="text-gray-400">LEVEL</p>
651
+ <p id="levelDisplay" class="text-2xl font-bold">1</p>
652
+ </div>
653
+ </div>
654
+
655
+ <div class="text-center">
656
+ <button id="fullscreenBtn" class="neon-btn px-6 py-2 rounded mr-3">
657
+ <i class="fas fa-expand mr-2"></i>Fullscreen
658
+ </button>
659
+ <button id="soundToggle" class="neon-btn px-6 py-2 rounded">
660
+ <i class="fas fa-volume-up mr-2"></i>Sound: ON
661
+ </button>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </section>
666
+
667
+ <!-- User Features -->
668
+ <section class="py-16 bg-black bg-opacity-30">
669
+ <div class="container mx-auto px-4">
670
+ <h2 class="pixel-header text-3xl mb-10 text-center">User Features</h2>
671
+
672
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
673
+ <!-- Achievements -->
674
+ <div>
675
+ <h3 class="text-2xl font-bold mb-6 text-cyan-300">Achievements</h3>
676
+ <div class="grid grid-cols-3 gap-6">
677
+ <div class="text-center">
678
+ <div class="achievement-badge mx-auto mb-3">
679
+ <i class="fas fa-star"></i>
680
+ </div>
681
+ <p class="font-bold">First Play</p>
682
+ <p class="text-sm text-gray-400">Play your first game</p>
683
+ </div>
684
+ <div class="text-center">
685
+ <div class="achievement-badge mx-auto mb-3">
686
+ <i class="fas fa-trophy"></i>
687
+ </div>
688
+ <p class="font-bold">High Scorer</p>
689
+ <p class="text-sm text-gray-400">Reach top 10 in any game</p>
690
+ </div>
691
+ <div class="text-center">
692
+ <div class="achievement-badge mx-auto mb-3">
693
+ <i class="fas fa-gamepad"></i>
694
+ </div>
695
+ <p class="font-bold">Completionist</p>
696
+ <p class="text-sm text-gray-400">Play all games</p>
697
+ </div>
698
+ </div>
699
+ </div>
700
+
701
+ <!-- Social Sharing -->
702
+ <div>
703
+ <h3 class="text-2xl font-bold mb-6 text-cyan-300">Share Your Score</h3>
704
+ <div class="flex gap-4 justify-center">
705
+ <button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
706
+ <i class="fab fa-twitter"></i>
707
+ </button>
708
+ <button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
709
+ <i class="fab fa-facebook-f"></i>
710
+ </button>
711
+ <button class="neon-btn w-16 h-16 rounded-full flex items-center justify-center text-2xl">
712
+ <i class="fab fa-discord"></i>
713
+ </button>
714
+ </div>
715
+
716
+ <div class="mt-8">
717
+ <h3 class="text-xl font-bold mb-4">Keyboard Shortcuts</h3>
718
+ <ul class="space-y-2">
719
+ <li class="flex justify-between">
720
+ <span>Pause Game</span>
721
+ <span class="bg-gray-800 px-2 py-1 rounded">P</span>
722
+ </li>
723
+ <li class="flex justify-between">
724
+ <span>Mute Sound</span>
725
+ <span class="bg-gray-800 px-2 py-1 rounded">M</span>
726
+ </li>
727
+ <li class="flex justify-between">
728
+ <span>Fullscreen</span>
729
+ <span class="bg-gray-800 px-2 py-1 rounded">F</span>
730
+ </li>
731
+ </ul>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </section>
737
+
738
+ <!-- Footer -->
739
+ <footer class="pt-16 pb-8 border-t border-purple-900">
740
+ <div class="container mx-auto px-4">
741
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
742
+ <!-- Games Column -->
743
+ <div>
744
+ <h4 class="text-xl font-bold mb-4 text-cyan-300">Games</h4>
745
+ <ul class="space-y-2">
746
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">All Games</a></li>
747
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">New Releases</a></li>
748
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">Top Rated</a></li>
749
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">Most Played</a></li>
750
+ </ul>
751
+ </div>
752
+
753
+ <!-- Support Column -->
754
+ <div>
755
+ <h4 class="text-xl font-bold mb-4 text-cyan-300">Support</h4>
756
+ <ul class="space-y-2">
757
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">Help Center</a></li>
758
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">FAQs</a></li>
759
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">Contact Us</a></li>
760
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">Feedback</a></li>
761
+ </ul>
762
+ </div>
763
+
764
+ <!-- Company Column -->
765
+ <div>
766
+ <h4 class="text-xl font-bold mb-4 text-cyan-300">Company</h4>
767
+ <ul class="space-y-2">
768
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">About Us</a></li>
769
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">Careers</a></li>
770
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">Blog</a></li>
771
+ <li><a href="#" class="text-gray-400 hover:text-purple-300">Press</a></li>
772
+ </ul>
773
+ </div>
774
+
775
+ <!-- Newsletter -->
776
+ <div>
777
+ <h4 class="text-xl font-bold mb-4 text-cyan-300">Newsletter</h4>
778
+ <p class="text-gray-400 mb-4">Subscribe for updates and promotions</p>
779
+ <div class="flex">
780
+ <input type="email" placeholder="Your email" class="retro-input rounded-l-lg w-full">
781
+ <button class="neon-cyan-btn px-4 py-2 rounded-r-lg">
782
+ <i class="fas fa-paper-plane"></i>
783
+ </button>
784
+ </div>
785
+ </div>
786
+ </div>
787
+
788
+ <div class="border-t border-purple-900 pt-8">
789
+ <div class="flex flex-col md:flex-row justify-between items-center">
790
+ <div class="mb-4 md:mb-0">
791
+ <div class="pixel-header text-xl">DOSEGAME</div>
792
+ <p class="text-gray-500 text-sm mt-2">© 2023 DoseGame. All rights reserved.</p>
793
+ </div>
794
+
795
+ <div class="flex space-x-4">
796
+ <a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-facebook"></i></a>
797
+ <a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-twitter"></i></a>
798
+ <a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-instagram"></i></a>
799
+ <a href="#" class="text-2xl text-gray-400 hover:text-purple-300"><i class="fab fa-youtube"></i></a>
800
+ </div>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ </footer>
805
+
806
+ <!-- JavaScript -->
807
+ <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
808
+ <script>
809
+ // Initialize Particles.js
810
+ document.addEventListener('DOMContentLoaded', function() {
811
+ particlesJS('particles-js', {
812
+ particles: {
813
+ number: { value: 80, density: { enable: true, value_area: 800 } },
814
+ color: { value: "#b967ff" },
815
+ shape: { type: "circle" },
816
+ opacity: { value: 0.5, random: true },
817
+ size: { value: 3, random: true },
818
+ line_linked: { enable: false },
819
+ move: {
820
+ enable: true,
821
+ speed: 1,
822
+ direction: "none",
823
+ random: true,
824
+ straight: false,
825
+ out_mode: "out",
826
+ bounce: false
827
+ }
828
+ },
829
+ interactivity: {
830
+ detect_on: "canvas",
831
+ events: {
832
+ onhover: { enable: true, mode: "repulse" },
833
+ onclick: { enable: true, mode: "push" },
834
+ resize: true
835
+ }
836
+ }
837
+ });
838
+ });
839
+
840
+ // Mobile Menu Toggle
841
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
842
+ const closeMenuButton = document.getElementById('closeMenuButton');
843
+ const mobileMenu = document.getElementById('mobileMenu');
844
+
845
+ mobileMenuButton.addEventListener('click', () => {
846
+ mobileMenu.classList.add('active');
847
+ });
848
+
849
+ closeMenuButton.addEventListener('click', () => {
850
+ mobileMenu.classList.remove('active');
851
+ });
852
+
853
+ // Shopping Cart Functionality
854
+ const cartButton = document.getElementById('cartButton');
855
+ const cartDisplay = document.getElementById('cartDisplay');
856
+ const cartItems = document.getElementById('cartItems');
857
+ const cartTotal = document.getElementById('cartTotal');
858
+ const cartCount = document.getElementById('cartCount');
859
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
860
+ const checkoutButton = document.getElementById('checkoutButton');
861
+
862
+ let cart = [];
863
+
864
+ addToCartButtons.forEach(button => {
865
+ button.addEventListener('click', () => {
866
+ const item = button.getAttribute('data-item');
867
+ const price = parseFloat(button.getAttribute('data-price'));
868
+
869
+ cart.push({ item, price });
870
+ updateCart();
871
+
872
+ // Show cart display
873
+ cartDisplay.classList.remove('hidden');
874
+
875
+ // Cart animation
876
+ cartCount.classList.add('animate-ping');
877
+ setTimeout(() => {
878
+ cartCount.classList.remove('animate-ping');
879
+ }, 500);
880
+ });
881
+ });
882
+
883
+ function updateCart() {
884
+ cartItems.innerHTML = '';
885
+ let total = 0;
886
+
887
+ cart.forEach((item, index) => {
888
+ total += item.price;
889
+
890
+ const cartItem = document.createElement('div');
891
+ cartItem.className = 'cart-item py-3 flex justify-between items-center';
892
+ cartItem.innerHTML = `
893
+ <div>
894
+ <p class="font-bold">${item.item}</p>
895
+ <p class="text-gray-400">$${item.price.toFixed(2)}</p>
896
+ </div>
897
+ <button class="text-red-500 remove-item" data-index="${index}">
898
+ <i class="fas fa-trash"></i>
899
+ </button>
900
+ `;
901
+
902
+ cartItems.appendChild(cartItem);
903
+ });
904
+
905
+ cartTotal.textContent = `$${total.toFixed(2)}`;
906
+ cartCount.textContent = cart.length;
907
+
908
+ // Add event listeners to remove buttons
909
+ document.querySelectorAll('.remove-item').forEach(button => {
910
+ button.addEventListener('click', () => {
911
+ const index = parseInt(button.getAttribute('data-index'));
912
+ cart.splice(index, 1);
913
+ updateCart();
914
+
915
+ if (cart.length === 0) {
916
+ cartDisplay.classList.add('hidden');
917
+ }
918
+ });
919
+ });
920
+ }
921
+
922
+ cartButton.addEventListener('click', () => {
923
+ if (cart.length > 0) {
924
+ cartDisplay.classList.toggle('hidden');
925
+ }
926
+ });
927
+
928
+ checkoutButton.addEventListener('click', () => {
929
+ alert('Checkout functionality would be implemented here!');
930
+ });
931
+
932
+ // Asteroids Game
933
+ const canvas = document.getElementById('asteroids-canvas');
934
+ const ctx = canvas.getContext('2d');
935
+ const scoreDisplay = document.getElementById('scoreDisplay');
936
+ const livesDisplay = document.getElementById('livesDisplay');
937
+ const levelDisplay = document.getElementById('levelDisplay');
938
+ const gameOverScreen = document.getElementById('gameOver');
939
+ const finalScore = document.getElementById('finalScore');
940
+ const highScore = document.getElementById('highScore');
941
+ const playAgainBtn = document.getElementById('playAgainBtn');
942
+ const fullscreenBtn = document.getElementById('fullscreenBtn');
943
+ const soundToggle = document.getElementById('soundToggle');
944
+
945
+ // Game state
946
+ let gameActive = true;
947
+ let score = 0;
948
+ let lives = 3;
949
+ let level = 1;
950
+
951
+ // Player ship
952
+ const ship = {
953
+ x: canvas.width / 2,
954
+ y: canvas.height / 2,
955
+ radius: 15,
956
+ angle: Math.PI / 2,
957
+ rotation: 0,
958
+ thrusting: false,
959
+ thrust: {
960
+ x: 0,
961
+ y: 0
962
+ },
963
+ velocity: {
964
+ x: 0,
965
+ y: 0
966
+ }
967
+ };
968
+
969
+ // Asteroids
970
+ let asteroids = [];
971
+
972
+ // Bullets
973
+ let bullets = [];
974
+
975
+ // Initialize game
976
+ function initGame() {
977
+ gameActive = true;
978
+ score = 0;
979
+ lives = 3;
980
+ level = 1;
981
+ asteroids = [];
982
+ bullets = [];
983
+
984
+ // Create initial asteroids
985
+ for (let i = 0; i < 4; i++) {
986
+ createAsteroid();
987
+ }
988
+
989
+ updateDisplays();
990
+ gameOverScreen.classList.add('hidden');
991
+ }
992
+
993
+ // Create asteroid
994
+ function createAsteroid() {
995
+ const size = Math.random() * 30 + 20;
996
+ const x = Math.random() < 0.5 ?
997
+ -size :
998
+ canvas.width + size;
999
+ const y = Math.random() * canvas.height;
1000
+
1001
+ asteroids.push({
1002
+ x,
1003
+ y,
1004
+ size,
1005
+ speed: Math.random() * 2 + 1,
1006
+ angle: Math.random() * Math.PI * 2,
1007
+ vertices: Math.floor(Math.random() * 5) + 5
1008
+ });
1009
+ }
1010
+
1011
+ // Update displays
1012
+ function updateDisplays() {
1013
+ scoreDisplay.textContent = score;
1014
+ livesDisplay.textContent = lives;
1015
+ levelDisplay.textContent = level;
1016
+ }
1017
+
1018
+ // Draw ship
1019
+ function drawShip() {
1020
+ ctx.save();
1021
+ ctx.translate(ship.x, ship.y);
1022
+ ctx.rotate(ship.angle);
1023
+
1024
+ // Draw ship
1025
+ ctx.strokeStyle = '#b967ff';
1026
+ ctx.lineWidth = 2;
1027
+ ctx.beginPath();
1028
+ ctx.moveTo(0, -ship.radius);
1029
+ ctx.lineTo(ship.radius, ship.radius);
1030
+ ctx.lineTo(-ship.radius, ship.radius);
1031
+ ctx.closePath();
1032
+ ctx.stroke();
1033
+
1034
+ // Draw thrust
1035
+ if (ship.thrusting) {
1036
+ ctx.strokeStyle = '#00ffff';
1037
+ ctx.beginPath();
1038
+ ctx.moveTo(-ship.radius * 0.5, ship.radius);
1039
+ ctx.lineTo(0, ship.radius + 10);
1040
+ ctx.lineTo(ship.radius * 0.5, ship.radius);
1041
+ ctx.stroke();
1042
+ }
1043
+
1044
+ ctx.restore();
1045
+ }
1046
+
1047
+ // Draw asteroids
1048
+ function drawAsteroids() {
1049
+ asteroids.forEach(asteroid => {
1050
+ ctx.save();
1051
+ ctx.translate(asteroid.x, asteroid.y);
1052
+
1053
+ ctx.strokeStyle = '#fff';
1054
+ ctx.lineWidth = 2;
1055
+ ctx.beginPath();
1056
+
1057
+ for (let i = 0; i < asteroid.vertices; i++) {
1058
+ const angle = (i / asteroid.vertices) * Math.PI * 2;
1059
+ const distance = asteroid.size * (0.7 + Math.random() * 0.3);
1060
+ const x = Math.cos(angle) * distance;
1061
+ const y = Math.sin(angle) * distance;
1062
+
1063
+ if (i === 0) {
1064
+ ctx.moveTo(x, y);
1065
+ } else {
1066
+ ctx.lineTo(x, y);
1067
+ }
1068
+ }
1069
+
1070
+ ctx.closePath();
1071
+ ctx.stroke();
1072
+ ctx.restore();
1073
+ });
1074
+ }
1075
+
1076
+ // Draw bullets
1077
+ function drawBullets() {
1078
+ bullets.forEach(bullet => {
1079
+ ctx.fillStyle = '#00ffff';
1080
+ ctx.beginPath();
1081
+ ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);
1082
+ ctx.fill();
1083
+ });
1084
+ }
1085
+
1086
+ // Update game objects
1087
+ function update() {
1088
+ if (!gameActive) return;
1089
+
1090
+ // Update ship position
1091
+ ship.x += ship.velocity.x;
1092
+ ship.y += ship.velocity.y;
1093
+
1094
+ // Apply friction
1095
+ ship.velocity.x *= 0.98;
1096
+ ship.velocity.y *= 0.98;
1097
+
1098
+ // Apply thrust
1099
+ if (ship.thrusting) {
1100
+ ship.velocity.x += Math.cos(ship.angle) * 0.1;
1101
+ ship.velocity.y += Math.sin(ship.angle) * 0.1;
1102
+ }
1103
+
1104
+ // Wrap ship around screen
1105
+ if (ship.x < -ship.radius) ship.x = canvas.width + ship.radius;
1106
+ if (ship.x > canvas.width + ship.radius) ship.x = -ship.radius;
1107
+ if (ship.y < -ship.radius) ship.y = canvas.height + ship.radius;
1108
+ if (ship.y > canvas.height + ship.radius) ship.y = -ship.radius;
1109
+
1110
+ // Update asteroids
1111
+ asteroids.forEach(asteroid => {
1112
+ asteroid.x += Math.cos(asteroid.angle) * asteroid.speed;
1113
+ asteroid.y += Math.sin(asteroid.angle) * asteroid.speed;
1114
+
1115
+ // Wrap asteroids around screen
1116
+ if (asteroid.x < -asteroid.size) asteroid.x = canvas.width + asteroid.size;
1117
+ if (asteroid.x > canvas.width + asteroid.size) asteroid.x = -asteroid.size;
1118
+ if (asteroid.y < -asteroid.size) asteroid.y = canvas.height + asteroid.size;
1119
+ if (asteroid.y > canvas.height + asteroid.size) asteroid.y = -asteroid.size;
1120
+ });
1121
+
1122
+ // Update bullets
1123
+ bullets.forEach((bullet, index) => {
1124
+ bullet.x += Math.cos(bullet.angle) * bullet.speed;
1125
+ bullet.y += Math.sin(bullet.angle) * bullet.speed;
1126
+
1127
+ // Remove bullets that go off screen
1128
+ if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
1129
+ bullets.splice(index, 1);
1130
+ }
1131
+ });
1132
+
1133
+ // Check collisions
1134
+ checkCollisions();
1135
+ }
1136
+
1137
+ // Check collisions
1138
+ function checkCollisions() {
1139
+ // Check bullet-asteroid collisions
1140
+ bullets.forEach((bullet, bulletIndex) => {
1141
+ asteroids.forEach((asteroid, asteroidIndex) => {
1142
+ const dx = bullet.x - asteroid.x;
1143
+ const dy = bullet.y - asteroid.y;
1144
+ const distance = Math.sqrt(dx * dx + dy * dy);
1145
+
1146
+ if (distance < asteroid.size) {
1147
+ // Remove bullet and asteroid
1148
+ bullets.splice(bulletIndex, 1);
1149
+ asteroids.splice(asteroidIndex, 1);
1150
+
1151
+ // Add score
1152
+ score += Math.floor(asteroid.size);
1153
+ updateDisplays();
1154
+
1155
+ // Create new asteroids if needed
1156
+ if (asteroids.length === 0) {
1157
+ level++;
1158
+ for (let i = 0; i < level + 3; i++) {
1159
+ createAsteroid();
1160
+ }
1161
+ updateDisplays();
1162
+ }
1163
+ }
1164
+ });
1165
+ });
1166
+
1167
+ // Check ship-asteroid collisions
1168
+ asteroids.forEach(asteroid => {
1169
+ const dx = ship.x - asteroid.x;
1170
+ const dy = ship.y - asteroid.y;
1171
+ const distance = Math.sqrt(dx * dx + dy * dy);
1172
+
1173
+ if (distance < ship.radius + asteroid.size) {
1174
+ // Lose a life
1175
+ lives--;
1176
+ updateDisplays();
1177
+
1178
+ // Reset ship position
1179
+ ship.x = canvas.width / 2;
1180
+ ship.y = canvas.height / 2;
1181
+ ship.velocity.x = 0;
1182
+ ship.velocity.y = 0;
1183
+
1184
+ // Game over
1185
+ if (lives <= 0) {
1186
+ gameActive = false;
1187
+ finalScore.textContent = score;
1188
+
1189
+ // Get high score from localStorage
1190
+ const storedHighScore = localStorage.getItem('asteroidsHighScore') || 0;
1191
+ if (score > storedHighScore) {
1192
+ localStorage.setItem('asteroidsHighScore', score);
1193
+ highScore.textContent = score;
1194
+ } else {
1195
+ highScore.textContent = storedHighScore;
1196
+ }
1197
+
1198
+ gameOverScreen.classList.remove('hidden');
1199
+ }
1200
+ }
1201
+ });
1202
+ }
1203
+
1204
+ // Draw game
1205
+ function draw() {
1206
+ // Clear canvas
1207
+ ctx.fillStyle = 'black';
1208
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
1209
+
1210
+ // Draw stars
1211
+ ctx.fillStyle = 'white';
1212
+ for (let i = 0; i < 100; i++) {
1213
+ const x = Math.random() * canvas.width;
1214
+ const y = Math.random() * canvas.height;
1215
+ const size = Math.random() * 2;
1216
+ ctx.fillRect(x, y, size, size);
1217
+ }
1218
+
1219
+ // Draw game objects
1220
+ drawAsteroids();
1221
+ drawBullets();
1222
+ drawShip();
1223
+ }
1224
+
1225
+ // Game loop
1226
+ function gameLoop() {
1227
+ update();
1228
+ draw();
1229
+ requestAnimationFrame(gameLoop);
1230
+ }
1231
+
1232
+ // Start game
1233
+ initGame();
1234
+ gameLoop();
1235
+
1236
+ // Event listeners
1237
+ document.addEventListener('keydown', (e) => {
1238
+ if (!gameActive) return;
1239
+
1240
+ switch(e.key) {
1241
+ case 'ArrowLeft':
1242
+ ship.rotation = -0.1;
1243
+ break;
1244
+ case 'ArrowRight':
1245
+ ship.rotation = 0.1;
1246
+ break;
1247
+ case 'ArrowUp':
1248
+ ship.thrusting = true;
1249
+ break;
1250
+ case ' ':
1251
+ // Fire bullet
1252
+ bullets.push({
1253
+ x: ship.x + Math.cos(ship.angle) * ship.radius,
1254
+ y: ship.y + Math.sin(ship.angle) * ship.radius,
1255
+ angle: ship.angle,
1256
+ speed: 5
1257
+ });
1258
+ break;
1259
+ }
1260
+ });
1261
+
1262
+ document.addEventListener('keyup', (e) => {
1263
+ switch(e.key) {
1264
+ case 'ArrowLeft':
1265
+ case 'ArrowRight':
1266
+ ship.rotation = 0;
1267
+ break;
1268
+ case 'ArrowUp':
1269
+ ship.thrusting = false;
1270
+ break;
1271
+ }
1272
+ });
1273
+
1274
+ // Update ship rotation
1275
+ setInterval(() => {
1276
+ ship.angle += ship.rotation;
1277
+ }, 16);
1278
+
1279
+ // Play again button
1280
+ playAgainBtn.addEventListener('click', initGame);
1281
+
1282
+ // Fullscreen button
1283
+ fullscreenBtn.addEventListener('click', () => {
1284
+ if (canvas.requestFullscreen) {
1285
+ canvas.requestFullscreen();
1286
+ } else if (canvas.mozRequestFullScreen) {
1287
+ canvas.mozRequestFullScreen();
1288
+ } else if (canvas.webkitRequestFullscreen) {
1289
+ canvas.webkitRequestFullscreen();
1290
+ } else if (canvas.msRequestFullscreen) {
1291
+ canvas.msRequestFullscreen();
1292
+ }
1293
+ });
1294
+
1295
+ // Sound toggle
1296
+ let soundOn = true;
1297
+ soundToggle.addEventListener('click', () => {
1298
+ soundOn = !soundOn;
1299
+ soundToggle.innerHTML = soundOn ?
1300
+ '<i class="fas fa-volume-up mr-2"></i>Sound: ON' :
1301
+ '<i class="fas fa-volume-mute mr-2"></i>Sound: OFF';
1302
+ });
1303
+ </script>
1304
+ <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=MagicBullets/dosegame-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1305
+ </html>