From 6127efd6e14bbbd7621e9910038d0a03beaecc96 Mon Sep 17 00:00:00 2001
From: Fabrice Quenneville <fabquenneville@gmail.com>
Date: Sun, 7 Jul 2024 01:59:53 -0400
Subject: [PATCH] Added default error pages

---
 pages/errors/default/400.html | 66 ++++++++++++++++++++++++++++++++
 pages/errors/default/401.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/402.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/403.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/404.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/405.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/406.html | 69 ++++++++++++++++++++++++++++++++++
 pages/errors/default/407.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/408.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/409.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/410.html | 69 ++++++++++++++++++++++++++++++++++
 pages/errors/default/500.html | 67 +++++++++++++++++++++++++++++++++
 pages/errors/default/501.html | 70 ++++++++++++++++++++++++++++++++++
 pages/errors/default/502.html | 69 ++++++++++++++++++++++++++++++++++
 pages/errors/default/503.html | 64 +++++++++++++++++++++++++++++++
 pages/errors/default/504.html | 70 ++++++++++++++++++++++++++++++++++
 pages/errors/default/505.html | 70 ++++++++++++++++++++++++++++++++++
 pages/errors/proxy/400.html   | 67 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/401.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/402.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/403.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/404.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/405.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/406.html   | 70 ++++++++++++++++++++++++++++++++++
 pages/errors/proxy/407.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/408.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/409.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/410.html   | 70 ++++++++++++++++++++++++++++++++++
 pages/errors/proxy/500.html   | 68 +++++++++++++++++++++++++++++++++
 pages/errors/proxy/501.html   | 71 +++++++++++++++++++++++++++++++++++
 pages/errors/proxy/502.html   | 70 ++++++++++++++++++++++++++++++++++
 pages/errors/proxy/503.html   | 65 ++++++++++++++++++++++++++++++++
 pages/errors/proxy/504.html   | 71 +++++++++++++++++++++++++++++++++++
 pages/errors/proxy/505.html   | 71 +++++++++++++++++++++++++++++++++++
 34 files changed, 2317 insertions(+)
 create mode 100644 pages/errors/default/400.html
 create mode 100644 pages/errors/default/401.html
 create mode 100644 pages/errors/default/402.html
 create mode 100644 pages/errors/default/403.html
 create mode 100644 pages/errors/default/404.html
 create mode 100644 pages/errors/default/405.html
 create mode 100644 pages/errors/default/406.html
 create mode 100644 pages/errors/default/407.html
 create mode 100644 pages/errors/default/408.html
 create mode 100644 pages/errors/default/409.html
 create mode 100644 pages/errors/default/410.html
 create mode 100644 pages/errors/default/500.html
 create mode 100644 pages/errors/default/501.html
 create mode 100644 pages/errors/default/502.html
 create mode 100644 pages/errors/default/503.html
 create mode 100644 pages/errors/default/504.html
 create mode 100644 pages/errors/default/505.html
 create mode 100644 pages/errors/proxy/400.html
 create mode 100644 pages/errors/proxy/401.html
 create mode 100644 pages/errors/proxy/402.html
 create mode 100644 pages/errors/proxy/403.html
 create mode 100644 pages/errors/proxy/404.html
 create mode 100644 pages/errors/proxy/405.html
 create mode 100644 pages/errors/proxy/406.html
 create mode 100644 pages/errors/proxy/407.html
 create mode 100644 pages/errors/proxy/408.html
 create mode 100644 pages/errors/proxy/409.html
 create mode 100644 pages/errors/proxy/410.html
 create mode 100644 pages/errors/proxy/500.html
 create mode 100644 pages/errors/proxy/501.html
 create mode 100644 pages/errors/proxy/502.html
 create mode 100644 pages/errors/proxy/503.html
 create mode 100644 pages/errors/proxy/504.html
 create mode 100644 pages/errors/proxy/505.html

diff --git a/pages/errors/default/400.html b/pages/errors/default/400.html
new file mode 100644
index 0000000..0bec015
--- /dev/null
+++ b/pages/errors/default/400.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>400 Bad Request</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>400 Bad Request</h1>
+      <p>Oops! Something went wrong with your request.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server go broke? Because it couldn't process any requests!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/401.html b/pages/errors/default/401.html
new file mode 100644
index 0000000..c2d5a6e
--- /dev/null
+++ b/pages/errors/default/401.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>401 Unauthorized</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>401 Unauthorized</h1>
+      <p>Oops! Access is denied. You are not authorized to view this page.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the hacker break up with his computer? He found out it was
+        "encrypting" with someone else behind his back!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/402.html b/pages/errors/default/402.html
new file mode 100644
index 0000000..0380900
--- /dev/null
+++ b/pages/errors/default/402.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>402 Payment Required</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>402 Payment Required</h1>
+      <p>Oops! You need to pay to access this resource.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the web developer always carry a credit card? To handle all
+        those "payment required" errors!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/403.html b/pages/errors/default/403.html
new file mode 100644
index 0000000..a36a7de
--- /dev/null
+++ b/pages/errors/default/403.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>403 Forbidden</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>403 Forbidden</h1>
+      <p>Oops! Access to this resource is forbidden.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the computer get grounded? It kept accessing "forbidden"
+        websites when its parents weren't looking!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/404.html b/pages/errors/default/404.html
new file mode 100644
index 0000000..8811d01
--- /dev/null
+++ b/pages/errors/default/404.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>404 Not Found</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>404 Not Found</h1>
+      <p>Oops! The page you are looking for could not be found.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why was the HTTP request so lonely? It kept getting "404 Not Found"
+        responses whenever it tried to connect!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/405.html b/pages/errors/default/405.html
new file mode 100644
index 0000000..9e7ac38
--- /dev/null
+++ b/pages/errors/default/405.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>405 Method Not Allowed</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>405 Method Not Allowed</h1>
+      <p>Oops! The method you used is not allowed for this resource.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the developer break up with his Git repository? Because it had
+        too many "commits"ment issues!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/406.html b/pages/errors/default/406.html
new file mode 100644
index 0000000..e43302f
--- /dev/null
+++ b/pages/errors/default/406.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>406 Not Acceptable</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>406 Not Acceptable</h1>
+      <p>
+        Oops! The server cannot produce a response that the client will accept.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server break up with the client? They couldn't agree on
+        which language to speak!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/407.html b/pages/errors/default/407.html
new file mode 100644
index 0000000..2d24ca1
--- /dev/null
+++ b/pages/errors/default/407.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>407 Proxy Authentication Required</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>407 Proxy Authentication Required</h1>
+      <p>Oops! Proxy authentication is required to access this resource.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why was the proxy server so shy? It kept asking for authentication
+        before making friends!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/408.html b/pages/errors/default/408.html
new file mode 100644
index 0000000..43798df
--- /dev/null
+++ b/pages/errors/default/408.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>408 Request Timeout</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>408 Request Timeout</h1>
+      <p>Oops! The server timed out waiting for the request.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the computer apply for a job as a referee? It was great at
+        calling "timeout"!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/409.html b/pages/errors/default/409.html
new file mode 100644
index 0000000..2b4fc84
--- /dev/null
+++ b/pages/errors/default/409.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>409 Conflict</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>409 Conflict</h1>
+      <p>Oops! There was a conflict with the current state of the resource.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the database refuse to go to therapy? It couldn't resolve its
+        "conflict" issues with the schema!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/410.html b/pages/errors/default/410.html
new file mode 100644
index 0000000..4b84811
--- /dev/null
+++ b/pages/errors/default/410.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>410 Gone</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>410 Gone</h1>
+      <p>
+        Oops! The requested resource is no longer available and won't be back.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the website file for divorce? It was tired of being "gone"
+        without any notice!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/500.html b/pages/errors/default/500.html
new file mode 100644
index 0000000..a54b5fc
--- /dev/null
+++ b/pages/errors/default/500.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>500 Internal Server Error</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>500 Internal Server Error</h1>
+      <p>Oops! Something went wrong on the server.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server go to therapy? It had too many internal issues it
+        couldn't resolve!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/501.html b/pages/errors/default/501.html
new file mode 100644
index 0000000..5cbace3
--- /dev/null
+++ b/pages/errors/default/501.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>501 Not Implemented</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>501 Not Implemented</h1>
+      <p>
+        Oops! The server does not support the functionality required to fulfill
+        the request.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server break up with the developer? It couldn't implement
+        the changes requested!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/502.html b/pages/errors/default/502.html
new file mode 100644
index 0000000..97114be
--- /dev/null
+++ b/pages/errors/default/502.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>502 Bad Gateway</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>502 Bad Gateway</h1>
+      <p>
+        Oops! The server received an invalid response from an inbound server.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server go to counseling? It couldn't find a good gateway to
+        communicate!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/503.html b/pages/errors/default/503.html
new file mode 100644
index 0000000..24e8409
--- /dev/null
+++ b/pages/errors/default/503.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>503 Service Unavailable</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>503 Service Unavailable</h1>
+      <p>Oops! The server is temporarily unable to handle the request.</p>
+    </div>
+    <div class="footer">
+      <p>Server status report: currently enjoying an extended coffee break!</p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/504.html b/pages/errors/default/504.html
new file mode 100644
index 0000000..04a6242
--- /dev/null
+++ b/pages/errors/default/504.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>504 Gateway Timeout</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>504 Gateway Timeout</h1>
+      <p>
+        Oops! The server didn't receive a timely response from an upstream
+        server.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Server timeout: It's like waiting for a bus in a town with no schedule –
+        you never know when it's coming!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/default/505.html b/pages/errors/default/505.html
new file mode 100644
index 0000000..bdc8f30
--- /dev/null
+++ b/pages/errors/default/505.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>505 HTTP Version Not Supported</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>505 HTTP Version Not Supported</h1>
+      <p>
+        Oops! The server does not support the HTTP protocol version used in the
+        request.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Attempting to connect? It's like trying to use a VHS tape in a Blu-ray
+        player – no support for the outdated format!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/400.html b/pages/errors/proxy/400.html
new file mode 100644
index 0000000..f40a6c6
--- /dev/null
+++ b/pages/errors/proxy/400.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>400 Bad Request</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>400 Bad Request</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! Something went wrong with your request.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server go broke? Because it couldn't process any requests!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/401.html b/pages/errors/proxy/401.html
new file mode 100644
index 0000000..e5296f8
--- /dev/null
+++ b/pages/errors/proxy/401.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>401 Unauthorized</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>401 Unauthorized</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! Access is denied. You are not authorized to view this page.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the hacker break up with his computer? He found out it was
+        "encrypting" with someone else behind his back!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/402.html b/pages/errors/proxy/402.html
new file mode 100644
index 0000000..8386482
--- /dev/null
+++ b/pages/errors/proxy/402.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>402 Payment Required</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>402 Payment Required</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! You need to pay to access this resource.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the web developer always carry a credit card? To handle all
+        those "payment required" errors!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/403.html b/pages/errors/proxy/403.html
new file mode 100644
index 0000000..699c543
--- /dev/null
+++ b/pages/errors/proxy/403.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>403 Forbidden</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>403 Forbidden</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! Access to this resource is forbidden.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the computer get grounded? It kept accessing "forbidden"
+        websites when its parents weren't looking!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/404.html b/pages/errors/proxy/404.html
new file mode 100644
index 0000000..754336f
--- /dev/null
+++ b/pages/errors/proxy/404.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>404 Not Found</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>404 Not Found</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! The page you are looking for could not be found.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why was the HTTP request so lonely? It kept getting "404 Not Found"
+        responses whenever it tried to connect!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/405.html b/pages/errors/proxy/405.html
new file mode 100644
index 0000000..b9cba51
--- /dev/null
+++ b/pages/errors/proxy/405.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>405 Method Not Allowed</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>405 Method Not Allowed</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! The method you used is not allowed for this resource.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the developer break up with his Git repository? Because it had
+        too many "commits"ment issues!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/406.html b/pages/errors/proxy/406.html
new file mode 100644
index 0000000..f9701d0
--- /dev/null
+++ b/pages/errors/proxy/406.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>406 Not Acceptable</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>406 Not Acceptable</h1>
+      <h2>Proxy Error</h2>
+      <p>
+        Oops! The server cannot produce a response that the client will accept.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server break up with the client? They couldn't agree on
+        which language to speak!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/407.html b/pages/errors/proxy/407.html
new file mode 100644
index 0000000..474362d
--- /dev/null
+++ b/pages/errors/proxy/407.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>407 Proxy Authentication Required</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>407 Proxy Authentication Required</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! Proxy authentication is required to access this resource.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why was the proxy server so shy? It kept asking for authentication
+        before making friends!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/408.html b/pages/errors/proxy/408.html
new file mode 100644
index 0000000..a65235b
--- /dev/null
+++ b/pages/errors/proxy/408.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>408 Request Timeout</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>408 Request Timeout</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! The server timed out waiting for the request.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the computer apply for a job as a referee? It was great at
+        calling "timeout"!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/409.html b/pages/errors/proxy/409.html
new file mode 100644
index 0000000..84eda6b
--- /dev/null
+++ b/pages/errors/proxy/409.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>409 Conflict</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>409 Conflict</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! There was a conflict with the current state of the resource.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the database refuse to go to therapy? It couldn't resolve its
+        "conflict" issues with the schema!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/410.html b/pages/errors/proxy/410.html
new file mode 100644
index 0000000..05a66c7
--- /dev/null
+++ b/pages/errors/proxy/410.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>410 Gone</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>410 Gone</h1>
+      <h2>Proxy Error</h2>
+      <p>
+        Oops! The requested resource is no longer available and won't be back.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the website file for divorce? It was tired of being "gone"
+        without any notice!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/500.html b/pages/errors/proxy/500.html
new file mode 100644
index 0000000..eafcdf2
--- /dev/null
+++ b/pages/errors/proxy/500.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>500 Internal Server Error</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>500 Internal Server Error</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! Something went wrong on the server.</p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server go to therapy? It had too many internal issues it
+        couldn't resolve!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/501.html b/pages/errors/proxy/501.html
new file mode 100644
index 0000000..7b5f699
--- /dev/null
+++ b/pages/errors/proxy/501.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>501 Not Implemented</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>501 Not Implemented</h1>
+      <h2>Proxy Error</h2>
+      <p>
+        Oops! The server does not support the functionality required to fulfill
+        the request.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server break up with the developer? It couldn't implement
+        the changes requested!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/502.html b/pages/errors/proxy/502.html
new file mode 100644
index 0000000..8bc26e1
--- /dev/null
+++ b/pages/errors/proxy/502.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>502 Bad Gateway</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>502 Bad Gateway</h1>
+      <h2>Proxy Error</h2>
+      <p>
+        Oops! The server received an invalid response from an inbound server.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Why did the server go to counseling? It couldn't find a good gateway to
+        communicate!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/503.html b/pages/errors/proxy/503.html
new file mode 100644
index 0000000..da4e3ca
--- /dev/null
+++ b/pages/errors/proxy/503.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>503 Service Unavailable</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>503 Service Unavailable</h1>
+      <h2>Proxy Error</h2>
+      <p>Oops! The server is temporarily unable to handle the request.</p>
+    </div>
+    <div class="footer">
+      <p>Server status report: currently enjoying an extended coffee break!</p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/504.html b/pages/errors/proxy/504.html
new file mode 100644
index 0000000..2e924ce
--- /dev/null
+++ b/pages/errors/proxy/504.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>504 Gateway Timeout</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>504 Gateway Timeout</h1>
+      <h2>Proxy Error</h2>
+      <p>
+        Oops! The server didn't receive a timely response from an upstream
+        server.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Server timeout: It's like waiting for a bus in a town with no schedule –
+        you never know when it's coming!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/pages/errors/proxy/505.html b/pages/errors/proxy/505.html
new file mode 100644
index 0000000..4c1aa40
--- /dev/null
+++ b/pages/errors/proxy/505.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>505 HTTP Version Not Supported</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f8f9fa;
+        color: #343a40;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100vh;
+        margin: 0;
+      }
+      .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      h1 {
+        font-size: 2.5em;
+        margin-bottom: 20px;
+      }
+      p {
+        font-size: 1.2em;
+        margin-bottom: 30px;
+      }
+      .footer {
+        font-size: 0.9em;
+        color: #6c757d;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #ffffff;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 2em;
+        }
+        p {
+          font-size: 1em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>505 HTTP Version Not Supported</h1>
+      <h2>Proxy Error</h2>
+      <p>
+        Oops! The server does not support the HTTP protocol version used in the
+        request.
+      </p>
+    </div>
+    <div class="footer">
+      <p>
+        Attempting to connect? It's like trying to use a VHS tape in a Blu-ray
+        player – no support for the outdated format!
+      </p>
+    </div>
+  </body>
+</html>