Antigravity/notes-qpid-pro
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): unify header and implement navigation drawer (Task 17)

Browse Source 
- Redesign top header into clean, uncluttered layout with hamburger drawer trigger, clickable logo, central SRS focus badge, theme toggle and profile avatar
- Implement unified responsive Navigation Drawer for both desktop and mobile with touch swipe-to-dismiss, backdrop blur, keyboard Esc support and background scroll lock
- Streamline mobile bottom tab bar to 4 core actions (Dictionary, SRS, Reader, Menu) with Menu opening the unified drawer
- Synchronize real-time SRS due badges and dictionary word statistics between header, bottom tabs, and drawer
- Eliminate obsolete separate mobile-menu-modal in favor of unified drawer
- Bump Service Worker cache version to notes-v5.7
This commit is contained in:
Antigravity committed 2026-10-06 21:28:25 +03:00
1 parent 0ff4465d34
commit e73d3470b3
8 files changed
+707 -195
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/static/index.html
+131 -61
View File
@@ -52,48 +52,37 @@
<!-- Main Application Shell -->
<div id="app-shell" class="app-shell hidden">
<!-- Top Navigation Bar -->
<header class="navbar">
<div class="nav-brand" id="nav-brand-home" title="На главную">
<span class="brand-icon">📖</span>
<span class="brand-title">Notes</span>
<span class="brand-sub">English Lexicon</span>
<header class="navbar" id="main-navbar">
<div class="nav-left">
<button id="drawer-toggle-btn" class="icon-btn drawer-toggle-btn" title="Меню навигации (☰)" aria-label="Открыть меню">
<span class="hamburger-icon">☰</span>
</button>
<div class="nav-brand" id="nav-brand-home" title="На главную (Словарь)">
<span class="brand-icon">📖</span>
<span class="brand-title">Notes</span>
<span class="brand-sub">English Lexicon</span>
</div>
</div>
<div class="nav-center">
<button id="srs-trainer-btn" class="btn btn-trainer" title="Интервальный тренажер SRS (повторение слов)">
<span class="trainer-icon">🎓</span>
<span class="trainer-text">Тренажёр SRS</span>
<span id="srs-badge" class="srs-due-badge">0</span>
</button>
<div class="nav-stats" id="nav-stats">
<span class="stat-badge" title="Всего слов в словаре">Всего: <strong id="stat-total">0</strong></span>
<span class="stat-badge stat-today" title="Добавлено сегодня">Сегодня: <strong id="stat-today">+0</strong></span>
</div>
</div>
<div class="nav-actions">
<button id="nav-reader-btn" class="btn btn-outline btn-sm" title="Интерактивная читалка и библиотека книг">
<span>📚 Читалка</span>
</button>
<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>
<span id="srs-badge" class="srs-due-badge">0</span>
</button>
<button id="stats-open-btn" class="btn btn-outline btn-sm stat-open-btn" title="Календарь активности и статистика">
<span>📊 Статистика</span>
</button>
<button id="export-open-btn" class="btn btn-outline btn-sm" title="Экспорт словаря">
<span>📤 Экспорт</span>
</button>
<div class="nav-actions nav-right">
<button id="theme-toggle" class="icon-btn" title="Переключить тему">🌓</button>
<button id="mobile-menu-toggle-btn" class="icon-btn mobile-only-btn" title="Меню профиля и настроек">⚙️</button>
<div class="user-profile">
<button id="nav-user-profile-btn" class="user-profile-btn" title="Меню профиля и настройки">
<span class="user-avatar-icon">👤</span>
<span id="user-display-name" class="user-badge">user</span>
<button id="change-pwd-open-btn" class="btn btn-sm btn-outline" title="Сменить пароль">🔑 Пароль</button>
<button id="logout-btn" class="btn btn-sm btn-outline" title="Выйти из аккаунта">Выход</button>
</div>
</button>
<button id="logout-btn" class="hidden" style="display: none;" title="Выйти из аккаунта"></button>
</div>
</header>
@@ -881,7 +870,7 @@
</div>
</div>
<!-- Mobile Bottom Navigation Tab Bar (iOS style) -->
<!-- Mobile Bottom Navigation Tab Bar (iOS style, 4 core tabs) -->
<nav class="mobile-tab-bar" id="mobile-tab-bar">
<button class="tab-item active" data-view="dictionary-view" id="tab-nav-dict">
<span class="tab-icon">📖</span>
@@ -896,44 +885,125 @@
<span class="tab-icon">📚</span>
<span class="tab-label">Читалка</span>
</button>
<button class="tab-item" id="tab-nav-stats">
<span class="tab-icon">📊</span>
<span class="tab-label">Прогресс</span>
</button>
<button class="tab-item" id="tab-nav-menu">
<span class="tab-icon">⚙️</span>
<span class="tab-icon">☰</span>
<span class="tab-label">Меню</span>
</button>
</nav>
</div>
<!-- Mobile Menu / Profile Sheet Modal -->
<div id="mobile-menu-modal" class="modal-backdrop hidden">
<div class="modal-window mobile-sheet-window">
<div class="modal-header">
<h3>⚙️ Профиль & Меню</h3>
<button class="modal-close-btn" id="mobile-menu-close-btn">✕</button>
<!-- Navigation Drawer (Unified Side Drawer for Desktop & Mobile) -->
<div id="app-drawer-backdrop" class="drawer-backdrop hidden" aria-hidden="true"></div>
<aside id="app-drawer" class="app-drawer" aria-label="Боковое меню навигации">
<div class="drawer-header">
<div class="drawer-user-card" id="drawer-user-card">
<div class="drawer-user-avatar">👤</div>
<div class="drawer-user-info">
<strong id="drawer-user-name" class="drawer-user-name">user</strong>
<span class="drawer-user-desc">Личный словарь English Lexicon</span>
</div>
</div>
<div class="modal-body mobile-menu-body">
<div class="mobile-user-card">
<span class="mobile-user-avatar">👤</span>
<div class="mobile-user-info">
<strong id="mobile-user-name">user</strong>
<p class="subtitle">Личный словарь English Lexicon</p>
</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>
<button id="mobile-pwd-btn" class="btn btn-outline btn-block">🔑 Сменить пароль</button>
<button id="mobile-theme-btn" class="btn btn-outline btn-block">🌓 Переключить тему</button>
<button id="mobile-logout-btn" class="btn btn-danger btn-block">Выйти из аккаунта</button>
</div>
<button id="app-drawer-close-btn" class="icon-btn drawer-close-btn" title="Закрыть меню (Esc)" aria-label="Закрыть">✕</button>
</div>
<!-- Quick Stats in Drawer -->
<div class="drawer-stats-summary" id="drawer-stats-summary">
<div class="drawer-stat-item">
<span class="drawer-stat-val" id="drawer-stat-total">0</span>
<span class="drawer-stat-lbl">Слов в базе</span>
</div>
<div class="drawer-stat-item">
<span class="drawer-stat-val text-success" id="drawer-stat-today">+0</span>
<span class="drawer-stat-lbl">Сегодня</span>
</div>
<div class="drawer-stat-item">
<span class="drawer-stat-val text-warning" id="drawer-stat-due">0</span>
<span class="drawer-stat-lbl">Повторение</span>
</div>
</div>
</div>
<nav class="drawer-nav">
<!-- Section 1: Study & Reading -->
<div class="drawer-section-title">Обучение & Чтение</div>
<ul class="drawer-nav-list">
<li>
<button class="drawer-nav-item active" data-hash="#dictionary" id="drawer-nav-dict">
<span class="drawer-item-icon">📖</span>
<span class="drawer-item-label">Словарь & Поиск</span>
</button>
</li>
<li>
<button class="drawer-nav-item" data-hash="#srs" id="drawer-nav-srs">
<span class="drawer-item-icon">🎓</span>
<span class="drawer-item-label">Тренажёр SRS</span>
<span id="drawer-srs-badge" class="drawer-badge hidden">0</span>
</button>
</li>
<li>
<button class="drawer-nav-item" data-hash="#reader" id="drawer-nav-reader">
<span class="drawer-item-icon">📚</span>
<span class="drawer-item-label">Интерактивная читалка & Книги</span>
</button>
</li>
<li>
<button class="drawer-nav-item" data-hash="#cefr" id="drawer-nav-cefr">
<span class="drawer-item-icon">🎯</span>
<span class="drawer-item-label">Уровневые тесты CEFR (A1–B2)</span>
</button>
</li>
<li>
<button class="drawer-nav-item" data-hash="#grammar" id="drawer-nav-grammar">
<span class="drawer-item-icon">📘</span>
<span class="drawer-item-label">Грамматика Мерфи & Тетрадь</span>
</button>
</li>
</ul>
<!-- Section 2: Analytics & Progress -->
<div class="drawer-section-title">Аналитика</div>
<ul class="drawer-nav-list">
<li>
<button class="drawer-nav-item" id="drawer-nav-stats">
<span class="drawer-item-icon">📊</span>
<span class="drawer-item-label">Календарь активности & Статистика</span>
</button>
</li>
</ul>
<!-- Section 3: Profile & Settings -->
<div class="drawer-section-title">Настройки & Профиль</div>
<ul class="drawer-nav-list">
<li>
<button class="drawer-nav-item" id="drawer-nav-export">
<span class="drawer-item-icon">📤</span>
<span class="drawer-item-label">Экспорт словаря (JSON / CSV / TXT)</span>
</button>
</li>
<li>
<button class="drawer-nav-item" id="drawer-nav-pwd">
<span class="drawer-item-icon">🔑</span>
<span class="drawer-item-label">Сменить пароль</span>
</button>
</li>
<li>
<button class="drawer-nav-item" id="drawer-nav-theme">
<span class="drawer-item-icon">🌓</span>
<span class="drawer-item-label">Переключить тему оформления</span>
</button>
</li>
<li>
<button class="drawer-nav-item text-danger" id="drawer-nav-logout">
<span class="drawer-item-icon">🚪</span>
<span class="drawer-item-label">Выйти из аккаунта</span>
</button>
</li>
</ul>
</nav>
<div class="drawer-footer">
<span class="drawer-footer-text">study.qpid.pro • v5.7 PWA</span>
</div>
</aside>
<!-- Analytics & Activity Heatmap Modal -->
<div id="stats-modal" class="modal-backdrop hidden">