<div id="countdown-container">
<style>
.countdown-box {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: linear-gradient(to right, #8e2de2, #4a00e0);
border-radius: 10px;
color: white;
text-align: center;
font-family: Arial, sans-serif;
}
.countdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 20px;
}
.countdown-item {
background: rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 8px;
}
.countdown-number {
font-size: 30px;
font-weight: bold;
}
.countdown-label {
font-size: 14px;
margin-top: 5px;
}
</style>
<div class="countdown-box">
<h2 style="font-size: 24px; margin-bottom: 10px;">¡ESTRENO! - PLAYA PARANÁ</h2>
<p>8 de Noviembre 2024, 00:00 hs</p>
<div class="countdown-grid">
<div class="countdown-item">
<div id="days" class="countdown-number">0</div>
<div class="countdown-label">Días</div>
</div>
<div class="countdown-item">
<div id="hours" class="countdown-number">0</div>
<div class="countdown-label">Horas</div>
</div>
<div class="countdown-item">
<div id="minutes" class="countdown-number">0</div>
<div class="countdown-label">Minutos</div>
</div>
<div class="countdown-item">
<div id="seconds" class="countdown-number">0</div>
<div class="countdown-label">Segundos</div>
</div>
</div>
</div>
<script>
function updateCountdown() {
const targetDate = new Date('2024-11-08T00:00:00');
const now = new Date();
const difference = targetDate - now;
if (difference > 0) {
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days;
document.getElementById('hours').textContent = hours;
document.getElementById('minutes').textContent = minutes;
document.getElementById('seconds').textContent = seconds;
} else {
document.querySelector('.countdown-box').innerHTML = '<h2>¡El video ya está disponible!</h2>';
}
}
setInterval(updateCountdown, 1000);
updateCountdown();
</script>
</div>