UI ADJUSTS

app.py

@@ -42,15 +42,10 @@ C_CARD    = "#F4F4F0"
 C_RED     = "#E53935"
 C_ORANGE  = "#FB8C00"
 
-# ─── Head HTML para carregar ícones ──────────────────────────────────────────
-# Esta é a forma correta de injetar bibliotecas externas no Gradio
-HEAD_HTML = """
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">
-"""
-
 # ─── CSS ─────────────────────────────────────────────────────────────────────
 CSS = f"""
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
 
 * {{ box-sizing: border-box; font-family: 'Inter', sans-serif; }}
 
@@ -59,7 +54,7 @@ CSS = f"""
     max-width: 480px !important;
     margin: 0 auto !important;
     padding: 0 !important;
-    background: #f8f9fa !important;
+    background: #f8f9fa !important; /* Fundo levemente cinza para destacar os cards */
     min-height: 100dvh;
 }}
 
@@ -184,7 +179,7 @@ footer {{ display: none !important; }}
     border: 1px solid #eaeaea !important;
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 20px; /* Espaçamento entre os passos */
 }}
 .reg-label {{
     font-size: 14px;
@@ -261,7 +256,6 @@ footer {{ display: none !important; }}
 }}
 #status-card.ok  {{ background: #e8f5e9; color: #2e7d32; border-left: 4px solid {C_GREEN}; padding: 14px 16px; }}
 #status-card.err {{ background: #ffebee; color: #b71c1c; border-left: 4px solid {C_RED};   padding: 14px 16px; }}
-
 /* GPS box */
 #gps-box {{
     display: flex;
@@ -274,6 +268,10 @@ footer {{ display: none !important; }}
     color: #2e7d32;
     font-weight: 500;
     border: 1px solid #c8e6c9;
+    transition: all 0.3s ease;
+}}
+#gps-box i.fa-pulse {{
+    animation: fa-pulse 1s infinite;
 }}
 
 /* Animals list */
@@ -319,42 +317,81 @@ footer {{ display: none !important; }}
 }}
 """
 
+# ─── GPS JavaScript ───────────────────────────────────────────────────────────
 # ─── GPS JavaScript ───────────────────────────────────────────────────────────
 GPS_HTML = """
 <div id="gps-box">
-  <span id="gps-icon" style="font-size:18px"><i class="fa-solid fa-location-dot"></i></span>
-  <span id="gps-text">Detecting location...</span>
+  <span id="gps-icon" style="font-size:18px"><i class="fa-solid fa-location-crosshairs fa-pulse"></i></span>
+  <span id="gps-text">Requesting location permission...</span>
 </div>
 <script>
 (function() {
+  console.log('GPS script loaded');
+  
   var icon = document.getElementById('gps-icon');
   var text = document.getElementById('gps-text');
+  
   function setCoords(coords) {
+    console.log('Setting coords:', coords);
     var tb = document.querySelector('#gps-coords textarea');
     if (tb) {
       var nativeSet = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
       nativeSet.call(tb, JSON.stringify(coords));
       tb.dispatchEvent(new Event('input', { bubbles: true }));
+      console.log('Coords set successfully');
+    } else {
+      console.error('GPS coords textarea not found');
     }
   }
+  
+  // Verificar se geolocation está disponível
   if (!navigator.geolocation) {
+    console.error('Geolocation not supported');
     icon.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';
-    text.textContent = 'GPS not available in this browser.';
+    text.textContent = 'GPS não disponível neste navegador.';
     return;
   }
+  
+  console.log('Requesting geolocation...');
+  
+  // Opções mais agressivas para forçar o pedido de permissão
+  var options = {
+    enableHighAccuracy: true,
+    timeout: 15000,
+    maximumAge: 0  // Força nova requisição sempre
+  };
+  
   navigator.geolocation.getCurrentPosition(
     function(pos) {
+      console.log('Position obtained:', pos);
       var lat = parseFloat(pos.coords.latitude.toFixed(5));
       var lng = parseFloat(pos.coords.longitude.toFixed(5));
-      icon.innerHTML = '<i class="fa-solid fa-check"></i>';
-      text.textContent = 'Location: ' + lat + ', ' + lng;
+      icon.innerHTML = '<i class="fa-solid fa-location-dot"></i>';
+      text.innerHTML = '<i class="fa-solid fa-check"></i> Localização: ' + lat + ', ' + lng;
       setCoords({ lat: lat, lng: lng });
     },
     function(err) {
+      console.error('Geolocation error:', err.code, err.message);
       icon.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';
-      text.textContent = 'Location not available — sighting without GPS.';
+      
+      // Mensagens mais específicas para cada tipo de erro
+      if (err.code === 1) {
+        // PERMISSION_DENIED
+        text.innerHTML = '<i class="fa-solid fa-xmark"></i> Permissão negada. Por favor, habilite a localização nas configurações do navegador.';
+      } else if (err.code === 2) {
+        // POSITION_UNAVAILABLE
+        text.innerHTML = '<i class="fa-solid fa-xmark"></i> Localização indisponível. Verifique se o GPS está ativo.';
+      } else if (err.code === 3) {
+        // TIMEOUT
+        text.innerHTML = '<i class="fa-solid fa-clock"></i> Tempo esgotado ao buscar localização. Tente novamente.';
+      } else {
+        text.innerHTML = '<i class="fa-solid fa-xmark"></i> Erro ao obter localização: ' + err.message;
+      }
+      
+      // Registra mesmo sem GPS (com coordenadas vazias)
+      setCoords({});
     },
-    { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
+    options
   );
 })();
 </script>
@@ -544,7 +581,7 @@ def get_stats_html():
 
 
 # ─── Gradio app ───────────────────────────────────────────────────────────────
-with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Spotted Animal") as demo:
+with gr.Blocks(css=CSS, theme=gr.themes.Base(), title="Spotted Animal") as demo:
 
     # Top bar
     gr.HTML(