Hugging Face's logo

Spaces:
imseldrith
/
Imagine
Running

App Files Community
imseldrith commited on
Commit
3d5fdc4
·
1 Parent(s): 3e3561c

Create templates/output.html

Browse files
Files changed (1) hide show
  1. templates/output.html +135 -0
templates/output.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Generated Image</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
8
+ <style>
9
+ body {
10
+ background-color: #000000;
11
+ color: #ffffff;
12
+ font-family: Arial, sans-serif;
13
+ }
14
+
15
+ .container {
16
+ max-width: 800px;
17
+ margin: 0 auto;
18
+ padding: 40px;
19
+ background-color: #222222;
20
+ border-radius: 10px;
21
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
22
+ }
23
+
24
+ h1 {
25
+ text-align: center;
26
+ margin-bottom: 30px;
27
+ }
28
+
29
+ .image-container {
30
+ text-align: center;
31
+ margin-bottom: 30px;
32
+ }
33
+
34
+ img {
35
+ max-width: 100%;
36
+ height: auto;
37
+ border-radius: 5px;
38
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
39
+ }
40
+
41
+ .button-container {
42
+ text-align: center;
43
+ margin-top: 30px;
44
+ }
45
+
46
+ .btn {
47
+ background-color: #4CAF50;
48
+ color: #ffffff;
49
+ padding: 12px 24px;
50
+ border: none;
51
+ border-radius: 5px;
52
+ cursor: pointer;
53
+ font-size: 16px;
54
+ transition: background-color 0.3s ease;
55
+ }
56
+
57
+ .btn:hover {
58
+ background-color: #45a049;
59
+ }
60
+
61
+ .image-details {
62
+ text-align: center;
63
+ margin-top: 30px;
64
+ font-size: 16px;
65
+ }
66
+
67
+ .social-buttons {
68
+ text-align: center;
69
+ margin-top: 30px;
70
+ }
71
+
72
+ .social-button {
73
+ display: inline-block;
74
+ margin-right: 10px;
75
+ }
76
+
77
+ .social-icon {
78
+ color: #ffffff;
79
+ font-size: 24px;
80
+ transition: color 0.3s ease;
81
+ }
82
+
83
+ .social-icon:hover {
84
+ color: #4CAF50;
85
+ }
86
+
87
+ /* Responsive Styles */
88
+ @media only screen and (max-width: 500px) {
89
+ .container {
90
+ padding: 20px;
91
+ }
92
+ }
93
+ </style>
94
+ </head>
95
+ <body>
96
+ <div class="container">
97
+ <h1>Generated Image</h1>
98
+ <div class="image-container">
99
+ <img src="{{ url_for('static', filename='example.jpeg') }}" alt="Generated Image">
100
+ </div>
101
+ <div class="button-container">
102
+ <a href="/static/example.jpeg" class="btn btn-success" onclick="downloadImage()"><i class="fas fa-download"></i> Download Image</a>
103
+ </div>
104
+ <div class="image-details">
105
+ <p>Image Size: 1200x800 pixels</p>
106
+ <p>File Format: JPEG</p>
107
+ </div>
108
+ <div class="social-buttons">
109
+ <span class="social-button">
110
+ <a href="https://www.facebook.com/octaeldrith" class="social-icon"><i class="fab fa-facebook"></i></a>
111
+ </span>
112
+ <span class="social-button">
113
+ <a href="https://twitter.com/ims_eldrith" class="social-icon"><i class="fab fa-twitter"></i></a>
114
+ </span>
115
+ <span class="social-button">
116
+ <a href="https://www.instagram.com/ims_eldrith" class="social-icon"><i class="fab fa-instagram"></i></a>
117
+ </span>
118
+ <span class="social-button">
119
+ <a href="https://linkedin.com/in/ashiq-hussain" class="social-icon"><i class="fab fa-linkedin"></i></a>
120
+ </span>
121
+ </div>
122
+ </div>
123
+
124
+ <script>
125
+ function downloadImage() {
126
+ var link = document.createElement('a');
127
+ link.href = '/static/example.jpeg';
128
+ link.download = 'generated_image.jpg';
129
+ link.click();
130
+ }
131
+ </script>
132
+
133
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
134
+ </body>
135
+ </html>