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