Spaces:

docto41
/

learn-hub

Running

App Files Files Community

docto41 commited on May 7

Commit

bea8718

verified ·

1 Parent(s): 3082c42

Add 2 files

Browse files

Files changed (2) hide show

index.html +481 -416
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -12,9 +12,16 @@
             0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-10px); }
         }
         .floating {
             animation: float 6s ease-in-out infinite;
         }
         .course-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
@@ -44,6 +51,13 @@
         .cart-item:hover {
             background-color: #f8fafc;
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -77,13 +91,13 @@
                                     <span>Total:</span>
                                     <span id="cart-total">0€</span>
                                 </div>
-                                <button id="checkout-btn" class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 disabled:opacity-50" disabled>
                                     Payer maintenant
                                 </button>
                             </div>
                         </div>
                     </div>
-                    <button id="auth-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
                         Se connecter
                     </button>
                 </div>
@@ -98,12 +112,12 @@
                 <a href="#courses" class="block py-2 text-gray-700 hover:text-indigo-600">Cours</a>
                 <a href="#features" class="block py-2 text-gray-700 hover:text-indigo-600">Fonctionnalités</a>
                 <a href="#pricing" class="block py-2 text-gray-700 hover:text-indigo-600">Tarifs</a>
-                <div class="flex items-center py-2 text-gray-700">
                     <i class="fas fa-shopping-cart mr-2"></i>
                     <span>Panier</span>
                     <span id="mobile-cart-count" class="ml-auto bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                 </div>
-                <button class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 mt-2">
                     Se connecter
                 </button>
             </div>
@@ -118,10 +132,10 @@
                     <h1 class="text-4xl md:text-5xl font-bold mb-4">Apprenez sans limites avec LearnHub</h1>
                     <p class="text-xl mb-8">Accédez à des milliers de cours en ligne dans tous les domaines, enseignés par des experts.</p>
                     <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                        <a href="#courses" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold text-center hover:bg-gray-100 transition">
                             Explorer les cours
                         </a>
-                        <a href="#pricing" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-bold text-center hover:bg-white hover:text-indigo-600 transition">
                             Voir les abonnements
                         </a>
                     </div>
@@ -169,200 +183,25 @@
     <!-- Courses Section -->
     <section id="courses" class="py-16 bg-gray-50">
         <div class="container mx-auto px-4">
-            <div class="flex justify-between items-center mb-12">
                 <h2 class="text-3xl font-bold">Nos Cours Populaires</h2>
-                <div class="flex space-x-2">
                     <button class="category-btn active px-4 py-2 rounded-full bg-indigo-600 text-white" data-category="all">Tous</button>
                     <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="tech">Technologie</button>
                     <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="business">Business</button>
                     <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="design">Design</button>
                 </div>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Course 1 -->
-                <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="tech">
-                    <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1551033406-611a8e0dcb14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Développement Web" class="w-full h-48 object-cover">
-                        <div class="absolute top-2 right-2 bg-indigo-600 text-white px-2 py-1 rounded text-xs font-bold">Nouveau</div>
-                    </div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Développement Web Full Stack</h3>
-                            <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Tech</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">Maîtrisez HTML, CSS, JavaScript, React, Node.js et MongoDB pour devenir développeur full stack.</p>
-                        <div class="flex items-center mb-4">
-                            <div class="flex -space-x-2">
-                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                            </div>
-                            <span class="text-sm text-gray-500 ml-2">Par Sarah & Marc</span>
-                        </div>
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <span class="text-2xl font-bold">49€</span>
-                                <span class="text-gray-500 line-through ml-2">99€</span>
-                            </div>
-                            <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="1" data-name="Développement Web Full Stack" data-price="49">
-                                Ajouter au panier
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Course 2 -->
-                <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="business">
-                    <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Marketing Digital" class="w-full h-48 object-cover">
-                    </div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Marketing Digital Complet</h3>
-                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Business</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">Apprenez les stratégies de marketing digital les plus efficaces pour booster votre business en ligne.</p>
-                        <div class="flex items-center mb-4">
-                            <div class="flex -space-x-2">
-                                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                            </div>
-                            <span class="text-sm text-gray-500 ml-2">Par Amélie</span>
-                        </div>
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <span class="text-2xl font-bold">39€</span>
-                                <span class="text-gray-500 line-through ml-2">79€</span>
-                            </div>
-                            <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="2" data-name="Marketing Digital Complet" data-price="39">
-                                Ajouter au panier
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Course 3 -->
-                <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="design">
-                    <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="UI/UX Design" class="w-full h-48 object-cover">
-                        <div class="absolute top-2 right-2 bg-red-600 text-white px-2 py-1 rounded text-xs font-bold">Populaire</div>
-                    </div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">UI/UX Design Masterclass</h3>
-                            <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Design</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">Devenez un designer d'interface et d'expérience utilisateur avec Figma, Adobe XD et plus encore.</p>
-                        <div class="flex items-center mb-4">
-                            <div class="flex -space-x-2">
-                                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                                <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                            </div>
-                            <span class="text-sm text-gray-500 ml-2">Par Thomas & Léa</span>
-                        </div>
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <span class="text-2xl font-bold">59€</span>
-                                <span class="text-gray-500 line-through ml-2">119€</span>
-                            </div>
-                            <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="3" data-name="UI/UX Design Masterclass" data-price="59">
-                                Ajouter au panier
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Course 4 -->
-                <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="tech">
-                    <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" alt="Data Science" class="w-full h-48 object-cover">
-                    </div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Data Science avec Python</h3>
-                            <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Tech</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">Apprenez à analyser des données et à créer des modèles prédictifs avec Python, Pandas et Scikit-learn.</p>
-                        <div class="flex items-center mb-4">
-                            <div class="flex -space-x-2">
-                                <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                            </div>
-                            <span class="text-sm text-gray-500 ml-2">Par Jean</span>
-                        </div>
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <span class="text-2xl font-bold">69€</span>
-                                <span class="text-gray-500 line-through ml-2">129€</span>
-                            </div>
-                            <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="4" data-name="Data Science avec Python" data-price="69">
-                                Ajouter au panier
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Course 5 -->
-                <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="business">
-                    <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Finance" class="w-full h-48 object-cover">
-                    </div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Finance pour Entrepreneurs</h3>
-                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Business</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">Maîtrisez les fondamentaux de la finance pour prendre les bonnes décisions pour votre entreprise.</p>
-                        <div class="flex items-center mb-4">
-                            <div class="flex -space-x-2">
-                                <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                                <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                            </div>
-                            <span class="text-sm text-gray-500 ml-2">Par Sophie & Pierre</span>
-                        </div>
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <span class="text-2xl font-bold">45€</span>
-                                <span class="text-gray-500 line-through ml-2">89€</span>
-                            </div>
-                            <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="5" data-name="Finance pour Entrepreneurs" data-price="45">
-                                Ajouter au panier
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Course 6 -->
-                <div class="course-card bg-white rounded-xl overflow-hidden shadow-md" data-category="design">
-                    <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Photographie" class="w-full h-48 object-cover">
-                    </div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Photographie Professionnelle</h3>
-                            <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Design</span>
-                        </div>
-                        <p class="text-gray-600 mb-4">Apprenez les techniques des photographes professionnels et maîtrisez la lumière, la composition et l'édition.</p>
-                        <div class="flex items-center mb-4">
-                            <div class="flex -space-x-2">
-                                <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Instructor" class="w-8 h-8 rounded-full border-2 border-white">
-                            </div>
-                            <span class="text-sm text-gray-500 ml-2">Par Nicolas</span>
-                        </div>
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <span class="text-2xl font-bold">35€</span>
-                                <span class="text-gray-500 line-through ml-2">75€</span>
-                            </div>
-                            <button class="add-to-cart-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" data-id="6" data-name="Photographie Professionnelle" data-price="35">
-                                Ajouter au panier
-                            </button>
-                        </div>
-                    </div>
-                </div>
             </div>
             <div class="text-center mt-12">
-                <button class="bg-white border-2 border-indigo-600 text-indigo-600 px-6 py-3 rounded-lg font-bold hover:bg-indigo-600 hover:text-white transition">
-                    Voir tous les cours (200+)
                 </button>
             </div>
         </div>
@@ -405,7 +244,7 @@
                             <span>Téléchargement des ressources</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-bold hover:bg-gray-300 transition">
                         S'inscrire gratuitement
                     </button>
                 </div>
@@ -441,7 +280,7 @@
                             <span>Nouveaux cours chaque semaine</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition">
                         Choisir Pro
                     </button>
                 </div>
@@ -476,7 +315,7 @@
                             <span>Support dédié</span>
                         </li>
                     </ul>
-                    <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-bold hover:bg-gray-300 transition">
                         Contacter les ventes
                     </button>
                 </div>
@@ -552,7 +391,7 @@
         <div class="container mx-auto px-4 text-center">
             <h2 class="text-3xl font-bold mb-4">Prêt à commencer votre voyage d'apprentissage?</h2>
             <p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez plus de 100,000 étudiants qui ont déjà transformé leur carrière avec nos cours.</p>
-            <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition">
                 Commencer maintenant - C'est gratuit
             </button>
         </div>
@@ -744,15 +583,15 @@
                     <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
                         <img src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" alt="Data Science" class="w-full h-24 object-cover rounded-md mb-2">
-                        <h4 class="font-bold text-sm">Data Science avec Python</h4>
-                        <p class="text-xs text-gray-600 mb-2">Par Jean</p>
                         <button class="w-full text-xs bg-indigo-600 text-white py-1 px-2 rounded hover:bg-indigo-700">Ajouter à ma liste</button>
                     </div>
                     <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
-                        <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Finance" class="w-full h-24 object-cover rounded-md mb-2">
-                        <h4 class="font-bold text-sm">Finance pour Entrepreneurs</h4>
-                        <p class="text-xs text-gray-600 mb-2">Par Sophie & Pierre</p>
                         <button class="w-full text-xs bg-indigo-600 text-white py-1 px-2 rounded hover:bg-indigo-700">Ajouter à ma liste</button>
                     </div>
                 </div>
@@ -762,44 +601,12 @@
             <div id="payments-tab" class="tab-content py-6">
                 <h3 class="text-xl font-bold mb-4">Historique des paiements</h3>
-                <div class="mb-8">
-                    <div class="flex justify-between items-center mb-4">
-                        <h4 class="font-medium">Méthodes de paiement</h4>
-                        <button class="text-sm text-indigo-600 hover:text-indigo-800">Ajouter une méthode</button>
-                    </div>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-                        <div class="border border-gray-200 rounded-lg p-4 flex items-center">
-                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/2560px-PayPal.svg.png" alt="PayPal" class="h-8 mr-4">
-                            <div>
-                                <p class="font-medium">PayPal</p>
-                                <p class="text-sm text-gray-600">marie.d@gmail.com</p>
-                            </div>
-                            <button class="ml-auto text-gray-400 hover:text-gray-700">
-                                <i class="fas fa-ellipsis-v"></i>
-                            </button>
-                        </div>
-                        <div class="border border-gray-200 rounded-lg p-4 flex items-center">
-                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Stripe_Logo%2C_revised_2016.svg/2560px-Stripe_Logo%2C_revised_2016.svg.png" alt="Stripe" class="h-8 mr-4">
-                            <div>
-                                <p class="font-medium">Carte Visa</p>
-                                <p class="text-sm text-gray-600">•••• •••• •••• 4242</p>
-                            </div>
-                            <button class="ml-auto text-gray-400 hover:text-gray-700">
-                                <i class="fas fa-ellipsis-v"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
                 <div class="overflow-x-auto">
                     <table class="min-w-full divide-y divide-gray-200">
                         <thead class="bg-gray-50">
                             <tr>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Méthode</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                             </tr>
@@ -808,42 +615,38 @@
                             <tr>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Pro</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PayPal</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19,00 €</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
-                                </td>
                             </tr>
                             <tr>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Pro</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PayPal</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19,00 €</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
-                                </td>
                             </tr>
                             <tr>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/04/2023</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Cours UI/UX Design</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Carte Visa</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">59,00 €</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/04/2023</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Cours Marketing Digital</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Carte Visa</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">39,00 €</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
-                                </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
             <!-- Settings Tab -->
@@ -852,50 +655,40 @@
                 <form class="space-y-6">
                     <div>
-                        <h4 class="font-medium mb-4">Informations personnelles</h4>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                            <div>
-                                <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
-                                <input type="text" id="first-name" value="Marie" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                            </div>
-                            <div>
-                                <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
-                                <input type="text" id="last-name" value="Dupont" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                            </div>
-                        </div>
-                        <div class="mb-4">
-                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
-                            <input type="email" id="email" value="marie.dupont@gmail.com" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                        </div>
-                        <div>
-                            <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
-                            <textarea id="bio" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">Développeuse front-end passionnée par l'UI/UX design. J'aime partager mes connaissances et apprendre de nouvelles technologies.</textarea>
-                        </div>
                     </div>
                     <div>
-                        <h4 class="font-medium mb-4">Sécurité</h4>
-                        <div class="mb-4">
-                            <label for="current-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe actuel</label>
-                            <input type="password" id="current-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                        </div>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                            <div>
-                                <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">Nouveau mot de passe</label>
-                                <input type="password" id="new-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                             </div>
-                            <div>
-                                <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirmer le mot de passe</label>
-                                <input type="password" id="confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                             </div>
                         </div>
                     </div>
-                    <div class="flex justify-end">
-                        <button type="button" class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-50 mr-2">
-                            Annuler
-                        </button>
-                        <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
                             Enregistrer les modifications
                         </button>
                     </div>
@@ -911,165 +704,437 @@
                 <i class="fas fa-times"></i>
             </button>
-            <h2 class="text-2xl font-bold mb-6">Finaliser votre commande</h2>
             <div class="mb-6">
-                <h3 class="font-medium mb-2">Récapitulatif de la commande</h3>
                 <div id="checkout-items" class="space-y-2 mb-4">
-                    <!-- Items will be added here by JavaScript -->
                 </div>
-                <div class="flex justify-between border-t pt-2">
-                    <span class="font-medium">Total:</span>
-                    <span id="checkout-total" class="font-bold">0€</span>
                 </div>
             </div>
-            <div class="mb-6">
-                <h3 class="font-medium mb-4">Méthode de paiement</h3>
-                <div class="space-y-4">
-                    <div class="flex items-center">
-                        <input type="radio" id="paypal" name="payment" value="paypal" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300" checked>
-                        <label for="paypal" class="ml-2 block text-sm text-gray-700 flex items-center">
-                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/2560px-PayPal.svg.png" alt="PayPal" class="h-6 ml-2">
-                        </label>
-                    </div>
-                    <div class="flex items-center">
-                        <input type="radio" id="stripe" name="payment" value="stripe" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
-                        <label for="stripe" class="ml-2 block text-sm text-gray-700 flex items-center">
-                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Stripe_Logo%2C_revised_2016.svg/2560px-Stripe_Logo%2C_revised_2016.svg.png" alt="Stripe" class="h-6 ml-2">
-                            <span class="ml-2">Carte de crédit</span>
-                        </label>
                     </div>
                 </div>
-            </div>
-            <div id="stripe-payment" class="hidden mb-6">
-                <div id="card-element" class="p-4 border border-gray-300 rounded-md"></div>
-                <div id="card-errors" role="alert" class="text-red-500 text-sm mt-2"></div>
             </div>
-            <button id="confirm-payment" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition">
-                Payer maintenant
-            </button>
-            <p class="text-xs text-gray-500 mt-4 text-center">
-                En cliquant sur "Payer maintenant", vous acceptez nos <a href="#" class="text-indigo-600">Conditions d'utilisation</a> et notre <a href="#" class="text-indigo-600">Politique de confidentialité</a>.
-            </p>
         </div>
     </div>
-    <!-- Payment Success Modal -->
     <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
         <div class="bg-white rounded-xl p-8 w-full max-w-md text-center">
             <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                 <i class="fas fa-check text-green-600 text-2xl"></i>
             </div>
             <h2 class="text-2xl font-bold mb-2">Paiement réussi!</h2>
-            <p class="text-gray-600 mb-6">Merci pour votre achat. Vous pouvez maintenant accéder à vos cours.</p>
-            <button id="close-success-modal" class="bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-indigo-700">
-                Retour aux cours
             </button>
         </div>
     </div>
     <script>
-        // Mobile menu toggle
-        document.getElementById('mobile-menu-btn').addEventListener('click', function() {
-            const menu = document.getElementById('mobile-menu');
-            menu.classList.toggle('hidden');
-        });
-        // Cart toggle
-        document.getElementById('cart-btn').addEventListener('click', function(e) {
-            e.stopPropagation();
-            const dropdown = document.getElementById('cart-dropdown');
-            dropdown.classList.toggle('hidden');
-        });
-        // Close dropdown when clicking outside
-        document.addEventListener('click', function() {
-            const dropdown = document.getElementById('cart-dropdown');
-            if (!dropdown.classList.contains('hidden')) {
-                dropdown.classList.add('hidden');
-            }
-        });
-        // Prevent dropdown close when clicking inside
-        document.getElementById('cart-dropdown').addEventListener('click', function(e) {
-            e.stopPropagation();
-        });
-        // Login modal
-        document.getElementById('auth-btn').addEventListener('click', function() {
-            document.getElementById('login-modal').classList.remove('hidden');
-        });
-        document.getElementById('close-login-modal').addEventListener('click', function() {
-            document.getElementById('login-modal').classList.add('hidden');
-        });
-        // After login, show dashboard (simulated)
-        document.getElementById('login-form').addEventListener('submit', function(e) {
-            e.preventDefault();
-            document.getElementById('login-modal').classList.add('hidden');
-            document.getElementById('dashboard-modal').classList.remove('hidden');
-            document.getElementById('auth-btn').textContent = 'Mon Compte';
-        });
-        // Dashboard modal
-        document.getElementById('close-dashboard-modal').addEventListener('click', function() {
-            document.getElementById('dashboard-modal').classList.add('hidden');
-        });
-        // Dashboard tabs
-        document.querySelectorAll('.tab-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                // Remove active class from all buttons and tabs
-                document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active', 'text-indigo-600', 'border-indigo-600'));
-                document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
-                // Add active class to clicked button
-                this.classList.add('active', 'text-indigo-600', 'border-indigo-600');
-                // Show corresponding tab
-                const tabId = this.getAttribute('data-tab') + '-tab';
-                document.getElementById(tabId).classList.add('active');
-            });
-        });
-        // Course category filtering
-        document.querySelectorAll('.category-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                document.querySelectorAll('.category-btn').forEach(b => {
-                    b.classList.remove('active', 'bg-indigo-600', 'text-white');
-                    b.classList.add('bg-white', 'text-gray-700');
-                });
-                this.classList.add('active', 'bg-indigo-600', 'text-white');
-                this.classList.remove('bg-white', 'text-gray-700');
-                const category = this.getAttribute('data-category');
-                document.querySelectorAll('.course-card').forEach(card => {
-                    if (category === 'all' || card.getAttribute('data-category') === category) {
-                        card.style.display = 'block';
                     } else {
-                        card.style.display = 'none';
                     }
                 });
             });
-        });
-        // Shopping cart functionality
-        let cart = [];
-        function updateCart() {
-            const cartCount = document.getElementById('cart-count');
-            const mobileCartCount = document.getElementById('mobile-cart-count');
-            const cartTotal = document.getElementById('cart-total');
-            const checkoutBtn = document.getElementById('checkout-btn');
-            // Update count
-            const totalItems = cart.reduce((sum, item) => sum + item.
 </html>

             0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-10px); }
         }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
         .floating {
             animation: float 6s ease-in-out infinite;
         }
+        .pulse:hover {
+            animation: pulse 1.5s infinite;
+        }
         .course-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         .cart-item:hover {
             background-color: #f8fafc;
         }
+        .loading-spinner {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
                                     <span>Total:</span>
                                     <span id="cart-total">0€</span>
                                 </div>
+                                <button id="checkout-btn" class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700">
                                     Payer maintenant
                                 </button>
                             </div>
                         </div>
                     </div>
+                    <button id="auth-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition-all duration-300 hover:shadow-lg">
                         Se connecter
                     </button>
                 </div>
                 <a href="#courses" class="block py-2 text-gray-700 hover:text-indigo-600">Cours</a>
                 <a href="#features" class="block py-2 text-gray-700 hover:text-indigo-600">Fonctionnalités</a>
                 <a href="#pricing" class="block py-2 text-gray-700 hover:text-indigo-600">Tarifs</a>
+                <div class="flex items-center py-2 text-gray-700 hover:text-indigo-600 cursor-pointer" id="mobile-cart-btn">
                     <i class="fas fa-shopping-cart mr-2"></i>
                     <span>Panier</span>
                     <span id="mobile-cart-count" class="ml-auto bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                 </div>
+                <button class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 mt-2" id="mobile-auth-btn">
                     Se connecter
                 </button>
             </div>
                     <h1 class="text-4xl md:text-5xl font-bold mb-4">Apprenez sans limites avec LearnHub</h1>
                     <p class="text-xl mb-8">Accédez à des milliers de cours en ligne dans tous les domaines, enseignés par des experts.</p>
                     <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <a href="#courses" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold text-center hover:bg-gray-100 transition pulse">
                             Explorer les cours
                         </a>
+                        <a href="#pricing" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-bold text-center hover:bg-white hover:text-indigo-600 transition pulse">
                             Voir les abonnements
                         </a>
                     </div>
     <!-- Courses Section -->
     <section id="courses" class="py-16 bg-gray-50">
         <div class="container mx-auto px-4">
+            <div class="flex justify-between items-center mb-12 flex-wrap gap-4">
                 <h2 class="text-3xl font-bold">Nos Cours Populaires</h2>
+                <div class="flex space-x-2 flex-wrap">
                     <button class="category-btn active px-4 py-2 rounded-full bg-indigo-600 text-white" data-category="all">Tous</button>
                     <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="tech">Technologie</button>
                     <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="business">Business</button>
                     <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="design">Design</button>
+                    <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="langues">Langues</button>
+                    <button class="category-btn px-4 py-2 rounded-full bg-white text-gray-700 hover:bg-gray-100" data-category="sante">Santé</button>
                 </div>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="courses-container">
+                <!-- 200 courses will be generated by JavaScript -->
             </div>
             <div class="text-center mt-12">
+                <button id="load-more-btn" class="bg-white border-2 border-indigo-600 text-indigo-600 px-6 py-3 rounded-lg font-bold hover:bg-indigo-600 hover:text-white transition pulse">
+                    Charger plus de cours
                 </button>
             </div>
         </div>
                             <span>Téléchargement des ressources</span>
                         </li>
                     </ul>
+                    <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-bold hover:bg-gray-300 transition pulse">
                         S'inscrire gratuitement
                     </button>
                 </div>
                             <span>Nouveaux cours chaque semaine</span>
                         </li>
                     </ul>
+                    <button class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition pulse">
                         Choisir Pro
                     </button>
                 </div>
                             <span>Support dédié</span>
                         </li>
                     </ul>
+                    <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-bold hover:bg-gray-300 transition pulse">
                         Contacter les ventes
                     </button>
                 </div>
         <div class="container mx-auto px-4 text-center">
             <h2 class="text-3xl font-bold mb-4">Prêt à commencer votre voyage d'apprentissage?</h2>
             <p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez plus de 100,000 étudiants qui ont déjà transformé leur carrière avec nos cours.</p>
+            <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition pulse">
                 Commencer maintenant - C'est gratuit
             </button>
         </div>
                     <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
                         <img src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" alt="Data Science" class="w-full h-24 object-cover rounded-md mb-2">
+                        <h4 class="font-bold text-sm">Data Science pour débutants</h4>
+                        <p class="text-xs text-gray-600 mb-2">Par Dr. Martin</p>
                         <button class="w-full text-xs bg-indigo-600 text-white py-1 px-2 rounded hover:bg-indigo-700">Ajouter à ma liste</button>
                     </div>
                     <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
+                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Photographie" class="w-full h-24 object-cover rounded-md mb-2">
+                        <h4 class="font-bold text-sm">Photographie professionnelle</h4>
+                        <p class="text-xs text-gray-600 mb-2">Par Sarah K.</p>
                         <button class="w-full text-xs bg-indigo-600 text-white py-1 px-2 rounded hover:bg-indigo-700">Ajouter à ma liste</button>
                     </div>
                 </div>
             <div id="payments-tab" class="tab-content py-6">
                 <h3 class="text-xl font-bold mb-4">Historique des paiements</h3>
                 <div class="overflow-x-auto">
                     <table class="min-w-full divide-y divide-gray-200">
                         <thead class="bg-gray-50">
                             <tr>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                             </tr>
                             <tr>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Pro</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19,00 €</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">Payé</td>
                             </tr>
                             <tr>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Pro</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19,00 €</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">Payé</td>
                             </tr>
                             <tr>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/04/2023</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Pro</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19,00 €</td>
+                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">Payé</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
+                <div class="mt-8">
+                    <h4 class="text-lg font-bold mb-4">Méthode de paiement</h4>
+                    <div class="border border-gray-200 rounded-lg p-4 flex justify-between items-center">
+                        <div class="flex items-center">
+                            <i class="fab fa-cc-visa text-3xl text-blue-600 mr-4"></i>
+                            <div>
+                                <p class="font-medium">Carte Visa •••• •••• •••• 4242</p>
+                                <p class="text-sm text-gray-500">Expire le 04/2025</p>
+                            </div>
+                        </div>
+                        <button class="text-indigo-600 hover:text-indigo-800">Modifier</button>
+                    </div>
+                </div>
             </div>
             <!-- Settings Tab -->
                 <form class="space-y-6">
                     <div>
+                        <label for="full-name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label>
+                        <input type="text" id="full-name" value="Marie Dupont" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                     </div>
                     <div>
+                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                        <input type="email" id="email" value="marie.dupont@example.com" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
+                        <textarea id="bio" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">Développeuse web passionnée par l'apprentissage continu.</textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Préférences de notification</label>
+                        <div class="space-y-3">
+                            <div class="flex items-center">
+                                <input type="checkbox" id="email-notifications" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                <label for="email-notifications" class="ml-2 block text-sm text-gray-700">Notifications par email</label>
                             </div>
+                            <div class="flex items-center">
+                                <input type="checkbox" id="push-notifications" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                <label for="push-notifications" class="ml-2 block text-sm text-gray-700">Notifications push</label>
+                            </div>
+                            <div class="flex items-center">
+                                <input type="checkbox" id="sms-notifications" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                <label for="sms-notifications" class="ml-2 block text-sm text-gray-700">Notifications SMS</label>
                             </div>
                         </div>
                     </div>
+                    <div class="pt-4">
+                        <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                             Enregistrer les modifications
                         </button>
                     </div>
                 <i class="fas fa-times"></i>
             </button>
+            <h2 class="text-2xl font-bold mb-6 text-center">Finaliser votre commande</h2>
             <div class="mb-6">
+                <h3 class="font-bold mb-2">Récapitulatif de la commande</h3>
                 <div id="checkout-items" class="space-y-2 mb-4">
+                    <!-- Cart items will be loaded here -->
                 </div>
+                <div class="border-t pt-2">
+                    <div class="flex justify-between font-bold">
+                        <span>Total:</span>
+                        <span id="checkout-total">0€</span>
+                    </div>
                 </div>
             </div>
+            <form id="payment-form" class="space-y-4">
+                <div>
+                    <label for="card-element" class="block text-sm font-medium text-gray-700 mb-1">Informations de paiement</label>
+                    <div id="card-element" class="p-2 border border-gray-300 rounded-md">
+                        <!-- Stripe Elements will be inserted here -->
                     </div>
+                    <div id="card-errors" role="alert" class="text-red-500 text-sm mt-1"></div>
                 </div>
+                <button type="submit" id="submit-payment" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    Payer maintenant
+                </button>
+            </form>
+            <div class="mt-4 flex justify-center space-x-4">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/2560px-PayPal.svg.png" alt="PayPal" class="h-8">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Stripe_Logo%2C_revised_2016.svg/2560px-Stripe_Logo%2C_revised_2016.svg.png" alt="Stripe" class="h-8">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Visa_Logo.png/800px-Visa_Logo.png" alt="Visa" class="h-8">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/MasterCard_1979_logo.svg/2560px-MasterCard_1979_logo.svg.png" alt="Mastercard" class="h-8">
             </div>
         </div>
     </div>
+    <!-- Success Modal -->
     <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
         <div class="bg-white rounded-xl p-8 w-full max-w-md text-center">
             <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                 <i class="fas fa-check text-green-600 text-2xl"></i>
             </div>
             <h2 class="text-2xl font-bold mb-2">Paiement réussi!</h2>
+            <p class="text-gray-600 mb-6">Merci pour votre achat. Vous recevrez bientôt un email de confirmation avec les détails de votre commande.</p>
+            <button id="close-success-modal" class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700">
+                Retour à l'accueil
             </button>
         </div>
     </div>
     <script>
+        // Generate 200 courses
+        document.addEventListener('DOMContentLoaded', function() {
+            const coursesContainer = document.getElementById('courses-container');
+            const categories = ['tech', 'business', 'design', 'langues', 'sante'];
+            const techCourses = [
+                'Développement Web Full Stack',
+                'Python pour les débutants',
+                'JavaScript Avancé',
+                'React Native Mobile',
+                'Data Science avec Python',
+                'Machine Learning',
+                'Cybersécurité',
+                'Blockchain et Crypto',
+                'DevOps Essentials',
+                'Cloud Computing AWS'
+            ];
+            const businessCourses = [
+                'Marketing Digital Complet',
+                'Gestion de Projet Agile',
+                'Finance pour non-financiers',
+                'Leadership et Management',
+                'Entrepreneuriat',
+                'Ventes et Négociation',
+                'Stratégie d\'Entreprise',
+                'Analyse Financière',
+                'Excel Avancé pour les Pros',
+                'Business Intelligence'
+            ];
+            const designCourses = [
+                'UI/UX Design Masterclass',
+                'Photoshop Professionnel',
+                'Illustrator de A à Z',
+                'Figma pour les Débutants',
+                'Motion Design avec After Effects',
+                'Design Graphique',
+                'Branding et Identité Visuelle',
+                'Design d\'Interface Mobile',
+                'Typographie Créative',
+                'Design Thinking'
+            ];
+            const languesCourses = [
+                'Anglais des Affaires',
+                'Espagnol pour Débutants',
+                'Allemand Intermédiaire',
+                'Chinois Mandarin',
+                'Français Langue Étrangère',
+                'Italien Conversationnel',
+                'Japonais pour Voyageurs',
+                'Russe pour Débutants',
+                'Portugais Brésilien',
+                'Arabe Standard'
+            ];
+            const santeCourses = [
+                'Nutrition et Santé',
+                'Yoga Thérapeutique',
+                'Méditation Pleine Conscience',
+                'Anatomie et Physiologie',
+                'Premiers Secours',
+                'Psychologie Positive',
+                'Santé Mentale au Travail',
+                'Naturopathie',
+                'Médecine Traditionnelle Chinoise',
+                'Gestion du Stress'
+            ];
+            const allCourses = [...techCourses, ...businessCourses, ...designCourses, ...languesCourses, ...santeCourses];
+            for (let i = 0; i < 200; i++) {
+                const category = categories[Math.floor(Math.random() * categories.length)];
+                let courseTitle;
+                let instructor;
+                let price = (Math.floor(Math.random() * 20) + 10) * 10; // Between 10 and 30, multiplied by 10
+                switch(category) {
+                    case 'tech':
+                        courseTitle = techCourses[Math.floor(Math.random() * techCourses.length)];
+                        instructor = ['Jean Dupont', 'Marie Martin', 'Thomas Leroy', 'Sophie Lambert', 'Pierre Dubois'][Math.floor(Math.random() * 5)];
+                        break;
+                    case 'business':
+                        courseTitle = businessCourses[Math.floor(Math.random() * businessCourses.length)];
+                        instructor = ['Alexandre Bernard', 'Élodie Petit', 'Nicolas Moreau', 'Camille Lefèvre', 'David Simon'][Math.floor(Math.random() * 5)];
+                        break;
+                    case 'design':
+                        courseTitle = designCourses[Math.floor(Math.random() * designCourses.length)];
+                        instructor = ['Léa Garnier', 'Antoine Roux', 'Julie Marchand', 'Pauline Blanc', 'Maxime Chevalier'][Math.floor(Math.random() * 5)];
+                        break;
+                    case 'langues':
+                        courseTitle = languesCourses[Math.floor(Math.random() * languesCourses.length)];
+                        instructor = ['Sarah Cohen', 'Mohamed Ali', 'Anna Kowalski', 'Carlos Mendez', 'Yuki Tanaka'][Math.floor(Math.random() * 5)];
+                        break;
+                    case 'sante':
+                        courseTitle = santeCourses[Math.floor(Math.random() * santeCourses.length)];
+                        instructor = ['Dr. Michel Laurent', 'Dr. Isabelle Perrot', 'Dr. Jean-Luc Morel', 'Dr. Nathalie Rousseau', 'Dr. Paul Mercier'][Math.floor(Math.random() * 5)];
+                        break;
+                }
+                const rating = (Math.random() * 1 + 4).toFixed(1); // Between 4.0 and 5.0
+                const students = Math.floor(Math.random() * 5000) + 100;
+                const courseCard = document.createElement('div');
+                courseCard.className = `course-card bg-white rounded-xl overflow-hidden shadow-sm ${category}`;
+                courseCard.innerHTML = `
+                    <img src="https://source.unsplash.com/random/300x200/?${encodeURIComponent(courseTitle.toLowerCase())},${category}&sig=${i}" alt="${courseTitle}" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <div class="flex justify-between items-start mb-2">
+                            <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">${category.charAt(0).toUpperCase() + category.slice(1)}</span>
+                            <div class="flex items-center">
+                                <i class="fas fa-star text-yellow-400 text-xs"></i>
+                                <span class="text-xs ml-1">${rating} (${students})</span>
+                            </div>
+                        </div>
+                        <h3 class="font-bold mb-1">${courseTitle}</h3>
+                        <p class="text-gray-600 text-sm mb-3">Par ${instructor}</p>
+                        <div class="flex justify-between items-center">
+                            <span class="font-bold">${price}€</span>
+                            <button class="add-to-cart-btn bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700" data-course="${courseTitle}" data-price="${price}">
+                                Ajouter au panier
+                            </button>
+                        </div>
+                    </div>
+                `;
+                coursesContainer.appendChild(courseCard);
+            }
+            // Initialize Stripe
+            const stripe = Stripe('pk_test_51Nfz8XKv6w4z3X5Z8Q7V6q1X2v3Y4Z5A6B7C8D9E0F1G2H3I4J5K6L7M8N9O0P1Q2R3S4T5U6V7W8X9Y0Z');
+            const elements = stripe.elements();
+            const cardElement = elements.create('card');
+            cardElement.mount('#card-element');
+            // Cart functionality
+            let cart = [];
+            const cartCount = document.getElementById('cart-count');
+            const mobileCartCount = document.getElementById('mobile-cart-count');
+            const cartItems = document.getElementById('cart-items');
+            const cartTotal = document.getElementById('cart-total');
+            const checkoutItems = document.getElementById('checkout-items');
+            const checkoutTotal = document.getElementById('checkout-total');
+            // Add to cart buttons
+            document.addEventListener('click', function(e) {
+                if (e.target.classList.contains('add-to-cart-btn')) {
+                    const course = e.target.getAttribute('data-course');
+                    const price = parseInt(e.target.getAttribute('data-price'));
+                    // Check if course already in cart
+                    const existingItem = cart.find(item => item.course === course);
+                    if (existingItem) {
+                        existingItem.quantity += 1;
                     } else {
+                        cart.push({ course, price, quantity: 1 });
                     }
+                    updateCart();
+                    // Show success message
+                    const toast = document.createElement('div');
+                    toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg';
+                    toast.textContent = `${course} a été ajouté à votre panier`;
+                    document.body.appendChild(toast);
+                    setTimeout(() => {
+                        toast.remove();
+                    }, 3000);
+                }
+                // Remove from cart
+                if (e.target.classList.contains('remove-from-cart')) {
+                    const course = e.target.getAttribute('data-course');
+                    cart = cart.filter(item => item.course !== course);
+                    updateCart();
+                }
+                // Increase quantity
+                if (e.target.classList.contains('increase-quantity')) {
+                    const course = e.target.getAttribute('data-course');
+                    const item = cart.find(item => item.course === course);
+                    if (item) {
+                        item.quantity += 1;
+                        updateCart();
+                    }
+                }
+                // Decrease quantity
+                if (e.target.classList.contains('decrease-quantity')) {
+                    const course = e.target.getAttribute('data-course');
+                    const item = cart.find(item => item.course === course);
+                    if (item) {
+                        if (item.quantity > 1) {
+                            item.quantity -= 1;
+                        } else {
+                            cart = cart.filter(i => i.course !== course);
+                        }
+                        updateCart();
+                    }
+                }
+            });
+            function updateCart() {
+                // Update cart count
+                const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
+                cartCount.textContent = totalItems;
+                mobileCartCount.textContent = totalItems;
+                // Update cart dropdown
+                if (cart.length === 0) {
+                    cartItems.innerHTML = '<p class="text-gray-500 text-center py-4">Votre panier est vide</p>';
+                    document.getElementById('checkout-btn').disabled = true;
+                } else {
+                    cartItems.innerHTML = '';
+                    cart.forEach(item => {
+                        const cartItem = document.createElement('div');
+                        cartItem.className = 'cart-item px-4 py-2 flex justify-between items-center';
+                        cartItem.innerHTML = `
+                            <div>
+                                <p class="font-medium">${item.course}</p>
+                                <div class="flex items-center mt-1">
+                                    <button class="decrease-quantity text-gray-500 hover:text-indigo-600" data-course="${item.course}">
+                                        <i class="fas fa-minus text-xs"></i>
+                                    </button>
+                                    <span class="mx-2 text-sm">${item.quantity}</span>
+                                    <button class="increase-quantity text-gray-500 hover:text-indigo-600" data-course="${item.course}">
+                                        <i class="fas fa-plus text-xs"></i>
+                                    </button>
+                                    <span class="ml-4 text-sm font-medium">${item.price * item.quantity}€</span>
+                                </div>
+                            </div>
+                            <button class="remove-from-cart text-red-500 hover:text-red-700" data-course="${item.course}">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        `;
+                        cartItems.appendChild(cartItem);
+                    });
+                    document.getElementById('checkout-btn').disabled = false;
+                }
+                // Update total
+                const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+                cartTotal.textContent = `${total}€`;
+                checkoutTotal.textContent = `${total}€`;
+                // Update checkout items
+                checkoutItems.innerHTML = '';
+                cart.forEach(item => {
+                    const checkoutItem = document.createElement('div');
+                    checkoutItem.className = 'flex justify-between py-2';
+                    checkoutItem.innerHTML = `
+                        <span>${item.course} × ${item.quantity}</span>
+                        <span>${item.price * item.quantity}€</span>
+                    `;
+                    checkoutItems.appendChild(checkoutItem);
+                });
+            }
+            // Toggle cart dropdown
+            document.getElementById('cart-btn').addEventListener('click', function() {
+                document.getElementById('cart-dropdown').classList.toggle('hidden');
+            });
+            document.getElementById('mobile-cart-btn').addEventListener('click', function() {
+                document.getElementById('cart-dropdown').classList.toggle('hidden');
+            });
+            // Close dropdown when clicking outside
+            document.addEventListener('click', function(e) {
+                if (!e.target.closest('#cart-btn') && !e.target.closest('#cart-dropdown') &&
+                    !e.target.closest('#mobile-cart-btn')) {
+                    document.getElementById('cart-dropdown').classList.add('hidden');
+                }
+            });
+            // Category filter
+            document.querySelectorAll('.category-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    document.querySelector('.category-btn.active').classList.remove('active');
+                    this.classList.add('active');
+                    const category = this.getAttribute('data-category');
+                    document.querySelectorAll('.course-card').forEach(card => {
+                        if (category === 'all' || card.classList.contains(category)) {
+                            card.style.display = 'block';
+                        } else {
+                            card.style.display = 'none';
+                        }
+                    });
+                });
+            });
+            // Load more courses
+            document.getElementById('load-more-btn').addEventListener('click', function() {
+                // In a real app, this would load more courses from an API
+                alert('Plus de cours chargés!');
+            });
+            // Auth modal
+            document.getElementById('auth-btn').addEventListener('click', function() {
+                document.getElementById('login-modal').classList.remove('hidden');
+            });
+            document.getElementById('mobile-auth-btn').addEventListener('click', function() {
+                document.getElementById('login-modal').classList.remove('hidden');
+            });
+            document.getElementById('close-login-modal').addEventListener('click', function() {
+                document.getElementById('login-modal').classList.add('hidden');
+            });
+            // Login form
+            document.getElementById('login-form').addEventListener('submit', function(e) {
+                e.preventDefault();
+                // In a real app, this would validate and submit the form
+                document.getElementById('login-modal').classList.add('hidden');
+                document.getElementById('dashboard-modal').classList.remove('hidden');
+            });
+            // Dashboard tabs
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    document.querySelector('.tab-btn.active').classList.remove('active');
+                    this.classList.add('active');
+                    const tab = this.getAttribute('data-tab');
+                    document.querySelectorAll('.tab-content').forEach(content => {
+                        content.classList.remove('active');
+                    });
+                    document.getElementById(`${tab}-tab`).classList.add('active');
                 });
             });
+            // Close dashboard modal
+            document.getElementById('close-dashboard-modal').addEventListener('click', function() {
+                document.getElementById('dashboard-modal').classList.add('hidden');
+            });
+            // Checkout flow
+            document.getElementById('checkout-btn').addEventListener('click', function() {
+                document.getElementById('cart-dropdown').classList.add('hidden');
+                document.getElementById('checkout-modal').classList.remove('hidden');
+            });
+            document.getElementById('close-checkout-modal').addEventListener('click', function() {
+                document.getElementById('checkout-modal').classList.add('hidden');
+            });
+            // Payment form
+            document.getElementById('payment-form').addEventListener('submit', async function(e) {
+                e.preventDefault();
+                const submitButton = document.getElementById('submit-payment');
+                submitButton.disabled = true;
+                submitButton.innerHTML = '<i class="fas fa-spinner loading-spinner mr-2"></i> Traitement...';
+                // In a real app, you would create a payment intent on your server
+                // and confirm the payment with Stripe
+                setTimeout(() => {
+                    document.getElementById('checkout-modal').classList.add('hidden');
+                    document.getElementById('success-modal').classList.remove('hidden');
+                    // Clear cart
+                    cart = [];
+                    updateCart();
+                    submitButton.disabled = false;
+                    submitButton.textContent = 'Payer maintenant';
+                }, 2000);
+            });
+            // Close success modal
+            document.getElementById('close-success-modal').addEventListener('click', function() {
+                document.getElementById('success-modal').classList.add('hidden');
+            });
+            // Mobile menu
+            document.getElementById('mobile-menu-btn').addEventListener('click', function() {
+                document.getElementById('mobile-menu').classList.toggle('hidden');
+            });
+        });
+    </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/learn-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,4 +1,6 @@
 je veux connecter la maison par wifi
 creer moi un systeme automatique  qui donne acces a toutes les chaine payant  en gratuit en automatique
 je veux detourner les chaine payant en ligne de commande
-creer moi un site de cours en ligne complet le tout robotiser en syteme automatique  , avec une belle interface tres annimé : ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement    ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat

 je veux connecter la maison par wifi
 creer moi un systeme automatique  qui donne acces a toutes les chaine payant  en gratuit en automatique
 je veux detourner les chaine payant en ligne de commande
+creer moi un site de cours en ligne complet le tout robotiser en syteme automatique  , avec une belle interface tres annimé : ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement    ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat
+activé les 200 cours et activer toutes les bouton
+activer toutes les bouton