Qing WebCard - 一个简单的个人主页

声明: 本项目的部分代码和文档是在 AI (Jules) 的帮助下完成的。

Qing WebCard 是一个功能丰富、简单的个人主页项目。它旨在为您提供一个既实用又充满个性的新标签页体验。

🚀 在线体验

您可以直接访问以下链接来体验:

https://qing90bing.github.io/Qing_Webcard/

✨ 主要功能

• 实时时钟与问候: 动态显示当前时间，并根据时间段显示不同的问候语。
• 天气预报: 自动获取您所在城市的天气信息，或手动指定城市。
• GitHub 贡献图: 在主页上直接展示您的 GitHub 贡献活动。
• 一言(Hitokoto): 每次打开都有一句触动心灵的句子。
• 时光胶囊: 以进度条的形式，直观展示今天、本周、本月、今年的时间流逝。
• 节日倒数: 内置中国法定节日和传统节日，并计算距离下一个节日的倒数日。
• 幸运盲盒: 一个有趣的小游戏，每天都可以抽取你的人品值。
• 网站链接: 方便地访问您收藏的网站。
• 高度自定义:
  • 主题模式: 支持浅色、深色模式，并可跟随系统自动切换。
  • 背景源: 可使用内置的随机背景，或指定自己的图片URL。
  • 外观调整: 自由开关卡片毛玻璃效果，调整卡片圆角和背景模糊度。
  • 视图切换: 在 GitHub 视图和天气视图之间自由切换。
• 沉浸模式: 一个极简的全屏时钟界面。
• 新年主题: 在春节期间自动启用，带来节日氛围。
• 智能预加载: 加载时显示优雅的动画，并适配日夜间模式，优化初次加载体验。

⚙️ 个性化配置

所有个性化设置都可以通过点击主页上的 设置按钮 打开设置面板来完成。

可配置项

• 背景来源: 在内置的精美背景和您自己的图片URL之间选择。
• 主题模式: 选择浅色、深色或跟随系统。
• 时间格式: 12小时制或24小时制。
• 主卡片视图: 选择默认显示 GitHub 贡献图还是天气信息。
• 外观设置:
  • 毛玻璃效果: 开启或关闭卡片的半透明模糊背景。
  • 卡片圆角: 通过滑块调整卡片的圆角大小。
  • 背景模糊度: 调整背景图片的模糊程度。
• 一言: 自定义你想要看到的一言类别。
• 重置设置: 一键将所有配置恢复为默认值。

🛠️ 技术栈

• HTML5
• CSS3
• JavaScript (ES6+)
• TailwindCSS: 一个功能类优先的 CSS 框架，用于快速构建用户界面。
• FontAwesome: 提供丰富的图标。
• SimpleBar.js: 用于实现自定义滚动条。

本地运行

如果您想在本地运行或进行二次开发，请遵循以下步骤：

1. 克隆或下载此仓库到您的本地计算机。

   git clone https://github.com/Qing90bing/Qing_Webcard.git

2. 进入项目目录。

   cd Qing_Webcard

3. 因为这是一个纯静态网站，您不需要安装任何依赖。只需用浏览器打开 index.html 文件即可。

   注意: 为了使天气API等功能正常工作，建议通过一个本地服务器来访问 index.html，而不是直接通过 file:// 协议打开。您可以使用任何静态服务器工具，例如 VS Code 的 Live Server 插件。

📁 项目结构

.
├── assets/         # 存放图片、图标、音频等静态资源
├── css/            # 存放所有CSS样式文件
│   ├── animations/ # 动画效果
│   ├── base/       # 基础样式和变量
│   ├── components/ # 各个UI组件的样式 (e.g., cards.css, preloader.css)
│   ├── layout/     # 布局样式
│   ├── pages/      # 页面级样式
│   ├── themes/     # 主题样式 (浅色, 深色, 新年)
│   └── style.css   # 主样式入口文件
├── js/             # 存放所有JavaScript脚本
│   ├── components/ # 存放所有功能和UI组件的逻辑 (e.g., clock.js, preloader.js)
│   ├── core/       # 核心逻辑 (主入口, 设置管理)
│   └── ...
├── index.html      # 主页面HTML文件
└── README.md       # 项目说明文件

🙏 致谢

这个项目的实现离不开以下优秀的技术和资源：

• AI 协助: 项目的部分代码和文档是在 Jules 的帮助下完成的。
• API 服务:
  • GitHub API - 用于获取项目最新的提交记录。
  • GitHub Chart API - 用于生成漂亮的 GitHub 贡献图。
  • 一言 (Hitokoto) - 提供富有哲理或趣味的句子。
  • wttr.in - 一个功能强大的天气预报服务。
  • Open-Meteo - 提供高质量的开源天气预报 API。
  • ip-api.com - 用于根据 IP 地址自动定位。
  • CORS.EU.ORG - 提供了便捷的 CORS 代理服务。
• 框架与库:
  • TailwindCSS - 一个功能类优先的 CSS 框架。
  • SimpleBar.js - 用于实现优雅的自定义滚动条。
• 图标与资源:
  • Font Awesome - 提供了丰富的图标集。
  • Bas Milius' Weather Icons - 一套精美的天气图标。
• 字体:
  • Google Fonts - 使用了 Inter 和 Noto Sans SC 字体。

📄 许可证

本项目基于 MIT 许可证 - 查看 LICENSE 文件了解详情。

---

希望您喜欢这个项目！欢迎提出建议或贡献代码！