Refactored frontend + added template engine
This commit is contained in:
Christian Krakau-Louis
@@ -1,93 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,132 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>About DocuNova</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">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. With cutting-edge technologies and a user-first design, DocuNova makes managing your documents as easy as a click.
|
||||
</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. Tired of clunky, outdated systems, we set out to design a platform that is intuitive, flexible, and packed with powerful features.
|
||||
</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. And while we’ve implemented AWS S3 for now, we’re always evolving!
|
||||
</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 for custom workflows</li>
|
||||
<li>Docker-ready for easy deployment and scalability</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>, a visionary committed to solving real-world challenges with innovative technology. His dedication and expertise ensure that every feature in DocuNova is crafted with you in mind.
|
||||
</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 to see the project in action!
|
||||
</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>
|
||||
</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>
|
||||
@@ -1,108 +0,0 @@
|
||||
<!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 →
|
||||
</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 →
|
||||
</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">
|
||||
© 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>
|
||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,46 @@
|
||||
// frontend/static/js/common.js
|
||||
|
||||
(async function checkAuth() {
|
||||
try {
|
||||
const resp = await fetch("/api/whoami");
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
const authSection = document.getElementById("authSection");
|
||||
if (!authSection) return;
|
||||
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 {
|
||||
const authSection = document.getElementById("authSection");
|
||||
if (authSection) {
|
||||
authSection.innerHTML =
|
||||
`<a href="/login" class="text-blue-600">Login</a>`;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// Fallback if whoami endpoint fails
|
||||
const authSection = document.getElementById("authSection");
|
||||
if (authSection) {
|
||||
authSection.innerHTML =
|
||||
`<a href="/login" class="text-blue-600">Login</a>`;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
/* frontend/static/styles.css */
|
||||
/* Example overrides or additional styling */
|
||||
body {
|
||||
/* Your global overrides can go here if needed */
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
← 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">
|
||||
© 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 →
|
||||
</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 →
|
||||
</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 %}
|
||||
@@ -1,157 +0,0 @@
|
||||
<!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">
|
||||
© 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) {
|
||||
// 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}`;
|
||||
}
|
||||
}
|
||||
|
||||
<!-- JavaScript for dynamic auth section -->
|
||||
|
||||
(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>
|
||||
Reference in New Issue
Block a user