Update main.py

main.py

@@ -135,45 +135,6 @@ def proxy(path):
                 img['src'] = proxy_url
                 img['style'] = 'max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 0;'
                 
-                # Add responsive styles
-                style_tag = soup.new_tag('style')
-                style_tag.string = '''
-                    /* Base styles */
-                    body { margin: 0; padding: 15px; font-family: Arial, sans-serif; }
-                    table { width: 100%; border-collapse: collapse; margin: 15px 0; }
-                    td, th { padding: 8px; border: 1px solid #ddd; }
-                    img { max-width: 100%; height: auto; }
-                    .open-image-btn { display: inline-block; margin: 10px; padding: 8px 15px; background-color: #4a90e2; border: none; border-radius: 4px; text-decoration: none; color: white; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-                    
-                    /* Responsive styles */
-                    @media (max-width: 768px) {
-                        body { padding: 10px; }
-                        table { font-size: 14px; }
-                        td, th { padding: 6px; }
-                        .open-image-btn { display: block; margin: 10px 0; text-align: center; }
-                    }
-                    
-                    @media (max-width: 480px) {
-                        table { font-size: 12px; }
-                        td, th { padding: 4px; }
-                        img { margin: 5px 0; }
-                        .zoom-controls { display: flex; justify-content: space-between; width: 100%; margin-bottom: 10px; }
-                        .zoom-btn { flex: 1; margin: 0 2px; }
-                    }
-                '''
-                
-                if soup.head:
-                    soup.head.append(style_tag)
-                else:
-                    head_tag = soup.new_tag('head')
-                    head_tag.append(style_tag)
-                    if soup.html:
-                        soup.html.insert(0, head_tag)
-                    else:
-                        html_tag = soup.new_tag('html')
-                        html_tag.append(head_tag)
-                        soup.append(html_tag)
-                
                 # Add "Open Original Image" button next to each image
                 button = soup.new_tag('a')
                 button['href'] = proxy_url
@@ -265,18 +226,33 @@ def proxy(path):
 
                     // Touch gestures for mobile
                     let initialDistance = 0;
+                    let initialTouchX, initialTouchY;
+                    let lastTouchX, lastTouchY;
+                    let isTouchDragging = false;
+                    
                     modal.addEventListener('touchstart', function(e) {
                         if (e.touches.length === 2) {
+                            // Pinch to zoom gesture
                             initialDistance = Math.hypot(
                                 e.touches[0].pageX - e.touches[1].pageX,
                                 e.touches[0].pageY - e.touches[1].pageY
                             );
+                        } else if (e.touches.length === 1) {
+                            // Single touch for dragging
+                            isTouchDragging = true;
+                            initialTouchX = e.touches[0].clientX - translateX;
+                            initialTouchY = e.touches[0].clientY - translateY;
+                            lastTouchX = e.touches[0].clientX;
+                            lastTouchY = e.touches[0].clientY;
+                            modalImg.style.transition = 'none';
                         }
                     });
 
                     modal.addEventListener('touchmove', function(e) {
+                        e.preventDefault(); // Prevent page scrolling
+                        
                         if (e.touches.length === 2) {
-                            e.preventDefault();
+                            // Pinch to zoom gesture
                             const currentDistance = Math.hypot(
                                 e.touches[0].pageX - e.touches[1].pageX,
                                 e.touches[0].pageY - e.touches[1].pageY
@@ -285,7 +261,35 @@ def proxy(path):
                             scale = Math.min(Math.max(scale + delta, 0.5), 3);
                             initialDistance = currentDistance;
                             applyTransform();
+                        } else if (e.touches.length === 1 && isTouchDragging) {
+                            // Single touch dragging
+                            translateX = e.touches[0].clientX - initialTouchX;
+                            translateY = e.touches[0].clientY - initialTouchY;
+                            
+                            // Calculate velocity for momentum
+                            lastTouchX = e.touches[0].clientX;
+                            lastTouchY = e.touches[0].clientY;
+                            
+                            applyTransform();
+                        }
+                    });
+                    
+                    modal.addEventListener('touchend', function(e) {
+                        isTouchDragging = false;
+                        modalImg.style.transition = 'transform 0.3s ease-out';
+                    });
+                    
+                    // Double tap to reset zoom
+                    let lastTap = 0;
+                    modal.addEventListener('touchend', function(e) {
+                        const currentTime = new Date().getTime();
+                        const tapLength = currentTime - lastTap;
+                        if (tapLength < 300 && tapLength > 0) {
+                            // Double tap detected
+                            resetZoom();
+                            e.preventDefault();
                         }
+                        lastTap = currentTime;
                     });
                     
                     // Add click event to all images
@@ -449,10 +453,20 @@ def proxy(path):
                     backdrop-filter: blur(10px);
                     border: 1px solid rgba(255, 255, 255, 0.8);
                 }
+                /* Table container for horizontal scrolling on mobile */
+                .table-container {
+                    width: 100%;
+                    overflow-x: auto;
+                    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+                    margin: 30px 0;
+                    border-radius: 16px;
+                    box-shadow: var(--card-shadow);
+                }
                 td {
                     padding: 20px;
                     border: 1px solid rgba(236, 240, 241, 0.8);
                     transition: var(--transition);
+                    word-break: break-word; /* Break long words */
                 }
                 tr:nth-child(even) {
                     background: rgba(245, 247, 250, 0.5);
@@ -578,22 +592,42 @@ def proxy(path):
                     color: #3498db;
                 }
                 
+                /* Responsive styles for tablets */
                 @media (max-width: 768px) {
-                    body { padding: 15px; }
+                    body { 
+                        padding: 15px; 
+                        font-size: 15px;
+                    }
                     .breadcrumb {
                         flex-direction: column;
                         align-items: flex-start;
                         padding: 15px;
+                        margin-bottom: 20px;
+                    }
+                    .breadcrumb a {
+                        padding: 6px 12px;
+                        font-size: 14px;
+                        width: 100%;
+                        box-sizing: border-box;
+                        margin-bottom: 5px;
                     }
                     ul {
                         grid-template-columns: 1fr;
                         gap: 15px;
                     }
-                    table { font-size: 14px; }
-                    td { padding: 12px; }
+                    table { 
+                        font-size: 14px; 
+                        display: block;
+                        overflow-x: auto;
+                        white-space: nowrap;
+                    }
+                    td { 
+                        padding: 12px; 
+                    }
                     .open-image-btn {
                         width: 100%;
                         text-align: center;
+                        padding: 10px 15px;
                     }
                     .modal img {
                         max-width: 95%;
@@ -603,6 +637,69 @@ def proxy(path):
                         top: 10px;
                         right: 15px;
                     }
+                    .close-container {
+                        top: 10px;
+                        right: 10px;
+                    }
+                    .zoom-controls {
+                        display: flex;
+                        gap: 5px;
+                    }
+                }
+                
+                /* Responsive styles for mobile phones */
+                @media (max-width: 480px) {
+                    body { 
+                        padding: 10px; 
+                        font-size: 14px;
+                    }
+                    .breadcrumb {
+                        padding: 10px;
+                        margin-bottom: 15px;
+                    }
+                    .breadcrumb a {
+                        padding: 5px 10px;
+                        font-size: 13px;
+                    }
+                    table { 
+                        font-size: 12px; 
+                    }
+                    td { 
+                        padding: 8px; 
+                    }
+                    img { 
+                        margin: 5px 0; 
+                    }
+                    .open-image-btn {
+                        padding: 8px 12px;
+                        font-size: 13px;
+                        margin: 8px 0;
+                    }
+                    .modal {
+                        padding: 0;
+                    }
+                    .modal img {
+                        max-width: 100%;
+                        max-height: 90vh;
+                    }
+                    .close-container {
+                        top: 5px;
+                        right: 5px;
+                        gap: 5px;
+                    }
+                    .zoom-controls {
+                        display: flex;
+                        justify-content: space-between;
+                        width: 100%;
+                        margin-bottom: 5px;
+                    }
+                    .zoom-btn {
+                        flex: 1;
+                        margin: 0 2px;
+                        padding: 4px 8px;
+                        font-size: 12px;
+                    }
+                }
                 }
             '''
             # Check if head exists, if not create it
@@ -614,8 +711,21 @@ def proxy(path):
                     html_tag = soup.new_tag('html')
                     html_tag.append(head_tag)
                     soup.append(html_tag)
+                    
+            # Add viewport meta tag for proper mobile scaling
+            viewport_meta = soup.new_tag('meta')
+            viewport_meta['name'] = 'viewport'
+            viewport_meta['content'] = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
+            soup.head.append(viewport_meta)
+            
             soup.head.append(style_tag)
             
+            # Wrap tables in container for mobile scrolling
+            for table in soup.find_all('table'):
+                table_container = soup.new_tag('div')
+                table_container['class'] = 'table-container'
+                table.wrap(table_container)
+            
             # Convert navigation links to breadcrumb
             nav_links = soup.find_all('a', href=True)
             breadcrumb_div = soup.new_tag('div')