feat: push files html and js
This commit is contained in:
parent
e989ab4dbc
commit
add3d11370
30
index.html
Normal file
30
index.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!-- Conteneur des cartes -->
|
||||
<div class="contenair-div">
|
||||
<a href="#" class="uk-card-custom" id="card1">
|
||||
<div class="image-circle">
|
||||
<img src="/images/icons/1_savco_produits-chimiques.svg" alt="Icône bidon en plastique avec un point d'exclamation dans un triangle" />
|
||||
</div>
|
||||
<p>Produits chimiques</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="uk-card-custom" id="card2">
|
||||
<div class="image-circle">
|
||||
<img src="/images/icons/savco_travaux-en-hauteur.png" alt="Icône échafaudage" />
|
||||
</div>
|
||||
<p>Travailler en hauteur</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="uk-card-custom" id="card3">
|
||||
<div class="image-circle">
|
||||
<img src="/images/icons/savco_espace-confine.png" alt="Icône d'une personne coincé dans un carré" />
|
||||
</div>
|
||||
<p>Travaux en espaces confiné</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="uk-card-custom" id="card4">
|
||||
<div class="image-circle">
|
||||
<img src="/images/icons/savco_autres-risques.png" alt="Icône triangle avec point d'exclamation dedans" />
|
||||
</div>
|
||||
<p>Utilisation d'équipements dangereux</p>
|
||||
</a>
|
||||
</div>
|
||||
196
script.js
Normal file
196
script.js
Normal file
@ -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 - <br>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 - <br>fumées soudage" },
|
||||
{ url: "https://savco-campus.fr/component/edocman/2020-flash-sse-produits-chimiques-a-pdf/viewdocument/470", title: "Exposition aux produits chimiques - <br> 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 - <br> (ponçage, meulage, tronçonage)" },
|
||||
{ url: "https://example.com/second-pdf-card4.pdf", title: "Utilisation Meuleuse - <br>(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é ?<br>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();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user