From bef623d94d15c969060ce9dd37842b5514fa7082 Mon Sep 17 00:00:00 2001
From: Andy Yang <imbandy@Andy-MBP-2021.local>
Date: Tue, 19 May 2026 19:30:36 -0700
Subject: [PATCH] Style: BodyMaps brand alignment for home.html landing +
 viewer accent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Additive-only styling pass that aligns the PanTS-Viewer landing page
with the BodyMaps brand (https://thebodymaps.com) for visitors who
arrive at the viewer from there. Zero changes to any <script> block,
existing CSS class, React component logic, routing, or backend code.

PanTS-Demo/public/home.html
  - <link rel="icon"> -> /logo.png
  - <title> "CT Finder · Search + Viewer (Dark)" -> "PanTS Viewer · BodyMaps"
  - <meta name="description"> added for share / SEO previews
  - --brand token #2a6cff -> #E76F51 (BodyMaps "agreement band" orange).
    Cascades to .btnSearch background and #inferProgressBar fill.
  - --accent token #febb02 -> #E76F51 (unified with brand).
  - ~100 lines of new bm-*-prefixed CSS appended to the existing
    <style> block. Does not override or touch any existing class.
  - Sticky top header with BodyMaps logo + wordmark + a single link
    back to thebodymaps.com.
  - Hero intro section above the existing #inferenceSection panel
    (eyebrow + H1 with one orange-accented word + lead).
  - Footer at the bottom with one attribution line linking to
    thebodymaps.com.

PanTS-Demo/src/index.css
  - Same --brand and --accent swap so the React viewer (reachable
    from home.html via /case/<id>, /session/<id>, /reconstruction/<id>)
    inherits the same orange.

PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx
  - One-line cosmetic change: snake-game apple color
    bg-red-600 border-red-600 -> bg-[#E76F51] border-[#E76F51].
    Snake body color unchanged. The game is a loading-state amusement,
    so this is purely visual.

New assets
  - public/logo.png         BodyMaps mark, transparent, used as favicon.
  - public/logo-light.png   Same mark with white bars + orange band,
                            used in the dark header.

Untouched
  - All <script> blocks in home.html (search / filter / browse /
    upload / viewer JS).
  - All existing CSS classes in home.html (.hero, .searchRail,
    .recBar, .main, .filters, .viewer, .modal, etc.).
  - All React components except the one SnakeGame color line.
  - flask-server/, helpers/, contexts/, types/.
  - package.json (no new dependencies).
---
 PanTS-Demo/index.html                         |   4 +-
 PanTS-Demo/public/home.html                   | 131 +++++++++++++++++-
 PanTS-Demo/public/logo-light.png              | Bin 0 -> 809 bytes
 PanTS-Demo/public/logo.png                    | Bin 0 -> 1117 bytes
 .../src/components/SnakeGame/SnakeGame.tsx    |   2 +-
 PanTS-Demo/src/index.css                      |   4 +-
 6 files changed, 133 insertions(+), 8 deletions(-)
 create mode 100644 PanTS-Demo/public/logo-light.png
 create mode 100644 PanTS-Demo/public/logo.png
diff --git a/PanTS-Demo/index.html b/PanTS-Demo/index.html
index ba4ae9c..0488772 100644
--- a/PanTS-Demo/index.html
+++ b/PanTS-Demo/index.html
@@ -2,13 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="icon" type="image/png" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="/src/index.css" rel="stylesheet">
     <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:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
-    <title>PanTS Data Viewer</title>
+    <title>PanTS Viewer · BodyMaps</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/PanTS-Demo/public/home.html b/PanTS-Demo/public/home.html
index 3ab8603..99ed87d 100644
--- a/PanTS-Demo/public/home.html
+++ b/PanTS-Demo/public/home.html
@@ -4,7 +4,9 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>CT Finder · Search + Viewer (Dark)</title>
+    <link rel="icon" type="image/png" href="/logo.png" />
+    <title>PanTS Viewer · BodyMaps</title>
+    <meta name="description" content="Interactive viewer for the PanTS pancreatic-imaging dataset — 9,901 multi-organ CT volumes with expert segmentations. Hosted by BodyMaps." />
     <style>
         :root {
             --bg: #0e1a2b;
@@ -13,9 +15,9 @@
             --ink: #e8eff9;
             --sub: #a9b7cc;
             --line: #243a57;
-            --brand: #2a6cff;
+            --brand: #E76F51;
             --brand-ink: #fff;
-            --accent: #febb02;
+            --accent: #E76F51;
             --good: #16a34a;
             --bad: #ef4444;
             --control-h: 44px
@@ -1908,9 +1910,127 @@
     width: 100%;
     padding-left: 0 !important;
   }
+
+  /* ───────── BodyMaps branding additions ───────── */
+  .bm-header {
+    background: #08111e;
+    border-bottom: 1px solid var(--line);
+    padding: 14px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  .bm-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--ink);
+    text-decoration: none;
+  }
+  .bm-brand img {
+    height: 28px;
+    width: 28px;
+  }
+  .bm-brand span {
+    font-size: 15px;
+    font-weight: 500;
+    letter-spacing: -0.01em;
+  }
+  .bm-brand .bm-dot {
+    opacity: 0.4;
+    margin: 0 6px;
+  }
+  .bm-nav {
+    display: flex;
+    gap: 18px;
+    font-size: 13px;
+  }
+  .bm-nav a {
+    color: var(--ink);
+    opacity: 0.75;
+    text-decoration: none;
+    transition: opacity .2s;
+  }
+  .bm-nav a:hover {
+    opacity: 1;
+  }
+  .bm-hero {
+    padding: 56px 20px 40px;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+  .bm-eyebrow {
+    font-size: 11px;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--sub);
+    font-weight: 500;
+    margin-bottom: 12px;
+  }
+  .bm-h1 {
+    font-size: clamp(28px, 4vw, 40px);
+    font-weight: 500;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    margin: 0 0 16px;
+    color: var(--ink);
+  }
+  .bm-accent {
+    color: var(--brand);
+  }
+  .bm-lead {
+    font-size: 16px;
+    line-height: 1.55;
+    color: var(--sub);
+    max-width: 640px;
+    margin: 0;
+  }
+  .bm-lead strong {
+    color: var(--ink);
+    font-weight: 600;
+  }
+  .bm-footer {
+    background: #08111e;
+    border-top: 1px solid var(--line);
+    padding: 24px 20px;
+    text-align: center;
+    color: var(--sub);
+    font-size: 13px;
+    margin-top: 48px;
+  }
+  .bm-footer a {
+    color: var(--ink);
+    text-decoration: none;
+    border-bottom: 1px solid var(--line);
+  }
+  .bm-footer a:hover {
+    color: var(--brand);
+    border-bottom-color: var(--brand);
+  }
 </style>
 
 
+    <!-- BodyMaps header -->
+    <header class="bm-header">
+      <a class="bm-brand" href="/">
+        <img src="/logo-light.png" alt="BodyMaps" />
+        <span><strong>BodyMaps</strong><span class="bm-dot">·</span>PanTS Viewer</span>
+      </a>
+      <nav class="bm-nav">
+        <a href="https://thebodymaps.com" target="_blank" rel="noopener">thebodymaps.com</a>
+      </nav>
+    </header>
+
+    <!-- BodyMaps hero -->
+    <section class="bm-hero">
+      <div class="bm-eyebrow">Interactive dataset viewer</div>
+      <h1 class="bm-h1">Browse the <span class="bm-accent">PanTS</span> pancreatic-imaging dataset.</h1>
+      <p class="bm-lead"><strong>9,901</strong> publicly browseable CT cases with expert-annotated multi-organ segmentations. Search by case ID, filter by metadata, or upload your own NIfTI scan to run auto-segmentation.</p>
+    </section>
+
     <!-- Inference Upload -->
     <section class="panel container" id="inferenceSection" style="margin:12px auto;padding:20px 24px;max-width:520px;">
       <div style="text-align:center;font-size:1.1rem;font-weight:700;margin-bottom:14px;color:var(--ink)">Upload Your CT Scan</div>
@@ -2172,6 +2292,11 @@ <h4>3D</h4>
         </main>
     </section>
 
+    <!-- BodyMaps footer -->
+    <footer class="bm-footer">
+      This viewer is hosted by <a href="https://thebodymaps.com" target="_blank" rel="noopener"><strong>BodyMaps</strong></a> — a working example of what our platform makes possible.
+    </footer>
+
     <!-- Report Modal -->
     <div id="reportModal" class="modal" aria-hidden="true">
         <div class="modalBox">
diff --git a/PanTS-Demo/public/logo-light.png b/PanTS-Demo/public/logo-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d44b32dac2c30da1ff13d1a5e2bee7241e99e67
GIT binary patch
literal 809
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|GzJEy51uZLAr-gY-o3bz$xy%{
zP+9ZPt~E!3)*SKLRD0v-4{eS~qTiE^o`-z!*i?R;-8;%<PQ$Eo(->G71Q;AZW>Jel
zJ(E}%eq5RScW>h985eX8MhPGI@L}_3S3{k{E}F_pr`wu57d&8j@bLIe&40r9{J?TR
zr~w!}3>*v!40ss!1xJm~`F-R}*c@tM%r0W2bXD}#yXxb!|M&0eWwmF-5kMYGqnqB(
z+rFBAg3#_e^84fs8KE{QFyIPWg~d73o0-&b1bV}(JG?vk`PFAkd}ik)d|=MQhw0C|
zla^>qUC+4p=SpkN84NamMC`1Y7+N_A`3R3^K~e=<(l{f&zTr49=d93%M>8`86IVZr
y)R{I*YWLnx#SH(Msg@uh3Cn?+X^e%T;xp5N={ljF_wHCR0D-5gpUXO@geCy)FOwVq

literal 0
HcmV?d00001

diff --git a/PanTS-Demo/public/logo.png b/PanTS-Demo/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..b72aeb9a750664f9755c35a1d9f69838916362f6
GIT binary patch
literal 1117
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|GzJD16;Bt(kcwMx?{3Uea+Epn
z@T138y92S8Zt--4URvgroqE7zTGNDAa!<7!H{5Yk4BNKy(lM`=%$&)mnU9pM-{tVG
zFSy&G?ECL|2|v%j(VxsZ(=AYham8|dHwGpK4h98=1_o*|sAm$;MStEd@!_|g`Rr)T
zMjp-F!>{wwzgAp6vq>OX`%Cp*11UZ!wW1k7pUnTKIDcNeTt3_O=dXP?CB3<tdEDUi
z@zt9zuNPky*vJqQ7b_lD*VlXC@ZY(U9d7Pt^jWrZ`uxRf%{6_NRVE6l@*k+#xW(&+
zbt$idSM=(Zy}{QRe%$Kc8~m6+pfDw{U<*0<bu&}LIIEYhW9-<NI(0+&E2)OM_1Qp%
zUB~N#D^;#Hhd*HvaN^ipv**>8#aACam|j1vKU^(vqVR$I$(eCy#7|GSbnR&W9%O(1
zdAdG{p+V{&H;%|UFyF7|!T-9t_dhqfbk_df_~EdEI)ei!4Y4q=9N>Vm1Ykl?#;Fr`
z8y>LWFw$Y?4(SgZFbA3Kc~{1EXm;APR*C3^_g}YNEC`tOo8zy<3kLu5`u*n3w?BVX
zlVqzdy=8dj)5lkDzPxT_2s!ZdYU#tL&u?(p+__)-YjQ(A1G~)cy?<n~_j)E8o#kfK
z*!eRllOv?;J;wn#&0OBbQ}1LMZydf}w`xy03qzI<nqyfQ(4CJV@<U}-WE#{!!)-he
z0~g<aEyXnTuJt;0`-ayCEvLOcsGR}~@400r9DH>@(|=ZkwxyRcSsY54CI0!S(UL8t
znHuj+HtQU@!Sy%Jyr-?%EplEo!-8XfxT%#v;N~<iNH9__?|tCk&rmY!>i3GKd~F6G
N@O1TaS?83{1OP?UOhW(w

literal 0
HcmV?d00001

diff --git a/PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx b/PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx
index 5a445b2..fd639a6 100644
--- a/PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx
+++ b/PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx
@@ -207,7 +207,7 @@ function SnakeGame() {
 
             let className = "w-5 h-5 flex justify-center items-center border-l border-t border-white border-dotted";
             if (isFood) {
-                className += " bg-red-600 z-10 border-red-600 rounded-md shadow-md";
+                className += " bg-[#E76F51] z-10 border-[#E76F51] rounded-md shadow-md";
             }
             if (isSnakeBody) {
                 className += " bg-[#3842ff] border-[#3842ff]";
diff --git a/PanTS-Demo/src/index.css b/PanTS-Demo/src/index.css
index 79ff726..98a8d9b 100644
--- a/PanTS-Demo/src/index.css
+++ b/PanTS-Demo/src/index.css
@@ -23,9 +23,9 @@
     --ink: #e8eff9;
     --sub: #a9b7cc;
     --line: #243a57;
-    --brand: #2a6cff;
+    --brand: #E76F51;
     --brand-ink: #fff;
-    --accent: #febb02;
+    --accent: #E76F51;
     --good: #16a34a;
     --bad: #ef4444;
     --control-h: 44px
