Update main.py

main.py

@@ -173,6 +173,69 @@ def proxy(path):
                     var modal = document.getElementById('imageModal');
                     var modalImg = document.getElementById('modalImage');
                     var closeBtn = document.getElementsByClassName('close')[0];
+                    var scale = 1;
+                    var isDragging = false;
+                    var startX, startY, translateX = 0, translateY = 0;
+                    
+                    // Add zoom controls
+                    var zoomControls = document.createElement('div');
+                    zoomControls.className = 'zoom-controls';
+                    zoomControls.innerHTML = `
+                        <button class="zoom-btn" onclick="changeZoom(0.1)">+</button>
+                        <button class="zoom-btn" onclick="changeZoom(-0.1)">-</button>
+                        <button class="zoom-btn" onclick="resetZoom()">Reset</button>
+                    `;
+                    modal.appendChild(zoomControls);
+
+                    // Zoom functions
+                    window.changeZoom = function(delta) {
+                        scale = Math.min(Math.max(scale + delta, 0.5), 3);
+                        applyTransform();
+                    };
+
+                    window.resetZoom = function() {
+                        scale = 1;
+                        translateX = 0;
+                        translateY = 0;
+                        applyTransform();
+                    };
+
+                    function applyTransform() {
+                        modalImg.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+                    }
+
+                    // Mouse wheel zoom
+                    modal.addEventListener('wheel', function(e) {
+                        e.preventDefault();
+                        const delta = e.deltaY * -0.001;
+                        scale = Math.min(Math.max(scale + delta, 0.5), 3);
+                        applyTransform();
+                    });
+
+                    // Touch gestures for mobile
+                    let initialDistance = 0;
+                    modal.addEventListener('touchstart', function(e) {
+                        if (e.touches.length === 2) {
+                            initialDistance = Math.hypot(
+                                e.touches[0].pageX - e.touches[1].pageX,
+                                e.touches[0].pageY - e.touches[1].pageY
+                            );
+                        }
+                    });
+
+                    modal.addEventListener('touchmove', function(e) {
+                        if (e.touches.length === 2) {
+                            e.preventDefault();
+                            const currentDistance = Math.hypot(
+                                e.touches[0].pageX - e.touches[1].pageX,
+                                e.touches[0].pageY - e.touches[1].pageY
+                            );
+                            const delta = (currentDistance - initialDistance) * 0.01;
+                            scale = Math.min(Math.max(scale + delta, 0.5), 3);
+                            initialDistance = currentDistance;
+                            applyTransform();
+                        }
+                    });
                     
                     // Add click event to all images
                     document.querySelectorAll('img:not(#modalImage)').forEach(function(img) {
@@ -181,6 +244,10 @@ def proxy(path):
                             modal.style.display = 'flex';
                             modalImg.src = this.src;
                             document.body.style.overflow = 'hidden';
+                            scale = 1;
+                            translateX = 0;
+                            translateY = 0;
+                            applyTransform();
                             setTimeout(function() {
                                 modal.classList.add('show');
                             }, 10);
@@ -205,6 +272,27 @@ def proxy(path):
                     document.addEventListener('keydown', function(e) {
                         if (e.key === 'Escape') closeModal();
                     });
+
+                    // Image dragging
+                    modalImg.addEventListener('mousedown', function(e) {
+                        isDragging = true;
+                        startX = e.clientX - translateX;
+                        startY = e.clientY - translateY;
+                        modalImg.style.cursor = 'grabbing';
+                    });
+
+                    document.addEventListener('mousemove', function(e) {
+                        if (isDragging) {
+                            translateX = e.clientX - startX;
+                            translateY = e.clientY - startY;
+                            applyTransform();
+                        }
+                    });
+
+                    document.addEventListener('mouseup', function() {
+                        isDragging = false;
+                        modalImg.style.cursor = 'grab';
+                    });
                 });
             '''
             
@@ -386,11 +474,38 @@ def proxy(path):
                     box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
                     transform: scale(0.9);
                     transition: transform 0.3s ease;
+                    cursor: grab;
+                    transform-origin: center center;
                 }
                 
                 .modal.show img {
                     transform: scale(1);
                 }
+
+                .zoom-controls {
+                    position: fixed;
+                    bottom: 20px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    display: flex;
+                    gap: 10px;
+                    z-index: 1001;
+                }
+
+                .zoom-btn {
+                    background: rgba(255, 255, 255, 0.2);
+                    border: 1px solid rgba(255, 255, 255, 0.4);
+                    color: white;
+                    padding: 8px 16px;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    font-size: 16px;
+                    transition: all 0.2s ease;
+                }
+
+                .zoom-btn:hover {
+                    background: rgba(255, 255, 255, 0.3);
+                }
                 
                 .close {
                     position: absolute;