UX: add choose detection type screen and redirect URLs

app/main.py

@@ -564,3 +564,15 @@ def index():
     if not index_file.exists():
         return HTMLResponse("<h1>Satellite Change Detection</h1><p>Create <code>templates/index.html</code> and <code>static/</code>.</p>")
     return FileResponse(index_file)
+
+
+# --- Detection type landing pages ---
+# These serve the same SPA, but the frontend selects the correct mode based on URL.
+@app.get("/detect/change", response_class=HTMLResponse)
+def detect_change_page():
+    return index()
+
+
+@app.get("/detect/landslide", response_class=HTMLResponse)
+def detect_landslide_page():
+    return index()

static/js/app.js

@@ -12,6 +12,28 @@ function showView(id) {
   if (el) el.classList.add('active');
 }
 
+function getDetectionTypeFromPath() {
+  const p = (window.location.pathname || '').toLowerCase();
+  if (p.includes('/detect/landslide')) return 'landslide_detection';
+  if (p.includes('/detect/change')) return 'change_detection';
+  return null;
+}
+
+function applyDetectionTypeToUI(type) {
+  const typeSel = document.getElementById('detect-type');
+  if (!typeSel || !type) return;
+  typeSel.value = type;
+  typeSel.dispatchEvent(new Event('change'));
+}
+
+// ---- Detection type selection buttons ----
+document.getElementById('btn-type-change')?.addEventListener('click', () => {
+  window.location.href = '/detect/change';
+});
+document.getElementById('btn-type-landslide')?.addEventListener('click', () => {
+  window.location.href = '/detect/landslide';
+});
+
 function showError(id, msg) {
   const el = document.getElementById(id);
   if (!el) return;
@@ -140,8 +162,15 @@ async function init() {
   try {
     const user = await api('GET', '/api/me');
     document.getElementById('user-email').textContent = user.email;
-    showView('dashboard');
-    loadHistory();
+    const preferred = getDetectionTypeFromPath();
+    if (preferred) {
+      applyDetectionTypeToUI(preferred);
+      showView('dashboard');
+      loadHistory();
+    } else {
+      // After login, landing on "/" shows a selection screen.
+      showView('detection-type');
+    }
   } catch (_) { setToken(null); showView('login'); }
 }
 

templates/index.html

@@ -131,6 +131,23 @@
     </section>
 
     <!-- Dashboard view -->
+    <section id="view-detection-type" class="view">
+      <div class="auth-container">
+        <div class="auth-logo">
+          <div class="auth-logo-icon">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l9 4.5-9 4.5-9-4.5L12 2z"/><path d="M3 6.5V17.5L12 22l9-4.5V6.5"/><path d="M12 11v11"/></svg>
+          </div>
+          <span>Choose Detection Type</span>
+        </div>
+        <div class="card">
+          <h2 style="margin-bottom:0.75rem;">Select what you want to detect</h2>
+          <button type="button" class="btn btn-primary btn-block" id="btn-type-change">General Change Detection</button>
+          <div style="height:0.75rem;"></div>
+          <button type="button" class="btn btn-secondary btn-block" id="btn-type-landslide">Landslide Detection (Uttarakhand)</button>
+        </div>
+      </div>
+    </section>
+
     <section id="view-dashboard" class="view">
       <div class="topbar">
         <div class="nav-user">