Spaces:

moisesboy
/

undefined

Running

App Files Files Community

moisesboy commited on Oct 3, 2025

Commit

c85931d

verified ·

1 Parent(s): 1bf21a1

coloque ao selecionar o tipo de crime e escolher arquivo em amarelo, nome individuo nao ser obrigatorio, em itens que nao for obrigatorio coloque entre parenteses (se souber), coloque para selecionar o tipo de crime primeiro na pagina, seguido do autor.

Browse files

Files changed (1) hide show

index.html +58 -13

index.html CHANGED Viewed

@@ -83,8 +83,54 @@
         </div>
 <!-- Form -->
             <form class="p-6 space-y-6">
-<!-- Section 1: Basic Info -->
                 <div 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)
@@ -95,24 +141,24 @@
                             <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 *</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">Vulgo/Apelido</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</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</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>
@@ -283,11 +329,10 @@
                         <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>
 <!-- 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-white border-opacity-20 pb-2">
+                        <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 style="accent-color: yellow;">
+                            <div class="bg-dark peer-checked:bg-primary peer-checked:text-white 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-primary peer-checked:text-white 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-primary peer-checked:text-white 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-primary peer-checked:text-white 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-primary peer-checked:text-white 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>
+<!-- Section 2: Basic Info -->
+<div 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)
                             <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>
                         <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-yellow-400 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>