🌤️ Weather Card

一个漂亮的天气卡片网页应用，由 AstrBot AI 助手 自动生成。

✨ Generated by AstrBot - 纯 HTML/CSS/JavaScript 实现的响应式天气卡片

🚀 在线体验

直接访问在线版本： Weather Card

✨ 特性

• 🎨 毛玻璃效果 - 现代化的毛玻璃设计风格
• 📱 响应式布局 - 完美适配手机、平板和桌面
• 🌍 自动定位 - 自动获取用户位置显示当地天气
• 🔄 实时更新 - 一键刷新获取最新天气数据
• ⚡ 零依赖 - 纯原生实现，无需任何框架
• 🌐 开源免费 - 完全开源，可自由修改

🛠️ 技术栈

• HTML5 - 语义化结构
• CSS3 - 现代样式（Flexbox、Grid、Backdrop-filter）
• JavaScript - ES6+ 原生实现
• OpenWeatherMap API - 天气数据来源

📦 快速开始

本地运行

1. 克隆仓库

   git clone https://github.com/Soulter/weather-card.git
   cd weather-card
   

2. 直接打开 index.html 文件即可

部署到 Vercel

1. Fork 这个仓库
2. 导入到 Vercel - 一键部署
3. 自动上线 - 无需额外配置

🔧 自定义

修改 API Key

在 index.html 中找到以下代码并替换为你自己的 API key：

const API_KEY = '你的OpenWeatherMap API Key';

修改默认城市

在 getLocation() 函数中修改默认坐标：

// 默认北京坐标
resolve({ lat: 39.9042, lon: 116.4074 });

📄 许可证

MIT License - 可自由使用、修改和分发

🤖 关于

这个项目由 AstrBot AI 助手 在 2025-10-03 自动生成，展示了现代 Web 开发的简洁与优雅。

---

Made with ❤️ by AstrBot