🌈 AI Weather Insights

\n \n

\n {loading ? (\n

🤖 AI is analyzing the weather...

\n ) : (\n weatherData && (\n

\n {[\n { \n icon: '🌡️', \n title: 'Temperature', \n value: `${weatherData.current_weather.temperature}°C`,\n color: colorScheme.primary\n },\n { \n icon: '💨', \n title: 'Wind Speed', \n value: `${weatherData.current_weather.windspeed} km/h`,\n color: colorScheme.secondary\n },\n { \n icon: '🧭', \n title: 'Wind Direction', \n value: `${weatherData.current_weather.winddirection}°`,\n color: colorScheme.primary\n }\n ].map((stat, index) => (\n

{stat.icon}

{stat.title}

{stat.value}

\n ))}\n

\n \n {aiInsight && (\n

🤖 AI Weather Insight

{aiInsight}

\n )}\n

\n )\n )}\n \n View AI Weather Source\n \n

\n );\n}\n\nfunction LocationSearch({ onLocationChange, accentColor, textColor }) {\n const [input, setInput] = useState('');\n const [error, setError] = useState('');\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError('');\n try {\n const response = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${input}&count=1&language=en&format=json`);\n const data = await response.json();\n if (data.results && data.results.length > 0) {\n const { latitude, longitude, name } = data.results[0];\n onLocationChange({ latitude, longitude, name });\n } else {\n setError('Location not found. Please try again.');\n }\n } catch (error) {\n console.error(\"Location search failed\", error);\n setError('Unable to search location. Please try again.');\n }\n };\n\n return (\n

\n \n {error &&

{error}

}\n

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

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n transition: all 0.3s ease;\n}\n\nhtml, body {\n height: 100%;\n width: 100%;\n overflow-x: hidden;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n line-height: 1.6;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #f0f0f0;\n}\n\n.weather-dashboard {\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n overflow: auto;\n}\n\n.dashboard-container {\n width: 100%;\n max-width: 1000px;\n background-color: rgba(255,255,255,0.9);\n border-radius: 20px;\n padding: 30px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.dashboard-header {\n text-align: center;\n margin-bottom: 30px;\n}\n\n.dashboard-header h1 {\n font-size: 2.5rem;\n margin-bottom: 20px;\n text-shadow: 1px 1px 3px rgba(0,0,0,0.1);\n}\n\n.location-search {\n display: flex;\n justify-content: center;\n}\n\n.location-search form {\n display: flex;\n width: 100%;\n max-width: 500px;\n}\n\n.location-search input {\n flex-grow: 1;\n padding: 12px;\n border: 2px solid transparent;\n border-radius: 8px 0 0 8px;\n font-size: 1rem;\n background-color: rgba(255,255,255,0.7);\n}\n\n.location-search button {\n padding: 12px 20px;\n border: none;\n border-radius: 0 8px 8px 0;\n cursor: pointer;\n font-size: 1rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.current-weather-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n}\n\n.weather-card {\n display: flex;\n align-items: center;\n border-radius: 12px;\n padding: 20px;\n text-align: center;\n flex-direction: column;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.weather-card:hover {\n transform: scale(1.05) !important;\n}\n\n.weather-icon {\n font-size: 4rem;\n margin-bottom: 10px;\n}\n\n.weather-info h3 {\n font-size: 1rem;\n margin-bottom: 5px;\n opacity: 0.8;\n}\n\n.weather-info p {\n font-size: 1.8rem;\n font-weight: bold;\n}\n\n.ai-insight {\n text-align: center;\n margin-top: 20px;\n}\n\n.ai-insight h3 {\n margin-bottom: 10px;\n}\n\n.source-link {\n display: block;\n text-align: center;\n margin-top: 20px;\n text-decoration: none;\n}\n\n.error-message {\n color: #d9534f;\n text-align: center;\n margin-top: 10px;\n}\n\n@media screen and (max-width: 768px) {\n .dashboard-container {\n padding: 15px;\n border-radius: 10px;\n width: 95%;\n }\n\n .dashboard-header h1 {\n font-size: 2rem;\n }\n\n .location-search form {\n flex-direction: column;\n }\n\n .location-search input,\n .location-search button {\n width: 100%;\n border-radius: 8px;\n margin-bottom: 10px;\n }\n\n .current-weather-grid {\n grid-template-columns: 1fr;\n }\n\n .weather-icon {\n font-size: 3rem;\n }\n\n .weather-info p {\n font-size: 1.5rem;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/poorvis885/weatherDashboard/code/main.tsx","extension","actionData","errors"]