Download index.html from moisesboy/undefined: direct link, hf CLI and curl.
- Browser
- Download file 51.9 kB
-
https://huggingface.co/spaces/moisesboy/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/moisesboy/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/moisesboy/undefined/resolve/main/index.html
51.9 kB
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WhistleGlass | Denúncia Segura</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: #000; | |
| } | |
| .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-2 md:grid-cols-3 gap-3"> | |
| <label class="crime-tag cursor-pointer"> | |
| <input type="radio" name="crimeType" value="drugs" class="hidden peer" required> | |
| <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-3 text-center border border-white border-opacity-20"> | |
| <i data-feather="package" class="w-5 h-5 mx-auto mb-1"></i> | |
| Tráfico de Drogas | |
| </div> | |
| </label> | |
| <label class="crime-tag cursor-pointer"> | |
| <input type="radio" name="crimeType" value="weapons" class="hidden peer"> | |
| <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-3 text-center border border-white border-opacity-20"> | |
| <i data-feather="zap" class="w-5 h-5 mx-auto mb-1"></i> | |
| Porte Ilegal de Armas | |
| </div> | |
| </label> | |
| <label class="crime-tag cursor-pointer"> | |
| <input type="radio" name="crimeType" value="homicide" class="hidden peer"> | |
| <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-3 text-center border border-white border-opacity-20"> | |
| <i data-feather="activity" class="w-5 h-5 mx-auto mb-1"></i> | |
| Autor de Homicídio | |
| </div> | |
| </label> | |
| <label class="crime-tag cursor-pointer"> | |
| <input type="radio" name="crimeType" value="theft" class="hidden peer"> | |
| <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-3 text-center border border-white border-opacity-20"> | |
| <i data-feather="shield" class="w-5 h-5 mx-auto mb-1"></i> | |
| Roubo/Furto | |
| </div> | |
| </label> | |
| <label class="crime-tag cursor-pointer"> | |
| <input type="radio" name="crimeType" value="wanted" class="hidden peer"> | |
| <div class="bg-dark peer-checked:bg-yellow-400 peer-checked:text-black rounded-lg p-3 text-center border border-white border-opacity-20"> | |
| <i data-feather="eye" class="w-5 h-5 mx-auto mb-1"></i> | |
| Procurado pela Justiça | |
| </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 input-glass 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 2: Basic Info --> | |
| <div id="authorsSection" 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(s) Autor(es) | |
| </h2> | |
| <div id="authorsContainer"> | |
| <!-- Autor 1 --> | |
| <div class="author-block space-y-4 border border-white border-opacity-20 rounded-lg p-4"> | |
| <h3 class="text-lg font-medium">Autor 1</h3> | |
| <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-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> | |
| <button type="button" onclick="addAuthorField()" class="mt-4 bg-yellow-400 bg-opacity-80 hover:bg-opacity-100 text-black px-4 py-2 rounded-lg flex items-center space-x-2"> | |
| <i data-feather="plus" class="w-5 h-5"></i> | |
| <span>Adicionar outro autor</span> | |
| </button> | |
| </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 input-glass 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 ou Vídeos | |
| </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-primary file:text-white 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> | |
| <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: | |
| <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> | |
| </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'); | |
| } | |
| // 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 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> | |