Bonjours a tous, voici un petit widget en HTML, comme nous avons tous hâte a l'été, j'ai pensez que vous aimeriez ce petit gadget, je l'ai traduit en Anglais pour mon "site" mais très facile a traduire en Français, a l'origine Russe ;-)
HTML:
<div class="summer-timer-widget">
<div class="timer-header">
<span>☀️</span> Until summer
</div>
<div class="timer-digits">
<div class="timer-unit">
<span class="timer-number" id="days">00</span>
<span class="timer-label">days</span>
</div>
<div class="timer-unit">
<span class="timer-number" id="hours">00</span>
<span class="timer-label">hours</span>
</div>
<div class="timer-unit">
<span class="timer-number" id="minutes">00</span>
<span class="timer-label">minutes</span>
</div>
<div class="timer-unit">
<span class="timer-number" id="seconds">00</span>
<span class="timer-label">seconds</span>
</div>
</div>
</div>
<style>
.summer-timer-widget {
background: #fff8f0;
border-radius: 20px;
padding: 18px 15px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
margin: 10px 0;
font-family: inherit;
}
.timer-header {
font-size: 1.25rem;
font-weight: 600;
color: #e67e22;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.timer-digits {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.timer-unit {
flex: 1;
min-width: 65px;
background: #ffffff;
border-radius: 16px;
padding: 8px 5px;
border: 1px solid #ffe6b3;
}
.timer-number {
display: block;
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
color: #d35400;
}
.timer-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #b45f2b;
}
@media (max-width: 480px) {
.timer-number { font-size: 1.5rem; }
.timer-unit { min-width: 55px; }
.timer-header { font-size: 1rem; }
}
</style>
<script>
(function() {
const targetDate = new Date(2026, 5, 1, 0, 0, 0); // 1 June 2026 (month 5 = June)
const updateTimer = () => {
const now = new Date();
const diff = targetDate - now;
if (diff <= 0) {
document.getElementById('days').innerText = '00';
document.getElementById('hours').innerText = '00';
document.getElementById('minutes').innerText = '00';
document.getElementById('seconds').innerText = '00';
return;
}
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % 86400000) / 3600000);
const minutes = Math.floor((diff % 3600000) / 60000);
const seconds = Math.floor((diff % 60000) / 1000);
document.getElementById('days').innerText = days.toString().padStart(2, '0');
document.getElementById('hours').innerText = hours.toString().padStart(2, '0');
document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0');
document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0');
};
updateTimer();
setInterval(updateTimer, 1000);
})();
</script>
