107 lines
4.3 KiB
HTML
107 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:" />
|
|
<title>Personal Library · Resource Index</title>
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-head">
|
|
<p class="eyebrow">Vault</p>
|
|
<h2 id="vault-name">No vault</h2>
|
|
<label class="vault-picker">
|
|
<span>Switch vault</span>
|
|
<select id="vault-select"></select>
|
|
</label>
|
|
<div class="vault-actions">
|
|
<button type="button" id="open-vault">Open vault</button>
|
|
<button type="button" id="new-vault">New vault</button>
|
|
</div>
|
|
<button type="button" id="remove-vault">Remove from this PC</button>
|
|
</div>
|
|
<p class="eyebrow folder-heading">Folders</p>
|
|
<nav class="folder-list" id="folder-list"></nav>
|
|
<div class="sidebar-actions">
|
|
<button type="button" id="new-folder">New folder</button>
|
|
</div>
|
|
<p class="file-path" id="file-path"></p>
|
|
</aside>
|
|
|
|
<div class="workspace">
|
|
<header class="masthead">
|
|
<div class="masthead-row">
|
|
<div>
|
|
<h1>Personal Library</h1>
|
|
<p class="subtitle">Resource Index</p>
|
|
</div>
|
|
<div class="masthead-meta">
|
|
<p class="datestamp" id="datestamp"></p>
|
|
<button type="button" id="theme-toggle">Dark mode</button>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar">
|
|
<label class="search">
|
|
<span>Search</span>
|
|
<input type="search" id="search" placeholder="title, author, source, tag" autocomplete="off" />
|
|
</label>
|
|
<div class="actions">
|
|
<button type="button" id="import-pdf">Import PDF</button>
|
|
<button type="button" id="add-book">Add book</button>
|
|
<button type="button" id="add-resource">Add resource</button>
|
|
</div>
|
|
</div>
|
|
<p class="toast" id="toast" hidden></p>
|
|
</header>
|
|
|
|
<section class="stats" id="stats" aria-label="Collection summary"></section>
|
|
|
|
<section class="filters" aria-label="Filters">
|
|
<fieldset>
|
|
<legend>Format</legend>
|
|
<label><input type="checkbox" name="format" value="physical" /> Physical</label>
|
|
<label><input type="checkbox" name="format" value="pdf" /> PDF</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Kind</legend>
|
|
<label><input type="checkbox" name="kind" value="article" /> Article</label>
|
|
<label><input type="checkbox" name="kind" value="video" /> Video</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Status</legend>
|
|
<label><input type="checkbox" name="status" value="reading" /> Reading</label>
|
|
<label><input type="checkbox" name="status" value="in_progress" /> In progress</label>
|
|
<label><input type="checkbox" name="status" value="shelf" /> Shelf</label>
|
|
<label><input type="checkbox" name="status" value="paused" /> Paused</label>
|
|
<label><input type="checkbox" name="status" value="backlog" /> Backlog</label>
|
|
<label><input type="checkbox" name="status" value="finished" /> Finished</label>
|
|
<label><input type="checkbox" name="status" value="done" /> Done</label>
|
|
</fieldset>
|
|
</section>
|
|
|
|
<main id="catalog" class="catalog">
|
|
<p class="muted">Loading catalog…</p>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="drop-overlay" class="drop-overlay" hidden>Drop PDFs to import</div>
|
|
|
|
<dialog id="dialog" class="sheet">
|
|
<form id="dialog-form" method="dialog">
|
|
<h2 id="dialog-title">Add</h2>
|
|
<div id="dialog-fields" class="dialog-fields"></div>
|
|
<div class="dialog-actions">
|
|
<button type="submit" value="save">Save</button>
|
|
<button type="button" id="dialog-cancel">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|