Add 2 files

index.html

@@ -137,23 +137,23 @@
                     </div>
                     <div class="hidden md:block">
                         <div class="ml-10 flex items-baseline space-x-4">
-                            <a href="#" class="text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
-                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Fonctionnalités</a>
-                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Exemples</a>
-                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tarifs</a>
-                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
+                            <a href="#" class="text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="hero">Accueil</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="features">Fonctionnalités</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="demo">Exemples</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="pricing">Tarifs</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="testimonials">Contact</a>
                         </div>
                     </div>
                 </div>
                 <div class="hidden md:block">
                     <div class="ml-4 flex items-center md:ml-6">
-                        <button class="gradient-bg hover:opacity-90 text-white px-6 py-2 rounded-full font-medium transition duration-300 transform hover:scale-105">
+                        <button class="gradient-bg hover:opacity-90 text-white px-6 py-2 rounded-full font-medium transition duration-300 transform hover:scale-105 free-trial-btn">
                             Essai gratuit
                         </button>
                     </div>
                 </div>
                 <div class="-mr-2 flex md:hidden">
-                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none mobile-menu-btn">
                         <span class="sr-only">Open main menu</span>
                         <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -162,10 +162,24 @@
                 </div>
             </div>
         </div>
+
+        <!-- Mobile menu -->
+        <div class="hidden mobile-menu">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-black bg-opacity-90">
+                <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="hero">Accueil</a>
+                <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="features">Fonctionnalités</a>
+                <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="demo">Exemples</a>
+                <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="pricing">Tarifs</a>
+                <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="testimonials">Contact</a>
+                <button class="gradient-bg hover:opacity-90 text-white px-6 py-2 rounded-full font-medium transition duration-300 transform hover:scale-105 w-full mt-4 free-trial-btn">
+                    Essai gratuit
+                </button>
+            </div>
+        </div>
     </nav>
 
     <!-- Hero Section -->
-    <section class="relative pt-32 pb-20 md:pt-40 md:pb-32">
+    <section class="relative pt-32 pb-20 md:pt-40 md:pb-32" id="hero">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="md:flex md:items-center md:justify-between">
                 <div class="md:w-1/2 mb-12 md:mb-0">
@@ -176,11 +190,11 @@
                         Notre intelligence artificielle construit pour vous un site complet de formation en ligne, avec gestion des élèves, paiements et contenu interactif.
                     </p>
                     <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                        <button class="gradient-bg hover:opacity-90 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 flex items-center justify-center">
+                        <button class="gradient-bg hover:opacity-90 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 flex items-center justify-center start-now-btn">
                             <span>Commencer maintenant</span>
                             <i class="fas fa-arrow-right ml-3"></i>
                         </button>
-                        <button class="bg-transparent border-2 border-purple-500 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 hover:bg-purple-900 hover:bg-opacity-30 flex items-center justify-center">
+                        <button class="bg-transparent border-2 border-purple-500 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 hover:bg-purple-900 hover:bg-opacity-30 flex items-center justify-center demo-btn">
                             <i class="fas fa-play-circle mr-3 text-xl"></i>
                             <span>Voir la démo</span>
                         </button>
@@ -276,7 +290,7 @@
     </section>
 
     <!-- Features Section -->
-    <section class="py-20 relative">
+    <section class="py-20 relative" id="features">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-20">
                 <h2 class="text-3xl md:text-5xl font-bold mb-6 font-futuristic">
@@ -297,7 +311,7 @@
                     <p class="text-gray-300 mb-4">
                         Notre IA crée votre site en quelques minutes avec une structure optimisée pour l'apprentissage en ligne.
                     </p>
-                    <div class="flex items-center text-purple-300 font-medium">
+                    <div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="1">
                         <span>En savoir plus</span>
                         <i class="fas fa-arrow-right ml-2"></i>
                     </div>
@@ -312,7 +326,7 @@
                     <p class="text-gray-300 mb-4">
                         Gérez facilement vos élèves, cours, paiements et statistiques depuis une interface intuitive.
                     </p>
-                    <div class="flex items-center text-purple-300 font-medium">
+                    <div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="2">
                         <span>En savoir plus</span>
                         <i class="fas fa-arrow-right ml-2"></i>
                     </div>
@@ -327,7 +341,7 @@
                     <p class="text-gray-300 mb-4">
                         Intégration native avec Stripe et PayPal pour vendre vos cours et abonnements en toute sécurité.
                     </p>
-                    <div class="flex items-center text-purple-300 font-medium">
+                    <div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="3">
                         <span>En savoir plus</span>
                         <i class="fas fa-arrow-right ml-2"></i>
                     </div>
@@ -342,7 +356,7 @@
                     <p class="text-gray-300 mb-4">
                         Stream optimisé pour vos vidéos de cours avec lecteur personnalisable et suivi de progression.
                     </p>
-                    <div class="flex items-center text-purple-300 font-medium">
+                    <div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="4">
                         <span>En savoir plus</span>
                         <i class="fas fa-arrow-right ml-2"></i>
                     </div>
@@ -357,7 +371,7 @@
                     <p class="text-gray-300 mb-4">
                         Votre site s'adapte parfaitement à tous les appareils : mobile, tablette et ordinateur.
                     </p>
-                    <div class="flex items-center text-purple-300 font-medium">
+                    <div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="5">
                         <span>En savoir plus</span>
                         <i class="fas fa-arrow-right ml-2"></i>
                     </div>
@@ -372,7 +386,7 @@
                     <p class="text-gray-300 mb-4">
                         Suivez les performances de vos cours et le comportement de vos élèves avec des rapports détaillés.
                     </p>
-                    <div class="flex items-center text-purple-300 font-medium">
+                    <div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="6">
                         <span>En savoir plus</span>
                         <i class="fas fa-arrow-right ml-2"></i>
                     </div>
@@ -385,7 +399,7 @@
     </section>
 
     <!-- Demo Section -->
-    <section class="py-20 relative overflow-hidden">
+    <section class="py-20 relative overflow-hidden" id="demo">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex flex-col lg:flex-row items-center">
                 <div class="lg:w-1/2 mb-12 lg:mb-0 relative">
@@ -425,11 +439,11 @@
                                         </div>
                                     </div>
                                     <div class="flex justify-between">
-                                        <button class="flex items-center text-gray-300 hover:text-white">
+                                        <button class="flex items-center text-gray-300 hover:text-white prev-lesson-btn">
                                             <i class="fas fa-step-backward mr-2"></i>
                                             <span>Précédent</span>
                                         </button>
-                                        <button class="gradient-bg text-white px-6 py-2 rounded-full font-medium">
+                                        <button class="gradient-bg text-white px-6 py-2 rounded-full font-medium next-lesson-btn">
                                             Suivant
                                         </button>
                                     </div>
@@ -497,7 +511,7 @@
     </section>
 
     <!-- Pricing Section -->
-    <section class="py-20 relative">
+    <section class="py-20 relative" id="pricing">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-20">
                 <h2 class="text-3xl md:text-5xl font-bold mb-6 font-futuristic">
@@ -543,7 +557,7 @@
                             <span class="text-gray-300">Intégrations premium</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-transparent border-2 border-purple-500 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-900 hover:bg-opacity-30 transition duration-300">
+                    <button class="w-full bg-transparent border-2 border-purple-500 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-900 hover:bg-opacity-30 transition duration-300 select-plan-btn" data-plan="starter">
                         Choisir ce plan
                     </button>
                 </div>
@@ -585,7 +599,7 @@
                             <span class="text-gray-300">Intégrations premium</span>
                         </li>
                     </ul>
-                    <button class="w-full gradient-bg text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition duration-300">
+                    <button class="w-full gradient-bg text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition duration-300 select-plan-btn" data-plan="pro">
                         Choisir ce plan
                     </button>
                 </div>
@@ -624,7 +638,7 @@
                             <span class="text-gray-300">API complète</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-transparent border-2 border-purple-500 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-900 hover:bg-opacity-30 transition duration-300">
+                    <button class="w-full bg-transparent border-2 border-purple-500 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-900 hover:bg-opacity-30 transition duration-300 select-plan-btn" data-plan="enterprise">
                         Choisir ce plan
                     </button>
                 </div>
@@ -632,14 +646,14 @@
             
             <div class="text-center mt-12">
                 <p class="text-gray-300">
-                    Vous avez des besoins spécifiques ? <a href="#" class="text-purple-300 hover:text-white font-medium">Contactez notre équipe</a> pour une solution sur mesure.
+                    Vous avez des besoins spécifiques ? <a href="#" class="text-purple-300 hover:text-white font-medium contact-btn">Contactez notre équipe</a> pour une solution sur mesure.
                 </p>
             </div>
         </div>
     </section>
 
     <!-- Testimonials -->
-    <section class="py-20 relative">
+    <section class="py-20 relative" id="testimonials">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-20">
                 <h2 class="text-3xl md:text-5xl font-bold mb-6 font-futuristic">
@@ -739,10 +753,10 @@
                             Essayez EduGen gratuitement pendant 14 jours. Aucune carte de crédit requise.
                         </p>
                         <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
-                            <button class="gradient-bg hover:opacity-90 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105">
+                            <button class="gradient-bg hover:opacity-90 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 free-trial-btn">
                                 Commencer l'essai gratuit
                             </button>
-                            <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 hover:bg-white hover:bg-opacity-10">
+                            <button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 hover:bg-white hover:bg-opacity-10 demo-btn">
                                 Voir une démo
                             </button>
                         </div>
@@ -767,16 +781,16 @@
                         La plateforme intelligente pour créer et gérer vos sites de formation en ligne automatiquement.
                     </p>
                     <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white">
+                        <a href="#" class="text-gray-400 hover:text-white social-link" data-social="facebook">
                             <i class="fab fa-facebook-f"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white">
+                        <a href="#" class="text-gray-400 hover:text-white social-link" data-social="twitter">
                             <i class="fab fa-twitter"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white">
+                        <a href="#" class="text-gray-400 hover:text-white social-link" data-social="linkedin">
                             <i class="fab fa-linkedin-in"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-white">
+                        <a href="#" class="text-gray-400 hover:text-white social-link" data-social="instagram">
                             <i class="fab fa-instagram"></i>
                         </a>
                     </div>
@@ -784,28 +798,28 @@
                 <div>
                     <h4 class="text-lg font-bold text-white 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="#" class="text-gray-400 hover:text-white">Intégrations</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="features">Fonctionnalités</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="pricing">Tarifs</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="demo">Exemples</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="integrations">Intégrations</a></li>
                     </ul>
                 </div>
                 <div>
                     <h4 class="text-lg font-bold text-white mb-4">Ressources</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="docs">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="blog">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="tutorials">Tutoriels</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="faq">FAQ</a></li>
                     </ul>
                 </div>
                 <div>
                     <h4 class="text-lg font-bold text-white mb-4">Entreprise</h4>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="about">À propos</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="careers">Carrières</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="contact">Contact</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="press">Presse</a></li>
                     </ul>
                 </div>
             </div>
@@ -815,9 +829,9 @@
                         © 2023 EduGen. Tous droits réservés.
                     </p>
                     <div class="flex space-x-6">
-                        <a href="#" class="text-gray-400 hover:text-white">Mentions légales</a>
-                        <a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a>
-                        <a href="#" class="text-gray-400 hover:text-white">CGU</a>
+                        <a href="#" class="text-gray-400 hover:text-white footer-link" data-link="legal">Mentions légales</a>
+                        <a href="#" class="text-gray-400 hover:text-white footer-link" data-link="privacy">Politique de confidentialité</a>
+                        <a href="#" class="text-gray-400 hover:text-white footer-link" data-link="terms">CGU</a>
                     </div>
                 </div>
             </div>
@@ -825,14 +839,26 @@
     </footer>
 
     <!-- Floating Elements -->
-    <div class="fixed bottom-10 right-10 w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-2xl cursor-pointer hover:scale-110 transition-transform duration-300 pulse-animation">
+    <div class="fixed bottom-10 right-10 w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-2xl cursor-pointer hover:scale-110 transition-transform duration-300 pulse-animation chat-btn">
         <i class="fas fa-comment-dots"></i>
     </div>
     
-    <div class="fixed top-1/4 left-10 w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white text-xl cursor-pointer hover:scale-110 transition-transform duration-300 floating">
+    <div class="fixed top-1/4 left-10 w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white text-xl cursor-pointer hover:scale-110 transition-transform duration-300 floating help-btn">
         <i class="fas fa-question"></i>
     </div>
-    
+
+    <!-- Modal -->
+    <div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden modal">
+        <div class="bg-gray-900 rounded-2xl max-w-md w-full p-6 relative card-glass">
+            <button class="absolute top-4 right-4 text-gray-400 hover:text-white close-modal">
+                <i class="fas fa-times text-xl"></i>
+            </button>
+            <div class="modal-content">
+                <!-- Content will be inserted here by JavaScript -->
+            </div>
+        </div>
+    </div>
+
     <script>
         // Simple animations
         document.addEventListener('DOMContentLoaded', function() {
@@ -872,6 +898,210 @@
                     typewriterElement.style.borderRight = 'none';
                 }, 3500);
             }
+
+            // Mobile menu toggle
+            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+            const mobileMenu = document.querySelector('.mobile-menu');
+            
+            mobileMenuBtn.addEventListener('click', function() {
+                mobileMenu.classList.toggle('hidden');
+            });
+
+            // Modal functionality
+            const modal = document.querySelector('.modal');
+            const closeModalBtn = document.querySelector('.close-modal');
+            const modalContent = document.querySelector('.modal-content');
+
+            function openModal(title, content) {
+                modalContent.innerHTML = `
+                    <h3 class="text-2xl font-bold mb-4 gradient-text">${title}</h3>
+                    <div class="text-gray-300 mb-6">${content}</div>
+                    <button class="gradient-bg hover:opacity-90 text-white px-6 py-2 rounded-full font-medium w-full close-modal">
+                        Fermer
+                    </button>
+                `;
+                modal.classList.remove('hidden');
+                document.body.style.overflow = 'hidden';
+                
+                // Re-add event listeners for new close buttons
+                document.querySelectorAll('.close-modal').forEach(btn => {
+                    btn.addEventListener('click', closeModal);
+                });
+            }
+
+            function closeModal() {
+                modal.classList.add('hidden');
+                document.body.style.overflow = '';
+            }
+
+            closeModalBtn.addEventListener('click', closeModal);
+
+            // Close modal when clicking outside
+            modal.addEventListener('click', function(e) {
+                if(e.target === modal) {
+                    closeModal();
+                }
+            });
+
+            // Button functionalities
+            // Free trial buttons
+            document.querySelectorAll('.free-trial-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    openModal(
+                        'Essai gratuit', 
+                        'Votre essai gratuit de 14 jours commence maintenant ! Un compte va être créé pour vous. Remplissez le formulaire suivant pour continuer.'
+                    );
+                });
+            });
+
+            // Demo buttons
+            document.querySelectorAll('.demo-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    openModal(
+                        'Démonstration', 
+                        'Voici une démonstration de notre plateforme en action. Vous pouvez explorer toutes les fonctionnalités dans cet environnement de démonstration.'
+                    );
+                });
+            });
+
+            // Start now button
+            document.querySelector('.start-now-btn').addEventListener('click', function() {
+                openModal(
+                    'Commencer maintenant', 
+                    'Prêt à créer votre plateforme de cours ? Choisissez un nom de domaine et commencez à personnaliser votre site dès maintenant.'
+                );
+            });
+
+            // Feature more buttons
+            document.querySelectorAll('.feature-more-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const featureNum = this.getAttribute('data-feature');
+                    const featureTitles = [
+                        '',
+                        'Génération automatique',
+                        'Tableau de bord complet',
+                        'Système de paiement',
+                        'Hébergement vidéo',
+                        'Design responsive',
+                        'Analytiques avancées'
+                    ];
+                    const featureContents = [
+                        '',
+                        'Notre IA analyse votre contenu et crée une structure optimisée pour l\'apprentissage en ligne, avec navigation intuitive et parcours pédagogique personnalisé.',
+                        'Accédez à toutes les données importantes en un clin d\'œil : progression des élèves, revenus, taux de complétion des cours et bien plus encore.',
+                        'Intégration transparente avec Stripe, PayPal et autres processeurs de paiement. Gérez les abonnements, les remboursements et les promotions directement depuis votre tableau de bord.',
+                        'Hébergez vos vidéos en toute sécurité avec lecture adaptative en fonction de la connexion internet. Suivi précis du temps passé sur chaque vidéo par vos élèves.',
+                        'Votre site s\'affichera parfaitement sur tous les appareils, avec une interface adaptée à chaque taille d\'écran pour une expérience utilisateur optimale.',
+                        'Découvrez des insights détaillés sur le comportement de vos élèves : quels cours sont les plus populaires, où les élèves abandonnent, quels sujets nécessitent plus d\'explications.'
+                    ];
+                    
+                    openModal(
+                        featureTitles[featureNum], 
+                        featureContents[featureNum]
+                    );
+                });
+            });
+
+            // Select plan buttons
+            document.querySelectorAll('.select-plan-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const plan = this.getAttribute('data-plan');
+                    const planNames = {
+                        'starter': 'Starter',
+                        'pro': 'Pro',
+                        'enterprise': 'Enterprise'
+                    };
+                    
+                    openModal(
+                        `Plan ${planNames[plan]} sélectionné`, 
+                        `Vous avez choisi le plan ${planNames[plan]}. Vous allez être redirigé vers notre formulaire sécurisé pour finaliser votre abonnement.`
+                    );
+                });
+            });
+
+            // Contact button
+            document.querySelector('.contact-btn').addEventListener('click', function(e) {
+                e.preventDefault();
+                openModal(
+                    'Contactez notre équipe', 
+                    'Notre équipe est disponible pour répondre à toutes vos questions. Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.'
+                );
+            });
+
+            // Lesson navigation buttons
+            document.querySelector('.prev-lesson-btn').addEventListener('click', function() {
+                openModal(
+                    'Leçon précédente', 
+                    'Navigation vers la leçon précédente. Votre progression sera automatiquement sauvegardée.'
+                );
+            });
+
+            document.querySelector('.next-lesson-btn').addEventListener('click', function() {
+                openModal(
+                    'Leçon suivante', 
+                    'Navigation vers la leçon suivante. Votre progression sera automatiquement sauvegardée.'
+                );
+            });
+
+            // Chat button
+            document.querySelector('.chat-btn').addEventListener('click', function() {
+                openModal(
+                    'Support en direct', 
+                    'Connectez-vous avec un membre de notre équipe de support en temps réel. Nous sommes disponibles 24/7 pour répondre à vos questions.'
+                );
+            });
+
+            // Help button
+            document.querySelector('.help-btn').addEventListener('click', function() {
+                openModal(
+                    'Centre d\'aide', 
+                    'Parcourez notre centre d\'aide pour trouver des réponses à vos questions ou contactez notre équipe de support.'
+                );
+            });
+
+            // Navigation links
+            document.querySelectorAll('.nav-link').forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const sectionId = this.getAttribute('data-section');
+                    const section = document.getElementById(sectionId);
+                    
+                    if(section) {
+                        // Close mobile menu if open
+                        mobileMenu.classList.add('hidden');
+                        
+                        // Scroll to section
+                        window.scrollTo({
+                            top: section.offsetTop - 80,
+                            behavior: 'smooth'
+                        });
+                    }
+                });
+            });
+
+            // Footer links
+            document.querySelectorAll('.footer-link').forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const linkType = this.getAttribute('data-link');
+                    openModal(
+                        'Information', 
+                        `Vous serez redirigé vers la page ${linkType}. Cette fonctionnalité est en cours de développement.`
+                    );
+                });
+            });
+
+            // Social links
+            document.querySelectorAll('.social-link').forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const social = this.getAttribute('data-social');
+                    openModal(
+                        'Réseaux sociaux', 
+                        `Vous serez redirigé vers notre page ${social}. Cette fonctionnalité est en cours de développement.`
+                    );
+                });
+            });
         });
     </script>
 <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/edugen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -1 +1,2 @@
-CREER LE PLUS GROS PLATE FORME DE SITE DE GENERATEUR DES SITE DE COURS COMPLET EN LIGNE EN AUTOMATIQUE  AVEC TRES BELLE INTERFACE FUTIRISTE ET TRES ANIME
+CREER LE PLUS GROS PLATE FORME DE SITE DE GENERATEUR DES SITE DE COURS COMPLET EN LIGNE EN AUTOMATIQUE  AVEC TRES BELLE INTERFACE FUTIRISTE ET TRES ANIME
+AUCUN BOUTON FONCTIONNE ACTIVER LES BOUTON AUTOMATIQUE