Памятки: инфографика пошаговых действий (блок-схема светофор, шаги ингаляции/гимнастики, таймлайн дня)

index.html

@@ -656,9 +656,21 @@ function update(){
 function $(s,r){return (r||document).querySelector(s);}
 
 /* ============ ПАМЯТКИ ДЛЯ ПЕЧАТИ ============ */
+function stepsHtml(steps){
+  var s='<div class="steps">';
+  steps.forEach(function(st,i){ s+='<div class="step"><div class="sn">'+(i+1)+'</div><div class="si">'+st.ic+'</div><div class="st">'+st.t+'</div><div class="sd">'+st.d+'</div></div>'; });
+  return s+'</div>';
+}
+function flowHtml(a,b){ return '<div class="flow"><div class="flow-step">'+a+'</div><div class="flow-arrow">↓</div><div class="flow-step">'+b+'</div></div>'; }
+function timelineHtml(rows){
+  var s='<div class="timeline">';
+  rows.forEach(function(r){ s+='<div class="tl"><div class="ttime">'+r.time+'</div><div class="titems">'+r.items.map(function(i){return '<span>'+i+'</span>';}).join('')+'</div></div>'; });
+  return s+'</div>';
+}
 var HANDOUTS={
 "h-plan":{title:"План действий при ХОБЛ (светофор)",html:
 '<p>Это ваш персональный план. Заполните пороги и телефоны вместе с врачом и держите на видном месте.</p>'+
+flowHtml("📊 Измерьте SpO₂ пульсоксиметром","🚦 Определите зону")+
 '<div class="zone g"><b>🟢 ЗЕЛЁНАЯ ЗОНА — стабилен</b><br>SpO₂ ≥ 95% · обычное самочувствие.<br>Действия: базисная терапия по схеме, дневник 2–3 раза/день, активность, гимнастика.</div>'+
 '<div class="zone y"><b>🟡 ЖЁЛТАЯ ЗОНА — внимание</b><br>SpO₂ 90–94% · рост одышки, изменение мокроты.<br>Действия: спасательный бронхолитик (сальбутамол 2–4 вдоха), контроль SpO₂ каждые 15–30 мин, связаться с медсестрой. Начать резервный курс по плану врача.</div>'+
 '<div class="zone r"><b>🔴 КРАСНАЯ ЗОНА — ухудшение</b><br>SpO₂ &lt; 90% · резкая одышка в покое, лихорадка, гнойная мокрота.<br>Действия: увеличить О₂ по схеме, бронхолитик через небулайзер, положение ортопноэ, вызов скорой.</div>'+
@@ -675,15 +687,17 @@ var HANDOUTS={
 
 "h-inhal":{title:"Техника ингаляции",html:
 '<p>Правильная техника — половина успеха лечения. Проверяйте её у медсестры каждые 3 месяца.</p>'+
-'<h2>Ингалятор ДАИ — пошагово</h2><ul>'+
+'<h2>Ингалятор ДАИ — пошагово</h2>'+
-'<li>1. Встряхните баллончик, снимите колпачок.</li>'+
+stepsHtml([
-'<li>2. Спокойно выдохните (мимо ингалятора).</li>'+
+ {ic:"🤚",t:"Встряхнуть",d:"Снять колпачок, встряхнуть"},
-'<li>3. Обхватите мундштук губами.</li>'+
+ {ic:"😮‍💨",t:"Выдох",d:"Спокойно, мимо ингалятора"},
-'<li>4. Начните медленный глубокий вдох и одновременно нажмите на баллончик.</li>'+
+ {ic:"👄",t:"Обхватить",d:"Губы на мундштук"},
-'<li>5. Продолжайте вдох 3–5 секунд.</li>'+
+ {ic:"🌬",t:"Вдох + нажатие",d:"Медленный вдох, нажать"},
-'<li>6. Задержите дыхание на 10 секунд.</li>'+
+ {ic:"⏳",t:"Вдох 3–5 сек",d:"Продолжить глубокий вдох"},
-'<li>7. Спокойно выдохните.</li>'+
+ {ic:"🤍",t:"Задержать",d:"Дыхание на 10 секунд"},
-'<li>8. После ИГКС — прополощите рот водой.</li></ul>'+
+ {ic:"😮‍💨",t:"Выдох",d:"Спокойно выдохнуть"},
+ {ic:"💧",t:"Полоскать",d:"После ИГКС — рот водой"}
+])+
 '<h2>⚠️ Частые ошибки</h2><ul>'+
 '<li>не встряхнул перед использованием</li>'+
 '<li>вдохнул слишком резко / рывком</li>'+
@@ -695,10 +709,13 @@ var HANDOUTS={
 
 "h-breath":{title:"Дыхательная гимнастика",html:
 '<p>Регулярность важнее интенсивности. Делайте комплекс 3–4 раза в день по 5–10 минут.</p>'+
-'<h2>1. Дыхание через сжатые губы (при одышке)</h2><ul>'+
+'<h2>1. Дыхание через сжатые губы (при одышке)</h2>'+
-'<li>Вдох через нос 2 секунды.</li>'+
+stepsHtml([
-'<li>Выдох через губы, сложенные трубочкой, 4 секунды (удлиняйте выдох).</li>'+
+ {ic:"👃",t:"Вдох носом",d:"2 секунды"},
-'<li>Повторяйте, пока дыхание не успокоится.</li></ul>'+
+ {ic:"👄",t:"Губы трубочкой",d:"Сложить губы"},
+ {ic:"🌬",t:"Выдох 4 сек",d:"Удлинять выдох"},
+ {ic:"🔁",t:"Повторять",d:"До спокойного дыхания"}
+])+
 '<h2>2. Диафрагмальное дыхание</h2><ul>'+
 '<li>Одна рука на животе, другая на груди.</li>'+
 '<li>Вдох через нос — живот надувается.</li>'+
@@ -729,12 +746,14 @@ row("Понедельник")+row("Вторник")+row("Среда")+row("Че
 '<li>При отёках — меньше соли.</li>'+
 '<li>Пейте по жажде, если врач не ограничил жидкость.</li>'+
 '<li>При дефиците — витамин D (по анализу).</li></ul>'+
-'<h2>🚫 Отказ от курения — главное лечение</h2><ul>'+
+'<h2>🚫 Отказ от курения — главное лечение</h2>'+
-'<li>Назначьте дату отказа. Сообщите родным.</li>'+
+stepsHtml([
-'<li>Уберите сигареты, пепельницы, избегайте триггеров.</li>'+
+ {ic:"📅",t:"Дата",d:"Назначьте день отказа"},
-'<li>Никотинзаместительная терапия: пластырь, жвачка, леденцы.</li>'+
+ {ic:"🗑",t:"Уберите",d:"Сигареты, пепельницы, триггеры"},
-'<li>Лекарства (по рецепту): варениклин, бупропион.</li>'+
+ {ic:"🩹",t:"НРТ",d:"Пластырь/жвачка от никотина"},
-'<li>Избегайте пассивного курения дома и в машине.</li></ul>'+
+ {ic:"💊",t:"Лекарства",d:"Варениклин/бупропион по рецепту"},
+ {ic:"🤝",t:"Поддержка",d:"Родные, врач, группа"}
+])+
 '<div class="zone g"><b>Дата отказа от курения:</b> ________________</div>'+
 '<h2>💉 Вакцинация</h2><ul>'+
 '<li>Грипп — ежегодно, осенью.</li>'+
@@ -747,6 +766,12 @@ row("Понедельник")+row("Вторник")+row("Среда")+row("Че
 
 "h-summary":{title:"Итоговая памятка выпускника Школы ХОБЛ",html:
 '<p>Поздравляем! Вы освоили основы самоменеджмента. Краткая шпаргалка по ключевым навыкам:</p>'+
+'<h2>📅 Мой день при ХОБЛ</h2>'+
+timelineHtml([
+ {time:"🌅 Утро",items:["Базисный ингалятор","SpO₂/АД/ЧСС","Дневник","Завтрак с белком"]},
+ {time:"☀️ День",items:["Дыхательная гимнастика","Прогулка ≥20 мин","Обед + перекусы"]},
+ {time:"🌙 Вечер",items:["Базисный ингалятор","Измерения + дневник","Гимнастика","Спасатель — рядом"]}
+])+
 '<h2>✅ Ежедневно</h2><ul>'+
 '<li>Принимаю базисную терапию по схеме, не пропускаю.</li>'+
 '<li>Веду дневник 2–3 раза в день (SpO₂, АД, ЧСС, ЧДД, одышка, мокрота).</li>'+
@@ -784,6 +809,20 @@ function printHandout(id){
     +'.zone{border-left:5px solid;padding:10px 12px;margin:8px 0;border-radius:6px}'
     +'.g{border-color:#16C784;background:#E6F9F0}.y{border-color:#F5A623;background:#FDF3E2}.r{border-color:#EA3943;background:#FCEAEC}'
     +'.ftr{margin-top:20px;padding-top:10px;border-top:1px solid #E4E8EE;color:#5B6573;font-size:12px;text-align:center}'
+    +'.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}'
     +'@media print{body{margin:12mm}}';
   w.document.write('<!DOCTYPE html><html lang="ru"><head><meta charset="utf-8"><title>'+h.title+'</title><style>'+css+'</style></head><body>');
   w.document.write('<div class="hdr"><h1>Школа здоровья ХОБЛ · Памятка пациенту</h1><small>'+h.title+'</small></div>');