DeSqBlocki
94 lines
3.8 KiB
Plaintext
94 lines
3.8 KiB
Plaintext
<!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>
|