mirror of
https://github.com/calibrain/shelfmark.git
synced 2026-10-01 14:55:50 +01:00
215 lines
12 KiB
HTML
215 lines
12 KiB
HTML
<!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 Application">
|
|
<meta name="theme-color" content="#333333">
|
|
<title>Calibre Web Book Downloader</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
|
<!-- Add favicon -->
|
|
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
<!-- UIkit CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/css/uikit.min.css" />
|
|
|
|
<!-- UIkit JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit-icons.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="uk-flex uk-flex-between uk-flex-middle">
|
|
<h1 class="uk-heading-medium" style="color: white;">Book Search & Download</h1>
|
|
<div class="uk-margin-right">
|
|
{% if debug %}
|
|
<form action="/debug" method="get" style="display: inline;" id="debug-form">
|
|
<button class="uk-button uk-button-danger uk-margin-small-right" id="debug-button" type="submit">
|
|
DEBUG <span uk-spinner="ratio: 0.8" class="uk-hidden" id="debug-spinner"></span>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
<button class="uk-button uk-button-default" type="button" id="theme-toggle">
|
|
<span uk-icon="icon: paint-bucket"></span>
|
|
<span id="theme-text">Theme</span>
|
|
</button>
|
|
<div uk-dropdown="mode: click">
|
|
<ul class="uk-nav uk-dropdown-nav">
|
|
<li><a href="#" data-theme="light">Light</a></li>
|
|
<li><a href="#" data-theme="dark">Dark</a></li>
|
|
<li><a href="#" data-theme="auto">Auto (System)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="uk-container">
|
|
<!-- Search Section -->
|
|
<section class="uk-section-xxsmall uk-padding">
|
|
<div class="uk-container uk-width-expand">
|
|
<form class="uk-search uk-search-default uk-width-expand">
|
|
<input class="uk-search-input" type="search" placeholder="Search by ISBN, title, author..." aria-label="Search books" id="search-input">
|
|
<button class="uk-search-icon-flip" uk-search-icon id="search-button" type="button"></button>
|
|
</form>
|
|
<button class="uk-button uk-button-default uk-float-right" uk-toggle="target: #search-filters" type="button">Advanced Search</button>
|
|
<form hidden id="search-filters" class="uk-search uk-search-default uk-inline uk-width-expand uk-flex uk-flex-wrap">
|
|
<div class="search-filter">
|
|
<label for="isbn-input">ISBN</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<input class="uk-search-input uk-width-4-5" type="search" placeholder="ISBN..." aria-label="Search by ISBN" id="isbn-input">
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label for="author-input">Author</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<input class="uk-search-input uk-width-4-5" type="search" placeholder="Author..." aria-label="Search by author" id="author-input">
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label for="title-input">Title</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<input class="uk-search-input uk-width-4-5" type="search" placeholder="Title" aria-label="Search by title" id="title-input">
|
|
</div>
|
|
</div>
|
|
<div class="search-filter">
|
|
<label for="lang-input">Language</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<select class="uk-select uk-width-4-5" id="lang-input">
|
|
<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>
|
|
<div class="search-filter">
|
|
<label for="sort-input">Sort</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<select class="uk-select uk-width-4-5" id="sort-input">
|
|
<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>
|
|
<div class="search-filter">
|
|
<label for="content-input">Content</label>
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<select class="uk-select uk-width-4-5" id="content-input">
|
|
<option value="">All</option>
|
|
<option value="book_nonfiction">Book (non-fiction)</option>
|
|
<option value="book_fiction">Book (fiction)</option>
|
|
<option value="book_unknown">Book (unkown)</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>
|
|
|
|
<div class="uk-flex uk-margin-auto-top uk-margin-auto-left">
|
|
<button class="uk-button uk-button-default uk-margin-small-top" id="adv-search-button" type="button">Search</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results Section -->
|
|
<ul uk-accordion id="results-section-accordion">
|
|
<li id="search-accordion">
|
|
<a class="uk-accordion-title" href><h1 class="uk-heading-xsmall">Search Results</h1></a>
|
|
<div class="uk-accordion-content">
|
|
<div id="search-loading" class="uk-flex uk-flex-center" role="status" hidden>
|
|
<div uk-spinner="ratio: 2"></div>
|
|
<span>Loading...</span>
|
|
</div>
|
|
<div class="results-content">
|
|
<button class="uk-button uk-button-primary uk-margin-small" id="download-selected-button" disabled>Download Selected</button>
|
|
<div class="uk-overflow-auto">
|
|
<table id="results-table" class="uk-table uk-table-hover uk-table-divider" role="grid">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<input type="checkbox" id="select-all-checkbox" class="uk-checkbox" />
|
|
</th>
|
|
<th scope="col" data-sort="index"># <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col">Preview</th>
|
|
<th scope="col" data-sort="title">Title <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="author">Author <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="publisher">Publisher <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="year">Year <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="language">Language <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="format">Format <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col" data-sort="size">Size <span class="sort-icon" uk-icon></span></th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Search results will be injected here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal-overlay" id="modal-overlay" role="dialog" aria-modal="true">
|
|
<div class="details-container" id="details-container">
|
|
<!-- Details will be dynamically injected here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Section -->
|
|
<ul uk-accordion id="status-section">
|
|
<li id="search-accordion">
|
|
<a class="uk-accordion-title" href><h1 class="uk-heading-xsmall">Download Status</h1></a>
|
|
<div class="uk-accordion-content">
|
|
<div id="status-loading" class="uk-flex uk-flex-center" role="status" hidden>
|
|
<div uk-spinner="ratio: 2"></div>
|
|
<span>Loading...</span>
|
|
</div>
|
|
<div class="status-content">
|
|
<div class="uk-overflow-auto">
|
|
<table id="status-table" class="uk-table uk-table-hover uk-table-divider" role="grid">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Book ID</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">Preview</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Search results will be injected here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<h1 class="uk-heading-xxsmall" style="color: white;">Calibre Web Book Downloader</h1>
|
|
<a href="https://github.com/calibrain/calibre-web-automated-book-downloader" class="uk-icon-link" uk-icon="icon:github; ratio: 2"></a>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
|
|
</body>
|
|
</html> |