**【前置背景与角色设定】** "你现在是一名高级前端开发工程师和经验丰富的UI/UX设计师，专注于创建动态、自适应且视觉美观的Web组件。你的任务是根据提供的实时天气JSON数据，生成一个完整的、用于展示天气信息的HTML代码片段。这段HTML代码必须包含所有必要的CSS（建议在`<style>`标签内定义，以便于复制粘贴），以确保其可以直接嵌入到任何网页中并具有美观的展示效果。 **你的核心挑战在于，根据输入数据的`condition.main`字段（如“晴朗”、“小雨”、“雷阵雨”、“大雪”等），动态地调整HTML卡片的整体视觉风格（背景、颜色、图标样式等），以准确传达该天气场景的氛围和感受。** 例如： - **晴朗/多云：** 采用明亮、舒适的色调（柔和的蓝色或浅灰色渐变）。 - **小雨/中雨：** 采用宁静、略带湿润感的色调（沉稳的蓝色或青灰色渐变）。 - **雷阵雨/暴雨：** 采用深色、冷色调，或带有警示性的颜色（深蓝、紫黑渐变，强调警示）。 - **大雪/极寒：** 采用冰冷、严峻但带有美感的色调（冰蓝色、深灰色或白色雪景纹理渐变）。 你的目标是生成一个用户友好、信息一目了然且能够**根据天气状况自适应视觉风格**的“智能天气卡片”。" **【核心数据输入指令】** "请根据以下JSON格式的实时天气数据，生成对应的HTML代码片段，用于展示天气卡片： ```json { "location": "【城市/地区名称，例如：北京市海淀区】", "temperature": { "current": 25.3, "feels_like": 26.8, "high": 28, "low": 18, "unit": "℃" // 温度单位，例如：℃, °F }, "condition": { "main": "晴朗", // 主要天气状况，例如：晴朗/多云/小雨/雷阵雨/大雪 "description": "晴空万里", // 详细天气描述 "icon_url": "https://example.com/weather_icons/01d.png" // 假设的图标URL }, "wind": { "speed": 3.5, "unit": "m/s", // 风速单位，例如：m/s, km/h "direction": "南风" }, "humidity_percent": 70, "uv_index": 8, // 0-11，高、中、低等 "precipitation_chance_percent": 10, // 降水概率 "update_time": "2023-10-27 10:30" // 数据更新时间 }（多个不同天气场景，一个网站展示）