Hugging Face's logo

Spaces:
docto41
/
ia-web-builder
Running

App Files Community
docto41 commited on
Commit
6953854
·
verified ·
1 Parent(s): d2994f3

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +381 -676
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,41 +3,25 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>IA Web Builder - Générateur Automatique de Sites Web</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(-20px); }
13
  100% { transform: translateY(0px); }
14
  }
15
  @keyframes pulse {
16
- 0% { opacity: 1; }
17
- 50% { opacity: 0.5; }
18
- 100% { opacity: 1; }
19
- }
20
- @keyframes gradient {
21
- 0% { background-position: 0% 50%; }
22
- 50% { background-position: 100% 50%; }
23
- 100% { background-position: 0% 50%; }
24
- }
25
- .gradient-bg {
26
- background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
27
- background-size: 400% 400%;
28
- animation: gradient 15s ease infinite;
29
  }
30
  .floating {
31
  animation: float 6s ease-in-out infinite;
32
  }
33
  .pulse {
34
- animation: pulse 2s infinite;
35
- }
36
- .glow {
37
- box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
38
- }
39
- .glow:hover {
40
- box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
41
  }
42
  .code-block {
43
  font-family: 'Courier New', monospace;
@@ -47,364 +31,194 @@
47
  padding: 1rem;
48
  overflow-x: auto;
49
  }
 
 
 
 
 
 
 
 
50
  .progress-bar {
51
  transition: width 0.5s ease;
52
  }
53
- .feature-card:hover {
54
- transform: translateY(-10px);
55
- transition: transform 0.3s ease;
 
 
 
56
  }
57
  </style>
58
  </head>
59
  <body class="bg-gray-900 text-white min-h-screen">
60
- <!-- Navigation -->
61
- <nav class="gradient-bg p-4 sticky top-0 z-50">
62
- <div class="container mx-auto flex justify-between items-center">
63
- <div class="flex items-center space-x-2">
64
- <i class="fas fa-robot text-3xl"></i>
65
- <span class="text-2xl font-bold">IA Web Builder</span>
66
- </div>
67
- <div class="hidden md:flex space-x-6">
68
- <a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a>
69
- <a href="#how-it-works" class="hover:text-gray-200 transition">Comment ça marche</a>
70
- <a href="#pricing" class="hover:text-gray-200 transition">Tarifs</a>
71
- <a href="#testimonials" class="hover:text-gray-200 transition">Témoignages</a>
72
  </div>
73
- <button class="bg-white text-blue-600 px-4 py-2 rounded-full font-bold hover:bg-gray-100 transition md:hidden">
 
 
 
 
 
 
74
  <i class="fas fa-bars"></i>
75
  </button>
76
  </div>
77
- </nav>
78
 
79
  <!-- Hero Section -->
80
- <section class="gradient-bg py-20">
81
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
82
- <div class="md:w-1/2 mb-10 md:mb-0">
83
- <h1 class="text-5xl md:text-6xl font-bold mb-6">Créez des sites web professionnels <span class="text-yellow-300">en quelques clics</span></h1>
84
- <p class="text-xl mb-8">Notre IA avancée génère automatiquement des sites web complexes avec plus de 2000 lignes de code, incluant domaine, SSL, hébergement et WordPress - le tout sans aucune compétence technique requise.</p>
85
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
86
- <button class="bg-white text-blue-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition glow">
87
- Essai Gratuit <i class="fas fa-rocket ml-2"></i>
88
  </button>
89
- <button class="bg-transparent border-2 border-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-blue-600 transition">
90
- Voir la démo <i class="fas fa-play ml-2"></i>
91
  </button>
92
  </div>
93
  </div>
94
- <div class="md:w-1/2 relative floating">
95
- <div class="relative bg-gray-800 rounded-2xl p-2 shadow-2xl">
96
- <div class="bg-gray-900 rounded-xl overflow-hidden">
97
- <div class="bg-gray-800 p-3 flex items-center">
98
- <div class="flex space-x-2">
99
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
100
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
101
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
102
- </div>
103
- <div class="flex-1 text-center text-sm font-mono">IA Web Builder - Terminal</div>
104
- </div>
105
- <div class="p-4 code-block">
106
- <div class="text-green-400">$ ia-web-builder init --project=ecommerce</div>
107
- <div class="text-blue-400">> Initialisation du projet ecommerce...</div>
108
- <div class="text-blue-400">> Analyse des besoins...</div>
109
- <div class="text-blue-400">> Génération de l'architecture...</div>
110
- <div class="text-blue-400">> Création de 23 pages...</div>
111
- <div class="text-blue-400">> Génération de 1247 composants...</div>
112
- <div class="text-blue-400">> Configuration de WordPress...</div>
113
- <div class="text-blue-400">> Achat du domaine (votresite.com)...</div>
114
- <div class="text-blue-400">> Configuration SSL...</div>
115
- <div class="text-blue-400">> Déploiement sur serveur cloud...</div>
116
- <div class="text-green-400">$ Projet créé avec succès! (2134 lignes de code)</div>
117
- <div class="text-green-400">$ Visitez: <span class="text-white">https://votresite.com</span></div>
118
  </div>
 
119
  </div>
120
- </div>
121
- <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-500 rounded-full opacity-20 filter blur-2xl"></div>
122
- <div class="absolute -top-10 -right-10 w-40 h-40 bg-blue-500 rounded-full opacity-20 filter blur-2xl"></div>
123
- </div>
124
- </div>
125
- </section>
126
-
127
- <!-- Features Section -->
128
- <section id="features" class="py-20 bg-gray-800">
129
- <div class="container mx-auto px-4">
130
- <h2 class="text-4xl font-bold text-center mb-16">Fonctionnalités <span class="text-blue-400">Avancées</span></h2>
131
-
132
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
133
- <!-- Feature 1 -->
134
- <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
135
- <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mb-6">
136
- <i class="fas fa-magic text-2xl"></i>
137
- </div>
138
- <h3 class="text-2xl font-bold mb-4">Génération Automatique</h3>
139
- <p class="text-gray-300">Notre IA génère des sites web complexes avec plus de 2000 lignes de code optimisé, basé sur votre simple description.</p>
140
- </div>
141
-
142
- <!-- Feature 2 -->
143
- <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
144
- <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6">
145
- <i class="fas fa-server text-2xl"></i>
146
  </div>
147
- <h3 class="text-2xl font-bold mb-4">Hébergement Complet</h3>
148
- <p class="text-gray-300">Configuration automatique du domaine, SSL, serveur cloud et WordPress - tout en un seul clic.</p>
149
- </div>
150
-
151
- <!-- Feature 3 -->
152
- <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
153
- <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mb-6">
154
- <i class="fas fa-eye text-2xl"></i>
155
- </div>
156
- <h3 class="text-2xl font-bold mb-4">Visualisation en Temps Réel</h3>
157
- <p class="text-gray-300">Voyez votre site prendre forme étape par étape avec notre éditeur visuel interactif.</p>
158
- </div>
159
-
160
- <!-- Feature 4 -->
161
- <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
162
- <div class="w-16 h-16 bg-yellow-600 rounded-full flex items-center justify-center mb-6">
163
- <i class="fas fa-shield-alt text-2xl"></i>
164
- </div>
165
- <h3 class="text-2xl font-bold mb-4">Sécurité Avancée</h3>
166
- <p class="text-gray-300">Protection automatique contre les vulnérabilités avec pare-feu, protection DDoS et sauvegardes quotidiennes.</p>
167
- </div>
168
-
169
- <!-- Feature 5 -->
170
- <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
171
- <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mb-6">
172
- <i class="fas fa-mobile-alt text-2xl"></i>
173
- </div>
174
- <h3 class="text-2xl font-bold mb-4">Design Responsive</h3>
175
- <p class="text-gray-300">Adaptation automatique à tous les appareils avec des designs modernes et performants.</p>
176
- </div>
177
-
178
- <!-- Feature 6 -->
179
- <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
180
- <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center mb-6">
181
- <i class="fas fa-brain text-2xl"></i>
182
- </div>
183
- <h3 class="text-2xl font-bold mb-4">IA Évolutive</h3>
184
- <p class="text-gray-300">Notre système apprend de chaque projet pour offrir des résultats toujours plus pertinents et personnalisés.</p>
185
  </div>
186
  </div>
187
  </div>
188
  </section>
189
 
190
- <!-- How It Works Section -->
191
- <section id="how-it-works" class="py-20 bg-gray-900">
192
  <div class="container mx-auto px-4">
193
- <h2 class="text-4xl font-bold text-center mb-16">Comment ça <span class="text-blue-400">fonctionne</span></h2>
 
194
 
195
- <div class="flex flex-col md:flex-row items-center mb-16">
196
- <div class="md:w-1/2 mb-10 md:mb-0">
197
- <div class="bg-gray-800 p-6 rounded-2xl shadow-lg">
198
- <div class="flex items-center mb-4">
199
- <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center mr-4">
200
- <span class="font-bold">1</span>
201
- </div>
202
- <h3 class="text-2xl font-bold">Décrivez votre projet</h3>
203
- </div>
204
- <p class="text-gray-300 mb-4">Parlez-nous de votre site web idéal en quelques phrases ou utilisez notre assistant vocal.</p>
205
- <div class="bg-gray-700 p-4 rounded-lg">
206
- <p class="text-blue-400 italic">"Je veux un site e-commerce pour vendre des produits artisanaux avec système de paiement, avis clients, blog intégré et design moderne."</p>
207
- </div>
208
- </div>
209
- </div>
210
- <div class="md:w-1/2 flex justify-center">
211
- <div class="relative floating">
212
- <img src="https://via.placeholder.com/500x300" alt="Step 1" class="rounded-2xl shadow-xl">
213
- <div class="absolute -bottom-5 -right-5 w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center shadow-lg">
214
- <i class="fas fa-microphone text-2xl"></i>
215
  </div>
216
  </div>
217
- </div>
218
- </div>
219
-
220
- <div class="flex flex-col md:flex-row items-center mb-16">
221
- <div class="md:w-1/2 order-2 md:order-1 flex justify-center">
222
- <div class="relative floating">
223
- <img src="https://via.placeholder.com/500x300" alt="Step 2" class="rounded-2xl shadow-xl">
224
- <div class="absolute -bottom-5 -left-5 w-20 h-20 bg-purple-500 rounded-full flex items-center justify-center shadow-lg">
225
- <i class="fas fa-robot text-2xl"></i>
226
- </div>
227
- </div>
228
- </div>
229
- <div class="md:w-1/2 order-1 md:order-2 mb-10 md:mb-0 md:pl-10">
230
- <div class="bg-gray-800 p-6 rounded-2xl shadow-lg">
231
- <div class="flex items-center mb-4">
232
- <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4">
233
- <span class="font-bold">2</span>
234
- </div>
235
- <h3 class="text-2xl font-bold">L'IA travaille pour vous</h3>
236
- </div>
237
- <p class="text-gray-300 mb-4">Notre système analyse vos besoins et génère automatiquement l'architecture, le design et le code.</p>
238
- <div class="mb-4">
239
- <div class="flex justify-between mb-1">
240
- <span>Génération du code</span>
241
- <span>87%</span>
242
- </div>
243
- <div class="w-full bg-gray-700 rounded-full h-2.5">
244
- <div class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 87%"></div>
245
- </div>
246
- </div>
247
- <div class="text-sm text-gray-400">
248
- <div class="flex justify-between">
249
- <span>Pages générées: 23</span>
250
- <span>Composants: 1247</span>
251
- <span>Lignes de code: 2134</span>
252
- </div>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
-
258
- <div class="flex flex-col md:flex-row items-center">
259
- <div class="md:w-1/2 mb-10 md:mb-0">
260
- <div class="bg-gray-800 p-6 rounded-2xl shadow-lg">
261
- <div class="flex items-center mb-4">
262
- <div class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center mr-4">
263
- <span class="font-bold">3</span>
264
- </div>
265
- <h3 class="text-2xl font-bold">Personnalisation & Déploiement</h3>
266
- </div>
267
- <p class="text-gray-300 mb-4">Visualisez et ajustez votre site avant le déploiement automatique avec domaine, SSL et hébergement.</p>
268
- <div class="grid grid-cols-3 gap-4 text-center">
269
- <div class="bg-gray-700 p-3 rounded-lg">
270
- <i class="fas fa-globe text-2xl mb-2 text-blue-400"></i>
271
- <p>Domaine</p>
272
- </div>
273
- <div class="bg-gray-700 p-3 rounded-lg">
274
- <i class="fas fa-lock text-2xl mb-2 text-green-400"></i>
275
- <p>SSL</p>
276
- </div>
277
- <div class="bg-gray-700 p-3 rounded-lg">
278
- <i class="fas fa-cloud text-2xl mb-2 text-purple-400"></i>
279
- <p>Hébergement</p>
280
- </div>
281
  </div>
282
  </div>
283
- </div>
284
- <div class="md:w-1/2 flex justify-center">
285
- <div class="relative floating">
286
- <img src="https://via.placeholder.com/500x300" alt="Step 3" class="rounded-2xl shadow-xl">
287
- <div class="absolute -top-5 -right-5 w-20 h-20 bg-green-500 rounded-full flex items-center justify-center shadow-lg">
288
- <i class="fas fa-rocket text-2xl"></i>
 
 
 
289
  </div>
290
  </div>
291
- </div>
292
- </div>
293
- </div>
294
- </section>
295
-
296
- <!-- Demo Generator -->
297
- <section class="py-20 gradient-bg">
298
- <div class="container mx-auto px-4">
299
- <h2 class="text-4xl font-bold text-center mb-6">Essayez notre <span class="text-yellow-300">Générateur IA</span></h2>
300
- <p class="text-xl text-center mb-12">Décrivez votre site et voyez un aperçu en temps réel de ce que notre IA peut créer pour vous</p>
301
-
302
- <div class="max-w-4xl mx-auto bg-gray-900 bg-opacity-70 rounded-2xl p-8 shadow-2xl">
303
- <div class="mb-6">
304
- <label class="block text-lg mb-2">Décrivez votre site web idéal:</label>
305
- <textarea class="w-full bg-gray-800 rounded-lg p-4 text-white border border-gray-700 focus:border-blue-500 focus:outline-none h-32" placeholder="Ex: Je veux un portfolio moderne pour mon travail de photographe avec galerie, formulaire de contact et blog intégré..."></textarea>
306
- </div>
307
-
308
- <div class="mb-6">
309
- <label class="block text-lg mb-2">Type de site:</label>
310
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
311
- <button class="bg-gray-800 hover:bg-blue-600 transition py-3 px-4 rounded-lg flex items-center justify-center">
312
- <i class="fas fa-shopping-cart mr-2"></i> E-commerce
313
- </button>
314
- <button class="bg-gray-800 hover:bg-purple-600 transition py-3 px-4 rounded-lg flex items-center justify-center">
315
- <i class="fas fa-briefcase mr-2"></i> Portfolio
316
- </button>
317
- <button class="bg-gray-800 hover:bg-green-600 transition py-3 px-4 rounded-lg flex items-center justify-center">
318
- <i class="fas fa-newspaper mr-2"></i> Blog
319
- </button>
320
- <button class="bg-gray-800 hover:bg-red-600 transition py-3 px-4 rounded-lg flex items-center justify-center">
321
- <i class="fas fa-building mr-2"></i> Entreprise
322
- </button>
323
- </div>
324
- </div>
325
-
326
- <div class="mb-6">
327
- <label class="block text-lg mb-2">Style de design:</label>
328
- <div class="flex flex-wrap gap-4">
329
- <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Moderne</button>
330
- <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Minimaliste</button>
331
- <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Artistique</button>
332
- <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Professionnel</button>
333
- <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Vintage</button>
334
  </div>
335
- </div>
336
-
337
- <div class="text-center">
338
- <button id="generateBtn" class="bg-white text-blue-600 px-10 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition glow">
339
- Générer mon site <i class="fas fa-magic ml-2"></i>
340
  </button>
341
  </div>
342
 
343
- <div id="generationResult" class="hidden mt-8">
344
- <div class="bg-gray-800 rounded-xl p-6">
345
- <div class="flex items-center mb-4">
346
- <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-4">
347
- <i class="fas fa-cog fa-spin text-xl"></i>
348
- </div>
349
- <h3 class="text-2xl font-bold">Génération en cours...</h3>
350
  </div>
351
-
352
- <div class="mb-6">
353
- <div class="flex justify-between mb-1">
354
- <span>Analyse des besoins</span>
355
- <span id="progress1">0%</span>
356
- </div>
357
- <div class="w-full bg-gray-700 rounded-full h-2.5">
358
- <div id="progressBar1" class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
 
 
359
  </div>
360
  </div>
361
-
362
- <div class="mb-6">
363
- <div class="flex justify-between mb-1">
364
- <span>Création de l'architecture</span>
365
- <span id="progress2">0%</span>
366
- </div>
367
- <div class="w-full bg-gray-700 rounded-full h-2.5">
368
- <div id="progressBar2" class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
369
- </div>
370
  </div>
371
-
372
- <div class="mb-6">
373
- <div class="flex justify-between mb-1">
374
- <span>Génération du code</span>
375
- <span id="progress3">0%</span>
376
- </div>
377
- <div class="w-full bg-gray-700 rounded-full h-2.5">
378
- <div id="progressBar3" class="bg-green-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
379
- </div>
380
  </div>
381
-
382
- <div id="resultPreview" class="hidden">
383
- <div class="border-2 border-dashed border-blue-500 rounded-lg p-4 mb-4">
384
- <h4 class="text-xl font-bold mb-2 text-blue-400">Aperçu de votre site</h4>
385
- <p class="mb-4">Voici ce que notre IA a généré pour vous. Vous pouvez personnaliser chaque élément avant le déploiement final.</p>
386
- <div class="bg-gray-900 p-4 rounded-lg">
387
- <div class="flex justify-between items-center mb-2">
388
- <span>Pages générées:</span>
389
- <span class="font-bold">12</span>
390
- </div>
391
- <div class="flex justify-between items-center mb-2">
392
- <span>Composants:</span>
393
- <span class="font-bold">847</span>
394
- </div>
395
- <div class="flex justify-between items-center">
396
- <span>Lignes de code:</span>
397
- <span class="font-bold">2156</span>
398
- </div>
399
- </div>
400
  </div>
401
- <div class="flex justify-center space-x-4">
402
- <button class="bg-blue-600 hover:bg-blue-700 transition px-6 py-3 rounded-full font-bold">
403
- Personnaliser <i class="fas fa-paint-brush ml-2"></i>
404
- </button>
405
- <button class="bg-green-600 hover:bg-green-700 transition px-6 py-3 rounded-full font-bold">
406
- Déployer maintenant <i class="fas fa-rocket ml-2"></i>
407
- </button>
408
  </div>
409
  </div>
410
  </div>
@@ -413,273 +227,84 @@
413
  </div>
414
  </section>
415
 
416
- <!-- Pricing Section -->
417
- <section id="pricing" class="py-20 bg-gray-800">
418
  <div class="container mx-auto px-4">
419
- <h2 class="text-4xl font-bold text-center mb-4">Nos <span class="text-blue-400">Offres</span></h2>
420
- <p class="text-xl text-center mb-16 max-w-2xl mx-auto">Choisissez le plan qui correspond à vos besoins. Tous nos plans incluent la génération automatique de code, l'hébergement et la gestion complète.</p>
421
-
422
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
423
- <!-- Basic Plan -->
424
- <div class="bg-gray-900 rounded-2xl p-8 shadow-lg transform hover:scale-105 transition duration-300">
425
- <div class="text-center mb-8">
426
- <h3 class="text-2xl font-bold mb-2">Starter</h3>
427
- <div class="text-4xl font-bold mb-2">19€<span class="text-lg text-gray-400">/mois</span></div>
428
- <div class="text-gray-400">Parfait pour les petits projets</div>
429
- </div>
430
- <ul class="space-y-4 mb-8">
431
- <li class="flex items-center">
432
- <i class="fas fa-check text-green-500 mr-3"></i>
433
- <span>Jusqu'à 500 lignes de code</span>
434
- </li>
435
- <li class="flex items-center">
436
- <i class="fas fa-check text-green-500 mr-3"></i>
437
- <span>5 pages maximum</span>
438
- </li>
439
- <li class="flex items-center">
440
- <i class="fas fa-check text-green-500 mr-3"></i>
441
- <span>Domaine personnalisé</span>
442
- </li>
443
- <li class="flex items-center">
444
- <i class="fas fa-check text-green-500 mr-3"></i>
445
- <span>SSL inclus</span>
446
- </li>
447
- <li class="flex items-center text-gray-500">
448
- <i class="fas fa-times text-red-500 mr-3"></i>
449
- <span>Pas de WordPress</span>
450
- </li>
451
- </ul>
452
- <button class="w-full bg-blue-600 hover:bg-blue-700 transition py-3 rounded-full font-bold">
453
- Commencer <i class="fas fa-arrow-right ml-2"></i>
454
- </button>
455
- </div>
456
-
457
- <!-- Pro Plan (Featured) -->
458
- <div class="bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl p-8 shadow-2xl transform hover:scale-105 transition duration-300 relative">
459
- <div class="absolute -top-4 -right-4 bg-yellow-500 text-black px-3 py-1 rounded-full font-bold text-sm">
460
- POPULAIRE
461
- </div>
462
- <div class="text-center mb-8">
463
- <h3 class="text-2xl font-bold mb-2">Pro</h3>
464
- <div class="text-4xl font-bold mb-2">49€<span class="text-lg text-blue-200">/mois</span></div>
465
- <div class="text-blue-100">Pour les sites web professionnels</div>
466
- </div>
467
- <ul class="space-y-4 mb-8">
468
- <li class="flex items-center">
469
- <i class="fas fa-check text-yellow-300 mr-3"></i>
470
- <span>Jusqu'à 2000 lignes de code</span>
471
- </li>
472
- <li class="flex items-center">
473
- <i class="fas fa-check text-yellow-300 mr-3"></i>
474
- <span>20 pages maximum</span>
475
- </li>
476
- <li class="flex items-center">
477
- <i class="fas fa-check text-yellow-300 mr-3"></i>
478
- <span>Domaine premium</span>
479
- </li>
480
- <li class="flex items-center">
481
- <i class="fas fa-check text-yellow-300 mr-3"></i>
482
- <span>SSL avancé</span>
483
- </li>
484
- <li class="flex items-center">
485
- <i class="fas fa-check text-yellow-300 mr-3"></i>
486
- <span>WordPress automatique</span>
487
- </li>
488
- </ul>
489
- <button class="w-full bg-white text-blue-600 hover:bg-gray-100 transition py-3 rounded-full font-bold">
490
- Choisir ce plan <i class="fas fa-crown ml-2"></i>
491
- </button>
492
- </div>
493
-
494
- <!-- Enterprise Plan -->
495
- <div class="bg-gray-900 rounded-2xl p-8 shadow-lg transform hover:scale-105 transition duration-300">
496
- <div class="text-center mb-8">
497
- <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
498
- <div class="text-4xl font-bold mb-2">99€<span class="text-lg text-gray-400">/mois</span></div>
499
- <div class="text-gray-400">Pour les projets complexes</div>
500
- </div>
501
- <ul class="space-y-4 mb-8">
502
- <li class="flex items-center">
503
- <i class="fas fa-check text-green-500 mr-3"></i>
504
- <span>Code illimité</span>
505
- </li>
506
- <li class="flex items-center">
507
- <i class="fas fa-check text-green-500 mr-3"></i>
508
- <span>Pages illimitées</span>
509
- </li>
510
- <li class="flex items-center">
511
- <i class="fas fa-check text-green-500 mr-3"></i>
512
- <span>Multi-domaines</span>
513
- </li>
514
- <li class="flex items-center">
515
- <i class="fas fa-check text-green-500 mr-3"></i>
516
- <span>SSL wildcard</span>
517
- </li>
518
- <li class="flex items-center">
519
- <i class="fas fa-check text-green-500 mr-3"></i>
520
- <span>WordPress multisite</span>
521
- </li>
522
- </ul>
523
- <button class="w-full bg-blue-600 hover:bg-blue-700 transition py-3 rounded-full font-bold">
524
- Contactez-nous <i class="fas fa-headset ml-2"></i>
525
- </button>
526
- </div>
527
- </div>
528
- </div>
529
- </section>
530
-
531
- <!-- Testimonials Section -->
532
- <section id="testimonials" class="py-20 bg-gray-900">
533
- <div class="container mx-auto px-4">
534
- <h2 class="text-4xl font-bold text-center mb-16">Ce que nos clients <span class="text-blue-400">disent</span></h2>
535
 
536
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
537
- <!-- Testimonial 1 -->
538
- <div class="bg-gray-800 p-8 rounded-2xl shadow-lg">
539
- <div class="flex items-center mb-6">
540
- <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-16 h-16 rounded-full mr-4">
541
- <div>
542
- <h4 class="font-bold">Sophie Martin</h4>
543
- <div class="flex text-yellow-400">
544
- <i class="fas fa-star"></i>
545
- <i class="fas fa-star"></i>
546
- <i class="fas fa-star"></i>
547
- <i class="fas fa-star"></i>
548
- <i class="fas fa-star"></i>
549
- </div>
550
- </div>
551
- </div>
552
- <p class="text-gray-300 italic">"En tant que photographe, je n'avais aucune compétence technique. L'IA Web Builder a créé un magnifique portfolio avec galerie et blog en moins d'une heure. Le résultat est bien meilleur que ce que j'aurais pu imaginer!"</p>
553
- </div>
554
-
555
- <!-- Testimonial 2 -->
556
- <div class="bg-gray-800 p-8 rounded-2xl shadow-lg">
557
- <div class="flex items-center mb-6">
558
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-16 h-16 rounded-full mr-4">
559
- <div>
560
- <h4 class="font-bold">Thomas Leroy</h4>
561
- <div class="flex text-yellow-400">
562
- <i class="fas fa-star"></i>
563
- <i class="fas fa-star"></i>
564
- <i class="fas fa-star"></i>
565
- <i class="fas fa-star"></i>
566
- <i class="fas fa-star"></i>
567
- </div>
568
- </div>
569
  </div>
570
- <p class="text-gray-300 italic">"J'ai lancé mon e-commerce d'artisanat en un week-end grâce à cette plateforme. La configuration automatique du paiement en ligne et la gestion des stocks m'ont fait gagner des semaines de développement. Vraiment impressionnant!"</p>
 
571
  </div>
572
 
573
- <!-- Testimonial 3 -->
574
- <div class="bg-gray-800 p-8 rounded-2xl shadow-lg">
575
- <div class="flex items-center mb-6">
576
- <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-16 h-16 rounded-full mr-4">
577
- <div>
578
- <h4 class="font-bold">Émilie Dubois</h4>
579
- <div class="flex text-yellow-400">
580
- <i class="fas fa-star"></i>
581
- <i class="fas fa-star"></i>
582
- <i class="fas fa-star"></i>
583
- <i class="fas fa-star"></i>
584
- <i class="fas fa-star-half-alt"></i>
585
- </div>
586
- </div>
587
- </div>
588
- <p class="text-gray-300 italic">"Notre site corporate avec plus de 50 pages a été généré en 2 jours. L'IA a même suggéré une architecture que nous n'avions pas envisagée. Le support technique est réactif et compétent. Je recommande vivement!"</p>
589
- </div>
590
- </div>
591
-
592
- <div class="text-center mt-16">
593
- <button class="bg-blue-600 hover:bg-blue-700 transition px-8 py-4 rounded-full font-bold text-lg glow">
594
- Commencez votre essai gratuit <i class="fas fa-arrow-right ml-2"></i>
595
- </button>
596
- </div>
597
- </div>
598
- </section>
599
-
600
- <!-- FAQ Section -->
601
- <section class="py-20 bg-gray-800">
602
- <div class="container mx-auto px-4 max-w-4xl">
603
- <h2 class="text-4xl font-bold text-center mb-16">Questions <span class="text-blue-400">Fréquentes</span></h2>
604
-
605
- <div class="space-y-4">
606
- <!-- FAQ Item 1 -->
607
- <div class="bg-gray-900 rounded-xl overflow-hidden">
608
- <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
609
- <span class="text-xl font-bold">Combien de temps faut-il pour générer un site web complet?</span>
610
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
611
- </button>
612
- <div class="faq-content hidden px-6 pb-6">
613
- <p class="text-gray-300">Notre IA peut générer un site web de base en moins de 10 minutes. Pour des projets plus complexes avec plus de 2000 lignes de code, comptez entre 30 minutes et 2 heures selon la complexité. Le déploiement avec domaine et hébergement prend généralement moins de 24 heures.</p>
614
  </div>
 
 
615
  </div>
616
 
617
- <!-- FAQ Item 2 -->
618
- <div class="bg-gray-900 rounded-xl overflow-hidden">
619
- <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
620
- <span class="text-xl font-bold">Puis-je personnaliser le site après la génération automatique?</span>
621
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
622
- </button>
623
- <div class="faq-content hidden px-6 pb-6">
624
- <p class="text-gray-300">Absolument! Notre plateforme offre un éditeur visuel complet pour modifier chaque aspect de votre site. Vous pouvez également accéder au code source généré si vous souhaitez des ajustements techniques avancés. Toutes les modifications sont sauvegardées automatiquement.</p>
625
  </div>
 
 
626
  </div>
627
 
628
- <!-- FAQ Item 3 -->
629
- <div class="bg-gray-900 rounded-xl overflow-hidden">
630
- <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
631
- <span class="text-xl font-bold">Comment fonctionne l'intégration de WordPress?</span>
632
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
633
- </button>
634
- <div class="faq-content hidden px-6 pb-6">
635
- <p class="text-gray-300">Notre système installe automatiquement WordPress avec une configuration optimisée, incluant les thèmes et plugins nécessaires selon votre type de site. L'interface d'administration est simplifiée et vous recevez une formation en ligne pour gérer facilement votre contenu.</p>
636
  </div>
 
 
637
  </div>
638
 
639
- <!-- FAQ Item 4 -->
640
- <div class="bg-gray-900 rounded-xl overflow-hidden">
641
- <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
642
- <span class="text-xl font-bold">Quelle est la qualité du code généré?</span>
643
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
644
- </button>
645
- <div class="faq-content hidden px-6 pb-6">
646
- <p class="text-gray-300">Notre IA produit du code propre, bien documenté et conforme aux standards du web. Chaque projet passe des tests automatiques de performance, accessibilité et sécurité. Le code est optimisé pour le SEO et les temps de chargement, avec une note moyenne de 95/100 sur Google PageSpeed Insights.</p>
647
  </div>
 
 
648
  </div>
649
 
650
- <!-- FAQ Item 5 -->
651
- <div class="bg-gray-900 rounded-xl overflow-hidden">
652
- <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
653
- <span class="text-xl font-bold">Puis-je migrer un site existant vers votre plateforme?</span>
654
- <i class="fas fa-chevron-down transition-transform duration-300"></i>
655
- </button>
656
- <div class="faq-content hidden px-6 pb-6">
657
- <p class="text-gray-300">Oui, nous offrons un service de migration assistée par IA. Notre système analyse votre site existant et propose une structure optimisée avant de générer le nouveau code. Nous prenons en charge la migration du contenu, des médias et des fonctionnalités principales.</p>
658
  </div>
 
 
659
  </div>
660
  </div>
661
  </div>
662
  </section>
663
 
664
  <!-- CTA Section -->
665
- <section class="gradient-bg py-20">
666
  <div class="container mx-auto px-4 text-center">
667
- <h2 class="text-4xl md:text-5xl font-bold mb-6">Prêt à créer votre site web <span class="text-yellow-300">en un clic</span>?</h2>
668
- <p class="text-xl mb-10 max-w-2xl mx-auto">Rejoignez des milliers de professionnels qui font confiance à notre IA pour leurs projets web.</p>
669
 
670
- <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
671
- <button class="bg-white text-blue-600 px-10 py-5 rounded-full font-bold text-lg hover:bg-gray-100 transition glow">
672
- Commencer maintenant <i class="fas fa-magic ml-2"></i>
673
- </button>
674
- <button class="bg-transparent border-2 border-white px-10 py-5 rounded-full font-bold text-lg hover:bg-white hover:text-blue-600 transition">
675
- Voir des exemples <i class="fas fa-images ml-2"></i>
676
- </button>
677
- </div>
678
 
679
  <div class="mt-10 flex flex-wrap justify-center gap-6">
680
  <div class="flex items-center">
681
  <i class="fas fa-check-circle text-green-400 text-2xl mr-2"></i>
682
- <span>Essai gratuit de 7 jours</span>
683
  </div>
684
  <div class="flex items-center">
685
  <i class="fas fa-check-circle text-green-400 text-2xl mr-2"></i>
@@ -696,141 +321,221 @@
696
  <!-- Footer -->
697
  <footer class="bg-gray-900 py-12">
698
  <div class="container mx-auto px-4">
699
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
700
  <div>
701
  <div class="flex items-center space-x-2 mb-6">
702
- <i class="fas fa-robot text-3xl text-blue-500"></i>
703
- <span class="text-2xl font-bold">IA Web Builder</span>
704
  </div>
705
- <p class="text-gray-400">La puissance de l'intelligence artificielle au service de votre présence en ligne.</p>
706
- <div class="flex space-x-4 mt-6">
707
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
708
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
709
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
710
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
711
  </div>
712
  </div>
713
 
714
  <div>
715
- <h4 class="text-xl font-bold mb-6">Produit</h4>
716
- <ul class="space-y-3">
717
- <li><a href="#" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li>
718
- <li><a href="#" class="text-gray-400 hover:text-white transition">Tarifs</a></li>
719
- <li><a href="#" class="text-gray-400 hover:text-white transition">Exemples</a></li>
720
- <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
721
  </ul>
722
  </div>
723
 
724
  <div>
725
- <h4 class="text-xl font-bold mb-6">Entreprise</h4>
726
- <ul class="space-y-3">
727
- <li><a href="#" class="text-gray-400 hover:text-white transition">À propos</a></li>
728
- <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
729
- <li><a href="#" class="text-gray-400 hover:text-white transition">Presse</a></li>
730
- <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
731
  </ul>
732
  </div>
733
 
734
  <div>
735
- <h4 class="text-xl font-bold mb-6">Support</h4>
736
- <ul class="space-y-3">
737
- <li><a href="#" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li>
738
- <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
739
- <li><a href="#" class="text-gray-400 hover:text-white transition">Statut</a></li>
740
- <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
741
  </ul>
742
  </div>
743
  </div>
744
 
745
- <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
746
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 IA Web Builder. Tous droits réservés.</p>
747
- <div class="flex space-x-6">
748
- <a href="#" class="text-gray-400 hover:text-white transition">Conditions</a>
749
- <a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a>
750
- <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
751
- </div>
752
  </div>
753
  </div>
754
  </footer>
755
 
756
- <!-- Floating Action Button -->
757
- <div class="fixed bottom-8 right-8">
758
- <button class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center shadow-xl hover:bg-blue-700 transition glow">
759
- <i class="fas fa-comment-dots text-2xl"></i>
760
- </button>
761
- </div>
762
-
763
  <script>
764
- // Toggle FAQ items
765
- document.querySelectorAll('.faq-toggle').forEach(button => {
766
- button.addEventListener('click', () => {
767
- const content = button.nextElementSibling;
768
- const icon = button.querySelector('i');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
769
 
770
- content.classList.toggle('hidden');
771
- icon.classList.toggle('rotate-180');
772
- });
 
 
 
 
 
 
 
 
 
 
 
773
  });
774
-
775
- // Simulate generation process
776
- document.getElementById('generateBtn').addEventListener('click', function() {
777
- const generationResult = document.getElementById('generationResult');
778
- generationResult.classList.remove('hidden');
779
 
780
- // Simulate progress
781
- let progress1 = 0;
782
- let progress2 = 0;
783
- let progress3 = 0;
 
 
 
 
 
784
 
785
- const interval1 = setInterval(() => {
786
- progress1 += Math.floor(Math.random() * 5) + 1;
787
- if (progress1 >= 100) {
788
- progress1 = 100;
789
- clearInterval(interval1);
790
-
791
- // Start second progress bar
792
- const interval2 = setInterval(() => {
793
- progress2 += Math.floor(Math.random() * 5) + 1;
794
- if (progress2 >= 100) {
795
- progress2 = 100;
796
- clearInterval(interval2);
 
 
 
 
 
 
 
 
 
 
797
 
798
- // Start third progress bar
799
- const interval3 = setInterval(() => {
800
- progress3 += Math.floor(Math.random() * 5) + 1;
801
- if (progress3 >= 100) {
802
- progress3 = 100;
803
- clearInterval(interval3);
804
-
805
- // Show result after all progress bars are complete
806
- setTimeout(() => {
807
- document.getElementById('resultPreview').classList.remove('hidden');
808
- }, 500);
809
- }
810
- document.getElementById('progress3').textContent = progress3 + '%';
811
- document.getElementById('progressBar3').style.width = progress3 + '%';
812
- }, 100);
813
- }
814
- document.getElementById('progress2').textContent = progress2 + '%';
815
- document.getElementById('progressBar2').style.width = progress2 + '%';
816
- }, 100);
817
- }
818
- document.getElementById('progress1').textContent = progress1 + '%';
819
- document.getElementById('progressBar1').style.width = progress1 + '%';
820
- }, 100);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
821
  });
822
-
823
- // Animate elements when they come into view
824
- const observer = new IntersectionObserver((entries) => {
825
- entries.forEach(entry => {
826
- if (entry.isIntersecting) {
827
- entry.target.classList.add('animate-fadeIn');
828
- }
 
 
 
 
 
829
  });
830
- }, {threshold: 0.1});
831
-
832
- document.querySelectorAll('.feature-card, .faq-toggle').forEach(el => {
833
- observer.observe(el);
834
  });
835
  </script>
836
  <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/ia-web-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Générateur IA de Sites Web 2000+ Lignes</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(-15px); }
13
  100% { transform: translateY(0px); }
14
  }
15
  @keyframes pulse {
16
+ 0% { transform: scale(1); }
17
+ 50% { transform: scale(1.05); }
18
+ 100% { transform: scale(1); }
 
 
 
 
 
 
 
 
 
 
19
  }
20
  .floating {
21
  animation: float 6s ease-in-out infinite;
22
  }
23
  .pulse {
24
+ animation: pulse 3s infinite;
 
 
 
 
 
 
25
  }
26
  .code-block {
27
  font-family: 'Courier New', monospace;
 
31
  padding: 1rem;
32
  overflow-x: auto;
33
  }
34
+ .preview-frame {
35
+ transform: scale(0.8);
36
+ transform-origin: top;
37
+ transition: transform 0.3s ease;
38
+ }
39
+ .preview-frame:hover {
40
+ transform: scale(0.85);
41
+ }
42
  .progress-bar {
43
  transition: width 0.5s ease;
44
  }
45
+ .animate-fadeIn {
46
+ animation: fadeIn 0.5s ease-in;
47
+ }
48
+ @keyframes fadeIn {
49
+ from { opacity: 0; transform: translateY(20px); }
50
+ to { opacity: 1; transform: translateY(0); }
51
  }
52
  </style>
53
  </head>
54
  <body class="bg-gray-900 text-white min-h-screen">
55
+ <!-- Header -->
56
+ <header class="bg-gradient-to-r from-blue-900 to-purple-900 py-6 shadow-xl">
57
+ <div class="container mx-auto px-4 flex justify-between items-center">
58
+ <div class="flex items-center space-x-3">
59
+ <i class="fas fa-robot text-3xl text-blue-400"></i>
60
+ <span class="text-2xl font-bold">MegaSiteBuilder AI</span>
 
 
 
 
 
 
61
  </div>
62
+ <nav class="hidden md:flex space-x-8">
63
+ <a href="#features" class="hover:text-blue-300 transition">Fonctionnalités</a>
64
+ <a href="#demo" class="hover:text-blue-300 transition">Démo</a>
65
+ <a href="#pricing" class="hover:text-blue-300 transition">Tarifs</a>
66
+ <a href="#testimonials" class="hover:text-blue-300 transition">Témoignages</a>
67
+ </nav>
68
+ <button class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full font-bold md:hidden">
69
  <i class="fas fa-bars"></i>
70
  </button>
71
  </div>
72
+ </header>
73
 
74
  <!-- Hero Section -->
75
+ <section class="py-20 bg-gradient-to-b from-gray-900 to-gray-800">
76
+ <div class="container mx-auto px-4 flex flex-col lg:flex-row items-center">
77
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
78
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Générez des sites web <span class="text-blue-400">2000+ lignes</span> en quelques minutes</h1>
79
+ <p class="text-xl mb-8 text-gray-300">Notre IA avancée crée des sites web complexes avec code optimisé, responsive design et toutes les fonctionnalités nécessaires - simplement en décrivant ce que vous voulez.</p>
80
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
81
+ <button class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-full font-bold text-lg transition-all pulse">
82
+ Essai Gratuit <i class="fas fa-bolt ml-2"></i>
83
  </button>
84
+ <button class="bg-transparent border-2 border-blue-500 px-8 py-4 rounded-full font-bold text-lg hover:bg-blue-900 transition">
85
+ Voir Démo <i class="fas fa-play ml-2"></i>
86
  </button>
87
  </div>
88
  </div>
89
+ <div class="lg:w-1/2 relative floating">
90
+ <div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
91
+ <div class="bg-gray-700 p-3 flex items-center">
92
+ <div class="flex space-x-2 mr-4">
93
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
94
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
95
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </div>
97
+ <div class="text-sm">ia-website-generator</div>
98
  </div>
99
+ <div class="p-4 code-block">
100
+ <div class="text-green-400">$ msite generate --type=ecommerce --pages=25</div>
101
+ <div class="text-blue-400">> Initializing project architecture...</div>
102
+ <div class="text-blue-400">> Generating 25 pages...</div>
103
+ <div class="text-blue-400">> Creating 143 components...</div>
104
+ <div class="text-blue-400">> Optimizing for mobile...</div>
105
+ <div class="text-blue-400">> Writing 2147 lines of code...</div>
106
+ <div class="text-green-400">$ Project successfully generated!</div>
107
+ <div class="text-green-400">$ Total lines: 2147 (HTML: 684, CSS: 892, JS: 571)</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  </div>
110
  </div>
111
  </div>
112
  </section>
113
 
114
+ <!-- Visual Generator -->
115
+ <section id="demo" class="py-20 bg-gray-800">
116
  <div class="container mx-auto px-4">
117
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Générateur <span class="text-blue-400">Visuel</span></h2>
118
+ <p class="text-xl text-center mb-12 max-w-3xl mx-auto text-gray-300">Décrivez votre site et voyez-le prendre forme en temps réel avec notre interface visuelle</p>
119
 
120
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
121
+ <!-- Generator Controls -->
122
+ <div class="bg-gray-900 p-8 rounded-xl shadow-lg">
123
+ <div class="mb-8">
124
+ <label class="block text-lg mb-3">Type de site:</label>
125
+ <div class="grid grid-cols-2 gap-4">
126
+ <button class="site-type-btn bg-gray-800 hover:bg-blue-900 py-3 px-4 rounded-lg border border-gray-700 transition" data-type="ecommerce">
127
+ <i class="fas fa-shopping-cart mr-2"></i> E-commerce
128
+ </button>
129
+ <button class="site-type-btn bg-gray-800 hover:bg-blue-900 py-3 px-4 rounded-lg border border-gray-700 transition" data-type="portfolio">
130
+ <i class="fas fa-briefcase mr-2"></i> Portfolio
131
+ </button>
132
+ <button class="site-type-btn bg-gray-800 hover:bg-blue-900 py-3 px-4 rounded-lg border border-gray-700 transition" data-type="blog">
133
+ <i class="fas fa-blog mr-2"></i> Blog
134
+ </button>
135
+ <button class="site-type-btn bg-gray-800 hover:bg-blue-900 py-3 px-4 rounded-lg border border-gray-700 transition" data-type="corporate">
136
+ <i class="fas fa-building mr-2"></i> Corporate
137
+ </button>
 
 
138
  </div>
139
  </div>
140
+
141
+ <div class="mb-8">
142
+ <label class="block text-lg mb-3">Style de design:</label>
143
+ <div class="flex flex-wrap gap-3">
144
+ <button class="design-style-btn bg-gray-800 hover:bg-blue-900 py-2 px-4 rounded-lg border border-gray-700 transition" data-style="modern">
145
+ Moderne
146
+ </button>
147
+ <button class="design-style-btn bg-gray-800 hover:bg-blue-900 py-2 px-4 rounded-lg border border-gray-700 transition" data-style="minimal">
148
+ Minimaliste
149
+ </button>
150
+ <button class="design-style-btn bg-gray-800 hover:bg-blue-900 py-2 px-4 rounded-lg border border-gray-700 transition" data-style="creative">
151
+ Créatif
152
+ </button>
153
+ <button class="design-style-btn bg-gray-800 hover:bg-blue-900 py-2 px-4 rounded-lg border border-gray-700 transition" data-style="elegant">
154
+ Élégant
155
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
  </div>
157
  </div>
158
+
159
+ <div class="mb-8">
160
+ <label class="block text-lg mb-3">Couleur principale:</label>
161
+ <div class="flex space-x-4">
162
+ <button class="color-btn w-10 h-10 rounded-full bg-blue-600 border-2 border-white" data-color="blue"></button>
163
+ <button class="color-btn w-10 h-10 rounded-full bg-purple-600 border-2 border-transparent" data-color="purple"></button>
164
+ <button class="color-btn w-10 h-10 rounded-full bg-green-600 border-2 border-transparent" data-color="green"></button>
165
+ <button class="color-btn w-10 h-10 rounded-full bg-red-600 border-2 border-transparent" data-color="red"></button>
166
+ <button class="color-btn w-10 h-10 rounded-full bg-yellow-500 border-2 border-transparent" data-color="yellow"></button>
167
  </div>
168
  </div>
169
+
170
+ <div class="mb-8">
171
+ <label class="block text-lg mb-3">Description détaillée:</label>
172
+ <textarea id="site-description" class="w-full bg-gray-800 rounded-lg p-4 text-white border border-gray-700 focus:border-blue-500 focus:outline-none h-32" placeholder="Décrivez votre site en détail..."></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
173
  </div>
174
+
175
+ <button id="generate-site-btn" class="w-full bg-blue-600 hover:bg-blue-700 py-4 rounded-full font-bold text-lg transition">
176
+ Générer le Site <i class="fas fa-magic ml-2"></i>
 
 
177
  </button>
178
  </div>
179
 
180
+ <!-- Live Preview -->
181
+ <div class="bg-gray-900 p-8 rounded-xl shadow-lg">
182
+ <div class="flex justify-between items-center mb-6">
183
+ <h3 class="text-xl font-bold">Aperçu en Temps Réel</h3>
184
+ <div class="flex space-x-2">
185
+ <span class="text-sm bg-gray-800 px-3 py-1 rounded-full">Lignes: <span id="line-count">0</span></span>
186
+ <span class="text-sm bg-gray-800 px-3 py-1 rounded-full">Composants: <span id="component-count">0</span></span>
187
  </div>
188
+ </div>
189
+
190
+ <div class="preview-frame bg-white rounded-lg overflow-hidden shadow-2xl" style="height: 400px;">
191
+ <div id="site-preview" class="h-full overflow-auto">
192
+ <!-- Preview will be inserted here by JavaScript -->
193
+ <div class="flex items-center justify-center h-full text-gray-500">
194
+ <div class="text-center">
195
+ <i class="fas fa-laptop-code text-5xl mb-4"></i>
196
+ <p>Votre aperçu apparaîtra ici</p>
197
+ </div>
198
  </div>
199
  </div>
200
+ </div>
201
+
202
+ <div id="generation-progress" class="hidden mt-6">
203
+ <div class="flex justify-between mb-2">
204
+ <span>Génération du code</span>
205
+ <span id="progress-percent">0%</span>
 
 
 
206
  </div>
207
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
208
+ <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
 
 
 
 
 
 
 
209
  </div>
210
+ <div class="mt-4 grid grid-cols-3 gap-4 text-center text-sm">
211
+ <div class="bg-gray-800 p-2 rounded">
212
+ <div>HTML</div>
213
+ <div id="html-lines" class="font-bold">0</div>
214
+ </div>
215
+ <div class="bg-gray-800 p-2 rounded">
216
+ <div>CSS</div>
217
+ <div id="css-lines" class="font-bold">0</div>
 
 
 
 
 
 
 
 
 
 
 
218
  </div>
219
+ <div class="bg-gray-800 p-2 rounded">
220
+ <div>JavaScript</div>
221
+ <div id="js-lines" class="font-bold">0</div>
 
 
 
 
222
  </div>
223
  </div>
224
  </div>
 
227
  </div>
228
  </section>
229
 
230
+ <!-- Features -->
231
+ <section id="features" class="py-20 bg-gray-900">
232
  <div class="container mx-auto px-4">
233
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Fonctionnalités <span class="text-blue-400">Avancées</span></h2>
234
+ <p class="text-xl text-center mb-12 max-w-3xl mx-auto text-gray-300">Tout ce dont vous avez besoin pour créer des sites web professionnels</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
235
 
236
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
237
+ <!-- Feature 1 -->
238
+ <div class="bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition animate-fadeIn">
239
+ <div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center mb-6">
240
+ <i class="fas fa-code text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
241
  </div>
242
+ <h3 class="text-2xl font-bold mb-4">Code Optimisé</h3>
243
+ <p class="text-gray-300">Génération automatique de code propre et bien structuré avec plus de 2000 lignes de HTML, CSS et JavaScript optimisés.</p>
244
  </div>
245
 
246
+ <!-- Feature 2 -->
247
+ <div class="bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition animate-fadeIn">
248
+ <div class="w-14 h-14 bg-purple-600 rounded-full flex items-center justify-center mb-6">
249
+ <i class="fas fa-mobile-alt text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
250
  </div>
251
+ <h3 class="text-2xl font-bold mb-4">Design Responsive</h3>
252
+ <p class="text-gray-300">Adaptation automatique à tous les appareils avec des media queries et des layouts flexibles générés par l'IA.</p>
253
  </div>
254
 
255
+ <!-- Feature 3 -->
256
+ <div class="bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition animate-fadeIn">
257
+ <div class="w-14 h-14 bg-green-600 rounded-full flex items-center justify-center mb-6">
258
+ <i class="fas fa-bolt text-2xl"></i>
 
 
 
 
259
  </div>
260
+ <h3 class="text-2xl font-bold mb-4">Performances</h3>
261
+ <p class="text-gray-300">Code optimisé pour des temps de chargement rapides avec score Google PageSpeed > 90/100.</p>
262
  </div>
263
 
264
+ <!-- Feature 4 -->
265
+ <div class="bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition animate-fadeIn">
266
+ <div class="w-14 h-14 bg-yellow-500 rounded-full flex items-center justify-center mb-6">
267
+ <i class="fas fa-palette text-2xl"></i>
 
 
 
 
268
  </div>
269
+ <h3 class="text-2xl font-bold mb-4">Personnalisation</h3>
270
+ <p class="text-gray-300">Choisissez parmi des centaines de combinaisons de couleurs, polices et styles de design.</p>
271
  </div>
272
 
273
+ <!-- Feature 5 -->
274
+ <div class="bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition animate-fadeIn">
275
+ <div class="w-14 h-14 bg-red-500 rounded-full flex items-center justify-center mb-6">
276
+ <i class="fas fa-shield-alt text-2xl"></i>
 
 
 
 
277
  </div>
278
+ <h3 class="text-2xl font-bold mb-4">Sécurité</h3>
279
+ <p class="text-gray-300">Protection intégrée contre les vulnérabilités courantes avec validation des entrées et sanitization.</p>
280
  </div>
281
 
282
+ <!-- Feature 6 -->
283
+ <div class="bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition animate-fadeIn">
284
+ <div class="w-14 h-14 bg-indigo-600 rounded-full flex items-center justify-center mb-6">
285
+ <i class="fas fa-download text-2xl"></i>
 
 
 
 
286
  </div>
287
+ <h3 class="text-2xl font-bold mb-4">Export Complet</h3>
288
+ <p class="text-gray-300">Téléchargez tous les fichiers sources ou déployez directement sur votre hébergement.</p>
289
  </div>
290
  </div>
291
  </div>
292
  </section>
293
 
294
  <!-- CTA Section -->
295
+ <section class="py-20 bg-gradient-to-r from-blue-900 to-purple-900">
296
  <div class="container mx-auto px-4 text-center">
297
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à créer votre site <span class="text-blue-300">2000+ lignes</span>?</h2>
298
+ <p class="text-xl mb-10 max-w-2xl mx-auto">Rejoignez des milliers de développeurs et créateurs qui utilisent notre IA pour booster leur productivité.</p>
299
 
300
+ <button class="bg-white text-blue-800 px-12 py-5 rounded-full font-bold text-lg hover:bg-gray-100 transition pulse">
301
+ Commencer Maintenant <i class="fas fa-arrow-right ml-2"></i>
302
+ </button>
 
 
 
 
 
303
 
304
  <div class="mt-10 flex flex-wrap justify-center gap-6">
305
  <div class="flex items-center">
306
  <i class="fas fa-check-circle text-green-400 text-2xl mr-2"></i>
307
+ <span>7 jours d'essai gratuit</span>
308
  </div>
309
  <div class="flex items-center">
310
  <i class="fas fa-check-circle text-green-400 text-2xl mr-2"></i>
 
321
  <!-- Footer -->
322
  <footer class="bg-gray-900 py-12">
323
  <div class="container mx-auto px-4">
324
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
325
  <div>
326
  <div class="flex items-center space-x-2 mb-6">
327
+ <i class="fas fa-robot text-2xl text-blue-500"></i>
328
+ <span class="text-xl font-bold">MegaSiteBuilder AI</span>
329
  </div>
330
+ <p class="text-gray-400 mb-4">La solution ultime pour générer des sites web complexes en quelques clics.</p>
331
+ <div class="flex space-x-4">
332
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
333
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
334
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
 
335
  </div>
336
  </div>
337
 
338
  <div>
339
+ <h4 class="text-lg font-bold mb-4">Produit</h4>
340
+ <ul class="space-y-2">
341
+ <li><a href="#" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
342
+ <li><a href="#" class="text-gray-400 hover:text-white">Tarifs</a></li>
343
+ <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
 
344
  </ul>
345
  </div>
346
 
347
  <div>
348
+ <h4 class="text-lg font-bold mb-4">Ressources</h4>
349
+ <ul class="space-y-2">
350
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
351
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
352
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
 
353
  </ul>
354
  </div>
355
 
356
  <div>
357
+ <h4 class="text-lg font-bold mb-4">Entreprise</h4>
358
+ <ul class="space-y-2">
359
+ <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
360
+ <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
361
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
 
362
  </ul>
363
  </div>
364
  </div>
365
 
366
+ <div class="pt-8 border-t border-gray-800 text-center text-gray-400">
367
+ <p>© 2023 MegaSiteBuilder AI. Tous droits réservés.</p>
 
 
 
 
 
368
  </div>
369
  </div>
370
  </footer>
371
 
 
 
 
 
 
 
 
372
  <script>
373
+ // Site generation logic
374
+ document.getElementById('generate-site-btn').addEventListener('click', function() {
375
+ const siteType = document.querySelector('.site-type-btn.bg-blue-900')?.dataset.type || 'portfolio';
376
+ const designStyle = document.querySelector('.design-style-btn.bg-blue-900')?.dataset.style || 'modern';
377
+ const color = document.querySelector('.color-btn.border-white')?.dataset.color || 'blue';
378
+ const description = document.getElementById('site-description').value;
379
+
380
+ // Show progress bar
381
+ document.getElementById('generation-progress').classList.remove('hidden');
382
+
383
+ // Simulate generation process
384
+ let progress = 0;
385
+ const interval = setInterval(() => {
386
+ progress += Math.floor(Math.random() * 5) + 1;
387
+ if (progress >= 100) {
388
+ progress = 100;
389
+ clearInterval(interval);
390
+ updatePreview(siteType, designStyle, color);
391
+ }
392
 
393
+ document.getElementById('progress-percent').textContent = progress + '%';
394
+ document.getElementById('progress-bar').style.width = progress + '%';
395
+
396
+ // Update line counts
397
+ const htmlLines = Math.floor(progress * 15 + Math.random() * 10);
398
+ const cssLines = Math.floor(progress * 12 + Math.random() * 8);
399
+ const jsLines = Math.floor(progress * 8 + Math.random() * 5);
400
+
401
+ document.getElementById('html-lines').textContent = htmlLines;
402
+ document.getElementById('css-lines').textContent = cssLines;
403
+ document.getElementById('js-lines').textContent = jsLines;
404
+ document.getElementById('line-count').textContent = htmlLines + cssLines + jsLines;
405
+ document.getElementById('component-count').textContent = Math.floor(progress / 5);
406
+ }, 100);
407
  });
408
+
409
+ // Update site preview
410
+ function updatePreview(type, style, color) {
411
+ const preview = document.getElementById('site-preview');
412
+ preview.innerHTML = '';
413
 
414
+ // Create sample content based on selections
415
+ let content = '';
416
+ const colorClasses = {
417
+ blue: 'bg-blue-600',
418
+ purple: 'bg-purple-600',
419
+ green: 'bg-green-600',
420
+ red: 'bg-red-600',
421
+ yellow: 'bg-yellow-500'
422
+ };
423
 
424
+ if (type === 'ecommerce') {
425
+ content = `
426
+ <div class="min-h-full">
427
+ <header class="${colorClasses[color]} text-white p-6">
428
+ <div class="container mx-auto flex justify-between items-center">
429
+ <div class="text-2xl font-bold">MonShop</div>
430
+ <nav class="flex space-x-6">
431
+ <a href="#" class="hover:underline">Accueil</a>
432
+ <a href="#" class="hover:underline">Boutique</a>
433
+ <a href="#" class="hover:underline">Panier (3)</a>
434
+ </nav>
435
+ </div>
436
+ </header>
437
+
438
+ <main class="container mx-auto p-6">
439
+ <section class="mb-12">
440
+ <div class="bg-gray-100 rounded-xl p-12 text-center">
441
+ <h1 class="text-4xl font-bold mb-4">Nouvelle Collection</h1>
442
+ <p class="text-xl mb-8">Découvrez nos produits exclusifs</p>
443
+ <button class="${colorClasses[color]} text-white px-8 py-3 rounded-full font-bold">Voir les produits</button>
444
+ </div>
445
+ </section>
446
 
447
+ <section class="mb-12">
448
+ <h2 class="text-2xl font-bold mb-6">Produits Populaires</h2>
449
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
450
+ ${[1,2,3].map(i => `
451
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
452
+ <div class="h-48 bg-gray-300"></div>
453
+ <div class="p-4">
454
+ <h3 class="font-bold mb-2">Produit ${i}</h3>
455
+ <p class="text-gray-600 mb-3">Description du produit</p>
456
+ <div class="flex justify-between items-center">
457
+ <span class="font-bold">$${Math.floor(Math.random() * 100) + 20}</span>
458
+ <button class="${colorClasses[color]} text-white px-4 py-1 rounded">Ajouter</button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ `).join('')}
463
+ </div>
464
+ </section>
465
+ </main>
466
+ </div>
467
+ `;
468
+ } else if (type === 'portfolio') {
469
+ content = `
470
+ <div class="min-h-full">
471
+ <header class="bg-white shadow-sm p-6">
472
+ <div class="container mx-auto flex justify-between items-center">
473
+ <div class="text-2xl font-bold">MonPortfolio</div>
474
+ <nav class="flex space-x-6">
475
+ <a href="#" class="hover:text-${color}-600">Accueil</a>
476
+ <a href="#" class="hover:text-${color}-600">Projets</a>
477
+ <a href="#" class="hover:text-${color}-600">Contact</a>
478
+ </nav>
479
+ </div>
480
+ </header>
481
+
482
+ <main class="container mx-auto p-6">
483
+ <section class="mb-12 text-center">
484
+ <div class="w-32 h-32 ${colorClasses[color]} rounded-full mx-auto mb-6"></div>
485
+ <h1 class="text-4xl font-bold mb-4">John Doe</h1>
486
+ <p class="text-xl mb-6">Designer & Développeur Web</p>
487
+ <div class="flex justify-center space-x-4">
488
+ <button class="${colorClasses[color]} text-white px-6 py-2 rounded-full">Mes Projets</button>
489
+ <button class="border border-gray-300 px-6 py-2 rounded-full">Contact</button>
490
+ </div>
491
+ </section>
492
+
493
+ <section class="mb-12">
494
+ <h2 class="text-2xl font-bold mb-6">Mes Réalisations</h2>
495
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
496
+ ${[1,2,3,4,5,6].map(i => `
497
+ <div class="bg-white rounded-lg shadow-md overflow-hidden group">
498
+ <div class="h-48 bg-gray-300 relative">
499
+ <div class="absolute inset-0 ${colorClasses[color]} bg-opacity-0 group-hover:bg-opacity-50 flex items-center justify-center transition-all">
500
+ <button class="opacity-0 group-hover:opacity-100 ${colorClasses[color]} text-white px-4 py-2 rounded transition-all">Voir plus</button>
501
+ </div>
502
+ </div>
503
+ <div class="p-4">
504
+ <h3 class="font-bold mb-2">Projet ${i}</h3>
505
+ <p class="text-gray-600">Description du projet</p>
506
+ </div>
507
+ </div>
508
+ `).join('')}
509
+ </div>
510
+ </section>
511
+ </main>
512
+ </div>
513
+ `;
514
+ }
515
+
516
+ preview.innerHTML = content;
517
+ }
518
+
519
+ // UI Interactions
520
+ document.querySelectorAll('.site-type-btn').forEach(btn => {
521
+ btn.addEventListener('click', function() {
522
+ document.querySelectorAll('.site-type-btn').forEach(b => b.classList.remove('bg-blue-900'));
523
+ this.classList.add('bg-blue-900');
524
+ });
525
  });
526
+
527
+ document.querySelectorAll('.design-style-btn').forEach(btn => {
528
+ btn.addEventListener('click', function() {
529
+ document.querySelectorAll('.design-style-btn').forEach(b => b.classList.remove('bg-blue-900'));
530
+ this.classList.add('bg-blue-900');
531
+ });
532
+ });
533
+
534
+ document.querySelectorAll('.color-btn').forEach(btn => {
535
+ btn.addEventListener('click', function() {
536
+ document.querySelectorAll('.color-btn').forEach(b => b.classList.remove('border-white'));
537
+ this.classList.add('border-white');
538
  });
 
 
 
 
539
  });
540
  </script>
541
  <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/ia-web-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- je veux un génerateur tres sofitiqué d'nteligence artificiel de 1298700 assitant ia génerateur de code et scrypt de site web que par description et visalisation etape par etape en automatique pour creer des site imense avec plus de 2000ligne en automatique avec domaine,ssl, serveur , wordpress enregistrement toute complet en automatique , avec une tres belle interface tres animé
 
 
1
+ je veux un génerateur tres sofitiqué d'nteligence artificiel de 1298700 assitant ia génerateur de code et scrypt de site web que par description et visalisation etape par etape en automatique pour creer des site imense avec plus de 2000ligne en automatique avec domaine,ssl, serveur , wordpress enregistrement toute complet en automatique , avec une tres belle interface tres animé
2
+ creer un generateur de site avec vusuel de la reatio du site de 2000 ligne