首页 全部提示词 Vibe Coding

天气仪表盘

Weather Dashboard

文本 @f 330 字符 在 prompts.chat 查看 译文有问题?

中文译文

使用 HTML5、CSS3、JavaScript 和 OpenWeatherMap API 构建一个全面的天气仪表板。创建一个视觉上吸引人的界面,显示当前天气状况,并根据天气/一天中的时间显示适当的图标和背景变化。显示详细的 5 天预报,并为每一天提供可展开的逐小时细分。实现带自动补全和历史记录的位置搜索,同时支持城市名称和坐标。添加地理定位支持,以自动检测用户的位置。包括温度单位(°C/°F)和时间格式的切换。显示严重天气警报,并进行优先级高亮。显示详细的气象数据,包括风速/风向、湿度、气压、紫外线指数和空气质量(如果可用)。包括日出/日落时间及视觉指示器。使用 CSS Grid 创建一个完全响应式的布局,能够适应所有设备尺寸,并具有适当的信息密度。

English original

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.