database reading

index.html

@@ -2,64 +2,39 @@
 <html lang="ru">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#7c3aed" />
     <title>JapLearn — интервальные повторения</title>
   </head>
   <body>
-    <main id="app">
-      <header class="app-header">
-        <h1>JapLearn</h1>
-        <p class="subtitle">Интервальные повторения · офлайн-первая</p>
+    <div id="app">
+      <header class="top-bar">
+        <button id="burger-btn" class="burger-btn" type="button" aria-label="Меню" aria-expanded="false" aria-controls="drawer">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+        <div class="top-bar-title">
+          <h1>JapLearn</h1>
+          <p id="page-title">Главная</p>
+        </div>
+        <div class="top-bar-spacer"></div>
       </header>
 
-      <section class="card" aria-labelledby="sync-title">
-        <h2 id="sync-title">Сохранение</h2>
-        <p class="card-note">
-          База данных хранится локально на устройстве. Токен связывает её
-          с копией на сервере — скачивайте и выгружайте файл по мере
-          необходимости.
-        </p>
-        <form id="sync-form" novalidate>
-          <div class="field">
-            <label for="save-token">Токен сохранения</label>
-            <input
-              id="save-token"
-              name="save-token"
-              type="text"
-              maxlength="24"
-              autocomplete="off"
-              autocapitalize="characters"
-              spellcheck="false"
-              placeholder="24 буквы или цифры"
-              aria-describedby="token-hint token-error"
-            />
-            <p id="token-hint" class="hint">
-              Последовательность из 24 символов: латинские буквы (A–Z)
-              и цифры (0–9).
-            </p>
-            <p id="token-error" class="error" hidden>
-              Нужно ровно 24 символа — латинские буквы и цифры, без пробелов
-              и знаков.
-            </p>
-          </div>
+      <div id="drawer-overlay" class="drawer-overlay" hidden></div>
+      <nav id="drawer" class="drawer" aria-label="Навигация" aria-hidden="true">
+        <div class="drawer-header">
+          <div class="drawer-logo">JapLearn</div>
+          <div class="drawer-subtitle">Интервальные повторения</div>
+        </div>
+        <button class="drawer-btn active" data-page="home" type="button">🏠 Главная</button>
+        <button class="drawer-btn" data-page="sync" type="button">📡 Синхронизация</button>
+      </nav>
 
-          <div class="actions">
-            <button type="button" id="btn-download" class="btn btn-primary" disabled>
-              Скачать
-            </button>
-            <button type="button" id="btn-upload" class="btn btn-secondary" disabled>
-              Выгрузить
-            </button>
-          </div>
-        </form>
-        <p id="sync-status" class="status" role="status" aria-live="polite"></p>
-        <p id="db-state" class="status" role="status" aria-live="polite"></p>
-      </section>
-
-      <p id="sqlite-status" class="footer-status"></p>
-    </main>
+      <div id="page" class="app-content">
+        <!-- Страницы рендерятся сюда -->
+      </div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
-</html>
+</html>