95 lines
3.5 KiB
HTML
95 lines
3.5 KiB
HTML
{% extends "layout.html" %}
|
|
{% block title %}{{ series_name }} - Reader{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Reading progress bar -->
|
|
<div id="readerProgressBar" class="reader-progress-bar"></div>
|
|
<div class="reader-container">
|
|
<!-- Reader Header -->
|
|
<div class="reader-header">
|
|
<div class="reader-header-left">
|
|
<a href="{{ url_for('main.gallery', tag_id=tag.id) }}" class="reader-back-btn" title="Back to gallery">
|
|
<span class="back-arrow">←</span>
|
|
</a>
|
|
<h1 class="reader-title">{{ series_name }}</h1>
|
|
<span class="reader-page-count">{{ total_pages }} pages</span>
|
|
</div>
|
|
<div class="reader-header-right">
|
|
<div class="reader-jump">
|
|
<label for="pageJumpSelect">Jump to:</label>
|
|
<select id="pageJumpSelect" class="reader-jump-select">
|
|
{% for page in pages %}
|
|
<option value="{{ page.page_number }}" {% if page.page_number == start_page %}selected{% endif %}>
|
|
Page {{ page.page_number }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button id="toggleNavBtn" class="reader-toggle-nav" title="Toggle navigation panel">
|
|
<span class="nav-icon">☰</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reader-body">
|
|
<!-- Navigation Sidebar (toggleable) -->
|
|
<aside id="readerNav" class="reader-nav">
|
|
<div class="reader-nav-header">
|
|
<h3>Pages</h3>
|
|
<button id="closeNavBtn" class="reader-nav-close">×</button>
|
|
</div>
|
|
<div class="reader-nav-thumbs">
|
|
{% for page in pages %}
|
|
<div class="reader-nav-thumb" data-page="{{ page.page_number }}">
|
|
<img src="{{ url_for('main.serve_image', filename=(page.image.thumb_path or page.image.filepath) | replace('/images/', '')) }}" alt="Page {{ page.page_number }}" loading="lazy">
|
|
<span class="thumb-page-num">{{ page.page_number }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Reading Area -->
|
|
<main id="readerMain" class="reader-main">
|
|
<div id="readerContent" class="reader-content">
|
|
{% if pages %}
|
|
{% for page in pages %}
|
|
<div class="reader-page" id="page-{{ page.page_number }}" data-page="{{ page.page_number }}">
|
|
<img src="{{ url_for('main.serve_image', filename=page.image.filepath | replace('/images/', '')) }}"
|
|
alt="Page {{ page.page_number }}"
|
|
loading="lazy"
|
|
data-image-id="{{ page.image.id }}">
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="reader-empty">
|
|
<p>No pages in this series yet.</p>
|
|
<a href="{{ url_for('main.gallery', tag_id=tag.id) }}" class="btn primary-btn">
|
|
Go to gallery to add pages
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Floating page indicator -->
|
|
<div id="floatingPageIndicator" class="floating-page-indicator">
|
|
<span id="currentPageNum">1</span> / {{ total_pages }}
|
|
</div>
|
|
|
|
<!-- Quick jump buttons -->
|
|
<div class="reader-quick-nav">
|
|
<button id="scrollToTopBtn" class="reader-quick-btn" title="Go to first page">↑ First</button>
|
|
<button id="scrollToBottomBtn" class="reader-quick-btn" title="Go to last page">Last ↓</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.readerConfig = {
|
|
startPage: {{ start_page }},
|
|
totalPages: {{ total_pages }}
|
|
};
|
|
</script>
|
|
<script src="{{ url_for('static', filename='js/reader.js') }}"></script>
|
|
{% endblock %}
|