Hugging Face's logo

Spaces:
RedSparkie
/
qu-ropa-llevar
Running

App Files Community
RedSparkie commited on
Commit
2e9f7fe
路
verified 路
1 Parent(s): a16cc83

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +599 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Qu Ropa Llevar
3
- emoji: 馃搱
4
  colorFrom: blue
5
  colorTo: gray
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: qu-ropa-llevar
3
+ emoji: 馃惓
4
  colorFrom: blue
5
  colorTo: gray
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,599 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WeatherWardrobe - Asesor de Vestimenta Meteorol贸gico</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 {
11
+ backdrop-filter: blur(10px);
12
+ background: rgba(255, 255, 255, 0.2);
13
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
14
+ border-radius: 10px;
15
+ border: 1px solid rgba(255, 255, 255, 0.18);
16
+ }
17
+
18
+ .sunny-gradient {
19
+ background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
20
+ }
21
+
22
+ .rainy-gradient {
23
+ background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
24
+ }
25
+
26
+ .cloudy-gradient {
27
+ background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
28
+ }
29
+
30
+ .night-gradient {
31
+ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
32
+ }
33
+
34
+ .transition-all {
35
+ transition: all 0.3s ease;
36
+ }
37
+
38
+ .clothing-icon {
39
+ font-size: 2rem;
40
+ margin-bottom: 0.5rem;
41
+ }
42
+
43
+ .hourly-forecast {
44
+ scrollbar-width: thin;
45
+ scrollbar-color: rgba(255,255,255,0.5) transparent;
46
+ }
47
+
48
+ .hourly-forecast::-webkit-scrollbar {
49
+ height: 6px;
50
+ }
51
+
52
+ .hourly-forecast::-webkit-scrollbar-track {
53
+ background: transparent;
54
+ }
55
+
56
+ .hourly-forecast::-webkit-scrollbar-thumb {
57
+ background-color: rgba(255,255,255,0.5);
58
+ border-radius: 20px;
59
+ }
60
+
61
+ @keyframes fadeIn {
62
+ from { opacity: 0; transform: translateY(20px); }
63
+ to { opacity: 1; transform: translateY(0); }
64
+ }
65
+
66
+ .animate-fadeIn {
67
+ animation: fadeIn 0.5s ease-out forwards;
68
+ }
69
+
70
+ .delay-100 { animation-delay: 0.1s; }
71
+ .delay-200 { animation-delay: 0.2s; }
72
+ .delay-300 { animation-delay: 0.3s; }
73
+ .delay-400 { animation-delay: 0.4s; }
74
+ </style>
75
+ </head>
76
+ <body class="min-h-screen font-sans bg-gray-100">
77
+ <div class="min-h-screen flex flex-col">
78
+ <!-- Header -->
79
+ <header class="bg-blue-600 text-white shadow-lg">
80
+ <div class="container mx-auto px-4 py-6">
81
+ <div class="flex flex-col md:flex-row justify-between items-center">
82
+ <div class="flex items-center mb-4 md:mb-0">
83
+ <i class="fas fa-cloud-sun text-3xl mr-3"></i>
84
+ <h1 class="text-2xl font-bold">WeatherWardrobe</h1>
85
+ </div>
86
+ <div class="relative w-full md:w-1/3">
87
+ <input
88
+ type="text"
89
+ id="cityInput"
90
+ placeholder="Ingresa una ciudad..."
91
+ class="w-full px-4 py-2 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300"
92
+ >
93
+ <button
94
+ id="searchBtn"
95
+ class="absolute right-0 top-0 h-full px-4 text-blue-600 hover:text-blue-800 focus:outline-none"
96
+ >
97
+ <i class="fas fa-search"></i>
98
+ </button>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </header>
103
+
104
+ <!-- Main Content -->
105
+ <main class="flex-grow container mx-auto px-4 py-8">
106
+ <!-- Loading State -->
107
+ <div id="loading" class="hidden text-center py-12">
108
+ <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
109
+ <p class="text-gray-600">Buscando informaci贸n meteorol贸gica...</p>
110
+ </div>
111
+
112
+ <!-- Error State -->
113
+ <div id="error" class="hidden text-center py-12">
114
+ <i class="fas fa-exclamation-triangle text-4xl text-red-500 mb-4"></i>
115
+ <p class="text-gray-600">No se pudo obtener la informaci贸n. Intenta con otra ciudad.</p>
116
+ </div>
117
+
118
+ <!-- Weather Display -->
119
+ <div id="weatherDisplay" class="hidden">
120
+ <!-- Current Weather -->
121
+ <div class="weather-card p-6 mb-8 text-white sunny-gradient rounded-xl animate-fadeIn">
122
+ <div class="flex flex-col md:flex-row justify-between items-center">
123
+ <div class="mb-4 md:mb-0">
124
+ <h2 class="text-2xl font-bold" id="currentCity">Ciudad</h2>
125
+ <p class="text-lg" id="currentDate">Fecha</p>
126
+ <p class="text-5xl font-bold my-2" id="currentTemp">0掳C</p>
127
+ <p class="text-xl" id="currentCondition">Condici贸n</p>
128
+ </div>
129
+ <div class="text-center">
130
+ <i class="fas fa-sun text-6xl mb-2"></i>
131
+ <div class="grid grid-cols-3 gap-4 mt-4">
132
+ <div>
133
+ <p class="text-sm">HUMEDAD</p>
134
+ <p class="text-xl font-semibold" id="currentHumidity">0%</p>
135
+ </div>
136
+ <div>
137
+ <p class="text-sm">VIENTO</p>
138
+ <p class="text-xl font-semibold" id="currentWind">0 km/h</p>
139
+ </div>
140
+ <div>
141
+ <p class="text-sm">UV</p>
142
+ <p class="text-xl font-semibold" id="currentUV">0</p>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Hourly Forecast -->
150
+ <div class="mb-8 animate-fadeIn delay-100">
151
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Pron贸stico por horas</h3>
152
+ <div class="hourly-forecast flex overflow-x-auto pb-4 gap-4">
153
+ <!-- Hourly items will be inserted here by JS -->
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Clothing Recommendations -->
158
+ <div class="animate-fadeIn delay-200">
159
+ <h3 class="text-xl font-semibold mb-4 text-gray-700">Recomendaciones de vestimenta</h3>
160
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
161
+ <!-- Morning -->
162
+ <div class="weather-card bg-white p-6 rounded-lg shadow-md">
163
+ <div class="flex items-center mb-4">
164
+ <i class="fas fa-sun text-yellow-500 text-2xl mr-3"></i>
165
+ <h4 class="text-lg font-semibold text-gray-800">Ma帽ana</h4>
166
+ </div>
167
+ <div class="flex flex-wrap gap-4 justify-center" id="morningClothing">
168
+ <!-- Clothing items will be inserted here by JS -->
169
+ </div>
170
+ <p class="mt-4 text-gray-600 text-sm italic" id="morningAdvice">Cargando recomendaci贸n...</p>
171
+ </div>
172
+
173
+ <!-- Afternoon -->
174
+ <div class="weather-card bg-white p-6 rounded-lg shadow-md">
175
+ <div class="flex items-center mb-4">
176
+ <i class="fas fa-sun text-orange-500 text-2xl mr-3"></i>
177
+ <h4 class="text-lg font-semibold text-gray-800">Tarde</h4>
178
+ </div>
179
+ <div class="flex flex-wrap gap-4 justify-center" id="afternoonClothing">
180
+ <!-- Clothing items will be inserted here by JS -->
181
+ </div>
182
+ <p class="mt-4 text-gray-600 text-sm italic" id="afternoonAdvice">Cargando recomendaci贸n...</p>
183
+ </div>
184
+
185
+ <!-- Night -->
186
+ <div class="weather-card bg-white p-6 rounded-lg shadow-md">
187
+ <div class="flex items-center mb-4">
188
+ <i class="fas fa-moon text-indigo-500 text-2xl mr-3"></i>
189
+ <h4 class="text-lg font-semibold text-gray-800">Noche</h4>
190
+ </div>
191
+ <div class="flex flex-wrap gap-4 justify-center" id="nightClothing">
192
+ <!-- Clothing items will be inserted here by JS -->
193
+ </div>
194
+ <p class="mt-4 text-gray-600 text-sm italic" id="nightAdvice">Cargando recomendaci贸n...</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Additional Tips -->
200
+ <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 animate-fadeIn delay-300">
201
+ <div class="weather-card bg-white p-6 rounded-lg shadow-md">
202
+ <h4 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
203
+ <i class="fas fa-umbrella text-blue-500 mr-3"></i> Consejos para la lluvia
204
+ </h4>
205
+ <ul class="list-disc pl-5 text-gray-600 space-y-2" id="rainTips">
206
+ <!-- Tips will be inserted here by JS -->
207
+ </ul>
208
+ </div>
209
+ <div class="weather-card bg-white p-6 rounded-lg shadow-md">
210
+ <h4 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
211
+ <i class="fas fa-temperature-high text-red-500 mr-3"></i> Consejos para el calor
212
+ </h4>
213
+ <ul class="list-disc pl-5 text-gray-600 space-y-2" id="heatTips">
214
+ <!-- Tips will be inserted here by JS -->
215
+ </ul>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Initial State -->
221
+ <div id="initialState" class="text-center py-12">
222
+ <i class="fas fa-cloud-sun text-5xl text-blue-400 mb-6"></i>
223
+ <h2 class="text-2xl font-semibold text-gray-700 mb-2">Consulta el clima y recibe recomendaciones de vestimenta</h2>
224
+ <p class="text-gray-500 mb-6">Ingresa una ciudad en el buscador para conocer el pron贸stico y qu茅 ropa usar seg煤n las condiciones clim谩ticas.</p>
225
+ <div class="max-w-md mx-auto">
226
+ <div class="relative">
227
+ <input
228
+ type="text"
229
+ placeholder="Ej: Madrid, Buenos Aires, Nueva York"
230
+ class="w-full px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300"
231
+ id="initialCityInput"
232
+ >
233
+ <button
234
+ class="absolute right-0 top-0 h-full px-6 bg-blue-500 text-white rounded-r-full hover:bg-blue-600 transition-all"
235
+ id="initialSearchBtn"
236
+ >
237
+ Buscar
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </main>
243
+
244
+ <!-- Footer -->
245
+ <footer class="bg-gray-800 text-white py-6">
246
+ <div class="container mx-auto px-4 text-center">
247
+ <p>漏 2023 WeatherWardrobe - Asesor de vestimenta seg煤n el clima</p>
248
+ <p class="text-gray-400 text-sm mt-2">Datos meteorol贸gicos simulados para prop贸sitos demostrativos</p>
249
+ </div>
250
+ </footer>
251
+ </div>
252
+
253
+ <script>
254
+ document.addEventListener('DOMContentLoaded', function() {
255
+ // Elements
256
+ const cityInput = document.getElementById('cityInput');
257
+ const searchBtn = document.getElementById('searchBtn');
258
+ const initialCityInput = document.getElementById('initialCityInput');
259
+ const initialSearchBtn = document.getElementById('initialSearchBtn');
260
+ const loading = document.getElementById('loading');
261
+ const error = document.getElementById('error');
262
+ const weatherDisplay = document.getElementById('weatherDisplay');
263
+ const initialState = document.getElementById('initialState');
264
+
265
+ // Event Listeners
266
+ searchBtn.addEventListener('click', fetchWeather);
267
+ initialSearchBtn.addEventListener('click', () => {
268
+ if(initialCityInput.value) {
269
+ cityInput.value = initialCityInput.value;
270
+ fetchWeather();
271
+ }
272
+ });
273
+
274
+ cityInput.addEventListener('keypress', (e) => {
275
+ if(e.key === 'Enter') fetchWeather();
276
+ });
277
+
278
+ initialCityInput.addEventListener('keypress', (e) => {
279
+ if(e.key === 'Enter' && initialCityInput.value) {
280
+ cityInput.value = initialCityInput.value;
281
+ fetchWeather();
282
+ }
283
+ });
284
+
285
+ // Mock weather data (since we're not using a real API)
286
+ function getMockWeatherData(city) {
287
+ // Base data
288
+ const baseTemp = Math.floor(Math.random() * 30) + 10; // 10-40掳C
289
+ const isRaining = Math.random() > 0.7;
290
+ const isSunny = !isRaining && Math.random() > 0.5;
291
+ const isCloudy = !isRaining && !isSunny;
292
+
293
+ // Current weather
294
+ const currentWeather = {
295
+ city: city,
296
+ date: new Date().toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric', month: 'long' }),
297
+ temp: baseTemp,
298
+ condition: isRaining ? 'Lluvioso' : (isSunny ? 'Soleado' : 'Nublado'),
299
+ humidity: Math.floor(Math.random() * 50) + 30, // 30-80%
300
+ wind: Math.floor(Math.random() * 20) + 5, // 5-25 km/h
301
+ uv: Math.floor(Math.random() * 8) + 1, // 1-8
302
+ icon: isRaining ? 'cloud-rain' : (isSunny ? 'sun' : 'cloud')
303
+ };
304
+
305
+ // Hourly forecast (next 12 hours)
306
+ const hourlyForecast = [];
307
+ const now = new Date();
308
+
309
+ for(let i = 0; i < 12; i++) {
310
+ const hour = new Date(now.getTime() + i * 3600000);
311
+ const hourTemp = baseTemp + (Math.random() * 6 - 3); // 卤3掳 variation
312
+ const hourRain = isRaining ? Math.random() * 30 : Math.random() * 10;
313
+ const hourIcon = hourRain > 20 ? 'cloud-rain' : (isSunny ? 'sun' : 'cloud');
314
+
315
+ hourlyForecast.push({
316
+ time: hour.getHours() + ':00',
317
+ temp: Math.round(hourTemp),
318
+ rain: Math.round(hourRain),
319
+ icon: hourIcon
320
+ });
321
+ }
322
+
323
+ // Clothing recommendations
324
+ const recommendations = {
325
+ morning: generateClothingRecommendation(baseTemp - 5, isRaining, Math.min(currentWeather.uv, 5)),
326
+ afternoon: generateClothingRecommendation(baseTemp + 2, isRaining, currentWeather.uv),
327
+ night: generateClothingRecommendation(baseTemp - 8, isRaining, 1)
328
+ };
329
+
330
+ return {
331
+ current: currentWeather,
332
+ hourly: hourlyForecast,
333
+ recommendations: recommendations
334
+ };
335
+ }
336
+
337
+ // Generate clothing recommendations based on weather
338
+ function generateClothingRecommendation(temp, isRaining, uvIndex) {
339
+ const clothing = [];
340
+ const advice = [];
341
+
342
+ // Base clothing
343
+ if(temp < 10) {
344
+ clothing.push('coat', 'sweater', 'gloves', 'scarf');
345
+ advice.push("Hace mucho fr铆o, abr铆gate bien.");
346
+ } else if(temp < 18) {
347
+ clothing.push('jacket', 'long-sleeve');
348
+ advice.push("Temperaturas frescas, lleva algo de abrigo.");
349
+ } else if(temp < 25) {
350
+ clothing.push('t-shirt', 'light-jacket');
351
+ advice.push("Temperaturas agradables, ropa ligera.");
352
+ } else {
353
+ clothing.push('tank-top', 'shorts', 'hat');
354
+ advice.push("Hace calor, usa ropa fresca y ligera.");
355
+ }
356
+
357
+ // Rain considerations
358
+ if(isRaining) {
359
+ clothing.push('umbrella', 'waterproof-shoes');
360
+ advice.push("Lleva paraguas o impermeable, hay probabilidad de lluvia.");
361
+ }
362
+
363
+ // UV considerations
364
+ if(uvIndex > 6) {
365
+ clothing.push('sunglasses', 'hat', 'sunscreen');
366
+ advice.push("Alto 铆ndice UV, protege tu piel y ojos.");
367
+ } else if(uvIndex > 3) {
368
+ clothing.push('sunglasses', 'sunscreen');
369
+ advice.push("Moderado 铆ndice UV, protecci贸n solar recomendada.");
370
+ }
371
+
372
+ // Footwear
373
+ if(isRaining) {
374
+ clothing.push('boots');
375
+ } else if(temp > 22) {
376
+ clothing.push('sandals');
377
+ } else {
378
+ clothing.push('sneakers');
379
+ }
380
+
381
+ return {
382
+ clothing: clothing,
383
+ advice: advice.join(' ')
384
+ };
385
+ }
386
+
387
+ // Get icon for clothing item
388
+ function getClothingIcon(item) {
389
+ const icons = {
390
+ 'coat': 'fa-coat',
391
+ 'sweater': 'fa-shirt',
392
+ 'gloves': 'fa-mitten',
393
+ 'scarf': 'fa-scarf',
394
+ 'jacket': 'fa-jacket',
395
+ 'long-sleeve': 'fa-tshirt',
396
+ 't-shirt': 'fa-tshirt',
397
+ 'light-jacket': 'fa-vest',
398
+ 'tank-top': 'fa-vest',
399
+ 'shorts': 'fa-shorts',
400
+ 'hat': 'fa-hat-cowboy',
401
+ 'umbrella': 'fa-umbrella',
402
+ 'waterproof-shoes': 'fa-shoe-prints',
403
+ 'sunglasses': 'fa-sunglasses',
404
+ 'sunscreen': 'fa-spray-can',
405
+ 'boots': 'fa-boot',
406
+ 'sandals': 'fa-shoe-prints',
407
+ 'sneakers': 'fa-sneaker'
408
+ };
409
+
410
+ return icons[item] || 'fa-tshirt';
411
+ }
412
+
413
+ // Get weather icon
414
+ function getWeatherIcon(iconName) {
415
+ const icons = {
416
+ 'sun': 'fa-sun',
417
+ 'cloud': 'fa-cloud',
418
+ 'cloud-rain': 'fa-cloud-rain'
419
+ };
420
+
421
+ return icons[iconName] || 'fa-cloud';
422
+ }
423
+
424
+ // Get gradient class based on weather
425
+ function getWeatherGradient(condition, hour) {
426
+ const isNight = hour < 6 || hour > 20;
427
+
428
+ if(isNight) return 'night-gradient';
429
+ if(condition.includes('Lluvia')) return 'rainy-gradient';
430
+ if(condition.includes('Nublado')) return 'cloudy-gradient';
431
+ return 'sunny-gradient';
432
+ }
433
+
434
+ // Fetch weather data (mock in this case)
435
+ function fetchWeather() {
436
+ const city = cityInput.value.trim();
437
+
438
+ if(!city) return;
439
+
440
+ // Show loading state
441
+ loading.classList.remove('hidden');
442
+ error.classList.add('hidden');
443
+ weatherDisplay.classList.add('hidden');
444
+ initialState.classList.add('hidden');
445
+
446
+ // Simulate API delay
447
+ setTimeout(() => {
448
+ try {
449
+ const weatherData = getMockWeatherData(city);
450
+ displayWeather(weatherData);
451
+
452
+ loading.classList.add('hidden');
453
+ weatherDisplay.classList.remove('hidden');
454
+ } catch(e) {
455
+ console.error(e);
456
+ loading.classList.add('hidden');
457
+ error.classList.remove('hidden');
458
+ }
459
+ }, 1000);
460
+ }
461
+
462
+ // Display weather data
463
+ function displayWeather(data) {
464
+ // Current weather
465
+ const current = data.current;
466
+ const currentHour = new Date().getHours();
467
+
468
+ document.getElementById('currentCity').textContent = current.city;
469
+ document.getElementById('currentDate').textContent = current.date;
470
+ document.getElementById('currentTemp').textContent = `${current.temp}掳C`;
471
+ document.getElementById('currentCondition').textContent = current.condition;
472
+ document.getElementById('currentHumidity').textContent = `${current.humidity}%`;
473
+ document.getElementById('currentWind').textContent = `${current.wind} km/h`;
474
+ document.getElementById('currentUV').textContent = current.uv;
475
+
476
+ // Update background based on current weather
477
+ const weatherCard = document.querySelector('#weatherDisplay .weather-card');
478
+ weatherCard.className = weatherCard.className.split(' ').filter(c => !c.includes('gradient')).join(' ');
479
+ weatherCard.classList.add(getWeatherGradient(current.condition, currentHour));
480
+
481
+ // Weather icon
482
+ const weatherIcon = document.querySelector('#weatherDisplay .weather-card i.fas');
483
+ weatherIcon.className = `fas ${getWeatherIcon(current.icon)} text-6xl mb-2`;
484
+
485
+ // Hourly forecast
486
+ const hourlyContainer = document.querySelector('.hourly-forecast');
487
+ hourlyContainer.innerHTML = '';
488
+
489
+ data.hourly.forEach(hour => {
490
+ const hourEl = document.createElement('div');
491
+ hourEl.className = 'flex-shrink-0 weather-card bg-white bg-opacity-20 p-4 rounded-lg text-center text-white';
492
+
493
+ const hourTime = document.createElement('p');
494
+ hourTime.className = 'font-semibold';
495
+ hourTime.textContent = hour.time;
496
+
497
+ const hourIcon = document.createElement('i');
498
+ hourIcon.className = `fas ${getWeatherIcon(hour.icon)} text-3xl my-2`;
499
+
500
+ const hourTemp = document.createElement('p');
501
+ hourTemp.className = 'text-xl font-bold';
502
+ hourTemp.textContent = `${hour.temp}掳`;
503
+
504
+ const hourRain = document.createElement('p');
505
+ hourRain.className = 'text-sm opacity-80';
506
+ hourRain.textContent = `${hour.rain}%`;
507
+
508
+ hourEl.appendChild(hourTime);
509
+ hourEl.appendChild(hourIcon);
510
+ hourEl.appendChild(hourTemp);
511
+ hourEl.appendChild(hourRain);
512
+
513
+ hourlyContainer.appendChild(hourEl);
514
+ });
515
+
516
+ // Clothing recommendations
517
+ const rec = data.recommendations;
518
+
519
+ // Morning
520
+ const morningContainer = document.getElementById('morningClothing');
521
+ morningContainer.innerHTML = '';
522
+ rec.morning.clothing.forEach(item => {
523
+ const itemEl = document.createElement('div');
524
+ itemEl.className = 'text-center';
525
+
526
+ const icon = document.createElement('i');
527
+ icon.className = `clothing-icon fas ${getClothingIcon(item)}`;
528
+
529
+ const label = document.createElement('p');
530
+ label.className = 'text-xs capitalize';
531
+ label.textContent = item.replace('-', ' ');
532
+
533
+ itemEl.appendChild(icon);
534
+ itemEl.appendChild(label);
535
+ morningContainer.appendChild(itemEl);
536
+ });
537
+ document.getElementById('morningAdvice').textContent = rec.morning.advice;
538
+
539
+ // Afternoon
540
+ const afternoonContainer = document.getElementById('afternoonClothing');
541
+ afternoonContainer.innerHTML = '';
542
+ rec.afternoon.clothing.forEach(item => {
543
+ const itemEl = document.createElement('div');
544
+ itemEl.className = 'text-center';
545
+
546
+ const icon = document.createElement('i');
547
+ icon.className = `clothing-icon fas ${getClothingIcon(item)}`;
548
+
549
+ const label = document.createElement('p');
550
+ label.className = 'text-xs capitalize';
551
+ label.textContent = item.replace('-', ' ');
552
+
553
+ itemEl.appendChild(icon);
554
+ itemEl.appendChild(label);
555
+ afternoonContainer.appendChild(itemEl);
556
+ });
557
+ document.getElementById('afternoonAdvice').textContent = rec.afternoon.advice;
558
+
559
+ // Night
560
+ const nightContainer = document.getElementById('nightClothing');
561
+ nightContainer.innerHTML = '';
562
+ rec.night.clothing.forEach(item => {
563
+ const itemEl = document.createElement('div');
564
+ itemEl.className = 'text-center';
565
+
566
+ const icon = document.createElement('i');
567
+ icon.className = `clothing-icon fas ${getClothingIcon(item)}`;
568
+
569
+ const label = document.createElement('p');
570
+ label.className = 'text-xs capitalize';
571
+ label.textContent = item.replace('-', ' ');
572
+
573
+ itemEl.appendChild(icon);
574
+ itemEl.appendChild(label);
575
+ nightContainer.appendChild(itemEl);
576
+ });
577
+ document.getElementById('nightAdvice').textContent = rec.night.advice;
578
+
579
+ // Additional tips
580
+ const rainTips = document.getElementById('rainTips');
581
+ rainTips.innerHTML = `
582
+ <li>Usa calzado impermeable para mantener tus pies secos</li>
583
+ <li>Lleva siempre un paraguas plegable en tu bolso/mochila</li>
584
+ <li>Considera un impermeable ligero si llover谩 todo el d铆a</li>
585
+ <li>Protege tus dispositivos electr贸nicos con fundas resistentes al agua</li>
586
+ `;
587
+
588
+ const heatTips = document.getElementById('heatTips');
589
+ heatTips.innerHTML = `
590
+ <li>Mantente hidratado, lleva siempre una botella de agua</li>
591
+ <li>Usa ropa clara y de tejidos transpirables como el lino o algod贸n</li>
592
+ <li>No olvides aplicar protector solar cada 2 horas</li>
593
+ <li>Busca la sombra durante las horas de mayor calor (12-16h)</li>
594
+ `;
595
+ }
596
+ });
597
+ </script>
598
+ <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=RedSparkie/qu-ropa-llevar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
599
+ </html>