Christian Krakau-Louis
77 lines
3.1 KiB
HTML
77 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>404 - Oops, DocuNova Lost the Page</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<!-- Tailwind CSS via CDN -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
</head>
|
||
<body class="bg-gradient-to-br from-blue-50 to-white min-h-screen flex flex-col">
|
||
<!-- Navigation Bar -->
|
||
<nav class="bg-white shadow">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between h-16 items-center">
|
||
<!-- Brand -->
|
||
<div class="flex-shrink-0">
|
||
<a href="/" class="text-xl font-bold text-blue-500 hover:text-blue-700">
|
||
DocuNova
|
||
</a>
|
||
</div>
|
||
<!-- Menu Items -->
|
||
<div class="flex space-x-6 items-center">
|
||
<a href="/" class="text-gray-700 hover:text-gray-900">Home</a>
|
||
<a href="/upload" class="text-gray-700 hover:text-gray-900">Upload</a>
|
||
<a href="/about" class="text-gray-700 hover:text-gray-900">About</a>
|
||
<a href="/files" class="text-gray-700 hover:text-gray-900">Files</a>
|
||
<!-- Dynamic Auth Section -->
|
||
<div id="authSection" class="text-gray-700 hover:text-gray-900"></div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Main Content Area -->
|
||
<main class="flex-grow flex flex-col items-center justify-center text-center px-4">
|
||
<div class="max-w-xl">
|
||
<h1 class="text-7xl font-extrabold text-blue-600 mb-6">404</h1>
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-4">Oops, we couldn’t find that page!</h2>
|
||
<p class="text-gray-600 mb-8">
|
||
It seems DocuNova has misplaced the document you were looking for. Whether it got lost in the cloud or hidden between the files, don’t worry – we’ve got your back.
|
||
</p>
|
||
<a href="/" class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors">
|
||
← Return Home
|
||
</a>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-white shadow">
|
||
<div class="max-w-7xl mx-auto px-4 py-4 text-center text-gray-600">
|
||
© 2025 DocuNova. All rights reserved.
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript for Dynamic Auth Section -->
|
||
<script>
|
||
(async function checkAuth() {
|
||
try {
|
||
const resp = await fetch("/api/whoami");
|
||
if (resp.ok) {
|
||
const data = await resp.json();
|
||
document.getElementById("authSection").innerHTML = `
|
||
<img src="${data.picture}" alt="User Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
|
||
Logged in as <strong>${data.email}</strong>
|
||
<a href="/logout" class="ml-4 text-blue-600 hover:text-blue-800">Logout</a>
|
||
`;
|
||
} else {
|
||
document.getElementById("authSection").innerHTML =
|
||
`<a href="/login" class="text-blue-600">Login</a>`;
|
||
}
|
||
} catch (error) {
|
||
document.getElementById("authSection").innerHTML =
|
||
`<a href="/login" class="text-blue-600">Login</a>`;
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|