Update app.py

app.py

@@ -308,7 +308,9 @@ def feed():
             .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
             .post-item { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 15px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-decoration: none; color: #2d3748; transition: transform 0.3s ease; }
             .post-item:hover { transform: scale(1.02); }
-            .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
+            .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; cursor: pointer; }
+            .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; }
+            .modal img { max-width: 90%; max-height: 90%; object-fit: contain; transform: scale(1); transition: transform 0.2s ease; }
             .stats { font-size: 0.9em; color: #666; margin-top: 5px; }
             @media (max-width: 768px) {
                 .sidebar { transform: translateX(-100%); width: 200px; }
@@ -335,7 +337,7 @@ def feed():
                             <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" type="video/mp4">
                         </video>
                     {% else %}
-                        <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}">
+                        <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}" onclick="openModal(this.src, event)">
                     {% endif %}
                     <h2>{{ post['title'] }}</h2>
                     <p>{{ post['description'] }}</p>
@@ -345,10 +347,30 @@ def feed():
                 {% endfor %}
             </div>
         </div>
+        <div class="modal" id="imageModal" onclick="closeModal(event)">
+            <img id="modalImage" src="">
+        </div>
         <script>
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
+
+            function openModal(src, event) {
+                event.preventDefault();
+                const modal = document.getElementById('imageModal');
+                const modalImg = document.getElementById('modalImage');
+                modal.style.display = 'flex';
+                modalImg.src = src;
+                modalImg.style.transform = 'scale(1)';
+            }
+
+            function closeModal(event) {
+                if (event.target.tagName !== 'IMG') {
+                    const modal = document.getElementById('imageModal');
+                    modal.style.display = 'none';
+                }
+            }
+
             document.addEventListener('DOMContentLoaded', function() {
                 const videos = document.querySelectorAll('.post-preview');
                 videos.forEach(video => {
@@ -360,6 +382,45 @@ def feed():
                         });
                     }
                 });
+
+                const modalImg = document.getElementById('modalImage');
+                let scale = 1;
+                let startDistance = 0;
+                let lastTap = 0;
+
+                modalImg.addEventListener('dblclick', function() {
+                    scale = scale === 1 ? 2 : 1;
+                    modalImg.style.transform = `scale(${scale})`;
+                });
+
+                modalImg.addEventListener('touchstart', function(e) {
+                    if (e.touches.length === 2) {
+                        startDistance = getDistance(e.touches[0], e.touches[1]);
+                    } else if (e.touches.length === 1) {
+                        const now = new Date().getTime();
+                        if (now - lastTap < 300) {
+                            scale = scale === 1 ? 2 : 1;
+                            modalImg.style.transform = `scale(${scale})`;
+                        }
+                        lastTap = now;
+                    }
+                });
+
+                modalImg.addEventListener('touchmove', function(e) {
+                    if (e.touches.length === 2) {
+                        e.preventDefault();
+                        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+                        scale = Math.max(1, Math.min(3, scale * (currentDistance / startDistance)));
+                        modalImg.style.transform = `scale(${scale})`;
+                        startDistance = currentDistance;
+                    }
+                });
+
+                function getDistance(touch1, touch2) {
+                    const dx = touch1.pageX - touch2.pageX;
+                    const dy = touch1.pageY - touch2.pageY;
+                    return Math.sqrt(dx * dx + dy * dy);
+                }
             });
         </script>
     </body>
@@ -415,13 +476,15 @@ def post_page(post_id):
             .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
             .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
             .container { max-width: 800px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
-            video, img { width: 100%; border-radius: 8px; max-height: 400px; object-fit: cover; }
+            video, img { width: 100%; border-radius: 8px; max-height: 400px; object-fit: cover; cursor: pointer; }
             .btn { display: inline-block; margin: 10px 0; padding: 12px 20px; background: rgba(59, 130, 246, 0.9); color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s ease; }
             .btn:hover { background: rgba(59, 130, 246, 1); transform: scale(1.05); }
             .like-btn.liked { background: rgba(239, 68, 68, 0.9); }
             .like-btn.liked:hover { background: rgba(239, 68, 68, 1); }
             textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; resize: vertical; background: rgba(255, 255, 255, 0.8); }
             .comment { border-top: 1px solid #e2e8f0; padding: 10px 0; }
+            .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; }
+            .modal img { max-width: 90%; max-height: 90%; object-fit: contain; transform: scale(1); transition: transform 0.2s ease; }
             @media (max-width: 768px) {
                 .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
@@ -444,7 +507,7 @@ def post_page(post_id):
                     <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" type="video/mp4">
                 </video>
             {% else %}
-                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}">
+                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}" onclick="openModal(this.src)">
             {% endif %}
             <p>{{ post['description'] }}</p>
             <p>Загрузил: {{ post['uploader'] }} | {{ post['upload_date'] }}</p>
@@ -471,10 +534,69 @@ def post_page(post_id):
                 <p><a href="{{ url_for('login') }}">Войдите</a>, чтобы ставить лайки и комментировать.</p>
             {% endif %}
         </div>
+        <div class="modal" id="imageModal" onclick="closeModal(event)">
+            <img id="modalImage" src="">
+        </div>
         <script>
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
+
+            function openModal(src) {
+                const modal = document.getElementById('imageModal');
+                const modalImg = document.getElementById('modalImage');
+                modal.style.display = 'flex';
+                modalImg.src = src;
+                modalImg.style.transform = 'scale(1)';
+            }
+
+            function closeModal(event) {
+                if (event.target.tagName !== 'IMG') {
+                    const modal = document.getElementById('imageModal');
+                    modal.style.display = 'none';
+                }
+            }
+
+            document.addEventListener('DOMContentLoaded', function() {
+                const modalImg = document.getElementById('modalImage');
+                let scale = 1;
+                let startDistance = 0;
+                let lastTap = 0;
+
+                modalImg.addEventListener('dblclick', function() {
+                    scale = scale === 1 ? 2 : 1;
+                    modalImg.style.transform = `scale(${scale})`;
+                });
+
+                modalImg.addEventListener('touchstart', function(e) {
+                    if (e.touches.length === 2) {
+                        startDistance = getDistance(e.touches[0], e.touches[1]);
+                    } else if (e.touches.length === 1) {
+                        const now = new Date().getTime();
+                        if (now - lastTap < 300) {
+                            scale = scale === 1 ? 2 : 1;
+                            modalImg.style.transform = `scale(${scale})`;
+                        }
+                        lastTap = now;
+                    }
+                });
+
+                modalImg.addEventListener('touchmove', function(e) {
+                    if (e.touches.length === 2) {
+                        e.preventDefault();
+                        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+                        scale = Math.max(1, Math.min(3, scale * (currentDistance / startDistance)));
+                        modalImg.style.transform = `scale(${scale})`;
+                        startDistance = currentDistance;
+                    }
+                });
+
+                function getDistance(touch1, touch2) {
+                    const dx = touch1.pageX - touch2.pageX;
+                    const dy = touch1.pageY - touch2.pageY;
+                    return Math.sqrt(dx * dx + dy * dy);
+                }
+            });
         </script>
     </body>
     </html>
@@ -524,12 +646,14 @@ def profile():
             .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
             .post-item { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 15px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
             .post-item:hover { transform: scale(1.02); }
-            .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
+            .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; cursor: pointer; }
             .btn { display: block; margin: 10px 0; padding: 12px 20px; background: rgba(59, 130, 246, 0.9); color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s ease; }
             .btn:hover { background: rgba(59, 130, 246, 1); transform: scale(1.05); }
             .delete-btn { background: rgba(239, 68, 68, 0.9); }
             .delete-btn:hover { background: rgba(239, 68, 68, 1); }
             .stats { font-size: 0.9em; color: #666; margin-top: 5px; }
+            .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; }
+            .modal img { max-width: 90%; max-height: 90%; object-fit: contain; transform: scale(1); transition: transform 0.2s ease; }
             @media (max-width: 768px) {
                 .sidebar { transform: translateX(-100%); width: 200px; }
                 .sidebar.active { transform: translateX(0); }
@@ -560,7 +684,7 @@ def profile():
                                     <source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" type="video/mp4">
                                 </video>
                             {% else %}
-                                <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}">
+                                <img class="post-preview" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/{{ post['type'] }}s/{{ post['filename'] }}" alt="{{ post['title'] }}" onclick="openModal(this.src, event)">
                             {% endif %}
                             <h3>{{ post['title'] }}</h3>
                         </a>
@@ -578,10 +702,30 @@ def profile():
                 {% endif %}
             </div>
         </div>
+        <div class="modal" id="imageModal" onclick="closeModal(event)">
+            <img id="modalImage" src="">
+        </div>
         <script>
             function toggleSidebar() {
                 document.getElementById('sidebar').classList.toggle('active');
             }
+
+            function openModal(src, event) {
+                if (event) event.preventDefault();
+                const modal = document.getElementById('imageModal');
+                const modalImg = document.getElementById('modalImage');
+                modal.style.display = 'flex';
+                modalImg.src = src;
+                modalImg.style.transform = 'scale(1)';
+            }
+
+            function closeModal(event) {
+                if (event.target.tagName !== 'IMG') {
+                    const modal = document.getElementById('imageModal');
+                    modal.style.display = 'none';
+                }
+            }
+
             document.addEventListener('DOMContentLoaded', function() {
                 const videos = document.querySelectorAll('.post-preview');
                 videos.forEach(video => {
@@ -593,6 +737,45 @@ def profile():
                         });
                     }
                 });
+
+                const modalImg = document.getElementById('modalImage');
+                let scale = 1;
+                let startDistance = 0;
+                let lastTap = 0;
+
+                modalImg.addEventListener('dblclick', function() {
+                    scale = scale === 1 ? 2 : 1;
+                    modalImg.style.transform = `scale(${scale})`;
+                });
+
+                modalImg.addEventListener('touchstart', function(e) {
+                    if (e.touches.length === 2) {
+                        startDistance = getDistance(e.touches[0], e.touches[1]);
+                    } else if (e.touches.length === 1) {
+                        const now = new Date().getTime();
+                        if (now - lastTap < 300) {
+                            scale = scale === 1 ? 2 : 1;
+                            modalImg.style.transform = `scale(${scale})`;
+                        }
+                        lastTap = now;
+                    }
+                });
+
+                modalImg.addEventListener('touchmove', function(e) {
+                    if (e.touches.length === 2) {
+                        e.preventDefault();
+                        const currentDistance = getDistance(e.touches[0], e.touches[1]);
+                        scale = Math.max(1, Math.min(3, scale * (currentDistance / startDistance)));
+                        modalImg.style.transform = `scale(${scale})`;
+                        startDistance = currentDistance;
+                    }
+                });
+
+                function getDistance(touch1, touch2) {
+                    const dx = touch1.pageX - touch2.pageX;
+                    const dy = touch1.pageY - touch2.pageY;
+                    return Math.sqrt(dx * dx + dy * dy);
+                }
             });
         </script>
     </body>