Update templates/output.html

templates/output.html

@@ -36,9 +36,11 @@
             height: auto;
             border-radius: 5px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+            cursor: pointer;
         }
 
-        .fullscreen-image {
+        .enlarged {
             position: fixed;
             top: 0;
             left: 0;
@@ -51,7 +53,7 @@
             z-index: 9999;
         }
 
-        .fullscreen-image img {
+        .enlarged img {
             max-width: 90%;
             max-height: 90%;
             border-radius: 5px;
@@ -121,9 +123,7 @@
     <div class="container">
         <h1>Generated Image</h1>
         <div class="image-container">
-            <a href="{{ url_for('static', filename='example.jpeg') }}" target="_blank">
-                <img src="{{ url_for('static', filename='example.jpeg') }}" alt="Generated Image" onclick="toggleFullScreen()">
-            </a>
+            <img src="{{ url_for('static', filename='example.jpeg') }}" alt="Generated Image" onclick="toggleImageSize(this)">
         </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>
@@ -156,9 +156,12 @@
             link.click();
         }
 
-        function toggleFullScreen() {
-            var bodyElement = document.querySelector('body');
-            bodyElement.classList.toggle('fullscreen-image');
+        function toggleImageSize(image) {
+            if (image.classList.contains('enlarged')) {
+                image.classList.remove('enlarged');
+            } else {
+                image.classList.add('enlarged');
+            }
         }
     </script>
     <footer>
@@ -166,5 +169,4 @@
     </footer>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-  </html>
-  
+</html>