From dbe74411999d2f16cda175a43360a69b03d975ee Mon Sep 17 00:00:00 2001
From: Luc <luc.rousseaupro@gmail.com>
Date: Fri, 27 Mar 2026 14:35:05 +0100
Subject: [PATCH] feat: add custom 404 page for GitHub Pages

---
 404.html | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 404.html
diff --git a/404.html b/404.html
new file mode 100644
index 0000000..d037044
--- /dev/null
+++ b/404.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <script src="assets/js/gtag.js"></script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>404 — Page not found</title>
+    <meta name="robots" content="noindex" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+            },
+          },
+        },
+      }
+    </script>
+    <style type="text/tailwindcss">
+      html, body {
+        height: 100%;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+      @layer components {
+        .btn-primary {
+          @apply bg-indigo-600 text-white py-2.5 px-7 rounded-lg hover:bg-indigo-700 transition duration-200 inline-block text-center font-medium text-sm;
+        }
+
+        .header {
+          @apply bg-white border-b border-gray-200 p-8 text-center dark:bg-gray-900 dark:border-gray-700;
+        }
+
+        .footer {
+          @apply border-t border-gray-100 p-6 text-center mt-auto dark:border-gray-700;
+        }
+      }
+    </style>
+  </head>
+  <body class="bg-stone-50 dark:bg-gray-900 px-2 sm:px-4 font-sans dark:text-gray-200">
+    <main class="flex-1 flex flex-col">
+      <header class="header">
+        <div class="flex items-center justify-between max-w-3xl mx-auto">
+          <span></span>
+          <div class="text-center">
+            <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">Training</h1>
+            <p class="mt-2 text-base text-gray-500 dark:text-gray-400">The page you’re looking for doesn’t exist</p>
+          </div>
+          <button id="dark-mode-toggle" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition" aria-label="Toggle dark mode">
+            <svg id="icon-sun" class="w-5 h-5 hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m8.66-13.66l-.71.71M4.05 19.95l-.71.71M21 12h-1M4 12H3m16.66 7.66l-.71-.71M4.05 4.05l-.71-.71M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+            <svg id="icon-moon" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z"/></svg>
+          </button>
+        </div>
+      </header>
+
+      <section class="max-w-3xl mx-auto w-full mt-10 mb-8 px-4">
+        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8 text-center">
+          <p class="text-xs uppercase tracking-wide text-gray-400">Error</p>
+          <p class="mt-3 text-5xl font-semibold tracking-tight text-gray-900 dark:text-white">404</p>
+          <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">
+            This URL doesn’t match any page on this site. You can go back to the homepage.
+          </p>
+          <div class="mt-8">
+            <a class="btn-primary" href="index.html">Back to home</a>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <script>
+      (function () {
+        const toggle = document.getElementById("dark-mode-toggle");
+        const iconSun = document.getElementById("icon-sun");
+        const iconMoon = document.getElementById("icon-moon");
+        function applyTheme(dark) {
+          document.documentElement.classList.toggle("dark", dark);
+          iconSun.classList.toggle("hidden", !dark);
+          iconMoon.classList.toggle("hidden", dark);
+        }
+        const stored = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        applyTheme(stored === "dark" || (!stored && prefersDark));
+        toggle.addEventListener("click", function () {
+          const isDark = document.documentElement.classList.toggle("dark");
+          localStorage.setItem("theme", isDark ? "dark" : "light");
+          iconSun.classList.toggle("hidden", !isDark);
+          iconMoon.classList.toggle("hidden", isDark);
+        });
+      })();
+    </script>
+
+    <footer class="footer">
+      <p class="text-gray-500 dark:text-gray-400 text-sm">
+        Help improve the questionnaires:
+        <a
+          href="https://github.com/efficience-it/efficience-it.github.io"
+          class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 underline"
+          >This Website</a
+        >
+        &middot;
+        <a
+          href="https://github.com/efficience-it/docker-practice"
+          class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 underline"
+          >Docker&reg; Questions</a
+        >
+      </p>
+      <p class="text-[10px] text-gray-300 mt-2">Docker&reg; and the Docker&reg; logo are trademarks or registered trademarks of Docker, Inc. in the United States and/or other countries.</p>
+    </footer>
+  </body>
+</html>
