Skip to content

Commit 96c2346

Browse files
speco29speco29
authored
Add custom 404 page to website (#344)
1 parent 1aee5df commit 96c2346

File tree

3 files changed

+172
-16
lines changed

3 files changed

+172
-16
lines changed

‎.github/workflows/build-gh-pages.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,11 @@ jobs:
2222
run: |
2323
bash ci/build_website.sh
2424
25+
2526
- name: Push book HTML to gh-pages
2627
uses: peaceiris/[email protected]
2728
with:
2829
github_token: ${{ secrets.GITHUB_TOKEN }}
2930
publish_dir: ./DISCOVER/_build/html
3031
keep_files: true
32+

‎DISCOVER/404.html‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<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+
}
23+
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+
}
36+
37+
@keyframes drift {
38+
0% { transform: translate(0, 0); }
39+
100% { transform: translate(60px, 30px); }
40+
}
41+
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);
53+
}
54+
55+
h1 {
56+
font-size: 2.5em;
57+
color: rgb(52, 51, 51);
58+
margin-bottom: 0.5rem;
59+
}
60+
61+
p {
62+
font-size: 1.1em;
63+
color: rgb(52, 51, 51);
64+
margin-bottom: 1.4rem;
65+
}
66+
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;
77+
}
78+
79+
a:hover {
80+
background: #c1aaff;
81+
}
82+
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;
90+
}
91+
</style>
92+
</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>
110+
111+
<p id="footer" style="margin-top: 1.2rem;">If you think this is an error, let us know by creating an issue.</p>
112+
</div>
113+
114+
<script>
115+
const translations = {
116+
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."
124+
},
125+
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."
133+
}
134+
};
135+
136+
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";
147+
}
148+
149+
function applyLanguage(lang) {
150+
const t = translations[lang] || translations["en"];
151+
document.getElementById("title").textContent = t.title;
152+
document.getElementById("message").textContent = t.message;
153+
document.getElementById("suggestion").textContent = t.suggestion;
154+
document.getElementById("what-do").textContent = t.whatDo;
155+
document.getElementById("home").textContent = t.home;
156+
document.getElementById("report").textContent = t.report;
157+
document.getElementById("footer").textContent = t.footer;
158+
document.getElementById("language-switcher").value = lang;
159+
localStorage.setItem("preferredLang", lang);
160+
}
161+
162+
const initialLang = detectLanguage();
163+
applyLanguage(initialLang);
164+
165+
document.getElementById("language-switcher").addEventListener("change", function () {
166+
applyLanguage(this.value);
167+
});
168+
</script>
169+
</body>
170+
</html>

‎DISCOVER/bad-page.md‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)