| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DocGenius - Document Automation Platform</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .document-preview { |
| min-height: 500px; |
| background-image: linear-gradient(to bottom, #f8fafc 1px, transparent 1px); |
| background-size: 100% 24px; |
| } |
| .template-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| .placeholder-item:hover { |
| background-color: #e2e8f0; |
| } |
| #dropZone { |
| border: 2px dashed #cbd5e0; |
| transition: all 0.3s ease; |
| } |
| #dropZone.drag-over { |
| border-color: #4299e1; |
| background-color: #ebf8ff; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> |
| <div class="p-4 border-b border-gray-200"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-alt text-blue-500 text-2xl mr-3"></i> |
| <h1 class="text-xl font-bold text-gray-800">DocGenius</h1> |
| </div> |
| </div> |
| <div class="flex-1 overflow-y-auto"> |
| <nav class="p-4"> |
| <div class="mb-6"> |
| <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Dashboard</h2> |
| <ul> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-700"> |
| <i class="fas fa-home mr-3 text-blue-500"></i> |
| Overview |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-chart-line mr-3 text-gray-500"></i> |
| Analytics |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div class="mb-6"> |
| <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Documents</h2> |
| <ul> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-file-word mr-3 text-blue-400"></i> |
| Templates |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-file-export mr-3 text-green-400"></i> |
| Generated Files |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-database mr-3 text-purple-400"></i> |
| Data Sources |
| </a> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Settings</h2> |
| <ul> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-user-cog mr-3 text-gray-500"></i> |
| Account |
| </a> |
| </li> |
| <li class="mb-2"> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-shield-alt mr-3 text-gray-500"></i> |
| Security |
| </a> |
| </li> |
| </ul> |
| </div> |
| </nav> |
| </div> |
| <div class="p-4 border-t border-gray-200"> |
| <div class="flex items-center"> |
| <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar"> |
| <div> |
| <p class="text-sm font-medium text-gray-700">Sarah Johnson</p> |
| <p class="text-xs text-gray-500">Admin</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 flex flex-col overflow-hidden"> |
| |
| <header class="bg-white border-b border-gray-200"> |
| <div class="flex items-center justify-between px-6 py-4"> |
| <div class="flex items-center"> |
| <button class="text-gray-500 focus:outline-none mr-4"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <div class="relative"> |
| <input type="text" placeholder="Search templates..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-64"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> |
| <i class="fas fa-bell"></i> |
| </button> |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> |
| <i class="fas fa-question-circle"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
| <div class="mb-6 flex justify-between items-center"> |
| <div> |
| <h2 class="text-2xl font-bold text-gray-800">Document Automation</h2> |
| <p class="text-gray-600">Create, manage, and automate your document workflows</p> |
| </div> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
| <i class="fas fa-plus mr-2"></i> New Template |
| </button> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="p-4 border-b border-gray-200 bg-blue-50"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-medium text-blue-800">Business Proposal</h3> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Active</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-gray-600 text-sm mb-4">Standard business proposal template with company branding and dynamic sections.</p> |
| <div class="flex justify-between items-center text-sm"> |
| <span class="text-gray-500"><i class="fas fa-calendar-alt mr-1"></i> Updated 2 days ago</span> |
| <button class="text-blue-600 hover:text-blue-800">Edit</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="p-4 border-b border-gray-200 bg-green-50"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-medium text-green-800">Monthly Report</h3> |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-gray-600 text-sm mb-4">Automated monthly performance report with charts and data visualization.</p> |
| <div class="flex justify-between items-center text-sm"> |
| <span class="text-gray-500"><i class="fas fa-calendar-alt mr-1"></i> Updated 1 week ago</span> |
| <button class="text-blue-600 hover:text-blue-800">Edit</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
| <div class="p-4 border-b border-gray-200 bg-purple-50"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-medium text-purple-800">Service Contract</h3> |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Draft</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-gray-600 text-sm mb-4">Legal service agreement template with customizable terms and conditions.</p> |
| <div class="flex justify-between items-center text-sm"> |
| <span class="text-gray-500"><i class="fas fa-calendar-alt mr-1"></i> Updated 3 weeks ago</span> |
| <button class="text-blue-600 hover:text-blue-800">Edit</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8"> |
| <div class="border-b border-gray-200"> |
| <div class="flex justify-between items-center px-6 py-3 bg-gray-50"> |
| <h3 class="font-medium text-gray-800">Business Proposal Template</h3> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300">Save Draft</button> |
| <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700">Publish</button> |
| </div> |
| </div> |
| <div class="flex border-b border-gray-200"> |
| <button class="px-4 py-2 text-sm font-medium border-b-2 border-blue-500 text-blue-600">Design</button> |
| <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Data Mapping</button> |
| <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Settings</button> |
| <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Preview</button> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex"> |
| |
| <div class="w-64 pr-6"> |
| <div class="mb-6"> |
| <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Components</h4> |
| <div class="space-y-2"> |
| <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700"> |
| <i class="fas fa-heading mr-2 text-blue-500"></i> Heading |
| </button> |
| <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700"> |
| <i class="fas fa-paragraph mr-2 text-green-500"></i> Paragraph |
| </button> |
| <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700"> |
| <i class="fas fa-list-ol mr-2 text-purple-500"></i> Numbered List |
| </button> |
| <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700"> |
| <i class="fas fa-list-ul mr-2 text-yellow-500"></i> Bullet List |
| </button> |
| <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700"> |
| <i class="fas fa-table mr-2 text-red-500"></i> Table |
| </button> |
| <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700"> |
| <i class="fas fa-image mr-2 text-indigo-500"></i> Image |
| </button> |
| </div> |
| </div> |
| <div> |
| <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Placeholders</h4> |
| <div class="space-y-2"> |
| <div class="placeholder-item px-3 py-2 text-sm rounded-md border border-gray-200 cursor-move flex justify-between items-center"> |
| <span><i class="fas fa-user-tie mr-2 text-blue-400"></i> Client Name</span> |
| <i class="fas fa-grip-vertical text-gray-400"></i> |
| </div> |
| <div class="placeholder-item px-3 py-2 text-sm rounded-md border border-gray-200 cursor-move flex justify-between items-center"> |
| <span><i class="fas fa-building mr-2 text-green-400"></i> Company Name</span> |
| <i class="fas fa-grip-vertical text-gray-400"></i> |
| </div> |
| <div class="placeholder-item px-3 py-2 text-sm rounded-md border border-gray-200 cursor-move flex justify-between items-center"> |
| <span><i class="fas fa-calendar-day mr-2 text-purple-400"></i> Date</span> |
| <i class="fas fa-grip-vertical text-gray-400"></i> |
| </div> |
| <div class="placeholder-item px-3 py-2 text-sm rounded-md border border-gray-200 cursor-move flex justify-between items-center"> |
| <span><i class="fas fa-dollar-sign mr-2 text-yellow-400"></i> Total Amount</span> |
| <i class="fas fa-grip-vertical text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 border-l border-r border-gray-200 px-6"> |
| <div class="document-preview bg-white p-8 rounded border border-gray-200"> |
| <div class="mb-8 text-center"> |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Business Proposal</h1> |
| <p class="text-gray-600">Prepared for: <span class="border-b border-dashed border-gray-400 px-1">[Client Name]</span></p> |
| </div> |
|
|
| <div class="mb-8"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Executive Summary</h2> |
| <p class="text-gray-700 mb-4">This proposal outlines the services to be provided by <span class="bg-blue-100 px-1 rounded">[Company Name]</span> to address your specific business needs. Our team has carefully analyzed your requirements and developed this comprehensive solution.</p> |
| </div> |
|
|
| <div class="mb-8"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Project Details</h2> |
| <div class="mb-4"> |
| <h3 class="font-medium text-gray-800 mb-2">Scope of Work</h3> |
| <ul class="list-disc pl-6 text-gray-700 space-y-1"> |
| <li>Initial consultation and needs assessment</li> |
| <li>Custom solution development</li> |
| <li>Implementation and deployment</li> |
| <li>Ongoing support and maintenance</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="mb-8"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Pricing</h2> |
| <table class="w-full border-collapse"> |
| <thead> |
| <tr class="bg-gray-100"> |
| <th class="text-left p-3 border">Service</th> |
| <th class="text-left p-3 border">Description</th> |
| <th class="text-left p-3 border">Price</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td class="p-3 border">Consultation</td> |
| <td class="p-3 border">Initial assessment</td> |
| <td class="p-3 border">$500</td> |
| </tr> |
| <tr class="bg-gray-50"> |
| <td class="p-3 border">Development</td> |
| <td class="p-3 border">Custom solution</td> |
| <td class="p-3 border">$5,000</td> |
| </tr> |
| <tr> |
| <td class="p-3 border">Support</td> |
| <td class="p-3 border">Monthly maintenance</td> |
| <td class="p-3 border">$1,000/mo</td> |
| </tr> |
| <tr class="bg-gray-100 font-medium"> |
| <td class="p-3 border" colspan="2">Total</td> |
| <td class="p-3 border">$6,500</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
|
|
| <div class="text-sm text-gray-600"> |
| <p>Proposal valid until: <span class="border-b border-dashed border-gray-400 px-1">[Date]</span></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="w-64 pl-6"> |
| <div class="mb-6"> |
| <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Properties</h4> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label> |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option>Roboto</option> |
| <option>Open Sans</option> |
| <option>Montserrat</option> |
| <option>Lato</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Font Size</label> |
| <input type="range" class="w-full" min="10" max="24" value="14"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Line Height</label> |
| <input type="range" class="w-full" min="1" max="2" step="0.1" value="1.5"> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Data Source</h4> |
| <div id="dropZone" class="p-4 rounded-lg text-center mb-4"> |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
| <p class="text-sm text-gray-500">Drag & drop CSV or Excel file here</p> |
| <p class="text-xs text-gray-400 mt-1">or</p> |
| <button class="mt-2 text-sm text-blue-600 hover:text-blue-800">Browse Files</button> |
| </div> |
| <div class="text-xs text-gray-500"> |
| <p>Connected to: <span class="font-medium">CRM System</span></p> |
| <button class="mt-2 text-xs text-blue-600 hover:text-blue-800">Change Connection</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="border-b border-gray-200 px-6 py-3 bg-gray-50"> |
| <h3 class="font-medium text-gray-800">Recent Activity</h3> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-4"> |
| <div class="flex"> |
| <div class="flex-shrink-0 mr-4"> |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-file-export text-blue-500"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-800">Generated 25 proposals</p> |
| <p class="text-sm text-gray-500">2 hours ago</p> |
| </div> |
| <button class="text-blue-600 hover:text-blue-800 text-sm">View</button> |
| </div> |
| <div class="flex"> |
| <div class="flex-shrink-0 mr-4"> |
| <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-edit text-green-500"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-800">Updated contract template</p> |
| <p class="text-sm text-gray-500">Yesterday</p> |
| </div> |
| <button class="text-blue-600 hover:text-blue-800 text-sm">View</button> |
| </div> |
| <div class="flex"> |
| <div class="flex-shrink-0 mr-4"> |
| <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-link text-purple-500"></i> |
| </div> |
| </div> |
| <div class="flex-1"> |
| <p class="text-sm font-medium text-gray-800">Connected to Salesforce</p> |
| <p class="text-sm text-gray-500">3 days ago</p> |
| </div> |
| <button class="text-blue-600 hover:text-blue-800 text-sm">View</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const dropZone = document.getElementById('dropZone'); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropZone.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| dropZone.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| dropZone.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| function highlight() { |
| dropZone.classList.add('drag-over'); |
| } |
| |
| function unhighlight() { |
| dropZone.classList.remove('drag-over'); |
| } |
| |
| dropZone.addEventListener('drop', handleDrop, false); |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| handleFiles(files); |
| } |
| |
| function handleFiles(files) { |
| alert(`File ${files[0].name} ready for processing`); |
| |
| } |
| |
| |
| document.querySelectorAll('.template-card').forEach(card => { |
| card.addEventListener('mouseenter', () => { |
| card.style.transform = 'translateY(-5px)'; |
| card.style.boxShadow = '0 10px 25px -5px rgba(0, 0, 0, 0.1)'; |
| }); |
| card.addEventListener('mouseleave', () => { |
| card.style.transform = ''; |
| card.style.boxShadow = ''; |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.placeholder-item').forEach(item => { |
| item.addEventListener('mouseenter', () => { |
| item.style.backgroundColor = '#e2e8f0'; |
| }); |
| item.addEventListener('mouseleave', () => { |
| item.style.backgroundColor = ''; |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=lpetrov/docgenius" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
