Update templates/output.html

templates/output.html

@@ -36,7 +36,26 @@
             height: auto;
             border-radius: 5px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-            cursor: pointer;
+        }
+
+        .fullscreen-image {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+        }
+
+        .fullscreen-image img {
+            max-width: 90%;
+            max-height: 90%;
+            border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         }
 
         .button-container {
@@ -84,11 +103,11 @@
         .social-icon:hover {
             color: #4CAF50;
         }
-      footer {
-            
+
+        footer {
             padding: 20px;
             text-align: center;
-      }
+        }
 
         /* Responsive Styles */
         @media only screen and (max-width: 500px) {
@@ -102,7 +121,9 @@
     <div class="container">
         <h1>Generated Image</h1>
         <div class="image-container">
-            <img src="{{ url_for('static', filename='example.jpeg') }}" alt="Generated Image" onclick="openFullscreen()">
+            <a href="{{ url_for('static', filename='example.jpeg') }}" target="_blank" onclick="toggleFullScreen()">
+                <img src="{{ url_for('static', filename='example.jpeg') }}" alt="Generated Image">
+            </a>
         </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>
@@ -127,17 +148,6 @@
         </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');
@@ -145,15 +155,15 @@
             link.download = 'generated_image.jpg';
             link.click();
         }
-        
-        function openFullscreen() {
-            var modal = new bootstrap.Modal(document.getElementById('image-modal'));
-            modal.show();
+
+        function toggleFullScreen() {
+            var imageContainer = document.querySelector('.image-container');
+            imageContainer.classList.toggle('fullscreen-image');
         }
     </script>
-<footer>
+    <footer>
         <p>Built with ❤️ by <a href="https://codegenius.me" style="color: red;">Ashiq Hussain Mir</a></p>
-</footer>
+    </footer>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>