122 lines
5.0 KiB
PHP
122 lines
5.0 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
@ini_set('display_errors', '1');
|
||
@error_reporting(E_ALL);
|
||
@date_default_timezone_set('UTC');
|
||
|
||
$phpVersion = PHP_VERSION;
|
||
$now = date('Y-m-d H:i:s');
|
||
?>
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>404 — Lost in Space</title>
|
||
<?php
|
||
// Read project preview data from environment
|
||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||
?>
|
||
<?php if ($projectDescription): ?>
|
||
<!-- Meta description -->
|
||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||
<!-- Open Graph meta tags -->
|
||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||
<!-- Twitter meta tags -->
|
||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||
<?php endif; ?>
|
||
<?php if ($projectImageUrl): ?>
|
||
<!-- Open Graph image -->
|
||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||
<!-- Twitter image -->
|
||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||
<?php endif; ?>
|
||
<meta name="color-scheme" content="dark" />
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time(); ?>">
|
||
</head>
|
||
<body class="space-body">
|
||
<header class="site-header border-bottom">
|
||
<nav class="navbar navbar-expand-lg container py-3">
|
||
<a class="navbar-brand text-white fw-semibold" href="/">Lost in Space</a>
|
||
<div class="ms-auto d-flex align-items-center gap-3">
|
||
<a class="nav-link text-muted" href="/">Home</a>
|
||
<a class="nav-link text-muted" href="#search">Search</a>
|
||
<a class="btn btn-outline-light btn-sm" href="/">Return to Orbit</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="container py-5 position-relative">
|
||
<div class="orbit orbit-lg"></div>
|
||
<div class="orbit orbit-md"></div>
|
||
<div class="orbit orbit-sm"></div>
|
||
|
||
<div class="row align-items-center g-4">
|
||
<div class="col-lg-6">
|
||
<div class="eyebrow text-uppercase text-muted mb-3">Error 404</div>
|
||
<h1 class="display-6 text-white mb-3">This route drifted off course.</h1>
|
||
<p class="lead text-muted mb-4">
|
||
The page you requested isn’t in this quadrant. Let’s guide you back to something useful.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-2">
|
||
<a class="btn btn-light" href="/">Go Home</a>
|
||
<a class="btn btn-outline-light" href="/">Return to Orbit</a>
|
||
<a class="btn btn-outline-secondary" href="#search">Open Search</a>
|
||
</div>
|
||
<p class="small text-muted mt-4">
|
||
Runtime: PHP <?= htmlspecialchars($phpVersion) ?> · Updated <?= htmlspecialchars($now) ?> UTC
|
||
</p>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<section id="search" class="panel">
|
||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||
<h2 class="h6 text-white mb-0">Search the site</h2>
|
||
<span class="badge text-bg-dark border">Optional</span>
|
||
</div>
|
||
<p class="text-muted small mb-4">
|
||
Start with a keyword and we’ll point you to the closest match.
|
||
</p>
|
||
<form id="search-form" class="d-flex flex-column gap-3">
|
||
<input id="search-input" name="q" type="search" class="form-control form-control-dark" placeholder="Try “pricing”, “projects”, or “dashboard”" aria-label="Search the site">
|
||
<button class="btn btn-outline-light w-100" type="submit">Search</button>
|
||
</form>
|
||
<div class="mt-4 small text-muted">
|
||
Suggested next stops:
|
||
<div class="d-flex flex-wrap gap-2 mt-2">
|
||
<a class="chip" href="/">Portfolio</a>
|
||
<a class="chip" href="/">Product</a>
|
||
<a class="chip" href="/">Support</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="container py-4 text-muted small border-top">
|
||
<div class="d-flex flex-wrap justify-content-between gap-2">
|
||
<span>Lost in Space · Premium 404 experience</span>
|
||
<span>Need help? Start from Home or Search.</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||
<div id="searchToast" class="toast text-bg-dark border" role="alert" aria-live="assertive" aria-atomic="true">
|
||
<div class="toast-header text-bg-dark border-0">
|
||
<strong class="me-auto">Navigation</strong>
|
||
<small>Just now</small>
|
||
<button type="button" class="btn-close btn-close-white ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
|
||
</div>
|
||
<div id="searchToastBody" class="toast-body">
|
||
Search isn’t wired yet.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="assets/js/main.js?v=<?= time(); ?>"></script>
|
||
</body>
|
||
</html>
|