Hugging Face's logo

Spaces:
docto41
/
services-ia
Running

App Files Community
docto41 commited on
Commit
3d75105
·
verified ·
1 Parent(s): dabcd5b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +699 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Services Ia
3
- emoji: 🏆
4
- colorFrom: yellow
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: services-ia
3
+ emoji: 🐳
4
+ colorFrom: red
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,699 @@
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>NexusAI - Générateur de Sites Futuriste</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
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
10
+ <style>
11
+ :root {
12
+ --neon-blue: #0ff0fc;
13
+ --neon-pink: #ff2ced;
14
+ --neon-purple: #9d00ff;
15
+ --dark-space: #0a0a1a;
16
+ }
17
+
18
+ body {
19
+ background-color: var(--dark-space);
20
+ color: white;
21
+ font-family: 'Segoe UI', system-ui, sans-serif;
22
+ overflow-x: hidden;
23
+ }
24
+
25
+ .neon-text {
26
+ text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
27
+ }
28
+
29
+ .neon-box {
30
+ border: 1px solid var(--neon-blue);
31
+ box-shadow: 0 0 15px var(--neon-blue), inset 0 0 15px var(--neon-blue);
32
+ background: rgba(15, 240, 252, 0.05);
33
+ }
34
+
35
+ .neon-btn {
36
+ position: relative;
37
+ overflow: hidden;
38
+ transition: all 0.3s;
39
+ z-index: 1;
40
+ }
41
+
42
+ .neon-btn::before {
43
+ content: '';
44
+ position: absolute;
45
+ top: 0;
46
+ left: -100%;
47
+ width: 100%;
48
+ height: 100%;
49
+ background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
50
+ transition: 0.5s;
51
+ z-index: -1;
52
+ }
53
+
54
+ .neon-btn:hover::before {
55
+ left: 100%;
56
+ }
57
+
58
+ .glowing-circle {
59
+ position: absolute;
60
+ border-radius: 50%;
61
+ filter: blur(40px);
62
+ opacity: 0.5;
63
+ z-index: -1;
64
+ }
65
+
66
+ .holographic-card {
67
+ background: linear-gradient(135deg, rgba(15, 240, 252, 0.1), rgba(157, 0, 255, 0.1));
68
+ backdrop-filter: blur(10px);
69
+ border: 1px solid rgba(255, 255, 255, 0.1);
70
+ position: relative;
71
+ overflow: hidden;
72
+ }
73
+
74
+ .holographic-card::before {
75
+ content: '';
76
+ position: absolute;
77
+ top: -50%;
78
+ left: -50%;
79
+ width: 200%;
80
+ height: 200%;
81
+ background: linear-gradient(
82
+ to bottom right,
83
+ rgba(15, 240, 252, 0) 0%,
84
+ rgba(15, 240, 252, 0.1) 20%,
85
+ rgba(255, 44, 237, 0.1) 40%,
86
+ rgba(157, 0, 255, 0.1) 60%,
87
+ rgba(15, 240, 252, 0) 100%
88
+ );
89
+ transform: rotate(30deg);
90
+ animation: shine 6s infinite linear;
91
+ }
92
+
93
+ @keyframes shine {
94
+ 0% { transform: rotate(30deg) translate(-30%, -30%); }
95
+ 100% { transform: rotate(30deg) translate(30%, 30%); }
96
+ }
97
+
98
+ .cyber-grid {
99
+ background-image:
100
+ linear-gradient(rgba(15, 240, 252, 0.1) 1px, transparent 1px),
101
+ linear-gradient(90deg, rgba(15, 240, 252, 0.1) 1px, transparent 1px);
102
+ background-size: 40px 40px;
103
+ }
104
+
105
+ .floating {
106
+ animation: floating 6s ease-in-out infinite;
107
+ }
108
+
109
+ @keyframes floating {
110
+ 0% { transform: translateY(0px); }
111
+ 50% { transform: translateY(-20px); }
112
+ 100% { transform: translateY(0px); }
113
+ }
114
+
115
+ .pulse {
116
+ animation: pulse 2s infinite;
117
+ }
118
+
119
+ @keyframes pulse {
120
+ 0% { opacity: 0.6; }
121
+ 50% { opacity: 1; }
122
+ 100% { opacity: 0.6; }
123
+ }
124
+
125
+ .scanline {
126
+ position: relative;
127
+ overflow: hidden;
128
+ }
129
+
130
+ .scanline::after {
131
+ content: '';
132
+ position: absolute;
133
+ top: 0;
134
+ left: 0;
135
+ right: 0;
136
+ height: 2px;
137
+ background: var(--neon-blue);
138
+ box-shadow: 0 0 10px var(--neon-blue);
139
+ animation: scan 8s linear infinite;
140
+ }
141
+
142
+ @keyframes scan {
143
+ 0% { top: -2px; }
144
+ 100% { top: 100%; }
145
+ }
146
+
147
+ .typewriter {
148
+ overflow: hidden;
149
+ border-right: 3px solid var(--neon-blue);
150
+ white-space: nowrap;
151
+ animation:
152
+ typing 3.5s steps(40, end),
153
+ blink-caret 0.75s step-end infinite;
154
+ }
155
+
156
+ @keyframes typing {
157
+ from { width: 0 }
158
+ to { width: 100% }
159
+ }
160
+
161
+ @keyframes blink-caret {
162
+ from, to { border-color: transparent }
163
+ 50% { border-color: var(--neon-blue) }
164
+ }
165
+
166
+ .particle {
167
+ position: absolute;
168
+ border-radius: 50%;
169
+ background: var(--neon-blue);
170
+ pointer-events: none;
171
+ }
172
+ </style>
173
+ </head>
174
+ <body class="cyber-grid">
175
+ <!-- Particules animées -->
176
+ <div id="particles"></div>
177
+
178
+ <!-- Cercles lumineux en arrière-plan -->
179
+ <div class="glowing-circle w-64 h-64 bg-blue-500" style="top: 20%; left: 10%;"></div>
180
+ <div class="glowing-circle w-96 h-96 bg-purple-500" style="top: 60%; right: 5%;"></div>
181
+ <div class="glowing-circle w-80 h-80 bg-pink-500" style="bottom: 10%; left: 20%;"></div>
182
+
183
+ <!-- Navigation -->
184
+ <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
185
+ <div class="flex items-center space-x-2 neon-text">
186
+ <i class="fas fa-robot text-3xl"></i>
187
+ <span class="text-2xl font-bold">NexusAI</span>
188
+ </div>
189
+ <div class="hidden md:flex space-x-8">
190
+ <a href="#" class="hover:text-neon-blue transition">Accueil</a>
191
+ <a href="#" class="hover:text-neon-blue transition">Fonctionnalités</a>
192
+ <a href="#" class="hover:text-neon-blue transition">Générateurs</a>
193
+ <a href="#" class="hover:text-neon-blue transition">Templates</a>
194
+ <a href="#" class="hover:text-neon-blue transition">Contact</a>
195
+ </div>
196
+ <div class="flex items-center space-x-4">
197
+ <button class="px-4 py-2 rounded-full border border-neon-blue hover:bg-neon-blue hover:bg-opacity-10 transition">
198
+ Connexion
199
+ </button>
200
+ <button class="px-6 py-2 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple text-black font-bold hover:opacity-90 transition">
201
+ Essai Gratuit
202
+ </button>
203
+ </div>
204
+ </nav>
205
+
206
+ <!-- Hero Section -->
207
+ <section class="container mx-auto px-6 py-20 mt-10 relative">
208
+ <div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
209
+ <div class="floating" style="position: absolute; top: 30%; left: 70%;">
210
+ <div class="w-16 h-16 rounded-full bg-neon-blue opacity-20"></div>
211
+ </div>
212
+ <div class="floating" style="position: absolute; top: 60%; left: 20%; animation-delay: 2s;">
213
+ <div class="w-24 h-24 rounded-full bg-neon-pink opacity-20"></div>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="relative z-10 text-center">
218
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text">
219
+ <span class="typewriter">Créez des Sites Futuristes en Quelques Clics</span>
220
+ </h1>
221
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto text-gray-300">
222
+ Notre IA avancée génère des sites web uniques avec des designs cyberpunk, des animations futuristes et des fonctionnalités intelligentes.
223
+ </p>
224
+ <div class="flex flex-col sm:flex-row justify-center gap-6">
225
+ <button class="px-8 py-4 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple text-black font-bold text-lg hover:opacity-90 transition transform hover:scale-105 shadow-lg shadow-neon-blue/30">
226
+ <i class="fas fa-bolt mr-2"></i> Générer Maintenant
227
+ </button>
228
+ <button class="px-8 py-4 rounded-full border-2 border-neon-blue text-neon-blue font-bold text-lg hover:bg-neon-blue hover:bg-opacity-10 transition transform hover:scale-105">
229
+ <i class="fas fa-play-circle mr-2"></i> Voir la Démo
230
+ </button>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="mt-20 relative">
235
+ <div class="holographic-card rounded-2xl overflow-hidden" style="height: 500px;">
236
+ <div class="absolute inset-0 flex items-center justify-center">
237
+ <div class="text-center p-8">
238
+ <i class="fas fa-laptop-code text-6xl mb-6 text-neon-blue"></i>
239
+ <h3 class="text-3xl font-bold mb-4">Prévisualisation en Temps Réel</h3>
240
+ <p class="text-gray-300 mb-6">L'interface de NexusAI s'adapte à vos besoins en direct</p>
241
+ <div class="inline-block px-6 py-3 rounded-full bg-neon-blue bg-opacity-20 text-neon-blue font-medium">
242
+ Chargement des modules...
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex space-x-4">
249
+ <div class="w-3 h-3 rounded-full bg-neon-blue pulse"></div>
250
+ <div class="w-3 h-3 rounded-full bg-neon-pink pulse" style="animation-delay: 0.5s;"></div>
251
+ <div class="w-3 h-3 rounded-full bg-neon-purple pulse" style="animation-delay: 1s;"></div>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- Features Section -->
257
+ <section class="container mx-auto px-6 py-20 mt-20">
258
+ <div class="text-center mb-20">
259
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text">Technologie de Génération Avancée</h2>
260
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
261
+ Notre moteur AI combine plusieurs technologies de pointe pour des résultats uniques
262
+ </p>
263
+ </div>
264
+
265
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
266
+ <!-- Feature 1 -->
267
+ <div class="holographic-card rounded-xl p-8 scanline">
268
+ <div class="w-16 h-16 rounded-full bg-neon-blue bg-opacity-20 flex items-center justify-center mb-6">
269
+ <i class="fas fa-brain text-2xl text-neon-blue"></i>
270
+ </div>
271
+ <h3 class="text-2xl font-bold mb-4">Réseaux Neuronaux Profonds</h3>
272
+ <p class="text-gray-300 mb-6">
273
+ Des modèles GPT-4 et Stable Diffusion spécialement entraînés pour comprendre vos besoins en design.
274
+ </p>
275
+ <div class="h-1 w-full bg-gradient-to-r from-neon-blue to-transparent mb-4"></div>
276
+ <div class="text-neon-blue font-mono text-sm">MODULE_AI_CORE_ACTIVE</div>
277
+ </div>
278
+
279
+ <!-- Feature 2 -->
280
+ <div class="holographic-card rounded-xl p-8 scanline" style="animation-delay: 2s;">
281
+ <div class="w-16 h-16 rounded-full bg-neon-purple bg-opacity-20 flex items-center justify-center mb-6">
282
+ <i class="fas fa-project-diagram text-2xl text-neon-purple"></i>
283
+ </div>
284
+ <h3 class="text-2xl font-bold mb-4">Génération de Code Automatique</h3>
285
+ <p class="text-gray-300 mb-6">
286
+ Code HTML/CSS/JS propre et optimisé généré automatiquement avec des animations futuristes intégrées.
287
+ </p>
288
+ <div class="h-1 w-full bg-gradient-to-r from-neon-purple to-transparent mb-4"></div>
289
+ <div class="text-neon-purple font-mono text-sm">CODEGEN_v3.2_RUNNING</div>
290
+ </div>
291
+
292
+ <!-- Feature 3 -->
293
+ <div class="holographic-card rounded-xl p-8 scanline" style="animation-delay: 4s;">
294
+ <div class="w-16 h-16 rounded-full bg-neon-pink bg-opacity-20 flex items-center justify-center mb-6">
295
+ <i class="fas fa-sliders-h text-2xl text-neon-pink"></i>
296
+ </div>
297
+ <h3 class="text-2xl font-bold mb-4">Personnalisation Avancée</h3>
298
+ <p class="text-gray-300 mb-6">
299
+ Contrôle précis de chaque élément avec une interface holographique intuitive.
300
+ </p>
301
+ <div class="h-1 w-full bg-gradient-to-r from-neon-pink to-transparent mb-4"></div>
302
+ <div class="text-neon-pink font-mono text-sm">CUSTOMIZER_ENGINE_READY</div>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- Generator Interface -->
308
+ <section class="container mx-auto px-6 py-20 mt-10">
309
+ <div class="holographic-card rounded-2xl overflow-hidden p-1">
310
+ <div class="bg-gray-900 rounded-xl p-8">
311
+ <div class="flex flex-col lg:flex-row gap-8">
312
+ <!-- Sidebar -->
313
+ <div class="lg:w-1/4">
314
+ <h3 class="text-2xl font-bold mb-6 text-neon-blue flex items-center">
315
+ <i class="fas fa-cogs mr-3"></i> Paramètres
316
+ </h3>
317
+
318
+ <div class="space-y-6">
319
+ <!-- Style Selector -->
320
+ <div>
321
+ <label class="block text-gray-400 mb-2">Style Principal</label>
322
+ <select class="w-full bg-gray-800 border border-gray-700 rounded px-4 py-2 text-white focus:border-neon-blue focus:outline-none">
323
+ <option>Cyberpunk</option>
324
+ <option>Neon Futuriste</option>
325
+ <option>Matrix</option>
326
+ <option>Sci-Fi</option>
327
+ <option>Holographique</option>
328
+ </select>
329
+ </div>
330
+
331
+ <!-- Color Picker -->
332
+ <div>
333
+ <label class="block text-gray-400 mb-2">Couleur Principale</label>
334
+ <div class="flex space-x-2">
335
+ <div class="w-8 h-8 rounded-full bg-neon-blue cursor-pointer border-2 border-white"></div>
336
+ <div class="w-8 h-8 rounded-full bg-neon-pink cursor-pointer"></div>
337
+ <div class="w-8 h-8 rounded-full bg-neon-purple cursor-pointer"></div>
338
+ <div class="w-8 h-8 rounded-full bg-green-500 cursor-pointer"></div>
339
+ <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer"></div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Animation Toggle -->
344
+ <div>
345
+ <label class="flex items-center space-x-3 cursor-pointer">
346
+ <div class="relative">
347
+ <input type="checkbox" class="sr-only" checked>
348
+ <div class="w-10 h-4 bg-gray-600 rounded-full shadow-inner"></div>
349
+ <div class="dot absolute w-6 h-6 bg-neon-blue rounded-full shadow -left-1 -top-1 transition"></div>
350
+ </div>
351
+ <span class="text-gray-400">Animations 3D</span>
352
+ </label>
353
+ </div>
354
+
355
+ <!-- Sections -->
356
+ <div>
357
+ <label class="block text-gray-400 mb-2">Sections</label>
358
+ <div class="space-y-2">
359
+ <label class="flex items-center">
360
+ <input type="checkbox" class="form-checkbox text-neon-blue" checked>
361
+ <span class="ml-2 text-gray-300">Hero</span>
362
+ </label>
363
+ <label class="flex items-center">
364
+ <input type="checkbox" class="form-checkbox text-neon-blue" checked>
365
+ <span class="ml-2 text-gray-300">Features</span>
366
+ </label>
367
+ <label class="flex items-center">
368
+ <input type="checkbox" class="form-checkbox text-neon-blue">
369
+ <span class="ml-2 text-gray-300">Testimonials</span>
370
+ </label>
371
+ <label class="flex items-center">
372
+ <input type="checkbox" class="form-checkbox text-neon-blue" checked>
373
+ <span class="ml-2 text-gray-300">Contact</span>
374
+ </label>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <button class="mt-8 w-full py-3 bg-gradient-to-r from-neon-blue to-neon-purple text-black font-bold rounded-lg hover:opacity-90 transition">
380
+ <i class="fas fa-magic mr-2"></i> Générer le Site
381
+ </button>
382
+ </div>
383
+
384
+ <!-- Preview -->
385
+ <div class="lg:w-3/4">
386
+ <div class="flex justify-between items-center mb-6">
387
+ <h3 class="text-2xl font-bold text-neon-pink flex items-center">
388
+ <i class="fas fa-eye mr-3"></i> Aperçu en Direct
389
+ </h3>
390
+ <div class="flex space-x-2">
391
+ <button class="px-4 py-2 bg-gray-800 rounded-lg text-sm">Desktop</button>
392
+ <button class="px-4 py-2 bg-gray-800 rounded-lg text-sm">Tablet</button>
393
+ <button class="px-4 py-2 bg-gray-800 rounded-lg text-sm">Mobile</button>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="border-2 border-gray-700 rounded-lg overflow-hidden">
398
+ <div class="bg-gray-800 p-3 flex items-center">
399
+ <div class="flex space-x-2">
400
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
401
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
402
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
403
+ </div>
404
+ <div class="flex-1 text-center text-sm text-gray-400">
405
+ https://votresite-nexusai.com
406
+ </div>
407
+ </div>
408
+ <div class="h-96 bg-gray-900 flex items-center justify-center relative overflow-hidden">
409
+ <div class="text-center p-6">
410
+ <div class="text-4xl font-bold mb-4 neon-text">Votre Site Futuriste</div>
411
+ <p class="text-gray-400 mb-6">Le contenu généré par l'IA apparaîtra ici en temps réel</p>
412
+ <div class="inline-block px-6 py-3 rounded-full bg-neon-blue bg-opacity-20 text-neon-blue">
413
+ <i class="fas fa-spinner fa-spin mr-2"></i> Génération en cours...
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Elements animés pour la preview -->
418
+ <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
419
+ <div class="floating" style="position: absolute; top: 20%; left: 15%;">
420
+ <div class="w-8 h-8 rounded-full bg-neon-blue opacity-20"></div>
421
+ </div>
422
+ <div class="floating" style="position: absolute; top: 70%; left: 80%; animation-delay: 1s;">
423
+ <div class="w-12 h-12 rounded-full bg-neon-pink opacity-20"></div>
424
+ </div>
425
+ <div class="floating" style="position: absolute; top: 30%; left: 60%; animation-delay: 2s;">
426
+ <div class="w-6 h-6 rounded-full bg-neon-purple opacity-20"></div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="mt-6 flex justify-between items-center">
433
+ <div class="text-sm text-gray-400">
434
+ <i class="fas fa-info-circle mr-2"></i> Les modifications sont appliquées instantanément
435
+ </div>
436
+ <button class="px-6 py-2 bg-neon-blue bg-opacity-20 text-neon-blue rounded-lg font-medium">
437
+ <i class="fas fa-code mr-2"></i> Exporter le Code
438
+ </button>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </section>
445
+
446
+ <!-- Templates Gallery -->
447
+ <section class="container mx-auto px-6 py-20">
448
+ <div class="text-center mb-20">
449
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 neon-text">Templates Futuristes</h2>
450
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
451
+ Choisissez parmi nos centaines de templates conçus par IA ou créez le vôtre
452
+ </p>
453
+ </div>
454
+
455
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
456
+ <!-- Template 1 -->
457
+ <div class="holographic-card rounded-xl overflow-hidden transform hover:scale-105 transition duration-500">
458
+ <div class="h-64 bg-gradient-to-br from-neon-blue to-neon-purple relative overflow-hidden">
459
+ <div class="absolute inset-0 flex items-center justify-center">
460
+ <div class="text-center p-6">
461
+ <i class="fas fa-globe-americas text-5xl mb-4"></i>
462
+ <h3 class="text-2xl font-bold">CyberSpace</h3>
463
+ </div>
464
+ </div>
465
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-4">
466
+ <div class="flex justify-between items-center">
467
+ <span class="text-sm">Site Corporatif</span>
468
+ <button class="text-xs bg-neon-blue text-black px-3 py-1 rounded-full">Essayer</button>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Template 2 -->
475
+ <div class="holographic-card rounded-xl overflow-hidden transform hover:scale-105 transition duration-500">
476
+ <div class="h-64 bg-gradient-to-br from-neon-pink to-purple-900 relative overflow-hidden">
477
+ <div class="absolute inset-0 flex items-center justify-center">
478
+ <div class="text-center p-6">
479
+ <i class="fas fa-shopping-cart text-5xl mb-4"></i>
480
+ <h3 class="text-2xl font-bold">NeonShop</h3>
481
+ </div>
482
+ </div>
483
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-4">
484
+ <div class="flex justify-between items-center">
485
+ <span class="text-sm">E-Commerce</span>
486
+ <button class="text-xs bg-neon-pink text-black px-3 py-1 rounded-full">Essayer</button>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <!-- Template 3 -->
493
+ <div class="holographic-card rounded-xl overflow-hidden transform hover:scale-105 transition duration-500">
494
+ <div class="h-64 bg-gradient-to-br from-green-400 to-blue-500 relative overflow-hidden">
495
+ <div class="absolute inset-0 flex items-center justify-center">
496
+ <div class="text-center p-6">
497
+ <i class="fas fa-gamepad text-5xl mb-4"></i>
498
+ <h3 class="text-2xl font-bold">GameHub</h3>
499
+ </div>
500
+ </div>
501
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-4">
502
+ <div class="flex justify-between items-center">
503
+ <span class="text-sm">Gaming</span>
504
+ <button class="text-xs bg-green-400 text-black px-3 py-1 rounded-full">Essayer</button>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="text-center mt-12">
512
+ <button class="px-8 py-4 rounded-full border-2 border-neon-blue text-neon-blue font-bold text-lg hover:bg-neon-blue hover:bg-opacity-10 transition">
513
+ <i class="fas fa-boxes mr-2"></i> Voir tous les Templates (287+)
514
+ </button>
515
+ </div>
516
+ </section>
517
+
518
+ <!-- CTA Section -->
519
+ <section class="container mx-auto px-6 py-32 text-center relative">
520
+ <div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
521
+ <div class="floating" style="position: absolute; top: 20%; left: 10%;">
522
+ <div class="w-32 h-32 rounded-full bg-neon-blue opacity-10"></div>
523
+ </div>
524
+ <div class="floating" style="position: absolute; top: 60%; right: 10%; animation-delay: 2s;">
525
+ <div class="w-40 h-40 rounded-full bg-neon-purple opacity-10"></div>
526
+ </div>
527
+ </div>
528
+
529
+ <div class="relative z-10">
530
+ <h2 class="text-4xl md:text-6xl font-bold mb-8 neon-text">Prêt à Créer Votre Site Futuriste?</h2>
531
+ <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-300">
532
+ Rejoignez des milliers de créateurs et d'entreprises qui utilisent déjà NexusAI pour leurs sites web.
533
+ </p>
534
+ <button class="px-12 py-5 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple text-black font-bold text-xl hover:opacity-90 transition transform hover:scale-105 shadow-lg shadow-neon-blue/30">
535
+ <i class="fas fa-rocket mr-3"></i> Commencer Maintenant
536
+ </button>
537
+ </div>
538
+ </section>
539
+
540
+ <!-- Footer -->
541
+ <footer class="border-t border-gray-800 pt-12 pb-8">
542
+ <div class="container mx-auto px-6">
543
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
544
+ <div>
545
+ <h3 class="text-lg font-bold mb-4 text-neon-blue">NexusAI</h3>
546
+ <p class="text-gray-400">
547
+ La plateforme de génération de sites web la plus avancée, propulsée par l'IA.
548
+ </p>
549
+ </div>
550
+
551
+ <div>
552
+ <h3 class="text-lg font-bold mb-4">Produit</h3>
553
+ <ul class="space-y-2">
554
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Fonctionnalités</a></li>
555
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Templates</a></li>
556
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Prix</a></li>
557
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">API</a></li>
558
+ </ul>
559
+ </div>
560
+
561
+ <div>
562
+ <h3 class="text-lg font-bold mb-4">Ressources</h3>
563
+ <ul class="space-y-2">
564
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Documentation</a></li>
565
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Blog</a></li>
566
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Support</a></li>
567
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Forum</a></li>
568
+ </ul>
569
+ </div>
570
+
571
+ <div>
572
+ <h3 class="text-lg font-bold mb-4">Entreprise</h3>
573
+ <ul class="space-y-2">
574
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">À propos</a></li>
575
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Carrières</a></li>
576
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Presse</a></li>
577
+ <li><a href="#" class="text-gray-400 hover:text-neon-blue transition">Contact</a></li>
578
+ </ul>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
583
+ <div class="text-gray-400 mb-4 md:mb-0">
584
+ © 2023 NexusAI. Tous droits réservés.
585
+ </div>
586
+ <div class="flex space-x-6">
587
+ <a href="#" class="text-gray-400 hover:text-neon-blue transition"><i class="fab fa-twitter"></i></a>
588
+ <a href="#" class="text-gray-400 hover:text-neon-blue transition"><i class="fab fa-facebook"></i></a>
589
+ <a href="#" class="text-gray-400 hover:text-neon-blue transition"><i class="fab fa-instagram"></i></a>
590
+ <a href="#" class="text-gray-400 hover:text-neon-blue transition"><i class="fab fa-github"></i></a>
591
+ <a href="#" class="text-gray-400 hover:text-neon-blue transition"><i class="fab fa-linkedin"></i></a>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </footer>
596
+
597
+ <script>
598
+ // Animation des éléments avec GSAP
599
+ document.addEventListener('DOMContentLoaded', function() {
600
+ // Initialiser GSAP animations
601
+ gsap.from("nav", {duration: 1, y: -50, opacity: 0, ease: "power2.out"});
602
+ gsap.from(".typewriter", {duration: 2, opacity: 0, delay: 0.5});
603
+
604
+ // Animer les cartes features une par une
605
+ gsap.from(".holographic-card", {
606
+ scrollTrigger: {
607
+ trigger: ".holographic-card",
608
+ start: "top 80%",
609
+ toggleActions: "play none none none"
610
+ },
611
+ duration: 1,
612
+ y: 50,
613
+ opacity: 0,
614
+ stagger: 0.2,
615
+ ease: "back.out"
616
+ });
617
+
618
+ // Effet de particules
619
+ const particlesContainer = document.getElementById('particles');
620
+ const particleCount = 50;
621
+
622
+ for (let i = 0; i < particleCount; i++) {
623
+ const particle = document.createElement('div');
624
+ particle.className = 'particle';
625
+
626
+ // Position aléatoire
627
+ const posX = Math.random() * window.innerWidth;
628
+ const posY = Math.random() * window.innerHeight;
629
+
630
+ // Taille aléatoire
631
+ const size = Math.random() * 3 + 1;
632
+
633
+ // Durée d'animation aléatoire
634
+ const duration = Math.random() * 10 + 5;
635
+ const delay = Math.random() * 5;
636
+
637
+ // Appliquer les styles
638
+ particle.style.width = `${size}px`;
639
+ particle.style.height = `${size}px`;
640
+ particle.style.left = `${posX}px`;
641
+ particle.style.top = `${posY}px`;
642
+ particle.style.opacity = Math.random() * 0.5 + 0.1;
643
+
644
+ // Ajouter au DOM
645
+ particlesContainer.appendChild(particle);
646
+
647
+ // Animation GSAP
648
+ gsap.to(particle, {
649
+ x: `+=${(Math.random() - 0.5) * 200}`,
650
+ y: `+=${(Math.random() - 0.5) * 200}`,
651
+ duration: duration,
652
+ delay: delay,
653
+ repeat: -1,
654
+ yoyo: true,
655
+ ease: "sine.inOut"
656
+ });
657
+
658
+ // Clignotement aléatoire
659
+ gsap.to(particle, {
660
+ opacity: Math.random() * 0.5 + 0.1,
661
+ duration: Math.random() * 3 + 1,
662
+ repeat: -1,
663
+ yoyo: true,
664
+ ease: "sine.inOut"
665
+ });
666
+ }
667
+
668
+ // Animation du bouton générateur
669
+ const generateBtn = document.querySelector('.neon-btn');
670
+ if (generateBtn) {
671
+ generateBtn.addEventListener('mouseenter', function() {
672
+ gsap.to(generateBtn, {
673
+ boxShadow: `0 0 20px ${getComputedStyle(document.documentElement).getPropertyValue('--neon-blue')}`,
674
+ duration: 0.3
675
+ });
676
+ });
677
+
678
+ generateBtn.addEventListener('mouseleave', function() {
679
+ gsap.to(generateBtn, {
680
+ boxShadow: 'none',
681
+ duration: 0.3
682
+ });
683
+ });
684
+ }
685
+
686
+ // Effet de scroll pour les éléments
687
+ gsap.utils.toArray(".floating").forEach(element => {
688
+ gsap.to(element, {
689
+ y: 20,
690
+ duration: 3,
691
+ repeat: -1,
692
+ yoyo: true,
693
+ ease: "sine.inOut"
694
+ });
695
+ });
696
+ });
697
+ </script>
698
+ <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/services-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
699
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ creer un site de IA de 100000 bouton de services divers des vrais service reel pas d'exemple je veux un vrai site reel pret a l'emploi de suiie avec de tres belle interface le tout en automatique
2
+ AJOUTER PLUS DE GENERATEUR DE SITE ? CODE ? SCYPT . AVEC UNE INTERFACE FUTURISTE TRES ANIME