新年摇签 AI 解签官 
一款融合传统新春文化与现代理性思维的新年祈福互动应用。
项目介绍
「新年摇签 AI 解签官」通过四步流程——选择签马、确认角色、摇签祈福、获取解签结果，为用户提供一个既有趣又实用的新年运势指引。
核心特色
- 反内卷设计理念：拒绝盲目追求好运，提倡「不玄学·现实·反内卷·清醒向前」的价值观
- 个性化解签：根据用户选择的签马（事业/感情/财运/健康/学业/自由）和角色（职场新人/职场老兵/创业者/自由职业者/学生/探索者），提供针对性的建议
- 清新视觉风格：采用紫蓝渐变背景搭配粉红主题色，融合传统红包元素与现代扁平化设计
- 完全前端实现：无需后端服务，打开即用
技术栈
- HTML5：页面结构
- CSS3：渐变背景、动画效果、响应式布局
- 原生 JavaScript：交互逻辑、状态管理
核心功能实现
1. 步骤切换系统
通过 showStep() 函数控制四个步骤页面的显示与隐藏，使用 CSS 类 .active 配合 fadeIn 动画实现平滑过渡。
2. 签马与角色选择
采用 Grid 布局实现 2×3 的选项卡片，选中状态通过 .selected 类高亮显示，触发渐变背景效果。
3. 摇签动画
CSS 关键帧动画 shakeStick1/2/3 模拟竹签摇动效果，摇签过程持续 2.5 秒，增强仪式感。
4. 解签数据结构
const horseData = {
'事业': {
keywords: ['节奏控制', '专注当下', '适度放手'],
hints: ['不要追求完美，完成比完美更重要', ...]
},
// 其他签马...
};
5. 随机结果生成
- 签运等级随机抽取：
上上签、上签、中签、清醒签 - 解签词库包含 12 条理性建议，避免玄学迷信
截图展示
步骤一：选择签马
用户可以从六个方向中选择自己关注的新年运势领域，包括事业、感情、财运、健康、学业和自由。
步骤二：选择角色
用户根据自己的身份选择对应的角色类型，以便获得更精准的建议。
步骤三：摇签页面
点击摇签按钮后，系统展示竹签摇动动画，营造真实的摇签体验。
步骤四：解签结果
展示签运等级、关键词、好运提示和解签词，帮助用户获得积极而理性的新年指引。
在线体验
本地运行
- 克隆项目仓库：
git clone git@github.com:guangsizhongbin/luck_right_now.git
cd luck_right_now
- 在浏览器中打开
index.html文件即可开始体验
兼容性
- 支持主流现代浏览器（Chrome、Safari、Firefox、Edge）
- 完全响应式设计，适配桌面端和移动端设备
- 移动端布局优化，提供更好的触摸交互体验
文件结构
luck_right_now/
├── index.html # 主页面
├── style.css # 样式文件
├── script.js # 交互逻辑
├── step1-horse-selection.jpg # 步骤一截图
├── step3-shake-page.jpg # 步骤三截图
├── step4-result-page.jpg # 步骤四截图
├── mobile-landscape.jpg # 移动端横屏截图
├── mobile-portrait.jpg # 移动端竖屏截图
└── README.md # 项目说明
使用到的 iFlow CLI 功能
本项目主要由以下 iFlow CLI 功能辅助开发：
- 文件读取与编辑：使用
read_file和write_file工具快速创建和修改 HTML、CSS、JavaScript 文件 - 代码搜索：使用
search_file_content工具在代码库中定位和修改特定代码片段 - 项目结构探索：使用
list_directory和glob工具查看项目文件结构 - 命令执行：使用
run_shell_command工具运行项目测试和构建命令
许可证
MIT License
愿你在新的一年里，清醒向前，好运常伴！
