рекомендации родителям по итогам оценки (отставание по сферам)
This commit is contained in:
parent
7bb99ceeac
commit
d13dd11880
147
index.html
147
index.html
@ -167,6 +167,39 @@ footer a{color:var(--cyan);text-decoration:none;font-weight:600}
|
||||
.nav .links a{text-decoration:none;font-size:15px;font-weight:600;color:var(--gray-500)}
|
||||
.nav .links a:hover{color:var(--ink)}
|
||||
@media (max-width:720px){.nav .links{display:none}}
|
||||
|
||||
/* ---------- Results / recommendations ---------- */
|
||||
.tool-results{border-top:1px solid var(--gray-100);padding:26px 28px 30px;background:#FBFCFE}
|
||||
.res-empty{color:var(--gray-500);font-size:15px;display:flex;align-items:center;gap:10px;background:var(--gray-100);border-radius:12px;padding:16px 18px}
|
||||
.res-status{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;margin-bottom:20px}
|
||||
.res-status .badge{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:24px;flex:none}
|
||||
.res-status h3{font-size:18px;font-weight:700;margin-bottom:3px}
|
||||
.res-status p{font-size:14.5px;color:var(--gray-500)}
|
||||
.st-ok{background:var(--phys-bg)}.st-ok .badge{background:#fff;color:var(--phys)}
|
||||
.st-watch{background:var(--lang-bg)}.st-watch .badge{background:#fff;color:var(--lang)}
|
||||
.st-lag{background:#FFEDE7}.st-lag .badge{background:#fff;color:#D4441E}
|
||||
.res-sub{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);margin:6px 0 12px}
|
||||
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
|
||||
.rec-card{background:#fff;border:1px solid var(--gray-200);border-radius:14px;padding:20px 22px;border-top:4px solid var(--gray-200)}
|
||||
.rec-card h4{font-size:16px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
|
||||
.rec-card .rc-pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;margin-bottom:12px;display:inline-block}
|
||||
.rc-lag{background:#FFEDE7;color:#B23A18}
|
||||
.rc-watch{background:var(--lang-bg);color:var(--lang)}
|
||||
.rec-card ul{list-style:none}
|
||||
.rec-card ul li{position:relative;padding:7px 0 7px 22px;font-size:14.5px;color:var(--gray-500);line-height:1.45;border-bottom:1px solid var(--gray-100)}
|
||||
.rec-card ul li:last-child{border-bottom:none}
|
||||
.rec-card ul li::before{content:"→";position:absolute;left:0;top:7px;font-weight:700;color:var(--ink)}
|
||||
.res-doctor{margin-top:18px;background:#FFF8F6;border:1px solid #f3d8cf;border-left:4px solid #D4441E;border-radius:12px;padding:16px 20px;display:flex;gap:14px;align-items:flex-start}
|
||||
.res-doctor .ic{font-size:22px;flex:none}
|
||||
.res-doctor p{font-size:14.5px;color:var(--gray-500)}
|
||||
.res-doctor p b{color:#B23A18}
|
||||
.res-base{margin-top:16px;background:var(--cyan-50);border:1px solid #c8eef3;border-radius:12px;padding:16px 20px}
|
||||
.res-base h4{font-size:15px;font-weight:700;margin-bottom:10px}
|
||||
.res-base ul{list-style:none;display:grid;gap:7px}
|
||||
.res-base ul li{position:relative;padding-left:24px;font-size:14px;color:var(--gray-500);line-height:1.45}
|
||||
.res-base ul li::before{content:"✓";position:absolute;left:0;top:0;color:#0B7C8C;font-weight:800}
|
||||
.lag-hint{display:none;margin-top:14px;font-size:13px;font-weight:700;color:#B23A18;background:#FFEDE7;border-radius:8px;padding:8px 12px;text-align:center}
|
||||
.lag-hint.show{display:block}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -257,10 +290,12 @@ footer a{color:var(--cyan);text-decoration:none;font-weight:600}
|
||||
<div class="ring-text"><b id="ringDone">0 из 0</b><span>вех освоено</span></div>
|
||||
</div>
|
||||
<div class="per-sphere" id="perSphere"></div>
|
||||
<div class="lag-hint" id="lagHint">⚠ Смотрите рекомендации ниже</div>
|
||||
<div class="disclaimer">Это памятка для родителей, а не диагноз. Дети развиваются индивидуально. Если что-то беспокоит — обсудите с педиатром.</div>
|
||||
</div>
|
||||
<div class="milestones" id="milestones"></div>
|
||||
</div>
|
||||
<div class="tool-results" id="toolResults"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -540,6 +575,58 @@ const DATA = {
|
||||
}
|
||||
};
|
||||
|
||||
/* ====== Рекомендации по сферам (если отстаёт) ====== */
|
||||
const REC = {
|
||||
phys:{
|
||||
title:"Физическое и моторное",
|
||||
tips:[
|
||||
"Давайте больше свободного движения на полу — без ходунков и шезлонгов, которые ограничивают.",
|
||||
"Для малышей — время на животике по несколько раз в день.",
|
||||
"Ежедневно активная игра: ползание, лазание, бег, игры с мячом (от 1 часа для детей 1–5 лет, по ВОЗ).",
|
||||
"Развивайте мелкую моторику: шнуровки, крупные бусины, лепка, рисование, игры с песком и водой.",
|
||||
"Покажите педиатру, чтобы исключить мышечный тонус и неврологические причины."
|
||||
]
|
||||
},
|
||||
cogn:{
|
||||
title:"Когнитивное",
|
||||
tips:[
|
||||
"Играйте в сортировку по цвету, форме и размеру; простые пазлы и вкладыши.",
|
||||
"Показывайте причинно-следственные связи: «нажмёшь — зазвенит», «упадёт — покатится».",
|
||||
"Сюжетные игры развивают мышление: кормим куклу, готовим, лечим, магазин.",
|
||||
"Задавайте вопросы и давайте время подумать — не торопите и не делайте за ребёнка.",
|
||||
"Меньше экрана — больше реального исследования предметов руками."
|
||||
]
|
||||
},
|
||||
lang:{
|
||||
title:"Речевое",
|
||||
tips:[
|
||||
"Разговаривайте постоянно: комментируйте действия и называйте предметы.",
|
||||
"Читайте каждый день 5–10 минут и обсуждайте картинки.",
|
||||
"Пойте песни, учите потешки и стишки — ритм помогает освоению речи.",
|
||||
"Повторяйте за ребёнком его звуки и слова, расширяя до фразы («ма-ма» → «мама пришла»).",
|
||||
"Нет слов к 1,5 годам или фраз к 2 годам — обратитесь к неврологу/логопеду."
|
||||
]
|
||||
},
|
||||
socio:{
|
||||
title:"Социально-эмоциональное",
|
||||
tips:[
|
||||
"Отвечайте на сигналы ребёнка — улыбкой, словом, объятием («подавай-принимай»).",
|
||||
"Называйте эмоции вслух: «ты злишься», «тебе обидно» — так ребёнок их понимает.",
|
||||
"Организуйте общение с детьми; учите делиться и ждать очереди через игру.",
|
||||
"Сохраняйте предсказуемый режим дня — стабильность снижает тревогу.",
|
||||
"Будьте рядом в новых ситуациях и поддерживайте, не заставляя преодолевать страх в одиночку."
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const BASE_TIPS = [
|
||||
"Отзывчивая забота: замечайте и отвечайте на сигналы ребёнка.",
|
||||
"Разговаривайте, читайте и пойте каждый день.",
|
||||
"Игра — главный способ обучения ребёнка.",
|
||||
"Обеспечьте полноценное питание, достаточный сон и безопасную среду.",
|
||||
"Если заметили потерю навыков — сразу обратитесь к врачу."
|
||||
];
|
||||
|
||||
/* ====== Render tool ====== */
|
||||
const ageTabs = document.getElementById('ageTabs');
|
||||
const milestonesEl = document.getElementById('milestones');
|
||||
@ -548,6 +635,8 @@ const ring = document.getElementById('ring');
|
||||
const ringNum = document.getElementById('ringNum');
|
||||
const ringDone = document.getElementById('ringDone');
|
||||
const childAge = document.getElementById('childAge');
|
||||
const toolResults = document.getElementById('toolResults');
|
||||
const lagHint = document.getElementById('lagHint');
|
||||
|
||||
const ages = Object.keys(DATA);
|
||||
let currentAge = ages[0];
|
||||
@ -608,6 +697,64 @@ function render(){
|
||||
const p = s.len? Math.round(s.done/s.len*100):0;
|
||||
return `<div class="ps"><div class="top"><b>${s.name}</b><span>${s.done}/${s.len}</span></div><div class="bar"><i style="width:${p}%;background:${s.color}"></i></div></div>`;
|
||||
}).join('');
|
||||
|
||||
// ===== рекомендации по итогам оценки =====
|
||||
const RANK = {ok:0, watch:1, lag:2};
|
||||
const sphereStats = sphereTotals.filter(s=>s.len).map(s=>{
|
||||
const p = s.done/s.len*100;
|
||||
const st = p >= 70 ? 'ok' : (p >= 40 ? 'watch' : 'lag');
|
||||
return {...s, p:Math.round(p), st};
|
||||
});
|
||||
let worst = 0;
|
||||
sphereStats.forEach(s=>{ worst = Math.max(worst, RANK[s.st]); });
|
||||
const worstStatus = worst===2 ? 'lag' : worst===1 ? 'watch' : 'ok';
|
||||
|
||||
// индикатор в боковой панели
|
||||
lagHint.classList.toggle('show', done>0 && (worstStatus==='lag' || worstStatus==='watch'));
|
||||
|
||||
if(done === 0){
|
||||
toolResults.innerHTML = `<div class="res-empty">👆 Отметьте навыки, которые уже есть у ребёнка, — здесь сразу появятся персональные рекомендации.</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
// шапка-статус
|
||||
const statusMap = {
|
||||
ok: {cls:'st-ok', icon:'✅', title:'Развитие идёт хорошо', text:'Большинство вех освоено. Продолжайте играть, разговаривать и поддерживать ребёнка.'},
|
||||
watch: {cls:'st-watch', icon:'🟠', title:'Некоторые навыки ещё осваиваются', text:'Это нормально для возраста. Ниже — как поддержать сферы, которые развиваются медленнее.'},
|
||||
lag: {cls:'st-lag', icon:'🔴', title:'Есть сферы, требующие внимания', text:'Рекомендуем целенаправленно поддержать развитие в этих направлениях. При сохранении отставания — обратитесь к специалисту.'}
|
||||
};
|
||||
const sm = statusMap[worstStatus];
|
||||
let html = `<div class="res-status ${sm.cls}"><div class="badge">${sm.icon}</div><div><h3>${sm.title}</h3><p>${sm.text}</p></div></div>`;
|
||||
|
||||
// карточки рекомендаций для отстающих/осваивающихся сфер (lag -> watch)
|
||||
const focus = sphereStats.filter(s=>s.st==='lag' || s.st==='watch')
|
||||
.sort((a,b)=> RANK[b.st]-RANK[a.st]);
|
||||
if(focus.length){
|
||||
html += `<div class="res-sub">Рекомендации по сферам развития</div><div class="rec-grid">`;
|
||||
focus.forEach(s=>{
|
||||
const r = REC[s.key];
|
||||
const pill = s.st==='lag'
|
||||
? `<span class="rc-pill rc-lag">Отстаёт · ${s.p}%</span>`
|
||||
: `<span class="rc-pill rc-watch">Осваивается · ${s.p}%</span>`;
|
||||
const lis = r.tips.map(t=>`<li>${t}</li>`).join('');
|
||||
html += `<div class="rec-card" style="border-top-color:${s.color}">
|
||||
<h4>${SPHERES[s.key].emoji} ${r.title}</h4>${pill}<ul>${lis}</ul></div>`;
|
||||
});
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
// блок «когда к специалисту» — заметнее при отставании
|
||||
if(worstStatus === 'lag'){
|
||||
html += `<div class="res-doctor"><div class="ic">🩺</div><p><b>Когда обратиться к специалисту.</b> Если отставание сохраняется дольше 1–2 месяцев, есть потеря освоенных навыков, ребёнок не откликается на имя или избегает зрительного контакта — покажите его педиатру, неврологу и (при речевых задержках) логопеду. Раннее развитие мозга максимально пластично: чем раньше начать поддержку, тем лучше результат.</p></div>`;
|
||||
} else if(worstStatus === 'watch'){
|
||||
html += `<div class="res-doctor"><div class="ic">👀</div><p>Понаблюдайте 3–4 недели, активно применяя рекомендации выше. Если навыки так и не появляются или вы заметили регресс — обратитесь к педиатру. Лучше перестраховаться, чем упустить время.</p></div>`;
|
||||
}
|
||||
|
||||
// базовые принципы заботливого ухода (всегда)
|
||||
html += `<div class="res-base"><h4>Базовые принципы заботливого ухода (ВОЗ/ЮНИСЕФ)</h4><ul>` +
|
||||
BASE_TIPS.map(t=>`<li>${t}</li>`).join('') + `</ul></div>`;
|
||||
|
||||
toolResults.innerHTML = html;
|
||||
}
|
||||
|
||||
render();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user