site: раздел расчёта питания 8 мес на ГВ с калькулятором
This commit is contained in:
parent
e8b8d0c4e1
commit
0c7ad0859f
130
index.html
130
index.html
@ -133,6 +133,37 @@ footer .col h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing
|
|||||||
.sec-head h2{font-size:27px}
|
.sec-head h2{font-size:27px}
|
||||||
.hero .container{padding:60px 24px 64px}
|
.hero .container{padding:60px 24px 64px}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* BABY NUTRITION CALC */
|
||||||
|
.baby{background:#fff}
|
||||||
|
.calc{background:linear-gradient(135deg,#fffdf6,#eaf6ee);border:1px solid var(--gray-200);border-radius:20px;padding:32px;margin-bottom:32px}
|
||||||
|
.calc-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
|
||||||
|
.calc-row label{font-weight:700;font-size:16px}
|
||||||
|
.calc-row input[type=range]{flex:1;min-width:200px;accent-color:var(--green);height:6px}
|
||||||
|
.calc-row .wval{font-size:28px;font-weight:800;color:var(--green-dark);min-width:96px;text-align:center;background:#fff;border-radius:10px;padding:4px 10px;border:1px solid var(--gray-200)}
|
||||||
|
.calc-result{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
|
||||||
|
.calc-box{background:#fff;border-radius:14px;padding:20px;border:1px solid var(--gray-200);text-align:center}
|
||||||
|
.calc-box .big{font-size:30px;font-weight:800;color:var(--green-dark);line-height:1.1}
|
||||||
|
.calc-box .unit{font-size:14px;color:var(--gray-500);margin-top:2px}
|
||||||
|
.calc-box .lbl{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--amber);margin-bottom:10px}
|
||||||
|
.calc-box.ml .big{color:#2a6fb0}
|
||||||
|
.menu-title{font-size:20px;font-weight:800;margin:8px 0 14px}
|
||||||
|
.menu{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--gray-200)}
|
||||||
|
.menu th,.menu td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--gray-100);font-size:15px}
|
||||||
|
.menu th{background:var(--green-50);color:var(--green-dark);font-size:13px;text-transform:uppercase;letter-spacing:.4px}
|
||||||
|
.menu td:last-child,.menu th:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
|
||||||
|
.menu tr:last-child td{border-bottom:none}
|
||||||
|
.menu .time{font-weight:700;color:var(--green-dark);white-space:nowrap}
|
||||||
|
.baby-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
|
||||||
|
.tip{background:var(--green-50);border-radius:12px;padding:18px}
|
||||||
|
.tip .ico{font-size:24px;margin-bottom:6px}
|
||||||
|
.tip h4{font-size:16px;font-weight:700;margin-bottom:4px}
|
||||||
|
.tip p{font-size:14px;color:#324034}
|
||||||
|
@media(max-width:760px){
|
||||||
|
.calc-result{grid-template-columns:1fr}
|
||||||
|
.baby-tips{grid-template-columns:1fr}
|
||||||
|
.menu th,.menu td{font-size:13px;padding:10px}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -146,6 +177,7 @@ footer .col h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing
|
|||||||
<a href="#supplements">Добавки</a>
|
<a href="#supplements">Добавки</a>
|
||||||
<a href="#herbs">Травы Казахстана</a>
|
<a href="#herbs">Травы Казахстана</a>
|
||||||
<a href="#immunity">Иммунитет</a>
|
<a href="#immunity">Иммунитет</a>
|
||||||
|
<a href="#baby">Питание малыша</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@ -477,6 +509,85 @@ footer .col h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- BABY NUTRITION -->
|
||||||
|
<section id="baby" class="baby">
|
||||||
|
<div class="container">
|
||||||
|
<div class="sec-head">
|
||||||
|
<div class="kicker">Грудное вскармливание · 8 месяцев</div>
|
||||||
|
<h2>Расчёт питания малыша на грудном вскармливании</h2>
|
||||||
|
<p>В 8 месяцев грудное молоко остаётся главной едой, а прикорм уже 3 раза в день. Двиньте ползунок веса — и получите суточную норму, объём молока и примерное меню.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="calc">
|
||||||
|
<div class="calc-row">
|
||||||
|
<label for="weight">Вес ребёнка</label>
|
||||||
|
<input type="range" id="weight" min="6.5" max="11" step="0.1" value="8.5">
|
||||||
|
<div class="wval"><span id="wval">8.5</span> кг</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="calc-result">
|
||||||
|
<div class="calc-box">
|
||||||
|
<div class="lbl">Суточная энергия</div>
|
||||||
|
<div class="big"><span id="kcal">—</span></div>
|
||||||
|
<div class="unit">ккал / день (~95 ккал на кг)</div>
|
||||||
|
</div>
|
||||||
|
<div class="calc-box ml">
|
||||||
|
<div class="lbl">Грудное молоко</div>
|
||||||
|
<div class="big"><span id="milk">—</span></div>
|
||||||
|
<div class="unit">мл / день (≈ 3–4 кормления)</div>
|
||||||
|
</div>
|
||||||
|
<div class="calc-box">
|
||||||
|
<div class="lbl">Прикорм</div>
|
||||||
|
<div class="big"><span id="solids">—</span></div>
|
||||||
|
<div class="unit">ккал / день · 3 приёма пищи</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-title">Примерное меню на день (8 месяцев)</div>
|
||||||
|
<table class="menu">
|
||||||
|
<thead>
|
||||||
|
<tr><th>Время</th><th>Приём пищи</th><th>Объём</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="time">06:00</td><td>Грудное молоко</td><td>по требованию</td></tr>
|
||||||
|
<tr><td class="time">10:00</td><td>Каша молочная (гречка/овсянка) + фруктовое пюре + ½ желтка</td><td>180 + 50 г</td></tr>
|
||||||
|
<tr><td class="time">14:00</td><td>Овощное пюре + мясное пюре + растительное масло (1 ч.л.)</td><td>180 + 50 г</td></tr>
|
||||||
|
<tr><td class="time">18:00</td><td>Творог + фруктовое пюре или каша</td><td>40 + 80 г</td></tr>
|
||||||
|
<tr><td class="time">22:00</td><td>Грудное молоко</td><td>по требованию</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="disc" style="margin-top:24px">
|
||||||
|
<div class="ico">🍼</div>
|
||||||
|
<p><b>Как пользоваться:</b> расчёт ориентировочный по средним нормам ВОЗ для 8 месяцев. Грудное молоко даёт около половины суточной энергии. Следите за аппетитом и прибавкой веса малыша — это главный ориентир.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="baby-tips">
|
||||||
|
<div class="tip">
|
||||||
|
<div class="ico">🥣</div>
|
||||||
|
<h4>Прикорм 3 раза</h4>
|
||||||
|
<p>Каша, овощи с мясом и творог/фрукты. Консистенция — пюре с мелкими кусочками.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
<div class="ico">💧</div>
|
||||||
|
<h4>Допаивание водой</h4>
|
||||||
|
<p>Предлагайте воду между кормлениями, 50–100 мл в день из ложки или поильника.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
<div class="ico">🚫</div>
|
||||||
|
<h4>Без соли и сахара</h4>
|
||||||
|
<p>Не добавляйте соль, сахар, мёд и коровье молоко до 1 года. Новые продукты — по одному.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="disc" style="margin-top:24px">
|
||||||
|
<div class="ico">⚠️</div>
|
||||||
|
<p><b>Важно:</b> расчёт не заменяет консультацию педиатра. Прикорм вводите постепенно и следите за реакцией. При аллергии или плохой прибавке веса обратитесь к врачу.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
<footer>
|
<footer>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -504,6 +615,25 @@ footer .col h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing
|
|||||||
<script>
|
<script>
|
||||||
document.getElementById('y').textContent=new Date().getFullYear();
|
document.getElementById('y').textContent=new Date().getFullYear();
|
||||||
document.querySelectorAll('#menu a').forEach(a=>a.addEventListener('click',()=>document.getElementById('menu').classList.remove('open')));
|
document.querySelectorAll('#menu a').forEach(a=>a.addEventListener('click',()=>document.getElementById('menu').classList.remove('open')));
|
||||||
|
|
||||||
|
// Расчёт питания 8 месяцев на грудном вскармливании
|
||||||
|
(function(){
|
||||||
|
var w=document.getElementById('weight'),wv=document.getElementById('wval');
|
||||||
|
var kcalEl=document.getElementById('kcal'),milkEl=document.getElementById('milk'),solidsEl=document.getElementById('solids');
|
||||||
|
function calc(){
|
||||||
|
var weight=parseFloat(w.value);
|
||||||
|
wv.textContent=weight.toFixed(1).replace('.',',');
|
||||||
|
var kcal=Math.round(weight*95); // ~95 ккал/кг для 8 мес (ВОЗ)
|
||||||
|
var milkKcal=kcal*0.5; // грудное молоко ~50% энергии
|
||||||
|
var milkMl=Math.round(milkKcal/0.7); // ~70 ккал на 100 мл
|
||||||
|
var solids=kcal-Math.round(milkKcal);
|
||||||
|
kcalEl.textContent=kcal.toLocaleString('ru-RU');
|
||||||
|
milkEl.textContent=milkMl.toLocaleString('ru-RU');
|
||||||
|
solidsEl.textContent=solids.toLocaleString('ru-RU');
|
||||||
|
}
|
||||||
|
w.addEventListener('input',calc);
|
||||||
|
calc();
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user