65 lines
2.6 KiB
HTML
65 lines
2.6 KiB
HTML
|
<!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>
|