design: 效果稿改为清淡简洁风格，T-200 完成
- 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>
This commit is contained in:
Claude Opus 4.8
@@ -7,11 +7,12 @@
|
||||
| `play.html` | 播放页 | **逐句字幕同步**：当前句放大+琥珀高亮+左侧光条，已读句变暗；**点任意句跳转**；底部播放器（播/停、上/下一句、进度）。点 ▶ 可看自动逐句推进的效果 |
|
||||
| `list.html` | 课程列表 | 26 集卡片：英文/中文标题、Act 幕状态（有音频=琥珀点 / 无音频=虚线）、进度环；顶部"继续学习"卡；ep18+ 显示"暂无音频"降级态 |
|
||||
|
||||
## 设计语言（深夜电影感精听）
|
||||
## 设计语言（清淡简洁 · Swiss/Minimal）
|
||||
|
||||
- **配色**：暖墨黑底 `#15120d` + 纸感米色 `#ece1cd` + **琥珀金单点强调** `#e6ad5c`；细微胶片颗粒 + 顶部暖光。
|
||||
- **字体**：英文句子用文学衬线 **Newsreader**（精听的主角）；UI 用 **Hanken Grotesk**；中文用 **Noto Serif SC**。
|
||||
- **原则**：单一强调色、移动优先、内容（英文句子）为视觉主体；克制、不镀金。
|
||||
- **配色**：浅暖纸白底 `#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` + 组件样式可直接复用。
|
||||
|
||||
|
||||
+48
-55
@@ -6,88 +6,81 @@
|
||||
<title>课程列表 · 走遍美国精听</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600&family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600&family=Public+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{
|
||||
--ink:#15120d; --ink-2:#1d1812; --card:#221c14; --card-2:#271f16;
|
||||
--paper:#ece1cd; --muted:#9b8d77; --faint:#5c513f;
|
||||
--amber:#e6ad5c; --amber-2:#f0c074; --amber-soft:rgba(230,173,92,.13);
|
||||
--line:rgba(236,225,205,.08);
|
||||
--paper:#f8f6f1; --surface:#ffffff;
|
||||
--ink:#2a2724; --ink-soft:#56514a; --muted:#938b7e; --faint:#c2bbae;
|
||||
--hair:#e9e3d8; --hair-soft:#f0ebe1;
|
||||
--accent:#a4662b; --accent-2:#c0833f; --accent-soft:#f1e8d9;
|
||||
--serif:"Newsreader",Georgia,serif;
|
||||
--sans:"Hanken Grotesk",system-ui,sans-serif;
|
||||
--han:"Noto Serif SC",serif;
|
||||
--sans:"Public Sans",system-ui,sans-serif;
|
||||
--han:"Noto Sans SC",sans-serif;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{
|
||||
font-family:var(--sans); color:var(--paper);
|
||||
background:
|
||||
radial-gradient(120% 70% at 50% -5%, rgba(230,173,92,.10), transparent 50%),
|
||||
var(--ink);
|
||||
display:flex; justify-content:center; min-height:100vh;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
font-family:var(--sans); color:var(--ink); background:var(--paper);
|
||||
display:flex; justify-content:center; min-height:100vh; -webkit-font-smoothing:antialiased;
|
||||
}
|
||||
body::after{
|
||||
content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.5; mix-blend-mode:overlay;
|
||||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
|
||||
}
|
||||
.phone{width:100%;max-width:440px;min-height:100vh;border-left:1px solid var(--line);border-right:1px solid var(--line);padding-bottom:30px}
|
||||
.phone{width:100%;max-width:440px;min-height:100vh;border-left:1px solid var(--hair);border-right:1px solid var(--hair);padding-bottom:30px;background:var(--paper)}
|
||||
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px}
|
||||
|
||||
/* header */
|
||||
.head{padding:30px 24px 18px}
|
||||
.head{padding:32px 24px 16px}
|
||||
.brand{display:flex;align-items:baseline;justify-content:space-between}
|
||||
.brand h1{font-family:var(--han);font-size:25px;font-weight:600;letter-spacing:.04em}
|
||||
.brand .en{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--amber);letter-spacing:.02em}
|
||||
.sub{font-size:11.5px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
|
||||
.brand h1{font-family:var(--han);font-size:24px;font-weight:500;letter-spacing:.03em}
|
||||
.brand .en{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--accent);letter-spacing:.01em}
|
||||
.sub{font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
|
||||
|
||||
/* continue hero */
|
||||
.hero{
|
||||
margin:18px 20px 6px;padding:18px 20px;border-radius:18px;position:relative;overflow:hidden;
|
||||
background:linear-gradient(135deg,var(--card-2),var(--card));border:1px solid var(--line);
|
||||
margin:18px 20px 4px;padding:20px;border-radius:16px;position:relative;
|
||||
background:var(--surface);border:1px solid var(--hair);
|
||||
}
|
||||
.hero::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
|
||||
background:radial-gradient(closest-side,rgba(230,173,92,.18),transparent)}
|
||||
.hero .lab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);font-weight:600}
|
||||
.hero .ti{font-family:var(--serif);font-size:22px;font-weight:600;margin-top:7px}
|
||||
.hero .lab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
|
||||
.hero .ti{font-family:var(--serif);font-size:22px;font-weight:600;margin-top:7px;color:var(--ink)}
|
||||
.hero .cn{font-family:var(--han);font-size:12.5px;color:var(--muted);margin-top:2px}
|
||||
.hero .row{display:flex;align-items:center;gap:14px;margin-top:16px}
|
||||
.progress{flex:1;height:5px;border-radius:5px;background:rgba(0,0,0,.35);overflow:hidden}
|
||||
.progress i{display:block;height:100%;width:38%;border-radius:5px;background:linear-gradient(90deg,var(--amber),var(--amber-2))}
|
||||
.resume{flex:none;display:flex;align-items:center;gap:7px;background:var(--amber);color:#1a1206;
|
||||
font-weight:700;font-size:13px;border:none;border-radius:30px;padding:9px 16px;cursor:pointer}
|
||||
.resume:hover{background:var(--amber-2)}
|
||||
.hero .row{display:flex;align-items:center;gap:14px;margin-top:18px}
|
||||
.progress{flex:1;height:6px;border-radius:6px;background:var(--hair);overflow:hidden}
|
||||
.progress i{display:block;height:100%;width:38%;border-radius:6px;background:var(--accent)}
|
||||
.resume{flex:none;display:flex;align-items:center;gap:6px;background:var(--accent);color:#fff;
|
||||
font-weight:600;font-size:13px;border:none;border-radius:30px;padding:10px 18px;cursor:pointer;
|
||||
min-height:44px;transition:.2s}
|
||||
.resume:hover{background:var(--accent-2)}
|
||||
|
||||
/* section label */
|
||||
.seclab{display:flex;align-items:center;gap:10px;padding:22px 24px 8px;color:var(--muted)}
|
||||
.seclab span{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
|
||||
.seclab .ln{flex:1;height:1px;background:var(--line)}
|
||||
.seclab{display:flex;align-items:center;gap:12px;padding:24px 24px 6px;color:var(--muted)}
|
||||
.seclab span{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
|
||||
.seclab .ln{flex:1;height:1px;background:var(--hair)}
|
||||
|
||||
/* episode list */
|
||||
.list{padding:4px 14px}
|
||||
.ep{display:flex;gap:14px;align-items:center;padding:14px 12px;border-radius:14px;cursor:pointer;
|
||||
.ep{display:flex;gap:14px;align-items:center;padding:15px 12px;border-radius:12px;cursor:pointer;
|
||||
transition:background .2s;position:relative}
|
||||
.ep:hover{background:var(--ink-2)}
|
||||
.ep + .ep{border-top:1px solid var(--line)}
|
||||
.num{font-family:var(--serif);font-size:20px;font-style:italic;color:var(--faint);width:30px;flex:none;text-align:center}
|
||||
.ep.cur .num{color:var(--amber)}
|
||||
.ep:hover{background:var(--surface)}
|
||||
.ep + .ep{border-top:1px solid var(--hair-soft)}
|
||||
.num{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--faint);width:30px;flex:none;text-align:center}
|
||||
.ep.cur .num{color:var(--accent)}
|
||||
.body{flex:1;min-width:0}
|
||||
.body .ti{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.2}
|
||||
.body .ti{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.25;color:var(--ink)}
|
||||
.body .cn{font-family:var(--han);font-size:11.5px;color:var(--muted);margin-top:2px}
|
||||
.acts{display:flex;gap:6px;margin-top:9px}
|
||||
.chip{font-size:10px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);
|
||||
border-radius:6px;padding:3px 8px;display:flex;align-items:center;gap:5px}
|
||||
.chip.done{color:var(--amber);border-color:rgba(230,173,92,.4)}
|
||||
.chip.done::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber)}
|
||||
.chip.noaudio{color:var(--faint);border-style:dashed}
|
||||
.acts{display:flex;gap:6px;margin-top:10px}
|
||||
.chip{font-size:10px;letter-spacing:.04em;color:var(--ink-soft);border:1px solid var(--hair);
|
||||
border-radius:6px;padding:3px 8px;display:flex;align-items:center;gap:5px;background:var(--surface)}
|
||||
.chip.done{color:var(--accent);border-color:rgba(164,102,43,.35);background:var(--accent-soft)}
|
||||
.chip.done::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
|
||||
.chip.noaudio{color:var(--faint);border-style:dashed;background:transparent}
|
||||
.ring{flex:none;width:34px;height:34px}
|
||||
.ring svg{transform:rotate(-90deg)}
|
||||
.ring .bg{stroke:var(--line)} .ring .fg{stroke:var(--amber);stroke-linecap:round}
|
||||
.ep.locked{opacity:.5}
|
||||
.ring .bg{stroke:var(--hair)} .ring .fg{stroke:var(--accent);stroke-linecap:round}
|
||||
.ep.locked{opacity:.55}
|
||||
.ep.locked .body .ti{font-style:normal}
|
||||
.badge{font-size:9.5px;letter-spacing:.1em;color:var(--faint);border:1px dashed var(--line);
|
||||
border-radius:20px;padding:4px 9px;flex:none}
|
||||
.badge{font-size:9.5px;letter-spacing:.08em;color:var(--muted);border:1px dashed var(--hair);
|
||||
border-radius:20px;padding:5px 10px;flex:none}
|
||||
|
||||
.list .ep{animation:rise .5s both}
|
||||
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
|
||||
.list .ep{animation:rise .45s both}
|
||||
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
|
||||
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+65
-74
@@ -6,126 +6,117 @@
|
||||
<title>播放页 · 走遍美国精听</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Public+Sans:wght@400;500;600&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root{
|
||||
--ink:#15120d; --ink-2:#1d1812; --card:#221c14;
|
||||
--paper:#ece1cd; --muted:#9b8d77; --faint:#5c513f;
|
||||
--amber:#e6ad5c; --amber-2:#f0c074; --amber-soft:rgba(230,173,92,.13);
|
||||
--line:rgba(236,225,205,.08);
|
||||
--paper:#f8f6f1; --surface:#ffffff;
|
||||
--ink:#2a2724; --ink-soft:#56514a; --muted:#938b7e; --faint:#c2bbae;
|
||||
--hair:#e9e3d8; --hair-soft:#f0ebe1;
|
||||
--accent:#a4662b; --accent-2:#c0833f; --accent-soft:#f1e8d9;
|
||||
--serif:"Newsreader",Georgia,serif;
|
||||
--sans:"Hanken Grotesk",system-ui,sans-serif;
|
||||
--han:"Noto Serif SC",serif;
|
||||
--sans:"Public Sans",system-ui,sans-serif;
|
||||
--han:"Noto Sans SC",sans-serif;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
html,body{height:100%}
|
||||
body{
|
||||
font-family:var(--sans); color:var(--paper);
|
||||
background:
|
||||
radial-gradient(120% 80% at 50% -10%, rgba(230,173,92,.10), transparent 55%),
|
||||
radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.5), transparent 60%),
|
||||
var(--ink);
|
||||
font-family:var(--sans); color:var(--ink); background:var(--paper);
|
||||
display:flex; justify-content:center; min-height:100%;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
/* film grain */
|
||||
body::after{
|
||||
content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.5; mix-blend-mode:overlay;
|
||||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
|
||||
}
|
||||
.phone{
|
||||
width:100%; max-width:440px; min-height:100vh; position:relative;
|
||||
display:flex; flex-direction:column;
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.015), transparent 30%);
|
||||
border-left:1px solid var(--line); border-right:1px solid var(--line);
|
||||
display:flex; flex-direction:column; background:var(--paper);
|
||||
border-left:1px solid var(--hair); border-right:1px solid var(--hair);
|
||||
}
|
||||
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
|
||||
|
||||
/* ---------- top bar ---------- */
|
||||
.top{
|
||||
position:sticky; top:0; z-index:20; padding:18px 20px 14px;
|
||||
position:sticky; top:0; z-index:20; padding:16px 20px;
|
||||
display:flex; align-items:center; gap:14px;
|
||||
background:linear-gradient(180deg, var(--ink) 60%, transparent);
|
||||
background:rgba(248,246,241,.9); backdrop-filter:blur(8px);
|
||||
border-bottom:1px solid var(--hair);
|
||||
}
|
||||
.icon-btn{
|
||||
width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
|
||||
background:var(--ink-2); color:var(--paper); display:grid;place-items:center;
|
||||
cursor:pointer; transition:.2s; flex:none;
|
||||
width:40px;height:40px;border-radius:11px;border:1px solid var(--hair);
|
||||
background:var(--surface); color:var(--ink-soft); display:grid;place-items:center;
|
||||
cursor:pointer; transition:.2s; flex:none; font-size:18px;
|
||||
}
|
||||
.icon-btn:hover{border-color:var(--amber); color:var(--amber)}
|
||||
.top-meta{flex:1; text-align:center; line-height:1.25}
|
||||
.top-meta .ep{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); font-weight:600}
|
||||
.top-meta .ti{font-family:var(--serif); font-size:18px; font-weight:500}
|
||||
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
|
||||
.top-meta{flex:1; text-align:center; line-height:1.3}
|
||||
.top-meta .ep{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600}
|
||||
.top-meta .ti{font-family:var(--serif); font-size:18px; font-weight:500; color:var(--ink)}
|
||||
.top-meta .cn{font-family:var(--han); font-size:11.5px; color:var(--muted); margin-top:1px}
|
||||
.tag{font-size:10px;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line);
|
||||
padding:5px 8px;border-radius:20px;flex:none}
|
||||
.tag{font-size:10px;letter-spacing:.1em;color:var(--ink-soft);background:var(--accent-soft);
|
||||
padding:5px 9px;border-radius:20px;flex:none;font-weight:500}
|
||||
|
||||
/* ---------- subtitle stream ---------- */
|
||||
.stream{
|
||||
flex:1; overflow:hidden; position:relative; padding:8vh 26px 6vh;
|
||||
-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 82%,transparent);
|
||||
mask-image:linear-gradient(180deg,transparent,#000 16%,#000 82%,transparent);
|
||||
flex:1; overflow:hidden; position:relative; padding:9vh 28px 6vh;
|
||||
-webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 84%,transparent);
|
||||
mask-image:linear-gradient(180deg,transparent,#000 15%,#000 84%,transparent);
|
||||
}
|
||||
.line{
|
||||
font-family:var(--serif); font-size:21px; line-height:1.45; letter-spacing:.005em;
|
||||
font-family:var(--serif); font-size:20px; line-height:1.5; letter-spacing:.005em;
|
||||
color:var(--faint); padding:13px 0 13px 18px; position:relative; cursor:pointer;
|
||||
transition:color .35s ease, opacity .35s, transform .35s; opacity:.8;
|
||||
transition:color .25s ease, font-size .25s ease;
|
||||
}
|
||||
.line:hover{color:var(--muted)}
|
||||
.line .t{
|
||||
font-family:var(--sans); font-size:10.5px; color:var(--faint); letter-spacing:.08em;
|
||||
opacity:0; transition:.25s; position:absolute; left:-2px; top:18px;
|
||||
font-family:var(--sans); font-size:10.5px; color:var(--faint); letter-spacing:.06em;
|
||||
opacity:0; transition:.2s; position:absolute; left:-1px; top:17px;
|
||||
}
|
||||
.line:hover .t{opacity:.7}
|
||||
.line:hover .t{opacity:1}
|
||||
/* active line */
|
||||
.line.active{
|
||||
color:var(--paper); font-size:25px; opacity:1; font-weight:500;
|
||||
text-shadow:0 0 30px rgba(230,173,92,.18);
|
||||
color:var(--ink); font-size:24px; font-weight:500;
|
||||
}
|
||||
.line.active::before{
|
||||
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
|
||||
width:3px; height:62%; border-radius:3px;
|
||||
background:linear-gradient(var(--amber),var(--amber-2));
|
||||
box-shadow:0 0 14px rgba(230,173,92,.6);
|
||||
width:3px; height:58%; border-radius:3px; background:var(--accent);
|
||||
}
|
||||
.line.done{color:var(--muted); opacity:.55}
|
||||
.line.done{color:var(--muted)}
|
||||
|
||||
/* ---------- player bar ---------- */
|
||||
.player{
|
||||
position:sticky; bottom:0; z-index:20; padding:16px 22px 26px;
|
||||
background:linear-gradient(0deg, var(--ink) 62%, transparent);
|
||||
position:sticky; bottom:0; z-index:20; padding:16px 22px 24px;
|
||||
background:var(--surface); border-top:1px solid var(--hair);
|
||||
}
|
||||
.seek{display:flex;align-items:center;gap:10px;margin-bottom:16px}
|
||||
.seek .time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
|
||||
.bar{flex:1;height:4px;border-radius:4px;background:var(--line);position:relative;cursor:pointer}
|
||||
.bar .fill{position:absolute;inset:0 60% 0 0;border-radius:4px;
|
||||
background:linear-gradient(90deg,var(--amber),var(--amber-2))}
|
||||
.bar .knob{position:absolute;left:40%;top:50%;width:11px;height:11px;border-radius:50%;
|
||||
transform:translate(-50%,-50%);background:var(--amber-2);box-shadow:0 0 10px rgba(230,173,92,.7)}
|
||||
.seek .time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.03em}
|
||||
.bar{flex:1;height:4px;border-radius:4px;background:var(--hair);position:relative;cursor:pointer}
|
||||
.bar .fill{position:absolute;inset:0 60% 0 0;border-radius:4px;background:var(--accent)}
|
||||
.bar .knob{position:absolute;left:40%;top:50%;width:12px;height:12px;border-radius:50%;
|
||||
transform:translate(-50%,-50%);background:var(--accent);border:2px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.15)}
|
||||
.controls{display:flex;align-items:center;justify-content:center;gap:30px}
|
||||
.ctl{background:none;border:none;color:var(--paper);cursor:pointer;display:grid;place-items:center;
|
||||
opacity:.85;transition:.2s}
|
||||
.ctl:hover{opacity:1;color:var(--amber-2)}
|
||||
.ctl small{font-family:var(--sans);font-size:9px;letter-spacing:.12em;color:var(--muted);
|
||||
display:block;text-align:center;margin-top:3px}
|
||||
.ctl{background:none;border:none;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;
|
||||
min-width:44px;min-height:44px;transition:.2s;font-size:18px}
|
||||
.ctl:hover{color:var(--accent)}
|
||||
.ctl small{font-family:var(--sans);font-size:9px;letter-spacing:.08em;color:var(--muted);
|
||||
display:block;text-align:center;margin-top:2px}
|
||||
.play{
|
||||
width:64px;height:64px;border-radius:50%;flex:none;
|
||||
background:radial-gradient(120% 120% at 30% 20%,var(--amber-2),var(--amber));
|
||||
color:#1a1206;display:grid;place-items:center;cursor:pointer;border:none;
|
||||
box-shadow:0 8px 26px rgba(230,173,92,.34), inset 0 1px 1px rgba(255,255,255,.4);
|
||||
transition:transform .15s;
|
||||
width:62px;height:62px;border-radius:50%;flex:none;
|
||||
background:var(--accent); color:#fff;
|
||||
display:grid;place-items:center;cursor:pointer;border:none;
|
||||
box-shadow:0 4px 14px rgba(164,102,43,.28); transition:.15s;
|
||||
}
|
||||
.play:active{transform:scale(.94)}
|
||||
.hint{text-align:center;font-size:10.5px;color:var(--faint);letter-spacing:.08em;margin-top:16px}
|
||||
.play:hover{background:var(--accent-2)}
|
||||
.play:active{transform:scale(.95)}
|
||||
.hint{text-align:center;font-size:10.5px;color:var(--muted);letter-spacing:.05em;margin-top:15px}
|
||||
|
||||
/* load-in */
|
||||
.line{animation:rise .6s both}
|
||||
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
|
||||
.line{animation:rise .5s both}
|
||||
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
*{animation:none!important; transition:none!important; scroll-behavior:auto!important}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone">
|
||||
<header class="top">
|
||||
<button class="icon-btn" aria-label="返回">‹</button>
|
||||
<button class="icon-btn" aria-label="返回课程列表">‹</button>
|
||||
<div class="top-meta">
|
||||
<div class="ep">EP 1 · Act I</div>
|
||||
<div class="ti">46 Linden Street</div>
|
||||
@@ -139,15 +130,15 @@
|
||||
<footer class="player">
|
||||
<div class="seek">
|
||||
<span class="time" id="cur">0:41</span>
|
||||
<div class="bar" id="bar"><div class="fill" id="fill"></div><div class="knob" id="knob"></div></div>
|
||||
<div class="bar" id="bar" role="slider" aria-label="播放进度"><div class="fill" id="fill"></div><div class="knob" id="knob"></div></div>
|
||||
<span class="time">3:42</span>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button class="ctl" id="prev" title="上一句">⏮<small>上一句</small></button>
|
||||
<button class="play" id="play" aria-label="播放/暂停">
|
||||
<svg id="ico" width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
|
||||
<button class="ctl" id="prev" aria-label="上一句">⏮<small>上一句</small></button>
|
||||
<button class="play" id="play" aria-label="播放或暂停">
|
||||
<svg id="ico" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
<button class="ctl" id="next" title="下一句">⏭<small>下一句</small></button>
|
||||
<button class="ctl" id="next" aria-label="下一句">⏭<small>下一句</small></button>
|
||||
</div>
|
||||
<div class="hint">点击任意一句 · 音频跳到该句重听</div>
|
||||
</footer>
|
||||
@@ -175,7 +166,7 @@ function render(){
|
||||
LINES.forEach((l,i)=>{
|
||||
const d = document.createElement('div');
|
||||
d.className = 'line' + (i===active?' active':'') + (i<active?' done':'');
|
||||
d.style.animationDelay = (i*0.05)+'s';
|
||||
d.style.animationDelay = (i*0.04)+'s';
|
||||
d.innerHTML = `<span class="t">${l.t.toFixed(1)}s</span>${l.en}`;
|
||||
d.onclick = ()=>{ active=i; sync(); }; // 点句跳转
|
||||
stream.appendChild(d);
|
||||
|
||||
+1
-1
@@ -47,7 +47,7 @@
|
||||
|
||||
| ID | 任务 | 依赖 | 验收要点 | 状态 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| T-200 | UI 效果稿：播放页 + 课程列表（HTML/CSS） | — | 中保真稿覆盖逐句高亮/点句跳转/进度/无音频降级；用真实数据；CSS 可迁移 go-app。见 `design_mockups/` | DOING |
|
||||
| T-200 | UI 效果稿：播放页 + 课程列表（HTML/CSS） | — | 中保真稿覆盖逐句高亮/点句跳转/进度/无音频降级；用真实数据；CSS 可迁移 go-app。见 `design_mockups/` | DONE |
|
||||
|
||||
> 设计 spike，不是生产代码。产出在 `design_mockups/play.html`、`list.html`，作为 T-201/T-203 的视觉依据。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user