From 38e20c2017d1a05094ca4ca9e58917ec702b1100 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Tue, 31 Dec 2024 08:58:13 +0100
Subject: [PATCH] [Static] Add error page + update static page

---
 static/errors/errors.html      | 76 ++++++++++++++++++++++++++++++++++
 static/errors/unavailable.html | 60 ++++++++++++++++++++++++++-
 2 files changed, 135 insertions(+), 1 deletion(-)
 create mode 100644 static/errors/errors.html
diff --git a/static/errors/errors.html b/static/errors/errors.html
new file mode 100644
index 0000000..993f2b0
--- /dev/null
+++ b/static/errors/errors.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Error | janishutz.com</title>
+        <style>
+            @import url( 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap' );
+            @import url( 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' );
+
+            body {
+                height: 100vh;
+                width: 100%;
+                padding: 0;
+                margin: 0;
+                font-family: 'Manrope', sans-serif;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+            }
+
+            .material-symbols-outlined {
+                font-variation-settings:
+                'FILL' 0,
+                'wght' 400,
+                'GRAD' 0,
+                'opsz' 48
+            }
+
+            .content {
+                width: 80%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                min-height: 80vh;
+            }
+
+            .error {
+                font-size: 5em;
+            }
+
+            .logo {
+                position: fixed;
+                top: 5px;
+                left: 5px;
+                width: 15vh;
+                height: 15vh;
+            }
+
+            .button {
+                padding: 20px;
+                background-color: rgb(21, 43, 92);
+                color: white;
+                text-decoration: none;
+                border-radius: 10px;
+                transition: all 0.5s;
+            }
+
+            .button:hover {
+                border-radius: 5px;
+                background-color: rgb(2, 10, 27);
+            }
+        </style>
+    </head>
+    <body>
+        <div class="content">
+            <img src="https://static.janishutz.com/logo.jpg" alt="logo" class="logo">
+            <span class="material-symbols-outlined error">error</span>
+            <h1>Critical Error</h1>
+            <p>A critical error occurred whentrying to connect you. If the issue persists, please contact me</p>
+            <a href="https://support.janishutz.com/index.php?a=add?category=11" class="button">Contact Support</a>
+        </div>
+    </body>
+</html>
diff --git a/static/errors/unavailable.html b/static/errors/unavailable.html
index 9d591a9..931bfac 100644
--- a/static/errors/unavailable.html
+++ b/static/errors/unavailable.html
@@ -4,7 +4,65 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Service unavailable | janishutz.com</title>
-        <link href="/style.css" rel="stylesheet">
+        <style>
+            @import url( 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap' );
+            @import url( 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' );
+
+            body {
+                height: 100vh;
+                width: 100%;
+                padding: 0;
+                margin: 0;
+                font-family: 'Manrope', sans-serif;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+            }
+
+            .material-symbols-outlined {
+                font-variation-settings:
+                'FILL' 0,
+                'wght' 400,
+                'GRAD' 0,
+                'opsz' 48
+            }
+
+            .content {
+                width: 80%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                min-height: 80vh;
+            }
+
+            .error {
+                font-size: 5em;
+            }
+
+            .logo {
+                position: fixed;
+                top: 5px;
+                left: 5px;
+                width: 15vh;
+                height: 15vh;
+            }
+
+            .button {
+                padding: 20px;
+                background-color: rgb(21, 43, 92);
+                color: white;
+                text-decoration: none;
+                border-radius: 10px;
+                transition: all 0.5s;
+            }
+
+            .button:hover {
+                border-radius: 5px;
+                background-color: rgb(2, 10, 27);
+            }
+        </style>
     </head>
     <body>
         <div class="content">
