<!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('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> </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 = '/static/example.jpeg'; 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>