Hugging Face's logo

Spaces:
JymNils
/
fury-s-space
Running

App Files Community
himmeena5 commited on
Commit
3a62d60
·
verified ·
1 Parent(s): 2dca4ae

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +816 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fury S Space
3
- emoji: 🌍
4
- colorFrom: red
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: fury-s-space
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,816 @@
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>WeatherScope - Cyberpunk Weather App</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --cyber-blue: #00f7ff;
12
+ --cyber-pink: #ff00f7;
13
+ --cyber-purple: #8a2be2;
14
+ --cyber-dark: #0a0a1a;
15
+ --cyber-light: #e0e0ff;
16
+ --card-radius: 16px;
17
+ --card-shadow: 0 10px 30px rgba(0, 247, 255, 0.2);
18
+ --transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ font-family: 'Rajdhani', sans-serif;
26
+ }
27
+
28
+ body {
29
+ background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%);
30
+ color: var(--cyber-light);
31
+ min-height: 100vh;
32
+ padding: 40px 20px;
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ .container {
37
+ max-width: 1200px;
38
+ margin: 0 auto;
39
+ position: relative;
40
+ }
41
+
42
+ /* Cyberpunk scanlines overlay */
43
+ body::before {
44
+ content: "";
45
+ position: fixed;
46
+ top: 0;
47
+ left: 0;
48
+ right: 0;
49
+ bottom: 0;
50
+ background:
51
+ linear-gradient(rgba(0, 247, 255, 0.06) 1px, transparent 1px),
52
+ linear-gradient(90deg, rgba(0, 247, 255, 0.06) 1px, transparent 1px);
53
+ background-size: 3px 3px;
54
+ pointer-events: none;
55
+ z-index: 0;
56
+ }
57
+
58
+ /* Cyberpunk grid overlay */
59
+ body::after {
60
+ content: "";
61
+ position: fixed;
62
+ top: 0;
63
+ left: 0;
64
+ right: 0;
65
+ bottom: 0;
66
+ background:
67
+ linear-gradient(to bottom,
68
+ transparent 0%,
69
+ rgba(138, 43, 226, 0.05) 50%,
70
+ transparent 100%);
71
+ pointer-events: none;
72
+ z-index: 0;
73
+ }
74
+
75
+ header {
76
+ text-align: center;
77
+ margin-bottom: 60px;
78
+ position: relative;
79
+ z-index: 1;
80
+ }
81
+
82
+ h1 {
83
+ font-family: 'Orbitron', sans-serif;
84
+ font-size: 64px;
85
+ font-weight: 700;
86
+ letter-spacing: 2px;
87
+ margin-bottom: 16px;
88
+ text-transform: uppercase;
89
+ background: linear-gradient(90deg, var(--cyber-blue), var(--cyber-pink));
90
+ -webkit-background-clip: text;
91
+ background-clip: text;
92
+ color: transparent;
93
+ text-shadow: 0 0 10px rgba(0, 247, 255, 0.3);
94
+ position: relative;
95
+ display: inline-block;
96
+ }
97
+
98
+ h1::after {
99
+ content: "";
100
+ position: absolute;
101
+ bottom: -10px;
102
+ left: 50%;
103
+ transform: translateX(-50%);
104
+ width: 200px;
105
+ height: 3px;
106
+ background: linear-gradient(90deg, transparent, var(--cyber-blue), transparent);
107
+ box-shadow: 0 0 15px var(--cyber-blue);
108
+ }
109
+
110
+ .subtitle {
111
+ font-size: 20px;
112
+ color: var(--cyber-blue);
113
+ max-width: 600px;
114
+ margin: 0 auto;
115
+ font-weight: 300;
116
+ letter-spacing: 1px;
117
+ text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
118
+ }
119
+
120
+ .weather-grid {
121
+ display: grid;
122
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
123
+ gap: 30px;
124
+ margin-bottom: 40px;
125
+ position: relative;
126
+ z-index: 1;
127
+ }
128
+
129
+ .weather-card {
130
+ background: rgba(10, 10, 26, 0.7);
131
+ border-radius: var(--card-radius);
132
+ box-shadow: var(--card-shadow);
133
+ overflow: hidden;
134
+ transition: var(--transition);
135
+ position: relative;
136
+ border: 1px solid rgba(0, 247, 255, 0.2);
137
+ backdrop-filter: blur(10px);
138
+ transform-style: preserve-3d;
139
+ perspective: 1000px;
140
+ }
141
+
142
+ .weather-card::before {
143
+ content: "";
144
+ position: absolute;
145
+ top: 0;
146
+ left: 0;
147
+ right: 0;
148
+ bottom: 0;
149
+ border-radius: var(--card-radius);
150
+ border: 1px solid transparent;
151
+ background: linear-gradient(135deg, rgba(0, 247, 255, 0.3), rgba(255, 0, 247, 0.1)) border-box;
152
+ -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
153
+ -webkit-mask-composite: destination-out;
154
+ mask-composite: exclude;
155
+ pointer-events: none;
156
+ }
157
+
158
+ .weather-card:hover {
159
+ transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
160
+ box-shadow: 0 15px 40px rgba(0, 247, 255, 0.3);
161
+ }
162
+
163
+ .weather-header {
164
+ padding: 25px;
165
+ position: relative;
166
+ z-index: 2;
167
+ }
168
+
169
+ .location {
170
+ font-size: 26px;
171
+ font-weight: 600;
172
+ margin-bottom: 5px;
173
+ color: var(--cyber-blue);
174
+ font-family: 'Orbitron', sans-serif;
175
+ letter-spacing: 1px;
176
+ }
177
+
178
+ .date {
179
+ font-size: 16px;
180
+ color: var(--cyber-pink);
181
+ margin-bottom: 15px;
182
+ font-weight: 300;
183
+ }
184
+
185
+ .weather-main {
186
+ display: flex;
187
+ align-items: center;
188
+ margin-bottom: 20px;
189
+ }
190
+
191
+ .temperature {
192
+ font-size: 72px;
193
+ font-weight: 300;
194
+ margin-right: 15px;
195
+ line-height: 1;
196
+ background: linear-gradient(90deg, var(--cyber-blue), var(--cyber-pink));
197
+ -webkit-background-clip: text;
198
+ background-clip: text;
199
+ color: transparent;
200
+ font-family: 'Orbitron', sans-serif;
201
+ }
202
+
203
+ .weather-icon {
204
+ width: 70px;
205
+ height: 70px;
206
+ margin-right: 15px;
207
+ filter: drop-shadow(0 0 5px var(--cyber-blue));
208
+ }
209
+
210
+ .weather-description {
211
+ font-size: 20px;
212
+ font-weight: 500;
213
+ color: var(--cyber-light);
214
+ }
215
+
216
+ .weather-details {
217
+ display: grid;
218
+ grid-template-columns: 1fr 1fr;
219
+ gap: 15px;
220
+ margin-top: 20px;
221
+ }
222
+
223
+ .detail-item {
224
+ display: flex;
225
+ align-items: center;
226
+ }
227
+
228
+ .detail-icon {
229
+ width: 24px;
230
+ height: 24px;
231
+ margin-right: 10px;
232
+ color: var(--cyber-blue);
233
+ }
234
+
235
+ .detail-value {
236
+ font-size: 16px;
237
+ color: var(--cyber-light);
238
+ }
239
+
240
+ .aqi-container {
241
+ margin-top: 25px;
242
+ border-top: 1px solid rgba(0, 247, 255, 0.2);
243
+ padding-top: 15px;
244
+ display: flex;
245
+ align-items: center;
246
+ justify-content: space-between;
247
+ }
248
+
249
+ .aqi-location {
250
+ font-size: 14px;
251
+ color: var(--cyber-pink);
252
+ }
253
+
254
+ .aqi-indicator {
255
+ padding: 8px 15px;
256
+ border-radius: 100px;
257
+ font-size: 14px;
258
+ font-weight: 500;
259
+ display: inline-flex;
260
+ align-items: center;
261
+ gap: 8px;
262
+ }
263
+
264
+ .aqi-good {
265
+ background-color: rgba(0, 255, 42, 0.1);
266
+ color: #00ff2a;
267
+ border: 1px solid rgba(0, 255, 42, 0.3);
268
+ }
269
+
270
+ .aqi-moderate {
271
+ background-color: rgba(255, 204, 0, 0.1);
272
+ color: #ffcc00;
273
+ border: 1px solid rgba(255, 204, 0, 0.3);
274
+ }
275
+
276
+ .aqi-unhealthy {
277
+ background-color: rgba(255, 0, 0, 0.1);
278
+ color: #ff0000;
279
+ border: 1px solid rgba(255, 0, 0, 0.3);
280
+ }
281
+
282
+ .weather-animation {
283
+ height: 180px;
284
+ width: 100%;
285
+ position: relative;
286
+ overflow: hidden;
287
+ }
288
+
289
+ /* Sunny Animation */
290
+ .sunny-animation {
291
+ background: linear-gradient(to bottom, #001a33 0%, #003366 100%);
292
+ }
293
+
294
+ .sun {
295
+ position: absolute;
296
+ width: 70px;
297
+ height: 70px;
298
+ background: #ffcc00;
299
+ border-radius: 50%;
300
+ box-shadow: 0 0 50px 20px #ffcc00;
301
+ top: 30px;
302
+ left: 50%;
303
+ transform: translateX(-50%);
304
+ animation: sunPulse 4s infinite alternate;
305
+ filter: drop-shadow(0 0 10px #ffcc00);
306
+ }
307
+
308
+ @keyframes sunPulse {
309
+ 0% { box-shadow: 0 0 50px 20px #ffcc00; }
310
+ 100% { box-shadow: 0 0 70px 30px #ffcc00; }
311
+ }
312
+
313
+ /* Cloudy Animation */
314
+ .cloudy-animation {
315
+ background: linear-gradient(to bottom, #1a1a2e 0%, #2a2a4a 100%);
316
+ }
317
+
318
+ .cloud {
319
+ position: absolute;
320
+ background: rgba(224, 224, 255, 0.8);
321
+ border-radius: 50%;
322
+ filter: drop-shadow(0 0 5px rgba(0, 247, 255, 0.5));
323
+ }
324
+
325
+ .cloud1 {
326
+ width: 100px;
327
+ height: 40px;
328
+ top: 50px;
329
+ left: 20%;
330
+ animation: cloudMove 30s linear infinite;
331
+ }
332
+
333
+ .cloud2 {
334
+ width: 140px;
335
+ height: 55px;
336
+ top: 30px;
337
+ left: 50%;
338
+ animation: cloudMove 40s linear infinite reverse;
339
+ }
340
+
341
+ .cloud3 {
342
+ width: 80px;
343
+ height: 30px;
344
+ top: 70px;
345
+ left: 70%;
346
+ animation: cloudMove 35s linear infinite;
347
+ }
348
+
349
+ @keyframes cloudMove {
350
+ 0% { transform: translateX(-150px); }
351
+ 100% { transform: translateX(450px); }
352
+ }
353
+
354
+ /* Haze Animation */
355
+ .haze-animation {
356
+ background: linear-gradient(to bottom, #2a2a4a 0%, #3a3a5a 100%);
357
+ position: relative;
358
+ }
359
+
360
+ .haze-particle {
361
+ position: absolute;
362
+ background: rgba(255, 0, 247, 0.3);
363
+ border-radius: 50%;
364
+ animation: hazeFloat linear infinite;
365
+ filter: blur(1px);
366
+ }
367
+
368
+ @keyframes hazeFloat {
369
+ 0% { transform: translateY(0) translateX(0); opacity: 0; }
370
+ 50% { opacity: 0.7; }
371
+ 100% { transform: translateY(-150px) translateX(50px); opacity: 0; }
372
+ }
373
+
374
+ /* Rain Animation */
375
+ .rain-animation {
376
+ background: linear-gradient(to bottom, #1a1a2e 0%, #2a2a4a 100%);
377
+ }
378
+
379
+ .raindrop {
380
+ position: absolute;
381
+ background: var(--cyber-blue);
382
+ width: 2px;
383
+ height: 20px;
384
+ border-radius: 0 0 5px 5px;
385
+ animation: rainFall linear infinite;
386
+ filter: drop-shadow(0 0 5px var(--cyber-blue));
387
+ }
388
+
389
+ @keyframes rainFall {
390
+ 0% { transform: translateY(-50px); }
391
+ 100% { transform: translateY(230px); }
392
+ }
393
+
394
+ footer {
395
+ text-align: center;
396
+ margin-top: 80px;
397
+ color: var(--cyber-blue);
398
+ font-size: 14px;
399
+ position: relative;
400
+ z-index: 1;
401
+ }
402
+
403
+ .refresh-btn {
404
+ position: fixed;
405
+ bottom: 30px;
406
+ right: 30px;
407
+ width: 70px;
408
+ height: 70px;
409
+ background: linear-gradient(135deg, var(--cyber-blue), var(--cyber-purple));
410
+ color: var(--cyber-dark);
411
+ border: none;
412
+ border-radius: 50%;
413
+ display: flex;
414
+ align-items: center;
415
+ justify-content: center;
416
+ cursor: pointer;
417
+ transition: var(--transition);
418
+ box-shadow: 0 0 20px rgba(0, 247, 255, 0.5);
419
+ z-index: 10;
420
+ font-size: 24px;
421
+ font-weight: bold;
422
+ }
423
+
424
+ .refresh-btn:hover {
425
+ transform: scale(1.1) rotate(180deg);
426
+ box-shadow: 0 0 30px rgba(0, 247, 255, 0.8);
427
+ }
428
+
429
+ /* Cyberpunk glitch effect */
430
+ .glitch {
431
+ position: relative;
432
+ }
433
+
434
+ .glitch::before, .glitch::after {
435
+ content: attr(data-text);
436
+ position: absolute;
437
+ top: 0;
438
+ left: 0;
439
+ width: 100%;
440
+ height: 100%;
441
+ background: var(--cyber-dark);
442
+ }
443
+
444
+ .glitch::before {
445
+ left: 2px;
446
+ text-shadow: -2px 0 var(--cyber-pink);
447
+ clip: rect(44px, 450px, 56px, 0);
448
+ animation: glitch-anim 5s infinite linear alternate-reverse;
449
+ }
450
+
451
+ .glitch::after {
452
+ left: -2px;
453
+ text-shadow: -2px 0 var(--cyber-blue);
454
+ clip: rect(44px, 450px, 56px, 0);
455
+ animation: glitch-anim2 5s infinite linear alternate-reverse;
456
+ }
457
+
458
+ @keyframes glitch-anim {
459
+ 0% { clip: rect(31px, 9999px, 94px, 0); }
460
+ 10% { clip: rect(112px, 9999px, 76px, 0); }
461
+ 20% { clip: rect(85px, 9999px, 77px, 0); }
462
+ 30% { clip: rect(27px, 9999px, 97px, 0); }
463
+ 40% { clip: rect(64px, 9999px, 98px, 0); }
464
+ 50% { clip: rect(61px, 9999px, 85px, 0); }
465
+ 60% { clip: rect(99px, 9999px, 114px, 0); }
466
+ 70% { clip: rect(34px, 9999px, 115px, 0); }
467
+ 80% { clip: rect(98px, 9999px, 129px, 0); }
468
+ 90% { clip: rect(43px, 9999px, 96px, 0); }
469
+ 100% { clip: rect(82px, 9999px, 64px, 0); }
470
+ }
471
+
472
+ @keyframes glitch-anim2 {
473
+ 0% { clip: rect(65px, 9999px, 119px, 0); }
474
+ 10% { clip: rect(144px, 9999px, 41px, 0); }
475
+ 20% { clip: rect(138px, 9999px, 99px, 0); }
476
+ 30% { clip: rect(17px, 9999px, 54px, 0); }
477
+ 40% { clip: rect(94px, 9999px, 75px, 0); }
478
+ 50% { clip: rect(54px, 9999px, 60px, 0); }
479
+ 60% { clip: rect(108px, 9999px, 138px, 0); }
480
+ 70% { clip: rect(132px, 9999px, 74px, 0); }
481
+ 80% { clip: rect(22px, 9999px, 61px, 0); }
482
+ 90% { clip: rect(64px, 9999px, 44px, 0); }
483
+ 100% { clip: rect(10px, 9999px, 2px, 0); }
484
+ }
485
+
486
+ /* Floating cyberpunk elements */
487
+ .cyber-orb {
488
+ position: absolute;
489
+ border-radius: 50%;
490
+ filter: blur(40px);
491
+ opacity: 0.3;
492
+ z-index: 0;
493
+ }
494
+
495
+ .orb-1 {
496
+ width: 300px;
497
+ height: 300px;
498
+ background: var(--cyber-blue);
499
+ top: -150px;
500
+ right: -150px;
501
+ }
502
+
503
+ .orb-2 {
504
+ width: 400px;
505
+ height: 400px;
506
+ background: var(--cyber-pink);
507
+ bottom: -200px;
508
+ left: -200px;
509
+ }
510
+
511
+ @media (max-width: 768px) {
512
+ h1 {
513
+ font-size: 42px;
514
+ }
515
+
516
+ .weather-grid {
517
+ grid-template-columns: 1fr;
518
+ }
519
+
520
+ .temperature {
521
+ font-size: 56px;
522
+ }
523
+ }
524
+ </style>
525
+ </head>
526
+ <body>
527
+ <div class="cyber-orb orb-1"></div>
528
+ <div class="cyber-orb orb-2"></div>
529
+
530
+ <div class="container">
531
+ <header>
532
+ <h1 class="glitch" data-text="WEATHERSCOPE">WEATHERSCOPE</h1>
533
+ <p class="subtitle">REAL-TIME CYBER WEATHER DATA STREAM</p>
534
+ </header>
535
+
536
+ <div class="weather-grid">
537
+ <!-- Jaipur -->
538
+ <div class="weather-card">
539
+ <div class="weather-animation sunny-animation" id="jaipur-animation">
540
+ <div class="sun"></div>
541
+ </div>
542
+ <div class="weather-header">
543
+ <h2 class="location">JAIPUR, INDIA</h2>
544
+ <p class="date">Tuesday, June 6, 2023</p>
545
+ <div class="weather-main">
546
+ <div class="temperature">34°</div>
547
+ <img src="https://cdn.weatherbit.io/static/img/icons/c01d.png" alt="Clear sky" class="weather-icon">
548
+ <div class="weather-description">SUNNY</div>
549
+ </div>
550
+ <div class="weather-details">
551
+ <div class="detail-item">
552
+ <i class="fas fa-wind detail-icon"></i>
553
+ <span class="detail-value">12 km/h</span>
554
+ </div>
555
+ <div class="detail-item">
556
+ <i class="fas fa-tint detail-icon"></i>
557
+ <span class="detail-value">25%</span>
558
+ </div>
559
+ <div class="detail-item">
560
+ <i class="fas fa-sun detail-icon"></i>
561
+ <span class="detail-value">UV 8</span>
562
+ </div>
563
+ <div class="detail-item">
564
+ <i class="fas fa-eye detail-icon"></i>
565
+ <span class="detail-value">10 km</span>
566
+ </div>
567
+ </div>
568
+ <div class="aqi-container">
569
+ <div class="aqi-location">
570
+ <i class="fas fa-map-marker-alt"></i> AMER FORT STATION
571
+ </div>
572
+ <div class="aqi-indicator aqi-moderate">
573
+ <i class="fas fa-smog"></i> AQI: 78
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <!-- New Delhi -->
580
+ <div class="weather-card">
581
+ <div class="weather-animation haze-animation" id="delhi-animation">
582
+ <!-- Haze particles will be added by JS -->
583
+ </div>
584
+ <div class="weather-header">
585
+ <h2 class="location">NEW DELHI, INDIA</h2>
586
+ <p class="date">Tuesday, June 6, 2023</p>
587
+ <div class="weather-main">
588
+ <div class="temperature">38°</div>
589
+ <img src="https://cdn.weatherbit.io/static/img/icons/h01d.png" alt="Haze" class="weather-icon">
590
+ <div class="weather-description">HAZE</div>
591
+ </div>
592
+ <div class="weather-details">
593
+ <div class="detail-item">
594
+ <i class="fas fa-wind detail-icon"></i>
595
+ <span class="detail-value">8 km/h</span>
596
+ </div>
597
+ <div class="detail-item">
598
+ <i class="fas fa-tint detail-icon"></i>
599
+ <span class="detail-value">40%</span>
600
+ </div>
601
+ <div class="detail-item">
602
+ <i class="fas fa-sun detail-icon"></i>
603
+ <span class="detail-value">UV 9</span>
604
+ </div>
605
+ <div class="detail-item">
606
+ <i class="fas fa-eye detail-icon"></i>
607
+ <span class="detail-value">3 km</span>
608
+ </div>
609
+ </div>
610
+ <div class="aqi-container">
611
+ <div class="aqi-location">
612
+ <i class="fas fa-map-marker-alt"></i> CONNAUGHT PLACE STATION
613
+ </div>
614
+ <div class="aqi-indicator aqi-unhealthy">
615
+ <i class="fas fa-smog"></i> AQI: 156
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+
621
+ <!-- New York -->
622
+ <div class="weather-card">
623
+ <div class="weather-animation cloudy-animation" id="nyc-animation">
624
+ <div class="cloud cloud1"></div>
625
+ <div class="cloud cloud2"></div>
626
+ <div class="cloud cloud3"></div>
627
+ </div>
628
+ <div class="weather-header">
629
+ <h2 class="location">NEW YORK, USA</h2>
630
+ <p class="date">Tuesday, June 6, 2023</p>
631
+ <div class="weather-main">
632
+ <div class="temperature">22°</div>
633
+ <img src="https://cdn.weatherbit.io/static/img/icons/c03d.png" alt="Cloudy" class="weather-icon">
634
+ <div class="weather-description">CLOUDY</div>
635
+ </div>
636
+ <div class="weather-details">
637
+ <div class="detail-item">
638
+ <i class="fas fa-wind detail-icon"></i>
639
+ <span class="detail-value">18 km/h</span>
640
+ </div>
641
+ <div class="detail-item">
642
+ <i class="fas fa-tint detail-icon"></i>
643
+ <span class="detail-value">65%</span>
644
+ </div>
645
+ <div class="detail-item">
646
+ <i class="fas fa-sun detail-icon"></i>
647
+ <span class="detail-value">UV 4</span>
648
+ </div>
649
+ <div class="detail-item">
650
+ <i class="fas fa-eye detail-icon"></i>
651
+ <span class="detail-value">8 km</span>
652
+ </div>
653
+ </div>
654
+ <div class="aqi-container">
655
+ <div class="aqi-location">
656
+ <i class="fas fa-map-marker-alt"></i> MANHATTAN STATION
657
+ </div>
658
+ <div class="aqi-indicator aqi-good">
659
+ <i class="fas fa-smog"></i> AQI: 42
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <footer>
667
+ <p>© 2023 WEATHERSCOPE | CYBER WEATHER NETWORK v4.2</p>
668
+ </footer>
669
+
670
+ <button class="refresh-btn" id="refresh-btn">
671
+ <i class="fas fa-sync-alt"></i>
672
+ </button>
673
+ </div>
674
+
675
+ <script>
676
+ document.addEventListener('DOMContentLoaded', function() {
677
+ // Current date formatting
678
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
679
+ const today = new Date();
680
+ const dateString = today.toLocaleDateString('en-US', options);
681
+
682
+ // Update all date elements
683
+ document.querySelectorAll('.date').forEach(el => {
684
+ el.textContent = dateString;
685
+ });
686
+
687
+ // Create haze particles for Delhi
688
+ const delhiAnimation = document.getElementById('delhi-animation');
689
+ for (let i = 0; i < 30; i++) {
690
+ const particle = document.createElement('div');
691
+ particle.classList.add('haze-particle');
692
+
693
+ // Random size between 5px and 20px
694
+ const size = Math.random() * 15 + 5;
695
+ particle.style.width = `${size}px`;
696
+ particle.style.height = `${size}px`;
697
+
698
+ // Random position
699
+ particle.style.left = `${Math.random() * 100}%`;
700
+ particle.style.top = `${Math.random() * 100}%`;
701
+
702
+ // Random animation duration
703
+ const duration = Math.random() * 20 + 10;
704
+ particle.style.animationDuration = `${duration}s`;
705
+
706
+ // Random delay
707
+ particle.style.animationDelay = `${Math.random() * 10}s`;
708
+
709
+ // Random opacity
710
+ particle.style.opacity = Math.random() * 0.5 + 0.3;
711
+
712
+ delhiAnimation.appendChild(particle);
713
+ }
714
+
715
+ // Create rain for London (example - not in our cities)
716
+ function createRain(container, count) {
717
+ for (let i = 0; i < count; i++) {
718
+ const drop = document.createElement('div');
719
+ drop.classList.add('raindrop');
720
+
721
+ // Random position
722
+ drop.style.left = `${Math.random() * 100}%`;
723
+
724
+ // Random animation duration
725
+ const duration = Math.random() * 0.5 + 0.5;
726
+ drop.style.animationDuration = `${duration}s`;
727
+
728
+ // Random delay
729
+ drop.style.animationDelay = `${Math.random() * 2}s`;
730
+
731
+ container.appendChild(drop);
732
+ }
733
+ }
734
+
735
+ // Refresh button functionality
736
+ const refreshBtn = document.getElementById('refresh-btn');
737
+ refreshBtn.addEventListener('click', function() {
738
+ // Add rotation animation
739
+ this.classList.add('refreshing');
740
+
741
+ // Simulate data refresh
742
+ setTimeout(() => {
743
+ // In a real app, we would fetch new data here
744
+
745
+ // Remove rotation animation
746
+ this.classList.remove('refreshing');
747
+
748
+ // Show notification
749
+ showNotification('DATA STREAM UPDATED');
750
+ }, 1500);
751
+ });
752
+
753
+ // Show cyberpunk notification
754
+ function showNotification(message) {
755
+ const notification = document.createElement('div');
756
+ notification.textContent = message;
757
+ notification.style.position = 'fixed';
758
+ notification.style.bottom = '20px';
759
+ notification.style.left = '50%';
760
+ notification.style.transform = 'translateX(-50%)';
761
+ notification.style.backgroundColor = 'var(--cyber-dark)';
762
+ notification.style.color = 'var(--cyber-blue)';
763
+ notification.style.padding = '12px 30px';
764
+ notification.style.borderRadius = '4px';
765
+ notification.style.boxShadow = '0 0 20px rgba(0, 247, 255, 0.5)';
766
+ notification.style.zIndex = '1000';
767
+ notification.style.animation = 'fadeInOut 3s forwards';
768
+ notification.style.border = '1px solid var(--cyber-blue)';
769
+ notification.style.fontFamily = "'Orbitron', sans-serif";
770
+ notification.style.fontWeight = 'bold';
771
+ notification.style.letterSpacing = '1px';
772
+ notification.style.textTransform = 'uppercase';
773
+
774
+ document.body.appendChild(notification);
775
+
776
+ // Remove after animation
777
+ setTimeout(() => {
778
+ notification.remove();
779
+ }, 3000);
780
+ }
781
+
782
+ // Add CSS for notification animation
783
+ const style = document.createElement('style');
784
+ style.textContent = `
785
+ @keyframes fadeInOut {
786
+ 0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
787
+ 10% { opacity: 1; transform: translateX(-50%) translateY(0); }
788
+ 90% { opacity: 1; transform: translateX(-50%) translateY(0); }
789
+ 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
790
+ }
791
+
792
+ .refreshing {
793
+ animation: rotate 1.5s linear infinite;
794
+ }
795
+
796
+ @keyframes rotate {
797
+ 0% { transform: rotate(0deg); }
798
+ 100% { transform: rotate(360deg); }
799
+ }
800
+ `;
801
+ document.head.appendChild(style);
802
+
803
+ // Add cyberpunk glitch effect randomly
804
+ setInterval(() => {
805
+ const cards = document.querySelectorAll('.weather-card');
806
+ const randomCard = cards[Math.floor(Math.random() * cards.length)];
807
+
808
+ randomCard.classList.add('glitch-effect');
809
+ setTimeout(() => {
810
+ randomCard.classList.remove('glitch-effect');
811
+ }, 300);
812
+ }, 5000);
813
+ });
814
+ </script>
815
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
816
+ </html>