first commit

index.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<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" />
+    <title>JapLearn — интервальные повторения</title>
+  </head>
+  <body>
+    <main id="app">
+      <header class="app-header">
+        <h1>JapLearn</h1>
+        <p class="subtitle">Интервальные повторения · офлайн-первая</p>
+      </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 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>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>