Hugging Face's logo

Spaces:
docto41
/
ai-website-builder-pro
Running

App Files Community
docto41 commited on
Commit
b5c6133
·
verified ·
1 Parent(s): 8f1e64b

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +76 -208
  2. prompts.txt +2 -1
index.html CHANGED
@@ -182,12 +182,36 @@
182
  linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
183
  background-size: 20px 20px;
184
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  </style>
186
  </head>
187
  <body class="h-screen flex overflow-hidden">
188
  <!-- Particles Background -->
189
  <div class="particles" id="particles"></div>
190
 
 
 
 
191
  <!-- AI Assistant Floating Button -->
192
  <div class="ai-assistant" id="aiAssistant">
193
  <i class="fas fa-robot text-white text-2xl"></i>
@@ -212,7 +236,7 @@
212
  <div class="mb-6">
213
  <h3 class="text-xs uppercase tracking-wider text-gray-500 mb-3">Mes Projets</h3>
214
  <div class="space-y-2">
215
- <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-blue-400">
216
  <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center mr-3">
217
  <i class="fas fa-shopping-cart text-purple-400"></i>
218
  </div>
@@ -222,7 +246,7 @@
222
  </div>
223
  <div class="ml-auto text-xs px-2 py-1 bg-gray-800 rounded text-green-400">1,248 LOC</div>
224
  </div>
225
- <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-green-400">
226
  <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center mr-3">
227
  <i class="fas fa-building text-blue-400"></i>
228
  </div>
@@ -232,7 +256,7 @@
232
  </div>
233
  <div class="ml-auto text-xs px-2 py-1 bg-gray-800 rounded text-blue-400">2,156 LOC</div>
234
  </div>
235
- <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-pink-400">
236
  <div class="w-8 h-8 rounded-full bg-pink-900 flex items-center justify-center mr-3">
237
  <i class="fas fa-user-tie text-pink-400"></i>
238
  </div>
@@ -304,7 +328,7 @@
304
  <div class="mb-6">
305
  <h3 class="text-xs uppercase tracking-wider text-gray-500 mb-3">Modèles Professionnels</h3>
306
  <div class="space-y-3">
307
- <div class="cyber-card p-0 overflow-hidden cursor-pointer template-card">
308
  <div class="h-24 bg-gradient-to-r from-purple-900 to-blue-900 flex items-center justify-center">
309
  <i class="fas fa-shopping-bag text-4xl text-white opacity-30"></i>
310
  </div>
@@ -316,7 +340,7 @@
316
  <div class="text-xs text-gray-400 mt-1">Panier, Paiement, Produits</div>
317
  </div>
318
  </div>
319
- <div class="cyber-card p-0 overflow-hidden cursor-pointer template-card">
320
  <div class="h-24 bg-gradient-to-r from-blue-900 to-green-900 flex items-center justify-center">
321
  <i class="fas fa-building text-4xl text-white opacity-30"></i>
322
  </div>
@@ -342,7 +366,7 @@
342
  <div class="text-sm font-medium">Compte Entreprise</div>
343
  <div class="text-xs text-gray-400">Version Premium</div>
344
  </div>
345
- <button class="ml-auto text-gray-400 hover:text-white">
346
  <i class="fas fa-cog"></i>
347
  </button>
348
  </div>
@@ -356,7 +380,7 @@
356
  <div class="flex items-center space-x-4">
357
  <div class="flex items-center space-x-2">
358
  <i class="fas fa-folder-open text-blue-400"></i>
359
- <span class="font-medium">Mon_Site_Pro</span>
360
  <span class="text-xs bg-gray-800 text-green-400 px-2 py-1 rounded ml-2">1,248 LOC</span>
361
  </div>
362
  <div class="flex space-x-1">
@@ -368,13 +392,13 @@
368
 
369
  <div class="flex items-center space-x-3">
370
  <div class="flex space-x-1 bg-gray-800 rounded-md p-1">
371
- <button class="px-3 py-1 rounded-md text-sm flex items-center text-gray-300 hover:bg-gray-700">
372
  <i class="fas fa-mobile-alt mr-2"></i>
373
  </button>
374
- <button class="px-3 py-1 rounded-md text-sm flex items-center text-gray-300 hover:bg-gray-700">
375
  <i class="fas fa-tablet-alt mr-2"></i>
376
  </button>
377
- <button class="px-3 py-1 bg-blue-900 text-blue-300 rounded-md text-sm flex items-center">
378
  <i class="fas fa-desktop mr-2"></i>
379
  </button>
380
  </div>
@@ -396,27 +420,27 @@
396
  <div class="w-1/2 border-r border-gray-800 flex flex-col">
397
  <div class="bg-gray-900 p-2 border-b border-gray-800 flex justify-between items-center">
398
  <div class="flex space-x-1">
399
- <button class="px-3 py-1 bg-blue-900 text-blue-300 rounded-md text-sm">HTML</button>
400
- <button class="px-3 py-1 bg-gray-800 text-gray-300 hover:bg-gray-700 rounded-md text-sm">CSS</button>
401
- <button class="px-3 py-1 bg-gray-800 text-gray-300 hover:bg-gray-700 rounded-md text-sm">JS</button>
402
  </div>
403
  <div class="flex space-x-2">
404
- <button class="p-1 text-gray-400 hover:text-white">
405
  <i class="fas fa-copy"></i>
406
  </button>
407
- <button class="p-1 text-gray-400 hover:text-white">
408
  <i class="fas fa-save"></i>
409
  </button>
410
- <button class="p-1 text-gray-400 hover:text-white">
411
  <i class="fas fa-expand"></i>
412
  </button>
413
- <button class="p-1 text-gray-400 hover:text-white">
414
  <i class="fas fa-magic"></i>
415
  </button>
416
  </div>
417
  </div>
418
  <div class="flex-1 overflow-auto bg-gray-900">
419
- <div class="code-editor p-4 font-mono text-sm text-gray-300">
420
  <div class="code-line" data-line="1"><span class="text-purple-400">&lt;!DOCTYPE html&gt;</span></div>
421
  <div class="code-line" data-line="2"><span class="text-purple-400">&lt;html</span> <span class="text-blue-400">lang=</span><span class="text-green-400">"fr"</span><span class="text-purple-400">&gt;</span></div>
422
  <div class="code-line" data-line="3"><span class="text-purple-400">&lt;head&gt;</span></div>
@@ -449,7 +473,7 @@
449
  <div class="code-line" data-line="30"> <span class="text-purple-400">&lt;/header&gt;</span></div>
450
  <div class="code-line" data-line="31"></div>
451
  <div class="code-line" data-line="32"> <span class="text-gray-500">&lt;!-- Hero Section --&gt;</span></div>
452
- <div class="code-line" data-line="33"> <span class="text-purple-400">&lt;section</span> <span class="text-blue-400">class=</span><span class="text-green-400">"bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-20"</span><span class="text-purple-400">&gt;</span></div>
453
  <div class="code-line" data-line="34"> <span class="text-purple-400">&lt;div</span> <span class="text-blue-400">class=</span><span class="text-green-400">"container mx-auto px-6 text-center"</span><span class="text-purple-400">&gt;</span></div>
454
  <div class="code-line" data-line="35"> <span class="text-purple-400">&lt;h1</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-4xl md:text-5xl font-bold mb-6"</span><span class="text-purple-400">&gt;</span><span class="text-gray-200">Créez votre présence en ligne professionnelle</span><span class="text-purple-400">&lt;/h1&gt;</span></div>
455
  <div class="code-line" data-line="36"> <span class="text-purple-400">&lt;p</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-xl mb-8 max-w-2xl mx-auto"</span><span class="text-purple-400">&gt;</span><span class="text-gray-200">Notre plateforme AI vous permet de concevoir des sites web haut de gamme avec des fonctionnalités avancées en quelques clics.</span><span class="text-purple-400">&lt;/p&gt;</span></div>
@@ -465,6 +489,35 @@
465
  <div class="code-line" data-line="46"><span class="text-purple-400">&lt;/html&gt;</span></div>
466
  <div class="code-line" data-line="47"><span class="typing-cursor"></span></div>
467
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
468
  </div>
469
  </div>
470
 
@@ -472,197 +525,12 @@
472
  <div class="w-1/2 flex flex-col">
473
  <div class="bg-gray-900 p-2 border-b border-gray-800 flex justify-between items-center">
474
  <div class="text-sm text-gray-400">
475
- Aperçu en direct - <span class="text-blue-400">Desktop</span>
476
  </div>
477
  <div class="flex space-x-2">
478
- <button class="p-1 text-gray-400 hover:text-white">
479
  <i class="fas fa-sync-alt"></i>
480
  </button>
481
- <button class="p-1 text-gray-400 hover:text-white">
482
- <i class="fas fa-expand"></i>
483
- </button>
484
- </div>
485
- </div>
486
- <div class="flex-1 bg-white overflow-auto p-4">
487
- <iframe id="previewFrame" class="w-full h-full border rounded-lg" srcdoc=""></iframe>
488
- </div>
489
- </div>
490
- </div>
491
- </div>
492
-
493
- <!-- AI Assistant Panel (hidden by default) -->
494
- <div id="aiPanel" class="fixed bottom-24 right-6 w-80 bg-gray-900 border border-gray-800 rounded-lg shadow-xl z-50 transform transition-all duration-300 opacity-0 scale-95 translate-y-10 invisible">
495
- <div class="p-4 border-b border-gray-800 flex justify-between items-center">
496
- <h3 class="font-medium text-blue-400">Assistant IA Professionnel</h3>
497
- <button id="closeAiPanel" class="text-gray-400 hover:text-white">
498
- <i class="fas fa-times"></i>
499
- </button>
500
- </div>
501
- <div class="p-4 max-h-96 overflow-y-auto">
502
- <div class="mb-4">
503
- <div class="text-xs uppercase tracking-wider text-gray-500 mb-2">Demandez à l'IA</div>
504
- <div class="space-y-2">
505
- <button class="w-full text-left px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded text-sm transition-colors">
506
- "Optimisez les performances de mon site"
507
- </button>
508
- <button class="w-full text-left px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded text-sm transition-colors">
509
- "Ajoutez une section e-commerce complète"
510
- </button>
511
- <button class="w-full text-left px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded text-sm transition-colors">
512
- "Générez un design responsive pour mobile"
513
- </button>
514
- <button class="w-full text-left px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded text-sm transition-colors">
515
- "Créez un système d'authentification sécurisé"
516
- </button>
517
- </div>
518
- </div>
519
- <div>
520
- <div class="text-xs uppercase tracking-wider text-gray-500 mb-2">Ou tapez votre demande</div>
521
- <div class="flex">
522
- <input type="text" placeholder="Comment puis-je vous aider ?" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg px-3 py-2 text-sm focus:outline-none focus:border-blue-500">
523
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg">
524
- <i class="fas fa-paper-plane"></i>
525
- </button>
526
- </div>
527
- </div>
528
- </div>
529
- <div class="p-3 border-t border-gray-800 text-xs text-gray-500">
530
- <i class="fas fa-bolt text-yellow-400 mr-1"></i> AI Pro - Version Entreprise - 25,110 assistants disponibles
531
- </div>
532
- </div>
533
-
534
- <script>
535
- // Create floating particles
536
- function createParticles() {
537
- const particlesContainer = document.getElementById('particles');
538
- const particleCount = 30;
539
-
540
- for (let i = 0; i < particleCount; i++) {
541
- const particle = document.createElement('div');
542
- particle.classList.add('particle');
543
-
544
- // Random size
545
- const size = Math.random() * 5 + 1;
546
- particle.style.width = `${size}px`;
547
- particle.style.height = `${size}px`;
548
-
549
- // Random position
550
- particle.style.left = `${Math.random() * 100}%`;
551
- particle.style.top = `${Math.random() * 100}%`;
552
-
553
- // Random animation duration
554
- const duration = Math.random() * 20 + 10;
555
- particle.style.animationDuration = `${duration}s`;
556
-
557
- // Random delay
558
- particle.style.animationDelay = `${Math.random() * 5}s`;
559
-
560
- particlesContainer.appendChild(particle);
561
- }
562
- }
563
-
564
- // AI Assistant Panel Toggle
565
- function toggleAIPanel() {
566
- const panel = document.getElementById('aiPanel');
567
- panel.classList.toggle('opacity-0');
568
- panel.classList.toggle('scale-95');
569
- panel.classList.toggle('translate-y-10');
570
- panel.classList.toggle('invisible');
571
- panel.classList.toggle('opacity-100');
572
- panel.classList.toggle('scale-100');
573
- panel.classList.toggle('translate-y-0');
574
- panel.classList.toggle('visible');
575
- }
576
-
577
- // Draggable components
578
- function setupDragAndDrop() {
579
- const draggables = document.querySelectorAll('.draggable-component');
580
- const editor = document.querySelector('.code-editor');
581
-
582
- draggables.forEach(draggable => {
583
- draggable.addEventListener('dragstart', () => {
584
- draggable.classList.add('drag-ghost');
585
- setTimeout(() => draggable.classList.add('invisible'), 0);
586
- });
587
-
588
- draggable.addEventListener('dragend', () => {
589
- draggable.classList.remove('drag-ghost');
590
- draggable.classList.remove('invisible');
591
- });
592
- });
593
-
594
- editor.addEventListener('dragover', e => {
595
- e.preventDefault();
596
- editor.classList.add('bg-gray-800');
597
- });
598
-
599
- editor.addEventListener('dragleave', () => {
600
- editor.classList.remove('bg-gray-800');
601
- });
602
-
603
- editor.addEventListener('drop', e => {
604
- e.preventDefault();
605
- editor.classList.remove('bg-gray-800');
606
-
607
- const type = document.querySelector('.draggable-component.drag-ghost').dataset.type;
608
- let codeSnippet = '';
609
-
610
- switch(type) {
611
- case 'header':
612
- codeSnippet = `\n <!-- Header -->\n <header class="bg-white shadow-sm">\n <div class="container mx-auto px-6 py-4">\n <div class="flex items-center justify-between">\n <div class="flex items-center">\n <a href="#" class="text-2xl font-bold text-blue-600">Logo</a>\n </div>\n <nav class="hidden md:flex space-x-8">\n <a href="#" class="text-gray-700 hover:text-blue-600">Accueil</a>\n <a href="#" class="text-gray-700 hover:text-blue-600">Services</a>\n <a href="#" class="text-gray-700 hover:text-blue-600">À propos</a>\n <a href="#" class="text-gray-700 hover:text-blue-600">Contact</a>\n </nav>\n <button class="md:hidden text-gray-700">\n <i class="fas fa-bars text-xl"></i>\n </button>\n </div>\n </div>\n </header>\n`;
613
- break;
614
- case 'hero':
615
- codeSnippet = `\n <!-- Hero Section -->\n <section class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-20">\n <div class="container mx-auto px-6 text-center">\n <h1 class="text-4xl md:text-5xl font-bold mb-6">Titre Principal</h1>\n <p class="text-xl mb-8 max-w-2xl mx-auto">Description de votre produit ou service en quelques mots puissants.</p>\n <div class="flex justify-center space-x-4">\n <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Action Principale</button>\n <button class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition duration-300">Action Secondaire</button>\n </div>\n </div>\n </section>\n`;
616
- break;
617
- case 'features':
618
- codeSnippet = `\n <!-- Features Section -->\n <section class="py-20 bg-white">\n <div class="container mx-auto px-6">\n <h2 class="text-3xl font-bold text-center mb-16">Nos Fonctionnalités</h2>\n <div class="grid md:grid-cols-3 gap-12">\n <div class="text-center">\n <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">\n <i class="fas fa-bolt text-blue-600 text-2xl"></i>\n </div>\n <h3 class="text-xl font-semibold mb-2">Fonctionnalité 1</h3>\n <p class="text-gray-600">Description de la première fonctionnalité impressionnante.</p>\n </div>\n <div class="text-center">\n <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">\n <i class="fas fa-cog text-blue-600 text-2xl"></i>\n </div>\n <h3 class="text-xl font-semibold mb-2">Fonctionnalité 2</h3>\n <p class="text-gray-600">Description de la deuxième fonctionnalité impressionnante.</p>\n </div>\n <div class="text-center">\n <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">\n <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>\n </div>\n <h3 class="text-xl font-semibold mb-2">Fonctionnalité 3</h3>\n <p class="text-gray-600">Description de la troisième fonctionnalité impressionnante.</p>\n </div>\n </div>\n </div>\n </section>\n`;
619
- break;
620
- }
621
-
622
- // In a real app, we would insert this into the code editor
623
- console.log(`Adding ${type} component:\n${codeSnippet}`);
624
- });
625
- }
626
-
627
- // Initialize
628
- document.addEventListener('DOMContentLoaded', () => {
629
- createParticles();
630
- setupDragAndDrop();
631
-
632
- // AI Assistant button
633
- document.getElementById('aiAssistant').addEventListener('click', toggleAIPanel);
634
- document.getElementById('closeAiPanel').addEventListener('click', toggleAIPanel);
635
-
636
- // Template cards animation
637
- const templateCards = document.querySelectorAll('.template-card');
638
- templateCards.forEach(card => {
639
- card.addEventListener('mouseenter', () => {
640
- const icon = card.querySelector('i');
641
- icon.classList.remove('opacity-30');
642
- icon.classList.add('opacity-70');
643
- icon.classList.add('animate-pulse');
644
- });
645
-
646
- card.addEventListener('mouseleave', () => {
647
- const icon = card.querySelector('i');
648
- icon.classList.add('opacity-30');
649
- icon.classList.remove('opacity-70');
650
- icon.classList.remove('animate-pulse');
651
- });
652
- });
653
-
654
- // Update preview frame with code
655
- const updatePreview = () => {
656
- const code = document.querySelector('.code-editor').textContent;
657
- document.getElementById('previewFrame').srcdoc = code;
658
- };
659
-
660
- // Update preview on button click
661
- document.getElementById('previewBtn').addEventListener('click', updatePreview);
662
-
663
- // Initial preview update
664
- updatePreview();
665
- });
666
- </script>
667
- <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/ai-website-builder-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
668
  </html>
 
182
  linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
183
  background-size: 20px 20px;
184
  }
185
+
186
+ /* Ajout pour les notifications */
187
+ .notification {
188
+ position: fixed;
189
+ bottom: 6rem;
190
+ right: 2rem;
191
+ background: rgba(30, 41, 59, 0.9);
192
+ border: 1px solid var(--accent);
193
+ padding: 1rem;
194
+ border-radius: 0.5rem;
195
+ box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
196
+ transform: translateY(20px);
197
+ opacity: 0;
198
+ transition: all 0.3s ease;
199
+ z-index: 1000;
200
+ }
201
+
202
+ .notification.show {
203
+ transform: translateY(0);
204
+ opacity: 1;
205
+ }
206
  </style>
207
  </head>
208
  <body class="h-screen flex overflow-hidden">
209
  <!-- Particles Background -->
210
  <div class="particles" id="particles"></div>
211
 
212
+ <!-- Notification -->
213
+ <div class="notification hidden" id="notification"></div>
214
+
215
  <!-- AI Assistant Floating Button -->
216
  <div class="ai-assistant" id="aiAssistant">
217
  <i class="fas fa-robot text-white text-2xl"></i>
 
236
  <div class="mb-6">
237
  <h3 class="text-xs uppercase tracking-wider text-gray-500 mb-3">Mes Projets</h3>
238
  <div class="space-y-2">
239
+ <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-blue-400 project-item" data-project="ecommerce">
240
  <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center mr-3">
241
  <i class="fas fa-shopping-cart text-purple-400"></i>
242
  </div>
 
246
  </div>
247
  <div class="ml-auto text-xs px-2 py-1 bg-gray-800 rounded text-green-400">1,248 LOC</div>
248
  </div>
249
+ <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-green-400 project-item" data-project="corporate">
250
  <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center mr-3">
251
  <i class="fas fa-building text-blue-400"></i>
252
  </div>
 
256
  </div>
257
  <div class="ml-auto text-xs px-2 py-1 bg-gray-800 rounded text-blue-400">2,156 LOC</div>
258
  </div>
259
+ <div class="cyber-card p-3 rounded-lg cursor-pointer flex items-center hover:border-pink-400 project-item" data-project="portfolio">
260
  <div class="w-8 h-8 rounded-full bg-pink-900 flex items-center justify-center mr-3">
261
  <i class="fas fa-user-tie text-pink-400"></i>
262
  </div>
 
328
  <div class="mb-6">
329
  <h3 class="text-xs uppercase tracking-wider text-gray-500 mb-3">Modèles Professionnels</h3>
330
  <div class="space-y-3">
331
+ <div class="cyber-card p-0 overflow-hidden cursor-pointer template-card" data-template="ecommerce">
332
  <div class="h-24 bg-gradient-to-r from-purple-900 to-blue-900 flex items-center justify-center">
333
  <i class="fas fa-shopping-bag text-4xl text-white opacity-30"></i>
334
  </div>
 
340
  <div class="text-xs text-gray-400 mt-1">Panier, Paiement, Produits</div>
341
  </div>
342
  </div>
343
+ <div class="cyber-card p-0 overflow-hidden cursor-pointer template-card" data-template="corporate">
344
  <div class="h-24 bg-gradient-to-r from-blue-900 to-green-900 flex items-center justify-center">
345
  <i class="fas fa-building text-4xl text-white opacity-30"></i>
346
  </div>
 
366
  <div class="text-sm font-medium">Compte Entreprise</div>
367
  <div class="text-xs text-gray-400">Version Premium</div>
368
  </div>
369
+ <button id="settingsBtn" class="ml-auto text-gray-400 hover:text-white">
370
  <i class="fas fa-cog"></i>
371
  </button>
372
  </div>
 
380
  <div class="flex items-center space-x-4">
381
  <div class="flex items-center space-x-2">
382
  <i class="fas fa-folder-open text-blue-400"></i>
383
+ <span class="font-medium" id="currentProject">Mon_Site_Pro</span>
384
  <span class="text-xs bg-gray-800 text-green-400 px-2 py-1 rounded ml-2">1,248 LOC</span>
385
  </div>
386
  <div class="flex space-x-1">
 
392
 
393
  <div class="flex items-center space-x-3">
394
  <div class="flex space-x-1 bg-gray-800 rounded-md p-1">
395
+ <button class="px-3 py-1 rounded-md text-sm flex items-center text-gray-300 hover:bg-gray-700 view-mode" data-mode="mobile">
396
  <i class="fas fa-mobile-alt mr-2"></i>
397
  </button>
398
+ <button class="px-3 py-1 rounded-md text-sm flex items-center text-gray-300 hover:bg-gray-700 view-mode" data-mode="tablet">
399
  <i class="fas fa-tablet-alt mr-2"></i>
400
  </button>
401
+ <button class="px-3 py-1 bg-blue-900 text-blue-300 rounded-md text-sm flex items-center view-mode active" data-mode="desktop">
402
  <i class="fas fa-desktop mr-2"></i>
403
  </button>
404
  </div>
 
420
  <div class="w-1/2 border-r border-gray-800 flex flex-col">
421
  <div class="bg-gray-900 p-2 border-b border-gray-800 flex justify-between items-center">
422
  <div class="flex space-x-1">
423
+ <button class="px-3 py-1 bg-blue-900 text-blue-300 rounded-md text-sm editor-tab active" data-tab="html">HTML</button>
424
+ <button class="px-3 py-1 bg-gray-800 text-gray-300 hover:bg-gray-700 rounded-md text-sm editor-tab" data-tab="css">CSS</button>
425
+ <button class="px-3 py-1 bg-gray-800 text-gray-300 hover:bg-gray-700 rounded-md text-sm editor-tab" data-tab="js">JS</button>
426
  </div>
427
  <div class="flex space-x-2">
428
+ <button id="copyBtn" class="p-1 text-gray-400 hover:text-white">
429
  <i class="fas fa-copy"></i>
430
  </button>
431
+ <button id="saveBtn" class="p-1 text-gray-400 hover:text-white">
432
  <i class="fas fa-save"></i>
433
  </button>
434
+ <button id="expandBtn" class="p-1 text-gray-400 hover:text-white">
435
  <i class="fas fa-expand"></i>
436
  </button>
437
+ <button id="aiEnhanceBtn" class="p-1 text-gray-400 hover:text-white">
438
  <i class="fas fa-magic"></i>
439
  </button>
440
  </div>
441
  </div>
442
  <div class="flex-1 overflow-auto bg-gray-900">
443
+ <div class="code-editor p-4 font-mono text-sm text-gray-300" id="htmlEditor">
444
  <div class="code-line" data-line="1"><span class="text-purple-400">&lt;!DOCTYPE html&gt;</span></div>
445
  <div class="code-line" data-line="2"><span class="text-purple-400">&lt;html</span> <span class="text-blue-400">lang=</span><span class="text-green-400">"fr"</span><span class="text-purple-400">&gt;</span></div>
446
  <div class="code-line" data-line="3"><span class="text-purple-400">&lt;head&gt;</span></div>
 
473
  <div class="code-line" data-line="30"> <span class="text-purple-400">&lt;/header&gt;</span></div>
474
  <div class="code-line" data-line="31"></div>
475
  <div class="code-line" data-line="32"> <span class="text-gray-500">&lt;!-- Hero Section --&gt;</span></div>
476
+ <div class="code-line" data-line="33"> <span class="text-purple-400">&lt;section</span> <span class="text-blue-400">class=</span><span class="text-green-400">"bg-gradient-to-r from-blue-600 to-indigo-7 00 text-white py-20"</span><span class="text-purple-400">&gt;</span></div>
477
  <div class="code-line" data-line="34"> <span class="text-purple-400">&lt;div</span> <span class="text-blue-400">class=</span><span class="text-green-400">"container mx-auto px-6 text-center"</span><span class="text-purple-400">&gt;</span></div>
478
  <div class="code-line" data-line="35"> <span class="text-purple-400">&lt;h1</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-4xl md:text-5xl font-bold mb-6"</span><span class="text-purple-400">&gt;</span><span class="text-gray-200">Créez votre présence en ligne professionnelle</span><span class="text-purple-400">&lt;/h1&gt;</span></div>
479
  <div class="code-line" data-line="36"> <span class="text-purple-400">&lt;p</span> <span class="text-blue-400">class=</span><span class="text-green-400">"text-xl mb-8 max-w-2xl mx-auto"</span><span class="text-purple-400">&gt;</span><span class="text-gray-200">Notre plateforme AI vous permet de concevoir des sites web haut de gamme avec des fonctionnalités avancées en quelques clics.</span><span class="text-purple-400">&lt;/p&gt;</span></div>
 
489
  <div class="code-line" data-line="46"><span class="text-purple-400">&lt;/html&gt;</span></div>
490
  <div class="code-line" data-line="47"><span class="typing-cursor"></span></div>
491
  </div>
492
+
493
+ <!-- CSS Editor (hidden by default) -->
494
+ <div class="code-editor p-4 font-mono text-sm text-gray-300 hidden" id="cssEditor">
495
+ <div class="code-line" data-line="1"><span class="text-blue-400">body</span> <span class="text-purple-400">{</span></div>
496
+ <div class="code-line" data-line="2"> <span class="text-blue-400">font-family</span><span class="text-purple-400">:</span> <span class="text-green-400">'Roboto'</span><span class="text-purple-400">,</span> <span class="text-green-400">sans-serif</span><span class="text-purple-400">;</span></div>
497
+ <div class="code-line" data-line="3"> <span class="text-blue-400">background-color</span><span class="text-purple-400">:</span> <span class="text-green-400">#f8fafc</span><span class="text-purple-400">;</span></div>
498
+ <div class="code-line" data-line="4"> <span class="text-blue-400">color</span><span class="text-purple-400">:</span> <span class="text-green-400">#1e293b</span><span class="text-purple-400">;</span></div>
499
+ <div class="code-line" data-line="5"><span class="text-purple-400">}</span></div>
500
+ <div class="code-line" data-line="6"></div>
501
+ <div class="code-line" data-line="7"><span class="text-blue-400">.header</span> <span class="text-purple-400">{</span></div>
502
+ <div class="code-line" data-line="8"> <span class="text-blue-400">background-color</span><span class="text-purple-400">:</span> <span class="text-green-400">#ffffff</span><span class="text-purple-400">;</span></div>
503
+ <div class="code-line" data-line="9"> <span class="text-blue-400">box-shadow</span><span class="text-purple-400">:</span> <span class="text-green-400">0 1px 3px rgba(0,0,0,0.1)</span><span class="text-purple-400">;</span></div>
504
+ <div class="code-line" data-line="10"><span class="text-purple-400">}</span></div>
505
+ <div class="code-line" data-line="11"><span class="typing-cursor"></span></div>
506
+ </div>
507
+
508
+ <!-- JS Editor (hidden by default) -->
509
+ <div class="code-editor p-4 font-mono text-sm text-gray-300 hidden" id="jsEditor">
510
+ <div class="code-line" data-line="1"><span class="text-blue-400">document</span><span class="text-purple-400">.</span><span class="text-yellow-400">addEventListener</span><span class="text-purple-400">(</span><span class="text-green-400">'DOMContentLoaded'</span><span class="text-purple-400">,</span> <span class="text-blue-400">function</span><span class="text-purple-400">()</span> <span class="text-purple-400">{</span></div>
511
+ <div class="code-line" data-line="2"> <span class="text-gray-500">// Mobile menu toggle</span></div>
512
+ <div class="code-line" data-line="3"> <span class="text-blue-400">const</span> <span class="text-yellow-400">menuButton</span> <span class="text-purple-400">=</span> <span class="text-blue-400">document</span><span class="text-purple-400">.</span><span class="text-yellow-400">querySelector</span><span class="text-purple-400">(</span><span class="text-green-400">'.mobile-menu-button'</span><span class="text-purple-400">);</span></div>
513
+ <div class="code-line" data-line="4"> <span class="text-blue-400">const</span> <span class="text-yellow-400">menu</span> <span class="text-purple-400">=</span> <span class="text-blue-400">document</span><span class="text-purple-400">.</span><span class="text-yellow-400">querySelector</span><span class="text-purple-400">(</span><span class="text-green-400">'.mobile-menu'</span><span class="text-purple-400">);</span></div>
514
+ <div class="code-line" data-line="5"></div>
515
+ <div class="code-line" data-line="6"> <span class="text-yellow-400">menuButton</span><span class="text-purple-400">.</span><span class="text-yellow-400">addEventListener</span><span class="text-purple-400">(</span><span class="text-green-400">'click'</span><span class="text-purple-400">,</span> <span class="text-blue-400">function</span><span class="text-purple-400">()</span> <span class="text-purple-400">{</span></div>
516
+ <div class="code-line" data-line="7"> <span class="text-yellow-400">menu</span><span class="text-purple-400">.</span><span class="text-yellow-400">classList</span><span class="text-purple-400">.</span><span class="text-yellow-400">toggle</span><span class="text-purple-400">(</span><span class="text-green-400">'hidden'</span><span class="text-purple-400">);</span></div>
517
+ <div class="code-line" data-line="8"> <span class="text-purple-400">});</span></div>
518
+ <div class="code-line" data-line="9"><span class="text-purple-400">});</span></div>
519
+ <div class="code-line" data-line="10"><span class="typing-cursor"></span></div>
520
+ </div>
521
  </div>
522
  </div>
523
 
 
525
  <div class="w-1/2 flex flex-col">
526
  <div class="bg-gray-900 p-2 border-b border-gray-800 flex justify-between items-center">
527
  <div class="text-sm text-gray-400">
528
+ Aperçu en direct - <span class="text-blue-400" id="viewModeText">Desktop</span>
529
  </div>
530
  <div class="flex space-x-2">
531
+ <button id="refreshPreviewBtn" class="p-1 text-gray-400 hover:text-white">
532
  <i class="fas fa-sync-alt"></i>
533
  </button>
534
+ <button id="fullscreenPreviewBtn" class="p-1 text-gray-400 hover:text-white">
535
+ <i class="fas fa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
536
  </html>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  je veux un site puissant IA avec 25110 assitance IA tres puissant pour CREER DES SITES TRES PUISSANT avec visuel en automatique lord de la creation des site , je veux CREER DES SITRES TRES PROFFESIONNEL DE GROS SITE TRES IMPORTANT ET PROFESSIONNEL POUR VENDRE CAPABLES DE CREER DES SITE TRES PUISSANT PLUS DE 1000 LIGNE ????? ATENTION JE VEUX PAS DE SITE VITRINE JE VEUX CREER DES VRAIS SITE
2
- je veux une hyper interface animé
 
 
1
  je veux un site puissant IA avec 25110 assitance IA tres puissant pour CREER DES SITES TRES PUISSANT avec visuel en automatique lord de la creation des site , je veux CREER DES SITRES TRES PROFFESIONNEL DE GROS SITE TRES IMPORTANT ET PROFESSIONNEL POUR VENDRE CAPABLES DE CREER DES SITE TRES PUISSANT PLUS DE 1000 LIGNE ????? ATENTION JE VEUX PAS DE SITE VITRINE JE VEUX CREER DES VRAIS SITE
2
+ je veux une hyper interface animé
3
+ toutes les boutons ne sont pas cliquable et fonctionne pas corriger ses erreur de bouton