chore: quick 404

PGATOUR · Sep 30, 2022 · 5ab043b · 5ab043b
1 parent eb5e128
commit 5ab043b
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Page not found</title>
+  <script type="text/javascript">
+    window.isErrorPage = true;
+    window.errorCode = '404';
+  </script>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta property="og:title" content="Page not found">
+  <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
+  <script type="module">
+    import { sampleRUM } from '/scripts/scripts.js';
+
+    window.addEventListener('load', () => {
+      if (document.referrer) {
+        const { origin, pathname } = new URL(document.referrer);
+        if (origin === window.location.origin) {
+          const backBtn = document.createElement('a');
+          backBtn.classList.add('button', 'error-button-back');
+          backBtn.href = pathname;
+          backBtn.textContent = 'Go back';
+          backBtn.title = 'Go back';
+          const btnContainer = document.querySelector('.button-container');
+          btnContainer.append(backBtn);
+        }
+      }
+      sampleRUM('404', { source: document.referrer, target: window.location.href });
+    });
+  </script>
+  <link rel="stylesheet" href="/styles/styles.css">
+  <style>
+    main.error {
+      min-height: calc(100vh - var(--nav-height));
+      display: flex;
+      align-items: center;
+    }
+
+    main.error .error-number {
+      width: 100%;
+    }
+
+    main.error .error-number text {
+      font-family: var(--fixed-font-family);
+    }
+
+    main.error {
+      text-align: center;
+      background-image: linear-gradient(#0004, #000c), url('/styles/404-bg.jpg');
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+
+    main.error .section {
+      width: 100vw;
+      color: white;
+    }
+
+    main.error .section h2 {
+      color: white;
+    }
+
+  </style>
+  <link rel="stylesheet" href="/styles/lazy-styles.css">
+</head>
+
+<body>
+  <header></header>
+  <main class="error">
+    <div class="section">
+      <h2 class="error-message">Page not found<br>Let's get you back in play!</h2>
+      <p>The page you are looking for has either been moved, deleted or simply does not exist.</p>
+      <p class="button-container">
+        <a href="/" class="button secondary error-button-home">Go home</a>
+      </p>
+    </div>
+  </main>
+  <footer></footer>
+</body>
+
+</html>
diff --git a/styles/404-bg.jpg b/styles/404-bg.jpg