better images + full screen

app.py

@@ -202,9 +202,9 @@ def pick_random_location(difficulty: str) -> Dict[str, float]:
 def street_view_image_url(lat: float, lng: float) -> str:
     if not GOOGLE_MAPS_API_KEY:
         # Fallback placeholder to avoid blank image when key is missing
-        return "https://picsum.photos/960/540"
+        return "https://picsum.photos/1920/1080"
     return (
-        f"https://maps.googleapis.com/maps/api/streetview?size=960x540&location={lat},{lng}&fov=90&pitch=0&key={GOOGLE_MAPS_API_KEY}"
+        f"https://maps.googleapis.com/maps/api/streetview?size=1920x1080&location={lat},{lng}&fov=90&pitch=0&key={GOOGLE_MAPS_API_KEY}"
     )
 
 
@@ -298,6 +298,9 @@ def build_street_html(image_url: str) -> str:
     base = """
     <div id="image-container" style="position:relative;max-width:960px;margin:0 auto;">
       <img id="street-image" src="__IMG_URL__" style="width:100%;height:auto;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.1)" />
+      <button id="fullscreen-btn" title="Toggle Fullscreen" style="position:absolute;top:10px;right:10px;z-index:10;background:rgba(0,0,0,0.5);border:none;color:white;padding:8px;border-radius:4px;cursor:pointer;line-height:0;">
+        <!-- SVG icon will be injected by JS -->
+      </button>
       <div id="mini-map-wrap" style="transition:all 0.3s ease;position:absolute;right:10px;bottom:10px;border:2px solid #fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.2);background:#fff;">
         <div id="mini-map" style="width:100%;height:100%;cursor:pointer"></div>
         <div id="map-controls" style="position:absolute;right:8px;top:8px;display:flex;gap:6px;z-index:5;">
@@ -593,6 +596,38 @@ APP_BOOT_JS = """
       } catch (e) { log('Popup map init error', e); }
     });
   }
+  function initFullscreenButtonIfPresent() {
+    log('initFullscreenButtonIfPresent called');
+    const btn = document.getElementById('fullscreen-btn');
+    const img = document.getElementById('street-image');
+    if (!btn || !img || btn.dataset.initialized === '1') return;
+
+    const enterIcon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
+    const exitIcon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0-2-2h-3m-6 0H3a2 2 0 0 0-2 2v3"/></svg>';
+
+    btn.innerHTML = enterIcon;
+
+    btn.addEventListener('click', () => {
+      if (!document.fullscreenElement) {
+        img.requestFullscreen().catch(err => {
+          log('Fullscreen error:', err);
+        });
+      } else {
+        document.exitFullscreen();
+      }
+    });
+
+    document.addEventListener('fullscreenchange', () => {
+      if (document.fullscreenElement === img) {
+        btn.innerHTML = exitIcon;
+      } else {
+        btn.innerHTML = enterIcon;
+      }
+    });
+
+    btn.dataset.initialized = '1';
+    log('Fullscreen button initialized');
+  }
   function initMapControlsIfPresent() {
     const plusBtn = document.getElementById('map-size-plus');
     const minusBtn = document.getElementById('map-size-minus');
@@ -629,11 +664,12 @@ APP_BOOT_JS = """
     updateSize();
     log('Map controls initialized');
   }
-  const obs = new MutationObserver(() => { initMiniMapIfPresent(); initPopupIfPresent(); initMapControlsIfPresent(); });
+  const obs = new MutationObserver(() => { initMiniMapIfPresent(); initPopupIfPresent(); initMapControlsIfPresent(); initFullscreenButtonIfPresent(); });
   obs.observe(document.documentElement, { childList: true, subtree: true });
   initMiniMapIfPresent();
   initPopupIfPresent();
   initMapControlsIfPresent();
+  initFullscreenButtonIfPresent();
 }
 """.replace("__GMAPS_KEY__", GOOGLE_MAPS_API_KEY or '')