<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>3D принтер — включение</title>
<style>
  body{font-family:system-ui,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:#1a1a2e;color:#eee}
  .card{background:#16213e;padding:2rem 2.5rem;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.45);text-align:center;max-width:440px;width:90%}
  h1{margin:0 0 .6rem;font-size:1.4rem}
  p{color:#b8c1d1;line-height:1.5}
  button{background:#4caf50;border:none;color:#fff;padding:.85rem 2rem;font-size:1.05rem;border-radius:10px;cursor:pointer;transition:.15s}
  button:hover:not(:disabled){background:#45a049}
  button:disabled{background:#4a5568;cursor:not-allowed}
  #msg{margin-top:1.1rem;min-height:1.3em;font-size:.92rem;color:#9aa5b8}
</style>
</head>
<body>
<div class="card">
  <h1>🖨️ 3D принтер выключен</h1>
  <p>Принтер не отвечает. Включить питание через Home Assistant?</p>
  <button id="btn" onclick="powerOn()">Включить принтер</button>
  <p id="msg"></p>
</div>
<script>
async function powerOn(){
  const btn=document.getElementById("btn"),msg=document.getElementById("msg");
  btn.disabled=true;
  msg.textContent="Отправляю команду в Home Assistant…";
  try{
    await fetch("/_ha/api/webhook/3dprinter_power_on",{method:"POST"});
    let n=45;
    msg.textContent="Команда отправлена. Принтер загружается… Перезагрузка через "+n+" с.";
    const t=setInterval(()=>{
      n--;
      if(n<=0){clearInterval(t);location.reload();}
      else msg.textContent="Принтер загружается… Перезагрузка через "+n+" с.";
    },1000);
  }catch(e){
    msg.textContent="Ошибка: "+e.message;
    btn.disabled=false;
  }
}
</script>
</body>
</html>