mirror of
https://github.com/tarampampam/error-pages.git
synced 2024-08-30 18:22:40 +00:00
deploy: fac7394ae2
This commit is contained in:
tarampampam
parent
65069c4132
commit
79d0f0f658
23
index.html
23
index.html
@ -204,6 +204,29 @@
|
||||
<li><a href="lost-in-space/504.html"><strong>504</strong>: Gateway Timeout</a></li>
|
||||
<li><a href="lost-in-space/505.html"><strong>505</strong>: HTTP Version Not Supported</a></li>
|
||||
</ul>
|
||||
<h2 class="mb-3">Template name: <Code>matrix</Code></h2>
|
||||
<ul class="mb-5">
|
||||
<li><a href="matrix/400.html"><strong>400</strong>: Bad Request</a></li>
|
||||
<li><a href="matrix/401.html"><strong>401</strong>: Unauthorized</a></li>
|
||||
<li><a href="matrix/403.html"><strong>403</strong>: Forbidden</a></li>
|
||||
<li><a href="matrix/404.html"><strong>404</strong>: Not Found</a></li>
|
||||
<li><a href="matrix/405.html"><strong>405</strong>: Method Not Allowed</a></li>
|
||||
<li><a href="matrix/407.html"><strong>407</strong>: Proxy Authentication Required</a></li>
|
||||
<li><a href="matrix/408.html"><strong>408</strong>: Request Timeout</a></li>
|
||||
<li><a href="matrix/409.html"><strong>409</strong>: Conflict</a></li>
|
||||
<li><a href="matrix/410.html"><strong>410</strong>: Gone</a></li>
|
||||
<li><a href="matrix/411.html"><strong>411</strong>: Length Required</a></li>
|
||||
<li><a href="matrix/412.html"><strong>412</strong>: Precondition Failed</a></li>
|
||||
<li><a href="matrix/413.html"><strong>413</strong>: Payload Too Large</a></li>
|
||||
<li><a href="matrix/416.html"><strong>416</strong>: Requested Range Not Satisfiable</a></li>
|
||||
<li><a href="matrix/418.html"><strong>418</strong>: I'm a teapot</a></li>
|
||||
<li><a href="matrix/429.html"><strong>429</strong>: Too Many Requests</a></li>
|
||||
<li><a href="matrix/500.html"><strong>500</strong>: Internal Server Error</a></li>
|
||||
<li><a href="matrix/502.html"><strong>502</strong>: Bad Gateway</a></li>
|
||||
<li><a href="matrix/503.html"><strong>503</strong>: Service Unavailable</a></li>
|
||||
<li><a href="matrix/504.html"><strong>504</strong>: Gateway Timeout</a></li>
|
||||
<li><a href="matrix/505.html"><strong>505</strong>: HTTP Version Not Supported</a></li>
|
||||
</ul>
|
||||
<h2 class="mb-3">Template name: <Code>noise</Code></h2>
|
||||
<ul class="mb-5">
|
||||
<li><a href="noise/400.html"><strong>400</strong>: Bad Request</a></li>
|
||||
|
||||
258
matrix/400.html
Normal file
258
matrix/400.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Bad Request (400)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>400</li>
|
||||
<li>Bad Request</li>
|
||||
<li>The server did not understand the request</li>
|
||||
<li>400 Bad Request</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>400: <span data-l10n>Bad Request</span></h1>
|
||||
<p data-l10n>The server did not understand the request</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/401.html
Normal file
258
matrix/401.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Unauthorized (401)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>401</li>
|
||||
<li>Unauthorized</li>
|
||||
<li>The requested page needs a username and a password</li>
|
||||
<li>401 Unauthorized</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>401: <span data-l10n>Unauthorized</span></h1>
|
||||
<p data-l10n>The requested page needs a username and a password</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/403.html
Normal file
258
matrix/403.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Forbidden (403)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>403</li>
|
||||
<li>Forbidden</li>
|
||||
<li>Access is forbidden to the requested page</li>
|
||||
<li>403 Forbidden</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>403: <span data-l10n>Forbidden</span></h1>
|
||||
<p data-l10n>Access is forbidden to the requested page</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/404.html
Normal file
258
matrix/404.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Not Found (404)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>404</li>
|
||||
<li>Not Found</li>
|
||||
<li>The server can not find the requested page</li>
|
||||
<li>404 Not Found</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>404: <span data-l10n>Not Found</span></h1>
|
||||
<p data-l10n>The server can not find the requested page</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/405.html
Normal file
258
matrix/405.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Method Not Allowed (405)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>405</li>
|
||||
<li>Method Not Allowed</li>
|
||||
<li>The method specified in the request is not allowed</li>
|
||||
<li>405 Method Not Allowed</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>405: <span data-l10n>Method Not Allowed</span></h1>
|
||||
<p data-l10n>The method specified in the request is not allowed</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/407.html
Normal file
258
matrix/407.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Proxy Authentication Required (407)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>407</li>
|
||||
<li>Proxy Authentication Required</li>
|
||||
<li>You must authenticate with a proxy server before this request can be served</li>
|
||||
<li>407 Proxy Authentication Required</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>407: <span data-l10n>Proxy Authentication Required</span></h1>
|
||||
<p data-l10n>You must authenticate with a proxy server before this request can be served</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/408.html
Normal file
258
matrix/408.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Request Timeout (408)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>408</li>
|
||||
<li>Request Timeout</li>
|
||||
<li>The request took longer than the server was prepared to wait</li>
|
||||
<li>408 Request Timeout</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>408: <span data-l10n>Request Timeout</span></h1>
|
||||
<p data-l10n>The request took longer than the server was prepared to wait</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/409.html
Normal file
258
matrix/409.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Conflict (409)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>409</li>
|
||||
<li>Conflict</li>
|
||||
<li>The request could not be completed because of a conflict</li>
|
||||
<li>409 Conflict</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>409: <span data-l10n>Conflict</span></h1>
|
||||
<p data-l10n>The request could not be completed because of a conflict</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/410.html
Normal file
258
matrix/410.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Gone (410)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>410</li>
|
||||
<li>Gone</li>
|
||||
<li>The requested page is no longer available</li>
|
||||
<li>410 Gone</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>410: <span data-l10n>Gone</span></h1>
|
||||
<p data-l10n>The requested page is no longer available</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/411.html
Normal file
258
matrix/411.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Length Required (411)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>411</li>
|
||||
<li>Length Required</li>
|
||||
<li>The "Content-Length" is not defined. The server will not accept the request without it</li>
|
||||
<li>411 Length Required</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>411: <span data-l10n>Length Required</span></h1>
|
||||
<p data-l10n>The "Content-Length" is not defined. The server will not accept the request without it</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/412.html
Normal file
258
matrix/412.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Precondition Failed (412)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>412</li>
|
||||
<li>Precondition Failed</li>
|
||||
<li>The pre condition given in the request evaluated to false by the server</li>
|
||||
<li>412 Precondition Failed</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>412: <span data-l10n>Precondition Failed</span></h1>
|
||||
<p data-l10n>The pre condition given in the request evaluated to false by the server</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/413.html
Normal file
258
matrix/413.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Payload Too Large (413)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>413</li>
|
||||
<li>Payload Too Large</li>
|
||||
<li>The server will not accept the request, because the request entity is too large</li>
|
||||
<li>413 Payload Too Large</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>413: <span data-l10n>Payload Too Large</span></h1>
|
||||
<p data-l10n>The server will not accept the request, because the request entity is too large</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/416.html
Normal file
258
matrix/416.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Requested Range Not Satisfiable (416)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>416</li>
|
||||
<li>Requested Range Not Satisfiable</li>
|
||||
<li>The requested byte range is not available and is out of bounds</li>
|
||||
<li>416 Requested Range Not Satisfiable</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>416: <span data-l10n>Requested Range Not Satisfiable</span></h1>
|
||||
<p data-l10n>The requested byte range is not available and is out of bounds</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/418.html
Normal file
258
matrix/418.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>I'm a teapot (418)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>418</li>
|
||||
<li>I'm a teapot</li>
|
||||
<li>Attempt to brew coffee with a teapot is not supported</li>
|
||||
<li>418 I'm a teapot</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>418: <span data-l10n>I'm a teapot</span></h1>
|
||||
<p data-l10n>Attempt to brew coffee with a teapot is not supported</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/429.html
Normal file
258
matrix/429.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Too Many Requests (429)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>429</li>
|
||||
<li>Too Many Requests</li>
|
||||
<li>Too many requests in a given amount of time</li>
|
||||
<li>429 Too Many Requests</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>429: <span data-l10n>Too Many Requests</span></h1>
|
||||
<p data-l10n>Too many requests in a given amount of time</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/500.html
Normal file
258
matrix/500.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Internal Server Error (500)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>500</li>
|
||||
<li>Internal Server Error</li>
|
||||
<li>The server met an unexpected condition</li>
|
||||
<li>500 Internal Server Error</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>500: <span data-l10n>Internal Server Error</span></h1>
|
||||
<p data-l10n>The server met an unexpected condition</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/502.html
Normal file
258
matrix/502.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Bad Gateway (502)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>502</li>
|
||||
<li>Bad Gateway</li>
|
||||
<li>The server received an invalid response from the upstream server</li>
|
||||
<li>502 Bad Gateway</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>502: <span data-l10n>Bad Gateway</span></h1>
|
||||
<p data-l10n>The server received an invalid response from the upstream server</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/503.html
Normal file
258
matrix/503.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Service Unavailable (503)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>503</li>
|
||||
<li>Service Unavailable</li>
|
||||
<li>The server is temporarily overloading or down</li>
|
||||
<li>503 Service Unavailable</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>503: <span data-l10n>Service Unavailable</span></h1>
|
||||
<p data-l10n>The server is temporarily overloading or down</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/504.html
Normal file
258
matrix/504.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>Gateway Timeout (504)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>504</li>
|
||||
<li>Gateway Timeout</li>
|
||||
<li>The gateway has timed out</li>
|
||||
<li>504 Gateway Timeout</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>504: <span data-l10n>Gateway Timeout</span></h1>
|
||||
<p data-l10n>The gateway has timed out</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
258
matrix/505.html
Normal file
258
matrix/505.html
Normal file
@ -0,0 +1,258 @@
|
||||
<!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>HTTP Version Not Supported (505)</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{--matrix-glyph-size:15px;--matrix-glyph-font-size:15px;--matrix-glyph-front-color:rgba(255, 255, 255, 0.8);--matrix-glyph-tail-color:#0f0;--matrix-overlay-color:rgba(18, 18, 18, 0.05)}
|
||||
body,html{margin:0;padding:0;background-color:#000;height:100vh}
|
||||
#matrix{display:block;position:fixed;width:100vw;height:100vh}
|
||||
.container{align-items:center;display:flex;justify-content:center;position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}
|
||||
.container .message{background-color:rgba(0,0,0,.85);border:2px solid var(--matrix-glyph-tail-color);padding:15px 20px;margin:0 20px;font-family:Inconsolata,Helvetica,sans-serif;text-align:center;font-size:0;color:var(--matrix-glyph-tail-color);text-shadow:1px 0 2px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);box-shadow:1px 0 5px var(--matrix-glyph-tail-color),-1px 0 2px var(--matrix-glyph-tail-color);max-width:640px}
|
||||
.container .message h1{margin:0;font-size:52px}
|
||||
.container .message p{margin:.3em 0 0 0;font-size:17px;color:var(--matrix-glyph-front-color)}
|
||||
/* */
|
||||
.hidden {display:none}
|
||||
@media screen and (max-width:820px){
|
||||
:root{--matrix-glyph-size:10px;--matrix-glyph-font-size:10px}
|
||||
.container .message h1{font-size:38px}
|
||||
.container .message p{font-size:13px}
|
||||
/* */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<ul id="matrix-words" class="hidden">
|
||||
<li>505</li>
|
||||
<li>HTTP Version Not Supported</li>
|
||||
<li>The server does not support the "http protocol" version</li>
|
||||
<li>505 HTTP Version Not Supported</li>
|
||||
</ul>
|
||||
|
||||
<div class="message">
|
||||
<h1>505: <span data-l10n>HTTP Version Not Supported</span></h1>
|
||||
<p data-l10n>The server does not support the "http protocol" version</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} $canvas
|
||||
* @constructor
|
||||
*/
|
||||
const Matrix = function ($canvas) {
|
||||
const symbols = 'ラドクリフマラソンわたしワタシんょンョたばこタバコとうきょうトウキョウ '.split('');
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
const getRandomSymbol = function () {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
const ctx = $canvas.getContext('2d');
|
||||
ctx.globalCompositeOperation = 'lighter'; // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
|
||||
|
||||
this.redrawInterval = 70; // fade oud speed
|
||||
this.glyphSize = 0;
|
||||
this.rowsCapacity = 0;
|
||||
this.columnsCapacity = 0;
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.init = () => {
|
||||
$canvas.width = $canvas.clientWidth;
|
||||
$canvas.height = $canvas.clientHeight;
|
||||
|
||||
this.glyphSize = parseInt(getComputedStyle($canvas).getPropertyValue('--matrix-glyph-size'), 10);
|
||||
this.rowsCapacity = Math.ceil($canvas.clientHeight / this.glyphSize);
|
||||
this.columnsCapacity = Math.ceil($canvas.clientWidth / this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} symbol
|
||||
* @param {number} row
|
||||
* @param {number} column
|
||||
* @param {string} color
|
||||
*/
|
||||
const drawSymbol = (symbol, row, column, color) => {
|
||||
if (row > this.rowsCapacity || column > this.columnsCapacity) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.font = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-font-size') + ' monospace';
|
||||
|
||||
if (symbol.length > 1) {
|
||||
symbol = symbol.charAt(0); // only one char is allowed
|
||||
}
|
||||
|
||||
let xOffset = 0, charCode = symbol.charCodeAt(0);
|
||||
|
||||
if (charCode >= 33 && charCode <= 126) { // is ascii
|
||||
xOffset = this.glyphSize / 5;
|
||||
}
|
||||
|
||||
ctx.fillText(symbol, (column * this.glyphSize) + xOffset, row * this.glyphSize);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {number} column
|
||||
* @param {number} speed Lowest = fastest, largest = slowest
|
||||
* @param {string?} text
|
||||
* @param {number?} offset
|
||||
*/
|
||||
const drawLine = (column, speed, text, offset) => {
|
||||
let cursor = 0;
|
||||
|
||||
const tailColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-tail-color'),
|
||||
frontColor = getComputedStyle($canvas).getPropertyValue('--matrix-glyph-front-color');
|
||||
|
||||
const handler = window.setInterval(() => {
|
||||
if (column > this.columnsCapacity) {
|
||||
return window.clearInterval(handler);
|
||||
}
|
||||
|
||||
if (cursor <= this.rowsCapacity) {
|
||||
let symbol = getRandomSymbol();
|
||||
|
||||
if (typeof text === 'string' && typeof offset === 'number') {
|
||||
if (cursor >= offset && text.length >= cursor - offset) {
|
||||
symbol = text.charAt(cursor - offset);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof symbol === 'string' && symbol !== ' ') {
|
||||
const prev = cursor;
|
||||
|
||||
window.setTimeout(() => { // redraw with a green color
|
||||
drawSymbol(symbol, prev, column, tailColor);
|
||||
}, speed / 1.3);
|
||||
|
||||
drawSymbol(symbol, cursor, column, frontColor); // white color first
|
||||
}
|
||||
|
||||
cursor++;
|
||||
} else {
|
||||
window.clearInterval(handler);
|
||||
}
|
||||
}, speed);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.redraw = () => {
|
||||
ctx.fillStyle = getComputedStyle($canvas).getPropertyValue('--matrix-overlay-color');
|
||||
ctx.fillRect(0, 0, $canvas.clientWidth, $canvas.clientHeight);
|
||||
};
|
||||
|
||||
let redrawIntervalHandler = undefined, dropsIntervalHandler = undefined;
|
||||
|
||||
/**
|
||||
* @param {HTMLUListElement?} $linesList
|
||||
*/
|
||||
this.run = ($linesList) => {
|
||||
if (redrawIntervalHandler === undefined) {
|
||||
redrawIntervalHandler = window.setInterval(this.redraw, this.redrawInterval);
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler === undefined) {
|
||||
const fn = () => {
|
||||
const randomColumn = Math.floor(Math.random() * (this.columnsCapacity + 1)),
|
||||
minSpeed = 200, maxSpeed = 50,
|
||||
randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
|
||||
|
||||
const list = [];
|
||||
let line = undefined, offset = undefined;
|
||||
|
||||
if ($linesList !== undefined) {
|
||||
Array.prototype.forEach.call($linesList.querySelectorAll('li'), $li => {
|
||||
const text = $li.innerText.trim();
|
||||
|
||||
if (text.length > 0) {
|
||||
list.push(text);
|
||||
}
|
||||
});
|
||||
|
||||
if (list.length > 0 && Math.random() > 0.4) {
|
||||
line = list[Math.floor(Math.random() * list.length)];
|
||||
offset = Math.floor(Math.random() * line.length);
|
||||
|
||||
if (offset <= 5) {
|
||||
offset *= 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawLine(randomColumn, randomSpeed, line, offset);
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
dropsIntervalHandler = window.setInterval(fn, ((minSpeed + maxSpeed) / 2 * this.rowsCapacity) / this.columnsCapacity / 0.5);
|
||||
};
|
||||
|
||||
fn();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {void}
|
||||
*/
|
||||
this.stop = () => {
|
||||
if (redrawIntervalHandler !== undefined) {
|
||||
window.clearInterval(redrawIntervalHandler);
|
||||
redrawIntervalHandler = undefined;
|
||||
}
|
||||
|
||||
if (dropsIntervalHandler !== undefined) {
|
||||
window.clearInterval(dropsIntervalHandler);
|
||||
dropsIntervalHandler = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof ResizeObserver === 'function') {
|
||||
(new ResizeObserver(this.init)).observe($canvas);
|
||||
} else {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
|
||||
(new Matrix(document.getElementById('matrix'))).run(document.getElementById('matrix-words'));
|
||||
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user