{location.name} Weather

\n {error &&

{error}

}\n {weather && (\n

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

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

\n \n

\n 💨\n

\n Wind Speed\n

{weather.current_weather.windspeed} km/h

\n 💧\n

\n Humidity\n

{weather.hourly.relativehumidity_2m[0]}%

\n )}\n

\n \n View 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 Modern Weather Dashboard\n \n \n \n \n

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