Countdown/index.html at main · prenner-eo/Countdown · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Countdown</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }

    /* ✅ Black background */
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: #000;
      overflow: hidden; /* optional: prevents scrollbars if image covers */
    }

    /* ✅ Fullscreen PNG in the FOREGROUND */
    .fg-image {
      position: fixed;
      inset: 0;              /* top/right/bottom/left: 0 */
      width: 100%;
      height: 100%;
      object-fit: cover;     /* fill screen, keep aspect ratio */
      object-position: center;
      z-index: 2;            /* above text */
      pointer-events: none;  /* clicks go through */
      user-select: none;
    }

    /* Center content */
    .overlay {
      position: relative;
      z-index: 1;            /* below foreground image */
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      box-sizing: border-box;
    }

    /* Readable panel */
    .card {
      text-align: center;
      padding: 24px 28px;
      border-radius: 16px;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #fff;
      max-width: 90vw;
    }

    #timer {
      font-size: clamp(32px, 6vw, 64px);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      line-height: 1.15;
    }

    .small {
      margin-top: 10px;
      opacity: 0.85;
      font-size: 14px;
    }
  </style>
</head>
<body>

  <!-- ✅ Foreground image fills the entire viewport -->
  <img
    class="fg-image"
    src="assets/stone-wall-brick-wall-decal-hole-in-a-brick-wall-ed3ac32f9e4c7175c6f39076c9c45868.png"
    alt=""
  />

  <!-- Text centered (behind the PNG overlay) -->
  <div class="overlay">
    <div class="card">
      <div id="timer">Loading…</div>
      <div class="small" id="meta"></div>
    </div>
  </div>

  <script>
    // 22.04.2026 17:00 Europe/Berlin == 15:00Z (CEST)
    const target = new Date("2026-04-22T15:00:00Z");

    const el = document.getElementById("timer");
    const meta = document.getElementById("meta");

    function pad(n) { return String(n).padStart(2, "0"); }

    function tick() {
      const now = new Date();
      let diff = target - now;

      if (diff <= 0) {
        el.textContent = "🎉 Showtime!";
        meta.textContent = "";
        clearInterval(intervalId);
        return;
      }

      const totalSeconds = Math.floor(diff / 1000);
      const days = Math.floor(totalSeconds / (3600 * 24));
      const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;

      el.innerHTML =
        `${days} Tage<br>${pad(hours)} Stunden<br>${pad(minutes)} Minuten<br>${pad(seconds)} Sekunden`;
    }

    tick();
    const intervalId = setInterval(tick, 1000);
  </script>
</body>
</html>