Spaces:
Sleeping
Sleeping
| <html lang="en" data-theme="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lore Keeper</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> | |
| <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/logo.webp') }}"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| </head> | |
| <body> | |
| <a href="#" class="app-name"> | |
| <span class="app-icon">📚</span> | |
| <span>Lore Keeper</span> | |
| </a> | |
| <div class="progress-bar"> | |
| <div class="progress" id="progress"></div> | |
| </div> | |
| <button class="menu-toggle" id="menuToggle">☰</button> | |
| <div class="settings-panel" id="settingsPanel"> | |
| <div class="settings-header"> | |
| <h2>Story Settings</h2> | |
| </div> | |
| <div class="settings-content"> | |
| <div class="settings-section"> | |
| <h3>Genre</h3> | |
| <select id="genre"> | |
| <option value="fantasy">Fantasy</option> | |
| <option value="sci-fi">Science Fiction</option> | |
| <option value="mystery">Mystery</option> | |
| <option value="romance">Romance</option> | |
| <option value="horror">Horror</option> | |
| <option value="historical">Historical Fiction</option> | |
| <option value="adventure">Adventure</option> | |
| </select> | |
| </div> | |
| <div class="settings-section"> | |
| <h3>Theme</h3> | |
| <select id="theme"></select> | |
| </div> | |
| <div class="settings-section"> | |
| <h3>Appearance</h3> | |
| <div class="appearance-controls"> | |
| <select id="fontFamily" class="font-family-select"> | |
| <option value="Crimson Text">Crimson Text</option> | |
| <option value="Georgia">Georgia</option> | |
| <option value="Palatino">Palatino</option> | |
| <option value="Baskerville">Baskerville</option> | |
| </select> | |
| <div class="font-size-controls"> | |
| <button class="font-size-btn" onclick="changeFontSize(-1)">A-</button> | |
| <button class="font-size-btn" onclick="changeFontSize(1)">A+</button> | |
| </div> | |
| <button class="theme-toggle" id="theme-toggle"> | |
| <span id="theme-icon">🌙</span> | |
| <span>Toggle Theme</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Reading Info --> | |
| <div class="reading-info"> | |
| <span class="material-icons">schedule</span> | |
| <span id="readingTime">0 min read</span> | |
| </div> | |
| <!-- Add Text-to-Speech Controls --> | |
| <div class="tts-controls"> | |
| <button class="tts-btn" id="ttsToggle" title="Toggle Text-to-Speech"> | |
| <span class="material-icons">volume_up</span> | |
| </button> | |
| </div> | |
| <!-- Add Swipe Indicator --> | |
| <div class="swipe-indicator" id="swipeIndicator"> | |
| Swipe for more options | |
| </div> | |
| <div class="story-container" id="story-container"></div> | |
| <script src="{{ url_for('static', filename='js/story.js') }}"></script> | |
| </body> | |
| </html> |