Hugging Face's logo

Spaces:
docto41
/
mega-ai
Running

App Files Community
docto41 commited on
Commit
bcf16a7
·
verified ·
1 Parent(s): ba95c71

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +92 -373
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>MegaAI - Le Générateur de Sites Web IA le Plus Puissant</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>
@@ -62,6 +62,17 @@
62
  opacity: 0.5;
63
  cursor: not-allowed;
64
  }
 
 
 
 
 
 
 
 
 
 
 
65
  </style>
66
  </head>
67
  <body class="bg-gray-50 font-sans">
@@ -74,9 +85,8 @@
74
  </div>
75
  <div class="hidden md:flex space-x-6">
76
  <a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a>
77
- <a href="#pricing" class="hover:text-gray-200 transition">Tarifs</a>
78
  <a href="#templates" class="hover:text-gray-200 transition">Modèles</a>
79
- <a href="#resources" class="hover:text-gray-200 transition">Ressources</a>
80
  </div>
81
  <div class="flex items-center space-x-4">
82
  <a href="#" id="loginBtn" class="hover:text-gray-200 transition">Connexion</a>
@@ -88,8 +98,8 @@
88
  <!-- Hero Section -->
89
  <section class="gradient-bg text-white py-20">
90
  <div class="container mx-auto px-4 text-center">
91
- <h1 class="text-5xl md:text-6xl font-bold mb-6">Le Générateur de Sites Web IA le Plus Puissant</h1>
92
- <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Décrivez votre vision, et notre réseau de 100 000 IA spécialisées construira votre site parfait avec domaine, hébergement, SSL et tout inclus.</p>
93
  <div class="flex flex-col md:flex-row justify-center max-w-2xl mx-auto">
94
  <input type="text" id="websiteDescription" placeholder="Décrivez le site web que vous souhaitez créer..." class="px-6 py-4 rounded-l-full w-full text-gray-800 focus:outline-none">
95
  <button id="generateBtn" class="bg-purple-800 hover:bg-purple-900 text-white px-8 py-4 rounded-r-full font-bold transition mt-2 md:mt-0 md:ml-2 flex items-center justify-center">
@@ -100,182 +110,89 @@
100
  <div class="mt-8 flex justify-center space-x-4">
101
  <div class="flex items-center">
102
  <i class="fas fa-check-circle mr-2"></i>
103
- <span>SSL Gratuit</span>
104
  </div>
105
  <div class="flex items-center">
106
  <i class="fas fa-check-circle mr-2"></i>
107
- <span>Enregistrement de Domaine</span>
108
  </div>
109
  <div class="flex items-center">
110
  <i class="fas fa-check-circle mr-2"></i>
111
- <span>Hébergement IA</span>
112
  </div>
113
  </div>
114
  </div>
115
  </section>
116
 
117
- <!-- AI Network Section -->
118
- <section id="features" class="py-16 bg-white">
119
  <div class="container mx-auto px-4">
120
- <div class="text-center mb-16">
121
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Alimenté par 100 000 IA Spécialisées</h2>
122
- <p class="text-gray-600 max-w-2xl mx-auto">Notre réseau IA combine une expertise en design, développement, SEO et plus encore pour livrer des sites web parfaits en quelques minutes.</p>
123
  </div>
124
 
125
- <div class="ai-grid">
126
- <!-- AI Card 1 -->
127
- <div class="ai-card bg-white p-6 rounded-xl shadow-md transition duration-300 fade-in">
128
- <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
129
- <i class="fas fa-paint-brush text-purple-600 text-2xl"></i>
130
- </div>
131
- <h3 class="text-xl font-bold mb-2">IA Design</h3>
132
- <p class="text-gray-600">Spécialisée dans la création de mises en page visuellement époustouflantes qui correspondent à l'identité de votre marque.</p>
133
- <div class="mt-4 flex items-center text-sm text-purple-600">
134
- <span>5 200 IA</span>
135
- <div class="ml-2 w-2 h-2 bg-purple-600 rounded-full animate-pulse"></div>
136
- </div>
137
- </div>
138
-
139
- <!-- AI Card 2 -->
140
- <div class="ai-card bg-white p-6 rounded-xl shadow-md transition duration-300 fade-in">
141
- <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
142
- <i class="fas fa-code text-blue-600 text-2xl"></i>
143
- </div>
144
- <h3 class="text-xl font-bold mb-2">IA Développement</h3>
145
- <p class="text-gray-600">Construit un code propre et optimisé avec une fonctionnalité parfaite pour toute exigence.</p>
146
- <div class="mt-4 flex items-center text-sm text-blue-600">
147
- <span>8 750 IA</span>
148
- <div class="ml-2 w-2 h-2 bg-blue-600 rounded-full animate-pulse"></div>
149
  </div>
150
  </div>
151
 
152
- <!-- AI Card 3 -->
153
- <div class="ai-card bg-white p-6 rounded-xl shadow-md transition duration-300 fade-in">
154
- <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
155
- <i class="fas fa-search text-green-600 text-2xl"></i>
156
- </div>
157
- <h3 class="text-xl font-bold mb-2">IA SEO</h3>
158
- <p class="text-gray-600">Optimise chaque aspect de votre site pour une visibilité maximale dans les moteurs de recherche.</p>
159
- <div class="mt-4 flex items-center text-sm text-green-600">
160
- <span>3 450 IA</span>
161
- <div class="ml-2 w-2 h-2 bg-green-600 rounded-full animate-pulse"></div>
162
  </div>
163
  </div>
164
 
165
- <!-- AI Card 4 -->
166
- <div class="ai-card bg-white p-6 rounded-xl shadow-md transition duration-300 fade-in">
167
- <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
168
- <i class="fas fa-shield-alt text-red-600 text-2xl"></i>
169
- </div>
170
- <h3 class="text-xl font-bold mb-2">IA Sécurité</h3>
171
- <p class="text-gray-600">Met en œuvre automatiquement SSL, pare-feux et les meilleures pratiques de sécurité.</p>
172
- <div class="mt-4 flex items-center text-sm text-red-600">
173
- <span>2 800 IA</span>
174
- <div class="ml-2 w-2 h-2 bg-red-600 rounded-full animate-pulse"></div>
175
  </div>
176
  </div>
177
  </div>
178
- </div>
179
- </section>
180
-
181
- <!-- Domain & Hosting Section -->
182
- <section id="pricing" class="py-16 bg-gray-100">
183
- <div class="container mx-auto px-4">
184
- <div class="text-center mb-12">
185
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Solution Complète de Site Web</h2>
186
- <p class="text-gray-600 max-w-2xl mx-auto">De l'enregistrement de domaine à l'hébergement et la sécurité - nous gérons tout.</p>
187
- </div>
188
 
189
- <div class="flex flex-col lg:flex-row gap-8">
190
- <!-- Domain Registration -->
191
- <div class="flex-1 bg-white p-8 rounded-xl shadow-md">
192
- <div class="flex items-center mb-6">
193
- <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
194
- <i class="fas fa-globe text-purple-600 text-xl"></i>
195
  </div>
196
- <h3 class="text-xl font-bold">Enregistrement de Domaine</h3>
197
  </div>
198
-
199
- <div class="mb-6">
200
- <div class="flex">
201
- <input type="text" id="domainInput" placeholder="Trouvez votre domaine parfait" class="domain-checker-input px-4 py-3 border border-gray-300 rounded-l-lg w-full focus:outline-none focus:ring-2 focus:ring-purple-500">
202
- <button id="domainSearchBtn" class="domain-checker-btn bg-purple-600 text-white px-6 py-3 font-medium rounded-r-lg hover:bg-purple-700 transition">Rechercher</button>
203
  </div>
 
204
  </div>
205
-
206
- <div class="space-y-4" id="domainResults">
207
- <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
208
- <div>
209
- <span class="font-medium">votremarque.com</span>
210
- <span class="text-sm text-gray-500 ml-2">12,99€/an</span>
211
- </div>
212
- <button class="text-sm bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition add-domain">Ajouter</button>
213
- </div>
214
- <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
215
- <div>
216
- <span class="font-medium">votremarque.net</span>
217
- <span class="text-sm text-gray-500 ml-2">10,99€/an</span>
218
- </div>
219
- <button class="text-sm bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition add-domain">Ajouter</button>
220
- </div>
221
- <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
222
- <div>
223
- <span class="font-medium">votremarque.ai</span>
224
- <span class="text-sm text-gray-500 ml-2">24,99€/an</span>
225
- </div>
226
- <button class="text-sm bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition add-domain">Ajouter</button>
227
  </div>
228
- </div>
229
- </div>
230
-
231
- <!-- Hosting & SSL -->
232
- <div class="flex-1 bg-white p-8 rounded-xl shadow-md">
233
- <div class="flex items-center mb-6">
234
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
235
- <i class="fas fa-server text-blue-600 text-xl"></i>
236
- </div>
237
- <h3 class="text-xl font-bold">Hébergement Piloté par IA</h3>
238
- </div>
239
-
240
- <div class="mb-6 p-4 bg-blue-50 rounded-lg">
241
- <div class="flex items-center">
242
- <i class="fas fa-bolt text-blue-500 mr-3"></i>
243
- <div>
244
- <h4 class="font-medium">Performance Auto-adaptative</h4>
245
- <p class="text-sm text-gray-600">Votre site s'adapte automatiquement pour gérer tout pic de trafic</p>
246
- </div>
247
- </div>
248
- </div>
249
-
250
- <div class="mb-6 p-4 bg-green-50 rounded-lg">
251
- <div class="flex items-center">
252
- <i class="fas fa-lock text-green-500 mr-3"></i>
253
- <div>
254
- <h4 class="font-medium">Certificat SSL Gratuit</h4>
255
- <p class="text-sm text-gray-600">Chiffrement HTTPS automatique pour tous vos sites web</p>
256
- </div>
257
- </div>
258
- </div>
259
-
260
- <div class="mb-6 p-4 bg-purple-50 rounded-lg">
261
- <div class="flex items-center">
262
- <i class="fas fa-robot text-purple-500 mr-3"></i>
263
- <div>
264
- <h4 class="font-medium">Optimisation IA</h4>
265
- <p class="text-sm text-gray-600">Surveillance continue des performances et améliorations automatiques</p>
266
- </div>
267
- </div>
268
- </div>
269
-
270
- <div class="bg-gray-100 p-4 rounded-lg">
271
- <div class="flex justify-between items-center">
272
- <div>
273
- <h4 class="font-medium">Forfait Hébergement IA</h4>
274
- <p class="text-sm text-gray-600">Inclut bande passante et stockage illimités</p>
275
- </div>
276
- <span class="font-bold text-lg">9,99€/mois</span>
277
- </div>
278
- <button id="selectHostingBtn" class="w-full mt-4 bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">Sélectionner</button>
279
  </div>
280
  </div>
281
  </div>
@@ -283,7 +200,7 @@
283
  </section>
284
 
285
  <!-- Website Creation Demo -->
286
- <section id="templates" class="py-16 bg-white">
287
  <div class="container mx-auto px-4">
288
  <div class="text-center mb-12">
289
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Créez Votre Site Web en Quelques Minutes</h2>
@@ -292,7 +209,7 @@
292
 
293
  <div class="flex flex-col lg:flex-row gap-8">
294
  <!-- Input Panel -->
295
- <div class="lg:w-1/3 bg-gray-50 p-6 rounded-xl">
296
  <h3 class="text-xl font-bold mb-4">Décrivez Votre Site Web</h3>
297
 
298
  <div class="mb-6">
@@ -378,157 +295,13 @@
378
  </div>
379
  </section>
380
 
381
- <!-- Dashboard Preview -->
382
- <section id="resources" class="py-16 bg-gray-100">
383
- <div class="container mx-auto px-4">
384
- <div class="text-center mb-12">
385
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Gestion Complète de Site Web</h2>
386
- <p class="text-gray-600 max-w-2xl mx-auto">Contrôlez chaque aspect de votre site web depuis notre tableau de bord intuitif.</p>
387
- </div>
388
-
389
- <div class="bg-white rounded-xl shadow-xl overflow-hidden">
390
- <div class="flex">
391
- <!-- Sidebar -->
392
- <div class="w-64 bg-gray-900 text-white dashboard-nav p-4">
393
- <div class="mb-8">
394
- <div class="flex items-center space-x-2 mb-6">
395
- <i class="fas fa-robot text-2xl text-purple-400"></i>
396
- <span class="text-xl font-bold">MegaAI</span>
397
- </div>
398
- <div class="space-y-1">
399
- <a href="#" class="block px-4 py-2 bg-gray-800 rounded-lg font-medium"><i class="fas fa-home mr-2"></i> Tableau de bord</a>
400
- <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-lg"><i class="fas fa-globe mr-2"></i> Mes Sites Web</a>
401
- <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-lg"><i class="fas fa-cog mr-2"></i> Paramètres</a>
402
- <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-lg"><i class="fas fa-chart-line mr-2"></i> Analytics</a>
403
- <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-lg"><i class="fas fa-envelope mr-2"></i> Email</a>
404
- <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-lg"><i class="fas fa-store mr-2"></i> E-commerce</a>
405
- <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-lg"><i class="fas fa-database mr-2"></i> Bases de données</a>
406
- <a href="#" class="block px-4 py-2 hover:bg-gray-800 rounded-lg"><i class="fas fa-shield-alt mr-2"></i> Sécurité</a>
407
- </div>
408
- </div>
409
- <div class="mt-auto pt-4 border-t border-gray-800">
410
- <div class="flex items-center space-x-3">
411
- <div class="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center">
412
- <i class="fas fa-user"></i>
413
- </div>
414
- <div>
415
- <div class="font-medium">Jean Dupont</div>
416
- <div class="text-xs text-gray-400">Admin</div>
417
- </div>
418
- </div>
419
- </div>
420
- </div>
421
-
422
- <!-- Main Content -->
423
- <div class="flex-1 p-8">
424
- <div class="flex justify-between items-center mb-8">
425
- <h3 class="text-2xl font-bold">Gestion de Site Web</h3>
426
- <button id="newWebsiteBtn" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700">
427
- <i class="fas fa-plus mr-2"></i> Nouveau Site
428
- </button>
429
- </div>
430
-
431
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
432
- <!-- Website Card 1 -->
433
- <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
434
- <div class="flex justify-between mb-3">
435
- <h4 class="font-bold">MonEntreprise.com</h4>
436
- <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">En Ligne</span>
437
- </div>
438
- <div class="h-32 bg-gray-100 rounded mb-3 flex items-center justify-center">
439
- <i class="fas fa-image text-gray-300 text-3xl"></i>
440
- </div>
441
- <div class="flex justify-between text-sm text-gray-600">
442
- <div>
443
- <i class="fas fa-globe mr-1"></i>
444
- <span>12 345 visites</span>
445
- </div>
446
- <div class="space-x-2">
447
- <button class="text-purple-600 hover:text-purple-800">
448
- <i class="fas fa-cog"></i>
449
- </button>
450
- <button class="text-purple-600 hover:text-purple-800">
451
- <i class="fas fa-edit"></i>
452
- </button>
453
- </div>
454
- </div>
455
- </div>
456
-
457
- <!-- Website Card 2 -->
458
- <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
459
- <div class="flex justify-between mb-3">
460
- <h4 class="font-bold">MaBoutique.com</h4>
461
- <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Brouillon</span>
462
- </div>
463
- <div class="h-32 bg-gray-100 rounded mb-3 flex items-center justify-center">
464
- <i class="fas fa-image text-gray-300 text-3xl"></i>
465
- </div>
466
- <div class="flex justify-between text-sm text-gray-600">
467
- <div>
468
- <i class="fas fa-globe mr-1"></i>
469
- <span>Non publié</span>
470
- </div>
471
- <div class="space-x-2">
472
- <button class="text-purple-600 hover:text-purple-800">
473
- <i class="fas fa-cog"></i>
474
- </button>
475
- <button class="text-purple-600 hover:text-purple-800">
476
- <i class="fas fa-edit"></i>
477
- </button>
478
- </div>
479
- </div>
480
- </div>
481
- </div>
482
-
483
- <!-- Domain & Hosting Section -->
484
- <div class="bg-gray-50 p-6 rounded-lg">
485
- <h4 class="font-bold text-lg mb-4">Domaine & Hébergement</h4>
486
- <div class="space-y-4">
487
- <div class="flex justify-between items-center p-3 bg-white rounded-lg shadow-sm">
488
- <div class="flex items-center">
489
- <i class="fas fa-globe text-purple-600 mr-3"></i>
490
- <div>
491
- <div class="font-medium">monentreprise.com</div>
492
- <div class="text-sm text-gray-600">Expire le: 2024-12-15</div>
493
- </div>
494
- </div>
495
- <button class="text-sm bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700">Renouveler</button>
496
- </div>
497
- <div class="flex justify-between items-center p-3 bg-white rounded-lg shadow-sm">
498
- <div class="flex items-center">
499
- <i class="fas fa-server text-blue-600 mr-3"></i>
500
- <div>
501
- <div class="font-medium">Hébergement IA Pro</div>
502
- <div class="text-sm text-gray-600">Prochain paiement: 2023-11-01</div>
503
- </div>
504
- </div>
505
- <button class="text-sm bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">Gérer</button>
506
- </div>
507
- <div class="flex justify-between items-center p-3 bg-white rounded-lg shadow-sm">
508
- <div class="flex items-center">
509
- <i class="fas fa-lock text-green-600 mr-3"></i>
510
- <div>
511
- <div class="font-medium">Certificat SSL</div>
512
- <div class="text-sm text-gray-600">Actif (Renouvellement automatique activé)</div>
513
- </div>
514
- </div>
515
- <button class="text-sm bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700">Détails</button>
516
- </div>
517
- </div>
518
- </div>
519
- </div>
520
- </div>
521
- </div>
522
- </div>
523
- </section>
524
-
525
  <!-- CTA Section -->
526
  <section class="gradient-bg text-white py-16">
527
  <div class="container mx-auto px-4 text-center">
528
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à Construire Votre Site Web Parfait?</h2>
529
- <p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez des milliers d'entreprises créant des sites web époustouflants avec notre technologie IA.</p>
530
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
531
- <button id="freeTrialBtn" class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition">Essai Gratuit</button>
532
  <button id="liveDemoBtn" class="border-2 border-white px-8 py-4 rounded-full font-bold hover:bg-white hover:text-purple-600 transition">Voir Démo Live</button>
533
  </div>
534
  </div>
@@ -543,24 +316,22 @@
543
  <i class="fas fa-robot text-2xl text-purple-400"></i>
544
  <span class="text-xl font-bold">MegaAI</span>
545
  </div>
546
- <p class="text-gray-400">Le générateur de sites web IA le plus puissant avec une solution d'hébergement complète.</p>
547
  </div>
548
  <div>
549
  <h4 class="font-bold text-lg mb-4">Produit</h4>
550
  <ul class="space-y-2">
551
  <li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
552
- <li><a href="#pricing" class="text-gray-400 hover:text-white">Tarifs</a></li>
553
  <li><a href="#templates" class="text-gray-400 hover:text-white">Modèles</a></li>
554
- <li><a href="#" class="text-gray-400 hover:text-white">Intégrations</a></li>
555
  </ul>
556
  </div>
557
  <div>
558
- <h4 class="font-bold text-lg mb-4">Ressources</h4>
559
  <ul class="space-y-2">
560
- <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
561
  <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
562
- <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
563
- <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
564
  </ul>
565
  </div>
566
  <div>
@@ -568,7 +339,6 @@
568
  <ul class="space-y-2">
569
  <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
570
  <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
571
- <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
572
  <li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li>
573
  </ul>
574
  </div>
@@ -579,7 +349,6 @@
579
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
580
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
581
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
582
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
583
  </div>
584
  </div>
585
  </div>
@@ -655,7 +424,7 @@
655
  <i class="fas fa-check text-green-600 text-2xl"></i>
656
  </div>
657
  <h3 class="text-2xl font-bold mb-2">Félicitations!</h3>
658
- <p class="text-gray-600 mb-6">Votre site web a été généré avec succès et est maintenant en ligne.</p>
659
  <button id="closeSuccessModal" class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition">
660
  Continuer
661
  </button>
@@ -663,7 +432,6 @@
663
  </div>
664
 
665
  <script>
666
- // Tous les boutons sont maintenant fonctionnels avec des interactions
667
  document.addEventListener('DOMContentLoaded', function() {
668
  // Gestion des modales
669
  const loginBtn = document.getElementById('loginBtn');
@@ -715,62 +483,19 @@
715
  loginModal.classList.remove('hidden');
716
  });
717
 
718
- // Recherche de domaine
719
- const domainSearchBtn = document.getElementById('domainSearchBtn');
720
- const domainInput = document.getElementById('domainInput');
721
- const domainResults = document.getElementById('domainResults');
722
-
723
- domainSearchBtn.addEventListener('click', function(e) {
724
- e.preventDefault();
725
- if (domainInput.value.trim() !== '') {
726
- // Simulation de recherche
727
- domainResults.innerHTML = `
728
- <div class="flex justify-center items-center p-4">
729
- <div class="loading-spinner inline-block w-6 h-6 border-2 border-purple-500 border-t-transparent rounded-full mr-2"></div>
730
- <span>Recherche de domaines...</span>
731
- </div>
732
- `;
733
 
734
- setTimeout(() => {
735
- const searchTerm = domainInput.value.toLowerCase().replace(/\s+/g, '');
736
- domainResults.innerHTML = `
737
- <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
738
- <div>
739
- <span class="font-medium">${searchTerm}.com</span>
740
- <span class="text-sm text-gray-500 ml-2">12,99€/an</span>
741
- </div>
742
- <button class="text-sm bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition add-domain">Ajouter</button>
743
- </div>
744
- <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
745
- <div>
746
- <span class="font-medium">${searchTerm}.net</span>
747
- <span class="text-sm text-gray-500 ml-2">10,99€/an</span>
748
- </div>
749
- <button class="text-sm bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition add-domain">Ajouter</button>
750
- </div>
751
- <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
752
- <div>
753
- <span class="font-medium">${searchTerm}.ai</span>
754
- <span class="text-sm text-gray-500 ml-2">24,99€/an</span>
755
- </div>
756
- <button class="text-sm bg-purple-600 text-white px-3 py-1 rounded hover:bg-purple-700 transition add-domain">Ajouter</button>
757
- </div>
758
- `;
759
-
760
- // Ajouter des écouteurs aux nouveaux boutons
761
- document.querySelectorAll('.add-domain').forEach(btn => {
762
- btn.addEventListener('click', function() {
763
- alert('Domaine ajouté à votre panier!');
764
- });
765
- });
766
- }, 1500);
767
- }
768
- });
769
-
770
- // Sélection d'hébergement
771
- const selectHostingBtn = document.getElementById('selectHostingBtn');
772
- selectHostingBtn.addEventListener('click', function() {
773
- alert('Forfait d\'hébergement sélectionné!');
774
  });
775
 
776
  // Générateur de site web
@@ -832,12 +557,6 @@
832
  successModal.classList.remove('hidden');
833
  });
834
 
835
- // Bouton Nouveau Site
836
- const newWebsiteBtn = document.getElementById('newWebsiteBtn');
837
- newWebsiteBtn.addEventListener('click', function() {
838
- alert('Création d\'un nouveau site web!');
839
- });
840
-
841
  // Boutons CTA
842
  const freeTrialBtn = document.getElementById('freeTrialBtn');
843
  const liveDemoBtn = document.getElementById('liveDemoBtn');
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MegaAI - Domaine Gratuit + Générateur de Sites Web IA</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>
 
62
  opacity: 0.5;
63
  cursor: not-allowed;
64
  }
65
+ .free-domain-badge {
66
+ position: absolute;
67
+ top: -10px;
68
+ right: -10px;
69
+ background: #10b981;
70
+ color: white;
71
+ padding: 3px 8px;
72
+ border-radius: 9999px;
73
+ font-size: 12px;
74
+ font-weight: bold;
75
+ }
76
  </style>
77
  </head>
78
  <body class="bg-gray-50 font-sans">
 
85
  </div>
86
  <div class="hidden md:flex space-x-6">
87
  <a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a>
88
+ <a href="#free-domain" class="hover:text-gray-200 transition">Domaine Gratuit</a>
89
  <a href="#templates" class="hover:text-gray-200 transition">Modèles</a>
 
90
  </div>
91
  <div class="flex items-center space-x-4">
92
  <a href="#" id="loginBtn" class="hover:text-gray-200 transition">Connexion</a>
 
98
  <!-- Hero Section -->
99
  <section class="gradient-bg text-white py-20">
100
  <div class="container mx-auto px-4 text-center">
101
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">Domaine Gratuit + Site Web IA</h1>
102
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Obtenez un domaine GRATUIT pour 1 an et notre IA construira votre site web professionnel en quelques minutes.</p>
103
  <div class="flex flex-col md:flex-row justify-center max-w-2xl mx-auto">
104
  <input type="text" id="websiteDescription" placeholder="Décrivez le site web que vous souhaitez créer..." class="px-6 py-4 rounded-l-full w-full text-gray-800 focus:outline-none">
105
  <button id="generateBtn" class="bg-purple-800 hover:bg-purple-900 text-white px-8 py-4 rounded-r-full font-bold transition mt-2 md:mt-0 md:ml-2 flex items-center justify-center">
 
110
  <div class="mt-8 flex justify-center space-x-4">
111
  <div class="flex items-center">
112
  <i class="fas fa-check-circle mr-2"></i>
113
+ <span>Domaine Gratuit</span>
114
  </div>
115
  <div class="flex items-center">
116
  <i class="fas fa-check-circle mr-2"></i>
117
+ <span>SSL Gratuit</span>
118
  </div>
119
  <div class="flex items-center">
120
  <i class="fas fa-check-circle mr-2"></i>
121
+ <span>Hébergement 1 mois offert</span>
122
  </div>
123
  </div>
124
  </div>
125
  </section>
126
 
127
+ <!-- Free Domain Section -->
128
+ <section id="free-domain" class="py-16 bg-white">
129
  <div class="container mx-auto px-4">
130
+ <div class="text-center mb-12">
131
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Obtenez Votre Domaine Gratuit</h2>
132
+ <p class="text-gray-600 max-w-2xl mx-auto">Choisissez parmi ces extensions de domaine gratuites pour votre premier site web.</p>
133
  </div>
134
 
135
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
136
+ <!-- Free Domain Option 1 -->
137
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm border border-gray-200 relative">
138
+ <div class="free-domain-badge">GRATUIT</div>
139
+ <div class="text-center">
140
+ <div class="text-4xl font-bold mb-2">.SITE.GRATIS</div>
141
+ <div class="text-xl font-bold text-green-600 mb-4">0€/an</div>
142
+ <p class="text-gray-600 mb-4">Parfait pour les sites personnels et les portfolios</p>
143
+ <button class="select-free-domain w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition" data-domain=".site.gratis">
144
+ Sélectionner
145
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  </div>
147
  </div>
148
 
149
+ <!-- Free Domain Option 2 -->
150
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm border border-gray-200 relative">
151
+ <div class="free-domain-badge">GRATUIT</div>
152
+ <div class="text-center">
153
+ <div class="text-4xl font-bold mb-2">.WEB.GRATUIT</div>
154
+ <div class="text-xl font-bold text-green-600 mb-4">0€/an</div>
155
+ <p class="text-gray-600 mb-4">Idéal pour les blogs et les petits business</p>
156
+ <button class="select-free-domain w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition" data-domain=".web.gratuit">
157
+ Sélectionner
158
+ </button>
159
  </div>
160
  </div>
161
 
162
+ <!-- Free Domain Option 3 -->
163
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm border border-gray-200 relative">
164
+ <div class="free-domain-badge">GRATUIT</div>
165
+ <div class="text-center">
166
+ <div class="text-4xl font-bold mb-2">.FREE.SITE</div>
167
+ <div class="text-xl font-bold text-green-600 mb-4">0€/an</div>
168
+ <p class="text-gray-600 mb-4">Excellent pour les projets temporaires et tests</p>
169
+ <button class="select-free-domain w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition" data-domain=".free.site">
170
+ Sélectionner
171
+ </button>
172
  </div>
173
  </div>
174
  </div>
 
 
 
 
 
 
 
 
 
 
175
 
176
+ <div class="mt-12 bg-purple-50 p-6 rounded-xl max-w-4xl mx-auto">
177
+ <h3 class="text-xl font-bold mb-4 text-center">Comment obtenir votre domaine gratuit?</h3>
178
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
179
+ <div class="bg-white p-4 rounded-lg text-center">
180
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
181
+ <span class="text-purple-600 font-bold">1</span>
182
  </div>
183
+ <p>Créez un compte gratuit</p>
184
  </div>
185
+ <div class="bg-white p-4 rounded-lg text-center">
186
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
187
+ <span class="text-purple-600 font-bold">2</span>
 
 
188
  </div>
189
+ <p>Choisissez votre domaine gratuit</p>
190
  </div>
191
+ <div class="bg-white p-4 rounded-lg text-center">
192
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
193
+ <span class="text-purple-600 font-bold">3</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  </div>
195
+ <p>Générez votre site avec l'IA</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
196
  </div>
197
  </div>
198
  </div>
 
200
  </section>
201
 
202
  <!-- Website Creation Demo -->
203
+ <section id="templates" class="py-16 bg-gray-100">
204
  <div class="container mx-auto px-4">
205
  <div class="text-center mb-12">
206
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Créez Votre Site Web en Quelques Minutes</h2>
 
209
 
210
  <div class="flex flex-col lg:flex-row gap-8">
211
  <!-- Input Panel -->
212
+ <div class="lg:w-1/3 bg-white p-6 rounded-xl shadow-md">
213
  <h3 class="text-xl font-bold mb-4">Décrivez Votre Site Web</h3>
214
 
215
  <div class="mb-6">
 
295
  </div>
296
  </section>
297
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
298
  <!-- CTA Section -->
299
  <section class="gradient-bg text-white py-16">
300
  <div class="container mx-auto px-4 text-center">
301
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à Commencer avec Votre Domaine Gratuit?</h2>
302
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Créez un compte maintenant et obtenez immédiatement votre domaine gratuit pour 1 an.</p>
303
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
304
+ <button id="freeTrialBtn" class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition">Obtenir Mon Domaine Gratuit</button>
305
  <button id="liveDemoBtn" class="border-2 border-white px-8 py-4 rounded-full font-bold hover:bg-white hover:text-purple-600 transition">Voir Démo Live</button>
306
  </div>
307
  </div>
 
316
  <i class="fas fa-robot text-2xl text-purple-400"></i>
317
  <span class="text-xl font-bold">MegaAI</span>
318
  </div>
319
+ <p class="text-gray-400">Le générateur de sites web IA avec domaine gratuit et solution d'hébergement complète.</p>
320
  </div>
321
  <div>
322
  <h4 class="font-bold text-lg mb-4">Produit</h4>
323
  <ul class="space-y-2">
324
  <li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
325
+ <li><a href="#free-domain" class="text-gray-400 hover:text-white">Domaine Gratuit</a></li>
326
  <li><a href="#templates" class="text-gray-400 hover:text-white">Modèles</a></li>
 
327
  </ul>
328
  </div>
329
  <div>
330
+ <h4 class="font-bold text-lg mb-4">Support</h4>
331
  <ul class="space-y-2">
332
+ <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li>
333
  <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
334
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
 
335
  </ul>
336
  </div>
337
  <div>
 
339
  <ul class="space-y-2">
340
  <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
341
  <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
 
342
  <li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li>
343
  </ul>
344
  </div>
 
349
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
350
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
351
  <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
 
352
  </div>
353
  </div>
354
  </div>
 
424
  <i class="fas fa-check text-green-600 text-2xl"></i>
425
  </div>
426
  <h3 class="text-2xl font-bold mb-2">Félicitations!</h3>
427
+ <p class="text-gray-600 mb-6">Votre domaine gratuit a été enregistré et votre site web est maintenant en ligne.</p>
428
  <button id="closeSuccessModal" class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition">
429
  Continuer
430
  </button>
 
432
  </div>
433
 
434
  <script>
 
435
  document.addEventListener('DOMContentLoaded', function() {
436
  // Gestion des modales
437
  const loginBtn = document.getElementById('loginBtn');
 
483
  loginModal.classList.remove('hidden');
484
  });
485
 
486
+ // Sélection de domaine gratuit
487
+ const freeDomainButtons = document.querySelectorAll('.select-free-domain');
488
+ freeDomainButtons.forEach(button => {
489
+ button.addEventListener('click', function() {
490
+ const domainExtension = this.getAttribute('data-domain');
491
+ const domainName = prompt(`Entrez le nom de votre domaine (avant ${domainExtension}):`, 'mon-site');
 
 
 
 
 
 
 
 
 
492
 
493
+ if (domainName) {
494
+ const fullDomain = domainName + domainExtension;
495
+ alert(`Félicitations! Vous avez réservé le domaine ${fullDomain} gratuitement pour 1 an.`);
496
+ successModal.classList.remove('hidden');
497
+ }
498
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
499
  });
500
 
501
  // Générateur de site web
 
557
  successModal.classList.remove('hidden');
558
  });
559
 
 
 
 
 
 
 
560
  // Boutons CTA
561
  const freeTrialBtn = document.getElementById('freeTrialBtn');
562
  const liveDemoBtn = document.getElementById('liveDemoBtn');
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  creer le plus puissant des armées d IA générateur de site seulement par description et visuel du site avec systeme enregistrement , dns , domain , ssl , serveur enregistrement dns le toutes le générateur de sites plus puissant avec ses 100000 d IA
2
  Features Pricing Templates Resources Login Sign Up Free ::: TOUTES LES BOUTON NE SONT PAS CLIQUABLE ET NE FONCTIONNE PAS
3
- les boutons générateur et les autres bouton sont pas cliquable et ne fonctionne pas
 
 
1
  creer le plus puissant des armées d IA générateur de site seulement par description et visuel du site avec systeme enregistrement , dns , domain , ssl , serveur enregistrement dns le toutes le générateur de sites plus puissant avec ses 100000 d IA
2
  Features Pricing Templates Resources Login Sign Up Free ::: TOUTES LES BOUTON NE SONT PAS CLIQUABLE ET NE FONCTIONNE PAS
3
+ les boutons générateur et les autres bouton sont pas cliquable et ne fonctionne pas
4
+ je veux domane gratuite