Hugging Face's logo

Spaces:
ahmedamine19
/
gamehub
Running

App Files Community
ahmedamine19 commited on
Commit
51a5d4b
·
verified ·
1 Parent(s): dacb7e0

je veux créer un site de jeux - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +503 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gamehub
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: indigo
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: gamehub
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,503 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GameHub - Votre portail de jeux</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
+ /* Animation personnalisée pour les cartes de jeu */
11
+ @keyframes float {
12
+ 0%, 100% { transform: translateY(0); }
13
+ 50% { transform: translateY(-10px); }
14
+ }
15
+ .game-card:hover {
16
+ animation: float 2s ease-in-out infinite;
17
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
18
+ }
19
+
20
+ /* Style personnalisé pour la barre de recherche */
21
+ .search-bar {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .search-bar:focus-within {
25
+ transform: scale(1.02);
26
+ box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
27
+ }
28
+
29
+ /* Effet de dégradé pour le héros */
30
+ .hero-gradient {
31
+ background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #ec4899 100%);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-900 text-white font-sans">
36
+ <!-- Barre de navigation -->
37
+ <nav class="bg-gray-800 py-4 px-6 sticky top-0 z-50 shadow-lg">
38
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
39
+ <div class="flex items-center mb-4 md:mb-0">
40
+ <i class="fas fa-gamepad text-3xl text-blue-400 mr-3"></i>
41
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
42
+ GameHub
43
+ </h1>
44
+ </div>
45
+
46
+ <div class="relative w-full md:w-1/3 mb-4 md:mb-0">
47
+ <div class="search-bar flex items-center bg-gray-700 rounded-full px-4 py-2">
48
+ <i class="fas fa-search text-gray-400 mr-2"></i>
49
+ <input type="text" placeholder="Rechercher des jeux..."
50
+ class="bg-transparent border-none outline-none w-full text-white placeholder-gray-400">
51
+ </div>
52
+ </div>
53
+
54
+ <div class="flex items-center space-x-4">
55
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full font-medium transition-all">
56
+ Connexion
57
+ </button>
58
+ <button class="hidden md:block bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-full font-medium transition-all">
59
+ S'inscrire
60
+ </button>
61
+ <button id="mobile-menu-button" class="md:hidden text-2xl">
62
+ <i class="fas fa-bars"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Menu mobile -->
68
+ <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
69
+ <div class="flex flex-col space-y-3">
70
+ <a href="#" class="px-3 py-2 bg-gray-700 rounded-lg">Accueil</a>
71
+ <a href="#" class="px-3 py-2 hover:bg-gray-700 rounded-lg">Nouveautés</a>
72
+ <a href="#" class="px-3 py-2 hover:bg-gray-700 rounded-lg">Populaires</a>
73
+ <a href="#" class="px-3 py-2 hover:bg-gray-700 rounded-lg">Catégories</a>
74
+ <a href="#" class="px-3 py-2 hover:bg-gray-700 rounded-lg">À propos</a>
75
+ </div>
76
+ </div>
77
+ </nav>
78
+
79
+ <!-- Section Hero -->
80
+ <section class="hero-gradient py-20 px-6">
81
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
82
+ <div class="md:w-1/2 mb-10 md:mb-0">
83
+ <h2 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
84
+ Découvrez des <span class="text-yellow-300">milliers</span> de jeux passionnants
85
+ </h2>
86
+ <p class="text-xl mb-8 text-gray-200">
87
+ Jouez aux derniers jeux tendance, explorez différentes catégories et rejoignez une communauté de gamers passionnés.
88
+ </p>
89
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
90
+ <button class="bg-white text-gray-900 px-6 py-3 rounded-full font-bold hover:bg-gray-200 transition-all">
91
+ Explorer les jeux <i class="fas fa-arrow-right ml-2"></i>
92
+ </button>
93
+ <button class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-gray-900 transition-all">
94
+ Voir les promotions
95
+ </button>
96
+ </div>
97
+ </div>
98
+ <div class="md:w-1/2 flex justify-center">
99
+ <img src="https://via.placeholder.com/500x300" alt="Jeux populaires"
100
+ class="rounded-xl shadow-2xl border-4 border-white transform rotate-3 hover:rotate-0 transition-transform">
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Section Catégories -->
106
+ <section class="py-16 px-6 bg-gray-800">
107
+ <div class="container mx-auto">
108
+ <h2 class="text-3xl font-bold mb-10 text-center">
109
+ <span class="border-b-4 border-blue-500 pb-2">Catégories</span>
110
+ </h2>
111
+
112
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
113
+ <div class="category-card bg-gray-700 rounded-lg p-4 text-center hover:bg-blue-600 transition-all cursor-pointer">
114
+ <i class="fas fa-running text-3xl mb-2 text-blue-400"></i>
115
+ <h3 class="font-semibold">Action</h3>
116
+ </div>
117
+ <div class="category-card bg-gray-700 rounded-lg p-4 text-center hover:bg-purple-600 transition-all cursor-pointer">
118
+ <i class="fas fa-robot text-3xl mb-2 text-purple-400"></i>
119
+ <h3 class="font-semibold">Aventure</h3>
120
+ </div>
121
+ <div class="category-card bg-gray-700 rounded-lg p-4 text-center hover:bg-green-600 transition-all cursor-pointer">
122
+ <i class="fas fa-brain text-3xl mb-2 text-green-400"></i>
123
+ <h3 class="font-semibold">Stratégie</h3>
124
+ </div>
125
+ <div class="category-card bg-gray-700 rounded-lg p-4 text-center hover:bg-red-600 transition-all cursor-pointer">
126
+ <i class="fas fa-car-crash text-3xl mb-2 text-red-400"></i>
127
+ <h3 class="font-semibold">Course</h3>
128
+ </div>
129
+ <div class="category-card bg-gray-700 rounded-lg p-4 text-center hover:bg-yellow-600 transition-all cursor-pointer">
130
+ <i class="fas fa-futbol text-3xl mb-2 text-yellow-400"></i>
131
+ <h3 class="font-semibold">Sport</h3>
132
+ </div>
133
+ <div class="category-card bg-gray-700 rounded-lg p-4 text-center hover:bg-pink-600 transition-all cursor-pointer">
134
+ <i class="fas fa-ghost text-3xl mb-2 text-pink-400"></i>
135
+ <h3 class="font-semibold">Horreur</h3>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </section>
140
+
141
+ <!-- Section Jeux populaires -->
142
+ <section class="py-16 px-6 bg-gray-900">
143
+ <div class="container mx-auto">
144
+ <div class="flex justify-between items-center mb-10">
145
+ <h2 class="text-3xl font-bold">
146
+ <span class="border-b-4 border-blue-500 pb-2">Jeux populaires</span>
147
+ </h2>
148
+ <button class="text-blue-400 hover:text-blue-300 flex items-center">
149
+ Voir plus <i class="fas fa-chevron-right ml-2"></i>
150
+ </button>
151
+ </div>
152
+
153
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
154
+ <!-- Carte de jeu 1 -->
155
+ <div class="game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300 cursor-pointer">
156
+ <div class="relative">
157
+ <img src="https://via.placeholder.com/300x200" alt="Jeu 1" class="w-full h-48 object-cover">
158
+ <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
159
+ -20%
160
+ </div>
161
+ </div>
162
+ <div class="p-4">
163
+ <h3 class="font-bold text-xl mb-2">Cyber Adventure 2077</h3>
164
+ <div class="flex items-center mb-2">
165
+ <div class="flex text-yellow-400">
166
+ <i class="fas fa-star"></i>
167
+ <i class="fas fa-star"></i>
168
+ <i class="fas fa-star"></i>
169
+ <i class="fas fa-star"></i>
170
+ <i class="fas fa-star-half-alt"></i>
171
+ </div>
172
+ <span class="text-gray-400 text-sm ml-2">(4.5)</span>
173
+ </div>
174
+ <div class="flex justify-between items-center">
175
+ <div>
176
+ <span class="text-gray-400 line-through text-sm">59.99€</span>
177
+ <p class="font-bold text-lg text-blue-400">47.99€</p>
178
+ </div>
179
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm">
180
+ <i class="fas fa-cart-plus"></i>
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Carte de jeu 2 -->
187
+ <div class="game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300 cursor-pointer">
188
+ <div class="relative">
189
+ <img src="https://via.placeholder.com/300x200" alt="Jeu 2" class="w-full h-48 object-cover">
190
+ </div>
191
+ <div class="p-4">
192
+ <h3 class="font-bold text-xl mb-2">Space Explorers</h3>
193
+ <div class="flex items-center mb-2">
194
+ <div class="flex text-yellow-400">
195
+ <i class="fas fa-star"></i>
196
+ <i class="fas fa-star"></i>
197
+ <i class="fas fa-star"></i>
198
+ <i class="fas fa-star"></i>
199
+ <i class="far fa-star"></i>
200
+ </div>
201
+ <span class="text-gray-400 text-sm ml-2">(4.0)</span>
202
+ </div>
203
+ <div class="flex justify-between items-center">
204
+ <p class="font-bold text-lg">39.99€</p>
205
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm">
206
+ <i class="fas fa-cart-plus"></i>
207
+ </button>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Carte de jeu 3 -->
213
+ <div class="game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300 cursor-pointer">
214
+ <div class="relative">
215
+ <img src="https://via.placeholder.com/300x200" alt="Jeu 3" class="w-full h-48 object-cover">
216
+ <div class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">
217
+ Nouveau
218
+ </div>
219
+ </div>
220
+ <div class="p-4">
221
+ <h3 class="font-bold text-xl mb-2">Zombie Apocalypse</h3>
222
+ <div class="flex items-center mb-2">
223
+ <div class="flex text-yellow-400">
224
+ <i class="fas fa-star"></i>
225
+ <i class="fas fa-star"></i>
226
+ <i class="fas fa-star"></i>
227
+ <i class="fas fa-star"></i>
228
+ <i class="fas fa-star"></i>
229
+ </div>
230
+ <span class="text-gray-400 text-sm ml-2">(5.0)</span>
231
+ </div>
232
+ <div class="flex justify-between items-center">
233
+ <p class="font-bold text-lg">49.99€</p>
234
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm">
235
+ <i class="fas fa-cart-plus"></i>
236
+ </button>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Carte de jeu 4 -->
242
+ <div class="game-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300 cursor-pointer">
243
+ <div class="relative">
244
+ <img src="https://via.placeholder.com/300x200" alt="Jeu 4" class="w-full h-48 object-cover">
245
+ </div>
246
+ <div class="p-4">
247
+ <h3 class="font-bold text-xl mb-2">Racing Legends</h3>
248
+ <div class="flex items-center mb-2">
249
+ <div class="flex text-yellow-400">
250
+ <i class="fas fa-star"></i>
251
+ <i class="fas fa-star"></i>
252
+ <i class="fas fa-star"></i>
253
+ <i class="fas fa-star"></i>
254
+ <i class="fas fa-star-half-alt"></i>
255
+ </div>
256
+ <span class="text-gray-400 text-sm ml-2">(4.5)</span>
257
+ </div>
258
+ <div class="flex justify-between items-center">
259
+ <p class="font-bold text-lg">34.99€</p>
260
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm">
261
+ <i class="fas fa-cart-plus"></i>
262
+ </button>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- Section Nouveautés -->
271
+ <section class="py-16 px-6 bg-gray-800">
272
+ <div class="container mx-auto">
273
+ <div class="flex justify-between items-center mb-10">
274
+ <h2 class="text-3xl font-bold">
275
+ <span class="border-b-4 border-purple-500 pb-2">Nouveautés</span>
276
+ </h2>
277
+ <div class="flex space-x-2">
278
+ <button id="prev-btn" class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
279
+ <i class="fas fa-chevron-left"></i>
280
+ </button>
281
+ <button id="next-btn" class="bg-gray-700 hover:bg-gray-600 p-2 rounded-full">
282
+ <i class="fas fa-chevron-right"></i>
283
+ </button>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="relative">
288
+ <div id="new-games-carousel" class="overflow-hidden">
289
+ <div class="flex transition-transform duration-300" id="carousel-inner">
290
+ <!-- Les éléments du carrousel seront ajoutés dynamiquement -->
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </section>
296
+
297
+ <!-- Section Promotion -->
298
+ <section class="py-16 px-6 bg-gradient-to-r from-purple-900 to-blue-900">
299
+ <div class="container mx-auto text-center">
300
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Promotions exceptionnelles</h2>
301
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
302
+ Profitez de réductions allant jusqu'à 70% sur une sélection de jeux. Offre valable pour une durée limitée !
303
+ </p>
304
+ <div class="countdown flex justify-center space-x-4 mb-10">
305
+ <div class="bg-black bg-opacity-30 rounded-lg p-3 w-20">
306
+ <div class="text-3xl font-bold" id="days">00</div>
307
+ <div class="text-sm">Jours</div>
308
+ </div>
309
+ <div class="bg-black bg-opacity-30 rounded-lg p-3 w-20">
310
+ <div class="text-3xl font-bold" id="hours">00</div>
311
+ <div class="text-sm">Heures</div>
312
+ </div>
313
+ <div class="bg-black bg-opacity-30 rounded-lg p-3 w-20">
314
+ <div class="text-3xl font-bold" id="minutes">00</div>
315
+ <div class="text-sm">Minutes</div>
316
+ </div>
317
+ <div class="bg-black bg-opacity-30 rounded-lg p-3 w-20">
318
+ <div class="text-3xl font-bold" id="seconds">00</div>
319
+ <div class="text-sm">Secondes</div>
320
+ </div>
321
+ </div>
322
+ <button class="bg-yellow-400 hover:bg-yellow-300 text-gray-900 font-bold px-8 py-3 rounded-full text-lg transition-all">
323
+ Voir toutes les promotions <i class="fas fa-arrow-right ml-2"></i>
324
+ </button>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- Footer -->
329
+ <footer class="bg-gray-900 py-12 px-6 border-t border-gray-800">
330
+ <div class="container mx-auto">
331
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
332
+ <div>
333
+ <div class="flex items-center mb-4">
334
+ <i class="fas fa-gamepad text-2xl text-blue-400 mr-2"></i>
335
+ <h3 class="text-xl font-bold">GameHub</h3>
336
+ </div>
337
+ <p class="text-gray-400 mb-4">
338
+ Votre destination ultime pour découvrir et acheter les meilleurs jeux du moment.
339
+ </p>
340
+ <div class="flex space-x-4">
341
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
342
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
343
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
344
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-discord"></i></a>
345
+ </div>
346
+ </div>
347
+
348
+ <div>
349
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
350
+ <ul class="space-y-2">
351
+ <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
352
+ <li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li>
353
+ <li><a href="#" class="text-gray-400 hover:text-white">Populaires</a></li>
354
+ <li><a href="#" class="text-gray-400 hover:text-white">Catégories</a></li>
355
+ <li><a href="#" class="text-gray-400 hover:text-white">Promotions</a></li>
356
+ </ul>
357
+ </div>
358
+
359
+ <div>
360
+ <h4 class="text-lg font-semibold mb-4">Informations</h4>
361
+ <ul class="space-y-2">
362
+ <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
363
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
364
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
365
+ <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li>
366
+ <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li>
367
+ </ul>
368
+ </div>
369
+
370
+ <div>
371
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
372
+ <p class="text-gray-400 mb-4">
373
+ Abonnez-vous pour recevoir les dernières actualités et offres spéciales.
374
+ </p>
375
+ <div class="flex">
376
+ <input type="email" placeholder="Votre email"
377
+ class="bg-gray-800 text-white px-4 py-2 rounded-l-lg w-full outline-none">
378
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg">
379
+ <i class="fas fa-paper-plane"></i>
380
+ </button>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500">
386
+ <p>&copy; 2023 GameHub. Tous droits réservés.</p>
387
+ </div>
388
+ </div>
389
+ </footer>
390
+
391
+ <script>
392
+ // Menu mobile
393
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
394
+ const mobileMenu = document.getElementById('mobile-menu');
395
+
396
+ mobileMenuButton.addEventListener('click', () => {
397
+ mobileMenu.classList.toggle('hidden');
398
+ });
399
+
400
+ // Carrousel des nouveautés
401
+ const carouselInner = document.getElementById('carousel-inner');
402
+ const prevBtn = document.getElementById('prev-btn');
403
+ const nextBtn = document.getElementById('next-btn');
404
+
405
+ // Générer des cartes de jeu pour le carrousel
406
+ const newGames = [
407
+ { title: "Mystic Quest", price: "29.99€", discount: "45%", rating: 4 },
408
+ { title: "Battle Royale", price: "19.99€", discount: "60%", rating: 5 },
409
+ { title: "Puzzle Masters", price: "14.99€", rating: 3.5 },
410
+ { title: "Cyber Sports", price: "39.99€", rating: 4.5 },
411
+ { title: "Fantasy World", price: "49.99€", discount: "30%", rating: 4 },
412
+ { title: "Space Pirates", price: "24.99€", rating: 3 }
413
+ ];
414
+
415
+ newGames.forEach(game => {
416
+ const gameCard = document.createElement('div');
417
+ gameCard.className = 'min-w-[250px] px-2';
418
+ gameCard.innerHTML = `
419
+ <div class="game-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition-all duration-300 cursor-pointer h-full">
420
+ <img src="https://via.placeholder.com/250x150" alt="${game.title}" class="w-full h-40 object-cover">
421
+ <div class="p-4">
422
+ <h3 class="font-bold text-lg mb-2">${game.title}</h3>
423
+ <div class="flex items-center mb-2">
424
+ <div class="flex text-yellow-400">
425
+ ${'<i class="fas fa-star"></i>'.repeat(Math.floor(game.rating))}
426
+ ${game.rating % 1 >= 0.5 ? '<i class="fas fa-star-half-alt"></i>' : ''}
427
+ ${'<i class="far fa-star"></i>'.repeat(5 - Math.ceil(game.rating))}
428
+ </div>
429
+ <span class="text-gray-400 text-sm ml-2">(${game.rating})</span>
430
+ </div>
431
+ <div class="flex justify-between items-center">
432
+ <div>
433
+ ${game.discount ? `<span class="text-gray-400 line-through text-sm">${(parseFloat(game.price) / (1 - parseFloat(game.discount)/100)).toFixed(2)}€</span>` : ''}
434
+ <p class="font-bold ${game.discount ? 'text-green-400' : ''}">${game.price}</p>
435
+ </div>
436
+ ${game.discount ? `<span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">-${game.discount}</span>` : ''}
437
+ </div>
438
+ </div>
439
+ </div>
440
+ `;
441
+ carouselInner.appendChild(gameCard);
442
+ });
443
+
444
+ let currentPosition = 0;
445
+ const itemWidth = 250; // Largeur d'une carte + marges
446
+ const visibleItems = Math.floor(window.innerWidth / itemWidth);
447
+
448
+ function updateCarousel() {
449
+ carouselInner.style.transform = `translateX(-${currentPosition * itemWidth}px)`;
450
+ }
451
+
452
+ nextBtn.addEventListener('click', () => {
453
+ if (currentPosition < newGames.length - visibleItems) {
454
+ currentPosition++;
455
+ updateCarousel();
456
+ }
457
+ });
458
+
459
+ prevBtn.addEventListener('click', () => {
460
+ if (currentPosition > 0) {
461
+ currentPosition--;
462
+ updateCarousel();
463
+ }
464
+ });
465
+
466
+ // Compte à rebours pour les promotions
467
+ function updateCountdown() {
468
+ const now = new Date();
469
+ const endDate = new Date();
470
+ endDate.setDate(now.getDate() + 3); // 3 jours à partir de maintenant
471
+
472
+ const diff = endDate - now;
473
+
474
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
475
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
476
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
477
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
478
+
479
+ document.getElementById('days').textContent = days.toString().padStart(2, '0');
480
+ document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
481
+ document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
482
+ document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
483
+ }
484
+
485
+ updateCountdown();
486
+ setInterval(updateCountdown, 1000);
487
+
488
+ // Animation au survol des catégories
489
+ const categoryCards = document.querySelectorAll('.category-card');
490
+ categoryCards.forEach(card => {
491
+ card.addEventListener('mouseenter', () => {
492
+ const icon = card.querySelector('i');
493
+ icon.classList.add('animate-bounce');
494
+ });
495
+
496
+ card.addEventListener('mouseleave', () => {
497
+ const icon = card.querySelector('i');
498
+ icon.classList.remove('animate-bounce');
499
+ });
500
+ });
501
+ </script>
502
+ <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=ahmedamine19/gamehub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
503
+ </html>