Contador Regressivo Bicentenário 200 anos

Atualizado em 29/06/2022 15h16
Conteúdo do arquivo

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            text-align: center;
            position: relative;
            font-family: "Times New Roman", serif;
            line-height: normal;
        }

        .displayPosition {
            position: absolute;
            transform: translate(-50%, -50%);
        }

        .title {
            color: rgb(54, 66, 40);
            background-color: rgb(217, 172, 30);
            padding: 3px;
            filter: brightness(1.1);
            box-shadow: 5px 7px 18px rgb(54, 66, 40);
        }

        .showNumber {
            color: rgb(54, 66, 40);
            font-weight: bold;
            text-shadow: 5px 7px 25px rgb(54, 66, 40);
        }

        .description {
            color: rgb(54, 66, 40);
            background-color: rgb(217, 172, 30);
            padding: 3px;
            filter: brightness(1.1);
            box-shadow: 5px 7px 18px rgb(54, 66, 40);
        }

        @media (max-width:420px) {
            .displayPosition {
                top: 75%;
                left: 50%;
                width: 340px;
            }

            .title {
                font-size: 16px;
            }

            .showNumber {
                font-size: 35px;
            }

            .description {
                font-size: 16px;
            }
        }
        @media (min-width:421px) and (max-width:480px) {
            .displayPosition {
                top: 66%;
                left: 50%;
                width: 340px;
            }

            .title {
                font-size: 16px;
            }

            .showNumber {
                font-size: 35px;
            }

            .description {
                font-size: 16px;
            }
        }

        @media (min-width:481px) and (max-width: 768px) {
            .displayPosition {
                top: 50%;
                left: 35%;
            }

            .title {
                font-size: 17px;
            }

            .showNumber {
                font-size: 50px;
            }

            .col {
                padding: 9px;
            }

            .description {
                font-size: 17px;
            }
        }

        @media (min-width:769px) and (max-width: 991px) {
            .displayPosition {
                top: 50%;
                left: 35%;
            }

            .title {
                font-size: 25px;
            }

            .showNumber {
                font-size: 70px;
            }

            .description {
                font-size: 25px;
            }
        }

        @media (min-width:992px) {
            .displayPosition {
                top: 50%;
                left: 40%;
            }

            .title {
                font-size: 25px;
            }

            .showNumber {
                font-size: 90px;
            }

            .description {
                font-size: 25px;
            }
        }
    </style>
</head>

<body>
    <picture>
        <source srcset="bicentenario200_desktop.png" media="(min-width:481px)" alt="bicentenario200_desktop">
        <img src="bicentenario200-mobile.png" class="img-fluid" alt="bicentenario200_mobile">
    </picture>
    <div class="displayPosition">
        <div style="padding-bottom: 15px;">
            <span class="title" title="Faltam">F A L T A M</span>
        </div>
        <div class="row">
            <div class="col">
                <div class="showNumber" id="days"></div>
                <span class="description" title="Dias">Dias</span>
            </div>
            <div class="col">
                <div class="showNumber" id="hours"></div>
                <span class="description" title="Horas">Horas</span>
            </div>
            <div class="col">
                <div class="showNumber" id="minutes"></div>
                <span class="description" title="Minutos">Minutos</span>
            </div>
            <div class="col">
                <div class="showNumber" id="seconds"></div>
                <span class="description" title="Segundos">Segundos</span>
            </div>
        </div>
    </div>
    <script>
        function timeCounter() {
            var toDay = new Date(Date.now()).getTime();
            let EventDay = new Date('09/07/2022 00:00:00').getTime();// mm/dd/aaaa hh:mm:ss
            var t = Math.floor(EventDay - toDay);
            var seconds = Math.floor((t % (1000 * 60)) / 1000);
            var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
            var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
            if (t > 0) {
                document.getElementById("days").innerHTML = days
                document.getElementById("hours").innerHTML = hours.toLocaleString('pt-BR', { minimumIntegerDigits: 2, useGrouping: false });
                document.getElementById("minutes").innerHTML = minutes.toLocaleString('pt-BR', { minimumIntegerDigits: 2, useGrouping: false });
                document.getElementById("seconds").innerHTML = seconds.toLocaleString('pt-BR', { minimumIntegerDigits: 2, useGrouping: false });
            } else {
                document.getElementById("dias").innerHTML = "0";
                document.getElementById("horas").innerHTML = "0";
                document.getElementById("minutos").innerHTML = "0";
                document.getElementById("segundos").innerHTML = "0";
            }
        }
        timeCounter();
        setInterval(timeCounter, 1000);
    </script>

</body>
<!--Developed by Lucas Pierre-->

</html>