{% extends 'base.html' %} {% load static %} {% block title %}WSR - Épreuves{% endblock %} {% block content %} <div class="container mt-4"> <div class="p-4 bg-white"> <h4 class="eurostile title">Épreuves</h4> <p>Les WSR n'ont pas froids aux yeux, ils sont toujours prêt à affronter n'importe quel épreuve.</p> <div class="race-types-container"> {% for epreuve in epreuves %} <div class="card" id="type-{{ epreuve.id }}"> <div class="header" data-video-url="{% get_media_prefix %}{{ epreuve.video }}"> <img src="{% get_media_prefix %}{{ epreuve.image }}" alt="{{ epreuve.name }}"> </div> <div class="content"> <div class="title eurostile"> <img src="{% get_media_prefix %}{{ epreuve.icon }}" alt="Logo {{ epreuve.name }}" width="32"> {{ epreuve.name }} </div> <div class="desc"> {% autoescape off %} {{ epreuve.description }} {% endautoescape %} </div> </div> </div> {% endfor %} </div> </div> </div> {% endblock %} {% block javascripts %} <script type="text/javascript"> // Sélectionne tous les éléments de classe 'card' dont l'ID commence par 'type-' const cards = document.querySelectorAll('.card[id^="type-"]'); cards.forEach((card) => { let timeoutId; let originalContent; card.addEventListener('mouseenter', () => { const header = card.querySelector('.header'); const videoUrl = header.dataset.videoUrl; if (videoUrl && !header.querySelector('video')) { timeoutId = setTimeout(() => { const video = document.createElement('video'); video.src = videoUrl; video.controls = false; video.autoplay = true; video.muted = true; video.loop = true; // Sauvegarde le contenu d'origine du header pour pouvoir le restaurer plus tard originalContent = header.innerHTML; header.innerHTML = ''; header.appendChild(video); }, 1000); } }); card.addEventListener('mouseleave', () => { clearTimeout(timeoutId); const header = card.querySelector('.header'); const video = header.querySelector('video'); if (video) { // Supprime la vidéo et réaffiche l'image d'origine header.innerHTML = originalContent; } }); }); </script> {% endblock %}