/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function WeatherDashboard() { const [theme, setTheme] = useState('light'); const [weather, setWeather] = useState(null); const [locationInput, setLocationInput] = useState(''); const [location, setLocation] = useState({ latitude: 40.7128, longitude: -74.0060, name: 'New York City' }); // Default NYC const [error, setError] = useState(''); useEffect(() => { async function fetchWeather() { try { const response = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m,weathercode` ); const data = await response.json(); setWeather(data); setError(''); } catch (error) { console.error("Weather fetch failed", error); setError('Failed to fetch weather data'); } } fetchWeather(); }, [location]); // Weather code interpretation const getWeatherDescription = (code: number) => { const weatherCodes: { [key: number]: string } = { 0: "Clear sky ☀️", 1: "Mainly clear 🌤️", 2: "Partly cloudy 🌥️", 3: "Overcast ☁️", 45: "Foggy 🌫️", 48: "Depositing rime fog 🌫️", 51: "Light drizzle 🌧️", 53: "Moderate drizzle 🌧️", 55: "Dense drizzle 🌧️", 61: "Slight rain 🌧️", 63: "Moderate rain 🌧️", 65: "Heavy rain 🌧️", 71: "Slight snowfall ❄️", 73: "Moderate snowfall ❄️", 75: "Heavy snowfall ❄️", 77: "Snow grains 🌨️", 80: "Slight rain showers 🌦️", 81: "Moderate rain showers 🌦️", 82: "Violent rain showers 🌊", 85: "Slight snow showers 🌨️", 86: "Heavy snow showers 🌨️", 95: "Thunderstorm ⛈️", 96: "Thunderstorm with light hail 🌩️", 99: "Thunderstorm with heavy hail 🌩️" }; return weatherCodes[code] || "Unknown conditions 🤷‍♀️"; }; const toggleTheme = () => { setTheme(theme === 'light' ? 'dark' : 'light'); }; const handleLocationSearch = async (e: React.FormEvent) => { e.preventDefault(); try { const geoResponse = await fetch( `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(locationInput)}&count=1&language=en&format=json` ); const geoData = await geoResponse.json(); if (geoData.results && geoData.results.length > 0) { const firstResult = geoData.results[0]; setLocation({ latitude: firstResult.latitude, longitude: firstResult.longitude, name: firstResult.name }); setLocationInput(''); } else { setError('Location not found'); } } catch (error) { console.error("Location search failed", error); setError('Failed to find location'); } }; return (

{theme === 'light' ? '🌙' : '☀️'}

{location.name} Weather

{error &&

{error}

} {weather && (

{Math.round(weather.current_weather.temperature)}°C

{getWeatherDescription(weather.current_weather.weathercode)}

💨

Wind Speed

{weather.current_weather.windspeed} km/h

💧

Humidity

{weather.hourly.relativehumidity_2m[0]}%

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Modern Weather Dashboard

`, { headers: { "content-type": "text/html" } }); } function generateCSS(theme: 'light' | 'dark') { return ` :root { --bg-light: #f4f4f4; --bg-dark: #1c2331; --text-light: #333; --text-dark: #f0f0f0; --accent-light: #6a5acd; --accent-dark: #8a4fff; --card-light: rgba(255,255,255,0.9); --card-dark: rgba(30,40,50,0.95); } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 ${theme === 'light' ? 'rgba(106, 90, 205, 0.4)' : 'rgba(138, 79, 255, 0.4)'}; } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px ${theme === 'light' ? 'rgba(106, 90, 205, 0)' : 'rgba(138, 79, 255, 0)'}; } 100% { transform: scale(1); box-shadow: 0 0 0 0 ${theme === 'light' ? 'rgba(106, 90, 205, 0)' : 'rgba(138, 79, 255, 0)'}; } } @keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, html { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.6; height: 100%; overflow-x: hidden; letter-spacing: -0.02em; } .pulse-effect { animation: pulse 2s infinite; } .pulse-card { animation: softPulse 3s infinite; } .pulse-container { transition: all 0.3s ease; } .pulse-container:hover { transform: scale(1.01); } .weather-dashboard { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .light { background-color: var(--bg-light); color: var(--text-light); } .dark { background-color: var(--bg-dark); color: var(--text-dark); } .parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, ${theme === 'light' ? 'rgba(106, 90, 205, 0.05)' : 'rgba(138, 79, 255, 0.1)'}), url('https://maxm-imggenurl.web.val.run/abstract-blurred-gradient-background'); background-size: cover; background-position: center; z-index: -1; filter: ${theme === 'light' ? 'brightness(1.1)' : 'brightness(0.8)'}; } .theme-toggle { position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 24px; z-index: 20; background: ${theme === 'light' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.4)'}; border-radius: 50%; padding: 10px; transition: transform 0.3s ease; } .theme-toggle:hover { transform: scale(1.2); } .weather-container { background: ${theme === 'light' ? 'var(--card-light)' : 'var(--card-dark)'}; backdrop-filter: blur(15px); border-radius: 20px; padding: 40px; box-shadow: 0 15px 35px rgba(0,0,0,${theme === 'light' ? '0.05' : '0.2'}); text-align: center; max-width: 600px; width: 90%; border: 1px solid ${theme === 'light' ? 'rgba(200,200,200,0.5)' : 'rgba(255,255,255,0.1)'}; } .location-search { display: flex; margin-bottom: 30px; gap: 10px; } .location-search input { flex-grow: 1; padding: 12px 15px; border: 2px solid ${theme === 'light' ? 'var(--accent-light)' : 'var(--accent-dark)'}; border-radius: 12px; background: ${theme === 'light' ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.1)'}; color: ${theme === 'light' ? 'var(--text-light)' : 'var(--text-dark)'}; font-weight: 500; } .current-weather h1 { margin-bottom: 20px; font-weight: 700; color: ${theme === 'light' ? 'var(--text-light)' : 'var(--text-dark)'}; } .temperature-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } .temperature { font-size: 4.5rem; font-weight: 800; color: ${theme === 'light' ? 'var(--accent-light)' : 'var(--accent-dark)'}; letter-spacing: -0.05em; } .weather-condition { font-size: 1.2rem; margin-top: 10px; opacity: 0.8; font-weight: 500; } .additional-details { display: flex; justify-content: center; gap: 20px; } .detail-card { display: flex; align-items: center; background: ${theme === 'light' ? 'rgba(240,240,240,0.7)' : 'rgba(255,255,255,0.05)'}; border-radius: 10px; padding: 15px; border: 1px solid ${theme === 'light' ? 'rgba(200,200,200,0.3)' : 'rgba(255,255,255,0.1)'}; } .detail-icon { font-size: 2rem; margin-right: 15px; opacity: 0.7; } .detail-content { text-align: left; } .detail-content strong { display: block; font-size: 0.9rem; opacity: 0.7; font-weight: 500; } .detail-content p { margin: 0; font-weight: 600; color: ${theme === 'light' ? 'var(--text-light)' : 'var(--text-dark)'}; } .source-link { position: absolute; bottom: 20px; right: 20px; } .source-link a { color: ${theme === 'light' ? 'var(--accent-light)' : 'var(--accent-dark)'}; text-decoration: none; opacity: 0.7; transition: opacity 0.3s ease; } .source-link a:hover { opacity: 1; } .error-message { color: ${theme === 'light' ? 'darkred' : 'salmon'}; margin-bottom: 15px; font-weight: 500; } @media (max-width: 600px) { .weather-container { padding: 20px; } .temperature { font-size: 3.5rem; } .additional-details { flex-direction: column; } .location-search { flex-direction: column; } } `; }

techMember