Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>MYRPG - AI Game Master</title> | |
| <link rel="manifest" href="manifest.json"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <!-- Main Display Area --> | |
| <main id="app-container"> | |
| <!-- Tab 1: Game / Chat Screen --> | |
| <section id="tab-game" class="tab-content active"> | |
| <header class="top-bar"> | |
| <h2>🎲 Adventure</h2> | |
| <div class="status-badge" id="gm-status">GM: Ready</div> | |
| </header> | |
| <div id="chat-history" class="chat-area"> | |
| <div class="msg gm"> | |
| <strong>Game Master:</strong> Welcome, adventurer. Prepare your character, select a game system prefab, and describe your action to begin. | |
| </div> | |
| </div> | |
| <div class="dice-bar"> | |
| <button id="btn-roll-dice" class="accent-btn">🎲 Shake/Move Mouse to Roll d20</button> | |
| <div id="dice-result-display" class="dice-val">--</div> | |
| </div> | |
| <div class="input-bar"> | |
| <textarea id="user-input" placeholder="Declare your action..."></textarea> | |
| <button id="btn-send" class="primary-btn">Send</button> | |
| </div> | |
| </section> | |
| <!-- Tab 2: Character Sheet Management --> | |
| <section id="tab-character" class="tab-content"> | |
| <header class="top-bar"> | |
| <h2>🧙 Characters</h2> | |
| <button id="btn-new-char" class="secondary-btn">+ New</button> | |
| </header> | |
| <div class="form-group"> | |
| <label>Saved Characters:</label> | |
| <select id="select-character" class="rpg-input"></select> | |
| </div> | |
| <div class="card-panel"> | |
| <div class="form-group"> | |
| <label>Name:</label> | |
| <input type="text" id="char-name" class="rpg-input" value="Hero"> | |
| </div> | |
| <div class="form-group"> | |
| <label>System:</label> | |
| <select id="char-system" class="rpg-input"> | |
| <option value="D&D 5e">D&D 5e (27 Points)</option> | |
| <option value="Pathfinder 2e">Pathfinder 2e (27 Points)</option> | |
| <option value="GURPS">GURPS (100 Points)</option> | |
| </select> | |
| </div> | |
| <div class="point-buy-header"> | |
| <span>Point-Buy Calculator</span> | |
| <span id="point-buy-counter" class="highlight">Remaining: 27</span> | |
| </div> | |
| <div id="stats-container" class="stats-grid"></div> | |
| <button id="btn-save-char" class="primary-btn mt-10">Save Character</button> | |
| </div> | |
| </section> | |
| <!-- Tab 3: Lorebook & Notes --> | |
| <section id="tab-lorebook" class="tab-content"> | |
| <header class="top-bar"> | |
| <h2>📖 Lorebook Memory</h2> | |
| </header> | |
| <div class="card-panel"> | |
| <div class="form-group"> | |
| <label>Tag (e.g. #npc, #location, #event):</label> | |
| <input type="text" id="lore-tag" class="rpg-input" placeholder="#location"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Note Content:</label> | |
| <textarea id="lore-content" class="rpg-input" placeholder="Discovered the ancient temple under the tavern..."></textarea> | |
| </div> | |
| <button id="btn-add-lore" class="primary-btn">Add Lore Entry</button> | |
| </div> | |
| <div id="lore-list" class="list-container"></div> | |
| </section> | |
| <!-- Tab 4: Adventure Prefabs & Rulebooks --> | |
| <section id="tab-rules" class="tab-content"> | |
| <header class="top-bar"> | |
| <h2>⚙️ Prefabs & Rules</h2> | |
| </header> | |
| <div class="card-panel"> | |
| <h3>Adventure Settings Prefab</h3> | |
| <div class="form-group"> | |
| <label>Active Prefab:</label> | |
| <select id="select-prefab" class="rpg-input"></select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Prefab Title:</label> | |
| <input type="text" id="prefab-title" class="rpg-input" value="Dark Fantasy Campaign"> | |
| </div> | |
| <div class="form-group"> | |
| <label>GM Tone & Style:</label> | |
| <input type="text" id="prefab-tone" class="rpg-input" value="Gritty, tactical, immersive, descriptive"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Active Supplements (comma separated):</label> | |
| <input type="text" id="prefab-supplements" class="rpg-input" value="Xanathar's Guide, Tasha's Cauldron"> | |
| </div> | |
| <button id="btn-save-prefab" class="primary-btn">Save Prefab</button> | |
| </div> | |
| <div class="card-panel mt-10"> | |
| <h3>Upload Rulebook (.txt RAG)</h3> | |
| <input type="file" id="file-rulebook" accept=".txt" class="rpg-input"> | |
| <p class="help-text">Uploaded rules are automatically searched and injected during action generation.</p> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation Bar --> | |
| <nav class="bottom-nav"> | |
| <button class="nav-btn active" data-tab="tab-game">🎲 Game</button> | |
| <button class="nav-btn" data-tab="tab-character">🧙 Character</button> | |
| <button class="nav-btn" data-tab="tab-lorebook">📖 Lorebook</button> | |
| <button class="nav-btn" data-tab="tab-rules">⚙️ Settings</button> | |
| </nav> | |
| <script type="module" src="app.js"></script> | |
| </body> | |
| </html> |