Update app.py

app.py

@@ -78,41 +78,64 @@ init_db()
 st.markdown(
     """
 <style>
+/* --- Base tokens --- */
 :root{
-  --accent:#4C6EF5;
-  --muted:#6b7280;
+  --bg:#f6f8fb;
   --card:#ffffff;
-  --bg:#f7f9fc;
+  --muted:#6b7280;
+  --accent:#2b6ef6;
+  --accent-2:#7c3aed;
+  --glass: rgba(255,255,255,0.85);
+  --shadow: 0 8px 28px rgba(15,23,42,0.07);
 }
+
+/* page background */
 body { background: var(--bg); }
 
-/* Card base */
-.card {background:var(--card);border-radius:14px;padding:18px;box-shadow:0 8px 30px rgba(20,25,40,0.06);margin-bottom:16px;}
-.metric{font-size:22px;font-weight:800}
-.section-title{font-size:26px;font-weight:800;margin-bottom:8px}
-
-/* Hero */
-.hero {background: linear-gradient(135deg, rgba(76,110,245,0.12), rgba(94,234,212,0.06)); border-radius:16px; padding:36px; margin-bottom:18px;}
-.hero-grid{display:flex;gap:20px;align-items:center;}
-.hero-left{flex:1}
-.hero-title{font-size:38px;font-weight:900;margin:0 0 8px 0;color:#0f172a}
-.hero-sub{font-size:18px;color:var(--muted);margin:0 0 16px 0}
-.pill {display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(76,110,245,0.12);color:var(--accent);font-weight:700;margin-right:8px}
-
-/* Feature cards */
-.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
-.feature {padding:14px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid rgba(10,10,10,0.02);}
-.feature h4{margin:0 0 6px 0}
-.feature p{margin:0;color:var(--muted);font-size:14px}
-
-/* Footer small */
-.small-note{font-size:13px;color:var(--muted);margin-top:8px}
-.badge {display:inline-block;padding:6px 10px;border-radius:10px;background:#eef2ff;color:var(--accent);font-weight:700}
+/* card */
+.card { background: var(--card); border-radius:12px; padding:20px; box-shadow: var(--shadow); }
+
+/* typography */
+.h1 { font-size:36px; font-weight:800; margin: 0 0 6px 0; color:#071030; }
+.h2 { font-size:18px; font-weight:600; margin: 0 0 12px 0; color:var(--muted); }
+
+/* hero layout */
+.hero-wrap { display:flex; gap:28px; align-items:flex-start; margin-bottom:18px; }
+.hero-left { flex: 1.05; }
+.hero-right { flex: 0.9; }
+
+/* hero left */
+.badge { display:inline-block; padding:8px 12px; border-radius:999px; background: linear-gradient(90deg, rgba(43,110,246,0.12), rgba(124,58,237,0.06)); color:var(--accent); font-weight:700; margin-bottom:14px; }
+.cta-row { display:flex; gap:12px; margin-top:14px; align-items:center; }
+.cta-primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:white; padding:10px 16px; border-radius:10px; font-weight:700; }
+.cta-ghost { background:transparent; border:1px solid rgba(7,16,48,0.06); padding:10px 14px; border-radius:10px; color:var(--muted); }
+
+/* hero right - vertical features */
+.feature-list { display:flex; flex-direction:column; gap:12px; }
+.feature { background: linear-gradient(180deg,#ffffff,#fbfdff); border-radius:10px; padding:14px; border:1px solid rgba(10,10,10,0.02); box-shadow: 0 6px 18px rgba(11,21,57,0.03); }
+.feature h4 { margin:0; font-size:16px; font-weight:700; color:#071030; }
+.feature p { margin:6px 0 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
+
+/* three quick stats row */
+.quicks { display:flex; gap:12px; margin-top:14px; }
+.stat { background:transparent; padding:10px 12px; border-radius:10px; border:1px solid rgba(11,21,57,0.04); min-width:120px; text-align:center; }
+.stat .num { font-size:18px; font-weight:900; color:#071030; }
+.stat .lbl { font-size:12px; color:var(--muted); margin-top:6px; }
+
+/* info grid below hero */
+.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
+.info { background:var(--card); border-radius:10px; padding:12px; border:1px solid rgba(11,21,57,0.03); }
+.info h5 { margin:0; font-size:14px; font-weight:800; }
+.info p { margin:8px 0 0 0; color:var(--muted); font-size:13px; line-height:1.45; }
+
+/* small caption */
+.small-note{font-size:13px;color:var(--muted);margin-top:10px}
 
 /* responsive */
-@media (max-width:900px){
-  .hero-grid{flex-direction:column}
-  .features{grid-template-columns:1fr}
+@media (max-width:1000px){
+  .hero-wrap{flex-direction:column}
+  .hero-right{order:2}
+  .info-grid{grid-template-columns:1fr}
 }
 </style>
 """,
@@ -120,85 +143,91 @@ body { background: var(--bg); }
 )
 
 # ----------------------
-# Landing Page (professional & attractive)
+# Clean, professional Landing Page
 # ----------------------
 if page == "Home":
     st.markdown(
         """
-        <div class="hero card">
-            <div class="hero-grid">
-                <div class="hero-left">
-                    <div class="pill">Clinical-grade · Explainable</div>
-                    <h1 class="hero-title">NeuraVia</h1>
-                    <p class="hero-sub">Symptom Tracker & Risk Dashboard — Capture structured vitals and symptoms, generate explainable risk flags, and visualize trends over time for personalized monitoring.</p>
-                    <div style="display:flex;gap:12px;align-items:center">
-                        <div style="padding:10px 14px;border-radius:10px;background:linear-gradient(90deg, #4C6EF5, #7C3AED);color:white;font-weight:700;">Get Started → Use Sidebar</div>
-                        <div style="padding:10px 14px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);">Demo: Toggle <b>Use Demo Data</b></div>
-                    </div>
-                    <p class="small-note">Designed for rapid prototyping & hackathon submission. Not a replacement for professional medical diagnosis.</p>
+        <div class="card">
+          <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
+            <div style="display:flex; align-items:center; gap:12px;">
+              <div style="width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#eef6ff,#f6ecff);display:flex;align-items:center;justify-content:center;font-size:22px">🧠</div>
+              <div>
+                <div class="h1">NeuraVia</div>
+                <div class="h2">Symptom Tracker & Risk Dashboard — clean, explainable clinical screening for rapid prototyping.</div>
+              </div>
+            </div>
+            <div style="text-align:right">
+              <div style="font-size:13px;color:var(--muted);">NeuraViaHacks • Built with Streamlit</div>
+            </div>
+          </div>
+
+          <div style="height:18px"></div>
+
+          <div class="hero-wrap">
+            <div class="hero-left">
+              <div class="badge">Clinical-grade · Explainable</div>
+              <div style="margin-top:6px;">
+                <div style="font-size:20px;font-weight:700;color:#071030">Capture structured vitals, generate explainable risk flags, and visualize trends.</div>
+                <div style="margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5">
+                  NeuraVia combines deterministic, rule-based assessments with optional AI-powered symptom interpretation to give interpretable, actionable outputs — ideal for demos, research prototypes, and clinician-facing dashboards.
                 </div>
-                <div style="flex:0.9;">
-                    <!-- Info summary -->
-                    <div class="card" style="padding:16px;">
-                        <div style="display:flex;justify-content:space-between;align-items:center">
-                            <div>
-                                <div style="font-weight:800;font-size:18px">Snapshot</div>
-                                <div style="color:var(--muted);margin-top:6px">Explainable rules + optional AI zero-shot scoring · Local persistence · CSV export</div>
-                            </div>
-                            <div style="text-align:right">
-                                <div style="font-weight:900;font-size:18px">6</div>
-                                <div style="color:var(--muted);font-size:13px">Key Condition Flags</div>
-                            </div>
-                        </div>
-                        <div class="features" style="margin-top:12px">
-                            <div class="feature">
-                                <h4>Interpretable Risk</h4>
-                                <p>Rule-based scoring with human-readable explanations so clinicians & users can trace why a flag was raised.</p>
-                            </div>
-                            <div class="feature">
-                                <h4>Longitudinal Trends</h4>
-                                <p>Visualize vitals and risk metrics over time to spot deterioration or improvement patterns.</p>
-                            </div>
-                            <div class="feature">
-                                <h4>Secure Local Storage</h4>
-                                <p>Entries are stored locally (SQLite). Export CSV for sharing with clinicians or research.</p>
-                            </div>
-                        </div>
-                    </div>
+              </div>
+
+              <div class="cta-row">
+                <div class="cta-primary">Get Started</div>
+                <div class="cta-ghost">Use Demo Data (toggle)</div>
+              </div>
+
+              <div class="quicks">
+                <div class="stat"><div class="num">6</div><div class="lbl">Key Flags</div></div>
+                <div class="stat"><div class="num">CSV</div><div class="lbl">Exportable</div></div>
+                <div class="stat"><div class="num">Local</div><div class="lbl">SQLite</div></div>
+              </div>
+
+              <div class="small-note">Note: Educational use only. Not a medical device. Consult a clinician for clinical decisions.</div>
+            </div>
+
+            <div class="hero-right">
+              <div class="feature-list">
+                <div class="feature">
+                  <h4>Interpretable Risk</h4>
+                  <p>Rule-driven scoring with clear human-readable explanations so users and clinicians can trace why a risk flag was raised.</p>
                 </div>
+                <div class="feature">
+                  <h4>Longitudinal Trends</h4>
+                  <p>Visualize vital signs and risk scores over time to identify meaningful change and clinical deterioration or improvement.</p>
+                </div>
+                <div class="feature">
+                  <h4>Secure Local Storage</h4>
+                  <p>Data persisted locally (SQLite). Export CSV for sharing with investigators or clinicians.</p>
+                </div>
+              </div>
             </div>
+          </div>
+
+          <div class="info-grid" style="margin-top:18px;">
+            <div class="info">
+              <h5>Purpose</h5>
+              <p>Rapid, explainable symptom capture for screening and personal monitoring. Emphasis on clarity and reproducibility.</p>
+            </div>
+            <div class="info">
+              <h5>Method</h5>
+              <p>Combines deterministic rules with optional HuggingFace zero-shot classification to augment symptom interpretation.</p>
+            </div>
+            <div class="info">
+              <h5>Outputs</h5>
+              <p>Interpretable risk scores, trend charts, and CSV export for downstream analysis or clinical review.</p>
+            </div>
+          </div>
         </div>
         """,
         unsafe_allow_html=True,
     )
 
-    st.markdown("<div class='card'>", unsafe_allow_html=True)
-    st.markdown("### Professional overview")
-    st.write(
-        "- **Purpose:** Rapid, explainable symptom capture for population screening and personal monitoring.\n"
-        "- **Method:** Rule-driven assessments augmented with optional HuggingFace zero-shot classification for broader symptom interpretation.\n"
-        "- **Outputs:** Interpretable risk scores, trend charts, and CSV export for downstream analysis."
-    )
-    st.markdown("</div>", unsafe_allow_html=True)
-
-    c1, c2, c3 = st.columns([1,1,1])
-    with c1:
-        st.markdown("<div class='card'>", unsafe_allow_html=True)
-        st.markdown("**Who should use this?**")
-        st.write("Healthcare researchers, students, and developers building interpretable screening tools.")
-        st.markdown("</div>", unsafe_allow_html=True)
-    with c2:
-        st.markdown("<div class='card'>", unsafe_allow_html=True)
-        st.markdown("**Key strengths**")
-        st.write("- Explainability\n- Quick demo-ready\n- Exportable data")
-        st.markdown("</div>", unsafe_allow_html=True)
-    with c3:
-        st.markdown("<div class='card'>", unsafe_allow_html=True)
-        st.markdown("**How to submit**")
-        st.write("1. Open **Input**, fill the form (or toggle Demo).\n2. Submit to compute risks.\n3. View trends in **Dashboard** and export in **History**.")
-        st.markdown("</div>", unsafe_allow_html=True)
-
-    st.info("Tip: Use the **Use Demo Data** toggle in the sidebar to prefill a demo patient and speed up your demo.", icon="💡")
+    # small help box below the hero
+    st.markdown("<div style='margin-top:12px'/>", unsafe_allow_html=True)
+    st.info("Use the sidebar to navigate: Start → Input → Dashboard → History. Toggle 'Use Demo Data' to prefill a demo patient and speed your demo.", icon="💡")
 
 # ----------------------
 # Start Page