Spaces:

imseldrith
/

myFaceSwap

Building

App Files Files Community

imseldrith commited on Aug 8, 2023

Commit

13942c8

•

1 Parent(s): 390a6d5

Update templates/output.html

Browse files

Files changed (1) hide show

templates/output.html +141 -41

templates/output.html CHANGED Viewed

@@ -1,72 +1,172 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Output</title>
     <style>
         body {
-            font-family: 'Segoe UI', Arial, sans-serif;
-            background-color: #f8f8f8;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
         }
-        #container {
-            width: 90%;
             max-width: 800px;
-            padding: 20px;
-            background-color: #ffffff;
             border-radius: 10px;
-            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
         }
         h1 {
             text-align: center;
-            color: #333333;
             margin-bottom: 30px;
         }
-        #outputImage {
             text-align: center;
-            margin-top: 20px;
         }
-        #outputImage img {
             max-width: 100%;
-            max-height: 300px;
-            border: 1px solid #ddd;
             border-radius: 5px;
         }
-        #backButton {
             text-align: center;
-            margin-top: 25px;
         }
-        #backButton a {
-            text-decoration: none;
-            background-color: #4285f4;
-            color: white;
             border: none;
-            padding: 10px 20px;
-            cursor: pointer;
             border-radius: 5px;
-            font-weight: bold;
-            transition: background-color 0.3s;
         }
-        #backButton a:hover {
-            background-color: #2a75d7;
         }
     </style>
 </head>
 <body>
-    <div id="container">
-        <h1>Output</h1>
-        <div id="outputImage">
-            <img src="{{ url_for('output_image', filename=filename) }}" alt="Output Image">
         </div>
-        <div id="backButton">
-            <a href="/">Back to Processing</a>
         </div>
     </div>
 </body>
-</html>

 <!DOCTYPE html>
+<html>
 <head>
+    <title>Generated Image</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <style>
         body {
+            background-color: #000000;
+            color: #ffffff;
+            font-family: Arial, sans-serif;
         }
+        .container {
             max-width: 800px;
+            margin: 0 auto;
+            padding: 40px;
+            background-color: #222222;
             border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
         h1 {
             text-align: center;
             margin-bottom: 30px;
         }
+        .image-container {
             text-align: center;
+            margin-bottom: 30px;
         }
+        img {
             max-width: 100%;
+            height: auto;
             border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+            cursor: pointer;
         }
+        .enlarged {
+            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;
+        }
+        .enlarged img {
+            max-width: 90%;
+            max-height: 90%;
+            border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        .button-container {
             text-align: center;
+            margin-top: 30px;
         }
+        .btn {
+            background-color: #4CAF50;
+            color: #ffffff;
+            padding: 12px 24px;
             border: none;
             border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s ease;
         }
+        .btn:hover {
+            background-color: #45a049;
+        }
+        .image-details {
+            text-align: center;
+            margin-top: 30px;
+            font-size: 16px;
+        }
+        .social-buttons {
+            text-align: center;
+            margin-top: 30px;
+        }
+        .social-button {
+            display: inline-block;
+            margin-right: 10px;
+        }
+        .social-icon {
+            color: #ffffff;
+            font-size: 24px;
+            transition: color 0.3s ease;
+        }
+        .social-icon:hover {
+            color: #4CAF50;
+        }
+        footer {
+            padding: 20px;
+            text-align: center;
+        }
+        /* Responsive Styles */
+        @media only screen and (max-width: 500px) {
+            .container {
+                padding: 20px;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Generated Image</h1>
+        <div class="image-container">
+            <img src="{{ url_for('output_files', filename='filename') }}" alt="Generated Image" onclick="toggleImageSize(this)">
+        </div>
+        <div class="button-container">
+            <a href="/output_files/output.png" class="btn btn-success" onclick="downloadImage()"><i class="fas fa-download"></i> Download Image</a>
         </div>
+        <div class="image-details">
+            <p>Image Size: 1200x800 pixels</p>
+            <p>File Format: JPEG</p>
+        </div>
+        <div class="social-buttons">
+            <span class="social-button">
+                <a href="https://www.facebook.com/octaeldrith" class="social-icon"><i class="fab fa-facebook"></i></a>
+            </span>
+            <span class="social-button">
+                <a href="https://twitter.com/ims_eldrith" class="social-icon"><i class="fab fa-twitter"></i></a>
+            </span>
+            <span class="social-button">
+                <a href="https://www.instagram.com/ims_eldrith" class="social-icon"><i class="fab fa-instagram"></i></a>
+            </span>
+            <span class="social-button">
+                <a href="https://linkedin.com/in/ashiq-hussain" class="social-icon"><i class="fab fa-linkedin"></i></a>
+            </span>
         </div>
     </div>
+    <script>
+        function downloadImage() {
+            var link = document.createElement('a');
+            link.href = '/output_files/filename';
+            link.download = 'generated_image.jpg';
+            link.click();
+        }
+        function toggleImageSize(image) {
+            if (image.classList.contains('enlarged')) {
+                image.classList.remove('enlarged');
+            } else {
+                image.classList.add('enlarged');
+            }
+        }
+    </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/bootstrap@5.5.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
+</html>