[{"role":"user","parts":[{"text":"create a futuristic weather station widget with static data that I can modify in the code"}]},{"role":"model","parts":[{"text":"This futuristic Weather Station widget features a high-tech HUD (Heads-Up Display) aesthetic, utilizing neon glows, scanline effects, and a modular grid layout.\n\nThe data is hardcoded within the `state` object in the JavaScript controller, allowing you to easily modify values like temperature, humidity, and wind speed directly in the code. It uses HomeGenie's theme-compliant CSS variables while adding custom sci-fi styling.\n\n```html\n
\n \n
\n
\n LOCATION_ID\n NEO-TOKYO\n
\n
\n ●\n LIVE_FEED\n
\n
\n\n \n
\n
\n
\n 24\n °C\n
\n
SCATTERED_CLOUDS
\n
\n
\n cloud\n
\n
\n\n \n
\n
\n humidity_percentage\n HUMIDITY\n 65%\n
\n
\n air\n WIND_SPD\n 12.4 km/h\n
\n
\n compress\n PRESSURE\n 1012 hPa\n
\n
\n wb_sunny\n UV_INDEX\n 3.2\n
\n
\n\n \n
\n
\n```\n\n```css\n@import 'assets/styles/widget-ui.css';\n@import 'assets/styles/flex-layout-attribute.min.css';\n\n:host {\n display: block;\n height: 100%;\n background: #050508;\n font-family: 'Courier New', Courier, monospace;\n overflow: hidden;\n}\n\n.container {\n position: relative;\n padding: 12px;\n height: 100%;\n box-sizing: border-box;\n border: 1px solid #00f2ff33;\n background: linear-gradient(180deg, rgba(0, 242, 255, 0.05) 0%, rgba(0, 0, 0, 0) 100%);\n}\n\n.header {\n padding-right: 48px; /* Safe Zone */\n margin-bottom: 16px;\n border-bottom: 1px solid #00f2ff33;\n padding-bottom: 8px;\n}\n\n.system-label {\n font-size: 0.6em;\n color: #00f2ff;\n opacity: 0.7;\n letter-spacing: 2px;\n}\n\n.glow-text {\n color: #00f2ff;\n text-shadow: 0 0 10px rgba(0, 242, 255, 0.8), 0 0 20px rgba(0, 242, 255, 0.4);\n}\n\n.status-indicator {\n font-size: 0.7em;\n color: #00f2ff;\n gap: 6px;\n}\n\n.blink {\n color: #ff0055;\n animation: blink-anim 1.5s infinite;\n}\n\n@keyframes blink-anim {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n.main-display {\n flex: 1;\n gap: 24px;\n margin-bottom: 16px;\n}\n\n.temp-big {\n font-size: 4em;\n font-weight: bold;\n line-height: 1;\n}\n\n.unit-big {\n font-size: 1.5em;\n color: #00f2ff;\n margin-top: 8px;\n}\n\n.condition {\n font-size: 0.8em;\n color: #ff0055;\n letter-spacing: 3px;\n margin-top: 4px;\n}\n\n.icon-glow {\n font-size: 64px;\n color: #00f2ff;\n filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.5));\n}\n\n.sensor-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n border-top: 1px solid #00f2ff33;\n padding-top: 12px;\n}\n\n.sensor-item {\n background: rgba(0, 242, 255, 0.03);\n border: 1px solid rgba(0, 242, 255, 0.1);\n padding: 8px 4px;\n border-radius: 4px;\n}\n\n.mini-icon {\n font-size: 18px;\n color: #00f2ff;\n margin-bottom: 4px;\n}\n\n.mini-label {\n font-size: 0.5em;\n color: #888;\n margin-bottom: 2px;\n}\n\n.mini-value {\n font-size: 0.8em;\n color: #fff;\n font-weight: bold;\n}\n\n.scanlines {\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));\n background-size: 100% 3px, 3px 100%;\n pointer-events: none;\n z-index: 10;\n}\n```\n\n```javascript\nclass FuturisticWeather extends ControllerInstance {\n settings = {\n defaultSize: 'medium',\n sizeOptions: ['medium', 'big']\n };\n\n // --- STATIC DATA: MODIFY THESE VALUES --- \n state = {\n city: \"NEO-TOKYO\",\n temp: 24,\n condition: \"SCATTERED_CLOUDS\",\n icon: \"cloud\",\n humidity: \"65%\",\n wind: \"12.4 km/h\",\n pressure: \"1012 hPa\",\n uv: \"3.2\",\n status: \"LIVE_FEED\"\n };\n\n onCreate() {\n // Initialize UI with static data\n this.refreshUI();\n \n // If a module is bound, we could override static data with real data,\n // but for this request we stick to the static state object.\n if (this.boundModule) {\n const tempField = this.boundModule.field('Sensor.Temperature');\n if (tempField) {\n this.subscribe(tempField, (f) => {\n this.state.temp = Math.round(f.decimalValue);\n this.refreshUI();\n });\n }\n }\n }\n\n refreshUI() {\n const m = this.model();\n \n // Mapping state to model fields\n m.city_name = this.state.city;\n m.temp_val = this.state.temp;\n m.condition_text = this.state.condition;\n m.weather_icon = this.state.icon;\n m.humidity_val = this.state.humidity;\n m.wind_val = this.state.wind;\n m.pressure_val = this.state.pressure;\n m.uv_val = this.state.uv;\n m.status_code = this.state.status;\n\n this.update();\n }\n\n onDispose() {\n // Cleanup logic if needed\n }\n}\n```\n"}]}]