gitea-admin/gh-christianlouis-docuelevate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added more pages and changed project name to DocuNova

Browse Source
This commit is contained in:
Christian Krakau-Louis
2025-03-25 21:57:48 +01:00
parent 0003daadb1
commit 0f82defc01
6 changed files with 419 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+92 -146
View File
@@ -1,146 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Processor - Upload</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Tailwind via CDN or your own build -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-50 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">
Document Processor
</a>
</div>
<!-- Menu items on the right -->
<div class="flex space-x-4 items-center">
<!-- Example link to /upload (current page), or other pages -->
<a href="/upload" class="text-gray-700 hover:text-gray-900">
Upload
</a>
<!-- Placeholder for future pages -->
<a href="/some-other" class="text-gray-700 hover:text-gray-900">
Some Page
</a>
<!-- Dynamic login/logout 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 (optional) -->
<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 Document Processor - All rights reserved.
</div>
</footer>
<!-- JavaScript -->
<script>
// 1) 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}`;
}
}
// 2) Example dynamic auth check: if you have an endpoint like /api/whoami
// that returns JSON with { email: "..."} if logged in, or 401 if not.
(async function checkAuth() {
try {
const resp = await fetch("/api/whoami");
if (resp.ok) {
const data = await resp.json();
// data.picture is the Gravatar URL
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 {
// If 401 or other non-OK status => show Login link
document.getElementById("authSection").innerHTML =
`<a href="/login" class="text-blue-600">Login</a>`;
}
} catch (error) {
// If fetch fails, also show login
document.getElementById("authSection").innerHTML =
`<a href="/login" class="text-blue-600">Login</a>`;
}
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>DocuNova - Intelligent Document Processing</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 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>
</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();
// data.picture is expected to be a Gravatar URL
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>