Школа здоровья ХОБЛ: 7 занятий + 6 печатных памяток/флаеров для раздачи пациентам

2026-06-30 07:50:19 +00:00 · 2026-06-30 07:50:19 +00:00 · 20025a9f11
commit 20025a9f11
parent 8cf8977183
3 changed files with 1081 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,798 @@
+<!DOCTYPE html>
+<html lang="ru">
+<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}
+
+/* Header + progress */
+.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 */
+.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:40px;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 */
+.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}
+
+/* Lessons nav */
+.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 */
+.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:24px;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}
+
+/* Cards inside */
+.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 */
+.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 */
+.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)}
+
+/* Homework */
+.hw{background:var(--ink);color:#fff;border-radius:12px;padding:16px 18px;font-size:15px}
+.hw b{color:var(--cyan)}
+
+/* Zone table */
+.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 */
+.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 */
+.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 print{ body *{visibility:hidden} }
+
+@media(max-width:760px){
+  .hero{padding:32px 22px}
+  .hero h1{font-size:28px}
+  .overview ul{grid-template-columns:1fr}
+  .lesson{padding:22px}
+  .done-label{margin-left:0;width:100%}
+}
+</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> при астме сужение бронхов обратимо, при ХОБЛ — largely необратимо. Поэтому ХОБЛ нельзя «вылечить», но можно контролировать.</li>
+    <li><b>Стадии и группы.</b> Стадии 1–4 определяют по ОФВ₁ (объёму форсированного выдоха за 1 сек) при спирометрии. Группы 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>Adherence (приверженность).</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> — по схеме (PCV13/PPSV23 или аналоги)</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> (дата, методы, поддержка). Ведите <b>дневник питания</b> 3 дня — обсудите с врачом/нутрициологом.</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> Выбирайте время, когда меньше устали; позиции с меньшей нагрузкой; используйте бронхолитик beforehand. Не стесняйтесь обсудить с врачом.</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_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);}
+
+/* ============ ПАМЯТКИ ДЛЯ ПЕЧАТИ ============ */
+var HANDOUTS={
+"h-plan":{title:"План действий при ХОБЛ (светофор)",html:
+'<p>Это ваш персональный план. Заполните пороги и телефоны вместе с врачом и держите на видном месте.</p>'+
+'<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><ul>'+
+'<li>1. Встряхните баллончик, снимите колпачок.</li>'+
+'<li>2. Спокойно выдохните (мимо ингалятора).</li>'+
+'<li>3. Обхватите мундштук губами.</li>'+
+'<li>4. Начните медленный глубокий вдох и одновременно нажмите на баллончик.</li>'+
+'<li>5. Продолжайте вдох 3–5 секунд.</li>'+
+'<li>6. Задержите дыхание на 10 секунд.</li>'+
+'<li>7. Спокойно выдохните.</li>'+
+'<li>8. После ИГКС — прополощите рот водой.</li></ul>'+
+'<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><ul>'+
+'<li>Вдох через нос 2 секунды.</li>'+
+'<li>Выдох через губы, сложенные трубочкой, 4 секунды (удлиняйте выдох).</li>'+
+'<li>Повторяйте, пока дыхание не успокоится.</li></ul>'+
+'<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><ul>'+
+'<li>Назначьте дату отказа. Сообщите родным.</li>'+
+'<li>Уберите сигареты, пепельницы, избегайте триггеров.</li>'+
+'<li>Никотинзаместительная терапия: пластырь, жвачка, леденцы.</li>'+
+'<li>Лекарства (по рецепту): варениклин, бупропион.</li>'+
+'<li>Избегайте пассивного курения дома и в машине.</li></ul>'+
+'<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><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}'
+    +'.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="ru"><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>