|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>LearnHub - Académie 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"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.shine { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.shine::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -60%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
to right, |
|
|
rgba(255, 255, 255, 0.13) 0%, |
|
|
rgba(255, 255, 255, 0.13) 77%, |
|
|
rgba(255, 255, 255, 0.5) 92%, |
|
|
rgba(255, 255, 255, 0.0) 100% |
|
|
); |
|
|
transform: rotate(30deg); |
|
|
transition: all 0.7s ease-out; |
|
|
} |
|
|
.card-hover:hover .shine::after { |
|
|
left: 100%; |
|
|
} |
|
|
.glow { |
|
|
box-shadow: 0 0 15px rgba(47, 133, 90, 0.3); |
|
|
} |
|
|
.glow:hover { |
|
|
box-shadow: 0 0 25px rgba(47, 133, 90, 0.5); |
|
|
} |
|
|
.wave-bg { |
|
|
background-image: url('https://www.transparenttextures.com/patterns/connected.png'); |
|
|
opacity: 0.1; |
|
|
} |
|
|
.teacher-card { |
|
|
background: linear-gradient(145deg, #ffffff 0%, #f0fff4 100%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans overflow-x-hidden"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="text-2xl font-bold text-green-700"> |
|
|
<i class="fas fa-graduation-cap mr-2"></i>LearnHub |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="text-gray-700 hover:text-green-600 transition">Accueil</a> |
|
|
<a href="#courses" class="text-gray-700 hover:text-green-600 transition">Cours</a> |
|
|
<a href="#teachers" class="text-gray-700 hover:text-green-600 transition">Professeurs</a> |
|
|
<a href="#pricing" class="text-gray-700 hover:text-green-600 transition">Tarifs</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleCart()" class="relative p-2 text-gray-600 hover:text-green-600 transition"> |
|
|
<i class="fas fa-shopping-cart text-xl"></i> |
|
|
<span id="cartCount" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</button> |
|
|
<button onclick="toggleAuthModal()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition shadow-md glow"> |
|
|
<i class="fas fa-user mr-2"></i>Connexion |
|
|
</button> |
|
|
<button class="md:hidden text-gray-600" onclick="toggleMobileMenu()"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobileMenu" class="hidden md:hidden pb-4"> |
|
|
<a href="#" class="block py-2 text-gray-700 hover:text-green-600 transition">Accueil</a> |
|
|
<a href="#courses" class="block py-2 text-gray-700 hover:text-green-600 transition">Cours</a> |
|
|
<a href="#teachers" class="block py-2 text-gray-700 hover:text-green-600 transition">Professeurs</a> |
|
|
<a href="#pricing" class="block py-2 text-gray-700 hover:text-green-600 transition">Tarifs</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-20 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 wave-bg"></div> |
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10"> |
|
|
<div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-green-300 mix-blend-multiply filter blur-3xl opacity-70"></div> |
|
|
<div class="absolute bottom-1/3 right-1/4 w-96 h-96 rounded-full bg-teal-300 mix-blend-multiply filter blur-3xl opacity-70"></div> |
|
|
</div> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center relative z-10"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 animate__animated animate__fadeInLeft"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">Votre Académie d'Excellence en Ligne</h1> |
|
|
<p class="text-xl mb-8 opacity-90">Apprenez des meilleurs professeurs avec des méthodes pédagogiques innovantes et un suivi personnalisé.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button onclick="scrollToPricing()" class="bg-white text-green-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold transition shadow-lg"> |
|
|
<i class="fas fa-rocket mr-2"></i>Commencer maintenant |
|
|
</button> |
|
|
<button onclick="scrollToCourses()" class="bg-transparent border-2 border-white hover:bg-white hover:text-green-600 px-6 py-3 rounded-lg font-bold transition"> |
|
|
<i class="fas fa-book-open mr-2"></i>Explorer les cours |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center animate__animated animate__fadeInRight"> |
|
|
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Étudiants en classe virtuelle" class="w-full max-w-md rounded-xl shadow-2xl floating"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
|
|
<div class="animate__animated animate__fadeIn" style="animation-delay: 0.1s"> |
|
|
<div class="text-4xl font-bold text-green-600 mb-2">10K+</div> |
|
|
<div class="text-gray-600">Étudiants</div> |
|
|
</div> |
|
|
<div class="animate__animated animate__fadeIn" style="animation-delay: 0.2s"> |
|
|
<div class="text-4xl font-bold text-green-600 mb-2">120+</div> |
|
|
<div class="text-gray-600">Cours disponibles</div> |
|
|
</div> |
|
|
<div class="animate__animated animate__fadeIn" style="animation-delay: 0.3s"> |
|
|
<div class="text-4xl font-bold text-green-600 mb-2">50+</div> |
|
|
<div class="text-gray-600">Professeurs experts</div> |
|
|
</div> |
|
|
<div class="animate__animated animate__fadeIn" style="animation-delay: 0.4s"> |
|
|
<div class="text-4xl font-bold text-green-600 mb-2">95%</div> |
|
|
<div class="text-gray-600">Satisfaction</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-2">Notre Approche Pédagogique</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Une méthodologie éprouvée pour un apprentissage efficace</p> |
|
|
<div class="w-20 h-1 bg-green-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="text-green-600 mb-4"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto"> |
|
|
<i class="fas fa-chalkboard-teacher text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 text-center">Cours en Direct</h3> |
|
|
<p class="text-gray-600 text-center">Interagissez en temps réel avec nos professeurs lors de sessions interactives.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="text-green-600 mb-4"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto"> |
|
|
<i class="fas fa-laptop-code text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 text-center">Pratique Intensive</h3> |
|
|
<p class="text-gray-600 text-center">Apprenez par la pratique avec des exercices et projets concrets.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="text-green-600 mb-4"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto"> |
|
|
<i class="fas fa-users text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2 text-center">Communauté Active</h3> |
|
|
<p class="text-gray-600 text-center">Échangez avec d'autres étudiants et professeurs dans notre espace dédié.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="courses" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-2">Nos Programmes Académiques</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Des parcours complets pour maîtriser votre domaine</p> |
|
|
<div class="w-20 h-1 bg-green-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> |
|
|
<div class="relative shine"> |
|
|
<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="Data Science" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-full">Nouveau</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold">Science des Données</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">€49.99</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Maîtrisez Python, le machine learning et l'analyse de données en 12 semaines.</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="text-sm font-bold">4.9</span> |
|
|
<span class="text-sm text-gray-500 ml-1">(128)</span> |
|
|
</div> |
|
|
<button onclick="addToCart('Science des Données', 49.99, 'ds1')" class="text-green-600 hover:text-green-800 transition"> |
|
|
<i class="fas fa-cart-plus text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> |
|
|
<div class="relative shine"> |
|
|
<img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Développement Web" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-green-400 text-xs font-bold px-2 py-1 rounded-full">Best-seller</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold">Développement Fullstack</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">€79.99</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Devenez développeur fullstack avec React, Node.js et bases de données.</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="text-sm font-bold">4.8</span> |
|
|
<span class="text-sm text-gray-500 ml-1">(256)</span> |
|
|
</div> |
|
|
<button onclick="addToCart('Développement Fullstack', 79.99, 'web1')" class="text-green-600 hover:text-green-800 transition"> |
|
|
<i class="fas fa-cart-plus text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> |
|
|
<div class="relative shine"> |
|
|
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Marketing Digital" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-green-500 text-xs font-bold px-2 py-1 rounded-full">Populaire</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold">Marketing Digital</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">€59.99</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Stratégies digitales, SEO, réseaux sociaux et publicités en ligne.</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="text-sm font-bold">4.7</span> |
|
|
<span class="text-sm text-gray-500 ml-1">(187)</span> |
|
|
</div> |
|
|
<button onclick="addToCart('Marketing Digital', 59.99, 'mk1')" class="text-green-600 hover:text-green-800 transition"> |
|
|
<i class="fas fa-cart-plus text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button onclick="window.location.href='all-courses.html'" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-bold transition shadow-md glow"> |
|
|
<i class="fas fa-book mr-2"></i>Voir tous les cours |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="teachers" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-2">Nos Professeurs Experts</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Apprenez auprès des meilleurs professionnels</p> |
|
|
<div class="w-20 h-1 bg-green-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="teacher-card p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex flex-col items-center mb-4"> |
|
|
<img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Prof. Martin" class="w-24 h-24 rounded-full object-cover border-4 border-green-100 mb-4"> |
|
|
<h3 class="text-xl font-bold">Prof. Martin Dupont</h3> |
|
|
<p class="text-green-600">Data Science</p> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4 text-center">Ancien Data Scientist chez Google, spécialiste en machine learning et analyse prédictive.</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Python</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">TensorFlow</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Big Data</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="teacher-card p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex flex-col items-center mb-4"> |
|
|
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Prof. Sophie" class="w-24 h-24 rounded-full object-cover border-4 border-green-100 mb-4"> |
|
|
<h3 class="text-xl font-bold">Prof. Sophie Martin</h3> |
|
|
<p class="text-green-600">Développement Web</p> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4 text-center">Développeuse fullstack avec 10 ans d'expérience, spécialiste React et Node.js.</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">JavaScript</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">React</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Node.js</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="teacher-card p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex flex-col items-center mb-4"> |
|
|
<img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Prof. Ahmed" class="w-24 h-24 rounded-full object-cover border-4 border-green-100 mb-4"> |
|
|
<h3 class="text-xl font-bold">Prof. Ahmed Khan</h3> |
|
|
<p class="text-green-600">Marketing Digital</p> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4 text-center">Consultant en stratégie digitale pour des marques internationales.</p> |
|
|
<div class="flex justify-center space-x-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">SEO</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Réseaux Sociaux</span> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Google Ads</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-2">Comment ça marche ?</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Un parcours d'apprentissage clair et efficace</p> |
|
|
<div class="w-20 h-1 bg-green-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="relative"> |
|
|
|
|
|
<div class="absolute left-1/2 h-full w-1 bg-green-200 transform -translate-x-1/2"></div> |
|
|
|
|
|
|
|
|
<div class="mb-8 flex justify-between items-center w-full"> |
|
|
<div class="order-1 w-5/12"></div> |
|
|
<div class="z-20 flex items-center order-1 bg-green-600 shadow-xl w-12 h-12 rounded-full"> |
|
|
<h1 class="mx-auto font-bold text-lg text-white">1</h1> |
|
|
</div> |
|
|
<div class="order-1 bg-green-50 rounded-lg shadow-xl w-5/12 px-6 py-4"> |
|
|
<h3 class="mb-1 font-bold text-lg text-gray-800">Inscription</h3> |
|
|
<p class="text-sm text-gray-600">Choisissez votre programme et créez votre compte en quelques minutes.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8 flex justify-between items-center w-full"> |
|
|
<div class="order-1 bg-green-50 rounded-lg shadow-xl w-5/12 px-6 py-4"> |
|
|
<h3 class="mb-1 font-bold text-lg text-gray-800">Accès aux cours</h3> |
|
|
<p class="text-sm text-gray-600">Accédez immédiatement à tous les supports de cours et vidéos.</p> |
|
|
</div> |
|
|
<div class="z-20 flex items-center order-1 bg-green-600 shadow-xl w-12 h-12 rounded-full"> |
|
|
<h1 class="mx-auto font-bold text-lg text-white">2</h1> |
|
|
</div> |
|
|
<div class="order-1 w-5/12"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8 flex justify-between items-center w-full"> |
|
|
<div class="order-1 w-5/12"></div> |
|
|
<div class="z-20 flex items-center order-1 bg-green-600 shadow-xl w-12 h-12 rounded-full"> |
|
|
<h1 class="mx-auto font-bold text-lg text-white">3</h1> |
|
|
</div> |
|
|
<div class="order-1 bg-green-50 rounded-lg shadow-xl w-5/12 px-6 py-4"> |
|
|
<h3 class="mb-1 font-bold text-lg text-gray-800">Sessions interactives</h3> |
|
|
<p class="text-sm text-gray-600">Participez aux sessions en direct avec les professeurs et posez vos questions.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8 flex justify-between items-center w-full"> |
|
|
<div class="order-1 bg-green-50 rounded-lg shadow-xl w-5/12 px-6 py-4"> |
|
|
<h3 class="mb-1 font-bold text-lg text-gray-800">Projets pratiques</h3> |
|
|
<p class="text-sm text-gray-600">Appliquez vos connaissances avec des projets concrets et des études de cas.</p> |
|
|
</div> |
|
|
<div class="z-20 flex items-center order-1 bg-green-600 shadow-xl w-12 h-12 rounded-full"> |
|
|
<h1 class="mx-auto font-bold text-lg text-white">4</h1> |
|
|
</div> |
|
|
<div class="order-1 w-5/12"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-between items-center w-full"> |
|
|
<div class="order-1 w-5/12"></div> |
|
|
<div class="z-20 flex items-center order-1 bg-green-600 shadow-xl w-12 h-12 rounded-full"> |
|
|
<h1 class="mx-auto font-bold text-lg text-white">5</h1> |
|
|
</div> |
|
|
<div class="order-1 bg-green-50 rounded-lg shadow-xl w-5/12 px-6 py-4"> |
|
|
<h3 class="mb-1 font-bold text-lg text-gray-800">Certification</h3> |
|
|
<p class="text-sm text-gray-600">Obtenez votre certificat reconnu par l'industrie après réussite aux examens.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-2">Choisissez votre formule</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Un apprentissage adapté à vos besoins et budget</p> |
|
|
<div class="w-20 h-1 bg-green-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> |
|
|
<div class="bg-gray-100 p-6 text-center"> |
|
|
<h3 class="text-xl font-bold">Étudiant</h3> |
|
|
<div class="mt-4"> |
|
|
<span class="text-4xl font-bold">€19</span> |
|
|
<span class="text-gray-600">/mois</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<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>Exercices corrigés</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times text-red-400 mr-2"></i> |
|
|
<span>Sessions en direct</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times text-red-400 mr-2"></i> |
|
|
<span>Support prioritaire</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button onclick="selectPlan('student')" class="w-full bg-gray-300 hover:bg-gray-400 text-gray-800 py-3 rounded-lg font-bold transition"> |
|
|
Choisir |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-green-500 transform scale-105"> |
|
|
<div class="bg-green-500 text-white p-6 text-center"> |
|
|
<div class="flex justify-center mb-2"> |
|
|
<span class="bg-white text-green-600 text-xs font-bold px-3 py-1 rounded-full">Recommandé</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Premium</h3> |
|
|
<div class="mt-4"> |
|
|
<span class="text-4xl font-bold">€49</span> |
|
|
<span class="text-green-100">/mois</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Tous les cours et exercices</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>4 sessions en direct/mois</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Support par email</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Certificats de cours</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button onclick="selectPlan('premium')" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold transition shadow-md glow"> |
|
|
Choisir |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> |
|
|
<div class="bg-gray-800 text-white p-6 text-center"> |
|
|
<h3 class="text-xl font-bold">Professionnel</h3> |
|
|
<div class="mt-4"> |
|
|
<span class="text-4xl font-bold">€99</span> |
|
|
<span class="text-gray-300">/mois</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Tous les avantages Premium</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Sessions illimitées</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Support 24/7</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Mentorat individuel</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button onclick="selectPlan('pro')" class="w-full bg-gray-800 hover:bg-gray-900 text-white py-3 rounded-lg font-bold transition shadow-md"> |
|
|
Choisir |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-2">Témoignages d'étudiants</h2> |
|
|
<div class="w-20 h-1 bg-green-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Marie D." class="w-12 h-12 rounded-full mr-4 object-cover"> |
|
|
<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 projets pratiques sont excellents!"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Jean P." class="w-12 h-12 rounded-full mr-4 object-cover"> |
|
|
<div> |
|
|
<h4 class="font-bold">Jean P.</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">"La qualité des cours de data science est exceptionnelle. J'ai particulièrement apprécié les exercices pratiques avec des datasets réels."</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Sophie L." class="w-12 h-12 rounded-full mr-4 object-cover"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sophie 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 mentorat professionnel m'a aidé à créer un portfolio impressionnant qui a retenu l'attention des recruteurs. Je recommande vivement!"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 gradient-bg text-white relative overflow-hidden"> |
|
|
<div class="absolute inset-0 wave-bg"></div> |
|
|
<div class="container mx-auto px-4 text-center relative z-10"> |
|
|
<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 notre communauté académique dès aujourd'hui.</p> |
|
|
<button onclick="scrollToPricing()" class="bg-white text-green-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition shadow-lg"> |
|
|
<i class="fas fa-rocket mr-2"></i>S'inscrire maintenant |
|
|
</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> |
|
|
<h3 class="text-xl font-bold mb-4"> |
|
|
<i class="fas fa-graduation-cap mr-2"></i>LearnHub |
|
|
</h3> |
|
|
<p class="text-gray-400">L'académie en ligne pour les apprenants ambitieux.</p> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Programmes</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Développement Web</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Data Science</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Marketing Digital</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Design UX/UI</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Ressources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Tutoriels</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-map-marker-alt mr-2"></i> Paris, France |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-envelope mr-2"></i> contact@learnhub.com |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89 |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 LearnHub. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="cartSidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50"> |
|
|
<div class="p-6 h-full flex flex-col"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-xl font-bold"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i>Votre panier |
|
|
</h3> |
|
|
<button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700 transition"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="cartItems" class="flex-grow overflow-y-auto mb-4"> |
|
|
|
|
|
<div class="text-center text-gray-500 py-8"> |
|
|
<i class="fas fa-shopping-cart text-4xl mb-4"></i> |
|
|
<p>Votre panier est vide</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t pt-4"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-bold">Total:</span> |
|
|
<span id="cartTotal" class="font-bold">€0.00</span> |
|
|
</div> |
|
|
<button onclick="checkout()" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold mb-2 shadow-md glow"> |
|
|
<i class="fas fa-lock mr-2"></i>Payer maintenant |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div id="cartOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40" onclick="toggleCart()"></div> |
|
|
|
|
|
|
|
|
<div id="authModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold">Connexion / Inscription</h3> |
|
|
<button onclick="toggleAuthModal()" class="text-gray-500 hover:text-gray-700 transition"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex border-b mb-6"> |
|
|
<button id="loginTab" onclick="switchAuthTab('login')" class="px-4 py-2 font-medium border-b-2 border-green-600 text-green-600">Connexion</button> |
|
|
<button id="registerTab" onclick="switchAuthTab('register')" class="px-4 py-2 font-medium text-gray-500">Inscription</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loginForm"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="loginEmail">Email</label> |
|
|
<input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600 transition"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2" for="loginPassword">Mot de passe</label> |
|
|
<input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600 transition"> |
|
|
</div> |
|
|
<button onclick="login()" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold transition mb-4 shadow-md glow"> |
|
|
Se connecter |
|
|
</button> |
|
|
<div class="text-center"> |
|
|
<a href="#" class="text-green-600 hover:underline">Mot de passe oublié?</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="registerForm" class="hidden"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="registerName">Nom complet</label> |
|
|
<input type="text" id="registerName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600 transition"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="registerEmail">Email</label> |
|
|
<input type="email" id="registerEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600 transition"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2" for="registerPassword">Mot de passe</label> |
|
|
<input type="password" id="registerPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600 transition"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox h-5 w-5 text-green-600 rounded focus:ring-green-500"> |
|
|
<span class="ml-2 text-gray-700">J'accepte les conditions d'utilisation</span> |
|
|
</label> |
|
|
</div> |
|
|
<button onclick="register()" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold transition shadow-md glow"> |
|
|
S'inscrire |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-6 border-t text-center"> |
|
|
<p class="text-gray-600">Ou connectez-vous avec</p> |
|
|
<div class="flex justify-center space-x-4 mt-4"> |
|
|
<button class="bg-blue-800 text-white p-2 rounded-full transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</button> |
|
|
<button class="bg-red-600 text-white p-2 rounded-full transition"> |
|
|
<i class="fab fa-google"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let cart = []; |
|
|
|
|
|
function toggleCart() { |
|
|
const cartSidebar = document.getElementById('cartSidebar'); |
|
|
const cartOverlay = document.getElementById('cartOverlay'); |
|
|
|
|
|
if (cartSidebar.classList.contains('translate-x-full')) { |
|
|
cartSidebar.classList.remove('translate-x-full'); |
|
|
cartOverlay.classList.remove('hidden'); |
|
|
} else { |
|
|
cartSidebar.classList.add('translate-x-full'); |
|
|
cartOverlay.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function addToCart(name, price, id) { |
|
|
cart.push({ name, price, id }); |
|
|
updateCart(); |
|
|
|
|
|
|
|
|
const cartCount = document.getElementById('cartCount'); |
|
|
cartCount.classList.add('animate__animated', 'animate__bounceIn'); |
|
|
setTimeout(() => { |
|
|
cartCount.classList.remove('animate__animated', 'animate__bounceIn'); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function updateCart() { |
|
|
const cartItems = document.getElementById('cartItems'); |
|
|
const cartCount = document.getElementById('cartCount'); |
|
|
const cartTotal = document.getElementById('cartTotal'); |
|
|
|
|
|
cartCount.textContent = cart.length; |
|
|
|
|
|
if (cart.length === 0) { |
|
|
cartItems.innerHTML = ` |
|
|
<div class="text-center text-gray-500 py-8"> |
|
|
<i class="fas fa-shopping-cart text-4xl mb-4"></i> |
|
|
<p>Votre panier est vide</p> |
|
|
</div> |
|
|
`; |
|
|
cartTotal.textContent = '€0.00'; |
|
|
return; |
|
|
} |
|
|
|
|
|
let total = 0; |
|
|
let itemsHTML = ''; |
|
|
|
|
|
cart.forEach(item => { |
|
|
total += item.price; |
|
|
itemsHTML += ` |
|
|
<div class="flex justify-between items-center mb-4 pb-4 border-b"> |
|
|
<div> |
|
|
<h4 class="font-medium">${item.name}</h4> |
|
|
<span class="text-sm text-gray-600">${item.price.toFixed(2)}€</span> |
|
|
</div> |
|
|
<button onclick="removeFromCart('${item.id}')" class="text-red-500 hover:text-red-700"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
cartItems.innerHTML = itemsHTML; |
|
|
cartTotal.textContent = `€${total.toFixed(2)}`; |
|
|
} |
|
|
|
|
|
function removeFromCart(id) { |
|
|
cart = cart.filter(item => item.id !== id); |
|
|
updateCart(); |
|
|
} |
|
|
|
|
|
function checkout() { |
|
|
if (cart.length === 0) return; |
|
|
|
|
|
toggleCart(); |
|
|
setTimeout(() => { |
|
|
document.getElementById('paymentTotal').textContent = document.getElementById('cartTotal').textContent; |
|
|
document.getElementById('paymentModal').classList.remove('hidden'); |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleAuthModal() { |
|
|
const authModal = document.getElementById('authModal'); |
|
|
authModal.classList.toggle('hidden'); |
|
|
} |
|
|
|
|
|
function switchAuthTab(tab) { |
|
|
const loginTab = document.getElementById('loginTab'); |
|
|
const registerTab = document.getElementById('registerTab'); |
|
|
const loginForm = document.getElementById('loginForm'); |
|
|
const registerForm = document.getElementById('registerForm'); |
|
|
|
|
|
if (tab === 'login') { |
|
|
loginTab.classList.add('border-b-2', 'border-green-600', 'text-green-600'); |
|
|
loginTab.classList.remove('text-gray-500'); |
|
|
registerTab.classList.remove('border-b-2', 'border-green-600', 'text-green-600'); |
|
|
registerTab.classList.add('text-gray-500'); |
|
|
loginForm.classList.remove('hidden'); |
|
|
registerForm.classList.add('hidden'); |
|
|
} else { |
|
|
registerTab.classList.add('border-b-2', 'border-green-600', 'text-green-600'); |
|
|
registerTab.classList.remove('text-gray-500'); |
|
|
loginTab.classList.remove('border-b-2', 'border-green-600', 'text-green-600'); |
|
|
loginTab.classList.add('text-gray-500'); |
|
|
registerForm.classList.remove('hidden'); |
|
|
loginForm.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function login() { |
|
|
|
|
|
toggleAuthModal(); |
|
|
setTimeout(() => { |
|
|
document.getElementById('dashboardModal').classList.remove('hidden'); |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
function register() { |
|
|
|
|
|
toggleAuthModal(); |
|
|
setTimeout(() => { |
|
|
alert('Inscription réussie! Veuillez maintenant vous connecter.'); |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
|
|
|
function closePaymentModal() { |
|
|
document.getElementById('paymentModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function switchPaymentTab(tab) { |
|
|
const stripeTab = document.getElementById('stripeTab'); |
|
|
const paypalTab = document.getElementById('paypalTab'); |
|
|
const stripePayment = document.getElementById('stripePayment'); |
|
|
const paypalPayment = document.getElementById('paypalPayment'); |
|
|
|
|
|
if (tab === 'stripe') { |
|
|
stripeTab.classList.add('border-b-2', 'border-green-600', 'text-green-600'); |
|
|
stripeTab.classList.remove('text-gray-500'); |
|
|
paypalTab.classList.remove('border-b-2', 'border-green-600', 'text-green-600'); |
|
|
paypalTab.classList.add('text-gray-500'); |
|
|
stripePayment.classList.remove('hidden'); |
|
|
paypalPayment.classList.add('hidden'); |
|
|
} else { |
|
|
paypalTab.classList.add('border-b-2', 'border-green-600', 'text-green-600'); |
|
|
paypalTab.classList.remove('text-gray-500'); |
|
|
stripeTab.classList.remove('border-b-2', 'border-green-600', 'text-green-600'); |
|
|
stripeTab.classList.add('text-gray-500'); |
|
|
paypalPayment.classList.remove('hidden'); |
|
|
stripePayment.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function processStripePayment() { |
|
|
alert('Paiement Stripe simulé avec succès!'); |
|
|
closePaymentModal(); |
|
|
cart = []; |
|
|
updateCart(); |
|
|
} |
|
|
|
|
|
function processPaypalPayment() { |
|
|
alert('Redirection vers PayPal simulée!'); |
|
|
closePaymentModal(); |
|
|
cart = []; |
|
|
updateCart(); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleMobileMenu() { |
|
|
const mobileMenu = document.getElementById('mobileMenu'); |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function scrollToPricing() { |
|
|
document.getElementById('pricing').scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
|
|
|
function scrollToCourses() { |
|
|
document.getElementById('courses').scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleNotifications() { |
|
|
alert('Notifications simulées'); |
|
|
} |
|
|
|
|
|
function toggleProfileDropdown() { |
|
|
const dropdown = document.getElementById('profileDropdown'); |
|
|
dropdown.classList.toggle('hidden'); |
|
|
} |
|
|
|
|
|
function selectPlan(plan) { |
|
|
alert(`Plan ${plan} sélectionné! Redirection vers le paiement...`); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
updateCart(); |
|
|
}); |
|
|
</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/learnhub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
