diff --git a/app.css b/app.css index b60e987..f3587e7 100644 --- a/app.css +++ b/app.css @@ -4758,3 +4758,101 @@ footer a:hover { color: var(--accent-2); } .em-body { padding: 0 1rem .6rem; } .em-excerpt { padding: .5rem 1rem; margin: 0 1rem; } } + +/* ── MEDICALCONDITION (trustworthy patient-info page) ── */ +.card.health-info { + background: var(--card); + border-radius: var(--radius); + --hi-teal: #0d9488; + --hi-teal-bg: rgba(13,148,136,.06); + --hi-teal-border: rgba(13,148,136,.18); +} +.card.health-info .hd.hidden { display: none; } + +.hi-header { + display: flex; + align-items: center; + gap: .7rem; + padding: 1.5rem 1.5rem .8rem; +} +.hi-icon { + width: 42px; + height: 42px; + border-radius: 50%; + background: var(--hi-teal-bg); + color: var(--hi-teal); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.3rem; + flex-shrink: 0; +} +.hi-title { + font-size: 1.15rem; + font-weight: 700; + color: var(--ink); + line-height: 1.3; +} + +.hi-notice { + display: flex; + align-items: center; + gap: .4rem; + margin: 0 1.5rem .8rem; + padding: .5rem .8rem; + background: #fefce8; + border: 1px solid #fde68a; + border-radius: 8px; + font-size: .78rem; + color: #92400e; + line-height: 1.4; +} +.hi-notice-icon { + font-size: .9rem; + flex-shrink: 0; +} + +.hi-section { + padding: .5rem 1.5rem; +} +.hi-section + .hi-section { + border-top: 1px solid var(--line-2); +} +.hi-section-label { + font-size: .7rem; + text-transform: uppercase; + letter-spacing: .07em; + color: var(--hi-teal); + font-weight: 700; + margin-bottom: .25rem; +} +.hi-section-body { + font-size: .84rem; + line-height: 1.6; + color: var(--ink-2); +} + +.hi-overview { + font-size: .84rem; + line-height: 1.65; + color: var(--muted); + padding: .8rem 1.5rem; + border-top: 1px solid var(--line); + margin-top: .4rem; +} + +.hi-footer { + text-align: center; + font-size: .7rem; + color: var(--muted-2); + padding: .8rem 1.5rem 1.2rem; + letter-spacing: .02em; +} + +@media (max-width: 480px) { + .hi-header { padding: 1.2rem 1rem .6rem; } + .hi-title { font-size: 1.05rem; } + .hi-notice { margin: 0 1rem .6rem; } + .hi-section { padding: .4rem 1rem; } + .hi-overview { padding: .6rem 1rem; } +} diff --git a/app.js b/app.js index 3b05b8b..623389f 100644 --- a/app.js +++ b/app.js @@ -2506,6 +2506,72 @@ handled.add("hasMenuSection"); handled.add("provider"); handled.add("url"); } + // ── MEDICALCONDITION (trustworthy patient-info page) ── + if (cfg.type === "MedicalCondition") { + const card = document.querySelector(".card"); + if (card) card.classList.add("health-info"); + + // Hide normal header + const hd = document.querySelector(".hd"); + if (hd) hd.classList.add("hidden"); + + // Remove generic hero + const heroMount = document.getElementById("hero-mount"); + if (heroMount) heroMount.querySelector('.hero')?.remove(); + + // ── Calm header with soft teal ── + const hiHeader = document.createElement("div"); hiHeader.className = "hi-header"; + const hiIcon = document.createElement("div"); hiIcon.className = "hi-icon"; + hiIcon.textContent = "\u2695"; + hiHeader.appendChild(hiIcon); + const title = data[cfg.titleProp]; + if (title) { + const nameEl = document.createElement("div"); nameEl.className = "hi-title"; + nameEl.textContent = title; + hiHeader.appendChild(nameEl); + } + view.appendChild(hiHeader); + + // ── Informational-only notice banner ── + const notice = document.createElement("div"); notice.className = "hi-notice"; + notice.innerHTML = "\u2139\uFE0F This is informational only — not medical advice. Consult a physician."; + view.appendChild(notice); + + // ── Section helper ── + const addSection = (label, text) => { + if (!text) return; + const sec = document.createElement("div"); sec.className = "hi-section"; + sec.innerHTML = "
" + label + "
" + text + "
"; + view.appendChild(sec); + }; + + // Symptoms + addSection("Signs & Symptoms", data["signOrSymptom"]); + // Anatomy + addSection("Associated Anatomy", data["associatedAnatomy"]); + // Treatment + addSection("Possible Treatment", data["possibleTreatment"]); + // Risk factors + addSection("Risk Factors", data["riskFactor"]); + + // ── Description as overview ── + const desc = data["description"]; + if (desc) { + const overview = document.createElement("div"); overview.className = "hi-overview"; + overview.textContent = desc; + view.appendChild(overview); + } + + // ── Reviewed-date footer feel ── + const footer = document.createElement("div"); footer.className = "hi-footer"; + footer.textContent = "For informational purposes only \u00b7 Not a substitute for professional medical advice"; + view.appendChild(footer); + + handled.add("name"); handled.add("image"); handled.add("description"); + handled.add("associatedAnatomy"); handled.add("possibleTreatment"); + handled.add("riskFactor"); handled.add("signOrSymptom"); + } + // ── EMAILMESSAGE (email client reading pane) ── if (cfg.type === "EmailMessage") { const card = document.querySelector(".card");