✨ countdown to 01 aug 2024 (fix #93)

page/start/countdown.js

@@ -0,0 +1,51 @@
+"use strict";
+
+let countdown_h1;
+
+window.addEventListener("load", function(){
+	// STORE ELEMENTS //
+	countdown_h1 = document.getElementById("countdown-h1");
+	
+	
+	// PERIODIC REDRAW //
+	countdown_redraw();
+	setInterval(countdown_redraw, 3000);
+});
+
+
+
+/**
+* SCHEDULED: Update countdown text.
+*/
+async function countdown_redraw(){
+	// CALCULATE TIME DIFF //
+	let now = new Date();
+	let goal = new Date(2024, (8 -1), 1, 8, 0);
+	let difference = Math.max(0, goal.getTime() - now.getTime());
+	
+	// days
+	let days_raw = Math.floor(difference / (24 * 60 * 60 * 1000));
+	let days = days_raw;
+	
+	// hours
+	let hours_raw = Math.floor((difference - (days_raw * 86400000)) / (3600000));
+	let hours = (hours_raw < 10 ? ("0" + hours_raw) : hours_raw);
+	
+	// minutes
+	let minutes_raw = Math.floor((difference - (days_raw * 86400000) - (hours_raw * 3600000)) / (60000));
+	let minutes = (minutes_raw < 10 ? ("0" + minutes_raw) : minutes_raw);
+	
+	
+	// FORMAT TEXT //
+	// start with days
+	let formatted = days + "d";
+	
+	// add hours
+	formatted += " " + hours + "h";
+	
+	// add minutes
+	formatted += " " + minutes + "m";
+	
+	// set text
+	countdown_h1.textContent = formatted;
+}

page/start/index.php

@@ -42,6 +42,7 @@
 	Page::$head["mastodon_verify"] = '<link rel="me" href="https://lsbt.me/@sbggjetzt" />';
 	
 	require("./page/page_base.php");
+	Page::js(__DIR__ . "/countdown.js");
 	Page::js(__DIR__ . "/newsletter.js");
 	Page::css(__DIR__ . "/style.css");
 ?>
@@ -60,8 +61,10 @@
 <div class="page-container has-nav">
 	<div id="page" class="page">
 		<div class="title">
-			<h1><?= $dict->get("name") ?></h1>
-			<h2><?= $dict->get("page_title_h2") ?></h2>
+			<!-- <h1><?= $dict->get("name") ?></h1>
+			<h2><?= $dict->get("page_title_h2") ?></h2> -->
+			<h1 id="countdown-h1" style="font-variant-numeric: tabular-nums;"><?= $dict->get("name") ?></h1>
+			<h2><?= $dict->get("page_countdown_h2") ?></h2>
 		</div>
 		
 		

page/start/strings.php

@@ -12,6 +12,10 @@
 			"de" => "Alle Infos zum Selbstbestimmungsgesetz",
 			"en" => "Everything about the German Self-Determination Law",
 		],
+		"page_countdown_h2" => [
+			"de" => "01 Aug 2024 • Anmeldung beim Standesamt wird möglich",
+			"en" => "01 Aug 2024 • Registration at the registry office becomes possible",
+		],