# VoiceCare - 亲声伴读

**让科技更有温度，让陪伴更简单**

VoiceCare 是一款专为老年人设计的语音学习应用，通过子女录制的声音帮助父母学习英语，消除技术恐惧，增进亲子互动。

## 🎯 设计理念

- **消除技术恐惧**：超大触控区域，直观的操作流程
- **温暖视觉**：柔和的配色方案，舒适的视觉体验
- **即时反馈**：每一步操作都有明确的视觉和听觉反馈
- **适老化设计**：大字体、高对比度、简单易懂的文案

## 📁 项目结构

```
voicecare/
├── index.html              # 入口导航页
├── elder/                  # 老人端页面
│   ├── index.html          # 首页（时间问候、学习状态）
│   ├── learning.html       # 学习页（单词学习、录音波形）
│   ├── feedback.html       # 反馈页（送花、录音、重听）
│   ├── freestyle.html      # 自由学习页（短语选择）
│   ├── css/
│   │   └── elder-style.css # 公共样式
│   ├── js/
│   │   └── elder-app.js    # 公共逻辑
│   └── assets/
│       └── elder-icon.svg  # 图标
└── README.md
```

## ✨ 核心功能

### 首页 (elder/index.html)
- ⏰ 时间问候语（早上好/下午好/晚上好）
- 📊 最近学习状态展示
- 🔔 新问候通知徽章
- 👤 子女头像呼吸光晕动画
- 🎯 超大启动按钮："点一下 听声音"

### 学习页 (elder/learning.html)
- 🔊 140px 超大播放按钮 + 心跳光晕
- 🔤 单词字母独立跳动动画
- 📈 录音波形可视化
- 🇨🇳 中文谐音开关（默认关闭）
- 📝 固定底部进度指示器
- 💪 全面加粗字体（700）

### 反馈页 (elder/feedback.html)
- 🌸 增强撒花动画（多种 emoji）
- 🎤 录音引导文案优化
- ✅ 完成反馈弹窗
- 💐 三种回应方式：送花、录音、重听

### 自由学习页 (elder/freestyle.html)
- 📚 丰富短语库（问候、日常、购物、健康等）
- ⏱️ 10 分钟学习计时器
- 📊 学习统计追踪
- 🎧 跟读学习模式

## 🛠️ 技术栈

- **纯 HTML/CSS/JS**：无构建步骤，即开即用
- **Tailwind CSS CDN**：快速样式开发
- **Material Symbols**：谷歌图标库
- **Noto Sans SC**：中文字体支持
- **LocalStorage**：本地数据持久化

## 🚀 使用方式

### 本地预览
直接打开 `index.html` 即可预览所有页面。

### GitHub Pages 部署
本项目已部署在 GitHub Pages：
https://jackh23240-dot.github.io/voicecare/

### 老人端入口
https://jackh23240-dot.github.io/voicecare/elder/

## 🎨 设计规范

### 颜色系统
- **主色调**：暖橙色 (#FF9F43) - 温暖、亲和
- **背景色**：米白色 (#FFF8F0) - 舒适、护眼
- **文字色**：深灰色 (#1a1a1a) - 高对比度、易读

### 字体规范
- **字重**：全部使用 700+ 粗体
- **字号**：最小 16px，主要按钮 40px+
- **行高**：1.1-1.6，保证可读性

### 触控区域
- **最小尺寸**：48x48px
- **推荐尺寸**：72x72px 以上
- **间距**：元素间至少 16px

## 📱 响应式设计

采用 Mobile First 策略：
- 优先优化手机体验
- 自动适配平板和桌面
- 触控友好的交互设计

## 🔧 开发指南

### 添加新页面
1. 在 `elder/` 目录下创建 HTML 文件
2. 引用公共样式和脚本
3. 遵循现有页面的结构规范

### 修改样式
1. 优先使用 Tailwind 工具类
2. 自定义动画写入 `elder-style.css`
3. 保持颜色系统一致性

### 添加功能
1. 通用逻辑写入 `elder-app.js`
2. 页面特定逻辑写在各自 HTML 中
3. 使用 LocalStorage 保存用户数据

## 📊 性能优化

- **音频预加载**：减少播放延迟
- **CSS 动画**：GPU 加速，流畅体验
- **懒加载**：按需加载资源
- **缓存策略**：LocalStorage 持久化

## 🎯 适老化改进清单

### P0 - 核心改进 ✅
- [x] 时间问候语
- [x] 最近学习记录
- [x] 三层呼吸光晕
- [x] 超大播放按钮 (140px)
- [x] 单词字母跳动动画
- [x] 字体加粗到 700
- [x] 谐音开关默认关闭
- [x] 进度指示器固定底部
- [x] 增强撒花动画
- [x] 录音引导文案
- [x] 完成反馈弹窗

### P1 - 整体优化 ✅
- [x] 文字颜色对比度增强
- [x] 按钮阴影统一系统
- [x] 音频预加载优化

## 📝 更新日志

### v2.0.0 (2026-04-12)
**老人端体验优化**
- 首页：添加时间问候、最近学习记录、增强呼吸光晕
- 学习页：140px 超大播放按钮、单词字母跳动动画、字体加粗
- 反馈页：增强撒花动画、录音引导文案、完成反馈弹窗
- 整体：提升对比度、优化触控体验、适老化改进

### v1.0.0 (2026-04-11)
**初始版本**
- 基础页面结构
- 核心学习流程
- 自由学习模式

## 👥 团队

- **Creator**: Jacky (VoiceCare Agent)
- **Email**: jacky@voicecare.ai

## 📄 许可证

MIT License

---

**让爱没有距离，让陪伴更有温度** 🦞