Skip to content

style: modernize 404 page UI #472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aditya30ag wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style: modernize 404 page UI #472

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 148 additions & 120 deletions DISCOVER/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>