From 232906f06c3650a7093dce31d02e1a956f5e8bc5 Mon Sep 17 00:00:00 2001 From: NavyStack <137406386+Navystack@users.noreply.github.com> Date: Sun, 11 Aug 2024 13:23:42 +0000 Subject: [PATCH] templates: use "word-break: keep-all" --- templates/app-down.html | 1115 ++++++++++++++------------ templates/cats.html | 296 +++---- templates/connection.html | 980 ++++++++++++----------- templates/ghost.html | 489 ++++++------ templates/hacker-terminal.html | 395 +++++----- templates/l7.html | 310 ++++---- templates/lost-in-space.html | 1341 +++++++++++++++++++++----------- templates/noise.html | 477 ++++++------ templates/orient.html | 478 ++++++------ templates/shuffle.html | 511 ++++++------ 10 files changed, 3620 insertions(+), 2772 deletions(-) diff --git a/templates/app-down.html b/templates/app-down.html index 4252a70d..0446e265 100644 --- a/templates/app-down.html +++ b/templates/app-down.html @@ -1,506 +1,665 @@ - - - - {{ message }} - - - - - - - - - - - - - -
-
-

{{ message }}

-

{{ description }}

- -

- Double-check the URL. - -

- -
-

Request details:

-
    - -
  • Host: {{ host }}
    • - -
  • Original URI: {{ original_uri }}
    • - -
  • Forwarded for: {{ forwarded_for }}
    • - -
  • Namespace: {{ namespace }}
    • - -
  • Ingress name: {{ ingress_name }}
    • - -
  • Service name: {{ service_name }}
    • - -
  • Service port: {{ service_port }}
    • - -
  • Request ID: {{ request_id }}
    • + .pic svg .st0 { + fill: var(--color-bg-primary); + } + + .pic svg .st1 { + fill: url(#svg-background-gradient); + } + + .pic svg .st2 { + fill: var(--color-bg-secondary); + } + + .pic svg .st3 { + fill: var(--color-bg-primary); + stroke: var(--color-img-primary); + stroke-width: 3.5; + } + + .pic svg .st4 { + fill: var(--color-img-secondary); + } + + .pic svg .st5 { + fill: none; + stroke: var(--color-img-secondary); + stroke-width: 4; + stroke-linejoin: round; + stroke-miterlimit: 10; + } + + .pic svg .st6 { + fill: var(--color-bg-primary); + stroke: var(--color-img-primary); + stroke-width: 3; + } + + .pic svg .st7 { + fill: var(--color-img-primary); + } + + .pic svg .st8 { + fill: none; + stroke: var(--color-img-primary); + stroke-width: 2.5; + stroke-linecap: round; + stroke-miterlimit: 10; + } + + .pic svg .st9 { + fill: none; + stroke: var(--color-img-primary); + stroke-width: 3; + } + + .pic svg .st10 { + fill: none; + stroke: var(--color-img-primary); + stroke-width: 3.5; + } + + .pic svg .st11 { + fill: none; + stroke: var(--color-img-secondary); + stroke-width: 4; + } + + .pic svg .st12 { + fill: var(--color-bg-primary); + stroke: var(--color-img-primary); + stroke-width: 4; + } + + .pic svg .st13 { + fill: none; + stroke: var(--color-img-primary); + stroke-width: 4; + } + + .pic svg .st14 { + fill: none; + stroke: var(--color-img-secondary); + stroke-width: 4.5; + } + + .pic svg .st15 { + fill: none; + stroke: var(--color-img-secondary); + stroke-width: 5; + } + + .pic svg .st16 { + fill: none; + stroke: var(--color-img-primary); + stroke-width: 5; + } + + .pic svg .st17 { + fill: var(--color-bg-primary); + stroke: var(--color-img-details); + stroke-width: 3.5; + } + + .pic svg .st19 { + fill: none; + stroke: var(--color-img-details); + stroke-width: 2.5; + stroke-linecap: round; + stroke-miterlimit: 10; + } + + .pic svg .error-code { + font: bold 40px sans-serif; + fill: var(--color-img-details); + } + + @media (max-width: 800px) { + body, + html { + font-size: 14px; + } + + article, + .pic, + article h1 { + width: 100%; + } + + .pic { + position: absolute; + top: 0; + left: 0; + z-index: 0; + opacity: 0.2; + width: 100%; + height: 100%; + } + + .pic svg { + max-width: 70%; + } + } + + @media (max-width: 600px) { + body, + html { + font-size: 12px; + } + + .pic svg { + max-width: 90%; + } + } + + + +
    +
    +

    {{ message }}

    +

    {{ description }}

    + +

    + Double-check the URL. + +

    + +
    +

    Request details:

    +
      + +
    • Host: {{ host }}
      • + +
    • + Original URI: + {{ original_uri }} +
      • + +
    • + Forwarded for: + {{ forwarded_for }} +
      • + +
    • + Namespace: {{ namespace }} +
      • + +
    • + Ingress name: + {{ ingress_name }} +
      • + +
    • + Service name: + {{ service_name }} +
      • + +
    • + Service port: + {{ service_port }} +
      • + +
    • + Request ID: {{ request_id }} +
      • + +
    • + Timestamp: {{ nowUnix }} +
      • +
    +
    -
  • Timestamp: {{ nowUnix }}
    • -
-
- -
-
- - - - - - - - - - - - +
+ + + + + + + + + + + + - - - - - - + + + + + + - - - - - - - + + + + + + + - - - - - + + + + + - + - - - - - - - + + + + + + + - - - + + + - - - - - - - - - - - {{ code }} - - - - - + + + + + + + + + + + + {{ code }} + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - - - -
-
- - - - - - - + c1.5-0.2,2.8,0.7,3,2.1l3.7,27C422.2,412.2,421.2,413.5,419.7,413.7z" + > + + + + + + + + + + + + + + + + + + + diff --git a/templates/cats.html b/templates/cats.html index 8c3d0733..bc668c48 100644 --- a/templates/cats.html +++ b/templates/cats.html @@ -1,163 +1,171 @@ - - - - {{ message }} - - - - - - - - - - - - - -
- {{ message }} -
+ /* {{ end }} */ + + + +
+ {{ message }} +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Host{{ host }}
Original URI{{ original_uri }}
Forwarded for{{ forwarded_for }}
Namespace{{ namespace }}
Ingress name{{ ingress_name }}
Service name{{ service_name }}
Service port{{ service_port }}
Request ID{{ request_id }}
Timestamp{{ nowUnix }}
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Host{{ host }}
Original URI{{ original_uri }}
Forwarded for{{ forwarded_for }}
Namespace{{ namespace }}
Ingress name{{ ingress_name }}
Service name{{ service_name }}
Service port{{ service_port }}
Request ID{{ request_id }}
Timestamp{{ nowUnix }}
+ - - - - + + + + diff --git a/templates/connection.html b/templates/connection.html index 48b3bc3f..8a217ec9 100644 --- a/templates/connection.html +++ b/templates/connection.html @@ -1,461 +1,553 @@ - - - - {{ code }} | {{ message }} - - - - - - - - - - - - - -
-

{{ code }}

-

{{ message }}

-
-
-
- - - - - - -
Your Client
-

Unknown

-
- -
- - - - - - - - - - -
- -
- - - - {{ code }} +

{{ message }}

+ +
+
+ + + + + + +
Your Client
+

Unknown

+
+ +
+ + + + + + + + + + +
+ +
+ + + + - - -
Network
-

Working

-
- -
- - - -
- -
- - - - + + +
Network
+

Working

+
+ +
+ + + +
+ +
+ + + + - - -
Web Server
-

Unknown

-
-
-
-
-

What happened?

-

{{ description }}

-
-
-

What can I do?

-

Please try again in a few minutes

-
-
-
- -
-
    - -
  • Host: {{ host }}
    • - -
  • Original URI: {{ original_uri }}
    • - -
  • Forwarded for: {{ forwarded_for }}
    • - -
  • Namespace: {{ namespace }}
    • - -
  • Ingress name: {{ ingress_name }}
    • - -
  • Service name: {{ service_name }}
    • - -
  • Service port: {{ service_port }}
    • - -
  • Request ID: {{ request_id }}
    • + 5.5s1.5.68 1.5 1.5S7.83 8.5 7 8.5z" + /> + +     +
    Web Server
    +

    Unknown

    +
+
+
+
+

What happened?

+

{{ description }}

+
+
+

What can I do?

+

Please try again in a few minutes

+
+
+
- - - - - - - - + setReasons({ + whatHappened: `{{ description }}`.trim(), + whatToDo: whatToDo.trim(), + }); + } else { + console.warn("Cannot parse the error code:", errorCode); + } + + + + + + diff --git a/templates/ghost.html b/templates/ghost.html index 94d22377..c67118d2 100644 --- a/templates/ghost.html +++ b/templates/ghost.html @@ -1,167 +1,196 @@ - - - - {{ code }}: {{ message }} - - - - - - - - - - - - - -
- - + - - - + + + - + - - -

- - + stroke-miterlimit="10" + style="fill: var(--color-ghost); stroke: var(--color-ghost)" + > -

- -

Error {{ code }}

-

{{ description }}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +

+ + + +

+ +

Error {{ code }}

+

{{ description }}

+ + +
Host{{ host }}
Original URI{{ original_uri }}
Forwarded for{{ forwarded_for }}
Namespace{{ namespace }}
Ingress name{{ ingress_name }}
Service name{{ service_name }}
Service port{{ service_port }}
Request ID{{ request_id }}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Host{{ host }}
Original URI{{ original_uri }}
Forwarded for{{ forwarded_for }}
Namespace{{ namespace }}
Ingress name{{ ingress_name }}
Service name{{ service_name }}
Service port{{ service_port }}
Request ID{{ request_id }}
Timestamp{{ nowUnix }}
+ +
+ + + - - Timestamp - {{ nowUnix }} - - - - - - - - - - + diff --git a/templates/hacker-terminal.html b/templates/hacker-terminal.html index e29c0865..788d8af3 100644 --- a/templates/hacker-terminal.html +++ b/templates/hacker-terminal.html @@ -1,186 +1,217 @@ - - - - {{ message }} - - - - - - - - - - - - - -
- -
-

Error {{ code }}

-

{{ description }}.

-

Good luck.

- -
- -

Host: {{ host }}

- -

Original URI: {{ original_uri }}

- -

Forwarded for: {{ forwarded_for }}

- -

Namespace: {{ namespace }}

- -

Ingress name: {{ ingress_name }}

- -

Service name: {{ service_name }}

- -

Service port: {{ service_port }}

- -

Request ID: {{ request_id }}

+ + + + {{ message }} + + + + + + + + + + + + + +
+ +
+

+ Error {{ code }} +

+

{{ description }}.

+

Good luck.

+ +
+ +

+ Host: {{ host }} +

+ +

+ Original URI: {{ original_uri }} +

+ +

+ Forwarded for: {{ forwarded_for }} +

+ +

+ Namespace: {{ namespace }} +

+ +

+ Ingress name: {{ ingress_name }} +

+ +

+ Service name: {{ service_name }} +

+ +

+ Service port: {{ service_port }} +

+ +

+ Request ID: {{ request_id }} +

+ +

+ Timestamp: {{ nowUnix }} +

+
+ +
+ + + -

Timestamp: {{ nowUnix }}

-
- -
- - - - - + diff --git a/templates/l7.html b/templates/l7.html index c435f660..f7272861 100644 --- a/templates/l7.html +++ b/templates/l7.html @@ -1,171 +1,179 @@ - - - - {{ message }} - - - - - - - - - - - - - + /* {{ if show_details }} */ + ul.details { + list-style: none; + margin: 1.2em 0 0 0; + padding: 0; + font-size: 0.8em; + } -
-
-
-

{{ code }}

- -
    - -
  • Host
    • - -
  • Original URI
    • - -
  • Forwarded for
    • - -
  • Namespace
    • - -
  • Ingress name
    • - -
  • Service name
    • - -
  • Service port
    • - -
  • Request ID
    • - -
  • Timestamp
    • -
- -
-
-

{{ message }}

- -
    - -
  • {{ host }}
    • - -
  • {{ original_uri }}
    • - -
  • {{ forwarded_for }}
    • - -
  • {{ namespace }}
    • - -
  • {{ ingress_name }}
    • - -
  • {{ service_name }}
    • - -
  • {{ service_port }}
    • - -
  • {{ request_id }}
    • - -
  • {{ nowUnix }}
    • -
- -
-
-
+ ul.details li.name::first-letter { + font-weight: bold; + } - - - - + ul.details li.value { + font-family: monospace; + } + /* {{ end }} */ + + + +
+
+
+

{{ code }}

+ +
    + +
  • Host
    • + +
  • Original URI
    • + +
  • Forwarded for
    • + +
  • Namespace
    • + +
  • Ingress name
    • + +
  • Service name
    • + +
  • Service port
    • + +
  • Request ID
    • + +
  • Timestamp
    • +
+ +
+
+

{{ message }}

+ +
    + +
  • {{ host }}
    • + +
  • {{ original_uri }}
    • + +
  • {{ forwarded_for }}
    • + +
  • {{ namespace }}
    • + +
  • {{ ingress_name }}
    • + +
  • {{ service_name }}
    • + +
  • {{ service_port }}
    • + +
  • {{ request_id }}
    • + +
  • {{ nowUnix }}
    • +
+ +
+
+
+ + + + + diff --git a/templates/lost-in-space.html b/templates/lost-in-space.html index bd70c799..1f18e47e 100644 --- a/templates/lost-in-space.html +++ b/templates/lost-in-space.html @@ -1,455 +1,918 @@ - - - - {{ message }} - - - - - - - - - - - - - - - - -
-
- - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + c6.755-0.61,20.546-0.608,41.785,5.087s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z" + /> + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

{{code}}

-

UH OH! {{ message }}

-

{{ description }}

- - - + +
+
+

{{code}}

+

+ UH OH! {{ message }} +

+

{{ description }}

+ + + + +
+
+ + + - - - - - - - + diff --git a/templates/noise.html b/templates/noise.html index e540da43..6900650b 100644 --- a/templates/noise.html +++ b/templates/noise.html @@ -13,250 +13,265 @@ {{ end }} --> - - - - - - - - - - - - - - {{ code }}: {{ message }} - - - - -
-
-

{{code}}

-

{{ description }}

-
-
- -
-
-
-
-
- - - - - - - - - + // prevent the redraw function from running multiple times at the same time + let redrawMutex = false; + + const redraw = () => { + if (redrawMutex) { + return; + } + + redrawMutex = true; + + const dstLen = onScreen.length; + let pos = 0; + + do { + // pick a random length of bytes to copy from the source slice in range [0...buff.length] with the step of 4 + let takeLen = + Math.floor((Math.random() * pixelsBuffToRepeat.length) / 4) * 4; + + // if picked length is greater than the remaining space in the onScreen, adjust it + if (pos + takeLen > dstLen) { + takeLen = dstLen - pos; + } + + // copy the random length of bytes from the buffer to the onScreen + onScreen.set(pixelsBuffToRepeat.slice(0, takeLen), pos); + + // move the position in the onScreen to the next random position + pos += takeLen; + } while (pos < dstLen); + + ctx.putImageData(imgData, 0, 0); + + queueMicrotask(() => { + redrawMutex = false; + }); + }; + + redraw(); // draw the noise first time + + const redrawFrequency = 45; // redraw the noise every 45ms + /** @type {Number|undefined} */ + let flickerInterval = window.setInterval(redraw, redrawFrequency); + + // stop drawing when the tab is hidden + // https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event + window.addEventListener("visibilitychange", () => { + if (document.hidden && flickerInterval !== undefined) { + window.clearInterval(flickerInterval); + flickerInterval = undefined; + } else if (!document.hidden && flickerInterval === undefined) { + flickerInterval = window.setInterval(redraw, redrawFrequency); + } + }); + + + + + + diff --git a/templates/orient.html b/templates/orient.html index 2fd0b658..f23a0572 100644 --- a/templates/orient.html +++ b/templates/orient.html @@ -1,272 +1,282 @@ - - - - {{ message }} - - - - - - - - - - - - - -
-
-
-
{{code}}
-
-

{{ description }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Host{{ host }}
Original URI{{ original_uri }}
Forwarded for{{ forwarded_for }}
Namespace{{ namespace }}
Ingress name{{ ingress_name }}
Service name{{ service_name }}
Service port{{ service_port }}
Request ID{{ request_id }}
Timestamp{{ nowUnix }}
+ + + +
+
+
+
{{code}}
+
+

{{ description }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Host{{ host }}
Original URI{{ original_uri }}
Forwarded for{{ forwarded_for }}
Namespace{{ namespace }}
Ingress name{{ ingress_name }}
Service name{{ service_name }}
Service port{{ service_port }}
Request ID{{ request_id }}
Timestamp{{ nowUnix }}
+
+ +
+
+
+
- -
-
-
-
-
-
+ - - - - + + + + diff --git a/templates/shuffle.html b/templates/shuffle.html index 0b19010a..4739f9ad 100644 --- a/templates/shuffle.html +++ b/templates/shuffle.html @@ -1,267 +1,282 @@ - - - - {{ code }} - {{ message }} - - - - - - - - - - - - - -
-
-
-

{{ code }}: {{ message }}

-

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - + + #details .name::first-letter, + #details .value::first-letter { + font-weight: bold; + } + + #details .name { + text-align: right; + padding-right: 0.2em; + width: 50%; + } + + #details .value { + text-align: left; + padding-left: 0.4em; + font-family: monospace; + overflow: hidden; + text-overflow: ellipsis; + } + /* {{ end }} */ + + + +
+
+
+

+ {{ code }}: {{ message }} +

+

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +