七夕传统文化网站

一个融合中国传统七夕文化元素的现代化静态网站，展示优雅高级的扁平化设计风格。

🌟 特色功能

🎨 设计特色

• 扁平化设计: 简洁优雅的现代界面
• 七夕主题色彩: 绛红、鹊羽蓝、金鹊黄等传统色彩
• 响应式布局: 完美适配桌面、平板、手机
• 中国文化元素: 现代化表达传统纹样与意象

📖 内容板块

1. 七夕传说: 牛郎织女故事时间轴展示
2. 诗词鉴赏: 历代七夕经典诗词精选
3. 传统习俗: 穿针乞巧、喜蛛应巧等民俗介绍
4. 祈愿祝福: 互动祈愿墙功能

⚡ 交互功能

• 七夕倒计时: 实时显示距离七夕节剩余时间
• 日夜模式: 一键切换浅色/深色主题
• 祈愿墙: 用户可发布祝福愿望（本地存储）
• 平滑滚动: 优雅的页面导航体验
• 微交互动画: 丰富的视觉反馈效果

🚀 技术栈

• HTML5: 语义化标签，无障碍访问
• CSS3:
  • CSS Variables (自定义属性)
  • Flexbox & Grid 布局
  • 动画与过渡效果
  • 响应式设计
• Vanilla JavaScript:
  • ES6+ 语法
  • 面向对象编程
  • 事件处理与DOM操作
  • 本地存储

📱 兼容性

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+
• ✅ 移动端浏览器

🛠️ 安装使用

克隆项目

git clone <repository-url>
cd website_yy

本地开发

使用任意HTTP服务器即可：

Python 3:

python3 -m http.server 8000

Node.js (http-server):

npx http-server -p 8000

Live Server (VS Code): 安装Live Server扩展，右键HTML文件选择"Open with Live Server"

访问网站

打开浏览器访问: http://localhost:8000

📁 项目结构

website_yy/
├── index.html          # 主页面
├── css/
│   └── style.css       # 样式文件
├── js/
│   └── main.js         # 交互逻辑
├── images/             # 图片资源 (预留)
├── assets/             # 其他资源 (预留)
└── README.md           # 项目说明

🎯 核心特性详解

🌈 色彩系统

• 主色调: 绛红 (#DC143C)、鹊羽蓝 (#4A6FA5)、金鹊黄 (#DAA520)
• 辅助色: 玉白 (#F8F8FF)、墨黑 (#2C2C2C)、浅金 (#FFF8DC)
• 强调色: 中国红 (#CD212A)、金色点缀 (#FFD700)

🎭 动画效果

• 入场动画: 渐入向上效果
• 悬停效果: 微妙的缩放与阴影变化
• 主题切换: 平滑的颜色过渡
• 粒子背景: 星空飘逸效果
• 节日特效: 七夕当天的庆祝动画

📱 响应式设计

• 断点设置: 768px 移动端优化
• 弹性布局: 自适应屏幕尺寸
• 触摸优化: 移动端交互体验

🔧 自定义配置

修改七夕日期

在 js/main.js 中的 getNextQixi() 函数可以调整七夕节日期：

// 示例：2025年七夕是8月29日，2026年是8月19日
if (currentYear === 2025) {
    qixiDate = new Date(2025, 7, 29); // 8月29日
} else if (currentYear === 2026) {
    qixiDate = new Date(2026, 7, 19); // 8月19日
}

主题色彩调整

在 css/style.css 的 :root 选择器中修改CSS变量：

:root {
    --color-crimson: #your-color;
    --color-magpie-blue: #your-color;
    /* ... 其他颜色变量 */
}

祈愿墙设置

• 愿望数量限制: 修改 saveWishToStorage() 中的数量
• 显示条数: 修改 addWishToWall() 中的限制
• 示例愿望: 编辑 loadSampleWishes() 中的内容

🎨 设计理念

本网站致力于将中国传统七夕文化与现代Web设计完美融合：

1. 传统与现代: 保持文化内核，运用现代设计语言
2. 优雅简约: 扁平化设计突出内容本身
3. 情感共鸣: 通过视觉设计唤起文化认同
4. 互动体验: 让用户参与文化传承

🌟 愿景

希望通过这个网站，让更多人了解和喜爱中国传统文化，感受七夕节承载的美好寓意，在数字时代传承和弘扬优秀传统文化。

📄 许可证

此项目仅供学习和文化传播使用。

---

愿所有的爱情都能像牛郎织女一样坚贞不渝 ✨