feat(reader): implement full appearance customization panel with themes, fonts, margins, line-height, and localStorage persistence
This commit is contained in:
+76
-6
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>Notes — Персональный тренажер и словарь английского языка</title>
|
||||
<meta name="description" content="Защищённый персональный тренажёр и словарь английского языка с интервальными повторениями SRS SM-2, контекстным поиском и озвучкой">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=3.1">
|
||||
<link rel="stylesheet" href="/static/css/style.css?v=3.2">
|
||||
|
||||
<!-- PWA meta and icons -->
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
@@ -567,10 +567,10 @@
|
||||
</div>
|
||||
|
||||
<div class="reader-toolbar-right">
|
||||
<div class="font-controls">
|
||||
<button id="reader-font-dec-btn" class="btn btn-xs btn-outline" title="Уменьшить шрифт">A-</button>
|
||||
<button id="reader-font-inc-btn" class="btn btn-xs btn-outline" title="Увеличить шрифт">A+</button>
|
||||
</div>
|
||||
<button id="reader-settings-btn" class="btn btn-xs btn-outline reader-settings-btn" title="Настройки оформления текста (шрифт, поля, тема)">
|
||||
<span style="font-weight: 700; font-family: serif; font-size: 13px;">Aa</span>
|
||||
<span class="btn-subtext-inline">Шрифт</span>
|
||||
</button>
|
||||
<button id="reader-toggle-highlight-btn" class="btn btn-xs btn-outline" title="Вкл/Выкл подсветку изучаемых слов">✨ Подсветка</button>
|
||||
<button id="reader-train-btn" class="btn btn-xs btn-trainer" title="Тренировать слова из этой книги">🎓 Слова книги</button>
|
||||
</div>
|
||||
@@ -952,6 +952,76 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reader Appearance Settings Popover / Bottom Sheet -->
|
||||
<div id="reader-settings-panel" class="reader-settings-panel hidden">
|
||||
<div class="sheet-drag-handle mobile-only"></div>
|
||||
<div class="reader-settings-header">
|
||||
<h4>🔤 Настройки текста</h4>
|
||||
<button id="reader-settings-close-btn" class="popup-close-btn">✕</button>
|
||||
</div>
|
||||
<div class="reader-settings-body">
|
||||
<!-- Font Family -->
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Шрифт</span>
|
||||
<div class="setting-segmented-control" id="reader-font-family-group">
|
||||
<button class="seg-btn" data-font="sans" style="font-family: var(--font-family);">Sans</button>
|
||||
<button class="seg-btn active" data-font="serif" style="font-family: Georgia, serif;">Serif</button>
|
||||
<button class="seg-btn" data-font="mono" style="font-family: monospace;">Mono</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Size -->
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Размер шрифта</span>
|
||||
<div class="setting-stepper">
|
||||
<button id="setting-font-dec-btn" class="step-btn">A−</button>
|
||||
<span id="setting-font-size-val" class="step-val">18 px</span>
|
||||
<button id="setting-font-inc-btn" class="step-btn">A+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Line Height -->
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Межстрочный интервал</span>
|
||||
<div class="setting-segmented-control" id="reader-line-height-group">
|
||||
<button class="seg-btn" data-lh="1.35">Компакт</button>
|
||||
<button class="seg-btn active" data-lh="1.65">Оптимум</button>
|
||||
<button class="seg-btn" data-lh="1.95">Широкий</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Margins / Width -->
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Ширина и поля страницы</span>
|
||||
<div class="setting-segmented-control" id="reader-margins-group">
|
||||
<button class="seg-btn" data-margin="narrow">Узкие</button>
|
||||
<button class="seg-btn active" data-margin="normal">Стандарт</button>
|
||||
<button class="seg-btn" data-margin="wide">Книга</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reading Theme -->
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Цветовая тема читалки</span>
|
||||
<div class="theme-palette" id="reader-theme-group">
|
||||
<button class="theme-chip theme-chip-dark active" data-theme="dark" title="Тёмная (Dark Slate)">🌙 Тёмная</button>
|
||||
<button class="theme-chip theme-chip-sepia" data-theme="sepia" title="Сепия (Тёплый пергамент)">📜 Сепия</button>
|
||||
<button class="theme-chip theme-chip-light" data-theme="light" title="Светлая (Чистый лист)">☀️ Светлая</button>
|
||||
<button class="theme-chip theme-chip-oled" data-theme="oled" title="OLED (Абсолютный чёрный)">🖤 OLED</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Alignment -->
|
||||
<div class="setting-row">
|
||||
<span class="setting-label">Выравнивание текста</span>
|
||||
<div class="setting-segmented-control" id="reader-align-group">
|
||||
<button class="seg-btn active" data-align="left">По левому краю</button>
|
||||
<button class="seg-btn" data-align="justify">По ширине</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Click-to-Translate Popup (Mounted at body root to prevent scroll clipping) -->
|
||||
<div id="reader-word-popup" class="reader-word-popup hidden">
|
||||
<div class="sheet-drag-handle mobile-only"></div>
|
||||
@@ -981,7 +1051,7 @@
|
||||
<!-- Audio Element for native streaming -->
|
||||
<audio id="global-audio-player" preload="none"></audio>
|
||||
|
||||
<script src="/static/js/app.js?v=3.1"></script>
|
||||
<script src="/static/js/app.js?v=3.2"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user