From 6cf46f6ba5a266b640c775976b8f0f2f15972f83 Mon Sep 17 00:00:00 2001
From: Aditya30ag <adityaagrwal3005@gmail.com>
Date: Thu, 29 Jan 2026 20:39:15 +0530
Subject: [PATCH] style: modernize 404 page UI using Tailwind CSS

replace the tailwind with bootstrap

fix the dropdown

new
---
 DISCOVER/404.html | 268 +++++++++++++++++++++++++---------------------
 1 file changed, 148 insertions(+), 120 deletions(-)
diff --git a/DISCOVER/404.html b/DISCOVER/404.html
index 543b5734b..e3fd6048f 100644
--- a/DISCOVER/404.html
+++ b/DISCOVER/404.html
@@ -3,168 +3,196 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>404 - Not Found</title>
-  <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    body {
-      height: 100vh;
-      background: linear-gradient(135deg, black, #e4f0ff);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: 'Segoe UI', sans-serif;
-      overflow: hidden;
-      position: relative;
-    }
+  <title>404 – Page Not Found</title>
 
-    .light-blur {
-      position: absolute;
-      width: 500px;
-      height: 500px;
-      background: radial-gradient(circle at center, transparent);
-      border-radius: 50%;
-      filter: blur(80px);
-      top: 20%;
-      left: 10%;
-      animation: drift 10s ease-in-out infinite alternate;
-      z-index: 0;
-    }
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
-    @keyframes drift {
-      0%   { transform: translate(0, 0); }
-      100% { transform: translate(60px, 30px); }
+  <style>
+    :root {
+      --bg-start: #000000;
+      --bg-mid: #0a0a0a;
+      --bg-end: #000000;
+      --card-bg: rgba(20,20,20,0.95);
+      --card-border: rgba(255,255,255,0.15);
+      --muted: rgba(255,255,255,0.7);
+      --text-on-card: #ffffff;
+      --select-bg: #1a1a1a;
     }
 
-    .glass-card {
-      background: rgba(255, 255, 255, 0.25);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-      padding: 2.5rem 3rem;
-      border-radius: 20px;
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      max-width: 500px;
-      text-align: center;
-      z-index: 1;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    [data-bs-theme="light"] {
+      --bg-start: #f8fafc;
+      --bg-mid: #f1f5f9;
+      --bg-end: #f8fafc;
+      --card-bg: rgba(255,255,255,0.9);
+      --card-border: rgba(0,0,0,0.08);
+      --muted: rgba(33,37,41,0.6);
+      --text-on-card: #111827;
+      --select-bg: #ffffff;
     }
 
-    h1 {
-      font-size: 2.5em;
-      color: rgb(52, 51, 51);
-      margin-bottom: 0.5rem;
+    body {
+      background: linear-gradient(135deg, var(--bg-start), var(--bg-mid), var(--bg-end));
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
     }
 
-    p {
-      font-size: 1.1em;
-      color: rgb(52, 51, 51);
-      margin-bottom: 1.4rem;
+    .card-custom {
+      background: var(--card-bg);
+      border: 1px solid var(--card-border);
+      backdrop-filter: blur(8px);
+      box-shadow: 0 20px 60px rgba(0,0,0,0.35);
     }
 
-    a {
-      display: inline-block;
-      margin: 0.4rem;
-      padding: 0.6rem 1rem;
-      border-radius: 8px;
-      text-decoration: none;
-      background: #d0bfff;
-      color: #1f1f1f;
-      font-weight: 600;
-      transition: background 0.3s ease;
+    .text-muted-custom { color: var(--muted); }
+    .text-card { color: var(--text-on-card); }
+
+    /* ✅ FIXED SELECT */
+    .select-theme {
+      background-color: var(--select-bg);
+      color: var(--text-on-card);
+      border-color: var(--card-border);
+      color-scheme: light dark;
     }
 
-    a:hover {
-      background: #c1aaff;
+    .select-theme option {
+      background-color: var(--select-bg);
+      color: var(--text-on-card);
     }
 
-    select {
-      margin-top: 1rem;
-      padding: 0.5rem;
-      border-radius: 6px;
-      border: 1px solid #ccc;
-      font-size: 1em;
-      background: #fff;
+    .gradient-text {
+      background: linear-gradient(90deg, #c4a7ff, #8ec6ff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
   </style>
+
+  <script>
+    const applySystemTheme = (e) => {
+      const prefersDark = e && typeof e.matches === 'boolean'
+        ? e.matches
+        : window.matchMedia('(prefers-color-scheme: dark)').matches;
+      document.documentElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');
+    };
+
+    applySystemTheme();
+    window.matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', applySystemTheme);
+  </script>
 </head>
-<body>
-  <div class="light-blur"></div>
-  <div class="glass-card">
-    <h1 id="title">404 - Page Not Found</h1>
-    <p id="message">This page might’ve wandered off or was never here at all.</p>
-    <p id="suggestion">Maybe it was deleted, renamed, or never existed in the first place.</p>
-    <p><strong id="what-do">What can you do?</strong></p>
-    <a href="./intro.html" id="home">⬅️ Back to Home</a>
-    <a href="https://github.com/numfocus/DISCOVER-Cookbook/issues" id="report">🐞 Report the Issue</a>
-
-    <div>
-      <label for="language-switcher" style="display:block; margin-top:1.5rem; color:#444;">🌐 Switch Language:</label>
-      <select id="language-switcher">
-        <option value="en">English</option>
-        <option value="es">Español</option>
-      </select>
-    </div>
 
-    <p id="footer" style="margin-top: 1.2rem;">If you think this is an error, let us know by creating an issue.</p>
+<body class="min-vh-100 d-flex align-items-center justify-content-center overflow-hidden">
+
+  <div class="card card-custom rounded-4 mx-3" style="max-width:48rem;">
+    <div class="card-body text-center px-5 py-5">
+
+      <div class="display-1 fw-bold gradient-text mb-3">404</div>
+
+      <h1 id="title" class="h3 fw-semibold text-card mb-2">
+        Page not found
+      </h1>
+
+      <p id="message" class="lead text-muted-custom mb-2">
+        Looks like this page took a wrong turn.
+      </p>
+
+      <p id="suggestion" class="text-muted-custom mb-4">
+        It may have been removed, renamed, or never existed.
+      </p>
+
+      <div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
+        <a id="home" href="./intro.html" class="btn btn-light btn-lg">
+          ← Go Home
+        </a>
+        <a id="report"
+           href="https://github.com/numfocus/DISCOVER-Cookbook/issues"
+           class="btn btn-outline-secondary btn-lg">
+          Report issue
+        </a>
+      </div>
+
+      <div class="d-flex flex-column align-items-center gap-2">
+        <span class="form-label small text-muted-custom mb-2">
+          Language
+        </span>
+        <div class="btn-group" role="group" aria-label="Language selector">
+          <button type="button" 
+                  id="lang-en" 
+                  class="btn btn-outline-light lang-toggle"
+                  data-lang="en">
+            English
+          </button>
+          <button type="button" 
+                  id="lang-es" 
+                  class="btn btn-outline-light lang-toggle"
+                  data-lang="es">
+            Español
+          </button>
+        </div>
+      </div>
+
+      <p id="footer" class="mt-4 small text-muted-custom">
+        Think this is a mistake? Open an issue and let us know.
+      </p>
+    </div>
   </div>
 
   <script>
     const translations = {
       en: {
-        title: "404 - Page Not Found",
-        message: "This page might’ve wandered off or was never here at all.",
-        suggestion: "Maybe it was deleted, renamed, or never existed in the first place.",
-        whatDo: "What can you do?",
-        home: "⬅️ Back to Home",
-        report: "🐞 Report the Issue",
-        footer: "If you think this is an error, let us know by creating an issue."
+        title: "Page not found",
+        message: "Looks like this page took a wrong turn.",
+        suggestion: "It may have been removed, renamed, or never existed.",
+        home: "← Go Home",
+        report: "Report issue",
+        footer: "Think this is a mistake? Open an issue and let us know."
       },
       es: {
-        title: "404 - Página no encontrada",
-        message: "Esta página se ha perdido o nunca existió.",
-        suggestion: "Tal vez fue eliminada, renombrada o nunca existió.",
-        whatDo: "¿Qué puedes hacer?",
-        home: "⬅️ Volver al inicio",
-        report: "🐞 Informar del problema",
-        footer: "Si crees que esto es un error, infórmanos creando un issue."
+        title: "Página no encontrada",
+        message: "Parece que esta página tomó un desvío incorrecto.",
+        suggestion: "Puede haber sido eliminada, renombrada o nunca existió.",
+        home: "← Volver al inicio",
+        report: "Informar problema",
+        footer: "¿Crees que esto es un error? Abre un issue y haznoslo saber."
       }
     };
 
     function detectLanguage() {
-      const pathLang = location.pathname.split("/")[1];
-      const refLang = new URL(document.referrer || "", location.origin).pathname.split("/")[1];
-      const storedLang = localStorage.getItem("preferredLang");
-      return translations[pathLang]
-        ? pathLang
-        : translations[refLang]
-        ? refLang
-        : translations[storedLang]
-        ? storedLang
-        : "en";
+      const stored = localStorage.getItem("preferredLang");
+      return translations[stored] ? stored : "en";
     }
 
     function applyLanguage(lang) {
-      const t = translations[lang] || translations["en"];
+      const t = translations[lang];
       document.getElementById("title").textContent = t.title;
       document.getElementById("message").textContent = t.message;
       document.getElementById("suggestion").textContent = t.suggestion;
-      document.getElementById("what-do").textContent = t.whatDo;
       document.getElementById("home").textContent = t.home;
       document.getElementById("report").textContent = t.report;
       document.getElementById("footer").textContent = t.footer;
-      document.getElementById("language-switcher").value = lang;
+      
+      // Update toggle buttons
+      document.querySelectorAll('.lang-toggle').forEach(btn => {
+        if (btn.dataset.lang === lang) {
+          btn.classList.remove('btn-outline-light');
+          btn.classList.add('btn-light');
+        } else {
+          btn.classList.remove('btn-light');
+          btn.classList.add('btn-outline-light');
+        }
+      });
+      
       localStorage.setItem("preferredLang", lang);
     }
 
-    const initialLang = detectLanguage();
-    applyLanguage(initialLang);
-
-    document.getElementById("language-switcher").addEventListener("change", function () {
-      applyLanguage(this.value);
+    applyLanguage(detectLanguage());
+    
+    // Add click handlers to language toggle buttons
+    document.querySelectorAll('.lang-toggle').forEach(btn => {
+      btn.addEventListener('click', () => {
+        applyLanguage(btn.dataset.lang);
+      });
     });
   </script>
+
 </body>
 </html>
