Histórico da Página

Painel
borderColor	none
bgColor	#F5F5F5
borderStyle	none
Image Removed

Prepare-se agora para a Reforma Tributária

HTML
<head>
<meta<div charsetid="utfcontador-8box" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Data e Hora Atual (JS)</title>
<style>
  body{style="
    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 -->
    <div style="
      gap:24px  position: absolute;
    align-items:flex-start    top: -20px;
    padding:24px;
  }
  .card{
    left: 50%;
        transform: translateX(-50%);
        background:#041E2D #00D4FF;
        color:#fffpadding: 6px 26px;
    padding:    border-radius: 20px;
     border-radius:12px   font-size: 16px;
     width:520px   font-weight: bold;
    position:relative    color: #000;
  }
  .now {
  ">Faltam</div>

    <!-- CONTEÚDO PRINCIPAL -->
    <div background:#00D4FF;
    color:#000;style="display: flex; gap: 25px; justify-content: center; align-items: flex-start;">

    padding:6px 12px;
     <!-- DIAS -->
     border-radius:16px;   <div style="text-align: center;">
            <div id="dias" style="font-size: 48px; font-weight:700;
: bold; color: #FFFFFF;">00</div>
      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>

      <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>

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

        <!-- Imagem do modelo (caminho local fornecido) -->
  <div>
SEGUNDOS -->
        <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%;
      weekday  transform: 'long',
translateX(-50%);
        daybackground: '2-digit',#00D4FF;
      month  padding: 'long',6px 26px;
      year  border-radius: 'numeric',
20px;
        hourfont-size: '2-digit',
15px;
        minutefont-weight: '2-digit',
bold;
        secondcolor: '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').textContent = formatarDataHora(agora);

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

  // Atualiza de 1 em 1 segundo
  atualizarDataHora();      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 primeiraa cada execução1 imediatasegundo
    setInterval(atualizarDataHoraatualizarContador, 1000);
    atualizarContador();
</script>

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

Versões comparadas

Versão antiga 7

Nova versão Atual

Chave

Image Removed

Prepare-se agora para a Reforma Tributária
