ХОБЛ Денсаулық мектебі: қазақ тіліндегі курс (7 сабақ + 6 ескертпі парақ + инфографика)

2026-06-30 08:05:13 +00:00 · 2026-06-30 08:05:13 +00:00 · c5cbc96319
commit c5cbc96319
parent 6fd0ce3c03
3 changed files with 1052 additions and 0 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@ -0,0 +1,173 @@
+<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
+# Vibe42 — учебная песочница для лендингов
+
+Workspace юзера `Amanbayeva_Nazym`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
+
+---
+
+## 🎯 ТВОЯ РОЛЬ
+
+Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
+1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/Amanbayeva_Nazym/<repo>/`,
+2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
+
+Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
+
+---
+
+## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
+
+1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
+2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
+   - Промо хобби (фотография / музыка / спорт)
+   - Резюме / personal page с контактами
+   - Афиша мероприятия (концерт, день рождения, мастер-класс)
+   - Меню заведения / прайс услуг
+   - Лендинг продукта или будущего проекта (waitlist)
+3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
+4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
+
+---
+
+## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
+
+Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
+
+Скажи: «Давай определимся, я задам 3 коротких вопроса:
+1. Это для тебя лично, для проекта/бизнеса, или для события?
+2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
+3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
+
+После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
+
+---
+
+## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ
+
+| Запрос | Что делаем вместо |
+|--------|-------------------|
+| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram |
+| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) |
+| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium |
+| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp |
+| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) |
+| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` |
+
+**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут.
+
+---
+
+## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
+
+### A — Промо продукта/услуги
+**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
+
+### B — Personal / резюме
+**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
+
+### C — Афиша мероприятия
+**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
+
+### D — Меню / прайс
+**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
+
+### E — Waitlist для будущего проекта
+**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
+
+Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
+
+---
+
+## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
+
+Как только готов первый рабочий вариант (даже грубый):
+
+1. **Сразу запушь:**
+   ```bash
+   git add -A
+   git commit -m "v1"
+   git push origin HEAD:pages
+   ```
+2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**:
+   > 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/Amanbayeva_Nazym/<repo>/**
+3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?»
+4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push.
+
+---
+
+## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
+
+1. **Только статика — HTML + CSS + JS в браузере.**
+2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis.
+3. **Никакой аутентификации / OAuth / JWT.**
+4. **Никакого Docker, nginx, sudo, системных настроек.**
+5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN.
+6. **НИКОГДА `git init` в workspace root (`/workspaces/Amanbayeva_Nazym`)** — это папка-контейнер юзера, не репозиторий.
+
+---
+
+## ✅ ВСЕГДА работай через `./new-project`
+
+Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
+
+```bash
+cd /workspaces/Amanbayeva_Nazym
+./new-project NAME    # создаёт repo в Gitea + клонит локально в ./NAME/
+cd NAME
+# теперь создавай index.html / style.css / script.js внутри ./NAME
+```
+
+`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`.
+
+---
+
+## 🌐 Git и публикация
+
+**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
+
+- Профиль юзера: https://git.vibe42.kz/Amanbayeva_Nazym
+- Pages (живые лендинги): https://pages.git.vibe42.kz/Amanbayeva_Nazym/<repo>/
+- Креды уже в `/workspaces/Amanbayeva_Nazym/.git-credentials` — git push/clone работают без пароля
+- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно
+
+### Опубликовать лендинг
+
+```bash
+git add -A
+git commit -m "site"
+git push origin HEAD:pages
+```
+
+Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно.
+
+---
+
+## 🔧 Когда что-то идёт не так
+
+- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
+- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
+- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
+- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
+
+---
+
+## ❌ Чего НЕ делать НИКОГДА
+
+- ❌ `git init` в workspace root
+- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
+- ❌ Создавать `server.js` / `app.py` / `main.go` как backend
+- ❌ Использовать `gh` CLI или GitHub API
+- ❌ Вызывать Gitea Pages-API (его нет)
+- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
+- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
+- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
+- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
+- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
+- ❌ Говорить «это сложно» — переформулируй в простое
+- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
+
+---
+
+## 🎨 design.md
+
+Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
--- a/design.md
+++ b/design.md
@ -0,0 +1,110 @@
+<!-- vibe42-design-version: v1-2026-06-01 -->
+# Design system — Vibe42 песочница
+
+Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого.
+
+## Палитра
+
+| Token | Hex | Использование |
+|-------|-----|---------------|
+| `--ink` | `#0F1218` | Тёмный фон / основной текст |
+| `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) |
+| `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов |
+| `--white` | `#FFFFFF` | Основной фон |
+| `--gray-500` | `#5B6573` | Вторичный текст |
+| `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны |
+
+## Типографика
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+```
+
+| Уровень | Размер | Вес | line-height |
+|---------|--------|-----|-------------|
+| h1 (hero) | 56px | 800 | 1.05 |
+| h2 (section) | 36px | 700 | 1.15 |
+| h3 | 22px | 700 | 1.3 |
+| body | 17px | 400 | 1.6 |
+| small | 14px | 400 | 1.5 |
+
+На мобиле — h1 уменьши до 36px, h2 до 28px.
+
+## Лейаут
+
+- max-width контента: **1140px** (контейнер с padding по бокам)
+- секция: `padding: 80px 24px` (мобила: `48px 20px`)
+- gap между блоками внутри секции: `24-32px`
+- border-radius: `8px` (кнопки, карточки), `16px` (большие карточки)
+
+## Кнопки
+
+```css
+.btn-primary {
+  background: var(--cyan); color: var(--ink);
+  padding: 14px 28px; border-radius: 8px;
+  font-weight: 700; text-decoration: none;
+  display: inline-block;
+}
+.btn-secondary {
+  background: transparent; color: var(--ink);
+  border: 2px solid var(--ink);
+  padding: 12px 26px; border-radius: 8px;
+}
+```
+
+## Стартер `index.html`
+
+```html
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Мой проект</title>
+<style>
+:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
+.container{max-width:1140px;margin:0 auto;padding:80px 24px}
+.hero{background:var(--ink);color:var(--white)}
+.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
+.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
+.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
+.btn:hover{background:#1be5ff}
+.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
+.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
+@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
+</style>
+</head>
+<body>
+<section class="hero">
+  <div class="container">
+    <h1>Заголовок проекта</h1>
+    <p>Подзаголовок — пара предложений о чём это.</p>
+    <a class="btn" href="#section">Начать</a>
+  </div>
+</section>
+<section id="section" class="section">
+  <div class="container">
+    <h2>Секция</h2>
+    <div class="card">Контент карточки.</div>
+    <div class="card">Контент карточки.</div>
+  </div>
+</section>
+</body>
+</html>
+```
+
+## Чем НЕ пользоваться
+
+- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
+- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
+- jQuery — vanilla JS более чем достаточно
+
+## Чем МОЖНО (если очень надо)
+
+- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
+- **Lottie animations через CDN**
+- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
+- **Шрифты Google Fonts через `<link>`** в head
--- a/index.html
+++ b/index.html
@ -0,0 +1,769 @@
+<!DOCTYPE html>
+<html lang="kk">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>ХОБЛ-мен науқастарға арналған Денсаулық мектебі · оқу курсы</title>
+<meta name="description" content="ПМСП денсаулық мектептеріне арналған ХОБЛ-мен науқастарға арналған оқу курсы. Өзін-өзі басқарудың барлық аспектілері бойынша 7 сабақ.">
+<style>
+:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--gray-200:#E4E8EE;--green:#16C784;--green-50:#E6F9F0;--amber:#F5A623;--amber-50:#FDF3E2;--red:#EA3943;--red-50:#FCEAEC}
+*{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth}
+body{font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:#f7f8fa}
+a{color:inherit}
+.topbar{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.15)}
+.topbar-inner{max-width:1040px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
+.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
+.brand .mk{width:32px;height:32px;border-radius:8px;background:rgba(0,229,255,.14);display:grid;place-items:center;color:var(--cyan);font-size:17px;border:1px solid rgba(0,229,255,.3)}
+.progress-wrap{display:flex;align-items:center;gap:12px;min-width:220px;flex:1;max-width:340px}
+.progress-track{flex:1;height:9px;background:#1a1f2a;border-radius:6px;overflow:hidden}
+.progress-fill{height:100%;background:var(--cyan);width:0;transition:width .3s}
+.progress-txt{font-size:13px;color:#9aa3b2;white-space:nowrap;font-weight:600}
+.wrap{max-width:1040px;margin:0 auto;padding:0 20px 80px}
+.hero{background:var(--ink);color:#fff;border-radius:20px;padding:48px 40px;margin:24px 0;position:relative;overflow:hidden}
+.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 85% -10%,rgba(0,229,255,.2),transparent 60%);pointer-events:none}
+.hero>*{position:relative}
+.hero .eyebrow{display:inline-block;background:rgba(0,229,255,.12);color:var(--cyan);padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:18px;border:1px solid rgba(0,229,255,.25)}
+.hero h1{font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px}
+.hero p.lead{font-size:18px;color:#9aa3b2;max-width:620px;margin-bottom:24px}
+.hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:24px}
+.hero-stats .s .n{font-size:30px;font-weight:800;color:var(--cyan);line-height:1}
+.hero-stats .s .l{font-size:13px;color:#9aa3b2;margin-top:4px}
+.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
+.btn{display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:var(--ink);padding:13px 24px;border-radius:9px;font-weight:700;text-decoration:none;font-size:16px;border:none;cursor:pointer;font-family:inherit}
+.btn:hover{background:#1bf0ff}
+.btn.ghost{background:transparent;color:#fff;border:2px solid #3a4150}
+.btn.ghost:hover{background:#1a1f2a}
+.overview{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:26px;margin-bottom:24px}
+.overview h2{font-size:22px;font-weight:800;margin-bottom:14px}
+.overview p{color:var(--gray-500);margin-bottom:16px}
+.overview ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
+.overview li{padding-left:24px;position:relative;color:var(--ink);font-size:15px}
+.overview li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
+.nav-card{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:18px 22px;margin-bottom:24px}
+.nav-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin-bottom:12px}
+.lessons-nav{display:flex;gap:8px;flex-wrap:wrap}
+.lessons-nav a{text-decoration:none;background:var(--gray-100);padding:7px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-500)}
+.lessons-nav a:hover{background:var(--cyan-50);color:var(--ink)}
+.lesson{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:30px;margin-bottom:22px;scroll-margin-top:90px}
+.lesson.done{border-color:var(--green);box-shadow:0 0 0 3px var(--green-50)}
+.lesson-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
+.lnum{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--cyan);display:grid;place-items:center;font-weight:800;font-size:18px}
+.lesson.done .lnum{background:var(--green);color:#fff}
+.lesson-head h2{font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
+.lmeta{font-size:14px;color:var(--gray-500);margin-top:3px}
+.done-label{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--gray-500);cursor:pointer;user-select:none}
+.done-label input{width:20px;height:20px;accent-color:var(--green);cursor:pointer}
+.lesson.done .done-label{color:var(--green)}
+.goal{background:var(--cyan-50);border-left:4px solid var(--cyan);padding:13px 16px;border-radius:8px;font-size:15px;margin-bottom:22px}
+.goal b{color:var(--ink)}
+.lesson h3{font-size:17px;font-weight:700;margin:22px 0 10px;display:flex;align-items:center;gap:8px}
+.lesson p{margin-bottom:12px;color:var(--ink)}
+.lesson ul{margin:0 0 14px;padding-left:4px;list-style:none}
+.lesson ul li{position:relative;padding:5px 0 5px 26px;color:var(--gray-500);font-size:15.5px}
+.lesson ul li::before{content:"•";position:absolute;left:8px;color:var(--cyan);font-weight:800;font-size:20px;line-height:1}
+.lesson ul li b{color:var(--ink)}
+.lesson ul li ul{margin:6px 0 2px}
+.lesson ul li ul li{padding-left:22px;font-size:14.5px}
+.lesson ul li ul li::before{content:"→";left:0;color:var(--gray-500);font-size:14px}
+.tip{background:var(--green-50);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:14.5px}
+.tip.warn{background:var(--amber-50)}
+.tip.danger{background:var(--red-50)}
+.tip b{color:var(--ink)}
+.checklist{list-style:none;display:grid;gap:8px}
+.checklist label{display:flex;align-items:flex-start;gap:10px;background:var(--gray-100);padding:11px 14px;border-radius:9px;font-size:15px;cursor:pointer}
+.checklist input{margin-top:3px;width:18px;height:18px;accent-color:var(--cyan)}
+.checklist input:checked + span{text-decoration:line-through;color:var(--gray-500)}
+.quiz details{border:1px solid var(--gray-200);border-radius:10px;padding:13px 16px;margin-bottom:8px;overflow:hidden}
+.quiz details summary{font-weight:600;font-size:15px;cursor:pointer;list-style:none}
+.quiz details summary::-webkit-details-marker{display:none}
+.quiz details summary::after{content:"жауап";float:right;font-size:12px;color:var(--cyan);font-weight:700;background:var(--cyan-50);padding:3px 9px;border-radius:6px}
+.quiz details[open] summary::after{content:"жасыру"}
+.quiz details .ans{margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-100);font-size:14.5px;color:var(--gray-500)}
+.quiz details .ans b{color:var(--green)}
+.hw{background:var(--ink);color:#fff;border-radius:12px;padding:16px 18px;font-size:15px}
+.hw b{color:var(--cyan)}
+.ztbl{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:14px}
+.ztbl th{text-align:left;background:var(--gray-100);padding:9px 11px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-500)}
+.ztbl td{padding:10px 11px;border-bottom:1px solid var(--gray-100)}
+.ztr-r td:first-child{border-left:4px solid var(--red)}
+.ztr-y td:first-child{border-left:4px solid var(--amber)}
+.ztr-g td:first-child{border-left:4px solid var(--green)}
+.footer{padding:32px 0;border-top:1px solid var(--gray-200);color:var(--gray-500);font-size:14px;text-align:center}
+.certificate{background:linear-gradient(135deg,#fff,var(--cyan-50));border:2px dashed var(--cyan);border-radius:16px;padding:30px;text-align:center;margin:24px 0}
+.certificate h2{font-size:22px;font-weight:800;margin-bottom:8px}
+.certificate p{color:var(--gray-500);font-size:15px}
+.certificate.hidden{display:none}
+.handouts{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:26px;margin-bottom:24px}
+.handouts h2{font-size:22px;font-weight:800;margin-bottom:6px}
+.handouts>p{color:var(--gray-500);font-size:15px;margin-bottom:18px}
+.handout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+.handout-card{border:1px solid var(--gray-200);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
+.handout-card .hic{font-size:28px}
+.handout-card h3{font-size:16px;font-weight:700;margin:0}
+.handout-card p{font-size:13.5px;color:var(--gray-500);margin:0;flex:1}
+.handout-card .btn{align-self:flex-start;font-size:14px;padding:9px 16px}
+.handout-template{display:none}
+@media(max-width:760px){
+  .hero{padding:32px 22px}.hero h1{font-size:26px}
+  .overview ul{grid-template-columns:1fr}.lesson{padding:22px}.done-label{margin-left:0;width:100%}
+  .handout-grid{grid-template-columns:1fr}
+}
+</style>
+</head>
+<body>
+
+<header class="topbar">
+  <div class="topbar-inner">
+    <div class="brand"><span class="mk">⚤</span>ХОБЛ мектебі</div>
+    <div class="progress-wrap">
+      <div class="progress-track"><div class="progress-fill" id="pfill"></div></div>
+      <div class="progress-txt" id="ptxt">0/7</div>
+    </div>
+  </div>
+</header>
+
+<div class="wrap">
+
+<section class="hero">
+  <span class="eyebrow">🎓 Денсаулық мектебі · ПМСП</span>
+  <h1>ХОБЛ-мен науқастарға арналған Денсаулық мектебі</h1>
+  <p class="lead">Өзін-өзі басқарудың барлық аспектілері бойынша 7 сабақтан тұратын оқу курсы. Сырқаттық обструктивті өкпе ауруы (ХОБЛ) бар науқасқа ауруды бақылап, асқынуларды азайтып, өмір сапасын сақтауға көмектеседі.</p>
+  <div class="hero-stats">
+    <div class="s"><div class="n">7</div><div class="l">сабақ</div></div>
+    <div class="s"><div class="n">45–60 мин</div><div class="l">әр сабақ</div></div>
+    <div class="s"><div class="n">0 ₸</div><div class="l">тегін</div></div>
+  </div>
+  <div class="hero-cta">
+    <a class="btn" href="#l1">Оқуды бастау</a>
+    <a class="btn ghost" href="#lessons">Курс бағдарламасы</a>
+  </div>
+</section>
+
+<section class="overview">
+  <h2>Сіз не үйренесіз</h2>
+  <p>Курстан кейін ауруды өзіңіз бақылай аласыз, дәрілерді дұрыс қабылдайсыз, асқынуды дер кезінде таниды және жоспар бойынша әрекет етесіз.</p>
+  <ul>
+    <li>Ауруыңызды және сатыларын түсінесіз</li>
+    <li>Көрсеткіштерді өлшеп, күнделік жүргізесіз</li>
+    <li>Ингаляция техникасын меңгересіз</li>
+    <li>Тыныс алу гимнастикасын жасайсыз</li>
+    <li>Тамақтанып, темекіні тастайсыз</li>
+    <li>Асқыну кезінде «бақдаршам» бойынша әрекет етесіз</li>
+    <li>Белсенділік пен көңіл-күйді сақтайсыз</li>
+  </ul>
+</section>
+
+<section class="nav-card" id="lessons">
+  <h3>Бағдарлама · 7 сабақ</h3>
+  <div class="lessons-nav" id="lessonsNav"></div>
+</section>
+
+<!-- =================== 1-Сабақ =================== -->
+<section class="lesson" id="l1">
+  <div class="lesson-head">
+    <span class="lnum">01</span>
+    <div><h2>ХОБЛ-мен танысу: өкпеде не болады</h2><div class="lmeta">45 мин · аурудың негіздері</div></div>
+    <label class="done-label"><input type="checkbox" data-l="1"> Өтілді</label>
+  </div>
+  <div class="goal">🎯 <b>Мақсаты:</b> ХОБЛ-дің мәнін және асқыну себептерін түсініп, емге саналы түрде қатысу.</div>
+  <h3>📋 Мазмұны</h3>
+  <ul>
+    <li><b>ХОБЛ дегеніміз не.</b> Тыныс жолдарының созылмалы қабынуы бронхтардың қайтарылмас тарылуына және альвеолалардың бұзылуына (эмфизема) әкеледі. Ауа нашар өтеді, өкпе «іскереді», ентігу пайда болады.</li>
+    <li><b>Негізгі себептері:</b>
+      <ul>
+        <li>Темекі шегу — жағдайдың ≈ 80–90%-ы (бас фактор!)</li>
+        <li>Пассивті шегу, тұрмыстық және көше түтіні</li>
+        <li>Кәсіби зияндылықтар: шаң, химикаттар, булар</li>
+        <li>Бөлме ішіндегі ауаның ластануы (биоотын)</li>
+        <li>Генетика: α1-антитрипсин тапшылығы (сирек)</li>
+      </ul>
+    </li>
+    <li><b>Негізгі белгілері:</b> созылмалы жөтел, қақырық, ентігу (алдымен жүктемеде, кейін тыныштықта), ысқырықты тыныс, шаршағыштық.</li>
+    <li><b>ХОБЛ астадан айырмашылығы:</b> астада бронх тарылуы қайтымды, ХОБЛ-де — негізінен қайтымсыз. Сондықтан ХОБЛ-ді «емдеп» болмайды, бірақ бақылап болады.</li>
+    <li><b>Сатылары мен топтары.</b> 1–4 сатылары спирометриядағы ОФВ₁ бойынша анықталады. A–D топтары — белгілері (CAT, mMRC) және асқыну саны бойынша.</li>
+    <li><b>Ауру неліктен үдеуде</b> және қалай баяулату: темекіні тастау, тұрақты негізгі ем, егілу, реабилитация.</li>
+  </ul>
+  <div class="tip">💡 <b>Бастысы:</b> ХОБЛ-ді толық емдеуге болмайды, бірақ дұрыс ем және темекіні тастау оны анық баяулатып, өмірді жақсартады.</div>
+  <h3>✅ Тексеру тізімі</h3>
+  <div class="checklist">
+    <label><input type="checkbox"><span>ХОБЛ дегенді және ентігу неліктен пайда болғанын білемін</span></label>
+    <label><input type="checkbox"><span>Өз сатымды/тобымды білемін (дәрігерден сұрау)</span></label>
+    <label><input type="checkbox"><span>Темекіні тастау — басты ем екенін түсінемін</span></label>
+  </div>
+  <h3>❓ Өзіндік тексеру</h3>
+  <div class="quiz">
+    <details><summary>1. ХОБЛ-нің басты себебі?</summary><div class="ans"><b>Темекі шегу</b> — жағдайлардың 80–90%-ын құрайды.</div></details>
+    <details><summary>2. ХОБЛ-ді толық емдеп бола ма?</summary><div class="ans">Жоқ, бронх өзгерістері <b>қайтымсыз</b>. Бірақ ауруды бақылап, баяулатуға болады.</div></details>
+    <details><summary>3. ХОБЛ астадан айырмашылығы неде?</summary><div class="ans">Астада бронх тарылуы <b>қайтымды</b>, ХОБЛ-де — негізінен жоқ.</div></details>
+  </div>
+  <h3>🏠 Үй тапсырмасы</h3>
+  <div class="hw">📔 <b>Белгілер күнделігін</b> бастаңыз: бір апта бойы жөтел, қақырық, ентігу және оны қоздыратындарды жазыңыз. Келесі сабақта дәрігермен талқылаймыз.</div>
+</section>
+
+<!-- =================== 2-Сабақ =================== -->
+<section class="lesson" id="l2">
+  <div class="lesson-head">
+    <span class="lnum">02</span>
+    <div><h2>Өзіндік бақылау: өлшеу, шкалалар, күнделік</h2><div class="lmeta">50 мин · ауруды қалай қадағалау</div></div>
+    <label class="done-label"><input type="checkbox" data-l="2"> Өтілді</label>
+  </div>
+  <div class="goal">🎯 <b>Мақсаты:</b> ХОБЛ-ді аспаптық бақылап, нашарлауды дер кезінде байқауды үйрену.</div>
+  <h3>📋 Мазмұны</h3>
+  <ul>
+    <li><b>Пульсоксиметрия (SpO₂).</b> Саусаққа киілетін шағын аспап қандағы оттекті көрсетеді.
+      <ul><li>Қалыпты ≥ 95%</li><li>90–94% — назар аймағы</li><li>&lt;90% — жедел</li></ul>
+      Тыныштықта, жылы қолмен, тырнақтағы лаксыз өлшеңіз.</li>
+    <li><b>Спирометрия (ОФВ₁) және пикфлоуметрия (ПСВ).</b> Өкпе функциясын бағалайды. Ауруханада жасалады; пикфлоуметрді үйде ұстауға болады.</li>
+    <li><b>CAT сауалнамасы</b> — ХОБЛ-нің өмірге әсерін бағалайтын 8 сұрақ (жөтел, қақырық, ентігу, белсенділік, ұйқы, энергия). Қорытынды 0–40: ≤9 — төмен әсер, 10–20 — орташа, &gt;20 — жоғары. ≥2 баллға өсу — нашарлау сигналы.</li>
+    <li><b>Ентігу шкаласы mMRC</b> (0–4): «ентігу жоқ»-тан «үйден шыға алмаймын»-ға дейін.</li>
+    <li><b>Науқас күнделігі.</b> Не жазу керек: SpO₂, АҚ, ЖЖС, тыныс жиілігі, ентігу, қақырық, дәрілерді қабылдау. Жиілігі — күніне 2–3 рет (таңертең және кешке).</li>
+    <li><b>Тәуекел аймақтары («бақдаршам»):</b></li>
+  </ul>
+  <table class="ztbl">
+    <tr><th>Көрсеткіш</th><th>🟢 Жасыл</th><th>🟡 Сары</th><th>🔴 Қызыл</th></tr>
+    <tr class="ztr-g"><td>SpO₂</td><td>≥95%</td><td>—</td><td>—</td></tr>
+    <tr class="ztr-y"><td>SpO₂</td><td>—</td><td>90–94%</td><td>—</td></tr>
+    <tr class="ztr-r"><td>SpO₂</td><td>—</td><td>—</td><td>&lt;90%</td></tr>
+  </table>
+  <div class="tip warn">⚠️ <b>Қашан дабыл қағу:</b> SpO₂ &lt;90%, тыныштықта ентігудің күшеюі, іріңді қақырық, қызба — қызыл аймаққа өту.</div>
+  <h3>✅ Тексеру тізімі</h3>
+  <div class="checklist">
+    <label><input type="checkbox"><span>Пульсоксиметрмен SpO₂ дұрыс өлшей аламын</span></label>
+    <label><input type="checkbox"><span>«Бақдаршам» бойынша өз аймағымды білемін</span></label>
+    <label><input type="checkbox"><span>Күніне 2 рет күнделік жүргіземін</span></label>
+  </div>
+  <h3>❓ Өзіндік тексеру</h3>
+  <div class="quiz">
+    <details><summary>1. Қалыпты SpO₂ қанша?</summary><div class="ans"><b>≥ 95%</b>. 90%-тан төмен — қызыл аймақ.</div></details>
+    <details><summary>2. CAT сауалнамасында қанша балл және өсу не білдіреді?</summary><div class="ans">0-ден 40-қа дейін. <b>≥2 баллға</b> өсу — мүмкін нашарлау.</div></details>
+    <details><summary>3. Күнделікті қанша жиі толтыру керек?</summary><div class="ans"><b>Күніне 2–3 рет</b> — таңертең және кешке, сондай-ақ нашарлағанда.</div></details>
+  </div>
+  <h3>🏠 Үй тапсырмасы</h3>
+  <div class="hw">📊 <b>Науқас күнделігін</b> бір апта толтырыңыз. Өзіңіздің қалыпты SpO₂ және CAT мәндерін жазыңыз — бұл сіздің «базалық сызығыңыз».</div>
+</section>
+
+<!-- =================== 3-Сабақ =================== -->
+<section class="lesson" id="l3">
+  <div class="lesson-head">
+    <span class="lnum">03</span>
+    <div><h2>Дәрілер және дұрыс ингаляция</h2><div class="lmeta">60 мин · ем және техника</div></div>
+    <label class="done-label"><input type="checkbox" data-l="3"> Өтілді</label>
+  </div>
+  <div class="goal">🎯 <b>Мақсаты:</b> ем схемасын түсініп, ингаляторды қателеспей пайдалануды меңгеру.</div>
+  <h3>📋 Мазмұны</h3>
+  <ul>
+    <li><b>Дәрі топтары:</b>
+      <ul>
+        <li><b>Бронхолитиктер</b> — бронхтарды кеңейтеді. Қысқа әсерлі (сальбутамол, фенотерол, ипратропий) — жедел көмек. Ұзақ әсерлі (ЛАМА — тиотропий т.б.; ЛАБА — индакатерол т.б.) — негізгі ем, тұрақты.</li>
+        <li><b>ИГКС</b> (ингаляциялық глюкокортикостероидтар) — қабынуды басады, әдетте ауыр ағымда қоспада.</li>
+        <li><b>Қоспалы:</b> ИГКС/ЛАБА, ЛАМА/ЛАБА, үштік терапия (ИГКС/ЛАБА/ЛАМА).</li>
+        <li><b>Басқалар:</b> рофлумиласт (ФДЭ-4), муколитиктер (N-ацетилцистеин), қажет болса — О₂-терапия.</li>
+      </ul>
+    </li>
+    <li><b>Негізгі vs құтқару терапиясы.</b> Негізгі — күн сайын, жақсы болғанда да (тастамау!). Құтқару — ентігу кезінде қажет бойынша.</li>
+    <li><b>Ингалятор түрлері:</b> ДАИ (дозалық аэрозоль), ДПИ (ұнтақты), SMI (жұмшақ тұман), небулайзер.</li>
+    <li><b>Ингаляция техникасы (ДАИ) қадам бойынша:</b>
+      <ul>
+        <li>Шайқау, қалпақшаны алу</li>
+        <li>Тыныш дем шығару (ингалятордан тыс)</li>
+        <li>Мундштукті ерінмен қамау</li>
+        <li>Баяу дем алуды бастап, бір мезгілде баллонды басу</li>
+        <li>Дем алуды 3–5 сек жалғастыру, тынысты 10 сек ұстау</li>
+        <li>ИГКС-тен кейін — ауызды сумен шайкау</li>
+      </ul>
+    </li>
+    <li><b>Жиі қателіктер:</b> шайқамады; дем алуды тартылып алды; тынысты ұстамады; ауызды шайқамады (кандидоз қаупі); негізгі мен құтқаруды шатастырады.</li>
+    <li><b>Спейсер</b> — ДАИ-ға арналған камера-насадка: техниканы оңайлатып, жанама әсерлерін азайтады. Барлығына ұсынылады.</li>
+    <li><b>Адгеренттілік.</b> «Жақсы болып жүр» деп негізгі емді тоқтатуға болмайды — бұл асқынуға апарыды.</li>
+  </ul>
+  <div class="tip">💡 <b>Маңызды:</b> қабылдауға барлық ингаляторларыңызды әкеліңіз — медбике техникаңызды тексереді және қажет болса қайта көрсетеді.</div>
+  <h3>✅ Тексеру тізімі</h3>
+  <div class="checklist">
+    <label><input type="checkbox"><span>Қай ингалятор негізгі, қайсысы құтқару екенін білемін</span></label>
+    <label><input type="checkbox"><span>Ингаляция техникамды медбикемен тексердім</span></label>
+    <label><input type="checkbox"><span>Негізгі емді өткізіп алмаймын</span></label>
+    <label><input type="checkbox"><span>ИГКС-тен кейін ауызымды шайкам</span></label>
+  </div>
+  <h3>❓ Өзіндік тексеру</h3>
+  <div class="quiz">
+    <details><summary>1. Қай дәріні тұрақты, қайсысын қажет бойынша қабылдайды?</summary><div class="ans"><b>Негізгі (ЛАМА/ЛАБА/қоспалар) — тұрақты</b>, құтқарушы (сальбутамол) — ентігу кезінде қажет бойынша.</div></details>
+    <details><summary>2. ИГКС-тен кейін ауызды неге шайқайды?</summary><div class="ans">Ауыз қуысындағы <b>кандидозды (ауыздың ішіңірауын) және дауыстың қарлығуын</b> алдын алу үшін.</div></details>
+    <details><summary>3. Жеңілдегенде негізгі емді тоқтатуға бола ма?</summary><div class="ans"><b>Жоқ.</b> Негізгі емді тоқтату белгілердің қайтып келуіне және асқынуға әкеледі.</div></details>
+  </div>
+  <h3>🏠 Үй тапсырмасы</h3>
+  <div class="hw">🎥 Ингаляторды қалай пайдаланатыныңызды телефонға түсіріп, медбикеге көрсетіңіз. Барлық дәрілеріңізді қабылдау уақытымен тізіңіз.</div>
+</section>
+
+<!-- =================== 4-Сабақ =================== -->
+<section class="lesson" id="l4">
+  <div class="lesson-head">
+    <span class="lnum">04</span>
+    <div><h2>Тыныс алу гимнастикасы және дене белсенділігі</h2><div class="lmeta">50 мин · реабилитация</div></div>
+    <label class="done-label"><input type="checkbox" data-l="4"> Өтілді</label>
+  </div>
+  <div class="goal">🎯 <b>Мақсаты:</b> ентігуді азайтып, тыныс алу бұлшықеттерін мықтыландыру және жүктемеге төзімділікті арттыру.</div>
+  <h3>📋 Мазмұны</h3>
+  <ul>
+    <li><b>Көкбауырлық (диафрагмалық) тыныс алу.</b> Бір қол іште, бірі кеудеде. Мұрынмен дем алғанда — іш ұлғаяды; ауызбен дем шығарғанда — іш кіреді. Кеуде дерлік қозғалмайды.</li>
+    <li><b>Қысылған ерінмен тыныс алу.</b> Мұрынмен 2 сек дем алыңыз, ерінді «түтікше» жасап 4 сек дем шығарыңыз. Дем шығаруды ұзартыңыз. Ентігу кезіндегі №1 әдіс.</li>
+    <li><b>Жөтелу техникалары:</b> «хюффинг» — ауызын ашып күшті дем шығару, қақырықты көтеру үшін; бақыланатын жөтел — терең дем алғаннан кейін 2–3 жөтел толқыны.</li>
+    <li><b>Ентігуді жеңілдететін қалыптар:</b> алға иіліп, қолмен тіреліп отыру (ортопноэ); үстелге немесе қабырғаға сүйеніп тұру.</li>
+    <li><b>Дене белсенділігі.</b> Жүру — басты жаттығу. Ыңғайлы қарқынмен және қашықтықтан бастап, бірте-бірте арттырыңыз. Қол/аяққа жеңіл күш жаттығуларын қосыңыз.</li>
+    <li><b>Жүктемені дозалау:</b>
+      <ul>
+        <li>«Сөйлесу тесті»: жүктеме кезінде сөйлесе алсаңыз — қарқын лайықты; ентіксеңіз — төмендетіңіз.</li>
+        <li>Pacing: үзіліс жасаңыз, тапсырманы бөліңіз, асықпаңыз.</li>
+      </ul>
+    </li>
+    <li><b>Өкпе реабилитациясы</b> — 6–8 апталық бағдарлама (жаттығулар + оқыту + тамақтану). Өте тиімді: ентігу мен госпитализацияны азайтады. Бағыт сұраңыз.</li>
+  </ul>
+  <div class="tip">💡 Тұрақтылық интенсивтіліктен маңыздырақ: <b>күніне 15–20 мин гимнастика және 20–30 мин жүру</b> нәтиже береді.</div>
+  <h3>✅ Тексеру тізімі</h3>
+  <div class="checklist">
+    <label><input type="checkbox"><span>Ентігу кезінде қысылған ерінмен тыныс аламын</span></label>
+    <label><input type="checkbox"><span>Гимнастиканы күніне 3–4 рет жасаймын</span></label>
+    <label><input type="checkbox"><span>Күн сайын кемінде 20 мин серуендеймін</span></label>
+    <label><input type="checkbox"><span>Қарқын үшін «сөйлесу тестін» қолданамын</span></label>
+  </div>
+  <h3>❓ Өзіндік тексеру</h3>
+  <div class="quiz">
+    <details><summary>1. Ентігу кезінде алдымен не істеу керек?</summary><div class="ans"><b>Қысылған ерінмен тыныс алу</b>: мұрынмен 2 сек дем алу, ерінмен 4 сек дем шығару.</div></details>
+    <details><summary>2. «Сөйлесу тесті» дегеніміз не?</summary><div class="ans">Егер жүктеме кезінде <b>сөйлесе алсаңыз</b> — қарқын қалыпты; ентіксеңіз — төмендетіңіз.</div></details>
+    <details><summary>3. Өкпе реабилитациясы бағдарламасы қанша уақытқа созылады?</summary><div class="ans"><b>6–8 апта</b>. Ентігу мен госпитализацияны азайтады.</div></details>
+  </div>
+  <h3>🏠 Үй тапсырмасы</h3>
+  <div class="hw">🏃 <b>Күндік кешенді</b> құрастырыңыз: 3 рет тыныс алу гимнастикасы (әрқайсысы 5–10 мин) + сөйлесу тесті бойынша бір серуен. Қашықтық пен күйді күнделікке жазыңыз.</div>
+</section>
+
+<!-- =================== 5-Сабақ =================== -->
+<section class="lesson" id="l5">
+  <div class="lesson-head">
+    <span class="lnum">05</span>
+    <div><h2>Тамақтану, темекіні тастау, егілу, триггерлер</h2><div class="lmeta">50 мин · факторларды жою</div></div>
+    <label class="done-label"><input type="checkbox" data-l="5"> Өтілді</label>
+  </div>
+  <div class="goal">🎯 <b>Мақсаты:</b> өзгертілуге болатын тәуекел факторларын жойып, организмді мықтыландыру.</div>
+  <h3>📋 Мазмұны</h3>
+  <ul>
+    <li><b>ХОБЛ кезіндегі тамақтану.</b> Тамақты шайнап қорыту — оттекті қажет ететін жұмыс, сондықтан ХОБЛ-де тамақ шаршатады.
+      <ul>
+        <li><b>Жиі, шағын порциялармен</b> жеңіз (4–5 рет)</li>
+        <li>Жеткілікті <b>ақуыз</b> (1–1,5 г/кг): ет, балық, жұмыртқа, сүт</li>
+        <li>Салмақ төмендегенде — калориялы тағамдар (жаңғақ, май, ірімшік)</li>
+        <li>Ісіктерде — тұзды азайтыңыз; дәрігер шектемесе шөл бойынша ішіңіз</li>
+        <li>D дәрумені — тапшылықта (талдау бойынша)</li>
+      </ul>
+    </li>
+    <li><b>Темекіні тастау — басты шаралардың бірі.</b> Кез келген сатыда ауруды баяулатады.
+      <ul>
+        <li>Никотинді алмастыру терапиясы: жапсырма, сағыз, кәмпит</li>
+        <li>Дәрілер: варениклин, бупропион (рецепт бойынша)</li>
+        <li>Туыстардың қолдауы, «бір сигаретадан» бас тарту, шегу триггерлерін жою</li>
+        <li>Үйде және көлікте пассивті шегуден аулақ болыңыз</li>
+      </ul>
+    </li>
+    <li><b>Егілу:</b>
+      <ul>
+        <li><b>Тұмауға қарсы</b> — жыл сайын, күзде</li>
+        <li><b>Пневмококкқа қарсы</b> — схема бойынша</li>
+        <li><b>COVID-19</b> — ағымдағы күнтізбе бойынша</li>
+      </ul>
+    </li>
+    <li><b>Триггерлер</b> — ентігуді күшейтетіндер: түтін, шаң, өткір иістер, суық ауа, түтін, тұрмыстық химия. Желдетіңіз, суықта маска тағыңыз, түтінді бөлмелерден аулақ болыңыз.</li>
+    <li><b>Инфекциялардың алдын алу:</b> қолды жуу, ЖТВИ маусымында жиналыстардан аулақ болу, ауырғандардың жанынан өтпеу.</li>
+  </ul>
+  <div class="tip danger">🚭 <b>Темекіні тастау</b> — жасай алатын ең тиімді әрекетіңіз. Бүгін ертеңнен гөрі жақсы.</div>
+  <h3>✅ Тексеру тізімі</h3>
+  <div class="checklist">
+    <label><input type="checkbox"><span>Темекіні тастау күні тағайындалды</span></label>
+    <label><input type="checkbox"><span>Тұмау және пневмококкқа қарсы егілдім</span></label>
+    <label><input type="checkbox"><span>Күніне 4–5 рет шағын порциямен, ақуызға назар аударамын</span></label>
+    <label><input type="checkbox"><span>Үйдегі триггерлерді жойдым (түтін, шаң, химия)</span></label>
+  </div>
+  <h3>❓ Өзіндік тексеру</h3>
+  <div class="quiz">
+    <details><summary>1. ХОБЛ-ді баяулатудың ең тиімді емі?</summary><div class="ans"><b>Темекіні тастау</b> — кез келген сатыда.</div></details>
+    <details><summary>2. ХОБЛ-де неге жиі, аз порциямен жеуге кеңес береді?</summary><div class="ans">Өйткені <b>тамақ қабылдау оттекті қажет етеді</b> және шаршатады; шағын порциялар оңай көтеріледі.</div></details>
+    <details><summary>3. ХОБЛ-мен науқасқа қандай егулер қажет?</summary><div class="ans"><b>Тұмау</b> (жыл сайын), <b>пневмококк</b>, <b>COVID-19</b>.</div></details>
+  </div>
+  <h3>🏠 Үй тапсырмасы</h3>
+  <div class="hw">🚭 <b>Темекіні тастау жоспарын</b> құрыңыз (күні, әдістері, қолдау). 3 күн <b>тамақтану күнделігін</b> жүргізіңіз — дәрігермен/нутрициологпен талқылаңыз.</div>
+</section>
+
+<!-- =================== 6-Сабақ =================== -->
+<section class="lesson" id="l6">
+  <div class="lesson-head">
+    <span class="lnum">06</span>
+    <div><h2>Асқынулар: ерте белгілер, әрекет жоспары, қызыл жалаулар</h2><div class="lmeta">60 мин · ең маңызды сабақ</div></div>
+    <label class="done-label"><input type="checkbox" data-l="6"> Өтілді</label>
+  </div>
+  <div class="goal">🎯 <b>Мақсаты:</b> асқынуды тани біліп, госпитализацияны күтпей-ақ жоспар бойынша әрекет ету.</div>
+  <h3>📋 Мазмұны</h3>
+  <ul>
+    <li><b>Асқыну дегеніміз не.</b> Күнделікті ауытқулардан тыс белгілердің кенет нашарлауы. Басты себебі — тыныс алу инфекциялары (≈70–80%): вирустар мен бактериялар.</li>
+    <li><b>Асқынудың ерте белгілері:</b>
+      <ul>
+        <li>Ентігудің күшеюі (қалыптыдан көп)</li>
+        <li>Қақырықтың өзгеруі: көлемі ұлғаю, іріңді/сары-жасыл</li>
+        <li>Жөтелдің күшеюі, ысқырықты тыныс</li>
+        <li>Қызба, әлсіздік</li>
+        <li>Аяқ ісігі, сананың шатасуы (ауыр ағымда)</li>
+      </ul>
+    </li>
+    <li><b>«Бақдаршам» әрекет жоспары</b> — дәрігермен келісіп, көрінетін жерге іліңіз:
+      <ul>
+        <li><b>🟢 Жасыл:</b> әдеттегідей — негізгі ем, күнделік, белсенділік.</li>
+        <li><b>🟡 Сары:</b> SpO₂ 90–94% — құтқарушы, бақылау, медбикемен байланысу.</li>
+        <li><b>🔴 Қызыл:</b> SpO₂ &lt;90% — оттек, бронхолитик, қалып, жедел жәрдем шақыру.</li>
+      </ul>
+    </li>
+    <li><b>Құтқару терапиясы:</b> сальбутамол ± ипратропий ДАИ (2–4 рет) немесе небулайзер арқылы. Құтқарушы әрқашан қолда болуы тиіс.</li>
+    <li><b>Жүйелі ГКС және антибиотиктерді қашан бастау</b> (тек дәрігер жоспары бойынша!): іріңді қақырық + оның көлемі және/немесе ентігу ұлғайғанда. Дозаны және ұзақтығын дәрігер анықтайды.</li>
+    <li><b>Оттектік терапия:</b> дәрігер тағайындаған мақсатты ағыннан аспаңыз. Артық оттек зиянды болуы мүмкін (гиперкапния).</li>
+    <li><b>Қызыл жалаулар — жедел жәрдемді шақырыңыз:</b>
+      <ul>
+        <li>SpO₂ &lt; 88% &gt;5 мин ұсталады немесе ентігу үдейді</li>
+        <li>Тыныштықта ентігу бронхолитиктен кейін 15–20 мин ішінде азаймайды</li>
+        <li>Сананың шатасуы, ерін көгеруі, кеуде ауырсынуы</li>
+        <li>Температура &gt; 38,5 °C ентігудің үдеуімен</li>
+      </ul>
+    </li>
+    <li><b>Телемониторинг:</b> күнделіктегі деректеріңіз дәрігерге барады — ол сары/қызыл аймаққа өтуді көріп, бірінші байланса алады.</li>
+  </ul>
+  <div class="tip danger">🚑 <b>Нашарлауды шыдамаңыз.</b> Жоспар бойынша ерте әрекет госпитализация қаупін азайтады.</div>
+  <h3>✅ Тексеру тізімі</h3>
+  <div class="checklist">
+    <label><input type="checkbox"><span>«Бақдаршам» әрекет жоспары басылған және көрінетін жерде</span></label>
+    <label><input type="checkbox"><span>Құтқарушы ингалятор әрқашан қолда</span></label>
+    <label><input type="checkbox"><span>Асқынудың ерте белгілерін білемін</span></label>
+    <label><input type="checkbox"><span>Жедел жәрдемді қашан шақыратынын білемін</span></label>
+  </div>
+  <h3>❓ Өзіндік тексеру</h3>
+  <div class="quiz">
+    <details><summary>1. ХОБЛ асқынуларының басты себебі?</summary><div class="ans"><b>Тыныс алу инфекциялары</b> (вирустар мен бактериялар) — 70–80%.</div></details>
+    <details><summary>2. Қандай белгілерде жоспар бойынша антибиотиктер басталады?</summary><div class="ans"><b>Іріңді қақырық</b> + оның көлемі және/немесе ентігу ұлғайғанда. Тек дәрігердің тағайындауы бойынша!</div></details>
+    <details><summary>3. Жедел жәрдемді қашан шақыру керек?</summary><div class="ans"><b>SpO₂ &lt;88%</b> &gt;5 мин, тыныштықта ентігу бронхолитиктен кейін басылмаса, сананың шатасуы, көгеру кезінде.</div></details>
+  </div>
+  <h3>🏠 Үй тапсырмасы</h3>
+  <div class="hw">📝 Дәрігермен бірге <b>жеке әрекет жоспарын</b> құрыңыз: аймақ шектері, құтқарушы дозасы, қандай ГКС/антибиотиктерді қашан бастау, медбике мен жедел жәрдем телефоны. Тоңазытқышқа іліңіз.</div>
+</section>
+
+<!-- =================== 7-Сабақ =================== -->
+<section class="lesson" id="l7">
+  <div class="lesson-head">
+    <span class="lnum">07</span>
+    <div><h2>ХОБЛ-мен өмір: психология, туыстар, саяхат, құқықтар</h2><div class="lmeta">45 мин · өмір сапасы</div></div>
+    <label class="done-label"><input type="checkbox" data-l="7"> Өтілді</label>
+  </div>
+  <div class="goal">🎯 <b>Мақсаты:</b> әлеуметтік белсенділікті, көңіл-күйді және аурумен өмір сапасын сақтау.</div>
+  <h3>📋 Мазмұны</h3>
+  <ul>
+    <li><b>Үрей, депрессия және ентігу кезіндегі дабыл.</b> Ентігу қорқытады — қорқыныш пайда болады, ол өз кезегінде ентігуді күшейтеді. Шеңберді үзіңіз: қысылған ерінмен тыныс алу, ортопноэ қалпы, босаңсу техникалары. Тұрақты мұңдылық/үрей болса дәрігерге барыңыз — бұл емделеді.</li>
+    <li><b>Туыстардың қолдауы және өзара көмек топтары.</b> Туыстарыңыз әрекет жоспарыңызды және құтқарушы қайда екенін білсін. Науқастар тобы жалғыздық сезімін азайтады.</li>
+    <li><b>Ұйқы.</b> Бас жағын көтеріңкі, бүйірімен ұйықтау; О₂-терапия тағайындалса — схема бойынша түнде пайдаланыңыз. Қорылдау мен күндізгі ұйқышылдықта дәрігермен СОАС-ты (ұйқыдағы апноэ) талқылаңыз.</li>
+    <li><b>Жыныстық өмір.</b> Шаршамаған уақытты таңдаңыз; аз жүктемелі қалыптар; алдын ала бронхолитик қолданыңыз. Дәрігермен талқылаудан ұялмаңыз.</li>
+    <li><b>Саяхат.</b>
+      <ul>
+        <li>Ұшақта: дәрігермен талқылаңыз, ұшу кезінде оттек қажет пе (SpO₂-ға байланысты)</li>
+        <li>Дәрілер — қол жүгінде, қормен және рецептпен</li>
+        <li>Жолда оттек: портативті концентраторлар (әуекомпаниямен келісіңіз)</li>
+        <li>ХОБЛ-ды қамтитын сақтандыру</li>
+      </ul>
+    </li>
+    <li><b>Қосарлы аурулар.</b> ХОБЛ жиі ЖҚК (жүрек-қантамыр), остеопороз, қант диабеті, саркопениямен (бұлшықет жоғалуы) бірге жүреді. Оларды да дәрігермен бақылаңыз.</li>
+    <li><b>Науқас құқықтары:</b> ПМСП-дегі диспансерлік бақылау, жеңілдік дәрілер (нозология бойынша), реабилитацияға және ауыр ағымда МСЭ-ге бағыт, кеш сатыларда паллиативті көмек.</li>
+    <li><b>Мектеп қорытындысы:</b> басты дағды — дабылдамай, жоспар бойынша әрекет ету. Сіз — өз ем командасыңыздың басты қатысушысыз.</li>
+  </ul>
+  <div class="tip">💚 ХОБЛ — үкім емес. Әрекет жоспары, тұрақты ем және белсенділікпен өмір толық болып қала береді.</div>
+  <h3>✅ Тексеру тізімі</h3>
+  <div class="checklist">
+    <label><input type="checkbox"><span>Үрей/ентігу кезінде босаңсу техникаларын білемін</span></label>
+    <label><input type="checkbox"><span>Туыстарым әрекет жоспарымды біледі</span></label>
+    <label><input type="checkbox"><span>Дәрігермен қосарлы ауруларды және құқықтарды талқыладым</span></label>
+    <label><input type="checkbox"><span>Бір айға арналған өзін-өзі көмек жоспарын құрдым</span></label>
+  </div>
+  <h3>❓ Өзіндік тексеру</h3>
+  <div class="quiz">
+    <details><summary>1. Дабыл мен ентігу үдегенде не істеу керек?</summary><div class="ans"><b>Қысылған ерінмен тыныс алу, ортопноэ қалпы, босаңсу</b>. «Қорқыныш → ентігу» шеңберін үзіңіз.</div></details>
+    <details><summary>2. Саяхатта дәрілерді қайда салу керек?</summary><div class="ans"><b>Қол жүгіне</b>, қормен және рецепт/выпискамен.</div></details>
+    <details><summary>3. ХОБЛ-мен қандай қосарлы аурулар жиі жүреді?</summary><div class="ans"><b>ЖҚК, остеопороз, қант диабеті, саркопения</b> — оларды да бақылайды.</div></details>
+  </div>
+  <h3>🏠 Үй тапсырмасы</h3>
+  <div class="hw">📅 <b>Бір айлық өзін-өзі көмек жоспарын</b> құрыңыз: мақсаттар (тыныс алу гимнастикасы, серуендер, темекіні тастау, диспансерлік визит) және бақылау күндері. Құттықтаймыз — курсты аяқтадыңыз!</div>
+</section>
+
+<section class="handouts" id="handouts">
+  <h2>📄 Науқастарға таратуға арналған ескертпі парақтар</h2>
+  <p>Басып шығаруға (немесе PDF сақтауға) арналған бір беттік ескертпі парақтар. Сәйкес сабақтардан кейін науқастарға таратыңыз.</p>
+  <div class="handout-grid">
+    <div class="handout-card">
+      <div class="hic">🚦</div>
+      <h3>Әрекет жоспары «бақдаршам»</h3>
+      <p>Тәуекел аймақтары, нашарлағанда не істеу керек, қызыл жалаулар және жедел жәрдемді қашан шақыру керек. Тоңазытқышқа іліңіз.</p>
+      <button class="btn" onclick="printHandout('h-plan')">Басып шығару / PDF</button>
+    </div>
+    <div class="handout-card">
+      <div class="hic">💊</div>
+      <h3>Ингаляция техникасы</h3>
+      <p>ДАИ техникасы қадам бойынша, жиі қателіктер, спейсер не үшін қажет. 3-сабаққа.</p>
+      <button class="btn" onclick="printHandout('h-inhal')">Басып шығару / PDF</button>
+    </div>
+    <div class="handout-card">
+      <div class="hic">🌬</div>
+      <h3>Тыныс алу гимнастикасы</h3>
+      <p>Көкбауырлық тыныс, қысылған ерінмен тыныс, ентігу қалыптары, күндік кешен. 4-сабаққа.</p>
+      <button class="btn" onclick="printHandout('h-breath')">Басып шығару / PDF</button>
+    </div>
+    <div class="handout-card">
+      <div class="hic">📔</div>
+      <h3>Науқас күнделігі (үлгі)</h3>
+      <p>Бір аптаға арналған кесте: SpO₂, АҚ, ЖЖС, тыныс жиілігі, ентігу, қақырық, дәрілер. 2-сабаққа.</p>
+      <button class="btn" onclick="printHandout('h-diary')">Басып шығару / PDF</button>
+    </div>
+    <div class="handout-card">
+      <div class="hic">🥗</div>
+      <h3>Тамақтану және темекіні тастау</h3>
+      <p>ХОБЛ кезіндегі тамақтану принциптері, темекіні тастау жоспары, егілу. 5-сабаққа.</p>
+      <button class="btn" onclick="printHandout('h-life')">Басып шығару / PDF</button>
+    </div>
+    <div class="handout-card">
+      <div class="hic">🎓</div>
+      <h3>Бітірушінің қорытынды парағы</h3>
+      <p>Курстың барлық негізгі дағдылары бойынша қысқа жадынама. 7-сабаққа.</p>
+      <button class="btn" onclick="printHandout('h-summary')">Басып шығару / PDF</button>
+    </div>
+  </div>
+</section>
+
+<div class="handout-template" id="tpl-h-plan"></div>
+<div class="handout-template" id="tpl-h-inhal"></div>
+<div class="handout-template" id="tpl-h-breath"></div>
+<div class="handout-template" id="tpl-h-diary"></div>
+<div class="handout-template" id="tpl-h-life"></div>
+<div class="handout-template" id="tpl-h-summary"></div>
+
+<section class="certificate hidden" id="cert">
+  <h2>🎓 Сіз ХОБЛ Денсаулық мектебін аяқтадыңыз!</h2>
+  <p>Өзін-өзі басқару негіздерін меңгердіңіз: ауруды бақылау, ингаляция, реабилитация, тамақтану және асқыну кезіндегі әрекет жоспары. Күнделікті жүргізіп, «бақдаршам» бойынша әрекет етуді жалғастырыңыз.</p>
+</section>
+
+<footer class="footer">
+  ХОБЛ-мен науқастарға арналған Денсаулық мектебі · ПМСП · оқу курсы · материалдар танысу сипатында және дәрігердің кеңесін алмастырмайды
+</footer>
+
+</div>
+
+<script>
+"use strict";
+var KEY="copd_school_kz_v1";
+var state={done:{}};
+try{ state=JSON.parse(localStorage.getItem(KEY))||{done:{}}; }catch(e){}
+
+var nav=$("#lessonsNav");
+for(var i=1;i<=7;i++){ var a=document.createElement("a"); a.href="#l"+i; a.textContent=i+"-сабақ"; nav.appendChild(a); }
+
+var checks=document.querySelectorAll("input[data-l]");
+checks.forEach(function(cb){
+  var n=cb.getAttribute("data-l");
+  cb.checked=!!state.done[n];
+  cb.addEventListener("change",function(){
+    state.done[n]=cb.checked;
+    localStorage.setItem(KEY,JSON.stringify(state));
+    update();
+    if(cb.checked) cb.closest(".lesson").classList.add("done");
+    else cb.closest(".lesson").classList.remove("done");
+  });
+  if(cb.checked) cb.closest(".lesson").classList.add("done");
+});
+update();
+
+function update(){
+  var done=0; for(var i=1;i<=7;i++) if(state.done[i]) done++;
+  var pct=Math.round(done/7*100);
+  $("#pfill").style.width=pct+"%";
+  $("#ptxt").textContent=done+"/7";
+  $("#cert").classList.toggle("hidden", done<7);
+}
+function $(s,r){return (r||document).querySelector(s);}
+
+/* ============ ЕСКЕРТПІ ПАРАҚТАР ============ */
+function stepsHtml(steps){
+  var s='<div class="steps">';
+  steps.forEach(function(st,i){ s+='<div class="step"><div class="sn">'+(i+1)+'</div><div class="si">'+st.ic+'</div><div class="st">'+st.t+'</div><div class="sd">'+st.d+'</div></div>'; });
+  return s+'</div>';
+}
+function flowHtml(a,b){ return '<div class="flow"><div class="flow-step">'+a+'</div><div class="flow-arrow">↓</div><div class="flow-step">'+b+'</div></div>'; }
+function timelineHtml(rows){
+  var s='<div class="timeline">';
+  rows.forEach(function(r){ s+='<div class="tl"><div class="ttime">'+r.time+'</div><div class="titems">'+r.items.map(function(i){return '<span>'+i+'</span>';}).join('')+'</div></div>'; });
+  return s+'</div>';
+}
+var HANDOUTS={
+"h-plan":{title:"ХОБЛ кезіндегі әрекет жоспары (бақдаршам)",html:
+'<p>Бұл сіздің жеке жоспарыңыз. Шектер мен телефондарды дәрігермен бірге толтырып, көрінетін жерге қойыңыз.</p>'+
+flowHtml("📊 SpO₂ пульсоксиметрмен өлшеңіз","🚦 Аймақты анықтаңыз")+
+'<div class="zone g"><b>🟢 ЖАСЫЛ АЙМАҚ — тұрақты</b><br>SpO₂ ≥ 95% · әдеттегі күй.<br>Әрекет: негізгі ем схемасы бойынша, күнделік күніне 2–3 рет, белсенділік, гимнастика.</div>'+
+'<div class="zone y"><b>🟡 САРЫ АЙМАҚ — назар</b><br>SpO₂ 90–94% · ентігудің өсуі, қақырықтың өзгеруі.<br>Әрекет: құтқарушы бронхолитик (сальбутамол 2–4 рет), SpO₂ 15–30 мин сайын бақылау, медбикемен байланысу. Дәрігер жоспары бойынша резервтік курсты бастау.</div>'+
+'<div class="zone r"><b>🔴 ҚЫЗЫЛ АЙМАҚ — нашарлау</b><br>SpO₂ &lt; 90% · тыныштықта күшті ентігу, қызба, іріңді қақырық.<br>Әрекет: О₂ схемасы бойынша көбейту, бронхолитик небулайзермен, ортопноэ қалпы, жедел жәрдемді шақыру.</div>'+
+'<h2>🚑 Жедел жәрдемді шақырыңыз, егер:</h2><ul>'+
+'<li>SpO₂ &lt; 88% 5 минуттан көп ұсталса немесе ентігу үдесе</li>'+
+'<li>тыныштықта ентігу бронхолитиктен кейін 15–20 мин ішінде азаймаса</li>'+
+'<li>сананың шатасуы, ерін көгеруі, кеуде ауырсынуы болса</li>'+
+'<li>температура &gt; 38,5 °C ентігудің үдеуімен болса</li></ul>'+
+'<h2>📞 Менің байланыстарым</h2><ul>'+
+'<li>Емдеуші дәрігер: ____________________</li>'+
+'<li>Медбике: ____________________</li>'+
+'<li>Жедел жәрдем: 103 / 112</li>'+
+'<li>Менің құтқарушы ингаляторым: ____________________</li></ul>'},
+
+"h-inhal":{title:"Ингаляция техникасы",html:
+'<p>Дұрыс техника — емнің жартысы. Техникаңызды әр 3 айда медбикеден тексертіңіз.</p>'+
+'<h2>ДАИ ингаляторы — қадам бойынша</h2>'+
+stepsHtml([
+ {ic:"🤚",t:"Шайқау",d:"Қалпақшаны алып, шайқау"},
+ {ic:"😮‍💨",t:"Дем шығару",d:"Тыныш, ингалятордан тыс"},
+ {ic:"👄",t:"Қамау",d:"Ерін мундштукте"},
+ {ic:"🌬",t:"Дем алу + басу",d:"Баяу дем алу, басу"},
+ {ic:"⏳",t:"Дем алу 3–5 сек",d:"Терең дем алуды жалғастыру"},
+ {ic:"🤍",t:"Ұстау",d:"Тынысты 10 секунд ұстау"},
+ {ic:"😮‍💨",t:"Дем шығару",d:"Тыныш дем шығару"},
+ {ic:"💧",t:"Шайкау",d:"ИГКС-тен кейін ауызды сумен"}
+])+
+'<h2>⚠️ Жиі қателіктер</h2><ul>'+
+'<li>қолданар алдында шайқамады</li>'+
+'<li>дем алуды тартылып/күрт алды</li>'+
+'<li>дем алғаннан кейін тынысты ұстамады</li>'+
+'<li>ИГКС-тен кейін ауызды шайқамады (ауыздың іріңірауы қаупі)</li>'+
+'<li>негізгі мен құтқарушы ингаляторды шатастырды</li></ul>'+
+'<div class="zone g"><b>💡 Спейсер</b> — ДАИ-ға арналған камера-насадка. Дем алуды оңайлатып, жанама әсерлерін азайтады. Дем алу мен басуды үйлестіру қиын болса ұсынылады.</div>'+
+'<p><b>Негізгі ингалятор:</b> ____________________ — күн сайын.<br><b>Құтқарушы ингалятор:</b> ____________________ — қажет бойынша.</p>'},
+
+"h-breath":{title:"Тыныс алу гимнастикасы",html:
+'<p>Тұрақтылық интенсивтіліктен маңыздырақ. Кешенді күніне 3–4 рет 5–10 минуттай жасаңыз.</p>'+
+'<h2>1. Қысылған ерінмен тыныс алу (ентігу кезінде)</h2>'+
+stepsHtml([
+ {ic:"👃",t:"Мұрынмен дем алу",d:"2 секунд"},
+ {ic:"👄",t:"Ерін түтікше",d:"Ерінді жинау"},
+ {ic:"🌬",t:"Дем шығару 4 сек",d:"Дем шығаруды ұзарту"},
+ {ic:"🔁",t:"Қайталау",d:"Тыныш тынысқа дейін"}
+])+
+'<h2>2. Көкбауырлық (диафрагмалық) тыныс алу</h2><ul>'+
+'<li>Бір қол іште, бірі кеудеде.</li>'+
+'<li>Мұрынмен дем алғанда — іш ұлғаяды.</li>'+
+'<li>Қысылған ерінмен дем шығарғанда — іш кіреді. Кеуде дерлік қозғалмайды.</li></ul>'+
+'<h2>3. Ентігуді жеңілдететін қалыптар</h2><ul>'+
+'<li>Алға иіліп, қолмен тіреліп отыру.</li>'+
+'<li>Үстелге немесе қабырғаға сүйеніп тұру.</li>'+
+'<li>Басы көтеріңкі жатып.</li></ul>'+
+'<h2>4. Бақыланатын жөтелу</h2><ul>'+
+'<li>Отырып, терең дем алыңыз.</li>'+
+'<li>Ауызын ашып 2–3 қысқа жөтел толқыны («хюффинг»).</li>'+
+'<li>Дем алсыңыз, қажет болса қайталаңыз.</li></ul>'+
+'<div class="zone y"><b>🏃 Жүктеме:</b> «сөйлесу тестін» қолданыңыз — егер жүру кезінде сөйлесе алсаңыз, қарқын лайықты. Күн сайын кемінде 20 мин серуендеңіз.</div>'},
+
+"h-diary":{title:"Науқас күнделігі (бір апта үлгісі)",html:
+'<p>Күніне 2 рет (таңертең және кешке) және нашарлағанда толтырыңыз. Қабылдауға әкеліңіз.</p>'+
+'<p><b>Науқас:</b> ____________________ &nbsp; <b>Апта:</b> ______________</p>'+
+'<table><tr><th>Күн</th><th>Уақыт</th><th>SpO₂ %</th><th>АҚ</th><th>ЖЖС</th><th>Тыныс жиілігі</th><th>Ентігу mMRC</th><th>Қақырық</th><th>Дәрілер қабылданды</th><th>Ескерту</th></tr>'+
+row("Дүйсенбі")+row("Сейсенбі")+row("Сәрсенбі")+row("Бейсенбі")+row("Жұма")+row("Сенбі")+row("Жексенбі")+'</table>'+
+'<p style="font-size:13px;color:#5B6573">Ентігу mMRC: 0 — жоқ, 1 — жылдам жүргенде, 2 — баяу жүремін, 3 — ~100 м тоқтаймын, 4 — үйден шыға алмаймын.</p>'+
+'<p style="font-size:13px;color:#5B6573">Жасыл аймақ: SpO₂ ≥95%. Сары: 90–94%. Қызыл: &lt;90% — жоспар бойынша әрекет етіңіз.</p>'},
+
+"h-life":{title:"Тамақтану және темекіні тастау",html:
+'<h2>🥗 ХОБЛ кезіндегі тамақтану</h2><ul>'+
+'<li>Жиі, шағын порциялармен жеңіз — күніне 4–5 рет.</li>'+
+'<li>Жеткілікті ақуыз (1–1,5 г/кг): ет, балық, жұмыртқа, сүт.</li>'+
+'<li>Салмақ төмендегенде — калориялы тағамдар: жаңғақ, май, ірімшік.</li>'+
+'<li>Ісіктерде — тұзды азайтыңыз.</li>'+
+'<li>Шөл бойынша ішіңіз, егер дәрігер сұйықтықты шектемесе.</li>'+
+'<li>Тапшылықта — D дәрумені (талдау бойынша).</li></ul>'+
+'<h2>🚫 Темекіні тастау — басты ем</h2>'+
+stepsHtml([
+ {ic:"📅",t:"Күн",d:"Тастау күнін тағайындаңыз"},
+ {ic:"🗑",t:"Жою",d:"Сигарет, күлдік, триггерлер"},
+ {ic:"🩹",t:"НРТ",d:"Никотин жапсырма/сағыз"},
+ {ic:"💊",t:"Дәрілер",d:"Варениклин/бупропион рецептпен"},
+ {ic:"🤝",t:"Қолдау",d:"Туыстар, дәрігер, топ"}
+])+
+'<div class="zone g"><b>Темекіні тастау күні:</b> ________________</div>'+
+'<h2>💉 Егілу</h2><ul>'+
+'<li>Тұмау — жыл сайын, күзде.</li>'+
+'<li>Пневмококк — дәрігер схемасы бойынша.</li>'+
+'<li>COVID-19 — күнтізбе бойынша.</li></ul>'+
+'<h2>⚠️ Триггерлерден аулақ болыңыз</h2><ul>'+
+'<li>түтін, шаң, өткір иістер, тұрмыстық химия</li>'+
+'<li>суық ауа — орамал арқылы тыныстаңыз</li>'+
+'<li>түтінді бөлмелер, шығын газдар</li></ul>'},
+
+"h-summary":{title:"ХОБЛ мектебін бітірушінің қорытынды парағы",html:
+'<p>Құттықтаймыз! Өзін-өзі басқару негіздерін меңгердіңіз. Негізгі дағдылар бойынша қысқа жадынама:</p>'+
+'<h2>📅 ХОБЛ-мен күнім</h2>'+
+timelineHtml([
+ {time:"🌅 Таңертең",items:["Негізгі ингалятор","SpO₂/АҚ/ЖЖС","Күнделік","Ақуызды таңертеңгі"]},
+ {time:"☀️ Күндіз",items:["Тыныс алу гимнастикасы","Серуен ≥20 мин","Түскі + жеңіл тағам"]},
+ {time:"🌙 Кешке",items:["Негізгі ингалятор","Өлшеу + күнделік","Гимнастика","Құтқарушы — қолда"]}
+])+
+'<h2>✅ Күн сайын</h2><ul>'+
+'<li>Негізгі емді схемасы бойынша қабылдаймын, өткізбеймін.</li>'+
+'<li>Күнделікті күніне 2–3 рет толтырамын (SpO₂, АҚ, ЖЖС, тыныс жиілігі, ентігу, қақырық).</li>'+
+'<li>Тыныс алу гимнастикасын 3–4 рет, серуен ≥ 20 мин.</li>'+
+'<li>Жиі, шағын порциямен, ақуызбен тамақтанамын.</li></ul>'+
+'<h2>🚦 «Бақдаршам» бойынша әрекет</h2><ul>'+
+'<li>🟢 SpO₂ ≥95% — негізгі ем және күнделік.</li>'+
+'<li>🟡 SpO₂ 90–94% — құтқарушы, бақылау, медбикеге қоңырау.</li>'+
+'<li>🔴 SpO₂ &lt;90% — О₂, бронхолитик, қалып, жедел жәрдем.</li></ul>'+
+'<h2>🚑 Жедел жәрдем (103/112) — қашан:</h2><ul>'+
+'<li>SpO₂ &lt;88% &gt;5 мин немесе ентігу үдесе.</li>'+
+'<li>Тыныштықта ентігу бронхолитиктен кейін 15–20 мин басылмаса.</li>'+
+'<li>Сананың шатасуы, көгеру, кеуде ауырсынуы, t &gt;38,5 °C.</li></ul>'+
+'<h2>📋 Жарты жылда / жоспар бойынша</h2><ul>'+
+'<li>Тұмауға қарсы егілу (жыл сайын), пневмококк.</li>'+
+'<li>Ингаляция техникасын медбикеден тексеру.</li>'+
+'<li>Спирометрия, CAT, дәрігер қабылдауы.</li>'+
+'<li>Темекі шекпеймін. Қосарлы ауруларды бақылаймын.</li></ul>'+
+'<div class="zone g"><b>Бастысы:</b> дабылдамай, жоспар бойынша әрекет ету. Сіз — өз ем командасыңыздың басты қатысушысыз.</div>'}
+};
+
+function row(day){return '<tr><td>'+day+'</td><td>таңертең</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td>кешке</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';}
+
+function printHandout(id){
+  var h=HANDOUTS[id]; if(!h) return;
+  var w=window.open("","_blank");
+  var css='body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:#0F1218;max-width:780px;margin:24px auto;padding:0 20px}'
+    +'h1{font-size:22px;margin:0 0 2px}'
+    +'.hdr{border-bottom:3px solid #00E5FF;padding-bottom:10px;margin-bottom:16px}'
+    +'.hdr small{color:#5B6573;font-size:13px}'
+    +'h2{font-size:16px;margin:16px 0 6px}'
+    +'ul{margin:6px 0 10px;padding-left:20px}li{margin-bottom:4px}'
+    +'table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}'
+    +'th{background:#F2F4F7;text-align:left;padding:6px}td{border:1px solid #E4E8EE;padding:6px;height:22px;vertical-align:top}'
+    +'.zone{border-left:5px solid;padding:10px 12px;margin:8px 0;border-radius:6px}'
+    +'.g{border-color:#16C784;background:#E6F9F0}.y{border-color:#F5A623;background:#FDF3E2}.r{border-color:#EA3943;background:#FCEAEC}'
+    +'.steps{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}'
+    +'.step{flex:1 1 150px;min-width:140px;border:1.5px solid #E4E8EE;border-radius:11px;padding:14px 12px 12px;position:relative;background:#fff}'
+    +'.step .sn{position:absolute;top:-11px;left:12px;background:#0F1218;color:#00E5FF;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}'
+    +'.step .si{font-size:26px;line-height:1;margin-bottom:4px}'
+    +'.step .st{font-weight:800;font-size:13.5px;margin-bottom:2px}'
+    +'.step .sd{font-size:12px;color:#5B6573}'
+    +'.flow{display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0}'
+    +'.flow-step{background:#0F1218;color:#fff;padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px}'
+    +'.flow-arrow{color:#0F1218;font-size:20px;font-weight:800;line-height:1}'
+    +'.timeline{margin:12px 0}'
+    +'.tl{display:flex;gap:12px;border:1.5px solid #E4E8EE;border-radius:11px;padding:12px;margin-bottom:8px;align-items:flex-start}'
+    +'.tl .ttime{flex:0 0 96px;font-weight:800;font-size:13px;color:#0F1218;background:#E8FCFF;padding:6px 8px;border-radius:8px;text-align:center;height:fit-content}'
+    +'.tl .titems{font-size:13px;color:#0F1218}'
+    +'.tl .titems span{display:inline-block;background:#F2F4F7;padding:3px 9px;border-radius:6px;margin:2px 4px 2px 0;font-size:12px}'
+    +'.ftr{margin-top:20px;padding-top:10px;border-top:1px solid #E4E8EE;color:#5B6573;font-size:12px;text-align:center}'
+    +'@media print{body{margin:12mm}}';
+  w.document.write('<!DOCTYPE html><html lang="kk"><head><meta charset="utf-8"><title>'+h.title+'</title><style>'+css+'</style></head><body>');
+  w.document.write('<div class="hdr"><h1>ХОБЛ Денсаулық мектебі · Науқасқа арналған ескертпі парақ</h1><small>'+h.title+'</small></div>');
+  w.document.write(h.html);
+  w.document.write('<div class="ftr">Ескертпі парақ ПМСП Денсаулық мектебінде таратылды · материал танысу сипатында, дәрігердің кеңесін алмастырмайды · '+new Date().toLocaleDateString("ru-RU")+'</div>');
+  w.document.write('</body></html>');
+  w.document.close(); w.focus();
+  setTimeout(function(){ try{w.print();}catch(e){} }, 350);
+}
+</script>
+</body>
+</html>