UIコンポーネント簡単

Clinic — Medication Info Sheet

A calm, patient-facing medication leaflet for a single prescribed drug, leading with a name and dose header, then plain-language sections for what it treats, how to take it and common side effects. A prominent coral warnings callout flags allergic-reaction symptoms, Do and Don't chips give quick guidance, and a missed-dose note reassures. An A / A+ / A++ text-size toggle scales the whole sheet and a Print button opens the browser dialog, each confirmed with a toast.

Labで開く

html css vanilla-js

ターゲット: JS HTML

コード

:root {
  --teal: #129c93;
  --teal-d: #0c7a73;
  --teal-700: #0a655f;
  --teal-50: #e7f5f3;
  --coral: #ff7a66;
  --coral-soft: #ffe6df;
  --ink: #16322f;
  --ink-2: #3a534f;
  --muted: #6b827e;
  --bg: #f1f7f6;
  --white: #ffffff;
  --line: rgba(16, 50, 47, 0.1);
  --line-2: rgba(16, 50, 47, 0.18);
  --ok: #2f9e6f;
  --warn: #d98a2b;
  --danger: #d4503e;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow-1: 0 1px 2px rgba(16, 50, 47, 0.05), 0 4px 14px rgba(16, 50, 47, 0.06);
  --shadow-2: 0 16px 40px rgba(12, 122, 115, 0.16);
  /* leaflet text scale — toggled by JS */
  --scale: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  padding: 28px 16px 64px;
}

/* ── Sheet ─────────────────────────────────────────────────────────────────── */
.sheet {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* the text-scale lever: everything sized in em flexes with this */
  font-size: calc(1rem * var(--scale));
  transition: font-size 0.18s ease;
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem; /* keep toolbar fixed regardless of scale */
}
.size-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.size-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-right: 4px;
}
.size-btn {
  border: 1px solid var(--line-2);
  background: var(--white);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  min-width: 38px;
  height: 34px;
  padding: 0 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.size-btn:nth-child(3) {
  font-size: 1.02rem;
}
.size-btn:nth-child(4) {
  font-size: 1.16rem;
}
.size-btn:hover {
  border-color: var(--teal);
  color: var(--teal-d);
  background: var(--teal-50);
}
.size-btn:active {
  transform: translateY(1px);
}
.size-btn[aria-pressed="true"] {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}
.print-btn {
  border: 1px solid var(--line-2);
  background: var(--white);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  padding: 0 16px;
  height: 34px;
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.print-btn:hover {
  border-color: var(--teal);
  color: var(--teal-d);
  background: var(--teal-50);
}
.print-btn:active {
  transform: translateY(1px);
}
.print-btn span {
  font-size: 1.05rem;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.med-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.med-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--teal-50), #d4ede9);
  color: var(--teal-700);
  font-size: 1.7em;
  font-weight: 800;
}
.med-head-text {
  min-width: 0;
}
.eyebrow {
  font-size: 0.74em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-d);
}
.med-head h1 {
  font-size: 1.7em;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2px;
}
.strength {
  color: var(--teal-d);
  font-weight: 700;
}
.generic {
  color: var(--muted);
  font-size: 0.9em;
  margin-top: 4px;
}
.head-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pill {
  font-size: 0.76em;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--teal-50);
  color: var(--teal-d);
  white-space: nowrap;
}
.pill-soft {
  background: #eef3f2;
  color: var(--ink-2);
}

.patient-line {
  font-size: 0.86em;
  color: var(--ink-2);
  background: #f7fbfa;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.patient-line strong {
  color: var(--ink);
  font-weight: 700;
}

/* ── Generic block ─────────────────────────────────────────────────────────── */
.block h2,
.warn-body h2,
.missed h2 {
  font-size: 1.04em;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.dot-teal {
  background: var(--teal);
}
.dot-coral {
  background: var(--coral);
}
.block p {
  font-size: 0.95em;
  color: var(--ink-2);
}
.block-intro {
  margin-bottom: 10px;
}
.block-note {
  margin-top: 12px;
  font-size: 0.86em !important;
  color: var(--muted);
  font-style: italic;
}

/* ── How to take — steps ───────────────────────────────────────────────────── */
.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #f7fbfa;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-d);
  color: #fff;
  font-size: 0.82em;
  font-weight: 800;
}
.step-title {
  font-size: 0.96em;
  font-weight: 700;
  color: var(--ink);
}
.step-sub {
  font-size: 0.86em;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Side effects list ─────────────────────────────────────────────────────── */
.se-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.se-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92em;
  color: var(--ink-2);
  padding: 9px 12px;
  background: var(--coral-soft);
  border-radius: var(--r-sm);
}
.se-ico {
  color: var(--coral);
  font-weight: 800;
  font-size: 1.1em;
  line-height: 1;
}

/* ── Warnings callout ──────────────────────────────────────────────────────── */
.warn-callout {
  display: flex;
  gap: 16px;
  background: linear-gradient(180deg, #fff3f0, #ffe9e3);
  border: 1px solid rgba(212, 80, 62, 0.32);
  border-left: 5px solid var(--danger);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.warn-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 1.3em;
  font-weight: 800;
}
.warn-body h2 {
  color: #b23a2a;
  margin-bottom: 8px;
}
.warn-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.warn-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.92em;
  color: var(--ink);
  font-weight: 500;
}
.warn-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--danger);
}
.warn-foot {
  margin-top: 12px;
  font-size: 0.88em;
  color: var(--ink-2);
}
.warn-foot strong {
  color: #b23a2a;
}

/* ── Do / Don't chips ──────────────────────────────────────────────────────── */
.dod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dod-head {
  font-size: 0.8em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.dod-head.do {
  color: var(--ok);
}
.dod-head.dont {
  color: var(--danger);
}
.chips {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88em;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.chip span {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 800;
  color: #fff;
}
.chip-do {
  background: rgba(47, 158, 111, 0.1);
  border-color: rgba(47, 158, 111, 0.25);
  color: #1f7a53;
}
.chip-do span {
  background: var(--ok);
}
.chip-dont {
  background: rgba(212, 80, 62, 0.08);
  border-color: rgba(212, 80, 62, 0.22);
  color: #a8392a;
}
.chip-dont span {
  background: var(--danger);
}

/* ── Missed a dose ─────────────────────────────────────────────────────────── */
.missed {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--teal-50);
  border: 1px solid rgba(18, 156, 147, 0.28);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.missed-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-d);
  color: #fff;
  font-size: 1.15em;
}
.missed h2 {
  color: var(--teal-700);
  margin-bottom: 6px;
}
.missed p {
  font-size: 0.92em;
  color: var(--ink-2);
}
.missed strong {
  color: var(--teal-700);
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.sheet-foot {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  text-align: center;
}
.sheet-foot p {
  font-size: 0.82em;
  color: var(--muted);
}
.sheet-foot .ref {
  font-size: 0.76em;
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-2);
  z-index: 50;
  max-width: 90vw;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  body {
    padding: 16px 10px 48px;
  }
  .sheet {
    padding: 20px 18px 24px;
    border-radius: var(--r-md);
  }
  .toolbar {
    justify-content: center;
  }
  .se-list,
  .dod-grid {
    grid-template-columns: 1fr;
  }
  .med-head h1 {
    font-size: 1.5em;
  }
}

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  body {
    background: #fff;
    padding: 0;
  }
  .toolbar,
  .toast {
    display: none !important;
  }
  .sheet {
    box-shadow: none;
    border: none;
    border-radius: 0;
    max-width: none;
    font-size: 1rem;
  }
  .warn-callout,
  .missed,
  .steps li,
  .se-list li {
    break-inside: avoid;
  }
}

// ── Toast ──────────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
  toast.textContent = msg;
  toast.hidden = false;
  clearTimeout(showToast._t);
  showToast._t = setTimeout(() => (toast.hidden = true), 2600);
}

// ── Text-size toggle (A / A+ / A++) ──────────────────────────────────────────
// Each step scales the leaflet's --scale lever; everything sized in em flexes.
const SCALES = { md: 1, lg: 1.15, xl: 1.32 };
const LABELS = { md: "Normal", lg: "Large", xl: "Extra large" };
const sheet = document.getElementById("sheet");
const sizeBtns = document.querySelectorAll(".size-btn");

function setSize(size) {
  if (!SCALES[size]) return;
  sheet.dataset.size = size;
  sheet.style.setProperty("--scale", String(SCALES[size]));
  sizeBtns.forEach((btn) => {
    const active = btn.dataset.size === size;
    btn.setAttribute("aria-pressed", String(active));
  });
}

sizeBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    const size = btn.dataset.size;
    setSize(size);
    showToast(`Text size set to ${LABELS[size]}.`);
  });
});

// Initialise from the markup's default.
setSize(sheet.dataset.size || "md");

// ── Print ────────────────────────────────────────────────────────────────────
document.getElementById("print").addEventListener("click", () => {
  showToast("Opening print dialog…");
  // Let the toast paint before the (blocking) print dialog appears.
  setTimeout(() => window.print(), 120);
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Medication Info · Northpoint Clinic</title>
  </head>
  <body>
    <main class="sheet" id="sheet" data-size="md">
      <!-- Toolbar (hidden in print) -->
      <div class="toolbar" role="toolbar" aria-label="Leaflet controls">
        <div class="size-toggle" role="group" aria-label="Text size">
          <span class="size-label">Text size</span>
          <button class="size-btn" data-size="md" aria-pressed="true" aria-label="Normal text size">
            A
          </button>
          <button class="size-btn" data-size="lg" aria-pressed="false" aria-label="Large text size">
            A+
          </button>
          <button
            class="size-btn"
            data-size="xl"
            aria-pressed="false"
            aria-label="Extra large text size"
          >
            A++
          </button>
        </div>
        <button class="print-btn" id="print" type="button">
          <span aria-hidden="true">⎙</span> Print leaflet
        </button>
      </div>

      <!-- Header -->
      <header class="med-head">
        <div class="med-icon" aria-hidden="true">℞</div>
        <div class="med-head-text">
          <p class="eyebrow">Medication information</p>
          <h1>Amoxicillin <span class="strength">500&nbsp;mg</span></h1>
          <p class="generic">Capsule, oral · Antibiotic (penicillin family)</p>
          <div class="head-tags">
            <span class="pill">Take 3 times a day</span>
            <span class="pill">7-day course</span>
            <span class="pill pill-soft">With or without food</span>
          </div>
        </div>
      </header>

      <p class="patient-line">
        Prescribed for <strong>Jordan Ellis</strong> by
        <strong>Dr. Lena Okafor</strong> · Northpoint Clinic
      </p>

      <!-- What it is for -->
      <section class="block" aria-labelledby="for-h">
        <h2 id="for-h"><span class="dot dot-teal" aria-hidden="true"></span> What it is for</h2>
        <p>
          Amoxicillin is an antibiotic used to treat bacterial infections such as chest, ear, throat
          and urinary infections. It works by stopping the growth of the bacteria causing your
          infection. It will not help with colds, flu or other infections caused by viruses.
        </p>
      </section>

      <!-- How to take it -->
      <section class="block" aria-labelledby="how-h">
        <h2 id="how-h"><span class="dot dot-teal" aria-hidden="true"></span> How to take it</h2>
        <ol class="steps">
          <li>
            <span class="step-num" aria-hidden="true">1</span>
            <div>
              <p class="step-title">One capsule, three times a day</p>
              <p class="step-sub">Roughly every 8 hours — for example morning, afternoon and night.</p>
            </div>
          </li>
          <li>
            <span class="step-num" aria-hidden="true">2</span>
            <div>
              <p class="step-title">Swallow whole with a glass of water</p>
              <p class="step-sub">Do not crush or chew. You can take it with or without food.</p>
            </div>
          </li>
          <li>
            <span class="step-num" aria-hidden="true">3</span>
            <div>
              <p class="step-title">Finish the full 7-day course</p>
              <p class="step-sub">
                Keep going even if you feel better, so the infection clears completely.
              </p>
            </div>
          </li>
        </ol>
      </section>

      <!-- Common side effects -->
      <section class="block" aria-labelledby="se-h">
        <h2 id="se-h"><span class="dot dot-coral" aria-hidden="true"></span> Common side effects</h2>
        <p class="block-intro">
          These are usually mild and often settle on their own. They affect roughly 1 in 100 people.
        </p>
        <ul class="se-list">
          <li><span class="se-ico" aria-hidden="true">•</span> Feeling sick (nausea)</li>
          <li><span class="se-ico" aria-hidden="true">•</span> Loose or more frequent stools</li>
          <li><span class="se-ico" aria-hidden="true">•</span> Mild stomach discomfort</li>
          <li><span class="se-ico" aria-hidden="true">•</span> A harmless change in taste</li>
        </ul>
        <p class="block-note">
          Taking each dose with a little food can help if your stomach feels unsettled.
        </p>
      </section>

      <!-- Warnings callout -->
      <section class="warn-callout" role="note" aria-labelledby="warn-h">
        <div class="warn-icon" aria-hidden="true">!</div>
        <div class="warn-body">
          <h2 id="warn-h">Important — get help straight away if&hellip;</h2>
          <ul class="warn-list">
            <li>You get a skin rash, itching, swelling of the face, lips or throat.</li>
            <li>You have trouble breathing or feel faint after a dose.</li>
            <li>You develop severe or watery diarrhoea that does not stop.</li>
          </ul>
          <p class="warn-foot">
            These can be signs of a serious allergic reaction. Call
            <strong>emergency services</strong> or go to your nearest emergency department.
          </p>
        </div>
      </section>

      <!-- Do / Don't chips -->
      <section class="block" aria-labelledby="dod-h">
        <h2 id="dod-h"><span class="dot dot-teal" aria-hidden="true"></span> Do &amp; Don&rsquo;t</h2>
        <div class="dod-grid">
          <div class="dod-col">
            <p class="dod-head do">Do</p>
            <ul class="chips">
              <li class="chip chip-do"><span aria-hidden="true">✓</span> Take it at evenly spaced times</li>
              <li class="chip chip-do"><span aria-hidden="true">✓</span> Drink plenty of water</li>
              <li class="chip chip-do"><span aria-hidden="true">✓</span> Store below 25&deg;C, away from light</li>
              <li class="chip chip-do"><span aria-hidden="true">✓</span> Tell us about other medicines</li>
            </ul>
          </div>
          <div class="dod-col">
            <p class="dod-head dont">Don&rsquo;t</p>
            <ul class="chips">
              <li class="chip chip-dont"><span aria-hidden="true">✕</span> Drink alcohol heavily</li>
              <li class="chip chip-dont"><span aria-hidden="true">✕</span> Share with anyone else</li>
              <li class="chip chip-dont"><span aria-hidden="true">✕</span> Double up on a missed dose</li>
              <li class="chip chip-dont"><span aria-hidden="true">✕</span> Stop early without asking us</li>
            </ul>
          </div>
        </div>
      </section>

      <!-- Missed a dose -->
      <section class="missed" aria-labelledby="missed-h">
        <div class="missed-icon" aria-hidden="true">⏱</div>
        <div>
          <h2 id="missed-h">Missed a dose?</h2>
          <p>
            Take it as soon as you remember. If your next dose is due within 2 hours, skip the
            missed one and carry on as normal — <strong>never take a double dose</strong> to make up
            for it.
          </p>
        </div>
      </section>

      <footer class="sheet-foot">
        <p>Northpoint Clinic · Pharmacy team · Questions? Call 020 7946 0112</p>
        <p class="ref">Leaflet ref. AMX-500-EN · Last reviewed Jun 2026</p>
      </footer>
    </main>

    <div class="toast" id="toast" hidden role="status" aria-live="polite"></div>

    <script src="script.js"></script>
  </body>
</html>

Medication Info Sheet

A single-drug patient leaflet built for calm, careful reading. A teal header carries the medication name, strength and form alongside a short prescriber line, then the sheet works top to bottom: What it is for, a numbered How to take it sequence, a two-column grid of common side effects, and a coral-tinted warnings callout that draws the eye to the signs of a serious allergic reaction. Below it, green Do and red Don’t chips give at-a-glance guidance and a teal Missed a dose? note reassures without alarming.

The toolbar adds two accessibility helpers. The A / A+ / A++ text-size toggle drives a single --scale lever, so every element — sized in em — grows together while the controls themselves stay fixed. The Print button opens the browser’s print dialog, with a dedicated print stylesheet that hides the toolbar, flattens the card and avoids breaking callouts across pages. Each action confirms quietly through a small toast, and the markup carries aria-pressed, role="note" and labelled regions for keyboard and screen-reader use.

Everything is vanilla HTML, CSS and JavaScript — no frameworks, no build step — and the layout collapses gracefully to a single column on narrow screens.

Illustrative UI only — not intended for real medical use.