Hugging Face's logo

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

App Files Community
cdupland commited on
Commit
f581007
·
verified ·
1 Parent(s): 4f3df12

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +905 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Afp Module D Injection
3
- emoji: 🦀
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: afp-module-d-injection
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,905 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Module d'Injection - Plateforme de Formation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .video-card:hover .video-overlay {
11
+ opacity: 1;
12
+ }
13
+ .quiz-option:hover {
14
+ transform: translateY(-2px);
15
+ }
16
+ .fade-in {
17
+ animation: fadeIn 0.5s ease-in-out;
18
+ }
19
+ @keyframes fadeIn {
20
+ from { opacity: 0; }
21
+ to { opacity: 1; }
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50 font-sans">
26
+ <!-- Header -->
27
+ <header class="bg-blue-800 text-white shadow-lg">
28
+ <div class="container mx-auto px-4 py-6">
29
+ <div class="flex flex-col md:flex-row justify-between items-center">
30
+ <div class="flex items-center mb-4 md:mb-0">
31
+ <i class="fas fa-syringe text-3xl mr-3"></i>
32
+ <h1 class="text-2xl md:text-3xl font-bold">Module d'Injection</h1>
33
+ </div>
34
+ <nav class="flex space-x-1 md:space-x-4">
35
+ <a href="#guide" class="px-3 py-2 rounded hover:bg-blue-700 transition">Guide</a>
36
+ <a href="#videos" class="px-3 py-2 rounded hover:bg-blue-700 transition">Vidéos</a>
37
+ <a href="#quiz" class="px-3 py-2 rounded hover:bg-blue-700 transition">Quiz</a>
38
+ </nav>
39
+ </div>
40
+ </div>
41
+ </header>
42
+
43
+ <!-- Hero Section -->
44
+ <section class="bg-gradient-to-r from-blue-700 to-blue-900 text-white py-16">
45
+ <div class="container mx-auto px-4 text-center">
46
+ <h2 class="text-3xl md:text-5xl font-bold mb-6">Maîtrisez le Module d'Injection</h2>
47
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">L'outil indispensable pour optimiser vos processus métiers</p>
48
+ <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6">
49
+ <a href="#guide" class="bg-white text-blue-800 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition shadow-lg">
50
+ <i class="fas fa-book-open mr-2"></i> Consulter le Guide
51
+ </a>
52
+ <a href="#videos" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-500 transition shadow-lg">
53
+ <i class="fas fa-play-circle mr-2"></i> Voir les Tutoriels
54
+ </a>
55
+ </div>
56
+ </div>
57
+ </section>
58
+
59
+ <!-- Main Content -->
60
+ <main class="container mx-auto px-4 py-12">
61
+ <!-- Guide Section -->
62
+ <section id="guide" class="mb-20 fade-in">
63
+ <div class="flex items-center mb-8">
64
+ <div class="h-1 bg-blue-600 w-12 mr-4"></div>
65
+ <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Guide d'Utilisation</h2>
66
+ </div>
67
+
68
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
69
+ <div class="md:flex">
70
+ <div class="md:w-1/3 bg-blue-50 p-8 flex flex-col justify-center">
71
+ <div class="text-center md:text-left">
72
+ <i class="fas fa-file-alt text-5xl text-blue-600 mb-4"></i>
73
+ <h3 class="text-xl font-semibold mb-2">Documentation Complète</h3>
74
+ <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>
75
+ <button id="open-guide-btn" class="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-500 transition">
76
+ Consulter le Guide <i class="fas fa-book-open ml-2"></i>
77
+ </button>
78
+ </div>
79
+ </div>
80
+ <div class="md:w-2/3 p-8">
81
+ <h4 class="font-semibold text-lg mb-4 text-gray-800">Sections principales :</h4>
82
+ <ul class="space-y-3">
83
+ <li class="flex items-start">
84
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
85
+ <span>Présentation du Module d'Injection et ses cas d'usage</span>
86
+ </li>
87
+ <li class="flex items-start">
88
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
89
+ <span>Procédure d'installation et configuration</span>
90
+ </li>
91
+ <li class="flex items-start">
92
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
93
+ <span>Fonctionnalités avancées et bonnes pratiques</span>
94
+ </li>
95
+ <li class="flex items-start">
96
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
97
+ <span>Dépannage et FAQ</span>
98
+ </li>
99
+ <li class="flex items-start">
100
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
101
+ <span>Mises à jour et évolutions</span>
102
+ </li>
103
+ </ul>
104
+
105
+ <div class="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-4">
106
+ <div class="flex">
107
+ <div class="flex-shrink-0">
108
+ <i class="fas fa-exclamation-circle text-yellow-500"></i>
109
+ </div>
110
+ <div class="ml-3">
111
+ <p class="text-sm text-yellow-700">
112
+ <strong>Important :</strong> Consultez régulièrement le guide pour vous tenir informé des dernières mises à jour.
113
+ </p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- Videos Section -->
123
+ <section id="videos" class="mb-20 fade-in">
124
+ <div class="flex items-center mb-8">
125
+ <div class="h-1 bg-blue-600 w-12 mr-4"></div>
126
+ <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Tutoriels Vidéos</h2>
127
+ </div>
128
+
129
+ <!-- Video Filters -->
130
+ <div class="bg-white rounded-lg shadow-md p-4 mb-8">
131
+ <div class="flex flex-wrap items-center">
132
+ <span class="mr-3 font-medium text-gray-700">Filtrer par :</span>
133
+ <div class="flex flex-wrap gap-2">
134
+ <button class="tag-filter px-3 py-1 bg-blue-100 text-blue-800 rounded-full hover:bg-blue-200 transition" data-tag="all">
135
+ Toutes <span class="bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">12</span>
136
+ </button>
137
+ <button class="tag-filter px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition" data-tag="installation">
138
+ Installation <span class="bg-gray-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">3</span>
139
+ </button>
140
+ <button class="tag-filter px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition" data-tag="configuration">
141
+ Configuration <span class="bg-gray-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">4</span>
142
+ </button>
143
+ <button class="tag-filter px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition" data-tag="utilisation">
144
+ Utilisation <span class="bg-gray-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">3</span>
145
+ </button>
146
+ <button class="tag-filter px-3 py-1 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition" data-tag="depannage">
147
+ Dépannage <span class="bg-gray-600 text-white text-xs px-2 py-0.5 rounded-full ml-1">2</span>
148
+ </button>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Video Grid -->
154
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="video-container">
155
+ <!-- Video cards will be dynamically filtered -->
156
+ <div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="installation">
157
+ <div class="relative">
158
+ <img src="https://via.placeholder.com/400x225?text=Installation+1" alt="Installation" class="w-full h-48 object-cover">
159
+ <div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300">
160
+ <div class="bg-white bg-opacity-90 rounded-full p-3">
161
+ <i class="fas fa-play text-blue-600 text-xl"></i>
162
+ </div>
163
+ </div>
164
+ <span class="absolute top-3 right-3 bg-blue-600 text-white text-xs px-2 py-1 rounded">Installation</span>
165
+ </div>
166
+ <div class="p-4">
167
+ <h3 class="font-semibold text-lg mb-2">Installation du Module - Partie 1</h3>
168
+ <p class="text-gray-600 text-sm mb-3">Découvrez comment installer correctement le Module d'Injection sur votre poste de travail.</p>
169
+ <div class="flex justify-between items-center text-sm text-gray-500">
170
+ <span><i class="far fa-clock mr-1"></i> 8:24 min</span>
171
+ <a href="https://drive.google.com/file/d/EXAMPLE1" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="configuration">
177
+ <div class="relative">
178
+ <img src="https://via.placeholder.com/400x225?text=Configuration+1" alt="Configuration" class="w-full h-48 object-cover">
179
+ <div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300">
180
+ <div class="bg-white bg-opacity-90 rounded-full p-3">
181
+ <i class="fas fa-play text-blue-600 text-xl"></i>
182
+ </div>
183
+ </div>
184
+ <span class="absolute top-3 right-3 bg-green-600 text-white text-xs px-2 py-1 rounded">Configuration</span>
185
+ </div>
186
+ <div class="p-4">
187
+ <h3 class="font-semibold text-lg mb-2">Configuration initiale</h3>
188
+ <p class="text-gray-600 text-sm mb-3">Paramétrez le Module d'Injection selon vos besoins spécifiques et votre environnement.</p>
189
+ <div class="flex justify-between items-center text-sm text-gray-500">
190
+ <span><i class="far fa-clock mr-1"></i> 12:45 min</span>
191
+ <a href="https://drive.google.com/file/d/EXAMPLE2" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="utilisation">
197
+ <div class="relative">
198
+ <img src="https://via.placeholder.com/400x225?text=Utilisation+1" alt="Utilisation" class="w-full h-48 object-cover">
199
+ <div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300">
200
+ <div class="bg-white bg-opacity-90 rounded-full p-3">
201
+ <i class="fas fa-play text-blue-600 text-xl"></i>
202
+ </div>
203
+ </div>
204
+ <span class="absolute top-3 right-3 bg-purple-600 text-white text-xs px-2 py-1 rounded">Utilisation</span>
205
+ </div>
206
+ <div class="p-4">
207
+ <h3 class="font-semibold text-lg mb-2">Premiers pas avec le Module</h3>
208
+ <p class="text-gray-600 text-sm mb-3">Apprenez les bases de l'utilisation quotidienne du Module d'Injection.</p>
209
+ <div class="flex justify-between items-center text-sm text-gray-500">
210
+ <span><i class="far fa-clock mr-1"></i> 15:10 min</span>
211
+ <a href="https://drive.google.com/file/d/EXAMPLE3" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="depannage">
217
+ <div class="relative">
218
+ <img src="https://via.placeholder.com/400x225?text=Dépannage+1" alt="Dépannage" class="w-full h-48 object-cover">
219
+ <div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300">
220
+ <div class="bg-white bg-opacity-90 rounded-full p-3">
221
+ <i class="fas fa-play text-blue-600 text-xl"></i>
222
+ </div>
223
+ </div>
224
+ <span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded">Dépannage</span>
225
+ </div>
226
+ <div class="p-4">
227
+ <h3 class="font-semibold text-lg mb-2">Problèmes courants et solutions</h3>
228
+ <p class="text-gray-600 text-sm mb-3">Résolvez les problèmes les plus fréquents avec le Module d'Injection.</p>
229
+ <div class="flex justify-between items-center text-sm text-gray-500">
230
+ <span><i class="far fa-clock mr-1"></i> 9:32 min</span>
231
+ <a href="https://drive.google.com/file/d/EXAMPLE4" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="configuration">
237
+ <div class="relative">
238
+ <img src="https://via.placeholder.com/400x225?text=Configuration+2" alt="Configuration" class="w-full h-48 object-cover">
239
+ <div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300">
240
+ <div class="bg-white bg-opacity-90 rounded-full p-3">
241
+ <i class="fas fa-play text-blue-600 text-xl"></i>
242
+ </div>
243
+ </div>
244
+ <span class="absolute top-3 right-3 bg-green-600 text-white text-xs px-2 py-1 rounded">Configuration</span>
245
+ </div>
246
+ <div class="p-4">
247
+ <h3 class="font-semibold text-lg mb-2">Configuration avancée</h3>
248
+ <p class="text-gray-600 text-sm mb-3">Optimisez les performances du Module avec des paramètres avancés.</p>
249
+ <div class="flex justify-between items-center text-sm text-gray-500">
250
+ <span><i class="far fa-clock mr-1"></i> 18:15 min</span>
251
+ <a href="https://drive.google.com/file/d/EXAMPLE5" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg" data-tags="utilisation">
257
+ <div class="relative">
258
+ <img src="https://via.placeholder.com/400x225?text=Utilisation+2" alt="Utilisation" class="w-full h-48 object-cover">
259
+ <div class="video-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 transition-opacity duration-300">
260
+ <div class="bg-white bg-opacity-90 rounded-full p-3">
261
+ <i class="fas fa-play text-blue-600 text-xl"></i>
262
+ </div>
263
+ </div>
264
+ <span class="absolute top-3 right-3 bg-purple-600 text-white text-xs px-2 py-1 rounded">Utilisation</span>
265
+ </div>
266
+ <div class="p-4">
267
+ <h3 class="font-semibold text-lg mb-2">Fonctionnalités cachées</h3>
268
+ <p class="text-gray-600 text-sm mb-3">Découvrez des fonctionnalités méconnues mais très utiles du Module.</p>
269
+ <div class="flex justify-between items-center text-sm text-gray-500">
270
+ <span><i class="far fa-clock mr-1"></i> 10:50 min</span>
271
+ <a href="https://drive.google.com/file/d/EXAMPLE6" target="_blank" class="text-blue-600 hover:underline">Voir la vidéo</a>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- <div class="mt-8 text-center">
278
+ <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">
279
+ <i class="fas fa-folder-open mr-2"></i> Voir toutes les vidéos sur Drive
280
+ </a>
281
+ </div> -->
282
+ </section>
283
+
284
+ <!-- Quiz Section -->
285
+ <section id="quiz" class="mb-20 fade-in">
286
+ <div class="flex items-center mb-8">
287
+ <div class="h-1 bg-blue-600 w-12 mr-4"></div>
288
+ <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Testez vos connaissances</h2>
289
+ </div>
290
+
291
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
292
+ <div class="md:flex">
293
+ <div class="md:w-1/3 bg-blue-600 text-white p-8 flex flex-col justify-center">
294
+ <div class="text-center md:text-left">
295
+ <i class="fas fa-question-circle text-5xl mb-4"></i>
296
+ <h3 class="text-xl font-semibold mb-2">Quiz du Module d'Injection</h3>
297
+ <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>
298
+ <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>
299
+ </div>
300
+ </div>
301
+ <div class="md:w-2/3 p-8">
302
+ <div id="quiz-container">
303
+ <!-- Quiz intro -->
304
+ <div id="quiz-intro" class="text-center">
305
+ <i class="fas fa-brain text-5xl text-blue-600 mb-4"></i>
306
+ <h3 class="text-xl font-semibold mb-3">Prêt à tester vos connaissances ?</h3>
307
+ <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>
308
+ <button id="start-quiz" class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition shadow-md">
309
+ Commencer le quiz <i class="fas fa-arrow-right ml-2"></i>
310
+ </button>
311
+ <p class="text-sm text-gray-500 mt-4">
312
+ <i class="fas fa-sync-alt mr-1"></i> Les questions sont actualisées chaque semaine
313
+ </p>
314
+ </div>
315
+
316
+ <!-- Quiz questions will be loaded here dynamically -->
317
+ <div id="quiz-questions" class="hidden">
318
+ <!-- Will be filled by JavaScript -->
319
+ </div>
320
+
321
+ <!-- Quiz results -->
322
+ <div id="quiz-results" class="hidden text-center">
323
+ <div class="mb-6">
324
+ <i class="fas fa-trophy text-5xl text-yellow-500 mb-4"></i>
325
+ <h3 class="text-xl font-semibold mb-2">Résultats du quiz</h3>
326
+ <p class="text-gray-600">Vous avez obtenu <span id="quiz-score" class="text-2xl font-bold text-blue-600">0</span>/5</p>
327
+ </div>
328
+ <div id="quiz-feedback" class="mb-6 p-4 rounded-lg">
329
+ <!-- Feedback based on score -->
330
+ </div>
331
+ <div class="flex justify-center space-x-4">
332
+ <button id="retry-quiz" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition">
333
+ <i class="fas fa-redo mr-1"></i> Recommencer
334
+ </button>
335
+ <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
336
+ <i class="fas fa-question-circle mr-1"></i> Voir plus de questions
337
+ </button>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </section>
345
+
346
+ </main>
347
+
348
+ <!-- Footer -->
349
+ <footer class="bg-gray-800 text-white py-12">
350
+ <div class="container mx-auto px-4">
351
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
352
+ <div>
353
+ <h3 class="text-lg font-semibold mb-4">Module d'Injection</h3>
354
+ <p class="text-gray-400">L'outil indispensable pour optimiser vos processus métiers et gagner en productivité.</p>
355
+ </div>
356
+ <div>
357
+ <h3 class="text-lg font-semibold mb-4">Liens rapides</h3>
358
+ <ul class="space-y-2">
359
+ <li><a href="#guide" class="text-gray-400 hover:text-white transition">Guide d'utilisation</a></li>
360
+ <li><a href="#videos" class="text-gray-400 hover:text-white transition">Tutoriels vidéos</a></li>
361
+ <li><a href="#quiz" class="text-gray-400 hover:text-white transition">Testez vos connaissances</a></li>
362
+ </ul>
363
+ </div>
364
+ <div>
365
+ <h3 class="text-lg font-semibold mb-4">Ressources</h3>
366
+ <ul class="space-y-2">
367
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation technique</a></li>
368
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
369
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mises à jour</a></li>
370
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Journal des modifications</a></li>
371
+ </ul>
372
+ </div>
373
+ <div>
374
+ <h3 class="text-lg font-semibold mb-4">Connectez-vous</h3>
375
+ <div class="flex space-x-4 mb-4">
376
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
377
+ <i class="fab fa-microsoft"></i>
378
+ </a>
379
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-500 transition">
380
+ <i class="fab fa-slack"></i>
381
+ </a>
382
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-600 transition">
383
+ <i class="fab fa-youtube"></i>
384
+ </a>
385
+ </div>
386
+ <p class="text-gray-400 text-sm">© 2023 Module d'Injection. Tous droits réservés.</p>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </footer>
391
+
392
+ <!-- Guide Modal -->
393
+ <div id="guide-modal" class="fixed inset-0 z-50 hidden">
394
+ <div class="absolute inset-0 bg-black bg-opacity-75"></div>
395
+ <div class="relative flex items-center justify-center h-full w-full p-4">
396
+ <div class="bg-white rounded-lg w-full max-w-6xl h-5/6 overflow-hidden flex flex-col">
397
+ <div class="flex justify-between items-center bg-gray-800 text-white px-4 py-3">
398
+ <h3 class="text-lg font-medium">Guide d'Utilisation</h3>
399
+ <button id="close-guide-modal" class="text-white hover:text-gray-300">
400
+ <i class="fas fa-times"></i>
401
+ </button>
402
+ </div>
403
+ <div class="flex-grow">
404
+ <iframe src="https://docs.google.com/document/d/1CEJXl1El1HPnGJOL3PtWmhoupTpn7FYiLKqHfeAj-y0/preview"
405
+ class="w-full h-full"
406
+ frameborder="0"
407
+ allowfullscreen>
408
+ </iframe>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Video Modal -->
415
+ <div id="video-modal" class="fixed inset-0 z-50 hidden">
416
+ <div class="absolute inset-0 bg-black bg-opacity-75"></div>
417
+ <div class="relative flex items-center justify-center h-full w-full p-4">
418
+ <div class="bg-white rounded-lg w-full max-w-4xl overflow-hidden">
419
+ <div class="flex justify-between items-center bg-gray-800 text-white px-4 py-3">
420
+ <h3 class="text-lg font-medium" id="video-modal-title">Titre de la vidéo</h3>
421
+ <button id="close-modal" class="text-white hover:text-gray-300">
422
+ <i class="fas fa-times"></i>
423
+ </button>
424
+ </div>
425
+ <div class="aspect-w-16 aspect-h-9">
426
+ <iframe id="video-player" class="w-full h-96" frameborder="0" allowfullscreen
427
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
428
+ allow="autoplay">
429
+ </iframe>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <script>
436
+ // Video functionality
437
+ document.addEventListener('DOMContentLoaded', async function() {
438
+ // Format duration from milliseconds to MM:SS
439
+ function formatDuration(millis) {
440
+ const totalSeconds = Math.floor(millis / 1000);
441
+ const minutes = Math.floor(totalSeconds / 60);
442
+ const seconds = totalSeconds % 60;
443
+ return `${minutes}:${seconds.toString().padStart(2, '0')} min`;
444
+ }
445
+
446
+ // Fetch videos from API
447
+ async function fetchVideos() {
448
+ try {
449
+ const response = await fetch('https://n8n.bziiit.com/webhook/afp-injections-videos');
450
+ const data = await response.json();
451
+ return data.data.map(video => ({
452
+ link: video.webViewLink,
453
+ id: video.webViewLink.split('/')[5], // Extract Google Drive file ID
454
+ name: video.name, // Get video name from API
455
+ durationMillis: video.videoMediaMetadata.durationMillis // Get video duration
456
+ }));
457
+ } catch (error) {
458
+ console.error('Error fetching videos:', error);
459
+ return [];
460
+ }
461
+ }
462
+
463
+ // Generate video cards
464
+ async function generateVideoCards() {
465
+ const videos = await fetchVideos();
466
+ const videoContainer = document.getElementById('video-container');
467
+
468
+ // Clear existing placeholder cards
469
+ videoContainer.innerHTML = '';
470
+
471
+ // Generate cards for each video
472
+ videos.forEach((video, index) => {
473
+ const tags = ['installation', 'configuration', 'utilisation', 'depannage'];
474
+ const tag = tags[index % tags.length]; // Distribute tags evenly
475
+ const tagColors = {
476
+ 'installation': 'bg-blue-600',
477
+ 'configuration': 'bg-green-600',
478
+ 'utilisation': 'bg-purple-600',
479
+ 'depannage': 'bg-red-600'
480
+ };
481
+
482
+ const card = document.createElement('div');
483
+ card.className = 'video-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg';
484
+ card.setAttribute('data-tags', tag);
485
+
486
+ card.innerHTML = `
487
+ <div class="relative">
488
+ <img src="https://drive.google.com/thumbnail?id=${video.id}&sz=w400-h225" alt="Video ${index + 1}" class="w-full h-48 object-cover">
489
+ <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">
490
+ <div class="bg-white bg-opacity-90 rounded-full p-3">
491
+ <i class="fas fa-play text-blue-600 text-xl"></i>
492
+ </div>
493
+ </div>
494
+ <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>
495
+ </div>
496
+ <div class="p-4">
497
+ <h3 class="font-semibold text-lg mb-2">${video.name}</h3>
498
+ <div class="flex justify-between items-center text-sm text-gray-500">
499
+ <span><i class="far fa-clock mr-1"></i> ${formatDuration(video.durationMillis)}</span>
500
+ <button class="text-blue-600 hover:underline play-video-btn" data-video-id="${video.id}" data-video-title="${video.name}">
501
+ Voir la vidéo
502
+ </button>
503
+ </div>
504
+ </div>
505
+ `;
506
+
507
+ videoContainer.appendChild(card);
508
+ });
509
+
510
+ return document.querySelectorAll('.video-card');
511
+ }
512
+
513
+ // Guide modal functionality
514
+ const guideModal = document.getElementById('guide-modal');
515
+ const openGuideBtn = document.getElementById('open-guide-btn');
516
+ const closeGuideModalBtn = document.getElementById('close-guide-modal');
517
+
518
+ openGuideBtn.addEventListener('click', function() {
519
+ guideModal.classList.remove('hidden');
520
+ document.body.style.overflow = 'hidden';
521
+ });
522
+
523
+ closeGuideModalBtn.addEventListener('click', function() {
524
+ guideModal.classList.add('hidden');
525
+ document.body.style.overflow = '';
526
+ });
527
+
528
+ guideModal.addEventListener('click', function(e) {
529
+ if (e.target === guideModal) {
530
+ guideModal.classList.add('hidden');
531
+ document.body.style.overflow = '';
532
+ }
533
+ });
534
+
535
+ // Initialize video functionality
536
+ let videoCards = await generateVideoCards();
537
+ const tagFilters = document.querySelectorAll('.tag-filter');
538
+
539
+ // Video modal functionality
540
+ const videoModal = document.getElementById('video-modal');
541
+ const videoPlayer = document.getElementById('video-player');
542
+ const videoModalTitle = document.getElementById('video-modal-title');
543
+ const closeModalBtn = document.getElementById('close-modal');
544
+
545
+ // Open modal when clicking on video card or play button
546
+ document.addEventListener('click', function(e) {
547
+ const overlayClick = e.target.closest('.video-overlay');
548
+ const btnClick = e.target.closest('.play-video-btn');
549
+
550
+ if (overlayClick) {
551
+ const card = overlayClick.closest('.video-card');
552
+ const btn = card.querySelector('.play-video-btn');
553
+ const videoId = btn.getAttribute('data-video-id');
554
+ const videoTitle = card.querySelector('h3').textContent;
555
+
556
+ videoModalTitle.textContent = videoTitle;
557
+ videoPlayer.src = `https://drive.google.com/file/d/${videoId}/preview`;
558
+ videoModal.classList.remove('hidden');
559
+ document.body.style.overflow = 'hidden';
560
+ }
561
+
562
+ if (btnClick) {
563
+ const videoId = btnClick.getAttribute('data-video-id');
564
+ const videoTitle = btnClick.getAttribute('data-video-title');
565
+
566
+ videoModalTitle.textContent = videoTitle;
567
+ videoPlayer.src = `https://drive.google.com/file/d/${videoId}/preview`;
568
+ videoModal.classList.remove('hidden');
569
+ document.body.style.overflow = 'hidden';
570
+ }
571
+ });
572
+
573
+ // Close modal
574
+ closeModalBtn.addEventListener('click', function() {
575
+ videoModal.classList.add('hidden');
576
+ videoPlayer.src = '';
577
+ document.body.style.overflow = '';
578
+ });
579
+
580
+ // Close modal when clicking on backdrop
581
+ videoModal.addEventListener('click', function(e) {
582
+ if (e.target === videoModal) {
583
+ videoModal.classList.add('hidden');
584
+ videoPlayer.src = '';
585
+ document.body.style.overflow = '';
586
+ }
587
+ });
588
+
589
+ tagFilters.forEach(filter => {
590
+ filter.addEventListener('click', function() {
591
+ const tag = this.getAttribute('data-tag');
592
+
593
+ // Update active filter
594
+ tagFilters.forEach(f => {
595
+ f.classList.remove('bg-blue-100', 'text-blue-800');
596
+ f.classList.add('bg-gray-100', 'text-gray-800');
597
+ });
598
+
599
+ if (tag !== 'all') {
600
+ this.classList.remove('bg-gray-100', 'text-gray-800');
601
+ this.classList.add('bg-blue-100', 'text-blue-800');
602
+ } else {
603
+ this.classList.remove('bg-gray-100', 'text-gray-800');
604
+ this.classList.add('bg-blue-100', 'text-blue-800');
605
+ }
606
+
607
+ // Filter videos
608
+ videoCards.forEach(card => {
609
+ if (tag === 'all' || card.getAttribute('data-tags').includes(tag)) {
610
+ card.style.display = 'block';
611
+ } else {
612
+ card.style.display = 'none';
613
+ }
614
+ });
615
+ });
616
+ });
617
+
618
+ // Update video cards reference after generation
619
+ videoCards = document.querySelectorAll('.video-card');
620
+
621
+ // Update video cards reference after generation
622
+ videoCards = document.querySelectorAll('.video-card');
623
+
624
+ // Quiz functionality
625
+ let quizQuestions = [];
626
+
627
+ // Function to fetch questions from API
628
+ async function fetchQuizQuestions() {
629
+ try {
630
+ const response = await fetch('https://n8n.bziiit.com/webhook/afp-injections-guide');
631
+ const apiResponse = await response.json();
632
+
633
+ // Transform API data to our quiz format
634
+ const allQuestions = apiResponse.data.map(item => ({
635
+ question: item.question,
636
+ options: [item.A, item.B, item.C, item.D],
637
+ answer: item.reponse.charCodeAt(0) - 65, // Convert 'A' to 0, 'B' to 1 etc.
638
+ explanation: item.col_7 || ""
639
+ }));
640
+
641
+ // Shuffle questions and select 5 random ones
642
+ const shuffled = [...allQuestions].sort(() => 0.5 - Math.random());
643
+ return shuffled.slice(0, 5);
644
+ } catch (error) {
645
+ console.error('Error fetching quiz questions:', error);
646
+ return [];
647
+ }
648
+ }
649
+
650
+ const startQuizBtn = document.getElementById('start-quiz');
651
+ const quizIntro = document.getElementById('quiz-intro');
652
+ const quizQuestionsContainer = document.getElementById('quiz-questions');
653
+ const quizResults = document.getElementById('quiz-results');
654
+ const quizScore = document.getElementById('quiz-score');
655
+ const quizFeedback = document.getElementById('quiz-feedback');
656
+ const retryQuizBtn = document.getElementById('retry-quiz');
657
+
658
+ let currentQuestion = 0;
659
+ let score = 0;
660
+ let userAnswers = [];
661
+
662
+ startQuizBtn.addEventListener('click', startQuiz);
663
+ retryQuizBtn.addEventListener('click', startQuiz);
664
+
665
+ async function startQuiz() {
666
+ currentQuestion = 0;
667
+ score = 0;
668
+ userAnswers = [];
669
+
670
+ // Show loading state
671
+ quizIntro.classList.add('hidden');
672
+ quizResults.classList.add('hidden');
673
+ quizQuestionsContainer.innerHTML = `
674
+ <div class="text-center py-8">
675
+ <i class="fas fa-spinner fa-spin text-3xl text-blue-600 mb-4"></i>
676
+ <p>Chargement des questions...</p>
677
+ </div>
678
+ `;
679
+ quizQuestionsContainer.classList.remove('hidden');
680
+
681
+ try {
682
+ // Fetch questions from API
683
+ const questions = await fetchQuizQuestions();
684
+
685
+ if (questions.length === 0) {
686
+ quizQuestionsContainer.innerHTML = `
687
+ <div class="text-center py-8">
688
+ <i class="fas fa-exclamation-triangle text-3xl text-yellow-500 mb-4"></i>
689
+ <p class="text-red-600 mb-4">Aucune question disponible pour le moment.</p>
690
+ <button onclick="startQuiz()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
691
+ Réessayer
692
+ </button>
693
+ </div>
694
+ `;
695
+ return;
696
+ }
697
+
698
+ displayQuestion(questions, 0);
699
+ } catch (error) {
700
+ quizQuestionsContainer.innerHTML = `
701
+ <div class="text-center py-8">
702
+ <i class="fas fa-exclamation-triangle text-3xl text-yellow-500 mb-4"></i>
703
+ <p class="text-red-600 mb-4">Erreur lors du chargement des questions.</p>
704
+ <button onclick="startQuiz()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
705
+ Réessayer
706
+ </button>
707
+ </div>
708
+ `;
709
+ }
710
+ }
711
+
712
+ function displayQuestion(questions, index) {
713
+ if (index >= questions.length) {
714
+ showResults(questions);
715
+ return;
716
+ }
717
+
718
+ const question = questions[index];
719
+ quizQuestionsContainer.innerHTML = `
720
+ <div class="mb-6">
721
+ <div class="flex items-center mb-4">
722
+ <span class="bg-blue-600 text-white text-sm font-medium px-3 py-1 rounded-full">Question ${index + 1}/${questions.length}</span>
723
+ </div>
724
+ <h3 class="text-lg font-semibold mb-4">${question.question}</h3>
725
+ <div class="space-y-3">
726
+ ${question.options.map((option, i) => `
727
+ <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}">
728
+ <div class="flex items-center">
729
+ <div class="w-5 h-5 border border-gray-400 rounded-full mr-3 flex-shrink-0"></div>
730
+ <span>${option}</span>
731
+ </div>
732
+ </div>
733
+ `).join('')}
734
+ </div>
735
+ </div>
736
+ <div class="flex justify-between items-center pt-4 border-t border-gray-200">
737
+ <span class="text-sm text-gray-500">Question ${index + 1} sur ${questions.length}</span>
738
+ <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' : ''}">
739
+ Suivant <i class="fas fa-arrow-right ml-1"></i>
740
+ </button>
741
+ <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'}">
742
+ Terminer <i class="fas fa-check ml-1"></i>
743
+ </button>
744
+ </div>
745
+ `;
746
+
747
+ // Add event listeners to options
748
+ const options = document.querySelectorAll('.quiz-option');
749
+ options.forEach(option => {
750
+ option.addEventListener('click', function() {
751
+ // Remove selected class from all options
752
+ options.forEach(opt => {
753
+ opt.querySelector('div div').className = 'w-5 h-5 border border-gray-400 rounded-full mr-3 flex-shrink-0';
754
+ });
755
+
756
+ // Add selected class to clicked option
757
+ 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';
758
+ this.querySelector('div div').innerHTML = '<div class="w-3 h-3 bg-blue-600 rounded-full"></div>';
759
+
760
+ // Store user answer
761
+ userAnswers[index] = parseInt(this.getAttribute('data-answer'));
762
+ });
763
+ });
764
+
765
+ // Next question button
766
+ if (index < questions.length - 1) {
767
+ document.getElementById('next-question').addEventListener('click', function() {
768
+ currentQuestion++;
769
+ displayQuestion(questions, currentQuestion);
770
+ });
771
+ }
772
+
773
+ // Submit quiz button
774
+ if (index === questions.length - 1) {
775
+ document.getElementById('submit-quiz').addEventListener('click', function() {
776
+ showResults(questions);
777
+ });
778
+ }
779
+ }
780
+
781
+ function showResults(questions) {
782
+ // Calculate score
783
+ score = 0;
784
+ let resultsHtml = '';
785
+
786
+ questions.forEach((question, index) => {
787
+ const userAnswer = userAnswers[index];
788
+ const isCorrect = userAnswer === question.answer;
789
+
790
+ if (isCorrect) score++;
791
+
792
+ resultsHtml += `
793
+ <div class="mb-6 p-4 border rounded-lg ${isCorrect ? 'border-green-200 bg-green-50' : 'border-red-200 bg-red-50'}">
794
+ <div class="flex items-start mb-2">
795
+ <div class="mr-3 mt-1 flex-shrink-0">
796
+ ${isCorrect ?
797
+ '<i class="fas fa-check-circle text-green-500 text-xl"></i>' :
798
+ '<i class="fas fa-times-circle text-red-500 text-xl"></i>'}
799
+ </div>
800
+ <div>
801
+ <h4 class="font-medium">${question.question}</h4>
802
+ <p class="text-sm mt-1 ${isCorrect ? 'text-green-700' : 'text-red-700'}">
803
+ <span class="font-medium">Votre réponse :</span> ${question.options[userAnswer]}
804
+ </p>
805
+ ${!isCorrect ? `
806
+ <p class="text-sm mt-1 text-green-700">
807
+ <span class="font-medium">Bonne réponse :</span> ${question.options[question.answer]}
808
+ </p>
809
+ ` : ''}
810
+ ${question.explanation !== "Consultez le guide pour plus d'informations." ? `
811
+ <p class="text-sm mt-2 text-gray-600">
812
+ <i class="fas fa-info-circle mr-1"></i> ${question.explanation}
813
+ </p>
814
+ ` : ''}
815
+ </div>
816
+ </div>
817
+ </div>
818
+ `;
819
+ });
820
+
821
+ // Show results
822
+ quizQuestionsContainer.classList.add('hidden');
823
+ quizResults.classList.remove('hidden');
824
+
825
+ // Update score
826
+ quizScore.textContent = score;
827
+
828
+ // Add feedback based on score
829
+ let feedbackText = '';
830
+ let feedbackClass = '';
831
+
832
+ if (score === questions.length) {
833
+ feedbackText = 'Excellent ! Vous maîtrisez parfaitement le Module d\'Injection.';
834
+ feedbackClass = 'bg-green-100 text-green-800';
835
+ } else if (score >= questions.length * 0.7) {
836
+ feedbackText = 'Bien joué ! Vous avez de bonnes connaissances du Module.';
837
+ feedbackClass = 'bg-blue-100 text-blue-800';
838
+ } else if (score >= questions.length * 0.4) {
839
+ feedbackText = 'Pas mal ! Pensez à revoir certains aspects du Module.';
840
+ feedbackClass = 'bg-yellow-100 text-yellow-800';
841
+ } else {
842
+ feedbackText = 'À travailler... Consultez le guide et les tutoriels pour améliorer vos connaissances.';
843
+ feedbackClass = 'bg-red-100 text-red-800';
844
+ }
845
+
846
+ quizFeedback.className = feedbackClass + ' p-4 rounded-lg';
847
+ quizFeedback.innerHTML = `
848
+ <div class="flex items-center">
849
+ <div class="mr-3">
850
+ ${score === questions.length ?
851
+ '<i class="fas fa-trophy text-2xl"></i>' :
852
+ score >= questions.length * 0.7 ?
853
+ '<i class="fas fa-thumbs-up text-2xl"></i>' :
854
+ score >= questions.length * 0.4 ?
855
+ '<i class="fas fa-lightbulb text-2xl"></i>' :
856
+ '<i class="fas fa-book text-2xl"></i>'}
857
+ </div>
858
+ <div>
859
+ <p class="font-medium">${feedbackText}</p>
860
+ ${score < questions.length ?
861
+ '<p class="text-sm mt-1">Nous vous recommandons de revoir : ' +
862
+ questions.filter((q, i) => userAnswers[i] !== q.answer).map(q => q.question).join(', ') + '</p>' : ''}
863
+ </div>
864
+ </div>
865
+ `;
866
+
867
+ // Add questions and answers
868
+ document.querySelector('#quiz-results').insertAdjacentHTML('beforeend', resultsHtml);
869
+ }
870
+
871
+ // Smooth scrolling for anchor links
872
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
873
+ anchor.addEventListener('click', function(e) {
874
+ e.preventDefault();
875
+
876
+ const targetId = this.getAttribute('href');
877
+ const targetElement = document.querySelector(targetId);
878
+
879
+ if (targetElement) {
880
+ window.scrollTo({
881
+ top: targetElement.offsetTop - 80,
882
+ behavior: 'smooth'
883
+ });
884
+ }
885
+ });
886
+ });
887
+
888
+ // Animation on scroll
889
+ const fadeElements = document.querySelectorAll('.fade-in');
890
+
891
+ const fadeInObserver = new IntersectionObserver((entries) => {
892
+ entries.forEach(entry => {
893
+ if (entry.isIntersecting) {
894
+ entry.target.classList.add('animate-fadeIn');
895
+ }
896
+ });
897
+ }, { threshold: 0.1 });
898
+
899
+ fadeElements.forEach(element => {
900
+ fadeInObserver.observe(element);
901
+ });
902
+ });
903
+ </script>
904
+ <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>
905
+ </html>