adjusts ia

app.py

@@ -23,30 +23,29 @@ db      = Database()
 ai      = AnimalAI()
 matcher = AnimalMatcher()
 
-C_GREEN   = "#388C59"
-C_GREEN_L = "#D9EBD9"
-C_TEXT    = "#212121"
-C_RED     = "#E53935"
-C_ORANGE  = "#FB8C00"
+C_GREEN = "#388C59"
+C_RED   = "#E53935"
+C_ORANGE = "#FB8C00"
 
 HEAD_HTML = """
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">
 <script>
 (function() {
-  function updateGradioTextbox(elementId, value) {
+  // ── GPS ────────────────────────────────────────────────────────────────────
+  function setGradioValue(id, val) {
     var attempts = 0;
-    function tryUpdate() {
-      var container = document.getElementById(elementId);
-      if (!container) { if (attempts++ < 20) setTimeout(tryUpdate, 300); return; }
-      var tb = container.querySelector('textarea') || container.querySelector('input[type="text"]');
-      if (!tb) { if (attempts++ < 20) setTimeout(tryUpdate, 300); return; }
-      var proto = (tb.tagName === 'TEXTAREA') ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
+    function trySet() {
+      var el = document.getElementById(id);
+      if (!el) { if (attempts++ < 20) setTimeout(trySet, 300); return; }
+      var tb = el.querySelector('textarea') || el.querySelector('input[type="text"]');
+      if (!tb) { if (attempts++ < 20) setTimeout(trySet, 300); return; }
+      var proto = tb.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
       var setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
-      setter.call(tb, value);
+      setter.call(tb, val);
       tb.dispatchEvent(new Event('input',  { bubbles: true }));
       tb.dispatchEvent(new Event('change', { bubbles: true }));
     }
-    tryUpdate();
+    trySet();
   }
 
   function requestGPS() {
@@ -58,46 +57,53 @@ HEAD_HTML = """
     btn.disabled = true;
     btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Detectando...';
     icon.innerHTML = '<i class="fa-solid fa-spinner fa-spin" style="color:#388C59"></i>';
-    text.textContent = 'Aguardando GPS...';
     navigator.geolocation.getCurrentPosition(
       function(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" style="color:#388C59"></i>';
-        text.innerHTML = '<strong>Localizacao:</strong> ' + lat + ', ' + lng;
+        text.innerHTML = '<strong>Localização:</strong> ' + lat + ', ' + lng;
         btn.innerHTML  = '<i class="fa-solid fa-rotate"></i> Atualizar';
         btn.disabled   = false;
         btn.style.background = '#2d7a4a';
-        updateGradioTextbox('gps-coords', JSON.stringify({ lat: lat, lng: lng }));
+        setGradioValue('gps-coords', JSON.stringify({ lat: lat, lng: lng }));
       },
       function(err) {
         icon.innerHTML = '<i class="fa-solid fa-triangle-exclamation" style="color:#E53935"></i>';
         btn.innerHTML  = '<i class="fa-solid fa-location-dot"></i> Tentar novamente';
         btn.disabled   = false;
         btn.style.background = '#E53935';
-        var msgs = { 1:'Permissao negada.', 2:'Localizacao indisponivel.', 3:'Timeout GPS.' };
+        var msgs = { 1:'Permissão negada.', 2:'Localização indisponível.', 3:'Timeout GPS.' };
         text.textContent = msgs[err.code] || 'Erro: ' + err.message;
-        updateGradioTextbox('gps-coords', JSON.stringify({}));
+        setGradioValue('gps-coords', JSON.stringify({}));
       },
       { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
     );
   }
-
   window.animalVistoRequestGPS = requestGPS;
-
   document.addEventListener('click', function(e) {
-    var tabBtn = e.target.closest('.tab-nav button');
-    if (tabBtn && tabBtn.textContent.includes('Registrar')) setTimeout(requestGPS, 600);
+    var t = e.target.closest('.tab-nav button');
+    if (t && t.textContent.includes('Registrar')) setTimeout(requestGPS, 600);
   });
 
-  function patchCameraInput() {
+  // ── Câmera mobile ─────────────────────────────────────────────────────────
+  function patchCamera() {
     var el = document.getElementById('photo-upload');
-    if (!el) { setTimeout(patchCameraInput, 800); return; }
+    if (!el) { setTimeout(patchCamera, 800); return; }
     var inp = el.querySelector('input[type=file]');
     if (inp) { inp.setAttribute('capture', 'environment'); inp.setAttribute('accept', 'image/*'); }
-    else setTimeout(patchCameraInput, 800);
+    else setTimeout(patchCamera, 800);
   }
-  setTimeout(patchCameraInput, 1500);
+  setTimeout(patchCamera, 1500);
+
+  // ── Ficha modal ───────────────────────────────────────────────────────────
+  window.openFicha = function(animalId) {
+    document.getElementById('ficha-overlay').style.display = 'flex';
+    setGradioValue('selected-animal-id', String(animalId));
+  };
+  window.closeFicha = function() {
+    document.getElementById('ficha-overlay').style.display = 'none';
+  };
 })();
 </script>
 """
@@ -122,25 +128,52 @@ footer { display: none !important; }
 .reg-label i { color: #388C59; }
 #photo-upload { border: 2px dashed #cfcfcf !important; border-radius: 12px !important; background: #f9f9f9 !important; min-height: 180px; }
 #submit-btn { margin-top: 10px !important; width: 100% !important; background: #388C59 !important; border: none !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; padding: 14px !important; color: white !important; }
-#status-card { margin-top: 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
-#status-card.ok  { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #388C59; padding: 14px 16px; }
-#status-card.err { background: #ffebee; color: #b71c1c; border-left: 4px solid #E53935; padding: 14px 16px; }
+#status-card { margin-top: 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
 #gps-coords { display: none !important; }
+#selected-animal-id { display: none !important; }
 #animals-tab { padding: 0 0 80px; background: white; }
-.animal-card { display: flex; align-items: center; gap: 12px; background: white; border-radius: 12px; padding: 14px 16px; margin: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.07); border: 1px solid #f0f0f0; }
-.animal-thumb { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; background: #eee; }
+.animal-card { display: flex; align-items: center; gap: 12px; background: white; border-radius: 12px; padding: 14px 16px; margin: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.07); border: 1px solid #f0f0f0; cursor: pointer; transition: transform .1s; }
+.animal-card:active { transform: scale(.98); }
+.animal-thumb { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; background: #eee; }
+.animal-thumb img { width: 100%; height: 100%; object-fit: cover; }
 .animal-info { flex: 1; min-width: 0; }
 .animal-name { font-weight: 600; font-size: 14px; color: #212121; }
 .animal-meta { font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .animal-badge { background: #D9EBD9; color: #388C59; border-radius: 20px; padding: 3px 9px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
 .animal-badge.urgent { background: #ffebee; color: #E53935; }
 .section-header { padding: 14px 16px 6px; font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .5px; }
+/* Ficha overlay */
+#ficha-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; align-items: flex-end; justify-content: center; }
+#ficha-sheet { background: white; width: 100%; max-width: 480px; max-height: 90vh; border-radius: 20px 20px 0 0; overflow-y: auto; padding-bottom: 32px; }
+#ficha-sheet .ficha-header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid #f0f0f0; position: sticky; top: 0; background: white; z-index: 10; }
+#ficha-sheet .ficha-header h2 { margin: 0; font-size: 17px; font-weight: 700; flex: 1; }
+#ficha-sheet .ficha-header small { font-size: 12px; color: #888; display: block; }
+.ficha-close { background: #f5f5f5; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.photo-strip { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; }
+.photo-strip-item { flex-shrink: 0; text-align: center; position: relative; }
+.photo-strip-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 2px solid #eee; }
+.photo-strip-item.novo img { border-color: #388C59; }
+.photo-strip-item .novo-badge { position: absolute; top: -6px; right: -6px; background: #388C59; color: white; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 8px; }
+.photo-strip-item .photo-date { font-size: 10px; color: #888; margin-top: 4px; }
+.ficha-section { margin: 0 16px 16px; }
+.ficha-section h3 { font-size: 13px; font-weight: 700; color: #212121; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
+.id-table { width: 100%; border-collapse: collapse; }
+.id-table td { padding: 7px 0; font-size: 13px; border-bottom: 1px solid #f5f5f5; }
+.id-table td:first-child { color: #888; width: 40%; }
+.id-table td:last-child { color: #212121; font-weight: 500; }
+.marks-card { background: #fff8e1; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #795548; border-left: 3px solid #FFC107; }
+.trajectory { display: flex; align-items: center; gap: 0; padding: 8px 0; position: relative; }
+.traj-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
+.traj-line { flex: 1; height: 2px; background: #ddd; }
+.traj-label { font-size: 10px; color: #888; text-align: center; margin-top: 4px; }
+.adopt-btn { display: block; width: calc(100% - 32px); margin: 8px 16px; padding: 14px; background: #D9EBD9; border: none; border-radius: 12px; color: #388C59; font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; }
+.adopt-btn:hover { background: #c8e6c9; }
 """
 
 GPS_HTML = """
 <div id="gps-box" style="display:flex;align-items:center;gap:10px;background:#D9EBD9;border-radius:10px;padding:12px 14px;font-size:13px;color:#2e7d32;font-weight:500;border:1px solid #c8e6c9;">
   <span id="gps-icon" style="font-size:18px"><i class="fa-solid fa-location-crosshairs"></i></span>
-  <span id="gps-text" style="flex:1">Toque para detectar localizacao</span>
+  <span id="gps-text" style="flex:1">Toque para detectar localização</span>
   <button id="gps-btn" onclick="window.animalVistoRequestGPS && window.animalVistoRequestGPS()"
     style="background:#388C59;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;">
     <i class="fa-solid fa-location-dot"></i> Localizar
@@ -148,32 +181,34 @@ GPS_HTML = """
 </div>
 """
 
+FICHA_OVERLAY_HTML = """
+<div id="ficha-overlay" onclick="if(event.target===this)window.closeFicha()">
+  <div id="ficha-sheet">
+    <div id="ficha-content" style="min-height:200px;display:flex;align-items:center;justify-content:center;color:#aaa;">
+      <i class="fa-solid fa-spinner fa-spin" style="font-size:24px"></i>
+    </div>
+  </div>
+</div>
+"""
+
 
 def build_map_html(species="all", timeframe="all"):
     import base64 as _b64
     data = db.get_map_data(species, timeframe)
-    # Base64 evita conflito de aspas e escaping no srcdoc
     data_b64 = _b64.b64encode(json.dumps(data, ensure_ascii=False).encode()).decode()
-    # Leaflet via cdnjs (mais estável que unpkg no HuggingFace)
     inner = (
         '<!DOCTYPE html><html><head>'
         '<meta charset="utf-8"/>'
         '<meta name="viewport" content="width=device-width,initial-scale=1"/>'
         '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>'
-        '<style>body{margin:0;padding:0;}#map{height:100vh;width:100%;}'
-        '.popup-photo{width:100%;height:80px;object-fit:cover;border-radius:6px;margin-bottom:6px;}'
-        '</style></head><body>'
+        '<style>body{margin:0;padding:0;}#map{height:100vh;width:100%;}</style></head><body>'
         '<div id="map"></div>'
         '<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>'
         '<script>'
         'var animals=JSON.parse(atob("' + data_b64 + '"));'
         'var map=L.map("map").setView([-23.0316,-46.9785],13);'
         'L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:"OSM",maxZoom:19}).addTo(map);'
-        'if(!animals.length){'
-        '  var info=L.control({position:"topright"});'
-        '  info.onAdd=function(){var d=L.DomUtil.create("div");d.style="background:white;padding:8px 12px;border-radius:8px;font-size:13px;color:#888;";d.innerHTML="Nenhum avistamento ainda";return d;};'
-        '  info.addTo(map);'
-        '}'
+        'if(!animals.length){var info=L.control({position:"topright"});info.onAdd=function(){var d=L.DomUtil.create("div");d.style="background:white;padding:8px 12px;border-radius:8px;font-size:13px;color:#888;";d.innerHTML="Nenhum avistamento ainda";return d;};info.addTo(map);}'
         'animals.forEach(function(a){'
         '  var color=a.days_since>30?"#E53935":a.count>1?"#FB8C00":"#388C59";'
         '  var em=a.species==="dog"?"D":"G";'
@@ -181,12 +216,10 @@ def build_map_html(species="all", timeframe="all"):
         '  var ico=L.divIcon({html:"<div style=\'position:relative;background:"+color+";width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:white;box-shadow:0 2px 8px rgba(0,0,0,.3);border:2.5px solid white;\'>"+em+badge+"</div>",className:"",iconSize:[38,38],iconAnchor:[19,19],popupAnchor:[0,-22]});'
         '  var sp=a.species==="dog"?"Cao":"Gato";'
         '  var urg=a.days_since>30?"<br><small style=\'color:#E53935\'>Nao visto ha "+a.days_since+" dias</small>":"";'
-        '  var popup="<b>"+sp+" #"+a.id+"</b>"+(a.desc?"<br><small>"+a.desc+"</small>":"")+"<br><small>"+a.count+"x - "+a.last_seen+"</small>"+urg;'
-        '  L.marker([a.lat,a.lng],{icon:ico}).addTo(map).bindPopup(popup,{maxWidth:220});'
+        '  L.marker([a.lat,a.lng],{icon:ico}).addTo(map).bindPopup("<b>"+sp+" #"+a.id+"</b>"+(a.desc?"<br><small>"+a.desc+"</small>":"")+"<br><small>"+a.count+"x - "+a.last_seen+"</small>"+urg,{maxWidth:220});'
         '});'
         '</script></body></html>'
     )
-    # srcdoc: só escapa & e " (NÃO escapa < e > para não quebrar o HTML)
     srcdoc = inner.replace('&', '&amp;').replace('"', '&quot;')
     return f'<iframe srcdoc="{srcdoc}" style="width:100%;height:500px;border:none;"></iframe>'
 
@@ -194,37 +227,36 @@ def build_map_html(species="all", timeframe="all"):
 def build_animals_html():
     animals = db.get_recent_animals(limit=30)
     if not animals:
-        return '<div style="padding:40px 16px;text-align:center;color:#aaa;"><div style="font-size:48px">🐾</div><div style="font-size:15px;font-weight:500;margin-top:12px;">Nenhum animal registrado ainda</div></div>'
+        return '<div style="padding:40px 16px;text-align:center;color:#aaa;"><div style="font-size:48px">🐾</div><div style="font-size:15px;font-weight:500;margin-top:12px;">Nenhum animal registrado ainda</div><div style="font-size:13px;margin-top:6px;">Vá para Registrar e tire a primeira foto!</div></div>'
     cards = []
     for a in animals:
         try:
             desc = json.loads(a.get("description") or "{}")
         except Exception:
             desc = {}
-        is_dog   = a["species"] == "dog"
-        em       = "🐕" if is_dog else "🐈"
-        sp_pt    = "Cao" if is_dog else "Gato"
-        urgent   = a.get("days_since", 0) > 30
-        color    = C_RED if urgent else C_GREEN
+        is_dog    = a["species"] == "dog"
+        em        = "🐕" if is_dog else "🐈"
+        sp_pt     = "Cão" if is_dog else "Gato"
+        urgent    = a.get("days_since", 0) > 30
+        color     = C_RED if urgent else C_GREEN
         badge_cls = "animal-badge urgent" if urgent else "animal-badge"
-        breed    = desc.get("breed_estimate", "raca desconhecida")
+        breed     = desc.get("breed_estimate", "raça desconhecida")
         color_coat = desc.get("primary_color", "")
-        meta     = f"{breed}{' · ' + color_coat if color_coat else ''}"
-        count    = a["sighting_count"]
+        meta      = f"{breed}{' · ' + color_coat if color_coat else ''}"
+        count     = a["sighting_count"]
         last_seen = a.get("last_seen_short", "")
         photo_url = a.get("last_photo_url") or ""
+        urgent_icon = '<i class="fa-solid fa-triangle-exclamation"></i> ' if urgent else ""
         if photo_url:
-            thumb = f'<img src="{photo_url}" style="width:52px;height:52px;border-radius:10px;object-fit:cover;" onerror="this.parentElement.innerHTML=\'{em}\'">'
+            thumb = f'<img src="{photo_url}" style="width:56px;height:56px;border-radius:12px;object-fit:cover;" onerror="this.parentElement.innerHTML=\'{em}\'">'
         else:
             thumb = em
-        urgent_icon = '<i class="fa-solid fa-triangle-exclamation"></i> ' if urgent else ''
-        cards.append(f'''
-        <div class="animal-card">
+        cards.append(f'''<div class="animal-card" onclick="window.openFicha({a['id']})">
           <div class="animal-thumb">{thumb}</div>
           <div class="animal-info">
-            <div class="animal-name">{sp_pt} #{a["id"]}</div>
+            <div class="animal-name">{sp_pt} #{a['id']}</div>
             <div class="animal-meta">{meta}</div>
-            <div class="animal-meta" style="color:{color};">{urgent_icon}Visto {count}x · ultimo: {last_seen}</div>
+            <div class="animal-meta" style="color:{color};">{urgent_icon}Visto {count}x · último: {last_seen}</div>
           </div>
           <div class="{badge_cls}">{count}x</div>
         </div>''')
@@ -233,25 +265,145 @@ def build_animals_html():
     return f'<div class="section-header">🐾 {total_a} animais · {total_s} avistamentos</div>' + "".join(cards)
 
 
+def build_ficha_html(animal_id_str: str) -> str:
+    try:
+        animal_id = int(animal_id_str.strip())
+    except Exception:
+        return ""
+    detail = db.get_animal_detail(animal_id)
+    if not detail:
+        return ""
+    animal   = detail["animal"]
+    sightings = detail["sightings"]
+    try:
+        desc = json.loads(animal.get("description") or "{}")
+    except Exception:
+        desc = {}
+
+    is_dog   = animal["species"] == "dog"
+    em       = "🐕" if is_dog else "🐈"
+    sp_pt    = "Cachorro" if is_dog else "Gato"
+    count    = animal["sighting_count"]
+    breed    = desc.get("breed_estimate", "Vira-lata")
+    size_map = {"small": "Pequeno", "medium": "Médio", "large": "Grande"}
+    size_pt  = size_map.get(desc.get("size", ""), desc.get("size", "—"))
+    colors   = desc.get("primary_color", "—")
+    if desc.get("secondary_colors"):
+        colors += " com " + ", ".join(desc["secondary_colors"])
+    condition_map = {"healthy": "Aparentemente saudável", "thin": "Magro", "injured": "Ferido"}
+    condition_pt = condition_map.get(desc.get("condition", ""), "—")
+    marks = desc.get("distinctive_marks", [])
+
+    # Tira foto strip
+    photos_html = ""
+    for i, s in enumerate(sightings[:6]):
+        date_str = (s.get("created_at") or "")[:10]
+        try:
+            from datetime import date
+            d = date.fromisoformat(date_str)
+            date_label = f"{d.day:02d}/{d.month:02d}"
+        except Exception:
+            date_label = date_str[-5:] if date_str else "—"
+        is_novo = (i == 0)
+        novo_badge = '<span class="novo-badge">Novo</span>' if is_novo else ""
+        novo_cls   = "novo" if is_novo else ""
+        if s["photo_url"]:
+            img_tag = f'<img src="{s["photo_url"]}" onerror="this.src=\'\'"/>'
+        else:
+            img_tag = f'<div style="width:72px;height:72px;border-radius:10px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:28px;border:2px solid #eee;">{em}</div>'
+        photos_html += f'<div class="photo-strip-item {novo_cls}">{novo_badge}{img_tag}<div class="photo-date">{date_label}</div></div>'
+
+    # Trajetória
+    traj_html = ""
+    if len(sightings) > 1:
+        colors_dot = ["#388C59", "#FB8C00", "#E53935"]
+        items = list(reversed(sightings[:5]))
+        for i, s in enumerate(items):
+            date_str = (s.get("created_at") or "")[:10]
+            try:
+                from datetime import date
+                d = date.fromisoformat(date_str)
+                lbl = f"{d.day:02d}/{d.month:02d}"
+            except Exception:
+                lbl = date_str[-5:] if date_str else ""
+            dot_color = colors_dot[min(i, 2)]
+            traj_html += f'<div style="display:flex;flex-direction:column;align-items:center;gap:4px;">'
+            if i > 0:
+                traj_html += f'<div style="flex:1;height:2px;background:#ddd;width:40px;margin-top:6px;"></div>'
+            traj_html += f'<div style="width:12px;height:12px;border-radius:50%;background:{dot_color};"></div>'
+            traj_html += f'<div style="font-size:10px;color:#888;">{lbl}</div></div>'
+
+    # Marcas
+    marks_html = ""
+    if marks:
+        marks_list = " · ".join(marks)
+        marks_html = f'<div class="ficha-section"><h3>✨ Características marcantes</h3><div class="marks-card">{marks_list}</div></div>'
+
+    ficha = f'''
+    <div class="ficha-header">
+      <button class="ficha-close" onclick="window.closeFicha()"><i class="fa-solid fa-xmark"></i></button>
+      <div>
+        <h2>Ficha do animal</h2>
+        <small>{count} avistamento{'s' if count != 1 else ''} na região</small>
+      </div>
+    </div>
+    <div class="photo-strip">{photos_html}</div>
+    <div class="ficha-section">
+      <h3>🐾 Identificação</h3>
+      <table class="id-table">
+        <tr><td>Espécie</td><td>{sp_pt}</td></tr>
+        <tr><td>Raça</td><td>{breed}</td></tr>
+        <tr><td>Porte</td><td>{size_pt}</td></tr>
+        <tr><td>Cor</td><td>{colors}</td></tr>
+        <tr><td>Condição</td><td>{condition_pt}</td></tr>
+      </table>
+    </div>
+    {marks_html}
+    {'<div class="ficha-section"><h3>📍 Trajetória observada</h3><div style="display:flex;align-items:flex-start;gap:0;">' + traj_html + '</div></div>' if traj_html else ''}
+    <button class="adopt-btn">🏠 Quero adotar — entrar em contato</button>
+    '''
+    return f'<div id="ficha-content">{ficha}</div>'
+
+
 def build_confirmation_html(animal_id, is_new, count, species, photo_url=""):
     em    = "🐕" if species == "dog" else "🐈"
-    sp_pt = "cao" if species == "dog" else "gato"
-    title = f"Novo {sp_pt} registrado!" if is_new else f"{em} Animal reconhecido!"
-    sub   = "1o avistamento — obrigada por registrar!" if is_new else f"Este {sp_pt} ja foi avistado <b>{count}x</b> na regiao."
-    photo_html = f'<img src="{photo_url}" style="width:100%;max-height:160px;object-fit:cover;border-radius:8px;margin-bottom:8px;" onerror="this.style.display=\'none\'">' if photo_url else ""
+    sp_pt = "Cachorro" if species == "dog" else "Gato"
+    try:
+        desc_raw = (db.get_animal(animal_id) or {}).get("description") or "{}"
+        desc = json.loads(desc_raw)
+        breed = desc.get("breed_estimate", "Vira-lata")
+    except Exception:
+        breed = "Vira-lata"
+    title = "Avistamento registrado!" if is_new else f"{em} Animal reconhecido!"
+    sub   = "Obrigado por ajudar os animais da sua região 🐾"
+    ord_pt = {1:"1°",2:"2°",3:"3°",4:"4°"}.get(count, f"{count}°")
     return f'''
-    <div id="status-card" class="ok">
-      {photo_html}
-      <div style="font-size:24px;margin-bottom:6px;color:#388C59;">✅ {em}</div>
-      <div style="font-weight:700;font-size:15px;">{title}</div>
-      <div>{sub}</div>
-      <div style="font-size:12px;margin-top:6px;color:#555;">ID #{animal_id} · Avistamento salvo</div>
+    <div id="status-card" style="background:white;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.1);">
+      <div style="background:#D9EBD9;padding:32px 16px 24px;text-align:center;">
+        <div style="width:80px;height:80px;border-radius:50%;background:#388C59;display:inline-flex;align-items:center;justify-content:center;font-size:36px;position:relative;margin-bottom:12px;">
+          {em}
+          <div style="position:absolute;bottom:-4px;right:-4px;width:26px;height:26px;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2);">
+            <i class="fa-solid fa-check" style="color:#388C59;font-size:12px;"></i>
+          </div>
+        </div>
+        <div style="font-weight:700;font-size:20px;color:#212121;margin-bottom:4px;">{title}</div>
+        <div style="font-size:13px;color:#555;">{sub}</div>
+      </div>
+      <div style="padding:16px;">
+        <div style="background:#f8f9fa;border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:16px;">
+          <div style="display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #eee;"><span style="color:#888;width:90px;flex-shrink:0;">Animal</span><span style="font-weight:500;">{sp_pt} · {breed}</span></div>
+          <div style="display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #eee;"><span style="color:#888;width:90px;flex-shrink:0;">Registrado</span><span style="font-weight:500;">Agora há pouco</span></div>
+          <div style="display:flex;gap:10px;padding:6px 0;"><span style="color:#888;width:90px;flex-shrink:0;">Na região</span><span style="font-weight:500;">{ord_pt} avistamento</span></div>
+        </div>
+        <button onclick="document.querySelector('.tab-nav button').click()" style="width:100%;padding:13px;background:#388C59;color:white;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:8px;">Ver no mapa</button>
+        <button onclick="document.querySelectorAll('.tab-nav button')[1].click()" style="width:100%;padding:13px;background:transparent;color:#388C59;border:2px solid #388C59;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;">Registrar outro animal</button>
+      </div>
     </div>'''
 
 
 def process_sighting(image, gps_json, notes, progress=gr.Progress()):
     if image is None:
-        return gr.update(), '<div id="status-card" class="err">Tire uma foto do animal antes de registrar.</div>'
+        return gr.update(), '<div style="padding:16px;background:#ffebee;border-radius:12px;color:#b71c1c;border-left:4px solid #E53935;">Tire uma foto do animal antes de registrar.</div>'
     progress(0.15, desc="Analisando imagem...")
     try:
         coords = json.loads(gps_json) if gps_json and gps_json.strip() else {}
@@ -287,9 +439,10 @@ def process_sighting(image, gps_json, notes, progress=gr.Progress()):
     return gr.update(value=build_map_html()), build_confirmation_html(animal_id, is_new, count, species, photo_url)
 
 
-with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Animal Visto 🐾") as demo:
+with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Animal Visto") as demo:
 
     gr.HTML('<div id="top-bar"><h1>🐾 Animal Visto</h1><small>Vinhedo, SP</small></div>')
+    gr.HTML(FICHA_OVERLAY_HTML)
 
     species_st   = gr.State("all")
     timeframe_st = gr.State("all")
@@ -299,7 +452,7 @@ with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Animal Vi
         with gr.Tab("🗺️ Mapa"):
             with gr.Row(elem_classes="filter-row"):
                 btn_all   = gr.Button("Todos",       elem_classes="filter-row")
-                btn_dogs  = gr.Button("🐕 Caes",     elem_classes="filter-row")
+                btn_dogs  = gr.Button("🐕 Cães",     elem_classes="filter-row")
                 btn_cats  = gr.Button("🐈 Gatos",    elem_classes="filter-row")
                 btn_today = gr.Button("Hoje",          elem_classes="filter-row secondary")
                 btn_week  = gr.Button("Esta semana",   elem_classes="filter-row secondary")
@@ -307,12 +460,12 @@ with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Animal Vi
 
         with gr.Tab("📷 Registrar", elem_id="register-tab"):
             with gr.Column(elem_classes="form-card"):
-                gr.HTML('<div class="reg-label"><i class="fa-solid fa-location-dot"></i> Passo 1: Localizacao</div>')
+                gr.HTML('<div class="reg-label"><i class="fa-solid fa-location-dot"></i> Passo 1: Localização</div>')
                 gr.HTML(GPS_HTML)
-                gps_coords = gr.Textbox(value="", elem_id="gps-coords", interactive=True, visible=False, label="gps-coords")
+                gps_coords = gr.Textbox(value="", elem_id="gps-coords", interactive=True, visible=False, label="gps")
                 gr.HTML('<div class="reg-label"><i class="fa-solid fa-camera"></i> Passo 2: Foto do Animal</div>')
-                photo_input = gr.Image(label="", type="pil", sources=["upload", "webcam"], interactive=True, show_label=False, elem_id="photo-upload")
-                gr.HTML('<div class="reg-label"><i class="fa-solid fa-file-signature"></i> Passo 3: Observacoes (opcional)</div>')
+                photo_input = gr.Image(label="", type="pil", sources=["upload","webcam"], interactive=True, show_label=False, elem_id="photo-upload")
+                gr.HTML('<div class="reg-label"><i class="fa-solid fa-file-signature"></i> Passo 3: Observações (opcional)</div>')
                 notes_input = gr.Textbox(label="", placeholder="Ex.: parece ferido, tem coleira...", lines=2, max_lines=4, show_label=False)
                 submit_btn = gr.Button("Registrar avistamento", variant="primary", elem_id="submit-btn")
             status_html = gr.HTML("")
@@ -321,6 +474,11 @@ with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Animal Vi
             refresh_btn     = gr.Button("Atualizar lista", size="sm", variant="secondary")
             animals_display = gr.HTML(build_animals_html())
 
+    # Ficha modal: campo oculto recebe animal_id via JS → carrega ficha
+    selected_animal_id = gr.Textbox(value="", elem_id="selected-animal-id", visible=False, interactive=True, label="sel")
+    ficha_html = gr.HTML("", elem_id="ficha-content-gradio")
+
+    # Eventos
     submit_btn.click(process_sighting, inputs=[photo_input, gps_coords, notes_input], outputs=[map_html, status_html])
     btn_all.click(lambda: (build_map_html("all","all"),"all","all"), outputs=[map_html, species_st, timeframe_st])
     btn_dogs.click(lambda t: (build_map_html("dog",t),"dog",t), inputs=[timeframe_st], outputs=[map_html, species_st, timeframe_st])
@@ -330,13 +488,21 @@ with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Animal Vi
     refresh_btn.click(build_animals_html, outputs=[animals_display])
     demo.load(build_map_html, outputs=[map_html])
 
+    # Ficha: quando animal selecionado muda → carrega HTML e injeta no overlay
+    def load_ficha_and_inject(animal_id_str):
+        html = build_ficha_html(animal_id_str)
+        # Injeta via JS no overlay
+        js = f"<script>var fc=document.getElementById('ficha-content');if(fc){{fc.outerHTML=`{html.replace('`','\'')}`;}}</script>"
+        return js
+    selected_animal_id.change(load_ficha_and_inject, inputs=[selected_animal_id], outputs=[ficha_html])
+
 
 if __name__ == "__main__":
     import gradio.blocks as _gb_mod
     _orig_gai = _gb_mod.Blocks.get_api_info
     def _safe_get_api_info(self):
         try: return _orig_gai(self)
-        except Exception as _e: logging.warning(f"get_api_info: {_e}"); return {}
+        except Exception as e: logging.warning(f"get_api_info: {e}"); return {}
     _gb_mod.Blocks.get_api_info = _safe_get_api_info
     from core.database import DATA_DIR, PHOTOS_DIR
     PHOTOS_DIR.mkdir(parents=True, exist_ok=True)

core/database.py

@@ -158,6 +158,16 @@ class Database:
             ).fetchall()
         return [dict(r) for r in rows]
 
+    def get_animal_detail(self, animal_id: int) -> Optional[dict]:
+        """Retorna animal + todos os avistamentos com URLs de foto."""
+        animal = self.get_animal(animal_id)
+        if not animal:
+            return None
+        sightings = self.get_animal_sightings(animal_id)
+        for s in sightings:
+            s["photo_url"] = self.photo_url(s.get("photo_path")) or ""
+        return {"animal": animal, "sightings": sightings}
+
     # ─── Map data ────────────────────────────────────────────────────────────
 
     def get_map_data(self, species: str = "all", timeframe: str = "all") -> list: