mirror of
https://github.com/TheSL18/errorpages.git
synced 2025-10-03 19:00:10 +00:00
error pages
This commit is contained in:
TheSL18
140
shuffle/400.html
Normal file
140
shuffle/400.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 400: Bad Request
|
||||
Description: The server did not understand the request
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>400 - Bad Request</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">400: <span data-l10n>Bad Request</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 400: Bad Request
|
||||
Description: The server did not understand the request
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/401.html
Normal file
140
shuffle/401.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 401: Unauthorized
|
||||
Description: The requested page needs a username and a password
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>401 - Unauthorized</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">401: <span data-l10n>Unauthorized</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 401: Unauthorized
|
||||
Description: The requested page needs a username and a password
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/403.html
Normal file
140
shuffle/403.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 403: Forbidden
|
||||
Description: Access is forbidden to the requested page
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>403 - Forbidden</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">403: <span data-l10n>Forbidden</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 403: Forbidden
|
||||
Description: Access is forbidden to the requested page
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/404.html
Normal file
140
shuffle/404.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 404: Not Found
|
||||
Description: The server can not find the requested page
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>404 - Not Found</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">404: <span data-l10n>Not Found</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 404: Not Found
|
||||
Description: The server can not find the requested page
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/405.html
Normal file
140
shuffle/405.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 405: Method Not Allowed
|
||||
Description: The method specified in the request is not allowed
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>405 - Method Not Allowed</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">405: <span data-l10n>Method Not Allowed</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 405: Method Not Allowed
|
||||
Description: The method specified in the request is not allowed
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/407.html
Normal file
140
shuffle/407.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 407: Proxy Authentication Required
|
||||
Description: You must authenticate with a proxy server before this request can be served
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>407 - Proxy Authentication Required</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">407: <span data-l10n>Proxy Authentication Required</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 407: Proxy Authentication Required
|
||||
Description: You must authenticate with a proxy server before this request can be served
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/408.html
Normal file
140
shuffle/408.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 408: Request Timeout
|
||||
Description: The request took longer than the server was prepared to wait
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>408 - Request Timeout</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">408: <span data-l10n>Request Timeout</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 408: Request Timeout
|
||||
Description: The request took longer than the server was prepared to wait
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/409.html
Normal file
140
shuffle/409.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 409: Conflict
|
||||
Description: The request could not be completed because of a conflict
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>409 - Conflict</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">409: <span data-l10n>Conflict</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 409: Conflict
|
||||
Description: The request could not be completed because of a conflict
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/410.html
Normal file
140
shuffle/410.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 410: Gone
|
||||
Description: The requested page is no longer available
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>410 - Gone</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">410: <span data-l10n>Gone</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 410: Gone
|
||||
Description: The requested page is no longer available
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/411.html
Normal file
140
shuffle/411.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 411: Length Required
|
||||
Description: The "Content-Length" is not defined. The server will not accept the request without it
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>411 - Length Required</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">411: <span data-l10n>Length Required</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 411: Length Required
|
||||
Description: The "Content-Length" is not defined. The server will not accept the request without it
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/412.html
Normal file
140
shuffle/412.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 412: Precondition Failed
|
||||
Description: The pre condition given in the request evaluated to false by the server
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>412 - Precondition Failed</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">412: <span data-l10n>Precondition Failed</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 412: Precondition Failed
|
||||
Description: The pre condition given in the request evaluated to false by the server
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/413.html
Normal file
140
shuffle/413.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 413: Payload Too Large
|
||||
Description: The server will not accept the request, because the request entity is too large
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>413 - Payload Too Large</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">413: <span data-l10n>Payload Too Large</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 413: Payload Too Large
|
||||
Description: The server will not accept the request, because the request entity is too large
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/416.html
Normal file
140
shuffle/416.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 416: Requested Range Not Satisfiable
|
||||
Description: The requested byte range is not available and is out of bounds
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>416 - Requested Range Not Satisfiable</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">416: <span data-l10n>Requested Range Not Satisfiable</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 416: Requested Range Not Satisfiable
|
||||
Description: The requested byte range is not available and is out of bounds
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/418.html
Normal file
140
shuffle/418.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 418: I'm a teapot
|
||||
Description: Attempt to brew coffee with a teapot is not supported
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>418 - I'm a teapot</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">418: <span data-l10n>I'm a teapot</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 418: I'm a teapot
|
||||
Description: Attempt to brew coffee with a teapot is not supported
|
||||
-->
|
||||
</html>
|
||||
140
shuffle/429.html
Normal file
140
shuffle/429.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 429: Too Many Requests
|
||||
Description: Too many requests in a given amount of time
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>429 - Too Many Requests</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">429: <span data-l10n>Too Many Requests</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 429: Too Many Requests
|
||||
Description: Too many requests in a given amount of time
|
||||
-->
|
||||
</html>
|
||||
141
shuffle/500.html
Normal file
141
shuffle/500.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 500: Internal Server Error
|
||||
Description: The server met an unexpected condition
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>500 - Internal Server Error</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
::CLOUDFLARE_ERROR_500S_BOX::
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">500: <span data-l10n>Internal Server Error</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 500: Internal Server Error
|
||||
Description: The server met an unexpected condition
|
||||
-->
|
||||
</html>
|
||||
141
shuffle/502.html
Normal file
141
shuffle/502.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 502: Bad Gateway
|
||||
Description: The server received an invalid response from the upstream server
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>502 - Bad Gateway</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
::CLOUDFLARE_ERROR_500S_BOX::
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">502: <span data-l10n>Bad Gateway</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 502: Bad Gateway
|
||||
Description: The server received an invalid response from the upstream server
|
||||
-->
|
||||
</html>
|
||||
141
shuffle/503.html
Normal file
141
shuffle/503.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 503: Service Unavailable
|
||||
Description: The server is temporarily overloading or down
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>503 - Service Unavailable</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
::CLOUDFLARE_ERROR_500S_BOX::
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">503: <span data-l10n>Service Unavailable</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 503: Service Unavailable
|
||||
Description: The server is temporarily overloading or down
|
||||
-->
|
||||
</html>
|
||||
141
shuffle/504.html
Normal file
141
shuffle/504.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 504: Gateway Timeout
|
||||
Description: The gateway has timed out
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>504 - Gateway Timeout</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
::CLOUDFLARE_ERROR_500S_BOX::
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">504: <span data-l10n>Gateway Timeout</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 504: Gateway Timeout
|
||||
Description: The gateway has timed out
|
||||
-->
|
||||
</html>
|
||||
141
shuffle/505.html
Normal file
141
shuffle/505.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Error 505: HTTP Version Not Supported
|
||||
Description: The server does not support the "http protocol" version
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>505 - HTTP Version Not Supported</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: #222;
|
||||
color: #aaa;
|
||||
font-family: 'Hack', monospace;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#error_text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/* */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
::CLOUDFLARE_ERROR_500S_BOX::
|
||||
<div class="flex-center full-height">
|
||||
<div>
|
||||
<div id="error_text">
|
||||
<span class="source">505: <span data-l10n>HTTP Version Not Supported</span></span>
|
||||
<span class="target"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} $el
|
||||
*/
|
||||
const Shuffle = function ($el) {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
|
||||
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
|
||||
|
||||
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
|
||||
|
||||
/**
|
||||
* @param {Number} len
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomizedString = function (len) {
|
||||
let s = '';
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
s += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
|
||||
return s;
|
||||
};
|
||||
|
||||
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 (navigator.language.substring(0, 2).toLowerCase() !== 'en') {
|
||||
((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n)
|
||||
s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js';
|
||||
s.async = s.defer = true;
|
||||
s.addEventListener('load', () => p.removeChild(s));
|
||||
p.appendChild(s);
|
||||
})(document.createElement('script'), document.body);
|
||||
}
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
<!--
|
||||
Error 505: HTTP Version Not Supported
|
||||
Description: The server does not support the "http protocol" version
|
||||
-->
|
||||
</html>
|
||||
Reference in New Issue
Block a user