Template hacker-terminal added (#13)

* Template hacker-terminal added * Changelog updated * Update README.md
2024-08-30 18:22:40 +00:00 · 2021-04-28 13:08:24 +05:00 · 2021-04-28 13:08:24 +05:00 · e4bba25dd2
commit e4bba25dd2
parent 2695a32834
10 changed files with 198 additions and 11 deletions
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -57,6 +57,7 @@ jobs: # Docs: <https://git.io/JvxXE>
          test -f ./out/l7-light/404.html
          test -f ./out/shuffle/404.html
          test -f ./out/noise/404.html
+          test -f ./out/hacker-terminal/404.html

  docker-build:
    name: Build docker image
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,15 @@ 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.7.0
+
+### Added
+
+- Template `hacker-terminal` [#13]
+- HTML comments with error code and description into each template (header and footer, it seems more readable for curl usage)
+
+[#10]:https://github.com/tarampampam/error-pages/pull/13
+
 ## v1.6.0

 ### Added
--- a/README.md
+++ b/README.md
@ -22,13 +22,14 @@ Generated pages (from the latest release) always **[accessible here][link_gh_pag

 ## Templates

-   Name    | Preview
-:--------: | :-----:
-`ghost`    | [![ghost](https://hsto.org/webt/oj/cl/4k/ojcl4ko_cvusy5xuki6efffzsyo.gif)](https://tarampampam.github.io/error-pages/ghost/404.html)
-`l7-light` | [![l7-light](https://hsto.org/webt/xc/iq/vt/xciqvty-aoj-rchfarsjhutpjny.png)](https://tarampampam.github.io/error-pages/l7-light/404.html)
-`l7-dark`  | [![l7-dark](https://hsto.org/webt/s1/ih/yr/s1ihyrqs_y-sgraoimfhk6ypney.png)](https://tarampampam.github.io/error-pages/l7-dark/404.html)
-`shuffle`  | [![shuffle](https://hsto.org/webt/7w/rk/3m/7wrk3mrzz3y8qfqwovmuvacu-bs.gif)](https://tarampampam.github.io/error-pages/shuffle/404.html)
-`noise`    | [![noise](https://hsto.org/webt/42/oq/8y/42oq8yok_i-arrafjt6hds_7ahy.gif)](https://tarampampam.github.io/error-pages/noise/404.html)
+       Name       | Preview
+:---------------: | :-----:
+`ghost`           | [![ghost](https://hsto.org/webt/oj/cl/4k/ojcl4ko_cvusy5xuki6efffzsyo.gif)](https://tarampampam.github.io/error-pages/ghost/404.html)
+`l7-light`        | [![l7-light](https://hsto.org/webt/xc/iq/vt/xciqvty-aoj-rchfarsjhutpjny.png)](https://tarampampam.github.io/error-pages/l7-light/404.html)
+`l7-dark`         | [![l7-dark](https://hsto.org/webt/s1/ih/yr/s1ihyrqs_y-sgraoimfhk6ypney.png)](https://tarampampam.github.io/error-pages/l7-dark/404.html)
+`shuffle`         | [![shuffle](https://hsto.org/webt/7w/rk/3m/7wrk3mrzz3y8qfqwovmuvacu-bs.gif)](https://tarampampam.github.io/error-pages/shuffle/404.html)
+`noise`           | [![noise](https://hsto.org/webt/42/oq/8y/42oq8yok_i-arrafjt6hds_7ahy.gif)](https://tarampampam.github.io/error-pages/noise/404.html)
+`hacker-terminal` | [![hacker-terminal](https://hsto.org/webt/5s/l0/p1/5sl0p1_ud_nalzjzsj5slz6dfda.gif)](https://tarampampam.github.io/error-pages/hacker-terminal/404.html)

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

@ -94,7 +95,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.5.0 \
+     --from=tarampampam/error-pages:1.7.0 \
     /opt/html/ghost /usr/share/nginx/errorpages/_error-pages
 ```

@ -113,7 +114,7 @@ version: '3.4'

 services:
  error-pages:
-    image: tarampampam/error-pages:1.5.0
+    image: tarampampam/error-pages:1.7.0
    environment:
      TEMPLATE_NAME: l7-dark
    networks:
--- a/config.json
+++ b/config.json
@ -19,6 +19,10 @@
        {
            "name": "noise",
            "path": "./templates/noise.html"
+        },
+        {
+            "name": "hacker-terminal",
+            "path": "./templates/hacker-terminal.html"
        }
    ],
    "output": {
--- a/templates/ghost.html
+++ b/templates/ghost.html
@ -1,4 +1,8 @@
 <!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 <html lang="en">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
@ -17,7 +21,8 @@
        h3 {font-size:1.05em;text-transform: uppercase;margin:0.3em auto}
        .description {font-size:0.8em;color:#aaa}
    </style>
-</head><body>
+</head>
+<body>
 <div class="wrap">
    <svg class="ghost" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" enable-background="new 0 0 127.433 132.743" xml:space="preserve">
      <path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375 s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6 c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875 s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
@ -39,4 +44,9 @@
    <h3>Error {{ code }}</h3>
    <p class="description">{{ description }}</p>
 </div>
-</body></html>
+</body>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
+</html>
--- a/templates/hacker-terminal.html
+++ b/templates/hacker-terminal.html
@ -0,0 +1,130 @@
+<!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" />
+    <title>{{ message }}</title>
+    <link rel="dns-prefetch" href="//fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
+    <style>
+        /** Idea author: https://codepen.io/robinselmer */
+        html, body {
+            height: 100%;
+            overflow: hidden;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            box-sizing: border-box;
+            background-color: #000000;
+            background-image: radial-gradient(#11581E, #041607);
+            background-repeat: no-repeat;
+            background-size: cover;
+            font-family: 'Inconsolata', Helvetica, sans-serif;
+            font-size: 1.5rem;
+            color: rgba(128, 255, 128, 0.8);
+            text-shadow:
+                0 0 1ex rgba(51, 255, 51, 1),
+                0 0 2px rgba(255, 255, 255, 0.8);
+        }
+
+        .overlay {
+            pointer-events: none;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background:
+                repeating-linear-gradient(
+                    180deg,
+                    rgba(0, 0, 0, 0) 0,
+                    rgba(0, 0, 0, 0.3) 50%,
+                    rgba(0, 0, 0, 0) 100%);
+            background-size: auto 4px;
+            z-index: 1;
+        }
+
+        .overlay::before {
+            content: "";
+            pointer-events: none;
+            position: absolute;
+            display: block;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(
+                0deg,
+                transparent 0%,
+                rgba(32, 128, 32, 0.2) 2%,
+                rgba(32, 128, 32, 0.8) 3%,
+                rgba(32, 128, 32, 0.2) 3%,
+                transparent 100%);
+            background-repeat: no-repeat;
+            animation: scan 7.5s linear 0s infinite;
+        }
+
+        @keyframes scan {
+            0%        { background-position: 0 -100vh; }
+            35%, 100% { background-position: 0 100vh; }
+        }
+
+        .terminal {
+            box-sizing: inherit;
+            position: absolute;
+            height: 100%;
+            width: 1000px;
+            max-width: 100%;
+            padding: 4rem;
+            text-transform: uppercase;
+        }
+
+        .output {
+            color: rgba(128, 255, 128, 0.8);
+            text-shadow:
+                0 0 1px rgba(51, 255, 51, 0.4),
+                0 0 2px rgba(255, 255, 255, 0.8);
+        }
+
+        .output::before {
+            content: "> ";
+        }
+
+        a {
+            color: #fff;
+            text-decoration: none;
+        }
+
+        a::before {
+            content: "[";
+        }
+
+        a::after {
+            content: "]";
+        }
+
+        .error_code {
+            color: white;
+        }
+    </style>
+</head>
+<body>
+<div class="overlay"></div>
+<div class="terminal">
+    <h1>Error <span class="error_code">{{ code }}</span></h1>
+    <p class="output">{{ description }}.</p>
+    <p class="output">Good luck.</p>
+</div>
+</body>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
+</html>
--- a/templates/l7-dark.html
+++ b/templates/l7-dark.html
@ -1,4 +1,8 @@
 <!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 <html lang="en">
 <head>
    <meta charset="utf-8">
@ -26,4 +30,8 @@
    </div>
 </div>
 </body>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 </html>
--- a/templates/l7-light.html
+++ b/templates/l7-light.html
@ -1,4 +1,8 @@
 <!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 <html lang="en">
 <head>
    <meta charset="utf-8">
@ -26,4 +30,8 @@
    </div>
 </div>
 </body>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 </html>
--- a/templates/noise.html
+++ b/templates/noise.html
@ -1,4 +1,8 @@
 <!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 <html lang="en">
 <head>
    <meta charset="utf-8">
@ -161,4 +165,8 @@
    });
 </script>
 </body>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 </html>
--- a/templates/shuffle.html
+++ b/templates/shuffle.html
@ -1,4 +1,8 @@
 <!DOCTYPE html>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 <html lang="en">
 <head>
    <meta charset="utf-8">
@ -68,4 +72,8 @@
    }, 350);
 </script>
 </body>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
 </html>