|
|
<!DOCTYPE html>
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<div class="reading-info">
|
|
|
<span class="material-icons">schedule</span>
|
|
|
<span id="readingTime">0 min read</span>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="tts-controls">
|
|
|
<button class="tts-btn" id="ttsToggle" title="Toggle Text-to-Speech">
|
|
|
<span class="material-icons">volume_up</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<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> |
