| <!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> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| |
| |
| <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> |
|
|
