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.
使用 HTML5、CSS3、JavaScript 和 OpenWeatherMap API 构建一个全面的天气仪表板。创建一个视觉上吸引人的界面,根据天气和一天中的时段显示当前天气状况,并配有合适的图标和背景变化。展示详细的 5 天天气预报,每个日期可展开查看逐小时详情。实现位置搜索功能,支持自动补全和搜索历史,同时支持城市名称和坐标输入。添加地理定位功能以自动检测用户位置。包含温度单位(°C/°F)和时间格式的切换开关。以优先级高亮的方式展示恶劣天气警报。显示详细的 meteorological 数据,包括风速/风向、湿度、气压、紫外线指数以及空气质量(如可用)。包含日出/日落时间及可视化指示器。使用 CSS Grid 创建一个完全响应式的布局,适应各种设备尺寸,并保持合适的信息密度。