New template "shuffle" was added (#5)

This commit is contained in:
Paramtamtam 2021-03-04 11:28:48 +05:00 committed by GitHub
parent 80b2544f36
commit 7957d16c0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 93 additions and 9 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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:

View File

@ -11,6 +11,10 @@
{
"name": "l7-dark",
"path": "./templates/l7-dark.html"
},
{
"name": "shuffle",
"path": "./templates/shuffle.html"
}
],
"output": {

71
templates/shuffle.html Normal file
View File

@ -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>