mirror/shelfmark
1
0
Fork 0
mirror of https://github.com/calibrain/shelfmark.git synced 2026-04-20 13:59:46 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
8ea2fee0bbdfdff225a313b95e495b5ba15faf6d
shelfmark/templates/index.html
CaliBrain 527c5d495d Fix formats in the HTML (read from config) (#279) 
Fix #277
2025-09-09 08:15:44 -04:00

241 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Calibre Web Book Downloader - Modern UI">
<meta name="theme-color" content="#333333">
<title>Book Downloader • Modern</title>
<!-- Base styles and theme variables -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='media/favicon.ico') }}">
<!-- Tailwind (no-build) for rapid iteration) -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen" style="background: var(--bg); color: var(--text);">
<!-- Header -->
<header class="w-full border-b border-[color:var(--border-muted)]" style="background: var(--header-bg);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="{{ url_for('static', filename='media/logo.png') }}" alt="Logo" class="h-8 w-8">
<h1 class="text-lg font-semibold">Book Search & Download</h1>
</div>
<div class="flex items-center gap-2">
{% if debug %}
<form action="/request/api/restart" method="get" id="restart-form">
<button class="px-3 py-1 rounded bg-red-600 text-white text-sm" id="restart-button" type="submit">
RESTART
</button>
</form>
<form action="/request/debug" method="get" id="debug-form">
<button class="px-3 py-1 rounded bg-red-600/80 text-white text-sm" id="debug-button" type="submit">
DEBUG
</button>
</form>
{% endif %}
<!-- Theme Dropdown -->
<div class="relative">
<button id="theme-toggle" class="px-3 py-1 rounded border text-sm" style="border-color: var(--border-muted);">
<span id="theme-text">Theme</span>
</button>
<div id="theme-menu" class="absolute right-0 mt-2 w-36 rounded-md shadow-lg ring-1 ring-black/5 hidden" style="background: var(--bg-soft);">
<ul class="py-1 text-sm">
<li><a href="#" data-theme="light" class="block px-3 py-1 hover:bg-black/10">Light</a></li>
<li><a href="#" data-theme="dark" class="block px-3 py-1 hover:bg-black/10">Dark</a></li>
<li><a href="#" data-theme="auto" class="block px-3 py-1 hover:bg-black/10">Auto (System)</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<!-- Hero / Search -->
<section class="mb-6">
<div class="flex flex-col gap-3">
<div class="flex gap-2">
<input id="search-input" type="search" placeholder="Search by ISBN, title, author..." aria-label="Search books"
class="flex-1 px-4 py-3 rounded-md border outline-none"
style="background: var(--bg-soft); color: var(--text); border-color: var(--border-muted);">
<button id="search-button" class="px-4 py-3 rounded-md text-white bg-blue-600 hover:bg-blue-700">
Search
</button>
</div>
<div>
<button id="toggle-advanced" class="text-sm underline opacity-80 hover:opacity-100">Advanced Search</button>
</div>
<!-- Advanced Filters -->
<form id="search-filters" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 hidden">
<div>
<label for="isbn-input" class="block text-sm mb-1 opacity-80">ISBN</label>
<input id="isbn-input" type="search" placeholder="ISBN"
class="w-full px-3 py-2 rounded-md border"
style="background: var(--bg-soft); color: var(--text); border-color: var(--border-muted);">
</div>
<div>
<label for="author-input" class="block text-sm mb-1 opacity-80">Author</label>
<input id="author-input" type="search" placeholder="Author"
class="w-full px-3 py-2 rounded-md border"
style="background: var(--bg-soft); color: var(--text); border-color: var(--border-muted);">
</div>
<div>
<label for="title-input" class="block text-sm mb-1 opacity-80">Title</label>
<input id="title-input" type="search" placeholder="Title"
class="w-full px-3 py-2 rounded-md border"
style="background: var(--bg-soft); color: var(--text); border-color: var(--border-muted);">
</div>
<div>
<label for="lang-input" class="block text-sm mb-1 opacity-80">Language</label>
<select id="lang-input" class="w-full px-3 py-2 rounded-md border"
style="background: var(--bg-soft); color: var(--text); border-color: var(--border-muted);">
<option value="all">All</option>
{% for lang in book_languages %}
<option value="{{ lang.code }}" {% if lang.code == default_language[0] %}selected{% endif %}>
{{ lang.language }}
</option>
{% endfor %}
</select>
</div>
<div>
<label for="sort-input" class="block text-sm mb-1 opacity-80">Sort</label>
<select id="sort-input" class="w-full px-3 py-2 rounded-md border"
style="background: var(--bg-soft); color: var(--text); border-color: var(--border-muted);">
<option value="">Most relevant</option>
<option value="newest">Newest (publication year)</option>
<option value="oldest">Oldest (publication year)</option>
<option value="largest">Largest (filesize)</option>
<option value="smallest">Smallest (filesize)</option>
<option value="newest_added">Newest (open sourced)</option>
<option value="oldest_added">Oldest (open sourced)</option>
</select>
</div>
<div>
<label for="content-input" class="block text sm mb-1 opacity-80">Content</label>
<select id="content-input" class="w-full px-3 py-2 rounded-md border"
style="background: var(--bg-soft); color: var(--text); border-color: var(--border-muted);">
<option value="">All</option>
<option value="book_nonfiction">Book (non-fiction)</option>
<option value="book_fiction">Book (fiction)</option>
<option value="book_unknown">Book (unknown)</option>
<option value="magazine">Magazine</option>
<option value="book_comic">Comic Book</option>
<option value="standards_document">Standards document</option>
<option value="other">Other</option>
<option value="musical_score">Musical score</option>
<option value="audiobook">Audiobook</option>
</select>
</div>
<div class="md:col-span-2 lg:col-span-3">
<label class="block text-sm mb-1 opacity-80">Formats</label>
<div class="flex flex-wrap gap-3 text-sm">
<label class="inline-flex items-center gap-2 {{ 'opacity-50 cursor-not-allowed' if 'pdf' not in supported_formats else '' }}">
<input type="checkbox" id="format-pdf" value="pdf" {% if 'pdf' not in supported_formats %}disabled{% endif %}>
PDF
</label>
<label class="inline-flex items-center gap-2 {{ 'opacity-50 cursor-not-allowed' if 'epub' not in supported_formats else '' }}">
<input type="checkbox" id="format-epub" value="epub" {% if 'epub' in supported_formats %}checked{% endif %} {% if 'epub' not in supported_formats %}disabled{% endif %}>
EPUB
</label>
<label class="inline-flex items-center gap-2 {{ 'opacity-50 cursor-not-allowed' if 'mobi' not in supported_formats else '' }}">
<input type="checkbox" id="format-mobi" value="mobi" {% if 'mobi' in supported_formats %}checked{% endif %} {% if 'mobi' not in supported_formats %}disabled{% endif %}>
MOBI
</label>
<label class="inline-flex items-center gap-2 {{ 'opacity-50 cursor-not-allowed' if 'azw3' not in supported_formats else '' }}">
<input type="checkbox" id="format-azw3" value="azw3" {% if 'azw3' in supported_formats %}checked{% endif %} {% if 'azw3' not in supported_formats %}disabled{% endif %}>
AZW3
</label>
<label class="inline-flex items-center gap-2 {{ 'opacity-50 cursor-not-allowed' if 'fb2' not in supported_formats else '' }}">
<input type="checkbox" id="format-fb2" value="fb2" {% if 'fb2' in supported_formats %}checked{% endif %} {% if 'fb2' not in supported_formats %}disabled{% endif %}>
FB2
</label>
<label class="inline-flex items-center gap-2 {{ 'opacity-50 cursor-not-allowed' if 'djvu' not in supported_formats else '' }}">
<input type="checkbox" id="format-djvu" value="djvu" {% if 'djvu' in supported_formats %}checked{% endif %} {% if 'djvu' not in supported_formats %}disabled{% endif %}>
DJVU
</label>
<label class="inline-flex items-center gap-2 {{ 'opacity-50 cursor-not-allowed' if 'cbz' not in supported_formats else '' }}">
<input type="checkbox" id="format-cbz" value="cbz" {% if 'cbz' in supported_formats %}checked{% endif %} {% if 'cbz' not in supported_formats %}disabled{% endif %}>
CBZ
</label>
<label class="inline-flex items-center gap-2 {{ 'opacity-50 cursor-not-allowed' if 'cbr' not in supported_formats else '' }}">
<input type="checkbox" id="format-cbr" value="cbr" {% if 'cbr' in supported_formats %}checked{% endif %} {% if 'cbr' not in supported_formats %}disabled{% endif %}>
CBR
</label>
</div>
</div>
<div class="md:col-span-2 lg:col-span-3 flex justify-end">
<button id="adv-search-button" type="button" class="px-4 py-2 rounded-md border"
style="border-color: var(--border-muted);">Search</button>
</div>
</form>
</div>
</section>
<!-- Active Downloads (Top) -->
<section id="active-downloads-top" class="mb-6 hidden">
<div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-semibold">Active Downloads</h2>
<button id="active-refresh-button" class="px-3 py-1 rounded border text-sm" style="border-color: var(--border-muted);">Refresh</button>
</div>
<div id="active-downloads-list" class="space-y-2"></div>
</section>
<!-- Results -->
<section class="mb-8">
<div class="flex items-center justify-between mb-3">
<h2 class="text-xl font-semibold">Search Results</h2>
<div id="search-loading" class="text-sm opacity-80 hidden">Loading…</div>
</div>
<div id="results-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<!-- Cards will be injected here -->
</div>
<div id="no-results" class="mt-4 text-sm opacity-80 hidden">No results found.</div>
</section>
<!-- Modal -->
<div class="modal-overlay" id="modal-overlay" role="dialog" aria-modal="true">
<div class="details-container" id="details-container"></div>
</div>
<!-- Status -->
<section>
<div class="flex items-center flex-wrap mb-3">
<h2 class="text-xl font-semibold mr-4 sm:mr-6">Download Queue & Status</h2>
<div class="flex items-center gap-3 ml-4 sm:ml-auto">
<button id="refresh-status-button" class="px-3 py-1 rounded border text-sm" style="border-color: var(--border-muted);">Refresh</button>
<button id="clear-completed-button" class="px-3 py-1 rounded border text-sm" style="border-color: var(--border-muted);">Clear Completed</button>
<span id="active-downloads-count" class="text-sm opacity-80">Active: 0</span>
</div>
</div>
<div id="status-loading" class="text-sm opacity-80 hidden">Loading…</div>
<div id="status-list" class="space-y-2"></div>
</section>
</main>
<footer class="mt-10 border-t pt-6 pb-10" style="border-color: var(--border-muted); background: var(--footer-bg);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
<div>
<p class="text-sm opacity-80">Calibre Web Book Downloader</p>
<p class="text-xs opacity-60 mt-1">
Build: {{ build_version }} • Release: {{ release_version }} • Env: {{ app_env }}
</p>
</div>
<a href="https://github.com/calibrain/calibre-web-automated-book-downloader" class="opacity-80 hover:opacity-100" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-6 h-6">
<path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 005.47 7.59c.4.07.55-.17.55-.38
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52
-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.54 7.54 0 012 0c1.53-1.03 2.2-.82 2.2-.82
.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2
0 .21.15.46.55.38A8 8 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
</div>
</footer>
<script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink