Hugging Face's logo

Spaces:
docto41
/
gaming
Running

App Files Community
docto41 commited on
Commit
040399c
·
verified ·
1 Parent(s): 9ec7dfa

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +546 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gaming
3
- emoji: 🐨
4
- colorFrom: green
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: gaming
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,546 @@
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>GameSite Generator - Créez votre site de jeux automatiquement</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
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ .floating {
16
+ animation: float 3s ease-in-out infinite;
17
+ }
18
+ .game-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .gradient-bg {
23
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24
+ }
25
+ .preview-container {
26
+ background-image: radial-gradient(circle at 50% 50%, #4b5563 0%, #1f2937 100%);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50 min-h-screen">
31
+ <!-- Navigation -->
32
+ <nav class="gradient-bg text-white shadow-lg">
33
+ <div class="container mx-auto px-4 py-4">
34
+ <div class="flex items-center justify-between">
35
+ <div class="flex items-center space-x-3">
36
+ <i class="fas fa-gamepad text-2xl"></i>
37
+ <span class="text-xl font-bold">GameSite Generator</span>
38
+ </div>
39
+ <div class="hidden md:flex space-x-6">
40
+ <a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a>
41
+ <a href="#generator" class="hover:text-gray-200 transition">Générateur</a>
42
+ <a href="#templates" class="hover:text-gray-200 transition">Modèles</a>
43
+ </div>
44
+ <button class="md:hidden text-xl">
45
+ <i class="fas fa-bars"></i>
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <!-- Hero Section -->
52
+ <section class="gradient-bg text-white py-16">
53
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
54
+ <div class="md:w-1/2 mb-10 md:mb-0">
55
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Créez votre site de jeux en quelques clics</h1>
56
+ <p class="text-xl mb-8">Notre générateur automatique vous permet de créer un site de jeux professionnel sans aucune connaissance en programmation.</p>
57
+ <div class="flex space-x-4">
58
+ <a href="#generator" class="bg-white text-purple-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Essayer maintenant</a>
59
+ <a href="#features" class="border border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition">En savoir plus</a>
60
+ </div>
61
+ </div>
62
+ <div class="md:w-1/2 flex justify-center">
63
+ <div class="relative floating">
64
+ <div class="w-64 h-64 bg-white rounded-xl shadow-2xl transform rotate-6"></div>
65
+ <div class="absolute top-0 left-0 w-64 h-64 bg-purple-200 rounded-xl shadow-2xl transform -rotate-6 opacity-70"></div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </section>
70
+
71
+ <!-- Features Section -->
72
+ <section id="features" class="py-16 bg-white">
73
+ <div class="container mx-auto px-4">
74
+ <h2 class="text-3xl font-bold text-center mb-12">Fonctionnalités puissantes</h2>
75
+ <div class="grid md:grid-cols-3 gap-8">
76
+ <div class="bg-gray-50 p-6 rounded-xl">
77
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
78
+ <i class="fas fa-magic text-purple-600 text-xl"></i>
79
+ </div>
80
+ <h3 class="text-xl font-semibold mb-2">Génération automatique</h3>
81
+ <p class="text-gray-600">Notre algorithme crée un site complet basé sur vos préférences en quelques secondes.</p>
82
+ </div>
83
+ <div class="bg-gray-50 p-6 rounded-xl">
84
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
85
+ <i class="fas fa-palette text-blue-600 text-xl"></i>
86
+ </div>
87
+ <h3 class="text-xl font-semibold mb-2">Design personnalisable</h3>
88
+ <p class="text-gray-600">Choisissez parmi des dizaines de thèmes et couleurs pour un look unique.</p>
89
+ </div>
90
+ <div class="bg-gray-50 p-6 rounded-xl">
91
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
92
+ <i class="fas fa-gamepad text-green-600 text-xl"></i>
93
+ </div>
94
+ <h3 class="text-xl font-semibold mb-2">Intégration de jeux</h3>
95
+ <p class="text-gray-600">Ajoutez facilement des jeux HTML5 populaires à votre site sans codage.</p>
96
+ </div>
97
+ <div class="bg-gray-50 p-6 rounded-xl">
98
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
99
+ <i class="fas fa-mobile-alt text-yellow-600 text-xl"></i>
100
+ </div>
101
+ <h3 class="text-xl font-semibold mb-2">Optimisé mobile</h3>
102
+ <p class="text-gray-600">Votre site sera parfaitement adapté à tous les appareils mobiles.</p>
103
+ </div>
104
+ <div class="bg-gray-50 p-6 rounded-xl">
105
+ <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
106
+ <i class="fas fa-chart-line text-red-600 text-xl"></i>
107
+ </div>
108
+ <h3 class="text-xl font-semibold mb-2">Analytiques intégrés</h3>
109
+ <p class="text-gray-600">Suivez les performances de votre site avec des outils d'analyse intégrés.</p>
110
+ </div>
111
+ <div class="bg-gray-50 p-6 rounded-xl">
112
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
113
+ <i class="fas fa-cloud-upload-alt text-indigo-600 text-xl"></i>
114
+ </div>
115
+ <h3 class="text-xl font-semibold mb-2">Hébergement inclus</h3>
116
+ <p class="text-gray-600">Publiez votre site instantanément avec notre hébergement cloud gratuit.</p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- Generator Section -->
123
+ <section id="generator" class="py-16 bg-gray-50">
124
+ <div class="container mx-auto px-4">
125
+ <h2 class="text-3xl font-bold text-center mb-12">Créez votre site de jeux</h2>
126
+ <div class="flex flex-col lg:flex-row gap-8">
127
+ <!-- Form -->
128
+ <div class="lg:w-1/2 bg-white p-8 rounded-xl shadow-md">
129
+ <h3 class="text-xl font-semibold mb-6">Personnalisez votre site</h3>
130
+
131
+ <div class="mb-6">
132
+ <label class="block text-gray-700 mb-2">Nom du site</label>
133
+ <input type="text" id="site-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition" placeholder="Mon Super Site de Jeux">
134
+ </div>
135
+
136
+ <div class="mb-6">
137
+ <label class="block text-gray-700 mb-2">Catégorie principale</label>
138
+ <select id="site-category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition">
139
+ <option value="arcade">Jeux d'arcade</option>
140
+ <option value="puzzle">Jeux de puzzle</option>
141
+ <option value="adventure">Jeux d'aventure</option>
142
+ <option value="multiplayer">Jeux multijoueurs</option>
143
+ <option value="retro">Jeux rétro</option>
144
+ </select>
145
+ </div>
146
+
147
+ <div class="mb-6">
148
+ <label class="block text-gray-700 mb-2">Thème de couleur</label>
149
+ <div class="flex space-x-3">
150
+ <div class="color-option w-8 h-8 rounded-full bg-purple-600 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="purple"></div>
151
+ <div class="color-option w-8 h-8 rounded-full bg-blue-600 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="blue"></div>
152
+ <div class="color-option w-8 h-8 rounded-full bg-green-600 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="green"></div>
153
+ <div class="color-option w-8 h-8 rounded-full bg-red-600 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="red"></div>
154
+ <div class="color-option w-8 h-8 rounded-full bg-yellow-500 cursor-pointer border-2 border-transparent hover:border-gray-300" data-color="yellow"></div>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="mb-6">
159
+ <label class="block text-gray-700 mb-2">Style de navigation</label>
160
+ <div class="flex space-x-4">
161
+ <div class="nav-style-option p-2 border rounded-lg cursor-pointer hover:bg-gray-50" data-style="simple">
162
+ <div class="w-24 h-2 bg-gray-300 mb-1"></div>
163
+ <div class="w-16 h-2 bg-gray-300"></div>
164
+ <p class="text-xs mt-2 text-center">Simple</p>
165
+ </div>
166
+ <div class="nav-style-option p-2 border rounded-lg cursor-pointer hover:bg-gray-50" data-style="modern">
167
+ <div class="w-full h-2 bg-gray-300 mb-1"></div>
168
+ <div class="w-full h-8 bg-gray-200 rounded"></div>
169
+ <p class="text-xs mt-2 text-center">Moderne</p>
170
+ </div>
171
+ <div class="nav-style-option p-2 border rounded-lg cursor-pointer hover:bg-gray-50" data-style="gaming">
172
+ <div class="w-full h-8 bg-gray-800 rounded-t-lg"></div>
173
+ <div class="w-full h-2 bg-gray-700 rounded-b-lg"></div>
174
+ <p class="text-xs mt-2 text-center">Gaming</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="mb-6">
180
+ <label class="flex items-center">
181
+ <input type="checkbox" id="dark-mode" class="rounded text-purple-600 focus:ring-purple-500">
182
+ <span class="ml-2 text-gray-700">Activer le mode sombre</span>
183
+ </label>
184
+ </div>
185
+
186
+ <button id="generate-btn" class="w-full py-3 bg-purple-600 text-white rounded-lg font-semibold hover:bg-purple-700 transition focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
187
+ <i class="fas fa-magic mr-2"></i> Générer mon site
188
+ </button>
189
+ </div>
190
+
191
+ <!-- Preview -->
192
+ <div class="lg:w-1/2">
193
+ <div class="preview-container p-6 rounded-xl shadow-md h-full flex flex-col">
194
+ <h3 class="text-xl font-semibold mb-4 text-white">Aperçu en direct</h3>
195
+ <div id="site-preview" class="flex-1 bg-white rounded-lg overflow-hidden">
196
+ <div class="h-8 bg-gray-200 flex items-center px-4">
197
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
198
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
199
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
200
+ </div>
201
+ <div class="p-4">
202
+ <div class="text-center py-10 text-gray-400">
203
+ <i class="fas fa-laptop-code text-4xl mb-3"></i>
204
+ <p>Votre aperçu apparaîtra ici</p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Templates Section -->
215
+ <section id="templates" class="py-16 bg-white">
216
+ <div class="container mx-auto px-4">
217
+ <h2 class="text-3xl font-bold text-center mb-4">Modèles populaires</h2>
218
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Choisissez parmi nos modèles pré-conçus ou créez le vôtre à partir de zéro</p>
219
+
220
+ <div class="grid md:grid-cols-3 gap-8">
221
+ <div class="template-card bg-gray-50 rounded-xl overflow-hidden cursor-pointer transition hover:shadow-lg">
222
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
223
+ <i class="fas fa-gamepad text-white text-5xl"></i>
224
+ </div>
225
+ <div class="p-6">
226
+ <h3 class="text-xl font-semibold mb-2">Arcade Pro</h3>
227
+ <p class="text-gray-600 mb-4">Parfait pour les jeux d'arcade classiques avec des couleurs vives.</p>
228
+ <button class="template-select-btn w-full py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition" data-template="arcade">
229
+ Sélectionner
230
+ </button>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="template-card bg-gray-50 rounded-xl overflow-hidden cursor-pointer transition hover:shadow-lg">
235
+ <div class="h-48 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center">
236
+ <i class="fas fa-puzzle-piece text-white text-5xl"></i>
237
+ </div>
238
+ <div class="p-6">
239
+ <h3 class="text-xl font-semibold mb-2">Puzzle Master</h3>
240
+ <p class="text-gray-600 mb-4">Design épuré pour les jeux de réflexion et casse-têtes.</p>
241
+ <button class="template-select-btn w-full py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition" data-template="puzzle">
242
+ Sélectionner
243
+ </button>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="template-card bg-gray-50 rounded-xl overflow-hidden cursor-pointer transition hover:shadow-lg">
248
+ <div class="h-48 bg-gradient-to-r from-green-500 to-emerald-400 flex items-center justify-center">
249
+ <i class="fas fa-users text-white text-5xl"></i>
250
+ </div>
251
+ <div class="p-6">
252
+ <h3 class="text-xl font-semibold mb-2">Multiplayer Hub</h3>
253
+ <p class="text-gray-600 mb-4">Optimisé pour les jeux en ligne et communautés de joueurs.</p>
254
+ <button class="template-select-btn w-full py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition" data-template="multiplayer">
255
+ Sélectionner
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Generated Site Modal -->
264
+ <div id="generated-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
265
+ <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
266
+ <div class="p-6 border-b border-gray-200 flex justify-between items-center">
267
+ <h3 class="text-xl font-semibold">Votre site est prêt !</h3>
268
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
269
+ <i class="fas fa-times"></i>
270
+ </button>
271
+ </div>
272
+ <div class="p-6">
273
+ <div id="generated-site" class="mb-6 border border-gray-200 rounded-lg overflow-hidden">
274
+ <!-- Generated site will be shown here -->
275
+ </div>
276
+ <div class="grid md:grid-cols-2 gap-6">
277
+ <div>
278
+ <h4 class="font-semibold mb-3">Étapes suivantes</h4>
279
+ <ul class="space-y-2">
280
+ <li class="flex items-start">
281
+ <i class="fas fa-cloud-upload-alt text-purple-600 mt-1 mr-2"></i>
282
+ <span>Publiez votre site avec notre hébergement gratuit</span>
283
+ </li>
284
+ <li class="flex items-start">
285
+ <i class="fas fa-palette text-purple-600 mt-1 mr-2"></i>
286
+ <span>Personnalisez davantage avec notre éditeur avancé</span>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <i class="fas fa-gamepad text-purple-600 mt-1 mr-2"></i>
290
+ <span>Ajoutez plus de jeux à votre collection</span>
291
+ </li>
292
+ </ul>
293
+ </div>
294
+ <div>
295
+ <h4 class="font-semibold mb-3">Téléchargement</h4>
296
+ <p class="mb-4 text-gray-600">Vous pouvez télécharger le code source complet de votre site pour l'héberger vous-même.</p>
297
+ <div class="flex space-x-3">
298
+ <button class="flex-1 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
299
+ <i class="fas fa-file-archive mr-2"></i> Télécharger ZIP
300
+ </button>
301
+ <button class="flex-1 py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition">
302
+ <i class="fab fa-github mr-2"></i> Voir sur GitHub
303
+ </button>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ <div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
309
+ <button id="edit-site" class="px-6 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
310
+ <i class="fas fa-edit mr-2"></i> Modifier
311
+ </button>
312
+ <button id="publish-site" class="px-6 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
313
+ <i class="fas fa-rocket mr-2"></i> Publier maintenant
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Footer -->
320
+ <footer class="bg-gray-800 text-white py-12">
321
+ <div class="container mx-auto px-4">
322
+ <div class="grid md:grid-cols-4 gap-8">
323
+ <div>
324
+ <h3 class="text-xl font-bold mb-4 flex items-center">
325
+ <i class="fas fa-gamepad mr-2"></i> GameSite Generator
326
+ </h3>
327
+ <p class="text-gray-400">La solution la plus simple pour créer des sites de jeux professionnels en quelques minutes.</p>
328
+ </div>
329
+ <div>
330
+ <h4 class="font-semibold mb-4">Navigation</h4>
331
+ <ul class="space-y-2">
332
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
333
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li>
334
+ <li><a href="#generator" class="text-gray-400 hover:text-white transition">Générateur</a></li>
335
+ <li><a href="#templates" class="text-gray-400 hover:text-white transition">Modèles</a></li>
336
+ </ul>
337
+ </div>
338
+ <div>
339
+ <h4 class="font-semibold mb-4">Ressources</h4>
340
+ <ul class="space-y-2">
341
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
342
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutoriels</a></li>
343
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
344
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
345
+ </ul>
346
+ </div>
347
+ <div>
348
+ <h4 class="font-semibold mb-4">Contact</h4>
349
+ <ul class="space-y-2">
350
+ <li class="flex items-center">
351
+ <i class="fas fa-envelope mr-2 text-gray-400"></i>
352
+ <span class="text-gray-400">contact@gamesitegen.com</span>
353
+ </li>
354
+ <li class="flex items-center">
355
+ <i class="fab fa-twitter mr-2 text-gray-400"></i>
356
+ <span class="text-gray-400">@gamesitegen</span>
357
+ </li>
358
+ <li class="flex items-center">
359
+ <i class="fab fa-discord mr-2 text-gray-400"></i>
360
+ <span class="text-gray-400">Discord</span>
361
+ </li>
362
+ </ul>
363
+ </div>
364
+ </div>
365
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
366
+ <p>&copy; 2023 GameSite Generator. Tous droits réservés.</p>
367
+ </div>
368
+ </div>
369
+ </footer>
370
+
371
+ <script>
372
+ document.addEventListener('DOMContentLoaded', function() {
373
+ // Color selection
374
+ const colorOptions = document.querySelectorAll('.color-option');
375
+ let selectedColor = 'purple';
376
+
377
+ colorOptions.forEach(option => {
378
+ option.addEventListener('click', function() {
379
+ colorOptions.forEach(opt => opt.classList.remove('border-gray-700', 'scale-110'));
380
+ this.classList.add('border-gray-700', 'scale-110');
381
+ selectedColor = this.getAttribute('data-color');
382
+ updatePreview();
383
+ });
384
+ });
385
+
386
+ // Nav style selection
387
+ const navStyleOptions = document.querySelectorAll('.nav-style-option');
388
+ let selectedNavStyle = 'simple';
389
+
390
+ navStyleOptions.forEach(option => {
391
+ option.addEventListener('click', function() {
392
+ navStyleOptions.forEach(opt => opt.classList.remove('border-purple-500', 'bg-purple-50'));
393
+ this.classList.add('border-purple-500', 'bg-purple-50');
394
+ selectedNavStyle = this.getAttribute('data-style');
395
+ updatePreview();
396
+ });
397
+ });
398
+
399
+ // Template selection
400
+ const templateButtons = document.querySelectorAll('.template-select-btn');
401
+
402
+ templateButtons.forEach(button => {
403
+ button.addEventListener('click', function() {
404
+ const template = this.getAttribute('data-template');
405
+ applyTemplate(template);
406
+ });
407
+ });
408
+
409
+ // Generate button
410
+ const generateBtn = document.getElementById('generate-btn');
411
+ const generatedModal = document.getElementById('generated-modal');
412
+ const closeModal = document.getElementById('close-modal');
413
+ const generatedSite = document.getElementById('generated-site');
414
+
415
+ generateBtn.addEventListener('click', function() {
416
+ generateSite();
417
+ });
418
+
419
+ closeModal.addEventListener('click', function() {
420
+ generatedModal.classList.add('hidden');
421
+ });
422
+
423
+ // Update preview
424
+ function updatePreview() {
425
+ // In a real implementation, this would update the preview panel
426
+ console.log('Updating preview with:', {
427
+ color: selectedColor,
428
+ navStyle: selectedNavStyle
429
+ });
430
+ }
431
+
432
+ // Apply template
433
+ function applyTemplate(template) {
434
+ let color, category, navStyle;
435
+
436
+ switch(template) {
437
+ case 'arcade':
438
+ color = 'purple';
439
+ category = 'arcade';
440
+ navStyle = 'gaming';
441
+ break;
442
+ case 'puzzle':
443
+ color = 'blue';
444
+ category = 'puzzle';
445
+ navStyle = 'modern';
446
+ break;
447
+ case 'multiplayer':
448
+ color = 'green';
449
+ category = 'multiplayer';
450
+ navStyle = 'modern';
451
+ break;
452
+ }
453
+
454
+ // Update form values
455
+ document.getElementById('site-category').value = category;
456
+ selectedColor = color;
457
+ selectedNavStyle = navStyle;
458
+
459
+ // Update color selection
460
+ colorOptions.forEach(opt => {
461
+ opt.classList.remove('border-gray-700', 'scale-110');
462
+ if(opt.getAttribute('data-color') === color) {
463
+ opt.classList.add('border-gray-700', 'scale-110');
464
+ }
465
+ });
466
+
467
+ // Update nav style selection
468
+ navStyleOptions.forEach(opt => {
469
+ opt.classList.remove('border-purple-500', 'bg-purple-50');
470
+ if(opt.getAttribute('data-style') === navStyle) {
471
+ opt.classList.add('border-purple-500', 'bg-purple-50');
472
+ }
473
+ });
474
+
475
+ updatePreview();
476
+ }
477
+
478
+ // Generate site
479
+ function generateSite() {
480
+ const siteName = document.getElementById('site-name').value || "Mon Site de Jeux";
481
+ const category = document.getElementById('site-category').value;
482
+ const darkMode = document.getElementById('dark-mode').checked;
483
+
484
+ // Show loading state
485
+ generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Génération en cours...';
486
+ generateBtn.disabled = true;
487
+
488
+ // Simulate generation delay
489
+ setTimeout(() => {
490
+ // Create generated site HTML
491
+ generatedSite.innerHTML = `
492
+ <div class="border-b border-gray-200 bg-${selectedColor}-600 text-white p-4">
493
+ <div class="container mx-auto flex justify-between items-center">
494
+ <div class="flex items-center">
495
+ <i class="fas fa-gamepad text-xl mr-2"></i>
496
+ <span class="font-bold text-xl">${siteName}</span>
497
+ </div>
498
+ <nav>
499
+ <ul class="flex space-x-6">
500
+ <li><a href="#" class="hover:underline">Accueil</a></li>
501
+ <li><a href="#" class="hover:underline">Jeux</a></li>
502
+ <li><a href="#" class="hover:underline">Catégories</a></li>
503
+ <li><a href="#" class="hover:underline">À propos</a></li>
504
+ </ul>
505
+ </nav>
506
+ </div>
507
+ </div>
508
+ <div class="bg-gray-${darkMode ? '800' : '50'} min-h-64 p-8">
509
+ <div class="container mx-auto">
510
+ <h1 class="text-3xl font-bold text-${darkMode ? 'white' : 'gray-800'} mb-6">Bienvenue sur ${siteName}</h1>
511
+ <div class="grid md:grid-cols-3 gap-6">
512
+ ${[1, 2, 3].map(i => `
513
+ <div class="bg-${darkMode ? 'gray-700' : 'white'} rounded-lg shadow-md overflow-hidden">
514
+ <div class="h-32 bg-${selectedColor}-500 flex items-center justify-center">
515
+ <i class="fas fa-gamepad text-white text-4xl"></i>
516
+ </div>
517
+ <div class="p-4">
518
+ <h3 class="font-semibold text-${darkMode ? 'white' : 'gray-800'} mb-2">Jeu ${i}</h3>
519
+ <p class="text-${darkMode ? 'gray-300' : 'gray-600'} text-sm">Un super jeu ${category} à découvrir.</p>
520
+ </div>
521
+ </div>
522
+ `).join('')}
523
+ </div>
524
+ </div>
525
+ </div>
526
+ <div class="bg-gray-${darkMode ? '900' : '100'} text-${darkMode ? 'gray-400' : 'gray-600'} p-4 text-center">
527
+ <p>© ${new Date().getFullYear()} ${siteName}. Tous droits réservés.</p>
528
+ </div>
529
+ `;
530
+
531
+ // Reset button
532
+ generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Générer mon site';
533
+ generateBtn.disabled = false;
534
+
535
+ // Show modal
536
+ generatedModal.classList.remove('hidden');
537
+ }, 2000);
538
+ }
539
+
540
+ // Initialize first color and nav style as selected
541
+ colorOptions[0].classList.add('border-gray-700', 'scale-110');
542
+ navStyleOptions[0].classList.add('border-purple-500', 'bg-purple-50');
543
+ });
544
+ </script>
545
+ <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=docto41/gaming" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
546
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ générateur claude.ai
2
+ creer un site de générateur de site de jeux en automatique