Em português. Crie e implemente as dependências, com armazenamento local. <!DOCTYPE html>
Browse files<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">
- README.md +7 -5
- index.html +395 -18
- prompts.txt +295 -0
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
sdk: static
|
7 |
pinned: false
|
|
|
|
|
8 |
---
|
9 |
|
10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
1 |
---
|
2 |
+
title: etapainvestigacaoderrotabilidade
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: yellow
|
5 |
+
colorTo: gray
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
+
tags:
|
9 |
+
- deepsite
|
10 |
---
|
11 |
|
12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
@@ -1,19 +1,396 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
19 |
</html>
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="pt-BR">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>Análise de Derrotabilidade - Casos Penais</title>
|
7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
8 |
+
<script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.js"></script>
|
9 |
+
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
|
10 |
+
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
|
11 |
+
<style>
|
12 |
+
.evidence-row:nth-child(even) { background-color: #f8fafc; }
|
13 |
+
.conclusion-defeated { background-color: #fef2f2; border-left: 4px solid #ef4444; }
|
14 |
+
.conclusion-active { background-color: #f0fdf4; border-left: 4px solid #22c55e; }
|
15 |
+
.conclusion-review { background-color: #fefce8; border-left: 4px solid #eab308; }
|
16 |
+
.fade-in { animation: fadeIn 0.5s ease-in; }
|
17 |
+
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
18 |
+
.btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors; }
|
19 |
+
.btn-secondary { @apply bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors; }
|
20 |
+
.btn-success { @apply bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors; }
|
21 |
+
.btn-danger { @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors; }
|
22 |
+
.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; }
|
23 |
+
.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; }
|
24 |
+
.status-badge { @apply px-3 py-1 rounded-full text-sm font-medium; }
|
25 |
+
.status-defeated { @apply bg-red-100 text-red-800; }
|
26 |
+
.status-active { @apply bg-green-100 text-green-800; }
|
27 |
+
.status-review { @apply bg-yellow-100 text-yellow-800; }
|
28 |
+
.print-hidden { @media print { display: none !important; } }
|
29 |
+
@media print {
|
30 |
+
body { font-size: 12px; }
|
31 |
+
.container { max-width: none; margin: 0; padding: 10px; }
|
32 |
+
.shadow-lg { box-shadow: none; }
|
33 |
+
}
|
34 |
+
</style>
|
35 |
+
</head>
|
36 |
+
<body class="bg-gray-50 min-h-screen">
|
37 |
+
<!-- Header -->
|
38 |
+
<header class="bg-white shadow-sm border-b print-hidden" data-aos="fade-down">
|
39 |
+
<div class="max-w-7xl mx-auto px-4 py-4">
|
40 |
+
<div class="flex justify-between items-center">
|
41 |
+
<div>
|
42 |
+
<h1 class="text-2xl font-bold text-gray-900">Análise de Derrotabilidade</h1>
|
43 |
+
<p class="text-gray-600">Sistema de Acompanhamento de Casos Penais</p>
|
44 |
+
</div>
|
45 |
+
<div class="flex space-x-2">
|
46 |
+
<button onclick="exportToPDF()" class="btn-secondary">
|
47 |
+
<i data-lucide="download" class="w-4 h-4 inline mr-2"></i>Exportar PDF
|
48 |
+
</button>
|
49 |
+
<button onclick="printCase()" class="btn-primary">
|
50 |
+
<i data-lucide="printer" class="w-4 h-4 inline mr-2"></i>Imprimir
|
51 |
+
</button>
|
52 |
+
</div>
|
53 |
+
</div>
|
54 |
+
</div>
|
55 |
+
</header>
|
56 |
+
|
57 |
+
<div class="max-w-7xl mx-auto px-4 py-6">
|
58 |
+
<!-- Case Information Form -->
|
59 |
+
<div class="bg-white rounded-lg shadow-lg p-6 mb-6" data-aos="fade-up">
|
60 |
+
<h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
61 |
+
<i data-lucide="folder" class="w-5 h-5 mr-2"></i>Informações do Caso
|
62 |
+
</h2>
|
63 |
+
<div class="grid md:grid-cols-2 gap-4">
|
64 |
+
<div>
|
65 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Número do Processo</label>
|
66 |
+
<input type="text" id="caseNumber" class="form-input" placeholder="Ex: 0001234-56.2024.8.01.0001">
|
67 |
+
</div>
|
68 |
+
<div>
|
69 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Data de Abertura</label>
|
70 |
+
<input type="date" id="caseDate" class="form-input">
|
71 |
+
</div>
|
72 |
+
<div>
|
73 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Delegado Responsável</label>
|
74 |
+
<input type="text" id="investigator" class="form-input" placeholder="Nome do delegado">
|
75 |
+
</div>
|
76 |
+
<div>
|
77 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Tipo de Crime</label>
|
78 |
+
<select id="crimeType" class="form-input">
|
79 |
+
<option value="">Selecione o tipo</option>
|
80 |
+
<option value="homicidio">Homicídio</option>
|
81 |
+
<option value="furto">Furto</option>
|
82 |
+
<option value="roubo">Roubo</option>
|
83 |
+
<option value="estelionato">Estelionato</option>
|
84 |
+
<option value="trafico">Tráfico de Drogas</option>
|
85 |
+
<option value="outros">Outros</option>
|
86 |
+
</select>
|
87 |
+
</div>
|
88 |
+
<div class="md:col-span-2">
|
89 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Descrição do Caso</label>
|
90 |
+
<textarea id="caseDescription" rows="3" class="form-textarea" placeholder="Breve descrição dos fatos..."></textarea>
|
91 |
+
</div>
|
92 |
+
</div>
|
93 |
+
</div>
|
94 |
+
|
95 |
+
<!-- Add New Phase Form -->
|
96 |
+
<div class="bg-white rounded-lg shadow-lg p-6 mb-6 print-hidden" data-aos="fade-up">
|
97 |
+
<h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
98 |
+
<i data-lucide="plus-circle" class="w-5 h-5 mr-2"></i>Adicionar Nova Fase Investigativa
|
99 |
+
</h2>
|
100 |
+
<div class="grid md:grid-cols-2 gap-4">
|
101 |
+
<div>
|
102 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Nome da Fase</label>
|
103 |
+
<input type="text" id="phaseName" class="form-input" placeholder="Ex: Investigação Inicial">
|
104 |
+
</div>
|
105 |
+
<div>
|
106 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Período</label>
|
107 |
+
<input type="text" id="phasePeriod" class="form-input" placeholder="Ex: Semana 1">
|
108 |
+
</div>
|
109 |
+
<div>
|
110 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Principal Suspeito</label>
|
111 |
+
<input type="text" id="suspect" class="form-input" placeholder="Nome do suspeito">
|
112 |
+
</div>
|
113 |
+
<div>
|
114 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Status da Conclusão</label>
|
115 |
+
<select id="conclusionStatus" class="form-input">
|
116 |
+
<option value="active">Ativa</option>
|
117 |
+
<option value="defeated">Derrotada</option>
|
118 |
+
<option value="review">Em Revisão</option>
|
119 |
+
</select>
|
120 |
+
</div>
|
121 |
+
<div>
|
122 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Evidências (uma por linha)</label>
|
123 |
+
<textarea id="evidence" rows="4" class="form-textarea" placeholder="Lista as evidências encontradas..."></textarea>
|
124 |
+
</div>
|
125 |
+
<div>
|
126 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Motivo/Justificativa</label>
|
127 |
+
<textarea id="justification" rows="4" class="form-textarea" placeholder="Explique o motivo da conclusão..."></textarea>
|
128 |
+
</div>
|
129 |
+
</div>
|
130 |
+
<div class="mt-4 flex justify-end">
|
131 |
+
<button onclick="addPhase()" class="btn-success">
|
132 |
+
<i data-lucide="plus" class="w-4 h-4 inline mr-2"></i>Adicionar Fase
|
133 |
+
</button>
|
134 |
+
</div>
|
135 |
+
</div>
|
136 |
+
|
137 |
+
<!-- Investigation Timeline Table -->
|
138 |
+
<div class="bg-white rounded-lg shadow-lg overflow-hidden" data-aos="fade-up">
|
139 |
+
<div class="px-6 py-4 bg-gray-800 text-white">
|
140 |
+
<h2 class="text-xl font-bold flex items-center">
|
141 |
+
<i data-lucide="timeline" class="w-5 h-5 mr-2"></i>Linha do Tempo da Investigação
|
142 |
+
</h2>
|
143 |
+
</div>
|
144 |
+
<div class="overflow-x-auto">
|
145 |
+
<table class="w-full" id="investigationTable">
|
146 |
+
<thead class="bg-gray-100">
|
147 |
+
<tr>
|
148 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Fase</th>
|
149 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Período</th>
|
150 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Evidências Disponíveis</th>
|
151 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Principal Suspeito</th>
|
152 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Motivo/Justificativa</th>
|
153 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Status da Conclusão</th>
|
154 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700 print-hidden">Ações</th>
|
155 |
+
</tr>
|
156 |
+
</thead>
|
157 |
+
<tbody id="investigationTableBody">
|
158 |
+
<!-- Rows will be added dynamically -->
|
159 |
+
</tbody>
|
160 |
+
</table>
|
161 |
+
</div>
|
162 |
+
<div id="emptyState" class="p-8 text-center text-gray-500">
|
163 |
+
<i data-lucide="search" class="w-12 h-12 mx-auto mb-4 text-gray-300"></i>
|
164 |
+
<p>Nenhuma fase investigativa adicionada ainda.</p>
|
165 |
+
<p class="text-sm">Use o formulário acima para começar a documentar o caso.</p>
|
166 |
+
</div>
|
167 |
+
</div>
|
168 |
+
|
169 |
+
<!-- Principles Section -->
|
170 |
+
<div class="mt-8 bg-white rounded-lg shadow-lg p-6" data-aos="fade-up">
|
171 |
+
<h2 class="text-2xl font-bold mb-4 text-gray-800 flex items-center">
|
172 |
+
<i data-lucide="book-open" class="w-6 h-6 mr-2"></i>Princípios da Derrotabilidade Aplicados
|
173 |
+
</h2>
|
174 |
+
<div class="grid md:grid-cols-2 gap-6">
|
175 |
+
<div class="space-y-4">
|
176 |
+
<div class="flex items-start space-x-3">
|
177 |
+
<div class="w-3 h-3 bg-blue-500 rounded-full mt-1.5 flex-shrink-0"></div>
|
178 |
+
<div>
|
179 |
+
<h3 class="font-semibold text-gray-800">Conclusões Racionais mas Revisíveis</h3>
|
180 |
+
<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>
|
181 |
+
</div>
|
182 |
+
</div>
|
183 |
+
<div class="flex items-start space-x-3">
|
184 |
+
<div class="w-3 h-3 bg-green-500 rounded-full mt-1.5 flex-shrink-0"></div>
|
185 |
+
<div>
|
186 |
+
<h3 class="font-semibold text-gray-800">Não Monotonia</h3>
|
187 |
+
<p class="text-sm text-gray-600">Novas evidências podem alterar completamente as conclusões anteriores, invalidando hipóteses previamente aceitas.</p>
|
188 |
+
</div>
|
189 |
+
</div>
|
190 |
+
</div>
|
191 |
+
<div class="space-y-4">
|
192 |
+
<div class="flex items-start space-x-3">
|
193 |
+
<div class="w-3 h-3 bg-yellow-500 rounded-full mt-1.5 flex-shrink-0"></div>
|
194 |
+
<div>
|
195 |
+
<h3 class="font-semibold text-gray-800">Contexto Dinâmico</h3>
|
196 |
+
<p class="text-sm text-gray-600">A investigação deve evoluir conforme novas informações emergem, mantendo flexibilidade analítica.</p>
|
197 |
+
</div>
|
198 |
+
</div>
|
199 |
+
<div class="flex items-start space-x-3">
|
200 |
+
<div class="w-3 h-3 bg-red-500 rounded-full mt-1.5 flex-shrink-0"></div>
|
201 |
+
<div>
|
202 |
+
<h3 class="font-semibold text-gray-800">Proteção contra Erros</h3>
|
203 |
+
<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>
|
204 |
+
</div>
|
205 |
+
</div>
|
206 |
+
</div>
|
207 |
+
</div>
|
208 |
+
</div>
|
209 |
+
|
210 |
+
<!-- Summary Statistics -->
|
211 |
+
<div class="mt-8 bg-white rounded-lg shadow-lg p-6" data-aos="fade-up">
|
212 |
+
<h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
213 |
+
<i data-lucide="bar-chart-3" class="w-5 h-5 mr-2"></i>Resumo Estatístico
|
214 |
+
</h2>
|
215 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
216 |
+
<div class="text-center p-4 bg-blue-50 rounded-lg">
|
217 |
+
<div class="text-2xl font-bold text-blue-600" id="totalPhases">0</div>
|
218 |
+
<div class="text-sm text-gray-600">Total de Fases</div>
|
219 |
+
</div>
|
220 |
+
<div class="text-center p-4 bg-green-50 rounded-lg">
|
221 |
+
<div class="text-2xl font-bold text-green-600" id="activeConclusions">0</div>
|
222 |
+
<div class="text-sm text-gray-600">Conclusões Ativas</div>
|
223 |
+
</div>
|
224 |
+
<div class="text-center p-4 bg-red-50 rounded-lg">
|
225 |
+
<div class="text-2xl font-bold text-red-600" id="defeatedConclusions">0</div>
|
226 |
+
<div class="text-sm text-gray-600">Conclusões Derrotadas</div>
|
227 |
+
</div>
|
228 |
+
<div class="text-center p-4 bg-yellow-50 rounded-lg">
|
229 |
+
<div class="text-2xl font-bold text-yellow-600" id="reviewConclusions">0</div>
|
230 |
+
<div class="text-sm text-gray-600">Em Revisão</div>
|
231 |
+
</div>
|
232 |
+
</div>
|
233 |
+
</div>
|
234 |
+
</div>
|
235 |
+
|
236 |
+
<script>
|
237 |
+
// Initialize libraries
|
238 |
+
lucide.createIcons();
|
239 |
+
AOS.init();
|
240 |
+
|
241 |
+
let phases = JSON.parse(localStorage.getItem('casePhases')) || [];
|
242 |
+
let phaseCounter = phases.length > 0 ? Math.max(...phases.map(p => p.id)) : 0;
|
243 |
+
|
244 |
+
// Load case information from localStorage
|
245 |
+
document.addEventListener('DOMContentLoaded', function() {
|
246 |
+
const caseInfo = JSON.parse(localStorage.getItem('caseInfo')) || {};
|
247 |
+
document.getElementById('caseNumber').value = caseInfo.caseNumber || '';
|
248 |
+
document.getElementById('caseDate').value = caseInfo.caseDate || new Date().toISOString().split('T')[0];
|
249 |
+
document.getElementById('investigator').value = caseInfo.investigator || '';
|
250 |
+
document.getElementById('crimeType').value = caseInfo.crimeType || '';
|
251 |
+
document.getElementById('caseDescription').value = caseInfo.caseDescription || '';
|
252 |
+
|
253 |
+
renderTable();
|
254 |
+
updateStatistics();
|
255 |
+
});
|
256 |
+
|
257 |
+
function saveCaseInfo() {
|
258 |
+
const caseInfo = {
|
259 |
+
caseNumber: document.getElementById('caseNumber').value,
|
260 |
+
caseDate: document.getElementById('caseDate').value,
|
261 |
+
investigator: document.getElementById('investigator').value,
|
262 |
+
crimeType: document.getElementById('crimeType').value,
|
263 |
+
caseDescription: document.getElementById('caseDescription').value
|
264 |
+
};
|
265 |
+
localStorage.setItem('caseInfo', JSON.stringify(caseInfo));
|
266 |
+
}
|
267 |
+
|
268 |
+
// Auto-save case info when inputs change
|
269 |
+
document.querySelectorAll('#caseNumber, #caseDate, #investigator, #crimeType, #caseDescription').forEach(input => {
|
270 |
+
input.addEventListener('change', saveCaseInfo);
|
271 |
+
});
|
272 |
+
|
273 |
+
function addPhase() {
|
274 |
+
const phaseName = document.getElementById('phaseName').value.trim();
|
275 |
+
const phasePeriod = document.getElementById('phasePeriod').value.trim();
|
276 |
+
const suspect = document.getElementById('suspect').value.trim();
|
277 |
+
const evidence = document.getElementById('evidence').value.trim();
|
278 |
+
const justification = document.getElementById('justification').value.trim();
|
279 |
+
const status = document.getElementById('conclusionStatus').value;
|
280 |
+
|
281 |
+
if (!phaseName || !phasePeriod || !suspect || !evidence || !justification) {
|
282 |
+
alert('Por favor, preencha todos os campos obrigatórios.');
|
283 |
+
return;
|
284 |
+
}
|
285 |
+
|
286 |
+
const phase = {
|
287 |
+
id: ++phaseCounter,
|
288 |
+
name: phaseName,
|
289 |
+
period: phasePeriod,
|
290 |
+
suspect: suspect,
|
291 |
+
evidence: evidence.split('\n').filter(e => e.trim()),
|
292 |
+
justification: justification,
|
293 |
+
status: status,
|
294 |
+
timestamp: new Date().toLocaleString('pt-BR')
|
295 |
+
};
|
296 |
+
|
297 |
+
phases.push(phase);
|
298 |
+
localStorage.setItem('casePhases', JSON.stringify(phases));
|
299 |
+
renderTable();
|
300 |
+
updateStatistics();
|
301 |
+
clearForm();
|
302 |
+
}
|
303 |
+
|
304 |
+
function clearForm() {
|
305 |
+
document.getElementById('phaseName').value = '';
|
306 |
+
document.getElementById('phasePeriod').value = '';
|
307 |
+
document.getElementById('suspect').value = '';
|
308 |
+
document.getElementById('evidence').value = '';
|
309 |
+
document.getElementById('justification').value = '';
|
310 |
+
document.getElementById('conclusionStatus').value = 'active';
|
311 |
+
}
|
312 |
+
|
313 |
+
function renderTable() {
|
314 |
+
const tbody = document.getElementById('investigationTableBody');
|
315 |
+
const emptyState = document.getElementById('emptyState');
|
316 |
+
|
317 |
+
if (phases.length === 0) {
|
318 |
+
tbody.innerHTML = '';
|
319 |
+
emptyState.style.display = 'block';
|
320 |
+
return;
|
321 |
+
}
|
322 |
+
|
323 |
+
emptyState.style.display = 'none';
|
324 |
+
|
325 |
+
tbody.innerHTML = phases.map(phase => {
|
326 |
+
const statusClass = {
|
327 |
+
'active': 'status-active',
|
328 |
+
'defeated': 'status-defeated',
|
329 |
+
'review': 'status-review'
|
330 |
+
}[phase.status];
|
331 |
+
|
332 |
+
const statusText = {
|
333 |
+
'active': 'Ativa',
|
334 |
+
'defeated': 'Derrotada',
|
335 |
+
'review': 'Em Revisão'
|
336 |
+
}[phase.status];
|
337 |
+
|
338 |
+
const evidenceList = phase.evidence.map(e =>
|
339 |
+
`<div class="evidence-row px-2 py-1">• ${e}</div>`
|
340 |
+
).join('');
|
341 |
+
|
342 |
+
return `
|
343 |
+
<tr class="border-t ${phase.status === 'defeated' ? 'conclusion-defeated' :
|
344 |
+
phase.status === 'active' ? 'conclusion-active' :
|
345 |
+
'conclusion-review'} fade-in">
|
346 |
+
<td class="px-4 py-3 align-top">${phase.name}</td>
|
347 |
+
<td class="px-4 py-3 align-top">${phase.period}</td>
|
348 |
+
<td class="px-4 py-3 align-top">${evidenceList}</td>
|
349 |
+
<td class="px-4 py-3 align-top">${phase.suspect}</td>
|
350 |
+
<td class="px-4 py-3 align-top">${phase.justification}</td>
|
351 |
+
<td class="px-4 py-3 align-top">
|
352 |
+
<span class="${statusClass}">${statusText}</span>
|
353 |
+
</td>
|
354 |
+
<td class="px-4 py-3 align-top print-hidden">
|
355 |
+
<button onclick="deletePhase(${phase.id})" class="btn-danger text-sm">
|
356 |
+
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
357 |
+
</button>
|
358 |
+
</td>
|
359 |
+
</tr>
|
360 |
+
`;
|
361 |
+
}).join('');
|
362 |
+
|
363 |
+
lucide.createIcons(); // Refresh icons in new elements
|
364 |
+
}
|
365 |
+
|
366 |
+
function deletePhase(id) {
|
367 |
+
if (confirm('Tem certeza que deseja remover esta fase?')) {
|
368 |
+
phases = phases.filter(phase => phase.id !== id);
|
369 |
+
localStorage.setItem('casePhases', JSON.stringify(phases));
|
370 |
+
renderTable();
|
371 |
+
updateStatistics();
|
372 |
+
}
|
373 |
+
}
|
374 |
+
|
375 |
+
function updateStatistics() {
|
376 |
+
document.getElementById('totalPhases').textContent = phases.length;
|
377 |
+
document.getElementById('activeConclusions').textContent =
|
378 |
+
phases.filter(p => p.status === 'active').length;
|
379 |
+
document.getElementById('defeatedConclusions').textContent =
|
380 |
+
phases.filter(p => p.status === 'defeated').length;
|
381 |
+
document.getElementById('reviewConclusions').textContent =
|
382 |
+
phases.filter(p => p.status === 'review').length;
|
383 |
+
}
|
384 |
+
|
385 |
+
function printCase() {
|
386 |
+
window.print();
|
387 |
+
}
|
388 |
+
|
389 |
+
function exportToPDF() {
|
390 |
+
alert('Exportar para PDF funcionará quando implementado com uma biblioteca como jsPDF.');
|
391 |
+
// Implementar lógica para exportar para PDF usando jsPDF
|
392 |
+
// Exemplo: const doc = new jsPDF(); doc.text('Conteúdo', 10, 10); doc.save('caso.pdf');
|
393 |
+
}
|
394 |
+
</script>
|
395 |
+
</body>
|
396 |
</html>
|
@@ -0,0 +1,295 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
Em português. Crie e implemente as dependências, com armazenamento local. <!DOCTYPE html>
|
2 |
+
<html lang="pt-BR">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>Análise de Derrotabilidade - Casos Penais</title>
|
7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
8 |
+
<script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.js"></script>
|
9 |
+
<style>
|
10 |
+
.evidence-row:nth-child(even) { background-color: #f8fafc; }
|
11 |
+
.conclusion-defeated { background-color: #fef2f2; border-left: 4px solid #ef4444; }
|
12 |
+
.conclusion-active { background-color: #f0fdf4; border-left: 4px solid #22c55e; }
|
13 |
+
.conclusion-review { background-color: #fefce8; border-left: 4px solid #eab308; }
|
14 |
+
.fade-in { animation: fadeIn 0.5s ease-in; }
|
15 |
+
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
16 |
+
.btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors; }
|
17 |
+
.btn-secondary { @apply bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors; }
|
18 |
+
.btn-success { @apply bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors; }
|
19 |
+
.btn-danger { @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors; }
|
20 |
+
.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; }
|
21 |
+
.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; }
|
22 |
+
.status-badge { @apply px-3 py-1 rounded-full text-sm font-medium; }
|
23 |
+
.status-defeated { @apply bg-red-100 text-red-800; }
|
24 |
+
.status-active { @apply bg-green-100 text-green-800; }
|
25 |
+
.status-review { @apply bg-yellow-100 text-yellow-800; }
|
26 |
+
.print-hidden { @media print { display: none !important; } }
|
27 |
+
@media print {
|
28 |
+
body { font-size: 12px; }
|
29 |
+
.container { max-width: none; margin: 0; padding: 10px; }
|
30 |
+
.shadow-lg { box-shadow: none; }
|
31 |
+
}
|
32 |
+
</style>
|
33 |
+
</head>
|
34 |
+
<body class="bg-gray-50 min-h-screen">
|
35 |
+
<!-- Header -->
|
36 |
+
<header class="bg-white shadow-sm border-b print-hidden">
|
37 |
+
<div class="max-w-7xl mx-auto px-4 py-4">
|
38 |
+
<div class="flex justify-between items-center">
|
39 |
+
<div>
|
40 |
+
<h1 class="text-2xl font-bold text-gray-900">Análise de Derrotabilidade</h1>
|
41 |
+
<p class="text-gray-600">Sistema de Acompanhamento de Casos Penais</p>
|
42 |
+
</div>
|
43 |
+
<div class="flex space-x-2">
|
44 |
+
<button onclick="exportToPDF()" class="btn-secondary">
|
45 |
+
<i data-lucide="download" class="w-4 h-4 inline mr-2"></i>Exportar PDF
|
46 |
+
</button>
|
47 |
+
<button onclick="printCase()" class="btn-primary">
|
48 |
+
<i data-lucide="printer" class="w-4 h-4 inline mr-2"></i>Imprimir
|
49 |
+
</button>
|
50 |
+
</div>
|
51 |
+
</div>
|
52 |
+
</div>
|
53 |
+
</header>
|
54 |
+
|
55 |
+
<div class="max-w-7xl mx-auto px-4 py-6">
|
56 |
+
<!-- Case Information Form -->
|
57 |
+
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
|
58 |
+
<h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
59 |
+
<i data-lucide="folder" class="w-5 h-5 mr-2"></i>Informações do Caso
|
60 |
+
</h2>
|
61 |
+
<div class="grid md:grid-cols-2 gap-4">
|
62 |
+
<div>
|
63 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Número do Processo</label>
|
64 |
+
<input type="text" id="caseNumber" class="form-input" placeholder="Ex: 0001234-56.2024.8.01.0001">
|
65 |
+
</div>
|
66 |
+
<div>
|
67 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Data de Abertura</label>
|
68 |
+
<input type="date" id="caseDate" class="form-input">
|
69 |
+
</div>
|
70 |
+
<div>
|
71 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Delegado Responsável</label>
|
72 |
+
<input type="text" id="investigator" class="form-input" placeholder="Nome do delegado">
|
73 |
+
</div>
|
74 |
+
<div>
|
75 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Tipo de Crime</label>
|
76 |
+
<select id="crimeType" class="form-input">
|
77 |
+
<option value="">Selecione o tipo</option>
|
78 |
+
<option value="homicidio">Homicídio</option>
|
79 |
+
<option value="furto">Furto</option>
|
80 |
+
<option value="roubo">Roubo</option>
|
81 |
+
<option value="estelionato">Estelionato</option>
|
82 |
+
<option value="trafico">Tráfico de Drogas</option>
|
83 |
+
<option value="outros">Outros</option>
|
84 |
+
</select>
|
85 |
+
</div>
|
86 |
+
<div class="md:col-span-2">
|
87 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Descrição do Caso</label>
|
88 |
+
<textarea id="caseDescription" rows="3" class="form-textarea" placeholder="Breve descrição dos fatos..."></textarea>
|
89 |
+
</div>
|
90 |
+
</div>
|
91 |
+
</div>
|
92 |
+
|
93 |
+
<!-- Add New Phase Form -->
|
94 |
+
<div class="bg-white rounded-lg shadow-lg p-6 mb-6 print-hidden">
|
95 |
+
<h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
96 |
+
<i data-lucide="plus-circle" class="w-5 h-5 mr-2"></i>Adicionar Nova Fase Investigativa
|
97 |
+
</h2>
|
98 |
+
<div class="grid md:grid-cols-2 gap-4">
|
99 |
+
<div>
|
100 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Nome da Fase</label>
|
101 |
+
<input type="text" id="phaseName" class="form-input" placeholder="Ex: Investigação Inicial">
|
102 |
+
</div>
|
103 |
+
<div>
|
104 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Período</label>
|
105 |
+
<input type="text" id="phasePeriod" class="form-input" placeholder="Ex: Semana 1">
|
106 |
+
</div>
|
107 |
+
<div>
|
108 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Principal Suspeito</label>
|
109 |
+
<input type="text" id="suspect" class="form-input" placeholder="Nome do suspeito">
|
110 |
+
</div>
|
111 |
+
<div>
|
112 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Status da Conclusão</label>
|
113 |
+
<select id="conclusionStatus" class="form-input">
|
114 |
+
<option value="active">Ativa</option>
|
115 |
+
<option value="defeated">Derrotada</option>
|
116 |
+
<option value="review">Em Revisão</option>
|
117 |
+
</select>
|
118 |
+
</div>
|
119 |
+
<div>
|
120 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Evidências (uma por linha)</label>
|
121 |
+
<textarea id="evidence" rows="4" class="form-textarea" placeholder="Lista as evidências encontradas..."></textarea>
|
122 |
+
</div>
|
123 |
+
<div>
|
124 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Motivo/Justificativa</label>
|
125 |
+
<textarea id="justification" rows="4" class="form-textarea" placeholder="Explique o motivo da conclusão..."></textarea>
|
126 |
+
</div>
|
127 |
+
</div>
|
128 |
+
<div class="mt-4 flex justify-end">
|
129 |
+
<button onclick="addPhase()" class="btn-success">
|
130 |
+
<i data-lucide="plus" class="w-4 h-4 inline mr-2"></i>Adicionar Fase
|
131 |
+
</button>
|
132 |
+
</div>
|
133 |
+
</div>
|
134 |
+
|
135 |
+
<!-- Investigation Timeline Table -->
|
136 |
+
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
|
137 |
+
<div class="px-6 py-4 bg-gray-800 text-white">
|
138 |
+
<h2 class="text-xl font-bold flex items-center">
|
139 |
+
<i data-lucide="timeline" class="w-5 h-5 mr-2"></i>Linha do Tempo da Investigação
|
140 |
+
</h2>
|
141 |
+
</div>
|
142 |
+
<div class="overflow-x-auto">
|
143 |
+
<table class="w-full" id="investigationTable">
|
144 |
+
<thead class="bg-gray-100">
|
145 |
+
<tr>
|
146 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Fase</th>
|
147 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Período</th>
|
148 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Evidências Disponíveis</th>
|
149 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Principal Suspeito</th>
|
150 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Motivo/Justificativa</th>
|
151 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700">Status da Conclusão</th>
|
152 |
+
<th class="px-4 py-3 text-left font-semibold text-gray-700 print-hidden">Ações</th>
|
153 |
+
</tr>
|
154 |
+
</thead>
|
155 |
+
<tbody id="investigationTableBody">
|
156 |
+
<!-- Rows will be added dynamically -->
|
157 |
+
</tbody>
|
158 |
+
</table>
|
159 |
+
</div>
|
160 |
+
<div id="emptyState" class="p-8 text-center text-gray-500">
|
161 |
+
<i data-lucide="search" class="w-12 h-12 mx-auto mb-4 text-gray-300"></i>
|
162 |
+
<p>Nenhuma fase investigativa adicionada ainda.</p>
|
163 |
+
<p class="text-sm">Use o formulário acima para começar a documentar o caso.</p>
|
164 |
+
</div>
|
165 |
+
</div>
|
166 |
+
|
167 |
+
<!-- Principles Section -->
|
168 |
+
<div class="mt-8 bg-white rounded-lg shadow-lg p-6">
|
169 |
+
<h2 class="text-2xl font-bold mb-4 text-gray-800 flex items-center">
|
170 |
+
<i data-lucide="book-open" class="w-6 h-6 mr-2"></i>Princípios da Derrotabilidade Aplicados
|
171 |
+
</h2>
|
172 |
+
<div class="grid md:grid-cols-2 gap-6">
|
173 |
+
<div class="space-y-4">
|
174 |
+
<div class="flex items-start space-x-3">
|
175 |
+
<div class="w-3 h-3 bg-blue-500 rounded-full mt-1.5 flex-shrink-0"></div>
|
176 |
+
<div>
|
177 |
+
<h3 class="font-semibold text-gray-800">Conclusões Racionais mas Revisíveis</h3>
|
178 |
+
<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>
|
179 |
+
</div>
|
180 |
+
</div>
|
181 |
+
<div class="flex items-start space-x-3">
|
182 |
+
<div class="w-3 h-3 bg-green-500 rounded-full mt-1.5 flex-shrink-0"></div>
|
183 |
+
<div>
|
184 |
+
<h3 class="font-semibold text-gray-800">Não Monotonia</h3>
|
185 |
+
<p class="text-sm text-gray-600">Novas evidências podem alterar completamente as conclusões anteriores, invalidando hipóteses previamente aceitas.</p>
|
186 |
+
</div>
|
187 |
+
</div>
|
188 |
+
</div>
|
189 |
+
<div class="space-y-4">
|
190 |
+
<div class="flex items-start space-x-3">
|
191 |
+
<div class="w-3 h-3 bg-yellow-500 rounded-full mt-1.5 flex-shrink-0"></div>
|
192 |
+
<div>
|
193 |
+
<h3 class="font-semibold text-gray-800">Contexto Dinâmico</h3>
|
194 |
+
<p class="text-sm text-gray-600">A investigação deve evoluir conforme novas informações emergem, mantendo flexibilidade analítica.</p>
|
195 |
+
</div>
|
196 |
+
</div>
|
197 |
+
<div class="flex items-start space-x-3">
|
198 |
+
<div class="w-3 h-3 bg-red-500 rounded-full mt-1.5 flex-shrink-0"></div>
|
199 |
+
<div>
|
200 |
+
<h3 class="font-semibold text-gray-800">Proteção contra Erros</h3>
|
201 |
+
<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>
|
202 |
+
</div>
|
203 |
+
</div>
|
204 |
+
</div>
|
205 |
+
</div>
|
206 |
+
</div>
|
207 |
+
|
208 |
+
<!-- Summary Statistics -->
|
209 |
+
<div class="mt-8 bg-white rounded-lg shadow-lg p-6">
|
210 |
+
<h2 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
211 |
+
<i data-lucide="bar-chart-3" class="w-5 h-5 mr-2"></i>Resumo Estatístico
|
212 |
+
</h2>
|
213 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
214 |
+
<div class="text-center p-4 bg-blue-50 rounded-lg">
|
215 |
+
<div class="text-2xl font-bold text-blue-600" id="totalPhases">0</div>
|
216 |
+
<div class="text-sm text-gray-600">Total de Fases</div>
|
217 |
+
</div>
|
218 |
+
<div class="text-center p-4 bg-green-50 rounded-lg">
|
219 |
+
<div class="text-2xl font-bold text-green-600" id="activeConclusions">0</div>
|
220 |
+
<div class="text-sm text-gray-600">Conclusões Ativas</div>
|
221 |
+
</div>
|
222 |
+
<div class="text-center p-4 bg-red-50 rounded-lg">
|
223 |
+
<div class="text-2xl font-bold text-red-600" id="defeatedConclusions">0</div>
|
224 |
+
<div class="text-sm text-gray-600">Conclusões Derrotadas</div>
|
225 |
+
</div>
|
226 |
+
<div class="text-center p-4 bg-yellow-50 rounded-lg">
|
227 |
+
<div class="text-2xl font-bold text-yellow-600" id="reviewConclusions">0</div>
|
228 |
+
<div class="text-sm text-gray-600">Em Revisão</div>
|
229 |
+
</div>
|
230 |
+
</div>
|
231 |
+
</div>
|
232 |
+
</div>
|
233 |
+
|
234 |
+
<script>
|
235 |
+
// Initialize Lucide icons
|
236 |
+
lucide.createIcons();
|
237 |
+
|
238 |
+
let phases = [];
|
239 |
+
let phaseCounter = 0;
|
240 |
+
|
241 |
+
// Set current date as default
|
242 |
+
document.getElementById('caseDate').value = new Date().toISOString().split('T')[0];
|
243 |
+
|
244 |
+
function addPhase() {
|
245 |
+
const phaseName = document.getElementById('phaseName').value.trim();
|
246 |
+
const phasePeriod = document.getElementById('phasePeriod').value.trim();
|
247 |
+
const suspect = document.getElementById('suspect').value.trim();
|
248 |
+
const evidence = document.getElementById('evidence').value.trim();
|
249 |
+
const justification = document.getElementById('justification').value.trim();
|
250 |
+
const status = document.getElementById('conclusionStatus').value;
|
251 |
+
|
252 |
+
if (!phaseName || !phasePeriod || !suspect || !evidence || !justification) {
|
253 |
+
alert('Por favor, preencha todos os campos obrigatórios.');
|
254 |
+
return;
|
255 |
+
}
|
256 |
+
|
257 |
+
const phase = {
|
258 |
+
id: ++phaseCounter,
|
259 |
+
name: phaseName,
|
260 |
+
period: phasePeriod,
|
261 |
+
suspect: suspect,
|
262 |
+
evidence: evidence.split('\n').filter(e => e.trim()),
|
263 |
+
justification: justification,
|
264 |
+
status: status,
|
265 |
+
timestamp: new Date().toLocaleString('pt-BR')
|
266 |
+
};
|
267 |
+
|
268 |
+
phases.push(phase);
|
269 |
+
renderTable();
|
270 |
+
updateStatistics();
|
271 |
+
clearForm();
|
272 |
+
}
|
273 |
+
|
274 |
+
function clearForm() {
|
275 |
+
document.getElementById('phaseName').value = '';
|
276 |
+
document.getElementById('phasePeriod').value = '';
|
277 |
+
document.getElementById('suspect').value = '';
|
278 |
+
document.getElementById('evidence').value = '';
|
279 |
+
document.getElementById('justification').value = '';
|
280 |
+
document.getElementById('conclusionStatus').value = 'active';
|
281 |
+
}
|
282 |
+
|
283 |
+
function renderTable() {
|
284 |
+
const tbody = document.getElementById('investigationTableBody');
|
285 |
+
const emptyState = document.getElementById('emptyState');
|
286 |
+
|
287 |
+
if (phases.length === 0) {
|
288 |
+
tbody.innerHTML = '';
|
289 |
+
emptyState.style.display = 'block';
|
290 |
+
return;
|
291 |
+
}
|
292 |
+
|
293 |
+
emptyState.style.display = 'none';
|
294 |
+
|
295 |
+
tbody.innerHTML = phases.map
|