Stránka pro "aktualizaci" webu s odpočtem a autorefreshem.

by Petr Haluza

HTML

<div class="container">

     <h1>
       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 299 100" style="max-height: 70px"><path d="M33.55,21.09c-12.33,0 -22.4,10.07 -22.4,22.39c0,12.48 10.07,22.54 22.4,22.54c12.47,0 22.54,-10.07 22.54,-22.54c0.01,-12.32 -10.06,-22.39 -22.54,-22.39m0,7.66c8.26,0 14.88,6.77 14.88,14.88c0,8.27 -6.61,14.88 -14.88,14.88c-8.11,0 -14.73,-6.61 -14.73,-14.88c0.01,-8.11 6.62,-14.88 14.73,-14.88" style="fill:#ffffff;fill-rule:nonzero;"></path><path d="M10.26,20.79l-7.22,7.52l0,37.11l7.22,0l0,-44.63Z" style="fill:#ffffff;fill-rule:nonzero;"></path><path d="M87.96,56.26c-2.25,1.35 -5.11,2.25 -7.96,2.25c-8.11,0 -15.78,-6.61 -15.78,-14.88c-0,-8.27 6.61,-14.72 14.72,-14.72c8.27,0 15.18,7.66 15.18,15.93l-0.6,4.36l7.51,-9.02c-1.65,-10.67 -10.82,-18.93 -22.09,-18.93c-12.32,0 -21.94,8.87 -22.24,22.39c-0.15,13.38 10.52,22.69 22.99,22.69l8.27,-10.07Z" style="fill:#ffffff;fill-rule:nonzero;"></path><path d="M81.49,79.55l0,-10.22l55.31,-67.03l0,43.13l34.42,-43.43l0,65.38l-6.77,0l0,-44.19l-35.16,44.19l0,-44.79l-47.8,56.96Z" style="fill:#ffffff;fill-rule:nonzero;"></path><path d="M272.21,21.84l25.4,45.54l-7.81,0l-10.52,-17.44l-15.48,0l-10.22,17.44c-4.5,0.9 -12.32,1.8 -19.23,0c-11.12,-2.86 -16.08,-12.63 -16.23,-21.04c-0.3,-11.73 10.22,-23.45 22.24,-23.45c10.97,0 19.24,6.77 21.79,15.64l-8.42,0c-1.8,-4.36 -6.31,-8.11 -13.53,-8.11c-8.11,0.15 -14.57,7.66 -14.57,14.73c0,7.66 4.65,16.68 17.13,16.53c1.95,0 5.87,-0.45 6.61,-1.65c0.6,-0.6 6.16,-10.07 6.16,-10.07l-22.24,0l0,-6.93l42.08,0l-7.52,-13.68l4.36,-7.51Z" style="fill:#fff;fill-rule:nonzero;"></path><path d="M2,68.88l77.09,0l0,14.88l-10.67,14.58l0,-14.58l-66.42,0l0,-14.88Z" style="fill:#fff;fill-rule:nonzero;"></path><g><path d="M172.57,44.08c0.75,-13.67 10.97,-22.09 22.09,-21.94l0.6,0c13.83,0.46 21.64,10.83 21.64,26.75l-36.22,0c1.81,7.37 9.32,11.42 14.58,11.58l0.9,0c5.41,-0.61 8.42,-1.66 11.57,-7.67l8.72,0c-3.61,9.47 -10.22,14.88 -21.04,14.88l-0.15,0c-13.23,-0.15...

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,900;1,100&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  background: #000
    url(https://images.pexels.com/photos/4195399/pexels-photo-4195399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
    no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: luminosity;
}

/*Make a square*/
.container {
  position: absolute;
  top: 80px;
  left: 100px;
  right: 100px;
  bottom: 80px;
  background: url(https://images.pexels.com/photos/4195399/pexels-photo-4195399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 50px 50px rgba(0, 0, 0, 0.9), 0 0 0 100px rgba(0, 0, 0, 0.1);
}

.container h2 {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 0.7em;
  color: #f8f8f8;
  margin: 20px 0
  
}

.container h2 span {
  display: block;
  font-weight: 300;
  letter-spacing: 3px;
  color: #fff;
      line-height: 31px;
}

.countdown {
  display: flex;
  margin-top: 50px;
}

.countdown div {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: #000000;
  color: #fff;
  margin: 0 15px;
  font-size: 3em;
  font-weight: 500;
}

.countdown div:before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 35px;
  background: #ffce00;
  color: #333;
  font-size: 0.35em;
  line-height: 35px;
  font-weight: 300;
}

.countdown div#day:before {
  content: "Dní";
}

.countdown div#hour:before {
  content: "Hodin";
}

.countdown div#minute:before {
  content: "Minuty";
}

.countdown div#second:before {
  content: "Sekundy";
}

JavaScript

// 1. Nastav datum a čas na jednom místě (včetně roku)
const COUNTDOWN_DATE = new Date("2025-06-24T15:30:00");

// 2. Funkce pro odpočet
function countdown() {
    var now = new Date().getTime();
    var countDate = COUNTDOWN_DATE.getTime();
    var gap = countDate - now;

    var second = 1000;
    var minute = second * 60;
    var hour = minute * 60;
    var day = hour * 24;

    if (gap <= 0) {
        // Obnov stránku po vypršení odpočtu
        location.reload();
        return;
    }

    var d = Math.floor(gap / day);
    var h = Math.floor((gap % day) / hour);
    var m = Math.floor((gap % hour) / minute);
    var s = Math.floor((gap % minute) / second);

    document.getElementById("day").innerText = d;
    document.getElementById("hour").innerText = h;
    document.getElementById("minute").innerText = m;
    document.getElementById("second").innerText = s;
}

// 3. Spouštěj funkci každou sekundu
setInterval(countdown, 1000);

// Volání ihned po načtení stránky, aby hned zobrazil aktuální hodnoty
countdown();