zhangl
Refactor index.html, README.md, and style.css for interactive English learning app. Updated HTML structure, added navigation and control features, enhanced styling, and improved documentation in README.
c7e7ea8 | title: 交互式英语学习应用 | |
| emoji: 📚 | |
| colorFrom: blue | |
| colorTo: green | |
| sdk: docker | |
| app_port: 7860 | |
| pinned: false | |
| license: mit | |
| # 交互式英语学习应用 📚 | |
| 一个现代化的交互式英语学习应用，支持点读、翻译显示和音频播放功能。 | |
| ## ✨ 主要功能 | |
| ### 📖 核心学习功能 | |
| - **点读功能**: 点击任意文本片段即可播放对应音频 | |
| - **双语显示**: 支持英文原文和中文翻译切换显示 | |
| - **音频播放**: 高质量音频播放，支持播放控制和进度调节 | |
| - **页面导航**: 流畅的页面切换，支持进度跟踪 | |
| ### 🔍 高级功能 | |
| - **全文搜索**: 快速搜索英文原文和中文翻译内容 | |
| - **智能书签**: 添加/删除书签，快速跳转到重要页面 | |
| - **播放控制**: 支持播放速度调节、重复播放等 | |
| - **键盘快捷键**: 完整的键盘操作支持 | |
| ### 🎨 用户体验 | |
| - **响应式设计**: 完美适配桌面和移动设备 | |
| - **现代化界面**: 美观的材质设计风格 | |
| - **流畅动画**: 丰富的交互动画效果 | |
| - **本地存储**: 自动保存用户设置和书签 | |
| ## ⌨️ 键盘快捷键 | |
| | 快捷键 | 功能 | | |
| |--------|------| | |
| | `←` / `→` | 上一页 / 下一页 | | |
| | `空格` | 播放/暂停当前音频 | | |
| | `T` | 切换翻译显示 | | |
| | `I` | 显示/隐藏交互区域 | | |
| | `P` | 播放整页内容 | | |
| | `R` | 重复播放当前音频 | | |
| | `B` | 添加/删除书签 | | |
| | `F` | 打开搜索功能 | | |
| ## 🎮 使用指南 | |
| ### 基本操作 | |
| 1. **页面切换**: 使用导航按钮或键盘箭头键 | |
| 2. **点读学习**: 点击页面上的任意文本片段 | |
| 3. **翻译显示**: 点击翻译按钮或按T键切换 | |
| 4. **音频控制**: 使用底部音频播放控制器 | |
| ### 搜索功能 | |
| 1. 点击搜索图标或按F键 | |
| 2. 输入要搜索的英文或中文内容 | |
| 3. 点击搜索结果直接跳转到对应页面 | |
| ### 书签管理 | |
| 1. 在想要标记的页面点击书签按钮或按B键 | |
| 2. 点击书签图标查看所有书签 | |
| 3. 点击书签项目快速跳转 | |
| 4. 使用删除按钮移除不需要的书签 | |
| ## 🔧 技术栈 | |
| - **前端**: HTML5, CSS3, Vanilla JavaScript | |
| - **字体**: FZKT_GBK.woff (方正楷体) | |
| - **数据**: JSON格式的学习内容 | |
| - **音频**: Web Audio API | |
| - **存储**: localStorage | |
| ## 📄 许可证 | |
| MIT License | |
| --- | |
| **享受学习英语的乐趣！** 🎉 | |