| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> |
| <title>Azer Speech Practice</title> |
| <link rel="stylesheet" href="/style.css"> |
| </head> |
| <body> |
|
|
| <main id="workspace"> |
|
|
| <section id="scriptPane" class="pane script-pane"> |
| <div class="script-inner"> |
| <div id="slideTitle" class="slide-title"></div> |
| <div id="slideScript" class="slide-script"></div> |
| </div> |
| </section> |
|
|
| <div id="resizer" aria-label="Resize slide and script panes" title="Drag to resize"></div> |
|
|
| <section id="slidePane" class="pane slide-pane"> |
| <header class="pane-header"> |
| <div id="pageLabel">Slide 0 / 19</div> |
| <div id="status">Loading...</div> |
| </header> |
|
|
| <div class="slide-frame"> |
| <img id="slideImage" alt="Current slide image"> |
| <div id="imageFallback" class="image-fallback" hidden> |
| |
| </div> |
| </div> |
| </section> |
|
|
| </main> |
|
|
| <nav class="bottom-nav"> |
| <button id="prevBtn" class="nav-btn">◀ Prev</button> |
| <button id="playBtn" class="nav-btn primary">▶ Play</button> |
| <button id="stopBtn" class="nav-btn">■ Stop</button> |
| <button id="nextBtn" class="nav-btn">Next ▶</button> |
| </nav> |
|
|
| <audio id="player" preload="none"></audio> |
|
|
| <script src="/app.js"></script> |
| </body> |
| </html> |
