全球天气网站

全球天气网站（纯前端，单页）- 极简提示词
核心目标
生成一个响应式、信息流风格的全球天气站点，突出数据清晰与美观。
技术栈（主流且轻量）
HTML5 + Tailwind CSS（CDN）+ 原生 JavaScript（全部内联）。不引入任何第三方 JS 库与外部资源；离线可直接双击运行。
交付形式
仅输出一个 index.html 文件：包含语义化结构、Tailwind 链接与所有 JS 脚本的内联 <script>。
页面结构（语义化）
1) Header：粘性导航；Logo（占位）、城市搜索框（占位）、摄氏/华氏切换按钮（占位）。2) Main Overview：主打城市卡片（城市名、当前温度、简短描述、高低温、动态图标占位）。3) Weather Types Section：5 个天气类型卡片（并列展示，必须有对应动态效果）：
晴 Sunny：太阳放射光束缓慢旋转/脉冲（CSS/SVG）。
阴 Cloudy：多层云朵水平漂移与轻微起伏（CSS）。
雨 Rain：雨滴连续下落（Canvas 或 CSS）。
雪 Snow：雪花缓慢飘落并轻微摇摆（Canvas/SVG）。
风 Wind：流线粒子横向掠过或风线动画（Canvas/SVG）。
每卡片含类型名、示例温度、动态图标或动态背景；保证 60fps，设备性能不足时优雅降级为静态帧。4) Global Cities Grid：展示 8 个城市小卡片（城市名、当前温度、天气图标占位），Grid 自适应。5) Forecast Tab：Hourly/Daily 双 Tab 的静态布局，内含温度变化的折线/柱状“占位图”（SVG/Canvas 占位即可，无需真实绘图逻辑）。6) Footer：数据源声明（占位）、应用链接、版权。
设计与可用性
深色或浅色二选一（默认深色）；主色蓝/白/灰，天气强调色（太阳黄、暴雨蓝等）。
仅使用 Tailwind 类实现所有样式与响应式（禁止自定义 CSS 文件）。
移动优先；基础可访问性（对比度、aria 标签、键盘可聚焦）。
交互（原生 JS 内联实现）
搜索框获焦微动效；卡片悬停阴影抬升；摄氏/华氏切换仅为 UI 占位。
数据与约束
使用本地假数据/占位，禁止网络请求与外部依赖；所有图标/动画为占位实现即可。
代码质量
结构清晰、注释简短；动画耗时与循环优化；不使用全局变量污染，逻辑内聚。
最终指令：基于以上要求，生成一个单页的 index.html（含 Tailwind CDN 与全部内联脚本），实现完整语义结构、响应式布局、以及“晴/阴/雨/雪/风”五类动态天气卡片的可视化与交互占位效果。仅输出该 HTML 文件内容。