Update templates/index.html

templates/index.html

@@ -6,22 +6,26 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 <style>
-:root {
+:root{
   --bg:#0b1220;
   --card:#0f1b33;
+  --card2:#0c172e;
   --text:#e8eefc;
   --muted:#a9b7d0;
-  --border:rgba(255,255,255,.08);
+  --border:rgba(255,255,255,.12);
   --primary:#4f7cff;
+  --ring:rgba(79,124,255,.35);
 }
 
-:root[data-theme="light"] {
+:root[data-theme="light"]{
   --bg:#f6f7fb;
   --card:#ffffff;
+  --card2:#ffffff;
   --text:#0c1222;
   --muted:#44506a;
-  --border:rgba(0,0,0,.08);
+  --border:rgba(0,0,0,.12);
   --primary:#355dff;
+  --ring:rgba(53,93,255,.25);
 }
 
 *{box-sizing:border-box}
@@ -39,38 +43,34 @@ header{
   padding:20px 28px;
 }
 
-.brand{
-  display:flex;
-  align-items:center;
-  gap:12px;
-}
-
+.brand{display:flex;gap:12px;align-items:center}
 .brand img{width:40px;height:40px}
 
 .chip{
-  border:1px solid var(--border);
-  background:var(--card);
-  padding:6px 12px;
+  padding:8px 12px;
   border-radius:999px;
+  background:var(--card);
+  border:1px solid var(--border);
   cursor:pointer;
 }
 
 nav{
-  padding:0 28px 20px;
+  padding:0 28px 18px;
   display:flex;
   gap:10px;
 }
 
 .tab{
-  border:1px solid var(--border);
-  background:transparent;
-  padding:6px 14px;
+  padding:8px 16px;
   border-radius:999px;
+  border:1px solid var(--border);
+  background:rgba(255,255,255,.06);
   cursor:pointer;
 }
 
 .tab.active{
-  background:rgba(79,124,255,.15);
+  background:rgba(79,124,255,.18);
+  box-shadow:0 0 0 4px var(--ring);
 }
 
 .section{display:none}
@@ -82,55 +82,61 @@ main{
   gap:24px;
   padding:0 28px 28px;
 }
-
-@media(max-width:900px){
-  main{grid-template-columns:1fr}
-}
+@media(max-width:900px){main{grid-template-columns:1fr}}
 
 .card{
-  background:var(--card);
-  border:1px solid var(--border);
+  background:linear-gradient(180deg,var(--card),var(--card2));
   border-radius:18px;
+  border:1px solid var(--border);
   padding:22px;
 }
 
-h2{margin-top:0;font-size:20px}
+h2{margin:0 0 12px;font-size:20px}
 
 .controls{
   display:flex;
   gap:12px;
   flex-wrap:wrap;
-  margin-bottom:14px;
+  align-items:center;
+}
+
+.select-wrap{position:relative}
+.select-wrap::after{
+  content:"▾";
+  position:absolute;
+  right:14px;
+  top:50%;
+  transform:translateY(-50%);
+  pointer-events:none;
+  color:var(--muted);
 }
 
 select{
   appearance:none;
-  padding:10px 14px;
+  padding:10px 40px 10px 14px;
   border-radius:12px;
   border:1px solid var(--border);
-  background:var(--card);
+  background:rgba(255,255,255,.06);
   color:var(--text);
-  min-width:240px;
-  font-weight:500;
+  font-weight:600;
+  min-width:260px;
 }
 
-select:hover{border-color:var(--primary)}
-
 .file-btn{
   padding:10px 14px;
   border-radius:12px;
   border:1px dashed var(--border);
-  background:transparent;
   cursor:pointer;
+  background:rgba(255,255,255,.04);
 }
 
 button.primary{
   padding:10px 18px;
   border-radius:12px;
   border:none;
-  background:var(--primary);
+  background:linear-gradient(180deg,var(--primary),#2f62ff);
   color:white;
-  font-weight:600;
+  font-weight:700;
   cursor:pointer;
 }
 
@@ -138,12 +144,14 @@ button.secondary{
   padding:10px 14px;
   border-radius:12px;
   border:1px solid var(--border);
-  background:transparent;
+  background:rgba(255,255,255,.04);
   cursor:pointer;
 }
 
+button:disabled{opacity:.6}
+
 .upload-box{
-  margin-top:12px;
+  margin-top:14px;
   padding:18px;
   border:2px dashed var(--border);
   border-radius:14px;
@@ -151,69 +159,44 @@ button.secondary{
   color:var(--muted);
 }
 
-.upload-box.dragover{
-  background:rgba(79,124,255,.08);
-}
-
-.preview{
-  margin-top:14px;
-  background:black;
-  border-radius:14px;
-  overflow:hidden;
-  max-height:360px;
-}
+.preview{margin-top:14px;background:black;border-radius:14px;overflow:hidden}
 .preview.hidden{display:none}
+.preview img{width:100%;max-height:360px;object-fit:contain}
 
-.preview img{
-  width:100%;
-  height:100%;
-  object-fit:contain;
-}
-
-.result{
-  margin-top:16px;
-}
+.result{margin-top:16px}
+.result-title{font-size:22px;font-weight:800}
+.result-msg{color:var(--muted);margin-top:6px}
 
-.result-title{
-  font-size:22px;
-  font-weight:700;
-}
-
-.result-msg{color:var(--muted)}
-
-.examples img{
-  width:100%;
-  max-height:280px;
-  object-fit:contain;
-  background:black;
+.examples .ex{
+  margin-top:12px;
+  border:1px solid var(--border);
   border-radius:14px;
-  margin-top:10px;
+  overflow:hidden;
 }
+.examples .lbl{padding:10px;font-weight:800;border-bottom:1px solid var(--border)}
+.examples .desc{padding:0 10px 10px;color:var(--muted)}
+.examples img{width:100%;max-height:280px;object-fit:contain;background:black}
 
 .team{
   display:grid;
-  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
+  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
   gap:14px;
 }
-
 .member{
   display:flex;
-  align-items:center;
   gap:12px;
+  align-items:center;
+  padding:10px;
+  border:1px solid var(--border);
+  border-radius:14px;
 }
-
-.member img{
-  width:48px;
-  height:48px;
-  border-radius:50%;
-  cursor:pointer;
-}
+.member img{width:48px;height:48px;border-radius:50%;cursor:pointer}
 
 footer{
   padding:14px 28px;
+  border-top:1px solid var(--border);
   font-size:13px;
   color:var(--muted);
-  border-top:1px solid var(--border);
 }
 
 /* modal */
@@ -226,13 +209,12 @@ footer{
   justify-content:center;
 }
 .modal-backdrop.show{display:flex}
-
 .modal{
   background:var(--card);
-  border-radius:16px;
   padding:18px;
-  width:420px;
+  border-radius:16px;
   border:1px solid var(--border);
+  width:420px;
 }
 </style>
 </head>
@@ -244,7 +226,7 @@ footer{
     <img src="{{ url_for('static', filename='assets/brain/brain.svg') }}">
     <div>
       <strong>NeuraScan</strong><br>
-      <small class="muted">AI-assisted MRI screening (demo)</small>
+      <small style="color:var(--muted)">AI-assisted MRI screening (demo)</small>
     </div>
   </div>
   <button id="themeToggle" class="chip">☀️</button>
@@ -261,7 +243,7 @@ footer{
 <h2>New scan</h2>
 
 <div class="controls">
-  <select id="modelSelect"></select>
+  <span class="select-wrap"><select id="modelSelect"></select></span>
 
   <label class="file-btn">
     Choose image
@@ -283,28 +265,22 @@ Drag & drop or paste (Ctrl+V) an MRI image
 <div class="result">
 <div id="resultTitle" class="result-title">—</div>
 <div id="resultMsg" class="result-msg">Upload an image to begin.</div>
-<button id="likelyBtn" style="display:none;margin-top:10px" onclick="showLikely()">Show most likely result</button>
+<button id="likelyBtn" class="secondary" style="display:none;margin-top:10px" onclick="showLikely()">Show most likely result</button>
 </div>
 </div>
 
 <div class="card">
 <h2>Examples</h2>
-
 <div class="examples">
-  <div style="margin-top:10px;">
-    <div style="font-weight:700;margin-bottom:6px;">Supported example</div>
-    <div class="result-msg" style="margin-bottom:10px;">
-      Brain-only MRI slice (no skull visible).
-    </div>
-    <img src="{{ url_for('static', filename='assets/brain/unsupportedexample.jpg') }}" alt="Supported example: brain-only MRI">
+  <div class="ex">
+    <div class="lbl">Supported example</div>
+    <div class="desc">Brain-only MRI slice (no skull visible).</div>
+    <img src="{{ url_for('static', filename='assets/brain/supportedexample.jpg') }}">
   </div>
-
-  <div style="margin-top:16px;">
-    <div style="font-weight:700;margin-bottom:6px;">Unsupported example</div>
-    <div class="result-msg" style="margin-bottom:10px;">
-      Skull visible — please upload a brain-only slice.
-    </div>
-    <img src="{{ url_for('static', filename='assets/brain/supportedexample.jpg') }}" alt="Unsupported example: skull visible">
+  <div class="ex">
+    <div class="lbl">Unsupported example</div>
+    <div class="desc">Skull visible — please upload a brain-only slice.</div>
+    <img src="{{ url_for('static', filename='assets/brain/unsupportedexample.jpg') }}">
   </div>
 </div>
 </div>
@@ -315,10 +291,7 @@ Drag & drop or paste (Ctrl+V) an MRI image
 <main>
 <div class="card">
 <h2>About NeuraScan</h2>
-<p>
-Educational demo for Alzheimer’s stage classification.
-When confidence is low, the system reports <b>Uncertain</b>.
-</p>
+<p>Educational demo for Alzheimer’s stage classification. Low confidence → <b>Uncertain</b>.</p>
 
 <h2>Under the supervision of:</h2>
 <p>
@@ -344,13 +317,12 @@ Contact: <a href="mailto:mohamedasem318@gmail.com">Mohamed Assem</a> •
 Educational demo — not medical advice
 </footer>
 
-<!-- modal -->
 <div class="modal-backdrop" id="modalBackdrop" onclick="closeModalIfBackdrop(event)">
 <div class="modal">
 <h3>Most likely result</h3>
 <p id="modalLabel"></p>
 <p id="modalProb"></p>
-<button onclick="closeModal()">Close</button>
+<button class="secondary" onclick="closeModal()">Close</button>
 </div>
 </div>
 
@@ -382,15 +354,14 @@ resultTitle.textContent="—";
 resultMsg.textContent="Ready to run scan.";
 likelyBtn.style.display="none";
 newBtn.style.display="none";
+lastMostLikely=null;
 }
 
 fileInput.onchange=e=>e.target.files[0]&&setFile(e.target.files[0]);
 
-dropZone.ondragover=e=>{e.preventDefault();dropZone.classList.add("dragover")};
-dropZone.ondragleave=()=>dropZone.classList.remove("dragover");
+dropZone.ondragover=e=>{e.preventDefault()};
 dropZone.ondrop=e=>{
 e.preventDefault();
-dropZone.classList.remove("dragover");
 e.dataTransfer.files[0]&&setFile(e.dataTransfer.files[0]);
 };
 
@@ -415,45 +386,66 @@ modelSelect.value=d.default_model_id;
 async function runScan(){
 if(!currentFile){resultMsg.textContent="Upload an image first.";return;}
 runBtn.disabled=true;
+modelSelect.disabled=true;
 resultTitle.textContent="Running…";
+resultMsg.textContent="Analyzing image…";
+likelyBtn.style.display="none";
+lastMostLikely=null;
+
+try{
 const fd=new FormData();
 fd.append("file",currentFile);
 fd.append("model_id",modelSelect.value);
 const r=await fetch("/api/classify",{method:"POST",body:fd});
 const d=await r.json();
+
 if(d.prediction.label==="Uncertain"){
 resultTitle.textContent="Uncertain";
 resultMsg.textContent="Consult a professional.";
+const probs=[...(d.probabilities||[])].sort((a,b)=>b.prob-a.prob);
+if(probs[0]){
+lastMostLikely=probs[0];
 likelyBtn.style.display="inline-block";
-lastMostLikely=d.probabilities.sort((a,b)=>b.prob-a.prob)[0];
+}
 }else{
 resultTitle.textContent=d.prediction.label;
 resultMsg.textContent=`Confidence: ${(d.prediction.confidence*100).toFixed(1)}%`;
+likelyBtn.style.display="none";
+lastMostLikely=null;
 }
 newBtn.style.display="inline-block";
+}catch(e){
+resultTitle.textContent="Sorry";
+resultMsg.textContent="Something went wrong.";
+}finally{
 runBtn.disabled=false;
+modelSelect.disabled=false;
+}
 }
 
 function newScan(){
 currentFile=null;
 fileInput.value="";
-previewImg.src="";
 previewBox.classList.add("hidden");
+previewImg.src="";
 resultTitle.textContent="—";
 resultMsg.textContent="Upload an image to begin.";
 likelyBtn.style.display="none";
 newBtn.style.display="none";
+lastMostLikely=null;
 }
 
 function showLikely(){
+if(!lastMostLikely)return;
 modalLabel.textContent=lastMostLikely.label;
 modalProb.textContent=`Probability: ${(lastMostLikely.prob*100).toFixed(1)}%`;
 modalBackdrop.classList.add("show");
 }
 function closeModal(){modalBackdrop.classList.remove("show")}
-function closeModalIfBackdrop(e){e.target.id==="modalBackdrop"&&closeModal()}
+function closeModalIfBackdrop(e){if(e.target.id==="modalBackdrop")closeModal()}
 
 loadModels();
 </script>
+
 </body>
 </html>