Skip to content

Status code depending colors, auto-reload-page for 5xx errors and some more detailed messages #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Status code depending colors, auto-reload-page for 5xx errors and some more detailed messages #8

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d13c7df
Added colors depending on HTTP status code. Added auto-reload-page on…
systemofapwne Mar 14, 2025
daacec5
Typo: Added regex for reload-page-timer to catch all 5xx error codes
invalid-email-address Mar 14, 2025
4188e8f
Added 'Bad gateway' meme
systemofapwne May 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions config/custom-error-page/error-page.conf
View file
Original file line number Diff line number Diff line change
@@ -18,4 +18,9 @@ location /inter-roman-var.woff2 {
root /usr/share/nginx/html/custom-error-page/;
}

location /bad_gateway_meme.png {
auth_basic off;
root /usr/share/nginx/html/custom-error-page/;
}

error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 421 422 423 424 425 426 428 429 431 451 494 495 496 497 500 501 502 503 504 505 506 507 508 510 511 /custom-error-page.html;
Binary file added templates/custom-error-page/bad_gateway_meme.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions templates/custom-error-page/custom-error-page.css
View file
Original file line number Diff line number Diff line change
@@ -43,6 +43,22 @@ html {
justify-content: center;
align-items: center;
}
/* Define individual background color for http status codes */
div[class*='status-1'] {
background-color: #78909C !important;
}
div[class*='status-2'] {
background-color: #1e88e5 !important;
}
div[class*='status-3'] {
background-color: #f44336 !important;
}
div[class*='status-4'] {
background-color: #f44336 !important;
}
div[class*='status-5'] {
background-color: #f1c40f !important;
}
@media (max-width: 1023px) {
.left svg {
min-height: 200px;
48 changes: 39 additions & 9 deletions templates/custom-error-page/custom-error-page.html
View file
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@

<body>
<div class="container">
<div class="left">
<div class="left status-<!--# echo var="status" -->">
<svg
width="300"
height="300"
@@ -36,30 +36,60 @@ <h1 class="code">
<!--# echo var="status_text" default="Something went wrong" -->
</div>
<div class="description">
<!--# if expr="$status = 404" -->
The page you were looking for may have been deleted or
moved.
<!--# if expr="$status = 502" -->
<img src="/bad_gateway_meme.png" />
<!--# endif -->
<!--# if expr="$status = 401" -->
Your access to this resource is denied<br>
We could not verify that you are authorized to access this resource.
<!--# elif expr="$status = 403" -->
Sorry, but you don't have permission to access this resource.
<!--# elif expr="$status = 404" -->
The page you were looking for may have been deleted or moved.
<!--# elif expr="$status = /4\d\d/" -->
Your browser sent a request that the server was unable
to process.
Your browser sent a request that the server was unable to process.
<!--# elif expr="$status = 503" -->
Sorry, our site is temporarily unavailable.<br>
The server is temporarily unable to service your request due to maintenance downtime or capacity problem.<br>
Please try again in a few minutes.
<!--# elif expr="$status = 504" -->
Sorry, our site is currently experiencing errors.<br>
Our engineers are working to resolve this issue.<br>
Please try accessing this resource again in a few minutes.
<!--# elif expr="$status = /5\d\d/" -->
The server encountered an error and could not complete
your request. Please try again later.
Sorry, our site is currently experiencing technical difficulties.<br>
Our engineers are working to resolve this issue<br>
<!--# else -->
Something went wrong while trying to display this page.
Please try again later.
<!--# endif -->
<!--# if expr="$status = /5\d\d/" -->
<div>Refreshing page in <b id="countdown"></b> seconds</div>
<!--# endif -->
</div>
<!--# if expr="$status = 404" -->
<div class="button-container">
<a href="/" class="button">Back to home</a>
</div>
<!--# endif -->
<div class="footer">
Nginx at <!--# echo var="host" default="localhost" -->
<!--# echo var="host" default="localhost" -->
</div>
</div>
</div>
</div>
<!--# if expr="$status = /5\d\d/" -->
<script>

function countdown(remaining) {
if(remaining === 0) location.reload(true);
if(remaining > 0){
document.getElementById('countdown').innerHTML = remaining;
setTimeout(() => { countdown(remaining - 1); }, 1000);
}
}
countdown(10);
</script>
<!--# endif -->
</body>
</html>