Hugging Face's logo

Spaces:
eloino92
/
anycoder-247987c5
Running

App Files Community
eloino92 commited on
Commit
9ba818b
·
verified ·
1 Parent(s): 56efde7

Deploy from anycoder

Browse files
Files changed (1) hide show
  1. index.html +582 -19
index.html CHANGED
@@ -1,19 +1,582 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>Animated Weather Cards</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ :root {
13
+ --bg-color: #0f172a;
14
+ --card-bg: rgba(255, 255, 255, 0.05);
15
+ --card-border: rgba(255, 255, 255, 0.1);
16
+ --text-primary: #ffffff;
17
+ --text-secondary: #94a3b8;
18
+ --accent-sun: #f59e0b;
19
+ --accent-rain: #3b82f6;
20
+ --accent-snow: #e2e8f0;
21
+ --accent-wind: #10b981;
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ body {
31
+ font-family: 'Poppins', sans-serif;
32
+ background-color: var(--bg-color);
33
+ background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 100%);
34
+ color: var(--text-primary);
35
+ min-height: 100vh;
36
+ display: flex;
37
+ flex-direction: column;
38
+ align-items: center;
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ /* Header */
43
+ header {
44
+ width: 100%;
45
+ padding: 20px;
46
+ text-align: center;
47
+ background: rgba(15, 23, 42, 0.8);
48
+ backdrop-filter: blur(10px);
49
+ position: sticky;
50
+ top: 0;
51
+ z-index: 100;
52
+ border-bottom: 1px solid var(--card-border);
53
+ }
54
+
55
+ .brand-link {
56
+ color: var(--text-secondary);
57
+ text-decoration: none;
58
+ font-size: 0.9rem;
59
+ font-weight: 500;
60
+ transition: color 0.3s ease;
61
+ }
62
+
63
+ .brand-link:hover {
64
+ color: var(--text-primary);
65
+ text-decoration: underline;
66
+ }
67
+
68
+ .title {
69
+ margin-top: 10px;
70
+ font-size: 1.5rem;
71
+ font-weight: 700;
72
+ background: linear-gradient(to right, #fff, #94a3b8);
73
+ -webkit-background-clip: text;
74
+ -webkit-text-fill-color: transparent;
75
+ }
76
+
77
+ /* Controls */
78
+ .controls {
79
+ margin: 30px 0;
80
+ display: flex;
81
+ gap: 10px;
82
+ flex-wrap: wrap;
83
+ justify-content: center;
84
+ }
85
+
86
+ .btn {
87
+ padding: 10px 20px;
88
+ border: none;
89
+ border-radius: 30px;
90
+ background: var(--card-bg);
91
+ color: var(--text-primary);
92
+ border: 1px solid var(--card-border);
93
+ cursor: pointer;
94
+ transition: all 0.3s ease;
95
+ font-family: inherit;
96
+ font-weight: 500;
97
+ }
98
+
99
+ .btn:hover, .btn.active {
100
+ background: rgba(255, 255, 255, 0.2);
101
+ transform: translateY(-2px);
102
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
103
+ }
104
+
105
+ /* Grid Layout */
106
+ .weather-grid {
107
+ display: grid;
108
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
109
+ gap: 30px;
110
+ width: 90%;
111
+ max-width: 1200px;
112
+ padding-bottom: 50px;
113
+ }
114
+
115
+ /* Card Styles */
116
+ .card {
117
+ background: var(--card-bg);
118
+ border: 1px solid var(--card-border);
119
+ border-radius: 24px;
120
+ padding: 30px;
121
+ position: relative;
122
+ overflow: hidden;
123
+ backdrop-filter: blur(12px);
124
+ transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.27), opacity 0.3s ease;
125
+ display: flex;
126
+ flex-direction: column;
127
+ align-items: center;
128
+ box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
129
+ }
130
+
131
+ .card.hidden {
132
+ display: none;
133
+ }
134
+
135
+ .card:hover {
136
+ transform: translateY(-10px);
137
+ border-color: rgba(255,255,255,0.2);
138
+ }
139
+
140
+ /* Weather Visual Area */
141
+ .visual {
142
+ width: 100%;
143
+ height: 150px;
144
+ position: relative;
145
+ display: flex;
146
+ justify-content: center;
147
+ align-items: center;
148
+ margin-bottom: 20px;
149
+ }
150
+
151
+ /* Info Area */
152
+ .info {
153
+ text-align: center;
154
+ width: 100%;
155
+ z-index: 2;
156
+ }
157
+
158
+ .temp {
159
+ font-size: 3.5rem;
160
+ font-weight: 700;
161
+ line-height: 1;
162
+ margin-bottom: 5px;
163
+ }
164
+
165
+ .condition {
166
+ font-size: 1.2rem;
167
+ color: var(--text-secondary);
168
+ margin-bottom: 20px;
169
+ text-transform: uppercase;
170
+ letter-spacing: 1px;
171
+ }
172
+
173
+ .details {
174
+ display: flex;
175
+ justify-content: space-around;
176
+ width: 100%;
177
+ padding-top: 20px;
178
+ border-top: 1px solid rgba(255,255,255,0.1);
179
+ }
180
+
181
+ .detail-item {
182
+ display: flex;
183
+ flex-direction: column;
184
+ align-items: center;
185
+ font-size: 0.9rem;
186
+ color: var(--text-secondary);
187
+ }
188
+
189
+ .detail-item i {
190
+ margin-bottom: 5px;
191
+ font-size: 1.1rem;
192
+ }
193
+
194
+ /* --- ANIMATIONS & ART --- */
195
+
196
+ /* Common Cloud */
197
+ .cloud {
198
+ width: 100px;
199
+ height: 40px;
200
+ background: #fff;
201
+ border-radius: 50px;
202
+ position: absolute;
203
+ z-index: 2;
204
+ }
205
+ .cloud::after {
206
+ content: '';
207
+ position: absolute;
208
+ top: -25px;
209
+ left: 15px;
210
+ width: 45px;
211
+ height: 45px;
212
+ background: #fff;
213
+ border-radius: 50%;
214
+ }
215
+ .cloud::before {
216
+ content: '';
217
+ position: absolute;
218
+ top: -15px;
219
+ left: 45px;
220
+ width: 35px;
221
+ height: 35px;
222
+ background: #fff;
223
+ border-radius: 50%;
224
+ }
225
+
226
+ /* 1. SUN CARD */
227
+ .card.sun .visual .sun-circle {
228
+ width: 80px;
229
+ height: 80px;
230
+ background: linear-gradient(45deg, #f59e0b, #fbbf24);
231
+ border-radius: 50%;
232
+ box-shadow: 0 0 40px rgba(245, 158, 11, 0.6);
233
+ position: absolute;
234
+ animation: sun-pulse 3s infinite alternate;
235
+ }
236
+ .card.sun .visual .sun-rays {
237
+ position: absolute;
238
+ width: 120px;
239
+ height: 120px;
240
+ animation: spin 10s linear infinite;
241
+ }
242
+ .card.sun .visual .sun-rays span {
243
+ position: absolute;
244
+ top: 50%;
245
+ left: 50%;
246
+ transform: translate(-50%, -50%);
247
+ width: 100%;
248
+ height: 2px;
249
+ background: rgba(245, 158, 11, 0.5);
250
+ }
251
+ .card.sun .visual .cloud {
252
+ top: 50%;
253
+ left: 50%;
254
+ transform: translate(-20%, 10%);
255
+ opacity: 0.9;
256
+ animation: float 4s ease-in-out infinite;
257
+ }
258
+
259
+ /* 2. RAIN CARD */
260
+ .card.rain .visual .cloud {
261
+ background: #94a3b8;
262
+ box-shadow: 0 10px 15px rgba(0,0,0,0.2);
263
+ top: 40%;
264
+ left: 50%;
265
+ transform: translate(-50%, -50%);
266
+ }
267
+ .card.rain .visual .cloud::after,
268
+ .card.rain .visual .cloud::before {
269
+ background: #94a3b8;
270
+ }
271
+ .rain-drop {
272
+ position: absolute;
273
+ background: #60a5fa;
274
+ width: 2px;
275
+ height: 10px;
276
+ top: 60%;
277
+ opacity: 0;
278
+ animation: rain-fall 1s linear infinite;
279
+ border-radius: 2px;
280
+ }
281
+
282
+ /* 3. SNOW CARD */
283
+ .card.snow .visual .cloud {
284
+ background: #e2e8f0;
285
+ top: 40%;
286
+ left: 50%;
287
+ transform: translate(-50%, -50%);
288
+ filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
289
+ }
290
+ .snow-flake {
291
+ position: absolute;
292
+ color: white;
293
+ font-size: 10px;
294
+ top: 60%;
295
+ opacity: 0;
296
+ animation: snow-fall 2.5s linear infinite;
297
+ }
298
+
299
+ /* 4. WIND CARD */
300
+ .card.wind .visual .cloud {
301
+ background: #cbd5e1;
302
+ top: 50%;
303
+ left: 50%;
304
+ transform: translate(-50%, -50%);
305
+ animation: wind-shake 2s ease-in-out infinite;
306
+ }
307
+ .wind-line {
308
+ position: absolute;
309
+ height: 2px;
310
+ background: rgba(255,255,255,0.5);
311
+ border-radius: 2px;
312
+ animation: wind-blow 1.5s linear infinite;
313
+ }
314
+
315
+ /* Keyframes */
316
+ @keyframes spin { 100% { transform: rotate(360deg); } }
317
+ @keyframes sun-pulse {
318
+ 0% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.4); transform: scale(1); }
319
+ 100% { box-shadow: 0 0 60px rgba(245, 158, 11, 0.8); transform: scale(1.1); }
320
+ }
321
+ @keyframes float {
322
+ 0%, 100% { transform: translate(-20%, 10%); }
323
+ 50% { transform: translate(-20%, 5%); }
324
+ }
325
+ @keyframes rain-fall {
326
+ 0% { transform: translateY(0); opacity: 1; }
327
+ 100% { transform: translateY(60px); opacity: 0; }
328
+ }
329
+ @keyframes snow-fall {
330
+ 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
331
+ 25% { transform: translateY(20px) translateX(5px) rotate(45deg); }
332
+ 50% { transform: translateY(40px) translateX(-5px) rotate(90deg); }
333
+ 75% { transform: translateY(60px) translateX(5px) rotate(135deg); }
334
+ 100% { transform: translateY(80px) translateX(0) rotate(180deg); opacity: 0; }
335
+ }
336
+ @keyframes wind-shake {
337
+ 0%, 100% { transform: translate(-50%, -50%); }
338
+ 50% { transform: translate(-45%, -50%); }
339
+ }
340
+ @keyframes wind-blow {
341
+ 0% { left: -50px; opacity: 0; width: 20px; }
342
+ 50% { opacity: 1; width: 60px; }
343
+ 100% { left: 110%; opacity: 0; width: 20px; }
344
+ }
345
+
346
+ /* Responsive Tweaks */
347
+ @media (max-width: 600px) {
348
+ .temp { font-size: 2.5rem; }
349
+ .weather-grid { grid-template-columns: 1fr; }
350
+ }
351
+ </style>
352
+ </head>
353
+ <body>
354
+
355
+ <header>
356
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="brand-link" target="_blank">Built with anycoder</a>
357
+ <h1 class="title">Weather Animations</h1>
358
+ </header>
359
+
360
+ <!-- Controls to switch views -->
361
+ <div class="controls">
362
+ <button class="btn active" onclick="filterWeather('all')">Show All</button>
363
+ <button class="btn" onclick="filterWeather('sun')">Sunny</button>
364
+ <button class="btn" onclick="filterWeather('rain')">Rainy</button>
365
+ <button class="btn" onclick="filterWeather('snow')">Snowy</button>
366
+ <button class="btn" onclick="filterWeather('wind')">Windy</button>
367
+ </div>
368
+
369
+ <div class="weather-grid">
370
+
371
+ <!-- SUNNY CARD -->
372
+ <div class="card sun" data-type="sun">
373
+ <div class="visual">
374
+ <div class="sun-rays">
375
+ <!-- Rays generated via CSS or JS, let's keep it simple with spans in HTML for control -->
376
+ <span style="transform: translate(-50%, -50%) rotate(0deg)"></span>
377
+ <span style="transform: translate(-50%, -50%) rotate(45deg)"></span>
378
+ <span style="transform: translate(-50%, -50%) rotate(90deg)"></span>
379
+ <span style="transform: translate(-50%, -50%) rotate(135deg)"></span>
380
+ </div>
381
+ <div class="sun-circle"></div>
382
+ <div class="cloud"></div>
383
+ </div>
384
+ <div class="info">
385
+ <div class="temp">28°C</div>
386
+ <div class="condition">Sunny</div>
387
+ <div class="details">
388
+ <div class="detail-item">
389
+ <i class="fas fa-wind"></i>
390
+ <span>12 km/h</span>
391
+ </div>
392
+ <div class="detail-item">
393
+ <i class="fas fa-tint"></i>
394
+ <span>45%</span>
395
+ </div>
396
+ <div class="detail-item">
397
+ <i class="fas fa-sun"></i>
398
+ <span>UV 8</span>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- RAINY CARD -->
405
+ <div class="card rain" data-type="rain">
406
+ <div class="visual" id="rain-visual">
407
+ <div class="cloud"></div>
408
+ <!-- Raindrops injected via JS -->
409
+ </div>
410
+ <div class="info">
411
+ <div class="temp">15°C</div>
412
+ <div class="condition">Heavy Rain</div>
413
+ <div class="details">
414
+ <div class="detail-item">
415
+ <i class="fas fa-wind"></i>
416
+ <span>25 km/h</span>
417
+ </div>
418
+ <div class="detail-item">
419
+ <i class="fas fa-tint"></i>
420
+ <span>92%</span>
421
+ </div>
422
+ <div class="detail-item">
423
+ <i class="fas fa-umbrella"></i>
424
+ <span>100%</span>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- SNOWY CARD -->
431
+ <div class="card snow" data-type="snow">
432
+ <div class="visual" id="snow-visual">
433
+ <div class="cloud"></div>
434
+ <!-- Snowflakes injected via JS -->
435
+ </div>
436
+ <div class="info">
437
+ <div class="temp">-4°C</div>
438
+ <div class="condition">Snowing</div>
439
+ <div class="details">
440
+ <div class="detail-item">
441
+ <i class="fas fa-wind"></i>
442
+ <span>18 km/h</span>
443
+ </div>
444
+ <div class="detail-item">
445
+ <i class="fas fa-snowflake"></i>
446
+ <span>80%</span>
447
+ </div>
448
+ <div class="detail-item">
449
+ <i class="fas fa-thermometer-empty"></i>
450
+ <span>Cold</span>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- WINDY CARD -->
457
+ <div class="card wind" data-type="wind">
458
+ <div class="visual" id="wind-visual">
459
+ <div class="cloud"></div>
460
+ <!-- Wind lines injected via JS -->
461
+ </div>
462
+ <div class="info">
463
+ <div class="temp">19°C</div>
464
+ <div class="condition">Windy</div>
465
+ <div class="details">
466
+ <div class="detail-item">
467
+ <i class="fas fa-wind"></i>
468
+ <span>45 km/h</span>
469
+ </div>
470
+ <div class="detail-item">
471
+ <i class="fas fa-tint"></i>
472
+ <span>55%</span>
473
+ </div>
474
+ <div class="detail-item">
475
+ <i class="fas fa-leaf"></i>
476
+ <span>High</span>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ </div>
483
+
484
+ <script>
485
+ // Initialization for particles
486
+ document.addEventListener('DOMContentLoaded', () => {
487
+ createRain();
488
+ createSnow();
489
+ createWind();
490
+ });
491
+
492
+ // Logic to switch/filter cards
493
+ function filterWeather(type) {
494
+ const cards = document.querySelectorAll('.card');
495
+ const buttons = document.querySelectorAll('.btn');
496
+
497
+ // Update buttons state
498
+ buttons.forEach(btn => btn.classList.remove('active'));
499
+ event.target.classList.add('active');
500
+
501
+ // Filter cards
502
+ cards.forEach(card => {
503
+ if (type === 'all') {
504
+ card.classList.remove('hidden');
505
+ } else {
506
+ if (card.getAttribute('data-type') === type) {
507
+ card.classList.remove('hidden');
508
+ } else {
509
+ card.classList.add('hidden');
510
+ }
511
+ }
512
+ });
513
+ }
514
+
515
+ // Animation Generators
516
+
517
+ function createRain() {
518
+ const container = document.getElementById('rain-visual');
519
+ const dropCount = 15;
520
+
521
+ for(let i = 0; i < dropCount; i++) {
522
+ const drop = document.createElement('div');
523
+ drop.classList.add('rain-drop');
524
+
525
+ // Random positions
526
+ const left = Math.floor(Math.random() * 60) + 20; // Keep within center area mostly
527
+ const delay = Math.random() * 1;
528
+ const duration = Math.random() * 0.5 + 0.5;
529
+
530
+ drop.style.left = `${left}%`;
531
+ drop.style.animationDelay = `${delay}s`;
532
+ drop.style.animationDuration = `${duration}s`;
533
+
534
+ container.appendChild(drop);
535
+ }
536
+ }
537
+
538
+ function createSnow() {
539
+ const container = document.getElementById('snow-visual');
540
+ const flakeCount = 20;
541
+
542
+ for(let i = 0; i < flakeCount; i++) {
543
+ const flake = document.createElement('i');
544
+ flake.classList.add('fas', 'fa-snowflake', 'snow-flake');
545
+
546
+ const left = Math.floor(Math.random() * 80) + 10;
547
+ const delay = Math.random() * 2;
548
+ const duration = Math.random() * 1.5 + 1.5;
549
+ const size = Math.random() * 8 + 5;
550
+
551
+ flake.style.left = `${left}%`;
552
+ flake.style.animationDelay = `${delay}s`;
553
+ flake.style.animationDuration = `${duration}s`;
554
+ flake.style.fontSize = `${size}px`;
555
+ flake.style.opacity = Math.random();
556
+
557
+ container.appendChild(flake);
558
+ }
559
+ }
560
+
561
+ function createWind() {
562
+ const container = document.getElementById('wind-visual');
563
+ const lineCount = 6;
564
+
565
+ for(let i = 0; i < lineCount; i++) {
566
+ const line = document.createElement('div');
567
+ line.classList.add('wind-line');
568
+
569
+ const top = Math.floor(Math.random() * 80) + 10;
570
+ const delay = Math.random() * 2;
571
+ const duration = Math.random() * 1 + 0.5;
572
+
573
+ line.style.top = `${top}%`;
574
+ line.style.animationDelay = `${delay}s`;
575
+ line.style.animationDuration = `${duration}s`;
576
+
577
+ container.appendChild(line);
578
+ }
579
+ }
580
+ </script>
581
+ </body>
582
+ </html>