| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LegalData Manager - Portal do Cliente</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> |
| .drop-zone { border: 2px dashed #c7d2fe; transition: all 0.3s; } |
| .drop-zone.dragover { border-color: #6366f1; background: #eef2ff; } |
| .step-circle { transition: all 0.3s; } |
| .step-circle.active { background: #4F46E5; color: white; } |
| .step-circle.completed { background: #10B981; color: white; } |
| .step-line.active { background: #4F46E5; } |
| .toast { transform: translateX(120%); transition: transform 0.4s ease; } |
| .toast.show { transform: translateX(0); } |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } |
| .fade-in { animation: fadeIn 0.5s ease; } |
| .file-item { animation: fadeIn 0.3s ease; } |
| </style> |
| </head> |
| <body class="bg-gradient-to-br from-indigo-50 via-white to-purple-50 min-h-screen"> |
| |
| <div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div> |
|
|
| <div class="min-h-screen flex flex-col"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center"> |
| <i class="fas fa-balance-scale text-white text-lg"></i> |
| </div> |
| <div> |
| <h1 class="text-lg font-bold text-gray-800">LegalData Manager</h1> |
| <p class="text-xs text-gray-500">Portal do Cliente</p> |
| </div> |
| </div> |
| <a href="index.html" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center"> |
| <i class="fas fa-arrow-left mr-1"></i> Área Administrativa |
| </a> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 max-w-4xl mx-auto w-full px-4 py-8"> |
| |
| <div class="flex items-center justify-center mb-8"> |
| <div class="flex items-center space-x-2"> |
| <div class="step-circle active w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-indigo-600" id="step-1">1</div> |
| <div class="step-line w-16 h-1 bg-gray-200 rounded" id="line-1"></div> |
| <div class="step-circle w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-gray-300 text-gray-400" id="step-2">2</div> |
| <div class="step-line w-16 h-1 bg-gray-200 rounded" id="line-2"></div> |
| <div class="step-circle w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm border-2 border-gray-300 text-gray-400" id="step-3">3</div> |
| </div> |
| </div> |
|
|
| |
| <div id="form-step-1" class="fade-in"> |
| <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8 mb-6"> |
| <div class="text-center mb-6"> |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-user-plus text-2xl text-indigo-600"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">Cadastro de Cliente</h2> |
| <p class="text-gray-500 mt-1">Preencha seus dados para se cadastrar no escritório</p> |
| </div> |
|
|
| <form id="client-form" onsubmit="return handleClientSubmit(event)"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome Completo *</label> |
| <input type="text" id="reg-nome" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Seu nome completo"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Pessoa *</label> |
| <select id="reg-tipo" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option value="pf">Pessoa Física</option> |
| <option value="pj">Pessoa Jurídica</option> |
| </select> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">CPF/CNPJ *</label> |
| <input type="text" id="reg-cpfcnpj" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="000.000.000-00"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">RG/Inscrição Estadual</label> |
| <input type="text" id="reg-rg" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Opcional"> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">E-mail *</label> |
| <input type="email" id="reg-email" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="seu@email.com"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Telefone *</label> |
| <input type="text" id="reg-telefone" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="(00) 00000-0000"> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Endereço Completo</label> |
| <input type="text" id="reg-endereco" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Rua, número, complemento, bairro, cidade - UF"> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Profissão</label> |
| <input type="text" id="reg-profissao" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Sua profissão"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Estado Civil</label> |
| <select id="reg-estadocivil" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option value="">Selecione</option> |
| <option>Solteiro(a)</option> |
| <option>Casado(a)</option> |
| <option>Divorciado(a)</option> |
| <option>Viúvo(a)</option> |
| <option>Separado(a)</option> |
| <option>União Estável</option> |
| </select> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Processo</label> |
| <select id="reg-tipo-processo" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option value="">Selecione</option> |
| <option value="civel">Cível</option> |
| <option value="trabalhista">Trabalhista</option> |
| <option value="tributario">Tributário</option> |
| <option value="criminal">Criminal</option> |
| <option value="familia">Família</option> |
| <option value="consumidor">Consumidor</option> |
| <option value="previdenciario">Previdenciário</option> |
| <option value="outro">Outro</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Descrição do Caso</label> |
| <textarea id="reg-descricao" rows="4" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Descreva brevemente sua situação..."></textarea> |
| </div> |
| <div class="mb-4"> |
| <label class="flex items-start space-x-2"> |
| <input type="checkbox" required class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 mt-1"> |
| <span class="text-sm text-gray-600">Declaro que as informações fornecidas são verdadeiras e autorizo o uso dos dados para fins de prestação de serviços jurídicos, conforme a LGPD.</span> |
| </label> |
| </div> |
| <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-semibold text-lg"> |
| <i class="fas fa-arrow-right mr-2"></i> Próximo - Enviar Provas |
| </button> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div id="form-step-2" class="hidden fade-in"> |
| <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8 mb-6"> |
| <div class="text-center mb-6"> |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-cloud-upload-alt text-2xl text-purple-600"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">Envio de Provas</h2> |
| <p class="text-gray-500 mt-1">Envie documentos, fotos, vídeos ou áudios relacionados ao seu caso</p> |
| </div> |
|
|
| <div id="drop-zone-client" class="drop-zone rounded-xl p-8 text-center cursor-pointer mb-4" onclick="document.getElementById('client-file-input').click()" ondragover="event.preventDefault();this.classList.add('dragover')" ondragleave="this.classList.remove('dragover')" ondrop="event.preventDefault();this.classList.remove('dragover');handleClientFileDrop(event)"> |
| <i class="fas fa-cloud-upload-alt text-5xl text-indigo-300 mb-3"></i> |
| <p class="text-lg text-gray-500 mb-1">Arraste arquivos aqui</p> |
| <p class="text-sm text-gray-400">ou clique para selecionar</p> |
| <p class="text-xs text-gray-400 mt-2">Imagens, PDFs, vídeos e áudios — até 10MB cada</p> |
| <input type="file" id="client-file-input" class="hidden" multiple accept="image/*,.pdf,video/*,audio/*" onchange="handleClientFileSelect(event)"> |
| </div> |
|
|
| <div id="client-files-list" class="space-y-2 mb-4"></div> |
|
|
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Categoria das Provas</label> |
| <select id="client-ev-category" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option value="documento">Documento</option> |
| <option value="foto">Foto</option> |
| <option value="video">Vídeo</option> |
| <option value="audio">Áudio</option> |
| <option value="outro">Outro</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Observações</label> |
| <textarea id="client-ev-notes" rows="2" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Informações adicionais sobre as provas..."></textarea> |
| </div> |
|
|
| <div class="flex space-x-3"> |
| <button onclick="goToStep(1)" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg hover:bg-gray-200 transition font-semibold"> |
| <i class="fas fa-arrow-left mr-2"></i> Voltar |
| </button> |
| <button onclick="submitClientEvidence()" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-semibold"> |
| <i class="fas fa-paper-plane mr-2"></i> Enviar Provas |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="form-step-3" class="hidden fade-in"> |
| <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8 text-center"> |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"> |
| <i class="fas fa-check-circle text-4xl text-green-600"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Cadastro Enviado!</h2> |
| <p class="text-gray-500 mb-6">Suas informações e provas foram enviadas com sucesso. Nossa equipe entrará em contato em breve.</p> |
| |
| <div id="confirmation-details" class="bg-gray-50 rounded-xl p-6 mb-6 text-left"></div> |
|
|
| <div class="flex flex-col space-y-3"> |
| <button onclick="resetForm()" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-semibold"> |
| <i class="fas fa-plus mr-2"></i> Enviar Outro Cadastro |
| </button> |
| <a href="index.html" class="w-full bg-gray-100 text-gray-700 py-3 rounded-lg hover:bg-gray-200 transition font-semibold text-center"> |
| <i class="fas fa-arrow-left mr-2"></i> Voltar à Área Administrativa |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-white border-t border-gray-200"> |
| <div class="max-w-4xl mx-auto px-4 py-4 text-center text-sm text-gray-500"> |
| <p>© 2024 LegalData Manager — Todos os direitos reservados</p> |
| <p class="text-xs mt-1">Seus dados são protegidos conforme a LGPD</p> |
| </div> |
| </footer> |
| </div> |
|
|
| <script src="cliente.js"></script> |
| </body> |
| </html> |
