diff --git a/design_mockups/README.md b/design_mockups/README.md new file mode 100644 index 0000000..d642b0c --- /dev/null +++ b/design_mockups/README.md @@ -0,0 +1,22 @@ +# 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（实现）。 diff --git a/design_mockups/list.html b/design_mockups/list.html new file mode 100644 index 0000000..6814cc6 --- /dev/null +++ b/design_mockups/list.html @@ -0,0 +1,159 @@ + + + + + +课程列表 · 走遍美国精听 + + + + + + +
+
+
+

走遍美国

+ Family Album, U.S.A. +
+
逐句精听 · Close Listening
+
+ +
+
继续学习
+
46 Linden Street · Act I
+
林登大街 46 号 · 第一幕
+
+
+ +
+
+ +
全 26 集
+ +
+
+ + + + diff --git a/design_mockups/play.html b/design_mockups/play.html new file mode 100644 index 0000000..cf0fdc6 --- /dev/null +++ b/design_mockups/play.html @@ -0,0 +1,209 @@ + + + + + +播放页 · 走遍美国精听 + + + + + + +
+
+ +
+
EP 1 · Act I
+
46 Linden Street
+
林登大街 46 号
+
+ 精听 +
+ +
+ + +
+ + + + diff --git a/docs/06-tasks.md b/docs/06-tasks.md index 3ef32fe..0045110 100644 --- a/docs/06-tasks.md +++ b/docs/06-tasks.md @@ -43,6 +43,14 @@ > 对应需求验收：02-requirements 第五节"逐句同步"。这是 P0 核心，务必先单独跑通。 +## Phase D · 设计（先于 Phase 2 的 UI） + +| ID | 任务 | 依赖 | 验收要点 | 状态 | +| --- | --- | --- | --- | --- | +| T-200 | UI 效果稿：播放页 + 课程列表（HTML/CSS） | — | 中保真稿覆盖逐句高亮/点句跳转/进度/无音频降级；用真实数据；CSS 可迁移 go-app。见 `design_mockups/` | DOING | + +> 设计 spike，不是生产代码。产出在 `design_mockups/play.html`、`list.html`，作为 T-201/T-203 的视觉依据。 + ## Phase 2 · 课程列表 + 播放页 | ID | 任务 | 依赖 | 验收要点 | 状态 |