Peler

: / var / www / html / wp-content / themes / bayisihat-jurnal /
Filename : tpl-alat-milestone.php
back
<?php
/* Template Name: Alat — Milestone Bayi */
if (!defined('ABSPATH')) exit; get_header(); ?>
<?php echo bs_breadcrumbs_html(); ?>
<header class="wrap tool-hero">
  <p class="eyebrow">Alat percuma</p>
  <h1>Penjejak Milestone Bayi 0-12 Bulan</h1>
  <p>Setiap bayi membesar ikut tempo tersendiri, tapi ada julat umur yang membantu ibu ayah tahu apa yang biasanya berlaku. Alat ini semak pencapaian bayi anda dari 0 hingga 12 bulan merangkumi motor kasar, motor halus, bahasa dan kemahiran sosial, supaya anda lebih tenang dan tahu bila perlu bertanya pada doktor.</p>
</header>
<div class="wrap">
  <div class="tool-box reveal">
    <form class="tool-form" id="ms-form" onsubmit="return false">
      <div class="tool-field">
        <label for="ms-dob">Tarikh lahir bayi</label>
        <input type="date" id="ms-dob" required>
      </div>
      <button class="btn btn--primary" id="ms-btn" type="submit">Semak Milestone</button>
    </form>
    <div class="tool-result" id="ms-result" aria-live="polite">
      <p class="eyebrow" style="margin-bottom:.2rem">Umur bayi anda</p>
      <div class="tool-result__big" id="ms-age">—</div>
      <p id="ms-band" style="color:var(--muted);font-size:.98rem;margin-bottom:1rem"></p>
      <div id="ms-skills"></div>
      <div id="ms-redflag" class="ms-redflag"></div>
      <p style="margin-top:1.2rem;font-size:.92rem;color:var(--muted)">Setiap bayi membesar ikut tempo sendiri. Julat normal sangat luas. Ini panduan umum, bukan diagnosis.</p>
    </div>
  </div>
  <p class="tool-note"><strong>Bagaimana ia berfungsi?</strong> Pilih umur bayi anda dalam bulan, kemudian alat akan paparkan senarai milestone lazim untuk motor kasar dan halus seperti mengangkat kepala, duduk, mencapai dan menggenggam, bahasa dan komunikasi seperti mengagah dan meniru bunyi, serta sosial seperti senyum dan mengenal wajah. Semakan ini berdasarkan julat perkembangan umum, jadi ia panduan anggaran sahaja dan bukan diagnosis perubatan. Julat normal sebenarnya luas, ada bayi capai sesuatu lebih awal dan ada yang lambat sedikit, kedua-duanya masih dikira biasa. Jika bayi anda ketinggalan banyak milestone untuk umurnya atau anda perasan tanda amaran, sila rujuk doktor atau klinik kesihatan untuk penilaian lanjut.</p>
</div>
<?php $faq = bs_faq(); if ($faq): ?>
<section class="wrap section"><div class="faq" style="max-width:760px;margin:0 auto"><h2>Soalan Lazim</h2>
<?php foreach ($faq as $f): if(empty($f['q'])||empty($f['a'])) continue; ?>
  <details class="faq__item"><summary><?php echo esc_html($f['q']); ?></summary><div class="faq__a"><?php echo esc_html($f['a']); ?></div></details>
<?php endforeach; ?></div></section>
<?php endif; ?>
<section class="wrap section reveal"><?php echo bs_newsletter_form(); ?></section>
<style>
.ms-cat{margin:0 0 1rem}.ms-cat h3{font-family:var(--font-ui);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--clay-deep);margin:0 0 .4rem}
.ms-cat ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.ms-cat li{font-family:var(--font-ui);font-size:.98rem;display:flex;gap:.5rem;color:var(--ink)}.ms-cat li::before{content:"✓";color:var(--forest);font-weight:800}
.ms-redflag{background:var(--alert-bg);border:1px solid var(--alert-line);border-radius:12px;padding:1rem 1.1rem;margin-top:.4rem}
.ms-redflag h3{font-family:var(--font-ui);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--alert-ink);margin:0 0 .4rem}
.ms-redflag ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.ms-redflag li{font-family:var(--font-ui);font-size:.95rem;display:flex;gap:.5rem;color:var(--alert-ink)}.ms-redflag li::before{content:"⚠";flex:none}
</style>
<script>
(function(){
  var BANDS=[
    {upTo:3,label:'Semakan sekitar 2 bulan',motor:['Mula angkat kepala sebentar semasa meniarap','Gerakkan tangan dan kaki lebih lancar'],bahasa:['Buat bunyi "ooo" dan "aaa"','Bertindak balas pada bunyi kuat'],sosial:['Senyum kepada orang (senyum sosial)','Pandang muka dengan penuh minat'],red:['Tak bertindak balas langsung pada bunyi kuat','Tak ikut objek bergerak dengan mata','Tak senyum pada orang menjelang 3 bulan']},
    {upTo:5,label:'Semakan sekitar 4 bulan',motor:['Angkat kepala stabil semasa meniarap','Mula pegang dan goyang mainan','Tolak dengan kaki bila dipegang tegak'],bahasa:['Ketawa dan menjerit gembira','Babbling dengan pelbagai bunyi'],sosial:['Menyalin ekspresi muka','Suka bermain dengan orang'],red:['Tak angkat kepala','Tak babble atau buat bunyi','Tak senyum spontan pada orang']},
    {upTo:7,label:'Semakan sekitar 6 bulan',motor:['Pusing badan dua arah','Duduk dengan sokongan, mula cuba duduk sendiri','Capai dan pindah objek antara tangan'],bahasa:['Babble bunyi konsonan (ba, da, ga)','Bertindak balas bila dipanggil'],sosial:['Kenal muka biasa','Suka tengok pantulan di cermin'],red:['Tak cuba capai objek','Badan sangat kaku atau terlalu lembik','Tak tunjuk kasih sayang pada penjaga']},
    {upTo:10,label:'Semakan sekitar 9 bulan',motor:['Duduk tanpa sokongan','Merangkak atau bergerak sendiri','Main "tepuk amai-amai"'],bahasa:['Sebut "mama" atau "dada" (belum spesifik)','Faham perkataan "tak boleh"'],sosial:['Segan dengan orang asing','Ada mainan kegemaran'],red:['Tak duduk sendiri','Tak babble langsung','Tak bertindak balas pada nama sendiri']},
    {upTo:13,label:'Semakan sekitar 12 bulan',motor:['Berdiri berpaut dan jalan berpaut','Mungkin ambil langkah pertama','Cubit objek kecil dengan ibu jari dan telunjuk'],bahasa:['Sebut 1 hingga 2 perkataan bermakna','Melambai dan menunjuk'],sosial:['Meniru gerakan mudah','Menghulur objek untuk berkongsi'],red:['Tak merangkak','Tak berdiri berpaut','Tak sebut satu perkataan pun','Hilang kemahiran yang pernah ada']},
  ];
  var form=document.getElementById('ms-form');
  form.addEventListener('submit',function(){
    var v=document.getElementById('ms-dob').value; if(!v)return;
    var dob=new Date(v+'T00:00:00'), today=new Date(); today.setHours(0,0,0,0);
    if(dob>today){alert('Tarikh lahir tidak boleh pada masa hadapan.');return;}
    var months=(today-dob)/(86400000*30.4375);
    var mInt=Math.floor(months);
    var band=BANDS[BANDS.length-1], over=false;
    if(months>=13){ over=true; }
    else { for(var i=0;i<BANDS.length;i++){ if(months<BANDS[i].upTo){band=BANDS[i];break;} } }
    document.getElementById('ms-age').textContent=(mInt<1?'Bawah 1 bulan':mInt+' bulan');
    if(over){
      document.getElementById('ms-band').textContent='Bayi anda melepasi 12 bulan. Terus pantau pertuturan, berjalan dan interaksi sosial.';
      document.getElementById('ms-skills').innerHTML='';
      document.getElementById('ms-redflag').innerHTML='<h3>Bila perlu rujuk doktor</h3><ul><li>Belum berjalan menjelang 18 bulan</li><li>Belum sebut sebarang perkataan bermakna</li><li>Hilang kemahiran yang pernah dikuasai</li></ul>';
    } else {
      document.getElementById('ms-band').textContent=band.label+'. Kebanyakan bayi seusia ini mula menunjukkan:';
      var html='';
      html+='<div class="ms-cat"><h3>Motor & pergerakan</h3><ul>'+band.motor.map(function(x){return '<li>'+x+'</li>';}).join('')+'</ul></div>';
      html+='<div class="ms-cat"><h3>Bahasa & komunikasi</h3><ul>'+band.bahasa.map(function(x){return '<li>'+x+'</li>';}).join('')+'</ul></div>';
      html+='<div class="ms-cat"><h3>Sosial & emosi</h3><ul>'+band.sosial.map(function(x){return '<li>'+x+'</li>';}).join('')+'</ul></div>';
      document.getElementById('ms-skills').innerHTML=html;
      document.getElementById('ms-redflag').innerHTML='<h3>Tanda amaran — jumpa doktor jika:</h3><ul>'+band.red.map(function(x){return '<li>'+x+'</li>';}).join('')+'</ul>';
    }
    document.getElementById('ms-result').classList.add('show');
  });
})();
</script>
<?php get_footer(); ?>