lego-instructions-manager/app/templates/instructions/viewer.html

{% 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 %}