From d3883876dc2096142d95ad98e96a1f4fb29b64e8 Mon Sep 17 00:00:00 2001
From: DariusTFox <darius.teperdel.mi@gmail.com>
Date: Mon, 6 Dec 2021 01:51:08 +0200
Subject: [PATCH] Custom 404 page

---
 client/public/404.html | 162 +++++++++++++++++++++++++++++++++--------
 1 file changed, 132 insertions(+), 30 deletions(-)
diff --git a/client/public/404.html b/client/public/404.html
index 829eda8..1de0367 100644
--- a/client/public/404.html
+++ b/client/public/404.html
@@ -1,33 +1,135 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Page Not Found</title>
-
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
-      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>404</h2>
-      <h1>Page Not Found</h1>
-      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
-      <h3>Why am I seeing this?</h3>
-      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Page Not Found</title>
+  <style>
+    body {
+      font-family: Roboto, sans-serif;
+      margin: 0px;
+    }
+
+    .code {
+      position: relative;
+      width: 369px;
+      height: 42.0px;
+
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 36px;
+      line-height: 42px;
+      text-decoration: underline;
+
+      display: flex;
+      align-items: center;
+
+      color: rgba(255, 255, 255, 0.84);
+    }
+
+    .text-msg {
+      position: relative;
+      width: 460px;
+      height: 320px;
+      margin: auto;
+
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 36px;
+      line-height: 42px;
+      text-indent: 8px;
+
+      color: #FFFFFF;
+    }
+
+    .popup {
+      margin: auto;
+      min-width: 500px;
+      min-height: 400px;
+      width: 30%;
+
+      padding: 10px;
+
+      background: linear-gradient(165.31deg, rgba(67, 151, 141, 0.44) 18.49%, rgba(67, 151, 141, 0) 97.15%);
+      box-shadow: 0px 13px 6px 4px rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(12px);
+    }
+
+    .major-blur {
+      height: 100vh;
+      background: rgba(38, 77, 89, 0.199);
+      backdrop-filter: blur(4px);
+
+      display: flex;
+      flex-direction: column;
+    }
+
+    .flex-grow {
+      flex-grow: 1;
+    }
+
+    .button-back {
+      margin: auto;
+      margin-bottom: 16px;
+      width: 269px;
+      height: 69px;
+
+
+      background: linear-gradient(272.39deg, rgba(247, 175, 67, 0.93) -34.2%, rgba(245, 72, 17, 0.93) 100%);
+      box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.25);
+      border-radius: 20px;
+    }
+
+    .bg {
+      background-image: url('/img/Banner.jpg');
+
+      height: 100vh;
+
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-attachment: fixed;
+
+    }
+
+    p {
+      padding-top: 12px;
+      font-size: 28px;
+      text-align: center;
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: normal;
+      line-height: 42px;
+      text-indent: 8px;
+
+      color: #FFFFFF;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="bg">
+    <div class="major-blur flex">
+      <div class="flex-grow"></div>
+        <div class="popup" >
+          <div>
+            <p class="code">404 Page not Found</p>
+            <p class="text-msg">It appears that you’ve wandered too far from the forest, press the magic button below to get back.</p>
+            
+            <a style="text-decoration: none;" href="https://foxbank-69.web.app/" >
+              <div class="button-back">
+                <p  class="text-center">Take me back!</p>
+              </div>
+            </a>
+          </div>
+        </div>
+      <div class="flex-grow"></div>
     </div>
-  </body>
+  </div>  
+
+</body>
+
 </html>
