Hugging Face's logo

Spaces:
Gigishot
/
GenAI_Blog
Sleeping

App Files Community
Gigishot commited on
Commit
e2e85a9
·
verified ·
1 Parent(s): fcaed26

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +91 -6
templates/index.html CHANGED
@@ -196,13 +196,75 @@
196
 
197
  .loading {
198
  display: none;
199
- text-align: center;
200
- color: #5c6ac4;
201
- font-size: 14px;
202
- margin-top: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  }
204
 
205
- .loading.active { display: block; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
206
  </style>
207
  </head>
208
  <body>
@@ -226,7 +288,15 @@
226
  </form>
227
  </div>
228
 
229
- <div class="loading">Generating your blog post...</div>
 
 
 
 
 
 
 
 
230
 
231
  {% if paragraph %}
232
  <div class="output-card">
@@ -234,6 +304,21 @@
234
  </div>
235
  {% endif %}
236
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  <div class="features">
238
  <div class="feature">
239
  <div class="feature-icon">⚙️</div>
 
196
 
197
  .loading {
198
  display: none;
199
+ flex-direction: column;
200
+ align-items: center;
201
+ gap: 14px;
202
+ margin-top: 20px;
203
+ background: #ffffff;
204
+ border-radius: 20px;
205
+ padding: 32px 28px;
206
+ width: 100%;
207
+ max-width: 680px;
208
+ box-shadow: 0 4px 32px rgba(0,0,0,0.06);
209
+ }
210
+
211
+ .loading.active { display: flex; }
212
+
213
+ .loading-dots {
214
+ display: flex;
215
+ gap: 8px;
216
+ align-items: center;
217
+ }
218
+
219
+ .loading-dots span {
220
+ width: 10px;
221
+ height: 10px;
222
+ border-radius: 50%;
223
+ background: #5c6ac4;
224
+ animation: bounce 1.2s infinite ease-in-out;
225
  }
226
 
227
+ .loading-dots span:nth-child(2) { animation-delay: 0.2s; background: #7c7cd8; }
228
+ .loading-dots span:nth-child(3) { animation-delay: 0.4s; background: #a0a0e8; }
229
+
230
+ @keyframes bounce {
231
+ 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
232
+ 40% { transform: scale(1); opacity: 1; }
233
+ }
234
+
235
+ .loading-bar-wrap {
236
+ width: 100%;
237
+ height: 4px;
238
+ background: #ececfc;
239
+ border-radius: 4px;
240
+ overflow: hidden;
241
+ }
242
+
243
+ .loading-bar {
244
+ height: 100%;
245
+ width: 0%;
246
+ background: linear-gradient(90deg, #5c6ac4, #a78bfa);
247
+ border-radius: 4px;
248
+ animation: fillbar 3s ease-in-out infinite;
249
+ }
250
+
251
+ @keyframes fillbar {
252
+ 0% { width: 0%; }
253
+ 60% { width: 85%; }
254
+ 100% { width: 95%; }
255
+ }
256
+
257
+ .loading-text {
258
+ font-size: 13px;
259
+ color: #8888aa;
260
+ letter-spacing: 0.3px;
261
+ animation: pulse 1.5s infinite ease-in-out;
262
+ }
263
+
264
+ @keyframes pulse {
265
+ 0%, 100% { opacity: 1; }
266
+ 50% { opacity: 0.4; }
267
+ }
268
  </style>
269
  </head>
270
  <body>
 
288
  </form>
289
  </div>
290
 
291
+ <div class="loading" id="loadingBox">
292
+ <div class="loading-dots">
293
+ <span></span><span></span><span></span>
294
+ </div>
295
+ <div class="loading-bar-wrap">
296
+ <div class="loading-bar"></div>
297
+ </div>
298
+ <div class="loading-text">AI is crafting your blog post...</div>
299
+ </div>
300
 
301
  {% if paragraph %}
302
  <div class="output-card">
 
304
  </div>
305
  {% endif %}
306
 
307
+ <script>
308
+ const form = document.querySelector('form');
309
+ const loadingBox = document.getElementById('loadingBox');
310
+
311
+ form.addEventListener('submit', function() {
312
+ loadingBox.classList.add('active');
313
+ document.querySelector('.generate-btn').disabled = true;
314
+ document.querySelector('.generate-btn').style.opacity = '0.6';
315
+ });
316
+
317
+ {% if paragraph %}
318
+ loadingBox.classList.remove('active');
319
+ {% endif %}
320
+ </script>
321
+
322
  <div class="features">
323
  <div class="feature">
324
  <div class="feature-icon">⚙️</div>