Update main.py

main.py

@@ -135,13 +135,52 @@ 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
                 button['target'] = '_blank'
                 button['class'] = 'open-image-btn'
                 button.string = 'Открыть оригинал изображения'
-                button['style'] = 'display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 10px; padding: 12px 24px; background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%); background-size: 200% 200%; border: none; border-radius: 8px; text-decoration: none; color: white; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; line-height: 1.4; width: fit-content; white-space: normal; word-wrap: break-word; max-width: 100%; hyphens: auto; cursor: pointer; overflow-wrap: break-word; animation: gradient 3s ease infinite; @media (max-width: 768px) { padding: 10px 16px; min-height: 40px; font-size: 14px; } @media (max-width: 480px) { padding: 8px 12px; min-height: 36px; font-size: 13px; }'
+                button['style'] = '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);'
                 img.insert_after(button)
 
             # Add modal container for fullscreen image view