Jak dodać zegar odliczający do swojej strony internetowej?

Chcesz uatrakcyjnić wygląd strony internetowej i zwiększyć zaangażowanie użytkowników? Dodaj interaktywny zegar, który będzie odliczał czas do Twojego wydarzenia!

Wystarczy, że wykonasz kilka prostych kroków:

1. Przejdź do zakładki Strona > Lista stron i wybierz podstronę, na której chcesz umieścić zegar.

2. Dodaj nową sekcję lub blok treści. Następnie przejdź do edycji HTML wybranego elementu i wklej poniższy kod:

<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="days" style="color: rgb(247, 247, 247); font-family: Poppins, sans-serif;">138</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(247, 247, 247); font-family: Poppins, sans-serif;">Dni</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="hours" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">2</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Godzin</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="minutes" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">41</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Minut</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="seconds" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">0</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Sekund</h4>
        </div>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script class="is-animated is-fadeIn delay-500ms">
    $(document).ready(function() {
        // Data docelowa (22 września 2025, 17:00)
        var targetDate = new Date("2025-09-22T17:00:00").getTime();

        // Aktualizacja licznika co sekundę
        var countdown = setInterval(function() {
            // Obecna data i czas
            var now = new Date().getTime();

            // Różnica pomiędzy obecną datą a datą docelową
            var distance = targetDate - now;

            // Obliczenia dni, godzin, minut i sekund
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Wyświetlanie wartości w odpowiednich miejscach
            $("#days").text(days);
            $("#hours").text(hours);
            $("#minutes").text(minutes);
            $("#seconds").text(seconds);

            // Jeśli data docelowa została osiągnięta, zatrzymaj licznik
            if (distance < 0) {
                clearInterval(countdown);
                $("#days").text("0");
                $("#hours").text("0");
                $("#minutes").text("0");
                $("#seconds").text("0");
            }
        }, 1000); // Aktualizacja co sekundę
    });
</script>

3. Zapisz zmiany i sprawdź, jak zegar prezentuje się na Twojej stronie.

Dodatkowo w panelu Conrego, w sekcji Ustawienia, możesz łatwo dostosować wygląd zegara: zmienić kolor tła, szerokość i wysokość okręgów oraz kolor czcionek. Dopasuj zegar do stylistyki swojej strony!