alexandremoraisdarosa commited on
Commit
9543fc8
·
verified ·
1 Parent(s): 134351a

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">

Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +395 -18
  3. prompts.txt +295 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Etapainvestigacaoderrotabilidade
3
- emoji: 📊
4
- colorFrom: pink
5
- colorTo: purple
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
index.html CHANGED
@@ -1,19 +1,396 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>
prompts.txt ADDED
@@ -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