InfiniteLoop/docs/file.md

<!DOCTYPE html>

<span id="sceneLabel">СЦЕНА 1 / 7</span>
<div class="progress"><div id="progressBar"></div></div>
<button class="icon-btn" id="soundToggle" type="button">🔊 ЗВУК</button>

<canvas id="bgCanvas" width="900" height="500"
  style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:.35;pointer-events:none;"></canvas>
<div style="position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;">
  <h1>Механические волны</h1>
  <p>Интерактивный курс: колебания, звук и среды распространения.</p>
  <p class="hint">Наушники приветствуются 🎧</p>
  <div style="margin-top:24px;">
    <button class="btn" id="btnStart" type="button">▶ Начать курс</button>
    <button class="btn pink" id="btnWhat" type="button">Что такое волна?</button>
  </div>
</div>

<h2>Что такое механическая волна?</h2>
<p>Это распространение колебаний в упругой среде. Частицы колеблются, но не переносятся вместе с волной.</p>
<div class="canvas-wrap"><canvas id="chainCanvas" width="800" height="200"></canvas></div>
<div class="controls">
  <div class="slider-box">
    <label>Частота: <span id="freqVal">3</span> Гц</label>
    <input type="range" id="freqSlider" min="1" max="10" value="3">
  </div>
  <div class="slider-box">
            <label>Амплитуда: <span id="ampVal">25</span> px · 🔊 <span id="ampVol">21</span>%</label>
    <input type="range" id="ampSlider" min="5" max="40" value="25">
  </div>
  <button class="btn green" id="btnPush" type="button">Толкнуть</button>
</div>
<p class="hint" id="scene2Hint">Толчков: 0 / 3</p>
<button class="btn" id="btnNext2" type="button" disabled>Далее →</button>

<h2>Среда распространения. Скорость звука</h2>
<p>Чем плотнее и упруже среда — тем быстрее идёт звук.</p>
<div class="tubes">
  <div class="tube"><span class="label">Воздух ≈ 343 м/с</span><div class="impulse" data-speed="2.4"></div></div>
  <div class="tube"><span class="label">Вода ≈ 1480 м/с</span><div class="impulse" data-speed="1.2"></div></div>
  <div class="tube"><span class="label">Сталь ≈ 5100 м/с</span><div class="impulse" data-speed="0.5"></div></div>
</div>
<button class="btn" id="btnImpulse" type="button">Запустить импульс</button>
<p class="question" style="margin-top:20px;">В какой среде звук распространяется быстрее всего?</p>
<div class="quiz-options" id="quiz3">
  <button class="btn" data-ans="air" type="button">Воздух</button>
  <button class="btn" data-ans="water" type="button">Вода</button>
  <button class="btn" data-ans="steel" type="button">Сталь</button>
</div>
<button class="btn" id="btnNext3" type="button" disabled style="margin-top:20px;">Далее →</button>

<h2>Колебания: период, частота, амплитуда</h2>
<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:16px;">
  <div class="canvas-wrap"><canvas id="oscCanvas" width="360" height="260"></canvas></div>
  <div class="canvas-wrap"><canvas id="waveCanvas" width="360" height="260"></canvas></div>
</div>
<div class="controls">
  <div class="slider-box">
    <label>Амплитуда: <span id="ampVal2">60</span></label>
    <input type="range" id="ampSlider2" min="20" max="100" value="60">
  </div>
  <div class="slider-box">
    <label>Период: <span id="perVal">1.2</span> с</label>
    <input type="range" id="perSlider" min="4" max="30" value="12">
  </div>
  <button class="btn pink" id="btnCheck4" type="button">Проверить понимание</button>
</div>
<p class="table">Формулы: <span>T = 1/ν</span> · <span>ν = 1/T</span> · <span>v = λν</span></p>
<button class="btn" id="btnNext4" type="button" disabled>Далее →</button>

<h2>Виды волн. Звук — продольная волна</h2>
<div class="controls">
  <button class="btn" id="btnLong" type="button">Продольная</button>
  <button class="btn pink" id="btnTrans" type="button">Поперечная</button>
</div>
<div class="canvas-wrap"><canvas id="typeCanvas" width="800" height="200"></canvas></div>
<p>Собери «звук»: кликни по молекуле — она встанет в ближайшую позицию сжатия/разрежения.</p>
<div class="molecules" id="molecules"></div>
<p class="hint" id="scene5Hint">Размещено: 0 / 6</p>
<button class="btn" id="btnNext5" type="button" disabled>Далее →</button>

<h2>Применение звуковых волн</h2>
<p>Нажми на карточку, чтобы узнать подробнее.</p>
<div class="cards" id="cards">
  <div class="card"><div class="card-inner">
    <div class="card-face">Эхолокация</div>
    <div class="card-face back">Летучие мыши и дельфины определяют препятствия по отражённому ультразвуку.</div>
  </div></div>
  <div class="card"><div class="card-inner">
    <div class="card-face">УЗИ</div>
    <div class="card-face back">Медицинская визуализация: ультразвук отражается от границ тканей.</div>
  </div></div>
  <div class="card"><div class="card-inner">
    <div class="card-face">Сейсмология</div>
    <div class="card-face back">По сейсмическим волнам изучают строение Земли и землетрясения.</div>
  </div></div>
  <div class="card"><div class="card-inner">
    <div class="card-face">Музыка</div>
    <div class="card-face back">Струны и столбы воздуха создают стоячие волны — ноты.</div>
  </div></div>
</div>
<p>Собери пару: пример ↔ физическое явление.</p>
<div class="pairs">
  <div class="pair-col" id="pairLeft"></div>
  <div class="pair-col" id="pairRight"></div>
</div>
<p class="hint" id="scene6Hint">Собрано пар: 0 / 4</p>
<button class="btn" id="btnNext6" type="button" disabled>К тестированию →</button>

<h2 id="quizTitle">Итоговое тестирование</h2>
<div class="progress-quiz"><div id="quizProgress"></div></div>
<p class="question" id="quizQuestion">…</p>
<div class="quiz-options" id="quizOptions"></div>
<div id="quizResult" style="display:none;flex-direction:column;align-items:center;">
  <div class="result-score" id="finalScore">0</div>
  <p id="finalText" style="margin:16px 0;"></p>
  <button class="btn pink" id="btnRestart" type="button">Пройти заново</button>
</div>

<div class="modal-content">
  <h2 id="modalTitle">…</h2>
  <p id="modalText" style="margin:16px 0;">…</p>
  <button class="btn" id="modalClose" type="button">Закрыть</button>
</div>