init

2026-08-15 08:38:49 +02:00
commit bab51615c9
29 changed files with 2729 additions and 0 deletions
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="<%= langData.lang %>">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=1024">
+    <meta property="og:title" content="<%= langData.title %>" />
+    <meta property="og:description" content="<%= langData.description %>" />
+    <meta property="og:image" content="/previews/countdown.png" />
+    <meta property="og:url" content="/countdown/<%= langData.lang %>" />
+    <meta property="og:type" content="website" />
+    <title>
+        <%= langData.title %>
+    </title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/countdown.css">
+</head>
+
+<body>
+    <!-- Language Switcher -->
+    <div class="language-switcher">
+        <a href="/countdown/en">English</a> |
+        <a href="/countdown/de">Deutsch</a>
+    </div>
+
+    <!-- Menu Button and Menu -->
+    <header>
+        <button class="menu-button" id="menu-button" onclick="toggleMenu()">Menu</button>
+        <nav id="menu" class="retractable-menu">
+            <ul>
+                <li><a href="/card/<%= langData.lang %>">
+                        <%= langData.menu_card %>
+                    </a></li>
+	        <li><a href="/guestbook/<%= langData.lang %>">
+                        <%= langData.menu_guestbook %>
+                    </a></li>
+
+                <li><a href="/countdown/<%= langData.lang %>">
+                        <%= langData.menu_countdown %>
+                    </a></li>
+                <!-- Add more menu items as needed -->
+            </ul>
+        </nav>
+    </header>
+
+    <script>
+        function toggleMenu() {
+            const menu = document.getElementById('menu');
+            menu.classList.toggle('open');
+        }
+    </script>
+    <div class="countdown-card">
+        <p class="countdown-title"></p>
+        <h2 class="countdown">
+            <u style="color: rgba(0, 0, 0, 0.5); text-decoration-color: rgba(0, 0, 0, 0.5); text-decoration-thickness: 2px"><%= langData.countdown_text %></u>
+            <p>
+                    <div id="countdown"></div>
+            </p>
+        </h2>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script>
+        //Convert the Unix timestamp (seconds) to milliseconds
+        const targetDate = new Date(1727528400 * 1000);
+        const finishMessage = "<%= langData.countdown_finished %>";
+        function updateCountdown() {
+            const now = new Date();
+            const timeDifference = targetDate - now;
+
+            if (timeDifference <= 0) {
+                document.getElementById('countdown').innerHTML = finishMessage;
+                clearInterval(countdownInterval);  //Stop the interval when the countdown reaches 0
+                return;
+            }
+
+            const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
+
+            document.getElementById('countdown').innerHTML =
+                days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
+        }
+
+        //Update the countdown every second
+        const countdownInterval = setInterval(updateCountdown, 1000);
+        updateCountdown();  //Initial call to set the countdown immediately
+    </script>
+
+</html>