66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Flashcards · Lists · French Journey</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">French Journey <span>·</span> Flashcards</div>
|
|
<nav class="topnav">
|
|
<a href="index.html">Grammar</a>
|
|
<a href="flashcards.html" class="active">Flashcards</a>
|
|
<a href="explorer.html">Explorer</a>
|
|
</nav>
|
|
<button class="theme-toggle" type="button" data-theme-toggle aria-pressed="false">Dark</button>
|
|
<div class="topbar-meta">Lists · spaced repetition</div>
|
|
</header>
|
|
|
|
<main class="fc-shell" id="app">
|
|
<aside class="fc-sidebar">
|
|
<div class="fc-list-head">
|
|
<div>
|
|
<span class="fc-section-label">Flashcards</span>
|
|
<p>Make a title now; cards can be added later.</p>
|
|
</div>
|
|
<button id="add-list" class="fc-btn ghost">Add list</button>
|
|
</div>
|
|
<nav class="fc-list-grid" id="list-grid"></nav>
|
|
</aside>
|
|
|
|
<section class="fc-wrap">
|
|
<div class="fc-head">
|
|
<h1>Flashcard lists</h1>
|
|
<p>Select a list to study, or use Today for cards due from every list. Your lists and schedule are saved locally.</p>
|
|
</div>
|
|
|
|
<section class="fc-today" id="today-panel"></section>
|
|
|
|
<div class="fc-counts" id="counts"></div>
|
|
|
|
<div class="fc-card" id="card">
|
|
<div class="fc-loading">Loading verbs…</div>
|
|
</div>
|
|
|
|
<!-- shown on the front -->
|
|
<div class="fc-controls" id="show-row" hidden>
|
|
<button id="show" class="fc-btn primary wide">Show answer</button>
|
|
</div>
|
|
|
|
<!-- shown on the back: Anki-style grades -->
|
|
<div class="fc-controls fc-grades" id="grade-row" hidden></div>
|
|
|
|
<div class="fc-tools">
|
|
<button id="undo" class="fc-btn ghost" disabled>Back to previous card</button>
|
|
<button id="reset" class="fc-btn ghost">Reset progress</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="theme.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/sql-wasm.js"></script>
|
|
<script src="flashcards.js"></script>
|
|
</body>
|
|
</html>
|