Amanbayeva_Nazym/copd-school
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Amanbayeva_Nazym:pages
Branches Tags
Amanbayeva_Nazym:main
Amanbayeva_Nazym:pages
..
compare: Amanbayeva_Nazym:main
Branches Tags
Amanbayeva_Nazym:pages
Amanbayeva_Nazym:main

No commits in common. "pages" and "main" have entirely different histories.
pages ... main

4 changed files with 0 additions and 1076 deletions
Show Stats Expand all files Collapse all files

173
AGENTS.md
View File

@ -1,173 +0,0 @@
<!-- 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`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.

116
PRD.md
View File

@ -1,116 +0,0 @@
# PRD — Школа здоровья для пациентов с ХОБЛ (Денсаулық мектебі)
**Версия:** 1.0 · **Статус:** опубликован · **Проект:** `Amanbayeva_Nazym/copd-school`
**URL:** https://pages.git.vibe42.kz/Amanbayeva_Nazym/copd-school/
**Языки:** Русский (РУ) + Қазақша (ҚЗ) — переключатель в шапке
---
## 1. Описание продукта
Двуязычный учебный веб-курс для школ здоровья в первичной медико-санитарной помощи (ПМСП). Предназначен для обучения пациентов с хронической обструктивной болезнью лёгких (ХОБЛ) всем аспектам самоменеджмента. Курс состоит из 7 занятий с теорией, чек-листами, самопроверкой и домашними заданиями, а также из 6 печатных памяток/флаеров для раздачи пациентам.
## 2. Проблема и цель
- **Проблема:** пациенты с ХОБЛ часто не владеют навыками самопомощи (ингаляция, дыхательная гимнастика, план действий при обострении), что ведёт к позднему обращению и росту госпитализаций.
- **Цель:** обучить пациента контролировать болезнь, правильно принимать терапию, распознавать обострение и действовать по плану — снизить число обострений и госпитализаций, повысить качество жизни.
## 3. Пользователи
| Роль | Сценарий |
|------|----------|
| **Пациент с ХОБЛ** | Проходит занятия, отмечает прогресс, скачивает/печатает памятки, выполняет домашние задания. |
| **Медицинский работник ПМСП** | Ведёт занятия школы здоровья, раздаёт памятки, использует курс как учебный материал. |
## 4. Границы продукта (стек и ограничения)
- **Тип:** статическое клиентское веб-приложение (HTML + CSS + vanilla JS).
- **Данные:** `localStorage` браузера (только прогресс прохождения).
- **Без бэкенда, БД, аутентификации.**
- **Двуязычность:** весь контент хранится как данные в одном файле; рендер по выбранному языку.
- **Адаптив:** десктоп и мобильные.
- **Печать:** памятки открываются в отдельном окне с print-CSS для печати или сохранения в PDF.
## 5. Функциональные требования
- **FR-1. Переключатель языков РУ/ҚЗ** в шапке; выбор сохраняется в браузере; переключение мгновенно переводит весь интерфейс и контент.
- **FR-2. Курс из 7 занятий** (см. раздел 6): каждое занятие содержит цель, содержание, чек-лист, самопроверку (ответы скрыты в `<details>`) и домашнее задание.
- **FR-3. Трекер прогресса:** чекбокс «Пройдено» у каждого занятия, прогресс-бар в шапке, сохранение в `localStorage`. При 7/7 открывается сертификат.
- **FR-4. Навигация по занятиям** — быстрые ссылки на все 7 занятий.
- **FR-5. Памятки/флаеры для раздачи** (см. раздел 7): 6 одностраничных памяток с кнопкой «Печать / PDF».
- **FR-6. Инфографика пошаговых действий** в памятках: числовые шаги с иконками, блок-схема «светофор», таймлайн дня.
- **FR-7. Адаптивная вёрстка** для десктопа и мобильных.
## 6. Структура курса — 7 занятий
| № | Занятие (РУ) | Сабақ (ҚЗ) | Ключевые темы |
|---|--------------|------------|---------------|
| 1 | Знакомство с ХОБЛ: что происходит с лёгкими | ХОБЛ-мен танысу | природа болезни, причины (курение), симптомы, стадии GOLD, отличие от астмы |
| 2 | Самоконтроль: измерения, шкалы, дневник | Өзіндік бақылау | пульсоксиметрия, спирометрия, CAT, mMRC, дневник, зоны «светофор» |
| 3 | Лекарства и правильная ингаляция | Дәрілер және ингаляция | классы препаратов, базис vs спасательная, техника ДАИ, спейсер, adherence |
| 4 | Дыхательная гимнастика и физическая активность | Тыныс алу гимнастикасы | диафрагмальное дыхание, дыхание через сжатые губы, положения, «разговорный тест», реабилитация |
| 5 | Питание, отказ от курения, вакцинация, триггеры | Тамақтану, темекіні тастау | питание, НРТ/варениклин, вакцинация (грипп, пневмококк, COVID), триггеры |
| 6 | Обострения: ранние признаки, план действий, красные флаги | Асқынулар | ранние признаки, план «светофор», спасательная терапия, ГКС/антибиотики, красные флаги, скорая |
| 7 | Жизнь с ХОБЛ: психология, близкие, путешествия, права | ХОБЛ-мен өмір | тревога/депрессия, сон, сексуальная жизнь, путешествия, сопутствующие болезни, права пациента |
Каждое занятие: **цель → содержание → чек-лист → самопроверка → домашнее задание**.
## 7. Памятки/флаеры для раздачи пациентам (6)
| Памятка | Содержание | Инфографика |
|---------|-----------|-------------|
| 🚦 План действий «светофор» | зоны риска, действия, красные флаги, контакты | блок-схема решения |
| 💊 Техника ингаляции | ДАИ пошагово, частые ошибки, спейсер | 8-шаговая инфографика |
| 🌬 Дыхательная гимнастика | диафрагмальное/через сжатые губы, положения, комплекс | пошаговая инфографика |
| 📔 Дневник пациента | шаблон-таблица на неделю (SpO₂, АД, ЧСС, ЧДД, одышка, мокрота, препараты) | таблица |
| 🥗 Питание и отказ от курения | принципы питания, план отказа, вакцинация | 5-шаговая инфографика |
| 🎓 Итоговая памятка выпускника | ключевые навыки, «светофор», когда скорая | таймлайн дня |
Все памятки доступны на обоих языках и форматируются для печати (print-CSS, отдельное окно).
## 8. Локализация (РУ/ҚЗ)
- Весь контент (UI-строки, 7 занятий, 6 памяток, инфографика) продублирован на русском и казахском.
- Архитектура data-driven: объект `PACKS = {ru: RU, kz: KZ}`; функция `render()` перестраивает DOM по выбранному языку.
- Прогресс прохождения общий для обоих языков (не зависит от языка).
## 9. Архитектура и модель данных
- **Рендер:** единая функция `render()` строит страницу из языкового пакета `P()`.
- **Структура языкового пакета:** `ui` (строки интерфейса), `lessons[]` (7 занятий), `handouts{}` (6 памяток с функциями-билдерами HTML), `handoutCards[]` (карточки-превью).
- **Хелперы инфографики (общие):** `stepsHtml(steps)` — числовые шаги; `flowHtml(a,b)` — блок-схема; `timelineHtml(rows)` — таймлайн; `diaryRows(days)` — строки таблицы дневника.
- **Хранилище (localStorage, ключ `copd_school_bi_v1`):**
```
state = { lang: "ru"|"kz", done: { "l1-d": true, ... } }
```
`done` хранит отметки «Пройдено» по занятиям.
## 10. Нефункциональные требования
- NFR-1. Только статика (HTML/CSS/JS), без сборщиков и фреймворков.
- NFR-2. Работает офлайн после первой загрузки (прогресс в localStorage).
- NFR-3. Адаптивный интерфейс (мобильные/десктоп).
- NFR-4. Печать памяток через `window.open` + print-CSS (корректно в Chrome/Edge/Firefox).
- NFR-5. Медицинский контент основан на рекомендациях GOLD; носит ознакомительный характер, не заменяет консультацию врача.
## 11. За пределами версии (Out of scope)
- Учётные записи пациентов, серверная часть, синхронизация прогресса между устройствами.
- Сертификаты с подписью/верификацией.
- Интеграция с ЭМК / записью на занятия.
- Аудио/видео-материалы, интерактивные симуляции ингаляции.
- Тестирование с автоматической проверкой и балльной оценкой.
## 12. Roadmap (следующие итерации)
1. Аудио-сопровождение занятий и видео-демонстрация техники ингаляции.
2. Интерактивный тренажёр ингаляции с обратной связью.
3. Версия для слабовидящих (увеличенный шрифт, высокий контраст, screen-reader).
4. Экспорт свидетельства о прохождении школы (PDF с ФИО пациента).
5. Интеграция с расписанием занятий ПМСП и записью пациента.
6. Дополнительные темы: кислородотерапия, паллиативная помощь, группы поддержки.
7. Третий язык (английский) при необходимости.
## 13. Технологии
HTML5 · CSS3 (собственная дизайн-система, палитра: ink `#0F1218`, cyan `#00E5FF`, зелёная/жёлтая/красная зоны) · vanilla JavaScript (ES5) · localStorage · печать через `window.open` + print-CSS · публикация через ветку `pages` (Caddy).

110
design.md
View File

@ -1,110 +0,0 @@
<!-- 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

677
index.html
View File

@ -1,677 +0,0 @@
<!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}
.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)}
.topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.progress-wrap{display:flex;align-items:center;gap:12px;min-width:180px;flex:1}
.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}
.lang-switch{display:flex;background:#1a1f2a;border-radius:8px;padding:3px;gap:2px}
.lang-switch button{background:transparent;border:none;color:#9aa3b2;font-size:13px;font-weight:700;padding:6px 12px;border-radius:6px;cursor:pointer;font-family:inherit}
.lang-switch button.active{background:var(--cyan);color:var(--ink)}
.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 .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}
@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}.topbar-right{flex:1 1 100%}
}
</style>
</head>
<body>
<header class="topbar">
<div class="topbar-inner">
<div class="brand" id="brand"><span class="mk">⚤</span><span id="brandTxt"></span></div>
<div class="topbar-right">
<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 class="lang-switch">
<button id="langRu" class="active">РУ</button>
<button id="langKz">ҚЗ</button>
</div>
</div>
</div>
</header>
<div class="wrap" id="app"></div>
<script>
"use strict";
/* ============ ИНФОГРАФИКА-ХЕЛПЕРЫ (общие) ============ */
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>';
}
function diaryRows(days){ var s=''; days.forEach(function(d){ s+='<tr><td>'+d+'</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'; }); return s; }
/* ============ ДАННЫЕ: РУССКИЙ ============ */
var RU={
ui:{brand:"Школа ХОБЛ",eyebrow:"🎓 Школа здоровья · ПМСП",heroTitle:"Школа здоровья для пациентов с ХОБЛ",
heroLead:"Учебный курс из 7 занятий по всем аспектам самоменеджмента. Помогает пациенту с хронической обструктивной болезнью лёгких контролировать болезнь, снижать обострения и сохранять качество жизни.",
sL:"занятий",sD:"на занятие",sF:"бесплатно",start:"Начать обучение",prog:"Программа курса",
ovTitle:"Чему вы научитесь",ovLead:"После курса вы сможете самостоятельно контролировать болезнь, правильно принимать лекарства, распознавать обострение и действовать по плану без паники.",
navTitle:"Программа · 7 занятий",lessonN:"Занятие ",goal:"Цель",content:"Содержание",check:"Чек-лист занятия",quiz:"Самопроверка",hw:"Домашнее задание",done:"Пройдено",
hTitle:"📄 Памятки и флаеры для раздачи пациентам",hLead:"Одностраничные памятки для печати (или сохранения в PDF). Раздавайте пациентам после соответствующих занятий.",
print:"Печать / PDF",hHdr:"Школа здоровья ХОБЛ · Памятка пациенту",
hFtr:"Памятка выдана в Школе здоровья ПМСП · материал носит ознакомительный характер и не заменяет консультацию врача",
certTitle:"🎓 Вы прошли Школу здоровья ХОБЛ!",certText:"Вы освоили основы самоменеджмента: контроль болезни, ингаляцию, реабилитацию, питание и план действий при обострении. Продолжайте вести дневник и действовать по «светофору».",
footer:"Школа здоровья для пациентов с ХОБЛ · ПМСП · учебный курс · материалы носят ознакомительный характер и не заменяют консультацию врача",
ovItems:["Понимать свою болезнь и стадии","Измерять показатели и вести дневник","Владеть техникой ингаляции","Делать дыхательную гимнастику","Питаться и бросить курить","Действовать при обострении по «светофору»","Сохранять активность и настроение"]},
lessons:[
{n:"01",id:"l1",title:"Знакомство с ХОБЛ: что происходит с лёгкими",meta:"45 мин · основы болезни",
goal:"понять природу ХОБЛ и причины её прогрессирования, чтобы осознанно участвовать в лечении.",
content:'<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>',
check:["Я знаю, что такое ХОБЛ и почему возникла одышка","Я знаю свою стадию/группу (спросить у врача)","Я понимаю, что отказ от курения — главное лечение"],
quiz:[{q:"1. Главная причина ХОБЛ?",a:"<b>Табакокурение</b> — ответственно за 80–90% случаев."},
{q:"2. Можно ли полностью вылечить ХОБЛ?",a:"Нет, изменения бронхов <b>необратимы</b>. Но болезнь можно контролировать и замедлить."},
{q:"3. Чем ХОБЛ отличается от астмы?",a:"При астме сужение бронхов <b>обратимо</b>, при ХОБЛ — преимущественно нет."}],
hw:"📔 Начать <b>дневник симптомов</b>: неделю записывайте кашель, мокроту, одышку и что её провоцирует. На следующем занятии обсудим с врачом."},
{n:"02",id:"l2",title:"Самоконтроль: измерения, шкалы, дневник",meta:"50 мин · как следить за болезнью",
goal:"научиться инструментально контролировать ХОБЛ и вовремя замечать ухудшения.",
content:'<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>',
check:["Умею правильно измерять SpO₂ пульсоксиметром","Знаю свою зону риска по «светофору»","Веду дневник 2 раза в день"],
quiz:[{q:"1. Какая SpO₂ считается нормой?",a:"<b>≥ 95%</b>. Ниже 90% — красная зона."},
{q:"2. Сколько баллов в анкете CAT и что значит рост?",a:"От 0 до 40. Рост на <b>≥2 балла</b> — возможное ухудшение."},
{q:"3. Как часто заполнять дневник?",a:"<b>2–3 раза в день</b> — утром и вечером, плюс при ухудшении."}],
hw:"📊 Заполняйте <b>дневник пациента</b> всю неделю. Запишите свои обычные значения SpO₂ и CAT — это ваша «базовая линия»."},
{n:"03",id:"l3",title:"Лекарства и правильная ингаляция",meta:"60 мин · терапия и техника",
goal:"понимать свою схему лечения и безошибочно пользоваться ингалятором.",
content:'<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> не встряхнул; вдохнул рывком; не задержал дыхание; не прополоскал рот (риск кандидоза); путает базис и спасатель.</li>'+
'<li><b>Спейсер</b> — насадка-камера для ДАИ: упрощает технику и снижает побочные эффекты.</li>'+
'<li><b>Adherence (приверженность).</b> Нельзя прекращать базис «потому что стало лучше» — это путь к обострению.</li></ul>'+
'<div class="tip">💡 <b>Важно:</b> принесите все свои ингаляторы на приём — медсестра проверит вашу технику.</div>',
check:["Знаю, какой ингалятор базисный, а какой спасательный","Проверил технику ингаляции с медсестрой","Не пропускаю базисную терапию","Полощу рот после ИГКС"],
quiz:[{q:"1. Какой препарат принимают регулярно, а какой по потребности?",a:"<b>Базисные (ЛАМА/ЛАБА/комбинации) — регулярно</b>, спасательные (сальбутамол) — по потребности."},
{q:"2. Зачем полоскать рот после ИГКС?",a:"Чтобы предотвратить <b>кандидоз полости рта</b> и осиплость."},
{q:"3. Можно ли бросить базис, если стало легче?",a:"<b>Нет.</b> Отмена базиса ведёт к возврату симптомов и обострению."}],
hw:"🎥 Снимите на телефон, как вы пользуетесь ингалятором, и покажите медсестре. Составьте список всех своих препаратов с временем приёма."},
{n:"04",id:"l4",title:"Дыхательная гимнастика и физическая активность",meta:"50 мин · реабилитация",
goal:"снизить одышку, укрепить дыхательные мышцы и повысить толерантность к нагрузке.",
content:'<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>',
check:["Делаю дыхание через сжатые губы при одышке","Делаю гимнастику 3–4 раза в день","Гуляю каждый день минимум 20 минут","Использую «разговорный тест» для темпа"],
quiz:[{q:"1. Как дышать при одышке первым делом?",a:"<b>Дыхание через сжатые губы</b>: вдох носом 2 сек, выдох через губы 4 сек."},
{q:"2. Что такое «разговорный тест»?",a:"Если во время нагрузки <b>можете говорить</b> — темп нормальный; если задыхаетесь — снизьте."},
{q:"3. Сколько длится программа лёгочной реабилитации?",a:"<b>6–8 недель</b>."}],
hw:"🏃 Составьте <b>комплекс на день</b>: 3 подхода дыхательной гимнастики + одна прогулка с учётом разговорного теста."},
{n:"05",id:"l5",title:"Питание, отказ от курения, вакцинация, триггеры",meta:"50 мин · устранение факторов",
goal:"устранить модифицируемые факторы риска и укрепить организм.",
content:'<ul>'+
'<li><b>Питание при ХОБЛ.</b> Жевать и переваривать еду — работа, требующая кислорода.<ul><li>Ешьте <b>часто и небольшими порциями</b> (4–5 раз)</li><li>Достаточно <b>белка</b> (1–1,5 г/кг)</li><li>При снижении веса — калорийные перекусы</li><li>При отёках — меньше соли</li></ul></li>'+
'<li><b>Отказ от курения — главное вмешательство.</b> Замедляет болезнь на любой стадии.<ul><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>',
check:["Назначена дата отказа от курения","Привит от гриппа и пневмококка","Ем 4–5 раз небольшими порциями, слежу за белком","Устранил домашние триггеры"],
quiz:[{q:"1. Самое эффективное лечение для замедления ХОБЛ?",a:"<b>Отказ от курения</b> — на любой стадии."},
{q:"2. Почему при ХОБЛ рекомендуют есть часто и понемногу?",a:"Потому что <b>приём пищи требует кислорода</b> и утомляет."},
{q:"3. Какие прививки нужны пациенту с ХОБЛ?",a:"<b>Грипп</b> (ежегодно), <b>пневмококк</b>, <b>COVID-19</b>."}],
hw:"🚭 Составьте <b>план отказа от курения</b> (дата, методы, поддержка). Ведите <b>дневник питания</b> 3 дня."},
{n:"06",id:"l6",title:"Обострения: ранние признаки, план действий, красные флаги",meta:"60 мин · самое важное занятие",
goal:"уметь распознать обострение и действовать по плану, не дожидаясь госпитализации.",
content:'<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></ul>'+
'<div class="tip danger">🚑 <b>Не терпите ухудшение.</b> Раннее действие по плану снижает риск госпитализации.</div>',
check:["План действий «светофор» распечатан и на видном месте","Спасательный ингалятор всегда с собой","Знаю ранние признаки обострения","Знаю, когда вызывать скорую"],
quiz:[{q:"1. Главная причина обострений ХОБЛ?",a:"<b>Респираторные инфекции</b> — 70–80%."},
{q:"2. При каких симптомах стартуют антибиотики по плану?",a:"При <b>гнойной мокроте</b> + увеличении её объёма и/или одышки. По назначению врача!"},
{q:"3. Когда вызывать скорую?",a:"При <b>SpO₂ &lt;88%</b> &gt;5 мин, одышке в покое без эффекта бронхолитика, спутанности сознания."}],
hw:"📝 Составьте с врачом <b>персональный план действий</b>: пороги зон, дозы спасателя, когда и какие ГКС/антибиотики начинать, телефоны. Повесьте на холодильник."},
{n:"07",id:"l7",title:"Жизнь с ХОБЛ: психология, близкие, путешествия, права",meta:"45 мин · качество жизни",
goal:"сохранить социальную активность, настроение и качество жизни с болезнью.",
content:'<ul>'+
'<li><b>Тревога, депрессия и паника при одышке.</b> Страх усиливает одышку. Разрывайте круг: дыхание через сжатые губы, положение ортопноэ, техники расслабления. При стойкой подавленности обратитесь к врачу.</li>'+
'<li><b>Поддержка близких и групп самопомощи.</b> Родные должны знать ваш план действий.</li>'+
'<li><b>Сон.</b> Приподнятое изголовье; О₂-терапия по схеме на ночь. При храпе и дневной сонливости обсудите СОАС.</li>'+
'<li><b>Сексуальная жизнь.</b> Выбирайте время и позиции с меньшей нагрузкой; используйте бронхолитик beforehand.</li>'+
'<li><b>Путешествия.</b><ul><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>',
check:["Знаю техники расслабления при тревоге/одышке","Родные знают мой план действий","Обсудил с врачом сопутствующие болезни и права","Составил личный план самопомощи на месяц"],
quiz:[{q:"1. Что делать при панике и нарастающей одышке?",a:"<b>Дыхание через сжатые губы, положение ортопноэ, расслабление</b>."},
{q:"2. Куда класть лекарства в поездке?",a:"<b>В ручную кладь</b>, с запасом и рецептом."},
{q:"3. Какие сопутствующие болезни часто идут с ХОБЛ?",a:"<b>ССС, остеопороз, диабет, саркопения</b>."}],
hw:"📅 Составьте <b>личный план самопомощи на месяц</b>: цели и контрольные даты. Поздравляем — вы прошли курс!"}
],
handouts:{
"h-plan":{title:"План действий при ХОБЛ (светофор)",html:function(){return ''+
'<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:function(){return ''+
'<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:function(){return ''+
'<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></ul>'+
'<div class="zone y"><b>🏃 Нагрузка:</b> «разговорный тест» — если можете говорить во время ходьбы, темп подходящий. Гуляйте ежедневно минимум 20 минут.</div>';}},
"h-diary":{title:"Дневник пациента (шаблон на неделю)",html:function(){return ''+
'<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>'+
diaryRows(["Понедельник — утро","Понедельник — вечер","Вторник — утро","Вторник — вечер","Среда — утро","Среда — вечер","Четверг — утро","Четверг — вечер","Пятница — утро","Пятница — вечер","Суббота — утро","Суббота — вечер","Воскресенье — утро","Воскресенье — вечер"])+'</table>'+
'<p style="font-size:13px;color:#5B6573">Одышка mMRC: 0 — нет, 1 — при быстрой ходьбе, 2 — иду медленнее, 3 — останавливаюсь ~100 м, 4 — не могу выйти из дома.</p>';}},
"h-life":{title:"Питание и отказ от курения",html:function(){return ''+
'<h2>🥗 Питание при ХОБЛ</h2><ul><li>Ешьте часто, небольшими порциями — 4–5 раз в день.</li><li>Достаточно белка (1–1,5 г/кг): мясо, рыба, яйца, молочное.</li><li>При снижении веса — калорийные перекусы: орехи, масло, сыр.</li><li>При отёках — меньше соли.</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>';}},
"h-summary":{title:"Итоговая памятка выпускника Школы ХОБЛ",html:function(){return ''+
'<p>Поздравляем! Вы освоили основы самоменеджмента. Краткая шпаргалка:</p>'+
'<h2>📅 Мой день при ХОБЛ</h2>'+
timelineHtml([{time:"🌅 Утро",items:["Базисный ингалятор","SpO₂/АД/ЧСС","Дневник","Завтрак с белком"]},{time:"☀️ День",items:["Дыхательная гимнастика","Прогулка ≥20 мин","Обед + перекусы"]},{time:"🌙 Вечер",items:["Базисный ингалятор","Измерения + дневник","Гимнастика","Спасатель — рядом"]}])+
'<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>'+
'<div class="zone g"><b>Главное:</b> не паниковать, а действовать по плану. Вы — главный участник своей команды лечения.</div>';}}
},
handoutCards:[
{ic:"🚦",t:"План действий «светофор»",d:"Зоны риска, что делать при ухудшении, красные флаги и когда вызывать скорую.",id:"h-plan"},
{ic:"💊",t:"Техника ингаляции",d:"Пошаговая техника ДАИ, частые ошибки, спейсер.",id:"h-inhal"},
{ic:"🌬",t:"Дыхательная гимнастика",d:"Диафрагмальное дыхание, дыхание через сжатые губы, положения, комплекс.",id:"h-breath"},
{ic:"📔",t:"Дневник пациента (шаблон)",d:"Таблица на неделю: SpO₂, АД, ЧСС, ЧДД, одышка, мокрота, препараты.",id:"h-diary"},
{ic:"🥗",t:"Питание и отказ от курения",d:"Принципы питания, план отказа от курения, вакцинация.",id:"h-life"},
{ic:"🎓",t:"Итоговая памятка выпускника",d:"Краткая шпаргалка по всем ключевым навыкам курса.",id:"h-summary"}
]
};
/* ============ ДАННЫЕ: ҚАЗАҚША ============ */
var KZ={
ui:{brand:"ХОБЛ мектебі",eyebrow:"🎓 Денсаулық мектебі · ПМСП",heroTitle:"ХОБЛ-мен науқастарға арналған Денсаулық мектебі",
heroLead:"Өзін-өзі басқарудың барлық аспектілері бойынша 7 сабақтан тұратын оқу курсы. Сырқаттық обструктивті өкпе ауруы (ХОБЛ) бар науқасқа ауруды бақылап, асқынуларды азайтып, өмір сапасын сақтауға көмектеседі.",
sL:"сабақ",sD:"әр сабақ",sF:"тегін",start:"Оқуды бастау",prog:"Курс бағдарламасы",
ovTitle:"Сіз не үйренесіз",ovLead:"Курстан кейін ауруды өзіңіз бақылай аласыз, дәрілерді дұрыс қабылдайсыз, асқынуды таниды және жоспар бойынша әрекет етесіз.",
navTitle:"Бағдарлама · 7 сабақ",lessonN:"",goal:"Мақсаты",content:"Мазмұны",check:"Тексеру тізімі",quiz:"Өзіндік тексеру",hw:"Үй тапсырмасы",done:"Өтілді",
hTitle:"📄 Науқастарға таратуға арналған ескертпі парақтар",hLead:"Басып шығаруға (немесе PDF сақтауға) арналған бір беттік ескертпі парақтар. Сәйкес сабақтардан кейін науқастарға таратыңыз.",
print:"Басып шығару / PDF",hHdr:"ХОБЛ Денсаулық мектебі · Науқасқа арналған ескертпі парақ",
hFtr:"Ескертпі парақ ПМСП Денсаулық мектебінде таратылды · материал танысу сипатында, дәрігердің кеңесін алмастырмайды",
certTitle:"🎓 Сіз ХОБЛ Денсаулық мектебін аяқтадыңыз!",certText:"Өзін-өзі басқару негіздерін меңгердіңіз: ауруды бақылау, ингаляция, реабилитация, тамақтану және асқыну кезіндегі әрекет жоспары. Күнделікті жүргізіп, «бақдаршам» бойынша әрекет етуді жалғастырыңыз.",
footer:"ХОБЛ-мен науқастарға арналған Денсаулық мектебі · ПМСП · оқу курсы · материалдар танысу сипатында және дәрігердің кеңесін алмастырмайды",
ovItems:["Ауруыңызды және сатыларын түсінесіз","Көрсеткіштерді өлшеп, күнделік жүргізесіз","Ингаляция техникасын меңгересіз","Тыныс алу гимнастикасын жасайсыз","Тамақтанып, темекіні тастайсыз","Асқыну кезінде «бақдаршам» бойынша әрекет етесіз","Белсенділік пен көңіл-күйді сақтайсыз"]},
lessons:[
{n:"01",id:"l1",title:"ХОБЛ-мен танысу: өкпеде не болады",meta:"45 мин · аурудың негіздері",
goal:"ХОБЛ-дің мәнін және асқыну себептерін түсініп, емге саналы түрде қатысу.",
content:'<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>',
check:["ХОБЛ дегенді және ентігу неліктен пайда болғанын білемін","Өз сатымды/тобымды білемін (дәрігерден сұрау)","Темекіні тастау — басты ем екенін түсінемін"],
quiz:[{q:"1. ХОБЛ-нің басты себебі?",a:"<b>Темекі шегу</b> — жағдайлардың 80–90%-ын құрайды."},
{q:"2. ХОБЛ-ді толық емдеп бола ма?",a:"Жоқ, бронх өзгерістері <b>қайтымсыз</b>. Бірақ ауруды бақылап, баяулатуға болады."},
{q:"3. ХОБЛ астадан айырмашылығы неде?",a:"Астада бронх тарылуы <b>қайтымды</b>, ХОБЛ-де — негізінен жоқ."}],
hw:"📔 <b>Белгілер күнделігін</b> бастаңыз: бір апта бойы жөтел, қақырық, ентігу және оны қоздыратындарды жазыңыз."},
{n:"02",id:"l2",title:"Өзіндік бақылау: өлшеу, шкалалар, күнделік",meta:"50 мин · ауруды қалай қадағалау",
goal:"ХОБЛ-ді аспаптық бақылап, нашарлауды дер кезінде байқауды үйрену.",
content:'<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>',
check:["Пульсоксиметрмен SpO₂ дұрыс өлшей аламын","«Бақдаршам» бойынша өз аймағымды білемін","Күніне 2 рет күнделік жүргіземін"],
quiz:[{q:"1. Қалыпты SpO₂ қанша?",a:"<b>≥ 95%</b>. 90%-тан төмен — қызыл аймақ."},
{q:"2. CAT сауалнамасында қанша балл және өсу не білдіреді?",a:"0-ден 40-қа дейін. <b>≥2 баллға</b> өсу — мүмкін нашарлау."},
{q:"3. Күнделікті қанша жиі толтыру керек?",a:"<b>Күніне 2–3 рет</b> — таңертең және кешке."}],
hw:"📊 <b>Науқас күнделігін</b> бір апта толтырыңыз. Өзіңіздің қалыпты SpO₂ және CAT мәндерін жазыңыз — бұл «базалық сызығыңыз»."},
{n:"03",id:"l3",title:"Дәрілер және дұрыс ингаляция",meta:"60 мин · ем және техника",
goal:"ем схемасын түсініп, ингаляторды қателеспей пайдалануды меңгеру.",
content:'<ul>'+
'<li><b>Дәрі топтары:</b><ul><li><b>Бронхолитиктер</b> — бронхтарды кеңейтеді. Қысқа әсерлі (сальбутамол, фенотерол, ипратропий) — жедел көмек. Ұзақ әсерлі (ЛАМА, ЛАБА) — негізгі ем.</li><li><b>ИГКС</b> — қабынуды басады, әдетте ауыр ағымда қоспада.</li><li><b>Қоспалы:</b> ИГКС/ЛАБА, ЛАМА/ЛАБА, үштік терапия.</li><li><b>Басқалар:</b> рофлумиласт (ФДЭ-4), муколитиктер, О₂-терапия.</li></ul></li>'+
'<li><b>Негізгі vs құтқару терапиясы.</b> Негізгі — күн сайын, жақсы болғанда да (тастамау!). Құтқару — ентігу кезінде қажет бойынша.</li>'+
'<li><b>Ингалятор түрлері:</b> ДАИ, ДПИ, SMI, небулайзер.</li>'+
'<li><b>Жиі қателіктер:</b> шайқамады; дем алуды тартылып алды; тынысты ұстамады; ауызды шайқамады (кандидоз); негізгі мен құтқаруды шатастырды.</li>'+
'<li><b>Спейсер</b> — ДАИ-ға арналған камера-насадка: техниканы оңайлатып, жанама әсерлерін азайтады.</li>'+
'<li><b>Адгеренттілік.</b> «Жақсы болып жүр» деп негізгі емді тоқтатуға болмайды — бұл асқынуға апарыды.</li></ul>'+
'<div class="tip">💡 <b>Маңызды:</b> қабылдауға барлық ингаляторларыңызды әкеліңіз — медбике техникаңызды тексереді.</div>',
check:["Қай ингалятор негізгі, қайсысы құтқару екенін білемін","Ингаляция техникамды медбикемен тексердім","Негізгі емді өткізіп алмаймын","ИГКС-тен кейін ауызымды шайкам"],
quiz:[{q:"1. Қай дәріні тұрақты, қайсысын қажет бойынша қабылдайды?",a:"<b>Негізгі — тұрақты</b>, құтқарушы (сальбутамол) — қажет бойынша."},
{q:"2. ИГКС-тен кейін ауызды неге шайқайды?",a:"Ауыз қуысындағы <b>кандидозды</b> алдын алу үшін."},
{q:"3. Жеңілдегенде негізгі емді тоқтатуға бола ма?",a:"<b>Жоқ.</b> Негізгі емді тоқтату асқынуға әкеледі."}],
hw:"🎥 Ингаляторды қалай пайдаланатыныңызды телефонға түсіріп, медбикеге көрсетіңіз. Барлық дәрілеріңізді қабылдау уақытымен тізіңіз."},
{n:"04",id:"l4",title:"Тыныс алу гимнастикасы және дене белсенділігі",meta:"50 мин · реабилитация",
goal:"ентігуді азайтып, тыныс алу бұлшықеттерін мықтыландыру және жүктемеге төзімділікті арттыру.",
content:'<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>',
check:["Ентігу кезінде қысылған ерінмен тыныс аламын","Гимнастиканы күніне 3–4 рет жасаймын","Күн сайын кемінде 20 мин серуендеймін","Қарқын үшін «сөйлесу тестін» қолданамын"],
quiz:[{q:"1. Ентігу кезінде алдымен не істеу керек?",a:"<b>Қысылған ерінмен тыныс алу</b>: мұрынмен 2 сек, ерінмен 4 сек."},
{q:"2. «Сөйлесу тесті» дегеніміз не?",a:"Егер жүктеме кезінде <b>сөйлесе алсаңыз</b> — қарқын қалыпты."},
{q:"3. Өкпе реабилитациясы қанша уақытқа созылады?",a:"<b>6–8 апта</b>."}],
hw:"🏃 <b>Күндік кешенді</b> құрастырыңыз: 3 рет тыныс алу гимнастикасы + сөйлесу тесті бойынша бір серуен."},
{n:"05",id:"l5",title:"Тамақтану, темекіні тастау, егілу, триггерлер",meta:"50 мин · факторларды жою",
goal:"өзгертілуге болатын тәуекел факторларын жойып, организмді мықтыландыру.",
content:'<ul>'+
'<li><b>ХОБЛ кезіндегі тамақтану.</b> Тамақты шайнап қорыту — оттекті қажет ететін жұмыс.<ul><li><b>Жиі, шағын порциялармен</b> жеңіз (4–5 рет)</li><li>Жеткілікті <b>ақуыз</b> (1–1,5 г/кг)</li><li>Салмақ төмендегенде — калориялы тағамдар</li><li>Ісіктерде — тұзды азайтыңыз</li></ul></li>'+
'<li><b>Темекіні тастау — басты шаралардың бірі.</b> Кез келген сатыда ауруды баяулатады.<ul><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>',
check:["Темекіні тастау күні тағайындалды","Тұмау және пневмококкқа қарсы егілдім","Күніне 4–5 рет шағын порциямен, ақуызға назар аударамын","Үйдегі триггерлерді жойдым"],
quiz:[{q:"1. ХОБЛ-ді баяулатудың ең тиімді емі?",a:"<b>Темекіні тастау</b> — кез келген сатыда."},
{q:"2. ХОБЛ-де неге жиі, аз порциямен жеуге кеңес береді?",a:"Өйткені <b>тамақ қабылдау оттекті қажет етеді</b> және шаршатады."},
{q:"3. ХОБЛ-мен науқасқа қандай егулер қажет?",a:"<b>Тұмау</b> (жыл сайын), <b>пневмококк</b>, <b>COVID-19</b>."}],
hw:"🚭 <b>Темекіні тастау жоспарын</b> құрыңыз (күні, әдістері, қолдау). 3 күн <b>тамақтану күнделігін</b> жүргізіңіз."},
{n:"06",id:"l6",title:"Асқынулар: ерте белгілер, әрекет жоспары, қызыл жалаулар",meta:"60 мин · ең маңызды сабақ",
goal:"асқынуды тани біліп, госпитализацияны күтпей-ақ жоспар бойынша әрекет ету.",
content:'<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></ul>'+
'<div class="tip danger">🚑 <b>Нашарлауды шыдамаңыз.</b> Жоспар бойынша ерте әрекет госпитализация қаупін азайтады.</div>',
check:["«Бақдаршам» әрекет жоспары басылған және көрінетін жерде","Құтқарушы ингалятор әрқашан қолда","Асқынудың ерте белгілерін білемін","Жедел жәрдемді қашан шақыратынын білемін"],
quiz:[{q:"1. ХОБЛ асқынуларының басты себебі?",a:"<b>Тыныс алу инфекциялары</b> — 70–80%."},
{q:"2. Қандай белгілерде жоспар бойынша антибиотиктер басталады?",a:"<b>Іріңді қақырық</b> + көлемі және/немесе ентігу ұлғайғанда. Дәрігердің тағайындауы бойынша!"},
{q:"3. Жедел жәрдемді қашан шақыру керек?",a:"<b>SpO₂ &lt;88%</b> &gt;5 мин, тыныштықта ентігу басылмаса, сананың шатасуы кезінде."}],
hw:"📝 Дәрігермен бірге <b>жеке әрекет жоспарын</b> құрыңыз: аймақ шектері, құтқарушы дозасы, қандай ГКС/антибиотиктерді қашан бастау, телефондар. Тоңазытқышқа іліңіз."},
{n:"07",id:"l7",title:"ХОБЛ-мен өмір: психология, туыстар, саяхат, құқықтар",meta:"45 мин · өмір сапасы",
goal:"әлеуметтік белсенділікті, көңіл-күйді және аурумен өмір сапасын сақтау.",
content:'<ul>'+
'<li><b>Үрей, депрессия және ентігу кезіндегі дабыл.</b> Қорқыныш ентігуді күшейтеді. Шеңберді үзіңіз: қысылған ерінмен тыныс алу, ортопноэ қалпы, босаңсу техникалары. Тұрақты мұңдылық/үрей болса дәрігерге барыңыз.</li>'+
'<li><b>Туыстардың қолдауы және өзара көмек топтары.</b> Туыстарыңыз әрекет жоспарыңызды білсін.</li>'+
'<li><b>Ұйқы.</b> Бас жағын көтеріңкі; О₂-терапия тағайындалса — түнде пайдаланыңыз. Қорылдау мен күндізгі ұйқышылдықта СОАС-ты талқылаңыз.</li>'+
'<li><b>Жыныстық өмір.</b> Шаршамаған уақытты таңдаңыз; аз жүктемелі қалыптар; алдын ала бронхолитик.</li>'+
'<li><b>Саяхат.</b><ul><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>',
check:["Үрей/ентігу кезінде босаңсу техникаларын білемін","Туыстарым әрекет жоспарымды біледі","Дәрігермен қосарлы ауруларды және құқықтарды талқыладым","Бір айға арналған өзін-өзі көмек жоспарын құрдым"],
quiz:[{q:"1. Дабыл мен ентігу үдегенде не істеу керек?",a:"<b>Қысылған ерінмен тыныс алу, ортопноэ қалпы, босаңсу</b>."},
{q:"2. Саяхатта дәрілерді қайда салу керек?",a:"<b>Қол жүгіне</b>, қормен және рецепт/выпискамен."},
{q:"3. ХОБЛ-мен қандай қосарлы аурулар жиі жүреді?",a:"<b>ЖҚК, остеопороз, қант диабеті, саркопения</b>."}],
hw:"📅 <b>Бір айлық өзін-өзі көмек жоспарын</b> құрыңыз: мақсаттар және бақылау күндері. Құттықтаймыз — курсты аяқтадыңыз!"}
],
handouts:{
"h-plan":{title:"ХОБЛ кезіндегі әрекет жоспары (бақдаршам)",html:function(){return ''+
'<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:function(){return ''+
'<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:function(){return ''+
'<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></ul>'+
'<div class="zone y"><b>🏃 Жүктеме:</b> «сөйлесу тестін» қолданыңыз — егер жүру кезінде сөйлесе алсаңыз, қарқын лайықты. Күн сайын кемінде 20 мин серуендеңіз.</div>';}},
"h-diary":{title:"Науқас күнделігі (бір апта үлгісі)",html:function(){return ''+
'<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>'+
diaryRows(["Дүйсенбі — таңертең","Дүйсенбі — кешке","Сейсенбі — таңертең","Сейсенбі — кешке","Сәрсенбі — таңертең","Сәрсенбі — кешке","Бейсенбі — таңертең","Бейсенбі — кешке","Жұма — таңертең","Жұма — кешке","Сенбі — таңертең","Сенбі — кешке","Жексенбі — таңертең","Жексенбі — кешке"])+'</table>'+
'<p style="font-size:13px;color:#5B6573">Ентігу mMRC: 0 — жоқ, 1 — жылдам жүргенде, 2 — баяу жүремін, 3 — ~100 м тоқтаймын, 4 — үйден шыға алмаймын.</p>';}},
"h-life":{title:"Тамақтану және темекіні тастау",html:function(){return ''+
'<h2>🥗 ХОБЛ кезіндегі тамақтану</h2><ul><li>Жиі, шағын порциялармен жеңіз — күніне 4–5 рет.</li><li>Жеткілікті ақуыз (1–1,5 г/кг): ет, балық, жұмыртқа, сүт.</li><li>Салмақ төмендегенде — калориялы тағамдар: жаңғақ, май, ірімшік.</li><li>Ісіктерде — тұзды азайтыңыз.</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>';}},
"h-summary":{title:"ХОБЛ мектебін бітірушінің қорытынды парағы",html:function(){return ''+
'<p>Құттықтаймыз! Өзін-өзі басқару негіздерін меңгердіңіз. Қысқа жадынама:</p>'+
'<h2>📅 ХОБЛ-мен күнім</h2>'+
timelineHtml([{time:"🌅 Таңертең",items:["Негізгі ингалятор","SpO₂/АҚ/ЖЖС","Күнделік","Ақуызды таңертеңгі"]},{time:"☀️ Күндіз",items:["Тыныс алу гимнастикасы","Серуен ≥20 мин","Түскі + жеңіл тағам"]},{time:"🌙 Кешке",items:["Негізгі ингалятор","Өлшеу + күнделік","Гимнастика","Құтқарушы — қолда"]}])+
'<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>'+
'<div class="zone g"><b>Бастысы:</b> дабылдамай, жоспар бойынша әрекет ету. Сіз — өз ем командасыңыздың басты қатысушысыз.</div>';}}
},
handoutCards:[
{ic:"🚦",t:"Әрекет жоспары «бақдаршам»",d:"Тәуекел аймақтары, нашарлағанда не істеу, қызыл жалаулар.",id:"h-plan"},
{ic:"💊",t:"Ингаляция техникасы",d:"ДАИ техникасы қадам бойынша, жиі қателіктер, спейсер.",id:"h-inhal"},
{ic:"🌬",t:"Тыныс алу гимнастикасы",d:"Көкбауырлық тыныс, қысылған ерінмен тыныс, қалыптар, кешен.",id:"h-breath"},
{ic:"📔",t:"Науқас күнделігі (үлгі)",d:"Бір аптаға арналған кесте: SpO₂, АҚ, ЖЖС, тыныс жиілігі, ентігу.",id:"h-diary"},
{ic:"🥗",t:"Тамақтану және темекіні тастау",d:"Тамақтану принциптері, темекіні тастау жоспары, егілу.",id:"h-life"},
{ic:"🎓",t:"Бітірушінің қорытынды парағы",d:"Курстың барлық негізгі дағдылары бойынша қысқа жадынама.",id:"h-summary"}
]
};
var PACKS={ru:RU,kz:KZ};
var KEY="copd_school_bi_v1";
var state={lang:"ru",done:{}};
try{ var raw=localStorage.getItem(KEY); if(raw){ var s=JSON.parse(raw); state.lang=s.lang||"ru"; state.done=s.done||{}; } }catch(e){}
var app=$("#app");
function $(s,r){return (r||document).querySelector(s);}
function P(){ return PACKS[state.lang]; }
function esc(s){return s;}
function render(){
document.documentElement.lang = state.lang==="ru"?"ru":"kk";
$("#brandTxt").textContent = P().ui.brand;
$("#langRu").classList.toggle("active", state.lang==="ru");
$("#langKz").classList.toggle("active", state.lang==="kz");
app.innerHTML="";
app.appendChild(renderHero());
app.appendChild(renderOverview());
app.appendChild(renderNav());
P().lessons.forEach(function(ls){ app.appendChild(renderLesson(ls)); });
app.appendChild(renderHandouts());
app.appendChild(renderCert());
var f=document.createElement("footer"); f.className="footer"; f.textContent=P().ui.footer; app.appendChild(f);
syncChecks();
update();
}
function renderHero(){
var u=P().ui; var s=document.createElement("section"); s.className="hero";
s.innerHTML='<span class="eyebrow">'+u.eyebrow+'</span>'+
'<h1>'+u.heroTitle+'</h1>'+
'<p class="lead">'+u.heroLead+'</p>'+
'<div class="hero-stats"><div class="s"><div class="n">7</div><div class="l">'+u.sL+'</div></div>'+
'<div class="s"><div class="n">45–60 мин</div><div class="l">'+u.sD+'</div></div>'+
'<div class="s"><div class="n">0 ₸</div><div class="l">'+u.sF+'</div></div></div>'+
'<div class="hero-cta"><a class="btn" href="#l1">'+u.start+'</a><a class="btn ghost" href="#lessons">'+u.prog+'</a></div>';
return s;
}
function renderOverview(){
var u=P().ui; var s=document.createElement("section"); s.className="overview";
var li=u.ovItems.map(function(i){return '<li>'+i+'</li>';}).join("");
s.innerHTML='<h2>'+u.ovTitle+'</h2><p>'+u.ovLead+'</p><ul>'+li+'</ul>';
return s;
}
function renderNav(){
var u=P().ui; var s=document.createElement("section"); s.className="nav-card"; s.id="lessons";
var nav=""; P().lessons.forEach(function(ls){ nav+='<a href="#'+ls.id+'">'+u.lessonN+ls.n+'</a>'; });
s.innerHTML='<h3>'+u.navTitle+'</h3><div class="lessons-nav">'+nav+'</div>';
return s;
}
function renderLesson(ls){
var u=P().ui; var s=document.createElement("section"); s.className="lesson"; s.id=ls.id;
var chk=ls.check.map(function(c){return '<label><input type="checkbox"><span>'+c+'</span></label>';}).join("");
var qz=ls.quiz.map(function(q){return '<details><summary>'+q.q+'</summary><div class="ans">'+q.a+'</div></details>';}).join("");
s.innerHTML=
'<div class="lesson-head"><span class="lnum">'+ls.n+'</span>'+
'<div><h2>'+ls.title+'</h2><div class="lmeta">'+ls.meta+'</div></div>'+
'<label class="done-label"><input type="checkbox" data-l="'+ls.id+'-d"> '+u.done+'</label></div>'+
'<div class="goal">🎯 <b>'+u.goal+':</b> '+ls.goal+'</div>'+
'<h3>📋 '+u.content+'</h3>'+ls.content+
'<h3>✅ '+u.check+'</h3><div class="checklist">'+chk+'</div>'+
'<h3>❓ '+u.quiz+'</h3><div class="quiz">'+qz+'</div>'+
'<h3>🏠 '+u.hw+'</h3><div class="hw">'+ls.hw+'</div>';
return s;
}
function renderHandouts(){
var u=P().ui; var s=document.createElement("section"); s.className="handouts";
var cards=P().handoutCards.map(function(c){
return '<div class="handout-card"><div class="hic">'+c.ic+'</div><h3>'+c.t+'</h3><p>'+c.d+'</p>'+
'<button class="btn" onclick="printHandout(\''+c.id+'\')">'+u.print+'</button></div>';
}).join("");
s.innerHTML='<h2>'+u.hTitle+'</h2><p>'+u.hLead+'</p><div class="handout-grid">'+cards+'</div>';
return s;
}
function renderCert(){
var u=P().ui; var s=document.createElement("section"); s.className="certificate hidden"; s.id="cert";
s.innerHTML='<h2>'+u.certTitle+'</h2><p>'+u.certText+'</p>';
return s;
}
function syncChecks(){
var checks=document.querySelectorAll("input[data-l]");
checks.forEach(function(cb){
var key=cb.getAttribute("data-l");
cb.checked=!!state.done[key];
cb.addEventListener("change",function(){
state.done[key]=cb.checked;
localStorage.setItem(KEY,JSON.stringify(state));
update();
var sec=cb.closest(".lesson");
if(sec) sec.classList.toggle("done", !!state.done[key+"-d"]);
});
if(key.indexOf("-d")>0){
var sec=cb.closest(".lesson");
if(sec) sec.classList.toggle("done", !!state.done[key]);
}
});
}
function update(){
var done=0; for(var i=1;i<=7;i++) if(state.done["l"+i+"-d"]) done++;
var pct=Math.round(done/7*100);
$("#pfill").style.width=pct+"%";
$("#ptxt").textContent=done+"/7";
$("#cert").classList.toggle("hidden", done<7);
}
/* ============ ПЕЧАТЬ ПАМЯТКИ ============ */
function printHandout(id){
var h=P().handouts[id]; if(!h) return;
var w=window.open("","_blank");
var u=P().ui;
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="'+(state.lang==="ru"?"ru":"kk")+'"><head><meta charset="utf-8"><title>'+h.title+'</title><style>'+css+'</style></head><body>');
w.document.write('<div class="hdr"><h1>'+u.hHdr+'</h1><small>'+h.title+'</small></div>');
w.document.write(h.html());
w.document.write('<div class="ftr">'+u.hFtr+' · '+new Date().toLocaleDateString("ru-RU")+'</div>');
w.document.write('</body></html>');
w.document.close(); w.focus();
setTimeout(function(){ try{w.print();}catch(e){} }, 350);
}
/* переключатели языка */
$("#langRu").onclick=function(){ state.lang="ru"; localStorage.setItem(KEY,JSON.stringify(state)); render(); };
$("#langKz").onclick=function(){ state.lang="kz"; localStorage.setItem(KEY,JSON.stringify(state)); render(); };
render();
</script>
</body>
</html>