Skip to content

Give each hero-carousel panel a bold colored header band #4

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

Merged
hugooc merged 1 commit into from
May 27, 2026
Merged

Give each hero-carousel panel a bold colored header band #4

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
2 changes: 1 addition & 1 deletion CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ See `DESIGN.md` §1 (audience), §5 (Phase 4 / 4.5), §10 (distribution strategy

**Website:** [openkp.org](https://openkp.org) live on Cloudflare Pages as of 2026-05-11 (commit `25a7259`, see session-20). Source under `site/` — static single-page, no build step, no framework. CAIHL framing in copy, MCP-client-agnostic at runtime. Codex drafted, two review passes, then deployed via wrangler direct upload. Future deploys from repo root: `wrangler pages deploy site --project-name=openkp --branch=main --commit-dirty=true`. Public repo is live, so you can also switch the Pages project to GitHub auto-deploy any time via the Cloudflare dashboard — no longer gated on anything.

**Site refresh 2026-05-27:** the hero panel is now a 3-slide carousel (visit notes engagement, implants inventory, unresolved message threads) that auto-rotates every 5 seconds with dot navigation, per-slide topic tag, and accent-color shift per slide. The tools section reads "24 MCP tools" with a `Care team, specialists, implanted devices` bullet for the new reads. The install card carries a short Windows-supported note linking to `docs/install/windows.md`. Implementation lives in `site/index.html` (HTML), `site/styles.css` (`.hero-carousel*`, `.slide-tag`, `.carousel-dot*`), and `site/script.js` (carousel rotation, pauses on hover/focus, respects `prefers-reduced-motion`).
**Site refresh 2026-05-27:** the hero panel is now a 3-slide carousel (visit notes engagement, implants inventory, unresolved message threads) that auto-rotates every 5 seconds with dot navigation and a full-width colored header band per slide (big `01/02/03` slide number + topic name) that recolors the whole band to that slide's accent on every rotation (rust visit notes / gold implants / green messages; gold band uses ink text for contrast). The tools section reads "24 MCP tools" with a `Care team, specialists, implanted devices` bullet for the new reads. The install card carries a short Windows-supported note linking to `docs/install/windows.md`. Implementation lives in `site/index.html` (HTML), `site/styles.css` (`.hero-carousel*`, `.slide-head`/`.slide-num`/`.slide-name`, `.chat-body`, `.carousel-dot*`), and `site/script.js` (carousel rotation, pauses on hover/focus, respects `prefers-reduced-motion`).

**Relicense 2026-05-27 (ADR-007):** OpenKP moved from MIT to **PolyForm Noncommercial 1.0.0**. The relicense reflects Hugo's intent that OpenKP serve patients and not be extracted commercially. Free for personal, research, educational, advocacy, nonprofit, and government use. Commercial use (paid SaaS, paid consulting, embedding in paid products) requires a separate license. `openkp/LICENSE` carries the canonical PolyForm text plus a `Required Notice: Copyright (c) 2026 Hugo Campos` line. Snapshots cloned under MIT before 2026-05-27 remain MIT for whoever has them — we can't claw back what's been licensed. Doc refs, `pyproject.toml`, and `site/index.html` final-CTA all updated. See `docs/adr/007-relicense-to-polyform-noncommercial.md`.

Expand Down
85 changes: 50 additions & 35 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,50 +65,65 @@ <h1>Your patient portal, directed by you.</h1>
<div class="hero-carousel" data-carousel>
<div class="hero-carousel-track" aria-live="polite">
<div class="chat-window is-active" data-slide aria-roledescription="slide" aria-label="Example 1 of 3">
<div class="slide-tag">Visit notes</div>
<div class="bubble user">
Read every visit note from the last two years. Where did I raise concerns,
ask questions, or push back? How was that documented?
<div class="slide-head">
<span class="slide-num">01</span>
<span class="slide-name">Visit notes</span>
</div>
<div class="tool-call">
<span class="status-dot"></span>
openkp.list_past_visits &rarr; openkp.read_visit_notes
</div>
<div class="bubble assistant">
I found repeated concern-raising across cardiology visits and message
threads. Here are the patterns in how your engagement appears in the chart...
<div class="chat-body">
<div class="bubble user">
Read every visit note from the last two years. Where did I raise concerns,
ask questions, or push back? How was that documented?
</div>
<div class="tool-call">
<span class="status-dot"></span>
openkp.list_past_visits &rarr; openkp.read_visit_notes
</div>
<div class="bubble assistant">
I found repeated concern-raising across cardiology visits and message
threads. Here are the patterns in how your engagement appears in the chart...
</div>
</div>
</div>
<div class="chat-window" data-slide aria-roledescription="slide" aria-label="Example 2 of 3" aria-hidden="true">
<div class="slide-tag">Implants</div>
<div class="bubble user">
What devices are implanted in me? I want make, model, serial,
and the date each one went in.
</div>
<div class="tool-call">
<span class="status-dot"></span>
openkp.list_implants
<div class="slide-head">
<span class="slide-num">02</span>
<span class="slide-name">Implants</span>
</div>
<div class="bubble assistant">
Two devices on record. One active cardiac pacemaker with manufacturer,
model, and UDI captured. One earlier lead explanted in a prior procedure.
Implant and explant providers attached...
<div class="chat-body">
<div class="bubble user">
What devices are implanted in me? I want make, model, serial,
and the date each one went in.
</div>
<div class="tool-call">
<span class="status-dot"></span>
openkp.list_implants
</div>
<div class="bubble assistant">
Two devices on record. One active cardiac pacemaker with manufacturer,
model, and UDI captured. One earlier lead explanted in a prior procedure.
Implant and explant providers attached...
</div>
</div>
</div>
<div class="chat-window" data-slide aria-roledescription="slide" aria-label="Example 3 of 3" aria-hidden="true">
<div class="slide-tag">Messages</div>
<div class="bubble user">
Walk back through every message thread and surface anything I asked
about that never got a clear follow-up.
</div>
<div class="tool-call">
<span class="status-dot"></span>
openkp.list_messages &rarr; openkp.read_message
<div class="slide-head">
<span class="slide-num">03</span>
<span class="slide-name">Messages</span>
</div>
<div class="bubble assistant">
Four threads where your question didn't get a direct reply.
Three are medication-related, one is about a specialist referral.
Pulling the most recent to the top...
<div class="chat-body">
<div class="bubble user">
Walk back through every message thread and surface anything I asked
about that never got a clear follow-up.
</div>
<div class="tool-call">
<span class="status-dot"></span>
openkp.list_messages &rarr; openkp.read_message
</div>
<div class="bubble assistant">
Four threads where your question didn't get a direct reply.
Three are medication-related, one is about a specialist referral.
Pulling the most recent to the top...
</div>
</div>
</div>
</div>
Expand Down
44 changes: 30 additions & 14 deletions site/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,10 @@ h3 {

.chat-window {
display: grid;
}

.chat-body {
display: grid;
gap: 16px;
padding: 22px;
}
Expand All @@ -238,28 +242,40 @@ h3 {
transition: opacity 320ms ease, visibility 0s linear 0s;
}

.slide-tag {
display: inline-block;
justify-self: start;
padding: 4px 10px;
border: 1px solid currentColor;
color: var(--rust);
font-size: 11px;
.slide-head {
display: flex;
align-items: baseline;
gap: 14px;
padding: 14px 22px;
color: var(--white);
font-weight: 850;
letter-spacing: 0.04em;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.hero-carousel-track > .chat-window:nth-child(1) .slide-tag {
color: var(--rust);
.slide-num {
font-size: 20px;
line-height: 1;
font-variant-numeric: tabular-nums;
opacity: 0.85;
}

.slide-name {
font-size: 13px;
letter-spacing: 0.08em;
}

.hero-carousel-track > .chat-window:nth-child(2) .slide-tag {
color: var(--gold);
.hero-carousel-track > .chat-window:nth-child(1) .slide-head {
background: var(--rust);
}

.hero-carousel-track > .chat-window:nth-child(2) .slide-head {
background: var(--gold);
color: var(--ink);
}

.hero-carousel-track > .chat-window:nth-child(3) .slide-tag {
color: var(--green);
.hero-carousel-track > .chat-window:nth-child(3) .slide-head {
background: var(--green);
}

.hero-carousel-track > .chat-window:nth-child(1) .tool-call {
Expand Down
Loading