Em português. Crie e implemente as dependências, com armazenamento local. <!DOCTYPE html>
9543fc8
verified
| Em português. Crie e implemente as dependências, com armazenamento local. <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Análise de Derrotabilidade - Casos Penais</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.js"></script> | |
| <style> | |
| .evidence-row:nth-child(even) { background-color: #f8fafc; } | |
| .conclusion-defeated { background-color: #fef2f2; border-left: 4px solid #ef4444; } | |
| .conclusion-active { background-color: #f0fdf4; border-left: 4px solid #22c55e; } | |
| .conclusion-review { background-color: #fefce8; border-left: 4px solid #eab308; } | |
| .fade-in { animation: fadeIn 0.5s ease-in; } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } | |
| .btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors; } | |
| .btn-secondary { @apply bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors; } | |
| .btn-success { @apply bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors; } | |
| .btn-danger { @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors; } | |
| .form-input { @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent; } | |
| .form-textarea { @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical; } | |
| .status-badge { @apply px-3 py-1 rounded-full text-sm font-medium; } | |
| .status-defeated { @apply bg-red-100 text-red-800; } | |
| .status-active { @apply bg-green-100 text-green-800; } | |
| .status-review { @apply bg-yellow-100 text-yellow-800; } | |
| .print-hidden { @media print { display: none !important; } } | |
| @media print { | |
| body { font-size: 12px; } | |
| .container { max-width: none; margin: 0; padding: 10px; } | |
| .shadow-lg { box-shadow: none; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm border-b print-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">Análise de Derrotabilidade</h1> | |
| <p class="text-gray-600">Sistema de Acompanhamento de Casos Penais</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="exportToPDF()" class="btn-secondary"> | |
| <i data-lucide="download" class="w-4 h-4 inline mr-2"></i>Exportar PDF | |
| </button> | |
| <button onclick="printCase()" class="btn-primary"> | |
| <i data-lucide="printer" class="w-4 h-4 inline mr-2"></i>Imprimir | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="max-w-7xl mx-auto px-4 py-6"> | |
| <!-- Case Information Form --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i data-lucide="folder" class="w-5 h-5 mr-2"></i>Informações do Caso | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Número do Processo</label> | |
| <input type="text" id="caseNumber" class="form-input" placeholder="Ex: 0001234-56.2024.8.01.0001"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Data de Abertura</label> | |
| <input type="date" id="caseDate" class="form-input"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Delegado Responsável</label> | |
| <input type="text" id="investigator" class="form-input" placeholder="Nome do delegado"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de Crime</label> | |
| <select id="crimeType" class="form-input"> | |
| <option value="">Selecione o tipo</option> | |
| <option value="homicidio">Homicídio</option> | |
| <option value="furto">Furto</option> | |
| <option value="roubo">Roubo</option> | |
| <option value="estelionato">Estelionato</option> | |
| <option value="trafico">Tráfico de Drogas</option> | |
| <option value="outros">Outros</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Descrição do Caso</label> | |
| <textarea id="caseDescription" rows="3" class="form-textarea" placeholder="Breve descrição dos fatos..."></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add New Phase Form --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-6 print-hidden"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i data-lucide="plus-circle" class="w-5 h-5 mr-2"></i>Adicionar Nova Fase Investigativa | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Nome da Fase</label> | |
| <input type="text" id="phaseName" class="form-input" placeholder="Ex: Investigação Inicial"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Período</label> | |
| <input type="text" id="phasePeriod" class="form-input" placeholder="Ex: Semana 1"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Principal Suspeito</label> | |
| <input type="text" id="suspect" class="form-input" placeholder="Nome do suspeito"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Status da Conclusão</label> | |
| <select id="conclusionStatus" class="form-input"> | |
| <option value="active">Ativa</option> | |
| <option value="defeated">Derrotada</option> | |
| <option value="review">Em Revisão</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Evidências (uma por linha)</label> | |
| <textarea id="evidence" rows="4" class="form-textarea" placeholder="Lista as evidências encontradas..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Motivo/Justificativa</label> | |
| <textarea id="justification" rows="4" class="form-textarea" placeholder="Explique o motivo da conclusão..."></textarea> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button onclick="addPhase()" class="btn-success"> | |
| <i data-lucide="plus" class="w-4 h-4 inline mr-2"></i>Adicionar Fase | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Investigation Timeline Table --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="px-6 py-4 bg-gray-800 text-white"> | |
| <h2 class="text-xl font-bold flex items-center"> | |
| <i data-lucide="timeline" class="w-5 h-5 mr-2"></i>Linha do Tempo da Investigação | |
| </h2> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full" id="investigationTable"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="px-4 py-3 text-left font-semibold text-gray-700">Fase</th> | |
| <th class="px-4 py-3 text-left font-semibold text-gray-700">Período</th> | |
| <th class="px-4 py-3 text-left font-semibold text-gray-700">Evidências Disponíveis</th> | |
| <th class="px-4 py-3 text-left font-semibold text-gray-700">Principal Suspeito</th> | |
| <th class="px-4 py-3 text-left font-semibold text-gray-700">Motivo/Justificativa</th> | |
| <th class="px-4 py-3 text-left font-semibold text-gray-700">Status da Conclusão</th> | |
| <th class="px-4 py-3 text-left font-semibold text-gray-700 print-hidden">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody id="investigationTableBody"> | |
| <!-- Rows will be added dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div id="emptyState" class="p-8 text-center text-gray-500"> | |
| <i data-lucide="search" class="w-12 h-12 mx-auto mb-4 text-gray-300"></i> | |
| <p>Nenhuma fase investigativa adicionada ainda.</p> | |
| <p class="text-sm">Use o formulário acima para começar a documentar o caso.</p> | |
| </div> | |
| </div> | |
| <!-- Principles Section --> | |
| <div class="mt-8 bg-white rounded-lg shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i data-lucide="book-open" class="w-6 h-6 mr-2"></i>Princípios da Derrotabilidade Aplicados | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full mt-1.5 flex-shrink-0"></div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Conclusões Racionais mas Revisíveis</h3> | |
| <p class="text-sm text-gray-600">Cada hipótese deve ser lógica baseada nas evidências disponíveis no momento, mas sempre passível de revisão.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full mt-1.5 flex-shrink-0"></div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Não Monotonia</h3> | |
| <p class="text-sm text-gray-600">Novas evidências podem alterar completamente as conclusões anteriores, invalidando hipóteses previamente aceitas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full mt-1.5 flex-shrink-0"></div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Contexto Dinâmico</h3> | |
| <p class="text-sm text-gray-600">A investigação deve evoluir conforme novas informações emergem, mantendo flexibilidade analítica.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full mt-1.5 flex-shrink-0"></div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Proteção contra Erros</h3> | |
| <p class="text-sm text-gray-600">A análise contínua e revisão sistemática previnem conclusões precipitadas e injustiças.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Summary Statistics --> | |
| <div class="mt-8 bg-white rounded-lg shadow-lg p-6"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center"> | |
| <i data-lucide="bar-chart-3" class="w-5 h-5 mr-2"></i>Resumo Estatístico | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="text-center p-4 bg-blue-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-blue-600" id="totalPhases">0</div> | |
| <div class="text-sm text-gray-600">Total de Fases</div> | |
| </div> | |
| <div class="text-center p-4 bg-green-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-green-600" id="activeConclusions">0</div> | |
| <div class="text-sm text-gray-600">Conclusões Ativas</div> | |
| </div> | |
| <div class="text-center p-4 bg-red-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-red-600" id="defeatedConclusions">0</div> | |
| <div class="text-sm text-gray-600">Conclusões Derrotadas</div> | |
| </div> | |
| <div class="text-center p-4 bg-yellow-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-yellow-600" id="reviewConclusions">0</div> | |
| <div class="text-sm text-gray-600">Em Revisão</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| let phases = []; | |
| let phaseCounter = 0; | |
| // Set current date as default | |
| document.getElementById('caseDate').value = new Date().toISOString().split('T')[0]; | |
| function addPhase() { | |
| const phaseName = document.getElementById('phaseName').value.trim(); | |
| const phasePeriod = document.getElementById('phasePeriod').value.trim(); | |
| const suspect = document.getElementById('suspect').value.trim(); | |
| const evidence = document.getElementById('evidence').value.trim(); | |
| const justification = document.getElementById('justification').value.trim(); | |
| const status = document.getElementById('conclusionStatus').value; | |
| if (!phaseName || !phasePeriod || !suspect || !evidence || !justification) { | |
| alert('Por favor, preencha todos os campos obrigatórios.'); | |
| return; | |
| } | |
| const phase = { | |
| id: ++phaseCounter, | |
| name: phaseName, | |
| period: phasePeriod, | |
| suspect: suspect, | |
| evidence: evidence.split('\n').filter(e => e.trim()), | |
| justification: justification, | |
| status: status, | |
| timestamp: new Date().toLocaleString('pt-BR') | |
| }; | |
| phases.push(phase); | |
| renderTable(); | |
| updateStatistics(); | |
| clearForm(); | |
| } | |
| function clearForm() { | |
| document.getElementById('phaseName').value = ''; | |
| document.getElementById('phasePeriod').value = ''; | |
| document.getElementById('suspect').value = ''; | |
| document.getElementById('evidence').value = ''; | |
| document.getElementById('justification').value = ''; | |
| document.getElementById('conclusionStatus').value = 'active'; | |
| } | |
| function renderTable() { | |
| const tbody = document.getElementById('investigationTableBody'); | |
| const emptyState = document.getElementById('emptyState'); | |
| if (phases.length === 0) { | |
| tbody.innerHTML = ''; | |
| emptyState.style.display = 'block'; | |
| return; | |
| } | |
| emptyState.style.display = 'none'; | |
| tbody.innerHTML = phases.map |