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
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>DocuNova - Upload</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 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-4 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 p-8">
+      <h1 class="text-3xl font-bold mb-8">Upload a File</h1>
+
+      <div
+        id="dropZone"
+        class="border-4 border-dashed border-gray-300 rounded-lg p-8 bg-white text-center w-full max-w-lg"
+        ondrop="handleDrop(event)"
+        ondragover="handleDragOver(event)"
+      >
+        <p class="text-gray-500 mb-4">
+          Drag & drop a file here, or click to select a file.
+        </p>
+        <input
+          id="fileInput"
+          type="file"
+          class="hidden"
+          onchange="handleFileSelect(event)"
+        />
+      </div>
+
+      <div id="statusMessage" class="mt-4 text-gray-700"></div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-white shadow mt-auto">
+      <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 -->
+    <script>
+      // Drag-and-drop / file input logic
+      const dropZone = document.getElementById("dropZone");
+      const fileInput = document.getElementById("fileInput");
+      const statusMessage = document.getElementById("statusMessage");
+
+      dropZone.addEventListener("click", () => fileInput.click());
+
+      function handleDragOver(e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "copy";
+        dropZone.classList.add("bg-gray-100");
+      }
+
+      function handleDrop(e) {
+        e.preventDefault();
+        dropZone.classList.remove("bg-gray-100");
+        if (e.dataTransfer.files.length) {
+          uploadFile(e.dataTransfer.files[0]);
+        }
+      }
+
+      function handleFileSelect(e) {
+        if (e.target.files.length) {
+          uploadFile(e.target.files[0]);
+        }
+      }
+
+      async function uploadFile(file) {
+        statusMessage.textContent = `Uploading ${file.name}...`;
+        try {
+          let formData = new FormData();
+          formData.append("file", file);
+          const response = await fetch("/ui-upload", {
+            method: "POST",
+            body: formData,
+          });
+          if (!response.ok) {
+            throw new Error(`Upload failed with status ${response.status}`);
+          }
+          const result = await response.json();
+          statusMessage.textContent = `File ${file.name} uploaded. Task ID: ${result.task_id}`;
+        } catch (err) {
+          statusMessage.textContent = `Error: ${err}`;
+        }
+      }
+
+      // Dynamic auth check using /api/whoami
+      (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>