Add 2 files

index.html

@@ -89,7 +89,7 @@
                     <a href="#examples" class="hover:text-gray-200">Exemples</a>
                     <a href="#pricing" class="hover:text-gray-200">Tarifs</a>
                 </div>
-                <button class="md:hidden text-xl">
+                <button class="md:hidden text-xl" id="mobile-menu-btn">
                     <i class="fas fa-bars"></i>
                 </button>
             </nav>
@@ -98,10 +98,10 @@
                 <h1 class="text-4xl md:text-6xl font-bold mb-6">Créez n'importe quel type <br>de site web en minutes</h1>
                 <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">L'IA la plus avancée pour générer des sites web professionnels adaptés à tous vos besoins</p>
                 <div class="flex justify-center space-x-4">
-                    <button class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg">
+                    <button id="try-free-btn" class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg">
                         Essayer gratuitement
                     </button>
-                    <button class="border border-white text-white font-bold px-8 py-4 rounded-full hover:bg-white hover:text-blue-600 transition duration-300">
+                    <button id="see-examples-btn" class="border border-white text-white font-bold px-8 py-4 rounded-full hover:bg-white hover:text-blue-600 transition duration-300">
                         Voir des exemples
                     </button>
                 </div>
@@ -272,7 +272,7 @@
             <div class="max-w-5xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
                 <!-- Tabs -->
                 <div class="flex border-b border-gray-200">
-                    <button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300" data-tab="standard">
+                    <button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300 tab-active" data-tab="standard">
                         <i class="fas fa-bolt mr-2"></i> Standard
                     </button>
                     <button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300" data-tab="advanced">
@@ -421,7 +421,7 @@
                         <button id="generate-btn" class="gradient-bg text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition duration-300 flex items-center justify-center">
                             <i class="fas fa-magic mr-2"></i> Générer mon site
                         </button>
-                        <button class="border border-blue-600 text-blue-600 font-bold px-8 py-3 rounded-lg hover:bg-blue-50 transition duration-300">
+                        <button id="see-examples-btn-2" class="border border-blue-600 text-blue-600 font-bold px-8 py-3 rounded-lg hover:bg-blue-50 transition duration-300">
                             Voir des exemples
                         </button>
                     </div>
@@ -507,7 +507,7 @@
                         <p class="text-gray-600 mb-4">Site complet avec catalogue produits, panier et paiement sécurisé.</p>
                         <div class="flex justify-between items-center">
                             <span class="text-sm text-gray-500">Généré en 2min</span>
-                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="ecommerce">
                                 Voir le démo <i class="fas fa-arrow-right ml-1"></i>
                             </button>
                         </div>
@@ -527,7 +527,7 @@
                         <p class="text-gray-600 mb-4">Plateforme de blog avec système de commentaires et newsletter.</p>
                         <div class="flex justify-between items-center">
                             <span class="text-sm text-gray-500">Généré en 1min</span>
-                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="blog">
                                 Voir le démo <i class="fas fa-arrow-right ml-1"></i>
                             </button>
                         </div>
@@ -547,7 +547,7 @@
                         <p class="text-gray-600 mb-4">Galerie professionnelle pour montrer vos travaux et compétences.</p>
                         <div class="flex justify-between items-center">
                             <span class="text-sm text-gray-500">Généré en 1min</span>
-                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="portfolio">
                                 Voir le démo <i class="fas fa-arrow-right ml-1"></i>
                             </button>
                         </div>
@@ -567,7 +567,7 @@
                         <p class="text-gray-600 mb-4">Site pour votre logiciel avec espace client et documentation.</p>
                         <div class="flex justify-between items-center">
                             <span class="text-sm text-gray-500">Généré en 3min</span>
-                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="saas">
                                 Voir le démo <i class="fas fa-arrow-right ml-1"></i>
                             </button>
                         </div>
@@ -587,7 +587,7 @@
                         <p class="text-gray-600 mb-4">Réseau social avec profils, forums et messagerie privée.</p>
                         <div class="flex justify-between items-center">
                             <span class="text-sm text-gray-500">Généré en 4min</span>
-                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="community">
                                 Voir le démo <i class="fas fa-arrow-right ml-1"></i>
                             </button>
                         </div>
@@ -607,7 +607,7 @@
                         <p class="text-gray-600 mb-4">Site pour conférence avec billetterie, programme et sponsors.</p>
                         <div class="flex justify-between items-center">
                             <span class="text-sm text-gray-500">Généré en 2min</span>
-                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium demo-btn" data-type="event">
                                 Voir le démo <i class="fas fa-arrow-right ml-1"></i>
                             </button>
                         </div>
@@ -616,7 +616,7 @@
             </div>
 
             <div class="text-center mt-16">
-                <button class="gradient-bg text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition duration-300 inline-flex items-center">
+                <button id="see-more-examples-btn" class="gradient-bg text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition duration-300 inline-flex items-center">
                     <i class="fas fa-eye mr-2"></i> Voir plus d'exemples
                 </button>
             </div>
@@ -665,7 +665,7 @@
                                 <span>Pas de nom de domaine</span>
                             </li>
                         </ul>
-                        <button class="w-full border border-blue-600 text-blue-600 font-bold py-3 rounded-lg hover:bg-blue-50 transition duration-300">
+                        <button id="free-plan-btn" class="w-full border border-blue-600 text-blue-600 font-bold py-3 rounded-lg hover:bg-blue-50 transition duration-300">
                             Commencer gratuitement
                         </button>
                     </div>
@@ -707,7 +707,7 @@
                                 <span>Support prioritaire</span>
                             </li>
                         </ul>
-                        <button class="w-full gradient-bg text-white font-bold py-3 rounded-lg hover:opacity-90 transition duration-300">
+                        <button id="pro-plan-btn" class="w-full gradient-bg text-white font-bold py-3 rounded-lg hover:opacity-90 transition duration-300">
                             Choisir ce plan
                         </button>
                     </div>
@@ -746,7 +746,7 @@
                                 <span>Support 24/7</span>
                             </li>
                         </ul>
-                        <button class="w-full border border-blue-600 text-blue-600 font-bold py-3 rounded-lg hover:bg-blue-50 transition duration-300">
+                        <button id="business-plan-btn" class="w-full border border-blue-600 text-blue-600 font-bold py-3 rounded-lg hover:bg-blue-50 transition duration-300">
                             Choisir ce plan
                         </button>
                     </div>
@@ -764,7 +764,7 @@
         <div class="container mx-auto px-6 text-center">
             <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à créer votre site web?</h2>
             <p class="text-xl mb-10 max-w-2xl mx-auto">Essayez gratuitement WebGen AI et découvrez comment créer un site professionnel en quelques minutes.</p>
-            <button class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg">
+            <button id="cta-btn" class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg">
                 Commencer maintenant
             </button>
         </div>
@@ -784,9 +784,9 @@
                 <div>
                     <h4 class="text-lg font-semibold mb-4">Produit</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Tarifs</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Exemples</a></li>
+                        <li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
+                        <li><a href="#pricing" class="text-gray-400 hover:text-white">Tarifs</a></li>
+                        <li><a href="#examples" class="text-gray-400 hover:text-white">Exemples</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
                     </ul>
                 </div>
@@ -843,7 +843,7 @@
                     <div class="flex items-center justify-between mb-4">
                         <div class="flex space-x-2">
                             <div class="w-3 h-3 rounded-full bg-red-500"></div>
-                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                            <div class="w-3 h-3 rounded-full bg yellow-500"></div>
                             <div class="w-3 h-3 rounded-full bg-green-500"></div>
                         </div>
                         <div class="text-sm text-gray-500">www.votresite.com</div>
@@ -872,10 +872,10 @@
                     </div>
                 </div>
                 <div class="flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4">
-                    <button class="border border-gray-300 text-gray-700 font-medium px-6 py-2 rounded-lg hover:bg-gray-50">
+                    <button id="edit-design-btn" class="border border-gray-300 text-gray-700 font-medium px-6 py-2 rounded-lg hover:bg-gray-50">
                         Modifier le design
                     </button>
-                    <button class="gradient-bg text-white font-bold px-6 py-2 rounded-lg hover:opacity-90">
+                    <button id="publish-site-btn" class="gradient-bg text-white font-bold px-6 py-2 rounded-lg hover:opacity-90">
                         Publier mon site
                     </button>
                 </div>
@@ -905,12 +905,6 @@
                 });
             });
 
-            // Set first tab as active by default
-            if (tabBtns.length > 0) {
-                tabBtns[0].classList.add('tab-active');
-                tabContents[0].classList.remove('hidden');
-            }
-
             // Modal functionality
             const generateBtn = document.getElementById('generate-btn');
             const resultsModal = document.getElementById('results-modal');
@@ -961,6 +955,100 @@
                 `;
             });
 
+            // Button functionalities
+            const tryFreeBtn = document.getElementById('try-free-btn');
+            const seeExamplesBtn = document.getElementById('see-examples-btn');
+            const seeExamplesBtn2 = document.getElementById('see-examples-btn-2');
+            const seeMoreExamplesBtn = document.getElementById('see-more-examples-btn');
+            const freePlanBtn = document.getElementById('free-plan-btn');
+            const proPlanBtn = document.getElementById('pro-plan-btn');
+            const businessPlanBtn = document.getElementById('business-plan-btn');
+            const ctaBtn = document.getElementById('cta-btn');
+            const editDesignBtn = document.getElementById('edit-design-btn');
+            const publishSiteBtn = document.getElementById('publish-site-btn');
+            const demoBtns = document.querySelectorAll('.demo-btn');
+            const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+
+            // Scroll to section function
+            function scrollToSection(sectionId) {
+                const section = document.querySelector(sectionId);
+                if (section) {
+                    section.scrollIntoView({ behavior: 'smooth' });
+                }
+            }
+
+            // Button event listeners
+            tryFreeBtn.addEventListener('click', () => scrollToSection('#pricing'));
+            seeExamplesBtn.addEventListener('click', () => scrollToSection('#examples'));
+            seeExamplesBtn2.addEventListener('click', () => scrollToSection('#examples'));
+            seeMoreExamplesBtn.addEventListener('click', () => scrollToSection('#examples'));
+            freePlanBtn.addEventListener('click', () => {
+                scrollToSection('#generator');
+                setTimeout(() => {
+                    document.getElementById('generate-btn').click();
+                }, 500);
+            });
+            proPlanBtn.addEventListener('click', () => {
+                scrollToSection('#generator');
+                setTimeout(() => {
+                    document.getElementById('generate-btn').click();
+                }, 500);
+            });
+            businessPlanBtn.addEventListener('click', () => {
+                scrollToSection('#generator');
+                setTimeout(() => {
+                    document.getElementById('generate-btn').click();
+                }, 500);
+            });
+            ctaBtn.addEventListener('click', () => scrollToSection('#pricing'));
+            
+            editDesignBtn.addEventListener('click', () => {
+                document.querySelector('[data-tab="advanced"]').click();
+                resultsModal.classList.add('hidden');
+            });
+            
+            publishSiteBtn.addEventListener('click', () => {
+                alert('Votre site a été publié avec succès!');
+                resultsModal.classList.add('hidden');
+            });
+            
+            demoBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const type = this.getAttribute('data-type');
+                    resultsModal.classList.remove('hidden');
+                    
+                    setTimeout(() => {
+                        let siteContent = '';
+                        if (type === 'ecommerce') {
+                            siteContent = generateEcommerceSite();
+                        } else if (type === 'blog') {
+                            siteContent = generateBlogSite();
+                        } else if (type === 'portfolio') {
+                            siteContent = generatePortfolioSite();
+                        } else if (type === 'saas') {
+                            siteContent = generateSaasSite();
+                        } else if (type === 'community') {
+                            siteContent = generateCommunitySite();
+                        } else if (type === 'event') {
+                            siteContent = generateEventSite();
+                        }
+                        
+                        generatedSite.innerHTML = siteContent;
+                    }, 1000);
+                });
+            });
+            
+            mobileMenuBtn.addEventListener('click', function() {
+                const nav = document.querySelector('nav div.hidden.md\\:flex');
+                if (nav.classList.contains('hidden')) {
+                    nav.classList.remove('hidden');
+                    nav.classList.add('flex', 'flex-col', 'absolute', 'top-20', 'right-6', 'bg-white', 'p-4', 'rounded-lg', 'shadow-lg', 'z-50');
+                } else {
+                    nav.classList.add('hidden');
+                    nav.classList.remove('flex', 'flex-col', 'absolute', 'top-20', 'right-6', 'bg-white', 'p-4', 'rounded-lg', 'shadow-lg', 'z-50');
+                }
+            });
+
             // Site generation functions
             function generateEcommerceSite() {
                 return `
@@ -1144,69 +1232,5 @@
                                                 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Technologie</span>
                                                 <span class="text-gray-500 text-sm ml-4">15 mai 2023</span>
                                             </div>
-                                            <h2 class="text-2xl font-bold mb-4">L'avenir de l'IA dans notre quotidien</h2>
-                                            <p class="text-gray-600 mb-4">Comment l'intelligence artificielle transforme nos vies et ce à quoi nous pouvons nous attendre dans les prochaines années...</p>
-                                            <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">
-                                                Lire l'article <i class="fas fa-arrow-right ml-1"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    
-                                    <!-- Side Post -->
-                                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
-                                        <div class="h-32 bg-gradient-to-r from-blue-400 to-blue-500 flex items-center justify-center">
-                                            <i class="fas fa-leaf text-white text-4xl"></i>
-                                        </div>
-                                        <div class="p-6">
-                                            <div class="flex items-center mb-2">
-                                                <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Environnement</span>
-                                            </div>
-                                            <h2 class="text-xl font-bold mb-2">10 façons de réduire son empreinte carbone</h2>
-                                            <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
-                                                Lire l'article <i class="fas fa-arrow-right ml-1"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <!-- Recent Posts -->
-                                <h2 class="text-3xl font-bold mb-8">Articles récents</h2>
-                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                                    <!-- Post 1 -->
-                                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
-                                        <div class="h-40 bg-gradient-to-r from-green-400 to-green-500 flex items-center justify-center">
-                                            <i class="fas fa-utensils text-white text-4xl"></i>
-                                        </div>
-                                        <div class="p-4">
-                                            <div class="flex items-center mb-2">
-                                                <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Cuisine</span>
-                                            </div>
-                                            <h3 class="text-lg font-bold mb-2">Recettes végétariennes pour débutants</h3>
-                                            <p class="text-gray-600 text-sm mb-3">Découvrez comment préparer des plats délicieux et sains sans viande...</p>
-                                            <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
-                                                Lire l'article <i class="fas fa-arrow-right ml-1"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    
-                                    <!-- Post 2 -->
-                                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
-                                        <div class="h-40 bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
-                                            <i class="fas fa-plane text-white text-4xl"></i>
-                                        </div>
-                                        <div class="p-4">
-                                            <div class="flex items-center mb-2">
-                                                <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Voyage</span>
-                                            </div>
-                                            <h3 class="text-lg font-bold mb-2">Mes destinations coup de cœur en Asie</h3>
-                                            <p class="text-gray-600 text-sm mb-3">Retour sur les endroits les plus marquants de mon dernier périple...</p>
-                                            <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
-                                                Lire l'article <i class="fas fa-arrow-right ml-1"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    
-                                    <!-- Post 3 -->
-                                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
-                                        <div class
+                                            <h2 class="text-2xl font-bold mb-
 </html>

prompts.txt

@@ -1,2 +1,3 @@
 creer moi un site générateur de site identique a DeepSite ai avec une belle interface
-jje veux creer des vrait site pas de site vitrine
+jje veux creer des vrait site pas de site vitrine
+les bouton ne fonctionne pas