Hugging Face's logo

Spaces:
mlcl-trading
/
afp-module-d-injection
Running

App Files Community
afp-module-d-injection / index.html
cdupland's picture
cdupland
undefined - Initial Deployment
f581007 verified
raw
history blame contribute delete
53 kB
<!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 -->
 <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>
<!-- Hero Section -->
 <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 Content -->
 <main class="container mx-auto px-4 py-12">
 <!-- Guide Section -->
 <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>
<!-- Videos 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>
<!-- Video Filters -->
 <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>
<!-- Video Grid -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="video-container">
 <!-- Video cards will be dynamically filtered -->
 <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>
<!-- <div class="mt-8 text-center">
 <a href="https://drive.google.com/drive/folders/EXAMPLE" target="_blank" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition shadow-md">
 <i class="fas fa-folder-open mr-2"></i> Voir toutes les vidéos sur Drive
 </a>
 </div> -->
 </section>
<!-- Quiz 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">
 <!-- Quiz intro -->
 <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>
<!-- Quiz questions will be loaded here dynamically -->
 <div id="quiz-questions" class="hidden">
 <!-- Will be filled by JavaScript -->
 </div>
<!-- Quiz results -->
 <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">
 <!-- Feedback based on score -->
 </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 -->
 <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>
<!-- Guide Modal -->
 <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>
<!-- Video Modal -->
 <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>
 // Video functionality
 document.addEventListener('DOMContentLoaded', async function() {
 // Format duration from milliseconds to MM:SS
 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`;
 }
 // Fetch videos from API
 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], // Extract Google Drive file ID
 name: video.name, // Get video name from API
 durationMillis: video.videoMediaMetadata.durationMillis // Get video duration
 }));
 } catch (error) {
 console.error('Error fetching videos:', error);
 return [];
 }
 }
 // Generate video cards
 async function generateVideoCards() {
 const videos = await fetchVideos();
 const videoContainer = document.getElementById('video-container');
// Clear existing placeholder cards
 videoContainer.innerHTML = '';
 // Generate cards for each video
 videos.forEach((video, index) => {
 const tags = ['installation', 'configuration', 'utilisation', 'depannage'];
 const tag = tags[index % tags.length]; // Distribute tags evenly
 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');
 }
 // Guide modal functionality
 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 = '';
 }
 });
 // Initialize video functionality
 let videoCards = await generateVideoCards();
 const tagFilters = document.querySelectorAll('.tag-filter');
// Video modal functionality
 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');
// Open modal when clicking on video card or play button
 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';
 }
 });
// Close modal
 closeModalBtn.addEventListener('click', function() {
 videoModal.classList.add('hidden');
 videoPlayer.src = '';
 document.body.style.overflow = '';
 });
// Close modal when clicking on backdrop
 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');
// Update active filter
 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');
 }
// Filter videos
 videoCards.forEach(card => {
 if (tag === 'all' || card.getAttribute('data-tags').includes(tag)) {
 card.style.display = 'block';
 } else {
 card.style.display = 'none';
 }
 });
 });
 });
 // Update video cards reference after generation
 videoCards = document.querySelectorAll('.video-card');
// Update video cards reference after generation
 videoCards = document.querySelectorAll('.video-card');
 // Quiz functionality
 let quizQuestions = [];
// Function to fetch questions from API
 async function fetchQuizQuestions() {
 try {
 const response = await fetch('https://n8n.bziiit.com/webhook/afp-injections-guide');
 const apiResponse = await response.json();
// Transform API data to our quiz format
 const allQuestions = apiResponse.data.map(item => ({
 question: item.question,
 options: [item.A, item.B, item.C, item.D],
 answer: item.reponse.charCodeAt(0) - 65, // Convert 'A' to 0, 'B' to 1 etc.
 explanation: item.col_7 || ""
 }));
// Shuffle questions and select 5 random ones
 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 = [];
// Show loading state
 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 {
 // Fetch questions from API
 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>
 `;
// Add event listeners to options
 const options = document.querySelectorAll('.quiz-option');
 options.forEach(option => {
 option.addEventListener('click', function() {
 // Remove selected class from all options
 options.forEach(opt => {
 opt.querySelector('div div').className = 'w-5 h-5 border border-gray-400 rounded-full mr-3 flex-shrink-0';
 });
// Add selected class to clicked option
 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>';
// Store user answer
 userAnswers[index] = parseInt(this.getAttribute('data-answer'));
 });
 });
// Next question button
 if (index < questions.length - 1) {
 document.getElementById('next-question').addEventListener('click', function() {
 currentQuestion++;
 displayQuestion(questions, currentQuestion);
 });
 }
// Submit quiz button
 if (index === questions.length - 1) {
 document.getElementById('submit-quiz').addEventListener('click', function() {
 showResults(questions);
 });
 }
 }
function showResults(questions) {
 // Calculate score
 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>
 `;
 });
// Show results
 quizQuestionsContainer.classList.add('hidden');
 quizResults.classList.remove('hidden');
// Update score
 quizScore.textContent = score;
// Add feedback based on 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>
 `;
// Add questions and answers
 document.querySelector('#quiz-results').insertAdjacentHTML('beforeend', resultsHtml);
 }
// Smooth scrolling for anchor links
 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'
 });
 }
 });
 });
// Animation on scroll
 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>