浅草缘签 是一款基于 Web 的“赛博占卜”应用，旨在复刻日本浅草寺的传统抽签仪式。通过数字化手段，用户不仅可以通过点击互动体验传统的百签占卜，还能通过摄像头手势识别，体验极具沉浸感的“隔空抽签”。
- 点击抽签：经典的网页交互模式，点击九宫格抽屉即可完成抽签，适合所有设备。
- 手势抽签：基于计算机视觉（Computer Vision）的创新模式。
- 调用设备摄像头捕捉手部动作。
- 悬停选择：手指在空中移动，屏幕上的抽屉会实时响应高亮。
- 捏合确认：拇指与食指捏合保持 2 秒，即可完成“取签”动作。
- 隔空换批：拇指与中指捏合，可刷新当前的抽屉排列。
- 收录了浅草寺观音灵签的全部 100 支签文。
- 双语展示：包含中文签文及日文原文对照。
- 详尽解读：提供签诗原文、白话文解读以及针对“愿望、疾病、失物、等待的人”等具体事项的详细指引。
- 吉凶判定：严格遵循凶、吉、末吉、半吉等七种吉凶等级。
- 采用 Noto Serif SC（思源宋体）营造庄重的传统文化氛围。
- 响应式设计，完美适配桌面端、平板及手机屏幕。
- 细腻的视觉反馈：木质纹理的抽屉、金色的高亮边框、以及抽到签后的展开动画。
- 自动保存最近 5 次抽签结果。
- 方便用户随时回顾之前的签文与解读。
- 核心框架：Vite + TypeScript
- 手势识别：MediaPipe Hands (Google)
- 样式处理：原生 CSS3 (Flexbox/Grid, CSS Variables)
- 部署平台：Vercel
git clone https://github.com/your-username/Sensoji-Temple-fortune.git
cd Sensoji-Temple-fortunenpm install
# 或者
yarnnpm run dev打开浏览器访问 http://localhost:5173 即可预览。
npm run build构建产物将输出到 dist 目录。
由于浏览器安全策略限制，手势识别功能需要满足以下条件之一才能正常使用：
- 本地开发环境：使用
http://localhost访问。 - 线上环境：必须使用 HTTPS 协议访问。
注意：部分移动端浏览器（如 iOS Safari）可能存在兼容性差异，建议使用 Chrome 桌面版或安卓 Chrome 体验最佳效果。
.
├── public/ # 静态资源 (图片、图标)
├── src/
│ ├── contents.json # 100 支签的完整数据
│ ├── contents.ts # 数据类型定义与加载逻辑
│ ├── main.ts # 核心业务逻辑 (手势识别、DOM 操作、状态管理)
│ ├── style.css # 全局样式
│ └── vite-env.d.ts # Vite 类型声明
├── index.html # 入口 HTML
├── package.json # 项目配置
└── tsconfig.json # TypeScript 配置
本项目仅供学习与交流使用。签文内容源自传统文化典籍。