adds lotties

index.html

@@ -69,14 +69,6 @@
     </div>
   </div>
 
-  <div class="sidebar-divider"></div>
-
-  <div class="sidebar-section sidebar-map-legend">
-    <h3>Map legend</h3>
-    <div class="legend-row"><span class="legend-dot green"></span> Dog — seen recently</div>
-    <div class="legend-row"><span class="legend-dot orange"></span> Cat — seen recently</div>
-    <div class="legend-row"><span class="legend-dot red"></span> Not seen in +30 days</div>
-  </div>
 </aside>
 
 <div class="phone-wrap">

static/app.js

@@ -117,9 +117,11 @@
     const color  = urgent ? '#E53935' : isDog ? '#388C59' : '#FB8C00';
     const badge  = a.count > 1
       ? `<span style="position:absolute;top:-5px;right:-5px;background:#fff;color:${color};border:1.5px solid ${color};border-radius:10px;min-width:16px;height:16px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;">${a.count}</span>` : '';
-    const animalSvg = svgIcon(isDog ? 'dog' : 'cat', 22, '#fff');
+    const inner = a.photo_url
+      ? `<img src="${a.photo_url}" style="width:38px;height:38px;border-radius:50%;object-fit:cover;" onerror="this.outerHTML='${svgIcon(isDog ? 'dog' : 'cat', 22, '#fff').replace(/'/g, "\\'")}'"/>`
+      : svgIcon(isDog ? 'dog' : 'cat', 22, '#fff');
     return L.divIcon({
-      html: `<div style="position:relative;background:${color};width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.25);border:2.5px solid #fff;">${animalSvg}${badge}</div>`,
+      html: `<div style="position:relative;background:${color};width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.25);border:2.5px solid ${color};">${inner}${badge}</div>`,
       className:'', iconSize:[42,42], iconAnchor:[21,21], popupAnchor:[0,-26]
     });
   }