Mirrored_Repos/error-pages
1
0
Fork 0
mirror of https://github.com/tarampampam/error-pages.git synced 2024-08-30 18:22:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

deploy: 94dff2421c

Browse Source
This commit is contained in:
tarampampam 2022-03-24 09:14:19 +00:00
parent 6f57dfb45d
commit 65069c4132
40 changed files with 1540 additions and 520 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
connection/400.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 400: Bad Request
Description: The server did not understand the request
-->
</html>

8
connection/401.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 401: Unauthorized
Description: The requested page needs a username and a password
-->
</html>

8
connection/403.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 403: Forbidden
Description: Access is forbidden to the requested page
-->
</html>

8
connection/404.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 404: Not Found
Description: The server can not find the requested page
-->
</html>

8
connection/405.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 405: Method Not Allowed
Description: The method specified in the request is not allowed
-->
</html>

8
connection/407.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 407: Proxy Authentication Required
Description: You must authenticate with a proxy server before this request can be served
-->
</html>

8
connection/408.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 408: Request Timeout
Description: The request took longer than the server was prepared to wait
-->
</html>

8
connection/409.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 409: Conflict
Description: The request could not be completed because of a conflict
-->
</html>

8
connection/410.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 410: Gone
Description: The requested page is no longer available
-->
</html>

8
connection/411.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 411: Length Required
Description: The "Content-Length" is not defined. The server will not accept the request without it
-->
</html>

8
connection/412.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 412: Precondition Failed
Description: The pre condition given in the request evaluated to false by the server
-->
</html>

8
connection/413.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 413: Payload Too Large
Description: The server will not accept the request, because the request entity is too large
-->
</html>

8
connection/416.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 416: Requested Range Not Satisfiable
Description: The requested byte range is not available and is out of bounds
-->
</html>

8
connection/418.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 418: I'm a teapot
Description: Attempt to brew coffee with a teapot is not supported
-->
</html>

8
connection/429.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 429: Too Many Requests
Description: Too many requests in a given amount of time
-->
</html>

8
connection/500.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 500: Internal Server Error
Description: The server met an unexpected condition
-->
</html>

8
connection/502.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 502: Bad Gateway
Description: The server received an invalid response from the upstream server
-->
</html>

8
connection/503.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 503: Service Unavailable
Description: The server is temporarily overloading or down
-->
</html>

8
connection/504.html
View File

@ -1,4 +1,8 @@
<!DOCTYPE html>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 504: Gateway Timeout
Description: The gateway has timed out
-->
</html>

8
connection/505.html
View File

@ -1,4 +1,8 @@
<!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"/>
@ -238,4 +242,8 @@
})(document.createElement('script'), document.body);
}
</script>
<!--
Error 505: HTTP Version Not Supported
Description: The server does not support the "http protocol" version
-->
</html>

95
shuffle/400.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">400: <span data-l10n>Bad Request</span></span>
<div id="error_text">
<span class="source">400: <span data-l10n>Bad Request</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/401.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">401: <span data-l10n>Unauthorized</span></span>
<div id="error_text">
<span class="source">401: <span data-l10n>Unauthorized</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/403.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">403: <span data-l10n>Forbidden</span></span>
<div id="error_text">
<span class="source">403: <span data-l10n>Forbidden</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/404.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">404: <span data-l10n>Not Found</span></span>
<div id="error_text">
<span class="source">404: <span data-l10n>Not Found</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/405.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">405: <span data-l10n>Method Not Allowed</span></span>
<div id="error_text">
<span class="source">405: <span data-l10n>Method Not Allowed</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/407.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">407: <span data-l10n>Proxy Authentication Required</span></span>
<div id="error_text">
<span class="source">407: <span data-l10n>Proxy Authentication Required</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/408.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">408: <span data-l10n>Request Timeout</span></span>
<div id="error_text">
<span class="source">408: <span data-l10n>Request Timeout</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/409.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">409: <span data-l10n>Conflict</span></span>
<div id="error_text">
<span class="source">409: <span data-l10n>Conflict</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/410.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">410: <span data-l10n>Gone</span></span>
<div id="error_text">
<span class="source">410: <span data-l10n>Gone</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/411.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">411: <span data-l10n>Length Required</span></span>
<div id="error_text">
<span class="source">411: <span data-l10n>Length Required</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/412.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">412: <span data-l10n>Precondition Failed</span></span>
<div id="error_text">
<span class="source">412: <span data-l10n>Precondition Failed</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/413.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">413: <span data-l10n>Payload Too Large</span></span>
<div id="error_text">
<span class="source">413: <span data-l10n>Payload Too Large</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/416.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">416: <span data-l10n>Requested Range Not Satisfiable</span></span>
<div id="error_text">
<span class="source">416: <span data-l10n>Requested Range Not Satisfiable</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/418.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">418: <span data-l10n>I'm a teapot</span></span>
<div id="error_text">
<span class="source">418: <span data-l10n>I'm a teapot</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/429.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">429: <span data-l10n>Too Many Requests</span></span>
<div id="error_text">
<span class="source">429: <span data-l10n>Too Many Requests</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/500.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">500: <span data-l10n>Internal Server Error</span></span>
<div id="error_text">
<span class="source">500: <span data-l10n>Internal Server Error</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/502.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">502: <span data-l10n>Bad Gateway</span></span>
<div id="error_text">
<span class="source">502: <span data-l10n>Bad Gateway</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/503.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">503: <span data-l10n>Service Unavailable</span></span>
<div id="error_text">
<span class="source">503: <span data-l10n>Service Unavailable</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/504.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">504: <span data-l10n>Gateway Timeout</span></span>
<div id="error_text">
<span class="source">504: <span data-l10n>Gateway Timeout</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}

95
shuffle/505.html
View File

@ -39,7 +39,10 @@
<body>
<div class="flex-center full-height">
<div>
<span id="error_text">505: <span data-l10n>HTTP Version Not Supported</span></span>
<div id="error_text">
<span class="source">505: <span data-l10n>HTTP Version Not Supported</span></span>
<span class="target"></span>
</div>
</div>
</div>
@ -47,42 +50,82 @@
<script>
'use strict';
const $errorText = document.getElementById('error_text'),
characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
let text = $errorText.innerText, progress = 0;
/**
* @param {HTMLElement} $el
*/
const Shuffle = function ($el) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
$source = $el.querySelector('.source'), $target = $el.querySelector('.target');
const scrambleInterval = window.setInterval(function () {
let newText = text;
let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;
for (let i = 0; i < text.length; i++) {
if (i >= progress) {
newText = newText.substr(0, i) +
characters[Math.round(Math.random() * (characters.length - 1))] +
newText.substr(i + 1);
/**
* @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)];
}
}
$errorText.innerText = newText;
}, 450 / 60);
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();
//
window.setTimeout(function () {
let revealInterval = window.setInterval(function () {
if (progress < text.length) {
progress++;
} else {
window.clearInterval(revealInterval);
window.clearInterval(scrambleInterval);
}
}, 70);
}, 350);
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); text = $errorText.innerText});
s.addEventListener('load', () => p.removeChild(s));
p.appendChild(s);
})(document.createElement('script'), document.body);
}