天气信息面板

使用 HTML5、CSS3、JavaScript 和 OpenWeatherMap API 构建一个综合天气仪表板。打造视觉效果出色的界面，以合适的图标展示当前天气状况，并根据天气与一天中的时段更换背景。展示详细的5日天气预报，每天都可展开查看逐小时明细。实现支持城市名称和坐标的地点搜索，带自动补全和历史记录。添加地理定位支持，自动检测用户所在位置。包含温度单位（°C/°F）和时间格式的切换开关。展示带优先级高亮的严重天气预警。在数据可用时，显示详细的气象数据，包括风速/风向、湿度、气压、紫外线指数和空气质量。包含带可视化指示的日出/日落时间。使用 CSS Grid 创建完全响应式的布局，适配所有设备尺寸，并保持合适的信息密度。

Build a comprehensive weather dashboard using HTML5, CSS3, JavaScript and the OpenWeatherMap API. Create a visually appealing interface showing current weather conditions with appropriate icons and background changes based on weather/time of day. Display a detailed 5-day forecast with expandable hourly breakdown for each day. Implement location search with autocomplete and history, supporting both city names and coordinates. Add geolocation support to automatically detect user's location. Include toggles for temperature units (°C/°F) and time formats. Display severe weather alerts with priority highlighting. Show detailed meteorological data including wind speed/direction, humidity, pressure, UV index, and air quality when available. Include sunrise/sunset times with visual indicators. Create a fully responsive layout using CSS Grid that adapts to all device sizes with appropriate information density.