From 7957d16c0f6e8ce62bd825cb55044389b45f723e Mon Sep 17 00:00:00 2001
From: Paramtamtam <7326800+tarampampam@users.noreply.github.com>
Date: Thu, 4 Mar 2021 11:28:48 +0500
Subject: [PATCH] New template "shuffle" was added (#5)

---
 .github/workflows/release.yml |  4 +-
 .github/workflows/tests.yml   |  4 +-
 CHANGELOG.md                  |  8 ++++
 README.md                     | 11 +++---
 config.json                   |  4 ++
 templates/shuffle.html        | 71 +++++++++++++++++++++++++++++++++++
 6 files changed, 93 insertions(+), 9 deletions(-)
 create mode 100644 templates/shuffle.html

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index aeb6ef3..55ed50f 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -7,7 +7,7 @@ on:
 jobs:
   demo:
     name: Update demonstration, hosted on github pages
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Check out code
         uses: actions/checkout@v2
@@ -67,7 +67,7 @@ jobs:
 
   docker-image:
     name: Build docker image
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Check out code
         uses: actions/checkout@v2
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 80021b0..da431bb 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -11,7 +11,7 @@ on:
 jobs: # Docs: <https://git.io/JvxXE>
   generate:
     name: Try to run generator
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Check out code
         uses: actions/checkout@v2
@@ -37,7 +37,7 @@ jobs: # Docs: <https://git.io/JvxXE>
 
   docker-build:
     name: Build docker image
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Check out code
         uses: actions/checkout@v2
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47e80a7..a0d3131 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,14 @@ 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].
 
+## v1.4.0
+
+### Added
+
+- Template `shuffle` [#4]
+
+[#3]:https://github.com/tarampampam/error-pages/issues/4
+
 ## v1.3.1
 
 ### Fixed
diff --git a/README.md b/README.md
index b3e7bdf..89fa708 100644
--- a/README.md
+++ b/README.md
@@ -47,8 +47,9 @@ $ make preview
    Name    | Preview
 :--------: | :-----:
 `ghost`    | ![ghost](https://hsto.org/webt/zg/ul/cv/zgulcvxqzhazoebxhg8kpxla8lk.png)
-`l7-light` | ![ghost](https://hsto.org/webt/xc/iq/vt/xciqvty-aoj-rchfarsjhutpjny.png)
-`l7-dark`  | ![ghost](https://hsto.org/webt/s1/ih/yr/s1ihyrqs_y-sgraoimfhk6ypney.png)
+`l7-light` | ![l7-light](https://hsto.org/webt/xc/iq/vt/xciqvty-aoj-rchfarsjhutpjny.png)
+`l7-dark`  | ![l7-dark](https://hsto.org/webt/s1/ih/yr/s1ihyrqs_y-sgraoimfhk6ypney.png)
+`shuffle`  | ![shuffle](https://habrastorage.org/webt/ck/gk/lj/ckgkljezwegq5rbcocalykfgv3u.png)
 
 ## Usage
 
@@ -65,7 +66,7 @@ Name            | Description
 Execute in your shell:
 
 ```bash
-$ docker run --rm -p "8082:8080" tarampampam/error-pages:1.3.0
+$ docker run --rm -p "8082:8080" tarampampam/error-pages:1.4.0
 ```
 
 And open in your browser `http://127.0.0.1:8082/ghost/400.html`.
@@ -106,7 +107,7 @@ FROM nginx:1.18-alpine
 COPY --chown=nginx \
      ./nginx.conf /etc/nginx/conf.d/default.conf
 COPY --chown=nginx \
-     --from=tarampampam/error-pages:1.3.0 \
+     --from=tarampampam/error-pages:1.4.0 \
      /opt/html/ghost /usr/share/nginx/errorpages/_error-pages
 ```
 
@@ -121,7 +122,7 @@ version: '3.4'
 
 services:
   error-pages:
-    image: tarampampam/error-pages:1.3.0
+    image: tarampampam/error-pages:1.4.0
     environment:
       TEMPLATE_NAME: l7-dark
     networks:
diff --git a/config.json b/config.json
index e1d862d..2ef2e7a 100644
--- a/config.json
+++ b/config.json
@@ -11,6 +11,10 @@
         {
             "name": "l7-dark",
             "path": "./templates/l7-dark.html"
+        },
+        {
+            "name": "shuffle",
+            "path": "./templates/shuffle.html"
         }
     ],
     "output": {
diff --git a/templates/shuffle.html b/templates/shuffle.html
new file mode 100644
index 0000000..9eb75c1
--- /dev/null
+++ b/templates/shuffle.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<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>{{ code }} - {{ message }}</title>
+    <style>
+        html, body {
+            margin: 0;
+            background-color: #222;
+            color: #aaa;
+            font-family: 'Hack', monospace
+        }
+
+        .full-height {
+            height: 100vh
+        }
+
+        .flex-center {
+            align-items: center;
+            display: flex;
+            justify-content: center
+        }
+
+        #error_text {
+            font-size: 2em
+        }
+    </style>
+</head>
+<body>
+<div class="flex-center full-height">
+    <span id="error_text">{{ code }}: {{ message }}</span>
+</div>
+
+<script>
+    'use strict';
+
+    const $errorText = document.getElementById('error_text'),
+        text = $errorText.innerText,
+        characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
+    let progress = 0;
+
+    const scrambleInterval = window.setInterval(function () {
+        let newText = text;
+
+        for (let i = 0; i < text.length; i++) {
+            if (i >= progress) {
+                newText = newText.substr(0, i) +
+                    characters[Math.round(Math.random() * (characters.length - 1))] +
+                    newText.substr(i + 1);
+            }
+        }
+
+        $errorText.innerText = newText;
+    }, 800 / 60);
+
+    window.setTimeout(function () {
+        let revealInterval = window.setInterval(function () {
+            if (progress < text.length) {
+                progress++;
+            } else {
+                window.clearInterval(revealInterval);
+                window.clearInterval(scrambleInterval);
+            }
+        }, 70);
+    }, 350);
+</script>
+</body>
+</html>