Added countdown and error-pages
This commit is contained in:
parent
d566a95288
commit
20e62ea01b
3 changed files with 417 additions and 0 deletions
90
static/internal/countdown/index.html
Normal file
90
static/internal/countdown/index.html
Normal file
|
|
@ -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>
|
||||||
|
|
||||||
166
static/internal/error/400.html
Normal file
166
static/internal/error/400.html
Normal file
|
|
@ -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>
|
||||||
|
|
||||||
161
static/internal/error/500.html
Normal file
161
static/internal/error/500.html
Normal file
|
|
@ -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>
|
||||||
|
|
||||||
Loading…
Reference in a new issue