moisesarnaldo commited on
Commit
d2f4066
·
verified ·
1 Parent(s): 8423472

sempre enviar todas variaveis mesmo que vazias

Browse files
Files changed (2) hide show
  1. README.md +8 -4
  2. index.html +856 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Shadowwhistle
3
- emoji: 🐠
4
  colorFrom: red
5
- colorTo: green
 
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: ShadowWhistle 🕵️‍♂️
 
3
  colorFrom: red
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,856 @@
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>Web Denúncia </title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#4F46E5',
16
+ secondary: '#10B981',
17
+ dark: '#1E1E2C',
18
+ glass: 'rgba(255, 255, 255, 0.15)'
19
+ },
20
+ backdropBlur: {
21
+ xs: '2px',
22
+ },
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ body {
29
+ background: #000;
30
+ min-height: 100vh;
31
+ color: #000;
32
+ }
33
+ .glass-card {
34
+ background: rgba(0, 0, 0, 0.3);
35
+ backdrop-filter: blur(10px);
36
+ -webkit-backdrop-filter: blur(10px);
37
+ border: 1px solid rgba(255, 255, 255, 0.2);
38
+ }
39
+ .input-glass {
40
+ background: rgba(255, 255, 255, 0.15);
41
+ backdrop-filter: blur(5px);
42
+ -webkit-backdrop-filter: blur(5px);
43
+ border: 1px solid rgba(255, 255, 255, 0.2);
44
+ color: #fff;
45
+ transition: all .3s ease;
46
+ }
47
+ .input-glass:focus {
48
+ background: rgba(255, 255, 255, 0.25);
49
+ border-color: #FBBF24;
50
+ box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.4);
51
+ }
52
+ .crime-tag {
53
+ transition: all 0.3s ease;
54
+ }
55
+ .crime-tag:hover {
56
+ transform: translateY(-2px);
57
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
58
+ }
59
+ .add-btn {
60
+ transition: all 0.3s ease;
61
+ }
62
+ .add-btn:hover {
63
+ transform: scale(1.05);
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="text-gray-100 font-sans">
68
+ <div class="container mx-auto px-4 py-12 max-w-4xl">
69
+ <div class="glass-card rounded-xl shadow-2xl overflow-hidden">
70
+ <!-- Header -->
71
+ <div class="bg-white bg-opacity-10 px-6 py-4">
72
+ <div class="flex items-center justify-between">
73
+ <div class="flex items-center space-x-3">
74
+ <i data-feather="alert-circle" class="w-8 h-8"></i>
75
+ <h1 class="text-2xl font-bold">Denúncia Anônima</h1>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <p class="mt-2 text-sm opacity-80">Sua identidade será preservada</p>
80
+ <!-- Emergency Warning -->
81
+ <div class="mt-3 bg-red-600 bg-opacity-30 text-red-100 px-4 py-2 rounded-lg flex items-center space-x-2">
82
+ <i data-feather="alert-triangle" class="w-5 h-5"></i>
83
+ <span class="text-sm font-semibold">Se estiver correndo risco de vida ligue 190</span>
84
+ </div>
85
+ </div>
86
+ <!-- Form -->
87
+ <form class="p-6 space-y-6">
88
+ <!-- Section 1: Crime Type -->
89
+ <div class="space-y-4">
90
+ <h2 class="text-xl font-semibold border-b border-yellow-400 border-opacity-60 pb-2 text-yellow-400">
91
+ <i data-feather="alert-triangle" class="inline mr-2 w-5 h-5"></i>
92
+ Tipo de Crime *
93
+ </h2>
94
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
95
+ <label class="crime-tag cursor-pointer">
96
+ <input type="radio" name="crimeType" value="Tráfico de Drogas" class="hidden peer" required>
97
+ <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border-2 border-white border-opacity-20 peer-checked:border-yellow-400 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
98
+ <i data-feather="package" class="w-8 h-8 mb-2"></i>
99
+ <span class="text-sm sm:text-base font-medium">Tráfico de Drogas</span>
100
+ </div>
101
+ </label>
102
+ <label class="crime-tag cursor-pointer">
103
+ <input type="radio" name="crimeType" value="Porte Ilegal de Armas" class="hidden peer">
104
+ <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border-2 border-white border-opacity-20 peer-checked:border-yellow-400 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
105
+ <i data-feather="zap" class="w-8 h-8 mb-2"></i>
106
+ <span class="text-sm sm:text-base font-medium">Porte Ilegal de Armas</span>
107
+ </div>
108
+ </label>
109
+ <label class="crime-tag cursor-pointer">
110
+ <input type="radio" name="crimeType" value="Autor de Homicídio" class="hidden peer">
111
+ <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border-2 border-white border-opacity-20 peer-checked:border-yellow-400 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
112
+ <i data-feather="activity" class="w-8 h-8 mb-2"></i>
113
+ <span class="text-sm sm:text-base font-medium">Autor de Homicídio</span>
114
+ </div>
115
+ </label>
116
+ <label class="crime-tag cursor-pointer">
117
+ <input type="radio" name="crimeType" value="Roubo/Furto" class="hidden peer">
118
+ <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border-2 border-white border-opacity-20 peer-checked:border-yellow-400 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
119
+ <i data-feather="shield" class="w-8 h-8 mb-2"></i>
120
+ <span class="text-sm sm:text-base font-medium">Roubo/Furto</span>
121
+ </div>
122
+ </label>
123
+ <label class="crime-tag cursor-pointer">
124
+ <input type="radio" name="crimeType" value="Procurado pela Justiça" class="hidden peer">
125
+ <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border-2 border-white border-opacity-20 peer-checked:border-yellow-400 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
126
+ <i data-feather="eye" class="w-8 h-8 mb-2"></i>
127
+ <span class="text-sm sm:text-base font-medium">Procurado pela Justiça</span>
128
+ </div>
129
+ </label>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Dynamic Fields for Drug Trafficking -->
134
+ <div id="drugFields" class="space-y-4 hidden">
135
+ <h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Tráfico</h3>
136
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
137
+ <div>
138
+ <label class="block text-sm font-medium mb-1">Horário que ocorre</label>
139
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: 20h às 23h">
140
+ </div>
141
+ <div>
142
+ <label class="block text-sm font-medium mb-1">Possui armas de fogo?</label>
143
+ <select class="w-full bg-gray-500 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
144
+ <option value="">Selecione...</option>
145
+ <option value="sim">Sim</option>
146
+ <option value="nao">Não</option>
147
+ <option value="nao-sei">Não sei</option>
148
+ </select>
149
+ </div>
150
+ </div>
151
+ <div>
152
+ <label class="block text-sm font-medium mb-1">Tipo de Droga</label>
153
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Cocaína, Maconha, etc">
154
+ </div>
155
+ <div>
156
+ <label class="block text-sm font-medium mb-1">Tipo de Arma (se possuí)</label>
157
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Pistola, Fuzil, etc">
158
+ </div>
159
+ <div>
160
+ <label class="block text-sm font-medium mb-1">Local que Esconde a Arma (se possuí)</label>
161
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Debaixo do sofá, no forro, dentro do carro, etc">
162
+ </div>
163
+ <div>
164
+ <label class="block text-sm font-medium mb-1">Local do Esconderijo das Drogas</label>
165
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Debaixo do sofá, no forro, dentro do carro, etc">
166
+ </div>
167
+ <div>
168
+ <label class="block text-sm font-medium mb-1">Endereço que está ocorrendo o tráfico</label>
169
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Rua, Número, Bairro, Cidade, Caracteristicas do local Ex: pracinha do WI-FI">
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Dynamic Fields for Weapons -->
174
+ <div id="weaponsFields" class="space-y-4 hidden">
175
+ <h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Porte Ilegal de Armas</h3>
176
+ <div>
177
+ <label class="block text-sm font-medium mb-1">Tipo de Arma </label>
178
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Pistola, Fuzil, etc">
179
+ </div>
180
+ <div>
181
+ <label class="block text-sm font-medium mb-1">Local onde esconde a arma</label>
182
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Descreva o local">
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Dynamic Fields for Homicide -->
187
+ <div id="homicideFields" class="space-y-4 hidden">
188
+ <h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Homicídio</h3>
189
+ <div>
190
+ <label class="block text-sm font-medium mb-1">Nome da Vítima</label>
191
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Nome completo">
192
+ </div>
193
+ <div>
194
+ <label class="block text-sm font-medium mb-1">Data do Fato</label>
195
+ <input type="date" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Dynamic Fields for Theft -->
200
+ <div id="theftFields" class="space-y-4 hidden">
201
+ <h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Roubo/Furto</h3>
202
+ <div>
203
+ <label class="block text-sm font-medium mb-1">Local Onde Aconteceu o Crime</label>
204
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Endereço ou descrição do local">
205
+ </div>
206
+ <div>
207
+ <label class="block text-sm font-medium mb-1">Data do Crime</label>
208
+ <input type="date" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Section 2: Basic Info -->
213
+ <div id="authorsSection" class="space-y-4">
214
+ <h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
215
+ <i data-feather="user" class="inline mr-2 w-5 h-5"></i>
216
+ Informações do Autor
217
+ </h2>
218
+ <div id="authorsContainer">
219
+ <!-- Autor 1 -->
220
+ <div class="author-block space-y-4 border border-white border-opacity-20 rounded-lg p-4">
221
+ <h3 class="text-lg font-medium">Autor </h3>
222
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
223
+ <div>
224
+ <label class="block text-sm font-medium mb-1">Nome do Indivíduo (se souber)</label>
225
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
226
+ </div>
227
+ <div>
228
+ <label class="block text-sm font-medium mb-1">Vulgo/Apelido (se souber)</label>
229
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
230
+ </div>
231
+ </div>
232
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
233
+ <div>
234
+ <label class="block text-sm font-medium mb-1">Rede Social (se souber)</label>
235
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Nome do perfil (opcional)">
236
+ </div>
237
+ <div>
238
+ <label class="block text-sm font-medium mb-1">Documento (se souber)</label>
239
+ <input type="text" class="flex-1 input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="RG, CPF, CNH...">
240
+ </div>
241
+ </div>
242
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
243
+ <div>
244
+ <label class="block text-sm font-medium mb-1">Rua *</label>
245
+ <input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
246
+ </div>
247
+ <div>
248
+ <label class="block text-sm font-medium mb-1">Número *</label>
249
+ <input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
250
+ </div>
251
+ <div>
252
+ <label class="block text-sm font-medium mb-1">Bairro *</label>
253
+ <input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
254
+ </div>
255
+ <div>
256
+ <label class="block text-sm font-medium mb-1">Cidade *</label>
257
+ <input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
258
+ </div>
259
+ </div>
260
+ <div>
261
+ <label class="block text-sm font-medium mb-1">Características do Local (se souber)</label>
262
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Casa branca com muro alto, câmeras, cachorro etc.">
263
+ </div>
264
+ <div>
265
+ <label class="block text-sm font-medium mb-1">Características do Autor (se souber)</label>
266
+ <textarea rows="3" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Tatuagens, cicatriz, altura, cor dos olhos, etc."></textarea>
267
+ </div>
268
+ <div>
269
+ <label class="block text-sm font-medium mb-1">Veículos (se souber)</label>
270
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Modelo, Cor, Placa">
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ <!-- Dynamic Fields for Drug Trafficking -->
276
+ <div id="drugFields" class="space-y-4 hidden">
277
+ <h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Tráfico</h3>
278
+
279
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
280
+ <div>
281
+ <label class="block text-sm font-medium mb-1">Horário que ocorre</label>
282
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: 20h-23h">
283
+ </div>
284
+ <div>
285
+ <label class="block text-sm font-medium mb-1">Possui armas de fogo?</label>
286
+ <select class="w-full bg-black text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
287
+ <option value="">Selecione...</option>
288
+ <option value="yes">Sim</option>
289
+ <option value="no">Não</option>
290
+ <option value="unknown">Não sei</option>
291
+ </select>
292
+ </div>
293
+ </div>
294
+ <div>
295
+ <label class="block text-sm font-medium mb-1">Tipo de Droga</label>
296
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Cocaína, Maconha, etc">
297
+ </div>
298
+ <div>
299
+ <label class="block text-sm font-medium mb-1">Tipo de Arma</label>
300
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Pistola, Fuzil, etc">
301
+ </div>
302
+ <div>
303
+ <label class="block text-sm font-medium mb-1">Local que Esconde a Arma</label>
304
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Sob o sofá, dentro do carro, etc">
305
+ </div>
306
+ <div>
307
+ <label class="block text-sm font-medium mb-1">Local do Esconderijo das Drogas</label>
308
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Descreva o local">
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Dynamic Fields for Weapons -->
313
+ <div id="weaponsFields" class="space-y-4 hidden">
314
+ <h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Porte Ilegal de Armas</h3>
315
+ <div>
316
+ <label class="block text-sm font-medium mb-1">Tipo de Arma</label>
317
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Pistola, Fuzil, etc">
318
+ </div>
319
+ <div>
320
+ <label class="block text-sm font-medium mb-1">Local onde esconde a arma</label>
321
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Descreva o local">
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Dynamic Fields for Homicide -->
326
+ <div id="homicideFields" class="space-y-4 hidden">
327
+ <h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Homicídio</h3>
328
+ <div>
329
+ <label class="block text-sm font-medium mb-1">Nome da Vítima</label>
330
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Nome completo">
331
+ </div>
332
+ <div>
333
+ <label class="block text-sm font-medium mb-1">Data do Fato</label>
334
+ <input type="date" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Dynamic Fields for Theft -->
339
+ <div id="theftFields" class="space-y-4 hidden">
340
+ <h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Roubo/Furto</h3>
341
+ <div>
342
+ <label class="block text-sm font-medium mb-1">Local do Crime</label>
343
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Endereço ou descrição do local">
344
+ </div>
345
+ <div>
346
+ <label class="block text-sm font-medium mb-1">Data do Crime</label>
347
+ <input type="date" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
348
+ </div>
349
+ </div>
350
+ <!-- Section 4: Comparsas -->
351
+ <div class="space-y-4">
352
+ <h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
353
+ <i data-feather="users" class="inline mr-2 w-5 h-5"></i>
354
+ Comparsas (se souber)
355
+ </h2>
356
+ <div id="comparsasContainer">
357
+ <!-- Campo inicial -->
358
+ <div class="comparsa-block flex items-start space-x-2">
359
+ <textarea name="comparsa_1_nome_endereco" rows="2" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Nome completo, vulgo, endereço"></textarea>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <!-- Section 5: Photos -->
364
+ <div class="space-y-4">
365
+ <h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
366
+ <i data-feather="image" class="inline mr-2 w-5 h-5"></i>
367
+ Foto (se tiver)
368
+ </h2>
369
+ <div id="photosContainer">
370
+ <div class="flex space-x-2">
371
+ <input type="file" accept="image/*,video/*" class="flex-1 input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-yellow-400 file:text-black hover:file:bg-opacity-80">
372
+ <button type="button" onclick="addPhotoField()" class="add-btn bg-yellow-400 bg-opacity-80 hover:bg-opacity-100 text-black px-3 rounded-lg flex items-center">
373
+ <i data-feather="plus" class="w-5 h-5"></i>
374
+ </button>
375
+ </div>
376
+ </div>
377
+ <p class="text-xs opacity-60">Máximo 5 arquivos (10MB cada)</p>
378
+ </div>
379
+ <!-- Section 5: Description -->
380
+ <div class="space-y-4">
381
+ <h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
382
+ <i data-feather="edit" class="inline mr-2 w-5 h-5"></i>
383
+ Descrição da Denúncia *
384
+ </h2>
385
+ <textarea required rows="5" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Descreva com detalhes os fatos, comportamentos suspeitos, frequência, etc."></textarea>
386
+ </div>
387
+ <!-- Section 6: Contact -->
388
+ <div class="space-y-4">
389
+ <h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
390
+ <i data-feather="phone" class="inline mr-2 w-5 h-5"></i>
391
+ Contato (Opcional)
392
+ </h2>
393
+
394
+ <div>
395
+ <label class="block text-sm font-medium mb-1">Telefone para contato posterior</label>
396
+ <input type="tel" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="(DDD) 99999-9999">
397
+ <p class="text-xs opacity-60 mt-1">Este campo é opcional. Seu número será mantido em sigilo absoluto.</p>
398
+ </div>
399
+ </div>
400
+ <!-- Submit -->
401
+ <div class="pt-4">
402
+ <button id="submitBtn" type="submit" class="w-full bg-yellow-400 bg-opacity-60 hover:bg-opacity-80 text-black font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
403
+ <i data-feather="send" class="w-5 h-5"></i>
404
+ <span>Enviar Denúncia</span>
405
+ </button>
406
+ <div id="loadingBar" class="hidden mt-4">
407
+ <div class="bg-yellow-400 bg-opacity-20 rounded-full h-2">
408
+ <div class="bg-yellow-400 h-2 rounded-full animate-pulse" style="width: 0%" id="progressBar"></div>
409
+ </div>
410
+ <p class="text-center text-yellow-400 mt-2 text-sm">Enviando denúncia...</p>
411
+ </div>
412
+ <div id="successMessage" class="hidden mt-4 text-center">
413
+ <div class="bg-green-500 bg-opacity-20 border border-green-400 rounded-lg p-4">
414
+ <i data-feather="check-circle" class="w-8 h-8 text-green-400 mx-auto"></i>
415
+ <p class="text-green-400 text-lg font-semibold mt-2">Denúncia enviada com sucesso!</p>
416
+ </div>
417
+ </div>
418
+ <p class="text-xs text-center mt-2 opacity-70">Todas as informações serão tratadas com sigilo absoluto</p>
419
+ <p class="text-xs text-center mt-2 text-yellow-200 font-semibold">
420
+ Esta página não substitui os canais oficiais:
421
+ <a href="https://www.webdenuncia.sp.gov.br/cidadao/denuncie" target="_blank" class="underline">Web Denúncia oficial</a> ou 181
422
+ </p>
423
+ </div>
424
+ </form>
425
+ </div>
426
+ </div>
427
+
428
+ <script>
429
+ // Initialize feather icons
430
+ feather.replace();
431
+ // Show/hide dynamic fields based on crime type
432
+ document.querySelectorAll('input[name="crimeType"]').forEach(radio => {
433
+ radio.addEventListener('change', function() {
434
+ // Hide all dynamic sections
435
+ document.getElementById('drugFields').classList.add('hidden');
436
+ document.getElementById('weaponsFields').classList.add('hidden');
437
+ document.getElementById('homicideFields').classList.add('hidden');
438
+ document.getElementById('theftFields').classList.add('hidden');
439
+ // Show relevant section
440
+ if (this.value === 'Tráfico de Drogas') {
441
+ document.getElementById('drugFields').classList.remove('hidden');
442
+ } else if (this.value === 'Porte Ilegal de Armas') {
443
+ document.getElementById('weaponsFields').classList.remove('hidden');
444
+ } else if (this.value === 'Autor de Homicídio') {
445
+ document.getElementById('homicideFields').classList.remove('hidden');
446
+ } else if (this.value === 'Roubo/Furto') {
447
+ document.getElementById('theftFields').classList.remove('hidden');
448
+ }
449
+ // Authors section always visible
450
+ document.getElementById('authorsSection').classList.remove('hidden');
451
+ });
452
+ });
453
+ // Add author field
454
+ function addAuthorField() {
455
+ const container = document.getElementById('authorsContainer');
456
+ const authorCount = container.querySelectorAll('.author-block').length + 1;
457
+ const div = document.createElement('div');
458
+ div.className = 'author-block space-y-4 border border-white border-opacity-20 rounded-lg p-4 mt-4';
459
+ div.innerHTML = `
460
+ <div class="flex justify-between items-center">
461
+ <h3 class="text-lg font-medium">Autor ${authorCount}</h3>
462
+ <button type="button" onclick="this.parentElement.parentElement.remove()" class="bg-yellow-400 bg-opacity-80 hover:bg-opacity-100 text-black px-3 py-1 rounded-lg flex items-center text-sm">
463
+ <i data-feather="x" class="w-4 h-4 mr-1"></i> Remover
464
+ </button>
465
+ </div>
466
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
467
+ <div>
468
+ <label class="block text-sm font-medium mb-1">Nome do Indivíduo (se souber)</label>
469
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
470
+ </div>
471
+ <div>
472
+ <label class="block text-sm font-medium mb-1">Vulgo/Apelido (se souber)</label>
473
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
474
+ </div>
475
+ </div>
476
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
477
+ <div>
478
+ <label class="block text-sm font-medium mb-1">Rede Social (se souber)</label>
479
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: @perfil (opcional)">
480
+ </div>
481
+ <div>
482
+ <label class="block text-sm font-medium mb-1">Documento (se souber)</label>
483
+ <input type="text" class="flex-1 input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="RG, CPF, CNH...">
484
+ </div>
485
+ </div>
486
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
487
+ <div>
488
+ <label class="block text-sm font-medium mb-1">Rua *</label>
489
+ <input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
490
+ </div>
491
+ <div>
492
+ <label class="block text-sm font-medium mb-1">Número *</label>
493
+ <input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
494
+ </div>
495
+ <div>
496
+ <label class="block text-sm font-medium mb-1">Bairro *</label>
497
+ <input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
498
+ </div>
499
+ <div>
500
+ <label class="block text-sm font-medium mb-1">Cidade *</label>
501
+ <input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
502
+ </div>
503
+ </div>
504
+ <div>
505
+ <label class="block text-sm font-medium mb-1">Características do Local</label>
506
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Ex: Casa com muro alto, câmeras, etc.">
507
+ </div>
508
+ <div>
509
+ <label class="block text-sm font-medium mb-1">Características do Autor</label>
510
+ <textarea rows="3" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Tatuagens, sinais, altura, cor dos olhos, etc."></textarea>
511
+ </div>
512
+ <div>
513
+ <label class="block text-sm font-medium mb-1">Veículo (se aplicável / se souber)</label>
514
+ <input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Modelo, Cor, Placa">
515
+ </div>
516
+ `;
517
+ container.appendChild(div);
518
+ feather.replace();
519
+ }
520
+ // Add vehicle field (generic) - REMOVIDO
521
+ // Add photo field
522
+ function addPhotoField() {
523
+ const container = document.getElementById('photosContainer');
524
+ const div = document.createElement('div');
525
+ div.className = 'flex space-x-2 mt-2';
526
+ div.innerHTML = `
527
+ <input type="file" accept="image/*,video/*" class="flex-1 input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-yellow-400 file:text-black hover:file:bg-opacity-80">
528
+ <button type="button" onclick="this.parentElement.remove()" class="bg-yellow-400 bg-opacity-80 hover:bg-opacity-100 text-black px-3 rounded-lg flex items-center">
529
+ <i data-feather="x" class="w-5 h-5"></i>
530
+ </button>
531
+ `;
532
+ // Limit to 5 files
533
+ if (container.querySelectorAll('input[type="file"]').length < 5) {
534
+ container.appendChild(div);
535
+ feather.replace();
536
+ } else {
537
+ alert('Máximo de 5 arquivos atingido');
538
+ }
539
+ }
540
+ </script>
541
+ <script>
542
+ // Initialize feather icons
543
+ feather.replace();
544
+ // Generate protocol number
545
+ function generateProtocolNumber() {
546
+ const now = new Date();
547
+ const day = String(now.getDate()).padStart(2, '0');
548
+ const month = String(now.getMonth() + 1).padStart(2, '0');
549
+ const year = String(now.getFullYear());
550
+ // Simple sequential number simulation (could be replaced with server-side logic)
551
+ const seq = String(Math.floor(Math.random() * 999) + 1).padStart(3, '0');
552
+ return `DD${seq}${day}${month}${year}`;
553
+ }
554
+ // Collect all form data
555
+ async function collectFormData() {
556
+ const formData = new FormData();
557
+ // Informações básicas
558
+ const now = new Date();
559
+ const protocol = generateProtocolNumber();
560
+ formData.append('numero_protocolo', protocol);
561
+ formData.append('tipo_crime', document.querySelector('input[name="crimeType"]:checked')?.value || '');
562
+ const formattedDate = now.toLocaleString('pt-BR');
563
+ formData.append('datahora_elaboracao', formattedDate);
564
+ // Dynamic fields based on crime type
565
+ const crimeType = document.querySelector('input[name="crimeType"]:checked')?.value || '';
566
+ formData.append('tipo_crime', crimeType);
567
+
568
+ const drugInputs = document.querySelectorAll('#drugFields input, #drugFields select');
569
+ drugInputs.forEach(input => {
570
+ const label = input.parentElement.querySelector('label')?.textContent?.trim() || '';
571
+ formData.append(`drogas_${label}`, input.value || '');
572
+ });
573
+
574
+ const weaponsInputs = document.querySelectorAll('#weaponsFields input');
575
+ weaponsInputs.forEach(input => {
576
+ const label = input.parentElement.querySelector('label')?.textContent?.trim() || '';
577
+ formData.append(`armas_${label}`, input.value || '');
578
+ });
579
+
580
+ const homicideInputs = document.querySelectorAll('#homicideFields input');
581
+ homicideInputs.forEach(input => {
582
+ const label = input.parentElement.querySelector('label')?.textContent?.trim() || '';
583
+ formData.append(`homicidio_${label}`, input.value || '');
584
+ });
585
+
586
+ const theftInputs = document.querySelectorAll('#theftFields input');
587
+ theftInputs.forEach(input => {
588
+ const label = input.parentElement.querySelector('label')?.textContent?.trim() || '';
589
+ formData.append(`roubo_${label}`, input.value || '');
590
+ });
591
+ // Informações dos autores com rótulo (se souber)
592
+ const authorsBlocks = document.querySelectorAll('.author-block');
593
+ authorsBlocks.forEach((block, index) => {
594
+ const inputs = block.querySelectorAll('input, textarea');
595
+ inputs.forEach(input => {
596
+ const label = input.parentElement.querySelector('label')?.textContent?.trim() || '';
597
+ const isRequired = !label.includes('(se souber)') && !label.includes('(Opcional)');
598
+
599
+ let fieldLabel = label;
600
+ if (!isRequired && !label.includes('se souber')) {
601
+ const cleanLabel = label.replace('*', '').trim();
602
+ fieldLabel = `${cleanLabel} (se souver)`;
603
+ }
604
+ formData.append(`autor_${index + 1}_${fieldLabel}`, input.value || '');
605
+ });
606
+ });
607
+ // Fotos e vídeos como base64
608
+ const files = document.querySelectorAll('input[type="file"]');
609
+ let fileCount = 0;
610
+ for (const fileInput of files) {
611
+ if (fileInput.files.length > 0) {
612
+ const file = fileInput.files[0];
613
+ const base64 = await fileToBase64(file);
614
+ formData.append(`arquivo_${fileCount}`, base64);
615
+ formData.append(`arquivo_${fileCount}_nome`, file.name);
616
+ formData.append(`arquivo_${fileCount}_tipo`, file.type);
617
+ fileCount++;
618
+ }
619
+ }
620
+ // Descrição
621
+ const description = document.querySelector('textarea[placeholder*="Descreva com detalhes"]');
622
+ formData.append('descricao', description?.value || '');
623
+
624
+ // Contato
625
+ const contact = document.querySelector('input[type="tel"]');
626
+ formData.append('telefone_contato', contact?.value || '');
627
+ return formData;
628
+ }
629
+
630
+ // Form submission
631
+ document.querySelector('form').addEventListener('submit', async (e) => {
632
+ e.preventDefault();
633
+
634
+ const submitBtn = document.getElementById('submitBtn');
635
+ const loadingBar = document.getElementById('loadingBar');
636
+ const successMessage = document.getElementById('successMessage');
637
+ const protocolNumber = document.getElementById('protocolNumber');
638
+ const progressBar = document.getElementById('progressBar');
639
+
640
+ // Disable submit button
641
+ submitBtn.disabled = true;
642
+ submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
643
+ loadingBar.classList.remove('hidden');
644
+
645
+ // Animate progress bar
646
+ let progress = 0;
647
+ const interval = setInterval(() => {
648
+ progress += Math.random() * 10;
649
+ if (progress > 90) progress = 90;
650
+ progressBar.style.width = `${progress}%`;
651
+ }, 100);
652
+ try {
653
+ const formData = await collectFormData();
654
+
655
+ const response = await fetch('https://n8n.mohena.xyz/webhook/dadoswebDD', {
656
+ method: 'POST',
657
+ body: formData
658
+ });
659
+ if (response.ok) {
660
+ clearInterval(interval);
661
+ progressBar.style.width = '100%';
662
+
663
+ setTimeout(() => {
664
+ loadingBar.classList.add('hidden');
665
+ successMessage.classList.remove('hidden');
666
+
667
+ // Reset form
668
+ document.querySelector('form').reset();
669
+ document.getElementById('authorsSection').classList.add('hidden');
670
+ document.getElementById('drugFields').classList.add('hidden');
671
+ document.getElementById('weaponsFields').classList.add('hidden');
672
+ document.getElementById('homicideFields').classList.add('hidden');
673
+ document.getElementById('theftFields').classList.add('hidden');
674
+
675
+ // Clean extra fields
676
+ document.querySelectorAll('.author-block:not(:first-child)').forEach(block => block.remove());
677
+
678
+ }, 500);
679
+ } else {
680
+ throw new Error('Erro ao enviar denúncia');
681
+ }
682
+ } catch (error) {
683
+ alert('Erro ao enviar denúncia. Por favor, tente novamente.');
684
+ console.error('Error:', error);
685
+ submitBtn.disabled = false;
686
+ submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
687
+ loadingBar.classList.add('hidden');
688
+ clearInterval(interval);
689
+ }
690
+ });
691
+ // Show/hide dynamic fields based on crime type
692
+ document.querySelectorAll('input[name="crimeType"]').forEach(radio => {
693
+ radio.addEventListener('change', function() {
694
+ // Hide all dynamic sections
695
+ document.getElementById('drugFields').classList.add('hidden');
696
+ document.getElementById('weaponsFields').classList.add('hidden');
697
+ document.getElementById('homicideFields').classList.add('hidden');
698
+ document.getElementById('theftFields').classList.add('hidden');
699
+ // Show relevant section
700
+ if (this.value === 'Tráfico de Drogas') {
701
+ document.getElementById('drugFields').classList.remove('hidden');
702
+ } else if (this.value === 'Porte Ilegal de Armas') {
703
+ document.getElementById('weaponsFields').classList.remove('hidden');
704
+ } else if (this.value === 'Autor de Homicídio') {
705
+ document.getElementById('homicideFields').classList.remove('hidden');
706
+ } else if (this.value === 'Roubo/Furto') {
707
+ document.getElementById('theftFields').classList.remove('hidden');
708
+ }
709
+ // Authors section always visible
710
+ document.getElementById('authorsSection').classList.remove('hidden');
711
+ });
712
+ });
713
+ // Add author field function removed
714
+ // Add vehicle field (generic)
715
+ function addVehicleField(button) {
716
+ const container = button.parentElement.parentElement;
717
+ const div = document.createElement('div');
718
+ div.className = 'flex space-x-2 mt-2';
719
+ div.innerHTML = `
720
+ <input type="text" class="flex-1 input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Modelo, Cor, Placa">
721
+ <button type="button" onclick="this.parentElement.remove()" class="bg-yellow-400 bg-opacity-80 hover:bg-opacity-100 text-black px-3 rounded-lg flex items-center">
722
+ <i data-feather="x" class="w-5 h-5"></i>
723
+ </button>
724
+ `;
725
+ container.appendChild(div);
726
+ feather.replace();
727
+ }
728
+
729
+ // Add photo field
730
+ function addPhotoField() {
731
+ const container = document.getElementById('photosContainer');
732
+ const div = document.createElement('div');
733
+ div.className = 'flex space-x-2 mt-2';
734
+ div.innerHTML = `
735
+ <input type="file" accept="image/*,video/*" class="flex-1 input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-yellow-400 file:text-black hover:file:bg-opacity-80">
736
+ <button type="button" onclick="this.parentElement.remove()" class="bg-yellow-400 bg-opacity-80 hover:bg-opacity-100 text-black px-3 rounded-lg flex items-center">
737
+ <i data-feather="x" class="w-5 h-5"></i>
738
+ </button>
739
+ `;
740
+ // Limit to 5 files
741
+ if (container.querySelectorAll('input[type="file"]').length < 5) {
742
+ container.appendChild(div);
743
+ feather.replace();
744
+ } else {
745
+ alert('Máximo de 5 arquivos atingido');
746
+ }
747
+ }
748
+ // Collect all form data
749
+ async function collectFormData() {
750
+ const formData = new FormData();
751
+ // Informações básicas
752
+ const now = new Date();
753
+ const protocol = generateProtocolNumber();
754
+ formData.append('numero_protocolo', protocol);
755
+ formData.append('tipo_crime', document.querySelector('input[name="crimeType"]:checked')?.value || '');
756
+ const formattedDate = now.toLocaleString('pt-BR');
757
+ formData.append('datahora_elaboracao', formattedDate);
758
+ // Dynamic fields based on crime type
759
+ const crimeType = document.querySelector('input[name="crimeType"]:checked')?.value;
760
+ switch(crimeType) {
761
+ case 'Tráfico de Drogas':
762
+ const drugInputs = document.querySelectorAll('#drugFields input, #drugFields select');
763
+ drugInputs.forEach(input => {
764
+ if (input.value) {
765
+ formData.append(`drogas_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
766
+ }
767
+ });
768
+ break;
769
+ case 'Porte Ilegal de Armas':
770
+ const weaponsInputs = document.querySelectorAll('#weaponsFields input');
771
+ weaponsInputs.forEach(input => {
772
+ if (input.value) {
773
+ formData.append(`armas_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
774
+ }
775
+ });
776
+ break;
777
+ case 'Autor de Homicídio':
778
+ const homicideInputs = document.querySelectorAll('#homicideFields input');
779
+ homicideInputs.forEach(input => {
780
+ if (input.value) {
781
+ formData.append(`homicidio_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
782
+ }
783
+ });
784
+ break;
785
+ case 'Roubo/Furto':
786
+ const theftInputs = document.querySelectorAll('#theftFields input');
787
+ theftInputs.forEach(input => {
788
+ if (input.value) {
789
+ formData.append(`roubo_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
790
+ }
791
+ });
792
+ break;
793
+ }
794
+ // Comparsas
795
+ const comparsasBlocks = document.querySelectorAll('.comparsa-block');
796
+ comparsasBlocks.forEach((block, index) => {
797
+ const textarea = block.querySelector('textarea');
798
+ formData.append(`comparsa_${index+1}`, textarea?.value || '');
799
+ });
800
+ // Informações dos autores com rótulo (se souber)
801
+ const authorsBlocks = document.querySelectorAll('.author-block');
802
+ authorsBlocks.forEach((block, index) => {
803
+ const inputs = block.querySelectorAll('input, textarea');
804
+ inputs.forEach(input => {
805
+ const label = input.parentElement.querySelector('label')?.textContent?.trim() || '';
806
+ const isRequired = !label.includes('(se souber)') && !label.includes('(Opcional)');
807
+
808
+ let fieldLabel = label;
809
+ if (!isRequired && !label.includes('se souber')) {
810
+ const cleanLabel = label.replace('*', '').trim();
811
+ fieldLabel = `${cleanLabel} (se souber)`;
812
+ }
813
+ if (input.value || !isRequired) {
814
+ formData.append(`autor_${index + 1}_${fieldLabel}`, input.value || '');
815
+ }
816
+ });
817
+ });
818
+ // Fotos e vídeos como base64
819
+ const files = document.querySelectorAll('input[type="file"]');
820
+ let fileCount = 0;
821
+ for (const fileInput of files) {
822
+ if (fileInput.files.length > 0) {
823
+ const file = fileInput.files[0];
824
+ const base64 = await fileToBase64(file);
825
+ formData.append(`arquivo_${fileCount}`, base64);
826
+ formData.append(`arquivo_${fileCount}_nome`, file.name);
827
+ formData.append(`arquivo_${fileCount}_tipo`, file.type);
828
+ fileCount++;
829
+ }
830
+ }
831
+ // Descrição
832
+ const description = document.querySelector('textarea[placeholder*="Descreva com detalhes"]');
833
+ if (description?.value) {
834
+ formData.append('descricao', description.value);
835
+ }
836
+ // Contato
837
+ const contact = document.querySelector('input[type="tel"]');
838
+ if (contact?.value) {
839
+ formData.append('telefone_contato', contact.value);
840
+ }
841
+
842
+ return formData;
843
+ }
844
+
845
+ // Helper: convert file to base64
846
+ function fileToBase64(file) {
847
+ return new Promise((resolve, reject) => {
848
+ const reader = new FileReader();
849
+ reader.readAsDataURL(file);
850
+ reader.onload = () => resolve(reader.result);
851
+ reader.onerror = error => reject(error);
852
+ });
853
+ }
854
+ </script>
855
+ </body>
856
+ </html>