Initial commit - LEGO Instructions Manager v1.5.0
This commit is contained in:
244
app/templates/instructions/upload.html
Normal file
244
app/templates/instructions/upload.html
Normal file
@@ -0,0 +1,244 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Upload Instructions - {{ app_name }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<nav aria-label="breadcrumb" class="mb-4">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('main.dashboard') }}">Dashboard</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('sets.list_sets') }}">Sets</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('sets.view_set', set_id=set.id) }}">{{ set.set_number }}</a></li>
|
||||
<li class="breadcrumb-item active">Upload Instructions</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="card shadow">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h3 class="mb-0">
|
||||
<i class="bi bi-cloud-upload"></i> Upload Instructions
|
||||
</h3>
|
||||
<p class="mb-0 mt-2">{{ set.set_number }}: {{ set.set_name }}</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Set Info -->
|
||||
<div class="alert alert-info">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h5 class="alert-heading">{{ set.set_name }}</h5>
|
||||
<p class="mb-0">
|
||||
<strong>Set:</strong> {{ set.set_number }} |
|
||||
<strong>Theme:</strong> {{ set.theme }} |
|
||||
<strong>Year:</strong> {{ set.year_released }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-end">
|
||||
<p class="mb-0">
|
||||
<strong>Current Instructions:</strong><br>
|
||||
{{ set.instructions.count() }} file(s)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Form -->
|
||||
<form method="POST" action="{{ url_for('instructions.upload', set_id=set.id) }}"
|
||||
enctype="multipart/form-data" id="uploadForm">
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="files" class="form-label">
|
||||
<i class="bi bi-file-earmark-arrow-up"></i> Select Files
|
||||
</label>
|
||||
<input type="file" class="form-control" id="files" name="files[]"
|
||||
multiple accept=".pdf,.png,.jpg,.jpeg,.gif" required>
|
||||
<div class="form-text">
|
||||
Accepted formats: PDF, PNG, JPG, JPEG, GIF (Max 50MB per file)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drag and Drop Area -->
|
||||
<div class="upload-area mb-4" id="dropZone">
|
||||
<i class="bi bi-cloud-upload display-1 text-muted"></i>
|
||||
<h4 class="mt-3">Drag & Drop Files Here</h4>
|
||||
<p class="text-muted">or click to browse</p>
|
||||
<p class="small text-muted mb-0">
|
||||
<i class="bi bi-info-circle"></i> You can upload multiple files at once
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- File Preview -->
|
||||
<div id="filePreview" class="mb-4" style="display: none;">
|
||||
<h6>Selected Files:</h6>
|
||||
<ul id="fileList" class="list-group"></ul>
|
||||
</div>
|
||||
|
||||
<!-- Upload Instructions -->
|
||||
<div class="alert alert-light">
|
||||
<h6><i class="bi bi-info-circle"></i> Upload Tips:</h6>
|
||||
<ul class="mb-0">
|
||||
<li><strong>PDFs:</strong> Upload complete instruction manuals as single PDF files</li>
|
||||
<li><strong>Images:</strong> Upload individual pages as separate images (they will be numbered automatically)</li>
|
||||
<li><strong>Quality:</strong> Higher resolution images provide better viewing experience</li>
|
||||
<li><strong>Organization:</strong> Files are automatically organized by set number</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="{{ url_for('sets.view_set', set_id=set.id) }}" class="btn btn-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-success btn-lg" id="uploadBtn">
|
||||
<i class="bi bi-cloud-upload"></i> Upload Files
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Instructions Summary -->
|
||||
{% if set.instructions.count() > 0 %}
|
||||
<div class="card shadow mt-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-file-earmark-text"></i> Current Instructions</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6>PDFs: {{ set.pdf_instructions|length }}</h6>
|
||||
{% if set.pdf_instructions %}
|
||||
<ul class="list-unstyled">
|
||||
{% for pdf in set.pdf_instructions %}
|
||||
<li><i class="bi bi-file-pdf text-danger"></i> {{ pdf.file_name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p class="text-muted">No PDFs uploaded yet</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6>Images: {{ set.image_instructions|length }}</h6>
|
||||
{% if set.image_instructions %}
|
||||
<p class="text-muted">{{ set.image_instructions|length }} page(s)</p>
|
||||
{% else %}
|
||||
<p class="text-muted">No images uploaded yet</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
const dropZone = $('#dropZone');
|
||||
const fileInput = $('#files');
|
||||
const filePreview = $('#filePreview');
|
||||
const fileList = $('#fileList');
|
||||
|
||||
// Click on drop zone to trigger file input
|
||||
dropZone.on('click', function() {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
// Prevent default drag behaviors
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
dropZone.on(eventName, function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
// Highlight drop zone when dragging over
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
dropZone.on(eventName, function() {
|
||||
dropZone.addClass('dragover');
|
||||
});
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
dropZone.on(eventName, function() {
|
||||
dropZone.removeClass('dragover');
|
||||
});
|
||||
});
|
||||
|
||||
// Handle dropped files
|
||||
dropZone.on('drop', function(e) {
|
||||
const files = e.originalEvent.dataTransfer.files;
|
||||
fileInput[0].files = files;
|
||||
displayFiles(files);
|
||||
});
|
||||
|
||||
// Handle selected files
|
||||
fileInput.on('change', function() {
|
||||
displayFiles(this.files);
|
||||
});
|
||||
|
||||
// Display selected files
|
||||
function displayFiles(files) {
|
||||
fileList.empty();
|
||||
|
||||
if (files.length === 0) {
|
||||
filePreview.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
filePreview.show();
|
||||
|
||||
Array.from(files).forEach(file => {
|
||||
const fileSize = (file.size / 1024 / 1024).toFixed(2);
|
||||
const fileType = file.type.includes('pdf') ? 'file-pdf' : 'file-image';
|
||||
const fileColor = file.type.includes('pdf') ? 'text-danger' : 'text-primary';
|
||||
|
||||
const listItem = $(`
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<i class="bi bi-${fileType} ${fileColor}"></i>
|
||||
<strong>${file.name}</strong>
|
||||
</div>
|
||||
<span class="badge bg-secondary">${fileSize} MB</span>
|
||||
</li>
|
||||
`);
|
||||
|
||||
fileList.append(listItem);
|
||||
});
|
||||
}
|
||||
|
||||
// Upload progress
|
||||
$('#uploadForm').on('submit', function() {
|
||||
$('#uploadBtn').html('<span class="spinner-border spinner-border-sm" role="status"></span> Uploading...');
|
||||
$('#uploadBtn').prop('disabled', true);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.upload-area {
|
||||
border: 2px dashed #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #198754;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.upload-area.dragover {
|
||||
border-color: #198754;
|
||||
background-color: #d1e7dd;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
380
app/templates/instructions/viewer.html
Normal file
380
app/templates/instructions/viewer.html
Normal file
@@ -0,0 +1,380 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Instructions Viewer - {{ set.set_number }}: {{ set.set_name }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
body {
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
.viewer-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.viewer-content {
|
||||
background-color: #3a3a3a;
|
||||
padding: 20px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
min-height: calc(100vh - 250px);
|
||||
}
|
||||
|
||||
.instruction-page {
|
||||
background-color: white;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.instruction-page img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-number-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.viewer-controls {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
padding: 15px 30px;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.viewer-controls button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.fullscreen-mode .viewer-container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.zoom-container {
|
||||
position: relative;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.zoom-container.zoomed {
|
||||
cursor: zoom-out;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.zoom-container.zoomed img {
|
||||
cursor: grab;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.zoom-container.zoomed img:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.nav-footer {
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="viewer-container">
|
||||
<div class="viewer-header">
|
||||
<div>
|
||||
<h4 class="mb-0">
|
||||
<i class="bi bi-book"></i> {{ set.set_number }}: {{ set.set_name }}
|
||||
{% if set.is_moc %}
|
||||
<span class="badge bg-warning text-dark ms-2">
|
||||
<i class="bi bi-star-fill"></i> MOC
|
||||
</span>
|
||||
{% endif %}
|
||||
</h4>
|
||||
<small class="text-muted">{{ images|length }} page(s)</small>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-outline-light" id="toggleFullscreen">
|
||||
<i class="bi bi-arrows-fullscreen"></i> Fullscreen
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-light" id="zoomToggle">
|
||||
<i class="bi bi-zoom-in"></i> Zoom
|
||||
</button>
|
||||
<a href="{{ url_for('sets.view_set', set_id=set.id) }}" class="btn btn-sm btn-outline-light">
|
||||
<i class="bi bi-x-lg"></i> Close
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="viewer-content">
|
||||
<!-- Continuous Scroll Mode -->
|
||||
<div id="continuousViewer">
|
||||
{% for image in images %}
|
||||
<div class="instruction-page zoom-container" id="page-{{ image.page_number }}" data-page="{{ image.page_number }}">
|
||||
<div class="position-relative">
|
||||
<span class="page-number-badge">Page {{ image.page_number }} / {{ images|length }}</span>
|
||||
<img src="{{ url_for('static', filename='uploads/' + image.file_path.replace('\\', '/')) }}"
|
||||
alt="Page {{ image.page_number }}"
|
||||
class="instruction-image"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-footer">
|
||||
<p class="mb-2">
|
||||
<strong>Navigation Tips:</strong>
|
||||
Scroll to view all pages • Click image to zoom •
|
||||
Use arrow keys for quick navigation •
|
||||
Press F for fullscreen
|
||||
</p>
|
||||
<div>
|
||||
<a href="{{ url_for('sets.view_set', set_id=set.id) }}" class="btn btn-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Set
|
||||
</a>
|
||||
<a href="{{ url_for('instructions.upload', set_id=set.id) }}" class="btn btn-success">
|
||||
<i class="bi bi-plus-circle"></i> Add More Pages
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Controls -->
|
||||
<div class="viewer-controls">
|
||||
<button class="btn btn-light btn-sm" id="prevPage" title="Previous Page">
|
||||
<i class="bi bi-chevron-up"></i>
|
||||
</button>
|
||||
<span class="text-white mx-3" id="currentPageDisplay">Page 1 / {{ images|length }}</span>
|
||||
<button class="btn btn-light btn-sm" id="nextPage" title="Next Page">
|
||||
<i class="bi bi-chevron-down"></i>
|
||||
</button>
|
||||
<span class="text-white mx-3">|</span>
|
||||
<button class="btn btn-light btn-sm" id="scrollToTop" title="Scroll to Top">
|
||||
<i class="bi bi-arrow-up"></i>
|
||||
</button>
|
||||
<button class="btn btn-light btn-sm" id="scrollToBottom" title="Scroll to Bottom">
|
||||
<i class="bi bi-arrow-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
let currentPage = 1;
|
||||
const totalPages = {{ images|length }};
|
||||
let isZoomed = false;
|
||||
let zoomLevel = 1;
|
||||
|
||||
// Update current page based on scroll position
|
||||
function updateCurrentPage() {
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const windowHeight = $(window).height();
|
||||
const scrollMiddle = scrollTop + windowHeight / 2;
|
||||
|
||||
$('.instruction-page').each(function() {
|
||||
const pageTop = $(this).offset().top;
|
||||
const pageBottom = pageTop + $(this).outerHeight();
|
||||
|
||||
if (scrollMiddle >= pageTop && scrollMiddle <= pageBottom) {
|
||||
currentPage = parseInt($(this).data('page'));
|
||||
$('#currentPageDisplay').text(`Page ${currentPage} / ${totalPages}`);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll to specific page
|
||||
function scrollToPage(pageNum) {
|
||||
const targetPage = $(`#page-${pageNum}`);
|
||||
if (targetPage.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: targetPage.offset().top - 100
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation buttons
|
||||
$('#nextPage').click(function() {
|
||||
if (currentPage < totalPages) {
|
||||
scrollToPage(currentPage + 1);
|
||||
}
|
||||
});
|
||||
|
||||
$('#prevPage').click(function() {
|
||||
if (currentPage > 1) {
|
||||
scrollToPage(currentPage - 1);
|
||||
}
|
||||
});
|
||||
|
||||
$('#scrollToTop').click(function() {
|
||||
$('html, body').animate({ scrollTop: 0 }, 500);
|
||||
});
|
||||
|
||||
$('#scrollToBottom').click(function() {
|
||||
$('html, body').animate({
|
||||
scrollTop: $(document).height()
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Update page on scroll
|
||||
$(window).scroll(function() {
|
||||
updateCurrentPage();
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
$(document).keydown(function(e) {
|
||||
switch(e.which) {
|
||||
case 38: // up arrow
|
||||
case 33: // page up
|
||||
e.preventDefault();
|
||||
$('#prevPage').click();
|
||||
break;
|
||||
case 40: // down arrow
|
||||
case 34: // page down
|
||||
e.preventDefault();
|
||||
$('#nextPage').click();
|
||||
break;
|
||||
case 36: // home
|
||||
e.preventDefault();
|
||||
$('#scrollToTop').click();
|
||||
break;
|
||||
case 35: // end
|
||||
e.preventDefault();
|
||||
$('#scrollToBottom').click();
|
||||
break;
|
||||
case 70: // F key for fullscreen
|
||||
e.preventDefault();
|
||||
$('#toggleFullscreen').click();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Fullscreen toggle
|
||||
$('#toggleFullscreen').click(function() {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
$('body').addClass('fullscreen-mode');
|
||||
$(this).html('<i class="bi bi-fullscreen-exit"></i> Exit Fullscreen');
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
$('body').removeClass('fullscreen-mode');
|
||||
$(this).html('<i class="bi bi-arrows-fullscreen"></i> Fullscreen');
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for fullscreen changes
|
||||
document.addEventListener('fullscreenchange', function() {
|
||||
if (!document.fullscreenElement) {
|
||||
$('body').removeClass('fullscreen-mode');
|
||||
$('#toggleFullscreen').html('<i class="bi bi-arrows-fullscreen"></i> Fullscreen');
|
||||
}
|
||||
});
|
||||
|
||||
// Zoom functionality
|
||||
$('#zoomToggle').click(function() {
|
||||
isZoomed = !isZoomed;
|
||||
if (isZoomed) {
|
||||
$(this).html('<i class="bi bi-zoom-out"></i> Zoom Out');
|
||||
$('.instruction-image').css({
|
||||
'transform': 'scale(1.5)',
|
||||
'transition': 'transform 0.3s'
|
||||
});
|
||||
} else {
|
||||
$(this).html('<i class="bi bi-zoom-in"></i> Zoom In');
|
||||
$('.instruction-image').css({
|
||||
'transform': 'scale(1)',
|
||||
'transition': 'transform 0.3s'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Click to zoom individual images
|
||||
$('.zoom-container').click(function(e) {
|
||||
const $img = $(this).find('img');
|
||||
const $container = $(this);
|
||||
|
||||
if ($container.hasClass('zoomed')) {
|
||||
$img.css('transform', 'scale(1)');
|
||||
$container.removeClass('zoomed');
|
||||
} else {
|
||||
$img.css('transform', 'scale(2)');
|
||||
$container.addClass('zoomed');
|
||||
}
|
||||
});
|
||||
|
||||
// Pan zoomed image with mouse drag
|
||||
let isDragging = false;
|
||||
let startX, startY, scrollLeft, scrollTop;
|
||||
|
||||
$('.zoom-container').on('mousedown', function(e) {
|
||||
if (!$(this).hasClass('zoomed')) return;
|
||||
|
||||
isDragging = true;
|
||||
startX = e.pageX - $(this).offset().left;
|
||||
startY = e.pageY - $(this).offset().top;
|
||||
scrollLeft = $(this).scrollLeft();
|
||||
scrollTop = $(this).scrollTop();
|
||||
$(this).css('cursor', 'grabbing');
|
||||
});
|
||||
|
||||
$('.zoom-container').on('mouseup mouseleave', function() {
|
||||
isDragging = false;
|
||||
if ($(this).hasClass('zoomed')) {
|
||||
$(this).css('cursor', 'zoom-out');
|
||||
}
|
||||
});
|
||||
|
||||
$('.zoom-container').on('mousemove', function(e) {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
|
||||
const x = e.pageX - $(this).offset().left;
|
||||
const y = e.pageY - $(this).offset().top;
|
||||
const walkX = (x - startX) * 2;
|
||||
const walkY = (y - startY) * 2;
|
||||
|
||||
$(this).scrollLeft(scrollLeft - walkX);
|
||||
$(this).scrollTop(scrollTop - walkY);
|
||||
});
|
||||
|
||||
// Initialize
|
||||
updateCurrentPage();
|
||||
|
||||
// Smooth scroll for all pages loaded
|
||||
console.log('Image viewer initialized with', totalPages, 'pages');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user