copd-school-kz/index.html

770 lines
67 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="kk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ХОБЛ-мен науқастарға арналған Денсаулық мектебі · оқу курсы</title>
<meta name="description" content="ПМСП денсаулық мектептеріне арналған ХОБЛ-мен науқастарға арналған оқу курсы. Өзін-өзі басқарудың барлық аспектілері бойынша 7 сабақ.">
<style>
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--gray-200:#E4E8EE;--green:#16C784;--green-50:#E6F9F0;--amber:#F5A623;--amber-50:#FDF3E2;--red:#EA3943;--red-50:#FCEAEC}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:#f7f8fa}
a{color:inherit}
.topbar{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.topbar-inner{max-width:1040px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand .mk{width:32px;height:32px;border-radius:8px;background:rgba(0,229,255,.14);display:grid;place-items:center;color:var(--cyan);font-size:17px;border:1px solid rgba(0,229,255,.3)}
.progress-wrap{display:flex;align-items:center;gap:12px;min-width:220px;flex:1;max-width:340px}
.progress-track{flex:1;height:9px;background:#1a1f2a;border-radius:6px;overflow:hidden}
.progress-fill{height:100%;background:var(--cyan);width:0;transition:width .3s}
.progress-txt{font-size:13px;color:#9aa3b2;white-space:nowrap;font-weight:600}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px 80px}
.hero{background:var(--ink);color:#fff;border-radius:20px;padding:48px 40px;margin:24px 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 85% -10%,rgba(0,229,255,.2),transparent 60%);pointer-events:none}
.hero>*{position:relative}
.hero .eyebrow{display:inline-block;background:rgba(0,229,255,.12);color:var(--cyan);padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:18px;border:1px solid rgba(0,229,255,.25)}
.hero h1{font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px}
.hero p.lead{font-size:18px;color:#9aa3b2;max-width:620px;margin-bottom:24px}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:24px}
.hero-stats .s .n{font-size:30px;font-weight:800;color:var(--cyan);line-height:1}
.hero-stats .s .l{font-size:13px;color:#9aa3b2;margin-top:4px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:var(--ink);padding:13px 24px;border-radius:9px;font-weight:700;text-decoration:none;font-size:16px;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:#1bf0ff}
.btn.ghost{background:transparent;color:#fff;border:2px solid #3a4150}
.btn.ghost:hover{background:#1a1f2a}
.overview{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:26px;margin-bottom:24px}
.overview h2{font-size:22px;font-weight:800;margin-bottom:14px}
.overview p{color:var(--gray-500);margin-bottom:16px}
.overview ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.overview li{padding-left:24px;position:relative;color:var(--ink);font-size:15px}
.overview li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.nav-card{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:18px 22px;margin-bottom:24px}
.nav-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin-bottom:12px}
.lessons-nav{display:flex;gap:8px;flex-wrap:wrap}
.lessons-nav a{text-decoration:none;background:var(--gray-100);padding:7px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--gray-500)}
.lessons-nav a:hover{background:var(--cyan-50);color:var(--ink)}
.lesson{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:30px;margin-bottom:22px;scroll-margin-top:90px}
.lesson.done{border-color:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.lesson-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.lnum{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--cyan);display:grid;place-items:center;font-weight:800;font-size:18px}
.lesson.done .lnum{background:var(--green);color:#fff}
.lesson-head h2{font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.lmeta{font-size:14px;color:var(--gray-500);margin-top:3px}
.done-label{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--gray-500);cursor:pointer;user-select:none}
.done-label input{width:20px;height:20px;accent-color:var(--green);cursor:pointer}
.lesson.done .done-label{color:var(--green)}
.goal{background:var(--cyan-50);border-left:4px solid var(--cyan);padding:13px 16px;border-radius:8px;font-size:15px;margin-bottom:22px}
.goal b{color:var(--ink)}
.lesson h3{font-size:17px;font-weight:700;margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.lesson p{margin-bottom:12px;color:var(--ink)}
.lesson ul{margin:0 0 14px;padding-left:4px;list-style:none}
.lesson ul li{position:relative;padding:5px 0 5px 26px;color:var(--gray-500);font-size:15.5px}
.lesson ul li::before{content:"•";position:absolute;left:8px;color:var(--cyan);font-weight:800;font-size:20px;line-height:1}
.lesson ul li b{color:var(--ink)}
.lesson ul li ul{margin:6px 0 2px}
.lesson ul li ul li{padding-left:22px;font-size:14.5px}
.lesson ul li ul li::before{content:"→";left:0;color:var(--gray-500);font-size:14px}
.tip{background:var(--green-50);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:14.5px}
.tip.warn{background:var(--amber-50)}
.tip.danger{background:var(--red-50)}
.tip b{color:var(--ink)}
.checklist{list-style:none;display:grid;gap:8px}
.checklist label{display:flex;align-items:flex-start;gap:10px;background:var(--gray-100);padding:11px 14px;border-radius:9px;font-size:15px;cursor:pointer}
.checklist input{margin-top:3px;width:18px;height:18px;accent-color:var(--cyan)}
.checklist input:checked + span{text-decoration:line-through;color:var(--gray-500)}
.quiz details{border:1px solid var(--gray-200);border-radius:10px;padding:13px 16px;margin-bottom:8px;overflow:hidden}
.quiz details summary{font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.quiz details summary::-webkit-details-marker{display:none}
.quiz details summary::after{content:"жауап";float:right;font-size:12px;color:var(--cyan);font-weight:700;background:var(--cyan-50);padding:3px 9px;border-radius:6px}
.quiz details[open] summary::after{content:"жасыру"}
.quiz details .ans{margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-100);font-size:14.5px;color:var(--gray-500)}
.quiz details .ans b{color:var(--green)}
.hw{background:var(--ink);color:#fff;border-radius:12px;padding:16px 18px;font-size:15px}
.hw b{color:var(--cyan)}
.ztbl{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:14px}
.ztbl th{text-align:left;background:var(--gray-100);padding:9px 11px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-500)}
.ztbl td{padding:10px 11px;border-bottom:1px solid var(--gray-100)}
.ztr-r td:first-child{border-left:4px solid var(--red)}
.ztr-y td:first-child{border-left:4px solid var(--amber)}
.ztr-g td:first-child{border-left:4px solid var(--green)}
.footer{padding:32px 0;border-top:1px solid var(--gray-200);color:var(--gray-500);font-size:14px;text-align:center}
.certificate{background:linear-gradient(135deg,#fff,var(--cyan-50));border:2px dashed var(--cyan);border-radius:16px;padding:30px;text-align:center;margin:24px 0}
.certificate h2{font-size:22px;font-weight:800;margin-bottom:8px}
.certificate p{color:var(--gray-500);font-size:15px}
.certificate.hidden{display:none}
.handouts{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:26px;margin-bottom:24px}
.handouts h2{font-size:22px;font-weight:800;margin-bottom:6px}
.handouts>p{color:var(--gray-500);font-size:15px;margin-bottom:18px}
.handout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.handout-card{border:1px solid var(--gray-200);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.handout-card .hic{font-size:28px}
.handout-card h3{font-size:16px;font-weight:700;margin:0}
.handout-card p{font-size:13.5px;color:var(--gray-500);margin:0;flex:1}
.handout-card .btn{align-self:flex-start;font-size:14px;padding:9px 16px}
.handout-template{display:none}
@media(max-width:760px){
.hero{padding:32px 22px}.hero h1{font-size:26px}
.overview ul{grid-template-columns:1fr}.lesson{padding:22px}.done-label{margin-left:0;width:100%}
.handout-grid{grid-template-columns:1fr}
}
</style>
</head>
<body>
<header class="topbar">
<div class="topbar-inner">
<div class="brand"><span class="mk"></span>ХОБЛ мектебі</div>
<div class="progress-wrap">
<div class="progress-track"><div class="progress-fill" id="pfill"></div></div>
<div class="progress-txt" id="ptxt">0/7</div>
</div>
</div>
</header>
<div class="wrap">
<section class="hero">
<span class="eyebrow">🎓 Денсаулық мектебі · ПМСП</span>
<h1>ХОБЛ-мен науқастарға арналған Денсаулық мектебі</h1>
<p class="lead">Өзін-өзі басқарудың барлық аспектілері бойынша 7 сабақтан тұратын оқу курсы. Сырқаттық обструктивті өкпе ауруы (ХОБЛ) бар науқасқа ауруды бақылап, асқынуларды азайтып, өмір сапасын сақтауға көмектеседі.</p>
<div class="hero-stats">
<div class="s"><div class="n">7</div><div class="l">сабақ</div></div>
<div class="s"><div class="n">4560 мин</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>Темекі шегу — жағдайдың ≈ 8090%-ы (бас фактор!)</li>
<li>Пассивті шегу, тұрмыстық және көше түтіні</li>
<li>Кәсіби зияндылықтар: шаң, химикаттар, булар</li>
<li>Бөлме ішіндегі ауаның ластануы (биоотын)</li>
<li>Генетика: α1-антитрипсин тапшылығы (сирек)</li>
</ul>
</li>
<li><b>Негізгі белгілері:</b> созылмалы жөтел, қақырық, ентігу (алдымен жүктемеде, кейін тыныштықта), ысқырықты тыныс, шаршағыштық.</li>
<li><b>ХОБЛ астадан айырмашылығы:</b> астада бронх тарылуы қайтымды, ХОБЛ-де — негізінен қайтымсыз. Сондықтан ХОБЛ-ді «емдеп» болмайды, бірақ бақылап болады.</li>
<li><b>Сатылары мен топтары.</b> 14 сатылары спирометриядағы ОФВ₁ бойынша анықталады. AD топтары — белгілері (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> — жағдайлардың 8090%-ын құрайды.</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>9094% — назар аймағы</li><li>&lt;90% — жедел</li></ul>
Тыныштықта, жылы қолмен, тырнақтағы лаксыз өлшеңіз.</li>
<li><b>Спирометрия (ОФВ₁) және пикфлоуметрия (ПСВ).</b> Өкпе функциясын бағалайды. Ауруханада жасалады; пикфлоуметрді үйде ұстауға болады.</li>
<li><b>CAT сауалнамасы</b> — ХОБЛ-нің өмірге әсерін бағалайтын 8 сұрақ (жөтел, қақырық, ентігу, белсенділік, ұйқы, энергия). Қорытынды 040: ≤9 — төмен әсер, 1020 — орташа, &gt;20 — жоғары. ≥2 баллға өсу — нашарлау сигналы.</li>
<li><b>Ентігу шкаласы mMRC</b> (04): «ентігу жоқ»-тан «үйден шыға алмаймын»-ға дейін.</li>
<li><b>Науқас күнделігі.</b> Не жазу керек: SpO₂, АҚ, ЖЖС, тыныс жиілігі, ентігу, қақырық, дәрілерді қабылдау. Жиілігі — күніне 23 рет (таңертең және кешке).</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>9094%</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>Күніне 23 рет</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>Дем алуды 35 сек жалғастыру, тынысты 10 сек ұстау</li>
<li>ИГКС-тен кейін — ауызды сумен шайкау</li>
</ul>
</li>
<li><b>Жиі қателіктер:</b> шайқамады; дем алуды тартылып алды; тынысты ұстамады; ауызды шайқамады (кандидоз қаупі); негізгі мен құтқаруды шатастырады.</li>
<li><b>Спейсер</b> — ДАИ-ға арналған камера-насадка: техниканы оңайлатып, жанама әсерлерін азайтады. Барлығына ұсынылады.</li>
<li><b>Адгеренттілік.</b> «Жақсы болып жүр» деп негізгі емді тоқтатуға болмайды — бұл асқынуға апарыды.</li>
</ul>
<div class="tip">💡 <b>Маңызды:</b> қабылдауға барлық ингаляторларыңызды әкеліңіз — медбике техникаңызды тексереді және қажет болса қайта көрсетеді.</div>
<h3>✅ Тексеру тізімі</h3>
<div class="checklist">
<label><input type="checkbox"><span>Қай ингалятор негізгі, қайсысы құтқару екенін білемін</span></label>
<label><input type="checkbox"><span>Ингаляция техникамды медбикемен тексердім</span></label>
<label><input type="checkbox"><span>Негізгі емді өткізіп алмаймын</span></label>
<label><input type="checkbox"><span>ИГКС-тен кейін ауызымды шайкам</span></label>
</div>
<h3>❓ Өзіндік тексеру</h3>
<div class="quiz">
<details><summary>1. Қай дәріні тұрақты, қайсысын қажет бойынша қабылдайды?</summary><div class="ans"><b>Негізгі (ЛАМА/ЛАБА/қоспалар) — тұрақты</b>, құтқарушы (сальбутамол) — ентігу кезінде қажет бойынша.</div></details>
<details><summary>2. ИГКС-тен кейін ауызды неге шайқайды?</summary><div class="ans">Ауыз қуысындағы <b>кандидозды (ауыздың ішіңірауын) және дауыстың қарлығуын</b> алдын алу үшін.</div></details>
<details><summary>3. Жеңілдегенде негізгі емді тоқтатуға бола ма?</summary><div class="ans"><b>Жоқ.</b> Негізгі емді тоқтату белгілердің қайтып келуіне және асқынуға әкеледі.</div></details>
</div>
<h3>🏠 Үй тапсырмасы</h3>
<div class="hw">🎥 Ингаляторды қалай пайдаланатыныңызды телефонға түсіріп, медбикеге көрсетіңіз. Барлық дәрілеріңізді қабылдау уақытымен тізіңіз.</div>
</section>
<!-- =================== 4-Сабақ =================== -->
<section class="lesson" id="l4">
<div class="lesson-head">
<span class="lnum">04</span>
<div><h2>Тыныс алу гимнастикасы және дене белсенділігі</h2><div class="lmeta">50 мин · реабилитация</div></div>
<label class="done-label"><input type="checkbox" data-l="4"> Өтілді</label>
</div>
<div class="goal">🎯 <b>Мақсаты:</b> ентігуді азайтып, тыныс алу бұлшықеттерін мықтыландыру және жүктемеге төзімділікті арттыру.</div>
<h3>📋 Мазмұны</h3>
<ul>
<li><b>Көкбауырлық (диафрагмалық) тыныс алу.</b> Бір қол іште, бірі кеудеде. Мұрынмен дем алғанда — іш ұлғаяды; ауызбен дем шығарғанда — іш кіреді. Кеуде дерлік қозғалмайды.</li>
<li><b>Қысылған ерінмен тыныс алу.</b> Мұрынмен 2 сек дем алыңыз, ерінді «түтікше» жасап 4 сек дем шығарыңыз. Дем шығаруды ұзартыңыз. Ентігу кезіндегі №1 әдіс.</li>
<li><b>Жөтелу техникалары:</b> «хюффинг» — ауызын ашып күшті дем шығару, қақырықты көтеру үшін; бақыланатын жөтел — терең дем алғаннан кейін 23 жөтел толқыны.</li>
<li><b>Ентігуді жеңілдететін қалыптар:</b> алға иіліп, қолмен тіреліп отыру (ортопноэ); үстелге немесе қабырғаға сүйеніп тұру.</li>
<li><b>Дене белсенділігі.</b> Жүру — басты жаттығу. Ыңғайлы қарқынмен және қашықтықтан бастап, бірте-бірте арттырыңыз. Қол/аяққа жеңіл күш жаттығуларын қосыңыз.</li>
<li><b>Жүктемені дозалау:</b>
<ul>
<li>«Сөйлесу тесті»: жүктеме кезінде сөйлесе алсаңыз — қарқын лайықты; ентіксеңіз — төмендетіңіз.</li>
<li>Pacing: үзіліс жасаңыз, тапсырманы бөліңіз, асықпаңыз.</li>
</ul>
</li>
<li><b>Өкпе реабилитациясы</b> — 68 апталық бағдарлама (жаттығулар + оқыту + тамақтану). Өте тиімді: ентігу мен госпитализацияны азайтады. Бағыт сұраңыз.</li>
</ul>
<div class="tip">💡 Тұрақтылық интенсивтіліктен маңыздырақ: <b>күніне 1520 мин гимнастика және 2030 мин жүру</b> нәтиже береді.</div>
<h3>✅ Тексеру тізімі</h3>
<div class="checklist">
<label><input type="checkbox"><span>Ентігу кезінде қысылған ерінмен тыныс аламын</span></label>
<label><input type="checkbox"><span>Гимнастиканы күніне 34 рет жасаймын</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>68 апта</b>. Ентігу мен госпитализацияны азайтады.</div></details>
</div>
<h3>🏠 Үй тапсырмасы</h3>
<div class="hw">🏃 <b>Күндік кешенді</b> құрастырыңыз: 3 рет тыныс алу гимнастикасы (әрқайсысы 510 мин) + сөйлесу тесті бойынша бір серуен. Қашықтық пен күйді күнделікке жазыңыз.</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> жеңіз (45 рет)</li>
<li>Жеткілікті <b>ақуыз</b> (11,5 г/кг): ет, балық, жұмыртқа, сүт</li>
<li>Салмақ төмендегенде — калориялы тағамдар (жаңғақ, май, ірімшік)</li>
<li>Ісіктерде — тұзды азайтыңыз; дәрігер шектемесе шөл бойынша ішіңіз</li>
<li>D дәрумені — тапшылықта (талдау бойынша)</li>
</ul>
</li>
<li><b>Темекіні тастау — басты шаралардың бірі.</b> Кез келген сатыда ауруды баяулатады.
<ul>
<li>Никотинді алмастыру терапиясы: жапсырма, сағыз, кәмпит</li>
<li>Дәрілер: варениклин, бупропион (рецепт бойынша)</li>
<li>Туыстардың қолдауы, «бір сигаретадан» бас тарту, шегу триггерлерін жою</li>
<li>Үйде және көлікте пассивті шегуден аулақ болыңыз</li>
</ul>
</li>
<li><b>Егілу:</b>
<ul>
<li><b>Тұмауға қарсы</b> — жыл сайын, күзде</li>
<li><b>Пневмококкқа қарсы</b> — схема бойынша</li>
<li><b>COVID-19</b> — ағымдағы күнтізбе бойынша</li>
</ul>
</li>
<li><b>Триггерлер</b> — ентігуді күшейтетіндер: түтін, шаң, өткір иістер, суық ауа, түтін, тұрмыстық химия. Желдетіңіз, суықта маска тағыңыз, түтінді бөлмелерден аулақ болыңыз.</li>
<li><b>Инфекциялардың алдын алу:</b> қолды жуу, ЖТВИ маусымында жиналыстардан аулақ болу, ауырғандардың жанынан өтпеу.</li>
</ul>
<div class="tip danger">🚭 <b>Темекіні тастау</b> — жасай алатын ең тиімді әрекетіңіз. Бүгін ертеңнен гөрі жақсы.</div>
<h3>✅ Тексеру тізімі</h3>
<div class="checklist">
<label><input type="checkbox"><span>Темекіні тастау күні тағайындалды</span></label>
<label><input type="checkbox"><span>Тұмау және пневмококкқа қарсы егілдім</span></label>
<label><input type="checkbox"><span>Күніне 45 рет шағын порциямен, ақуызға назар аударамын</span></label>
<label><input type="checkbox"><span>Үйдегі триггерлерді жойдым (түтін, шаң, химия)</span></label>
</div>
<h3>❓ Өзіндік тексеру</h3>
<div class="quiz">
<details><summary>1. ХОБЛ-ді баяулатудың ең тиімді емі?</summary><div class="ans"><b>Темекіні тастау</b> — кез келген сатыда.</div></details>
<details><summary>2. ХОБЛ-де неге жиі, аз порциямен жеуге кеңес береді?</summary><div class="ans">Өйткені <b>тамақ қабылдау оттекті қажет етеді</b> және шаршатады; шағын порциялар оңай көтеріледі.</div></details>
<details><summary>3. ХОБЛ-мен науқасқа қандай егулер қажет?</summary><div class="ans"><b>Тұмау</b> (жыл сайын), <b>пневмококк</b>, <b>COVID-19</b>.</div></details>
</div>
<h3>🏠 Үй тапсырмасы</h3>
<div class="hw">🚭 <b>Темекіні тастау жоспарын</b> құрыңыз (күні, әдістері, қолдау). 3 күн <b>тамақтану күнделігін</b> жүргізіңіз — дәрігермен/нутрициологпен талқылаңыз.</div>
</section>
<!-- =================== 6-Сабақ =================== -->
<section class="lesson" id="l6">
<div class="lesson-head">
<span class="lnum">06</span>
<div><h2>Асқынулар: ерте белгілер, әрекет жоспары, қызыл жалаулар</h2><div class="lmeta">60 мин · ең маңызды сабақ</div></div>
<label class="done-label"><input type="checkbox" data-l="6"> Өтілді</label>
</div>
<div class="goal">🎯 <b>Мақсаты:</b> асқынуды тани біліп, госпитализацияны күтпей-ақ жоспар бойынша әрекет ету.</div>
<h3>📋 Мазмұны</h3>
<ul>
<li><b>Асқыну дегеніміз не.</b> Күнделікті ауытқулардан тыс белгілердің кенет нашарлауы. Басты себебі — тыныс алу инфекциялары (≈7080%): вирустар мен бактериялар.</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₂ 9094% — құтқарушы, бақылау, медбикемен байланысу.</li>
<li><b>🔴 Қызыл:</b> SpO₂ &lt;90% — оттек, бронхолитик, қалып, жедел жәрдем шақыру.</li>
</ul>
</li>
<li><b>Құтқару терапиясы:</b> сальбутамол ± ипратропий ДАИ (24 рет) немесе небулайзер арқылы. Құтқарушы әрқашан қолда болуы тиіс.</li>
<li><b>Жүйелі ГКС және антибиотиктерді қашан бастау</b> (тек дәрігер жоспары бойынша!): іріңді қақырық + оның көлемі және/немесе ентігу ұлғайғанда. Дозаны және ұзақтығын дәрігер анықтайды.</li>
<li><b>Оттектік терапия:</b> дәрігер тағайындаған мақсатты ағыннан аспаңыз. Артық оттек зиянды болуы мүмкін (гиперкапния).</li>
<li><b>Қызыл жалаулар — жедел жәрдемді шақырыңыз:</b>
<ul>
<li>SpO₂ &lt; 88% &gt;5 мин ұсталады немесе ентігу үдейді</li>
<li>Тыныштықта ентігу бронхолитиктен кейін 1520 мин ішінде азаймайды</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> (вирустар мен бактериялар) — 7080%.</div></details>
<details><summary>2. Қандай белгілерде жоспар бойынша антибиотиктер басталады?</summary><div class="ans"><b>Іріңді қақырық</b> + оның көлемі және/немесе ентігу ұлғайғанда. Тек дәрігердің тағайындауы бойынша!</div></details>
<details><summary>3. Жедел жәрдемді қашан шақыру керек?</summary><div class="ans"><b>SpO₂ &lt;88%</b> &gt;5 мин, тыныштықта ентігу бронхолитиктен кейін басылмаса, сананың шатасуы, көгеру кезінде.</div></details>
</div>
<h3>🏠 Үй тапсырмасы</h3>
<div class="hw">📝 Дәрігермен бірге <b>жеке әрекет жоспарын</b> құрыңыз: аймақ шектері, құтқарушы дозасы, қандай ГКС/антибиотиктерді қашан бастау, медбике мен жедел жәрдем телефоны. Тоңазытқышқа іліңіз.</div>
</section>
<!-- =================== 7-Сабақ =================== -->
<section class="lesson" id="l7">
<div class="lesson-head">
<span class="lnum">07</span>
<div><h2>ХОБЛ-мен өмір: психология, туыстар, саяхат, құқықтар</h2><div class="lmeta">45 мин · өмір сапасы</div></div>
<label class="done-label"><input type="checkbox" data-l="7"> Өтілді</label>
</div>
<div class="goal">🎯 <b>Мақсаты:</b> әлеуметтік белсенділікті, көңіл-күйді және аурумен өмір сапасын сақтау.</div>
<h3>📋 Мазмұны</h3>
<ul>
<li><b>Үрей, депрессия және ентігу кезіндегі дабыл.</b> Ентігу қорқытады — қорқыныш пайда болады, ол өз кезегінде ентігуді күшейтеді. Шеңберді үзіңіз: қысылған ерінмен тыныс алу, ортопноэ қалпы, босаңсу техникалары. Тұрақты мұңдылық/үрей болса дәрігерге барыңыз — бұл емделеді.</li>
<li><b>Туыстардың қолдауы және өзара көмек топтары.</b> Туыстарыңыз әрекет жоспарыңызды және құтқарушы қайда екенін білсін. Науқастар тобы жалғыздық сезімін азайтады.</li>
<li><b>Ұйқы.</b> Бас жағын көтеріңкі, бүйірімен ұйықтау; О₂-терапия тағайындалса — схема бойынша түнде пайдаланыңыз. Қорылдау мен күндізгі ұйқышылдықта дәрігермен СОАС-ты (ұйқыдағы апноэ) талқылаңыз.</li>
<li><b>Жыныстық өмір.</b> Шаршамаған уақытты таңдаңыз; аз жүктемелі қалыптар; алдын ала бронхолитик қолданыңыз. Дәрігермен талқылаудан ұялмаңыз.</li>
<li><b>Саяхат.</b>
<ul>
<li>Ұшақта: дәрігермен талқылаңыз, ұшу кезінде оттек қажет пе (SpO₂-ға байланысты)</li>
<li>Дәрілер — қол жүгінде, қормен және рецептпен</li>
<li>Жолда оттек: портативті концентраторлар (әуекомпаниямен келісіңіз)</li>
<li>ХОБЛ-ды қамтитын сақтандыру</li>
</ul>
</li>
<li><b>Қосарлы аурулар.</b> ХОБЛ жиі ЖҚК (жүрек-қантамыр), остеопороз, қант диабеті, саркопениямен (бұлшықет жоғалуы) бірге жүреді. Оларды да дәрігермен бақылаңыз.</li>
<li><b>Науқас құқықтары:</b> ПМСП-дегі диспансерлік бақылау, жеңілдік дәрілер (нозология бойынша), реабилитацияға және ауыр ағымда МСЭ-ге бағыт, кеш сатыларда паллиативті көмек.</li>
<li><b>Мектеп қорытындысы:</b> басты дағды — дабылдамай, жоспар бойынша әрекет ету. Сіз — өз ем командасыңыздың басты қатысушысыз.</li>
</ul>
<div class="tip">💚 ХОБЛ — үкім емес. Әрекет жоспары, тұрақты ем және белсенділікпен өмір толық болып қала береді.</div>
<h3>✅ Тексеру тізімі</h3>
<div class="checklist">
<label><input type="checkbox"><span>Үрей/ентігу кезінде босаңсу техникаларын білемін</span></label>
<label><input type="checkbox"><span>Туыстарым әрекет жоспарымды біледі</span></label>
<label><input type="checkbox"><span>Дәрігермен қосарлы ауруларды және құқықтарды талқыладым</span></label>
<label><input type="checkbox"><span>Бір айға арналған өзін-өзі көмек жоспарын құрдым</span></label>
</div>
<h3>❓ Өзіндік тексеру</h3>
<div class="quiz">
<details><summary>1. Дабыл мен ентігу үдегенде не істеу керек?</summary><div class="ans"><b>Қысылған ерінмен тыныс алу, ортопноэ қалпы, босаңсу</b>. «Қорқыныш → ентігу» шеңберін үзіңіз.</div></details>
<details><summary>2. Саяхатта дәрілерді қайда салу керек?</summary><div class="ans"><b>Қол жүгіне</b>, қормен және рецепт/выпискамен.</div></details>
<details><summary>3. ХОБЛ-мен қандай қосарлы аурулар жиі жүреді?</summary><div class="ans"><b>ЖҚК, остеопороз, қант диабеті, саркопения</b> — оларды да бақылайды.</div></details>
</div>
<h3>🏠 Үй тапсырмасы</h3>
<div class="hw">📅 <b>Бір айлық өзін-өзі көмек жоспарын</b> құрыңыз: мақсаттар (тыныс алу гимнастикасы, серуендер, темекіні тастау, диспансерлік визит) және бақылау күндері. Құттықтаймыз — курсты аяқтадыңыз!</div>
</section>
<section class="handouts" id="handouts">
<h2>📄 Науқастарға таратуға арналған ескертпі парақтар</h2>
<p>Басып шығаруға (немесе PDF сақтауға) арналған бір беттік ескертпі парақтар. Сәйкес сабақтардан кейін науқастарға таратыңыз.</p>
<div class="handout-grid">
<div class="handout-card">
<div class="hic">🚦</div>
<h3>Әрекет жоспары «бақдаршам»</h3>
<p>Тәуекел аймақтары, нашарлағанда не істеу керек, қызыл жалаулар және жедел жәрдемді қашан шақыру керек. Тоңазытқышқа іліңіз.</p>
<button class="btn" onclick="printHandout('h-plan')">Басып шығару / PDF</button>
</div>
<div class="handout-card">
<div class="hic">💊</div>
<h3>Ингаляция техникасы</h3>
<p>ДАИ техникасы қадам бойынша, жиі қателіктер, спейсер не үшін қажет. 3-сабаққа.</p>
<button class="btn" onclick="printHandout('h-inhal')">Басып шығару / PDF</button>
</div>
<div class="handout-card">
<div class="hic">🌬</div>
<h3>Тыныс алу гимнастикасы</h3>
<p>Көкбауырлық тыныс, қысылған ерінмен тыныс, ентігу қалыптары, күндік кешен. 4-сабаққа.</p>
<button class="btn" onclick="printHandout('h-breath')">Басып шығару / PDF</button>
</div>
<div class="handout-card">
<div class="hic">📔</div>
<h3>Науқас күнделігі (үлгі)</h3>
<p>Бір аптаға арналған кесте: SpO₂, АҚ, ЖЖС, тыныс жиілігі, ентігу, қақырық, дәрілер. 2-сабаққа.</p>
<button class="btn" onclick="printHandout('h-diary')">Басып шығару / PDF</button>
</div>
<div class="handout-card">
<div class="hic">🥗</div>
<h3>Тамақтану және темекіні тастау</h3>
<p>ХОБЛ кезіндегі тамақтану принциптері, темекіні тастау жоспары, егілу. 5-сабаққа.</p>
<button class="btn" onclick="printHandout('h-life')">Басып шығару / PDF</button>
</div>
<div class="handout-card">
<div class="hic">🎓</div>
<h3>Бітірушінің қорытынды парағы</h3>
<p>Курстың барлық негізгі дағдылары бойынша қысқа жадынама. 7-сабаққа.</p>
<button class="btn" onclick="printHandout('h-summary')">Басып шығару / PDF</button>
</div>
</div>
</section>
<div class="handout-template" id="tpl-h-plan"></div>
<div class="handout-template" id="tpl-h-inhal"></div>
<div class="handout-template" id="tpl-h-breath"></div>
<div class="handout-template" id="tpl-h-diary"></div>
<div class="handout-template" id="tpl-h-life"></div>
<div class="handout-template" id="tpl-h-summary"></div>
<section class="certificate hidden" id="cert">
<h2>🎓 Сіз ХОБЛ Денсаулық мектебін аяқтадыңыз!</h2>
<p>Өзін-өзі басқару негіздерін меңгердіңіз: ауруды бақылау, ингаляция, реабилитация, тамақтану және асқыну кезіндегі әрекет жоспары. Күнделікті жүргізіп, «бақдаршам» бойынша әрекет етуді жалғастырыңыз.</p>
</section>
<footer class="footer">
ХОБЛ-мен науқастарға арналған Денсаулық мектебі · ПМСП · оқу курсы · материалдар танысу сипатында және дәрігердің кеңесін алмастырмайды
</footer>
</div>
<script>
"use strict";
var KEY="copd_school_kz_v1";
var state={done:{}};
try{ state=JSON.parse(localStorage.getItem(KEY))||{done:{}}; }catch(e){}
var nav=$("#lessonsNav");
for(var i=1;i<=7;i++){ var a=document.createElement("a"); a.href="#l"+i; a.textContent=i+"-сабақ"; nav.appendChild(a); }
var checks=document.querySelectorAll("input[data-l]");
checks.forEach(function(cb){
var n=cb.getAttribute("data-l");
cb.checked=!!state.done[n];
cb.addEventListener("change",function(){
state.done[n]=cb.checked;
localStorage.setItem(KEY,JSON.stringify(state));
update();
if(cb.checked) cb.closest(".lesson").classList.add("done");
else cb.closest(".lesson").classList.remove("done");
});
if(cb.checked) cb.closest(".lesson").classList.add("done");
});
update();
function update(){
var done=0; for(var i=1;i<=7;i++) if(state.done[i]) done++;
var pct=Math.round(done/7*100);
$("#pfill").style.width=pct+"%";
$("#ptxt").textContent=done+"/7";
$("#cert").classList.toggle("hidden", done<7);
}
function $(s,r){return (r||document).querySelector(s);}
/* ============ ЕСКЕРТПІ ПАРАҚТАР ============ */
function stepsHtml(steps){
var s='<div class="steps">';
steps.forEach(function(st,i){ s+='<div class="step"><div class="sn">'+(i+1)+'</div><div class="si">'+st.ic+'</div><div class="st">'+st.t+'</div><div class="sd">'+st.d+'</div></div>'; });
return s+'</div>';
}
function flowHtml(a,b){ return '<div class="flow"><div class="flow-step">'+a+'</div><div class="flow-arrow">↓</div><div class="flow-step">'+b+'</div></div>'; }
function timelineHtml(rows){
var s='<div class="timeline">';
rows.forEach(function(r){ s+='<div class="tl"><div class="ttime">'+r.time+'</div><div class="titems">'+r.items.map(function(i){return '<span>'+i+'</span>';}).join('')+'</div></div>'; });
return s+'</div>';
}
var HANDOUTS={
"h-plan":{title:"ХОБЛ кезіндегі әрекет жоспары (бақдаршам)",html:
'<p>Бұл сіздің жеке жоспарыңыз. Шектер мен телефондарды дәрігермен бірге толтырып, көрінетін жерге қойыңыз.</p>'+
flowHtml("📊 SpO₂ пульсоксиметрмен өлшеңіз","🚦 Аймақты анықтаңыз")+
'<div class="zone g"><b>🟢 ЖАСЫЛ АЙМАҚ — тұрақты</b><br>SpO₂ ≥ 95% · әдеттегі күй.<br>Әрекет: негізгі ем схемасы бойынша, күнделік күніне 23 рет, белсенділік, гимнастика.</div>'+
'<div class="zone y"><b>🟡 САРЫ АЙМАҚ — назар</b><br>SpO₂ 9094% · ентігудің өсуі, қақырықтың өзгеруі.<br>Әрекет: құтқарушы бронхолитик (сальбутамол 24 рет), SpO₂ 1530 мин сайын бақылау, медбикемен байланысу. Дәрігер жоспары бойынша резервтік курсты бастау.</div>'+
'<div class="zone r"><b>🔴 ҚЫЗЫЛ АЙМАҚ — нашарлау</b><br>SpO₂ &lt; 90% · тыныштықта күшті ентігу, қызба, іріңді қақырық.<br>Әрекет: О₂ схемасы бойынша көбейту, бронхолитик небулайзермен, ортопноэ қалпы, жедел жәрдемді шақыру.</div>'+
'<h2>🚑 Жедел жәрдемді шақырыңыз, егер:</h2><ul>'+
'<li>SpO₂ &lt; 88% 5 минуттан көп ұсталса немесе ентігу үдесе</li>'+
'<li>тыныштықта ентігу бронхолитиктен кейін 1520 мин ішінде азаймаса</li>'+
'<li>сананың шатасуы, ерін көгеруі, кеуде ауырсынуы болса</li>'+
'<li>температура &gt; 38,5 °C ентігудің үдеуімен болса</li></ul>'+
'<h2>📞 Менің байланыстарым</h2><ul>'+
'<li>Емдеуші дәрігер: ____________________</li>'+
'<li>Медбике: ____________________</li>'+
'<li>Жедел жәрдем: 103 / 112</li>'+
'<li>Менің құтқарушы ингаляторым: ____________________</li></ul>'},
"h-inhal":{title:"Ингаляция техникасы",html:
'<p>Дұрыс техника — емнің жартысы. Техникаңызды әр 3 айда медбикеден тексертіңіз.</p>'+
'<h2>ДАИ ингаляторы — қадам бойынша</h2>'+
stepsHtml([
{ic:"🤚",t:"Шайқау",d:"Қалпақшаны алып, шайқау"},
{ic:"😮‍💨",t:"Дем шығару",d:"Тыныш, ингалятордан тыс"},
{ic:"👄",t:"Қамау",d:"Ерін мундштукте"},
{ic:"🌬",t:"Дем алу + басу",d:"Баяу дем алу, басу"},
{ic:"⏳",t:"Дем алу 35 сек",d:"Терең дем алуды жалғастыру"},
{ic:"🤍",t:"Ұстау",d:"Тынысты 10 секунд ұстау"},
{ic:"😮‍💨",t:"Дем шығару",d:"Тыныш дем шығару"},
{ic:"💧",t:"Шайкау",d:"ИГКС-тен кейін ауызды сумен"}
])+
'<h2>⚠️ Жиі қателіктер</h2><ul>'+
'<li>қолданар алдында шайқамады</li>'+
'<li>дем алуды тартылып/күрт алды</li>'+
'<li>дем алғаннан кейін тынысты ұстамады</li>'+
'<li>ИГКС-тен кейін ауызды шайқамады (ауыздың іріңірауы қаупі)</li>'+
'<li>негізгі мен құтқарушы ингаляторды шатастырды</li></ul>'+
'<div class="zone g"><b>💡 Спейсер</b> — ДАИ-ға арналған камера-насадка. Дем алуды оңайлатып, жанама әсерлерін азайтады. Дем алу мен басуды үйлестіру қиын болса ұсынылады.</div>'+
'<p><b>Негізгі ингалятор:</b> ____________________ — күн сайын.<br><b>Құтқарушы ингалятор:</b> ____________________ — қажет бойынша.</p>'},
"h-breath":{title:"Тыныс алу гимнастикасы",html:
'<p>Тұрақтылық интенсивтіліктен маңыздырақ. Кешенді күніне 34 рет 510 минуттай жасаңыз.</p>'+
'<h2>1. Қысылған ерінмен тыныс алу (ентігу кезінде)</h2>'+
stepsHtml([
{ic:"👃",t:"Мұрынмен дем алу",d:"2 секунд"},
{ic:"👄",t:"Ерін түтікше",d:"Ерінді жинау"},
{ic:"🌬",t:"Дем шығару 4 сек",d:"Дем шығаруды ұзарту"},
{ic:"🔁",t:"Қайталау",d:"Тыныш тынысқа дейін"}
])+
'<h2>2. Көкбауырлық (диафрагмалық) тыныс алу</h2><ul>'+
'<li>Бір қол іште, бірі кеудеде.</li>'+
'<li>Мұрынмен дем алғанда — іш ұлғаяды.</li>'+
'<li>Қысылған ерінмен дем шығарғанда — іш кіреді. Кеуде дерлік қозғалмайды.</li></ul>'+
'<h2>3. Ентігуді жеңілдететін қалыптар</h2><ul>'+
'<li>Алға иіліп, қолмен тіреліп отыру.</li>'+
'<li>Үстелге немесе қабырғаға сүйеніп тұру.</li>'+
'<li>Басы көтеріңкі жатып.</li></ul>'+
'<h2>4. Бақыланатын жөтелу</h2><ul>'+
'<li>Отырып, терең дем алыңыз.</li>'+
'<li>Ауызын ашып 23 қысқа жөтел толқыны («хюффинг»).</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%. Сары: 9094%. Қызыл: &lt;90% — жоспар бойынша әрекет етіңіз.</p>'},
"h-life":{title:"Тамақтану және темекіні тастау",html:
'<h2>🥗 ХОБЛ кезіндегі тамақтану</h2><ul>'+
'<li>Жиі, шағын порциялармен жеңіз — күніне 45 рет.</li>'+
'<li>Жеткілікті ақуыз (11,5 г/кг): ет, балық, жұмыртқа, сүт.</li>'+
'<li>Салмақ төмендегенде — калориялы тағамдар: жаңғақ, май, ірімшік.</li>'+
'<li>Ісіктерде — тұзды азайтыңыз.</li>'+
'<li>Шөл бойынша ішіңіз, егер дәрігер сұйықтықты шектемесе.</li>'+
'<li>Тапшылықта — D дәрумені (талдау бойынша).</li></ul>'+
'<h2>🚫 Темекіні тастау — басты ем</h2>'+
stepsHtml([
{ic:"📅",t:"Күн",d:"Тастау күнін тағайындаңыз"},
{ic:"🗑",t:"Жою",d:"Сигарет, күлдік, триггерлер"},
{ic:"🩹",t:"НРТ",d:"Никотин жапсырма/сағыз"},
{ic:"💊",t:"Дәрілер",d:"Варениклин/бупропион рецептпен"},
{ic:"🤝",t:"Қолдау",d:"Туыстар, дәрігер, топ"}
])+
'<div class="zone g"><b>Темекіні тастау күні:</b> ________________</div>'+
'<h2>💉 Егілу</h2><ul>'+
'<li>Тұмау — жыл сайын, күзде.</li>'+
'<li>Пневмококк — дәрігер схемасы бойынша.</li>'+
'<li>COVID-19 — күнтізбе бойынша.</li></ul>'+
'<h2>⚠️ Триггерлерден аулақ болыңыз</h2><ul>'+
'<li>түтін, шаң, өткір иістер, тұрмыстық химия</li>'+
'<li>суық ауа — орамал арқылы тыныстаңыз</li>'+
'<li>түтінді бөлмелер, шығын газдар</li></ul>'},
"h-summary":{title:"ХОБЛ мектебін бітірушінің қорытынды парағы",html:
'<p>Құттықтаймыз! Өзін-өзі басқару негіздерін меңгердіңіз. Негізгі дағдылар бойынша қысқа жадынама:</p>'+
'<h2>📅 ХОБЛ-мен күнім</h2>'+
timelineHtml([
{time:"🌅 Таңертең",items:["Негізгі ингалятор","SpO₂/АҚ/ЖЖС","Күнделік","Ақуызды таңертеңгі"]},
{time:"☀️ Күндіз",items:["Тыныс алу гимнастикасы","Серуен ≥20 мин","Түскі + жеңіл тағам"]},
{time:"🌙 Кешке",items:["Негізгі ингалятор","Өлшеу + күнделік","Гимнастика","Құтқарушы — қолда"]}
])+
'<h2>✅ Күн сайын</h2><ul>'+
'<li>Негізгі емді схемасы бойынша қабылдаймын, өткізбеймін.</li>'+
'<li>Күнделікті күніне 23 рет толтырамын (SpO₂, АҚ, ЖЖС, тыныс жиілігі, ентігу, қақырық).</li>'+
'<li>Тыныс алу гимнастикасын 34 рет, серуен ≥ 20 мин.</li>'+
'<li>Жиі, шағын порциямен, ақуызбен тамақтанамын.</li></ul>'+
'<h2>🚦 «Бақдаршам» бойынша әрекет</h2><ul>'+
'<li>🟢 SpO₂ ≥95% — негізгі ем және күнделік.</li>'+
'<li>🟡 SpO₂ 9094% — құтқарушы, бақылау, медбикеге қоңырау.</li>'+
'<li>🔴 SpO₂ &lt;90% — О₂, бронхолитик, қалып, жедел жәрдем.</li></ul>'+
'<h2>🚑 Жедел жәрдем (103/112) — қашан:</h2><ul>'+
'<li>SpO₂ &lt;88% &gt;5 мин немесе ентігу үдесе.</li>'+
'<li>Тыныштықта ентігу бронхолитиктен кейін 1520 мин басылмаса.</li>'+
'<li>Сананың шатасуы, көгеру, кеуде ауырсынуы, t &gt;38,5 °C.</li></ul>'+
'<h2>📋 Жарты жылда / жоспар бойынша</h2><ul>'+
'<li>Тұмауға қарсы егілу (жыл сайын), пневмококк.</li>'+
'<li>Ингаляция техникасын медбикеден тексеру.</li>'+
'<li>Спирометрия, CAT, дәрігер қабылдауы.</li>'+
'<li>Темекі шекпеймін. Қосарлы ауруларды бақылаймын.</li></ul>'+
'<div class="zone g"><b>Бастысы:</b> дабылдамай, жоспар бойынша әрекет ету. Сіз — өз ем командасыңыздың басты қатысушысыз.</div>'}
};
function row(day){return '<tr><td>'+day+'</td><td>таңертең</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td>кешке</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';}
function printHandout(id){
var h=HANDOUTS[id]; if(!h) return;
var w=window.open("","_blank");
var css='body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:#0F1218;max-width:780px;margin:24px auto;padding:0 20px}'
+'h1{font-size:22px;margin:0 0 2px}'
+'.hdr{border-bottom:3px solid #00E5FF;padding-bottom:10px;margin-bottom:16px}'
+'.hdr small{color:#5B6573;font-size:13px}'
+'h2{font-size:16px;margin:16px 0 6px}'
+'ul{margin:6px 0 10px;padding-left:20px}li{margin-bottom:4px}'
+'table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}'
+'th{background:#F2F4F7;text-align:left;padding:6px}td{border:1px solid #E4E8EE;padding:6px;height:22px;vertical-align:top}'
+'.zone{border-left:5px solid;padding:10px 12px;margin:8px 0;border-radius:6px}'
+'.g{border-color:#16C784;background:#E6F9F0}.y{border-color:#F5A623;background:#FDF3E2}.r{border-color:#EA3943;background:#FCEAEC}'
+'.steps{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}'
+'.step{flex:1 1 150px;min-width:140px;border:1.5px solid #E4E8EE;border-radius:11px;padding:14px 12px 12px;position:relative;background:#fff}'
+'.step .sn{position:absolute;top:-11px;left:12px;background:#0F1218;color:#00E5FF;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}'
+'.step .si{font-size:26px;line-height:1;margin-bottom:4px}'
+'.step .st{font-weight:800;font-size:13.5px;margin-bottom:2px}'
+'.step .sd{font-size:12px;color:#5B6573}'
+'.flow{display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0}'
+'.flow-step{background:#0F1218;color:#fff;padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px}'
+'.flow-arrow{color:#0F1218;font-size:20px;font-weight:800;line-height:1}'
+'.timeline{margin:12px 0}'
+'.tl{display:flex;gap:12px;border:1.5px solid #E4E8EE;border-radius:11px;padding:12px;margin-bottom:8px;align-items:flex-start}'
+'.tl .ttime{flex:0 0 96px;font-weight:800;font-size:13px;color:#0F1218;background:#E8FCFF;padding:6px 8px;border-radius:8px;text-align:center;height:fit-content}'
+'.tl .titems{font-size:13px;color:#0F1218}'
+'.tl .titems span{display:inline-block;background:#F2F4F7;padding:3px 9px;border-radius:6px;margin:2px 4px 2px 0;font-size:12px}'
+'.ftr{margin-top:20px;padding-top:10px;border-top:1px solid #E4E8EE;color:#5B6573;font-size:12px;text-align:center}'
+'@media print{body{margin:12mm}}';
w.document.write('<!DOCTYPE html><html lang="kk"><head><meta charset="utf-8"><title>'+h.title+'</title><style>'+css+'</style></head><body>');
w.document.write('<div class="hdr"><h1>ХОБЛ Денсаулық мектебі · Науқасқа арналған ескертпі парақ</h1><small>'+h.title+'</small></div>');
w.document.write(h.html);
w.document.write('<div class="ftr">Ескертпі парақ ПМСП Денсаулық мектебінде таратылды · материал танысу сипатында, дәрігердің кеңесін алмастырмайды · '+new Date().toLocaleDateString("ru-RU")+'</div>');
w.document.write('</body></html>');
w.document.close(); w.focus();
setTimeout(function(){ try{w.print();}catch(e){} }, 350);
}
</script>
</body>
</html>