ThemeSwitch · 明暗主题切换 + 天气实时电影推荐

🌗 一个带跑道形开关的明暗主题切换页面，集成实时天气和豆瓣 Top250 电影推荐功能。

功能

• 跑道形开关 — 点击/拖拽切换亮色与暗色主题，太阳⇆月亮动画过渡
• 地区切换 — 三级联动（省/市/县），覆盖中国所有行政区
• 实时天气 — 通过 Open-Meteo API 获取温度、湿度、天气状况
• 沉浸式天气效果 — 阴天多云飘灰云、下雨下雪全屏粒子、雷暴闪电
• 电影时刻卡片 — 根据当前温度+天气，从豆瓣 Top250 中智能推荐一部电影，展示海报+评分+热评
• 刷新推荐 — 点 ↻ 按钮换一部
• 自动定位 — 支持浏览器 GPS 定位
• 调试模式 — URL 参数 ?wx=rain-2 等可强制模拟任意天气

快速开始

# 直接双击 index.html 即可打开（部分功能受限）
# 或启动一个本地服务器（推荐，定位功能需要 HTTPS/localhost）
npx serve .
# 打开 http://localhost:3000

线上 Demo

https://zzq1419.github.io/theme-switch/

🎉 GitHub Pages 永久链接，HTTPS 全功能可用（含定位）

调试天气

在 URL 后加 ?wx= 参数可强制模拟天气效果：

参数	效果	示例
?wx=sunny	☀️ 晴	?wx=sunny
?wx=partly	⛅ 多云	?wx=partly
?wx=overcast	☁️ 阴	?wx=overcast
?wx=fog	🌫️ 雾	?wx=fog
?wx=drizzle	🌦️ 毛毛雨	?wx=drizzle
?wx=rain-1	🌧️ 小雨	?wx=rain-1
?wx=rain-2	🌧️ 中雨	?wx=rain-2
?wx=rain-3	🌧️ 大雨	?wx=rain-3
?wx=snow-2	❄️ 中雪	?wx=snow-2
?wx=thunder	⛈️ 雷暴	?wx=thunder

技术栈

• 纯前端 — 单文件 index.html，CSS + JS 全内嵌，零依赖
• Open-Meteo — 免费开源天气 API，无需 API Key
• Nominatim — 经纬度反向地理编码
• 豆瓣 Top250 — 本地 CSV 数据（250 部电影 + 海报 + 热评）
• CloudStudio — 在线部署预览

数据来源

• douban_top250.csv — 豆瓣电影 Top250 榜单数据（含评分、短评、海报链接）
• 天气数据 — Open-Meteo 免费 API
• 海报图片 — 豆瓣电影（仅本地展示，开源版本通过 poster_url 直接引用）

项目结构

theme-switch/
├── index.html              ← 核心页面（93KB，全部嵌入）
├── douban_top250.csv       ← 电影数据（250 部）
└── posters/                ← 缓存的海报图片（可选，不必须）

开源协议

MIT

致谢

• 天气图标 SVG 灵感来自 Feather Icons
• 电影数据来自豆瓣电影