Hugging Face's logo

Spaces:
sudo-saidso
/
weather
Running

App Files Community
sudo-saidso commited on
Commit
a8ee31b
·
verified ·
1 Parent(s): 9c1e952

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +116 -18
index.html CHANGED
@@ -1,19 +1,117 @@
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>Weather Forecast - Colorado Springs</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ body {
11
+ font-family: 'Poppins', sans-serif;
12
+ background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
13
+ height: 100vh;
14
+ overflow-x: hidden;
15
+ }
16
+ .weather-card {
17
+ background: rgba(255,255,255,0.1);
18
+ backdrop-filter: blur(12px);
19
+ border-radius: 20px;
20
+ box-shadow: 0 8px 32px 0 rgba(0,0,0,0.4);
21
+ }
22
+ .scroll-container {
23
+ scrollbar-width: none;
24
+ overflow-x: auto;
25
+ }
26
+ .scroll-container::-webkit-scrollbar { display: none; }
27
+ .temperature-gradient { background: linear-gradient(90deg, #FF9A9E 0%, #FAD0C4 100%); }
28
+ .uv-gradient { background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%); }
29
+ .wind-gradient { background: linear-gradient(90deg, #A1C4FD 0%, #C2E9FB 100%); }
30
+ .humidity-gradient { background: linear-gradient(90deg, #84FAB0 0%, #8FD3F4 100%); }
31
+ </style>
32
+ </head>
33
+ <body class="text-white relative max-w-md mx-auto" style="width: 390px; height: 844px;">
34
+
35
+ <div class="h-full overflow-hidden relative px-6 pt-12">
36
+
37
+ <!-- Header -->
38
+ <div class="flex justify-between items-center">
39
+ <button class="p-2 rounded-full bg-white bg-opacity-20"><i class="fas fa-search text-lg"></i></button>
40
+ <div class="text-center">
41
+ <h1 id="city" class="text-2xl font-semibold">Colorado Springs</h1>
42
+ <p id="weather-desc" class="text-sm opacity-80">Loading...</p>
43
+ </div>
44
+ <button class="p-2 rounded-full bg-white bg-opacity-20"><i class="fas fa-cog text-lg"></i></button>
45
+ </div>
46
+
47
+ <div class="mt-6 flex justify-center items-end">
48
+ <span id="temp" class="text-7xl font-light">--</span>
49
+ <span class="text-4xl mb-2">°F</span>
50
+ </div>
51
+
52
+ <div class="flex justify-between mt-2 text-sm">
53
+ <span id="high-low">H: -- L: --</span>
54
+ <span id="feels-like">Feels like --</span>
55
+ </div>
56
+
57
+ <!-- Weather Details -->
58
+ <div class="weather-card p-4 mt-6">
59
+ <h3 class="font-medium mb-3">Weather Details</h3>
60
+ <div class="grid grid-cols-2 gap-4">
61
+ <div class="p-3 rounded-xl temperature-gradient">
62
+ <div class="flex items-center"><i class="fas fa-temperature-high mr-2"></i><span>Temperature</span></div>
63
+ <div id="temp-detail" class="mt-2 text-xl font-medium">--°F</div>
64
+ </div>
65
+ <div class="p-3 rounded-xl uv-gradient">
66
+ <div class="flex items-center"><i class="fas fa-sun mr-2"></i><span>UV Index</span></div>
67
+ <div id="uv" class="mt-2 text-xl font-medium">--</div>
68
+ </div>
69
+ <div class="p-3 rounded-xl wind-gradient">
70
+ <div class="flex items-center"><i class="fas fa-wind mr-2"></i><span>Wind</span></div>
71
+ <div id="wind" class="mt-2 text-xl font-medium">-- mph</div>
72
+ </div>
73
+ <div class="p-3 rounded-xl humidity-gradient">
74
+ <div class="flex items-center"><i class="fas fa-tint mr-2"></i><span>Humidity</span></div>
75
+ <div id="humidity" class="mt-2 text-xl font-medium">--%</div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <script>
82
+
83
+ const apiKey = "2bdad522ac3bb9f3eefa5566d0f514fa";
84
+ const city = "Colorado Springs,US";
85
+
86
+ function cToF(c) { return Math.round(c * 9/5 + 32); }
87
+
88
+ async function getWeather() {
89
+ const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`);
90
+ const data = await response.json();
91
+
92
+ const tempF = cToF(data.main.temp);
93
+ const tempMaxF = cToF(data.main.temp_max);
94
+ const tempMinF = cToF(data.main.temp_min);
95
+ const feelsF = cToF(data.main.feels_like);
96
+
97
+ document.getElementById("temp").textContent = tempF;
98
+ document.getElementById("temp-detail").textContent = tempF + "°F";
99
+ document.getElementById("weather-desc").textContent = data.weather[0].description;
100
+ document.getElementById("high-low").textContent = `H: ${tempMaxF}° L: ${tempMinF}°`;
101
+ document.getElementById("feels-like").textContent = `Feels like ${feelsF}°`;
102
+ document.getElementById("humidity").textContent = data.main.humidity + "%";
103
+ document.getElementById("wind").textContent = (data.wind.speed * 2.237).toFixed(1) + " mph"; // m/s to mph
104
+
105
+ // UV Index
106
+ const uvRes = await fetch(`https://api.openweathermap.org/data/2.5/uvi?lat=${data.coord.lat}&lon=${data.coord.lon}&appid=${apiKey}`);
107
+ const uvData = await uvRes.json();
108
+ document.getElementById("uv").textContent = uvData.value;
109
+ }
110
+
111
+ getWeather();
112
+ </script>
113
+ </body>
114
  </html>
115
+
116
+
117
+