Weather Dashboard

Check the weather anywhere in the world

\n\n

\n \n

\n \n \n

\n\n \n

Loading weather data...

\n\n \n

\n \n

City Name

Current Date

\n \n

--°C

Weather Description

\n \n Feels Like\n --°C\n

\n \n Wind\n -- km/h\n

\n \n Humidity\n --%\n

\n \n Precipitation\n -- mm\n

\n\n \n

7-Day Forecast

\n \n

\n\n \n

Error

Something went wrong. Please try again.

\n\n \n

\n\n \n\n",[],[154,173],{"_105":181,"_95":182,"_155":183,"_157":156,"_158":139,"_159":102,"_161":162,"_107":184,"_101":32,"_164":176,"_166":185,"_167":22,"_168":-5,"_169":186,"_99":187},"e610c150-3746-11f0-a803-9e149126039e","styles.css","e610c204-3746-11f0-a803-9e149126039e",["D",1747943809554],"/* Custom styles for Weather Dashboard */\n\n/* Weather detail items */\n.weather-detail {\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: rgba(238, 242, 255, 0.5);\n padding: 0.75rem;\n border-radius: 0.5rem;\n transition: all 0.3s ease;\n}\n\n.weather-detail:hover {\n background-color: rgba(224, 231, 255, 0.8);\n transform: translateY(-2px);\n}\n\n.weather-detail i {\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n}\n\n/* Forecast card animations */\n#forecast-container > div {\n transition: all 0.3s ease;\n}\n\n#forecast-container > div:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n/* Location results hover effect */\n#location-results li {\n transition: background-color 0.2s ease;\n}\n\n#location-results li:hover {\n background-color: rgba(238, 242, 255, 0.8);\n cursor: pointer;\n}\n\n/* Custom scrollbar */\n::-webkit-scrollbar {\n width: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: #f1f5f9;\n border-radius: 10px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 10px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n}\n\n/* Fade-in animation */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.fade-in {\n animation: fadeIn 0.5s ease forwards;\n}\n\n/* Pulse animation for loading */\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n.pulse {\n animation: pulse 1.5s ease infinite;\n}",[],[154,182],[154],{"_105":190,"_95":100,"_155":191,"_157":-5,"_158":139,"_159":192,"_161":22,"_107":193,"_101":32,"_164":194,"_166":195,"_167":22,"_168":-5,"_169":196,"_99":197},"d1066634-3746-11f0-8dcc-9e149126039e","d10666ca-3746-11f0-8dcc-9e149126039e",4,["D",1747943774254],"script","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve the main dashboard\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve static files\napp.get(\"/frontend/*\", async (c) => {\n const path = c.req.path;\n const fileContent = await readFile(path, import.meta.url);\n \n // Set appropriate content type based on file extension\n const extension = path.split('.').pop()?.toLowerCase();\n let contentType = \"text/plain\";\n \n if (extension === \"html\") contentType = \"text/html\";\n else if (extension === \"css\") contentType = \"text/css\";\n else if (extension === \"js\") contentType = \"text/javascript\";\n else if (extension === \"svg\") contentType = \"image/svg+xml\";\n \n return new Response(fileContent, {\n headers: { \"Content-Type\": contentType }\n });\n});\n\n// API endpoint to fetch weather data\napp.get(\"/api/weather\", async (c) => {\n const { lat, lon } = c.req.query();\n \n if (!lat || !lon) {\n return c.json({ error: \"Latitude and longitude are required\" }, 400);\n }\n \n try {\n // Fetch current weather\n const currentWeatherResponse = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,relative_humidity_2m,apparent_temperature,precipitation,weather_code,wind_speed_10m,wind_direction_10m&timezone=auto`\n );\n \n // Fetch forecast\n const forecastResponse = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum,wind_speed_10m_max&timezone=auto`\n );\n \n if (!currentWeatherResponse.ok || !forecastResponse.ok) {\n return c.json({ error: \"Failed to fetch weather data\" }, 500);\n }\n \n const currentWeather = await currentWeatherResponse.json();\n const forecast = await forecastResponse.json();\n \n return c.json({\n current: currentWeather,\n forecast: forecast\n });\n } catch (error) {\n console.error(\"Error fetching weather data:\", error);\n return c.json({ error: \"Failed to fetch weather data\" }, 500);\n }\n});\n\n// API endpoint to search for locations\napp.get(\"/api/locations\", async (c) => {\n const { query } = c.req.query();\n \n if (!query) {\n return c.json({ error: \"Search query is required\" }, 400);\n }\n \n try {\n const response = await fetch(\n `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(query)}&count=5&language=en&format=json`\n );\n \n if (!response.ok) {\n return c.json({ error: \"Failed to search locations\" }, 500);\n }\n \n const data = await response.json();\n return c.json(data);\n } catch (error) {\n console.error(\"Error searching locations:\", error);\n return c.json({ error: \"Failed to search locations\" }, 500);\n }\n});\n\nexport default app.fetch;",[],[100],"files",[152,171,180,189],"counts",{"_202":32,"_203":204,"_205":32,"_206":32},"pulls","branches",3,"forks","envVars","contents",[],{"_105":190,"_95":100,"_155":191,"_157":-5,"_158":139,"_159":192,"_161":22,"_107":210,"_101":32,"_164":194,"_166":195,"_167":22,"_168":-5,"_99":211},["D",1747943774254],[100],"upstreamProject","upstreamBranch",{"_105":142,"_107":215,"_216":217,"_95":43,"_140":106,"_101":32,"_141":-5,"_143":-5,"_218":-5,"_109":-5,"_149":22,"_111":112,"_148":94,"_16":120,"_147":96},["D",1747940073337],"updatedAt",["D",1747940073337],"lockfileKey","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":98,"_101":102,"_99":100,"_103":225,"_150":230,"_198":243,"_176":244,"_207":246,"_247":248,"_251":162,"_252":-5,"_253":138,"_254":32,"_255":256},{"_105":106,"_95":96,"_107":226,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":227,"_133":228,"_136":229,"_149":22},["D",1747940073337],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_101":138,"_95":98,"_105":139,"_140":106,"_141":142,"_143":32,"_144":112,"_145":106,"_146":120,"_147":96,"_148":94},[231,240],{"_105":153,"_95":154,"_155":156,"_157":-5,"_158":139,"_159":160,"_161":162,"_107":163,"_101":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":232,"_99":239},[233,236],{"_105":172,"_95":173,"_155":174,"_157":156,"_158":139,"_159":160,"_161":162,"_107":175,"_101":32,"_164":176,"_166":177,"_167":22,"_168":-5,"_169":234,"_99":235},[],[154,173],{"_105":181,"_95":182,"_155":183,"_157":156,"_158":139,"_159":102,"_161":162,"_107":184,"_101":32,"_164":176,"_166":185,"_167":22,"_168":-5,"_169":237,"_99":238},[],[154,182],[154],{"_105":190,"_95":100,"_155":191,"_157":-5,"_158":139,"_159":192,"_161":22,"_107":193,"_101":32,"_164":194,"_166":195,"_167":22,"_168":-5,"_169":241,"_99":242},[],[100],[231,233,236,240],{"_105":190,"_95":100,"_155":191,"_157":-5,"_158":139,"_159":192,"_161":22,"_107":210,"_101":32,"_164":194,"_166":195,"_167":22,"_168":-5,"_99":245},[100],[],"upstream",{"_105":142,"_107":249,"_216":250,"_95":43,"_140":106,"_101":32,"_141":-5,"_143":-5,"_218":-5,"_109":-5,"_149":22,"_111":112,"_148":94,"_16":120,"_147":96},["D",1747940073337],["D",1747940073337],"showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]