ilaandClaude Opus 4.8
d37b83011a
- design_mockups/play.html：播放页，含逐句字幕高亮 + 点句跳转 + 播放器， 用 ep1 真实台词；CSS 变量化，可迁移进 go-app - design_mockups/list.html：26 集课程列表，含进度环、Act 音频状态、 ep18+ 无音频降级态；用真实集标题 - design_mockups/README.md：设计语言与文档对应说明 - 06-tasks：新增 Phase D / T-200 设计任务 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
23 lines
1.7 KiB
Markdown
23 lines
1.7 KiB
Markdown
# design_mockups — UI 效果稿（HTML/CSS）
|
||
|
||
可在浏览器直接打开的中保真效果稿，**CSS 可直接迁移进 go-app**（技术栈选的就是纯 CSS）。
|
||
|
||
| 文件 | 页面 | 看点 |
|
||
| --- | --- | --- |
|
||
| `play.html` | 播放页 | **逐句字幕同步**：当前句放大+琥珀高亮+左侧光条，已读句变暗；**点任意句跳转**；底部播放器（播/停、上/下一句、进度）。点 ▶ 可看自动逐句推进的效果 |
|
||
| `list.html` | 课程列表 | 26 集卡片：英文/中文标题、Act 幕状态（有音频=琥珀点 / 无音频=虚线）、进度环；顶部"继续学习"卡；ep18+ 显示"暂无音频"降级态 |
|
||
|
||
## 设计语言（深夜电影感精听）
|
||
|
||
- **配色**：暖墨黑底 `#15120d` + 纸感米色 `#ece1cd` + **琥珀金单点强调** `#e6ad5c`；细微胶片颗粒 + 顶部暖光。
|
||
- **字体**：英文句子用文学衬线 **Newsreader**（精听的主角）；UI 用 **Hanken Grotesk**；中文用 **Noto Serif SC**。
|
||
- **原则**：单一强调色、移动优先、内容（英文句子）为视觉主体；克制、不镀金。
|
||
|
||
> 颜色 / 字体 / 间距都用 CSS 变量（`:root`）集中定义，迁移进 go-app 时整段 `:root` + 组件样式可直接复用。
|
||
|
||
## 与文档的对应
|
||
|
||
- 形态对应 `docs/04-architecture.md`（列表 + 播放页 + 字幕同步）与 `docs/02-requirements.md` 第五节验收（逐句高亮、点句跳转、进度、无音频降级）。
|
||
- 用的是 `family-album-usa/episodes.json` 的**真实数据**（ep1《46 Linden Street》真实台词、各集真实标题与音频覆盖）。
|
||
- 落地任务见 `docs/06-tasks.md` 的 T-200（设计）→ T-201/T-203（实现）。
|