andrew
59118da998
Revamps the 404.html page with a modern dark-themed design, enhanced layout, and improved messaging. Adds responsive styles, a prominent error icon, clearer action buttons, and displays the attempted URL. Refactors JavaScript for better navigation handling and integration with Electron or parent window messaging.
84 lines
5.0 KiB
HTML
84 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>404 - Page Not Found</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<style>
|
|
:root {
|
|
--bg:#121212; --panel:#1e1e1e; --warn:#d97706; --danger:#dc2626; --text:#f5f5f5; --muted:#9ca3af; --accent:#6366f1;
|
|
color-scheme: dark;
|
|
}
|
|
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,sans-serif; background:var(--bg); color:var(--text); display:flex; min-height:100vh; align-items:center; justify-content:center; padding:32px; }
|
|
.card { max-width:780px; width:100%; background:linear-gradient(145deg,#1c1c1c,#242424); border:1px solid #2c2c2c; border-radius:20px; padding:40px 46px 48px; box-shadow:0 8px 28px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,0.04); position:relative; overflow:hidden; }
|
|
.card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.08),transparent 55%), radial-gradient(circle at 82% 78%,rgba(255,255,255,.05),transparent 60%); pointer-events:none; }
|
|
h1 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); margin:0 0 12px; letter-spacing:-.5px; display:flex; align-items:center; gap:.6rem; }
|
|
h1 svg { width:28px; height:28px; flex-shrink:0; }
|
|
h1 span.badge { font-size:12px; letter-spacing:1px; padding:4px 8px; border:1px solid var(--danger); color:var(--danger); border-radius:999px; text-transform:uppercase; background:rgba(220,38,38,0.1); }
|
|
p.lede { font-size:1.05rem; line-height:1.55; margin:0 0 22px; color:var(--muted); }
|
|
code { background:#252525; padding:3px 6px; border-radius:6px; font-size:.9rem; color:#e0e0e0; }
|
|
.url-box { font-family:monospace; font-size:.92rem; padding:10px 12px; background:#181818; border:1px solid #2a2a2a; border-radius:10px; word-break:break-all; margin:0 0 22px; display:flex; align-items:center; gap:.75rem; }
|
|
.url-box svg { flex:0 0 auto; width:22px; height:22px; stroke:var(--danger); }
|
|
ul { margin:0 0 26px 1.1rem; padding:0; line-height:1.5; color:var(--muted); }
|
|
ul li { margin-bottom:6px; }
|
|
.actions { display:flex; flex-wrap:wrap; gap:14px; }
|
|
button { cursor:pointer; font-size:.95rem; letter-spacing:.4px; font-weight:500; border-radius:12px; padding:14px 26px; border:1px solid transparent; background:linear-gradient(135deg,#303030,#252525); color:#fff; position:relative; overflow:hidden; transition:.25s; }
|
|
button.primary { background:linear-gradient(135deg,#6366f1,#5145cd); box-shadow:0 4px 18px -4px rgba(99,102,241,.5); }
|
|
button.outline { background:transparent; border-color:#444; }
|
|
button:hover { filter:brightness(1.12); transform:translateY(-2px); }
|
|
button:active { transform:translateY(0); filter:brightness(.9); }
|
|
.mini { font-size:.75rem; text-transform:uppercase; letter-spacing:1px; opacity:.8; margin-top:24px; }
|
|
.fade-in { animation:fade .5s ease .05s both; }
|
|
@keyframes fade { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
|
|
.grid { display:grid; gap:40px; }
|
|
@media (max-width:760px){ .card{padding:34px 28px 40px;} h1{font-size:2rem;} }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card fade-in">
|
|
<h1>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
|
|
Page Not Found <span class="badge">404</span>
|
|
</h1>
|
|
<p class="lede">The page you're looking for doesn't exist or has been moved. You've warped into an unknown sector of the web.</p>
|
|
<div class="url-box" id="targetBox" title="Attempted URL"></div>
|
|
<ul>
|
|
<li>The URL might be typed incorrectly.</li>
|
|
<li>The page may have been removed or relocated.</li>
|
|
<li>The link you followed could be outdated or broken.</li>
|
|
<li>Try going back or navigate to the home page.</li>
|
|
</ul>
|
|
<div class="actions">
|
|
<button id="backBtn" class="outline" aria-label="Go Back">Go Back</button>
|
|
<button id="homeBtn" class="primary" aria-label="Go to Home">Go to Home</button>
|
|
<button id="settingsBtn" aria-label="Open Settings">Open Settings</button>
|
|
</div>
|
|
<div class="mini">Nebula Navigation Error</div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
const params = new URLSearchParams(location.search);
|
|
const attemptedUrl = params.get('url');
|
|
const box = document.getElementById('targetBox');
|
|
if (attemptedUrl) {
|
|
box.textContent = decodeURIComponent(attemptedUrl);
|
|
} else {
|
|
box.textContent = 'Unknown URL';
|
|
}
|
|
|
|
function sendNavigate(url, opts){
|
|
if (window.electronAPI && window.electronAPI.sendToHost){
|
|
window.electronAPI.sendToHost('navigate', url, opts||{});
|
|
} else if (window.parent) {
|
|
window.parent.postMessage({ type:'navigate', url, opts }, '*');
|
|
}
|
|
}
|
|
|
|
document.getElementById('backBtn').onclick = () => history.length > 1 ? history.back() : sendNavigate('nebula://home');
|
|
document.getElementById('homeBtn').onclick = () => sendNavigate('nebula://home');
|
|
document.getElementById('settingsBtn').onclick = () => window.location.href = "settings.html";
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|