Move Result View into a modal overlay to declutter main page

static/css/style.css

@@ -924,6 +924,64 @@ input:focus, select:focus, textarea:focus {
   gap: 0.75rem;
 }
 
+/* ---- Result Modal (full-screen overlay) ---- */
+.result-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  overflow-y: auto;
+  animation: fadeIn 0.18s ease;
+}
+.result-modal {
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  width: 94%;
+  max-width: 1100px;
+  margin: 2rem auto;
+  padding: 1.5rem 1.5rem 2rem;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
+  position: relative;
+}
+.result-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.result-modal-header h3 {
+  font-size: 1.15rem;
+  font-weight: 600;
+  margin: 0;
+}
+.btn-close-modal {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  padding: 4px;
+  border-radius: 6px;
+  transition: background 0.15s, color 0.15s;
+}
+.btn-close-modal:hover {
+  background: rgba(0,0,0,0.07);
+  color: var(--text-primary);
+}
+
+@media (max-width: 600px) {
+  .result-modal {
+    width: 100%;
+    margin: 0;
+    border-radius: 0;
+    min-height: 100vh;
+    padding: 1rem;
+  }
+}
+
 /* ---- Alerts ---- */
 .alert {
   padding: 0.7rem 1rem;

static/js/app.js

@@ -375,12 +375,15 @@ function formatCompact(n) {
 let currentResultData = null;
 
 function showResult(data) {
-  const card = document.getElementById('result-card');
+  const modal = document.getElementById('result-modal');
   const statsEl = document.getElementById('result-stats');
   const tbody = document.getElementById('regions-tbody');
+  const titleEl = document.getElementById('result-modal-title');
 
   currentResultData = data;
 
+  if (titleEl) titleEl.textContent = data.title || 'Result View';
+
   const locParts = [data.village, data.zone].filter(Boolean);
   const locLabel = locParts.length ? locParts.join(', ') : '—';
 
@@ -433,10 +436,34 @@ function showResult(data) {
   });
 
   setupRegionHover(tbody, regions);
-  card.classList.remove('hidden');
-  card.scrollIntoView({ behavior: 'smooth' });
+  openResultModal();
+}
+
+function openResultModal() {
+  const modal = document.getElementById('result-modal');
+  if (!modal) return;
+  modal.classList.remove('hidden');
+  document.body.style.overflow = 'hidden';
+}
+
+function closeResultModal() {
+  const modal = document.getElementById('result-modal');
+  if (!modal) return;
+  modal.classList.add('hidden');
+  document.body.style.overflow = '';
 }
 
+document.getElementById('result-modal-close')?.addEventListener('click', closeResultModal);
+document.getElementById('result-modal')?.addEventListener('click', (e) => {
+  if (e.target === e.currentTarget) closeResultModal();
+});
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    const modal = document.getElementById('result-modal');
+    if (modal && !modal.classList.contains('hidden')) closeResultModal();
+  }
+});
+
 function setupRegionHover(tbody, regions) {
   const overlay = document.getElementById('region-highlight-overlay');
   if (!overlay) return;
@@ -581,7 +608,7 @@ async function loadHistory() {
         <td class="stats-cell">${r.regionsCount} regions</td>
         <td class="stats-cell">${r.changePercentage.toFixed(2)}%</td>
         <td class="actions-cell">
-          ${r.overlayUrl ? `<a href="${r.overlayUrl}" target="_blank" class="btn btn-secondary btn-sm" onclick="event.stopPropagation()">View</a>` : ''}
+          <button type="button" class="btn btn-secondary btn-sm" onclick="event.stopPropagation(); openRunFromHistory(${r.id})">View</button>
           <button type="button" class="btn-icon" title="Delete" onclick="event.stopPropagation(); confirmDelete(${r.id})">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
           </button>

templates/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>AI Change Detection</title>
-  <link rel="stylesheet" href="/static/css/style.css" />
+  <link rel="stylesheet" href="/static/css/style.css?v=17" />
 </head>
 <body>
   <div class="app">
@@ -241,65 +241,7 @@
         </form>
       </div>
 
-      <!-- Section 2: Result View -->
-      <div class="card hidden" id="result-card">
-        <div class="card-header">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--grad-start)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
-          <h3>Result View</h3>
-        </div>
-        <div class="result-stats" id="result-stats"></div>
-
-        <!-- Zoom controls + Before/After slider -->
-        <div class="zoom-slider-section">
-          <div class="zoom-controls">
-            <button type="button" class="btn btn-zoom" id="zoom-out" title="Zoom out" aria-label="Zoom out">−</button>
-            <span class="zoom-level" id="zoom-level">100%</span>
-            <button type="button" class="btn btn-zoom" id="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
-          </div>
-          <div class="zoom-wrapper" id="zoom-wrapper">
-            <div class="compare-slider compare-slider-zoomed" id="compare-slider">
-              <div class="compare-before">
-                <img id="compare-before-img" alt="Before" draggable="false" />
-                <span class="compare-label compare-label-left">Before</span>
-              </div>
-              <div class="compare-after" id="compare-after-clip">
-                <img id="compare-after-img" alt="Changes detected" draggable="false" />
-                <span class="compare-label compare-label-right">Changes</span>
-              </div>
-              <div class="compare-handle" id="compare-handle">
-                <div class="compare-handle-line"></div>
-                <div class="compare-handle-knob">
-                  <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 10l4-5v10z" fill="currentColor"/><path d="M14 10l-4-5v10z" fill="currentColor"/></svg>
-                </div>
-                <div class="compare-handle-line"></div>
-              </div>
-              <!-- Overlay for highlighting region on table row hover -->
-              <div class="region-highlight-overlay" id="region-highlight-overlay"></div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Tabular change summary: hover row highlights box on image -->
-        <div class="regions-table-wrap">
-          <table class="regions-table" id="regions-table">
-            <thead>
-              <tr>
-                <th>#</th>
-                <th>Change Type</th>
-                <th>Sub-Type</th>
-                <th>Severity</th>
-                <th>Confidence</th>
-                <th>Area (px)</th>
-                <th>Coordinates</th>
-                <th>Stories</th>
-                <th>Height</th>
-                <th>Stage</th>
-              </tr>
-            </thead>
-            <tbody id="regions-tbody"></tbody>
-          </table>
-        </div>
-      </div>
+      <!-- Result View lives in a modal (opened from detection or history "View") -->
 
       <!-- Section 3: History View (tabular, click row to open result) -->
       <div class="card mt-2 section-history">
@@ -329,6 +271,68 @@
     </section>
   </div>
 
+  <!-- Result modal (full-screen overlay opened from detection or history) -->
+  <div class="result-modal-backdrop hidden" id="result-modal">
+    <div class="result-modal">
+      <div class="result-modal-header">
+        <h3 id="result-modal-title">Result View</h3>
+        <button type="button" class="btn-close-modal" id="result-modal-close" aria-label="Close">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+
+      <div class="result-stats" id="result-stats"></div>
+
+      <div class="zoom-slider-section">
+        <div class="zoom-controls">
+          <button type="button" class="btn btn-zoom" id="zoom-out" title="Zoom out" aria-label="Zoom out">−</button>
+          <span class="zoom-level" id="zoom-level">100%</span>
+          <button type="button" class="btn btn-zoom" id="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
+        </div>
+        <div class="zoom-wrapper" id="zoom-wrapper">
+          <div class="compare-slider compare-slider-zoomed" id="compare-slider">
+            <div class="compare-before">
+              <img id="compare-before-img" alt="Before" draggable="false" />
+              <span class="compare-label compare-label-left">Before</span>
+            </div>
+            <div class="compare-after" id="compare-after-clip">
+              <img id="compare-after-img" alt="Changes detected" draggable="false" />
+              <span class="compare-label compare-label-right">Changes</span>
+            </div>
+            <div class="compare-handle" id="compare-handle">
+              <div class="compare-handle-line"></div>
+              <div class="compare-handle-knob">
+                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 10l4-5v10z" fill="currentColor"/><path d="M14 10l-4-5v10z" fill="currentColor"/></svg>
+              </div>
+              <div class="compare-handle-line"></div>
+            </div>
+            <div class="region-highlight-overlay" id="region-highlight-overlay"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="regions-table-wrap">
+        <table class="regions-table" id="regions-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Change Type</th>
+              <th>Sub-Type</th>
+              <th>Severity</th>
+              <th>Confidence</th>
+              <th>Area (px)</th>
+              <th>Coordinates</th>
+              <th>Stories</th>
+              <th>Height</th>
+              <th>Stage</th>
+            </tr>
+          </thead>
+          <tbody id="regions-tbody"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
   <!-- Delete confirm modal -->
   <div class="modal-backdrop hidden" id="modal-delete">
     <div class="modal">
@@ -341,6 +345,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=16"></script>
+  <script src="/static/js/app.js?v=17"></script>
 </body>
 </html>