72 lines
2.4 KiB
HTML
72 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Explorer · French Journey</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">French Journey <span>·</span> Explorer</div>
|
|
<nav class="topnav">
|
|
<a href="index.html">Grammar</a>
|
|
<a href="flashcards.html">Flashcards</a>
|
|
<a href="explorer.html" class="active">Explorer</a>
|
|
</nav>
|
|
<button class="theme-toggle" type="button" data-theme-toggle aria-pressed="false">Dark</button>
|
|
<div class="topbar-meta">Database · front/back cards</div>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<aside class="sidebar">
|
|
<nav class="nav">
|
|
<div class="level-group">
|
|
<div class="level-label">
|
|
<span>Database</span>
|
|
<span class="lvl-count" id="explorer-count">0</span>
|
|
</div>
|
|
<a href="#" class="active">
|
|
<span class="dot on"></span>
|
|
<span>-er verbs</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="content explorer-content">
|
|
<div class="level-header">
|
|
<span class="badge">Explorer</span>
|
|
<h1>Card database</h1>
|
|
<p>Browse every flashcard, see the front and back, and filter by word, meaning, or example sentence.</p>
|
|
<input type="text" id="explorer-search" class="search explorer-main-search" placeholder="Filter examples…" />
|
|
<div class="explorer-controls">
|
|
<label>
|
|
SRS
|
|
<select id="explorer-srs-filter">
|
|
<option value="all">All cards</option>
|
|
<option value="due">Due now</option>
|
|
<option value="new">New only</option>
|
|
<option value="scheduled">Scheduled only</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Sort
|
|
<select id="explorer-sort">
|
|
<option value="srs">Least time left</option>
|
|
<option value="az">A → Z</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fc-explorer-meta" id="explorer-meta">Loading cards…</div>
|
|
<div class="fc-explorer-list" id="explorer-list"></div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="theme.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/sql-wasm.js"></script>
|
|
<script src="explorer.js"></script>
|
|
</body>
|
|
</html>
|