Hugging Face's logo

Spaces:
rustamsamandarov
/
weather-in-tashkent
Running

App Files Community
rustamsamandarov commited on
Commit
0d9b3bd
·
verified ·
1 Parent(s): 1b3891a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +279 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Weather In Tashkent
3
- emoji: 🐨
4
- colorFrom: indigo
5
- colorTo: indigo
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: weather-in-tashkent
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
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,279 @@
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>Tashkent 30-Day Weather Dashboard</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
+ .weather-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
13
+ }
14
+ .scroll-container {
15
+ scrollbar-width: thin;
16
+ scrollbar-color: #3b82f6 #f1f1f1;
17
+ }
18
+ .scroll-container::-webkit-scrollbar {
19
+ height: 8px;
20
+ }
21
+ .scroll-container::-webkit-scrollbar-track {
22
+ background: #f1f1f1;
23
+ border-radius: 10px;
24
+ }
25
+ .scroll-container::-webkit-scrollbar-thumb {
26
+ background-color: #3b82f6;
27
+ border-radius: 10px;
28
+ }
29
+ .animate-pulse {
30
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
31
+ }
32
+ @keyframes pulse {
33
+ 0%, 100% {
34
+ opacity: 1;
35
+ }
36
+ 50% {
37
+ opacity: 0.5;
38
+ }
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
43
+ <div class="container mx-auto px-4 py-8">
44
+ <!-- Header -->
45
+ <header class="mb-8 text-center">
46
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Tashkent Weather Dashboard</h1>
47
+ <p class="text-lg text-gray-600">30-Day Weather Forecast</p>
48
+ <div class="flex justify-center items-center mt-4">
49
+ <div class="relative w-full max-w-md">
50
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
51
+ <i class="fas fa-map-marker-alt text-gray-400"></i>
52
+ </div>
53
+ <input type="text" id="location" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" value="Tashkent, Uzbekistan" readonly>
54
+ </div>
55
+ </div>
56
+ </header>
57
+
58
+ <!-- Current Weather -->
59
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
60
+ <div class="flex flex-col md:flex-row justify-between items-center">
61
+ <div class="flex items-center mb-4 md:mb-0">
62
+ <div class="text-5xl mr-4">
63
+ <i class="fas fa-sun text-yellow-400"></i>
64
+ </div>
65
+ <div>
66
+ <h2 class="text-2xl font-semibold text-gray-800">Today</h2>
67
+ <p class="text-gray-600" id="current-date">Loading date...</p>
68
+ </div>
69
+ </div>
70
+ <div class="text-center md:text-right">
71
+ <div class="text-4xl font-bold text-gray-800 mb-1" id="current-temp">--°C</div>
72
+ <div class="text-gray-600" id="current-condition">Loading...</div>
73
+ <div class="flex justify-center md:justify-end space-x-4 mt-2">
74
+ <div class="flex items-center">
75
+ <i class="fas fa-temperature-high text-red-400 mr-1"></i>
76
+ <span id="current-high">--°</span>
77
+ </div>
78
+ <div class="flex items-center">
79
+ <i class="fas fa-temperature-low text-blue-400 mr-1"></i>
80
+ <span id="current-low">--°</span>
81
+ </div>
82
+ <div class="flex items-center">
83
+ <i class="fas fa-wind text-gray-400 mr-1"></i>
84
+ <span id="current-wind">-- km/h</span>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Weather Summary -->
92
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
93
+ <div class="bg-white rounded-xl shadow p-4 flex items-center">
94
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
95
+ <i class="fas fa-umbrella text-blue-500 text-xl"></i>
96
+ </div>
97
+ <div>
98
+ <p class="text-gray-500 text-sm">Precipitation</p>
99
+ <p class="font-semibold text-gray-800" id="precipitation">--%</p>
100
+ </div>
101
+ </div>
102
+ <div class="bg-white rounded-xl shadow p-4 flex items-center">
103
+ <div class="bg-green-100 p-3 rounded-full mr-4">
104
+ <i class="fas fa-water text-green-500 text-xl"></i>
105
+ </div>
106
+ <div>
107
+ <p class="text-gray-500 text-sm">Humidity</p>
108
+ <p class="font-semibold text-gray-800" id="humidity">--%</p>
109
+ </div>
110
+ </div>
111
+ <div class="bg-white rounded-xl shadow p-4 flex items-center">
112
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
113
+ <i class="fas fa-wind text-purple-500 text-xl"></i>
114
+ </div>
115
+ <div>
116
+ <p class="text-gray-500 text-sm">Wind Speed</p>
117
+ <p class="font-semibold text-gray-800" id="wind-speed">-- km/h</p>
118
+ </div>
119
+ </div>
120
+ <div class="bg-white rounded-xl shadow p-4 flex items-center">
121
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
122
+ <i class="fas fa-sun text-yellow-500 text-xl"></i>
123
+ </div>
124
+ <div>
125
+ <p class="text-gray-500 text-sm">UV Index</p>
126
+ <p class="font-semibold text-gray-800" id="uv-index">--</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- 30-Day Forecast -->
132
+ <div class="bg-white rounded-xl shadow-lg p-6">
133
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">30-Day Forecast</h2>
134
+
135
+ <div class="relative">
136
+ <div class="absolute right-0 top-0 flex space-x-2">
137
+ <button id="scroll-left" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
138
+ <i class="fas fa-chevron-left"></i>
139
+ </button>
140
+ <button id="scroll-right" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
141
+ <i class="fas fa-chevron-right"></i>
142
+ </button>
143
+ </div>
144
+
145
+ <div class="scroll-container overflow-x-auto pb-4" id="forecast-container">
146
+ <div class="flex space-x-4" id="forecast-days">
147
+ <!-- Days will be loaded here -->
148
+ <div class="animate-pulse flex space-x-4">
149
+ <div class="w-24 h-40 bg-gray-200 rounded-xl"></div>
150
+ <div class="w-24 h-40 bg-gray-200 rounded-xl"></div>
151
+ <div class="w-24 h-40 bg-gray-200 rounded-xl"></div>
152
+ <div class="w-24 h-40 bg-gray-200 rounded-xl"></div>
153
+ <div class="w-24 h-40 bg-gray-200 rounded-xl"></div>
154
+ <div class="w-24 h-40 bg-gray-200 rounded-xl"></div>
155
+ <div class="w-24 h-40 bg-gray-200 rounded-xl"></div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Weather Chart -->
163
+ <div class="bg-white rounded-xl shadow-lg p-6 mt-8">
164
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Temperature Trends</h2>
165
+ <div class="h-64" id="weather-chart">
166
+ <div class="animate-pulse h-full bg-gray-200 rounded"></div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Footer -->
171
+ <footer class="mt-12 text-center text-gray-500 text-sm">
172
+ <p>Data provided by simulated weather API | Last updated: <span id="last-updated">--</span></p>
173
+ <p class="mt-2">© 2023 Tashkent Weather Dashboard</p>
174
+ </footer>
175
+ </div>
176
+
177
+ <script>
178
+ document.addEventListener('DOMContentLoaded', function() {
179
+ // Set current date
180
+ const now = new Date();
181
+ document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', {
182
+ weekday: 'long',
183
+ month: 'long',
184
+ day: 'numeric'
185
+ });
186
+ document.getElementById('last-updated').textContent = now.toLocaleString();
187
+
188
+ // Simulate weather data (in a real app, this would come from an API)
189
+ setTimeout(() => {
190
+ // Current weather
191
+ document.getElementById('current-temp').textContent = '28°C';
192
+ document.getElementById('current-condition').textContent = 'Sunny';
193
+ document.getElementById('current-high').textContent = '32°';
194
+ document.getElementById('current-low').textContent = '20°';
195
+ document.getElementById('current-wind').textContent = '12 km/h';
196
+
197
+ // Summary
198
+ document.getElementById('precipitation').textContent = '5%';
199
+ document.getElementById('humidity').textContent = '45%';
200
+ document.getElementById('wind-speed').textContent = '12 km/h';
201
+ document.getElementById('uv-index').textContent = '7 (High)';
202
+
203
+ // Generate 30-day forecast
204
+ const forecastContainer = document.getElementById('forecast-days');
205
+ forecastContainer.innerHTML = '';
206
+
207
+ const weatherIcons = [
208
+ 'fa-sun', 'fa-cloud-sun', 'fa-cloud', 'fa-cloud-showers-heavy',
209
+ 'fa-cloud-rain', 'fa-bolt', 'fa-smog', 'fa-wind'
210
+ ];
211
+ const weatherColors = [
212
+ 'text-yellow-400', 'text-yellow-300', 'text-gray-400', 'text-blue-400',
213
+ 'text-blue-300', 'text-purple-400', 'text-gray-500', 'text-gray-300'
214
+ ];
215
+
216
+ for (let i = 0; i < 30; i++) {
217
+ const date = new Date();
218
+ date.setDate(now.getDate() + i);
219
+
220
+ const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
221
+ const dayNum = date.getDate();
222
+
223
+ const randomTempHigh = Math.floor(Math.random() * 10) + 25;
224
+ const randomTempLow = Math.floor(Math.random() * 5) + 15;
225
+ const randomIconIndex = Math.floor(Math.random() * weatherIcons.length);
226
+
227
+ const dayElement = document.createElement('div');
228
+ dayElement.className = 'weather-card flex-shrink-0 w-24 bg-white rounded-xl shadow p-4 transition-all duration-300 cursor-pointer';
229
+ dayElement.innerHTML = `
230
+ <div class="text-center">
231
+ <p class="font-semibold text-gray-800">${dayName}</p>
232
+ <p class="text-sm text-gray-500 mb-2">${dayNum}</p>
233
+ <div class="text-3xl mb-2 ${weatherColors[randomIconIndex]}">
234
+ <i class="fas ${weatherIcons[randomIconIndex]}"></i>
235
+ </div>
236
+ <div class="flex justify-center space-x-2">
237
+ <span class="font-medium text-red-400">${randomTempHigh}°</span>
238
+ <span class="text-gray-400">${randomTempLow}°</span>
239
+ </div>
240
+ </div>
241
+ `;
242
+
243
+ forecastContainer.appendChild(dayElement);
244
+ }
245
+
246
+ // Generate chart (simplified)
247
+ const chartContainer = document.getElementById('weather-chart');
248
+ chartContainer.innerHTML = `
249
+ <div class="h-full flex items-end space-x-1">
250
+ ${Array.from({length: 30}, (_, i) => {
251
+ const height = Math.floor(Math.random() * 40) + 30;
252
+ const color = i === 0 ? 'bg-blue-500' : 'bg-blue-300';
253
+ return `<div class="${color} w-full rounded-t" style="height: ${height}%"></div>`;
254
+ }).join('')}
255
+ </div>
256
+ <div class="flex justify-between text-xs text-gray-500 mt-2">
257
+ <span>Today</span>
258
+ <span>+30 days</span>
259
+ </div>
260
+ `;
261
+
262
+ }, 1500); // Simulate API delay
263
+
264
+ // Scroll buttons functionality
265
+ const container = document.getElementById('forecast-container');
266
+ const scrollLeftBtn = document.getElementById('scroll-left');
267
+ const scrollRightBtn = document.getElementById('scroll-right');
268
+
269
+ scrollLeftBtn.addEventListener('click', () => {
270
+ container.scrollBy({ left: -200, behavior: 'smooth' });
271
+ });
272
+
273
+ scrollRightBtn.addEventListener('click', () => {
274
+ container.scrollBy({ left: 200, behavior: 'smooth' });
275
+ });
276
+ });
277
+ </script>
278
+ <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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rustamsamandarov/weather-in-tashkent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
279
+ </html>