<!DOCTYPE html>
<html lang="kk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SenseLab: Arduino температура датчигі (СӨЖ №4)</title>
<style>
:root {
  --bg: #0b131a;
  --bg2: #13222e;
  --card: #182b3a;
  --tx: #e6f1f8;
  --mu: #8ba2b5;
  --ac: #ff5a3c;
  --ac2: #2ea8ff;
  --bd: #223c52;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
body { background: var(--bg); color: var(--tx); line-height: 1.6; padding-bottom: 60px; }
nav { position: sticky; top: 0; z-index: 100; background: rgba(11,19,26,0.92); backdrop-filter: blur(8px); display: flex; gap: 12px; overflow-x: auto; padding: 12px 24px; border-bottom: 1px solid var(--bd); }
nav a { color: var(--mu); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: 0.2s; }
nav a:hover { color: var(--ac2); }
section { max-width: 1000px; margin: 0 auto; padding: 40px 20px; border-bottom: 1px solid var(--bd); }
h1 { font-size: 36px; margin-bottom: 8px; }
h1 span { color: var(--ac); }
h2 { font-size: 26px; color: var(--ac2); margin-bottom: 16px; }
h3 { font-size: 20px; margin-bottom: 12px; }
p { color: var(--mu); margin-bottom: 16px; }
.hero { text-align: center; padding: 60px 20px; }
.rings { font-size: 64px; margin-bottom: 16px; }
.btn { display: inline-block; background: var(--ac); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; text-decoration: none; transition: 0.2s; }
.btn:hover { opacity: 0.9; }
.btn.o { background: transparent; border: 2px solid var(--ac2); color: var(--ac2); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.grid.s { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 18px; cursor: pointer; transition: 0.2s; }
.card:hover, .card.on { border-color: var(--ac2); background: var(--bg2); }
.card .e { font-size: 28px; display: block; margin-bottom: 8px; }
.card b { display: block; color: var(--tx); font-size: 18px; margin-bottom: 6px; }
.card p { font-size: 14px; margin: 0; }
.flow { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; align-items: center; }
.flow .card { flex: 0 0 200px; text-align: center; }
.ar { color: var(--ac2); font-weight: bold; font-size: 20px; }
.pb { height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.pb i { display: block; height: 100%; width: 0%; background: var(--ac); transition: width 0.3s; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 14px; overflow: hidden; font-size: 15px; }
th { background: var(--bg2); text-align: left; padding: 10px 12px; color: var(--tx); }
td { padding: 10px 12px; border-top: 1px solid var(--bd); color: var(--mu); }
tr.hl td { background: var(--bg2); color: var(--tx); }
.tw { overflow-x: auto; border-radius: 14px; border: 1px solid var(--bd); margin-bottom: 20px; }
.bars { margin-top: 18px; }
.br { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; }
.br span { width: 92px; flex: none; font-weight: 600; }
.tr { flex: 1; position: relative; height: 18px; background: var(--bg2); border-radius: 9px; overflow: hidden; }
.tr i { position: absolute; top: 0; bottom: 0; border-radius: 9px; transition: all 1.2s ease; left: 27%; width: 0; }
.ax { display: flex; justify-content: space-between; color: var(--mu); font-size: 12px; margin-left: 102px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 768px) { .two { grid-template-columns: 1fr; } }
.fig { background: var(--card); border-radius: 14px; padding: 20px; text-align: center; border: 1px solid var(--bd); }
.fig svg { max-width: 100%; height: auto; }
.chain { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.chain div { background: var(--bg2); border-radius: 12px; padding: 10px; font-size: 14px; color: var(--mu); }
.chain b { display: block; color: var(--tx); font-size: 19px; margin-top: 4px; }
.fm { background: var(--bg2); border-left: 4px solid var(--ac); border-radius: 10px; padding: 12px 14px; font: 15px ui-monospace, Consolas, monospace; margin: 10px 0; color: var(--tx); }
.scene { position: relative; height: 60px; background: var(--bg2); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.scene span { position: absolute; top: 8px; font-size: 40px; transition: 0.3s ease; }
.pan label { display: block; font-size: 18px; margin-bottom: 8px; }
.pan input[type=range] { width: 100%; margin-bottom: 16px; }
.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tab { background: var(--card); border: 1px solid var(--bd); color: var(--mu); padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.tab.on { background: var(--ac2); color: #fff; border-color: var(--ac2); }
pre { background: #080d12; padding: 16px; border-radius: 10px; border: 1px solid var(--bd); font-family: monospace; font-size: 14px; overflow-x: auto; color: #a6accd; margin: 12px 0; }
.log { background: #000; color: #00ff66; padding: 12px; font-family: monospace; border-radius: 8px; min-height: 48px; margin-top: 8px; white-space: pre-wrap; }
.faq { background: var(--card); border: 1px solid var(--bd); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.faq button { width: 100%; text-align: left; background: none; border: none; padding: 14px 18px; color: var(--tx); font-size: 16px; display: flex; justify-content: space-between; cursor: pointer; }
.faq div { display: none; padding: 0 18px 16px; color: var(--mu); font-size: 14px; }
.faq.on div { display: block; }
.thx { text-align: center; font-size: 22px; font-weight: bold; margin-top: 30px; color: var(--ac2); }
footer { text-align: center; padding: 30px 20px; color: var(--mu); font-size: 14px; border-top: 1px solid var(--bd); }
</style>
</head>
<body>

<noscript>
  <p style="padding:16px;background:#ff5a3c;color:#000;text-align:center;">Интерактив үшін JavaScript керек: файлды Chrome немесе Safari браузерінде ашыңыз.</p>
</noscript>

<nav>
  <a href="#top">Басты</a>
  <a href="#base">Негіздер</a>
  <a href="#types">Түрлері</a>
  <a href="#cmp">Салыстыру</a>
  <a href="#lm">LM35</a>
  <a href="#sim">Калькулятор</a>
  <a href="#calc">Есептеу</a>
  <a href="#code">Код</a>
  <a href="#ds">DS18B20</a>
  <a href="#use">Қолдану</a>
  <a href="#faq">Сұрақтар</a>
</nav>

<section class="hero" id="top">
  <div class="rings">🌡️</div>
  <p style="color:var(--ac);font-weight:700;letter-spacing:2px">СӨЖ ТАПСЫРМАСЫ №4</p>
  <h1>Arduino: <span>температура</span> датчигі</h1>
  <h3 style="color:var(--mu);font-weight:500">Температура датчигінің жұмысын зерттеу</h3>
  <p>Интерактивті платформа: карточканы басыңыз, формулалар мен код нәтижесін көріңіз, калькуляторды сынап көріңіз.</p>
  <div class="row" style="justify-content:center">
    <a class="btn" href="#sim">Калькуляторды ашу</a>
    <a class="btn o" href="#base">Оқуды бастау</a>
  </div>
  <div class="row team" style="justify-content:center;margin-top:16px">
    <span>Орындаған: Барат Шұғыла</span>
  </div>
</section>

<section id="base">
  <h2>Температура датчигі деген не?</h2>
  <p>Температура датчигі – ортаның немесе дененің температурасын өлшеп, оны электр сигналына (кернеуге немесе сандық кодқа) түрлендіретін құрылғы. Arduino бұл сигналды оқып, температураны градуспен көрсетеді.</p>
  <div class="grid" id="g1"></div>

  <h3 style="margin-top:34px">Жұмыс схемасы</h3>
  <p class="sub">Қадамды басыңыз немесе «Ойнату» батырмасын басыңыз.</p>
  <div class="flow" id="fl"></div>
  <div class="pb"><i id="fb"></i></div>
  <div class="row" style="margin-top:12px">
    <button class="btn" id="fp">▶ Ойнату</button>
  </div>

  <h3 style="margin-top:34px">Негізгі терминдер (анықтамалар)</h3>
  <div class="grid s" id="g3"></div>
</section>

<section id="types">
  <h2>Датчиктердің түрлері</h2>
  <p>Arduino үшін 6 түрлі температура датчигі. Басыңыз: анықтама, формула, код және нәтижесі шығады.</p>
  <div class="grid s" id="g2"></div>
</section>

<section id="cmp">
  <h2>Датчиктерді салыстыру</h2>
  <p>Кестедегі жолды басып бөлектеңіз. Төмендегі жолақтар өлшеу диапазонын көрсетеді.</p>
  <div class="tw"><table id="tb"></table></div>
  <div class="bars" id="bars"></div>
  <p class="sub" style="margin-top:10px;font-size:13px">Көрсеткіштер өндірушіге және нұсқаға қарай аздап өзгеруі мүмкін. MAX6675 термопарасы 0…1024 °C өлшейді.</p>
</section>

<section id="lm">
  <h2>LM35 датчигі: құрылысы мен принципі</h2>
  <div class="two">
    <div class="fig">
      <svg viewBox="0 0 400 320" aria-label="LM35 датчигі">
        <path class="wv" d="M130 70 Q160 45 130 20" stroke="#2ea8ff" fill="none" stroke-width="3"/>
        <path class="wv" d="M200 70 Q230 45 200 20" stroke="#2ea8ff" fill="none" stroke-width="3"/>
        <path class="wv" d="M270 70 Q300 45 270 20" stroke="#2ea8ff" fill="none" stroke-width="3"/>
        <path d="M100 250 L100 130 A100 70 0 0 1 300 130 L300 250 Z" fill="#15344a" stroke="#2ea8ff" stroke-width="3"/>
        <text x="150" y="185" font-size="42" font-weight="700" fill="#fff">LM35</text>
        <text x="140" y="225" font-size="22" fill="#2ea8ff">10 мВ / °C</text>
        <g fill="#9db3c4">
          <rect x="130" y="250" width="16" height="50"/>
          <rect x="192" y="250" width="16" height="50"/>
          <rect x="254" y="250" width="16" height="50"/>
        </g>
        <g font-size="20" font-weight="700" fill="#fff">
          <text x="112" y="315">+Vs</text>
          <text x="172" y="315">Vout</text>
          <text x="240" y="315">GND</text>
        </g>
      </svg>
    </div>
    <div>
      <div class="card on" style="cursor:default">
        <b style="font-size:20px">LM35 – аналогтық датчик</b>
        <div class="cb">
          <p>Дәлдігі жоғары аналогтық температура датчигі. Оның шығыс кернеуі температураға тура пропорционал: әр 1 °C үшін 10 мВ.</p>
          <div class="fm">Vout = 10 мВ/°C × T<br>T = Vout × 100</div>
          <p>Мысалы: 25 °C → 250 мВ (0,25 В).</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="sim">
  <h2>Калькулятор: температура → кернеу → АЦП → градус</h2>
  <p>Температураны жылжытып, Arduino қалай есептейтінін көріңіз.</p>
  <div class="two">
    <div class="fig">
      <svg viewBox="0 0 200 400" style="max-height:420px" aria-label="Термометр">
        <rect x="80" y="30" width="40" height="300" rx="20" fill="#e4ebf2" stroke="#2ea8ff" stroke-width="3"/>
        <circle cx="100" cy="350" r="40" fill="#e4ebf2" stroke="#2ea8ff" stroke-width="3"/>
        <circle id="bulb" cx="100" cy="350" r="30" fill="#ff5a3c"/>
        <rect id="mer" x="90" y="200" width="20" height="140" rx="10" fill="#ff5a3c"/>
        <g fill="#8ba2b5" font-size="14">
          <text x="130" y="60">100</text>
          <text x="130" y="130">75</text>
          <text x="130" y="200">50</text>
          <text x="130" y="270">25</text>
          <text x="130" y="335">0</text>
        </g>
      </svg>
    </div>
    <div class="pan">
      <label>Температура: <b id="tv" style="color:var(--ac)">25</b> °C</label>
      <input type="range" id="ts" min="0" max="100" value="25">
      <div class="row">
        <button class="btn" id="mo">Тірек кернеу: 5 В</button>
        <button class="btn o" id="ta">▶ Автоматты</button>
      </div>
      <div class="chain">
        <div>🌡️ Температура<b id="c1">25 °C</b></div>
        <div>⚡ LM35 кернеуі<b id="c2">250 мВ</b></div>
        <div>🔢 АЦП саны (0–1023)<b id="c3">51</b></div>
        <div>🖥️ Arduino есептейді<b id="c4">24.9 °C</b></div>
      </div>
      <div class="fm" id="fx"></div>
      <p class="sub" id="rs" style="font-size:13px"></p>
    </div>
  </div>
</section>

<section id="calc">
  <h2>Температураны есептеу қадамдары</h2>
  <p>Қадамды басыңыз немесе «Ойнату» басыңыз.</p>
  <div class="scene" id="sc">
    <span id="a1" style="left:6%">🌡️</span>
    <span id="a2" style="left:30%">⚡</span>
    <span id="a3" style="left:54%">🔢</span>
    <span id="a4" style="left:80%">🖥️</span>
  </div>
  <div class="grid s" id="g5"></div>
  <div class="row" style="margin-top:12px">
    <button class="btn" id="sp">▶ Ойнату</button>
  </div>
  <div class="fm" style="margin-top:12px">Мысал: сан = 51 → V = 51 × 5 / 1023 ≈ 0,25 В → T ≈ 25 °C</div>
</section>

<section id="wire">
  <h2>LM35-ті Arduino-ға қосу</h2>
  <div class="two">
    <div class="fig">
      <svg viewBox="0 0 600 320" aria-label="Қосылу сызбасы">
        <rect x="20" y="30" width="190" height="260" rx="14" fill="#2ea8ff"/>
        <text x="38" y="72" font-size="23" font-weight="700" fill="#fff">Arduino UNO</text>
        <g font-size="26" fill="#fff">
          <text x="38" y="150">5V</text>
          <text x="38" y="205">A0</text>
          <text x="38" y="260">GND</text>
        </g>
        <rect x="400" y="30" width="180" height="260" rx="14" fill="#15344a" stroke="#2ea8ff" stroke-width="2"/>
        <text x="425" y="72" font-size="26" font-weight="700" fill="#fff">LM35</text>
        <g font-size="26" fill="#fff">
          <text x="425" y="150">+Vs</text>
          <text x="425" y="205">Vout</text>
          <text x="425" y="260">GND</text>
        </g>
        <g class="wr" fill="none" stroke-width="7">
          <path d="M120 142 H400" stroke="#ff5a3c"/>
          <path d="M120 197 H400" stroke="#f2b705"/>
          <path d="M120 252 H400" stroke="#ccc"/>
        </g>
      </svg>
    </div>
    <div class="grid" id="g4" style="grid-template-columns:1fr"></div>
  </div>
</section>

<section id="code">
  <h2>Бағдарлама коды (LM35)</h2>
  <p>Нұсқаны таңдап, кодты көшіріңіз немесе «Іске қосу» арқылы Serial Monitor нәтижесін көріңіз.</p>
  <div class="tabs">
    <button class="tab on" data-c="0">Негізгі</button>
    <button class="tab" data-c="1">Жақсартылған</button>
  </div>
  <div class="row">
    <button class="btn" id="cp">Көшіру</button>
    <button class="btn o" id="cr">▶ Іске қосу</button>
  </div>
  <pre id="cd"></pre>
  <div class="log" id="cl">Serial Monitor...</div>
  <p class="sub" id="cn" style="margin-top:8px;font-size:14px;color:var(--mu)"></p>
</section>

<section id="ds">
  <h2>DS18B20 – сандық датчик</h2>
  <div class="two">
    <div class="fig">
      <svg viewBox="0 0 600 320" aria-label="DS18B20 қосылуы">
        <rect x="20" y="30" width="170" height="260" rx="14" fill="#2ea8ff"/>
        <text x="38" y="72" font-size="23" font-weight="700" fill="#fff">Arduino</text>
        <g font-size="26" fill="#fff">
          <text x="38" y="150">5V</text>
          <text x="38" y="205">D2</text>
          <text x="38" y="260">GND</text>
        </g>
        <rect x="410" y="30" width="170" height="260" rx="14" fill="#15344a" stroke="#2ea8ff" stroke-width="2"/>
        <text x="425" y="72" font-size="22" font-weight="700" fill="#fff">DS18B20</text>
        <g font-size="26" fill="#fff">
          <text x="430" y="150">VDD</text>
          <text x="430" y="205">DQ</text>
          <text x="430" y="260">GND</text>
        </g>
        <g class="wr" fill="none" stroke-width="7">
          <path d="M110 142 H410" stroke="#ff5a3c"/>
          <path d="M110 197 H410" stroke="#f2b705"/>
          <path d="M110 252 H410" stroke="#ccc"/>
        </g>
        <path d="M300 142 V197" stroke="#ff5a3c" stroke-width="5"/>
        <rect x="278" y="152" width="44" height="34" fill="#e8c9a0" stroke="#222" stroke-width="3"/>
        <text x="262" y="226" font-size="22" fill="#fff" font-weight="700">4,7 кΩ</text>
      </svg>
    </div>
    <div class="grid" id="g6" style="grid-template-columns:1fr"></div>
  </div>
  <pre id="dc"></pre>
  <div class="row" style="margin-top:10px">
    <button class="btn" id="dr">▶ Іске қосу</button>
  </div>
  <div class="log" id="dl" style="display:none"></div>
</section>

<section id="use">
  <h2>Қолдану мысалдары</h2>
  <p>Мысалды басып сценарийді көріңіз.</p>
  <div class="grid" id="g7"></div>
</section>

<section id="faq">
  <h2>Қорытынды</h2>
  <div class="grid" id="g8"></div>
  <h3 style="margin-top:34px">Кері байланыс сұрақтары</h3>
  <p class="sub">Сұрақты басыңыз, жауап шығады.</p>
  <div id="fq"></div>
  <div class="thx">Назарларыңызға рахмет! 🙏</div>
</section>

<footer>
  Орындаған: Барат Шұғыла · СӨЖ №4 · Arduino платформасындағы температура датчигі
</footer>

<script>
const $=id=>document.getElementById(id);
const cards=(id,list,cb)=>{
  const el=$(id);
  el.innerHTML=list.map((r,i)=>`
    <div class="card" data-i="${i}">
      ${r.e?`<span class="e">${r.e}</span>`:''}
      <b>${r.t}</b>
      ${r.x?`<div style="color:var(--ac2);font-size:12px;margin-bottom:4px">${r.x}</div>`:''}
      <div class="cb"><p>${r.d}</p></div>
    </div>
  `).join("");
  const cs=el.querySelectorAll(".card");
  cs.forEach((c,i)=>{
    c.onclick=()=>{
      cs.forEach(x=>x.classList.remove("on"));
      c.classList.add("on");
      if(cb) cb(i);
    }
  });
  if(cs.length) cs[0].classList.add("on");
  return (idx)=>{ cs.forEach((x,k)=>x.classList.toggle("on",k===idx)); if(cb) cb(idx); };
};

function typeOut(el, lines){
  el.textContent="";
  let i=0;
  clearInterval(el._t);
  el._t=setInterval(()=>{
    if(i<lines.length){
      el.textContent += lines[i] + "\n";
      i++;
    } else clearInterval(el._t);
  }, 400);
}

cards("g1",[
  {e:"📈",t:"Аналогтық датчик",x:"LM35, TMP36",d:"Температураға сәйкес үздіксіз кернеу береді. Arduino оны analogRead() функциясымен A0–A5 кірістері арқылы оқиды."},
  {e:"🔢",t:"Сандық датчик",x:"DS18B20, DHT11",d:"Температураны сандық код ретінде жібереді. Көрсеткішті кітапхана арқылы оқиды, АЦП қажет емес."},
  {e:"🧲",t:"Термистор",x:"NTC",d:"Температура өзгергенде кедергісі өзгереді. NTC-де температура артса, кедергі азаяды.<div class='fm'>Rт = R × (1023 − a) / a</div>"}
]);

const FS=[
  ["🔥","Температура","Ортада температура өзгереді."],
  ["🌡️","Датчик","Датчик температураны сезеді."],
  ["⚡","Кернеу немесе код","Аналогтық датчик кернеу береді, сандық датчик код жібереді."],
  ["🖥️","Arduino","Arduino сигналды оқиды (АЦП) және градусқа есептейді."],
  ["📟","Көрсету","Нәтиже Serial Monitor-да немесе дисплейде шығады."]
];
$("fl").innerHTML=FS.map((r,i)=>`<div class="card"><span class="e">${r[0]}</span><b>${r[1]}</b><div class="cb"><p>${r[2]}</p></div></div>`+(i<4?'<span class="ar">→</span>':"")).join("");
const fc=[...$("fl").querySelectorAll(".card")];
function fshow(i){
  fc.forEach((c,k)=>c.classList.toggle("on",k===i));
  $("fb").style.width=((i+1)/5*100)+"%";
}
fc.forEach((c,i)=>c.onclick=()=>fshow(i));
fshow(0);
$("fp").onclick=()=>{
  let i=0;
  clearInterval($("fl")._t);
  fshow(0);
  $("fl")._t=setInterval(()=>{
    i++;
    if(i>4){clearInterval($("fl")._t);return;}
    fshow(i);
  },1100);
};

cards("g3",[
  ["АЦП","аналогты-сандық түрлендіргіш: кернеуді санға айналдырады. Arduino UNO-да 10 бит: 0–1023."],
  ["Аналогтық сигнал","үздіксіз өзгеретін сигнал (мысалы, кернеу)."],
  ["Сандық сигнал","0 мен 1 (немесе код) түріндегі дискретті сигнал."],
  ["Термистор","температураға байланысты кедергісі өзгеретін резистор."],
  ["Кернеу бөлгіш","екі резистордан тұратын сұлба, кернеуді бөліп береді."],
  ["Serial Monitor","Arduino IDE-дегі терезе: плата жіберген деректі көрсетеді."],
  ["Pull-up резистор","желіні қуатқа тартып тұратын резистор (DS18B20 үшін 4,7 кΩ)."],
  ["1-Wire","деректі бір сым арқылы беретін интерфейс."]
].map((r,i)=>({e:["🔌","〰️","🔢","🧲","➗","🖥️","⬆️","🔗"][i],t:r[0],d:r[0]+" – "+r[1]})));

cards("g2",[
  {e:"🌡️",t:"LM35",x:"Аналогтық, 10 мВ/°C",d:"Дәлдігі жоғары аналогтық датчик.<div class='fm'>T (°C) = V × 100</div>Диапазоны 0…+100 °C."},
  {e:"🌡️",t:"TMP36",x:"Аналогтық, ығысуы бар",d:"10 мВ/°C береді, бірақ 0 °C кезінде 500 мВ болады.<div class='fm'>T (°C) = (V − 0,5) × 100</div>"},
  {e:"🔗",t:"DS18B20",x:"Сандық, 1-Wire",d:"Жоғары дәлдікті сандық датчик. Бір сымға бірнеше датчик қосуға болады."},
  {e:"💧",t:"DHT11 / DHT22",x:"Температура + ылғалдылық",d:"Температураны да, ылғалдылықты да өлшейді."},
  {e:"🧲",t:"NTC термистор",x:"Кедергі өзгереді",d:"Кедергісі температураға байланысты өзгереді; кернеу бөлгіш арқылы оқылады."},
  {e:"🔥",t:"Термопара MAX6675",x:"Жоғары температура",d:"K-типті термопара 0…1024 °C-қа дейін өлшейді."}
]);

const TB=[
  ["Датчик","Сигнал","Диапазоны (шамамен)","Дәлдігі (шамамен)"],
  ["LM35","Аналогтық","0…+100 °C","±0,5 °C"],
  ["TMP36","Аналогтық","−40…+125 °C","±2 °C"],
  ["DS18B20","Сандық (1-Wire)","−55…+125 °C","±0,5 °C"],
  ["DHT11","Сандық","0…50 °C","±2 °C"],
  ["DHT22","Сандық","−40…+80 °C","±0,5 °C"]
];
$("tb").innerHTML=TB.map((r,i)=>"<tr>"+r.map(c=>i?"<td>"+c+"</td>":"<th>"+c+"</th>").join("")+"</tr>").join("");
document.querySelectorAll("#tb tr").forEach((r,i)=>{
  if(i) r.onclick=()=>{
    document.querySelectorAll("#tb tr").forEach(x=>x.classList.remove("hl"));
    r.classList.add("hl");
  }
});

const BR=[["LM35",-55,150,"#ff5a3c"],["TMP36",-40,125,"#f2b705"],["DS18B20",-55,125,"#2ea8ff"],["DHT11",0,50,"#8e6bff"],["DHT22",-40,80,"#2fbf71"]];
$("bars").innerHTML=BR.map(r=>`<div class="br"><span>${r[0]}</span><div class="tr"><i data-a="${(r[1]+60)/220*100}" data-w="${(r[2]-r[1])/220*100}" style="background:${r[3]}"></i></div></div>`).join("")+'<div class="ax"><span>−60 °C</span><span>0</span><span>50</span><span>100</span><span>160 °C</span></div>';
setTimeout(()=>document.querySelectorAll(".tr i").forEach(i=>{i.style.left=i.dataset.a+"%";i.style.width=i.dataset.w+"%"}),300);

/* calculator */
let Tt=25,Td=25,ref=5,auto=false;
function upd(){
  const V=Tt*0.01, adc=Math.min(1023,Math.round(V/ref*1023)), back=adc*ref/1023*100, res=ref/1023*100;
  $("tv").textContent=Tt;
  $("c1").textContent=Tt+" °C";
  $("c2").textContent=(V*1000).toFixed(0)+" мВ";
  $("c3").textContent=adc;
  $("c4").textContent=back.toFixed(1)+" °C";
  $("fx").innerHTML="V = "+Tt+" × 0,01 = "+V.toFixed(2)+" В<br>сан = "+V.toFixed(2)+" × 1023 / "+ref+" = "+adc+"<br>T = "+adc+" × "+ref+" / 1023 × 100 = "+back.toFixed(1)+" °C";
  $("rs").textContent="Ажыратымдылық: 1 АЦП қадамы ≈ "+res.toFixed(2)+" °C"+(ref==1.1?" (analogReference(INTERNAL): ең көбі ≈110 °C)":"");
}
$("ts").oninput=e=>{Tt=+e.target.value;auto=false;$("ta").textContent="▶ Автоматты";upd()};
$("mo").onclick=()=>{ref=ref==5?1.1:5;$("mo").textContent="Тірек кернеу: "+(ref==5?"5 В":"1,1 В");upd()};
$("ta").onclick=()=>{auto=!auto;$("ta").textContent=auto?"■ Тоқтату":"▶ Автоматты"};
upd();

const mer=$("mer"), bulb=$("bulb");
(function an(t){
  if(auto){
    Tt=Math.round(50+45*Math.sin(t/1200));
    $("ts").value=Tt;
    upd();
  }
  Td+=(Tt-Td)*.12;
  const h=280*Td/100, c="hsl("+(220-Td*2.2)+",85%,55%)";
  mer.setAttribute("y",330-h);
  mer.setAttribute("height",h+10);
  mer.setAttribute("fill",c);
  bulb.setAttribute("fill",c);
  requestAnimationFrame(an);
})(0);

/* steps */
const ST=[
  ["🌡️","Кернеу","LM35 температураға сай кернеу береді.<div class='fm'>Vout = 10 мВ × T</div>"],
  ["🔢","АЦП","Arduino кернеуді 0–1023 санына түрлендіреді (10 бит).<div class='fm'>сан = V × 1023 / 5</div>"],
  ["➗","Кернеу, В","Санды кері қайтадан вольтқа айналдырамыз.<div class='fm'>V = сан × 5,0 / 1023</div>"],
  ["🖥️","Температура","Кернеуді 100-ге көбейтіп, градусты аламыз.<div class='fm'>T (°C) = V × 100</div>"]
];
const s5=cards("g5",ST.map(r=>({e:r[0],t:r[1],x:"Қадам",d:r[2]})),i=>{
  ["a1","a2","a3","a4"].forEach((id,k)=>Object.assign($(id).style,{
    opacity:k<=i?1:.25,
    filter:k<=i?"none":"grayscale(1)",
    transform:k==i?"scale(1.5)":"scale(1)"
  }));
});
$("sp").onclick=()=>{
  let i=0;
  clearInterval($("sp")._t);
  s5(0);
  $("sp")._t=setInterval(()=>{
    i++;
    if(i>3){clearInterval($("sp")._t);return;}
    s5(i);
  },1300);
};

cards("g4",[
  {e:"🔴",t:"+Vs → 5V",x:"қуат (қызыл сым)",d:"Датчикке қуат береді (4–20 В, Arduino-да 5V)."},
  {e:"🟡",t:"Vout → A0",x:"сигнал (сары сым)",d:"Температураға сай кернеу Arduino-ның аналогтық кірісіне барады."},
  {e:"⚫",t:"GND → GND",x:"жер (қара сым)",d:"Ортақ жер: датчик пен Arduino GND-лері қосылады."},
  {e:"⚠️",t:"Ескерту",x:"ұштарды шатастырмаңыз",d:"+Vs және GND ұштарын шатастырсаңыз, датчик қызып, істен шығуы мүмкін."}
]);

/* code */
const C=[
`const int pin = A0;
void setup() {
  Serial.begin(9600);
}
void loop() {
  int v = analogRead(pin);
  float t = v * 5.0 / 1023.0 * 100.0;
  Serial.print("T = ");
  Serial.print(t);
  Serial.println(" C");
  delay(1000);
}`,
`void setup() {
  analogReference(INTERNAL); // 1,1 В тірек кернеу
  Serial.begin(9600);
}
void loop() {
  long sum = 0;
  for (int i = 0; i < 10; i++) {
    sum += analogRead(A0);
    delay(10);
  }
  float v = sum / 10.0;
  float t = v * 1.1 / 1023.0 * 100.0;
  Serial.print("T = ");
  Serial.print(t, 1);
  Serial.println(" C");
  delay(1000);
}`
];
const CO=[["T = 24.93 C","T = 25.42 C","T = 25.42 C","T = 24.93 C"],["T = 25.1 C","T = 25.2 C","T = 25.1 C","T = 25.0 C"]];
const CN=["Негізгі нұсқа: әр секунд сайын температураны Serial Monitor-ға шығарады.","Жақсартылған нұсқа: 1,1 В тірек кернеу дәлдікті арттырады."];
let ci=0;
function showC(){
  clearInterval($("cl")._t);
  $("cd").textContent=C[ci];
  $("cn").textContent=CN[ci];
  $("cl").textContent="Serial Monitor...";
  document.querySelectorAll(".tab").forEach(b=>b.classList.toggle("on",+b.dataset.c===ci));
}
document.querySelectorAll(".tab").forEach(b=>b.onclick=()=>{ci=+b.dataset.c;showC();});
showC();
$("cr").onclick=()=>typeOut($("cl"),CO[ci]);
$("cp").onclick=()=>{
  navigator.clipboard.writeText(C[ci]).then(()=>{$("cp").textContent="Көшірілді ✓";setTimeout(()=>$("cp").textContent="Көшіру",1500);});
};

cards("g6",[
  {e:"🔗",t:"1-Wire интерфейсі",x:"бір сым",d:"Деректі бір сым (DQ) арқылы береді."},
  {e:"⬆️",t:"4,7 кΩ резистор",x:"DQ және 5V арасында",d:"Pull-up резистор желіні жоғары деңгейде ұстап тұрады."},
  {e:"🎚️",t:"Ажыратымдылық",x:"9–12 бит",d:"9 бит ≈ 0,5 °C, 12 бит ≈ 0,0625 °C."},
  {e:"📚",t:"Кітапханалар",x:"OneWire, DallasTemperature",d:"Arduino IDE-де Library Manager арқылы орнатылады."}
]);

$("dc").textContent=`#include <OneWire.h>
#include <DallasTemperature.h>
OneWire ow(2);
DallasTemperature sensors(&ow);
void setup() {
  Serial.begin(9600);
  sensors.begin();
}
void loop() {
  sensors.requestTemperatures();
  Serial.println(sensors.getTempCByIndex(0));
  delay(1000);
}`;
$("dr").onclick=()=>{
  $("dl").style.display="block";
  typeOut($("dl"),["23.75","23.81","23.88","23.81"]);
};

cards("g7",[
  {e:"🏠",t:"Ақылды үй",x:"Жылытуды басқару",d:"Бөлме температурасын бақылап, жылытуды қосады немесе өшіреді."},
  {e:"🌱",t:"Жылыжай",x:"Өсімдікке қолайлы температура",d:"Қолайлы температураны ұстап тұру үшін желдеткішті басқарады."},
  {e:"❄️",t:"Тоңазытқыш",x:"Камера температурасы",d:"Тоңазытқыш камерасының температурасын бақылайды."},
  {e:"💻",t:"Компьютер",x:"Салқындату",d:"Процессорды салқындату желдеткішінің айналымын басқарады."},
  {e:"⛅",t:"Метеостанция",x:"Ауа температурасы",d:"Ауа температурасын өлшеп, жазып отырады."},
  {e:"🏭",t:"Өндіріс",x:"Қызып кетуден қорғау",d:"Жабдық қызып кетсе, дабыл береді немесе өшіреді."}
]);

cards("g8",[
  {e:"✅",t:"Датчик",x:"Қорытынды 1",d:"Температура датчигі температураны электр сигналына түрлендіреді."},
  {e:"🧭",t:"Түрлері",x:"Қорытынды 2",d:"Аналогтық және сандық датчиктер бар."},
  {e:"➗",t:"Формула",x:"Қорытынды 3",d:"LM35 әр 1 °C үшін 10 мВ береді: T = V × 100."},
  {e:"🖥️",t:"Arduino",x:"Қорытынды 4",d:"Arduino кернеуді АЦП арқылы оқып, градусқа есептейді."},
  {e:"🎯",t:"Таңдау",x:"Қорытынды 5",d:"Датчикті таңдау қажетті дәлдікке және бағаға байланысты."}
]);

$("fq").innerHTML=[
  ["Температура датчигі не істейді?","Температураны өлшеп, оны электр сигналына түрлендіреді."],
  ["Аналогтық және сандық датчиктің айырмашылығы неде?","Аналогтық датчик үздіксіз кернеу береді (АЦП қажет), сандық датчик сандық код жібереді."],
  ["LM35 әр 1 °C үшін қанша кернеу береді?","10 мВ. Формула: T = V × 100."],
  ["DS18B20 үшін қандай резистор қажет?","DQ мен 5V арасына 4,7 кΩ pull-up резисторы қойылады."],
  ["АЦП деген не?","Аналогты-сандық түрлендіргіш. Arduino UNO-да кернеуді 0–1023 санына айналдырады."],
  ["LM35 мен TMP36 айырмашылығы неде?","TMP36 0 °C кезінде 500 мВ береді, сонда T = (V − 0,5) × 100."],
  ["Дәлдікті қалай арттыруға болады?","analogReference(INTERNAL) қолдану немесе бірнеше өлшемнің орташасын алу."],
  ["Сан = 51 болса, температура қанша?","V = 51 × 5 / 1023 ≈ 0,25 В, демек T ≈ 25 °C."]
].map(r=>`<div class="faq"><button><b>${r[0]}</b><span>＋</span></button><div><p>${r[1]}</p></div></div>`).join("");
document.querySelectorAll(".faq button").forEach(b=>b.onclick=()=>b.parentNode.classList.toggle("on"));
</script>
</body>
</html>