Remove navbar and footer, keep minimal topbar with user avatar

static/css/style.css

@@ -337,45 +337,22 @@ input:focus, select:focus, textarea:focus {
 .btn-sm { font-size: 0.8rem; padding: 0.45rem 0.8rem; }
 .btn-lg { padding: 0.8rem 1.6rem; font-size: 0.95rem; }
 
-/* ---- Nav ---- */
-.nav {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100vw;
-  margin-left: calc(-50vw + 50%);
-  margin-top: -1.5rem;
-  margin-bottom: 2rem;
-  padding: 1rem calc((100vw - 1100px) / 2 + 1.5rem);
-  background: var(--gradient-h);
-  border-radius: 0;
-  box-shadow: 0 4px 20px rgba(46, 51, 197, 0.25);
-}
-.nav-brand {
-  font-weight: 700;
-  font-size: 1.05rem;
+/* ---- Topbar (user avatar) ---- */
+.topbar {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  letter-spacing: -0.02em;
-  color: #fff;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
 }
-.nav-brand svg { stroke: #fff !important; }
 .nav-user {
   position: relative;
 }
-
-/* Avatar button */
 .nav-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
-  border: 2px solid rgba(255,255,255,0.35);
-  background: rgba(255,255,255,0.15);
-  color: #fff;
+  border: 2px solid var(--border);
+  background: var(--bg-elevated);
+  color: var(--text-muted);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -383,11 +360,12 @@ input:focus, select:focus, textarea:focus {
   transition: all var(--transition);
 }
 .nav-avatar:hover {
-  background: rgba(255,255,255,0.25);
-  border-color: rgba(255,255,255,0.5);
+  border-color: var(--grad-start);
+  color: var(--grad-start);
+  background: var(--bg-hover);
 }
 
-/* Dropdown — light gradient matching nav */
+/* Dropdown */
 .nav-dropdown {
   position: absolute;
   top: calc(100% + 0.5rem);
@@ -435,19 +413,6 @@ input:focus, select:focus, textarea:focus {
 }
 .nav-dropdown-item svg { color: rgba(255,255,255,0.6); }
 
-/* ---- Page header ---- */
-.page-header { margin-bottom: 1.75rem; }
-.page-header h1 {
-  font-size: 1.6rem;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-}
-.page-header p {
-  color: var(--text-muted);
-  margin-top: 0.3rem;
-  font-size: 0.9rem;
-}
-
 /* ---- Location row ---- */
 .location-row {
   display: grid;
@@ -853,21 +818,6 @@ input:focus, select:focus, textarea:focus {
 @keyframes spin { to { transform: rotate(360deg); } }
 
 /* ---- Footer ---- */
-.app-footer {
-  width: 100vw;
-  margin-left: calc(-50vw + 50%);
-  margin-top: 3rem;
-  margin-bottom: -1.5rem;
-  padding: 1.25rem calc((100vw - 1100px) / 2 + 1.5rem);
-  background: var(--gradient-h);
-  text-align: center;
-  border-radius: 0;
-}
-.app-footer p {
-  font-size: 0.78rem;
-  color: rgba(255,255,255,0.75);
-}
-
 /* ---- Utility ---- */
 .hidden { display: none !important; }
 .mt-1 { margin-top: 0.5rem; }
@@ -878,14 +828,6 @@ input:focus, select:focus, textarea:focus {
 @media (max-width: 768px) {
   .app { padding: 1rem; }
 
-  .nav {
-    margin-top: -1rem;
-    padding: 0.75rem 1rem;
-  }
-
-  .page-header h1 { font-size: 1.3rem; }
-  .page-header p { font-size: 0.82rem; }
-
   .auth-container { margin: 2rem auto; }
   .auth-container .card { padding: 1.5rem; }
 
@@ -897,11 +839,6 @@ input:focus, select:focus, textarea:focus {
   .history-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
   .history-actions { align-self: flex-end; }
 
-  .app-footer {
-    margin-bottom: -1rem;
-    padding: 1rem;
-  }
-
   .card { padding: 1.15rem; }
   .card-header { margin-bottom: 1rem; }
 

templates/index.html

@@ -132,11 +132,7 @@
 
     <!-- Dashboard view -->
     <section id="view-dashboard" class="view">
-      <nav class="nav">
-        <div class="nav-brand">
-          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--grad-start)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
-          <span>AI Change Detection</span>
-        </div>
+      <div class="topbar">
         <div class="nav-user">
           <button type="button" class="nav-avatar" id="btn-avatar" aria-label="Account menu">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
@@ -150,12 +146,7 @@
             </button>
           </div>
         </div>
-      </nav>
-
-      <header class="page-header">
-        <h1>Change Detection</h1>
-        <p>Upload two satellite images (before &amp; after) to detect and classify ground-level changes.</p>
-      </header>
+      </div>
 
       <div id="dashboard-error" class="alert alert-error hidden"></div>
       <div id="dashboard-success" class="alert alert-success hidden"></div>
@@ -294,9 +285,6 @@
         <div id="history-list" class="history-list"></div>
       </div>
 
-      <footer class="app-footer">
-        <p>AI Change Detection &middot; Powered by multi-signal fusion analysis</p>
-      </footer>
     </section>
   </div>
 
@@ -312,6 +300,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=13"></script>
+  <script src="/static/js/app.js?v=14"></script>
 </body>
 </html>