diff --git a/index.html b/index.html index f2bb4c8..79952d8 100644 --- a/index.html +++ b/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} @@ -257,10 +290,12 @@ footer a{color:var(--cyan);text-decoration:none;font-weight:600}
0 из 0вех освоено
+
⚠ Смотрите рекомендации ниже
Это памятка для родителей, а не диагноз. Дети развиваются индивидуально. Если что-то беспокоит — обсудите с педиатром.
+
@@ -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 `
${s.name}${s.done}/${s.len}
`; }).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 = `
👆 Отметьте навыки, которые уже есть у ребёнка, — здесь сразу появятся персональные рекомендации.
`; + 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 = `
${sm.icon}

${sm.title}

${sm.text}

`; + + // карточки рекомендаций для отстающих/осваивающихся сфер (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 += `
Рекомендации по сферам развития
`; + focus.forEach(s=>{ + const r = REC[s.key]; + const pill = s.st==='lag' + ? `Отстаёт · ${s.p}%` + : `Осваивается · ${s.p}%`; + const lis = r.tips.map(t=>`
  • ${t}
    • `).join(''); + html += `
    +

    ${SPHERES[s.key].emoji} ${r.title}

    ${pill}
    `; + }); + html += `
    `; + } + + // блок «когда к специалисту» — заметнее при отставании + if(worstStatus === 'lag'){ + html += `
    🩺

    Когда обратиться к специалисту. Если отставание сохраняется дольше 1–2 месяцев, есть потеря освоенных навыков, ребёнок не откликается на имя или избегает зрительного контакта — покажите его педиатру, неврологу и (при речевых задержках) логопеду. Раннее развитие мозга максимально пластично: чем раньше начать поддержку, тем лучше результат.

    `; + } else if(worstStatus === 'watch'){ + html += `
    👀

    Понаблюдайте 3–4 недели, активно применяя рекомендации выше. Если навыки так и не появляются или вы заметили регресс — обратитесь к педиатру. Лучше перестраховаться, чем упустить время.

    `; + } + + // базовые принципы заботливого ухода (всегда) + html += `

    Базовые принципы заботливого ухода (ВОЗ/ЮНИСЕФ)

    `; + + toolResults.innerHTML = html; } render();