Histórico da Página

Painel
borderColor	none
bgColor	#F5F5F5
borderStyle	none
Prepare-se agora para a Reforma Tributária

HTML
<!DOCTYPE html>
<html>
<head>
<script>
    function atualizarContador() {
        // DATA DA REFORMA TRIBUTÁRIA
        const destino = new Date("2026-01-01T00:00:00").getTime();
        const agora = new Date().getTime();
        const diferenca = destino - agora;

        if (diferenca <= 0) {
            document.getElementById("dias").innerHTML = "00";
            document.getElementById("horas").innerHTML = "00";
            document.getElementById("minutos").innerHTML = "00";
            document.getElementById("segundos").innerHTML = "00";
            return;
        }

        const dias = Math.floor(diferenca / (1000 * 60 * 60 * 24));
        const horas = Math.floor((diferenca / (1000 * 60 * 60)) % 24);
        const minutos = Math.floor((diferenca / (1000 * 60)) % 60);
        const segundos = Math.floor((diferenca / 1000) % 60);

        document.getElementById("dias").innerHTML = dias.toString().padStart(2, "0");
        document.getElementById("horas").innerHTML = horas.toString().padStart(2, "0");
        document.getElementById("minutos").innerHTML = minutos.toString().padStart(2, "0");
        document.getElementById("segundos").innerHTML = segundos.toString().padStart(2, "0");
    }

    // Atualiza a cada 1 segundo
    setInterval(atualizarContador, 1000);
    atualizarContador();
</script>
</head>



<div id="contador-box" style="
    width: 520px;
    background: #041E2D<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Data e Hora Atual (JS)</title>
<style>
  body{
    font-family: Arial, sans-serif;
    background:#f3f3f3;
    display:flex;
    gap:24px;
    align-items:flex-start;
    padding:24px;
  }
  .card{
    background:#041E2D;
    color:#fff;
    padding: 40px 20px 55px 20px;
    border-radius: 25px12px;
    marginwidth:auto520px;
    font-family: Arial, sans-serif;
    position: relative;
    text-align: center;
">

}
    <!-- TAG SUPERIOR -->.now {
    <div style="
        position: absolutebackground:#00D4FF;
        top: -20pxcolor:#000;
        leftpadding:6px 50%12px;
        transform: translateX(-50%)border-radius:16px;
        background: #00D4FFfont-weight:700;
        padding: 6px 26pxdisplay:inline-block;
        border-radius: 20pxmargin-bottom:12px;
  }
  .datetime {
    font-size: 16px18px;
        font-weight: bold700;
        color: #000margin-top:8px;
    ">Faltam</div>
}
  .small {
 <!-- CONTEÚDO PRINCIPAL -->font-size:13px;
    <div style="display: flex; gap: 25px; justify-content: center; align-items: flex-start;">

        <!-- DIAS -->
        <div style="text-align: center;">
            <div id="dias" style="font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div>
            <div style="width: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>
            <div style="font-size: 14px; color: #FFFFFF;">Dias</div>
        </div>

        <div style="font-size: 35px; font-weight:bold; color:#FFFFFF; margin-top:5px;">:<color:#dfeff4;
    margin-top:6px;
  }
  img.model {
    width:240px;
    height:auto;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
  }
</style>
</head>
<body>

  <div class="card">
    <div class="now">Agora</div>

        <!-- HORAS -->
        <div style="text-align: center;">
 Onde a data e hora serão exibidas -->
           <div id="horasdataHora" styleclass="font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div>
        datetime">Carregando...</div>
    <div style="width: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>
            <div style="font-size: 14px; color: #FFFFFF;">Horas</div>
      id="tz" class="small"></div>
  </div>

        <div style="font-size: 35px; font-weight:bold; color:#FFFFFF; margin-top:5px;">:</div>

        <!-- MINUTOS <!-- Imagem do modelo (caminho local fornecido) -->
  <div>
    <img  <div styleclass="text-align: center;">
            <div id="minutos" style="font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div>
            <div style="width: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>
            <div style="font-size: 14px; color: #FFFFFF;">Minutos</div>
        </div>
model" src="/mnt/data/3057f06e-1c93-4fc6-8414-015fece86b74.png" alt="modelo" />
  </div>

<script>
  // Função para formatar data e hora em PT-BR
  function formatarDataHora(d) {
    // Ex.: "terça-feira, 18 de novembro de 2025, 14:30:05"
    const options = {
        <div style="font-size: 35px; font-weight:bold; color:#FFFFFF; margin-top:5px;">:</div>

weekday: 'long',
        <!-- SEGUNDOS -->day: '2-digit',
        <div style="text-align: center;">month: 'long',
      year: 'numeric',
     <div id="segundos" style="font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div> hour: '2-digit',
      minute: '2-digit',
     <div style="widthsecond: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>'2-digit'
    };
            <div style="font-size: 14px; color: #FFFFFF;">Segundos</div>
        </div>return d.toLocaleString('pt-BR', options);
  }

  function  </div>
atualizarDataHora() {
    <!-- TAG INFERIOR -->
    <div style="
        position: absoluteconst agora = new Date();
    document.getElementById('dataHora').textContent    bottom: -20px;= formatarDataHora(agora);

    // opcional: exibir fuso/offset
 left: 50%;
  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone ||  transform: translateX(-50%);
        background: #00D4FF('UTC' + (agora.getTimezoneOffset() > 0 ? '-' : '+') + Math.abs(agora.getTimezoneOffset()/60));
    document.getElementById('tz').textContent = 'Fuso horário: padding:' 6px+ 26pxtz;
        border-radius: 20px;}

  // Atualiza de 1 em  font-size: 15px;
        font-weight: bold;
1 segundo
  atualizarDataHora();        color: #000;
    "> // primeira execução imediata
        para 1 de janeiro de 2026
    </div>setInterval(atualizarDataHora, 1000);
</script>

</div>body>
</html>
Árvore de páginas

Versões comparadas

Versão antiga 5

Nova versão 6

Chave

Prepare-se agora para a Reforma Tributária
