Skip to content

Style: BodyMaps brand alignment for home.html landing + viewer accent #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andyy-yang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Style: BodyMaps brand alignment for home.html landing + viewer accent #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions PanTS-Demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
131 changes: 128 additions & 3 deletions PanTS-Demo/public/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
Binary file added PanTS-Demo/public/logo-light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added PanTS-Demo/public/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion PanTS-Demo/src/components/SnakeGame/SnakeGame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]";
Expand Down
4 changes: 2 additions & 2 deletions PanTS-Demo/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down