293 lines
38 KiB
HTML
293 lines
38 KiB
HTML
<div id="learning-app-prototype" aria-label="开口英语 M1 全部原型页面">
|
||
<style>
|
||
#learning-app-prototype {
|
||
--ka-paper: light-dark(#f5f7f3, #151a16);
|
||
--ka-surface: light-dark(#ffffff, #202722);
|
||
--ka-surface-2: light-dark(#f1f5f0, #2b342c);
|
||
--ka-ink: light-dark(#19211b, #eef4ee);
|
||
--ka-muted: light-dark(#647268, #afbbb1);
|
||
--ka-line: light-dark(#d8e1d9, #3b473d);
|
||
--ka-green: light-dark(#176b46, #6ed29a);
|
||
--ka-green-ink: light-dark(#ffffff, #102116);
|
||
--ka-soft-green: light-dark(#e2f3e8, #173625);
|
||
--ka-warm: light-dark(#fff0e3, #462b1d);
|
||
--ka-warm-ink: light-dark(#9e4c18, #ffb582);
|
||
color: var(--ka-ink);
|
||
font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", system-ui, sans-serif;
|
||
}
|
||
#learning-app-prototype * { box-sizing: border-box; }
|
||
#learning-app-prototype button { font: inherit; }
|
||
#learning-app-prototype .studio { display:grid; grid-template-columns: 180px minmax(300px, 430px) minmax(210px, 1fr); gap:20px; align-items:start; }
|
||
#learning-app-prototype .panel { background:var(--ka-surface); border:1px solid var(--ka-line); border-radius:18px; padding:14px; }
|
||
#learning-app-prototype .brand { font-size:18px; font-weight:500; letter-spacing:-.02em; margin:1px 0 2px; }
|
||
#learning-app-prototype .small { color:var(--ka-muted); font-size:12px; line-height:1.45; margin:0; }
|
||
#learning-app-prototype .screen-list { display:flex; flex-direction:column; gap:3px; margin-top:15px; }
|
||
#learning-app-prototype .screen-link { text-align:left; border:0; border-radius:10px; color:var(--ka-ink); background:transparent; padding:9px 10px; font-size:13px; }
|
||
#learning-app-prototype .screen-link[aria-pressed="true"] { background:var(--ka-soft-green); color:var(--ka-green); font-weight:500; }
|
||
#learning-app-prototype .legend-title { font-size:13px; font-weight:500; margin:0 0 10px; }
|
||
#learning-app-prototype .flow { display:flex; flex-direction:column; gap:8px; }
|
||
#learning-app-prototype .flow-row { border-left:2px solid var(--ka-line); padding:3px 0 3px 9px; font-size:12px; line-height:1.35; }
|
||
#learning-app-prototype .flow-row strong { display:block; font-weight:500; }
|
||
#learning-app-prototype .flow-row.active { border-color:var(--ka-green); }
|
||
#learning-app-prototype .chip { display:inline-block; margin:4px 4px 0 0; padding:3px 7px; border-radius:999px; font-size:11px; background:var(--ka-surface-2); color:var(--ka-muted); }
|
||
#learning-app-prototype .phone-wrap { display:flex; justify-content:center; }
|
||
#learning-app-prototype .phone { width:352px; min-height:690px; position:relative; overflow:hidden; border:8px solid light-dark(#1c251e, #090c0a); border-radius:35px; background:var(--ka-surface); box-shadow:0 18px 40px light-dark(rgba(16,35,22,.17), rgba(0,0,0,.35)); }
|
||
#learning-app-prototype .phone.mac { width:430px; border-width:7px; border-radius:17px; }
|
||
#learning-app-prototype .status { height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 17px; font-size:11px; color:var(--ka-muted); background:var(--ka-surface); }
|
||
#learning-app-prototype .appbar { min-height:53px; display:flex; align-items:center; gap:8px; padding:7px 16px 11px; background:var(--ka-surface); }
|
||
#learning-app-prototype .back { width:32px; height:32px; border:0; border-radius:10px; color:var(--ka-ink); background:var(--ka-surface-2); font-size:18px; }
|
||
#learning-app-prototype .appbar h2 { font-size:16px; font-weight:500; margin:0; }
|
||
#learning-app-prototype .appbody { min-height:548px; padding:12px 16px 82px; background:var(--ka-paper); }
|
||
#learning-app-prototype .screen[hidden] { display:none; }
|
||
#learning-app-prototype .eyebrow { color:var(--ka-green); font-size:12px; font-weight:500; margin:2px 0 8px; }
|
||
#learning-app-prototype h1 { font-size:25px; line-height:1.26; letter-spacing:-.03em; font-weight:500; margin:0 0 8px; }
|
||
#learning-app-prototype h3 { font-size:16px; line-height:1.35; font-weight:500; margin:0; }
|
||
#learning-app-prototype .bodycopy { color:var(--ka-muted); font-size:13px; line-height:1.55; margin:0; }
|
||
#learning-app-prototype .slot { background:var(--ka-surface); border:1px solid var(--ka-line); border-radius:15px; padding:12px; margin-top:11px; }
|
||
#learning-app-prototype .slot.selected { background:var(--ka-soft-green); border-color:transparent; }
|
||
#learning-app-prototype .slot.warm { background:var(--ka-warm); border-color:transparent; }
|
||
#learning-app-prototype .slot-title { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; font-weight:500; }
|
||
#learning-app-prototype .slot-note { color:var(--ka-muted); font-size:12px; line-height:1.4; margin-top:4px; }
|
||
#learning-app-prototype .choice { width:100%; border:1px solid var(--ka-line); border-radius:13px; padding:12px; background:var(--ka-surface); color:var(--ka-ink); text-align:left; margin-top:8px; }
|
||
#learning-app-prototype .choice.active { border-color:var(--ka-green); background:var(--ka-soft-green); }
|
||
#learning-app-prototype .choice strong { display:block; font-size:14px; font-weight:500; }
|
||
#learning-app-prototype .choice span { color:var(--ka-muted); font-size:12px; }
|
||
#learning-app-prototype .primary { width:100%; border:0; border-radius:13px; padding:13px 12px; margin-top:13px; background:var(--ka-green); color:var(--ka-green-ink); font-size:14px; font-weight:500; }
|
||
#learning-app-prototype .secondary { width:100%; border:1px solid var(--ka-line); border-radius:13px; padding:12px; margin-top:8px; background:var(--ka-surface); color:var(--ka-ink); font-size:14px; }
|
||
#learning-app-prototype .text-action { border:0; background:transparent; color:var(--ka-green); font-size:13px; padding:10px 0; }
|
||
#learning-app-prototype .meter { height:7px; border-radius:999px; overflow:hidden; background:var(--ka-line); margin:12px 0 14px; }
|
||
#learning-app-prototype .meter > span { display:block; height:100%; background:var(--ka-green); border-radius:inherit; }
|
||
#learning-app-prototype .seg { display:flex; gap:4px; margin:5px 0 14px; }
|
||
#learning-app-prototype .seg span { height:5px; flex:1; border-radius:999px; background:var(--ka-line); }
|
||
#learning-app-prototype .seg span.on { background:var(--ka-green); }
|
||
#learning-app-prototype .word { font-size:27px; font-weight:500; margin:13px 0 2px; }
|
||
#learning-app-prototype .ipa { color:var(--ka-muted); font-size:14px; }
|
||
#learning-app-prototype .audio { display:flex; align-items:center; gap:10px; margin-top:13px; padding:10px; border-radius:12px; background:var(--ka-surface-2); }
|
||
#learning-app-prototype .play { width:34px; height:34px; border:0; border-radius:50%; color:var(--ka-green-ink); background:var(--ka-green); font-size:13px; }
|
||
#learning-app-prototype .audio-line { flex:1; height:4px; border-radius:99px; background:var(--ka-line); overflow:hidden; }
|
||
#learning-app-prototype .audio-line i { display:block; width:38%; height:100%; background:var(--ka-green); }
|
||
#learning-app-prototype .audio small { color:var(--ka-muted); font-size:11px; }
|
||
#learning-app-prototype .sentence { margin:15px 0; padding:15px; background:var(--ka-surface); border-radius:15px; font-size:18px; line-height:1.5; }
|
||
#learning-app-prototype .mark { color:var(--ka-green); font-weight:500; }
|
||
#learning-app-prototype .lookup-word { appearance:none; display:inline; border:0; border-bottom:1px dashed var(--ka-green); padding:0; background:transparent; color:var(--ka-green); font:inherit; font-weight:500; cursor:pointer; }
|
||
#learning-app-prototype .lookup-hint { display:flex; align-items:center; gap:6px; margin-top:9px; color:var(--ka-muted); font-size:12px; }
|
||
#learning-app-prototype .lookup-hint i { width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:var(--ka-soft-green); color:var(--ka-green); font-style:normal; font-size:11px; }
|
||
#learning-app-prototype .lookup-stage { min-height:548px; padding:12px 16px 24px; background:linear-gradient(180deg, var(--ka-paper) 0%, var(--ka-paper) 42%, light-dark(#e8ede8, #1b211c) 42%, light-dark(#e8ede8, #1b211c) 100%); }
|
||
#learning-app-prototype .lookup-context { padding:14px; border-radius:15px; background:var(--ka-surface); opacity:.64; font-size:14px; line-height:1.55; }
|
||
#learning-app-prototype .lookup-sheet { margin-top:39px; padding:18px 15px 15px; border-radius:20px 20px 15px 15px; background:var(--ka-surface); box-shadow:0 -8px 26px light-dark(rgba(16,35,22,.12), rgba(0,0,0,.25)); }
|
||
#learning-app-prototype .lookup-handle { width:36px; height:4px; margin:0 auto 16px; border-radius:9px; background:var(--ka-line); }
|
||
#learning-app-prototype .lookup-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
|
||
#learning-app-prototype .lookup-head .word { margin:0 0 2px; }
|
||
#learning-app-prototype .lookup-close { width:32px; height:32px; border:0; border-radius:50%; background:var(--ka-surface-2); color:var(--ka-ink); font-size:18px; }
|
||
#learning-app-prototype .meaning { margin:12px 0; font-size:16px; line-height:1.5; }
|
||
#learning-app-prototype .lookup-example { padding:11px; border-radius:12px; background:var(--ka-soft-green); font-size:13px; line-height:1.5; }
|
||
#learning-app-prototype .lookup-example span { display:block; color:var(--ka-muted); margin-top:2px; font-size:12px; }
|
||
#learning-app-prototype .chat { display:flex; flex-direction:column; gap:9px; margin:11px 0 14px; }
|
||
#learning-app-prototype .bubble { max-width:88%; padding:10px 11px; border-radius:14px; font-size:13px; line-height:1.45; }
|
||
#learning-app-prototype .bubble.ai { align-self:flex-start; background:var(--ka-soft-green); }
|
||
#learning-app-prototype .bubble.me { align-self:flex-end; background:var(--ka-warm); }
|
||
#learning-app-prototype .assist { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
|
||
#learning-app-prototype .assist button { border:1px solid var(--ka-line); background:var(--ka-surface); color:var(--ka-ink); border-radius:999px; padding:7px 9px; font-size:11px; }
|
||
#learning-app-prototype .record { margin-top:13px; padding:13px; border:1px dashed var(--ka-green); border-radius:15px; text-align:center; background:var(--ka-surface); color:var(--ka-green); font-size:13px; font-weight:500; }
|
||
#learning-app-prototype .bottom { position:absolute; z-index:3; bottom:0; left:0; right:0; height:68px; display:flex; justify-content:space-around; padding:7px 9px 9px; border-top:1px solid var(--ka-line); background:var(--ka-surface); }
|
||
#learning-app-prototype .navitem { display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:transparent; color:var(--ka-muted); min-width:49px; font-size:10px; }
|
||
#learning-app-prototype .navitem.active { color:var(--ka-green); font-weight:500; }
|
||
#learning-app-prototype .nav-dot { width:17px; height:17px; border-radius:6px; background:currentColor; opacity:.85; }
|
||
#learning-app-prototype .checkline { display:flex; gap:9px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--ka-line); font-size:13px; line-height:1.4; }
|
||
#learning-app-prototype .checkline b { color:var(--ka-green); font-weight:500; }
|
||
#learning-app-prototype .review-prompt { padding:19px 13px; border-radius:15px; background:var(--ka-soft-green); margin-top:14px; font-size:17px; line-height:1.45; }
|
||
#learning-app-prototype .levelmap { margin-top:12px; }
|
||
#learning-app-prototype .level { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid var(--ka-line); }
|
||
#learning-app-prototype .level b { font-size:13px; font-weight:500; }
|
||
#learning-app-prototype .level span { font-size:12px; color:var(--ka-muted); }
|
||
#learning-app-prototype .level i { width:8px; height:8px; border-radius:50%; background:var(--ka-line); }
|
||
#learning-app-prototype .level i.on { background:var(--ka-green); }
|
||
#learning-app-prototype .setting { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--ka-line); font-size:14px; }
|
||
#learning-app-prototype .setting span { color:var(--ka-muted); font-size:12px; }
|
||
#learning-app-prototype .toggle { width:35px; height:20px; border-radius:999px; background:var(--ka-green); padding:3px; }
|
||
#learning-app-prototype .toggle i { display:block; width:14px; height:14px; margin-left:auto; border-radius:50%; background:var(--ka-green-ink); }
|
||
#learning-app-prototype .mac-body { min-height:590px; display:grid; grid-template-columns:113px 1fr; background:var(--ka-paper); }
|
||
#learning-app-prototype .mac-side { padding:15px 10px; background:var(--ka-surface); border-right:1px solid var(--ka-line); }
|
||
#learning-app-prototype .mac-side b { display:block; font-size:12px; margin:8px 6px 16px; }
|
||
#learning-app-prototype .mac-side span { display:block; padding:8px 6px; border-radius:8px; color:var(--ka-muted); font-size:11px; }
|
||
#learning-app-prototype .mac-side span.on { background:var(--ka-soft-green); color:var(--ka-green); }
|
||
#learning-app-prototype .mac-main { padding:23px; }
|
||
#learning-app-prototype .mac-main h1 { font-size:23px; }
|
||
#learning-app-prototype .mac-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
|
||
#learning-app-prototype .mac-grid .slot { margin:0; min-height:104px; }
|
||
@media (max-width: 880px) { #learning-app-prototype .studio { grid-template-columns:180px minmax(300px, 1fr); } #learning-app-prototype .flow-panel { display:none; } }
|
||
@media (max-width: 590px) { #learning-app-prototype .studio { display:block; } #learning-app-prototype .panel { margin-bottom:15px; } #learning-app-prototype .screen-list { display:grid; grid-template-columns:1fr 1fr; } #learning-app-prototype .phone { width:100%; max-width:352px; } #learning-app-prototype .phone.mac { width:100%; max-width:430px; } }
|
||
</style>
|
||
<div class="studio">
|
||
<aside class="panel" aria-label="页面目录">
|
||
<div class="brand">开口英语</div>
|
||
<p class="small">M1 · 手机优先原型</p>
|
||
<div class="screen-list" role="group" aria-label="选择页面">
|
||
<button class="screen-link" data-screen-target="welcome" aria-pressed="false" type="button">01 目标设置</button>
|
||
<button class="screen-link" data-screen-target="placement" aria-pressed="false" type="button">02 起点定位</button>
|
||
<button class="screen-link" data-screen-target="home" aria-pressed="true" type="button">03 首页</button>
|
||
<button class="screen-link" data-screen-target="map" aria-pressed="false" type="button">04 学习地图</button>
|
||
<button class="screen-link" data-screen-target="listen" aria-pressed="false" type="button">05 听力练习</button>
|
||
<button class="screen-link" data-screen-target="speak" aria-pressed="false" type="button">06 跟读练习</button>
|
||
<button class="screen-link" data-screen-target="write" aria-pressed="false" type="button">07 造句练习</button>
|
||
<button class="screen-link" data-screen-target="scenes" aria-pressed="false" type="button">08 对话场景</button>
|
||
<button class="screen-link" data-screen-target="dialogue" aria-pressed="false" type="button">09 AI 对话</button>
|
||
<button class="screen-link" data-screen-target="confirm" aria-pressed="false" type="button">10 转写确认</button>
|
||
<button class="screen-link" data-screen-target="summary" aria-pressed="false" type="button">11 练习总结</button>
|
||
<button class="screen-link" data-screen-target="review" aria-pressed="false" type="button">12 今日复习</button>
|
||
<button class="screen-link" data-screen-target="progress" aria-pressed="false" type="button">13 我的进步</button>
|
||
<button class="screen-link" data-screen-target="settings" aria-pressed="false" type="button">14 设置</button>
|
||
<button class="screen-link" data-screen-target="mac" aria-pressed="false" type="button">15 Mac 适配</button>
|
||
<button class="screen-link" data-screen-target="dictionary" aria-pressed="false" type="button">16 查词卡</button>
|
||
<button class="screen-link" data-screen-target="preview" aria-pressed="false" type="button">17 课前词汇预热</button>
|
||
</div>
|
||
</aside>
|
||
<main class="phone-wrap" aria-live="polite">
|
||
<div class="phone" id="prototype-phone">
|
||
<section class="screen" data-screen="welcome" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div>
|
||
<div class="appbody">
|
||
<div class="eyebrow">欢迎</div>
|
||
<h1>每天 20 分钟，<br>说出能用的英语。</h1>
|
||
<p class="bodycopy">从真实生活场景开始，先做到听得懂、说得清。</p>
|
||
<div class="slot selected"><div class="slot-title">你的主要目标</div><div class="assist"><span class="chip">日常生活</span><span class="chip">旅行</span><span class="chip">工作起步</span></div></div>
|
||
<div class="slot"><div class="slot-title">每天学习多久？</div><div class="assist"><span class="chip">10 分钟</span><span class="chip" style="background:var(--ka-soft-green);color:var(--ka-green)">20 分钟</span><span class="chip">30 分钟</span></div></div>
|
||
<button class="primary" data-go="placement" type="button">继续</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="placement" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div>
|
||
<div class="appbody">
|
||
<div class="eyebrow">第一步 · 约 3 分钟</div>
|
||
<h1>从哪里开始？</h1><p class="bodycopy">选择最接近的状态，之后随时能调整。</p>
|
||
<button class="choice active" type="button"><strong>完全零基础</strong><span>从你好、自我介绍开始</span></button>
|
||
<button class="choice" type="button"><strong>能说一点</strong><span>认识常见单词或短句</span></button>
|
||
<button class="choice" type="button"><strong>能简单对话</strong><span>想说得更自然、更有信心</span></button>
|
||
<button class="primary" data-go="home" type="button">开始 3 分钟定位</button><button class="text-action" data-go="home" type="button">直接从第一课开始</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="home">
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div>
|
||
<div class="appbody">
|
||
<div class="eyebrow">早上好，Shen</div><h1>今天，说 3 句英语。</h1><p class="bodycopy">第 1 课已完成。今天把姓名介绍说得更自然。</p>
|
||
<div class="meter" aria-label="当前掌握程度"><span style="width:30%"></span></div><p class="small">A0 起步 · 已完成 3 个核心任务</p>
|
||
<div class="slot selected"><div class="slot-title"><span>第 2 课 · 拼读姓名</span><span>12 分钟</span></div><div class="slot-note">先认识 4 个词 · 听 · 说 · 读 · 写</div><button class="primary" data-go="preview" type="button">开始今天的学习</button></div>
|
||
<div class="slot"><div class="slot-title">快速练习 · 初次见面</div><div class="slot-note">3 分钟 AI 对话 · 介绍姓名与来自哪里</div><button class="secondary" data-go="dialogue" type="button">开始对话</button></div>
|
||
</div>
|
||
<nav class="bottom" aria-label="主导航"><button class="navitem active" data-go="home" type="button"><i class="nav-dot"></i>首页</button><button class="navitem" data-go="map" type="button"><i class="nav-dot"></i>学习</button><button class="navitem" data-go="scenes" type="button"><i class="nav-dot"></i>对话</button><button class="navitem" data-go="review" type="button"><i class="nav-dot"></i>复习</button><button class="navitem" data-go="progress" type="button"><i class="nav-dot"></i>我的</button></nav>
|
||
</section>
|
||
<section class="screen" data-screen="map" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="home" type="button">‹</button><h2>A0 起步</h2></div>
|
||
<div class="appbody"><div class="eyebrow">学习地图 · 已完成 3 个任务</div><h1>从认识到开口</h1><p class="bodycopy">核心课建立能力；达到出口任务才进入下一阶段。</p>
|
||
<div class="slot"><div class="slot-title">✓ 第 1 课 · 你好，我是……</div><div class="slot-note">介绍姓名并回应问候</div></div>
|
||
<div class="slot selected"><div class="slot-title">第 2 课 · 拼读姓名 <span>进行中</span></div><div class="slot-note">听懂拼写，并说出自己的名字字母</div></div>
|
||
<div class="slot"><div class="slot-title">第 3 课 · 你好吗？</div><div class="slot-note">问候并表达简单状态</div></div>
|
||
<div class="slot"><div class="slot-title">第 4 课 · 数字与电话号码</div><div class="slot-note">说 0–10 与简单号码</div></div>
|
||
</div>
|
||
<nav class="bottom" aria-label="主导航"><button class="navitem" data-go="home" type="button"><i class="nav-dot"></i>首页</button><button class="navitem active" type="button"><i class="nav-dot"></i>学习</button><button class="navitem" data-go="scenes" type="button"><i class="nav-dot"></i>对话</button><button class="navitem" data-go="review" type="button"><i class="nav-dot"></i>复习</button><button class="navitem" data-go="progress" type="button"><i class="nav-dot"></i>我的</button></nav>
|
||
</section>
|
||
<section class="screen" data-screen="preview" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="home" type="button">‹</button><h2>第 2 课 · 拼读姓名</h2></div>
|
||
<div class="appbody"><div class="seg" aria-label="课前预热，第 1 项，共 4 项"><span class="on"></span><span></span><span></span><span></span></div><div class="eyebrow">先认识今天的词 · 约 2 分钟</div><h1>后面会遇到这些词。</h1><p class="bodycopy">先听一遍、知道意思就够了，不用马上背会。</p>
|
||
<div class="slot selected"><div class="slot-title">今天会遇到 4 个词和词块 <span>1 / 4</span></div><div class="word">spell</div><div class="ipa">/spel/ · 拼写</div><div class="audio"><button class="play" type="button">▶</button><div class="audio-line"><i style="width:42%"></i></div><small>慢速</small></div><div class="lookup-example">How do you spell that?<span>那个怎么拼？</span></div></div>
|
||
<div class="assist"><button type="button">再听一遍</button><button data-go="dictionary" type="button">查词</button></div><button class="primary" data-go="listen" type="button">认识了，进入课程</button><button class="text-action" data-go="listen" type="button">跳过，直接进入课程</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="listen" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="preview" type="button">‹</button><h2>第 2 课 · 拼读姓名</h2></div>
|
||
<div class="appbody"><div class="seg" aria-label="第 1 步，共 5 步"><span class="on"></span><span></span><span></span><span></span><span></span></div><div class="eyebrow">听一听</div><h1>听懂别人怎么问。</h1>
|
||
<div class="audio"><button class="play" type="button">▶</button><div class="audio-line"><i></i></div><small>0:03</small></div>
|
||
<div class="sentence">How do you spell your <button class="lookup-word" data-go="dictionary" type="button">name</button>?</div><div class="lookup-hint"><i>词</i>点英文词或短语，随时查意思</div><p class="bodycopy" style="margin-top:12px">这句话是什么意思？</p>
|
||
<button class="choice active" type="button"><strong>你的名字怎么拼？</strong></button><button class="choice" type="button"><strong>你的名字是什么？</strong></button><button class="choice" type="button"><strong>你来自哪里？</strong></button><button class="primary" data-go="speak" type="button">检查并继续</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="speak" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="listen" type="button">‹</button><h2>第 2 课 · 拼读姓名</h2></div>
|
||
<div class="appbody"><div class="seg" aria-label="第 2 步，共 5 步"><span class="on"></span><span class="on"></span><span></span><span></span><span></span></div><div class="eyebrow">跟读</div><h1>先听，再说。</h1>
|
||
<div class="word">S-H-E-N</div><div class="ipa">/es - eɪtʃ - iː - en/</div><div class="audio"><button class="play" type="button">▶</button><div class="audio-line"><i style="width:61%"></i></div><small>慢速</small></div>
|
||
<div class="slot warm"><div class="slot-title">发音提示</div><div class="slot-note">字母之间留一个短停顿。先清楚，不必快。</div></div>
|
||
<div class="record">按住说话 ● 录音跟读</div><button class="secondary" data-go="write" type="button">改用文字练习</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="write" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="speak" type="button">‹</button><h2>第 2 课 · 拼读姓名</h2></div>
|
||
<div class="appbody"><div class="seg" aria-label="第 4 步，共 5 步"><span class="on"></span><span class="on"></span><span class="on"></span><span class="on"></span><span></span></div><div class="eyebrow">写一写</div><h1>把你的名字写完整。</h1>
|
||
<div class="sentence">My name is <span class="mark">Shen</span>.<br><span class="mark">S-H-E-N</span>.</div><div class="slot"><div class="slot-title">你的答案</div><div class="slot-note">My name is ______.<br>______ - ______ - ______ - ______.</div></div>
|
||
<button class="primary" data-go="dialogue" type="button">进入 AI 对话</button><button class="text-action" data-go="summary" type="button">稍后再练对话</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="scenes" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><h2>AI 对话</h2></div>
|
||
<div class="appbody"><div class="eyebrow">按当前水平推荐</div><h1>选一个场景，开口练习。</h1><p class="bodycopy">每次 3–5 分钟，完成一个明确任务。</p>
|
||
<div class="slot selected"><div class="slot-title">初次见面 <span>A0</span></div><div class="slot-note">介绍姓名和来自哪里 · 4 轮</div><button class="primary" data-go="dialogue" type="button">开始对话</button></div>
|
||
<div class="slot"><div class="slot-title">认识新同学 <span>A0</span></div><div class="slot-note">问候并问对方姓名</div></div><div class="slot"><div class="slot-title">咖啡店 <span>A1</span></div><div class="slot-note">点一杯饮料 · 尚未解锁</div></div>
|
||
</div>
|
||
<nav class="bottom" aria-label="主导航"><button class="navitem" data-go="home" type="button"><i class="nav-dot"></i>首页</button><button class="navitem" data-go="map" type="button"><i class="nav-dot"></i>学习</button><button class="navitem active" type="button"><i class="nav-dot"></i>对话</button><button class="navitem" data-go="review" type="button"><i class="nav-dot"></i>复习</button><button class="navitem" data-go="progress" type="button"><i class="nav-dot"></i>我的</button></nav>
|
||
</section>
|
||
<section class="screen" data-screen="dialogue" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="scenes" type="button">‹</button><h2>初次见面 · 2 / 4</h2></div>
|
||
<div class="appbody"><div class="eyebrow">目标：说姓名和来自哪里</div><div class="chat"><div class="bubble ai">Hi! My name is Mia. What’s your <button class="lookup-word" data-go="dictionary" type="button">name</button>?</div><div class="bubble me">My name is Shen.</div><div class="bubble ai">Nice to meet you, Shen. Where are you <button class="lookup-word" data-go="dictionary" type="button">from</button>?</div></div>
|
||
<div class="lookup-hint"><i>词</i>不认识？点英文词或短语查意思</div><div class="assist"><button type="button">提示</button><button type="button">慢一点</button><button type="button">翻译</button><button type="button">重说</button></div><div class="record" data-go="confirm">按住说话 ● 或输入文字</div><button class="secondary" data-go="summary" type="button">完成对话示例</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="confirm" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="dialogue" type="button">‹</button><h2>确认你说的话</h2></div>
|
||
<div class="appbody"><div class="eyebrow">我没有完全听清</div><h1>你想说的是这句吗？</h1><p class="bodycopy">识别不确定时，先确认，不会直接判成发音错误。</p>
|
||
<div class="slot selected"><div class="slot-title">I’m from Hong Kong.</div><div class="slot-note">我来自香港。</div></div><button class="primary" data-go="summary" type="button">是的，发送这句话</button><button class="secondary" data-go="dialogue" type="button">重新说一次</button><button class="text-action" data-go="dialogue" type="button">修改文字</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="summary" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbody"><div class="eyebrow">对话完成</div><h1>你完成了自我介绍！</h1><p class="bodycopy">你告诉了 Mia 你的姓名和来自哪里。</p>
|
||
<div class="checkline"><b>✓</b><span><strong>说得很好</strong><br>My name is Shen.</span></div><div class="checkline"><b>→</b><span><strong>下次这样说</strong><br>I’m from Hong Kong.</span></div>
|
||
<div class="slot warm"><div class="slot-title">现在再说一次</div><div class="slot-note">I’m from Hong Kong.</div></div><button class="primary" data-go="review" type="button">录音重说</button><button class="secondary" data-go="home" type="button">回到首页</button>
|
||
</div>
|
||
</section>
|
||
<section class="screen" data-screen="review" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><h2>今天复习 · 3 项</h2></div>
|
||
<div class="appbody"><div class="eyebrow">昨天的对话</div><h1>再回答一次。</h1><p class="bodycopy">这次换成新的情境，也能用上同一句话。</p><div class="review-prompt">AI：Hi! Where are you from?</div><div class="assist"><button type="button">提示</button><button type="button">慢一点</button><button type="button">翻译</button></div><div class="record">按住说话 ● 或输入文字</div><p class="small" style="margin-top:13px">完成后还有 2 项 · 每项约 1 分钟</p></div>
|
||
<nav class="bottom" aria-label="主导航"><button class="navitem" data-go="home" type="button"><i class="nav-dot"></i>首页</button><button class="navitem" data-go="map" type="button"><i class="nav-dot"></i>学习</button><button class="navitem" data-go="scenes" type="button"><i class="nav-dot"></i>对话</button><button class="navitem active" type="button"><i class="nav-dot"></i>复习</button><button class="navitem" data-go="progress" type="button"><i class="nav-dot"></i>我的</button></nav>
|
||
</section>
|
||
<section class="screen" data-screen="progress" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><h2>我的进步</h2></div>
|
||
<div class="appbody"><div class="eyebrow">当前：A0 起步</div><h1>你已经能做到</h1><p class="bodycopy">进步以“能完成什么”呈现，而非单纯的分数。</p>
|
||
<div class="levelmap"><div class="level"><i class="on"></i><div><b>介绍姓名</b><span>完成 2 次对话</span></div><span>✓</span></div><div class="level"><i class="on"></i><div><b>说来自哪里</b><span>已加入复习</span></div><span>✓</span></div><div class="level"><i></i><div><b>拼读电话号码</b><span>下一项核心练习</span></div><span>→</span></div></div>
|
||
<div class="slot"><div class="slot-title">A0 当前掌握 <span>准备出口挑战</span></div><div class="meter"><span style="width:30%"></span></div></div><button class="secondary" data-go="settings" type="button">调整学习设置</button>
|
||
</div>
|
||
<nav class="bottom" aria-label="主导航"><button class="navitem" data-go="home" type="button"><i class="nav-dot"></i>首页</button><button class="navitem" data-go="map" type="button"><i class="nav-dot"></i>学习</button><button class="navitem" data-go="scenes" type="button"><i class="nav-dot"></i>对话</button><button class="navitem" data-go="review" type="button"><i class="nav-dot"></i>复习</button><button class="navitem active" type="button"><i class="nav-dot"></i>我的</button></nav>
|
||
</section>
|
||
<section class="screen" data-screen="settings" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="progress" type="button">‹</button><h2>学习设置</h2></div>
|
||
<div class="appbody"><div class="setting"><div>AI 对话服务<br><span>Gemini API · 可切换兼容反代</span></div><b>›</b></div><div class="setting"><div>每日学习时间<br><span>20 分钟</span></div><b>›</b></div><div class="setting"><div>英文朗读速度<br><span>慢速</span></div><b>›</b></div><div class="setting"><div>默认显示中文提示<br><span>A0 阶段开启</span></div><div class="toggle"><i></i></div></div><div class="setting"><div>保存原始录音<br><span>仅保存在本机</span></div><div class="toggle"><i></i></div></div><button class="secondary" data-go="home" type="button">清空本机练习记录</button></div>
|
||
</section>
|
||
<section class="screen" data-screen="dictionary" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="dialogue" type="button">‹</button><h2>初次见面 · 2 / 4</h2></div>
|
||
<div class="lookup-stage"><div class="lookup-context">AI：Nice to meet you, Shen. Where are you <span class="mark">from</span>?</div><div class="lookup-sheet"><div class="lookup-handle"></div><div class="lookup-head"><div><div class="word">from</div><div class="ipa">/frʌm/ · 介词</div></div><button class="lookup-close" data-go="dialogue" aria-label="关闭查词卡" type="button">×</button></div><p class="meaning">来自；从……</p><div class="audio"><button class="play" type="button">▶</button><div class="audio-line"><i style="width:45%"></i></div><small>慢速</small></div><div class="lookup-example">I’m from Hong Kong.<span>我来自香港。</span></div><button class="primary" type="button">加入复习</button><button class="text-action" data-go="dialogue" type="button">关闭，回到对话</button></div></div>
|
||
</section>
|
||
<section class="screen" data-screen="mac" hidden>
|
||
<div class="status"><span>开口英语</span><span>◉ Shen</span></div>
|
||
<div class="mac-body"><aside class="mac-side"><b>开口英语</b><span class="on">首页</span><span>学习</span><span>对话</span><span>复习</span><span>我的</span></aside><main class="mac-main"><div class="eyebrow">早上好，Shen</div><h1>今天，说 3 句英语。</h1><p class="bodycopy">Mac 复用手机端的课程与进度，本机也能独立练习。</p><div class="mac-grid"><div class="slot selected"><div class="slot-title">第 2 课 · 拼读姓名</div><div class="slot-note">12 分钟 · 先认识 4 个词 · 听说读写</div><button class="primary" data-go="preview" type="button">继续学习</button></div><div class="slot"><div class="slot-title">AI 对话 · 初次见面</div><div class="slot-note">3 分钟 · 介绍姓名与地点</div><button class="secondary" data-go="dialogue" type="button">开始对话</button></div></div><div class="slot" style="margin-top:12px"><div class="slot-title">今天复习 · 3 项</div><div class="slot-note">昨天的关键句将在新情境中再次练习。</div></div></main></div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
<aside class="panel flow-panel" aria-label="原型流程说明">
|
||
<p class="legend-title">M1 流程</p><div class="flow"><div class="flow-row"><strong>首次使用</strong>目标设置 → 起点定位 → 首页</div><div class="flow-row active"><strong>日常学习</strong>首页 → 词汇预热 → 课程 → AI 对话 → 总结</div><div class="flow-row"><strong>查词帮助</strong>点词/短语 → 查词卡 → 回到原步骤</div><div class="flow-row"><strong>纠错保护</strong>低置信转写 → 确认 / 修改 / 重说</div><div class="flow-row"><strong>巩固</strong>总结 → 次日微对话复习</div><div class="flow-row"><strong>设备</strong>手机优先；Mac 使用更宽的同一学习结构</div></div><p class="legend-title" style="margin-top:20px">设计原则</p><span class="chip">一个主任务</span><span class="chip">预热不算掌握</span><span class="chip">短语优先查词</span><span class="chip">口音可理解即接受</span><span class="chip">一次只纠正一个点</span><span class="chip">语音失败可改文字</span>
|
||
</aside>
|
||
</div>
|
||
<script>
|
||
(() => {
|
||
const root = document.getElementById('learning-app-prototype');
|
||
const phone = root.querySelector('#prototype-phone');
|
||
const screens = [...root.querySelectorAll('.screen')];
|
||
const links = [...root.querySelectorAll('[data-screen-target]')];
|
||
const show = name => {
|
||
screens.forEach(screen => { screen.hidden = screen.dataset.screen !== name; });
|
||
links.forEach(link => link.setAttribute('aria-pressed', String(link.dataset.screenTarget === name)));
|
||
phone.classList.toggle('mac', name === 'mac');
|
||
};
|
||
links.forEach(link => link.addEventListener('click', () => show(link.dataset.screenTarget)));
|
||
root.querySelectorAll('[data-go]').forEach(button => button.addEventListener('click', () => show(button.dataset.go)));
|
||
show('home');
|
||
})();
|
||
</script>
|
||
</div>
|