Refactored frontend + added template engine

2025-03-26 02:17:05 +01:00
parent c4634a984f
commit d95f5babb8
15 changed files with 335 additions and 528 deletions
@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+{% block title %}404 - Not Found{% endblock %}
+
+{% block content %}
+<div class="flex flex-col items-center justify-center text-center px-4 py-16">
+  <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. 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>
+</div>
+{% endblock %}
@@ -0,0 +1,63 @@
+{% extends "base.html" %}
+{% block title %}About DocuNova{% endblock %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-8">
+  <h1 class="text-4xl font-bold mb-4">About DocuNova</h1>
+  <p class="text-gray-700 mb-6 leading-relaxed">
+    Welcome to <strong>DocuNova</strong> – your modern, intelligent solution for document processing!
+    We’ve built DocuNova to completely transform the way you handle your documents – from upload
+    to extraction, from processing to storage. 
+  </p>
+
+  <!-- Our Story Section -->
+  <section class="bg-white shadow rounded p-6 mb-8">
+    <h2 class="text-2xl font-semibold mb-2">Our Story</h2>
+    <p class="text-gray-600 mb-4">
+      DocuNova was created with one goal in mind: to simplify and streamline document management 
+      for everyone, whether you’re a small startup or a large enterprise.
+    </p>
+    <p class="text-gray-600">
+      We harness the power of OpenAI for metadata extraction and text refinement, integrate seamlessly 
+      with Dropbox, Nextcloud, and Paperless NGX for storage and indexing, leverage Azure Document 
+      Intelligence for OCR, and even use Gotenberg for file-to-PDF conversions.
+    </p>
+  </section>
+
+  <!-- Key Features Section -->
+  <section class="bg-white shadow rounded p-6 mb-8">
+    <h2 class="text-2xl font-semibold mb-2">Key Features</h2>
+    <ul class="list-disc list-inside text-gray-600">
+      <li>Simple and secure file uploads with drag & drop support</li>
+      <li>Automated metadata extraction, indexing, and version control</li>
+      <li>Integration with popular cloud services and storage platforms</li>
+      <li>OCR and intelligent document processing powered by AI</li>
+      <li>IMAP integration for automated document fetching</li>
+      <li>Highly configurable via environment variables</li>
+      <li>Docker-ready for easy deployment</li>
+    </ul>
+  </section>
+
+  <!-- Meet the Creator Section -->
+  <section class="bg-white shadow rounded p-6 mb-8">
+    <h2 class="text-2xl font-semibold mb-2">Meet the Creator</h2>
+    <p class="text-gray-600">
+      DocuNova is passionately developed by
+      <a href="https://www.christianlouis.de" target="_blank" class="text-blue-600 hover:underline">Christian Krakau-Louis</a>.
+    </p>
+  </section>
+
+  <!-- GitHub Link Section -->
+  <section class="bg-white shadow rounded p-6">
+    <h2 class="text-2xl font-semibold mb-2">Get Involved</h2>
+    <p class="text-gray-600 mb-4">
+      Want to dive into the code, contribute ideas, or simply check out the magic behind DocuNova?
+      Visit our GitHub repository!
+    </p>
+    <a href="https://github.com/christianlouis/document-processor" target="_blank" class="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
+      <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Logo" class="h-6 w-6" />
+      <span>View DocuNova on GitHub</span>
+    </a>
+  </section>
+</div>
+{% endblock %}
@@ -0,0 +1,54 @@
+<!-- frontend/templates/base.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>{% block title %}DocuNova{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Tailwind CSS or other global CSS references -->
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
+    {% block head_extra %}{% endblock %}
+  </head>
+
+  <body class="bg-gray-50 min-h-screen flex flex-col">
+    <!-- Global Nav -->
+    <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 -->
+    <main class="flex-grow">
+      {% block content %}{% endblock %}
+    </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>
+
+    <!-- Common JS (shared) -->
+    <script src="/static/js/common.js"></script>
+
+    <!-- Let child pages define extra scripts if needed -->
+    {% block scripts %}{% endblock %}
+  </body>
+</html>
@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{% block title %}Home - DocuNova{% endblock %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-8">
+  <h1 class="text-4xl font-bold mb-4">Welcome to DocuNova</h1>
+  <p class="text-gray-700 mb-8">
+    Your intelligent solution for processing, managing, and organizing documents effortlessly.
+  </p>
+  <!-- Sample sections -->
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <div class="bg-white shadow rounded p-6">
+      <h2 class="text-2xl font-semibold mb-2">Upload Documents</h2>
+      <p class="text-gray-600">
+        Quickly upload and process your files with our user-friendly interface.
+      </p>
+      <a href="/upload" class="mt-4 inline-block text-blue-600 hover:text-blue-800">
+        Get Started &rarr;
+      </a>
+    </div>
+    <div class="bg-white shadow rounded p-6">
+      <h2 class="text-2xl font-semibold mb-2">Manage Your Files</h2>
+      <p class="text-gray-600">
+        View, organize, and collaborate on your processed files in one central hub.
+      </p>
+      <a href="/files" class="mt-4 inline-block text-blue-600 hover:text-blue-800">
+        View Files &rarr;
+      </a>
+    </div>
+  </div>
+</div>
+{% endblock %}
@@ -0,0 +1,83 @@
+{% extends "base.html" %}
+{% block title %}Upload Document{% endblock %}
+
+{% block content %}
+<div class="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>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<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) {
+    // Check file type
+    const acceptedTypes = ['application/pdf'];
+    if (!acceptedTypes.includes(file.type)) {
+      statusMessage.textContent = `Error: Only PDF files are accepted.`;
+      return;
+    }
+    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}`;
+    }
+  }
+</script>
+{% endblock %}