<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Contagem Regressiva</title>
<style>
body {
background: #e6e6e6;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* CARD PRINCIPAL */
.contador-card {
background: #031626;
padding: 40px 60px;
border-radius: 25px;
text-align: center;
color: #00d5ff;
position: relative;
box-shadow: 0 0 15px rgba(0,0,0,0.25);
}
/* PLAQUINHA SUPERIOR */
.tag-top {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
background: #00d5ff;
color: #031626;
padding: 6px 25px;
border-radius: 20px;
font-size: 0.95rem;
font-weight: bold;
}
/* PLAQUINHA INFERIOR */
.tag-bottom {
background: #00d5ff;
color: #031626;
margin-top: 25px;
padding: 6px 25px;
border-radius: 20px;
font-size: 0.95rem;
font-weight: bold;
display: inline-block;
}
/* TIMER */
.timer {
display: flex;
justify-content: center;
align-items: center;
gap: 35px;
margin-top: 20px;
margin-bottom: 10px;
}
.timer div {
text-align: center;
}
.timer span {
font-size: 3rem;
font-weight: bold;
color: #00d5ff;
}
.label {
font-size: 0.85rem;
color: #aeefff;
margin-top: 6px;
display: block;
}
</style>
</head>
<body>
<div class="contador-card">
<div class="tag-top">Faltam</div>
<div class="timer">
<div>
<span id="days">00</span>
<span class="label">Dias</span>
</div>
<div>
<span id="hours">00</span>
<span class="label">Horas</span>
</div>
<div>
<span id="minutes">00</span>
<span class="label">Minutos</span>
</div>
<div>
<span id="seconds">00</span>
<span class="label">Segundos</span>
</div>
</div>
<div class="tag-bottom">para 1 de janeiro de 2026</div>
</div>
<script>
function updateCountdown() {
const target = new Date("2026-01-01T00:00:00").getTime();
const now = new Date().getTime();
const diff = target - now;
if (diff < 0) return;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById("days").textContent = days.toString().padStart(2, '0');
document.getElementById("hours").textContent = hours.toString().padStart(2, '0');
document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0');
document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0');
}
setInterval(updateCountdown, 1000);
updateCountdown();
</script>
</body>
</html>
| 
