File size: 16,773 Bytes
67fa90b | 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 | <!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">
<!-- Toast Container -->
<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 -->
<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 Content -->
<main class="flex-1 max-w-4xl mx-auto w-full px-4 py-8">
<!-- Steps Indicator -->
<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>
<!-- Step 1: Registration Form -->
<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>
<!-- Step 2: Evidence Upload -->
<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>
<!-- Step 3: Confirmation -->
<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 -->
<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> |