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>
1.7 KiB
1.7 KiB
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（实现）。