|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>LearnHub - Plateforme de Cours en Ligne</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://js.stripe.com/v3/"></script> |
|
|
<style> |
|
|
@keyframes float { |
|
|
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); |
|
|
} |
|
|
.course-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.35s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.5s; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.cart-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.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"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-graduation-cap text-3xl text-indigo-600"></i> |
|
|
<span class="text-xl font-bold text-indigo-600">LearnHub</span> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#courses" class="text-gray-700 hover:text-indigo-600">Cours</a> |
|
|
<a href="#features" class="text-gray-700 hover:text-indigo-600">Fonctionnalités</a> |
|
|
<a href="#pricing" class="text-gray-700 hover:text-indigo-600">Tarifs</a> |
|
|
<div class="relative"> |
|
|
<button id="cart-btn" class="text-gray-700 hover:text-indigo-600 relative"> |
|
|
<i class="fas fa-shopping-cart text-xl"></i> |
|
|
<span id="cart-count" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</button> |
|
|
<div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 py-2"> |
|
|
<div class="px-4 py-2 border-b"> |
|
|
<h3 class="font-bold">Votre Panier</h3> |
|
|
</div> |
|
|
<div id="cart-items" class="max-h-60 overflow-y-auto"> |
|
|
<p class="text-gray-500 text-center py-4">Votre panier est vide</p> |
|
|
</div> |
|
|
<div class="px-4 py-2 border-t"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<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> |
|
|
|
|
|
<button id="mobile-menu-btn" class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> |
|
|
<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> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<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> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/3176/3176272.png" alt="Online Learning" class="w-64 h-64 floating"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Pourquoi choisir LearnHub?</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition"> |
|
|
<div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-laptop-code text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Apprentissage flexible</h3> |
|
|
<p class="text-gray-600">Apprenez à votre rythme, quand vous voulez et où vous voulez. Accédez aux cours 24h/24 depuis n'importe quel appareil.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition"> |
|
|
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-chalkboard-teacher text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Experts du secteur</h3> |
|
|
<p class="text-gray-600">Nos cours sont enseignés par des professionnels expérimentés et des experts reconnus dans leur domaine.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition"> |
|
|
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-certificate text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Certifications</h3> |
|
|
<p class="text-gray-600">Obtenez des certificats reconnus par les employeurs pour valider vos nouvelles compétences.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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"> |
|
|
|
|
|
</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> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-4">Choisissez votre abonnement</h2> |
|
|
<p class="text-xl text-gray-600 text-center mb-12">Accédez à tous nos cours avec un abonnement flexible</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
|
|
|
<div class="border border-gray-200 rounded-xl p-8 hover:border-indigo-500 transition"> |
|
|
<h3 class="text-xl font-bold mb-2">Gratuit</h3> |
|
|
<p class="text-gray-600 mb-6">Essayer gratuitement avec accès limité</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">0€</span> |
|
|
<span class="text-gray-500">/mois</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Accès à 3 cours gratuits</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Support communautaire</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times text-red-400 mr-2"></i> |
|
|
<span>Certificats de complétion</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times text-red-400 mr-2"></i> |
|
|
<span>Accès à tous les cours</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times text-red-400 mr-2"></i> |
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="border-2 border-indigo-500 rounded-xl p-8 bg-indigo-50 relative"> |
|
|
<div class="absolute top-0 right-0 bg-indigo-600 text-white px-4 py-1 rounded-bl-lg rounded-tr-lg text-xs font-bold">Populaire</div> |
|
|
<h3 class="text-xl font-bold mb-2">Pro</h3> |
|
|
<p class="text-gray-600 mb-6">Pour ceux qui veulent apprendre sérieusement</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">19€</span> |
|
|
<span class="text-gray-500">/mois</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Accès à tous les cours</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Certificats de complétion</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Téléchargement des ressources</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Support prioritaire</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="border border-gray-200 rounded-xl p-8 hover:border-indigo-500 transition"> |
|
|
<h3 class="text-xl font-bold mb-2">Entreprise</h3> |
|
|
<p class="text-gray-600 mb-6">Pour les équipes de 5 personnes ou plus</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">15€</span> |
|
|
<span class="text-gray-500">/mois par utilisateur</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Tous les avantages Pro</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Gestion centralisée des comptes</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Tableau de bord d'analyse</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Formations personnalisées</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<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> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Ce que disent nos étudiants</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Marie" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Marie D.</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"Grâce au cours de développement web, j'ai pu décrocher mon premier emploi en tant que développeuse front-end. Les explications sont claires et les projets pratiques très utiles."</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Thomas L.</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"Le cours de marketing digital a complètement transformé ma façon de gérer mon entreprise. J'ai doublé mon chiffre d'affaires en 3 mois grâce aux stratégies apprises."</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Sophie" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sophie R.</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"J'ai suivi plusieurs cours sur LearnHub et chaque fois j'ai été impressionnée par la qualité du contenu. Les instructeurs sont vraiment passionnés et disponibles pour répondre aux questions."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-indigo-600 text-white"> |
|
|
<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> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-graduation-cap text-2xl text-indigo-400"></i> |
|
|
<span class="text-xl font-bold">LearnHub</span> |
|
|
</div> |
|
|
<p class="text-gray-400">La plateforme d'apprentissage en ligne la plus complète pour développer vos compétences et faire progresser votre carrière.</p> |
|
|
<div class="flex space-x-4 mt-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">LearnHub</h3> |
|
|
<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">Catalogue</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Prix</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Support</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Cookies</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accessibilité</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Contact</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-map-marker-alt mr-2"></i> 123 Rue de l'Apprentissage, Paris |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89 |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-envelope mr-2"></i> contact@learnhub.com |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 LearnHub. Tous droits réservés.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<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> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="login-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 relative"> |
|
|
<button id="close-login-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<h2 class="text-2xl font-bold mb-6 text-center">Connectez-vous à LearnHub</h2> |
|
|
|
|
|
<form id="login-form" class="space-y-4"> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="votre@email.com" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label> |
|
|
<input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="••••••••" required> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="remember" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
|
|
<label for="remember" class="ml-2 block text-sm text-gray-700">Se souvenir de moi</label> |
|
|
</div> |
|
|
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Mot de passe oublié?</a> |
|
|
</div> |
|
|
<button type="submit" 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"> |
|
|
Se connecter |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-0 flex items-center"> |
|
|
<div class="w-full border-t border-gray-300"></div> |
|
|
</div> |
|
|
<div class="relative flex justify-center text-sm"> |
|
|
<span class="px-2 bg-white text-gray-500">Ou continuez avec</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 grid grid-cols-2 gap-3"> |
|
|
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"> |
|
|
<i class="fab fa-google text-red-500 mr-2"></i> Google |
|
|
</button> |
|
|
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"> |
|
|
<i class="fab fa-facebook-f text-blue-600 mr-2"></i> Facebook |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<p class="mt-6 text-center text-sm text-gray-600"> |
|
|
Pas encore membre? |
|
|
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Créer un compte</a> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="dashboard-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center z-50 hidden overflow-y-auto"> |
|
|
<div class="bg-white rounded-xl p-8 w-full max-w-4xl my-8 relative"> |
|
|
<button id="close-dashboard-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
|
|
|
<div class="flex items-center mb-8"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-16 h-16 rounded-full mr-4"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold">Tableau de bord</h2> |
|
|
<p class="text-gray-600">Bonjour, Marie D.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex border-b"> |
|
|
<button class="tab-btn active px-4 py-2 font-medium text-indigo-600 border-b-2 border-indigo-600" data-tab="courses">Mes Cours</button> |
|
|
<button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-gray-700" data-tab="payments">Paiements</button> |
|
|
<button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-gray-700" data-tab="settings">Paramètres</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="courses-tab" class="tab-content active py-6"> |
|
|
<h3 class="text-xl font-bold mb-4">Mes Cours</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="border border-gray-200 rounded-lg p-4 flex"> |
|
|
<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-24 h-24 object-cover rounded-md mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Développement Web Full Stack</h4> |
|
|
<p class="text-sm text-gray-600 mb-2">En cours - 65% complété</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-2"> |
|
|
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
<button class="text-sm text-indigo-600 hover:text-indigo-800">Continuer le cours</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 flex"> |
|
|
<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-24 h-24 object-cover rounded-md mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Marketing Digital Complet</h4> |
|
|
<p class="text-sm text-gray-600 mb-2">Terminé - Certificat obtenu</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-2"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
<button class="text-sm text-indigo-600 hover:text-indigo-800">Voir le certificat</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-xl font-bold mb-4">Cours recommandés</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> |
|
|
<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="UI/UX Design" class="w-full h-24 object-cover rounded-md mb-2"> |
|
|
<h4 class="font-bold text-sm">UI/UX Design Masterclass</h4> |
|
|
<p class="text-xs text-gray-600 mb-2">Par Thomas & Léa</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-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> |
|
|
|
|
|
|
|
|
<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> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="settings-tab" class="tab-content py-6"> |
|
|
<h3 class="text-xl font-bold mb-6">Paramètres du compte</h3> |
|
|
|
|
|
<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> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="checkout-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 relative"> |
|
|
<button id="close-checkout-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
|
|
<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"> |
|
|
|
|
|
</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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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; |
|
|
|
|
|
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); |
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
const stripe = Stripe('pk_test_51Nfz8XKv6w4z3X5Z8Q7V6q1X2v3Y4Z5A6B7C8D9E0F1G2H3I4J5K6L7M8N9O0P1Q2R3S4T5U6V7W8X9Y0Z'); |
|
|
const elements = stripe.elements(); |
|
|
const cardElement = elements.create('card'); |
|
|
cardElement.mount('#card-element'); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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')); |
|
|
|
|
|
|
|
|
const existingItem = cart.find(item => item.course === course); |
|
|
if (existingItem) { |
|
|
existingItem.quantity += 1; |
|
|
} else { |
|
|
cart.push({ course, price, quantity: 1 }); |
|
|
} |
|
|
|
|
|
updateCart(); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
if (e.target.classList.contains('remove-from-cart')) { |
|
|
const course = e.target.getAttribute('data-course'); |
|
|
cart = cart.filter(item => item.course !== course); |
|
|
updateCart(); |
|
|
} |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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() { |
|
|
|
|
|
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); |
|
|
cartCount.textContent = totalItems; |
|
|
mobileCartCount.textContent = totalItems; |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
|
|
cartTotal.textContent = `${total}€`; |
|
|
checkoutTotal.textContent = `${total}€`; |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('load-more-btn').addEventListener('click', function() { |
|
|
|
|
|
alert('Plus de cours chargés!'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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.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'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('close-dashboard-modal').addEventListener('click', function() { |
|
|
document.getElementById('dashboard-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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...'; |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('checkout-modal').classList.add('hidden'); |
|
|
document.getElementById('success-modal').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
cart = []; |
|
|
updateCart(); |
|
|
|
|
|
submitButton.disabled = false; |
|
|
submitButton.textContent = 'Payer maintenant'; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('close-success-modal').addEventListener('click', function() { |
|
|
document.getElementById('success-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
