Skip to content

Commit e462f10

Browse files
ralyodioralyodio
committed
Enhance 404 page with custom styling and improved error handling
1 parent aef8f75 commit e462f10

File tree

3 files changed

+123
-11
lines changed

3 files changed

+123
-11
lines changed

‎public/css/error-page.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/**
2+
* Error page styles
3+
*/
4+
5+
.error-page {
6+
padding: var(--spacing-lg);
7+
margin: var(--spacing-xl) auto;
8+
max-width: 600px;
9+
text-align: center;
10+
background-color: #ffffff !important; /* Force white background in all themes */
11+
border-radius: var(--border-radius-lg);
12+
box-shadow: 0 0 20px rgba(224, 35, 55, 0.5) !important; /* Bright red glow */
13+
color: #111827 !important; /* Force dark text */
14+
border: 3px solid #e02337 !important; /* Bright red border */
15+
display: block !important; /* Ensure it's always displayed */
16+
position: relative;
17+
z-index: 100;
18+
}
19+
20+
/* Dark theme specific styles */
21+
[data-theme="dark"] .error-page {
22+
background-color: #ffffff !important; /* Force white background in dark theme */
23+
border: 3px solid #e02337 !important; /* Bright red border */
24+
color: #111827 !important; /* Force dark text */
25+
}
26+
27+
.error-page h1 {
28+
color: #e02337 !important; /* Bright red */
29+
margin-bottom: var(--spacing-md);
30+
font-size: 2rem;
31+
font-weight: bold;
32+
}
33+
34+
[data-theme="dark"] .error-page h1 {
35+
color: #e02337 !important; /* Bright red */
36+
}
37+
38+
.error-page p {
39+
color: #4b5563 !important; /* Dark gray */
40+
margin-bottom: var(--spacing-lg);
41+
font-size: 1.2rem;
42+
}
43+
44+
[data-theme="dark"] .error-page p {
45+
color: #4b5563 !important; /* Dark gray */
46+
}
47+
48+
.error-page .back-link {
49+
display: inline-block;
50+
padding: var(--spacing-sm) var(--spacing-md);
51+
background-color: #e02337 !important; /* Bright red */
52+
color: white !important;
53+
border-radius: var(--border-radius-md);
54+
text-decoration: none;
55+
transition: background-color var(--transition-fast);
56+
font-weight: bold;
57+
font-size: 1.1rem;
58+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
59+
}
60+
61+
.error-page .back-link:hover {
62+
background-color: #c01d2f !important; /* Darker red */
63+
text-decoration: none;
64+
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
65+
}
66+
67+
[data-theme="dark"] .error-page .back-link {
68+
background-color: #e02337 !important; /* Bright red */
69+
color: white !important;
70+
box-shadow: 0 0 10px rgba(224, 35, 55, 0.4) !important;
71+
}
72+
73+
[data-theme="dark"] .error-page .back-link:hover {
74+
background-color: #c01d2f !important; /* Darker red */
75+
box-shadow: 0 0 15px rgba(224, 35, 55, 0.6) !important;
76+
}

‎public/css/main.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,7 @@
2828
@import url('settings.css');
2929

3030
/* Import API keys CSS for API keys page styling */
31-
@import url('api-keys.css');
31+
@import url('api-keys.css');
32+
33+
/* Import error page CSS for error page styling */
34+
@import url('error-page.css');

‎public/js/main.js‎

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Main application entry point
33
*/
4-
import { Router, transitions } from 'https://esm.sh/@profullstack/spa-router@1.1.0';
4+
import { Router, transitions } from 'https://esm.sh/@profullstack/spa-router@1.2.0';
55

66
// Import components
77
import './components/pf-header.js';
@@ -428,15 +428,48 @@ function initRouter() {
428428

429429
console.log('Rendered content with component preservation and translations');
430430
},
431-
errorHandler: (path) => `
432-
<pf-header></pf-header>
433-
<div class="error-page">
434-
<h1 data-i18n="errors.page_not_found">404 - Page Not Found</h1>
435-
<p data-i18n-params='{"path":"${path}"}' data-i18n="errors.page_not_found_message">The page "${path}" could not be found.</p>
436-
<a href="/" class="back-link" data-i18n="errors.go_back_home">Go back to home</a>
437-
</div>
438-
<pf-footer></pf-footer>
439-
`
431+
errorHandler: (path) => {
432+
// Use a more direct approach that bypasses the router's transition mechanism
433+
// This will be called immediately when the route is not found
434+
setTimeout(() => {
435+
// Get the root element
436+
const rootElement = document.getElementById('app');
437+
438+
// Clear any existing content and overlays
439+
rootElement.innerHTML = '';
440+
441+
// Create the error page content directly
442+
const errorContent = document.createElement('div');
443+
errorContent.innerHTML = `
444+
<pf-header></pf-header>
445+
<div class="content-container" style="display: flex; justify-content: center; align-items: center; min-height: 60vh;">
446+
<div class="error-page">
447+
<h1>404 - Page Not Found</h1>
448+
<p>The page "${path}" could not be found.</p>
449+
<a href="/" class="back-link">Go back to home</a>
450+
</div>
451+
</div>
452+
<pf-footer></pf-footer>
453+
`;
454+
455+
// Append the error content to the root element
456+
rootElement.appendChild(errorContent);
457+
458+
// Dispatch the transition-end event to ensure proper cleanup
459+
document.dispatchEvent(new CustomEvent('spa-transition-end'));
460+
461+
// Remove any remaining transition overlays
462+
const overlays = document.querySelectorAll('.transition-overlay');
463+
overlays.forEach(overlay => {
464+
if (document.body.contains(overlay)) {
465+
document.body.removeChild(overlay);
466+
}
467+
});
468+
}, 0);
469+
470+
// Return an empty string since we're handling the rendering directly
471+
return '';
472+
}
440473
});
441474

442475
// Debug: Try to access the router's internal state

0 commit comments

Comments
 (0)