|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Module d'Injection - Plateforme de Formation</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> |
|
|
.video-card:hover .video-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
.quiz-option:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<header class="bg-blue-800 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<i class="fas fa-syringe text-3xl mr-3"></i> |
|
|
<h1 class="text-2xl md:text-3xl font-bold">Module d'Injection</h1> |
|
|
</div> |
|
|
<nav class="flex space-x-1 md:space-x-4"> |
|
|
<a href="#guide" class="px-3 py-2 rounded hover:bg-blue-700 transition">Guide</a> |
|
|
<a href="#videos" class="px-3 py-2 rounded hover:bg-blue-700 transition">Vidéos</a> |
|
|
<a href="#quiz" class="px-3 py-2 rounded hover:bg-blue-700 transition">Quiz</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-700 to-blue-900 text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6">Maîtrisez le Module d'Injection</h2> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">L'outil indispensable pour optimiser vos processus métiers</p> |
|
|
<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> |
|
|
<a href="#guide" class="bg-white text-blue-800 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition shadow-lg"> |
|
|
<i class="fas fa-book-open mr-2"></i> Consulter le Guide |
|
|
</a> |
|
|
<a href="#videos" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-500 transition shadow-lg"> |
|
|
<i class="fas fa-play-circle mr-2"></i> Voir les Tutoriels |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<section id="guide" class="mb-20 fade-in"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="h-1 bg-blue-600 w-12 mr-4"></div> |
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-800">Guide d'Utilisation</h2> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/3 bg-blue-50 p-8 flex flex-col justify-center"> |
|
|
<div class="text-center md:text-left"> |
|
|
<i class="fas fa-file-alt text-5xl text-blue-600 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Documentation Complète</h3> |
|
|
<p class="text-gray-600 mb-4">Toutes les informations nécessaires pour prendre en main le Module d'Injection et exploiter toutes ses fonctionnalités.</p> |
|
|
<button id="open-guide-btn" class="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-500 transition"> |
|
|
Consulter le Guide <i class="fas fa-book-open ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-2/3 p-8"> |
|
|
<h4 class="font-semibold text-lg mb-4 text-gray-800">Sections principales :</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>Présentation du Module d'Injection et ses cas d'usage</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>Procédure d'installation et configuration</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>Fonctionnalités avancées et bonnes pratiques</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>Dépannage et FAQ</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> |
|
|
<span>Mises à jour et évolutions</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-4"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-exclamation-circle text-yellow-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm text-yellow-700"> |
|
|
<strong>Important :</strong> Consultez régulièrement le guide pour vous tenir informé des dernières mises à jour. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="videos" class="mb-20 fade-in"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="h-1 bg-blue-600 w-12 mr-4"></div> |
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-800">Tutoriels Vidéos</h2> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-4 mb-8"> |
|
|
<div class="flex flex-wrap items-center"> |
|
|
<span class="mr-3 font-medium text-gray-700">Filtrer par :</span> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button class="tag-filter px-3 py-1 bg-blue-100 text-blue-800 rounded-full hover:bg-blue-200 transition" data-tag="all"> |
|
|
Toutes <span class="bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">12</span> |
|
|
</button> |
|
|
<button class="tag-filter px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition" data-tag="installation"> |
|
|
Installation <span class="bg-gray-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">3</span> |
|
|
</button> |
|
|
<button class="tag-filter px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition" data-tag="configuration"> |
|
|
Configuration <span class="bg-gray-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">4</span> |
|
|
</button> |
|
|
<button class="tag-filter px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition" data-tag="utilisation"> |
|
|
Utilisation <span class="bg-gray-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">3</span> |
|
|
</button> |
|
|
<button class="tag-filter px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition" data-tag="depannage"> |
|
|
Dépannage <span class="bg-gray-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">2</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="video-container"> |
|
|
|
|
|
<div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="installation"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/400x225?text=Installation+1" alt="Installation" class="w-full h-48 object-cover"> |
|
|
<div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300"> |
|
|
<div class="bg-white bg-opacity-90 rounded-full p-3"> |
|
|
<i class="fas fa-play text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="absolute top-3 right-3 bg-blue-600 text-white text-xs px-2 py-1 rounded">Installation</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">Installation du Module - Partie 1</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Découvrez comment installer correctement le Module d'Injection sur votre poste de travail.</p> |
|
|
<div class="flex justify-between items-center text-sm text-gray-500"> |
|
|
<span><i class="far fa-clock mr-1"></i> 8:24 min</span> |
|
|
<a href="https://drive.google.com/file/d/EXAMPLE1" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="configuration"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/400x225?text=Configuration+1" alt="Configuration" class="w-full h-48 object-cover"> |
|
|
<div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300"> |
|
|
<div class="bg-white bg-opacity-90 rounded-full p-3"> |
|
|
<i class="fas fa-play text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="absolute top-3 right-3 bg-green-600 text-white text-xs px-2 py-1 rounded">Configuration</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">Configuration initiale</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Paramétrez le Module d'Injection selon vos besoins spécifiques et votre environnement.</p> |
|
|
<div class="flex justify-between items-center text-sm text-gray-500"> |
|
|
<span><i class="far fa-clock mr-1"></i> 12:45 min</span> |
|
|
<a href="https://drive.google.com/file/d/EXAMPLE2" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="utilisation"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/400x225?text=Utilisation+1" alt="Utilisation" class="w-full h-48 object-cover"> |
|
|
<div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300"> |
|
|
<div class="bg-white bg-opacity-90 rounded-full p-3"> |
|
|
<i class="fas fa-play text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="absolute top-3 right-3 bg-purple-600 text-white text-xs px-2 py-1 rounded">Utilisation</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">Premiers pas avec le Module</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Apprenez les bases de l'utilisation quotidienne du Module d'Injection.</p> |
|
|
<div class="flex justify-between items-center text-sm text-gray-500"> |
|
|
<span><i class="far fa-clock mr-1"></i> 15:10 min</span> |
|
|
<a href="https://drive.google.com/file/d/EXAMPLE3" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="depannage"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/400x225?text=Dépannage+1" alt="Dépannage" class="w-full h-48 object-cover"> |
|
|
<div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300"> |
|
|
<div class="bg-white bg-opacity-90 rounded-full p-3"> |
|
|
<i class="fas fa-play text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded">Dépannage</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">Problèmes courants et solutions</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Résolvez les problèmes les plus fréquents avec le Module d'Injection.</p> |
|
|
<div class="flex justify-between items-center text-sm text-gray-500"> |
|
|
<span><i class="far fa-clock mr-1"></i> 9:32 min</span> |
|
|
<a href="https://drive.google.com/file/d/EXAMPLE4" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="configuration"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/400x225?text=Configuration+2" alt="Configuration" class="w-full h-48 object-cover"> |
|
|
<div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300"> |
|
|
<div class="bg-white bg-opacity-90 rounded-full p-3"> |
|
|
<i class="fas fa-play text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="absolute top-3 right-3 bg-green-600 text-white text-xs px-2 py-1 rounded">Configuration</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">Configuration avancée</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Optimisez les performances du Module avec des paramètres avancés.</p> |
|
|
<div class="flex justify-between items-center text-sm text-gray-500"> |
|
|
<span><i class="far fa-clock mr-1"></i> 18:15 min</span> |
|
|
<a href="https://drive.google.com/file/d/EXAMPLE5" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="utilisation"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/400x225?text=Utilisation+2" alt="Utilisation" class="w-full h-48 object-cover"> |
|
|
<div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300"> |
|
|
<div class="bg-white bg-opacity-90 rounded-full p-3"> |
|
|
<i class="fas fa-play text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="absolute top-3 right-3 bg-purple-600 text-white text-xs px-2 py-1 rounded">Utilisation</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">Fonctionnalités cachées</h3> |
|
|
<p class="text-gray-600 text-sm mb-3">Découvrez des fonctionnalités méconnues mais très utiles du Module.</p> |
|
|
<div class="flex justify-between items-center text-sm text-gray-500"> |
|
|
<span><i class="far fa-clock mr-1"></i> 10:50 min</span> |
|
|
<a href="https://drive.google.com/file/d/EXAMPLE6" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="quiz" class="mb-20 fade-in"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="h-1 bg-blue-600 w-12 mr-4"></div> |
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-800">Testez vos connaissances</h2> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/3 bg-blue-600 text-white p-8 flex flex-col justify-center"> |
|
|
<div class="text-center md:text-left"> |
|
|
<i class="fas fa-question-circle text-5xl mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Quiz du Module d'Injection</h3> |
|
|
<p class="mb-4 opacity-90">Vérifiez votre compréhension du Module avec ce quiz interactif. Les questions sont tirées d'une feuille Google mise à jour régulièrement.</p> |
|
|
<p class="text-sm opacity-80"><i class="fas fa-info-circle mr-1"></i> 5 questions aléatoires parmi une base de 50+</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-2/3 p-8"> |
|
|
<div id="quiz-container"> |
|
|
|
|
|
<div id="quiz-intro" class="text-center"> |
|
|
<i class="fas fa-brain text-5xl text-blue-600 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-3">Prêt à tester vos connaissances ?</h3> |
|
|
<p class="text-gray-600 mb-6">Ce quiz couvre tous les aspects du Module d'Injection, de l'installation aux cas d'usage avancés.</p> |
|
|
<button id="start-quiz" class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition shadow-md"> |
|
|
Commencer le quiz <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
<p class="text-sm text-gray-500 mt-4"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> Les questions sont actualisées chaque semaine |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quiz-questions" class="hidden"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quiz-results" class="hidden text-center"> |
|
|
<div class="mb-6"> |
|
|
<i class="fas fa-trophy text-5xl text-yellow-500 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Résultats du quiz</h3> |
|
|
<p class="text-gray-600">Vous avez obtenu <span id="quiz-score" class="text-2xl font-bold text-blue-600">0</span>/5</p> |
|
|
</div> |
|
|
<div id="quiz-feedback" class="mb-6 p-4 rounded-lg"> |
|
|
|
|
|
</div> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button id="retry-quiz" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition"> |
|
|
<i class="fas fa-redo mr-1"></i> Recommencer |
|
|
</button> |
|
|
<button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-question-circle mr-1"></i> Voir plus de questions |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 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-lg font-semibold mb-4">Module d'Injection</h3> |
|
|
<p class="text-gray-400">L'outil indispensable pour optimiser vos processus métiers et gagner en productivité.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Liens rapides</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#guide" class="text-gray-400 hover:text-white transition">Guide d'utilisation</a></li> |
|
|
<li><a href="#videos" class="text-gray-400 hover:text-white transition">Tutoriels vidéos</a></li> |
|
|
<li><a href="#quiz" class="text-gray-400 hover:text-white transition">Testez vos connaissances</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Ressources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation technique</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">Mises à jour</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Journal des modifications</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Connectez-vous</h3> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-600 transition"> |
|
|
<i class="fab fa-microsoft"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> |
|
|
<i class="fab fa-slack"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-600 transition"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-gray-400 text-sm">© 2023 Module d'Injection. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="guide-modal" class="fixed inset-0 z-50 hidden"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-75"></div> |
|
|
<div class="relative flex items-center justify-center h-full w-full p-4"> |
|
|
<div class="bg-white rounded-lg w-full max-w-6xl h-5/6 overflow-hidden flex flex-col"> |
|
|
<div class="flex justify-between items-center bg-gray-800 text-white px-4 py-3"> |
|
|
<h3 class="text-lg font-medium">Guide d'Utilisation</h3> |
|
|
<button id="close-guide-modal" class="text-white hover:text-gray-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-grow"> |
|
|
<iframe src="https://docs.google.com/document/d/1CEJXl1El1HPnGJOL3PtWmhoupTpn7FYiLKqHfeAj-y0/preview" |
|
|
class="w-full h-full" |
|
|
frameborder="0" |
|
|
allowfullscreen> |
|
|
</iframe> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="video-modal" class="fixed inset-0 z-50 hidden"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-75"></div> |
|
|
<div class="relative flex items-center justify-center h-full w-full p-4"> |
|
|
<div class="bg-white rounded-lg w-full max-w-4xl overflow-hidden"> |
|
|
<div class="flex justify-between items-center bg-gray-800 text-white px-4 py-3"> |
|
|
<h3 class="text-lg font-medium" id="video-modal-title">Titre de la vidéo</h3> |
|
|
<button id="close-modal" class="text-white hover:text-gray-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="aspect-w-16 aspect-h-9"> |
|
|
<iframe id="video-player" class="w-full h-96" frameborder="0" allowfullscreen |
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
|
|
allow="autoplay"> |
|
|
</iframe> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', async function() { |
|
|
|
|
|
function formatDuration(millis) { |
|
|
const totalSeconds = Math.floor(millis / 1000); |
|
|
const minutes = Math.floor(totalSeconds / 60); |
|
|
const seconds = totalSeconds % 60; |
|
|
return `${minutes}:${seconds.toString().padStart(2, '0')} min`; |
|
|
} |
|
|
|
|
|
|
|
|
async function fetchVideos() { |
|
|
try { |
|
|
const response = await fetch('https://n8n.bziiit.com/webhook/afp-injections-videos'); |
|
|
const data = await response.json(); |
|
|
return data.data.map(video => ({ |
|
|
link: video.webViewLink, |
|
|
id: video.webViewLink.split('/')[5], |
|
|
name: video.name, |
|
|
durationMillis: video.videoMediaMetadata.durationMillis |
|
|
})); |
|
|
} catch (error) { |
|
|
console.error('Error fetching videos:', error); |
|
|
return []; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function generateVideoCards() { |
|
|
const videos = await fetchVideos(); |
|
|
const videoContainer = document.getElementById('video-container'); |
|
|
|
|
|
|
|
|
videoContainer.innerHTML = ''; |
|
|
|
|
|
|
|
|
videos.forEach((video, index) => { |
|
|
const tags = ['installation', 'configuration', 'utilisation', 'depannage']; |
|
|
const tag = tags[index % tags.length]; |
|
|
const tagColors = { |
|
|
'installation': 'bg-blue-600', |
|
|
'configuration': 'bg-green-600', |
|
|
'utilisation': 'bg-purple-600', |
|
|
'depannage': 'bg-red-600' |
|
|
}; |
|
|
|
|
|
const card = document.createElement('div'); |
|
|
card.className = 'video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg'; |
|
|
card.setAttribute('data-tags', tag); |
|
|
|
|
|
card.innerHTML = ` |
|
|
<div class="relative"> |
|
|
<img src="https://drive.google.com/thumbnail?id=${video.id}&sz=w400-h225" alt="Video ${index + 1}" class="w-full h-48 object-cover"> |
|
|
<div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300 cursor-pointer"> |
|
|
<div class="bg-white bg-opacity-90 rounded-full p-3"> |
|
|
<i class="fas fa-play text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="absolute top-3 right-3 ${tagColors[tag]} text-white text-xs px-2 py-1 rounded">${tag.charAt(0).toUpperCase() + tag.slice(1)}</span> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">${video.name}</h3> |
|
|
<div class="flex justify-between items-center text-sm text-gray-500"> |
|
|
<span><i class="far fa-clock mr-1"></i> ${formatDuration(video.durationMillis)}</span> |
|
|
<button class="text-blue-600 hover:underline play-video-btn" data-video-id="${video.id}" data-video-title="${video.name}"> |
|
|
Voir la vidéo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
videoContainer.appendChild(card); |
|
|
}); |
|
|
|
|
|
return document.querySelectorAll('.video-card'); |
|
|
} |
|
|
|
|
|
|
|
|
const guideModal = document.getElementById('guide-modal'); |
|
|
const openGuideBtn = document.getElementById('open-guide-btn'); |
|
|
const closeGuideModalBtn = document.getElementById('close-guide-modal'); |
|
|
|
|
|
openGuideBtn.addEventListener('click', function() { |
|
|
guideModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeGuideModalBtn.addEventListener('click', function() { |
|
|
guideModal.classList.add('hidden'); |
|
|
document.body.style.overflow = ''; |
|
|
}); |
|
|
|
|
|
guideModal.addEventListener('click', function(e) { |
|
|
if (e.target === guideModal) { |
|
|
guideModal.classList.add('hidden'); |
|
|
document.body.style.overflow = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
let videoCards = await generateVideoCards(); |
|
|
const tagFilters = document.querySelectorAll('.tag-filter'); |
|
|
|
|
|
|
|
|
const videoModal = document.getElementById('video-modal'); |
|
|
const videoPlayer = document.getElementById('video-player'); |
|
|
const videoModalTitle = document.getElementById('video-modal-title'); |
|
|
const closeModalBtn = document.getElementById('close-modal'); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
const overlayClick = e.target.closest('.video-overlay'); |
|
|
const btnClick = e.target.closest('.play-video-btn'); |
|
|
|
|
|
if (overlayClick) { |
|
|
const card = overlayClick.closest('.video-card'); |
|
|
const btn = card.querySelector('.play-video-btn'); |
|
|
const videoId = btn.getAttribute('data-video-id'); |
|
|
const videoTitle = card.querySelector('h3').textContent; |
|
|
|
|
|
videoModalTitle.textContent = videoTitle; |
|
|
videoPlayer.src = `https://drive.google.com/file/d/${videoId}/preview`; |
|
|
videoModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
if (btnClick) { |
|
|
const videoId = btnClick.getAttribute('data-video-id'); |
|
|
const videoTitle = btnClick.getAttribute('data-video-title'); |
|
|
|
|
|
videoModalTitle.textContent = videoTitle; |
|
|
videoPlayer.src = `https://drive.google.com/file/d/${videoId}/preview`; |
|
|
videoModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
closeModalBtn.addEventListener('click', function() { |
|
|
videoModal.classList.add('hidden'); |
|
|
videoPlayer.src = ''; |
|
|
document.body.style.overflow = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
videoModal.addEventListener('click', function(e) { |
|
|
if (e.target === videoModal) { |
|
|
videoModal.classList.add('hidden'); |
|
|
videoPlayer.src = ''; |
|
|
document.body.style.overflow = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
tagFilters.forEach(filter => { |
|
|
filter.addEventListener('click', function() { |
|
|
const tag = this.getAttribute('data-tag'); |
|
|
|
|
|
|
|
|
tagFilters.forEach(f => { |
|
|
f.classList.remove('bg-blue-100', 'text-blue-800'); |
|
|
f.classList.add('bg-gray-100', 'text-gray-800'); |
|
|
}); |
|
|
|
|
|
if (tag !== 'all') { |
|
|
this.classList.remove('bg-gray-100', 'text-gray-800'); |
|
|
this.classList.add('bg-blue-100', 'text-blue-800'); |
|
|
} else { |
|
|
this.classList.remove('bg-gray-100', 'text-gray-800'); |
|
|
this.classList.add('bg-blue-100', 'text-blue-800'); |
|
|
} |
|
|
|
|
|
|
|
|
videoCards.forEach(card => { |
|
|
if (tag === 'all' || card.getAttribute('data-tags').includes(tag)) { |
|
|
card.style.display = 'block'; |
|
|
} else { |
|
|
card.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
videoCards = document.querySelectorAll('.video-card'); |
|
|
|
|
|
|
|
|
videoCards = document.querySelectorAll('.video-card'); |
|
|
|
|
|
|
|
|
let quizQuestions = []; |
|
|
|
|
|
|
|
|
async function fetchQuizQuestions() { |
|
|
try { |
|
|
const response = await fetch('https://n8n.bziiit.com/webhook/afp-injections-guide'); |
|
|
const apiResponse = await response.json(); |
|
|
|
|
|
|
|
|
const allQuestions = apiResponse.data.map(item => ({ |
|
|
question: item.question, |
|
|
options: [item.A, item.B, item.C, item.D], |
|
|
answer: item.reponse.charCodeAt(0) - 65, |
|
|
explanation: item.col_7 || "" |
|
|
})); |
|
|
|
|
|
|
|
|
const shuffled = [...allQuestions].sort(() => 0.5 - Math.random()); |
|
|
return shuffled.slice(0, 5); |
|
|
} catch (error) { |
|
|
console.error('Error fetching quiz questions:', error); |
|
|
return []; |
|
|
} |
|
|
} |
|
|
|
|
|
const startQuizBtn = document.getElementById('start-quiz'); |
|
|
const quizIntro = document.getElementById('quiz-intro'); |
|
|
const quizQuestionsContainer = document.getElementById('quiz-questions'); |
|
|
const quizResults = document.getElementById('quiz-results'); |
|
|
const quizScore = document.getElementById('quiz-score'); |
|
|
const quizFeedback = document.getElementById('quiz-feedback'); |
|
|
const retryQuizBtn = document.getElementById('retry-quiz'); |
|
|
|
|
|
let currentQuestion = 0; |
|
|
let score = 0; |
|
|
let userAnswers = []; |
|
|
|
|
|
startQuizBtn.addEventListener('click', startQuiz); |
|
|
retryQuizBtn.addEventListener('click', startQuiz); |
|
|
|
|
|
async function startQuiz() { |
|
|
currentQuestion = 0; |
|
|
score = 0; |
|
|
userAnswers = []; |
|
|
|
|
|
|
|
|
quizIntro.classList.add('hidden'); |
|
|
quizResults.classList.add('hidden'); |
|
|
quizQuestionsContainer.innerHTML = ` |
|
|
<div class="text-center py-8"> |
|
|
<i class="fas fa-spinner fa-spin text-3xl text-blue-600 mb-4"></i> |
|
|
<p>Chargement des questions...</p> |
|
|
</div> |
|
|
`; |
|
|
quizQuestionsContainer.classList.remove('hidden'); |
|
|
|
|
|
try { |
|
|
|
|
|
const questions = await fetchQuizQuestions(); |
|
|
|
|
|
if (questions.length === 0) { |
|
|
quizQuestionsContainer.innerHTML = ` |
|
|
<div class="text-center py-8"> |
|
|
<i class="fas fa-exclamation-triangle text-3xl text-yellow-500 mb-4"></i> |
|
|
<p class="text-red-600 mb-4">Aucune question disponible pour le moment.</p> |
|
|
<button onclick="startQuiz()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"> |
|
|
Réessayer |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
displayQuestion(questions, 0); |
|
|
} catch (error) { |
|
|
quizQuestionsContainer.innerHTML = ` |
|
|
<div class="text-center py-8"> |
|
|
<i class="fas fa-exclamation-triangle text-3xl text-yellow-500 mb-4"></i> |
|
|
<p class="text-red-600 mb-4">Erreur lors du chargement des questions.</p> |
|
|
<button onclick="startQuiz()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"> |
|
|
Réessayer |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
function displayQuestion(questions, index) { |
|
|
if (index >= questions.length) { |
|
|
showResults(questions); |
|
|
return; |
|
|
} |
|
|
|
|
|
const question = questions[index]; |
|
|
quizQuestionsContainer.innerHTML = ` |
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<span class="bg-blue-600 text-white text-sm font-medium px-3 py-1 rounded-full">Question ${index + 1}/${questions.length}</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold mb-4">${question.question}</h3> |
|
|
<div class="space-y-3"> |
|
|
${question.options.map((option, i) => ` |
|
|
<div class="quiz-option cursor-pointer p-3 border border-gray-300 rounded-lg hover:border-blue-500 transition-all duration-200" data-answer="${i}"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-5 h-5 border border-gray-400 rounded-full mr-3 flex-shrink-0"></div> |
|
|
<span>${option}</span> |
|
|
</div> |
|
|
</div> |
|
|
`).join('')} |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center pt-4 border-t border-gray-200"> |
|
|
<span class="text-sm text-gray-500">Question ${index + 1} sur ${questions.length}</span> |
|
|
<button id="next-question" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition ${index === questions.length - 1 ? 'hidden' : ''}"> |
|
|
Suivant <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
<button id="submit-quiz" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition ${index === questions.length - 1 ? '' : 'hidden'}"> |
|
|
Terminer <i class="fas fa-check ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
const options = document.querySelectorAll('.quiz-option'); |
|
|
options.forEach(option => { |
|
|
option.addEventListener('click', function() { |
|
|
|
|
|
options.forEach(opt => { |
|
|
opt.querySelector('div div').className = 'w-5 h-5 border border-gray-400 rounded-full mr-3 flex-shrink-0'; |
|
|
}); |
|
|
|
|
|
|
|
|
this.querySelector('div div').className = 'w-5 h-5 border-2 border-blue-600 rounded-full mr-3 flex-shrink-0 flex items-center justify-center'; |
|
|
this.querySelector('div div').innerHTML = '<div class="w-3 h-3 bg-blue-600 rounded-full"></div>'; |
|
|
|
|
|
|
|
|
userAnswers[index] = parseInt(this.getAttribute('data-answer')); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
if (index < questions.length - 1) { |
|
|
document.getElementById('next-question').addEventListener('click', function() { |
|
|
currentQuestion++; |
|
|
displayQuestion(questions, currentQuestion); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
if (index === questions.length - 1) { |
|
|
document.getElementById('submit-quiz').addEventListener('click', function() { |
|
|
showResults(questions); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
function showResults(questions) { |
|
|
|
|
|
score = 0; |
|
|
let resultsHtml = ''; |
|
|
|
|
|
questions.forEach((question, index) => { |
|
|
const userAnswer = userAnswers[index]; |
|
|
const isCorrect = userAnswer === question.answer; |
|
|
|
|
|
if (isCorrect) score++; |
|
|
|
|
|
resultsHtml += ` |
|
|
<div class="mb-6 p-4 border rounded-lg ${isCorrect ? 'border-green-200 bg-green-50' : 'border-red-200 bg-red-50'}"> |
|
|
<div class="flex items-start mb-2"> |
|
|
<div class="mr-3 mt-1 flex-shrink-0"> |
|
|
${isCorrect ? |
|
|
'<i class="fas fa-check-circle text-green-500 text-xl"></i>' : |
|
|
'<i class="fas fa-times-circle text-red-500 text-xl"></i>'} |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">${question.question}</h4> |
|
|
<p class="text-sm mt-1 ${isCorrect ? 'text-green-700' : 'text-red-700'}"> |
|
|
<span class="font-medium">Votre réponse :</span> ${question.options[userAnswer]} |
|
|
</p> |
|
|
${!isCorrect ? ` |
|
|
<p class="text-sm mt-1 text-green-700"> |
|
|
<span class="font-medium">Bonne réponse :</span> ${question.options[question.answer]} |
|
|
</p> |
|
|
` : ''} |
|
|
${question.explanation !== "Consultez le guide pour plus d'informations." ? ` |
|
|
<p class="text-sm mt-2 text-gray-600"> |
|
|
<i class="fas fa-info-circle mr-1"></i> ${question.explanation} |
|
|
</p> |
|
|
` : ''} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
|
|
|
quizQuestionsContainer.classList.add('hidden'); |
|
|
quizResults.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
quizScore.textContent = score; |
|
|
|
|
|
|
|
|
let feedbackText = ''; |
|
|
let feedbackClass = ''; |
|
|
|
|
|
if (score === questions.length) { |
|
|
feedbackText = 'Excellent ! Vous maîtrisez parfaitement le Module d\'Injection.'; |
|
|
feedbackClass = 'bg-green-100 text-green-800'; |
|
|
} else if (score >= questions.length * 0.7) { |
|
|
feedbackText = 'Bien joué ! Vous avez de bonnes connaissances du Module.'; |
|
|
feedbackClass = 'bg-blue-100 text-blue-800'; |
|
|
} else if (score >= questions.length * 0.4) { |
|
|
feedbackText = 'Pas mal ! Pensez à revoir certains aspects du Module.'; |
|
|
feedbackClass = 'bg-yellow-100 text-yellow-800'; |
|
|
} else { |
|
|
feedbackText = 'À travailler... Consultez le guide et les tutoriels pour améliorer vos connaissances.'; |
|
|
feedbackClass = 'bg-red-100 text-red-800'; |
|
|
} |
|
|
|
|
|
quizFeedback.className = feedbackClass + ' p-4 rounded-lg'; |
|
|
quizFeedback.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-3"> |
|
|
${score === questions.length ? |
|
|
'<i class="fas fa-trophy text-2xl"></i>' : |
|
|
score >= questions.length * 0.7 ? |
|
|
'<i class="fas fa-thumbs-up text-2xl"></i>' : |
|
|
score >= questions.length * 0.4 ? |
|
|
'<i class="fas fa-lightbulb text-2xl"></i>' : |
|
|
'<i class="fas fa-book text-2xl"></i>'} |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">${feedbackText}</p> |
|
|
${score < questions.length ? |
|
|
'<p class="text-sm mt-1">Nous vous recommandons de revoir : ' + |
|
|
questions.filter((q, i) => userAnswers[i] !== q.answer).map(q => q.question).join(', ') + '</p>' : ''} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
document.querySelector('#quiz-results').insertAdjacentHTML('beforeend', resultsHtml); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const fadeElements = document.querySelectorAll('.fade-in'); |
|
|
|
|
|
const fadeInObserver = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate-fadeIn'); |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
fadeElements.forEach(element => { |
|
|
fadeInObserver.observe(element); |
|
|
}); |
|
|
}); |
|
|
</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=cdupland/afp-module-d-injection" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
