added more pages and changed project name to DocuNova

2025-03-25 21:57:48 +01:00
parent 0003daadb1
commit 0f82defc01
6 changed files with 419 additions and 164 deletions
@@ -2,20 +2,75 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>404 - Page not found</title>
+    <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-gray-50 h-screen flex flex-col items-center justify-center">
-    <h1 class="text-4xl font-bold mb-4">404 - Page not found</h1>
-    <p class="text-gray-700 mb-8">
-      Sorry, we couldn’t find the page you’re looking for.
-    </p>
-    <a
-      href="/"
-      class="text-blue-600 underline text-lg hover:text-blue-800"
-    >
-      &larr; Back to home
-    </a>
+  <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">
+          &larr; 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">
+        &copy; 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>