coloque esse menu com as opcoes adicionais no inicio da pagina

index.html

@@ -86,25 +86,70 @@
             </button>
         </div>
     </nav>
-
     <div class="container mx-auto px-4 py-8 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>
+        <!-- Menu de Tipo de Crime no início -->
+        <div class="glass-card rounded-xl shadow-2xl overflow-hidden mb-6">
+            <div class="bg-white bg-opacity-10 px-6 py-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 mt-4">
+                    <label class="crime-tag cursor-pointer">
+                        <input type="radio" name="crimeTypeTop" 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 transition-colors duration-200">
+                            <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="crimeTypeTop" 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 transition-colors duration-200">
+                            <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="crimeTypeTop" 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 transition-colors duration-200">
+                            <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="crimeTypeTop" 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 transition-colors duration-200">
+                            <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="crimeTypeTop" 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 transition-colors duration-200">
+                            <i data-feather="eye" class="w-5 h-5 mx-auto mb-1"></i>
+                            Procurado pela Justiça
+                        </div>
+                    </label>
+                </div>
             </div>
         </div>
+
+        <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>
+                <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 -->
@@ -227,52 +272,9 @@
                         <span>Adicionar outro autor</span>
                     </button>
 </div>
-<!-- Section 3: 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>
-                <!-- Dynamic Fields for Drug Trafficking -->
+                <!-- Section 3: Crime Type (removido do formulário) -->
+                <!-- Conteúdo removido -->
+<!-- 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>
                     
@@ -406,8 +408,8 @@
     <script>
         // Initialize feather icons
         feather.replace();
-        // Show/hide dynamic fields based on crime type
-        document.querySelectorAll('input[name="crimeType"]').forEach(radio => {
+        // Show/hide dynamic fields based on crime type (top menu)
+        document.querySelectorAll('input[name="crimeTypeTop"]').forEach(radio => {
             radio.addEventListener('change', function() {
                 // Hide all dynamic sections
                 document.getElementById('drugFields').classList.add('hidden');
@@ -424,14 +426,9 @@
                 } else if (this.value === 'theft') {
                     document.getElementById('theftFields').classList.remove('hidden');
                 }
-                // Trigger change event on page load if drugs is selected
-                if (document.querySelector('input[name="crimeType"]:checked')?.value === 'drugs') {
-                    document.getElementById('drugFields').classList.remove('hidden');
-                }
-});
+            });
         });
-
-        // Add author field
+// Add author field
         function addAuthorField() {
             const container = document.getElementById('authorsContainer');
             const authorCount = container.querySelectorAll('.author-block').length + 1;