Landing page init

app_new.py

@@ -958,9 +958,9 @@ def _log_response(response):  # pyright: ignore[reportUnusedFunction]
 
 @app.route("/")
 def home():
-    """Home page"""
+    """Home page — shows landing page for guests, dashboard for logged-in users."""
     if not current_user.is_authenticated:
-        return redirect(url_for("auth.login"))
+        return render_template("landing.html")
     
     cases = _load_user_cases(current_user.id)
     stats = compute_stats(cases)

static/css/auth.css

@@ -383,102 +383,76 @@
 .profile-avatar-wrapper {
   position: relative;
   display: inline-block;
-  margin-right: 20px;
+  flex-shrink: 0;
 }
 .profile-avatar-img {
-  width: 72px;
-  height: 72px;
-  border-radius: 50%;
+  width: 72px; height: 72px; border-radius: 50%;
   object-fit: cover;
-  border: 2px solid #334155;
-  background: #0f172a;
+  border: 2px solid rgba(110,168,254,0.35);
+  box-shadow: 0 0 0 4px rgba(110,168,254,0.12);
 }
 .avatar-upload-btn {
-  position: absolute;
-  bottom: 0;
-  right: -4px;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: #3b82f6;
-  border: 2px solid #1e293b;
+  position: absolute; bottom: 0; right: -4px;
+  width: 28px; height: 28px; border-radius: 50%;
+  background: linear-gradient(135deg, #6ea8fe, #6366f1);
+  border: 2px solid #0c1427;
   color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.avatar-upload-btn:hover {
-  background: #2563eb;
-  transform: scale(1.1);
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: all 0.2s;
 }
+.avatar-upload-btn:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(110,168,254,0.4); }
 
 .btn-inline-edit {
-  background: transparent;
-  border: 1px solid #334155;
-  color: #94a3b8;
-  padding: 4px 12px;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
+  background: rgba(110,168,254,0.07);
+  border: 1px solid rgba(110,168,254,0.25);
+  color: #6ea8fe;
+  padding: 5px 14px;
+  border-radius: 8px;
+  font-size: 0.82rem;
+  font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
   margin-left: auto;
+  font-family: inherit;
+  flex-shrink: 0;
 }
 .btn-inline-edit:hover {
-  background: #1e293b;
-  color: #f8fafc;
-  border-color: #475569;
+  background: rgba(110,168,254,0.15);
+  border-color: #6ea8fe;
+  color: #a8c9ff;
 }
 
 .profile-row {
   display: flex;
   align-items: center;
   padding: 12px 0;
-  border-bottom: 1px solid #1e293b;
-}
-.profile-row:last-child {
-  border-bottom: none;
-}
-.pr-label {
-  width: 140px;
-  color: #64748b;
-  font-size: 14px;
-}
-.pr-value {
-  color: #f8fafc;
-  font-size: 15px;
-  font-weight: 500;
+  border-bottom: 1px solid rgba(36,51,86,0.5);
+  gap: 12px;
+  font-size: 0.9rem;
 }
+.profile-row:last-child { border-bottom: none; }
+.pr-label { color: #8ba0c4; font-weight: 500; width: 140px; flex-shrink: 0; }
+.pr-value  { color: #e8ecf6; font-weight: 600; flex: 1; }
 
 .modal-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(2, 6, 23, 0.8);
-  backdrop-filter: blur(4px);
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(7,13,26,0.82);
+  backdrop-filter: blur(6px);
   z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: flex; align-items: center; justify-content: center;
   padding: 20px;
 }
 .profile-modal-content {
-  width: 100%;
-  max-width: 400px;
-  background-color: #111c33 !important;
-  color: #f8fafc !important;
-  border: 1px solid #1e293b !important;
+  width: 100%; max-width: 420px;
+  background: linear-gradient(160deg, #162244, #111c33) !important;
+  border: 1px solid #243356 !important;
+  border-radius: 20px !important;
+  color: #e8ecf6 !important;
   animation: modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.profile-modal-content h2, .profile-modal-content label {
-  color: #f8fafc;
-}
+.profile-modal-content h2, .profile-modal-content label { color: #e8ecf6; }
 @keyframes modal-pop {
-  0% { transform: scale(0.95) translateY(10px); opacity: 0; }
+  0%   { transform: scale(0.95) translateY(10px); opacity: 0; }
   100% { transform: scale(1) translateY(0); opacity: 1; }
 }
-
-.profile-message-container {
-  margin-bottom: 24px;
-}
+.profile-message-container { margin-bottom: 16px; }

static/css/landing.css

@@ -0,0 +1,278 @@
+/* ═══════════════════════════════════════════════════════════════
+   ICH Pipeline — Landing Page Stylesheet
+   ═══════════════════════════════════════════════════════════════ */
+
+:root {
+  --bg:      #070d1a;
+  --bg2:     #0c1427;
+  --panel:   #111c33;
+  --panel2:  #162244;
+  --line:    #243356;
+  --accent:  #6ea8fe;
+  --accent2: #818cf8;
+  --text:    #e8ecf6;
+  --muted:   #8ba0c4;
+  --green:   #34d399;
+  --red:     #fb7185;
+}
+
+/* ── Reset ─────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: "Inter", system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* ── Topbar ─────────────────────────────────────────────────── */
+.topbar {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  padding: 16px 32px;
+  display: flex; align-items: center; justify-content: space-between;
+  background: rgba(7,13,26,0.85);
+  backdrop-filter: blur(14px);
+  border-bottom: 1px solid rgba(36,51,86,0.5);
+}
+.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
+.brand-icon {
+  width: 36px; height: 36px; border-radius: 10px;
+  background: linear-gradient(135deg, rgba(110,168,254,0.13), rgba(129,140,248,0.13));
+  border: 1px solid rgba(110,168,254,0.3);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent);
+}
+.brand-name { font-weight: 800; font-size: 1rem; color: var(--text); }
+.brand-name span { color: var(--accent); }
+.nav-actions { display: flex; gap: 12px; align-items: center; }
+
+.btn-ghost {
+  padding: 8px 20px; border-radius: 10px; font-weight: 600;
+  font-size: 0.9rem; text-decoration: none; color: var(--muted);
+  transition: color 0.15s;
+}
+.btn-ghost:hover { color: var(--text); }
+
+.btn-primary {
+  padding: 9px 22px; border-radius: 10px; font-weight: 700;
+  font-size: 0.9rem; text-decoration: none;
+  background: linear-gradient(135deg, #6ea8fe, #818cf8);
+  color: #070d1a;
+  transition: opacity 0.15s, transform 0.15s;
+  display: inline-flex; align-items: center; gap: 7px;
+}
+.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
+
+/* ── Hero ───────────────────────────────────────────────────── */
+.hero {
+  min-height: 100vh;
+  display: flex; align-items: center; justify-content: center;
+  text-align: center; padding: 120px 24px 80px;
+  position: relative; overflow: hidden;
+}
+.hero::before {
+  content: '';
+  position: absolute; inset: 0;
+  background:
+    radial-gradient(ellipse 900px 600px at 50% 0%,  rgba(110,168,254,0.12) 0%, transparent 70%),
+    radial-gradient(ellipse 600px 400px at 80% 80%, rgba(129,140,248,0.10) 0%, transparent 65%),
+    radial-gradient(ellipse 500px 400px at 10% 70%, rgba(52,211,153,0.06)  0%, transparent 60%);
+  pointer-events: none;
+}
+.hero-inner { position: relative; z-index: 1; max-width: 820px; width: 100%; }
+
+.hero-badge {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 7px 16px; border-radius: 100px;
+  background: rgba(110,168,254,0.1);
+  border: 1px solid rgba(110,168,254,0.25);
+  font-size: 0.82rem; font-weight: 600;
+  color: var(--accent); margin-bottom: 32px;
+  animation: fadeUp 0.6s ease both;
+}
+.badge-dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.hero h1 {
+  font-size: clamp(2.6rem, 6vw, 4.5rem);
+  font-weight: 900; line-height: 1.1;
+  letter-spacing: -0.03em;
+  animation: fadeUp 0.6s 0.1s ease both;
+}
+.hero h1 .grad {
+  background: linear-gradient(135deg, #6ea8fe 0%, #818cf8 50%, #34d399 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.hero-sub {
+  max-width: 600px; margin: 24px auto 0;
+  font-size: 1.15rem; color: var(--muted); line-height: 1.7;
+  animation: fadeUp 0.6s 0.2s ease both;
+}
+.hero-ctas {
+  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
+  margin-top: 44px;
+  animation: fadeUp 0.6s 0.3s ease both;
+}
+
+.btn-hero {
+  padding: 14px 32px; border-radius: 12px; font-weight: 700;
+  font-size: 1rem; text-decoration: none;
+  display: inline-flex; align-items: center; gap: 9px;
+  transition: all 0.2s;
+}
+.btn-hero-primary {
+  background: linear-gradient(135deg, #6ea8fe, #818cf8);
+  color: #070d1a;
+  box-shadow: 0 4px 32px rgba(110,168,254,0.35);
+}
+.btn-hero-primary:hover  { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(110,168,254,0.45); }
+.btn-hero-secondary {
+  background: rgba(255,255,255,0.05);
+  border: 1px solid var(--line);
+  color: var(--text);
+}
+.btn-hero-secondary:hover { background: rgba(255,255,255,0.09); transform: translateY(-2px); }
+
+/* ── Trust bar ──────────────────────────────────────────────── */
+.trust-bar {
+  display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;
+  margin-top: 60px; padding-top: 40px;
+  border-top: 1px solid rgba(36,51,86,0.5);
+  animation: fadeUp 0.6s 0.4s ease both;
+}
+.trust-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.88rem; font-weight: 500; }
+.trust-item svg { color: var(--accent); flex-shrink: 0; }
+
+/* ── Stats strip ────────────────────────────────────────────── */
+.stats-strip {
+  background: var(--panel);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  padding: 40px 24px;
+}
+.stats-inner {
+  max-width: 900px; margin: 0 auto;
+  display: grid; grid-template-columns: repeat(3, 1fr);
+}
+.stat-item { text-align: center; padding: 8px 24px; }
+.stat-item + .stat-item { border-left: 1px solid var(--line); }
+.stat-num  { font-size: 2.5rem; font-weight: 900; color: var(--accent); letter-spacing: -0.03em; }
+.stat-desc { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
+
+/* ── Features ───────────────────────────────────────────────── */
+.features { padding: 100px 24px; }
+
+.section-label {
+  text-align: center; font-size: 0.82rem; font-weight: 700;
+  letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--accent); margin-bottom: 16px;
+}
+.section-title {
+  text-align: center; font-size: clamp(1.8rem, 4vw, 2.8rem);
+  font-weight: 800; margin-bottom: 14px;
+}
+.section-sub {
+  text-align: center; color: var(--muted); max-width: 540px;
+  margin: 0 auto 60px; font-size: 1rem;
+}
+
+.features-grid {
+  max-width: 1100px; margin: 0 auto;
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
+}
+.feat-card {
+  background: linear-gradient(160deg, var(--panel2), var(--panel));
+  border: 1px solid var(--line);
+  border-radius: 18px; padding: 32px 28px;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.feat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
+.feat-icon {
+  width: 52px; height: 52px; border-radius: 14px;
+  background: rgba(110,168,254,0.1);
+  border: 1px solid rgba(110,168,254,0.2);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); margin-bottom: 20px;
+}
+.feat-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
+.feat-card p  { color: var(--muted); font-size: 0.92rem; line-height: 1.65; }
+
+/* ── How it works ───────────────────────────────────────────── */
+.how {
+  padding: 80px 24px 100px;
+  background: var(--panel);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+.steps {
+  max-width: 860px; margin: 0 auto;
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
+}
+.step { text-align: center; }
+.step-num {
+  width: 52px; height: 52px; border-radius: 50%;
+  background: linear-gradient(135deg, rgba(110,168,254,0.2), rgba(129,140,248,0.2));
+  border: 1px solid rgba(110,168,254,0.35);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.25rem; font-weight: 900; color: var(--accent);
+  margin: 0 auto 16px;
+}
+.step h4 { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
+.step p   { color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
+
+/* ── CTA section ────────────────────────────────────────────── */
+.cta-section {
+  padding: 100px 24px; text-align: center;
+  background: radial-gradient(ellipse 800px 400px at 50% 50%, rgba(110,168,254,0.08) 0%, transparent 70%);
+}
+.cta-section h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; margin-bottom: 14px; }
+.cta-section p  { color: var(--muted); font-size: 1rem; margin-bottom: 40px; }
+
+/* ── Disclaimer ─────────────────────────────────────────────── */
+.disclaimer {
+  max-width: 680px; margin: 0 auto 60px;
+  padding: 16px 20px; border-radius: 12px;
+  background: rgba(251,113,133,0.07);
+  border: 1px solid rgba(251,113,133,0.2);
+  color: #fca5a5; font-size: 0.85rem; line-height: 1.6;
+  display: flex; gap: 12px; align-items: flex-start;
+}
+.disclaimer svg { flex-shrink: 0; margin-top: 2px; }
+
+/* ── Footer ─────────────────────────────────────────────────── */
+footer {
+  padding: 32px 24px; text-align: center;
+  border-top: 1px solid var(--line);
+  color: var(--muted); font-size: 0.85rem;
+}
+
+/* ── Animations ─────────────────────────────────────────────── */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+
+/* ── Responsive ─────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .features-grid, .steps { grid-template-columns: 1fr 1fr; }
+  .stats-inner { grid-template-columns: 1fr; }
+  .stat-item + .stat-item { border-left: none; border-top: 1px solid var(--line); }
+  .topbar { padding: 14px 20px; }
+}
+@media (max-width: 480px) {
+  .features-grid, .steps { grid-template-columns: 1fr; }
+  .nav-actions .btn-ghost { display: none; }
+}

static/js/landing.js

@@ -0,0 +1,38 @@
+/* ═══════════════════════════════════════════════════════════════
+   ICH Pipeline — Landing Page JS
+   ═══════════════════════════════════════════════════════════════ */
+
+(function () {
+  /* ── Scroll-triggered navbar shadow ── */
+  var topbar = document.querySelector('.topbar');
+  if (topbar) {
+    window.addEventListener('scroll', function () {
+      if (window.scrollY > 20) {
+        topbar.style.boxShadow = '0 4px 32px rgba(0,0,0,0.4)';
+      } else {
+        topbar.style.boxShadow = 'none';
+      }
+    }, { passive: true });
+  }
+
+  /* ── Intersection Observer: fade-in feature cards on scroll ── */
+  if ('IntersectionObserver' in window) {
+    var cards = document.querySelectorAll('.feat-card, .step, .stat-item');
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.12 });
+
+    cards.forEach(function (card) {
+      card.style.opacity = '0';
+      card.style.transform = 'translateY(24px)';
+      card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+      observer.observe(card);
+    });
+  }
+})();

static/js/upload.js

@@ -88,6 +88,50 @@
     }
   }
 
+  // ── File size guard ──────────────────────────────────────────────────────
+  var MAX_MB = 50;
+
+  function removeSizeWarning() {
+    var w = document.getElementById('uploadSizeWarning');
+    if (w) w.remove();
+  }
+
+  function showSizeWarning(sizeMB) {
+    removeSizeWarning();
+    var el = document.createElement('div');
+    el.id = 'uploadSizeWarning';
+    el.style.cssText = 'margin-top:14px;padding:14px 18px;border-radius:12px;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.35);color:#fde68a;font-size:0.88rem;line-height:1.6;display:flex;align-items:flex-start;gap:12px;';
+    el.innerHTML =
+      '<span style="font-size:1.5rem;flex-shrink:0;line-height:1.2">😅</span>' +
+      '<div><strong>File too large (' + sizeMB.toFixed(1) + ' MB)</strong><br>' +
+      'Because of free-tier limitations, we can\'t go further than <strong>' + MAX_MB + ' MB</strong> per upload. ' +
+      'Please split your scan into smaller batches and try again.</div>';
+    var active = document.querySelector('.tab-panel.active');
+    if (active && active.parentNode) {
+      active.parentNode.insertBefore(el, active.nextSibling);
+    }
+  }
+
+  function attachSizeCheck(inputId, submitId, formId, overlayId) {
+    var inp = document.getElementById(inputId);
+    var sub = document.getElementById(submitId);
+    var frm = document.getElementById(formId);
+    var ov = document.getElementById(overlayId);
+    if (!inp || !frm) return;
+    frm.addEventListener('submit', function (e) {
+      var totalMB = 0;
+      for (var i = 0; i < inp.files.length; i++) { totalMB += inp.files[i].size / (1024 * 1024); }
+      if (totalMB > MAX_MB) {
+        e.preventDefault();
+        if (sub) sub.disabled = false;
+        if (ov) ov.style.display = 'none';
+        showSizeWarning(totalMB);
+      } else {
+        removeSizeWarning();
+      }
+    });
+  }
+
   function initUploadPage() {
     var tabs = document.querySelectorAll('.upload-tab');
     var panels = document.querySelectorAll('.tab-panel');
@@ -98,53 +142,36 @@
 
     tabs.forEach(function (tab) {
       tab.addEventListener('click', function () {
-        tabs.forEach(function (item) {
-          item.classList.remove('active');
-        });
-        panels.forEach(function (panel) {
-          panel.classList.remove('active');
-        });
-
+        tabs.forEach(function (item) { item.classList.remove('active'); });
+        panels.forEach(function (panel) { panel.classList.remove('active'); });
         tab.classList.add('active');
         var target = document.getElementById('tab-' + tab.dataset.tab);
-        if (target) {
-          target.classList.add('active');
-        }
+        if (target) target.classList.add('active');
+        removeSizeWarning();
       });
     });
 
     wireDropzone({
-      zoneId: 'dropzoneSingle',
-      inputId: 'singleInput',
-      infoId: 'singleInfo',
-      labelId: 'singleFileName',
-      clearSel: '.js-clear-single',
-      submitId: 'singleSubmit',
-      formId: 'singleForm',
-      overlayId: 'singleOverlay',
+      zoneId: 'dropzoneSingle', inputId: 'singleInput', infoId: 'singleInfo',
+      labelId: 'singleFileName', clearSel: '.js-clear-single',
+      submitId: 'singleSubmit', formId: 'singleForm', overlayId: 'singleOverlay',
       multi: false
     });
 
     wireDropzone({
-      zoneId: 'dropzoneMulti',
-      inputId: 'multiInput',
-      infoId: 'multiInfo',
-      labelId: 'multiFileName',
-      clearSel: '.js-clear-multi',
-      submitId: 'multiSubmit',
-      formId: 'multiForm',
-      overlayId: 'multiOverlay',
+      zoneId: 'dropzoneMulti', inputId: 'multiInput', infoId: 'multiInfo',
+      labelId: 'multiFileName', clearSel: '.js-clear-multi',
+      submitId: 'multiSubmit', formId: 'multiForm', overlayId: 'multiOverlay',
       multi: true
     });
 
+    attachSizeCheck('singleInput', 'singleSubmit', 'singleForm', 'singleOverlay');
+    attachSizeCheck('multiInput', 'multiSubmit', 'multiForm', 'multiOverlay');
+
     var dirInput = document.getElementById('dirPath');
     var dirSubmit = document.getElementById('dirSubmit');
-
     if (dirInput && dirSubmit) {
-      function checkDir() {
-        dirSubmit.disabled = !dirInput.value.trim();
-      }
-
+      function checkDir() { dirSubmit.disabled = !dirInput.value.trim(); }
       dirInput.addEventListener('input', checkDir);
       checkDir();
     }

templates/landing.html

@@ -0,0 +1,281 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ICH Detection Pipeline — AI-Powered CT Brain Scan Analysis</title>
+  <meta name="description"
+    content="Clinical-grade intracranial hemorrhage detection using deep learning. Upload DICOM CT scans and get instant AI-powered screening with Grad-CAM heatmaps and triage reports." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/landing.css') }}" />
+</head>
+
+<body>
+
+  <!-- ── Topbar ────────────────────────────────────────────────── -->
+  <header class="topbar">
+    <a class="brand" href="#">
+      <div class="brand-icon">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+        </svg>
+      </div>
+      <span class="brand-name">ICH <span>Pipeline</span></span>
+    </a>
+    <nav class="nav-actions">
+      <a href="{{ url_for('auth.login') }}" class="btn-ghost">Sign In</a>
+      <a href="{{ url_for('auth.register') }}" class="btn-primary">
+        Get Started
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <line x1="5" y1="12" x2="19" y2="12" />
+          <polyline points="12 5 19 12 12 19" />
+        </svg>
+      </a>
+    </nav>
+  </header>
+
+  <!-- ── Hero ──────────────────────────────────────────────────── -->
+  <section class="hero">
+    <div class="hero-inner">
+      <div class="hero-badge">
+        <div class="badge-dot"></div>
+        AI-Powered Medical Screening
+      </div>
+
+      <h1>
+        Detect Brain Hemorrhage<br>
+        <span class="grad">In Seconds, Not Hours</span>
+      </h1>
+
+      <p class="hero-sub">
+        Upload a DICOM CT brain scan and get an AI-powered hemorrhage probability score,
+        Grad-CAM heatmap visualization, and automated clinical triage report — instantly.
+      </p>
+
+      <div class="hero-ctas">
+        <a href="{{ url_for('auth.register') }}" class="btn-hero btn-hero-primary">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="17 8 12 3 7 8" />
+            <line x1="12" y1="3" x2="12" y2="15" />
+          </svg>
+          Start Screening Free
+        </a>
+        <a href="{{ url_for('auth.login') }}" class="btn-hero btn-hero-secondary">
+          Sign In to Dashboard
+        </a>
+      </div>
+
+      <div class="trust-bar">
+        <span class="trust-item">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          EfficientNet-B4 Model
+        </span>
+        <span class="trust-item">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          Grad-CAM Heatmaps
+        </span>
+        <span class="trust-item">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          Calibrated Confidence Scores
+        </span>
+        <span class="trust-item">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          Automated Triage
+        </span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Stats ─────────────────────────────────────────────────── -->
+  <div class="stats-strip">
+    <div class="stats-inner">
+      <div class="stat-item">
+        <div class="stat-num">~90%</div>
+        <div class="stat-desc">Sensitivity on ICH-positive slices</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-num">&lt; 30s</div>
+        <div class="stat-desc">Time to first result per scan</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-num">DICOM</div>
+        <div class="stat-desc">Native .dcm &amp; .zip batch support</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Features ────────────��─────────────────────────────────── -->
+  <section class="features">
+    <div class="section-label">Core Capabilities</div>
+    <h2 class="section-title">Everything a radiologist needs — fast</h2>
+    <p class="section-sub">From raw DICOM upload to clinical-grade report in under a minute.</p>
+
+    <div class="features-grid">
+
+      <div class="feat-card">
+        <div class="feat-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="17 8 12 3 7 8" />
+            <line x1="12" y1="3" x2="12" y2="15" />
+          </svg>
+        </div>
+        <h3>Batch DICOM Processing</h3>
+        <p>Upload a .dcm file or a .zip archive of hundreds of slices. The pipeline handles CT windowing, preprocessing,
+          and inference on every slice automatically.</p>
+      </div>
+
+      <div class="feat-card">
+        <div class="feat-icon" style="background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.2);color:#34d399;">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v4l3 3" />
+          </svg>
+        </div>
+        <h3>Calibrated AI Confidence</h3>
+        <p>Our EfficientNet-B4 model outputs probability scores calibrated with temperature scaling, so a 90% score
+          actually means 90%.</p>
+      </div>
+
+      <div class="feat-card">
+        <div class="feat-icon"
+          style="background:rgba(251,113,133,0.1);border-color:rgba(251,113,133,0.2);color:#fb7185;">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+        </div>
+        <h3>Grad-CAM Heatmaps</h3>
+        <p>Gradient-weighted class activation maps overlay on every scan, highlighting the exact regions that drove the
+          model's hemorrhage prediction.</p>
+      </div>
+
+      <div class="feat-card">
+        <div class="feat-icon"
+          style="background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.2);color:#818cf8;">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+          </svg>
+        </div>
+        <h3>LLM Clinical Summary</h3>
+        <p>Each scan triggers a Groq-powered LLM that generates a human-readable clinical narrative with triage action
+          and urgency classification.</p>
+      </div>
+
+      <div class="feat-card">
+        <div class="feat-icon" style="background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.2);color:#fbbf24;">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <line x1="18" y1="20" x2="18" y2="10" />
+            <line x1="12" y1="20" x2="12" y2="4" />
+            <line x1="6" y1="20" x2="6" y2="14" />
+          </svg>
+        </div>
+        <h3>Model Evaluation Metrics</h3>
+        <p>Built-in evaluation dashboard with ROC curves, calibration plots, and confidence band analysis to track model
+          performance over time.</p>
+      </div>
+
+      <div class="feat-card">
+        <div class="feat-icon" style="background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.2);color:#34d399;">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+            <polyline points="22 4 12 14.01 9 11.01" />
+          </svg>
+        </div>
+        <h3>Secure &amp; Isolated</h3>
+        <p>Every user gets their own isolated data directory. All uploads are user-scoped and access-controlled with
+          rate limiting and audit logs.</p>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- ── How it works ───────────────────────────────────────────── -->
+  <section class="how">
+    <div class="section-label">Workflow</div>
+    <h2 class="section-title">Four steps to a clinical report</h2>
+    <p class="section-sub" style="margin-bottom:48px;">The entire pipeline runs in the background — you just upload and
+      wait.</p>
+
+    <div class="steps">
+      <div class="step">
+        <div class="step-num">1</div>
+        <h4>Upload DICOM</h4>
+        <p>Upload a .dcm slice or a .zip batch. Single exams or full series are both supported.</p>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <h4>AI Inference</h4>
+        <p>EfficientNet-B4 scores each slice for ICH probability with calibrated confidence.</p>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <h4>Grad-CAM</h4>
+        <p>Gradient-weighted heatmaps highlight regions driving the hemorrhage prediction.</p>
+      </div>
+      <div class="step">
+        <div class="step-num">4</div>
+        <h4>Clinical Report</h4>
+        <p>Auto-generated PDF report with findings, confidence bands, and triage action.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── CTA ───────────────────────────────────────────────────── -->
+  <section class="cta-section">
+    <h2>Ready to try it?</h2>
+    <p>Create a free account and upload your first scan in under a minute.</p>
+
+    <div class="disclaimer">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+        <line x1="12" y1="9" x2="12" y2="13" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </svg>
+      <span>
+        <strong>Medical Disclaimer:</strong> This is an AI-assisted screening tool and does <strong>not</strong>
+        constitute a medical diagnosis. All findings must be reviewed by a qualified medical professional
+        before any clinical action is taken.
+      </span>
+    </div>
+
+    <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;">
+      <a href="{{ url_for('auth.register') }}" class="btn-hero btn-hero-primary">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="8.5" cy="7" r="4" />
+          <line x1="20" y1="8" x2="20" y2="14" />
+          <line x1="23" y1="11" x2="17" y2="11" />
+        </svg>
+        Create Free Account
+      </a>
+      <a href="{{ url_for('auth.login') }}" class="btn-hero btn-hero-secondary">Sign In</a>
+    </div>
+  </section>
+
+  <!-- ── Footer ────────────────────────────────────────────────── -->
+  <footer>
+    <p>ICH Detection Pipeline &mdash; AI screening tool, not a diagnostic device.</p>
+    <p style="margin-top:6px;font-size:0.78rem;opacity:0.6;">All findings must be reviewed by a qualified medical
+      professional.</p>
+  </footer>
+
+  <script src="{{ url_for('static', filename='js/landing.js') }}" defer></script>
+</body>
+
+</html>

templates/upload.html

@@ -30,10 +30,10 @@
 
 <!-- ── Tab navigation ──────────────────────────────────────────────── -->
 <div class="upload-tabs" role="tablist">
-  <button class="upload-tab active" data-tab="single"  role="tab">Single File</button>
-  <button class="upload-tab"        data-tab="multi"   role="tab">Multi-File / ZIP</button>
+  <button class="upload-tab active" data-tab="single" role="tab">Single File</button>
+  <button class="upload-tab" data-tab="multi" role="tab">Multi-File / ZIP</button>
   {% if local_mode %}
-  <button class="upload-tab"        data-tab="dirscan" role="tab">Scan Directory</button>
+  <button class="upload-tab" data-tab="dirscan" role="tab">Scan Directory</button>
   {% endif %}
 </div>
 
@@ -41,13 +41,11 @@
 <!--  TAB 1 — Single .dcm file                                         -->
 <!-- ════════════════════════════════════════════════════════════════════ -->
 <section class="panel upload-panel tab-panel active" id="tab-single">
-  <form method="post" action="{{ url_for('analyze') }}"
-        enctype="multipart/form-data" id="singleForm">
+  <form method="post" action="{{ url_for('analyze') }}" enctype="multipart/form-data" id="singleForm">
 
     <div class="dropzone" id="dropzoneSingle">
-      <svg width="56" height="56" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="1.5"
-           stroke-linecap="round" stroke-linejoin="round">
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+        stroke-linecap="round" stroke-linejoin="round">
         <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
         <polyline points="17 8 12 3 7 8" />
         <line x1="12" y1="3" x2="12" y2="15" />
@@ -58,8 +56,7 @@
     </div>
 
     <div class="file-info" id="singleInfo" style="display: none">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="2">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
         <polyline points="14 2 14 8 20 8" />
       </svg>
@@ -68,8 +65,7 @@
     </div>
 
     <button type="submit" class="btn btn-primary" id="singleSubmit" disabled>
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="2">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
       </svg>
       Analyze Scan
@@ -87,25 +83,21 @@
 <!--  TAB 2 — Multi-file / ZIP upload                                   -->
 <!-- ════════════════════════════════════════════════════════════════════ -->
 <section class="panel upload-panel tab-panel" id="tab-multi">
-  <form method="post" action="{{ url_for('analyze') }}"
-        enctype="multipart/form-data" id="multiForm">
+  <form method="post" action="{{ url_for('analyze') }}" enctype="multipart/form-data" id="multiForm">
 
     <div class="dropzone" id="dropzoneMulti">
-      <svg width="56" height="56" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="1.5"
-           stroke-linecap="round" stroke-linejoin="round">
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+        stroke-linecap="round" stroke-linejoin="round">
         <rect x="2" y="7" width="20" height="14" rx="2" />
         <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
       </svg>
       <p class="dropzone-text">Drag &amp; drop .dcm files or a .zip archive</p>
       <p class="muted small">Select multiple files, or a single .zip containing DICOM slices</p>
-      <input type="file" name="file" id="multiInput"
-             accept=".dcm,.zip" multiple hidden />
+      <input type="file" name="file" id="multiInput" accept=".dcm,.zip" multiple hidden />
     </div>
 
     <div class="file-info" id="multiInfo" style="display: none">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="2">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <rect x="2" y="7" width="20" height="14" rx="2" />
         <path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
       </svg>
@@ -114,8 +106,7 @@
     </div>
 
     <button type="submit" class="btn btn-primary" id="multiSubmit" disabled>
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="2">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
       </svg>
       Analyze Batch
@@ -139,12 +130,10 @@
       Server-side directory containing .dcm files
     </label>
     <div class="dir-input-row">
-      <input type="text" name="dir_path" id="dirPath" class="input"
-             placeholder="D:\scans\patient_001"
-             spellcheck="false" autocomplete="off" />
+      <input type="text" name="dir_path" id="dirPath" class="input" placeholder="D:\scans\patient_001"
+        spellcheck="false" autocomplete="off" />
       <button type="submit" class="btn btn-primary" id="dirSubmit">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
-             stroke="currentColor" stroke-width="2">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <circle cx="11" cy="11" r="8" />
           <line x1="21" y1="21" x2="16.65" y2="16.65" />
         </svg>
@@ -182,7 +171,7 @@
       <div class="step-num">3</div>
       <div class="step-text">
         <strong>Analyze</strong>
-        <p class="muted small">EfficientNet-B0 model with calibrated scoring</p>
+        <p class="muted small">EfficientNet-B4 model with calibrated scoring</p>
       </div>
     </div>
     <div class="step">
@@ -198,4 +187,4 @@
 
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
-{% endblock %}
+{% endblock %}