Implement Task 16: Murphy Grammar Engine & Handwritten Journaling
This commit is contained in:
Antigravity committed
1 parent
3fae321322
commit
4d58002b48
11 files changed
+3267
-10
No files matched your search
+186
-1
@@ -73,6 +73,9 @@
|
||||
<button id="nav-cefr-btn" class="btn btn-outline btn-sm" title="Уровневые тесты CEFR (A1, A2, B1, B2)">
|
||||
<span>🎯 Тесты CEFR</span>
|
||||
</button>
|
||||
<button id="nav-grammar-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>
|
||||
@@ -673,6 +676,187 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VIEW 5: Murphy Grammar Engine & Handwritten Journaling View -->
|
||||
<section id="grammar-view" class="grammar-view hidden">
|
||||
<!-- Screen 1: Units Directory -->
|
||||
<div id="grammar-directory-screen" class="grammar-directory-container">
|
||||
<div class="grammar-header">
|
||||
<div class="grammar-title-wrap">
|
||||
<h2>📖 Грамматика Мерфи (Essential & English Grammar)</h2>
|
||||
<p class="subtitle">Вечерний режим глубокой фокусировки: 5–7 минутные микро-уроки, метод контрастов, золотые формулы для бумажной тетради и мгновенное закрепление в SRS при ошибках.</p>
|
||||
</div>
|
||||
<div class="grammar-top-stats">
|
||||
<div class="grammar-stat-chip">
|
||||
<span class="stat-num" id="grammar-stat-total">0</span>
|
||||
<span class="stat-lbl">Юнитов</span>
|
||||
</div>
|
||||
<div class="grammar-stat-chip">
|
||||
<span class="stat-num" id="grammar-stat-completed">0</span>
|
||||
<span class="stat-lbl">Освоено</span>
|
||||
</div>
|
||||
<div class="grammar-stat-chip">
|
||||
<span class="stat-num" id="grammar-stat-handwritten">0</span>
|
||||
<span class="stat-lbl">✍️ В тетради</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Pills -->
|
||||
<div class="grammar-filter-bar">
|
||||
<button class="grammar-filter-pill active" data-filter="all">Все юниты</button>
|
||||
<button class="grammar-filter-pill" data-filter="A1-A2">A1–A2 (Красный Мерфи)</button>
|
||||
<button class="grammar-filter-pill" data-filter="B1-B2">B1–B2 (Синий Мерфи)</button>
|
||||
<button class="grammar-filter-pill" data-filter="Present">Present Tenses</button>
|
||||
<button class="grammar-filter-pill" data-filter="Past">Past Tenses</button>
|
||||
<button class="grammar-filter-pill" data-filter="Future">Future Forms</button>
|
||||
<button class="grammar-filter-pill" data-filter="Modals">Modals</button>
|
||||
<button class="grammar-filter-pill" data-filter="Conditionals">Conditionals</button>
|
||||
<button class="grammar-filter-pill" data-filter="Passive">Passive</button>
|
||||
<button class="grammar-filter-pill" data-filter="Gerund">Gerund & Inf</button>
|
||||
<button class="grammar-filter-pill" data-filter="handwritten">✍️ Записано в тетрадь</button>
|
||||
</div>
|
||||
|
||||
<!-- Units Grid -->
|
||||
<div id="grammar-units-grid" class="grammar-units-grid">
|
||||
<!-- Dynamic unit cards rendered by grammar.js -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Screen 2: Active Lesson & Practice -->
|
||||
<div id="grammar-lesson-screen" class="grammar-lesson-container hidden">
|
||||
<header class="grammar-lesson-topbar">
|
||||
<div class="grammar-topbar-left">
|
||||
<button id="grammar-back-btn" class="btn btn-sm btn-outline">← К юнитам</button>
|
||||
<div class="grammar-lesson-badges">
|
||||
<span id="grammar-lesson-num" class="grammar-unit-pill">Юнит 1</span>
|
||||
<span id="grammar-lesson-level" class="grammar-level-pill badge-a1">A1-A2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grammar-topbar-center">
|
||||
<div class="grammar-tab-switch">
|
||||
<button id="grammar-tab-theory-btn" class="tab-btn active">1. Теория и Тетрадь</button>
|
||||
<button id="grammar-tab-practice-btn" class="tab-btn">2. Микро-практика (5 тап-заданий)</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grammar-topbar-right">
|
||||
<span id="grammar-lesson-cat" class="grammar-cat-label">Present Tenses</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grammar-lesson-content-wrap">
|
||||
<!-- Tab 1 Content: Theory & Handwritten Journaling -->
|
||||
<div id="grammar-tab-theory-content" class="grammar-tab-content">
|
||||
<div class="grammar-theory-header">
|
||||
<h2 id="grammar-lesson-title" class="lesson-main-title">Unit Title</h2>
|
||||
<p id="grammar-lesson-sub" class="lesson-sub-title">Unit Subtitle</p>
|
||||
</div>
|
||||
|
||||
<!-- Contrast Explanation Cards -->
|
||||
<div class="grammar-section-block">
|
||||
<h3 class="section-title"><span class="title-icon">⚖️</span> Метод контрастов (В чём суть и когда применять)</h3>
|
||||
<div id="grammar-contrasts-list" class="grammar-contrasts-list">
|
||||
<!-- Rendered dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Golden Formula Card (Designed for Physical Paper Notebook) -->
|
||||
<div class="grammar-section-block">
|
||||
<h3 class="section-title"><span class="title-icon">✍️</span> Золотая формула для вашей бумажной тетради</h3>
|
||||
<div class="grammar-golden-formula-card">
|
||||
<div class="notebook-pen-icon">✒️</div>
|
||||
<div class="formula-instructions">Выделите ярким маркером или цветной ручкой в конспекте:</div>
|
||||
<div id="grammar-golden-formula-text" class="golden-formula-code"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Handwritten Journaling Prompt & Sync Checkbox -->
|
||||
<div class="grammar-section-block">
|
||||
<h3 class="section-title"><span class="title-icon">📓</span> Персональный дневник от руки (Motor Memory)</h3>
|
||||
<div class="grammar-journaling-card">
|
||||
<div class="journaling-prompt-box">
|
||||
<p id="grammar-journaling-prompt-text" class="journaling-prompt-text"></p>
|
||||
</div>
|
||||
<div class="journaling-action-box">
|
||||
<label class="handwritten-checkbox-label">
|
||||
<input type="checkbox" id="grammar-handwritten-toggle" class="handwritten-checkbox">
|
||||
<span class="custom-chk"></span>
|
||||
<span class="handwritten-label-text">
|
||||
<strong>Записал от руки в бумажную тетрадь</strong>
|
||||
<small>Моторная память усиливает долгосрочную фиксацию грамматической конструкции на 65%</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grammar-theory-footer">
|
||||
<button id="grammar-to-practice-btn" class="btn btn-primary btn-lg">
|
||||
Перейти к микро-практике (5 заданий) →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2 Content: 5 Cloze Tap micro-exercises -->
|
||||
<div id="grammar-tab-practice-content" class="grammar-tab-content hidden">
|
||||
<div class="grammar-practice-card-wrap">
|
||||
<div class="practice-header-bar">
|
||||
<span id="grammar-practice-progress" class="practice-step-text">Задание 1 из 5</span>
|
||||
<div id="grammar-practice-dots" class="practice-dots"></div>
|
||||
</div>
|
||||
|
||||
<div class="grammar-cloze-box">
|
||||
<div id="grammar-cloze-sentence" class="cloze-sentence-display"></div>
|
||||
<div id="grammar-cloze-clue" class="cloze-clue-display"></div>
|
||||
</div>
|
||||
|
||||
<div id="grammar-options-container" class="grammar-tap-options">
|
||||
<!-- 4 Tap buttons rendered dynamically -->
|
||||
</div>
|
||||
|
||||
<div id="grammar-exercise-feedback" class="grammar-feedback-box hidden">
|
||||
<!-- Correct / Incorrect explanation -->
|
||||
</div>
|
||||
|
||||
<div class="practice-nav-bar">
|
||||
<button id="grammar-ex-next-btn" class="btn btn-primary btn-lg btn-block hidden">
|
||||
Следующее задание → (Space)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lesson Summary Card -->
|
||||
<div id="grammar-summary-card" class="grammar-summary-card hidden">
|
||||
<div class="summary-trophy">✨</div>
|
||||
<h2>Юнит освоен!</h2>
|
||||
<div class="summary-score-large" id="grammar-sum-score-val">100%</div>
|
||||
<p id="grammar-sum-score-text" class="summary-lead">Отличный результат!</p>
|
||||
|
||||
<div id="grammar-sum-hw-reminder" class="summary-reminder-box hidden">
|
||||
<span class="reminder-icon">📝</span>
|
||||
<div class="reminder-text">
|
||||
<strong>Не забудьте записать от руки!</strong>
|
||||
<span>Зафиксируйте формулу и 2 личных предложения в тетради для надежного моторного закрепления.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-metrics">
|
||||
<div class="metric-card">
|
||||
<span class="metric-val text-info" id="grammar-sum-ingested-count">0</span>
|
||||
<span class="metric-desc">Ошибок добавлено в SRS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-buttons">
|
||||
<button id="grammar-sum-repeat-btn" class="btn btn-primary btn-lg">🔄 Повторить задания</button>
|
||||
<button id="grammar-sum-srs-btn" class="btn btn-outline btn-lg hidden">🎓 Закрепить ошибки в SRS</button>
|
||||
<button id="grammar-sum-units-btn" class="btn btn-ghost btn-lg">← К каталогу юнитов</button>
|
||||
</div>
|
||||
</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">
|
||||
@@ -731,6 +915,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu-actions">
|
||||
<button id="mobile-grammar-btn" class="btn btn-outline btn-block">📖 Грамматика Мерфи & Тетрадь</button>
|
||||
<button id="mobile-cefr-btn" class="btn btn-outline btn-block">🎯 Уровневые тесты CEFR (A1–B2)</button>
|
||||
<button id="mobile-stats-btn" class="btn btn-outline btn-block">📊 Статистика & Календарь</button>
|
||||
<button id="mobile-export-btn" class="btn btn-outline btn-block">📤 Экспорт словаря</button>
|
||||
@@ -1198,7 +1383,7 @@
|
||||
<!-- Audio Element for native streaming -->
|
||||
<audio id="global-audio-player" preload="none"></audio>
|
||||
|
||||
<script type="module" src="/static/js/app.js?v=5.1"></script>
|
||||
<script type="module" src="/static/js/app.js?v=5.2"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in new issue
Block a user