From 20e62ea01b7eee9c9a344ec849ef1a11fde023d5 Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Mon, 18 Dec 2023 10:45:45 +0100
Subject: [PATCH] Added countdown and error-pages

---
 static/internal/countdown/index.html |  90 +++++++++++++++
 static/internal/error/400.html       | 166 +++++++++++++++++++++++++++
 static/internal/error/500.html       | 161 ++++++++++++++++++++++++++
 3 files changed, 417 insertions(+)
 create mode 100644 static/internal/countdown/index.html
 create mode 100644 static/internal/error/400.html
 create mode 100644 static/internal/error/500.html
diff --git a/static/internal/countdown/index.html b/static/internal/countdown/index.html
new file mode 100644
index 0000000..6f004fb
--- /dev/null
+++ b/static/internal/countdown/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<!--
+    (c) Sangelo
+    Simple countdown webpage that can be used as a startpage
+    You can feed the date the counter should be counting down to in the URL like this:
+    http://<countdown>/?date=YYYY-MM-DDTHH:MM:SS
+-->
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Countdown Timer</title>
+    <style>
+        body {
+            background: radial-gradient(circle, #414144, #202123);
+            background-size: 100% 500%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            font-family: monospace, monospace;
+            color: #ffffff75;
+        }
+
+        #countdown {
+            font-size: 200px;
+            margin: 0 20px;
+            opacity: 1;
+            transition: opacity 0.5s;
+            pointer-events: none;
+        }
+
+        .completed {
+            color: #fff; /* Full opacity when countdown is completed */
+        }
+    </style>
+</head>
+<body>
+    <div id="countdown">000:00:00:00</div>
+
+    <script async>
+        function formatWithLeadingZeros(number, length) {
+            return number.toLocaleString('en-US', {minimumIntegerDigits: length, useGrouping: false});
+        }
+
+        const countdownElement = document.getElementById("countdown");
+        const countdownDate = getDateFromUrl();
+
+        function updateCountdown() {
+            const now = new Date().getTime();
+            const distance = countdownDate - now;
+
+            if (distance <= 0) {
+                countdownElement.innerHTML = "🥳";
+                countdownElement.classList.add("completed");
+                return;
+            }
+
+            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+            const formattedDays = formatWithLeadingZeros(days, 3);
+            const formattedHours = formatWithLeadingZeros(hours, 2);
+            const formattedMinutes = formatWithLeadingZeros(minutes, 2);
+            const formattedSeconds = formatWithLeadingZeros(seconds, 2);
+
+            countdownElement.innerHTML = `${formattedDays}:${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+            requestAnimationFrame(updateCountdown);
+        }
+
+        function getDateFromUrl() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const dateParam = urlParams.get('date');
+            if (dateParam) {
+                const timestamp = Date.parse(dateParam);
+                if (!isNaN(timestamp)) {
+                    return timestamp;
+                }
+            }
+            return new Date("1970-01-01T00:00:00").getTime();
+        }
+
+        requestAnimationFrame(updateCountdown);
+    </script>
+</body>
+</html>
+
diff --git a/static/internal/error/400.html b/static/internal/error/400.html
new file mode 100644
index 0000000..2e6ac22
--- /dev/null
+++ b/static/internal/error/400.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Error {{placeholder "http.error.status_code"}}</title>
+  <style>
+    @import url("https://fonts.cdnfonts.com/css/manrope");
+
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+      height: 100vh;
+      background-color: #121316;
+      color: #fff;
+      z-index: 1;
+    }
+
+    .text {
+      flex: 1 1 50%;
+      padding: 2em;
+      overflow: auto;
+      font-family: "Manrope", sans-serif;
+      z-index: 3;
+    }
+
+    .text h1 {
+      font-size: 80px;
+      margin-bottom: 0;
+      margin-top: 0.2em;
+      font-weight: 800;
+    }
+
+    .text h2 {
+      font-size: 40px;
+      font-weight: 500;
+      margin-top: 0;
+    }
+
+    .text p {
+      font-weight: 300;
+      font-size: 22px;
+      margin-bottom: 2em;
+    }
+
+    .text a.button {
+			text-decoration: none;
+			background-color: #ffffff;
+			padding: 0.6em;
+			padding-left: 1.5em;
+			padding-right: 1.5em;
+			border-radius: 8px;
+			color: #121316;
+			font-weight: 700;
+			transition: opacity ease-in-out 0.3;
+		}
+
+		.text a.button:hover {
+			opacity: 0.9;
+		}
+
+		.text a.button:active {
+			opacity: 0.8;
+		}
+
+    .blob {
+      position: relative;
+      flex: 1 1 50%;
+      height: 100vh;
+    }
+
+    .blob svg {
+      height: 100vh;
+      width: auto;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      margin: 0;
+      padding: 0;
+      z-index: 2;
+    }
+
+    @media (max-width: 850px) {
+      .blob {
+        display: none;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="text">
+    <h1>{{placeholder "http.error.status_code"}}</h1>
+    <h2>{{placeholder "http.error.status_text"}}</h2>
+    <p>
+      Looks like you got lost in space. Try searching again at planet earth.
+    </p>
+    <a class="button" href="/">Fly back home</a>
+  </div>
+  <div class="blob">
+    <svg
+      width="686"
+      height="1080"
+      viewBox="0 0 686 1080"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_i_1002_1047)">
+        <path
+          d="M88.6758 136C88.6758 34.6337 0 -8.02344 0 -66H686V1146H0C0 1146 88.6758 1044.94 88.6758 944C88.6758 843.064 0 843.419 0 742.582C0 641.745 88.6758 641.124 88.6758 540C88.6758 438.876 0 439.674 0 338.938C0 238.201 88.6758 237.366 88.6758 136Z"
+          fill="url(#paint0_radial_1002_1047)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_i_1002_1047"
+          x="0"
+          y="-66"
+          width="689"
+          height="1214"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="3" dy="2" />
+          <feGaussianBlur stdDeviation="4" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_1002_1047"
+          />
+        </filter>
+        <radialGradient
+          id="paint0_radial_1002_1047"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(32 540) scale(654 3651.84)"
+        >
+          <stop offset="0.34828" stop-color="#00B2FA" />
+          <stop offset="1" stop-color="#007DFF" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</body>
+
diff --git a/static/internal/error/500.html b/static/internal/error/500.html
new file mode 100644
index 0000000..06fcaf3
--- /dev/null
+++ b/static/internal/error/500.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Error {{placeholder "http.err.status_code"}}</title>
+  <style>
+    @import url("https://fonts.cdnfonts.com/css/manrope");
+
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+      height: 100vh;
+      background-color: #121316;
+      color: #fff;
+      z-index: 1;
+    }
+
+    .text {
+      flex: 1 1 50%;
+      padding: 2em;
+      overflow: auto;
+      font-family: "Manrope", sans-serif;
+      z-index: 3;
+    }
+
+    .text h1 {
+      font-size: 80px;
+      margin-bottom: 0;
+      margin-top: 0.2em;
+      font-weight: 800;
+    }
+
+    .text h2 {
+      font-size: 40px;
+      font-weight: 500;
+      margin-top: 0;
+    }
+
+    .text p {
+      font-weight: 300;
+      font-size: 22px;
+      margin-bottom: 2em;
+    }
+
+    .text a {
+      color: #00c4fb;
+    }
+
+    .text a:hover {
+      opacity: 0.9;
+      color: #00b2fa;
+    }
+
+    .text a:active {
+      opacity: 0.9;
+      color: #0091fb;
+    }
+
+    .blob {
+      position: relative;
+      flex: 1 1 50%;
+      height: 100vh;
+    }
+
+    .blob svg {
+      height: 100vh;
+      width: auto;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      margin: 0;
+      padding: 0;
+      z-index: 2;
+    }
+
+    @media (max-width: 850px) {
+      .blob {
+        display: none;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="text">
+    <h1>{{placeholder "http.err.status_code"}}</h1>
+    <h2>{{placeholder "http.err.status_text"}}</h2>
+    <p>
+      Looks like the website is down at the moment. Please try again later.<br />If
+      the error persists, contact me at
+      <a href="mailto:me@stelian.net">me@stelian.net</a>.
+    </p>
+  </div>
+  <div class="blob">
+    <svg
+      width="686"
+      height="1080"
+      viewBox="0 0 686 1080"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_i_1002_1047)">
+        <path
+          d="M88.6758 136C88.6758 34.6337 0 -8.02344 0 -66H686V1146H0C0 1146 88.6758 1044.94 88.6758 944C88.6758 843.064 0 843.419 0 742.582C0 641.745 88.6758 641.124 88.6758 540C88.6758 438.876 0 439.674 0 338.938C0 238.201 88.6758 237.366 88.6758 136Z"
+          fill="url(#paint0_radial_1002_1047)"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_i_1002_1047"
+          x="0"
+          y="-66"
+          width="689"
+          height="1214"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="3" dy="2" />
+          <feGaussianBlur stdDeviation="4" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_1002_1047"
+          />
+        </filter>
+        <radialGradient
+          id="paint0_radial_1002_1047"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(32 540) scale(654 3651.84)"
+        >
+          <stop offset="0.34828" stop-color="#00B2FA" />
+          <stop offset="1" stop-color="#007DFF" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</body>
+
