79 lines
3.5 KiB
HTML
79 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.0"/>
|
||
<title>Novela — Library</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
|
||
<link rel="stylesheet" href="/static/sidebar.css"/>
|
||
<link rel="stylesheet" href="/static/library.css"/>
|
||
</head>
|
||
<body>
|
||
|
||
{% include "_sidebar.html" %}
|
||
|
||
<!-- ── Main content ────────────────────────────────────────────────────── -->
|
||
<main class="main">
|
||
<div class="main-header">
|
||
<div style="display:flex;align-items:center;gap:0.75rem">
|
||
<button class="btn-back" id="back-btn" style="display:none" onclick="goBack()">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
|
||
Back
|
||
</button>
|
||
<div class="main-title" id="section-title">All books</div>
|
||
</div>
|
||
<div class="search-wrap">
|
||
<svg class="search-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
|
||
</svg>
|
||
<input type="text" id="search-input" class="search-input" placeholder="Search title, author, genre…" autocomplete="off"/>
|
||
<button id="search-clear" class="search-clear" style="display:none" onclick="clearSearch()" title="Clear search">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="import-dropzone" id="import-dropzone" onclick="openImportPicker()">
|
||
<input type="file" id="import-file-input" accept=".epub,application/epub+zip" multiple style="display:none" onchange="onImportFilesSelected(this.files)"/>
|
||
<div class="import-title">Drop EPUB files here</div>
|
||
<div class="import-sub">or click to choose files</div>
|
||
</div>
|
||
<div id="grid-container">
|
||
<div class="empty">Loading…</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Delete dialog -->
|
||
<div class="overlay" id="confirm-overlay">
|
||
<div class="dialog">
|
||
<div class="dialog-title del">Delete book</div>
|
||
<p>Delete <strong id="confirm-filename"></strong>?<br/>This cannot be undone.</p>
|
||
<div class="dialog-actions">
|
||
<button class="btn btn-cancel" onclick="closeConfirm()">Cancel</button>
|
||
<button class="btn btn-confirm-del" onclick="confirmDelete()">Delete</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add cover dialog -->
|
||
<div class="overlay" id="cover-overlay">
|
||
<div class="dialog">
|
||
<div class="dialog-title cover">Add cover</div>
|
||
<p><strong id="cover-target-filename"></strong></p>
|
||
<div class="cover-upload-area" id="cover-upload-area">
|
||
<input type="file" id="cover-file-input" accept="image/*" onchange="onCoverFileSelected()"/>
|
||
<img class="cover-preview" id="cover-dialog-preview" src="" alt="preview"/>
|
||
<div class="cover-upload-label"><span id="cover-upload-prompt">Click to select a cover image</span></div>
|
||
</div>
|
||
<div class="dialog-actions">
|
||
<button class="btn btn-cancel" onclick="closeCoverDialog()">Cancel</button>
|
||
<button class="btn btn-confirm-cover" id="cover-upload-btn" onclick="uploadCover()" disabled>
|
||
<span id="cover-upload-label">Add cover</span>
|
||
<div class="spinner-inline" id="cover-spinner"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/library.js"></script>
|
||
</body>
|
||
</html>
|