|
|
| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LegalForge Pro | Smart Document Foundry</title> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600&family=Inter:wght@300;400;500&display=swap"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="components/document-editor.js"></script> |
| <script src="components/sidebar-editor.js"></script> |
| <style> |
| :root { |
| --primary: #1a365d; |
| --secondary: #2c5282; |
| --accent: #4299e1; |
| --text: #2d3748; |
| --light-text: #718096; |
| --bg: #f7fafc; |
| --card-bg: #ffffff; |
| --border: #e2e8f0; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background-color: var(--bg); |
| color: var(--text); |
| } |
| |
| .document-preview { |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02); |
| transition: all 0.3s ease; |
| } |
| |
| .document-preview:hover { |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| transform: translateY(-2px); |
| } |
| |
| .template-card { |
| border-left: 4px solid var(--accent); |
| } |
| |
| .dark { |
| --primary: #2b6cb0; |
| --secondary: #4299e1; |
| --accent: #63b3ed; |
| --text: #e2e8f0; |
| --light-text: #a0aec0; |
| --bg: #1a202c; |
| --card-bg: #2d3748; |
| --border: #4a5568; |
| } |
| </style> |
| </head> |
| <body> |
| <editor-sidebar></editor-sidebar> |
| <document-editor></document-editor> |
| |
| <div class="flex justify-between items-center mb-8"> |
| <h1 class="text-3xl font-bold text-gray-800">Meus Documentos</h1> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm transition duration-150 ease-in-out"> |
| + Novo Documento |
| </button> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="document-preview bg-white rounded-lg overflow-hidden border border-gray-200"> |
| <div class="p-4 border-b border-gray-200 bg-gray-50"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-medium text-gray-800">Petição Inicial</h3> |
| <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Ativo</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-sm text-gray-600 mb-4">Modelo para ações de cobrança com base em contrato de prestação de serviços.</p> |
| <div class="flex justify-between text-xs text-gray-500"> |
| <span>Última modificação: 15/06/2023</span> |
| <span>12 campos</span> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 flex justify-end space-x-2 border-t border-gray-200"> |
| <button class="text-sm text-blue-600 hover:text-blue-800">Editar</button> |
| <button class="text-sm text-gray-600 hover:text-gray-800">Duplicar</button> |
| <button class="text-sm text-red-600 hover:text-red-800">Excluir</button> |
| </div> |
| </div> |
|
|
| |
| <div class="document-preview bg-white rounded-lg overflow-hidden border border-gray-200"> |
| <div class="p-4 border-b border-gray-200 bg-gray-50"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-medium text-gray-800">Contrato de Prestação</h3> |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Padrão</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-sm text-gray-600 mb-4">Modelo genérico para contratos de prestação de serviços profissionais.</p> |
| <div class="flex justify-between text-xs text-gray-500"> |
| <span>Última modificação: 02/05/2023</span> |
| <span>28 campos</span> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 flex justify-end space-x-2 border-t border-gray-200"> |
| <button class="text-sm text-blue-600 hover:text-blue-800">Editar</button> |
| <button class="text-sm text-gray-600 hover:text-gray-800">Duplicar</button> |
| <button class="text-sm text-red-600 hover:text-red-800">Excluir</button> |
| </div> |
| </div> |
|
|
| |
| <div class="document-preview bg-white rounded-lg overflow-hidden border border-gray-200"> |
| <div class="p-4 border-b border-gray-200 bg-gray-50"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-medium text-gray-800">Declaração de Dívida</h3> |
| <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Rascunho</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <p class="text-sm text-gray-600 mb-4">Modelo para reconhecimento de dívida com cronograma de pagamento.</p> |
| <div class="flex justify-between text-xs text-gray-500"> |
| <span>Última modificação: 22/06/2023</span> |
| <span>18 campos</span> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 flex justify-end space-x-2 border-t border-gray-200"> |
| <button class="text-sm text-blue-600 hover:text-blue-800">Editar</button> |
| <button class="text-sm text-gray-600 hover:text-gray-800">Duplicar</button> |
| <button class="text-sm text-red-600 hover:text-red-800">Excluir</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-12"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Modelos Disponíveis</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
| |
| <div class="template-card bg-white p-4 rounded-md border border-gray-200"> |
| <div class="text-blue-600 font-medium mb-2">Petição Inicial</div> |
| <p class="text-sm text-gray-600 mb-3">Modelo base para diversas ações judiciais.</p> |
| <button class="w-full bg-gray-100 hover:bg-gray-200 text-gray |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
