undefined / index.html
moisesarnaldo's picture
tirar a opcao de adicionar outro autor e colocar um campo para comparsas
ddddf6d verified
Raw History Blame Contribute Delete
48.7 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Denúncia</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#10B981',
dark: '#1E1E2C',
glass: 'rgba(255, 255, 255, 0.15)'
},
backdropBlur: {
xs: '2px',
},
}
}
}
</script>
<style>
body {
background: #000;
min-height: 100vh;
color: #000;
}
.glass-card {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.input-glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
}
.input-glass:focus {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
.crime-tag {
transition: all 0.3s ease;
}
.crime-tag:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.add-btn {
transition: all 0.3s ease;
}
.add-btn:hover {
transform: scale(1.05);
}
</style>
</head>
<body class="text-gray-100 font-sans">
<div class="container mx-auto px-4 py-12 max-w-4xl">
<div class="glass-card rounded-xl shadow-2xl overflow-hidden">
<!-- Header -->
<div class="bg-white bg-opacity-10 px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<i data-feather="alert-circle" class="w-8 h-8"></i>
<h1 class="text-2xl font-bold">Denúncia Anônima</h1>
</div>
</div>
</div>
<p class="mt-2 text-sm opacity-80">Sua identidade será preservada</p>
<!-- Emergency Warning -->
<div class="mt-3 bg-yellow-500 bg-opacity-20 text-yellow-200 px-4 py-2 rounded-lg flex items-center space-x-2">
<i data-feather="alert-triangle" class="w-5 h-5"></i>
<span class="text-sm font-semibold">Se estiver correndo risco de vida ligue 190</span>
</div>
</div>
<!-- Form -->
<form class="p-6 space-y-6">
<!-- Section 1: Crime Type -->
<div class="space-y-4">
<h2 class="text-xl font-semibold border-b border-yellow-400 border-opacity-60 pb-2 text-yellow-400">
<i data-feather="alert-triangle" class="inline mr-2 w-5 h-5"></i>
Tipo de Crime *
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
<label class="crime-tag cursor-pointer">
<input type="radio" name="crimeType" value="Tráfico de Drogas" class="hidden peer" required>
<div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border border-white border-opacity-20 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
<i data-feather="package" class="w-8 h-8 mb-2"></i>
<span class="text-sm sm:text-base font-medium">Tráfico de Drogas</span>
</div>
</label>
<label class="crime-tag cursor-pointer">
<input type="radio" name="crimeType" value="Porte Ilegal de Armas" class="hidden peer">
<div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border border-white border-opacity-20 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
<i data-feather="zap" class="w-8 h-8 mb-2"></i>
<span class="text-sm sm:text-base font-medium">Porte Ilegal de Armas</span>
</div>
</label>
<label class="crime-tag cursor-pointer">
<input type="radio" name="crimeType" value="Autor de Homicídio" class="hidden peer">
<div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border border-white border-opacity-20 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
<i data-feather="activity" class="w-8 h-8 mb-2"></i>
<span class="text-sm sm:text-base font-medium">Autor de Homicídio</span>
</div>
</label>
<label class="crime-tag cursor-pointer">
<input type="radio" name="crimeType" value="Roubo/Furto" class="hidden peer">
<div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border border-white border-opacity-20 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
<i data-feather="shield" class="w-8 h-8 mb-2"></i>
<span class="text-sm sm:text-base font-medium">Roubo/Furto</span>
</div>
</label>
<label class="crime-tag cursor-pointer">
<input type="radio" name="crimeType" value="Procurado pela Justiça" class="hidden peer">
<div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-4 text-center border border-white border-opacity-20 flex flex-col items-center justify-center min-h-[100px] sm:min-h-[120px]">
<i data-feather="eye" class="w-8 h-8 mb-2"></i>
<span class="text-sm sm:text-base font-medium">Procurado pela Justiça</span>
</div>
</label>
</div>
</div>
<!-- Dynamic Fields for Drug Trafficking -->
<div id="drugFields" class="space-y-4 hidden">
<h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Tráfico</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Horário que ocorre</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Possui armas de fogo?</label>
<select class="w-full bg-gray-500 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
<option value="">Selecione...</option>
<option value="yes">Sim</option>
<option value="no">Não</option>
<option value="unknown">Não sei</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Tipo de Droga</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Tipo de Arma</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Local que Esconde a Arma</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Local do Esconderijo das Drogas</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Endereço que está ocorrendo o tráfico</label>
<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">
</div>
</div>
<!-- Dynamic Fields for Weapons -->
<div id="weaponsFields" class="space-y-4 hidden">
<h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Porte Ilegal de Armas</h3>
<div>
<label class="block text-sm font-medium mb-1">Tipo de Arma</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Local onde esconde a arma</label>
<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">
</div>
</div>
<!-- Dynamic Fields for Homicide -->
<div id="homicideFields" class="space-y-4 hidden">
<h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Homicídio</h3>
<div>
<label class="block text-sm font-medium mb-1">Nome da Vítima</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Data do Fato</label>
<input type="date" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<!-- Dynamic Fields for Theft -->
<div id="theftFields" class="space-y-4 hidden">
<h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Roubo/Furto</h3>
<div>
<label class="block text-sm font-medium mb-1">Local do Crime</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Data do Crime</label>
<input type="date" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<!-- Section 2: Author Info -->
<div id="authorSection" class="space-y-4">
<h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
<i data-feather="user" class="inline mr-2 w-5 h-5"></i>
Informações do Autor Principal
</h2>
<div class="space-y-4 border border-white border-opacity-20 rounded-lg p-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Nome do Indivíduo (se souber)</label>
<input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium mb-1">Vulgo/Apelido (se souber)</label>
<input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Rede Social (se souber)</label>
<input type="url" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="https://instagram.com/...">
</div>
<div>
<label class="block text-sm font-medium mb-1">Documento (se souber)</label>
<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...">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Rua *</label>
<input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium mb-1">Número *</label>
<input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium mb-1">Bairro *</label>
<input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium mb-1">Cidade *</label>
<input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Características do Local (se souber)</label>
<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.">
</div>
<div>
<label class="block text-sm font-medium mb-1">Características do Autor (se souber)</label>
<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>
</div>
<div>
<label class="block text-sm font-medium mb-1">Veículo (se souber)</label>
<div class="vehicleContainer">
<div class="flex space-x-2">
<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">
<button type="button" onclick="addVehicleField(this)" class="add-btn bg-yellow-400 bg-opacity-80 hover:bg-opacity-100 text-black px-3 rounded-lg flex items-center">
<i data-feather="plus" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Section 3: Accomplices Info -->
<div id="accomplicesSection" class="space-y-4">
<h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
<i data-feather="users" class="inline mr-2 w-5 h-5"></i>
Comparsas (se houver)
</h2>
<div>
<label class="block text-sm font-medium mb-1">Número de comparsas (se souber)</label>
<input type="number" min="0" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Quantidade">
</div>
<div>
<label class="block text-sm font-medium mb-1">Apelidos ou características (se souber)</label>
<textarea rows="3" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Descreva os comparsas, se souber nomes, apelidos ou características físicas"></textarea>
</div>
</div>
<!-- Dynamic Fields for Drug Trafficking -->
<div id="drugFields" class="space-y-4 hidden">
<h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Tráfico</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Horário que ocorre</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Possui armas de fogo?</label>
<select class="w-full bg-black text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
<option value="">Selecione...</option>
<option value="yes">Sim</option>
<option value="no">Não</option>
<option value="unknown">Não sei</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Tipo de Droga</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Tipo de Arma</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Local que Esconde a Arma</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Local do Esconderijo das Drogas</label>
<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">
</div>
</div>
<!-- Dynamic Fields for Weapons -->
<div id="weaponsFields" class="space-y-4 hidden">
<h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Porte Ilegal de Armas</h3>
<div>
<label class="block text-sm font-medium mb-1">Tipo de Arma</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Local onde esconde a arma</label>
<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">
</div>
</div>
<!-- Dynamic Fields for Homicide -->
<div id="homicideFields" class="space-y-4 hidden">
<h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Homicídio</h3>
<div>
<label class="block text-sm font-medium mb-1">Nome da Vítima</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Data do Fato</label>
<input type="date" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<!-- Dynamic Fields for Theft -->
<div id="theftFields" class="space-y-4 hidden">
<h3 class="text-lg font-medium border-b border-white border-opacity-20 pb-1">Detalhes sobre Roubo/Furto</h3>
<div>
<label class="block text-sm font-medium mb-1">Local do Crime</label>
<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">
</div>
<div>
<label class="block text-sm font-medium mb-1">Data do Crime</label>
<input type="date" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<!-- Section 4: Photos -->
<div class="space-y-4">
<h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
<i data-feather="image" class="inline mr-2 w-5 h-5"></i>
Fotos
</h2>
<div id="photosContainer">
<div class="flex space-x-2">
<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">
<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">
<i data-feather="plus" class="w-5 h-5"></i>
</button>
</div>
</div>
<p class="text-xs opacity-60">Máx. 5 arquivos (10MB cada)</p>
</div>
<!-- Section 5: Description -->
<div class="space-y-4">
<h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
<i data-feather="edit" class="inline mr-2 w-5 h-5"></i>
Descrição da Denúncia *
</h2>
<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>
</div>
<!-- Section 6: Contact -->
<div class="space-y-4">
<h2 class="text-xl font-semibold border-b border-white border-opacity-20 pb-2">
<i data-feather="phone" class="inline mr-2 w-5 h-5"></i>
Contato (Opcional)
</h2>
<div>
<label class="block text-sm font-medium mb-1">Telefone para contato posterior</label>
<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">
<p class="text-xs opacity-60 mt-1">Este campo é opcional. Seu número será mantido em sigilo absoluto.</p>
</div>
</div>
<!-- Submit -->
<div class="pt-4">
<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">
<i data-feather="send" class="w-5 h-5"></i>
<span>Enviar Denúncia</span>
</button>
<div id="loadingBar" class="hidden mt-4">
<div class="bg-yellow-400 bg-opacity-20 rounded-full h-2">
<div class="bg-yellow-400 h-2 rounded-full animate-pulse" style="width: 0%" id="progressBar"></div>
</div>
<p class="text-center text-yellow-400 mt-2 text-sm">Enviando denúncia...</p>
</div>
<div id="successMessage" class="hidden mt-4 text-center">
<div class="bg-green-500 bg-opacity-20 border border-green-400 rounded-lg p-4">
<i data-feather="check-circle" class="w-8 h-8 text-green-400 mx-auto"></i>
<p class="text-green-400 text-lg font-semibold mt-2">Denúncia enviada com sucesso!</p>
</div>
</div>
<p class="text-xs text-center mt-2 opacity-70">Todas as informações serão tratadas com sigilo</p>
<p class="text-xs text-center mt-2 text-yellow-200 font-semibold">
Esta página não substitui os canais oficiais:
<a href="https://www.webdenuncia.sp.gov.br/cidadao/denuncie" target="_blank" class="underline">Web Denúncia</a> ou 181
</p>
</div>
</form>
</div>
</div>
<script>
// Initialize feather icons
feather.replace();
// Show/hide dynamic fields based on crime type
document.querySelectorAll('input[name="crimeType"]').forEach(radio => {
radio.addEventListener('change', function() {
// Hide all dynamic sections
document.getElementById('drugFields').classList.add('hidden');
document.getElementById('weaponsFields').classList.add('hidden');
document.getElementById('homicideFields').classList.add('hidden');
document.getElementById('theftFields').classList.add('hidden');
// Show relevant section
if (this.value === 'Tráfico de Drogas') {
document.getElementById('drugFields').classList.remove('hidden');
} else if (this.value === 'Porte Ilegal de Armas') {
document.getElementById('weaponsFields').classList.remove('hidden');
} else if (this.value === 'Autor de Homicídio') {
document.getElementById('homicideFields').classList.remove('hidden');
} else if (this.value === 'Roubo/Furto') {
document.getElementById('theftFields').classList.remove('hidden');
}
// Author section always visible
document.getElementById('authorSection').classList.remove('hidden');
});
});
// Add vehicle field (generic)
function addVehicleField(button) {
const container = button.parentElement.parentElement;
const div = document.createElement('div');
div.className = 'flex space-x-2 mt-2';
div.innerHTML = `
<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">
<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">
<i data-feather="x" class="w-5 h-5"></i>
</button>
`;
container.appendChild(div);
feather.replace();
}
// Add photo field
function addPhotoField() {
const container = document.getElementById('photosContainer');
const div = document.createElement('div');
div.className = 'flex space-x-2 mt-2';
div.innerHTML = `
<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">
<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">
<i data-feather="x" class="w-5 h-5"></i>
</button>
`;
// Limit to 5 files
if (container.querySelectorAll('input[type="file"]').length < 5) {
container.appendChild(div);
feather.replace();
} else {
alert('Máximo de 5 arquivos atingido');
}
}
</script>
<script>
// Initialize feather icons
feather.replace();
// Generate protocol number
function generateProtocolNumber() {
const now = new Date();
const day = String(now.getDate()).padStart(2, '0');
const month = String(now.getMonth() + 1).padStart(2, '0');
const year = String(now.getFullYear());
// Simple sequential number simulation (could be replaced with server-side logic)
const seq = String(Math.floor(Math.random() * 999) + 1).padStart(3, '0');
return `DD${seq}${day}${month}${year}`;
}
// Collect all form data
async function collectFormData() {
const formData = new FormData();
// Basic info
const now = new Date();
const protocol = generateProtocolNumber();
formData.append('numero_protocolo', protocol);
formData.append('tipo_crime', document.querySelector('input[name="crimeType"]:checked')?.value || '');
formData.append('datahora_elaboracao', now.toISOString());
// Dynamic fields based on crime type
const crimeType = document.querySelector('input[name="crimeType"]:checked')?.value;
switch(crimeType) {
case 'Tráfico de Drogas':
const drugInputs = document.querySelectorAll('#drugFields input, #drugFields select');
drugInputs.forEach(input => {
if (input.value) {
formData.append(`drogas_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
}
});
break;
case 'Porte Ilegal de Armas':
const weaponsInputs = document.querySelectorAll('#weaponsFields input');
weaponsInputs.forEach(input => {
if (input.value) {
formData.append(`armas_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
}
});
break;
case 'Autor de Homicídio':
const homicideInputs = document.querySelectorAll('#homicideFields input');
homicideInputs.forEach(input => {
if (input.value) {
formData.append(`homicidio_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
}
});
break;
case 'Roubo/Furto':
const theftInputs = document.querySelectorAll('#theftFields input');
theftInputs.forEach(input => {
if (input.value) {
formData.append(`roubo_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
}
});
break;
}
// Authors info with (se souber) label
const authorsBlocks = document.querySelectorAll('.author-block');
authorsBlocks.forEach((block, index) => {
const inputs = block.querySelectorAll('input, textarea');
inputs.forEach(input => {
const label = input.parentElement.querySelector('label')?.textContent?.trim() || '';
const isRequired = !label.includes('(se souber)') && !label.includes('(Opcional)');
let fieldLabel = label;
if (!isRequired && !label.includes('se souber')) {
const cleanLabel = label.replace('*', '').trim();
fieldLabel = `${cleanLabel} (se souber)`;
}
if (input.value || !isRequired) {
formData.append(`autor_${index + 1}_${fieldLabel}`, input.value || '');
}
});
});
// Photos and videos as base64
const files = document.querySelectorAll('input[type="file"]');
let fileCount = 0;
for (const fileInput of files) {
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
const base64 = await fileToBase64(file);
formData.append(`arquivo_${fileCount}`, base64);
formData.append(`arquivo_${fileCount}_nome`, file.name);
formData.append(`arquivo_${fileCount}_tipo`, file.type);
fileCount++;
}
}
// Description
const description = document.querySelector('textarea[placeholder*="Descreva com detalhes"]');
if (description?.value) {
formData.append('descricao', description.value);
}
// Contact
const contact = document.querySelector('input[type="tel"]');
if (contact?.value) {
formData.append('telefone_contato', contact.value);
}
return formData;
}
// Form submission
document.querySelector('form').addEventListener('submit', async (e) => {
e.preventDefault();
const submitBtn = document.getElementById('submitBtn');
const loadingBar = document.getElementById('loadingBar');
const successMessage = document.getElementById('successMessage');
const protocolNumber = document.getElementById('protocolNumber');
const progressBar = document.getElementById('progressBar');
// Disable submit button
submitBtn.disabled = true;
submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
loadingBar.classList.remove('hidden');
// Animate progress bar
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 90) progress = 90;
progressBar.style.width = `${progress}%`;
}, 100);
try {
const formData = await collectFormData();
const response = await fetch('https://n8n.mohena.xyz/webhook/dadoswebDD', {
method: 'POST',
body: formData
});
if (response.ok) {
clearInterval(interval);
progressBar.style.width = '100%';
setTimeout(() => {
loadingBar.classList.add('hidden');
successMessage.classList.remove('hidden');
// Reset form
document.querySelector('form').reset();
document.getElementById('authorsSection').classList.add('hidden');
document.getElementById('drugFields').classList.add('hidden');
document.getElementById('weaponsFields').classList.add('hidden');
document.getElementById('homicideFields').classList.add('hidden');
document.getElementById('theftFields').classList.add('hidden');
// Clean extra fields
document.querySelectorAll('.author-block:not(:first-child)').forEach(block => block.remove());
}, 500);
} else {
throw new Error('Erro ao enviar denúncia');
}
} catch (error) {
alert('Erro ao enviar denúncia. Por favor, tente novamente.');
console.error('Error:', error);
submitBtn.disabled = false;
submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
loadingBar.classList.add('hidden');
clearInterval(interval);
}
});
// Show/hide dynamic fields based on crime type
document.querySelectorAll('input[name="crimeType"]').forEach(radio => {
radio.addEventListener('change', function() {
// Hide all dynamic sections
document.getElementById('drugFields').classList.add('hidden');
document.getElementById('weaponsFields').classList.add('hidden');
document.getElementById('homicideFields').classList.add('hidden');
document.getElementById('theftFields').classList.add('hidden');
// Show relevant section
if (this.value === 'Tráfico de Drogas') {
document.getElementById('drugFields').classList.remove('hidden');
} else if (this.value === 'Porte Ilegal de Armas') {
document.getElementById('weaponsFields').classList.remove('hidden');
} else if (this.value === 'Autor de Homicídio') {
document.getElementById('homicideFields').classList.remove('hidden');
} else if (this.value === 'Roubo/Furto') {
document.getElementById('theftFields').classList.remove('hidden');
}
// Authors section always visible
document.getElementById('authorsSection').classList.remove('hidden');
});
});
// Add author field
function addAuthorField() {
const container = document.getElementById('authorsContainer');
const authorCount = container.querySelectorAll('.author-block').length + 1;
const div = document.createElement('div');
div.className = 'author-block space-y-4 border border-white border-opacity-20 rounded-lg p-4 mt-4';
div.innerHTML = `
<div class="flex justify-between items-center">
<h3 class="text-lg font-medium">Autor ${authorCount}</h3>
<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">
<i data-feather="x" class="w-4 h-4 mr-1"></i> Remover
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Nome do Indivíduo (se souber)</label>
<input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium mb-1">Vulgo/Apelido (se souber)</label>
<input type="text" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Rede Social (se souber)</label>
<input type="url" class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="https://instagram.com/...">
</div>
<div>
<label class="block text-sm font-medium mb-1">Documento (se souber)</label>
<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...">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Rua *</label>
<input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium mb-1">Número *</label>
<input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium mb-1">Bairro *</label>
<input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium mb-1">Cidade *</label>
<input type="text" required class="w-full input-glass rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Características do Local (se souber)</label>
<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.">
</div>
<div>
<label class="block text-sm font-medium mb-1">Características do Autor (se souber)</label>
<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>
</div>
<div>
<label class="block text-sm font-medium mb-1">Veículo (se souber)</label>
<div class="vehicleContainer">
<div class="flex space-x-2">
<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">
<button type="button" onclick="addVehicleField(this)" class="add-btn bg-secondary bg-opacity-80 hover:bg-opacity-100 text-white px-3 rounded-lg flex items-center">
<i data-feather="plus" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
`;
container.appendChild(div);
feather.replace();
}
// Add vehicle field (generic)
function addVehicleField(button) {
const container = button.parentElement.parentElement;
const div = document.createElement('div');
div.className = 'flex space-x-2 mt-2';
div.innerHTML = `
<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">
<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">
<i data-feather="x" class="w-5 h-5"></i>
</button>
`;
container.appendChild(div);
feather.replace();
}
// Add photo field
function addPhotoField() {
const container = document.getElementById('photosContainer');
const div = document.createElement('div');
div.className = 'flex space-x-2 mt-2';
div.innerHTML = `
<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">
<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">
<i data-feather="x" class="w-5 h-5"></i>
</button>
`;
// Limit to 5 files
if (container.querySelectorAll('input[type="file"]').length < 5) {
container.appendChild(div);
feather.replace();
} else {
alert('Máximo de 5 arquivos atingido');
}
}
// Helper: convert file to base64
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
</script>
</body>
</html>