envie todos os dados para o webhook https://n8n.mohena.xyz/webhook/dadoswebDD, envie tambem as imagens e videos, envie um numero unico com a data exemplo DD001031025, DDnumerosériediamesano. o nome do individuo nao é obrigatorio. em campos que nao forem obrigatorios coloque entre parenteses (se souber), ao clicar em enviar denuncia inibir botao e mostrar uma barra de carregamento enviando denuncia, em amarelo, depois exibir enviada com sucesso.

index.html

@@ -394,13 +394,25 @@
                         <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 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">
+                    <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>
+                            <p id="protocolNumber" class="text-sm opacity-70 mt-1"></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: 
@@ -546,5 +558,306 @@
             }
         }
 </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()).slice(-2);
+            return `DD${day}${month}${year}`;
+        }
+
+        // Collect all form data
+        function collectFormData() {
+            const formData = new FormData();
+            
+            // Basic info
+            formData.append('protocol_number', generateProtocolNumber());
+            formData.append('crime_type', document.querySelector('input[name="crimeType"]:checked')?.value || '');
+            
+            // Dynamic fields based on crime type
+            const crimeType = document.querySelector('input[name="crimeType"]:checked')?.value;
+            switch(crimeType) {
+                case 'drugs':
+                    const drugInputs = document.querySelectorAll('#drugFields input, #drugFields select');
+                    drugInputs.forEach(input => {
+                        if (input.value) {
+                            formData.append(`drugs_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
+                        }
+                    });
+                    break;
+                case 'weapons':
+                    const weaponsInputs = document.querySelectorAll('#weaponsFields input');
+                    weaponsInputs.forEach(input => {
+                        if (input.value) {
+                            formData.append(`weapons_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
+                        }
+                    });
+                    break;
+                case 'homicide':
+                    const homicideInputs = document.querySelectorAll('#homicideFields input');
+                    homicideInputs.forEach(input => {
+                        if (input.value) {
+                            formData.append(`homicide_${input.parentElement.querySelector('label')?.textContent?.trim()}`, input.value);
+                        }
+                    });
+                    break;
+                case 'theft':
+                    const theftInputs = document.querySelectorAll('#theftFields input');
+                    theftInputs.forEach(input => {
+                        if (input.value) {
+                            formData.append(`theft_${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(`author_${index + 1}_${fieldLabel}`, input.value || '');
+                    }
+                });
+            });
+
+            // Photos and videos
+            const files = document.querySelectorAll('input[type="file"]');
+            let fileCount = 0;
+            files.forEach((fileInput) => {
+                if (fileInput.files.length > 0) {
+                    formData.append(`file_${fileCount}`, fileInput.files[0]);
+                    fileCount++;
+                }
+            });
+
+            // Description
+            const description = document.querySelector('textarea[placeholder*="Descreva com detalhes"]');
+            if (description?.value) {
+                formData.append('description', description.value);
+            }
+
+            // Contact
+            const contact = document.querySelector('input[type="tel"]');
+            if (contact?.value) {
+                formData.append('contact_phone', 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 = 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');
+                        protocolNumber.textContent = `Protocolo: ${formData.get('protocol_number')}`;
+                        
+                        // 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 === 'drugs') {
+                    document.getElementById('drugFields').classList.remove('hidden');
+                } else if (this.value === 'weapons') {
+                    document.getElementById('weaponsFields').classList.remove('hidden');
+                } else if (this.value === 'homicide') {
+                    document.getElementById('homicideFields').classList.remove('hidden');
+                } else if (this.value === 'theft') {
+                    document.getElementById('theftFields').classList.remove('hidden');
+                }
+                // Show authors section
+                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 aplicável)</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-primary file:text-white 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>
 </body>
-</html>
+</html>