|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EduBot - Plateforme de Cours Automatisée</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"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #48bb78 0%, #2f855a 100%); |
|
|
} |
|
|
|
|
|
.course-card { |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
.progress-ring { |
|
|
transition: stroke-dashoffset 0.5s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
|
|
|
.loading-dots::after { |
|
|
content: '.'; |
|
|
animation: dots 1.5s steps(5, end) infinite; |
|
|
} |
|
|
|
|
|
@keyframes dots { |
|
|
0%, 20% { content: '.'; } |
|
|
40% { content: '..'; } |
|
|
60% { content: '...'; } |
|
|
80%, 100% { content: ''; } |
|
|
} |
|
|
|
|
|
.auto-load-container { |
|
|
position: relative; |
|
|
min-height: 200px; |
|
|
} |
|
|
|
|
|
.auto-load-indicator { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 4px; |
|
|
background: linear-gradient(90deg, #48bb78 0%, #38a169 100%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.auto-load-container.loading .auto-load-indicator { |
|
|
opacity: 1; |
|
|
animation: loadingPulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes loadingPulse { |
|
|
0% { opacity: 0.5; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #48bb78 0%, #2f855a 100%); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background: linear-gradient(135deg, #38a169 0%, #2c7e5a 100%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
<h1 class="text-2xl font-bold">Edu<span class="text-yellow-200">Bot</span></h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6 items-center"> |
|
|
<a href="#" class="hover:text-yellow-200 transition">Accueil</a> |
|
|
<a href="#" class="hover:text-yellow-200 transition">Cours</a> |
|
|
<a href="#" class="hover:text-yellow-200 transition">Parcours</a> |
|
|
<a href="#" class="hover:text-yellow-200 transition">Équipe</a> |
|
|
<button class="bg-white text-green-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition"> |
|
|
Connexion |
|
|
</button> |
|
|
</nav> |
|
|
<button class="md:hidden text-xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="gradient-bg 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"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Apprentissage <span class="text-yellow-200">Automatisé</span></h2> |
|
|
<p class="text-xl mb-8">Découvrez des cours adaptatifs générés automatiquement par notre système intelligent.</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<button class="bg-yellow-400 text-gray-900 px-6 py-3 rounded-full font-bold hover:bg-yellow-300 transition flex items-center justify-center"> |
|
|
<i class="fas fa-play mr-2"></i> Voir la démo |
|
|
</button> |
|
|
<button class="bg-white bg-opacity-20 px-6 py-3 rounded-full font-medium hover:bg-opacity-30 transition flex items-center justify-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> En savoir plus |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="w-64 h-64 md:w-80 md:h-80 bg-white bg-opacity-20 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-6xl md:text-8xl text-white"></i> |
|
|
</div> |
|
|
<div class="absolute -bottom-5 -right-5 bg-yellow-400 text-gray-900 px-4 py-2 rounded-full font-bold shadow-lg"> |
|
|
IA <span class="loading-dots"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800">Nos Cours Ribotisés</h2> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="filterAll" class="px-4 py-2 rounded-full bg-green-600 text-white font-medium">Tous</button> |
|
|
<button id="filterTech" class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition">Technologie</button> |
|
|
<button id="filterBusiness" class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition">Business</button> |
|
|
<button id="filterDesign" class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition">Design</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="courseGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-12"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="autoLoadContainer" class="auto-load-container"> |
|
|
<div class="text-center py-8"> |
|
|
<div class="inline-block relative"> |
|
|
<svg class="w-16 h-16" viewBox="0 0 36 36"> |
|
|
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle> |
|
|
<circle class="progress-ring" cx="18" cy="18" r="16" fill="none" stroke="#48bb78" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="100"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-sync-alt text-gray-500 animate-spin"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 text-gray-600">Chargement des cours adaptés à vos besoins...</p> |
|
|
</div> |
|
|
<div class="auto-load-indicator"></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 text-gray-800 mb-16">Comment fonctionne notre système automatisé</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md text-center"> |
|
|
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center text-white text-3xl mb-6 mx-auto"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Analyse Intelligente</h3> |
|
|
<p class="text-gray-600">Notre IA analyse vos préférences et votre historique d'apprentissage pour recommander les meilleurs contenus.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md text-center"> |
|
|
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center text-white text-3xl mb-6 mx-auto"> |
|
|
<i class="fas fa-cogs"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Génération Automatique</h3> |
|
|
<p class="text-gray-600">Les cours sont générés dynamiquement à partir de notre base de connaissances mise à jour en temps réel.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md text-center"> |
|
|
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center text-white text-3xl mb-6 mx-auto"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Adaptation Continue</h3> |
|
|
<p class="text-gray-600">Le système s'ajuste en permanence en fonction de votre progression et des nouvelles tendances pédagogiques.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Ce que disent nos apprenants</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-xl font-bold mr-4"> |
|
|
JD |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Jean Dupont</h4> |
|
|
<p class="text-gray-500 text-sm">Développeur Fullstack</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">"Le système automatisé m'a permis de découvrir des cours parfaitement adaptés à mon niveau et à mes objectifs professionnels. Une révolution dans l'apprentissage en ligne !"</p> |
|
|
<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 class="bg-gray-50 p-8 rounded-xl"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xl font-bold mr-4"> |
|
|
MS |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Marie Simon</h4> |
|
|
<p class="text-gray-500 text-sm">Designer UX/UI</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">"J'ai été impressionnée par la qualité des cours générés automatiquement. Les contenus sont toujours pertinents et parfaitement structurés. Je recommande vivement !"</p> |
|
|
<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> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 gradient-bg text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à révolutionner votre apprentissage ?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Inscrivez-vous maintenant et laissez notre système intelligent vous guider vers les meilleurs contenus pédagogiques.</p> |
|
|
<button class="bg-white text-green-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-lg"> |
|
|
Commencer gratuitement |
|
|
</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 mb-8"> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-robot mr-2"></i> EduBot |
|
|
</h4> |
|
|
<p class="text-gray-400">La plateforme d'apprentissage automatisé nouvelle génération.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Navigation</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Cours</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Parcours</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Prix</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold 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">Documentation</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">Support</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">contact@edubot.com</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">+33 1 23 45 67 89</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">Paris, France</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 EduBot. Tous droits réservés.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<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-linkedin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const courses = [ |
|
|
{ |
|
|
id: 1, |
|
|
title: "Introduction à l'IA", |
|
|
category: "tech", |
|
|
description: "Découvrez les fondamentaux de l'intelligence artificielle et ses applications modernes.", |
|
|
duration: "4h30", |
|
|
level: "Débutant", |
|
|
progress: 65, |
|
|
image: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
active: true |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
title: "Marketing Digital Automatisé", |
|
|
category: "business", |
|
|
description: "Apprenez à automatiser vos campagnes marketing avec les dernières technologies.", |
|
|
duration: "6h", |
|
|
level: "Intermédiaire", |
|
|
progress: 30, |
|
|
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
active: true |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
title: "UI/UX Design Adaptatif", |
|
|
category: "design", |
|
|
description: "Maîtrisez les principes du design adaptatif pour créer des interfaces utilisateur optimales.", |
|
|
duration: "5h15", |
|
|
level: "Avancé", |
|
|
progress: 85, |
|
|
image: "https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
active: true |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
title: "Développement Web Moderne", |
|
|
category: "tech", |
|
|
description: "Apprenez à créer des sites web modernes avec les dernières technologies front-end.", |
|
|
duration: "8h", |
|
|
level: "Intermédiaire", |
|
|
progress: 45, |
|
|
image: "https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
active: true |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
title: "Gestion de Projet Agile", |
|
|
category: "business", |
|
|
description: "Découvrez les méthodologies agiles pour une gestion de projet plus efficace.", |
|
|
duration: "3h45", |
|
|
level: "Débutant", |
|
|
progress: 0, |
|
|
image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
active: true |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
title: "Data Science pour Tous", |
|
|
category: "tech", |
|
|
description: "Introduction à la data science sans prérequis en programmation.", |
|
|
duration: "7h", |
|
|
level: "Débutant", |
|
|
progress: 10, |
|
|
image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
active: true |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
title: "Blockchain et Cryptomonnaies", |
|
|
category: "tech", |
|
|
description: "Comprendre les bases de la blockchain et son application dans les cryptomonnaies.", |
|
|
duration: "5h", |
|
|
level: "Intermédiaire", |
|
|
progress: 20, |
|
|
image: "https://images.unsplash.com/photo-1620891549027-942fdc95d3f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
active: true |
|
|
}, |
|
|
{ |
|
|
id: 8, |
|
|
title: "Growth Hacking", |
|
|
category: "business", |
|
|
description: "Techniques avancées pour accélérer la croissance de votre entreprise.", |
|
|
duration: "4h30", |
|
|
level: "Avancé", |
|
|
progress: 75, |
|
|
image: "https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
active: true |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const courseGrid = document.getElementById('courseGrid'); |
|
|
const autoLoadContainer = document.getElementById('autoLoadContainer'); |
|
|
const filterAll = document.getElementById('filterAll'); |
|
|
const filterTech = document.getElementById('filterTech'); |
|
|
const filterBusiness = document.getElementById('filterBusiness'); |
|
|
const filterDesign = document.getElementById('filterDesign'); |
|
|
|
|
|
|
|
|
let currentFilter = 'all'; |
|
|
|
|
|
|
|
|
function renderCourses(filter = 'all') { |
|
|
courseGrid.innerHTML = ''; |
|
|
|
|
|
const filteredCourses = filter === 'all' |
|
|
? courses.filter(course => course.active) |
|
|
: courses.filter(course => course.category === filter && course.active); |
|
|
|
|
|
filteredCourses.forEach(course => { |
|
|
const progressPercentage = course.progress; |
|
|
const progressCircumference = 2 * Math.PI * 14; |
|
|
const progressOffset = progressCircumference - (progressPercentage / 100) * progressCircumference; |
|
|
|
|
|
const courseCard = document.createElement('div'); |
|
|
courseCard.className = 'course-card bg-white shadow-md'; |
|
|
courseCard.innerHTML = ` |
|
|
<div class="relative"> |
|
|
<img src="${course.image}" alt="${course.title}" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-white bg-opacity-90 px-2 py-1 rounded-full text-xs font-medium"> |
|
|
${course.duration} |
|
|
</div> |
|
|
${course.active ? '<div class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Actif</div>' : ''} |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg text-gray-800">${course.title}</h3> |
|
|
<div class="text-xs px-2 py-1 rounded-full ${getLevelColor(course.level)}"> |
|
|
${course.level} |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-4">${course.description}</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="relative w-8 h-8 mr-3"> |
|
|
<svg class="w-8 h-8" viewBox="0 0 36 36"> |
|
|
<circle cx="18" cy="18" r="14" fill="none" stroke="#e6e6e6" stroke-width="3"></circle> |
|
|
<circle class="progress-ring" cx="18" cy="18" r="14" fill="none" stroke="#48bb78" stroke-width="3" stroke-dasharray="${progressCircumference}" stroke-dashoffset="${progressOffset}"></circle> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center text-xs font-bold"> |
|
|
${progressPercentage}% |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">Progression</span> |
|
|
</div> |
|
|
<button class="text-green-600 hover:text-green-800 transition"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
courseGrid.appendChild(courseCard); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function getLevelColor(level) { |
|
|
switch(level.toLowerCase()) { |
|
|
case 'débutant': return 'bg-green-100 text-green-800'; |
|
|
case 'intermédiaire': return 'bg-blue-100 text-blue-800'; |
|
|
case 'avancé': return 'bg-purple-100 text-purple-800'; |
|
|
default: return 'bg-gray-100 text-gray-800'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
filterAll.addEventListener('click', () => { |
|
|
currentFilter = 'all'; |
|
|
updateFilters(); |
|
|
simulateAutoLoad(); |
|
|
}); |
|
|
|
|
|
filterTech.addEventListener('click', () => { |
|
|
currentFilter = 'tech'; |
|
|
updateFilters(); |
|
|
simulateAutoLoad(); |
|
|
}); |
|
|
|
|
|
filterBusiness.addEventListener('click', () => { |
|
|
currentFilter = 'business'; |
|
|
updateFilters(); |
|
|
simulateAutoLoad(); |
|
|
}); |
|
|
|
|
|
filterDesign.addEventListener('click', () => { |
|
|
currentFilter = 'design'; |
|
|
updateFilters(); |
|
|
simulateAutoLoad(); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateFilters() { |
|
|
filterAll.className = 'px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition'; |
|
|
filterTech.className = 'px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition'; |
|
|
filterBusiness.className = 'px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition'; |
|
|
filterDesign.className = 'px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition'; |
|
|
|
|
|
switch(currentFilter) { |
|
|
case 'all': |
|
|
filterAll.className = 'px-4 py-2 rounded-full bg-green-600 text-white font-medium'; |
|
|
break; |
|
|
case 'tech': |
|
|
filterTech.className = 'px-4 py-2 rounded-full bg-green-600 text-white font-medium'; |
|
|
break; |
|
|
case 'business': |
|
|
filterBusiness.className = 'px-4 py-2 rounded-full bg-green-600 text-white font-medium'; |
|
|
break; |
|
|
case 'design': |
|
|
filterDesign.className = 'px-4 py-2 rounded-full bg-green-600 text-white font-medium'; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function simulateAutoLoad() { |
|
|
autoLoadContainer.classList.add('loading'); |
|
|
|
|
|
setTimeout(() => { |
|
|
renderCourses(currentFilter); |
|
|
autoLoadContainer.classList.remove('loading'); |
|
|
|
|
|
|
|
|
setupObserver(); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
function setupObserver() { |
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
|
|
|
setTimeout(() => { |
|
|
autoLoadContainer.classList.add('loading'); |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
autoLoadContainer.classList.remove('loading'); |
|
|
}, 1000); |
|
|
}, 500); |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
observer.observe(autoLoadContainer); |
|
|
} |
|
|
|
|
|
|
|
|
updateFilters(); |
|
|
simulateAutoLoad(); |
|
|
}); |
|
|
</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/edubot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
