<style>.alerte-clignotante {
position: relative;
background-color: #FF5722;
color: white;
font-weight: bold;
padding: 15px 20px;
text-align: center;
font-size: 18px;
border-radius: 8px;
animation: clignoter 10s infinite;
animation-play-state: running;
margin: 20px;
cursor: pointer;
transition: opacity 0.1s ease;
}
/* Stop animation on hover */
.alerte-clignotante:hover {
animation-play-state: paused;
}
@keyframes clignoter {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
.alerte-clignotante h3 {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0;
font-size: 30px;
}
.alerte-clignotante p {
margin: 5px 0 0;
font-size: 20px;
}
.close-btn {
background: none;
border: none;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
position: absolute;
top: 5px;
right: 10px;
}
.close-btn:hover {
opacity: 0.8;
}
.icone-alerte {
font-size: 40px;
vertical-align: middle;
}
</style><script>
function showAlert() {
const alertBox = document.getElementById(« eventAlert »);
alertBox.style.display = « block »;
}
function closeAlert() {
const alertBox = document.getElementById(« eventAlert »);
alertBox.style.display = « none »;
}
window.onload = function () {
setTimeout(showAlert, 3000);
};
</script>
<!-- HTML dans le body -->
<div id="eventAlert" class="alerte-clignotante" style="display:none;">
<button class="close-btn" onclick="closeAlert()">X</button>
<h3><span class="icone-alerte">⚠️</span>Prochain Événement Sportif</h3>
<p>Tournoi de Badminton : 25 janvier à 18h, Salle Benfeld.</p>
</div>