82 lines
3.5 KiB
HTML
82 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Word filter</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="top">
|
|
<h1>Word filter</h1>
|
|
<p class="tagline">Import a list, then sort each word: already know it, or still learning.</p>
|
|
</header>
|
|
|
|
<nav class="tabs" role="tablist">
|
|
<button type="button" class="tab is-active" data-panel="import" role="tab" aria-selected="true">Import</button>
|
|
<button type="button" class="tab" data-panel="review" role="tab" aria-selected="false">Review</button>
|
|
<button type="button" class="tab" data-panel="data" role="tab" aria-selected="false">Lists & export</button>
|
|
</nav>
|
|
|
|
<main>
|
|
<section id="panel-import" class="panel is-visible" role="tabpanel">
|
|
<label class="field">
|
|
<span class="label">Paste words (one per line, or separated by commas / spaces)</span>
|
|
<textarea id="import-text" rows="12" placeholder="aberration laconic perspicacious" spellcheck="false"></textarea>
|
|
</label>
|
|
<div class="row">
|
|
<label class="inline"><input type="checkbox" id="dedupe-ci" checked> Ignore duplicate words (case-insensitive)</label>
|
|
</div>
|
|
<div class="row actions">
|
|
<button type="button" id="btn-add" class="btn primary">Add to queue</button>
|
|
<button type="button" id="btn-clear-import" class="btn ghost">Clear box</button>
|
|
</div>
|
|
<p id="import-status" class="status" aria-live="polite"></p>
|
|
</section>
|
|
|
|
<section id="panel-review" class="panel" role="tabpanel" hidden>
|
|
<div class="review-bar">
|
|
<span id="review-count" class="badge"></span>
|
|
<span id="review-hint" class="hint">Keys: <kbd>K</kbd> already know · <kbd>L</kbd> still learning · <kbd>U</kbd> undo</span>
|
|
</div>
|
|
<div id="review-empty" class="empty" hidden>
|
|
<p>Queue is empty. Add words on the Import tab or check Lists for items already sorted.</p>
|
|
</div>
|
|
<div id="review-active" class="review-card" hidden>
|
|
<p id="review-word" class="word" lang="en"></p>
|
|
<div class="row review-actions">
|
|
<button type="button" id="btn-known" class="btn danger wide">Already know <span class="key-hint">K</span></button>
|
|
<button type="button" id="btn-learn" class="btn success wide">Still learning <span class="key-hint">L</span></button>
|
|
</div>
|
|
<button type="button" id="btn-undo" class="btn ghost">Undo last <span class="key-hint">U</span></button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="panel-data" class="panel" role="tabpanel" hidden>
|
|
<div class="stats" id="stats"></div>
|
|
<div class="columns">
|
|
<div class="col">
|
|
<h2>Still learning</h2>
|
|
<textarea id="list-learning" readonly rows="14"></textarea>
|
|
<button type="button" id="export-learning" class="btn primary">Download learning list (.txt)</button>
|
|
</div>
|
|
<div class="col">
|
|
<h2>Already know</h2>
|
|
<textarea id="list-known" readonly rows="14"></textarea>
|
|
<button type="button" id="export-known" class="btn ghost">Download known list (.txt)</button>
|
|
</div>
|
|
</div>
|
|
<div class="row actions danger-zone">
|
|
<button type="button" id="btn-reset-all" class="btn danger outline">Reset everything locally</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="foot">
|
|
<span>Data stays in this browser (IndexedDB).</span>
|
|
</footer>
|
|
|
|
<script src="app.js" defer></script>
|
|
</body>
|
|
</html>
|