Histórico da Página

Painel
borderColor	none
bgColor	#F5F5F5
borderStyle	none
Image Removed

Prepare-se agora para a Reforma Tributária

HTML
<!DOCTYPE html>
<html<div langid="ptcontador-BRbox">
<head>
<meta charsetstyle="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Data e Hora Atual (JS)</title>
<style>
  body{
    width: 520px;
    background: #041E2D;
    padding: 40px 20px 55px 20px;
    border-radius: 25px;
    margin:auto;
    font-family: Arial, sans-serif;
    backgroundposition:#f3f3f3 relative;
    display:flex;
text-align: center;
">

    <!-- TAG SUPERIOR -->
     gap:24px;
<div style="
        position: absolute;
     align-items:flex-start;
   top: -20px;
       padding left:24px 50%;
       }
  .card{
 transform: translateX(-50%);
        background:#041E2D #00D4FF;
    color:#fff    padding: 6px 26px;
    padding:    border-radius: 20px;
     border-radius:12px;
   font-size: 16px;
        width:520pxfont-weight: bold;
     position:relative   color: #000;
    }
  .now {">Faltam</div>

    <!-- CONTEÚDO PRINCIPAL -->
    background:#00D4FF;
    color:#000;
    padding:6px 12px;
    border-radius:16px;
    font-weight:700;
    display:inline-block;
    margin-bottom:12px;
  }
  .datetime {
    font-size:18px;
    font-weight:700;
    margin-top:8px;
  }
  .small {
    font-size:13px;
    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>

    <!-- Onde a data e hora serão exibidas -->
 <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;">:</div>

        <!-- HORAS -->
        <div style="text-align: center;">
            <div id="horas" 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;">Horas</div>
        </div>

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

        <!-- MINUTOS -->
        <div style="text-align: center;">
            <div id="dataHoraminutos" classstyle="datetime">Carregando...<font-size: 48px; font-weight: bold; color: #FFFFFF;">00</div>
            <div id="tz" class="small"></div>
  style="width: 40px; height: 3px; background: #00D4FF; margin: 6px auto 8px auto;"></div>
            <div style="font-size: 14px; color: #FFFFFF;">Minutos</div>
        </div>

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

        <!-- SEGUNDOS -->
 Imagem   do modelo (caminho local fornecido) -->
  <div>
<div style="text-align: center;">
            <img<div classid="modelsegundos" srcstyle="/mnt/data/3057f06e-1c93-4fc6-8414-015fece86b74.png" alt="modelo" />
  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;">Segundos</div>
        </div>

<script>
    <//div>

 Função para formatar data e hora em PT-BR
  function formatarDataHora(d) {
<!-- TAG INFERIOR -->
    <div style="
      //  Ex.position: "terça-feira, 18 de novembro de 2025, 14:30:05"
absolute;
        bottom: -20px;
     const  options =left: {50%;
        weekdaytransform: 'long',
translateX(-50%);
        daybackground: '2-digit',
#00D4FF;
        monthpadding: 'long',
 6px 26px;
        yearborder-radius: 'numeric',
20px;
       hour font-size: '2-digit',
15px;
        minutefont-weight: '2-digit',bold;
      second  color: '2-digit'#000;
    };">
    return d.toLocaleString('pt-BR', options);
  }

    para 1 de janeiro de 2026
    </div>

</div>
 
<script>
    function atualizarDataHoraatualizarContador() {
        // 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('dataHora'"dias").textContentinnerHTML = formatarDataHora(agora);

    // opcional: exibir fuso/offset "00";
            document.getElementById("horas").innerHTML = "00";
            document.getElementById("minutos").innerHTML = "00";
            document.getElementById("segundos").innerHTML = "00";
            return;
        }

        const tzdias = Intl.DateTimeFormat().resolvedOptions().timeZone || ('UTC' + (agora.getTimezoneOffset() > 0 ? '-' : '+') + Math.abs(agora.getTimezoneOffset()/60));
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('tz'"dias").textContentinnerHTML = 'Fuso horário: ' + tz;
  }

  // Atualiza de 1 em 1 segundo
  atualizarDataHora();         // primeira execução imediata
  setInterval(atualizarDataHora, 1000);
</script>

</body>
</html>     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>
Árvore de páginas

Versões comparadas

Versão antiga 6

Nova versão Atual

Chave

Image Removed

Prepare-se agora para a Reforma Tributária
