| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="utf-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1" />
|
| <title>The Tower Learns You</title>
|
| <link rel="stylesheet" href="/game.css" />
|
| <link rel="stylesheet" href="/static/shell.css" />
|
| </head>
|
| <body>
|
| <button id="mute-btn" class="tw-mute-btn" title="Toggle music">♪</button>
|
| <div id="app">
|
| <header class="title-block">
|
| <h1>The Tower Learns You</h1>
|
| <p>Every choice teaches the dungeon how to answer.</p>
|
| <span class="backend-badge" id="backend-badge">Backend: …</span>
|
| </header>
|
|
|
|
|
| <section id="screen-title" class="tw-title">
|
| <p>A ten-floor roguelite. The Tower studies how you fight — and adapts.</p>
|
| <button id="begin-btn" class="tw-primary">Begin Ascent</button>
|
| <button id="howtoplay-btn" class="tw-secondary">How to Play</button>
|
| <p class="tw-hint">Custom frontend · Python engine via <code>gr.Server</code></p>
|
| </section>
|
|
|
|
|
| <section id="screen-allocation" class="tw-panel" hidden>
|
| <div id="allocation-html"></div>
|
| <div class="tw-alloc-grid" id="allocation-grid"></div>
|
| <div class="tw-setup-actions">
|
| <button id="alloc-reset" class="tw-secondary">Reset to Tower Proposal</button>
|
| <button id="alloc-confirm" class="tw-primary">Choose Starting Skill</button>
|
| </div>
|
| </section>
|
|
|
|
|
| <section id="screen-starter" class="tw-panel" hidden>
|
| <div id="starter-head"></div>
|
| <div class="tw-diff-row" id="difficulty-row"></div>
|
| <div class="tw-diff-row" id="speed-row"></div>
|
| <button id="prepare-run" class="tw-primary" hidden>Let the Tower Shape This Run</button>
|
| <div class="tw-starter-grid" id="starter-grid"></div>
|
| </section>
|
|
|
|
|
| <section id="screen-gameplay" class="tw-shell" hidden>
|
| <aside class="tw-sidebar" id="sidebar-wrap">
|
| <div class="tw-sidebar-head">
|
| <h2>Character</h2>
|
| <button id="hide-sidebar" class="tw-toggle">Hide</button>
|
| </div>
|
| <div id="sidebar"></div>
|
| </aside>
|
| <div class="tw-main">
|
| <button id="show-sidebar" class="tw-toggle" hidden>Character Panel</button>
|
| <div class="tw-stage" id="tw-stage">
|
| <div id="stage"></div>
|
| <div id="stage-narration"></div>
|
| <div id="combat-decks"></div>
|
| <div id="overlay" class="tw-overlay"></div>
|
| </div>
|
| <div id="latest-log" class="tw-log"></div>
|
| <details class="tw-fulllog">
|
| <summary>Combat Log</summary>
|
| <div id="full-log"></div>
|
| </details>
|
| </div>
|
| </section>
|
|
|
|
|
| <div id="tutorial" class="tw-tutorial" hidden>
|
| <div class="tw-tutorial-card">
|
| <div id="tutorial-content"></div>
|
| <div class="tw-tutorial-nav">
|
| <button id="tutorial-prev" class="tw-card">← Prev</button>
|
| <button id="tutorial-close" class="tw-card primary">Close</button>
|
| <button id="tutorial-next" class="tw-card">Next →</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="loading" class="tw-loading" hidden>
|
| <div class="tw-loading-card">
|
| <div class="tw-rune"></div>
|
| <span id="loading-text">The Tower considers…</span>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="button-tooltip-data"></div>
|
| <div id="tower-tooltip"></div>
|
| </div>
|
|
|
| <audio id="bgm" src="/assets/bgm/bgm.mp3" loop preload="auto"></audio>
|
| <script src="/static/app.js"></script>
|
| </body>
|
| </html>
|
|
|
