Hugging Face's logo

Spaces:
cdupland
/
afp-module-d-injection
Running

App Files Community
afp-module-d-injection / index.html
AUTO-FRANCE-PARTS
Comment out the "Voir plus de questions" button and remove the explanation display for certain questions in index.html
792381f
raw
history blame contribute delete
53.1 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-white text-[#272727] 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">
<img src="https://lirp.cdn-website.com/ab4972b2/dms3rep/multi/opt/logo-auto-france-parts-2022-362w.png" alt="Logo Module d'Injection" class="h-12 md:h-16 mr-4">
<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-[#272727] hover:text-white transition">Guide</a>
<a href="#videos" class="px-3 py-2 rounded hover:bg-[#272727] hover:text-white transition">Vidéos</a>
<a href="#quiz" class="px-3 py-2 rounded hover:bg-[#272727] hover:text-white transition">Quiz</a>
</nav>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-[#272727] 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-[#272727] 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-[#FE0F0E] text-white px-6 py-3 rounded-lg font-semibold hover:bg-[#e00d0c] 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-[#FE0F0E] 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 border border-gray-200">
<div class="md:flex">
<div class="md:w-1/3 bg-gray-100 p-8 flex flex-col justify-center">
<div class="text-center md:text-left">
<i class="fas fa-file-alt text-5xl text-[#FE0F0E] 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-[#FE0F0E] text-white px-6 py-2 rounded-lg hover:bg-[#e00d0c] 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-[#FE0F0E] 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-gray-200 text-[#272727] rounded-full hover:bg-gray-300 transition" data-tag="all">
Toutes <span class="bg-gray-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-[#272727] 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-[#272727] 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-[#272727] 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-[#272727] 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-[#FE0F0E] 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-[#272727] 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</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-[#FE0F0E] 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-[#FE0F0E] text-white rounded-lg hover:bg-[#e00d0c] 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-[#FE0F0E]">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-[#FE0F0E] text-white rounded-lg hover:bg-[#e00d0c] 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-[#272727] text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="md:col-span-2">
<h3 class="text-lg font-semibold mb-4">Module d'Injection</h3>
<p class="text-gray-400 mb-6">L'outil indispensable pour optimiser vos processus métiers et gagner en productivité.</p>
<div class="flex flex-wrap gap-4">
<a href="#guide" class="text-gray-400 hover:text-white transition flex items-center">
<i class="fas fa-book-open mr-2"></i> Guide d'utilisation
</a>
<a href="#videos" class="text-gray-400 hover:text-white transition flex items-center">
<i class="fas fa-play-circle mr-2"></i> Tutoriels vidéos
</a>
<a href="#quiz" class="text-gray-400 hover:text-white transition flex items-center">
<i class="fas fa-question-circle mr-2"></i> Testez vos connaissances
</a>
</div>
<p class="text-gray-400 text-sm mt-6">© 2025 Module d'Injection. Tous droits réservés.</p>
</div>
<!-- <div class="md:text-right">
<h3 class="text-lg font-semibold mb-4">Contact</h3>
<p class="text-gray-400 text-sm mb-4">Besoin d'aide ? Contactez notre équipe support.</p>
<div class="flex md:justify-end space-x-4 mb-4">
<a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#FE0F0E] transition">
<i class="fas fa-envelope"></i>
</a>
<a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#FE0F0E] transition">
<i class="fas fa-phone"></i>
</a>
</div>
<p class="text-gray-400 text-sm">© 2025 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 = '';
// Sort videos alphabetically by name
const sortedVideos = videos.sort((a, b) => a.name.localeCompare(b.name, 'fr', { sensitivity: 'base' }));
// Generate cards for each video
sortedVideos.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>
</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-[#FE0F0E] 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-[#FE0F0E] text-white rounded hover:bg-[#e00d0c]">
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-[#FE0F0E] text-white rounded hover:bg-[#e00d0c]">
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-[#FE0F0E] 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="radio-btn w-5 h-5 border border-gray-400 rounded-full mr-3 flex-shrink-0"></div>
<span class="flex-1">${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-[#FE0F0E] text-white rounded-lg hover:bg-[#e00d0c] 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 => {
const radioBtn = opt.querySelector('.radio-btn');
radioBtn.className = 'radio-btn w-5 h-5 border border-gray-400 rounded-full mr-3 flex-shrink-0';
radioBtn.innerHTML = '';
});
// Add selected class to clicked option
const radioBtn = this.querySelector('.radio-btn');
radioBtn.className = 'radio-btn w-5 h-5 border-2 border-blue-600 rounded-full mr-3 flex-shrink-0 flex items-center justify-center';
radioBtn.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>
` : ''}
</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>