Skip to content

Commit 6cf46f6

Browse files
Aditya30agAditya30ag
committed
style: modernize 404 page UI using Tailwind CSS
replace the tailwind with bootstrap fix the dropdown new
1 parent cfef68c commit 6cf46f6

1 file changed

Lines changed: 148 additions & 120 deletions

File tree

‎DISCOVER/404.html‎

Lines changed: 148 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -3,168 +3,196 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6-
<title>404 - Not Found</title>
7-
<style>
8-
* {
9-
box-sizing: border-box;
10-
margin: 0;
11-
padding: 0;
12-
}
13-
body {
14-
height: 100vh;
15-
background: linear-gradient(135deg, black, #e4f0ff);
16-
display: flex;
17-
align-items: center;
18-
justify-content: center;
19-
font-family: 'Segoe UI', sans-serif;
20-
overflow: hidden;
21-
position: relative;
22-
}
6+
<title>404 – Page Not Found</title>
237

24-
.light-blur {
25-
position: absolute;
26-
width: 500px;
27-
height: 500px;
28-
background: radial-gradient(circle at center, transparent);
29-
border-radius: 50%;
30-
filter: blur(80px);
31-
top: 20%;
32-
left: 10%;
33-
animation: drift 10s ease-in-out infinite alternate;
34-
z-index: 0;
35-
}
8+
<!-- Bootstrap CSS -->
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
3610

37-
@keyframes drift {
38-
0% { transform: translate(0, 0); }
39-
100% { transform: translate(60px, 30px); }
11+
<style>
12+
:root {
13+
--bg-start: #000000;
14+
--bg-mid: #0a0a0a;
15+
--bg-end: #000000;
16+
--card-bg: rgba(20,20,20,0.95);
17+
--card-border: rgba(255,255,255,0.15);
18+
--muted: rgba(255,255,255,0.7);
19+
--text-on-card: #ffffff;
20+
--select-bg: #1a1a1a;
4021
}
4122

42-
.glass-card {
43-
background: rgba(255, 255, 255, 0.25);
44-
backdrop-filter: blur(12px);
45-
-webkit-backdrop-filter: blur(12px);
46-
padding: 2.5rem 3rem;
47-
border-radius: 20px;
48-
border: 1px solid rgba(255, 255, 255, 0.3);
49-
max-width: 500px;
50-
text-align: center;
51-
z-index: 1;
52-
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
23+
[data-bs-theme="light"] {
24+
--bg-start: #f8fafc;
25+
--bg-mid: #f1f5f9;
26+
--bg-end: #f8fafc;
27+
--card-bg: rgba(255,255,255,0.9);
28+
--card-border: rgba(0,0,0,0.08);
29+
--muted: rgba(33,37,41,0.6);
30+
--text-on-card: #111827;
31+
--select-bg: #ffffff;
5332
}
5433

55-
h1 {
56-
font-size: 2.5em;
57-
color: rgb(52, 51, 51);
58-
margin-bottom: 0.5rem;
34+
body {
35+
background: linear-gradient(135deg, var(--bg-start), var(--bg-mid), var(--bg-end));
36+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
5937
}
6038

61-
p {
62-
font-size: 1.1em;
63-
color: rgb(52, 51, 51);
64-
margin-bottom: 1.4rem;
39+
.card-custom {
40+
background: var(--card-bg);
41+
border: 1px solid var(--card-border);
42+
backdrop-filter: blur(8px);
43+
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
6544
}
6645

67-
a {
68-
display: inline-block;
69-
margin: 0.4rem;
70-
padding: 0.6rem 1rem;
71-
border-radius: 8px;
72-
text-decoration: none;
73-
background: #d0bfff;
74-
color: #1f1f1f;
75-
font-weight: 600;
76-
transition: background 0.3s ease;
46+
.text-muted-custom { color: var(--muted); }
47+
.text-card { color: var(--text-on-card); }
48+
49+
/* ✅ FIXED SELECT */
50+
.select-theme {
51+
background-color: var(--select-bg);
52+
color: var(--text-on-card);
53+
border-color: var(--card-border);
54+
color-scheme: light dark;
7755
}
7856

79-
a:hover {
80-
background: #c1aaff;
57+
.select-theme option {
58+
background-color: var(--select-bg);
59+
color: var(--text-on-card);
8160
}
8261

83-
select {
84-
margin-top: 1rem;
85-
padding: 0.5rem;
86-
border-radius: 6px;
87-
border: 1px solid #ccc;
88-
font-size: 1em;
89-
background: #fff;
62+
.gradient-text {
63+
background: linear-gradient(90deg, #c4a7ff, #8ec6ff);
64+
-webkit-background-clip: text;
65+
-webkit-text-fill-color: transparent;
9066
}
9167
</style>
68+
69+
<script>
70+
const applySystemTheme = (e) => {
71+
const prefersDark = e && typeof e.matches === 'boolean'
72+
? e.matches
73+
: window.matchMedia('(prefers-color-scheme: dark)').matches;
74+
document.documentElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');
75+
};
76+
77+
applySystemTheme();
78+
window.matchMedia('(prefers-color-scheme: dark)')
79+
.addEventListener('change', applySystemTheme);
80+
</script>
9281
</head>
93-
<body>
94-
<div class="light-blur"></div>
95-
<div class="glass-card">
96-
<h1 id="title">404 - Page Not Found</h1>
97-
<p id="message">This page might’ve wandered off or was never here at all.</p>
98-
<p id="suggestion">Maybe it was deleted, renamed, or never existed in the first place.</p>
99-
<p><strong id="what-do">What can you do?</strong></p>
100-
<a href="./intro.html" id="home">⬅️ Back to Home</a>
101-
<a href="https://github.com/numfocus/DISCOVER-Cookbook/issues" id="report">🐞 Report the Issue</a>
102-
103-
<div>
104-
<label for="language-switcher" style="display:block; margin-top:1.5rem; color:#444;">🌐 Switch Language:</label>
105-
<select id="language-switcher">
106-
<option value="en">English</option>
107-
<option value="es">Español</option>
108-
</select>
109-
</div>
11082

111-
<p id="footer" style="margin-top: 1.2rem;">If you think this is an error, let us know by creating an issue.</p>
83+
<body class="min-vh-100 d-flex align-items-center justify-content-center overflow-hidden">
84+
85+
<div class="card card-custom rounded-4 mx-3" style="max-width:48rem;">
86+
<div class="card-body text-center px-5 py-5">
87+
88+
<div class="display-1 fw-bold gradient-text mb-3">404</div>
89+
90+
<h1 id="title" class="h3 fw-semibold text-card mb-2">
91+
Page not found
92+
</h1>
93+
94+
<p id="message" class="lead text-muted-custom mb-2">
95+
Looks like this page took a wrong turn.
96+
</p>
97+
98+
<p id="suggestion" class="text-muted-custom mb-4">
99+
It may have been removed, renamed, or never existed.
100+
</p>
101+
102+
<div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
103+
<a id="home" href="./intro.html" class="btn btn-light btn-lg">
104+
← Go Home
105+
</a>
106+
<a id="report"
107+
href="https://github.com/numfocus/DISCOVER-Cookbook/issues"
108+
class="btn btn-outline-secondary btn-lg">
109+
Report issue
110+
</a>
111+
</div>
112+
113+
<div class="d-flex flex-column align-items-center gap-2">
114+
<span class="form-label small text-muted-custom mb-2">
115+
Language
116+
</span>
117+
<div class="btn-group" role="group" aria-label="Language selector">
118+
<button type="button"
119+
id="lang-en"
120+
class="btn btn-outline-light lang-toggle"
121+
data-lang="en">
122+
English
123+
</button>
124+
<button type="button"
125+
id="lang-es"
126+
class="btn btn-outline-light lang-toggle"
127+
data-lang="es">
128+
Español
129+
</button>
130+
</div>
131+
</div>
132+
133+
<p id="footer" class="mt-4 small text-muted-custom">
134+
Think this is a mistake? Open an issue and let us know.
135+
</p>
136+
</div>
112137
</div>
113138

114139
<script>
115140
const translations = {
116141
en: {
117-
title: "404 - Page Not Found",
118-
message: "This page might’ve wandered off or was never here at all.",
119-
suggestion: "Maybe it was deleted, renamed, or never existed in the first place.",
120-
whatDo: "What can you do?",
121-
home: "⬅️ Back to Home",
122-
report: "🐞 Report the Issue",
123-
footer: "If you think this is an error, let us know by creating an issue."
142+
title: "Page not found",
143+
message: "Looks like this page took a wrong turn.",
144+
suggestion: "It may have been removed, renamed, or never existed.",
145+
home: "← Go Home",
146+
report: "Report issue",
147+
footer: "Think this is a mistake? Open an issue and let us know."
124148
},
125149
es: {
126-
title: "404 - Página no encontrada",
127-
message: "Esta página se ha perdido o nunca existió.",
128-
suggestion: "Tal vez fue eliminada, renombrada o nunca existió.",
129-
whatDo: "¿Qué puedes hacer?",
130-
home: "⬅️ Volver al inicio",
131-
report: "🐞 Informar del problema",
132-
footer: "Si crees que esto es un error, infórmanos creando un issue."
150+
title: "Página no encontrada",
151+
message: "Parece que esta página tomó un desvío incorrecto.",
152+
suggestion: "Puede haber sido eliminada, renombrada o nunca existió.",
153+
home: "← Volver al inicio",
154+
report: "Informar problema",
155+
footer: "¿Crees que esto es un error? Abre un issue y haznoslo saber."
133156
}
134157
};
135158

136159
function detectLanguage() {
137-
const pathLang = location.pathname.split("/")[1];
138-
const refLang = new URL(document.referrer || "", location.origin).pathname.split("/")[1];
139-
const storedLang = localStorage.getItem("preferredLang");
140-
return translations[pathLang]
141-
? pathLang
142-
: translations[refLang]
143-
? refLang
144-
: translations[storedLang]
145-
? storedLang
146-
: "en";
160+
const stored = localStorage.getItem("preferredLang");
161+
return translations[stored] ? stored : "en";
147162
}
148163

149164
function applyLanguage(lang) {
150-
const t = translations[lang] || translations["en"];
165+
const t = translations[lang];
151166
document.getElementById("title").textContent = t.title;
152167
document.getElementById("message").textContent = t.message;
153168
document.getElementById("suggestion").textContent = t.suggestion;
154-
document.getElementById("what-do").textContent = t.whatDo;
155169
document.getElementById("home").textContent = t.home;
156170
document.getElementById("report").textContent = t.report;
157171
document.getElementById("footer").textContent = t.footer;
158-
document.getElementById("language-switcher").value = lang;
172+
173+
// Update toggle buttons
174+
document.querySelectorAll('.lang-toggle').forEach(btn => {
175+
if (btn.dataset.lang === lang) {
176+
btn.classList.remove('btn-outline-light');
177+
btn.classList.add('btn-light');
178+
} else {
179+
btn.classList.remove('btn-light');
180+
btn.classList.add('btn-outline-light');
181+
}
182+
});
183+
159184
localStorage.setItem("preferredLang", lang);
160185
}
161186

162-
const initialLang = detectLanguage();
163-
applyLanguage(initialLang);
164-
165-
document.getElementById("language-switcher").addEventListener("change", function () {
166-
applyLanguage(this.value);
187+
applyLanguage(detectLanguage());
188+
189+
// Add click handlers to language toggle buttons
190+
document.querySelectorAll('.lang-toggle').forEach(btn => {
191+
btn.addEventListener('click', () => {
192+
applyLanguage(btn.dataset.lang);
193+
});
167194
});
168195
</script>
196+
169197
</body>
170198
</html>

0 commit comments

Comments
 (0)