Template matrix (#81)

2024-08-30 18:22:40 +00:00 · 2022-03-27 20:33:31 +05:00 · 2022-03-27 20:33:31 +05:00 · 4a918b1899
commit 4a918b1899
parent 05be3841d7
6 changed files with 297 additions and 1 deletions
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -156,6 +156,7 @@ jobs: # Docs: <https://git.io/JvxXE>
          test -f ./out/lost-in-space/404.html
          test -f ./out/app-down/404.html
          test -f ./out/connection/404.html
+          test -f ./out/matrix/404.html

  docker-image:
    name: Build docker image
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,18 @@ All notable changes to this package will be documented in this file.

 The format is based on [Keep a Changelog][keepachangelog] and this project adheres to [Semantic Versioning][semver].

+## UNRELEASED
+
+### Added
+
+- Template `matrix` [#81]
+
+### Fixed
+
+- Localization mistakes [#81]
+
+[#81]:https://github.com/tarampampam/error-pages/pull/81
+
 ## v2.10.1

 ### Fixed
--- a/README.md
+++ b/README.md
@ -124,6 +124,7 @@ Transfer/sec:    140.23MB
 |  `lost-in-space`  |    [![lost-in-space][lost-in-space-screen]][lost-in-space-link]    |
 |    `app-down`     |           [![app-down][app-down-screen]][app-down-link]            |
 |   `connection`    |        [![connection][connection-screen]][connection-link]         |
+|     `matrix`      |              [![matrix][matrix-screen]][matrix-link]               |

 > Note: `noise` template highly uses the CPU, be careful

@ -147,6 +148,8 @@ Transfer/sec:    140.23MB
 [app-down-link]:https://tarampampam.github.io/error-pages/app-down/404.html
 [connection-screen]:https://hsto.org/webt/x4/ah/jb/x4ahjboo4-arm3bxpaash_sflmw.png
 [connection-link]:https://tarampampam.github.io/error-pages/connection/404.html
+[matrix-screen]:https://hsto.org/webt/ng/tf/oi/ngtfoiolvmq6hf15kimcxmhprhk.gif
+[matrix-link]:https://tarampampam.github.io/error-pages/matrix/404.html

 ## 🦾 Contributors

--- a/error-pages.yml
+++ b/error-pages.yml
@ -14,6 +14,7 @@ templates:
  - path: ./templates/lost-in-space.html
  - path: ./templates/app-down.html
  - path: ./templates/connection.html
+  - path: ./templates/matrix.html

 formats:
  json:
--- a/l10n/l10n.js
+++ b/l10n/l10n.js
@ -31,7 +31,7 @@ Object.defineProperty(window, 'l10n', {
                ru: 'Доступ к странице запрещён',
                uk: 'Доступ до сторінки заборонено'
            },
-            'Not Found': {ru: 'Ресурс не найден', uk: 'Ресурс не знайдено'},
+            'Not Found': {ru: 'Страница не найдена', uk: 'Сторінка не знайдена'},
            'The server can not find the requested page': {
                ru: 'Сервер не смог найти запрашиваемую страницу',
                uk: 'Сервер не міг знайти запитану сторінку'
--- a/templates/matrix.html
+++ b/templates/matrix.html
@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
+<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>{{ message }} ({{ code }})</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)}
+        /* {{ if show_details }} */
+        .container .details{margin-top:20px}
+        .container .details ul{padding:0}
+        .container .details code,.container .details span{font-size:11px}
+        .container .details code{padding-left:7px}
+        /* {{ end }} */
+        .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}
+            /* {{ if show_details }} */
+            .container .details code,.container .details span{font-size:11px}
+            /* {{ end }} */
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <ul id="matrix-words" class="hidden">
+        <li>{{ code }}</li>
+        <li>{{ message }}</li>
+        <li>{{ description }}</li>
+        <li>{{ code }} {{ message }}</li>
+    </ul>
+
+    <div class="message">
+        <h1>{{ code }}: <span data-l10n>{{ message }}</span></h1>
+        <p data-l10n>{{ description }}</p>
+
+        {{ if show_details }}
+        <div class="details">
+            <ul>
+                {{- if host }}<li><span><span data-l10n>Host</span>:</span> <code>{{ host }}</code></li>{{ end -}}
+                {{- if original_uri }}<li><span><span data-l10n>Original URI</span>:</span> <code>{{ original_uri }}</code></li>{{ end -}}
+                {{- if forwarded_for }}<li><span><span data-l10n>Forwarded for</span>:</span> <code>{{ forwarded_for }}</code></li>{{ end -}}
+                {{- if namespace }}<li><span><span data-l10n>Namespace</span>:</span> <code>{{ namespace }}</code></li>{{ end -}}
+                {{- if ingress_name }}<li><span><span data-l10n>Ingress name</span>:</span> <code>{{ ingress_name }}</code></li>{{ end -}}
+                {{- if service_name }}<li><span><span data-l10n>Service name</span>:</span> <code>{{ service_name }}</code></li>{{ end -}}
+                {{- if service_port }}<li><span><span data-l10n>Service port</span>:</span> <code>{{ service_port }}</code></li>{{ end -}}
+                {{- if request_id }}<li><span><span data-l10n>Request ID</span>:</span> <code>{{ request_id }}</code></li>{{ end -}}
+                <li><span><span data-l10n>Timestamp</span>:</span> <code>{{ now.Unix }}</code></li>
+            </ul>
+        </div>
+        {{ end }}
+    </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 {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
+</html>