├── .github
    └── workflows
    │   └── build.yml
├── .gitmodules
├── LICENSE
├── README.md
├── dark.gif
├── light.gif
└── main.html


/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Build Error Pages
 2 | 
 3 | on:
 4 |     push:
 5 |         branches:
 6 |             - main
 7 |     pull_request:
 8 |         branches:
 9 |             - main
10 | 
11 | jobs:
12 |     build:
13 |         runs-on: ubuntu-latest
14 | 
15 |         steps:
16 |             - name: Checkout repository
17 |               uses: actions/checkout@v3
18 |               with:
19 |                   submodules: true
20 | 
21 |             - name: Set up Go environment
22 |               uses: actions/setup-go@v3
23 |               with:
24 |                   go-version: "1.23" # You can change this to the version you need
25 | 
26 |             - name: Copy main.html to templates directory
27 |               run: |
28 |                   rm -rf ./error-pages/templates/*.html
29 |                   cp main.html ./error-pages/templates/main.html
30 | 
31 |             - name: Run go command to build error pages
32 |               run: |
33 |                 cd error-pages  
34 |                 go run ./cmd/error-pages build --add-template=templates/main.html --index
35 | 
36 |             - name: Archive
37 |               run: |
38 |                 mkdir ./out    
39 |                 zip -r ./out/error-page.zip ./error-pages/main 
40 | 
41 |             - name: upload artifact
42 |               uses: actions/upload-artifact@v4
43 |               with:
44 |                   name: error-pages-static
45 |                   path: ./out
46 |                   if-no-files-found: error
47 |                   retention-days: 7
48 | 
49 |             - name: Ready to deploy
50 |               run: |
51 |                   mkdir ./gh-pages
52 |                   mkdir ./gh-pages/main
53 |                   cp -r ./error-pages/main/* ./gh-pages/main/
54 |                   cp ./error-pages/index.html ./gh-pages/index.html
55 |             - uses: peaceiris/actions-gh-pages@v4
56 |               with:
57 |                   github_token: ${{ secrets.GITHUB_TOKEN }}
58 |                   publish_dir: ./gh-pages
59 | 


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "error-pages"]
2 | 	path = error-pages
3 | 	url = https://github.com/tarampampam/error-pages
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 ✨Shevon・Kuan✨
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # nginx-error-page
  2 | 
  3 | Yet another error-page for nginx. Clone this repo and use https://github.com/tarampampam/error-pages to generate your own error pages.
  4 | 
  5 | This theme is modified from tarampampam/error-pages/templates/connections. Thanks to the author for the inspiration.
  6 | 
  7 | ## Final result
  8 | 
  9 | Demo [here](https://shevonkuan.github.io/nginx-error-page/)
 10 | 
 11 | ![alt text](light.gif)
 12 | ![alt text](dark.gif)
 13 | 
 14 | ## Known issues
 15 | 
 16 | -   Due to significant differences in the implementation of the `mix-blend-mode: hardlight` CSS property between Safari and Chrome, large color blocks appear instead of gradients in Safari.
 17 | -   It consumes a lot of GPU computing resources, and I don't know what to do. Seeking guidance from experts.
 18 | -   For ease of integration with nginx to record actual request information, nginx is used to string replacement (see the instructions in the usage section).
 19 | 
 20 | ## Features
 21 | 
 22 | -   [x] Support multiple languages
 23 | -   [x] Support multiple platforms
 24 | -   [x] Support dark mode
 25 | -   [x] Support showing nginx request information
 26 | -   [x] Rich interactive effects
 27 | -   [x] Highly customizable
 28 | -   [x] No additional assets required
 29 | -   [x] Lightweight and fast
 30 | 
 31 | ## Usage
 32 | 
 33 | ### Use as an template for [tarampampam/error-pages](https://github.com/tarampampam/error-pages)
 34 | 
 35 | 1. Download `main.html`
 36 | 2. Clone [tarampampam/error-pages](https://github.com/tarampampam/error-pages)
 37 | 3. Add `main.html` to `./error-pages/templates/` directory.
 38 | 4. Follow the instructions in the [tarampampam/error-pages](https://github.com/tarampampam/error-pages)
 39 | 
 40 | ### Use static files for nginx
 41 | 
 42 | 1. Fork this repo.
 43 | 2. Inintialize the submodules.
 44 |     ```bash
 45 |     git submodule update --init --recursive
 46 |     ```
 47 | 3. Edit the `index.html` file in the `src` directory to customize your error page.(optional)
 48 | 4. Use github Actions to generate static files.
 49 | 5. Download the generated static files from the `gh-pages` branch or the artifact of the Actions.
 50 | 6. Copy the static files to the directory eg. `/var/www/error-pages/`.
 51 | 7. Locate to the NGINX config directory, usually `/etc/nginx/` or `/usr/local/nginx/conf/`.
 52 | 8. Add a config file `error_pages.conf` in any directory, eg. `/etc/nginx/func.d/error_pages.conf`.(Ensure your nginx was built with `ngx_http_sub_module` in order to replace the strings listed below. If you use RHEL (including fedora, centos, etc.), you can enable the copr repository `dnf copr enable @shevon/nginx` to get the latest nginx version with the `ngx_http_sub_module` module.)
 53 | 
 54 |     ```nginx
 55 |     # error_pages.conf
 56 |     error_page 400 401 403 404 405 407 408 409 410 411 412 413 416 418 429 500 502 503 504 505 @error_page;
 57 | 
 58 |     location @error_page {
 59 |         root /var/www/error-pages/;
 60 |         set $error_file /$status.html;
 61 |         rewrite ^ $error_file break;
 62 |         sub_filter '%time_local%' '$time_local';
 63 |         sub_filter '%request%' '$request';
 64 |         sub_filter '%request_id%' '$request_id';
 65 |         sub_filter '%remote_addr%' '$remote_addr';
 66 |         sub_filter '%host%' '$host';
 67 |         sub_filter '%http_referer%' '$http_referer';
 68 |         sub_filter '%request_time%' '$request_time';
 69 |         sub_filter '%upstream_response_time%' '$upstream_response_time';
 70 |         sub_filter '%http_user_agent%' '$http_user_agent';
 71 |         sub_filter '%server%' 'nginx/$nginx_version';
 72 |     }
 73 |     ```
 74 | 
 75 | 9. Include the config file in the `server block to replace its error pages`
 76 | 
 77 |     ```nginx
 78 |     # nginx.conf
 79 |     # For more information on configuration, see:
 80 |     #   * Official English Documentation: http://nginx.org/en/docs/
 81 |     #   * Official Russian Documentation: http://nginx.org/ru/docs/
 82 | 
 83 |     user root;
 84 |     worker_processes auto;
 85 |     error_log /var/log/nginx/error.log;
 86 |     pid /run/nginx.pid;
 87 | 
 88 |     # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
 89 |     include /usr/share/nginx/modules/*.conf;
 90 | 
 91 |     events {
 92 |         worker_connections 1024;
 93 |     }
 94 | 
 95 |     http {
 96 |         sendfile on;
 97 |         tcp_nopush on;
 98 |         tcp_nodelay on;
 99 |         keepalive_timeout 65;
100 |         types_hash_max_size 4096;
101 | 
102 |         include /etc/nginx/mime.types;
103 |         include brotli_params;
104 |         default_type application/octet-stream;
105 | 
106 |         include /etc/nginx/conf.d/*.conf;
107 |         server {
108 |             listen 443 ssl;
109 |             http2 on;
110 |             server_name shevon.is-a.dev;
111 |             root /var/www/shevon/public;
112 |             include ssl/shevon.is-a.dev;
113 |             include /etc/nginx/func.d/error_pages.conf; # add this line
114 |             location / {
115 |                 root /var/www/shevon/public;
116 |             }
117 |         }
118 |     }
119 |     ```
120 | 


--------------------------------------------------------------------------------
/dark.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShevonKuan/nginx-error-page/6d0e46622de823299f087cae36c884d9d67c543f/dark.gif


--------------------------------------------------------------------------------
/light.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShevonKuan/nginx-error-page/6d0e46622de823299f087cae36c884d9d67c543f/light.gif


--------------------------------------------------------------------------------
/main.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | 
   4 | <head>
   5 |     <meta charset="utf-8">
   6 |     <meta name="robots" content="nofollow,noarchive,noindex">
   7 |     <title>{{ code }} | {{ message }}</title>
   8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   9 |     <!-- {{ if or (eq code 408) (eq code 425) (eq code 429) (eq code 500) (eq code 502) (eq code 503) (eq code 504) }} -->
  10 |     <!-- <meta http-equiv="refresh" content="30"> -->
  11 |     <!-- {{ end }} -->
  12 |     <meta name="title" content="{{ code }}: {{ message | escape }}">
  13 |     <meta name="description" content="{{ description | escape }}">
  14 |     <meta property="og:title" content="{{ code }}: {{ message | escape }}">
  15 |     <meta property="og:description" content="{{ description | escape }}">
  16 |     <meta property="twitter:title" content="{{ code }}: {{ message | escape }}">
  17 |     <meta property="twitter:description" content="{{ description | escape }}">
  18 |     <script>
  19 |         /**
  20 |          * Atropos 2.0.2
  21 |          * Touch-friendly 3D parallax hover effects
  22 |          * https://atroposjs.com
  23 |          *
  24 |          * Copyright 2021-2023 
  25 |          *
  26 |          * Released under the MIT License
  27 |          *
  28 |          * Released on: July 4, 2023
  29 |          */
  30 | 
  31 |         var Atropos = function () {
  32 |             "use strict";
  33 |             function t() {
  34 |                 return t = Object.assign ? Object.assign.bind() : function (t) {
  35 |                     for (var e = 1; e < arguments.length; e++) {
  36 |                         var o = arguments[e];
  37 |                         for (var a in o)
  38 |                             Object.prototype.hasOwnProperty.call(o, a) && (t[a] = o[a])
  39 |                     }
  40 |                     return t
  41 |                 }
  42 |                     ,
  43 |                     t.apply(this, arguments)
  44 |             }
  45 |             var e = function (t, e) {
  46 |                 return t.querySelector(e)
  47 |             }
  48 |                 , o = function (t) {
  49 |                     void 0 === t && (t = {});
  50 |                     var e = {};
  51 |                     return Object.keys(t).forEach((function (o) {
  52 |                         void 0 !== t[o] && (e[o] = t[o])
  53 |                     }
  54 |                     )),
  55 |                         e
  56 |                 }
  57 |                 , a = {
  58 |                     alwaysActive: !1,
  59 |                     activeOffset: 50,
  60 |                     shadowOffset: 50,
  61 |                     shadowScale: 1,
  62 |                     duration: 300,
  63 |                     rotate: !0,
  64 |                     rotateTouch: !0,
  65 |                     rotateXMax: 15,
  66 |                     rotateYMax: 15,
  67 |                     rotateXInvert: !1,
  68 |                     rotateYInvert: !1,
  69 |                     stretchX: 0,
  70 |                     stretchY: 0,
  71 |                     stretchZ: 0,
  72 |                     commonOrigin: !0,
  73 |                     shadow: !0,
  74 |                     highlight: !0
  75 |                 };
  76 |             return function (n) {
  77 |                 void 0 === n && (n = {});
  78 |                 var r, i, s, c, p, u, l, d, f, v, h, m, y = n, g = y.el, M = y.eventsEl, x = n.isComponent, O = {
  79 |                     __atropos__: !0,
  80 |                     params: t({}, a, {
  81 |                         onEnter: null,
  82 |                         onLeave: null,
  83 |                         onRotate: null
  84 |                     }, o(n || {})),
  85 |                     destroyed: !1,
  86 |                     isActive: !1
  87 |                 }, w = O.params, b = [];
  88 |                 !function t() {
  89 |                     m = requestAnimationFrame((function () {
  90 |                         b.forEach((function (t) {
  91 |                             if ("function" == typeof t)
  92 |                                 t();
  93 |                             else {
  94 |                                 var e = t.element
  95 |                                     , o = t.prop
  96 |                                     , a = t.value;
  97 |                                 e.style[o] = a
  98 |                             }
  99 |                         }
 100 |                         )),
 101 |                             b.splice(0, b.length),
 102 |                             t()
 103 |                     }
 104 |                     ))
 105 |                 }();
 106 |                 var X, Y = function (t, e) {
 107 |                     b.push({
 108 |                         element: t,
 109 |                         prop: "transitionDuration",
 110 |                         value: e
 111 |                     })
 112 |                 }, _ = function (t, e) {
 113 |                     b.push({
 114 |                         element: t,
 115 |                         prop: "transitionTimingFunction",
 116 |                         value: e
 117 |                     })
 118 |                 }, L = function (t, e) {
 119 |                     b.push({
 120 |                         element: t,
 121 |                         prop: "transform",
 122 |                         value: e
 123 |                     })
 124 |                 }, T = function (t, e) {
 125 |                     b.push({
 126 |                         element: t,
 127 |                         prop: "opacity",
 128 |                         value: e
 129 |                     })
 130 |                 }, A = function (t, e, o, a) {
 131 |                     return t.addEventListener(e, o, a)
 132 |                 }, E = function (t, e, o, a) {
 133 |                     return t.removeEventListener(e, o, a)
 134 |                 }, R = function (t) {
 135 |                     var e = t.rotateXPercentage
 136 |                         , o = void 0 === e ? 0 : e
 137 |                         , a = t.rotateYPercentage
 138 |                         , n = void 0 === a ? 0 : a
 139 |                         , i = t.duration
 140 |                         , s = t.opacityOnly
 141 |                         , c = t.easeOut;
 142 |                     (function (t, e) {
 143 |                         return t.querySelectorAll(e)
 144 |                     }
 145 |                     )(r, "[data-atropos-offset], [data-atropos-opacity]").forEach((function (t) {
 146 |                         Y(t, i),
 147 |                             _(t, c ? "ease-out" : "");
 148 |                         var e = function (t) {
 149 |                             if (t.dataset.atroposOpacity && "string" == typeof t.dataset.atroposOpacity)
 150 |                                 return t.dataset.atroposOpacity.split(";").map((function (t) {
 151 |                                     return parseFloat(t)
 152 |                                 }
 153 |                                 ))
 154 |                         }(t);
 155 |                         if (0 === o && 0 === n)
 156 |                             s || L(t, "translate3d(0, 0, 0)"),
 157 |                                 e && T(t, e[0]);
 158 |                         else {
 159 |                             var a = parseFloat(t.dataset.atroposOffset) / 100;
 160 |                             if (Number.isNaN(a) || s || L(t, "translate3d(" + -n * -a + "%, " + o * -a + "%, 0)"),
 161 |                                 e) {
 162 |                                 var r = e[0]
 163 |                                     , p = e[1]
 164 |                                     , u = Math.max(Math.abs(o), Math.abs(n));
 165 |                                 T(t, r + (p - r) * u / 100)
 166 |                             }
 167 |                         }
 168 |                     }
 169 |                     ))
 170 |                 }, I = function (t, e) {
 171 |                     var o = g !== M;
 172 |                     if (p || (p = g.getBoundingClientRect()),
 173 |                         o && !u && (u = M.getBoundingClientRect()),
 174 |                         void 0 === t && void 0 === e) {
 175 |                         var a = o ? u : p;
 176 |                         t = a.left + a.width / 2,
 177 |                             e = a.top + a.height / 2
 178 |                     }
 179 |                     var n, r = 0, s = 0, c = p, l = c.top, f = c.left, v = c.width, h = c.height;
 180 |                     if (o) {
 181 |                         var m = u
 182 |                             , y = m.top
 183 |                             , x = m.left
 184 |                             , O = m.width
 185 |                             , X = m.height
 186 |                             , A = v / 2 + (f - x)
 187 |                             , E = h / 2 + (l - y)
 188 |                             , I = t - x
 189 |                             , P = e - y;
 190 |                         s = w.rotateYMax * (I - A) / (O - v / 2) * -1,
 191 |                             r = w.rotateXMax * (P - E) / (X - h / 2),
 192 |                             n = t - f + "px " + (e - l) + "px"
 193 |                     } else {
 194 |                         var j = v / 2
 195 |                             , C = h / 2
 196 |                             , D = t - f
 197 |                             , F = e - l;
 198 |                         s = w.rotateYMax * (D - j) / (v / 2) * -1,
 199 |                             r = w.rotateXMax * (F - C) / (h / 2)
 200 |                     }
 201 |                     r = Math.min(Math.max(-r, -w.rotateXMax), w.rotateXMax),
 202 |                         w.rotateXInvert && (r = -r),
 203 |                         s = Math.min(Math.max(-s, -w.rotateYMax), w.rotateYMax),
 204 |                         w.rotateYInvert && (s = -s);
 205 |                     var N, S, k = r / w.rotateXMax * 100, q = s / w.rotateYMax * 100, B = (o ? q / 100 * w.stretchX : 0) * (w.rotateYInvert ? -1 : 1), Z = (o ? k / 100 * w.stretchY : 0) * (w.rotateXInvert ? -1 : 1), z = o ? Math.max(Math.abs(k), Math.abs(q)) / 100 * w.stretchZ : 0;
 206 |                     L(i, "translate3d(" + B + "%, " + -Z + "%, " + -z + "px) rotateX(" + r + "deg) rotateY(" + s + "deg)"),
 207 |                         n && w.commonOrigin && (N = i,
 208 |                             S = n,
 209 |                             b.push({
 210 |                                 element: N,
 211 |                                 prop: "transformOrigin",
 212 |                                 value: S
 213 |                             })),
 214 |                         d && (Y(d, w.duration + "ms"),
 215 |                             _(d, "ease-out"),
 216 |                             L(d, "translate3d(" + .25 * -q + "%, " + .25 * k + "%, 0)"),
 217 |                             T(d, Math.max(Math.abs(k), Math.abs(q)) / 100)),
 218 |                         R({
 219 |                             rotateXPercentage: k,
 220 |                             rotateYPercentage: q,
 221 |                             duration: w.duration + "ms",
 222 |                             easeOut: !0
 223 |                         }),
 224 |                         "function" == typeof w.onRotate && w.onRotate(r, s)
 225 |                 }, P = function () {
 226 |                     b.push((function () {
 227 |                         return g.classList.add("atropos-active")
 228 |                     }
 229 |                     )),
 230 |                         Y(i, w.duration + "ms"),
 231 |                         _(i, "ease-out"),
 232 |                         L(s, "translate3d(0,0, " + w.activeOffset + "px)"),
 233 |                         Y(s, w.duration + "ms"),
 234 |                         _(s, "ease-out"),
 235 |                         l && (Y(l, w.duration + "ms"),
 236 |                             _(l, "ease-out")),
 237 |                         O.isActive = !0
 238 |                 }, j = function (t) {
 239 |                     if (f = void 0,
 240 |                         !("pointerdown" === t.type && "mouse" === t.pointerType || "pointerenter" === t.type && "mouse" !== t.pointerType)) {
 241 |                         if ("pointerdown" === t.type && t.preventDefault(),
 242 |                             v = t.clientX,
 243 |                             h = t.clientY,
 244 |                             w.alwaysActive)
 245 |                             return p = void 0,
 246 |                                 void (u = void 0);
 247 |                         P(),
 248 |                             "function" == typeof w.onEnter && w.onEnter()
 249 |                     }
 250 |                 }, C = function (t) {
 251 |                     !1 === f && t.cancelable && t.preventDefault()
 252 |                 }, D = function (t) {
 253 |                     if (w.rotate && O.isActive) {
 254 |                         if ("mouse" !== t.pointerType) {
 255 |                             if (!w.rotateTouch)
 256 |                                 return;
 257 |                             t.preventDefault()
 258 |                         }
 259 |                         var e = t.clientX
 260 |                             , o = t.clientY
 261 |                             , a = e - v
 262 |                             , n = o - h;
 263 |                         if ("string" == typeof w.rotateTouch && (0 !== a || 0 !== n) && void 0 === f) {
 264 |                             if (a * a + n * n >= 25) {
 265 |                                 var r = 180 * Math.atan2(Math.abs(n), Math.abs(a)) / Math.PI;
 266 |                                 f = "scroll-y" === w.rotateTouch ? r > 45 : 90 - r > 45
 267 |                             }
 268 |                             !1 === f && (g.classList.add("atropos-rotate-touch"),
 269 |                                 t.cancelable && t.preventDefault())
 270 |                         }
 271 |                         "mouse" !== t.pointerType && f || I(e, o)
 272 |                     }
 273 |                 }, F = function (t) {
 274 |                     if (p = void 0,
 275 |                         u = void 0,
 276 |                         O.isActive && !(t && "pointerup" === t.type && "mouse" === t.pointerType || t && "pointerleave" === t.type && "mouse" !== t.pointerType)) {
 277 |                         if ("string" == typeof w.rotateTouch && f && g.classList.remove("atropos-rotate-touch"),
 278 |                             w.alwaysActive)
 279 |                             return I(),
 280 |                                 "function" == typeof w.onRotate && w.onRotate(0, 0),
 281 |                                 void ("function" == typeof w.onLeave && w.onLeave());
 282 |                         b.push((function () {
 283 |                             return g.classList.remove("atropos-active")
 284 |                         }
 285 |                         )),
 286 |                             Y(s, w.duration + "ms"),
 287 |                             _(s, ""),
 288 |                             L(s, "translate3d(0,0, 0px)"),
 289 |                             l && (Y(l, w.duration + "ms"),
 290 |                                 _(l, "")),
 291 |                             d && (Y(d, w.duration + "ms"),
 292 |                                 _(d, ""),
 293 |                                 L(d, "translate3d(0, 0, 0)"),
 294 |                                 T(d, 0)),
 295 |                             Y(i, w.duration + "ms"),
 296 |                             _(i, ""),
 297 |                             L(i, "translate3d(0,0,0) rotateX(0deg) rotateY(0deg)"),
 298 |                             R({
 299 |                                 duration: w.duration + "ms"
 300 |                             }),
 301 |                             O.isActive = !1,
 302 |                             "function" == typeof w.onRotate && w.onRotate(0, 0),
 303 |                             "function" == typeof w.onLeave && w.onLeave()
 304 |                     }
 305 |                 }, N = function (t) {
 306 |                     var e = t.target;
 307 |                     !M.contains(e) && e !== M && O.isActive && F()
 308 |                 };
 309 |                 return O.destroy = function () {
 310 |                     O.destroyed = !0,
 311 |                         cancelAnimationFrame(m),
 312 |                         E(document, "click", N),
 313 |                         E(M, "pointerdown", j),
 314 |                         E(M, "pointerenter", j),
 315 |                         E(M, "pointermove", D),
 316 |                         E(M, "touchmove", C),
 317 |                         E(M, "pointerleave", F),
 318 |                         E(M, "pointerup", F),
 319 |                         E(M, "lostpointercapture", F),
 320 |                         delete g.__atropos__
 321 |                 }
 322 |                     ,
 323 |                     "string" == typeof g && (g = e(document, g)),
 324 |                     g && (g.__atropos__ || (void 0 !== M ? "string" == typeof M && (M = e(document, M)) : M = g,
 325 |                         r = x ? g.parentNode.host : g,
 326 |                         Object.assign(O, {
 327 |                             el: g
 328 |                         }),
 329 |                         i = e(g, ".atropos-rotate"),
 330 |                         s = e(g, ".atropos-scale"),
 331 |                         c = e(g, ".atropos-inner"),
 332 |                         g.__atropos__ = O)),
 333 |                     g && M && (w.shadow && ((l = e(g, ".atropos-shadow")) || ((l = document.createElement("span")).classList.add("atropos-shadow"),
 334 |                         X = !0),
 335 |                         L(l, "translate3d(0,0,-" + w.shadowOffset + "px) scale(" + w.shadowScale + ")"),
 336 |                         X && i.appendChild(l)),
 337 |                         w.highlight && function () {
 338 |                             var t;
 339 |                             (d = e(g, ".atropos-highlight")) || ((d = document.createElement("span")).classList.add("atropos-highlight"),
 340 |                                 t = !0),
 341 |                                 L(d, "translate3d(0,0,0)"),
 342 |                                 t && c.appendChild(d)
 343 |                         }(),
 344 |                         w.rotateTouch && ("string" == typeof w.rotateTouch ? g.classList.add("atropos-rotate-touch-" + w.rotateTouch) : g.classList.add("atropos-rotate-touch")),
 345 |                         e(r, "[data-atropos-opacity]") && R({
 346 |                             opacityOnly: !0
 347 |                         }),
 348 |                         A(document, "click", N),
 349 |                         A(M, "pointerdown", j),
 350 |                         A(M, "pointerenter", j),
 351 |                         A(M, "pointermove", D),
 352 |                         A(M, "touchmove", C),
 353 |                         A(M, "pointerleave", F),
 354 |                         A(M, "pointerup", F),
 355 |                         A(M, "lostpointercapture", F),
 356 |                         w.alwaysActive && (P(),
 357 |                             I())),
 358 |                     O
 359 |             }
 360 |         }();
 361 |         //# sourceMappingURL=atropos.min.js.map
 362 | 
 363 |     </script>
 364 |     <style>
 365 |         /**
 366 |  * Atropos 2.0.2
 367 |  * Touch-friendly 3D parallax hover effects
 368 |  * https://atroposjs.com
 369 |  *
 370 |  * Copyright 2021-2023 
 371 |  *
 372 |  * Released under the MIT License
 373 |  *
 374 |  * Released on: July 4, 2023
 375 |  */
 376 |         .atropos {
 377 |             position: relative;
 378 |             display: block;
 379 |             perspective: 1200px;
 380 |             transform: translate3d(0, 0, 0)
 381 |         }
 382 | 
 383 |         .atropos-rotate-scroll-x,
 384 |         .atropos-rotate-scroll-y,
 385 |         .atropos-rotate-touch {
 386 |             -webkit-tap-highlight-color: transparent;
 387 |             -webkit-touch-callout: none;
 388 |             -webkit-user-select: none;
 389 |             -moz-user-select: none;
 390 |             user-select: none
 391 |         }
 392 | 
 393 |         .atropos-rotate-touch-scroll-y {
 394 |             touch-action: pan-y
 395 |         }
 396 | 
 397 |         .atropos-rotate-touch-scroll-x {
 398 |             touch-action: pan-x
 399 |         }
 400 | 
 401 |         .atropos-rotate-touch {
 402 |             touch-action: none
 403 |         }
 404 | 
 405 |         .atropos-rotate,
 406 |         .atropos-scale {
 407 |             width: 100%;
 408 |             height: 100%;
 409 |             transform-style: preserve-3d;
 410 |             transition-property: transform;
 411 |             display: block
 412 |         }
 413 | 
 414 |         .atropos-highlight,
 415 |         .atropos-shadow {
 416 |             position: absolute;
 417 |             pointer-events: none;
 418 |             transition-property: transform, opacity;
 419 |             display: block;
 420 |             opacity: 0
 421 |         }
 422 | 
 423 |         .atropos-shadow {
 424 |             z-index: -1;
 425 |             background: #000000;
 426 |             left: 0;
 427 |             top: 0;
 428 |             width: 100%;
 429 |             height: 100%;
 430 |             filter: blur(30px)
 431 |         }
 432 | 
 433 |         .atropos-highlight {
 434 |             left: -50%;
 435 |             top: -50%;
 436 |             width: 200%;
 437 |             height: 200%;
 438 |             background-image: radial-gradient(circle at 50%, rgba(255, 255, 255, .25), transparent 50%);
 439 |             z-index: 0
 440 |         }
 441 | 
 442 |         .atropos-rotate {
 443 |             position: relative
 444 |         }
 445 | 
 446 |         .atropos-inner {
 447 |             width: 100%;
 448 |             height: 100%;
 449 |             position: relative;
 450 |             transform-style: preserve-3d;
 451 |             transform: translate3d(0, 0, 0);
 452 |             display: block
 453 |         }
 454 | 
 455 |         .atropos-active {
 456 |             z-index: 1
 457 |         }
 458 | 
 459 |         .atropos-active .atropos-shadow {
 460 |             opacity: 1 !important
 461 |         }
 462 | 
 463 |         ::slotted([data-atropos-offset]),
 464 |         [data-atropos-offset] {
 465 |             transition-property: transform
 466 |         }
 467 | 
 468 |         [data-atropos-opacity] {
 469 |             transition-property: opacity
 470 |         }
 471 | 
 472 |         ::slotted([data-atropos-offset][data-atropos-opacity]),
 473 |         [data-atropos-offset][data-atropos-opacity] {
 474 |             transition-property: transform, opacity
 475 |         }
 476 |     </style>
 477 |     <style>
 478 |         /**
 479 |          * error page style ShevonKwan
 480 |          */
 481 |         :root {
 482 |             --color-bg-primary: rgba(255, 255, 255, 0.6);
 483 |             --color-text-primary: #000;
 484 |             --color-text-secondary: #575958;
 485 |             --ui-card-color-bg: rgba(242, 242, 242, 0.6);
 486 |             --color-text-ok: #137333;
 487 |             --color-bg-ok: rgba(190, 255, 208, 0.6);
 488 |             --color-text-error: #c5221f;
 489 |             --color-bg-error: rgba(255, 200, 195, 0.6);
 490 |             --color-text-warning: #b05a00;
 491 |             --color-bg-warning: rgba(255, 239, 185, 0.6);
 492 |             --icon-size: 48px;
 493 |             --light: #ff9ff4;
 494 | 
 495 |             --color-bg1: #ffe3e6;
 496 |             --color-bg2: #d1feff;
 497 |             --color1: 205, 180, 219;
 498 |             --color2: 255, 200, 221;
 499 |             --color3: 255, 175, 204;
 500 |             --color4: 189, 224, 254;
 501 |             --color5: 162, 210, 255;
 502 |             --color-interactive: 140, 100, 255;
 503 |             --circle-size: 90%;
 504 |             --blending: hard-light;
 505 | 
 506 |         }
 507 | 
 508 |         @media (prefers-color-scheme: dark) {
 509 |             :root {
 510 |                 --color-bg-primary: rgba(17, 17, 17, 0.6);
 511 |                 --color-text-primary: rgba(255, 255, 255, 0.86);
 512 |                 --color-text-secondary: rgba(255, 255, 255, 0.4);
 513 |                 --ui-card-color-bg: rgba(40, 40, 40, 0.6);
 514 |                 --color-bg-ok: rgba(7, 34, 15, 0.3);
 515 |                 --color-bg-error: rgba(39, 5, 1, 0.3);
 516 |                 --color-bg-warning: rgba(57, 38, 5, 0.3);
 517 |                 --light: #0fe;
 518 |                 --color-bg1: #080a0f;
 519 |                 --color-bg2: #001120;
 520 |                 --color1: 18, 113, 255;
 521 |                 --color2: 107, 74, 255;
 522 |                 --color3: 100, 100, 255;
 523 |                 --color4: 50, 160, 220;
 524 |                 --color5: 80, 47, 122;
 525 |                 --color-interactive: 140, 100, 255;
 526 |                 --circle-size: 90%;
 527 |                 --blending: hard-light;
 528 |             }
 529 |         }
 530 | 
 531 |         @keyframes moveInCircle {
 532 |             0% {
 533 |                 transform: rotate(0deg);
 534 |             }
 535 | 
 536 |             50% {
 537 |                 transform: rotate(180deg);
 538 |             }
 539 | 
 540 |             100% {
 541 |                 transform: rotate(360deg);
 542 |             }
 543 |         }
 544 | 
 545 |         @keyframes moveVertical {
 546 |             0% {
 547 |                 transform: translateY(-80%);
 548 |             }
 549 | 
 550 |             50% {
 551 |                 transform: translateY(80%);
 552 |             }
 553 | 
 554 |             100% {
 555 |                 transform: translateY(-80%);
 556 |             }
 557 |         }
 558 | 
 559 |         @keyframes moveHorizontal {
 560 |             0% {
 561 |                 transform: translateX(-80%) translateY(-20%);
 562 |             }
 563 | 
 564 |             50% {
 565 |                 transform: translateX(80%) translateY(20%);
 566 |             }
 567 | 
 568 |             100% {
 569 |                 transform: translateX(-80%) translateY(-20%);
 570 |             }
 571 |         }
 572 | /* backgroup */
 573 |         .gradient-bg {
 574 |             width: 100vw;
 575 |             height: 100vh;
 576 |             position: fixed;
 577 |             overflow: hidden;
 578 |             background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
 579 |             top: 0;
 580 |             left: 0;
 581 |             z-index: -1;
 582 |         }
 583 | 
 584 |         .gradient-bg .svgBlur {
 585 |             display: none;
 586 |         }
 587 | 
 588 |         .gradient-bg .noiseBg {
 589 |             position: absolute;
 590 |             width: 100%;
 591 |             height: 100%;
 592 |             top: 0;
 593 |             left: 0;
 594 |             z-index: 1;
 595 |             mix-blend-mode: soft-light;
 596 |             opacity: 0.3;
 597 |         }
 598 | 
 599 |         .gradient-bg .gradients-container {
 600 |             filter: url(#goo) blur(40px);
 601 |             width: 100%;
 602 |             height: 100%;
 603 |         }
 604 | 
 605 |         .gradient-bg .g1 {
 606 |             position: absolute;
 607 |             background: radial-gradient(circle at center,
 608 |                     rgba(var(--color1), 0.8) 0,
 609 |                     rgba(var(--color1), 0) 50%) no-repeat;
 610 |             mix-blend-mode: var(--blending);
 611 |             width: var(--circle-size);
 612 |             height: var(--circle-size);
 613 |             top: calc(50% - var(--circle-size) / 2);
 614 |             left: calc(50% - var(--circle-size) / 2);
 615 |             transform-origin: center center;
 616 |             animation: moveVertical 20s ease infinite;
 617 |             opacity: 1;
 618 |         }
 619 | 
 620 |         .gradient-bg .g2 {
 621 |             position: absolute;
 622 |             background: radial-gradient(circle at center,
 623 |                     rgba(var(--color2), 0.8) 0,
 624 |                     rgba(var(--color2), 0) 50%) no-repeat;
 625 |             mix-blend-mode: var(--blending);
 626 |             width: var(--circle-size);
 627 |             height: var(--circle-size);
 628 |             top: calc(50% - var(--circle-size) / 2);
 629 |             left: calc(50% - var(--circle-size) / 2);
 630 |             transform-origin: calc(50% - 400px);
 631 |             animation: moveInCircle 10s reverse infinite;
 632 |             opacity: 1;
 633 |         }
 634 | 
 635 |         .gradient-bg .g3 {
 636 |             position: absolute;
 637 |             background: radial-gradient(circle at center,
 638 |                     rgba(var(--color3), 0.8) 0,
 639 |                     rgba(var(--color3), 0) 50%) no-repeat;
 640 |             mix-blend-mode: var(--blending);
 641 |             width: var(--circle-size);
 642 |             height: var(--circle-size);
 643 |             top: calc(50% - var(--circle-size) / 2+200px);
 644 |             left: calc(50% - var(--circle-size) / 2 - 500px);
 645 |             transform-origin: calc(50%+400px);
 646 |             animation: moveInCircle 30s linear infinite;
 647 |             opacity: 1;
 648 |         }
 649 | 
 650 |         .gradient-bg .g4 {
 651 |             position: absolute;
 652 |             background: radial-gradient(circle at center,
 653 |                     rgba(var(--color4), 0.8) 0,
 654 |                     rgba(var(--color4), 0) 50%) no-repeat;
 655 |             mix-blend-mode: var(--blending);
 656 |             width: var(--circle-size);
 657 |             height: var(--circle-size);
 658 |             top: calc(50% - var(--circle-size) / 2);
 659 |             left: calc(50% - var(--circle-size) / 2);
 660 |             transform-origin: calc(50% - 200px);
 661 |             animation: moveHorizontal 30s ease infinite;
 662 |             opacity: 0.7;
 663 |         }
 664 | 
 665 |         .gradient-bg .g5 {
 666 |             position: absolute;
 667 |             background: radial-gradient(circle at center,
 668 |                     rgba(var(--color5), 0.8) 0,
 669 |                     rgba(var(--color5), 0) 50%) no-repeat;
 670 |             mix-blend-mode: var(--blending);
 671 |             width: calc(var(--circle-size) * 2);
 672 |             height: calc(var(--circle-size) * 2);
 673 |             top: calc(50% - var(--circle-size));
 674 |             left: calc(50% - var(--circle-size));
 675 |             transform-origin: calc(50% - 800px) calc(50%+200px);
 676 |             animation: moveInCircle 10s ease infinite;
 677 |             opacity: 1;
 678 |         }
 679 | 
 680 |         .gradient-bg .interactive {
 681 |             position: absolute;
 682 |             background: radial-gradient(circle at center,
 683 |                     rgba(var(--color-interactive), 0.8) 0,
 684 |                     rgba(var(--color-interactive), 0) 80%) no-repeat;
 685 |             mix-blend-mode: var(--blending);
 686 |             width: 100%;
 687 |             height: 100%;
 688 |             top: -50%;
 689 |             left: -50%;
 690 |             opacity: 0.7;
 691 |             animation: color-i 20s infinite linear;
 692 |         }
 693 | 
 694 | 
 695 |         @keyframes color-i {
 696 |             0% {
 697 |                 background: radial-gradient(circle at center,
 698 |                         rgba(45, 0, 255, 0.8) 0,
 699 |                         rgba(255, 0, 0, 0) 80%) no-repeat;
 700 |                 opacity: 0;
 701 |             }
 702 | 
 703 |             5% {
 704 |                 background: radial-gradient(circle at center,
 705 |                         rgba(45, 0, 255, 0.8) 0,
 706 |                         rgba(255, 0, 0, 0) 80%) no-repeat;
 707 |                 opacity: 0.7;
 708 |             }
 709 | 
 710 |             22.2% {
 711 |                 background: radial-gradient(circle at center,
 712 |                         rgba(45, 0, 255, 0.8) 0,
 713 |                         rgba(255, 0, 0, 0) 80%) no-repeat;
 714 |                 opacity: 0;
 715 |             }
 716 | 
 717 |             22.3% {
 718 |                 background: radial-gradient(circle at center,
 719 |                         rgba(255, 45, 0, 0.8) 0,
 720 |                         rgba(255, 0, 0, 0) 80%) no-repeat;
 721 |                 opacity: 0;
 722 |             }
 723 | 
 724 |             27.3% {
 725 |                 background: radial-gradient(circle at center,
 726 |                         rgba(255, 45, 0, 0.8) 0,
 727 |                         rgba(255, 0, 0, 0) 80%) no-repeat;
 728 |                 opacity: 0.7;
 729 |             }
 730 | 
 731 |             44.4% {
 732 |                 background: radial-gradient(circle at center,
 733 |                         rgba(255, 45, 0, 0.8) 0,
 734 |                         rgba(255, 0, 0, 0) 80%) no-repeat;
 735 |                 opacity: 0;
 736 |             }
 737 | 
 738 |             44.5% {
 739 |                 background: radial-gradient(circle at center,
 740 |                         rgba(172, 0, 255, 0.8) 0,
 741 |                         rgba(0, 255, 0, 0) 80%) no-repeat;
 742 |                 opacity: 0;
 743 |             }
 744 | 
 745 |             49.5% {
 746 |                 background: radial-gradient(circle at center,
 747 |                         rgba(172, 0, 255, 0.8) 0,
 748 |                         rgba(0, 255, 0, 0) 80%) no-repeat;
 749 |                 opacity: 0.7;
 750 |             }
 751 | 
 752 |             66.6% {
 753 |                 background: radial-gradient(circle at center,
 754 |                         rgba(172, 0, 255, 0.8) 0,
 755 |                         rgba(0, 255, 0, 0) 80%) no-repeat;
 756 |                 opacity: 0;
 757 |             }
 758 | 
 759 |             66.7% {
 760 |                 background: radial-gradient(circle at center,
 761 |                         rgba(0, 210, 255, 0.8) 0,
 762 |                         rgba(0, 0, 255, 0) 80%) no-repeat;
 763 |                 opacity: 0;
 764 |             }
 765 | 
 766 |             71.7% {
 767 |                 background: radial-gradient(circle at center,
 768 |                         rgba(0, 210, 255, 0.8) 0,
 769 |                         rgba(0, 0, 255, 0) 80%) no-repeat;
 770 |                 opacity: 0.7;
 771 |             }
 772 | 
 773 |             88.8% {
 774 |                 background: radial-gradient(circle at center,
 775 |                         rgba(0, 210, 255, 0.8) 0,
 776 |                         rgba(0, 0, 255, 0) 80%) no-repeat;
 777 |                 opacity: 0;
 778 |             }
 779 | 
 780 |             88.9% {
 781 |                 background: radial-gradient(circle at center,
 782 |                         rgba(0, 0, 0, 0.8) 0,
 783 |                         rgba(0, 0, 0, 0) 80%) no-repeat;
 784 |                 opacity: 0;
 785 |             }
 786 | 
 787 |             100% {
 788 |                 background: radial-gradient(circle at center,
 789 |                         rgba(45, 0, 255, 0.8) 0,
 790 |                         rgba(0, 0, 255, 0) 80%) no-repeat;
 791 |                 opacity: 0;
 792 |             }
 793 |         }
 794 | 
 795 | 
 796 | 
 797 |         /** Idea author: https://github.com/186526/CloudflareCustomErrorPage */
 798 |         html,
 799 |         body {
 800 |             margin: 0;
 801 |             padding: 0;
 802 |             height: 100vh;
 803 |             color: var(--color-text-primary);
 804 |             font-family: sans-serif;
 805 |             font-size: 18px;
 806 |             word-break: keep-all;
 807 |             display: flex;
 808 |             justify-content: center;
 809 |             align-items: center;
 810 | 
 811 |         }
 812 | 
 813 | 
 814 | 
 815 |         body {
 816 |             margin: 2em 2em;
 817 |         }
 818 | 
 819 |         .container {
 820 |             opacity: 0;
 821 |             z-index: 10;
 822 |             max-width: 1200px;
 823 |             max-height: 80vh;
 824 |             padding: 48px;
 825 |             margin: 0 auto;
 826 |             border-radius: 20px;
 827 |             padding: 2em;
 828 |             background-color: var(--color-bg-primary);
 829 |             transition: opacity 0.5s;
 830 |             
 831 |         }
 832 | 
 833 |         .atropos-inner {
 834 |             border-radius: 20px;
 835 | 
 836 |             overflow: hidden;
 837 |         }
 838 | 
 839 | 
 840 | 
 841 | 
 842 |         @supports ((-webkit-backdrop-filter: saturate() blur()) or (backdrop-filter: saturate() blur())) {
 843 |             .container {
 844 |                 background-color: var(--color-bg-primary);
 845 |                 -webkit-backdrop-filter: saturate(150%) blur(10px) opacity(10%);
 846 |                 backdrop-filter: saturate(150%) blur(10px) opacity(10%);
 847 |             }
 848 | 
 849 |             .card {
 850 |                 -webkit-backdrop-filter: saturate(150%) blur(10px) opacity(10%);
 851 |                 backdrop-filter: saturate(150%) blur(10px) opacity(10%);
 852 |             }
 853 |         }
 854 | 
 855 | 
 856 |         header {
 857 |             margin-left: 1em;
 858 |         }
 859 | 
 860 |         header .error-code {
 861 |             font-size: 3.2em;
 862 |             font-family: monospace;
 863 |             font-weight: 400;
 864 |             margin: 0 0 0 10px;
 865 |         }
 866 | 
 867 |         header .error-description {
 868 |             font-family: sans-serif;
 869 |             font-size: 1.4em;
 870 |             color: var(--color-text-secondary);
 871 |             margin: 0 0 0 10px;
 872 |         }
 873 | 
 874 |         code {
 875 |             font-family: monospace;
 876 |         }
 877 | 
 878 |         .status {
 879 |             margin-top: 2.5em;
 880 |             display: flex;
 881 |             flex-direction: row;
 882 |             flex-wrap: wrap;
 883 |             justify-content: center;
 884 |             align-items: center;
 885 | 
 886 |         }
 887 | 
 888 |         .status .card {
 889 |             z-index: 10;
 890 |             background-color: color(var(--ui-card-color-bg) aplha(0.1));
 891 |             padding: 2em;
 892 |             margin: 1em 1em;
 893 |             min-height: 3em;
 894 |             border-radius: 20px;
 895 |             flex-grow: 1;
 896 |             position: relative;
 897 |             /* 确保伪元素相对定位 */
 898 |             overflow: hidden;
 899 |             /* 隐藏溢出的内容 */
 900 |         }
 901 | 
 902 |         .card::before {
 903 |             z-index: -1;
 904 |             content: "";
 905 |             position: absolute;
 906 |             left: var(--x);
 907 |             top: var(--y);
 908 |             transform: translate(-50%, -50%);
 909 | 
 910 |             width: 80vh;
 911 |             height: 80vh;
 912 |             background: radial-gradient(circle at center,
 913 |                     var(--light) 0,
 914 |                     rgba(0, 0, 0, 0) 30%) no-repeat;
 915 |             opacity: 0;
 916 |             transition: opacity 0.5s;
 917 |         }
 918 | 
 919 |         .card:hover::before,
 920 |         .card:focus::before,
 921 |         .card:hover::after,
 922 |         .card:focus::after,
 923 |         .card.active::before,
 924 |         .card.active::after {
 925 |             opacity: 1;
 926 |         }
 927 | 
 928 | 
 929 |         .card::after {
 930 |             z-index: -1;
 931 |             content: "";
 932 |             position: absolute;
 933 |             inset: 2px;
 934 |             opacity: 0;
 935 |             ;
 936 |             border-radius: 18px;
 937 |             background-color: var(--ui-card-color-bg);
 938 |             transition: opacity 0.5s;
 939 |         }
 940 | 
 941 |         .arrows svg {
 942 |             fill: var(--color-text-secondary);
 943 |         }
 944 | 
 945 |         .icon svg {
 946 |             width: var(--icon-size);
 947 |             height: auto;
 948 |             fill: var(--color-text-primary);
 949 |         }
 950 | 
 951 |         .card.ok {
 952 |             background-color: var(--color-bg-ok);
 953 |         }
 954 | 
 955 |         .card.ok .status-text {
 956 |             color: var(--color-text-ok);
 957 |         }
 958 | 
 959 |         .card.ok svg {
 960 |             fill: var(--color-text-ok);
 961 |         }
 962 | 
 963 |         .card.error {
 964 |             background-color: var(--color-bg-error);
 965 |         }
 966 | 
 967 |         .card.error .status-text {
 968 |             color: var(--color-text-error);
 969 |         }
 970 | 
 971 |         .card.error svg {
 972 |             fill: var(--color-text-error);
 973 |         }
 974 | 
 975 |         .card.warning {
 976 |             background-color: var(--color-bg-warning);
 977 |         }
 978 | 
 979 |         .card.warning .status-text {
 980 |             color: var(--color-text-warning);
 981 |         }
 982 | 
 983 |         .card.warning svg {
 984 |             fill: var(--color-text-warning);
 985 |         }
 986 | 
 987 |         .card .caption {
 988 |             font-size: 1.37em;
 989 |         }
 990 | 
 991 |         .card .status-text,
 992 |         .reason p {
 993 |             margin: 0;
 994 |             font-family: sans-serif;
 995 |         }
 996 | 
 997 |         .reason p {
 998 |             line-height: 125%;
 999 |         }
1000 | 
1001 |         a {
1002 |             text-decoration: none;
1003 |             color: #1967d2;
1004 |         }
1005 | 
1006 |         .reason {
1007 |             display: flex;
1008 |             flex-direction: row;
1009 |             flex-wrap: wrap;
1010 |             justify-content: space-between;
1011 |             align-items: baseline;
1012 |         }
1013 | 
1014 |         .reason>* {
1015 |             display: block;
1016 |             margin: 1em;
1017 |             flex-grow: 1;
1018 |             max-width: 40%;
1019 |         }
1020 | 
1021 |         .reason h2 {
1022 |             font-size: 1.45em;
1023 |             margin: 0 0 .6em 0;
1024 |             font-weight: normal;
1025 |         }
1026 | 
1027 |         footer {
1028 |             display: flex;
1029 |             flex-direction: row;
1030 |             flex-wrap: wrap;
1031 |             justify-content: space-between;
1032 |             align-items: flex-end;
1033 |             unicode-bidi: normal;
1034 |             padding: 1em;
1035 |             color: var(--color-text-secondary);
1036 |             align-content: flex-end;
1037 |         }
1038 | 
1039 | 
1040 |         footer .details {
1041 |             margin-top: 20px;
1042 |         }
1043 | 
1044 |         footer .details ul {
1045 |             padding: 0;
1046 |             font-size: 0.7em;
1047 |             list-style: none;
1048 |         }
1049 | 
1050 |         footer .details code {
1051 |             padding-left: 0.3em;
1052 |             opacity: 0.7;
1053 |         }
1054 | 
1055 | 
1056 |         @media screen and (max-width: 820px) {
1057 |             .arrows {
1058 |                 display: none;
1059 |             }
1060 |         }
1061 | 
1062 |         @media screen and (max-width: 480px) {
1063 |             .reason>* {
1064 |                 max-width: 100%;
1065 |             }
1066 |         }
1067 | 
1068 |         @media screen and (min-width: 768px) {
1069 |             body {
1070 |                 margin: 8% 10%;
1071 |             }
1072 | 
1073 |             .container {
1074 |                 width: 80vw;
1075 | 
1076 |             }
1077 | 
1078 |             header>* {
1079 |                 display: inline-block;
1080 |                 margin-left: 1%;
1081 |             }
1082 |         }
1083 |     </style>
1084 | </head>
1085 | 
1086 | <body>
1087 |     <div class="atropos">
1088 |         <div class="atropos-scale">
1089 |             <div class="atropos-rotate">
1090 |                 <div class="atropos-inner ">
1091 |                     <div class="container">
1092 |                         <div class="content">
1093 |                             <header data-atropos-offset="3">
1094 |                                 <h1 class="error-code">{{ code }}</h1>
1095 |                                 <p class="error-description">{{ message }}</p>
1096 |                             </header>
1097 |                             <div class="status" data-atropos-offset="3">
1098 |                                 <div class="card warning" id="client-status-card" data-atropos-offset="5">
1099 |                                     <i class="icon">
1100 |                                         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
1101 |                                             width="24px" fill="#000000">
1102 |                                             <path d="M0 0h24v24H0V0z" fill="none" />
1103 |                                             <path
1104 |                                                 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" />
1105 |                                         </svg>
1106 |                                     </i>
1107 |                                     <div class="caption" data-l10n data-atropos-offset="6">Your Client</div>
1108 |                                     <p class="status-text" data-l10n>Unknown</p>
1109 |                                 </div>
1110 | 
1111 |                                 <div class="arrows">
1112 |                                     <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
1113 |                                         <defs>
1114 |                                             <symbol id="arrows-horizontal" viewBox="0 0 24 24">
1115 |                                                 <rect fill="none" height="24" width="24" x="0" />
1116 |                                                 <polygon
1117 |                                                     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" />
1118 |                                                 <polygon
1119 |                                                     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" />
1120 |                                             </symbol>
1121 |                                         </defs>
1122 |                                         <use href="#arrows-horizontal" />
1123 |                                     </svg>
1124 |                                 </div>
1125 | 
1126 |                                 <div class="card ok" id="network-status-card" data-atropos-offset="5">
1127 |                                     <i class="icon">
1128 |                                         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
1129 |                                             width="24px" fill="#000000">
1130 |                                             <path d="M0 0h24v24H0V0z" fill="none" />
1131 |                                             <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
1132 |                  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
1133 |                  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
1134 |                  6.59 15.64 4 12 4z" />
1135 |                                         </svg>
1136 |                                     </i>
1137 |                                     <div class="caption" data-l10n data-atropos-offset="6">Network</div>
1138 |                                     <p class="status-text" data-l10n>Working</p>
1139 |                                 </div>
1140 | 
1141 |                                 <div class="arrows">
1142 |                                     <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#000000">
1143 |                                         <use href="#arrows-horizontal" />
1144 |                                     </svg>
1145 |                                 </div>
1146 | 
1147 |                                 <div class="card warning" id="server-status-card" data-atropos-offset="5">
1148 |                                     <i class="icon">
1149 |                                         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
1150 |                                             width="24px" fill="#000000">
1151 |                                             <path d="M0 0h24v24H0V0z" fill="none" />
1152 |                                             <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
1153 |         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
1154 |         .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
1155 |         5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z" />
1156 |                                         </svg>
1157 |                                     </i>
1158 |                                     <div class="caption" data-l10n data-atropos-offset="6">Web Server</div>
1159 |                                     <p class="status-text" data-l10n>Unknown</p>
1160 |                                 </div>
1161 |                             </div>
1162 |                             <div class="reason" data-atropos-offset="3">
1163 |                                 <div class="what-happened">
1164 |                                     <h2 data-l10n>What happened?</h2>
1165 |                                     <p class="description" data-l10n>{{ description }}</p>
1166 |                                 </div>
1167 |                                 <div class="what-can-i-do">
1168 |                                     <h2 data-l10n>What can I do?</h2>
1169 |                                     <p class="description" data-l10n>Please try again in a few minutes</p>
1170 |                                 </div>
1171 |                             </div>
1172 |                             <footer>
1173 |                                 <div class="details" data-atropos-offset="3">
1174 |                                     <ul>
1175 |                                         <li><span>Request ID</span>: <code>%request_id%</code></li>
1176 |                                         <li><span>Request Time</span>: <code>%time_local%</code></li>
1177 |                                         <li><span>Request</span>: <code>%request%</code></li>
1178 |                                         <li><span>Request Host</span>: <code>%host%</code></li>
1179 |                                         <li><span>Remote Address</span>: <code>%remote_addr%</code></li>
1180 |                                         <li><span>Referer</span>: <code>%http_referer%</code></li>
1181 |                                         <li><span>Request Time (s)</span>: <code>%request_time%</code></li>
1182 |                                         <li><span>Upstream Response Time (s)</span>:
1183 |                                             <code>%upstream_response_time%</code>
1184 |                                         </li>
1185 |                                         <li><span>User Agent</span>: <code>%http_user_agent%</code></li>
1186 |                                         <li><span>Server</span>: <code>%server%</code></li>
1187 |                                     </ul>
1188 |                                 </div>
1189 |                                 <div class="details" style="text-align: center;" data-atropos-offset="6">
1190 |                                     ShevonKwan ❤️ tarampampam/error-pages </div>
1191 |                             </footer>
1192 |                         </div>
1193 |                     </div>
1194 |                 </div>
1195 | 
1196 |             </div>
1197 |         </div>
1198 |     </div>
1199 |     <div class="gradient-bg">
1200 |         <svg viewBox="0 0 100vw 100vw" xmlns='http://www.w3.org/2000/svg' class="noiseBg">
1201 |             <filter id='noiseFilterBg'>
1202 |                 <feTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch' />
1203 |             </filter>
1204 |             <rect width='100%' height='100%' preserveAspectRatio="xMidYMid meet" filter='url(#noiseFilterBg)' />
1205 |         </svg>
1206 |         <svg xmlns="http://www.w3.org/2000/svg" class="svgBlur">
1207 |             <defs>
1208 |                 <filter id="goo">
1209 |                     <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
1210 |                     <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
1211 |                         result="goo" />
1212 |                     <feBlend in="SourceGraphic" in2="goo" />
1213 |                 </filter>
1214 |             </defs>
1215 |         </svg>
1216 |         <div class="gradients-container">
1217 |             <div class="g1"></div>
1218 |             <div class="g2"></div>
1219 |             <div class="g3"></div>
1220 |             <div class="g4"></div>
1221 |             <div class="g5"></div>
1222 |             <div class="interactive"></div>
1223 |         </div>
1224 |     </div>
1225 | 
1226 |     <script>
1227 |         const errorCode = parseInt(`{{ code }}`, 10);
1228 | 
1229 |         if (errorCode && !isNaN(errorCode)) {
1230 |             /**
1231 |              * @param {HTMLElement} $card
1232 |              * @param { {isOk?: boolean, isWarning?: boolean, isError?: boolean} } state
1233 |              * @param {string} statusText
1234 |              */
1235 |             const setCardState = ($card, state, statusText) => {
1236 |                 const [okClass, warnClass, errClass] = ['ok', 'warning', 'error'];
1237 |                 const $statusText = $card.querySelectorAll('.status-text');
1238 | 
1239 |                 switch (true) {
1240 |                     case state.isOk === true:
1241 |                         $card.classList.remove(errClass, warnClass);
1242 |                         $card.classList.add(okClass);
1243 |                         $statusText.forEach(($statusText) => $statusText.innerText = statusText);
1244 |                         break;
1245 | 
1246 |                     case state.isWarning === true:
1247 |                         $card.classList.remove(okClass, errClass);
1248 |                         $card.classList.add(warnClass);
1249 |                         $statusText.forEach(($statusText) => $statusText.innerText = statusText);
1250 |                         break;
1251 | 
1252 |                     case state.isError === true:
1253 |                         $card.classList.remove(okClass, warnClass);
1254 |                         $card.classList.add(errClass);
1255 |                         $statusText.forEach(($statusText) => $statusText.innerText = statusText);
1256 |                         break;
1257 |                 }
1258 |             };
1259 | 
1260 |             /** @param { {whatHappened?: string, whatToDo?: string} } reasons */
1261 |             const setReasons = (reasons) => {
1262 |                 const descSelector = '.description';
1263 | 
1264 |                 [...document.getElementsByClassName('what-happened')].forEach(($el) => {
1265 |                     if (typeof reasons.whatHappened === 'string' && reasons.whatHappened.length > 0) {
1266 |                         [...$el.querySelectorAll(descSelector)].forEach(($desc) => $desc.innerText = reasons.whatHappened);
1267 |                     } else {
1268 |                         $el.remove();
1269 |                     }
1270 |                 });
1271 | 
1272 |                 [...document.getElementsByClassName('what-can-i-do')].forEach(($el) => {
1273 |                     if (typeof reasons.whatToDo === 'string' && reasons.whatToDo.length > 0) {
1274 |                         [...$el.querySelectorAll(descSelector)].forEach(($desc) => $desc.innerText = reasons.whatToDo);
1275 |                     } else {
1276 |                         $el.remove();
1277 |                     }
1278 |                 });
1279 |             };
1280 | 
1281 |             /**
1282 |              * @param {string} text
1283 |              */
1284 |             const setErrorDescription = function (text) {
1285 |                 [...document.getElementsByClassName('error-description')].forEach(($el) => $el.innerHTML = text);
1286 |             };
1287 | 
1288 |             const message = `{{ message }}`.trim();
1289 |             const cards = {
1290 |                 $client: document.getElementById('client-status-card'),
1291 |                 $network: document.getElementById('network-status-card'),
1292 |                 $server: document.getElementById('server-status-card'),
1293 |             };
1294 | 
1295 |             let whatToDo = 'Please try again in a few minutes';
1296 | 
1297 |             switch (true) {
1298 |                 case errorCode >= 400 && errorCode <= 499:
1299 |                     switch (errorCode) {
1300 |                         case 400:
1301 |                         case 405:
1302 |                         case 411:
1303 |                         case 413:
1304 |                             whatToDo = 'Please try to change the request method, headers, payload, or URL';
1305 |                             break;
1306 |                         case 401:
1307 |                         case 403:
1308 |                         case 407:
1309 |                             whatToDo = 'Please check your authorization data';
1310 |                             break;
1311 |                         case 404:
1312 |                             whatToDo = 'Please double-check the URL and try again';
1313 |                             break;
1314 |                         case 409:
1315 |                         case 410:
1316 |                         case 418:
1317 |                             whatToDo = '¯\\_(ツ)_/¯';
1318 |                             break;
1319 |                     }
1320 | 
1321 |                     setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>client-side error</span>)`);
1322 |                     setCardState(cards.$client, { isError: true }, message)
1323 |                     setCardState(cards.$network, { isOk: true }, 'Working')
1324 |                     setCardState(cards.$server, { isOk: true }, 'Working')
1325 |                     break;
1326 | 
1327 |                 case errorCode >= 500 && errorCode <= 599:
1328 |                     setErrorDescription(`<span data-l10n>${message}</span> (<span data-l10n>server-side error</span>)`);
1329 |                     setCardState(cards.$client, { isOk: true }, 'Working')
1330 |                     setCardState(cards.$network, { isOk: true }, 'Working')
1331 |                     setCardState(cards.$server, { isError: true }, message)
1332 |                     break;
1333 | 
1334 |                 default:
1335 |                     setErrorDescription(message);
1336 |                     setCardState(cards.$client, { isWarning: true }, 'Unknown')
1337 |                     setCardState(cards.$network, { isOk: true }, 'Working')
1338 |                     setCardState(cards.$server, { isWarning: true }, 'Unknown')
1339 |                     break;
1340 |             }
1341 | 
1342 |             setReasons({ whatHappened: `{{ description }}`.trim(), whatToDo: whatToDo.trim() });
1343 |         } else {
1344 |             console.warn('Cannot parse the error code:', errorCode);
1345 |         }
1346 |     </script>
1347 | 
1348 |     <!-- {{- if l10n_enabled -}} -->
1349 |     <script>// {{ l10nScript }}</script>
1350 |     <!-- {{- end -}} -->
1351 | 
1352 | </body>
1353 | <script>
1354 |     document.addEventListener('DOMContentLoaded', () => {
1355 |         const interBubble = document.querySelector('.interactive');
1356 |         let curX = 0;
1357 |         let curY = 0;
1358 |         let tgX = 0;
1359 |         let tgY = 0;
1360 | 
1361 |         const move = () => {
1362 |             curX += (tgX - curX) / 20;
1363 |             curY += (tgY - curY) / 20;
1364 |             interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
1365 |             requestAnimationFrame(move);
1366 |         };
1367 | 
1368 |         window.addEventListener('mousemove', event => {
1369 |             tgX = event.clientX;
1370 |             tgY = event.clientY;
1371 |         });
1372 | 
1373 |         move();
1374 | 
1375 |         const cards = document.querySelectorAll('.card');
1376 |         cards.forEach(card => {
1377 |             card.onmousemove = (event) => {
1378 | 
1379 |                 const x = event.clientX - card.getBoundingClientRect().left;
1380 |                 const y = event.clientY - card.getBoundingClientRect().top;
1381 |                 card.style.setProperty('--x', x + 'px');
1382 |                 card.style.setProperty('--y', y + 'px');
1383 |             }
1384 |             let isTouching = false;
1385 | 
1386 |             card.addEventListener('touchstart', (event) => {
1387 |                 isTouching = true;
1388 |                 card.classList.add('active');
1389 |             });
1390 | 
1391 |             card.addEventListener('touchmove', (event) => {
1392 |                 if (isTouching) {
1393 |                     const rect = card.getBoundingClientRect();
1394 |                     const x = event.touches[0].clientX - rect.left;
1395 |                     const y = event.touches[0].clientY - rect.top;
1396 | 
1397 |                     card.style.setProperty('--x', x + 'px');
1398 |                     card.style.setProperty('--y', y + 'px');
1399 |                 }
1400 |             });
1401 | 
1402 |             card.addEventListener('touchend', (event) => {
1403 |                 isTouching = false;
1404 |                 card.classList.remove('active');
1405 |             });
1406 |         })
1407 |         const myAtropos = Atropos({
1408 |             el: '.atropos',
1409 |             shadow: false,
1410 |             rotateXMax: 10,
1411 |             rotateYMax: 10,
1412 |             activeOffset: 20,
1413 |             // rest of parameters
1414 |         });
1415 |     })
1416 | 
1417 |     function adjustFontSize() {
1418 |         const content = document.getElementsByClassName('container')[0];
1419 |         let fontSize = parseFloat(window.getComputedStyle(document.body).fontSize);
1420 | 
1421 |         // Reduce font size until the content fits within the viewport
1422 |         while (document.getElementsByClassName('content')[0].scrollHeight > parseFloat(window.getComputedStyle(content).height)) {
1423 |             fontSize -= 0.1;
1424 |             document.body.style.fontSize = `${fontSize}px`;
1425 |         }
1426 |         content.style.opacity = 1;
1427 |     }
1428 | 
1429 |     // Initial adjustment on page load
1430 |     window.addEventListener('load', adjustFontSize);
1431 | 
1432 |     // Re-adjust when the window is resized
1433 |     window.addEventListener('resize', adjustFontSize);
1434 | </script>
1435 | 
1436 | </html>


--------------------------------------------------------------------------------