Update CHANGELOG.md

Add 🇩🇪 German translation (#115 )
* german translation * update readmes and changelog
2024-08-30 18:22:40 +00:00 · 2022-06-04 17:11:20 +05:00 · 2022-06-04 17:06:39 +05:00 · 2022-06-02 05:14:32 +00:00 · 2022-06-02 05:14:08 +00:00 · 2022-06-02 05:10:46 +00:00
40 changed files with 1908 additions and 306 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,9 @@
+# Text files have auto line endings
+* text=auto
+
+# Go source files always have LF line endings
+*.go text eol=lf
+
+# Disable next extensions in project "used languages" list
+*.lua linguist-detectable=false
+*.html linguist-detectable=false
--- a/.github/workflows/documentation.yml
+++ b/.github/workflows/documentation.yml
@ -12,7 +12,7 @@ jobs:
    steps:
      - uses: actions/checkout@v3

-      - uses: peter-evans/dockerhub-description@v2 # Action page: <https://github.com/peter-evans/dockerhub-description>
+      - uses: peter-evans/dockerhub-description@v3 # Action page: <https://github.com/peter-evans/dockerhub-description>
        with:
          username: ${{ secrets.DOCKER_LOGIN }}
          password: ${{ secrets.DOCKER_USER_PASSWORD }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -5,6 +5,18 @@ on:
    types: [published]

 jobs:
+  purge-cdn-cache:
+    name: Purge jsDelivr CDN cache
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: gacts/purge-jsdelivr-cache@v1 # Action page: <https://github.com/gacts/purge-jsdelivr-cache>
+        with:
+          url: |
+            https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.js
+            https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js
+            https://cdn.jsdelivr.net/gh/tarampampam/error-pages@latest/l10n/l10n.js
+            https://cdn.jsdelivr.net/gh/tarampampam/error-pages@latest/l10n/l10n.min.js
+
  build:
    name: Build for ${{ matrix.os }} (${{ matrix.arch }})
    runs-on: ubuntu-20.04
@ -14,8 +26,8 @@ jobs:
        os: [linux, darwin] # linux, freebsd, darwin, windows
        arch: [amd64]  # amd64, 386
    steps:
-      - uses: actions/setup-go@v2
-        with: {go-version: 1.18.0}
+      - uses: actions/setup-go@v3
+        with: {go-version: 1.18.1}

      - uses: actions/checkout@v3

@ -51,22 +63,22 @@ jobs:
      - uses: gacts/github-slug@v1
        id: slug

-      - uses: docker/setup-qemu-action@v1 # Action page: <https://github.com/docker/setup-qemu-action>
+      - uses: docker/setup-qemu-action@v2 # Action page: <https://github.com/docker/setup-qemu-action>

-      - uses: docker/setup-buildx-action@v1 # Action page: <https://github.com/docker/setup-buildx-action>
+      - uses: docker/setup-buildx-action@v2 # Action page: <https://github.com/docker/setup-buildx-action>

-      - uses: docker/login-action@v1 # Action page: <https://github.com/docker/login-action>
+      - uses: docker/login-action@v2 # Action page: <https://github.com/docker/login-action>
        with:
          username: ${{ secrets.DOCKER_LOGIN }}
          password: ${{ secrets.DOCKER_PASSWORD }}

-      - uses: docker/login-action@v1 # Action page: <https://github.com/docker/login-action>
+      - uses: docker/login-action@v2 # Action page: <https://github.com/docker/login-action>
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
-          password: ${{ secrets.GHCR_PASSWORD }}
+          password: ${{ secrets.GITHUB_TOKEN }}

-      - uses: docker/build-push-action@v2 # Action page: <https://github.com/docker/build-push-action>
+      - uses: docker/build-push-action@v3 # Action page: <https://github.com/docker/build-push-action>
        with:
          context: .
          file: Dockerfile
@ -75,8 +87,12 @@ jobs:
          build-args: "APP_VERSION=${{ steps.slug.outputs.version }}"
          tags: |
            tarampampam/error-pages:${{ steps.slug.outputs.version }}
+            tarampampam/error-pages:${{ steps.slug.outputs.version-major }}.${{ steps.slug.outputs.version-minor }}
+            tarampampam/error-pages:${{ steps.slug.outputs.version-major }}
            tarampampam/error-pages:latest
            ghcr.io/${{ github.actor }}/${{ github.event.repository.name }}:${{ steps.slug.outputs.version }}
+            ghcr.io/${{ github.actor }}/${{ github.event.repository.name }}:${{ steps.slug.outputs.version-major }}.${{ steps.slug.outputs.version-minor }}
+            ghcr.io/${{ github.actor }}/${{ github.event.repository.name }}:${{ steps.slug.outputs.version-major }}
            ghcr.io/${{ github.actor }}/${{ github.event.repository.name }}:latest

  demo:
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -16,7 +16,8 @@ jobs: # Docs: <https://git.io/JvxXE>
      - uses: actions/checkout@v3
        with: {fetch-depth: 0}

-      - uses: zricethezav/gitleaks-action@v1 # Action page: <https://github.com/zricethezav/gitleaks-action>
+      - name: Check for GitLeaks
+        uses: gacts/gitleaks@v1 # Action page: <https://github.com/gacts/gitleaks>

  golangci-lint:
    name: Golang-CI (lint)
@ -24,7 +25,7 @@ jobs: # Docs: <https://git.io/JvxXE>
    steps:
      - uses: actions/checkout@v3

-      - uses: actions/setup-go@v2
+      - uses: actions/setup-go@v3
        with: {go-version: 1.17} # On v1.18 I had an error "panic: load embedded ruleguard rules: rules/rules.go:13: can't load fmt"

      - name: Run linter
@ -48,18 +49,34 @@ jobs: # Docs: <https://git.io/JvxXE>
      - name: Run linter
        run: ajv validate --all-errors --verbose -s ./schemas/config/1.0.schema.json -d ./error-pages.y*ml

+  lint-l10n:
+    name: Lint l10n file(s)
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with: {node-version: '16'}
+
+      - name: Install eslint
+        run: npm install -g eslint@v8 # Package page: <https://www.npmjs.com/package/eslint>
+
+      - name: Run linter
+        working-directory: l10n
+        run: eslint ./*.js
+
  go-test:
    name: Unit tests
    runs-on: ubuntu-20.04
    steps:
-      - uses: actions/setup-go@v2
+      - uses: actions/setup-go@v3
        with: {go-version: 1.18}

      - uses: actions/checkout@v3
        with: {fetch-depth: 2} # Fixes codecov error 'Issue detecting commit SHA'

      - name: Go modules Cache # Docs: <https://git.io/JfAKn#go---modules>
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        id: go-cache
        with:
          path: ~/go/pkg/mod
@ -72,7 +89,7 @@ jobs: # Docs: <https://git.io/JvxXE>
      - name: Run Unit tests
        run: go test -race -covermode=atomic -coverprofile /tmp/coverage.txt ./...

-      - uses: codecov/codecov-action@v2 # https://github.com/codecov/codecov-action
+      - uses: codecov/codecov-action@v3 # https://github.com/codecov/codecov-action
        continue-on-error: true
        with:
          file: /tmp/coverage.txt
@ -88,7 +105,7 @@ jobs: # Docs: <https://git.io/JvxXE>
        arch: [amd64]  # amd64, 386
    needs: [golangci-lint, go-test, validate-config-file]
    steps:
-      - uses: actions/setup-go@v2
+      - uses: actions/setup-go@v3
        with: {go-version: 1.18}

      - uses: actions/checkout@v3
@ -97,7 +114,7 @@ jobs: # Docs: <https://git.io/JvxXE>
        id: slug

      - name: Go modules Cache # Docs: <https://git.io/JfAKn#go---modules>
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: ~/go/pkg/mod
          key: ${{ runner.os }}-go-${{ hashFiles('**/go.sum') }}
@ -117,7 +134,7 @@ jobs: # Docs: <https://git.io/JvxXE>
        if: matrix.os == 'linux'
        run: ./error-pages version && ./error-pages -h

-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
        with:
          name: error-pages-${{ matrix.os }}-${{ matrix.arch }}
          path: error-pages
@ -131,7 +148,7 @@ jobs: # Docs: <https://git.io/JvxXE>
    steps:
      - uses: actions/checkout@v3

-      - uses: actions/download-artifact@v2
+      - uses: actions/download-artifact@v3
        with:
          name: error-pages-linux-amd64
          path: .artifact
@ -155,6 +172,8 @@ jobs: # Docs: <https://git.io/JvxXE>
          test -f ./out/cats/404.html
          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
@ -166,7 +185,7 @@ jobs: # Docs: <https://git.io/JvxXE>
      - uses: gacts/github-slug@v1
        id: slug

-      - uses: docker/build-push-action@v2 # Action page: <https://github.com/docker/build-push-action>
+      - uses: docker/build-push-action@v3 # Action page: <https://github.com/docker/build-push-action>
        with:
          context: .
          file: Dockerfile
@ -176,7 +195,7 @@ jobs: # Docs: <https://git.io/JvxXE>

      - run: docker save app:ci > ./docker-image.tar

-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
        with:
          name: docker-image
          path: ./docker-image.tar
@ -189,12 +208,12 @@ jobs: # Docs: <https://git.io/JvxXE>
    steps:
      - uses: actions/checkout@v3 # is needed for `upload-sarif` action

-      - uses: actions/download-artifact@v2
+      - uses: actions/download-artifact@v3
        with:
          name: docker-image
          path: .artifact

-      - uses: aquasecurity/trivy-action@0.2.2 # action page: <https://github.com/aquasecurity/trivy-action>
+      - uses: aquasecurity/trivy-action@0.3.0 # action page: <https://github.com/aquasecurity/trivy-action>
        with:
          input: .artifact/docker-image.tar
          format: sarif
@ -202,7 +221,7 @@ jobs: # Docs: <https://git.io/JvxXE>
          exit-code: 1
          output: trivy-results.sarif

-      - uses: github/codeql-action/upload-sarif@v1
+      - uses: github/codeql-action/upload-sarif@v2
        if: always()
        continue-on-error: true
        with: {sarif_file: trivy-results.sarif}
@ -215,7 +234,7 @@ jobs: # Docs: <https://git.io/JvxXE>
    steps:
      - uses: actions/checkout@v3

-      - uses: actions/download-artifact@v2
+      - uses: actions/download-artifact@v3
        with:
          name: docker-image
          path: .artifact
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,108 @@ 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].

+## v2.16.0
+
+### Added
+
+- Error pages now translated in German 🇩🇪 [#115]
+
+[#115]:https://github.com/tarampampam/error-pages/pull/115
+
+## v2.15.0
+
+### Added
+
+- Error pages now translated in Dutch 🇳🇱 [#104]
+
+[#104]:https://github.com/tarampampam/error-pages/pull/104
+
+## v2.14.0
+
+### Added
+
+- Error pages now translated in Portuguese 🇵🇹 [#103]
+
+### Changed
+
+- Go updated from `1.18.0` up to `1.18.1`
+
+[#103]:https://github.com/tarampampam/error-pages/pull/103
+
+## v2.13.0
+
+### Added
+
+- Possibility to disable error pages auto-localization (using `--disable-l10n` flag for the `serve` & `build` commands or environment variable `DISABLE_L10N`) [#91]
+
+### Fixed
+
+- User UID/GID changed to the numeric values in the dockerfile [#92]
+
+[#92]:https://github.com/tarampampam/error-pages/issues/92
+[#91]:https://github.com/tarampampam/error-pages/issues/91
+
+## v2.12.1
+
+### Fixed
+
+- Fix translation 🇫🇷 [#86]
+
+[#85]:https://github.com/tarampampam/error-pages/pull/86
+
+## v2.12.0
+
+### Changed
+
+- Error pages now translated in 🇫🇷 [#82]
+
+[#82]:https://github.com/tarampampam/error-pages/pull/82
+
+## v2.11.0
+
+### Added
+
+- Template `matrix` [#81]
+
+### Fixed
+
+- Localization mistakes [#81]
+
+[#81]:https://github.com/tarampampam/error-pages/pull/81
+
+## v2.10.1
+
+### Fixed
+
+- Template `shuffle`
+- Localization mistakes
+
+## v2.10.0
+
+### Changed
+
+- Error pages now translated in 🇺🇦 and 🇷🇺 languages [#80]
+
+[#80]:https://github.com/tarampampam/error-pages/pull/80
+
+## v2.9.0
+
+### Added
+
+- Template `connection` [#79]
+
+[#79]:https://github.com/tarampampam/error-pages/pull/79
+
+## v2.8.1
+
+### Fixed
+
+- Dark mode for `app-down` template
+
+### Changed
+
+- The index page for built error pages now supports a dark theme
+
 ## v2.8.0

 ### Added
--- a/7
+++ b/7
@ -1,7 +1,7 @@
 # syntax=docker/dockerfile:1.2

 # Image page: <https://hub.docker.com/_/golang>
-FROM golang:1.18.0-alpine as builder
+FROM golang:1.18.1-alpine as builder

 # can be passed with any prefix (like `v1.2.3@GITHASH`), e.g.: `docker build --build-arg "APP_VERSION=v1.2.3@GITHASH" .`
 ARG APP_VERSION="undefined@docker"
@ -60,7 +60,7 @@ LABEL \
 COPY --from=builder /tmp/rootfs /

 # Use an unprivileged user
-USER appuser:appuser
+USER 10001:10001

 WORKDIR /opt

@ -68,7 +68,8 @@ ENV LISTEN_PORT="8080" \
    TEMPLATE_NAME="ghost" \
    DEFAULT_ERROR_PAGE="404" \
    DEFAULT_HTTP_CODE="404" \
-    SHOW_DETAILS="false"
+    SHOW_DETAILS="false" \
+    DISABLE_L10N="false"

 # Docs: <https://docs.docker.com/engine/reference/builder/#healthcheck>
 HEALTHCHECK --interval=7s --timeout=2s CMD ["/bin/error-pages", "healthcheck", "--log-json"]
--- a/README.md
+++ b/README.md
@ -34,6 +34,7 @@ One day you may want to replace the standard error pages of your HTTP server wit
 - Error pages can be [embedded into your own `nginx`][wiki-usage-with-nginx] docker image
 - Fully configurable (take a look at the [configuration file](https://github.com/tarampampam/error-pages/blob/master/error-pages.yml) and [project Wiki][wiki])
 - Distributed using docker image and compiled binary files
+- Localized (🇺🇸, 🇫🇷, 🇺🇦, 🇷🇺, 🇵🇹, 🇳🇱, 🇩🇪) HTML error pages (translation process [described here](https://github.com/tarampampam/error-pages/tree/master/l10n) - other translations are welcome!)

 ## 🧩 Install

@ -48,6 +49,11 @@ Download the latest binary file for your os/arch from the [releases page][releas

 > Using the `latest` tag for the docker image is highly discouraged because of possible backward-incompatible changes during **major** upgrades. Please, use tags in `X.Y.Z` format

+💣 **Or** you can download **already rendered** error pages pack as a [zip][pages-pack-zip] or [tar.gz][pages-pack-tar-gz] archive.
+
+[pages-pack-zip]:https://github.com/tarampampam/error-pages/zipball/gh-pages/
+[pages-pack-tar-gz]:https://github.com/tarampampam/error-pages/tarball/gh-pages/
+
 ## 🛠 Usage

 Please, take a look at [our Wiki][wiki] for the common usage stories:
@ -117,12 +123,14 @@ Transfer/sec:    140.23MB
 |      `cats`       |                 [![cats][cats-screen]][cats-link]                  |
 |  `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

 [ghost-screen]:https://hsto.org/webt/oj/cl/4k/ojcl4ko_cvusy5xuki6efffzsyo.gif
 [ghost-link]:https://tarampampam.github.io/error-pages/ghost/404.html
-[l7-light-screen]:https://hsto.org/webt/xc/iq/vt/xciqvty-aoj-rchfarsjhutpjny.png
+[l7-light-screen]:https://hsto.org/webt/hx/ca/mm/hxcammfm7qjmogtvsjxcidgf7c8.png
 [l7-light-link]:https://tarampampam.github.io/error-pages/l7-light/404.html
 [l7-dark-screen]:https://hsto.org/webt/s1/ih/yr/s1ihyrqs_y-sgraoimfhk6ypney.png
 [l7-dark-link]:https://tarampampam.github.io/error-pages/l7-dark/404.html
@ -136,8 +144,12 @@ Transfer/sec:    140.23MB
 [cats-link]:https://tarampampam.github.io/error-pages/cats/404.html
 [lost-in-space-screen]:https://hsto.org/webt/lf/ln/x8/lflnx8fuy4rofxju34ttskijdsu.gif
 [lost-in-space-link]:https://tarampampam.github.io/error-pages/lost-in-space/404.html
-[app-down-screen]:https://hsto.org/webt/r3/ys/ql/r3ysqlv_1qj29k3qf_3mliedo8s.png
+[app-down-screen]:https://habrastorage.org/webt/j2/la/fj/j2lafjvu_xjflzrvhiixobxy_ca.png
 [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/docker-compose.yml
+++ b/docker-compose.yml
@ -8,7 +8,7 @@ volumes:

 services:
  app: &app-service
-    image: golang:1.18.0-buster # Image page: <https://hub.docker.com/_/golang>
+    image: golang:1.18.1-buster # Image page: <https://hub.docker.com/_/golang>
    working_dir: /src
    environment:
      HOME: /tmp
--- a/error-pages.yml
+++ b/error-pages.yml
@ -13,6 +13,8 @@ templates:
  - path: ./templates/cats.html
  - path: ./templates/lost-in-space.html
  - path: ./templates/app-down.html
+  - path: ./templates/connection.html
+  - path: ./templates/matrix.html

 formats:
  json:
--- a/go.mod
+++ b/go.mod
@ -4,16 +4,16 @@ go 1.18

 require (
 	github.com/a8m/envsubst v1.3.0
-	github.com/fasthttp/router v1.4.6
+	github.com/fasthttp/router v1.4.9
 	github.com/fatih/color v1.13.0
 	github.com/kami-zh/go-capturer v0.0.0-20171211120116-e492ea43421d
 	github.com/pkg/errors v0.9.1
-	github.com/prometheus/client_golang v1.12.1
+	github.com/prometheus/client_golang v1.12.2
 	github.com/prometheus/client_model v0.2.0
 	github.com/spf13/cobra v1.4.0
 	github.com/spf13/pflag v1.0.5
 	github.com/stretchr/testify v1.7.1
-	github.com/valyala/fasthttp v1.34.0
+	github.com/valyala/fasthttp v1.37.0
 	go.uber.org/zap v1.21.0
 	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b
 )
@ -32,7 +32,7 @@ require (
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/prometheus/common v0.32.1 // indirect
 	github.com/prometheus/procfs v0.7.3 // indirect
-	github.com/savsgio/gotils v0.0.0-20211223103454-d0aaa54c5899 // indirect
+	github.com/savsgio/gotils v0.0.0-20220401102855-e56b59f40436 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	go.uber.org/atomic v1.7.0 // indirect
 	go.uber.org/multierr v1.6.0 // indirect
--- a/go.sum
+++ b/go.sum
@ -65,8 +65,8 @@ github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymF
 github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
 github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1mIlRU8Am5FuJP05cCM98=
 github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
-github.com/fasthttp/router v1.4.6 h1:KfETdHGBnvoBfBHeRe/8TVYz8Bp/mASBVC5UXO9CpZI=
-github.com/fasthttp/router v1.4.6/go.mod h1:Iv800u3hYFNuBBcmJNs/VBVpub+JfBihGBp5spSocbw=
+github.com/fasthttp/router v1.4.9 h1:8s1HEqP+GvsC2B8vPdLAPHJegs4s28z7UsraPuHM1K8=
+github.com/fasthttp/router v1.4.9/go.mod h1:oWPrQCi9QOrzxKC+rZuliS1+JhYj2bpR01J6T8vUDUQ=
 github.com/fatih/color v1.13.0 h1:8LOYc1KYPPmyKMuN8QV2DNRWNbLo6LZ0iLs8+mlH53w=
 github.com/fatih/color v1.13.0/go.mod h1:kLAiJbzzSOZDVNGyDpeOxJ47H46qBXwg5ILebYFFOfk=
 github.com/go-gl/glfw v0.0.0-20190409004039-e6da0acd62b1/go.mod h1:vR7hzQXu2zJy9AVAgeJqvqgH9Q5CA+iKCZ2gyEVpxRU=
@ -151,7 +151,6 @@ github.com/julienschmidt/httprouter v1.3.0/go.mod h1:JR6WtHb+2LUe8TCKY3cZOxFyyO8
 github.com/kami-zh/go-capturer v0.0.0-20171211120116-e492ea43421d h1:cVtBfNW5XTHiKQe7jDaDBSh/EVM4XLPutLAGboIXuM0=
 github.com/kami-zh/go-capturer v0.0.0-20171211120116-e492ea43421d/go.mod h1:P2viExyCEfeWGU259JnaQ34Inuec4R38JCyBx2edgD0=
 github.com/kisielk/gotool v1.0.0/go.mod h1:XhKaO+MFFWcvkIS/tQcRk01m1F5IRFswLeQ+oQHNcck=
-github.com/klauspost/compress v1.14.1/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
 github.com/klauspost/compress v1.15.0 h1:xqfchp4whNFxn5A4XFyyYtitiWI8Hy5EW59jEwcyL6U=
 github.com/klauspost/compress v1.15.0/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
 github.com/konsorten/go-windows-terminal-sequences v1.0.1/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
@ -187,8 +186,8 @@ github.com/prometheus/client_golang v0.9.1/go.mod h1:7SWBe2y4D6OKWSNQJUaRYU/AaXP
 github.com/prometheus/client_golang v1.0.0/go.mod h1:db9x61etRT2tGnBNRi70OPL5FsnadC4Ky3P0J6CfImo=
 github.com/prometheus/client_golang v1.7.1/go.mod h1:PY5Wy2awLA44sXw4AOSfFBetzPP4j5+D6mVACh+pe2M=
 github.com/prometheus/client_golang v1.11.0/go.mod h1:Z6t4BnS23TR94PD6BsDNk8yVqroYurpAkEiz0P2BEV0=
-github.com/prometheus/client_golang v1.12.1 h1:ZiaPsmm9uiBeaSMRznKsCDNtPCS0T3JVDGF+06gjBzk=
-github.com/prometheus/client_golang v1.12.1/go.mod h1:3Z9XVyYiZYEO+YQWt3RD2R3jrbd179Rt297l4aS6nDY=
+github.com/prometheus/client_golang v1.12.2 h1:51L9cDoUHVrXx4zWYlcLQIZ+d+VXHgqnYKkIuq4g/34=
+github.com/prometheus/client_golang v1.12.2/go.mod h1:3Z9XVyYiZYEO+YQWt3RD2R3jrbd179Rt297l4aS6nDY=
 github.com/prometheus/client_model v0.0.0-20180712105110-5c3871d89910/go.mod h1:MbSGuTsp3dbXC40dX6PRTWyKYBIrTGTE9sqQNg2J8bo=
 github.com/prometheus/client_model v0.0.0-20190129233127-fd36f4220a90/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
 github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
@ -207,8 +206,8 @@ github.com/prometheus/procfs v0.7.3 h1:4jVXhlkAyzOScmCkXBTOLRLTz8EeU+eyjrwB/EPq0
 github.com/prometheus/procfs v0.7.3/go.mod h1:cz+aTbrPOrUb4q7XlbU9ygM+/jj0fzG6c1xBZuNvfVA=
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
-github.com/savsgio/gotils v0.0.0-20211223103454-d0aaa54c5899 h1:Orn7s+r1raRTBKLSc9DmbktTT04sL+vkzsbRD2Q8rOI=
-github.com/savsgio/gotils v0.0.0-20211223103454-d0aaa54c5899/go.mod h1:oejLrk1Y/5zOF+c/aHtXqn3TFlzzbAgPWg8zBiAHDas=
+github.com/savsgio/gotils v0.0.0-20220401102855-e56b59f40436 h1:sfTahD3f2BSjx9U3R4K09PkNuZZWthT7g6vzTIXNWkM=
+github.com/savsgio/gotils v0.0.0-20220401102855-e56b59f40436/go.mod h1:Gy+0tqhJvgGlqnTF8CVGP0AaGRjwBtXs/a5PA0Y3+A4=
 github.com/sirupsen/logrus v1.2.0/go.mod h1:LxeOpSwHxABJmUn/MG1IvRgCAasNZTLOkJPxbbu5VWo=
 github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE=
 github.com/sirupsen/logrus v1.6.0/go.mod h1:7uNnSEd1DgxDLC74fIahvMZmmYsHGZGEOFrfsX/uA88=
@ -226,9 +225,9 @@ github.com/stretchr/testify v1.7.1 h1:5TQK59W5E3v0r2duFAb7P95B6hEeOyEnHRa8MjYSMT
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasthttp v1.33.0/go.mod h1:KJRK/MXx0J+yd0c5hlR+s1tIHD72sniU8ZJjl97LIw4=
-github.com/valyala/fasthttp v1.34.0 h1:d3AAQJ2DRcxJYHm7OXNXtXt2as1vMDfxeIcFvhmGGm4=
-github.com/valyala/fasthttp v1.34.0/go.mod h1:epZA5N+7pY6ZaEKRmstzOuYJx9HI8DI1oaCGZpdH4h0=
+github.com/valyala/fasthttp v1.36.0/go.mod h1:t/G+3rLek+CyY9bnIE+YlMRddxVAAGjhxndDB4i4C0I=
+github.com/valyala/fasthttp v1.37.0 h1:7WHCyI7EAkQMVmrfBhWTCOaeROb1aCBiTopx63LkMbE=
+github.com/valyala/fasthttp v1.37.0/go.mod h1:t/G+3rLek+CyY9bnIE+YlMRddxVAAGjhxndDB4i4C0I=
 github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
 github.com/yuin/goldmark v1.1.25/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
@ -253,7 +252,6 @@ golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8U
 golang.org/x/crypto v0.0.0-20190605123033-f99c8df09eb5/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
-golang.org/x/crypto v0.0.0-20220112180741-5e0467b6c7ce/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/crypto v0.0.0-20220214200702-86341886e292/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190306152737-a1d7652674e8/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
@ -317,7 +315,6 @@ golang.org/x/net v0.0.0-20200822124328-c89045814202/go.mod h1:/O7V0waA8r7cgGh81R
 golang.org/x/net v0.0.0-20210405180319-a5a99cb37ef4/go.mod h1:p54w0d4576C0XHj96bSt6lcn1PtDYWL6XObtHCRCNQM=
 golang.org/x/net v0.0.0-20210525063256-abc453219eb5/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
 golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.0.0-20220111093109-d55c255bac03/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
 golang.org/x/net v0.0.0-20220225172249-27dd8689420f/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@ -377,7 +374,6 @@ golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20211216021012-1d35b9e2eb4e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220111092808-5a964db01320/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220114195835-da31bd327af9/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9 h1:nhht2DYV/Sn3qOayu8lM+cU1ii9sTLUeBQwQQfUHtrs=
 golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
--- a/internal/cli/build/command.go
+++ b/internal/cli/build/command.go
@ -15,6 +15,7 @@ import (
 func NewCommand(log *zap.Logger, configFile *string) *cobra.Command {
 	var (
 		generateIndex bool
+		disableL10n   bool
 		cfg           *config.Config
 	)

@ -39,7 +40,7 @@ func NewCommand(log *zap.Logger, configFile *string) *cobra.Command {
 				return errors.New("wrong arguments count")
 			}

-			return run(log, cfg, args[0], generateIndex)
+			return run(log, cfg, args[0], generateIndex, disableL10n)
 		},
 	}

@ -50,6 +51,13 @@ func NewCommand(log *zap.Logger, configFile *string) *cobra.Command {
 		"generate index page",
 	)

+	cmd.Flags().BoolVarP(
+		&disableL10n,
+		"disable-l10n", "",
+		false,
+		"disable error pages localization",
+	)
+
 	return cmd
 }

@ -60,7 +68,7 @@ const (
 	outDirPerm       = os.FileMode(0775)
 )

-func run(log *zap.Logger, cfg *config.Config, outDirectoryPath string, generateIndex bool) error { //nolint:funlen
+func run(log *zap.Logger, cfg *config.Config, outDirectoryPath string, generateIndex, disableL10n bool) error { //nolint:funlen,lll
 	if len(cfg.Templates) == 0 {
 		return errors.New("no loaded templates")
 	}
@ -92,6 +100,7 @@ func run(log *zap.Logger, cfg *config.Config, outDirectoryPath string, generateI
 				Message:            page.Message(),
 				Description:        page.Description(),
 				ShowRequestDetails: false,
+				L10nDisabled:       disableL10n,
 			})
 			if renderingErr != nil {
 				return renderingErr
--- a/internal/cli/build/index.tpl.html
+++ b/internal/cli/build/index.tpl.html
@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8" />
@ -6,6 +7,11 @@
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"
          integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <style>
+        @media (prefers-color-scheme:dark){
+            :root {--bs-light:#212529;--bs-light-rgb:33,37,41;--bs-body-color:#eee}a{color:#91b4e8}a:hover{color:#a2bfec}
+        }
+    </style>
 </head>
 <body class="bg-light">
 <div class="container">
--- a/internal/cli/serve/command.go
+++ b/internal/cli/serve/command.go
@ -30,7 +30,7 @@ func NewCommand(ctx context.Context, log *zap.Logger, configFile *string) *cobra
 				return errors.New("path to the config file is required for this command")
 			}

-			if err = f.overrideUsingEnv(cmd.Flags()); err != nil {
+			if err = f.OverrideUsingEnv(cmd.Flags()); err != nil {
 				return err
 			}

@ -38,18 +38,18 @@ func NewCommand(ctx context.Context, log *zap.Logger, configFile *string) *cobra
 				return err
 			}

-			return f.validate()
+			return f.Validate()
 		},
-		RunE: func(*cobra.Command, []string) error { return run(ctx, log, f, cfg) },
+		RunE: func(*cobra.Command, []string) error { return run(ctx, log, cfg, f) },
 	}

-	f.init(cmd.Flags())
+	f.Init(cmd.Flags())

 	return cmd
 }

 // run current command.
-func run(parentCtx context.Context, log *zap.Logger, f flags, cfg *config.Config) error { //nolint:funlen
+func run(parentCtx context.Context, log *zap.Logger, cfg *config.Config, f flags) error { //nolint:funlen
 	var (
 		ctx, cancel = context.WithCancel(parentCtx) // serve context creation
 		oss         = breaker.NewOSSignals(ctx)     // OS signals listener
@ -70,9 +70,11 @@ func run(parentCtx context.Context, log *zap.Logger, f flags, cfg *config.Config
 	var (
 		templateNames = cfg.TemplateNames()
 		picker        interface{ Pick() string }
+
+		opt = f.ToOptions()
 	)

-	switch f.template.name {
+	switch opt.Template.Name {
 	case useRandomTemplate:
 		log.Info("A random template will be used")

@ -99,28 +101,19 @@ func run(parentCtx context.Context, log *zap.Logger, f flags, cfg *config.Config
 		picker = pick.NewStringsSlice(templateNames, pick.First)

 	default:
-		if t, found := cfg.Template(f.template.name); found {
+		if t, found := cfg.Template(opt.Template.Name); found {
 			log.Info("We will use the requested template", zap.String("name", t.Name()))
 			picker = pick.NewStringsSlice([]string{t.Name()}, pick.First)
 		} else {
-			return errors.New("requested nonexistent template: " + f.template.name)
+			return errors.New("requested nonexistent template: " + opt.Template.Name)
 		}
 	}

-	var proxyHTTPHeaders = f.HeadersToProxy()
-
 	// create HTTP server
 	server := appHttp.NewServer(log)

 	// register server routes, middlewares, etc.
-	if err := server.Register(
-		cfg,
-		picker,
-		f.defaultErrorPage,
-		f.defaultHTTPCode,
-		f.showDetails,
-		proxyHTTPHeaders,
-	); err != nil {
+	if err := server.Register(cfg, picker, opt); err != nil {
 		return err
 	}

@ -131,15 +124,16 @@ func run(parentCtx context.Context, log *zap.Logger, f flags, cfg *config.Config
 		defer close(errCh)

 		log.Info("Server starting",
-			zap.String("addr", f.listen.ip),
-			zap.Uint16("port", f.listen.port),
-			zap.String("default error page", f.defaultErrorPage),
-			zap.Uint16("default HTTP response code", f.defaultHTTPCode),
-			zap.Strings("proxy headers", proxyHTTPHeaders),
-			zap.Bool("show request details", f.showDetails),
+			zap.String("addr", f.Listen.IP),
+			zap.Uint16("port", f.Listen.Port),
+			zap.String("default error page", opt.Default.PageCode),
+			zap.Uint16("default HTTP response code", opt.Default.HTTPCode),
+			zap.Strings("proxy headers", opt.ProxyHTTPHeaders),
+			zap.Bool("show request details", opt.ShowDetails),
+			zap.Bool("localization disabled", opt.L10n.Disabled),
 		)

-		if err := server.Start(f.listen.ip, f.listen.port); err != nil {
+		if err := server.Start(f.Listen.IP, f.Listen.Port); err != nil {
 			errCh <- err
 		}
 	}(startingErrCh)
--- a/internal/cli/serve/flags.go
+++ b/internal/cli/serve/flags.go
@ -9,60 +9,26 @@ import (

 	"github.com/spf13/pflag"
 	"github.com/tarampampam/error-pages/internal/env"
+	"github.com/tarampampam/error-pages/internal/options"
 )

 type flags struct {
-	listen struct {
-		ip   string
-		port uint16
+	Listen struct {
+		IP   string
+		Port uint16
 	}
 	template struct {
 		name string
 	}
+	l10n struct {
+		disabled bool
+	}
 	defaultErrorPage string
 	defaultHTTPCode  uint16
 	showDetails      bool
 	proxyHTTPHeaders string // comma-separated
 }

-// HeadersToProxy converts a comma-separated string with headers list into strings slice (with a sorting and without
-// duplicates).
-func (f *flags) HeadersToProxy() []string {
-	var raw = strings.Split(f.proxyHTTPHeaders, ",")
-
-	if len(raw) == 0 {
-		return []string{}
-	} else if len(raw) == 1 {
-		if h := strings.TrimSpace(raw[0]); h != "" {
-			return []string{h}
-		} else {
-			return []string{}
-		}
-	}
-
-	var m = make(map[string]struct{}, len(raw))
-
-	// make unique and ignore empty strings
-	for _, h := range raw {
-		if h = strings.TrimSpace(h); h != "" {
-			if _, ok := m[h]; !ok {
-				m[h] = struct{}{}
-			}
-		}
-	}
-
-	// convert map into slice
-	var headers = make([]string, 0, len(m))
-	for h := range m {
-		headers = append(headers, h)
-	}
-
-	// make sort
-	sort.Strings(headers)
-
-	return headers
-}
-
 const (
 	listenFlagName           = "listen"
 	portFlagName             = "port"
@ -71,6 +37,7 @@ const (
 	defaultHTTPCodeFlagName  = "default-http-code"
 	showDetailsFlagName      = "show-details"
 	proxyHTTPHeadersFlagName = "proxy-headers"
+	disableL10nFlagName      = "disable-l10n"
 )

 const (
@ -80,18 +47,18 @@ const (
 	useRandomTemplateHourly        = "random-hourly"
 )

-func (f *flags) init(flagSet *pflag.FlagSet) {
+func (f *flags) Init(flagSet *pflag.FlagSet) {
 	flagSet.StringVarP(
-		&f.listen.ip,
+		&f.Listen.IP,
 		listenFlagName, "l",
 		"0.0.0.0",
-		fmt.Sprintf("IP address to listen on [$%s]", env.ListenAddr),
+		fmt.Sprintf("IP address to Listen on [$%s]", env.ListenAddr),
 	)
 	flagSet.Uint16VarP(
-		&f.listen.port,
+		&f.Listen.Port,
 		portFlagName, "p",
 		8080, //nolint:gomnd // must be same as default healthcheck `--port` flag value
-		fmt.Sprintf("TCP port number [$%s]", env.ListenPort),
+		fmt.Sprintf("TCP prt number [$%s]", env.ListenPort),
 	)
 	flagSet.StringVarP(
 		&f.template.name,
@ -131,22 +98,28 @@ func (f *flags) init(flagSet *pflag.FlagSet) {
 		"",
 		fmt.Sprintf("proxy HTTP request headers list (comma-separated) [$%s]", env.ProxyHTTPHeaders),
 	)
+	flagSet.BoolVarP(
+		&f.l10n.disabled,
+		disableL10nFlagName, "",
+		false,
+		fmt.Sprintf("disable error pages localization [$%s]", env.DisableL10n),
+	)
 }

-func (f *flags) overrideUsingEnv(flagSet *pflag.FlagSet) (lastErr error) { //nolint:gocognit,gocyclo
+func (f *flags) OverrideUsingEnv(flagSet *pflag.FlagSet) (lastErr error) { //nolint:gocognit,gocyclo
 	flagSet.VisitAll(func(flag *pflag.Flag) {
 		// flag was NOT defined using CLI (flags should have maximal priority)
 		if !flag.Changed { //nolint:nestif
 			switch flag.Name {
 			case listenFlagName:
 				if envVar, exists := env.ListenAddr.Lookup(); exists {
-					f.listen.ip = strings.TrimSpace(envVar)
+					f.Listen.IP = strings.TrimSpace(envVar)
 				}

 			case portFlagName:
 				if envVar, exists := env.ListenPort.Lookup(); exists {
 					if p, err := strconv.ParseUint(envVar, 10, 16); err == nil { //nolint:gomnd
-						f.listen.port = uint16(p)
+						f.Listen.Port = uint16(p)
 					} else {
 						lastErr = fmt.Errorf("wrong TCP port environment variable [%s] value", envVar)
 					}
@ -182,6 +155,13 @@ func (f *flags) overrideUsingEnv(flagSet *pflag.FlagSet) (lastErr error) { //nol
 				if envVar, exists := env.ProxyHTTPHeaders.Lookup(); exists {
 					f.proxyHTTPHeaders = strings.TrimSpace(envVar)
 				}
+
+			case disableL10nFlagName:
+				if envVar, exists := env.DisableL10n.Lookup(); exists {
+					if b, err := strconv.ParseBool(envVar); err == nil {
+						f.l10n.disabled = b
+					}
+				}
 			}
 		}
 	})
@ -189,9 +169,9 @@ func (f *flags) overrideUsingEnv(flagSet *pflag.FlagSet) (lastErr error) { //nol
 	return lastErr
 }

-func (f *flags) validate() error {
-	if net.ParseIP(f.listen.ip) == nil {
-		return fmt.Errorf("wrong IP address [%s] for listening", f.listen.ip)
+func (f *flags) Validate() error {
+	if net.ParseIP(f.Listen.IP) == nil {
+		return fmt.Errorf("wrong IP address [%s] for listening", f.Listen.IP)
 	}

 	if f.defaultHTTPCode > 599 { //nolint:gomnd
@ -204,3 +184,52 @@ func (f *flags) validate() error {

 	return nil
 }
+
+// headersToProxy converts a comma-separated string with headers list into strings slice (with a sorting and without
+// duplicates).
+func (f *flags) headersToProxy() []string {
+	var raw = strings.Split(f.proxyHTTPHeaders, ",")
+
+	if len(raw) == 0 {
+		return []string{}
+	} else if len(raw) == 1 {
+		if h := strings.TrimSpace(raw[0]); h != "" {
+			return []string{h}
+		} else {
+			return []string{}
+		}
+	}
+
+	var m = make(map[string]struct{}, len(raw))
+
+	// make unique and ignore empty strings
+	for _, h := range raw {
+		if h = strings.TrimSpace(h); h != "" {
+			if _, ok := m[h]; !ok {
+				m[h] = struct{}{}
+			}
+		}
+	}
+
+	// convert map into slice
+	var headers = make([]string, 0, len(m))
+	for h := range m {
+		headers = append(headers, h)
+	}
+
+	// make sort
+	sort.Strings(headers)
+
+	return headers
+}
+
+func (f *flags) ToOptions() (o options.ErrorPage) {
+	o.Default.PageCode = f.defaultErrorPage
+	o.Default.HTTPCode = f.defaultHTTPCode
+	o.L10n.Disabled = f.l10n.disabled
+	o.Template.Name = f.template.name
+	o.ShowDetails = f.showDetails
+	o.ProxyHTTPHeaders = f.headersToProxy()
+
+	return o
+}
--- a/internal/env/env.go
+++ b/internal/env/env.go
@ -14,6 +14,7 @@ const (
 	DefaultHTTPCode  envVariable = "DEFAULT_HTTP_CODE"  // default HTTP response code
 	ShowDetails      envVariable = "SHOW_DETAILS"       // show request details in response
 	ProxyHTTPHeaders envVariable = "PROXY_HTTP_HEADERS" // proxy HTTP request headers list (request -> response)
+	DisableL10n      envVariable = "DISABLE_L10N"       // disable pages localization
 )

 // String returns environment variable name in the string representation.
--- a/internal/env/env_test.go
+++ b/internal/env/env_test.go
@ -16,6 +16,7 @@ func TestConstants(t *testing.T) {
 	assert.Equal(t, "DEFAULT_HTTP_CODE", string(DefaultHTTPCode))
 	assert.Equal(t, "SHOW_DETAILS", string(ShowDetails))
 	assert.Equal(t, "PROXY_HTTP_HEADERS", string(ProxyHTTPHeaders))
+	assert.Equal(t, "DISABLE_L10N", string(DisableL10n))
 }

 func TestEnvVariable_Lookup(t *testing.T) {
@ -30,6 +31,7 @@ func TestEnvVariable_Lookup(t *testing.T) {
 		{giveEnv: DefaultHTTPCode},
 		{giveEnv: ShowDetails},
 		{giveEnv: ProxyHTTPHeaders},
+		{giveEnv: DisableL10n},
 	}

 	for _, tt := range cases {
--- a/internal/http/core/errorpage.go
+++ b/internal/http/core/errorpage.go
@ -4,6 +4,7 @@ import (
 	"strconv"

 	"github.com/tarampampam/error-pages/internal/config"
+	"github.com/tarampampam/error-pages/internal/options"
 	"github.com/tarampampam/error-pages/internal/tpl"
 	"github.com/valyala/fasthttp"
 )
@ -24,8 +25,7 @@ func RespondWithErrorPage( //nolint:funlen,gocyclo
 	rdr renderer,
 	pageCode string,
 	httpCode int,
-	showRequestDetails bool,
-	proxyHeaders []string,
+	opt options.ErrorPage,
 ) {
 	ctx.Response.Header.Set("X-Robots-Tag", "noindex") // block Search indexing

@ -33,10 +33,14 @@ func RespondWithErrorPage( //nolint:funlen,gocyclo
 		clientWant    = ClientWantFormat(ctx)
 		json, canJSON = cfg.JSONFormat()
 		xml, canXML   = cfg.XMLFormat()
-		props         = tpl.Properties{Code: pageCode, ShowRequestDetails: showRequestDetails}
+		props         = tpl.Properties{
+			Code:               pageCode,
+			ShowRequestDetails: opt.ShowDetails,
+			L10nDisabled:       opt.L10n.Disabled,
+		}
 	)

-	if showRequestDetails {
+	if opt.ShowDetails {
 		props.OriginalURI = string(ctx.Request.Header.Peek(OriginalURI))
 		props.Namespace = string(ctx.Request.Header.Peek(Namespace))
 		props.IngressName = string(ctx.Request.Header.Peek(IngressName))
@ -66,7 +70,7 @@ func RespondWithErrorPage( //nolint:funlen,gocyclo
 	}

 	// proxy required HTTP headers from the request to the response
-	for _, headerToProxy := range proxyHeaders {
+	for _, headerToProxy := range opt.ProxyHTTPHeaders {
 		if reqHeader := ctx.Request.Header.Peek(headerToProxy); len(reqHeader) > 0 {
 			ctx.Response.Header.SetBytesV(headerToProxy, reqHeader)
 		}
--- a/internal/http/handlers/errorpage/handler.go
+++ b/internal/http/handlers/errorpage/handler.go
@ -3,6 +3,7 @@ package errorpage
 import (
 	"github.com/tarampampam/error-pages/internal/config"
 	"github.com/tarampampam/error-pages/internal/http/core"
+	"github.com/tarampampam/error-pages/internal/options"
 	"github.com/tarampampam/error-pages/internal/tpl"
 	"github.com/valyala/fasthttp"
 )
@ -19,18 +20,12 @@ type (
 )

 // NewHandler creates handler for error pages serving.
-func NewHandler(
-	cfg *config.Config,
-	p templatePicker,
-	rdr renderer,
-	showRequestDetails bool,
-	proxyHTTPHeaders []string,
-) fasthttp.RequestHandler {
+func NewHandler(cfg *config.Config, p templatePicker, rdr renderer, opt options.ErrorPage) fasthttp.RequestHandler {
 	return func(ctx *fasthttp.RequestCtx) {
 		core.SetClientFormat(ctx, core.PlainTextContentType) // default content type

 		if code, ok := ctx.UserValue("code").(string); ok {
-			core.RespondWithErrorPage(ctx, cfg, p, rdr, code, fasthttp.StatusOK, showRequestDetails, proxyHTTPHeaders)
+			core.RespondWithErrorPage(ctx, cfg, p, rdr, code, fasthttp.StatusOK, opt)
 		} else { // will never occur
 			ctx.SetStatusCode(fasthttp.StatusInternalServerError)
 			_, _ = ctx.WriteString("cannot extract requested code from the request")
--- a/internal/http/handlers/index/handler.go
+++ b/internal/http/handlers/index/handler.go
@ -5,6 +5,7 @@ import (

 	"github.com/tarampampam/error-pages/internal/config"
 	"github.com/tarampampam/error-pages/internal/http/core"
+	"github.com/tarampampam/error-pages/internal/options"
 	"github.com/tarampampam/error-pages/internal/tpl"
 	"github.com/valyala/fasthttp"
 )
@ -21,23 +22,15 @@ type (
 )

 // NewHandler creates handler for the index page serving.
-func NewHandler(
-	cfg *config.Config,
-	p templatePicker,
-	rdr renderer,
-	defaultPageCode string,
-	defaultHTTPCode uint16,
-	showRequestDetails bool,
-	proxyHTTPHeaders []string,
-) fasthttp.RequestHandler {
+func NewHandler(cfg *config.Config, p templatePicker, rdr renderer, opt options.ErrorPage) fasthttp.RequestHandler {
 	return func(ctx *fasthttp.RequestCtx) {
-		pageCode, httpCode := defaultPageCode, int(defaultHTTPCode)
+		pageCode, httpCode := opt.Default.PageCode, int(opt.Default.HTTPCode)

 		if returnCode, ok := extractCodeToReturn(ctx); ok {
 			pageCode, httpCode = strconv.Itoa(returnCode), returnCode
 		}

-		core.RespondWithErrorPage(ctx, cfg, p, rdr, pageCode, httpCode, showRequestDetails, proxyHTTPHeaders)
+		core.RespondWithErrorPage(ctx, cfg, p, rdr, pageCode, httpCode, opt)
 	}
 }

--- a/internal/http/server.go
+++ b/internal/http/server.go
@ -15,6 +15,7 @@ import (
 	notfoundHandler "github.com/tarampampam/error-pages/internal/http/handlers/notfound"
 	versionHandler "github.com/tarampampam/error-pages/internal/http/handlers/version"
 	"github.com/tarampampam/error-pages/internal/metrics"
+	"github.com/tarampampam/error-pages/internal/options"
 	"github.com/tarampampam/error-pages/internal/tpl"
 	"github.com/tarampampam/error-pages/internal/version"
 	"github.com/valyala/fasthttp"
@ -66,14 +67,7 @@ type templatePicker interface {

 // Register server routes, middlewares, etc.
 // Router docs: <https://github.com/fasthttp/router>
-func (s *Server) Register(
-	cfg *config.Config,
-	templatePicker templatePicker,
-	defaultPageCode string,
-	defaultHTTPCode uint16,
-	showDetails bool,
-	proxyHTTPHeaders []string,
-) error {
+func (s *Server) Register(cfg *config.Config, templatePicker templatePicker, opt options.ErrorPage) error {
 	reg, m := metrics.NewRegistry(), metrics.NewMetrics()

 	if err := m.Register(reg); err != nil {
@ -82,8 +76,9 @@ func (s *Server) Register(

 	s.fast.Handler = common.DurationMetrics(common.LogRequest(s.router.Handler, s.log), &m)

-	s.router.GET("/", indexHandler.NewHandler(cfg, templatePicker, s.rdr, defaultPageCode, defaultHTTPCode, showDetails, proxyHTTPHeaders)) //nolint:lll
-	s.router.GET("/{code}.html", errorpageHandler.NewHandler(cfg, templatePicker, s.rdr, showDetails, proxyHTTPHeaders))                    //nolint:lll
+	s.router.GET("/", indexHandler.NewHandler(cfg, templatePicker, s.rdr, opt))
+	s.router.GET("/{code}.html", errorpageHandler.NewHandler(cfg, templatePicker, s.rdr, opt))
+
 	s.router.GET("/version", versionHandler.NewHandler(version.Version()))

 	liveHandler := healthzHandler.NewHandler(checkers.NewLiveChecker())
--- a/internal/options/errorpage.go
+++ b/internal/options/errorpage.go
@ -0,0 +1,16 @@
+package options
+
+type ErrorPage struct {
+	Default struct {
+		PageCode string // default error page code
+		HTTPCode uint16 // default HTTP response code
+	}
+	L10n struct {
+		Disabled bool // disable error pages localization
+	}
+	Template struct {
+		Name string // template name
+	}
+	ShowDetails      bool     // show request details in response
+	ProxyHTTPHeaders []string // proxy HTTP request headers list
+}
--- a/internal/tpl/properties.go
+++ b/internal/tpl/properties.go
@ -16,6 +16,7 @@ type Properties struct { // only string properties with a "token" tag, please
 	RequestID          string `token:"request_id"`
 	ForwardedFor       string `token:"forwarded_for"`
 	Host               string `token:"host"`
+	L10nDisabled       bool
 	ShowRequestDetails bool
 }

--- a/internal/tpl/render.go
+++ b/internal/tpl/render.go
@ -140,8 +140,10 @@ func (tr *TemplateRenderer) Render(content []byte, props Properties) ([]byte, er
 	}

 	var funcMap = template.FuncMap{
-		"show_details": func() bool { return props.ShowRequestDetails },
-		"hide_details": func() bool { return !props.ShowRequestDetails },
+		"show_details":  func() bool { return props.ShowRequestDetails },
+		"hide_details":  func() bool { return !props.ShowRequestDetails },
+		"l10n_disabled": func() bool { return props.L10nDisabled },
+		"l10n_enabled":  func() bool { return !props.L10nDisabled },
 	}

 	// make a copy of template functions map
--- a/internal/tpl/render_test.go
+++ b/internal/tpl/render_test.go
@ -56,6 +56,17 @@ func Test_Render(t *testing.T) {
 			giveProps:   tpl.Properties{Code: "201", Message: "lorem ipsum"},
 			wantContent: `{"code": "201", "message": {"here":[ " Yeah " ]}}`,
 		},
+
+		"fn l10n_enabled": {
+			giveContent: "{{ if l10n_enabled }}Y{{ else }}N{{ end }}",
+			giveProps:   tpl.Properties{L10nDisabled: true},
+			wantContent: "N",
+		},
+		"fn l10n_disabled": {
+			giveContent: "{{ if l10n_disabled }}Y{{ else }}N{{ end }}",
+			giveProps:   tpl.Properties{L10nDisabled: true},
+			wantContent: "Y",
+		},
 	} {
 		t.Run(name, func(t *testing.T) {
 			content, err := renderer.Render([]byte(tt.giveContent), tt.giveProps)
--- a/l10n/.eslintrc.json
+++ b/l10n/.eslintrc.json
@ -0,0 +1,11 @@
+{
+    "extends": [
+        "eslint:recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 2017
+    },
+    "env": {
+        "browser": true
+    }
+}
--- a/l10n/l10n.js
+++ b/l10n/l10n.js
@ -0,0 +1,655 @@
+Object.defineProperty(window, 'l10n', {
+    value: new function () {
+        // language codes list: <https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes>
+        const data = { // all keys should be in english (it is default/main locale)
+            'Error': {
+                fr: 'Erreur',
+                ru: 'Ошибка',
+                uk: 'Помилка',
+                pt: 'Erro',
+                nl: 'Fout',
+                de: 'Fehler',
+            },
+            'Good luck': {
+                fr: 'Bonne chance',
+                ru: 'Удачи',
+                uk: 'Успіхів',
+                pt: 'Boa sorte',
+                nl: 'Veel succes',
+                de: 'Viel Glück',
+            },
+            'UH OH': {
+                fr: 'Oups',
+                ru: 'Ох',
+                uk: 'Ох',
+                pt: 'Ops',
+                nl: 'Oeps',
+                de: 'Hoppla',
+            },
+            'Request details': {
+                fr: 'Détails de la requête',
+                ru: 'Детали запроса',
+                uk: 'Деталі запиту',
+                pt: 'Detalhes da solicitação',
+                nl: 'Details van verzoek',
+                de: 'Details der Anfrage',
+            },
+            'Double-check the URL': {
+                fr: 'Vérifiez l’URL',
+                ru: 'Дважды проверьте URL',
+                uk: 'Двічі перевіряйте URL-адресу',
+                pt: 'Verifique novamente a URL',
+                nl: 'Controleer de URL',
+                de: 'Überprüfen Sie die URL',
+            },
+            'Alternatively, go back': {
+                fr: 'Essayer de revenir en arrière',
+                ru: 'Или можете вернуться назад',
+                uk: 'Або ви можете повернутися',
+                pt: "Como alternativa, tente voltar",
+                nl: 'Of ga terug',
+                de: 'Alternativ gehen Sie zurück',
+            },
+            'Here\'s what might have happened': {
+                fr: 'Voici ce qui aurait pu se passer',
+                ru: 'Из-за чего это могло случиться',
+                uk: 'Що це може статися',
+                pt: 'Aqui está o que pode ter acontecido',
+                nl: 'Wat er gebeurd kan zijn',
+                de: 'Folgendes könnte passiert sein',
+            },
+            'You may have mistyped the URL': {
+                fr: 'Vous avez peut-être mal tapé l’URL',
+                ru: 'Вы могли ошибиться в URL',
+                uk: 'Ви можете зробити помилку в URL-адресі',
+                pt: 'Você pode ter digitado incorretamente a URL',
+                nl: 'De URL bevat een typefout',
+                de: 'Möglicherweise haben Sie die URL falsch eingegeben',
+            },
+            'The site was moved': {
+                fr: 'Le site a été déplacé',
+                ru: 'Сайт был перемещён',
+                uk: 'Сайт був переміщений',
+                pt: 'O site foi movido',
+                nl: 'De site is verplaatst',
+                de: 'Die Seite wurde verschoben',
+            },
+            'It was never here': {
+                fr: 'Il n’a jamais été ici',
+                ru: 'Он никогда не был здесь',
+                uk: 'Він ніколи не був тут',
+                pt: 'Nunca esteve aqui',
+                nl: 'Het was hier nooit',
+                de: 'Es war nie hier',
+            },
+            'Bad Request': {
+                fr: 'Mauvaise requête',
+                ru: 'Некорректный запрос',
+                uk: 'Неправильний запит',
+                pt: 'Requisição inválida',
+                nl: 'Foutieve anvraag',
+                de: 'Fehlerhafte Anfrage',
+            },
+            'The server did not understand the request': {
+                fr: 'Le serveur ne comprend pas la requête',
+                ru: 'Сервер не смог обработать запрос из-за ошибки в нём',
+                uk: 'Сервер не міг обробити запит через помилку в ньому',
+                pt: 'O servidor não entendeu a solicitação',
+                nl: 'De server begreep het verzoek niet',
+                de: 'Der Server hat die Anfrage nicht verstanden',
+            },
+            'Unauthorized': {
+                fr: 'Non autorisé',
+                ru: 'Запрос не авторизован',
+                uk: 'Несанкціонований доступ',
+                pt: 'Não autorizado',
+                nl: 'Niet geautoriseerd',
+                de: 'Nicht autorisiert',
+            },
+            'The requested page needs a username and a password': {
+                fr: 'La page demandée nécessite un nom d’utilisateur et un mot de passe',
+                ru: 'Для доступа к странице требуется логин и пароль',
+                uk: 'Щоб отримати доступ до сторінки, потрібний логін та пароль',
+                pt: 'A página solicitada precisa de um nome de usuário e uma senha',
+                nl: 'De pagina heeft een gebruikersnaam en wachtwoord nodig',
+                de: 'Die angeforderte Seite benötigt einen Benutzernamen und ein Passwort',
+            },
+            'Forbidden': {
+                fr: 'Interdit',
+                ru: 'Запрещено',
+                uk: 'Заборонено',
+                pt: 'Proibido',
+                nl: 'Verboden',
+                de: 'Verboten',
+            },
+            'Access is forbidden to the requested page': {
+                fr: 'Accès interdit à la page demandée',
+                ru: 'Доступ к странице запрещён',
+                uk: 'Доступ до сторінки заборонено',
+                pt: 'É proibido o acesso à página solicitada',
+                nl: 'Toegang tot de pagina is verboden',
+                de: 'Der Zugriff auf die angeforderte Seite ist verboten',
+            },
+            'Not Found': {
+                fr: 'Introuvable',
+                ru: 'Страница не найдена',
+                uk: 'Сторінка не знайдена',
+                pt: 'Não encontrado',
+                nl: 'Niet gevonden',
+                de: 'Nicht gefunden',
+            },
+            'The server can not find the requested page': {
+                fr: 'Le serveur ne peut trouver la page demandée',
+                ru: 'Сервер не смог найти запрашиваемую страницу',
+                uk: 'Сервер не міг знайти запитану сторінку',
+                pt: 'O servidor não consegue encontrar a página solicitada',
+                nl: 'De server kan de pagina niet vinden',
+                de: 'Der Server kann die angeforderte Seite nicht finden',
+            },
+            'Method Not Allowed': {
+                fr: 'Méthode Non Autorisée',
+                ru: 'Метод не поддерживается',
+                uk: 'Неприпустимий метод',
+                pt: 'Método não permitido',
+                nl: 'Methode niet toegestaan',
+                de: 'Methode nicht erlaubt',
+            },
+            'The method specified in the request is not allowed': {
+                fr: 'La méthode spécifiée dans la requête n’est pas autorisée',
+                ru: 'Указанный в запросе метод не поддерживается',
+                uk: 'Метод, зазначений у запиті, не підтримується',
+                pt: 'O método especificado na solicitação não é permitido',
+                nl: 'De methode in het verzoek is niet toegestaan',
+                de: 'Die in der Anfrage angegebene Methode ist nicht zulässig',
+            },
+            'Proxy Authentication Required': {
+                fr: 'Authentification proxy requise',
+                ru: 'Нужна аутентификация прокси',
+                uk: 'Потрібна ідентифікація проксі',
+                pt: 'Autenticação de proxy necessária',
+                nl: 'Authenticatie op de proxyserver verplicht',
+                de: 'Proxy-Authentifizierung benötigt',
+            },
+            'You must authenticate with a proxy server before this request can be served': {
+                fr: 'Vous devez vous authentifier avec un serveur proxy avant que cette requête puisse être servie',
+                ru: 'Вы должны быть авторизованы на прокси сервере для обработки этого запроса',
+                uk: 'Ви повинні увійти до проксі-сервера для обробки цього запиту',
+                pt: 'Você deve se autenticar com um servidor proxy antes que esta solicitação possa ser atendida',
+                nl: 'Je moet authenticeren bij een proxyserver voordat dit verzoek uitgevoerd kan worden',
+                de: 'Sie müssen sich bei einem Proxy-Server authentifizieren, bevor diese Anfrage bedient werden kann',
+            },
+            'Request Timeout': {
+                fr: 'Requête expiré',
+                ru: 'Истекло время ожидания',
+                uk: 'Час запиту закінчився',
+                pt: 'Tempo limite de solicitação excedido',
+                nl: 'Aanvraagtijd verstreken',
+                de: 'Zeitüberschreitung der Anforderung',
+            },
+            'The request took longer than the server was prepared to wait': {
+                fr: 'La requête prend plus de temps que prévu',
+                ru: 'Отправка запроса заняла слишком много времени',
+                uk: 'Надсилання запиту зайняв занадто багато часу',
+                pt: 'A solicitação demorou mais do que o servidor estava preparado para esperar',
+                nl: 'Het verzoek duurde langer dan de server wilde wachten',
+                de: 'Die Anfrage hat länger gedauert, als der Server bereit war zu warten',
+            },
+            'Conflict': {
+                fr: 'Conflit',
+                ru: 'Конфликт',
+                uk: 'Конфлікт',
+                pt: 'Conflito',
+                nl: 'Conflict',
+                de: 'Konflikt',
+            },
+            'The request could not be completed because of a conflict': {
+                fr: 'La requête n’a pas pu être complétée à cause d’un conflit',
+                ru: 'Запрос не может быть обработан из-за конфликта',
+                uk: 'Запит не може бути оброблений через конфлікт',
+                pt: 'A solicitação não pôde ser concluída devido a um conflito',
+                nl: 'Het verzoek kon niet worden verwerkt vanwege een conflict',
+                de: 'Die Anfrage konnte aufgrund eines Konflikts nicht abgeschlossen werden',
+            },
+            'Gone': {
+                fr: 'Supprimé',
+                ru: 'Удалено',
+                uk: 'Вилучений',
+                pt: 'Removido',
+                nl: 'Verdwenen',
+                de: 'Verschwunden',
+            },
+            'The requested page is no longer available': {
+                fr: 'La page demandée n’est plus disponible',
+                ru: 'Запрошенная страница была удалена',
+                uk: 'Запитана сторінка була видалена',
+                pt: 'A página solicitada não está mais disponível',
+                nl: 'De pagina is niet langer beschikbaar',
+                de: 'Die angeforderte Seite ist nicht mehr verfügbar',
+            },
+            'Length Required': {
+                fr: 'Longueur requise',
+                ru: 'Необходима длина',
+                uk: 'Потрібно вказати розмір',
+                pt: 'Content-Length necessário',
+                nl: 'Lengte benodigd',
+                de: 'Länge benötigt',
+            },
+            'The "Content-Length" is not defined. The server will not accept the request without it': {
+                fr: 'Le "Content-Length" n’est pas défini. Le serveur ne prendra pas en compte la requête',
+                ru: 'Заголовок "Content-Length" не был передан. Сервер не может обработать запрос без него',
+                uk: 'Заголовок "Content-Length" не був переданий. Сервер не може обробити запит без нього',
+                pt: 'O "Content-Length" não está definido. O servidor não aceitará a solicitação sem ele',
+                nl: 'De "Content-Length" is niet gespecificeerd. De server accepteert het verzoek niet zonder',
+                de: 'Die "Content-Length" ist nicht definiert. Ohne sie akzeptiert der Server die Anfrage nicht',
+            },
+            'Precondition Failed': {
+                fr: 'Échec de la condition préalable',
+                ru: 'Условие ложно',
+                uk: 'Збій під час обробки попередньої умови',
+                pt: 'Falha na pré-condição',
+                nl: 'Niet voldaan aan vooraf gestelde voorwaarde',
+                de: 'Vorbedingung fehlgeschlagen',
+            },
+            'The pre condition given in the request evaluated to false by the server': {
+                fr: 'La précondition donnée dans la requête a été évaluée comme étant fausse par le serveur',
+                ru: 'Ни одно из условных полей заголовка запроса не было выполнено',
+                uk: 'Жодна з умовних полів заголовка запиту не була виконана',
+                pt: 'A pré-condição dada na solicitação avaliada como falsa pelo servidor',
+                nl: 'De vooraf gestelde voorwaarde is afgewezen door de server',
+                de: 'Die in der Anfrage angegebene Vorbedingung wird vom Server als falsch bewertet',
+            },
+            'Payload Too Large': {
+                fr: 'Charge trop volumineuse',
+                ru: 'Слишком большой запрос',
+                uk: 'Занадто великий запит',
+                pt: 'Payload muito grande',
+                nl: 'Aanvraag te grood',
+                de: 'Anfrage zu groß',
+            },
+            'The server will not accept the request, because the request entity is too large': {
+                fr: 'Le serveur ne prendra pas en compte la requête, car l’entité de la requête est trop volumineuse',
+                ru: 'Сервер не может обработать запрос, так как он слишком большой',
+                uk: 'Сервер не може обробити запит, оскільки він занадто великий',
+                pt: 'O servidor não aceitará a solicitação porque a entidade da solicitação é muito grande',
+                nl: 'De server accepteert het verzoek niet omdat de aanvraag te groot is',
+                de: 'Der Server akzeptiert die Anfrage nicht, da die Datenmenge zu groß ist',
+            },
+            'Requested Range Not Satisfiable': {
+                fr: 'Requête non satisfaisante',
+                ru: 'Диапазон не достижим',
+                uk: 'Запитуваний діапазон недосяжний',
+                pt: 'Intervalo Solicitado Não Satisfatório',
+                nl: 'Aangevraagd gedeelte niet opvraagbaar',
+                de: 'Anfrage-Bereich nicht erfüllbar',
+            },
+            'The requested byte range is not available and is out of bounds': {
+                fr: 'Le byte range demandé n’est pas disponible et est hors des limites',
+                ru: 'Запрошенный диапазон данных недоступен или вне допустимых пределов',
+                uk: 'Описаний діапазон даних недоступний або з допустимих меж',
+                pt: 'O intervalo de bytes solicitado não está disponível e está fora dos limites',
+                nl: 'De aangevraagde bytes zijn buiten het limiet',
+                de: 'Der angefragte Teilbereich der Ressource existiert nicht oder ist ungültig',
+            },
+            'I\'m a teapot': {
+                fr: 'Je suis une théière',
+                ru: 'Я чайник',
+                uk: 'Я чайник',
+                pt: 'Eu sou um bule',
+                nl: 'Ik ben een theepot',
+                de: 'Ich bin eine Teekanne',
+            },
+            'Attempt to brew coffee with a teapot is not supported': {
+                fr: 'Tenter de préparer du café avec une théière n’est pas pris en charge',
+                ru: 'Попытка заварить кофе в чайнике обречена на фиаско',
+                uk: 'Спроба виварити каву в чайник приречена на фіаско',
+                pt: 'A tentativa de preparar café com um bule não é suportada',
+                nl: 'Koffie maken met een theepot is niet ondersteund',
+                de: 'Der Versuch, Kaffee mit einer Teekanne zuzubereiten, wird nicht unterstützt',
+            },
+            'Too Many Requests': {
+                fr: 'Trop de requêtes',
+                ru: 'Слишком много запросов',
+                uk: 'Занадто багато запитів',
+                pt: 'Excesso de solicitações',
+                nl: 'Te veel requests',
+                de: 'Zu viele Anfragen',
+            },
+            'Too many requests in a given amount of time': {
+                fr: 'Trop de requêtes dans un délai donné',
+                ru: 'Отправлено слишком много запросов за короткое время',
+                uk: 'Надіслано занадто багато запитів на короткий час',
+                pt: 'Excesso de solicitações em um determinado período de tempo',
+                nl: 'Te veel verzoeken binnen een bepaalde tijd',
+                de: 'Der Client hat zu viele Anfragen in einem bestimmten Zeitraum gesendet',
+            },
+            'Internal Server Error': {
+                fr: 'Erreur interne du serveur',
+                ru: 'Внутренняя ошибка сервера',
+                uk: 'Внутрішня помилка сервера',
+                pt: 'Erro do Servidor Interno',
+                nl: 'Interne serverfout',
+                de: 'Interner Server-Fehler',
+            },
+            'The server met an unexpected condition': {
+                fr: 'Le serveur a rencontré une condition inattendue',
+                ru: 'Произошло что-то неожиданное на сервере',
+                uk: 'На сервері було щось несподіване',
+                pt: 'O servidor encontrou uma condição inesperada',
+                nl: 'De server ondervond een onverwachte conditie',
+                de: 'Der Server hat einen internen Fehler festgestellt',
+            },
+            'Bad Gateway': {
+                fr: 'Mauvaise passerelle',
+                ru: 'Ошибка шлюза',
+                uk: 'Помилка шлюзу',
+                pt: 'Gateway inválido',
+                nl: 'Ongeldige Gateway',
+                de: 'Fehlerhafter Gateway',
+            },
+            'The server received an invalid response from the upstream server': {
+                fr: 'Le serveur a reçu une réponse invalide du serveur distant',
+                ru: 'Сервер получил некорректный ответ от вышестоящего сервера',
+                uk: 'Сервер отримав неправильну відповідь з сервера Upstream',
+                pt: 'O servidor recebeu uma resposta inválida do servidor upstream',
+                nl: 'De server ontving een ongeldig antwoord van een bovenliggende server',
+                de: 'Der Server hat eine ungültige Antwort vom Upstream-Server erhalten',
+            },
+            'Service Unavailable': {
+                fr: 'Service indisponible',
+                ru: 'Сервис недоступен',
+                uk: 'Сервіс недоступний',
+                pt: 'Serviço não disponível',
+                nl: 'Dienst niet beschikbaar',
+                de: 'Dienst nicht verfügbar',
+            },
+            'The server is temporarily overloading or down': {
+                fr: 'Le serveur est temporairement en surcharge ou indisponible',
+                ru: 'Сервер временно не может обрабатывать запросы по техническим причинам',
+                uk: 'Сервер тимчасово не може обробляти запити з технічних причин',
+                pt: 'O servidor está temporariamente sobrecarregado ou inativo',
+                nl: 'De server is tijdelijk overbelast of niet bereikbaar',
+                de: 'Der Server ist vorübergehend überlastet oder ausgefallen',
+            },
+            'Gateway Timeout': {
+                fr: 'Expiration Passerelle',
+                ru: 'Шлюз не отвечает',
+                uk: 'Шлюз не відповідає',
+                pt: 'Tempo limite do gateway excedido',
+                nl: 'Gateway Verlopen',
+                de: 'Gateway Zeitüberschreitung',
+            },
+            'The gateway has timed out': {
+                fr: 'Le temps d’attente de la passerelle est dépassé',
+                ru: 'Сервер не дождался ответа от вышестоящего сервера',
+                uk: 'Сервер не чекав відповіді від сервера Upstream',
+                pt: 'O gateway esgotou o tempo limite',
+                nl: 'De verbinding naar de bovenliggende server is verlopen',
+                de: 'Das Zeitlimit für den Verbindungsaufbau mit dem Upstream-Server ist abgelaufen',
+            },
+            'HTTP Version Not Supported': {
+                fr: 'Version HTTP non prise en charge',
+                ru: 'Версия HTTP не поддерживается',
+                uk: 'Версія НТТР не підтримується',
+                pt: 'Versão HTTP não suportada',
+                nl: 'HTTP-versie wordt niet ondersteunt',
+                de: 'HTTP-Version wird nicht unterstützt',
+            },
+            'The server does not support the "http protocol" version': {
+                fr: 'Le serveur ne supporte pas la version du protocole HTTP',
+                ru: 'Сервер не поддерживает запрошенную версию HTTP протокола',
+                uk: 'Сервер не підтримує запитану версію HTTP-протоколу',
+                pt: 'O servidor não suporta a versão do protocolo HTTP',
+                nl: 'De server ondersteunt deze HTTP-versie niet',
+                de: 'Der Server unterstützt die HTTP-Protokoll-Version nicht',
+            },
+
+            'Host': {
+                fr: 'Hôte',
+                ru: 'Хост',
+                uk: 'Хост',
+                pt: 'Hospedeiro',
+                nl: 'Host',
+                de: 'Host',
+            },
+            'Original URI': {
+                fr: 'URI d’origine',
+                ru: 'Исходный URI',
+                uk: 'Вихідний URI',
+                pt: 'URI original',
+                nl: 'Originele URI',
+                de: 'Originale URI',
+            },
+            'Forwarded for': {
+                fr: 'Transmis pour',
+                ru: 'Перенаправлен',
+                uk: 'Перенаправлений',
+                pt: 'Encaminhado para',
+                nl: 'Doorgestuurd voor',
+                de: 'Weitergeleitet für',
+            },
+            'Namespace': {
+                fr: 'Espace de noms',
+                ru: 'Пространство имён',
+                uk: 'Простір імен',
+                pt: 'Namespace',
+                nl: 'Elementnaam',
+                de: 'Namensraum',
+            },
+            'Ingress name': {
+                fr: 'Nom ingress',
+                ru: 'Имя Ingress',
+                uk: 'Ім\'я Ingress',
+                pt: 'Nome Ingress',
+                nl: 'Ingress naam',
+                de: 'Ingress Name',
+            },
+            'Service name': {
+                fr: 'Nom du service',
+                ru: 'Имя сервиса',
+                uk: 'Ім\'я сервісу',
+                pt: 'Nome do Serviço',
+                nl: 'Service naam',
+                de: 'Service Name',
+            },
+            'Service port': {
+                fr: 'Port du service',
+                ru: 'Порт сервиса',
+                uk: 'Порт сервісу',
+                pt: 'Porta do serviço',
+                nl: 'Service poort',
+                de: 'Service Port',
+            },
+            'Request ID': {
+                fr: 'Identifiant de la requête',
+                ru: 'ID запроса',
+                uk: 'ID запиту',
+                pt: 'ID da solicitação',
+                nl: 'ID van het verzoek',
+                de: 'Anfrage ID',
+            },
+            'Timestamp': {
+                fr: 'Horodatage',
+                ru: 'Временная метка',
+                uk: 'Тимчасова мітка',
+                pt: 'Timestamp',
+                nl: 'Tijdstempel',
+                de: 'Zeitstempel',
+            },
+
+            'client-side error': {
+                fr: 'Erreur Client',
+                ru: 'ошибка на стороне клиента',
+                uk: 'помилка на стороні клієнта',
+                pt: 'erro do lado do cliente',
+                nl: 'fout aan de gebruikerskant',
+                de: 'Clientseitiger Fehler',
+            },
+            'server-side error': {
+                fr: 'Erreur Serveur',
+                ru: 'ошибка на стороне сервера',
+                uk: 'помилка на стороні сервера',
+                pt: 'erro do lado do servidor',
+                nl: 'fout aan de serverkant',
+                de: 'Serverseitiger Fehler',
+            },
+
+            'Your Client': {
+                fr: 'Votre Client',
+                ru: 'Ваш Браузер',
+                uk: 'Ваш Браузер',
+                pt: 'Seu Cliente',
+                nl: 'Jouw Client',
+                de: 'Ihr Client',
+            },
+            'Network': {
+                fr: 'Réseau',
+                ru: 'Сеть',
+                uk: 'Сіть',
+                pt: 'Rede',
+                nl: 'Netwerk',
+                de: 'Netzwerk',
+            },
+            'Web Server': {
+                fr: 'Serveur Web',
+                ru: 'Web Сервер',
+                uk: 'Web Сервер',
+                pt: 'Servidor web',
+                nl: 'Web Server',
+                de: 'Webserver',
+            },
+            'What happened?': {
+                fr: 'Que s’est-il passé ?',
+                ru: 'Что произошло?',
+                uk: 'Що сталося?',
+                pt: 'O que aconteceu?',
+                nl: 'Wat is er gebeurd?',
+                de: 'Was ist passiert?',
+            },
+            'What can i do?': {
+                fr: 'Que puis-je faire ?',
+                ru: 'Что можно сделать?',
+                uk: 'Що можна зробити?',
+                pt: 'O que eu posso fazer?',
+                nl: 'Wat kan ik doen?',
+                de: 'Was kann ich machen?',
+            },
+            'Please try again in a few minutes': {
+                fr: 'Veuillez réessayer dans quelques minutes',
+                ru: 'Пожалуйста, попробуйте повторить запрос ещё раз чуть позже',
+                uk: 'Будь ласка, спробуйте повторити запит ще раз трохи пізніше',
+                pt: 'Por favor, tente novamente em alguns minutos',
+                nl: 'Probeer het alstublieft opnieuw over een paar minuten',
+                de: 'Bitte versuchen Sie es in ein paar Minuten erneut',
+            },
+            'Working': {
+                fr: 'Opérationnel',
+                ru: 'Работает',
+                uk: 'Працює',
+                pt: 'Funcionando',
+                nl: 'Functioneel',
+                de: 'Funktioniert',
+            },
+            'Unknown': {
+                fr: 'Inconnu',
+                ru: 'Неизвестно',
+                uk: 'Невідомо',
+                pt: 'Desconhecido',
+                nl: 'Onbekend',
+                de: 'Unbekannt',
+            },
+            'Please try to change the request method, headers, payload, or URL': {
+                fr: 'Veuillez essayer de changer la méthode de requête, les en-têtes, le contenu ou l’URL',
+                ru: 'Пожалуйста, попробуйте изменить метод запроса, заголовки, его содержимое или URL',
+                uk: 'Будь ласка, спробуйте змінити метод запиту, заголовки, його вміст або URL-адресу',
+                pt: 'Tente alterar o método de solicitação, cabeçalhos, payload ou URL',
+                nl: 'Probeer het opnieuw met een andere methode, headers, payload of URL',
+                de: 'Bitte versuchen Sie, die Anfragemethode, Header, Payload oder URL zu ändern',
+            },
+            'Please check your authorization data': {
+                fr: 'Veuillez vérifier vos données d’autorisation',
+                ru: 'Пожалуйста, проверьте данные авторизации',
+                uk: 'Будь ласка, перевірте дані авторизації',
+                pt: 'Verifique seus dados de autorização',
+                nl: 'Controleer de authenticatiegegevens',
+                de: 'Bitte überprüfen Sie Ihre Zugangsdaten',
+            },
+            'Please double-check the URL and try again': {
+                fr: 'Veuillez vérifier l’URL et réessayer',
+                ru: 'Пожалуйста, дважды проверьте URL и попробуйте снова',
+                uk: 'Будь ласка, двічі перевірте URL-адресу і спробуйте знову',
+                pt: 'Verifique novamente o URL e tente novamente',
+                nl: 'Controleer de URL en probeer het opnieuw',
+                de: 'Bitte überprüfen Sie die URL und versuchen Sie es erneut',
+            },
+        };
+
+        /**
+         * @param {string} token
+         * @return {string}
+         */
+        const serializeToken = function (token) {
+            return token.toLowerCase().replaceAll(/[^a-z0-9]/g, '');
+        };
+
+        // normalize the data keys
+        for (const key in data) {
+            Object.defineProperty(data, serializeToken(key), Object.getOwnPropertyDescriptor(data, key));
+            delete data[key];
+        }
+
+        // detect browser locale (take only 2 first symbols)
+        let activeLocale = navigator.language.substring(0, 2).toLowerCase();
+
+        /**
+         * @param {string} locale
+         */
+        this.setLocale = function (locale) {
+            activeLocale = locale.toLowerCase();
+        }
+
+        /**
+         * @param {string} token
+         * @param {string|undefined?} def
+         */
+        this.translate = function (token, def) {
+            const t = serializeToken(token);
+
+            if (activeLocale === 'en' && Object.prototype.hasOwnProperty.call(data, t)) {
+                return token
+            }
+
+            if (Object.prototype.hasOwnProperty.call(data, t) && Object.prototype.hasOwnProperty.call(data[t], activeLocale)) {
+                return data[t][activeLocale];
+            }
+
+            return def;
+        };
+
+        /**
+         * Localize all elements with HTML attribute `data-l10n`.
+         */
+        this.localizeDocument = function () {
+            const dataAttributeName = 'data-l10n';
+
+            Array.prototype.forEach.call(document.querySelectorAll('[' + dataAttributeName + ']'), ($el) => {
+                const attr = $el.getAttribute(dataAttributeName).trim(),
+                    token = attr.length > 0 ? attr : $el.innerText.trim(),
+                    localized = this.translate(token, undefined);
+
+                if (attr.length === 0) {
+                    $el.setAttribute(dataAttributeName, token);
+                }
+
+                if (localized !== undefined) {
+                    $el.innerText = localized;
+                } else {
+                    console.debug(`Unsupported l10n token detected: "${token}" (locale "${activeLocale}")`, $el);
+                }
+            });
+        };
+    },
+    writable: false,
+    enumerable: false,
+});
+
+window.l10n.localizeDocument();
--- a/l10n/readme.md
+++ b/l10n/readme.md
@ -0,0 +1,19 @@
+# 🔤 Localization
+
+[![jsDelivr hits](https://img.shields.io/jsdelivr/gh/hm/tarampampam/error-pages)](https://www.jsdelivr.com/package/gh/tarampampam/error-pages)
+
+This directory contains file [l10n.js](l10n.js) for the error pages localization. The working logic is very simple - pages load this script using [jsdelivr.com](https://www.jsdelivr.com/) as a CDN for [versioned content from the GitHub repository](https://www.jsdelivr.com/features#gh), and it translates tag content with the special HTML attribute `data-l10n`.
+
+By default, pages markup contains strings in English (`en` locale). If you want to localize the error pages on the different locales, you should:
+
+- Find your locale name on [this page](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) (column `639-1`)
+- Make a fork of this repository
+- Edit file [l10n.js](l10n.js) in `data` section (append new localized strings) using locale name from the step 1
+- Make a PR with your changes
+
+## 👍 Translators
+
+- 🇫🇷 French by [@jvin042](https://github.com/jvin042)
+- 🇵🇹 Portuguese by [@fabtrompet](https://github.com/fabtrompet)
+- 🇳🇱 Dutch by [@SchoNie](https://github.com/SchoNie)
+- 🇩🇪 German by [@mschoeffmann](https://github.com/mschoeffmann)
--- a/templates/app-down.html
+++ b/templates/app-down.html
@ -16,7 +16,7 @@
    <style>
        :root{--color-bg-primary:#fff;--color-bg-secondary:#eef6fa;--color-bg-sign:#fff;--color-text-primary:#333;--color-text-secondary:#777;--color-img-details:#f62f37;--color-img-primary:#7990a1;--color-img-secondary:#00baff;--font-size-small:13px;--font-size-normal:16px;--font-size-large:45px}
        @media (prefers-color-scheme:dark){
-            /*:root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}*/
+            :root{--color-bg-primary:#222526;--color-bg-secondary:#292e2f;--color-bg-sign:#262828;--color-text-primary:#fff;--color-text-secondary:#999;--color-img-details:#c72d34;--color-img-primary:#adacac;--color-img-secondary:#86d3ff}
        }
        body,html{background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:Roboto,Helvetica,sans-serif;font-size:0;margin:0;padding:0;height:100vh;overflow-x:hidden}
        body{align-items:center;display:flex;justify-content:center;height:100vh}
@ -35,7 +35,7 @@
        .details ul li{padding-top:calc(var(--font-size-small) * 1.5)}
        .details ul li:first-child{padding-top:calc(var(--font-size-small) * .6)}
        .details code,.details span,.details ul li::before{font-size:var(--font-size-small);font-weight:400}
-        .details span{padding-right:7px}
+        .details code{padding-left:7px}
        /* {{ end }} */
        a{text-decoration:none;color:var(--color-img-secondary)}
        .hidden{display:none}
@ -79,36 +79,36 @@
 <body>
 <main>
    <div class="content">
-        <h2 class="title">{{ message }}</h2>
-        <p>{{ description }}</p>
+        <h2 class="title" data-l10n>{{ message }}</h2>
+        <p data-l10n>{{ description }}</p>
        <div class="subtitle if-not-found hidden">
-            <p>Here's what might have happened:</p>
+            <p><span data-l10n>Here's what might have happened</span>:</p>
            <ul>
-                <li>You may have mistyped the URL</li>
-                <li>The site was moved</li>
-                <li>It was never here</li>
+                <li data-l10n>You may have mistyped the URL</li>
+                <li data-l10n>The site was moved</li>
+                <li data-l10n>It was never here</li>
            </ul>
        </div>
-        <p class="if-maybe-wrong-uri">Double-check the URL. <a class="go-back hidden">Alternatively, go back</a></p>
+        <p class="if-maybe-wrong-uri"><span data-l10n>Double-check the URL</span>. <a class="go-back hidden" data-l10n>Alternatively, go back</a></p>
        {{ if show_details }}
        <div class="details">
-            <p>Request details:</p>
+            <p><span data-l10n>Request details</span>:</p>
            <ul>
-                {{- if host }}<li><span>Host:</span> <code>{{ host }}</code></li>{{ end -}}
-                {{- if original_uri }}<li><span>Original URI:</span> <code>{{ original_uri }}</code></li>{{ end -}}
-                {{- if forwarded_for }}<li><span>Forwarded for:</span> <code>{{ forwarded_for }}</code></li>{{ end -}}
-                {{- if namespace }}<li><span>Namespace:</span> <code>{{ namespace }}</code></li>{{ end -}}
-                {{- if ingress_name }}<li><span>Ingress name:</span> <code>{{ ingress_name }}</code></li>{{ end -}}
-                {{- if service_name }}<li><span>Service name:</span> <code>{{ service_name }}</code></li>{{ end -}}
-                {{- if service_port }}<li><span>Service port:</span> <code>{{ service_port }}</code></li>{{ end -}}
-                {{- if request_id }}<li><span>Request ID:</span> <code>{{ request_id }}</code></li>{{ end -}}
-                <li><span>Timestamp:</span> <code>{{ now.Unix }}</code></li>
+                {{- 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 class="picture">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve" class="pic">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 480" x="0px" y="0px" xml:space="preserve">
            <rect y="0" class="st0" width="600" height="480"></rect>
            <radialgradient id="svg-background-gradient" cx="328.1394" cy="306.3561" r="219.5134" gradientUnits="userSpaceOnUse">
                <stop offset="0" style="stop-color:var(--color-bg-secondary)"></stop>
@ -201,11 +201,11 @@
 </main>
 <script>
    Array.prototype.forEach.call(document.getElementsByClassName('if-not-found'), function ($el) {
-        $el.style.display = "{{ code }}".trim() === "404" ? 'block' : 'none';
+        $el.style.display = "{{ code }}" === "404" ? 'block' : 'none';
    });

    Array.prototype.forEach.call(document.getElementsByClassName('if-maybe-wrong-uri'), function ($el) {
-        $el.style.display = ["401", "403", "404", "418", "505"].includes("{{ code }}".trim()) ? 'block' : 'none';
+        $el.style.display = ["401", "403", "404", "418", "505"].includes("{{ code }}") ? 'block' : 'none';
    });

    Array.prototype.forEach.call(document.getElementsByClassName('go-back'), function ($el) {
@ -224,6 +224,17 @@
            $el.style.display = 'none'; // hide the element
        }
    });
+
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
 </script>
 </body>
 <!--
--- a/templates/cats.html
+++ b/templates/cats.html
@ -63,39 +63,39 @@
        <div class="details">
            <table>
                {{- if host }}<tr>
-                    <td class="name">Host</td>
+                    <td class="name" data-l10n>Host</td>
                    <td class="value">{{ host }}</td>
                </tr>{{ end -}}
                {{- if original_uri }}<tr>
-                    <td class="name">Original URI</td>
+                    <td class="name" data-l10n>Original URI</td>
                    <td class="value">{{ original_uri }}</td>
                </tr>{{ end -}}
                {{- if forwarded_for }}<tr>
-                    <td class="name">Forwarded for</td>
+                    <td class="name" data-l10n>Forwarded for</td>
                    <td class="value">{{ forwarded_for }}</td>
                </tr>{{ end -}}
                {{- if namespace }}<tr>
-                    <td class="name">Namespace</td>
+                    <td class="name" data-l10n>Namespace</td>
                    <td class="value">{{ namespace }}</td>
                </tr>{{ end -}}
                {{- if ingress_name }}<tr>
-                    <td class="name">Ingress name</td>
+                    <td class="name" data-l10n>Ingress name</td>
                    <td class="value">{{ ingress_name }}</td>
                </tr>{{ end -}}
                {{- if service_name }}<tr>
-                    <td class="name">Service name</td>
+                    <td class="name" data-l10n>Service name</td>
                    <td class="value">{{ service_name }}</td>
                </tr>{{ end -}}
                {{- if service_port }}<tr>
-                    <td class="name">Service port</td>
+                    <td class="name" data-l10n>Service port</td>
                    <td class="value">{{ service_port }}</td>
                </tr>{{ end -}}
                {{- if request_id }}<tr>
-                    <td class="name">Request ID</td>
+                    <td class="name" data-l10n>Request ID</td>
                    <td class="value">{{ request_id }}</td>
                </tr>{{ end -}}
                <tr>
-                    <td class="name">Timestamp</td>
+                    <td class="name" data-l10n>Timestamp</td>
                    <td class="value">{{ now.Unix }}</td>
                </tr>
            </table>
@ -103,6 +103,18 @@
        {{ end }}
    </div>
 </div>
+<script>
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
+</script>
 </body>
 <!--
    Error {{ code }}: {{ message }}
--- a/templates/connection.html
+++ b/templates/connection.html
@ -0,0 +1,272 @@
+<!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>{{ code }} | {{ message }}</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com"/>
+    <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&family=Fira+Mono&family=Ubuntu&display=swap" rel="stylesheet"/>
+    <style>
+        /** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
+        :root{--color-bg-primary:#fff;--color-text-primary:#000;--color-text-secondary:#575958;--font-size-primary:56px;--font-size-secondary:20px;--ui-card-color-bg:#f2f2f2;--color-text-ok:#137333;--color-bg-ok:#e6f4ea;--color-text-error:#c5221f;--color-bg-error:#fce8e6;--color-text-warning:#b05a00;--color-bg-warning:#fef7e0;--icon-size:48px}
+        @media (prefers-color-scheme:dark){
+            :root{--color-bg-primary:#111;--color-text-primary:rgba(255, 255, 255, 0.86);--color-text-secondary:rgba(255, 255, 255, 0.4);--ui-card-color-bg:rgba(40, 40, 40, 0.73);--color-bg-ok:#07220f;--color-bg-error:#270501;--color-bg-warning:#392605}
+        }
+        body{margin:2rem 2rem;font-family:'Red Hat Display',Ubuntu,Roboto,'Noto Sans SC',sans-serif;color:var(--color-text-primary);background-color:var(--color-bg-primary)}
+        header{margin-left:1rem}
+        header .error-code{font-size:var(--font-size-primary);line-height:var(--font-size-primary);font-family:'Fira Mono',Ubuntu,monospace;font-weight:400;margin:0 0 0 10px}
+        header .error-description{font-family:Ubuntu,Roboto,'Noto Sans SC',sans-serif;font-size:var(--font-size-secondary);color:var(--color-text-secondary);margin:0 0 0 10px}
+        code{font-family:'Fira Mono',monospace}
+        .status{margin-top:2.5rem;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
+        .card{background-color:var(--ui-card-color-bg);padding:2rem;margin:1rem 1rem;min-height:3rem;border-radius:9px;flex-grow:1}
+        .arrows svg{fill:var(--color-text-secondary)}
+        .icon svg{width:var(--icon-size);height:auto;fill:var(--color-text-primary)}
+        .card.ok{background-color:var(--color-bg-ok)}.card.ok .status-text{color:var(--color-text-ok)}.card.ok svg{fill:var(--color-text-ok)}
+        .card.error{background-color:var(--color-bg-error)}.card.error .status-text{color:var(--color-text-error)}.card.error svg{fill:var(--color-text-error)}
+        .card.warning{background-color:var(--color-bg-warning)}.card.warning .status-text{color:var(--color-text-warning)}.card.warning svg{fill:var(--color-text-warning)}
+        .card main{font-size:calc(var(--font-size-secondary) + .1rem)}
+        .card .status-text,.reason p{margin:0;font-family:Ubuntu,Roboto,Noto Sans SC,sans-serif}
+        .reason p{line-height:125%}
+        a{text-decoration:none;color:#1967d2}
+        .reason{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
+        .reason>*{display:block;margin:1rem;flex-grow:1;max-width:40%}
+        .reason h2{font-size:calc(var(--font-size-secondary) + .2rem);margin:0 0 .6em 0;font-weight:550}
+        footer{margin:1rem;color:var(--color-text-secondary);font-size:0}
+        /* {{ if show_details }} */
+        footer .details{margin-top:20px}
+        footer .details ul{padding:0}
+        footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .6rem)}
+        footer .details code{padding-left:7px}
+        /* {{ end }} */
+        @media screen and (max-width:820px){
+            .arrows{display:none}
+        }
+        @media screen and (max-width:480px){
+            .reason>*{max-width:100%}
+            /* {{ if show_details }} */
+            footer .details code,footer .details span{font-size:calc(var(--font-size-secondary) - .3rem)}
+            /* {{ end }} */
+        }
+        @media screen and (min-width:768px){
+            body{margin:8% 10%}
+            header>*{display:inline-block;margin-left:1%}
+        }
+    </style>
+</head>
+<body>
+<header>
+    <h1 class="error-code">{{ code }}</h1>
+    <p class="error-description">{{ message }}</p>
+</header>
+<div class="status">
+    <div class="card warning" id="client-status-card">
+        <i class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                <path d="M0 0h24v24H0V0z" fill="none"/>
+                <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>
+            </svg>
+        </i>
+        <main data-l10n>Your Client</main>
+        <p class="status-text" data-l10n>Unknown</p>
+    </div>
+
+    <div class="arrows">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
+            <defs>
+                <symbol id="arrows-horizontal" viewBox="0 0 24 24">
+                    <rect fill="none" height="24" width="24" x="0"/>
+                    <polygon points="7.41,13.41 6,12 2,16 6,20 7.41,18.59 5.83,17 21,17 21,15 5.83,15"/>
+                    <polygon points="16.59,10.59 18,12 22,8 18,4 16.59,5.41 18.17,7 3,7 3,9 18.17,9"/>
+                </symbol>
+            </defs>
+            <use href="#arrows-horizontal"/>
+        </svg>
+    </div>
+
+    <div class="card ok" id="network-status-card">
+        <i class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                <path d="M0 0h24v24H0V0z" fill="none"/>
+                <path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>
+            </svg>
+        </i>
+        <main data-l10n>Network</main>
+        <p class="status-text" data-l10n>Working</p>
+    </div>
+
+    <div class="arrows">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
+            <use href="#arrows-horizontal" />
+        </svg>
+    </div>
+
+    <div class="card warning" id="server-status-card">
+        <i class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                <path d="M0 0h24v24H0V0z" fill="none"/>
+                <path d="M19 15v4H5v-4h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 18.5c-.82 0-1.5-.67-1.5-1.5s.68-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19 5v4H5V5h14m1-2H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 8.5c-.82 0-1.5-.67-1.5-1.5S6.18 5.5 7 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z"/>
+            </svg>
+        </i>
+        <main data-l10n>Web Server</main>
+        <p class="status-text" data-l10n>Unknown</p>
+    </div>
+</div>
+<div class="reason">
+    <div class="what-happened">
+        <h2 data-l10n>What happened?</h2>
+        <p class="description" data-l10n>{{ description }}</p>
+    </div>
+    <div class="what-can-i-do">
+        <h2 data-l10n>What can I do?</h2>
+        <p class="description" data-l10n>Please try again in a few minutes</p>
+    </div>
+</div>
+</body>
+<footer>
+    {{ 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 }}
+</footer>
+<script>
+    const errorCode = parseInt(`{{ code }}`, 10);
+
+    if (typeof errorCode !== 'undefined' && !isNaN(errorCode)) {
+        /**
+         * @param {HTMLElement} $card
+         * @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
+         * @param {string} statusText
+         */
+        const setCardState = function ($card, state, statusText) {
+            const okClass = 'ok', warnClass = 'warning', errClass = 'error',
+                $statusText = $card.querySelectorAll('.status-text');
+
+            switch (true) {
+                case state.isOk === true:
+                    $card.classList.remove(errClass, warnClass);
+                    $card.classList.add(okClass);
+                    $statusText.forEach(($statusText) => $statusText.innerText = statusText);
+                    break;
+
+                case state.isWarning === true:
+                    $card.classList.remove(okClass, errClass);
+                    $card.classList.add(warnClass);
+                    $statusText.forEach(($statusText) => $statusText.innerText = statusText);
+                    break;
+
+                case state.isError === true:
+                    $card.classList.remove(okClass, warnClass);
+                    $card.classList.add(errClass);
+                    $statusText.forEach(($statusText) => $statusText.innerText = statusText);
+                    break;
+            }
+        };
+
+        /**
+         * @param { {whatHappened?: string, whatToDo?: string} } reasons
+         */
+        const setReasons = function (reasons) {
+            const descSelector = '.description';
+
+            Array.prototype.forEach.call(document.getElementsByClassName('what-happened'), ($el) => {
+                if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
+                    Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc)  => $desc.innerText = reasons.whatHappened);
+                } else {
+                    $el.remove();
+                }
+            });
+
+            Array.prototype.forEach.call(document.getElementsByClassName('what-can-i-do'), ($el) => {
+                if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
+                    Array.prototype.forEach.call($el.querySelectorAll(descSelector), ($desc)  => $desc.innerText = reasons.whatToDo);
+                } else {
+                    $el.remove();
+                }
+            });
+        };
+
+        /**
+         * @param {string} text
+         */
+        const setErrorDescription = function (text) {
+            Array.prototype.forEach.call(document.getElementsByClassName('error-description'), function ($el) {
+                $el.innerHTML = text;
+            });
+        };
+
+        const message = `{{ message }}`.trim(), cards = {
+            $client: document.getElementById('client-status-card'),
+            $network: document.getElementById('network-status-card'),
+            $server: document.getElementById('server-status-card'),
+        };
+
+        let whatToDo = 'Please try again in a few minutes';
+
+        switch (true) {
+            case errorCode >= 400 && errorCode <= 499:
+                switch (errorCode) {
+                    case 400: case 405: case 411: case 413: whatToDo = 'Please try to change the request method, headers, payload, or URL'; break;
+                    case 401: case 403: case 407: whatToDo = 'Please check your authorization data'; break;
+                    case 404: whatToDo = 'Please double-check the URL and try again'; break;
+                    case 409: case 410: case 418: whatToDo = '¯\\_(ツ)_/¯'; break;
+                }
+
+                setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
+                setCardState(cards.$client, {isError: true}, message)
+                setCardState(cards.$network, {isOk: true}, 'Working')
+                setCardState(cards.$server, {isOk: true}, 'Working')
+                break;
+
+            case errorCode >= 500 && errorCode <= 599:
+                setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
+                setCardState(cards.$client, {isOk: true}, 'Working')
+                setCardState(cards.$network, {isOk: true}, 'Working')
+                setCardState(cards.$server, {isError: true}, message)
+                break;
+
+            default:
+                setErrorDescription(message);
+                setCardState(cards.$client, {isWarning: true}, 'Unknown')
+                setCardState(cards.$network, {isOk: true}, 'Working')
+                setCardState(cards.$server, {isWarning: true}, 'Unknown')
+                break;
+        }
+
+        setReasons({whatHappened: `{{ description }}`.trim(), whatToDo: whatToDo.trim()});
+    } else {
+        console.warn('Cannot parse the error code:', errorCode);
+    }
+
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
+</script>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
+</html>
--- a/templates/ghost.html
+++ b/templates/ghost.html
@ -9,7 +9,8 @@
    <meta name="robots" content="noindex, nofollow" />
    <title>{{ code }}: {{ message }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
        html,body {background-color:#1a1a1a;color:#fff;font-family:'Open Sans',sans-serif;height:100vh;margin:0;font-size:0}
        .container {height:100vh;align-items:center;display:flex;justify-content:center;position:relative}
@ -33,7 +34,7 @@
 <body>
 <div class="container">
    <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">
+        <svg class="ghost" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="127.433px" height="132.743px" viewBox="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>
            <circle fill="#1a1a1a" cx="86.238" cy="57.885" r="6.667"></circle>
            <circle fill="#1a1a1a" cx="40.072" cy="57.885" r="6.667"></circle>
@ -46,49 +47,49 @@
            <path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012 c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259 l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295 c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962 c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219 c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936 c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405 c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566 c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59 c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366 c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777 c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995 c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833 c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074 c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
        </svg>
        <p class="shadowFrame">
-            <svg version="1.1" class="shadow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" enable-background="new 0 0 122.436 39.744" xml:space="preserve">
+            <svg class="shadow" xmlns="http://www.w3.org/2000/svg" x="61px" y="20px" width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" xml:space="preserve">
            <ellipse fill="#262626" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
          </svg>
        </p>
-        <h3>Error {{ code }}</h3>
-        <p class="description">{{ description }}</p>
+        <h3><span data-l10n>Error</span> {{ code }}</h3>
+        <p class="description" data-l10n>{{ description }}</p>
        {{ if show_details }}
        <div class="details">
            <table>
                {{- if host }}<tr>
-                    <td class="name">Host</td>
+                    <td class="name" data-l10n>Host</td>
                    <td class="value">{{ host }}</td>
                </tr>{{ end -}}
                {{- if original_uri }}<tr>
-                    <td class="name">Original URI</td>
+                    <td class="name" data-l10n>Original URI</td>
                    <td class="value">{{ original_uri }}</td>
                </tr>{{ end -}}
                {{- if forwarded_for }}<tr>
-                    <td class="name">Forwarded for</td>
+                    <td class="name" data-l10n>Forwarded for</td>
                    <td class="value">{{ forwarded_for }}</td>
                </tr>{{ end -}}
                {{- if namespace }}<tr>
-                    <td class="name">Namespace</td>
+                    <td class="name" data-l10n>Namespace</td>
                    <td class="value">{{ namespace }}</td>
                </tr>{{ end -}}
                {{- if ingress_name }}<tr>
-                    <td class="name">Ingress name</td>
+                    <td class="name" data-l10n>Ingress name</td>
                    <td class="value">{{ ingress_name }}</td>
                </tr>{{ end -}}
                {{- if service_name }}<tr>
-                    <td class="name">Service name</td>
+                    <td class="name" data-l10n>Service name</td>
                    <td class="value">{{ service_name }}</td>
                </tr>{{ end -}}
                {{- if service_port }}<tr>
-                    <td class="name">Service port</td>
+                    <td class="name" data-l10n>Service port</td>
                    <td class="value">{{ service_port }}</td>
                </tr>{{ end -}}
                {{- if request_id }}<tr>
-                    <td class="name">Request ID</td>
+                    <td class="name" data-l10n>Request ID</td>
                    <td class="value">{{ request_id }}</td>
                </tr>{{ end -}}
                <tr>
-                    <td class="name">Timestamp</td>
+                    <td class="name" data-l10n>Timestamp</td>
                    <td class="value">{{ now.Unix }}</td>
                </tr>
            </table>
@ -96,6 +97,18 @@
        {{ end }}
    </div>
 </div>
+<script>
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
+</script>
 </body>
 <!--
    Error {{ code }}: {{ message }}
--- a/templates/hacker-terminal.html
+++ b/templates/hacker-terminal.html
@ -9,8 +9,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">
+    <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>
        /** Idea author: https://codepen.io/robinselmer */
        html, body {
@ -145,23 +145,35 @@
 <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>
+    <h1><span data-l10n>Error</span> <span class="error_code">{{ code }}</span></h1>
+    <p class="output" data-l10n>{{ description }}.</p>
+    <p class="output"><span data-l10n>Good luck</span>.</p>
    {{ if show_details }}
    <div class="details">
-        {{- if host }}<p class="output small">Host: <code>{{ host }}</code></p>{{ end -}}
-        {{- if original_uri }}<p class="output small">Original URI: <code>{{ original_uri }}</code></p>{{ end -}}
-        {{- if forwarded_for }}<p class="output small">Forwarded for: <code>{{ forwarded_for }}</code></p>{{ end -}}
-        {{- if namespace }}<p class="output small">Namespace: <code>{{ namespace }}</code></p>{{ end -}}
-        {{- if ingress_name }}<p class="output small">Ingress name: <code>{{ ingress_name }}</code></p>{{ end -}}
-        {{- if service_name }}<p class="output small">Service name: <code>{{ service_name }}</code></p>{{ end -}}
-        {{- if service_port }}<p class="output small">Service port: <code>{{ service_port }}</code></p>{{ end -}}
-        {{- if request_id }}<p class="output small">Request ID: <code>{{ request_id }}</code></p>{{ end -}}
-        <p class="output small">Timestamp: <code>{{ now.Unix }}</code></p>
+        {{- if host }}<p class="output small"><span data-l10n>Host</span>: <code>{{ host }}</code></p>{{ end -}}
+        {{- if original_uri }}<p class="output small"><span data-l10n>Original URI</span>: <code>{{ original_uri }}</code></p>{{ end -}}
+        {{- if forwarded_for }}<p class="output small"><span data-l10n>Forwarded for</span>: <code>{{ forwarded_for }}</code></p>{{ end -}}
+        {{- if namespace }}<p class="output small"><span data-l10n>Namespace</span>: <code>{{ namespace }}</code></p>{{ end -}}
+        {{- if ingress_name }}<p class="output small"><span data-l10n>Ingress name</span>: <code>{{ ingress_name }}</code></p>{{ end -}}
+        {{- if service_name }}<p class="output small"><span data-l10n>Service name</span>: <code>{{ service_name }}</code></p>{{ end -}}
+        {{- if service_port }}<p class="output small"><span data-l10n>Service port</span>: <code>{{ service_port }}</code></p>{{ end -}}
+        {{- if request_id }}<p class="output small"><span data-l10n>Request ID</span>: <code>{{ request_id }}</code></p>{{ end -}}
+        <p class="output small"><span data-l10n>Timestamp</span>: <code>{{ now.Unix }}</code></p>
    </div>
    {{ end }}
 </div>
+<script>
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
+</script>
 </body>
 <!--
    Error {{ code }}: {{ message }}
--- a/templates/l7-dark.html
+++ b/templates/l7-dark.html
@ -33,7 +33,7 @@
            <div class="code">
                {{ code }}
            </div>
-            <div class="message">
+            <div class="message" data-l10n>
                {{ message }}
            </div>
        </div>
@ -41,39 +41,39 @@
        <div class="details">
            <table>
                {{- if host }}<tr>
-                    <td class="name">Host</td>
+                    <td class="name" data-l10n>Host</td>
                    <td class="value">{{ host }}</td>
                </tr>{{ end -}}
                {{- if original_uri }}<tr>
-                    <td class="name">Original URI</td>
+                    <td class="name" data-l10n>Original URI</td>
                    <td class="value">{{ original_uri }}</td>
                </tr>{{ end -}}
                {{- if forwarded_for }}<tr>
-                    <td class="name">Forwarded for</td>
+                    <td class="name" data-l10n>Forwarded for</td>
                    <td class="value">{{ forwarded_for }}</td>
                </tr>{{ end -}}
                {{- if namespace }}<tr>
-                    <td class="name">Namespace</td>
+                    <td class="name" data-l10n>Namespace</td>
                    <td class="value">{{ namespace }}</td>
                </tr>{{ end -}}
                {{- if ingress_name }}<tr>
-                    <td class="name">Ingress name</td>
+                    <td class="name" data-l10n>Ingress name</td>
                    <td class="value">{{ ingress_name }}</td>
                </tr>{{ end -}}
                {{- if service_name }}<tr>
-                    <td class="name">Service name</td>
+                    <td class="name" data-l10n>Service name</td>
                    <td class="value">{{ service_name }}</td>
                </tr>{{ end -}}
                {{- if service_port }}<tr>
-                    <td class="name">Service port</td>
+                    <td class="name" data-l10n>Service port</td>
                    <td class="value">{{ service_port }}</td>
                </tr>{{ end -}}
                {{- if request_id }}<tr>
-                    <td class="name">Request ID</td>
+                    <td class="name" data-l10n>Request ID</td>
                    <td class="value">{{ request_id }}</td>
                </tr>{{ end -}}
                <tr>
-                    <td class="name">Timestamp</td>
+                    <td class="name" data-l10n>Timestamp</td>
                    <td class="value">{{ now.Unix }}</td>
                </tr>
            </table>
@ -81,6 +81,18 @@
        {{ end }}
    </div>
 </div>
+<script>
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
+</script>
 </body>
 <!--
    Error {{ code }}: {{ message }}
--- a/templates/l7-light.html
+++ b/templates/l7-light.html
@ -35,7 +35,7 @@
            <div class="code">
                {{ code }}
            </div>
-            <div class="message">
+            <div class="message" data-l10n>
                {{ message }}
            </div>
        </div>
@ -43,39 +43,39 @@
        <div class="details">
            <table>
                {{- if host }}<tr>
-                    <td class="name">Host</td>
+                    <td class="name" data-l10n>Host</td>
                    <td class="value">{{ host }}</td>
                </tr>{{ end -}}
                {{- if original_uri }}<tr>
-                    <td class="name">Original URI</td>
+                    <td class="name" data-l10n>Original URI</td>
                    <td class="value">{{ original_uri }}</td>
                </tr>{{ end -}}
                {{- if forwarded_for }}<tr>
-                    <td class="name">Forwarded for</td>
+                    <td class="name" data-l10n>Forwarded for</td>
                    <td class="value">{{ forwarded_for }}</td>
                </tr>{{ end -}}
                {{- if namespace }}<tr>
-                    <td class="name">Namespace</td>
+                    <td class="name" data-l10n>Namespace</td>
                    <td class="value">{{ namespace }}</td>
                </tr>{{ end -}}
                {{- if ingress_name }}<tr>
-                    <td class="name">Ingress name</td>
+                    <td class="name" data-l10n>Ingress name</td>
                    <td class="value">{{ ingress_name }}</td>
                </tr>{{ end -}}
                {{- if service_name }}<tr>
-                    <td class="name">Service name</td>
+                    <td class="name" data-l10n>Service name</td>
                    <td class="value">{{ service_name }}</td>
                </tr>{{ end -}}
                {{- if service_port }}<tr>
-                    <td class="name">Service port</td>
+                    <td class="name" data-l10n>Service port</td>
                    <td class="value">{{ service_port }}</td>
                </tr>{{ end -}}
                {{- if request_id }}<tr>
-                    <td class="name">Request ID</td>
+                    <td class="name" data-l10n>Request ID</td>
                    <td class="value">{{ request_id }}</td>
                </tr>{{ end -}}
                <tr>
-                    <td class="name">Timestamp</td>
+                    <td class="name" data-l10n>Timestamp</td>
                    <td class="value">{{ now.Unix }}</td>
                </tr>
            </table>
@ -83,6 +83,18 @@
        {{ end }}
    </div>
 </div>
+<script>
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
+</script>
 </body>
 <!--
    Error {{ code }}: {{ message }}
--- a/templates/lost-in-space.html
+++ b/templates/lost-in-space.html
@ -104,12 +104,12 @@
        .details li span {
            font-size: 14px;
            font-weight: bold;
-            padding-right: 7px;
        }

        .details li code {
            font-size: 14px;
            font-weight: normal;
+            padding-left: 7px;
        }
        /* {{ end }} */

@ -335,20 +335,20 @@
    </div>
    <div class="content">
        <h1>{{ code }}</h1>
-        <h2>UH OH! {{ message }}</h2>
-        <p>{{ description }}</p>
+        <h2><span data-l10n>UH OH</span>! <span data-l10n>{{ message }}</span></h2>
+        <p data-l10n>{{ description }}</p>

        {{ if show_details }}
        <ul class="details">
-            {{- if host }}<li><span>Host:</span> <code>{{ host }}</code></li>{{ end -}}
-            {{- if original_uri }}<li><span>Original URI:</span> <code>{{ original_uri }}</code></li>{{ end -}}
-            {{- if forwarded_for }}<li><span>Forwarded for:</span> <code>{{ forwarded_for }}</code></li>{{ end -}}
-            {{- if namespace }}<li><span>Namespace:</span> <code>{{ namespace }}</code></li>{{ end -}}
-            {{- if ingress_name }}<li><span>Ingress name:</span> <code>{{ ingress_name }}</code></li>{{ end -}}
-            {{- if service_name }}<li><span>Service name:</span> <code>{{ service_name }}</code></li>{{ end -}}
-            {{- if service_port }}<li><span>Service port:</span> <code>{{ service_port }}</code></li>{{ end -}}
-            {{- if request_id }}<li><span>Request ID:</span> <code>{{ request_id }}</code></li>{{ end -}}
-            <li><span>Timestamp:</span> <code>{{ now.Unix }}</code></li>
+            {{- 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>
        {{ end }}
    </div>
@ -377,6 +377,17 @@
    } else {
        console.warn('gsap library is not initialized (network error?)')
    }
+
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
 </script>

 </body>
--- a/templates/matrix.html
+++ b/templates/matrix.html
@ -0,0 +1,281 @@
+<!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(0, 0, 0, 0.12)}
+        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 = 90; // 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 l10n_enabled }}
+    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);
+    }
+    // {{ end }}
+</script>
+</body>
+<!--
+    Error {{ code }}: {{ message }}
+    Description: {{ description }}
+-->
+</html>
--- a/templates/noise.html
+++ b/templates/noise.html
@ -130,7 +130,7 @@
 <div class="container-center">
    <div>
        <h1>{{ code }}</h1>
-        <h2>{{ description }}</h2>
+        <h2 data-l10n>{{ description }}</h2>
    </div>
 </div>

@ -174,6 +174,17 @@
    window.addEventListener('beforeunload', function (/** @param BeforeUnloadEvent event */ event) {
        window.clearInterval(flickerInterval);
    });
+
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
 </script>
 </body>
 <!--
--- a/templates/readme.md
+++ b/templates/readme.md
@ -10,24 +10,26 @@ Creating templates is a very simple operation, even for those who know nothing a

 ### Error page & request data

-| Signature                           | Description                                                   | Example                                      |
-|-------------------------------------|---------------------------------------------------------------|----------------------------------------------|
-| `{{ code }}`                        | Error page code                                               | `404`                                        |
-| `{{ message }}`                     | Error code message                                            | `Not found`                                  |
-| `{{ description }}`                 | Error code description                                        | `The server can not find the requested page` |
-| `{{ original_uri }}`                | `X-Original-URI` header value                                 | `/foo1/bar2`                                 |
-| `{{ namespace }}`                   | `X-Namespace` header value                                    | `foo`                                        |
-| `{{ ingress_name }}`                | `X-Ingress-Name` header value                                 | `bar`                                        |
-| `{{ service_name }}`                | `X-Service-Name` header value                                 | `baz`                                        |
-| `{{ service_port }}`                | `X-Service-Port` header value                                 | `8080`                                       |
-| `{{ request_id }}`                  | `X-Request-ID` header value                                   | `12AB34CD56EF78`                             |
-| `{{ forwarded_for }}`               | `X-Forwarded-For` header value                                | `203.0.113.195, 70.41.3.18`                  |
-| `{{ host }}`                        | `Host` header value                                           | `example.com`                                |
-| `{{ now.Unix }}`                    | Current timestamp (e.g. in Unix format)                       | `1643621927`                                 |
-| `{{ hostname }}`                    | OS hostname                                                   | `ab12cd34ef56`                               |
-| `{{ version }}`                     | Application version                                           | `2.5.0`                                      |
-| `{{ if show_details }}...{{ end }}` | Logical operator (server started with "show details" option?) |                                              |
-| `{{ if hide_details }}...{{ end }}` | Same as above, but inverted                                   |                                              |
+| Signature                            | Description                                                   | Example                                      |
+|--------------------------------------|---------------------------------------------------------------|----------------------------------------------|
+| `{{ code }}`                         | Error page code                                               | `404`                                        |
+| `{{ message }}`                      | Error code message                                            | `Not found`                                  |
+| `{{ description }}`                  | Error code description                                        | `The server can not find the requested page` |
+| `{{ original_uri }}`                 | `X-Original-URI` header value                                 | `/foo1/bar2`                                 |
+| `{{ namespace }}`                    | `X-Namespace` header value                                    | `foo`                                        |
+| `{{ ingress_name }}`                 | `X-Ingress-Name` header value                                 | `bar`                                        |
+| `{{ service_name }}`                 | `X-Service-Name` header value                                 | `baz`                                        |
+| `{{ service_port }}`                 | `X-Service-Port` header value                                 | `8080`                                       |
+| `{{ request_id }}`                   | `X-Request-ID` header value                                   | `12AB34CD56EF78`                             |
+| `{{ forwarded_for }}`                | `X-Forwarded-For` header value                                | `203.0.113.195, 70.41.3.18`                  |
+| `{{ host }}`                         | `Host` header value                                           | `example.com`                                |
+| `{{ now.Unix }}`                     | Current timestamp (e.g. in Unix format)                       | `1643621927`                                 |
+| `{{ hostname }}`                     | OS hostname                                                   | `ab12cd34ef56`                               |
+| `{{ version }}`                      | Application version                                           | `2.5.0`                                      |
+| `{{ if show_details }}...{{ end }}`  | Logical operator (server started with "show details" option?) |                                              |
+| `{{ if hide_details }}...{{ end }}`  | Same as above, but inverted                                   |                                              |
+| `{{ if l10n_enabled }}...{{ end }}`  | Logical operator (l10n is enabled?)                           |                                              |
+| `{{ if l10n_disabled }}...{{ end }}` | Same as above, but inverted                                   |                                              |

 ### Modifiers

--- a/templates/shuffle.html
+++ b/templates/shuffle.html
@ -72,60 +72,63 @@
 <body>
 <div class="flex-center full-height">
    <div>
-        <span id="error_text">{{ code }}: {{ message }}</span>
+        <div id="error_text">
+            <span class="source">{{ code }}: <span data-l10n>{{ message }}</span></span>
+            <span class="target"></span>
+        </div>
        {{ if show_details }}
        <div class="hidden" id="details">
            <table>
                {{- if host }}
                <tr>
-                    <td class="name">Host:</td>
+                    <td class="name"><span data-l10n>Host</span>:</td>
                    <td class="value">{{ host }}</td>
                </tr>
                {{ end -}}
                {{- if original_uri }}
                <tr>
-                    <td class="name">Original URI:</td>
+                    <td class="name"><span data-l10n>Original URI</span>:</td>
                    <td class="value">{{ original_uri }}</td>
                </tr>
                {{ end -}}
                {{- if forwarded_for }}
                <tr>
-                    <td class="name">Forwarded for:</td>
+                    <td class="name"><span data-l10n>Forwarded for</span>:</td>
                    <td class="value">{{ forwarded_for }}</td>
                </tr>
                {{ end -}}
                {{- if namespace }}
                <tr>
-                    <td class="name">Namespace:</td>
+                    <td class="name"><span data-l10n>Namespace</span>:</td>
                    <td class="value">{{ namespace }}</td>
                </tr>
                {{ end -}}
                {{- if ingress_name }}
                <tr>
-                    <td class="name">Ingress name:</td>
+                    <td class="name"><span data-l10n>Ingress name</span>:</td>
                    <td class="value">{{ ingress_name }}</td>
                </tr>
                {{ end -}}
                {{- if service_name }}
                <tr>
-                    <td class="name">Service name:</td>
+                    <td class="name"><span data-l10n>Service name</span>:</td>
                    <td class="value">{{ service_name }}</td>
                </tr>
                {{ end -}}
                {{- if service_port }}
                <tr>
-                    <td class="name">Service port:</td>
+                    <td class="name"><span data-l10n>Service port</span>:</td>
                    <td class="value">{{ service_port }}</td>
                </tr>
                {{ end -}}
                {{- if request_id }}
                <tr>
-                    <td class="name">Request ID:</td>
+                    <td class="name"><span data-l10n>Request ID</span>:</td>
                    <td class="value">{{ request_id }}</td>
                </tr>
                {{ end -}}
                <tr>
-                    <td class="name">Timestamp:</td>
+                    <td class="name"><span data-l10n>Timestamp</span>:</td>
                    <td class="value">{{ now.Unix }}</td>
                </tr>
            </table>
@ -137,24 +140,74 @@
 <script>
    'use strict';

-    const $errorText = document.getElementById('error_text'),
-        text = $errorText.innerText,
-        characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split('');
-    let progress = 0;
+    /**
+     * @param {HTMLElement} $el
+     */
+    const Shuffle = function ($el) {
+        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`\|'.split(''),
+            $source = $el.querySelector('.source'), $target = $el.querySelector('.target');

-    const scrambleInterval = window.setInterval(function () {
-        let newText = text;
+        let cursor = 0, scrambleInterval = undefined, cursorDelayInterval = undefined, cursorInterval = undefined;

-        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);
+        /**
+         * @param {Number} len
+         * @return {string}
+         */
+        const getRandomizedString = function (len) {
+            let s = '';
+
+            for (let i = 0; i < len; i++) {
+                s += chars[Math.floor(Math.random() * chars.length)];
            }
-        }

-        $errorText.innerText = newText;
-    }, 450 / 60);
+            return s;
+        };
+
+        this.start = function () {
+            $source.style.display = 'none';
+            $target.style.display = 'block';
+
+            scrambleInterval = window.setInterval(() => {
+                if (cursor <= $source.innerText.length) {
+                    $target.innerText = $source.innerText.substring(0, cursor) + getRandomizedString($source.innerText.length - cursor);
+                }
+            }, 450 / 30);
+
+            cursorDelayInterval = window.setTimeout(() => {
+                cursorInterval = window.setInterval(() => {
+                    if (cursor > $source.innerText.length - 1) {
+                        this.stop();
+                    }
+
+                    cursor++;
+                }, 70);
+            }, 350);
+        };
+
+        this.stop = function () {
+            $source.style.display = 'block';
+            $target.style.display = 'none';
+            $target.innerText = '';
+            cursor = 0;
+
+            if (scrambleInterval !== undefined) {
+                window.clearInterval(scrambleInterval);
+                scrambleInterval = undefined;
+            }
+
+            if (cursorInterval !== undefined) {
+                window.clearInterval(cursorInterval);
+                cursorInterval = undefined;
+            }
+
+            if (cursorDelayInterval !== undefined) {
+                window.clearInterval(cursorDelayInterval);
+                cursorDelayInterval = undefined;
+            }
+        };
+    };
+
+    (new Shuffle(document.getElementById('error_text'))).start();

    // {{ if show_details }}
    window.setTimeout(function () {
@ -162,16 +215,16 @@
    }, 550);
    // {{ end }}

-    window.setTimeout(function () {
-        let revealInterval = window.setInterval(function () {
-            if (progress < text.length) {
-                progress++;
-            } else {
-                window.clearInterval(revealInterval);
-                window.clearInterval(scrambleInterval);
-            }
-        }, 70);
-    }, 350);
+    // {{ if l10n_enabled }}
+    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);
+    }
+    // {{ end }}
 </script>
 </body>
 <!--
Author	SHA1	Message	Date
Paramtamtam	d649e371a5	Update CHANGELOG.md	2022-06-04 17:11:20 +05:00
Matthias Schöffmann	01c2a37055	Add 🇩🇪 German translation (#115 ) * german translation * update readmes and changelog	2022-06-04 17:06:39 +05:00
dependabot[bot]	a932f94ec0	Bump docker/setup-buildx-action from 1 to 2 (#111 )	2022-06-02 05:14:32 +00:00
dependabot[bot]	3ac2c74249	Bump github.com/valyala/fasthttp from 1.36.0 to 1.37.0 (#106 )	2022-06-02 05:14:08 +00:00
dependabot[bot]	18af96bada	Bump github.com/prometheus/client_golang from 1.12.1 to 1.12.2 (#108 )	2022-06-02 05:10:46 +00:00
dependabot[bot]	445aad8b41	Bump docker/login-action from 1 to 2 (#109 )	2022-06-02 05:10:27 +00:00
dependabot[bot]	b61cc7460f	Bump github.com/fasthttp/router from 1.4.8 to 1.4.9 (#110 )	2022-06-02 05:10:14 +00:00
dependabot[bot]	c9586fe79a	Bump aquasecurity/trivy-action from 0.2.5 to 0.3.0 (#112 )	2022-06-02 05:09:47 +00:00
dependabot[bot]	405afec38a	Bump docker/setup-qemu-action from 1 to 2 (#107 )	2022-06-02 05:09:16 +00:00
dependabot[bot]	5e0be010b7	Bump docker/build-push-action from 2 to 3 (#113 )	2022-06-02 05:09:00 +00:00
Paramtamtam	9bc00fa4ca	Update release.yml	2022-05-12 17:20:02 +05:00
Paramtamtam	6742381562	Update tests.yml	2022-05-12 17:18:45 +05:00
SchoNie	6d3ced480d	Add 🇳🇱 Dutch translation (#104 ) Co-authored-by: Paramtamtam <7326800+tarampampam@users.noreply.github.com>	2022-05-07 15:09:23 +05:00
Paramtamtam	e8fa8896c9	Update CHANGELOG.md	2022-05-06 22:28:42 +05:00
fabtrompet	c9bd47618d	adding translation to Portuguese language (#103 ) Co-authored-by: Fabio Correia <fabiocorreia@trixlog.com> Co-authored-by: Paramtamtam <7326800+tarampampam@users.noreply.github.com>	2022-05-06 22:28:12 +05:00
dependabot[bot]	3ffb952cdd	Bump golang from 1.18.0-alpine to 1.18.1-alpine (#95 )	2022-05-02 06:54:34 +00:00
dependabot[bot]	b5892f44d9	Bump github.com/valyala/fasthttp from 1.34.0 to 1.36.0 (#96 )	2022-05-02 04:24:25 +00:00
dependabot[bot]	769b0cebb6	Bump github.com/fasthttp/router from 1.4.7 to 1.4.8 (#98 )	2022-05-02 04:18:32 +00:00
dependabot[bot]	8f49ff7204	Bump github/codeql-action from 1 to 2 (#99 )	2022-05-02 04:18:12 +00:00
dependabot[bot]	f89bdfbd51	Bump aquasecurity/trivy-action from 0.2.2 to 0.2.5 (#97 )	2022-05-02 04:17:53 +00:00
dependabot[bot]	1b2e899201	Bump actions/download-artifact from 2 to 3 (#100 )	2022-05-02 04:17:31 +00:00
dependabot[bot]	6c0c85544e	Bump actions/upload-artifact from 2 to 3 (#101 )	2022-05-02 04:17:11 +00:00
dependabot[bot]	d3d1c62411	Bump codecov/codecov-action from 2 to 3 (#102 )	2022-05-02 04:16:54 +00:00
Paramtamtam	8019d07cab	Update CHANGELOG.md	2022-04-12 15:35:19 +05:00
Paramtamtam	d21a6f2797	Added possibility to disable error pages auto-localization (#94 )	2022-04-12 15:34:35 +05:00
Paramtamtam	a3389aaafa	Changing UID/GID to the numeric values (#93 )	2022-04-09 20:39:52 +05:00
dependabot[bot]	c6a7e30609	Bump github.com/fasthttp/router from 1.4.6 to 1.4.7 (#90 )	2022-04-01 22:07:18 +00:00
Paramtamtam	01abc48a01	CI updated	2022-04-01 13:14:16 +05:00
Paramtamtam	d6374d7edf	Bump actions/setup-go from 2 to 3	2022-04-01 13:01:22 +05:00
dependabot[bot]	7ebfac9dc2	Bump actions/cache from 2 to 3.0.1 (#89 )	2022-04-01 07:51:10 +00:00
dependabot[bot]	64d4798156	Bump peter-evans/dockerhub-description from 2 to 3 (#88 )	2022-04-01 07:48:54 +00:00
Paramtamtam	4adad3df10	CI updated (#87 )	2022-03-30 21:23:42 +05:00
Jérémy VINCENT	30a7b2793f	Fix translation FR (#86 )	2022-03-30 18:00:32 +05:00
Paramtamtam	2d9deb7370	CI now purges the CDN cache (#84 )	2022-03-28 22:13:19 +05:00
Paramtamtam	873944f90f	Changelog updated	2022-03-28 16:05:44 +05:00
Paramtamtam	cd5abe458b	l10n file formatted, CI updated (#83 )	2022-03-28 16:04:23 +05:00
Jérémy VINCENT	481e11d527	Error pages now translated in 🇫🇷 (#82 )	2022-03-28 15:11:44 +05:00
Paramtamtam	fac7394ae2	Update CHANGELOG.md	2022-03-27 20:38:04 +05:00
Paramtamtam	4a918b1899	Template `matrix` (#81 )	2022-03-27 20:33:31 +05:00
Paramtamtam	05be3841d7	Update .gitattributes	2022-03-25 14:51:50 +05:00
Paramtamtam	02cadcd907	Create .gitattributes	2022-03-25 14:46:59 +05:00
Paramtamtam	94dff2421c	Changelog updated	2022-03-24 13:54:50 +05:00
Paramtamtam	51f8824659	shuffle template fixed	2022-03-24 13:54:07 +05:00
Paramtamtam	e82c02c768	fix the translation mistakes	2022-03-24 12:28:03 +05:00
Paramtamtam	dc51e3192c	Update CHANGELOG.md	2022-03-24 00:32:40 +05:00
Paramtamtam	45ca69432b	Translated in 🇺🇦 and 🇷🇺 languages (#80 )	2022-03-24 00:31:34 +05:00
Paramtamtam	f5f572a4d3	small template fixes	2022-03-23 12:30:33 +05:00
Paramtamtam	2d418ecffa	Changelog updated	2022-03-22 23:46:01 +05:00
Paramtamtam	c6b3342361	Readme file updated	2022-03-22 23:44:31 +05:00
Paramtamtam	3614f0503f	New template `connection` added (#79 )	2022-03-22 23:31:33 +05:00
Paramtamtam	a2ee92acc4	v2.8.1	2022-03-21 13:23:21 +05:00
Paramtamtam	93dddd75d9	Update README.md	2022-03-20 23:31:45 +05:00