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
+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);
|
||||
|
||||
Reference in New Issue
Block a user