File size: 3,705 Bytes
0e3f40f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmniParse AI — Invoice SaaS</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Inter', sans-serif; background-color: #f9fafb; }
.hero-gradient { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); }
</style>
</head>
<body>
<!-- Navbar -->
<nav class="bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-extrabold text-indigo-600">⚡ OmniParse AI</div>
<div class="space-x-6 text-sm font-medium text-gray-600">
<a href="#" class="hover:text-indigo-600">Features</a>
<a href="#" class="hover:text-indigo-600">Pricing</a>
<button onclick="showLogin()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">Get Started</button>
</div>
</nav>
<!-- Hero Section -->
<header class="max-w-6xl mx-auto px-6 py-20 text-center">
<h1 class="text-5xl font-black text-gray-900 mb-6 leading-tight">
Invoice processing in <span class="text-indigo-600">seconds</span>, not hours.
</h1>
<p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10">
AI-powered data extraction for B2B SaaS. Extract vendor details, dates, and line items with 99.2% accuracy.
</p>
<div class="flex justify-center space-x-4">
<button class="bg-indigo-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-indigo-700 shadow-lg transition">Start Free Trial</button>
<button class="bg-white text-gray-900 border border-gray-300 px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-50 transition">View Demo</button>
</div>
</header>
<!-- Placeholder for Dashboard (Visible after login) -->
<div id="dashboard" class="hidden max-w-6xl mx-auto px-6 py-10">
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
<h2 class="text-2xl font-bold mb-6">Your Dashboard</h2>
<div class="grid grid-cols-3 gap-6 mb-8">
<div class="p-6 bg-indigo-50 rounded-xl border border-indigo-100">
<p class="text-sm text-indigo-600 font-bold uppercase tracking-wider">Processed</p>
<p class="text-3xl font-black text-indigo-900">128</p>
</div>
<div class="p-6 bg-green-50 rounded-xl border border-green-100">
<p class="text-sm text-green-600 font-bold uppercase tracking-wider">Accuracy</p>
<p class="text-3xl font-black text-green-900">99.2%</p>
</div>
<div class="p-6 bg-purple-50 rounded-xl border border-purple-100">
<p class="text-sm text-purple-600 font-bold uppercase tracking-wider">Time Saved</p>
<p class="text-3xl font-black text-purple-900">14.5h</p>
</div>
</div>
<!-- Upload Area -->
<div class="border-2 border-dashed border-gray-300 rounded-2xl p-12 text-center hover:border-indigo-400 transition cursor-pointer">
<p class="text-gray-500 font-medium">Click or drag & drop invoices here (PDF, JPG, PNG)</p>
</div>
</div>
</div>
<script>
function showLogin() {
alert("This is the HTML UI skeleton. Business logic is currently running in the Gradio UI (app.py). Connect this frontend to main.py via Fetch API to activate.");
}
</script>
</body>
</html>
|