118 lines
4.7 KiB
HTML
118 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mystère !</title>
|
|
<link rel="stylesheet" href="static/css/mystere_j.css">
|
|
</head>
|
|
<body>
|
|
<div class="fullscreen-container" style="background-image: url('static/css/img/fond_mystere_j.webp');">
|
|
<!-- Texte en haut -->
|
|
<div class="header-text" id="header-text">
|
|
Je fais osciller à gauche et à droite,<br />
|
|
Sur la mer agitée, je mène la danse.<br />
|
|
Je ne suis pas le tangage, mais son cousin,<br />
|
|
Et sur un bateau, on me ressent sans fin.<br />
|
|
Qui suis-je ?
|
|
</div>
|
|
|
|
<!-- Conteneur des défis -->
|
|
<div id="defis-container" class="defis-container"></div>
|
|
|
|
<!-- Champ de réponse -->
|
|
<input type="text" id="reponse" placeholder="Votre réponse">
|
|
<button id="valide" onclick="myFunction()">Valider</button>
|
|
|
|
<!-- Popup -->
|
|
<div id="popup" class="popup">
|
|
<img id="img" src="" alt="Popup Image">
|
|
<p id="popup-message">Vous pouvez aller chercher les cadeaux !!!</p>
|
|
<button class="close" onclick="document.getElementById('popup').style.display='none';">Fermer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/js/final_j.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
async function chargerDefis() {
|
|
try {
|
|
const response = await fetch('/defis');
|
|
const data = await response.json();
|
|
// verifie pour chaque data.defi1.resolu ... data.defi6.resolu = oui alors data.tout_resolu = oui sinon data.tout_resolu = non
|
|
let tout_resolu = 'oui';
|
|
for (let i = 1; i <= 6; i++) {
|
|
if (data[`defi_${i}`].resolu === 'non') {
|
|
tout_resolu = 'non';
|
|
break;
|
|
}
|
|
}
|
|
data.tout_resolu = tout_resolu;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Vérification si tout est résolu
|
|
if (data.tout_resolu === 'oui') {
|
|
document.getElementById('header-text').style.display = 'block';
|
|
document.getElementById('reponse').style.display = 'block';
|
|
document.getElementById('valide').style.display = 'block';
|
|
} else {
|
|
document.getElementById('header-text').style.display = 'none';
|
|
document.getElementById('reponse').style.display = 'none';
|
|
document.getElementById('valide').style.display = 'none';
|
|
}
|
|
|
|
// Charger les défis dynamiquement
|
|
const defisContainer = document.getElementById('defis-container');
|
|
if (defisContainer) {
|
|
// Effacer les images existantes
|
|
defisContainer.innerHTML = '';
|
|
|
|
// Ajouter les nouvelles images
|
|
Object.keys(data).forEach((key) => {
|
|
if (key.startsWith('defi_')) {
|
|
const defi = data[key];
|
|
const imgSrc = defi.resolu === 'oui' ? defi.image_found : defi.image_not_found;
|
|
|
|
const imgElement = document.createElement('img');
|
|
imgElement.src = imgSrc;
|
|
imgElement.alt = `Défi ${defi.number}`;
|
|
imgElement.classList.add('defi-image', `defi-${defi.number}`);
|
|
imgElement.style.cursor = defi.resolu === 'non' ? 'pointer' : 'default';
|
|
|
|
// Ajoutez un gestionnaire de clic uniquement si l'image est "not_found"
|
|
if (defi.resolu === 'non') {
|
|
imgElement.addEventListener('click', () => {
|
|
window.location.href = defi.link;
|
|
});
|
|
}
|
|
|
|
defisContainer.appendChild(imgElement);
|
|
}
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des défis :', error);
|
|
}
|
|
}
|
|
|
|
// Charger les données au démarrage
|
|
chargerDefis();
|
|
|
|
// Actualiser les données toutes les 10 secondes (par exemple)
|
|
setInterval(chargerDefis, 2000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|