PWA_FIREALARM/index.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#0b1020">
<title>Пожарная сигнализация</title>
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" href="icons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="icons/icon-192.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app" id="app">
  <header class="top">
    <div class="brand"><img class="logo" src="icons/icon.svg" alt="" width="34" height="34"><div class="bt"><b>Пожарная сигнализация</b><small id="step">Сцена 1 из 8</small></div></div>
    <nav class="dots" id="dots" aria-label="Прогресс"></nav>
    <div class="tools">
      <button class="icon-btn" id="menu" title="Меню сцен (M)" aria-label="Меню сцен">☰</button>
      <button class="icon-btn" id="tip" title="Подсказка (H)" aria-label="Подсказка">💡</button>
      <button class="icon-btn" id="reset" title="Сбросить сцену (R)" aria-label="Сбросить сцену">↺</button>
      <button class="icon-btn" id="full" title="Полный экран (F)" aria-label="Полный экран">⛶</button>
      <button class="icon-btn" id="sound" title="Звук вкл/выкл" aria-label="Звук">🔊</button>
    </div>
  </header>
  <main class="stage" id="stage" aria-live="polite"></main>
  <footer class="bottom" id="bottom">
    <button class="btn ghost" id="prev">← Назад</button>
    <div class="hint" id="hint"></div>
    <button class="btn primary" id="next">Далее →</button>
  </footer>
</div>
<div id="toast" class="toast" role="status"></div>
<div id="modal" class="modal" hidden></div>
<canvas id="confetti"></canvas>
<script src="app.js"></script>
</body>
</html>