Specifies a weather dashboard on the OpenWeatherMap API with current conditions, a 5-day forecast with hourly detail and location search.
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 日天气预报，并为每一天提供可展开的逐小时天气详情。实现支持自动补全与历史记录的位置搜索功能，支持城市名称与地理坐标两种输入方式。添加地理定位（geolocation）支持，以自动检测用户当前位置。包含温度单位（°C / °F）与时间格式的切换开关。显示恶劣天气预警，并以高优先级方式突出呈现。在数据可用时，展示详细的气象数据，包括风速/风向、湿度、气压、紫外线指数（UV index）和空气质量（air quality）。显示日出/日落时间，并配以可视化指示器。使用 CSS Grid 创建完全响应式的布局，使其适配所有设备尺寸，并在不同屏幕尺寸下保持恰当的信息密度。