error-pages/templates/shuffle.html

269 lines
6.8 KiB
HTML
Raw Permalink Normal View History

2021-03-04 06:28:48 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
2024-07-03 14:12:13 +00:00
<meta charset="utf-8">
<meta name="robots" content="nofollow,noarchive,noindex">
<title>{{ code }} - {{ message }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- {{ if or (eq code 408) (eq code 425) (eq code 429) (eq code 500) (eq code 502) (eq code 503) (eq code 504) }} -->
<meta http-equiv="refresh" content="30">
<!-- {{ end }} -->
<meta name="title" content="{{ code }}: {{ message | escape }}">
<meta name="description" content="{{ description | escape }}">
<meta property="og:title" content="{{ code }}: {{ message | escape }}">
<meta property="og:description" content="{{ description | escape }}">
<meta property="twitter:title" content="{{ code }}: {{ message | escape }}">
<meta property="twitter:description" content="{{ description | escape }}">
<style>
:root {
--color-primary: #eee;
--color-inverted: #222;
}
2021-03-04 06:28:48 +00:00
2024-07-03 14:12:13 +00:00
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #222;
--color-inverted: #aaa;
}
}
2021-03-04 06:28:48 +00:00
2024-07-03 14:12:13 +00:00
html, body {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
background-color: var(--color-primary);
color: var(--color-inverted);
font-family: monospace;
font-size: 16px;
word-break: keep-all;
2024-07-03 14:12:13 +00:00
}
2021-03-04 06:28:48 +00:00
2024-07-03 14:12:13 +00:00
@media screen and (min-width: 2000px) {
html, body {
font-size: 20px;
}
}
2024-07-03 14:12:13 +00:00
body {
display: flex;
justify-content: center;
align-items: center;
}
2024-07-03 14:12:13 +00:00
main {
display: flex;
}
2024-07-03 14:12:13 +00:00
article {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
2024-07-03 14:12:13 +00:00
article #error_text h1 {
font-size: 2em;
font-weight: normal;
padding: 0;
margin: 0;
}
2024-07-03 14:12:13 +00:00
/* {{ if show_details }} */
#details {
table-layout: fixed;
width: 100%;
opacity: .75;
margin-top: 1em;
}
#details td {
white-space: nowrap;
font-size: 0.7em;
transition: opacity 1.4s, font-size .3s;
}
#details.hidden td {
opacity: 0;
font-size: 0;
}
#details .name,
#details .value {
width: 50%;
}
#details .name::first-letter,
#details .value::first-letter {
font-weight: bold;
}
#details .name {
text-align: right;
padding-right: .2em;
width: 50%;
}
#details .value {
text-align: left;
padding-left: .4em;
font-family: monospace;
overflow: hidden;
text-overflow: ellipsis;
}
/* {{ end }} */
</style>
2021-03-04 06:28:48 +00:00
</head>
<body>
2024-07-03 14:12:13 +00:00
<main>
<article>
<div id="error_text">
<h1 class="source">{{ code }}: <span data-l10n>{{ message }}</span></h1>
<h1 class="target"></h1>
</div>
2024-07-03 14:12:13 +00:00
<!-- {{- if show_details -}} -->
<table id="details" class="hidden">
<!-- {{- if host -}} -->
<tr>
<td class="name"><span data-l10n>Host</span>:</td>
<td class="value">{{ host }}</td>
</tr>
<!-- {{- end }}{{ if original_uri -}} -->
<tr>
<td class="name"><span data-l10n>Original URI</span>:</td>
<td class="value">{{ original_uri }}</td>
</tr>
<!-- {{- end }}{{ if forwarded_for -}} -->
<tr>
<td class="name"><span data-l10n>Forwarded for</span>:</td>
<td class="value">{{ forwarded_for }}</td>
</tr>
<!-- {{- end }}{{ if namespace -}} -->
<tr>
<td class="name"><span data-l10n>Namespace</span>:</td>
<td class="value">{{ namespace }}</td>
</tr>
<!-- {{- end }}{{ if ingress_name -}} -->
<tr>
<td class="name"><span data-l10n>Ingress name</span>:</td>
<td class="value">{{ ingress_name }}</td>
</tr>
<!-- {{- end }}{{ if service_name -}} -->
<tr>
<td class="name"><span data-l10n>Service name</span>:</td>
<td class="value">{{ service_name }}</td>
</tr>
<!-- {{- end }}{{ if service_port -}} -->
<tr>
<td class="name"><span data-l10n>Service port</span>:</td>
<td class="value">{{ service_port }}</td>
</tr>
<!-- {{- end }}{{ if request_id -}} -->
<tr>
<td class="name"><span data-l10n>Request ID</span>:</td>
<td class="value">{{ request_id }}</td>
</tr>
<!-- {{- end -}} -->
<tr>
<td class="name"><span data-l10n>Timestamp</span>:</td>
<td class="value">{{ nowUnix }}</td>
</tr>
</table>
<!-- {{- end -}} -->
</article>
</main>
2021-03-04 06:28:48 +00:00
<script>
2024-07-03 14:12:13 +00:00
'use strict';
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
const $source = $el.querySelector('.source');
const $target = $el.querySelector('.target');
let cursor = 0;
/** @type {Number|undefined} */
let scrambleInterval;
/** @type {Number|undefined} */
let cursorDelayInterval;
/** @type {Number|undefined} */
let cursorInterval;
2021-03-04 06:28:48 +00:00
2022-03-24 08:54:07 +00:00
/**
2024-07-03 14:12:13 +00:00
* @param {Number} len
* @return {string}
2022-03-24 08:54:07 +00:00
*/
2024-07-03 14:12:13 +00:00
const getRandomizedString = function (len) {
let s = '';
for (let i = 0; i < len; i++) {
s += chars[Math.floor(Math.random() * chars.length)];
}
return s;
2022-03-24 08:54:07 +00:00
};
2024-07-03 14:12:13 +00:00
this.start = function () {
$source.style.display = 'none';
$target.style.display = 'block';
scrambleInterval = window.setInterval(() => {
if (cursor <= $source.innerText.length) {
$target.innerText = $source.innerText.substring(0, cursor) + getRandomizedString($source.innerText.length - cursor);
}
}, 450 / 30);
cursorDelayInterval = window.setTimeout(() => {
cursorInterval = window.setInterval(() => {
if (cursor > $source.innerText.length - 1) {
this.stop();
}
cursor++;
}, 70);
}, 350);
};
this.stop = function () {
$source.style.display = 'block';
$target.style.display = 'none';
$target.innerText = '';
cursor = 0;
if (scrambleInterval !== undefined) {
window.clearInterval(scrambleInterval);
scrambleInterval = undefined;
}
if (cursorInterval !== undefined) {
window.clearInterval(cursorInterval);
cursorInterval = undefined;
}
if (cursorDelayInterval !== undefined) {
window.clearInterval(cursorDelayInterval);
cursorDelayInterval = undefined;
}
};
};
(new Shuffle(document.getElementById('error_text'))).start();
// {{ if show_details }}
window.setTimeout(function () {
document.getElementById('details').classList.remove('hidden');
}, 550);
// {{ end }}
2021-03-04 06:28:48 +00:00
</script>
2024-07-03 14:12:13 +00:00
<!-- {{- if l10n_enabled -}} -->
<script>// {{ l10nScript }}</script>
<!-- {{- end -}} -->
2021-03-04 06:28:48 +00:00
</body>
</html>