From add3d11370691ff087d9461c86f78356cd665e09 Mon Sep 17 00:00:00 2001 From: Tilian_Pellard Date: Tue, 11 Feb 2025 14:54:49 +0100 Subject: [PATCH] feat: push files html and js --- index.html | 30 ++++++++ script.js | 196 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 226 insertions(+) create mode 100644 index.html create mode 100644 script.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..49ff712 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + +
+ +
+ Icône bidon en plastique avec un point d'exclamation dans un triangle +
+

Produits chimiques

+ + + +
+ Icône échafaudage +
+

Travailler en hauteur

+ + + +
+ Icône d'une personne coincé dans un carré +
+

Travaux en espaces confiné

+ + + +
+ Icône triangle avec point d'exclamation dedans +
+

Utilisation d'équipements dangereux

+ +
\ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..61086fe --- /dev/null +++ b/script.js @@ -0,0 +1,196 @@ +document.addEventListener("DOMContentLoaded", function() { + const pdfUrls = { + card1: [ + { url: "https://savco-campus.fr/component/edocman/2018-flash-sse-risque-fumees-soudure-b/viewdocument/455", title: "Travaux exposant à des agents CMR -
fumées soudage" }, + { url: "https://savco-campus.fr/component/edocman/2022-flash-sse-travaux-points-chauds-e/viewdocument/457", title: "Travaux exposant à des agents CMR -
fumées soudage" }, + { url: "https://savco-campus.fr/component/edocman/2020-flash-sse-produits-chimiques-a-pdf/viewdocument/470", title: "Exposition aux produits chimiques -
Produits dangereux" } + ], + card2: [ + { url: "https://savco-campus.fr/component/edocman/10-2020-flash-sse-bonnes-pratiques-et-risques-utilisation-echafaudage-b/viewdocument/81", title: "Travaux exposant à un risque de chute de hauteur - utilisation d'échafaudages" }, + { url: "https://savco-campus.fr/component/edocman/34-2023-flash-sse-travail-en-hauteur-a/viewdocument/82", title: "Travaux exposant à un risque de chute de hauteur - port du harnais ou travail sur cordes" }, + { url: "https://savco-campus.fr/component/edocman/45-2023-flash-sse-harnais-a/viewdocument/84", title: "Travaux exposant à un risque de chute de hauteur - port du harnais ou travail sur cordes" } + ], + card3: [ + { url: "https://savco-campus.fr/component/edocman/22-2023-flash-sse-travaux-espace-confine-c/viewdocument/93", title: "Espaces confinés" }, + { url: "https://savco-campus.fr/component/edocman/35-2023-flash-sse-utilisation-detecteur-de-gaz-va-2/viewdocument/94", title: "Utilisation detecteur de gaz" } + ], + card4: [ + { url: "https://savco-campus.fr/component/edocman/2021-flash-sse-bp-outillage-protection-a-pdf/viewdocument/474", title: "Utilisation Meuleuse -
(ponçage, meulage, tronçonage)" }, + { url: "https://example.com/second-pdf-card4.pdf", title: "Utilisation Meuleuse -
(ponçage, meulage, tronçonage)" }, + { url: "https://savco-campus.fr/component/edocman/2023-flash-sse-bruit-b-pdf/viewdocument/483", title: "Bruit - vibrations" } + ] + }; + + let currentStep = 1; + let currentPdfIndex = 0; + const completedCards = [false, false, false, false]; // Suivi de l'état des cartes + const pdfReadState = [false, false, false, false]; // Suivi de l'état des PDFs de chaque carte + const progress = [0, 0, 0, 0]; // Suivi de l'avancement des PDFs dans chaque carte + + function activateCard(step) { + const cards = document.querySelectorAll('.uk-card-custom'); + + cards.forEach((card, index) => { + card.style.pointerEvents = 'none'; + card.style.opacity = '0.5'; + card.style.filter = 'grayscale(100%)'; + card.classList.remove('active-card'); + + // Réinitialisation de la progression si on revient à une carte non terminée + if (!completedCards[index]) { + progress[index] = 0; // Réinitialisation de l'index à 0 (premier PDF) + pdfReadState[index] = false; + } + + if (completedCards[index]) { + card.style.filter = 'grayscale(0%)'; + card.style.opacity = '1'; + card.style.pointerEvents = 'auto'; + } + }); + + const card = cards[step - 1]; + if (card) { + card.style.pointerEvents = 'auto'; + card.style.opacity = '1'; + card.style.filter = 'grayscale(0%)'; + card.classList.add('active-card'); + } + + updateNavigationButtons(); + loadPdfForCurrentCard(); + } + + function loadPdfForCurrentCard() { + const iframe = document.getElementById("pdf-iframe"); + const titleElement = document.getElementById("pdf-title"); + const fileContainer = document.getElementById("pdf-container"); + const nextButton = document.getElementById("next-button"); + const prevButton = document.getElementById("prev-button"); + const pdfCounter = document.getElementById("pdf-counter"); + + const cardKey = "card" + currentStep; + const pdfData = pdfUrls[cardKey][progress[currentStep - 1]]; // Charger le PDF basé sur la progression de la carte + + iframe.src = pdfData.url; + titleElement.innerHTML = pdfData.title; + fileContainer.style.display = "block"; + + nextButton.style.display = "inline-block"; + prevButton.style.display = "inline-block"; + + const totalPdfs = pdfUrls[cardKey].length; + pdfCounter.innerHTML = `${progress[currentStep - 1] + 1} / ${totalPdfs}`; + + iframe.onload = function() { + nextButton.disabled = false; + }; + + updateNavigationButtons(); + } + + function goToNextPdf() { + const pdfData = pdfUrls["card" + currentStep]; + if (progress[currentStep - 1] < pdfData.length - 1) { + progress[currentStep - 1]++; + loadPdfForCurrentCard(); + } else { + alert("Vous avez terminé de visualiser tous les PDFs de cette carte !"); + pdfReadState[currentStep - 1] = true; + completedCards[currentStep - 1] = true; + goToNextCard(); + } + } + + function goToPreviousPdf() { + if (progress[currentStep - 1] > 0) { + progress[currentStep - 1]--; + loadPdfForCurrentCard(); + } else { + goToPreviousCard(); + } + } + + function goToNextCard() { + if (currentStep < 4 && pdfReadState[currentStep - 1]) { + currentStep++; + progress[currentStep - 1] = 0; // Réinitialiser l'index pour la carte suivante + activateCard(currentStep); + } else { + alert("Veuillez d'abord lire tous les PDFs de cette carte avant de passer à la suivante."); + } + } + + function goToPreviousCard() { + if (currentStep > 1) { + currentStep--; + progress[currentStep - 1] = 0; // Réinitialiser l'index pour revenir à la carte précédente + activateCard(currentStep); + } + } + + function updateNavigationButtons() { + const nextButton = document.getElementById("next-button"); + const prevButton = document.getElementById("prev-button"); + + if (currentStep === 1 && progress[currentStep - 1] === 0) { + prevButton.style.display = "none"; + } else { + prevButton.disabled = false; + } + + if (currentStep === 4 && progress[currentStep - 1] === pdfUrls["card4"].length - 1) { + nextButton.disabled = true; + nextButton.innerHTML = "Vous avez tout visualisé ?
Vous pouvez maintenant accéder au questionnaire."; + } else { + nextButton.disabled = false; + nextButton.textContent = "Suivant"; + } + } + + activateCard(1); + const fileContainer = document.getElementById("pdf-container"); + fileContainer.style.display = "none"; + const nextButton = document.getElementById("next-button"); + const prevButton = document.getElementById("prev-button"); + nextButton.style.display = "none"; + prevButton.style.display = "none"; + + loadPdfForCurrentCard(); + + document.getElementById("card1").addEventListener("click", function(event) { + event.preventDefault(); + currentStep = 1; + progress[0] = 0; // Réinitialiser à la première page quand tu viens sur la carte 1 + activateCard(1); + }); + + document.getElementById("card2").addEventListener("click", function(event) { + event.preventDefault(); + currentStep = 2; + progress[1] = 0; // Réinitialiser à la première page quand tu viens sur la carte 2 + activateCard(2); + }); + + document.getElementById("card3").addEventListener("click", function(event) { + event.preventDefault(); + currentStep = 3; + progress[2] = 0; // Réinitialiser à la première page quand tu viens sur la carte 3 + activateCard(3); + }); + + document.getElementById("card4").addEventListener("click", function(event) { + event.preventDefault(); + currentStep = 4; + progress[3] = 0; // Réinitialiser à la première page quand tu viens sur la carte 4 + activateCard(4); + }); + + nextButton.addEventListener("click", function() { + goToNextPdf(); + }); + + prevButton.addEventListener("click", function() { + goToPreviousPdf(); + }); +}); \ No newline at end of file -- 2.45.1