new 404 page

sandervonk · Aug 6, 2022 · 75a49b0 · 75a49b0
1 parent 63c8e86
commit 75a49b0
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 206 deletions.
diff --git a/404-alt.html b/404-alt.html
diff --git a/404.html b/404.html
@@ -5,159 +5,55 @@
     <link rel="shortcut icon" href="//sander.vonk.one/VITE/img/icon/app/icon-512x512.png" type="image/png" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VITE! | Offline</title>
-    <style>
-      :root {
-        --button-height: 50px;
-      }
-      @media (min-width: 70vh) {
-        :root {
-          --button-height: 12.8vh;
-        }
-      }
-      @media (min-height: 142.85vw) {
-        :root {
-          --button-height: 18.2vw;
-        }
-      }
-      html,
-      body,
-      div,
-      #goto-overlay {
-        width: 100vw;
-        height: 100vh;
-        margin: 0px;
-        padding: 0px;
-      }
-      #splash-img {
-        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDM1MCA1MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzNTAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMTMxRjIyIi8+CjxwYXRoIGQ9Ik0xMDAgMTQxLjcxOEMxMDAgMTI1LjA1MyAxMTMuNTc4IDExMS41NDQgMTMwLjMyOCAxMTEuNTQ0QzEzMC45NDIgMTExLjU0NCAxMzEuNTUyIDExMS41NjIgMTMyLjE1OCAxMTEuNTk4QzEzOS44IDk0LjczNjQgMTU2Ljg0MiA4MyAxNzYuNjM5IDgzQzE5OC42MDQgODMgMjE3LjE3NyA5Ny40NDYzIDIyMy4yODQgMTE3LjMxQzIyMy44NTEgMTE3LjI3MiAyMjQuNDIzIDExNy4yNTIgMjI1IDExNy4yNTJDMjM4LjgwNyAxMTcuMjUyIDI1MCAxMjguMzg5IDI1MCAxNDIuMTI2VjE0Mi4xMjZDMjUwIDE1NS44NjQgMjM4Ljg2NCAxNjcgMjI1LjEyNiAxNjdIMTI1LjI4MkMxMTEuMzE5IDE2NyAxMDAgMTU1LjY4MSAxMDAgMTQxLjcxOFYxNDEuNzE4WiIgZmlsbD0iIzFGMzEzNiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3Ni40NDcgOTEuMTYwMUMxNTguMzA2IDkxLjE2MDEgMTQ2LjE4NSAxMDEuNTU1IDEzOC43NTQgMTE3LjE4MkMxMzcuOTkzIDExOC43ODIgMTM2LjM2MyAxMTkuNzM1IDEzNC42NDkgMTE5LjcwOEMxMzQuNDk1IDExOS43MDUgMTM0LjM0MSAxMTkuNzA0IDEzNC4xODcgMTE5LjcwNEMxMjYuMjg5IDExOS43MDQgMTE5Ljk0OCAxMjIuMDUzIDExNS42MDEgMTI2LjEyOUMxMTEuMjcyIDEzMC4xODggMTA4LjY4MiAxMzYuMTgyIDEwOC42ODIgMTQzLjk2QzEwOC42ODIgMTQ1LjI4NiAxMDcuNjAyIDE0Ni4zNiAxMDYuMjcgMTQ2LjM2QzEwNC45MzggMTQ2LjM2IDEwMy44NTkgMTQ1LjI4NiAxMDMuODU5IDE0My45NkMxMDMuODU5IDEzNS4wNzMgMTA2Ljg1MiAxMjcuNzM5IDExMi4yOTMgMTIyLjYzNkMxMTcuNzE3IDExNy41NSAxMjUuMzM1IDExNC45MDQgMTM0LjE4NyAxMTQuOTA0QzEzNC4yOTIgMTE0LjkwNCAxMzQuMzk3IDExNC45MDQgMTM0LjUwMSAxMTQuOTA1QzE0Mi41MDQgOTguMjIxMyAxNTYuMDMyIDg2LjM2MDEgMTc2LjQ0NyA4Ni4zNjAxQzE3Ny43NzkgODYuMzYwMSAxNzguODU5IDg3LjQzNDYgMTc4Ljg1OSA4OC43NjAxQzE3OC44NTkgOTAuMDg1NiAxNzcuNzc5IDkxLjE2MDEgMTc2LjQ0NyA5MS4xNjAxWiIgZmlsbD0iIzI2M0M0MiIvPgo8cmVjdCB4PSIxMDAiIHk9IjM0MCIgd2lkdGg9IjE1MCIgaGVpZ2h0PSI3MyIgcng9IjEwIiBmaWxsPSIjMUYzMTM2Ii8+CjxyZWN0IHg9IjEwOS44OSIgeT0iMzQyLjQ2MSIgd2lkdGg9IjEzMC4yMiIgaGVpZ2h0PSI2OC4wNzg3IiByeD0iNyIgZmlsbD0iIzI2M0M0MiIvPgo8bWFzayBpZD0ibWFzazBfNjgxXzEwODciIHN0eWxlPSJtYXNrLXR5cGU6YWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjEwOSIgeT0iMzQyIiB3aWR0aD0iMTMyIiBoZWlnaHQ9IjY5Ij4KPHJlY3QgeD0iMTA5Ljg5IiB5PSIzNDIuNDYxIiB3aWR0aD0iMTMwLjIyIiBoZWlnaHQ9IjY4LjA3ODciIHJ4PSI3IiBmaWxsPSIjMjYzQzQyIi8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF82ODFfMTA4NykiPgo8cGF0aCBkPSJNMjIzLjE4IDI5My4yMTdDMjI4Ljc2MiAyODQuNzE5IDI0MC4yMDkgMjgyLjMzNCAyNDguNzQ4IDI4Ny44OUMyNTcuMjg2IDI5My40NDYgMjU5LjY4MyAzMDQuODM4IDI1NC4xIDMxMy4zMzZMMjAyLjg0MiAzOTEuMzYyQzE5Ny4yNTkgMzk5Ljg2IDE4NS44MTIgNDAyLjI0NSAxNzcuMjc0IDM5Ni42ODlDMTY4LjczNSAzOTEuMTMzIDE2Ni4zMzkgMzc5Ljc0MSAxNzEuOTIxIDM3MS4yNDNMMjIzLjE4IDI5My4yMTdaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjA1Ii8+CjxwYXRoIGQ9Ik0xNTAuODM4IDM1Mi40MjJDMTUyLjk2NSAzNDkuMTg1IDE1Ny4zMjUgMzQ4LjI3NyAxNjAuNTc3IDM1MC4zOTNDMTYzLjgyOSAzNTIuNTA5IDE2NC43NDIgMzU2Ljg0OCAxNjIuNjE2IDM2MC4wODVMOTEuNzI2IDQ2Ny45OTRDODkuNTk5OCA0NzEuMjMgODUuMjM5NyA0NzIuMTM5IDgxLjk4NzYgNDcwLjAyM0M3OC43MzU0IDQ2Ny45MDcgNzcuODIyNyA0NjMuNTY4IDc5Ljk0ODkgNDYwLjMzMUwxNTAuODM4IDM1Mi40MjJaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjA1Ii8+CjwvZz4KPHBhdGggZD0iTTE5Mi41IDMxN0MxOTIuNSAzMTguMzgxIDE5My42MTkgMzE5LjUgMTk1IDMxOS41QzE5Ni4zODEgMzE5LjUgMTk3LjUgMzE4LjM4MSAxOTcuNSAzMTdIMTkyLjVaTTE5Ny41IDI1NUMxOTcuNSAyNTMuNjE5IDE5Ni4zODEgMjUyLjUgMTk1IDI1Mi41QzE5My42MTkgMjUyLjUgMTkyLjUgMjUzLjYxOSAxOTIuNSAyNTVIMTk3LjVaTTE1Mi41IDI0MkMxNTIuNSAyNDMuMzgxIDE1My42MTkgMjQ0LjUgMTU1IDI0NC41QzE1Ni4zODEgMjQ0LjUgMTU3LjUgMjQzLjM4MSAxNTcuNSAyNDJIMTUyLjVaTTE1Ny41IDE4MEMxNTcuNSAxNzguNjE5IDE1Ni4zODEgMTc3LjUgMTU1IDE3Ny41QzE1My42MTkgMTc3LjUgMTUyLjUgMTc4LjYxOSAxNTIuNSAxODBIMTU3LjVaTTE5Ny41IDMxN1YyNTVIMTkyLjVWMzE3SDE5Ny41Wk0xNTcuNSAyNDJWMTgwSDE1Mi41VjI0MkgxNTcuNVoiIGZpbGw9IiMyNjNDNDIiLz4KPHBhdGggZD0iTTE5Mi41IDI0MkMxOTIuNSAyNDMuMzgxIDE5My42MTkgMjQ0LjUgMTk1IDI0NC41QzE5Ni4zODEgMjQ0LjUgMTk3LjUgMjQzLjM4MSAxOTcuNSAyNDJIMTkyLjVaTTE5Ny41IDE4MEMxOTcuNSAxNzguNjE5IDE5Ni4zODEgMTc3LjUgMTk1IDE3Ny41QzE5My42MTkgMTc3LjUgMTkyLjUgMTc4LjYxOSAxOTIuNSAxODBIMTk3LjVaTTE4Ni4yMzIgMTg0LjIzMkMxODUuMjU2IDE4NS4yMDkgMTg1LjI1NiAxODYuNzkxIDE4Ni4yMzIgMTg3Ljc2OEMxODcuMjA5IDE4OC43NDQgMTg4Ljc5MSAxODguNzQ0IDE4OS43NjggMTg3Ljc2OEwxODYuMjMyIDE4NC4yMzJaTTE5NSAxNzlMMTk2Ljc2OCAxNzcuMjMyQzE5NS43OTEgMTc2LjI1NiAxOTQuMjA5IDE3Ni4yNTYgMTkzLjIzMiAxNzcuMjMyTDE5NSAxNzlaTTIwMC4yMzIgMTg3Ljc2OEMyMDEuMjA5IDE4OC43NDQgMjAyLjc5MSAxODguNzQ0IDIwMy43NjggMTg3Ljc2OEMyMDQuNzQ0IDE4Ni43OTEgMjA0Ljc0NCAxODUuMjA5IDIwMy43NjggMTg0LjIzMkwyMDAuMjMyIDE4Ny43NjhaTTE1Mi41IDMxN0MxNTIuNSAzMTguMzgxIDE1My42MTkgMzE5LjUgMTU1IDMxOS41QzE1Ni4zODEgMzE5LjUgMTU3LjUgMzE4LjM4MSAxNTcuNSAzMTdIMTUyLjVaTTE1Ny41IDI1NUMxNTcuNSAyNTMuNjE5IDE1Ni4zODEgMjUyLjUgMTU1IDI1Mi41QzE1My42MTkgMjUyLjUgMTUyLjUgMjUzLjYxOSAxNTIuNSAyNTVIMTU3LjVaTTE0OS43NjggMzA5LjIzMkMxNDguNzkxIDMwOC4yNTYgMTQ3LjIwOSAzMDguMjU2IDE0Ni4yMzIgMzA5LjIzMkMxNDUuMjU2IDMxMC4yMDkgMTQ1LjI1NiAzMTEuNzkxIDE0Ni4yMzIgMzEyLjc2OEwxNDkuNzY4IDMwOS4yMzJaTTE1NSAzMThMMTUzLjIzMiAzMTkuNzY4QzE1NC4yMDkgMzIwLjc0NCAxNTUuNzkxIDMyMC43NDQgMTU2Ljc2OCAzMTkuNzY4TDE1NSAzMThaTTE2My43NjggMzEyLjc2OEMxNjQuNzQ0IDMxMS43OTEgMTY0Ljc0NCAzMTAuMjA5IDE2My43NjggMzA5LjIzMkMxNjIuNzkxIDMwOC4yNTYgMTYxLjIwOSAzMDguMjU2IDE2MC4yMzIgMzA5LjIzMkwxNjMuNzY4IDMxMi43NjhaTTE5Ny41IDI0MlYxODBIMTkyLjVWMjQySDE5Ny41Wk0xODkuNzY4IDE4Ny43NjhMMTk2Ljc2OCAxODAuNzY4TDE5My4yMzIgMTc3LjIzMkwxODYuMjMyIDE4NC4yMzJMMTg5Ljc2OCAxODcuNzY4Wk0xOTMuMjMyIDE4MC43NjhMMjAwLjIzMiAxODcuNzY4TDIwMy43NjggMTg0LjIzMkwxOTYuNzY4IDE3Ny4yMzJMMTkzLjIzMiAxODAuNzY4Wk0xNTcuNSAzMTdWMjU1SDE1Mi41VjMxN0gxNTcuNVpNMTQ2LjIzMiAzMTIuNzY4TDE1My4yMzIgMzE5Ljc2OEwxNTYuNzY4IDMxNi4yMzJMMTQ5Ljc2OCAzMDkuMjMyTDE0Ni4yMzIgMzEyLjc2OFpNMTU2Ljc2OCAzMTkuNzY4TDE2My43NjggMzEyLjc2OEwxNjAuMjMyIDMwOS4yMzJMMTUzLjIzMiAzMTYuMjMyTDE1Ni43NjggMzE5Ljc2OFoiIGZpbGw9IiMxRjMxMzYiLz4KPHJlY3QgeD0iMTQ1LjUiIHk9IjIyMC41IiB3aWR0aD0iNTkiIGhlaWdodD0iNTkiIHJ4PSIyOS41IiBmaWxsPSIjMTMxRjIyIiBzdHJva2U9IiMxRjMxMzYiIHN0cm9rZS13aWR0aD0iNSIvPgo8cmVjdCB4PSIxNDAuNSIgeT0iMjE1LjUiIHdpZHRoPSI2OSIgaGVpZ2h0PSI2OSIgcng9IjM0LjUiIHN0cm9rZT0iIzEzMUYyMiIgc3Ryb2tlLXdpZHRoPSI1Ii8+CjxwYXRoIGQ9Ik0xNTMuMjMyIDI2OC4yMzJDMTUyLjI1NiAyNjkuMjA5IDE1Mi4yNTYgMjcwLjc5MSAxNTMuMjMyIDI3MS43NjhDMTU0LjIwOSAyNzIuNzQ0IDE1NS43OTEgMjcyLjc0NCAxNTYuNzY4IDI3MS43NjhMMTUzLjIzMiAyNjguMjMyWk0xOTYuNzY4IDIzMS43NjhDMTk3Ljc0NCAyMzAuNzkxIDE5Ny43NDQgMjI5LjIwOSAxOTYuNzY4IDIyOC4yMzJDMTk1Ljc5MSAyMjcuMjU2IDE5NC4yMDkgMjI3LjI1NiAxOTMuMjMyIDIyOC4yMzJMMTk2Ljc2OCAyMzEuNzY4Wk0xOTMuMjMyIDIyOC4yMzJMMTUzLjIzMiAyNjguMjMyTDE1Ni43NjggMjcxLjc2OEwxOTYuNzY4IDIzMS43NjhMMTkzLjIzMiAyMjguMjMyWiIgZmlsbD0iIzFGMzEzNiIvPgo8L3N2Zz4K");
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-color: #131f22;
-      }
-      #goto-index {
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-        animation: button_load 2.5s 2s linear forwards;
-        overflow: hidden;
-        opacity: 0;
-        transform: translate(-50%, -50%) scale(0.25);
-        cursor: pointer;
-        top: 50%;
-        left: 50%;
-        z-index: 10;
-        width: var(--button-height);
-        height: var(--button-height);
-        background-color: #131f22;
-        border: none;
-        border-radius: calc(var(--button-height) / 2);
-        transform-origin: center center;
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: cover;
-      }
-      #goto-icon {
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        opacity: 0;
-        background-size: calc(var(--button-height) * 0.4);
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-color: #131f22;
-        animation: fade-in 0.25s 4.4s linear forwards;
-        background-image: url(/VITE/img/icon/cm/cm-home.svg);
-      }
-
-      @keyframes fade-in {
-        0% {
-          opacity: 0;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-      @keyframes button_load {
-        0% {
-          opacity: 0;
-          transform: translate(-50%, -50%) scale(0.25);
-          width: var(--button-height);
-        }
-        15% {
-          opacity: 1;
-          transform: translate(-50%, -50%);
-          width: calc(var(--button-height) * 1.5);
-        }
-        20% {
-          opacity: 1;
-          transform: translate(-50%, -50%);
-          width: calc(var(--button-height) * 2);
-          background-image: url(/VITE/img/load/part=loading-1-dark.svg);
-        }
-        40% {
-          opacity: 1;
-          transform: translate(-50%, -50%);
-          width: calc(var(--button-height) * 2);
-          background-image: url(/VITE/img/load/part=loading-2-dark.svg);
-        }
-        60% {
-          opacity: 1;
-          transform: translate(-50%, -50%);
-          width: calc(var(--button-height) * 2);
-          background-image: url(/VITE/img/load/part=loading-3-dark.svg);
-        }
-        80% {
-          opacity: 1;
-          transform: translate(-50%, -50%);
-          width: calc(var(--button-height) * 2);
-          background-image: url(/VITE/img/load/part=loading-1-dark.png);
-          background-size: cover;
-        }
-        90% {
-          opacity: 1;
-          transform: translate(-50%, -50%);
-          width: calc(var(--button-height) * 2);
-          background-size: cover;
-          background-image: none;
-        }
-        100% {
-          opacity: 1;
-          transform: translate(-50%, -50%);
-          width: var(--button-height);
-        }
-      }
-      @keyframes fade-blur-in {
-        0% {
-          opacity: 0;
-          backdrop-filter: none;
-        }
-        100% {
-          opacity: 1;
-          backdrop-filter: blur(5px);
-        }
-      }
-      #goto-overlay,
-      #goto-index {
-        display: flex !important;
-        position: fixed;
-      }
-      #goto-overlay {
-        top: 0;
-        left: 0;
-        background-color: #000000bd;
-        opacity: 0;
-        animation: fade-blur-in 0.25s 1.8s ease-out forwards;
-      }
-    </style>
+    <title>VITE! - 404 Not Found</title>
+    <link rel="stylesheet" href="/VITE/css/fonts.css" />
+    <link rel="stylesheet" href="/VITE/css/stars.css" />
+    <link rel="stylesheet" href="/VITE/404/404.css" />
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="/VITE/404/plax.js"></script>
   </head>
   <body>
-    <div id="goto-overlay">
-      <button id="goto-index" onclick="window.location.href='/VITE/'">
-        <div id="goto-icon"></div>
-      </button>
+    <div id="top-content">
+      <div id="bg-stars"></div>
+      <div id="earth-illustration">
+        <img id="earth-img" src="/VITE/img/earth-new.svg" alt="Earth" />
+        <div id="earth-clouds" src="/VITE/img/earth-clouds.svg" alt="Earth">
+          <div id="earth-clouds-img"></div>
+        </div>
+      </div>
+      <div id="mascot">
+        <img src="/VITE/img/mascot/mood=Have.svg" alt="mascot character" />
+      </div>
+      <div id="error-text">
+        <div id="number-text">404</div>
+        <div id="error-box-container">
+          <div id="error-box-extras" style="display: none"></div>
+          <div id="error-box">Page Not Found</div>
+        </div>
+      </div>
+    </div>
+    <div id="lower-box">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" preserveAspectRatio="none" viewBox="0 0 1680 40" class="position-absolute width-full z-1" style="bottom: -1px">
+        <path d="M0 40h1680V30S1340 0 840 0 0 30 0 30z" fill="var(--secondary-bg)"></path>
+      </svg>
+      <div id="lower-content">
+        <div id="offline-img"></div>
+        <div id="action-btns">
+          <a href="/VITE/app/">
+            <img class="shortcut-icon" src="/VITE/img/icon/cm/cm-home.svg" alt="Home icon" />
+            <div>Home</div></a
+          >
+          <a href="/VITE/">
+            <img class="shortcut-icon" src="/VITE/img/icon/cm/cm-link.svg" alt="Link icon" />
+            <div>Login</div></a
+          >
+          <a href="/VITE/app/practice-setup.html">
+            <img class="shortcut-icon" src="/VITE/img/icon/cm/cm-finish.svg" alt="Practice icon" />
+            <div>Practice</div></a
+          >
+        </div>
+      </div>
     </div>
-    <div id="splash-img"></div>
   </body>
+  <script src="/VITE/404/404.js"></script>
 </html>
diff --git a/404/404.css b/404/404.css
@@ -198,6 +198,9 @@ body {
   #error-text {
     z-index: 1 !important;
   }
+  #offline-img {
+    display: none;
+  }
 }
 @keyframes scroll-bg {
   0% {
@@ -215,7 +218,7 @@ body {
   transform: scale(1.1);
   transform-origin: center;
   background-image: url(/VITE/img/earth-clouds.png);
-  background-size: 1em;
+  background-size: contain;
   background-repeat: repeat-x;
   animation: scroll-bg 30s linear infinite;
 }
@@ -233,20 +236,24 @@ body {
 #offline-img {
   background-image: url(/VITE/img/offline/image-offline.svg);
   background-size: contain;
-  background-repeat: none;
+  background-repeat: no-repeat;
   background-position: center center;
 }
 #action-btns {
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: space-evenly;
-  padding: 40px 0;
+  padding: 40px;
   box-sizing: border-box;
 }
-#action-btns > * {
+#action-btns > a {
   flex-grow: 0;
+  width: 100%;
+  max-width: 500px;
   height: 70px;
+  padding: 20px;
+  box-sizing: border-box;
   flex-shrink: 1;
   border-radius: 20px;
   display: flex;
@@ -259,8 +266,20 @@ body {
   font-size: 30px;
   color: #415f66 !important;
   text-decoration: none !important;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-#action-btns > * > * {
+#action-btns > a > * {
   pointer-events: none;
   user-select: none;
+  height: fit-content;
+  flex-grow: 1;
+  text-align: center;
+}
+#action-btns > a > .shortcut-icon {
+  flex-grow: 0;
+  width: 30px;
+  height: 30px;
+  margin-right: 20px;
 }