Error: {error}

;\n }\n\n if (!weatherData) {\n return

;\n }\n\n return (\n

Weather Dashboard 🌈

\n \n\n

{cityName}

\n {Math.round(weatherData.current_weather.temperature)}°C\n

\n {getWeatherDescription(weatherData.current_weather.weathercode)}\n

\n\n

\n Max Temp: {Math.round(weatherData.daily.temperature_2m_max[0])}°C\n

\n Min Temp: {Math.round(weatherData.daily.temperature_2m_min[0])}°C\n

\n\n \n View Val Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Weather Dashboard\n \n \n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}","deleted","label","children",[],[146],"files",[144],"counts",{"_167":33,"_168":169,"_170":33,"_171":33},"pulls","branches",1,"forks","envVars","contents",[174],{"_104":145,"_97":146,"_147":116,"_148":-5,"_149":136,"_150":135,"_151":118,"_106":175,"_101":153,"_154":155,"_156":157,"_158":27,"_159":-5,"_100":176},["D",1732189352276],[146],"file","upstream","screenshots","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_95":96,"_97":98,"_99":43,"_102":184,"_188":189,"_240":33,"_241":27},{"_104":105,"_97":98,"_106":185,"_108":-5,"_109":27,"_110":111,"_112":-5,"_113":-5,"_12":114,"_115":116,"_117":118,"_119":-5,"_120":33,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":27,"_21":186,"_133":187},["D",1746209884894],{"_95":96,"_131":132},{"_101":135,"_97":43,"_104":136,"_137":105,"_138":-5,"_139":-5,"_140":-5,"_141":-5},"history",[190,195,203,211,219,227,233],{"_147":116,"_101":135,"_106":191,"_149":136,"_163":192},["D",1732189352276],[193],{"_104":145,"_149":136,"_147":116,"_97":146,"_156":157,"_154":155,"_101":153,"_148":-5,"_106":191,"_150":135,"_159":-5,"_151":118,"_158":27,"_100":194},[146],{"_147":116,"_101":153,"_106":196,"_149":136,"_163":197},["D",1732189106555],[198],{"_104":199,"_149":136,"_147":116,"_97":146,"_156":200,"_154":155,"_101":201,"_148":-5,"_106":196,"_150":153,"_159":-5,"_151":27,"_158":27,"_100":202},"ca957a4e-2781-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction WeatherDashboard() {\n const [location, setLocation] = useState({ latitude: 41.9973, longitude: 21.4280 }); // Default to Skopje\n const [weatherData, setWeatherData] = useState(null);\n const [cityName, setCityName] = useState(\"Skopje\");\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchWeather() {\n try {\n const response = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}¤t_weather=true&hourly=temperature_2m,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto&forecast_days=3`\n );\n const data = await response.json();\n setWeatherData(data);\n } catch (err) {\n setError(err.message || \"Could not fetch weather data\");\n }\n }\n\n fetchWeather();\n }, [location]);\n\n const handleLocationSubmit = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch(\n `https://geocoding-api.open-meteo.com/v1/search?name=${cityName}&count=1&language=en&format=json`\n );\n const locationData = await response.json();\n \n if (locationData.results && locationData.results.length > 0) {\n const firstResult = locationData.results[0];\n setLocation({\n latitude: firstResult.latitude,\n longitude: firstResult.longitude\n });\n } else {\n setError(\"Location not found\");\n }\n } catch (err) {\n setError(err.message || \"Error finding location\");\n }\n };\n\n const getWeatherIcon = (code) => {\n const weatherIcons = {\n 0: \"☀️\", 1: \"🌤️\", 2: \"⛅\", 3: \"☁️\",\n 45: \"🌫️\", 48: \"🌫️\", \n 51: \"🌧️\", 53: \"🌧️\", 55: \"🌧️\",\n 61: \"🌧️\", 63: \"🌧️\", 65: \"🌧️\",\n 71: \"❄️\", 73: \"❄️\", 75: \"❄️\",\n 80: \"🌦️\", 81: \"🌦️\", 82: \"🌊\",\n 95: \"⛈️\", 96: \"🌩️\", 99: \"🌩️\"\n };\n return weatherIcons[code] || \"❓\";\n };\n\n const getWeatherDescription = (code) => {\n const weatherCodes = {\n 0: \"Clear sky\", 1: \"Mainly clear\", 2: \"Partly cloudy\", 3: \"Overcast\",\n 45: \"Foggy\", 48: \"Depositing rime fog\", \n 51: \"Light drizzle\", 53: \"Moderate drizzle\", 55: \"Dense drizzle\",\n 61: \"Slight rain\", 63: \"Moderate rain\", 65: \"Heavy rain\",\n 71: \"Slight snow fall\", 73: \"Moderate snow fall\", 75: \"Heavy snow fall\",\n 77: \"Snow grains\", 80: \"Slight rain showers\", \n 81: \"Moderate rain showers\", 82: \"Violent rain showers\",\n 95: \"Thunderstorm\", 96: \"Thunderstorm with light hail\", \n 99: \"Thunderstorm with heavy hail\"\n };\n return weatherCodes[code] || \"Unknown conditions\";\n };\n\n const formatDate = (dateString) => {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', { weekday: 'short' });\n };\n\n if (error) {\n return React.createElement('div', { style: styles.errorContainer }, \n React.createElement('h2', null, `Error: ${error}`)\n );\n }\n\n if (!weatherData) {\n return React.createElement('div', { style: styles.loadingContainer }, \n React.createElement('div', { style: styles.spinner }, '🌀'),\n React.createElement('p', null, 'Loading weather data...')\n );\n }\n\n const currentTemp = Math.round(weatherData.current_weather.temperature);\n const maxTemp = Math.round(weatherData.daily.temperature_2m_max[0]);\n const minTemp = Math.round(weatherData.daily.temperature_2m_min[0]);\n const weatherCode = weatherData.current_weather.weathercode;\n const weatherIcon = getWeatherIcon(weatherCode);\n const weatherDescription = getWeatherDescription(weatherCode);\n\n return React.createElement('div', { style: styles.container }, \n React.createElement('div', { style: styles.card }, \n React.createElement('form', { onSubmit: handleLocationSubmit, style: styles.searchForm }, \n React.createElement('input', { \n type: 'text', \n value: cityName, \n onChange: (e) => setCityName(e.target.value),\n placeholder: 'Enter city name',\n style: styles.searchInput\n }),\n React.createElement('button', { type: 'submit', style: styles.searchButton }, '🔍')\n ),\n React.createElement('div', { style: styles.weatherHeader }, \n React.createElement('h2', { style: styles.cityName }, cityName)\n ),\n React.createElement('div', { style: styles.weatherMain }, \n React.createElement('div', { style: styles.weatherIcon }, weatherIcon),\n React.createElement('div', { style: styles.temperatureContainer }, \n React.createElement('div', { style: styles.currentTemp }, `${currentTemp}°`),\n React.createElement('div', { style: styles.weatherDescription }, weatherDescription)\n )\n ),\n React.createElement('div', { style: styles.weatherDetails }, \n React.createElement('div', { style: styles.detailItem }, \n React.createElement('span', null, 'Max'),\n React.createElement('strong', null, `${maxTemp}°C`)\n ),\n React.createElement('div', { style: styles.detailItem }, \n React.createElement('span', null, 'Min'),\n React.createElement('strong', null, `${minTemp}°C`)\n )\n ),\n React.createElement('div', { style: styles.forecastContainer }, \n weatherData.daily.time.slice(1, 4).map((date, index) => \n React.createElement('div', { key: date, style: styles.forecastDay }, \n React.createElement('div', { style: styles.forecastDayName }, formatDate(date)),\n React.createElement('div', { style: styles.forecastIcon }, \n getWeatherIcon(weatherData.daily.weathercode[index + 1])\n ),\n React.createElement('div', { style: styles.forecastTemps }, \n React.createElement('span', { style: styles.forecastTempMax }, \n `${Math.round(weatherData.daily.temperature_2m_max[index + 1])}°`\n ),\n React.createElement('span', { style: styles.forecastTempMin }, \n `${Math.round(weatherData.daily.temperature_2m_min[index + 1])}°`\n )\n )\n )\n )\n ),\n React.createElement('a', { \n href: import.meta.url.replace(\"esm.town\", \"val.town\"), \n target: '_top', \n style: styles.sourceLink \n }, 'View Val Source')\n )\n );\n}\n\nconst styles = {\n container: {\n fontFamily: \"'Segoe UI', Tahoma, Geneva, Verdana, sans-serif\",\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minHeight: '100vh',\n background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',\n margin: 0,\n padding: 0,\n },\n card: {\n backgroundColor: 'rgba(255,255,255,0.9)',\n borderRadius: '20px',\n boxShadow: '0 10px 25px rgba(0,0,0,0.1)',\n padding: '30px',\n width: '350px',\n textAlign: 'center',\n transition: 'all 0.3s ease',\n },\n searchForm: {\n display: 'flex',\n marginBottom: '20px',\n },\n searchInput: {\n flex: 1,\n padding: '10px',\n borderRadius: '10px 0 0 10px',\n border: '1px solid #ddd',\n fontSize: '16px',\n },\n searchButton: {\n padding: '10px 15px',\n borderRadius: '0 10px 10px 0',\n border: '1px solid #ddd',\n backgroundColor: '#f0f0f0',\n cursor: 'pointer',\n },\n weatherHeader: {\n marginBottom: '20px',\n },\n cityName: {\n fontSize: '24px',\n color: '#333',\n margin: 0,\n },\n weatherMain: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: '20px',\n },\n weatherIcon: {\n fontSize: '80px',\n marginRight: '20px',\n },\n temperatureContainer: {\n textAlign: 'left',\n },\n currentTemp: {\n fontSize: '48px',\n fontWeight: 'bold',\n color: '#333',\n },\n weatherDescription: {\n fontSize: '18px',\n color: '#666',\n },\n weatherDetails: {\n display: 'flex',\n justifyContent: 'space-around',\n backgroundColor: '#f4f4f4',\n borderRadius: '10px',\n padding: '15px',\n marginBottom: '20px',\n },\n detailItem: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n },\n forecastContainer: {\n display: 'flex',\n justifyContent: 'space-between',\n backgroundColor: '#f4f4f4',\n borderRadius: '10px',\n padding: '15px',\n marginBottom: '20px',\n },\n forecastDay: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n },\n forecastDayName: {\n fontSize: '14px',\n color: '#666',\n marginBottom: '5px',\n },\n forecastIcon: {\n fontSize: '30px',\n marginBottom: '5px',\n },\n forecastTemps: {\n display: 'flex',\n flexDirection: 'column',\n },\n forecastTempMax: {\n color: '#333',\n fontWeight: 'bold',\n marginBottom: '3px',\n },\n forecastTempMin: {\n color: '#666',\n fontSize: '14px',\n },\n sourceLink: {\n display: 'block',\n color: '#666',\n textDecoration: 'none',\n fontSize: '14px',\n },\n errorContainer: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n height: '100vh',\n backgroundColor: '#f8d7da',\n color: '#721c24',\n textAlign: 'center',\n },\n loadingContainer: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n height: '100vh',\n backgroundColor: '#f0f0f0',\n },\n spinner: {\n fontSize: '50px',\n animation: 'spin 2s linear infinite',\n }\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render(React.createElement(WeatherDashboard));\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Weather Dashboard\n \n \n \n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}",5,[146],{"_147":116,"_101":201,"_106":204,"_149":136,"_163":205},["D",1732189043543],[206],{"_104":207,"_149":136,"_147":116,"_97":146,"_156":208,"_154":155,"_101":209,"_148":-5,"_106":204,"_150":201,"_159":-5,"_151":27,"_158":27,"_100":210},"ca8e0250-2781-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction getWeatherIcon(code) {\n const weatherIcons = {\n 0: \"☀️\", 1: \"🌤️\", 2: \"⛅\", 3: \"☁️\",\n 45: \"🌫️\", 48: \"🌫️\", \n 51: \"🌧️\", 53: \"🌧️\", 55: \"🌧️\",\n 61: \"🌧️\", 63: \"🌧️\", 65: \"🌧️\",\n 71: \"❄️\", 73: \"❄️\", 75: \"❄️\",\n 80: \"🌦️\", 81: \"🌦️\", 82: \"🌊\",\n 95: \"⛈️\", 96: \"🌩️\", 99: \"🌩️\"\n };\n return weatherIcons[code] || \"❓\";\n}\n\nfunction WeatherDashboard() {\n const [location, setLocation] = useState({ latitude: 41.9973, longitude: 21.4280 }); // Default to Skopje\n const [weatherData, setWeatherData] = useState(null);\n const [cityName, setCityName] = useState(\"Skopje\");\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchWeather() {\n try {\n const response = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}¤t_weather=true&hourly=temperature_2m,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto&forecast_days=3`\n );\n const data = await response.json();\n setWeatherData(data);\n } catch (err) {\n setError(\"Could not fetch weather data\");\n console.error(err);\n }\n }\n\n fetchWeather();\n }, [location]);\n\n const handleLocationSubmit = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch(\n `https://geocoding-api.open-meteo.com/v1/search?name=${cityName}&count=1&language=en&format=json`\n );\n const locationData = await response.json();\n \n if (locationData.results && locationData.results.length > 0) {\n const firstResult = locationData.results[0];\n setLocation({\n latitude: firstResult.latitude,\n longitude: firstResult.longitude\n });\n } else {\n setError(\"Location not found\");\n }\n } catch (err) {\n setError(\"Error finding location\");\n console.error(err);\n }\n };\n\n const getWeatherDescription = (code) => {\n const weatherCodes = {\n 0: \"Clear sky\", 1: \"Mainly clear\", 2: \"Partly cloudy\", 3: \"Overcast\",\n 45: \"Foggy\", 48: \"Depositing rime fog\", \n 51: \"Light drizzle\", 53: \"Moderate drizzle\", 55: \"Dense drizzle\",\n 61: \"Slight rain\", 63: \"Moderate rain\", 65: \"Heavy rain\",\n 71: \"Slight snow fall\", 73: \"Moderate snow fall\", 75: \"Heavy snow fall\",\n 77: \"Snow grains\", 80: \"Slight rain showers\", \n 81: \"Moderate rain showers\", 82: \"Violent rain showers\",\n 95: \"Thunderstorm\", 96: \"Thunderstorm with light hail\", \n 99: \"Thunderstorm with heavy hail\"\n };\n return weatherCodes[code] || \"Unknown conditions\";\n };\n\n const formatDate = (dateString) => {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', { weekday: 'short' });\n };\n\n if (error) {\n return (\n

Error: {error}

\n );\n }\n\n if (!weatherData) {\n return (\n

🌀

Loading weather data...

\n );\n }\n\n const currentTemp = Math.round(weatherData.current_weather.temperature);\n const maxTemp = Math.round(weatherData.daily.temperature_2m_max[0]);\n const minTemp = Math.round(weatherData.daily.temperature_2m_min[0]);\n const weatherCode = weatherData.current_weather.weathercode;\n const weatherIcon = getWeatherIcon(weatherCode);\n const weatherDescription = getWeatherDescription(weatherCode);\n\n return (\n

\n \n\n

{cityName}

\n\n

{weatherIcon}

{currentTemp}°

{weatherDescription}

\n\n

\n Max\n {maxTemp}°C\n

\n Min\n {minTemp}°C\n

\n\n

\n {weatherData.daily.time.slice(1, 4).map((date, index) => (\n

\n {formatDate(date)}\n

\n {getWeatherIcon(weatherData.daily.weathercode[index + 1])}\n

\n \n {Math.round(weatherData.daily.temperature_2m_max[index + 1])}°\n \n \n {Math.round(weatherData.daily.temperature_2m_min[index + 1])}°\n \n

\n ))}\n

\n\n \n View Val Source\n \n

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: \"'Segoe UI', Tahoma, Geneva, Verdana, sans-serif\",\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minHeight: '100vh',\n background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',\n margin: 0,\n padding: 0,\n },\n card: {\n backgroundColor: 'rgba(255,255,255,0.9)',\n borderRadius: '20px',\n boxShadow: '0 10px 25px rgba(0,0,0,0.1)',\n padding: '30px',\n width: '350px',\n textAlign: 'center',\n transition: 'all 0.3s ease',\n },\n searchForm: {\n display: 'flex',\n marginBottom: '20px',\n },\n searchInput: {\n flex: 1,\n padding: '10px',\n borderRadius: '10px 0 0 10px',\n border: '1px solid #ddd',\n fontSize: '16px',\n },\n searchButton: {\n padding: '10px 15px',\n borderRadius: '0 10px 10px 0',\n border: '1px solid #ddd',\n backgroundColor: '#f0f0f0',\n cursor: 'pointer',\n },\n weatherHeader: {\n marginBottom: '20px',\n },\n cityName: {\n fontSize: '24px',\n color: '#333',\n margin: 0,\n },\n weatherMain: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: '20px',\n },\n weatherIcon: {\n fontSize: '80px',\n marginRight: '20px',\n },\n temperatureContainer: {\n textAlign: 'left',\n },\n currentTemp: {\n fontSize: '48px',\n fontWeight: 'bold',\n color: '#333',\n },\n weatherDescription: {\n fontSize: '18px',\n color: '#666',\n },\n weatherDetails: {\n display: 'flex',\n justifyContent: 'space-around',\n backgroundColor: '#f4f4f4',\n borderRadius: '10px',\n padding: '15px',\n marginBottom: '20px',\n },\n detailItem: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n },\n forecastContainer: {\n display: 'flex',\n justifyContent: 'space-between',\n backgroundColor: '#f4f4f4',\n borderRadius: '10px',\n padding: '15px',\n marginBottom: '20px',\n },\n forecastDay: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n },\n forecastDayName: {\n fontSize: '14px',\n color: '#666',\n marginBottom: '5px',\n },\n forecastIcon: {\n fontSize: '30px',\n marginBottom: '5px',\n },\n forecastTemps: {\n display: 'flex',\n flexDirection: 'column',\n },\n forecastTempMax: {\n color: '#333',\n fontWeight: 'bold',\n marginBottom: '3px',\n },\n forecastTempMin: {\n color: '#666',\n fontSize: '14px',\n },\n sourceLink: {\n display: 'block',\n color: '#666',\n textDecoration: 'none',\n fontSize: '14px',\n },\n errorContainer: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n height: '100vh',\n backgroundColor: '#f8d7da',\n color: '#721c24',\n textAlign: 'center',\n },\n loadingContainer: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n height: '100vh',\n backgroundColor: '#f0f0f0',\n },\n spinner: {\n fontSize: '50px',\n animation: 'spin 2s linear infinite',\n }\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Weather Dashboard\n \n \n \n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}",4,[146],{"_147":116,"_101":209,"_106":212,"_149":136,"_163":213},["D",1732188440279],[214],{"_104":215,"_149":136,"_147":116,"_97":146,"_156":216,"_154":155,"_101":217,"_148":-5,"_106":212,"_150":209,"_159":-5,"_151":27,"_158":27,"_100":218},"ca874730-2781-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction getWeatherIcon(code) {\n const weatherIcons = {\n 0: \"☀️\", 1: \"🌤️\", 2: \"⛅\", 3: \"☁️\",\n 45: \"🌫️\", 48: \"🌫️\", \n 51: \"🌧️\", 53: \"🌧️\", 55: \"🌧️\",\n 61: \"🌧️\", 63: \"🌧️\", 65: \"🌧️\",\n 71: \"❄️\", 73: \"❄️\", 75: \"❄️\",\n 80: \"🌦️\", 81: \"🌦️\", 82: \"🌊\",\n 95: \"⛈️\", 96: \"🌩️\", 99: \"🌩️\"\n };\n return weatherIcons[code] || \"❓\";\n}\n\nfunction WeatherDashboard() {\n const [location, setLocation] = useState({ latitude: 41.9973, longitude: 21.4280 }); // Default to Skopje\n const [weatherData, setWeatherData] = useState(null);\n const [cityName, setCityName] = useState(\"Skopje\");\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchWeather() {\n try {\n const response = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}¤t_weather=true&hourly=temperature_2m,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto&forecast_days=3`\n );\n const data = await response.json();\n setWeatherData(data);\n } catch (err) {\n setError(\"Could not fetch weather data\");\n }\n }\n\n fetchWeather();\n }, [location]);\n\n const handleLocationSubmit = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch(\n `https://geocoding-api.open-meteo.com/v1/search?name=${cityName}&count=1&language=en&format=json`\n );\n const locationData = await response.json();\n \n if (locationData.results && locationData.results.length > 0) {\n const firstResult = locationData.results[0];\n setLocation({\n latitude: firstResult.latitude,\n longitude: firstResult.longitude\n });\n } else {\n setError(\"Location not found\");\n }\n } catch (err) {\n setError(\"Error finding location\");\n }\n };\n\n const getWeatherDescription = (code) => {\n const weatherCodes = {\n 0: \"Clear sky\", 1: \"Mainly clear\", 2: \"Partly cloudy\", 3: \"Overcast\",\n 45: \"Foggy\", 48: \"Depositing rime fog\", \n 51: \"Light drizzle\", 53: \"Moderate drizzle\", 55: \"Dense drizzle\",\n 61: \"Slight rain\", 63: \"Moderate rain\", 65: \"Heavy rain\",\n 71: \"Slight snow fall\", 73: \"Moderate snow fall\", 75: \"Heavy snow fall\",\n 77: \"Snow grains\", 80: \"Slight rain showers\", \n 81: \"Moderate rain showers\", 82: \"Violent rain showers\",\n 95: \"Thunderstorm\", 96: \"Thunderstorm with light hail\", \n 99: \"Thunderstorm with heavy hail\"\n };\n return weatherCodes[code] || \"Unknown conditions\";\n };\n\n const formatDate = (dateString) => {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', { weekday: 'short' });\n };\n\n if (error) {\n return (\n

Error: {error}

\n );\n }\n\n if (!weatherData) {\n return (\n

🌀

Loading weather data...

\n \n\n

{cityName}

\n\n

{weatherIcon}

{currentTemp}°

{weatherDescription}

\n\n

\n Max\n {maxTemp}°C\n

\n Min\n {minTemp}°C\n

\n\n

\n {weatherData.daily.time.slice(1, 4).map((date, index) => (\n

\n {formatDate(date)}\n

\n {getWeatherIcon(weatherData.daily.weathercode[index + 1])}\n

\n \n {Math.round(weatherData.daily.temperature_2m_max[index + 1])}°\n \n \n {Math.round(weatherData.daily.temperature_2m_min[index + 1])}°\n \n

\n ))}\n

\n\n \n View Val Source\n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}",3,[146],{"_147":116,"_101":217,"_106":220,"_149":136,"_163":221},["D",1732043318320],[222],{"_104":223,"_149":136,"_147":116,"_97":146,"_156":224,"_154":155,"_101":225,"_148":-5,"_106":220,"_150":217,"_159":-5,"_151":27,"_158":27,"_100":226},"ca7f23a2-2781-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction getWeatherIcon(code) {\n const weatherIcons = {\n 0: \"☀️\", 1: \"🌤️\", 2: \"⛅\", 3: \"☁️\",\n 45: \"🌫️\", 48: \"🌫️\", \n 51: \"🌧️\", 53: \"🌧️\", 55: \"🌧️\",\n 61: \"🌧️\", 63: \"🌧️\", 65: \"🌧️\",\n 71: \"❄️\", 73: \"❄️\", 75: \"❄️\",\n 80: \"🌦️\", 81: \"🌦️\", 82: \"🌊\",\n 95: \"⛈️\", 96: \"🌩️\", 99: \"🌩️\"\n };\n return weatherIcons[code] || \"❓\";\n}\n\nfunction WeatherDashboard() {\n const [location, setLocation] = useState({ latitude: 41.9973, longitude: 21.4280 }); // Default to Skopje\n const [weatherData, setWeatherData] = useState(null);\n const [cityName, setCityName] = useState(\"Skopje\");\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchWeather() {\n try {\n const response = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}¤t_weather=true&hourly=temperature_2m,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto`\n );\n const data = await response.json();\n setWeatherData(data);\n } catch (err) {\n setError(\"Could not fetch weather data\");\n }\n }\n\n fetchWeather();\n }, [location]);\n\n const handleLocationSubmit = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch(\n `https://geocoding-api.open-meteo.com/v1/search?name=${cityName}&count=1&language=en&format=json`\n );\n const locationData = await response.json();\n \n if (locationData.results && locationData.results.length > 0) {\n const firstResult = locationData.results[0];\n setLocation({\n latitude: firstResult.latitude,\n longitude: firstResult.longitude\n });\n } else {\n setError(\"Location not found\");\n }\n } catch (err) {\n setError(\"Error finding location\");\n }\n };\n\n const getWeatherDescription = (code) => {\n const weatherCodes = {\n 0: \"Clear sky\", 1: \"Mainly clear\", 2: \"Partly cloudy\", 3: \"Overcast\",\n 45: \"Foggy\", 48: \"Depositing rime fog\", \n 51: \"Light drizzle\", 53: \"Moderate drizzle\", 55: \"Dense drizzle\",\n 61: \"Slight rain\", 63: \"Moderate rain\", 65: \"Heavy rain\",\n 71: \"Slight snow fall\", 73: \"Moderate snow fall\", 75: \"Heavy snow fall\",\n 77: \"Snow grains\", 80: \"Slight rain showers\", \n 81: \"Moderate rain showers\", 82: \"Violent rain showers\",\n 95: \"Thunderstorm\", 96: \"Thunderstorm with light hail\", \n 99: \"Thunderstorm with heavy hail\"\n };\n return weatherCodes[code] || \"Unknown conditions\";\n };\n\n if (error) {\n return (\n

Error: {error}

\n );\n }\n\n if (!weatherData) {\n return (\n

🌀

Loading weather data...

\n \n\n

{cityName}

\n\n

{weatherIcon}

{currentTemp}°

{weatherDescription}

\n\n

\n Max\n {maxTemp}°C\n

\n Min\n {minTemp}°C\n

\n\n \n View Val Source\n \n

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: \"'Segoe UI', Tahoma, Geneva, Verdana, sans-serif\",\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minHeight: '100vh',\n background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',\n margin: 0,\n padding: 0,\n },\n card: {\n backgroundColor: 'rgba(255,255,255,0.9)',\n borderRadius: '20px',\n boxShadow: '0 10px 25px rgba(0,0,0,0.1)',\n padding: '30px',\n width: '350px',\n textAlign: 'center',\n transition: 'all 0.3s ease',\n },\n searchForm: {\n display: 'flex',\n marginBottom: '20px',\n },\n searchInput: {\n flex: 1,\n padding: '10px',\n borderRadius: '10px 0 0 10px',\n border: '1px solid #ddd',\n fontSize: '16px',\n },\n searchButton: {\n padding: '10px 15px',\n borderRadius: '0 10px 10px 0',\n border: '1px solid #ddd',\n backgroundColor: '#f0f0f0',\n cursor: 'pointer',\n },\n weatherHeader: {\n marginBottom: '20px',\n },\n cityName: {\n fontSize: '24px',\n color: '#333',\n margin: 0,\n },\n weatherMain: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: '20px',\n },\n weatherIcon: {\n fontSize: '80px',\n marginRight: '20px',\n },\n temperatureContainer: {\n textAlign: 'left',\n },\n currentTemp: {\n fontSize: '48px',\n fontWeight: 'bold',\n color: '#333',\n },\n weatherDescription: {\n fontSize: '18px',\n color: '#666',\n },\n weatherDetails: {\n display: 'flex',\n justifyContent: 'space-around',\n backgroundColor: '#f4f4f4',\n borderRadius: '10px',\n padding: '15px',\n },\n detailItem: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n },\n sourceLink: {\n display: 'block',\n marginTop: '20px',\n color: '#666',\n textDecoration: 'none',\n fontSize: '14px',\n },\n errorContainer: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n height: '100vh',\n backgroundColor: '#f8d7da',\n color: '#721c24',\n textAlign: 'center',\n },\n loadingContainer: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n height: '100vh',\n backgroundColor: '#f0f0f0',\n },\n spinner: {\n fontSize: '50px',\n animation: 'spin 2s linear infinite',\n }\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Weather Dashboard\n \n \n \n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}",2,[146],{"_147":116,"_101":225,"_106":228,"_149":136,"_163":229},["D",1732037933907],[230],{"_104":231,"_149":136,"_147":116,"_97":146,"_156":157,"_154":155,"_101":169,"_148":-5,"_106":228,"_150":225,"_159":-5,"_151":27,"_158":27,"_100":232},"ca777918-2781-11f0-b46e-569c3dd06744",[146],{"_147":116,"_101":169,"_106":234,"_149":136,"_163":235},["D",1732034382245],[236],{"_104":237,"_149":136,"_147":116,"_97":146,"_156":238,"_154":155,"_101":33,"_148":-5,"_106":234,"_150":169,"_159":-5,"_151":27,"_158":27,"_100":239},"ca7118b6-2781-11f0-b46e-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction WeatherDashboard() {\n const [location, setLocation] = useState({ latitude: 40.7128, longitude: -74.0060 }); // Default to New York City\n const [weatherData, setWeatherData] = useState(null);\n const [cityName, setCityName] = useState(\"New York\");\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchWeather() {\n try {\n const response = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}¤t_weather=true&hourly=temperature_2m,weathercode&daily=weathercode,temperature_2m_max,temperature_2m_min&timezone=auto`\n );\n const data = await response.json();\n setWeatherData(data);\n } catch (err) {\n setError(\"Could not fetch weather data\");\n }\n }\n\n fetchWeather();\n }, [location]);\n\n const handleLocationSubmit = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch(\n `https://geocoding-api.open-meteo.com/v1/search?name=${cityName}&count=1&language=en&format=json`\n );\n const locationData = await response.json();\n \n if (locationData.results && locationData.results.length > 0) {\n const firstResult = locationData.results[0];\n setLocation({\n latitude: firstResult.latitude,\n longitude: firstResult.longitude\n });\n } else {\n setError(\"Location not found\");\n }\n } catch (err) {\n setError(\"Error finding location\");\n }\n };\n\n const getWeatherDescription = (code) => {\n const weatherCodes = {\n 0: \"Clear sky 🌞\",\n 1: \"Mainly clear ☀️\",\n 2: \"Partly cloudy 🌤️\",\n 3: \"Overcast ☁️\",\n 45: \"Foggy 🌫️\",\n 48: \"Depositing rime fog 🌫️\",\n 51: \"Light drizzle 💧\",\n 53: \"Moderate drizzle 💧\",\n 55: \"Dense drizzle 💧\",\n 61: \"Slight rain 🌧️\",\n 63: \"Moderate rain 🌧️\",\n 65: \"Heavy rain 🌧️\",\n 71: \"Slight snow fall ❄️\",\n 73: \"Moderate snow fall ❄️\",\n 75: \"Heavy snow fall ❄️\",\n 77: \"Snow grains ❄️\",\n 80: \"Slight rain showers 🌦️\",\n 81: \"Moderate rain showers 🌦️\",\n 82: \"Violent rain showers 🌊\",\n 95: \"Thunderstorm ⛈️\",\n 96: \"Thunderstorm with light hail 🌩️\",\n 99: \"Thunderstorm with heavy hail 🌩️\"\n };\n return weatherCodes[code] || \"Unknown conditions 🤷‍♀️\";\n };\n\n if (error) {\n return

Error: {error}

;\n }\n\n if (!weatherData) {\n return

;\n }\n\n return (\n

Weather Dashboard 🌈

\n \n\n

{cityName}

\n {Math.round(weatherData.current_weather.temperature)}°C\n

\n {getWeatherDescription(weatherData.current_weather.weathercode)}\n

\n\n

\n Max Temp: {Math.round(weatherData.daily.temperature_2m_max[0])}°C\n

\n Min Temp: {Math.round(weatherData.daily.temperature_2m_min[0])}°C\n

\n\n \n View Val Source\n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}",[146],"page","hasNext","routes/_app","actionData","errors"]

History