Hugging Face's logo

Spaces:
Gigishot
/
GenAI_Blog
Sleeping

App Files Community
Gigishot commited on
Commit
f31f73a
·
verified ·
1 Parent(s): a3851dc

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +144 -144
templates/index.html CHANGED
@@ -1,144 +1,144 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Blog Generator</title>
7
- <style>
8
- body {
9
- margin: 0;
10
- font-family: 'Poppins', sans-serif;
11
- color: #333;
12
- display: flex;
13
- justify-content: center;
14
- align-items: center;
15
- min-height: 100vh;
16
- padding: 20px;
17
- box-sizing: border-box;
18
- position: relative;
19
- overflow: hidden;
20
-
21
- /* New background image */
22
- background-image: url('/static/images/bg.jpg');
23
- background-size: cover;
24
- background-position: center;
25
- background-attachment: fixed;
26
- }
27
-
28
- .container {
29
- background: linear-gradient(135deg, rgba(88,184,246,0.85), rgba(230,165,227,0.85));
30
- border: 1px solid rgba(255, 251, 234, 1);
31
- border-radius: 20px;
32
- padding: 40px 20px;
33
- box-shadow: 0 0 25px rgba(255, 251, 239, 0.62);
34
- text-align: center;
35
- max-width: 500px;
36
- width: 100%;
37
- backdrop-filter: blur(20px) saturate(180%);
38
- -webkit-backdrop-filter: blur(20px) saturate(180%);
39
- z-index: 1;
40
- }
41
-
42
- .container h1 {
43
- font-size: clamp(20px, 4vw, 32px);
44
- margin-bottom: 20px;
45
- color: #ffffff;
46
- text-shadow: 0 0 10px rgba(64, 60, 86, 0.29);
47
- }
48
-
49
- .input-group {
50
- display: flex;
51
- flex-direction: column;
52
- align-items: stretch;
53
- gap: 10px;
54
- }
55
-
56
- input[type="text"] {
57
- padding: 12px 15px;
58
- border: 1px solid rgba(255, 255, 255, 0.6);
59
- border-radius: 10px;
60
- font-size: 16px;
61
- background-color: rgba(255, 255, 255, 0.9);
62
- color: #333;
63
- box-shadow: 0 0 12px rgba(64, 60, 86, 0.29);
64
- outline: none;
65
- transition: box-shadow 0.3s ease, border-color 0.3s ease;
66
- width: 100%;
67
- box-sizing: border-box;
68
- }
69
-
70
- input[type="text"]::placeholder {
71
- color: #777;
72
- }
73
-
74
- input[type="text"]:focus {
75
- box-shadow: 0 0 15px rgba(88,184,246,0.7);
76
- border-color: rgba(88,184,246,1);
77
- }
78
-
79
- button {
80
- background: linear-gradient(135deg, #d78fd3ff, #49a5e2ff);
81
- border: 1px solid rgba(255, 251, 234, 1);
82
- border-radius: 10px;
83
- padding: 12px 20px;
84
- color: #fff;
85
- cursor: pointer;
86
- font-weight: bold;
87
- font-size: 16px;
88
- transition: 0.3s ease;
89
- width: 100%;
90
- box-sizing: border-box;
91
- box-shadow: 0 0 15px rgba(255, 251, 239, 0.5);
92
- }
93
-
94
- button:hover {
95
- background: linear-gradient(135deg, #49a5e2ff, #d78fd3ff);
96
- transform: scale(1.05);
97
- box-shadow: 0 0 18px rgba(110, 100, 110, 0.51);
98
- }
99
-
100
- #output {
101
- margin-top: 20px;
102
- border: 1px solid rgba(255,255,255,0.4);
103
- background: linear-gradient(135deg, rgba(229, 225, 255, 0.9), rgba(198, 232, 255, 0.9));
104
- padding: 15px;
105
- border-radius: 10px;
106
- color: #2d1818ff;
107
- box-shadow: 0 0 15px rgba(176,166,245,0.7);
108
- text-align: justify;
109
- }
110
-
111
- @media (min-width: 600px) {
112
- .input-group {
113
- flex-direction: row;
114
- justify-content: center;
115
- }
116
-
117
- input[type="text"] {
118
- width: 70%;
119
- }
120
-
121
- button {
122
- width: auto;
123
- }
124
- }
125
- </style>
126
- </head>
127
- <body>
128
-
129
- <div class="container">
130
- <h1>AI Blog Generator</h1>
131
- <form class="input-group" method="POST">
132
- <input type="text" name="topic" placeholder="Enter your topic">
133
- <button type="submit">Generate</button>
134
- </form>
135
-
136
- {% if paragraph %}
137
- <div id="output">
138
- {{ paragraph }}
139
- </div>
140
- {% endif %}
141
- </div>
142
-
143
- </body>
144
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Blog Generator</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ font-family: 'Poppins', sans-serif;
11
+ color: #333;
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: center;
15
+ min-height: 100vh;
16
+ padding: 20px;
17
+ box-sizing: border-box;
18
+ position: relative;
19
+ overflow: hidden;
20
+
21
+ /* New background image */
22
+ background-image: url('/static/images/bjp.jpg');
23
+ background-size: cover;
24
+ background-position: center;
25
+ background-attachment: fixed;
26
+ }
27
+
28
+ .container {
29
+ background: linear-gradient(135deg, rgba(88,184,246,0.85), rgba(230,165,227,0.85));
30
+ border: 1px solid rgba(255, 251, 234, 1);
31
+ border-radius: 20px;
32
+ padding: 40px 20px;
33
+ box-shadow: 0 0 25px rgba(255, 251, 239, 0.62);
34
+ text-align: center;
35
+ max-width: 500px;
36
+ width: 100%;
37
+ backdrop-filter: blur(20px) saturate(180%);
38
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
39
+ z-index: 1;
40
+ }
41
+
42
+ .container h1 {
43
+ font-size: clamp(20px, 4vw, 32px);
44
+ margin-bottom: 20px;
45
+ color: #ffffff;
46
+ text-shadow: 0 0 10px rgba(64, 60, 86, 0.29);
47
+ }
48
+
49
+ .input-group {
50
+ display: flex;
51
+ flex-direction: column;
52
+ align-items: stretch;
53
+ gap: 10px;
54
+ }
55
+
56
+ input[type="text"] {
57
+ padding: 12px 15px;
58
+ border: 1px solid rgba(255, 255, 255, 0.6);
59
+ border-radius: 10px;
60
+ font-size: 16px;
61
+ background-color: rgba(255, 255, 255, 0.9);
62
+ color: #333;
63
+ box-shadow: 0 0 12px rgba(64, 60, 86, 0.29);
64
+ outline: none;
65
+ transition: box-shadow 0.3s ease, border-color 0.3s ease;
66
+ width: 100%;
67
+ box-sizing: border-box;
68
+ }
69
+
70
+ input[type="text"]::placeholder {
71
+ color: #777;
72
+ }
73
+
74
+ input[type="text"]:focus {
75
+ box-shadow: 0 0 15px rgba(88,184,246,0.7);
76
+ border-color: rgba(88,184,246,1);
77
+ }
78
+
79
+ button {
80
+ background: linear-gradient(135deg, #d78fd3ff, #49a5e2ff);
81
+ border: 1px solid rgba(255, 251, 234, 1);
82
+ border-radius: 10px;
83
+ padding: 12px 20px;
84
+ color: #fff;
85
+ cursor: pointer;
86
+ font-weight: bold;
87
+ font-size: 16px;
88
+ transition: 0.3s ease;
89
+ width: 100%;
90
+ box-sizing: border-box;
91
+ box-shadow: 0 0 15px rgba(255, 251, 239, 0.5);
92
+ }
93
+
94
+ button:hover {
95
+ background: linear-gradient(135deg, #49a5e2ff, #d78fd3ff);
96
+ transform: scale(1.05);
97
+ box-shadow: 0 0 18px rgba(110, 100, 110, 0.51);
98
+ }
99
+
100
+ #output {
101
+ margin-top: 20px;
102
+ border: 1px solid rgba(255,255,255,0.4);
103
+ background: linear-gradient(135deg, rgba(229, 225, 255, 0.9), rgba(198, 232, 255, 0.9));
104
+ padding: 15px;
105
+ border-radius: 10px;
106
+ color: #2d1818ff;
107
+ box-shadow: 0 0 15px rgba(176,166,245,0.7);
108
+ text-align: justify;
109
+ }
110
+
111
+ @media (min-width: 600px) {
112
+ .input-group {
113
+ flex-direction: row;
114
+ justify-content: center;
115
+ }
116
+
117
+ input[type="text"] {
118
+ width: 70%;
119
+ }
120
+
121
+ button {
122
+ width: auto;
123
+ }
124
+ }
125
+ </style>
126
+ </head>
127
+ <body>
128
+
129
+ <div class="container">
130
+ <h1>AI Blog Generator</h1>
131
+ <form class="input-group" method="POST">
132
+ <input type="text" name="topic" placeholder="Enter your topic">
133
+ <button type="submit">Generate</button>
134
+ </form>
135
+
136
+ {% if paragraph %}
137
+ <div id="output">
138
+ {{ paragraph }}
139
+ </div>
140
+ {% endif %}
141
+ </div>
142
+
143
+ </body>
144
+ </html>