Christian Krakau-Louis
94 lines
3.6 KiB
HTML
94 lines
3.6 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();
|
||
// data.picture is expected to be a Gravatar URL
|
||
const authSection = document.getElementById("authSection");
|
||
authSection.innerHTML = '';
|
||
|
||
const img = document.createElement('img');
|
||
img.src = data.picture;
|
||
img.alt = 'User Avatar';
|
||
img.className = 'inline-block h-8 w-8 rounded-full mr-2';
|
||
|
||
const textNode = document.createTextNode('Logged in as ');
|
||
const strong = document.createElement('strong');
|
||
strong.textContent = data.email;
|
||
|
||
const logoutLink = document.createElement('a');
|
||
logoutLink.href = '/logout';
|
||
logoutLink.className = 'ml-4 text-blue-600 hover:text-blue-800';
|
||
logoutLink.textContent = 'Logout';
|
||
|
||
authSection.appendChild(img);
|
||
authSection.appendChild(textNode);
|
||
authSection.appendChild(strong);
|
||
authSection.appendChild(logoutLink);
|
||
} 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>
|