Initial commit - LEGO Instructions Manager v1.5.0
This commit is contained in:
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