feat: implement Stage 5 (Interactive Reader, EPUB/TXT parser, Bookshelf, Click-to-Translate) and Stage 4.3 (Strict CEFR level calculation)
This commit is contained in:
@@ -67,6 +67,9 @@
|
||||
</div>
|
||||
|
||||
<div class="nav-actions">
|
||||
<button id="nav-reader-btn" class="btn btn-outline btn-sm" title="Интерактивная читалка и библиотека книг">
|
||||
<span>📚 Читалка</span>
|
||||
</button>
|
||||
<button id="srs-trainer-btn" class="btn btn-trainer" title="Интервальный тренажер (Flashcards, 4 варианта, диктант, ввод)">
|
||||
<span class="trainer-icon">🎓</span>
|
||||
<span class="trainer-text">Тренажёр SRS</span>
|
||||
@@ -517,6 +520,92 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VIEW 3: Interactive Reader & Bookshelf View -->
|
||||
<section id="reader-view" class="reader-view hidden">
|
||||
<!-- Bookshelf View -->
|
||||
<div id="bookshelf-container" class="bookshelf-container">
|
||||
<div class="bookshelf-header">
|
||||
<div class="bookshelf-title-wrap">
|
||||
<h2>📚 Библиотека & Интерактивная Читалка</h2>
|
||||
<p class="subtitle">Читайте тексты и книги с мгновенным клик-переводом, озвучкой и авто-захватом контекста</p>
|
||||
</div>
|
||||
<div class="bookshelf-actions">
|
||||
<button id="add-text-btn" class="btn btn-outline">✏️ Вставить текст</button>
|
||||
<label for="book-file-input" class="btn btn-primary file-upload-label">
|
||||
📁 Загрузить EPUB / TXT
|
||||
<input type="file" id="book-file-input" accept=".epub,.txt,.md" style="display: none;">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bookshelf Grid / Empty -->
|
||||
<div id="bookshelf-empty" class="empty-state hidden">
|
||||
<div class="empty-icon">📖</div>
|
||||
<h3>Ваша библиотека пуста</h3>
|
||||
<p>Загрузите книгу в формате EPUB, текстовый файл TXT/MD или вставьте текст статьи, чтобы начать интерактивное чтение.</p>
|
||||
</div>
|
||||
<div id="bookshelf-grid" class="bookshelf-grid"></div>
|
||||
</div>
|
||||
|
||||
<!-- Reading Interface (Active when a book is open) -->
|
||||
<div id="reader-interface" class="reader-interface hidden">
|
||||
<header class="reader-toolbar">
|
||||
<div class="reader-toolbar-left">
|
||||
<button id="reader-back-btn" class="btn btn-sm btn-outline">← Библиотека</button>
|
||||
<div class="reader-meta">
|
||||
<h3 id="reader-book-title" class="reader-title">Книга</h3>
|
||||
<span id="reader-book-author" class="reader-author">Автор</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reader-toolbar-center">
|
||||
<button id="reader-prev-ch-btn" class="btn btn-xs btn-outline" title="Предыдущая глава">◀</button>
|
||||
<select id="reader-chapter-select" class="reader-select"></select>
|
||||
<button id="reader-next-ch-btn" class="btn btn-xs btn-outline" title="Следующая глава">▶</button>
|
||||
</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-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>
|
||||
</header>
|
||||
|
||||
<!-- Reading Container -->
|
||||
<div class="reader-scroll-area" id="reader-scroll-area">
|
||||
<div class="reader-content-body" id="reader-content-body">
|
||||
<!-- Interactive paragraphs dynamically rendered here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Click-to-Translate Popup -->
|
||||
<div id="reader-word-popup" class="reader-word-popup hidden">
|
||||
<div class="popup-header">
|
||||
<div class="popup-term-wrap">
|
||||
<strong id="popup-term" class="popup-term">word</strong>
|
||||
<span id="popup-phonetic" class="popup-phonetic">/wɜːd/</span>
|
||||
<button id="popup-audio-btn" class="icon-btn audio-btn" title="Слушать произношение">🔊</button>
|
||||
</div>
|
||||
<button id="popup-close-btn" class="popup-close-btn">✕</button>
|
||||
</div>
|
||||
<div class="popup-body">
|
||||
<div id="popup-loading" class="popup-loading hidden">Переводим...</div>
|
||||
<div id="popup-content" class="popup-content">
|
||||
<div class="popup-translation" id="popup-translation">перевод</div>
|
||||
<div class="popup-context" id="popup-context">“Контекст из книги...”</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup-footer">
|
||||
<button id="popup-save-btn" class="btn btn-primary btn-sm btn-block">💾 Добавить в словарь</button>
|
||||
<div id="popup-saved-badge" class="popup-saved-badge hidden">✅ Сохранено в словарь!</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sticky Bulk Action Bar for Batch Selection Mode -->
|
||||
<div id="batch-action-bar" class="batch-action-bar hidden">
|
||||
<div class="batch-left">
|
||||
@@ -800,6 +889,33 @@
|
||||
<button type="submit" id="change-pwd-save-btn" class="btn btn-primary">Сохранить</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Add Book Modal (Paste Text) -->
|
||||
<div id="add-book-modal" class="modal-backdrop hidden">
|
||||
<div class="modal-window">
|
||||
<div class="modal-header">
|
||||
<h3>✏️ Добавить текст или статью</h3>
|
||||
<button id="close-add-book-modal-btn" class="icon-btn">✕</button>
|
||||
</div>
|
||||
<form id="add-book-form">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="book-title-input">Название книги / статьи *</label>
|
||||
<input type="text" id="book-title-input" class="input-styled" required placeholder="Например: Clean Code Principles">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="book-author-input">Автор / Источник</label>
|
||||
<input type="text" id="book-author-input" class="input-styled" placeholder="Например: Robert C. Martin">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="book-content-input">Текст материала (English) *</label>
|
||||
<textarea id="book-content-input" class="input-styled" rows="10" required placeholder="Вставьте английский текст книги, статьи или документации..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" id="cancel-add-book-btn" class="btn btn-outline">Отмена</button>
|
||||
<button type="submit" id="submit-add-book-btn" class="btn btn-primary">📚 Сохранить в библиотеку</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user