🗓️ Go Holiday - 极简假期日历搜索首页

一个优雅的浏览器首页，将搜索引擎与假期日历完美融合。支持自定义假期数据，让你的每一天都清晰可见。

在线演示 • 功能特性 • 快速开始 • 自定义配置

---

✨ 功能特性

🔍 智能搜索

• 双引擎切换：一键切换 Google 和 Bing 搜索引擎
• 智能识别：自动识别网址和搜索关键词
• 快捷操作：回车即搜，流畅体验

📅 假期日历热力图

• 全年视图：53周 × 7天的完整年度日历
• 多彩标记：
  • 🔴 法定假期 - 红色标记
  • 🔵 个人假期 - 蓝色标记
  • ⚫ 调休工作日 - 深灰色标记
  • 🟢 当前行程 - 绿色标记
  • 🟡 计划行程 - 黄色标记
• 交互体验：
  • 悬停显示详细信息
  • 点击聚焦，周围渐变效果
  • 自动定位到今天
  • 今日高亮蓝色边框

🎨 响应式设计

• 桌面端：横向滚动的完整热力图
• 移动端：3列 × 4行的月度网格布局
• 自适应：完美适配各种屏幕尺寸

⚙️ 灵活配置

• 自定义数据源：支持本地或远程 JSON 文件
• URL 参数：通过 ?holiday=your-data.json 快速切换
• 持久化存储：配置自动保存到浏览器

---

🚀 快速开始

方法一：直接使用

1. 克隆仓库

git clone https://github.com/tagorewang/go-holiday.git
cd go-holiday

2. 打开页面

# 直接用浏览器打开 index.html
open index.html  # macOS
# 或
start index.html  # Windows
# 或
xdg-open index.html  # Linux

方法二：本地服务器（推荐）

# 使用 Python 启动本地服务器
python -m http.server 8000

# 或使用 Node.js
npx serve

# 然后访问 http://localhost:8000

方法三：设为浏览器首页

1. 将项目部署到 GitHub Pages 或任意静态托管服务
2. 在浏览器设置中将首页设为部署后的 URL
3. 享受每次打开浏览器的愉悦体验 ✨

---

🎯 使用方法

搜索功能

1. 在搜索框输入关键词或网址
2. 按 Enter 键执行搜索或跳转
3. 点击右上角开关切换搜索引擎

查看假期

• 桌面端：鼠标悬停在日期格子上查看详情
• 移动端：点击日期格子显示信息
• 聚焦效果：点击任意日期，周围会产生渐变聚焦效果

自定义假期数据

1. 点击右上角 ⚙️ 设置按钮
2. 输入你的 holidays.json 文件路径或 URL
3. 点击保存，页面自动刷新

---

📝 自定义配置

holidays.json 格式

{
  "2026-01-01": { 
    "type": "holiday", 
    "name": "元旦" 
  },
  "2026-02-14": { 
    "type": "personal", 
    "name": "情人节" 
  },
  "2026-06-15": { 
    "type": "trip_current", 
    "name": "新疆旅行" 
  },
  "2026-09-10": { 
    "type": "trip_next", 
    "name": "新加坡旅行" 
  },
  "2026-01-04": { 
    "type": "workday", 
    "name": "调休补班" 
  },
  "2026-10-20": { 
    "type": "color_life", 
    "name": "自定义事件", 
    "color": "#8E44ADCC" 
  }
}

支持的类型（type）

类型	说明	颜色
holiday	法定假期	🔴 红色
personal	个人假期	🔵 蓝色
workday	调休工作日	⚫ 深灰色
trip_current	当前行程	🟢 绿色
trip_next	计划行程	🟡 黄色
color_life	自定义颜色	🎨 由 color 字段决定（缺省为紫色）

自定义颜色（color）

• 仅当 type 为 color_life（或填写了未知的 type）时，会读取同级的 color 字段作为格子颜色。
• 其余预制 type 的颜色固定，不受 color 字段影响。
• color 支持格式：#RGB、#RGBA、#RRGGBB、#RRGGBBAA（# 可省略），以及 rgb() / rgba() / hsl() / hsla()。
• 格式非法时自动回退到该 type 的默认颜色。

{
  "2026-07-20": { "type": "color_life", "name": "生日", "color": "#ffffffff" },
  "2026-07-21": { "type": "color_life", "name": "纪念日", "color": "rgba(255, 99, 132, 0.8)" }
}

时间流逝表现

日期小于或等于「今天」的格子会自动轻微弱化：略微降低饱和度并叠加稍低的不透明度，用于表达「这段时间已经过去」。弱化幅度较小，原本的颜色依然清晰可辨，未来的日期则保持全饱和度显示。

URL 参数配置

# 使用自定义数据源
index.html?holiday=https://example.com/my-holidays.json

# 使用本地文件
index.html?holiday=my-custom-holidays.json

---

🛠️ 技术栈

• HTML5 - 语义化结构
• Tailwind CSS - 原子化样式框架
• Vanilla JavaScript - 无依赖纯 JS
• Font Awesome - 图标库
• LocalStorage - 配置持久化

---

📂 项目结构

go-holiday/
├── index.html          # 主页面
├── script.js           # 核心逻辑
├── style.css           # 自定义样式
├── holidays.json       # 默认假期数据
├── .gitignore          # Git 忽略配置
└── README.md           # 项目文档

---

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'feat: 添加某个很棒的特性')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

---

📄 开源协议

本项目采用 MIT License 开源协议。

---

💡 灵感来源

这个项目的灵感来自于：

• GitHub 的贡献热力图
• Google 简洁的搜索首页
• 对美好假期的向往 🏖️

---

⬆ 回到顶部

Made with ❤️ by tagorewang

如果这个项目对你有帮助，请给个 ⭐️ Star 支持一下！