ilaandClaude Opus 4.8
39713eb8ac
- play.html / list.html：从深色重金属改为浅暖纸白 + 墨色 + 单一柔和赭石强调， 去掉颗粒/暗角/发光，UI 改用 Public Sans / Noto Sans SC；补齐焦点态、 cursor、44px 触控、对比度、prefers-reduced-motion、aria-label - README：设计语言更新为「清淡简洁 · Swiss/Minimal」 - 06-tasks：T-200 标记 DONE Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1.9 KiB
1.9 KiB
design_mockups — UI 效果稿（HTML/CSS）
可在浏览器直接打开的中保真效果稿，CSS 可直接迁移进 go-app（技术栈选的就是纯 CSS）。
| 文件 | 页面 | 看点 |
|---|---|---|
play.html |
播放页 | 逐句字幕同步：当前句放大+琥珀高亮+左侧光条，已读句变暗；点任意句跳转；底部播放器（播/停、上/下一句、进度）。点 ▶ 可看自动逐句推进的效果 |
list.html |
课程列表 | 26 集卡片：英文/中文标题、Act 幕状态（有音频=琥珀点 / 无音频=虚线）、进度环；顶部"继续学习"卡；ep18+ 显示"暂无音频"降级态 |
设计语言（清淡简洁 · Swiss/Minimal）
- 配色：浅暖纸白底
#f8f6f1+ 墨色文字#2a2724+ 单一柔和赭石强调#a4662b；细发丝线分隔，无颗粒/暗角/发光。 - 字体：英文句子用文学衬线 Newsreader（精听的主角，唯一的表现型元素）；UI 用干净的 Public Sans；中文用 Noto Sans SC。
- 原则：大量留白、高对比、单一强调色、移动优先；当前句靠"墨色加深 + 字号 + 细赭石标记"区分，不靠重特效。
- 可访问性：焦点可见态、
cursor-pointer、44px 触控区、文字对比 ≥4.5:1、prefers-reduced-motion降级、图标按钮带aria-label。
颜色 / 字体 / 间距都用 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（实现）。