Files
NebulaBrowser/ui/pages/404.html
T
Andrew Zambazos 207a849f06 Add Nebula Browser app, UI and assets
Add initial Nebula Browser project skeleton: CMakeLists to configure and link CEF (including post-build steps to copy runtime and UI files), a Windows CEF-based entry (app/main.cpp) that initializes CEF and loads the bundled UI, and a full ui/ and assets/ tree (HTML, CSS, JS, fonts, icons, and branding images). Update .gitignore to ignore build/out, thirdparty/cef, IDE and common OS artifacts.
2026-05-13 22:17:58 +12:00

90 lines
5.3 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 !== window) {
window.parent.postMessage({ type:'navigate', url, opts }, '*');
} else if (url === 'nebula://home') {
window.location.href = 'home.html';
} else if (url === 'nebula://settings') {
window.location.href = 'settings.html';
} else {
window.location.href = url;
}
}
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>