Update templates/output.html

templates/output.html

@@ -36,6 +36,7 @@
             height: auto;
             border-radius: 5px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            cursor: pointer;
         }
 
         .button-container {
@@ -101,7 +102,7 @@
     <div class="container">
         <h1>Generated Image</h1>
         <div class="image-container">
-            <img src="{{ url_for('static', filename='example.jpeg') }}" alt="Generated Image">
+            <img src="{{ url_for('static', filename='example.jpeg') }}" alt="Generated Image" onclick="openFullscreen()">
         </div>
         <div class="button-container">
             <a href="/static/example.jpeg" class="btn btn-success" onclick="downloadImage()"><i class="fas fa-download"></i> Download Image</a>
@@ -126,6 +127,17 @@
         </div>
     </div>
 
+    <!-- Modal Popup -->
+    <div id="image-modal" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <img src="{{ url_for('static', filename='example.jpeg') }}" alt="Generated Image" class="modal-image">
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
         function downloadImage() {
             var link = document.createElement('a');
@@ -133,10 +145,15 @@
             link.download = 'generated_image.jpg';
             link.click();
         }
+        
+        function openFullscreen() {
+            var modal = new bootstrap.Modal(document.getElementById('image-modal'));
+            modal.show();
+        }
     </script>
 <footer>
         <p>Built with ❤️ by <a href="https://codegenius.me" style="color: red;">Ashiq Hussain Mir</a></p>
 </footer>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-  </html>
+</html>