411 lines
56 KiB
HTML
411 lines
56 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 .screen-link.sub { padding-left:22px; font-size:12px; }
|
||
#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; }
|
||
#learning-app-prototype .me-card { background:var(--ka-surface); border:1px solid var(--ka-line); border-radius:18px; padding:14px; }
|
||
#learning-app-prototype .me-head { display:flex; align-items:center; gap:12px; }
|
||
#learning-app-prototype .avatar { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--ka-soft-green); color:var(--ka-green); font-size:19px; font-weight:500; }
|
||
#learning-app-prototype .me-name { font-size:17px; font-weight:500; }
|
||
#learning-app-prototype .level-badge { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:var(--ka-soft-green); color:var(--ka-green); font-size:11px; vertical-align:2px; }
|
||
#learning-app-prototype .stats { display:grid; grid-template-columns:repeat(4,1fr); margin-top:13px; padding-top:12px; border-top:1px solid var(--ka-line); }
|
||
#learning-app-prototype .stat { border:0; background:transparent; color:var(--ka-ink); text-align:center; padding:0; }
|
||
#learning-app-prototype .stat b { display:block; font-size:19px; font-weight:500; }
|
||
#learning-app-prototype .stat span { color:var(--ka-muted); font-size:11px; }
|
||
#learning-app-prototype .stat.due b { color:var(--ka-warm-ink); }
|
||
#learning-app-prototype .goal-card { width:100%; display:block; text-align:left; border:0; border-radius:16px; padding:13px 14px; margin-top:11px; background:var(--ka-soft-green); color:var(--ka-ink); }
|
||
#learning-app-prototype .goal-card .meter { margin:9px 0 8px; background:light-dark(#c9e4d3, #2a4a37); }
|
||
#learning-app-prototype .group-title { color:var(--ka-muted); font-size:12px; margin:17px 4px 6px; }
|
||
#learning-app-prototype .menu { background:var(--ka-surface); border:1px solid var(--ka-line); border-radius:15px; overflow:hidden; }
|
||
#learning-app-prototype .menu-row { width:100%; display:flex; align-items:center; gap:11px; border:0; border-bottom:1px solid var(--ka-line); background:transparent; color:var(--ka-ink); padding:11px 12px; text-align:left; font-size:14px; }
|
||
#learning-app-prototype .menu-row:last-child { border-bottom:0; }
|
||
#learning-app-prototype .menu-row .ico { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--ka-surface-2); font-size:14px; }
|
||
#learning-app-prototype .menu-row .label { flex:1; }
|
||
#learning-app-prototype .menu-row .label small { display:block; color:var(--ka-muted); font-size:11px; margin-top:1px; }
|
||
#learning-app-prototype .menu-row .val { color:var(--ka-muted); font-size:12px; }
|
||
#learning-app-prototype .menu-row .chev { color:var(--ka-muted); font-size:16px; }
|
||
#learning-app-prototype .menu-row.danger { color:light-dark(#b3261e, #ffb4ab); justify-content:center; }
|
||
#learning-app-prototype .version { text-align:center; color:var(--ka-muted); font-size:11px; margin:12px 0 0; }
|
||
#learning-app-prototype .scroll { height:593px; overflow-y:auto; }
|
||
#learning-app-prototype .ability { padding:11px 0; border-bottom:1px solid var(--ka-line); }
|
||
#learning-app-prototype .ability:last-child { border-bottom:0; }
|
||
#learning-app-prototype .ability .meter { margin:7px 0 0; }
|
||
#learning-app-prototype details { margin-top:11px; padding:11px 12px; background:var(--ka-surface); border:1px solid var(--ka-line); border-radius:15px; font-size:13px; }
|
||
#learning-app-prototype details p { color:var(--ka-muted); font-size:12px; line-height:1.55; margin:8px 0 0; }
|
||
#learning-app-prototype .tag { display:inline-block; padding:2px 7px; border-radius:999px; font-size:11px; font-weight:400; background:var(--ka-surface-2); color:var(--ka-muted); }
|
||
#learning-app-prototype .tag.ok { background:var(--ka-soft-green); color:var(--ka-green); }
|
||
#learning-app-prototype .tag.help { background:var(--ka-warm); color:var(--ka-warm-ink); }
|
||
#learning-app-prototype .day { color:var(--ka-muted); font-size:12px; margin:14px 4px 6px; }
|
||
#learning-app-prototype .field { padding:10px 12px; border-bottom:1px solid var(--ka-line); font-size:13px; }
|
||
#learning-app-prototype .field span { display:block; color:var(--ka-muted); font-size:11px; margin-bottom:3px; }
|
||
#learning-app-prototype .segmented { display:flex; padding:3px; border-radius:12px; background:var(--ka-surface-2); margin-top:9px; }
|
||
#learning-app-prototype .segmented button { flex:1; border:0; border-radius:9px; padding:8px 0; background:transparent; color:var(--ka-muted); font-size:13px; }
|
||
#learning-app-prototype .segmented button.on { background:var(--ka-surface); color:var(--ka-ink); font-weight:500; box-shadow:0 1px 3px rgba(0,0,0,.12); }
|
||
#learning-app-prototype .row2 { display:flex; gap:8px; } #learning-app-prototype .row2 > * { flex:1; }
|
||
#learning-app-prototype .state-switch { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:10px 0 2px; padding:7px 8px; border:1px dashed var(--ka-line); border-radius:11px; font-size:11px; color:var(--ka-muted); }
|
||
#learning-app-prototype .state-switch button { border:1px solid var(--ka-line); border-radius:999px; padding:3px 8px; background:var(--ka-surface); color:var(--ka-muted); font-size:11px; }
|
||
#learning-app-prototype .state-switch button.on { border-color:var(--ka-green); color:var(--ka-green); }
|
||
#learning-app-prototype .slot[hidden] { display:none; }
|
||
#learning-app-prototype .path-head { display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; font-size:15px; }
|
||
#learning-app-prototype .path-head b { font-weight:500; }
|
||
#learning-app-prototype .path { margin-top:8px; background:var(--ka-surface); border:1px solid var(--ka-line); border-radius:15px; overflow:hidden; }
|
||
#learning-app-prototype .lesson-row { display:flex; align-items:center; gap:11px; padding:11px 12px; border-bottom:1px solid var(--ka-line); }
|
||
#learning-app-prototype .lesson-row:last-child { border-bottom:0; }
|
||
#learning-app-prototype .lesson-row .label { flex:1; }
|
||
#learning-app-prototype .lesson-row b { display:block; font-size:14px; font-weight:500; }
|
||
#learning-app-prototype .lesson-row small { color:var(--ka-muted); font-size:11px; }
|
||
#learning-app-prototype .lesson-ico { width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%; font-style:normal; font-size:12px; background:var(--ka-surface-2); color:var(--ka-muted); }
|
||
#learning-app-prototype .lesson-row.done .lesson-ico { background:var(--ka-green); color:var(--ka-green-ink); }
|
||
#learning-app-prototype .lesson-row.current { background:var(--ka-soft-green); }
|
||
#learning-app-prototype .lesson-row.current .lesson-ico { background:var(--ka-green); color:var(--ka-green-ink); }
|
||
#learning-app-prototype .lesson-row.locked b { color:var(--ka-muted); }
|
||
@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="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 sub" data-screen-target="me-level" aria-pressed="false" type="button">13a 升级进度</button>
|
||
<button class="screen-link sub" data-screen-target="me-assess" aria-pressed="false" type="button">13b 四技能评估</button>
|
||
<button class="screen-link sub" data-screen-target="me-records" aria-pressed="false" type="button">13c 学习记录</button>
|
||
<button class="screen-link sub" data-screen-target="me-audio" aria-pressed="false" type="button">13d 我的录音</button>
|
||
<button class="screen-link" data-screen-target="settings" aria-pressed="false" type="button">14 学习偏好</button>
|
||
<button class="screen-link sub" data-screen-target="set-theme" aria-pressed="false" type="button">14a 外观</button>
|
||
<button class="screen-link sub" data-screen-target="set-sync" aria-pressed="false" type="button">14b 云同步</button>
|
||
<button class="screen-link sub" data-screen-target="set-ai" aria-pressed="false" type="button">14c AI 服务</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">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 scroll">
|
||
<div class="eyebrow">早上好，Shen</div><h1>今天，说几句能用的英语。</h1>
|
||
<div class="state-switch" role="group" aria-label="原型：切换今日任务状态"><span>原型状态：</span><button class="on" data-today="review" type="button">有到期复习</button><button data-today="lesson" type="button">上新课</button><button data-today="stage" type="button">A0 学完</button></div>
|
||
<div class="slot selected today" data-today-card="review"><div class="slot-title"><span>今天先复习 3 项</span><span class="small">6 分钟</span></div><div class="slot-note">昨天练过的关键句，今天换个情境再用一次。复习完再上新课。</div><button class="primary" data-go="review" type="button">开始复习</button></div>
|
||
<div class="slot selected today" data-today-card="lesson" hidden><div class="slot-title"><span>第 3 课 · 来自哪里 · 第 2/3 段</span><span class="small">12 分钟</span></div><div class="slot-note">预热词汇 → 听说读写 → 对话 → 独立尝试</div><button class="primary" data-go="preview" type="button">开始今天的学习</button></div>
|
||
<div class="slot selected today" data-today-card="stage" hidden><div class="slot-title"><span>A0 阶段评估 · A0-E1</span><span class="small">15 分钟</span></div><div class="slot-note">可使用 48/48 · 已掌握 30/30。两套评估间隔至少 24 小时。</div><button class="primary" type="button">开始阶段评估</button></div>
|
||
<div class="path-head"><b>A0 课程</b><span class="small">2 / 8 完成</span></div>
|
||
<div class="meter" style="margin:6px 0 4px"><span style="width:25%"></span></div>
|
||
<div class="path">
|
||
<div class="lesson-row done"><i class="lesson-ico">✓</i><div class="label"><b>第 1 课 · 你好，我是……</b><small>介绍姓名并回应问候</small></div></div>
|
||
<div class="lesson-row done"><i class="lesson-ico">✓</i><div class="label"><b>第 2 课 · 拼读姓名</b><small>听懂拼写，说出名字字母</small></div></div>
|
||
<div class="lesson-row current"><i class="lesson-ico">▶</i><div class="label"><b>第 3 课 · 来自哪里</b><small>说出来自哪里 · 小段 1/3</small></div></div>
|
||
<div class="lesson-row locked"><i class="lesson-ico">🔒</i><div class="label"><b>第 4 课 · 数字与电话号码</b><small>说 0–10 与简单号码</small></div></div>
|
||
<div class="lesson-row locked"><i class="lesson-ico">🔒</i><div class="label"><b>第 5 课 · 你好吗？</b><small>问候并表达简单状态</small></div></div>
|
||
<div class="lesson-row locked"><i class="lesson-ico">🔒</i><div class="label"><b>…… 第 8 课</b><small>A0 课程结束后进入巩固与阶段评估</small></div></div>
|
||
</div>
|
||
<p class="small" style="margin-top:10px">已完成的课可以随时点开重练；有复习积压时，新课会暂时锁住。</p>
|
||
</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="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 active" 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="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="scenes" type="button"><i class="nav-dot"></i>对话</button><button class="navitem active" 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="progress" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar" style="justify-content:space-between"><h2>我的</h2><button class="back" data-go="settings" aria-label="设置" type="button">⚙</button></div>
|
||
<div class="appbody scroll">
|
||
<div class="me-card"><div class="me-head"><div class="avatar">S</div><div><div class="me-name">Shen<span class="level-badge">A0 起步</span></div><p class="small">每天 20 分钟 · 已坚持 6 天</p></div></div>
|
||
<div class="stats"><button class="stat" data-go="me-records" type="button"><b>12</b><span>已学课</span></button><button class="stat" data-go="me-level" type="button"><b>31</b><span>可使用</span></button><button class="stat" data-go="me-level" type="button"><b>9</b><span>已掌握</span></button><button class="stat due" data-go="review" type="button"><b>3</b><span>待复习</span></button></div></div>
|
||
<button class="goal-card" data-go="me-level" type="button"><div class="slot-title">距离 A1 <span class="small">52% ›</span></div><div class="meter"><span style="width:52%"></span></div><p class="small">还需：17 项可使用 · 21 项掌握 · 2 套评估</p></button>
|
||
<div class="group-title">学习</div>
|
||
<div class="menu"><button class="menu-row" data-go="me-level" type="button"><i class="ico">📈</i><span class="label">升级进度</span><span class="val">52%</span><span class="chev">›</span></button><button class="menu-row" data-go="me-assess" type="button"><i class="ico">📝</i><span class="label">四技能评估</span><span class="val">0/2 通过</span><span class="chev">›</span></button><button class="menu-row" data-go="me-records" type="button"><i class="ico">🕘</i><span class="label">学习记录</span><span class="val"></span><span class="chev">›</span></button><button class="menu-row" data-go="me-audio" type="button"><i class="ico">🎙</i><span class="label">我的录音</span><span class="val">8 条</span><span class="chev">›</span></button></div>
|
||
<div class="group-title">设置</div>
|
||
<div class="menu"><button class="menu-row" data-go="settings" type="button"><i class="ico">📚</i><span class="label">学习偏好</span><span class="val">20 分钟</span><span class="chev">›</span></button><button class="menu-row" data-go="set-theme" type="button"><i class="ico">🎨</i><span class="label">外观</span><span class="val">跟随系统</span><span class="chev">›</span></button><button class="menu-row" data-go="set-sync" type="button"><i class="ico">☁️</i><span class="label">云同步</span><span class="val">已登录</span><span class="chev">›</span></button><button class="menu-row" data-go="set-ai" type="button"><i class="ico">🤖</i><span class="label">AI 服务</span><span class="val">DeepSeek</span><span class="chev">›</span></button></div>
|
||
<div class="menu" style="margin-top:17px"><button class="menu-row danger" type="button">清除本机学习数据</button></div>
|
||
<p class="version">开口英语 1.0.0</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="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" data-go="progress" type="button"><i class="nav-dot"></i>我的</button></nav>
|
||
</section>
|
||
<section class="screen" data-screen="me-level" 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 scroll"><div class="eyebrow">A0 → A1</div><h1>已完成 52%</h1><p class="bodycopy">进度来自掌握证据，不是上完固定课数就升级。</p>
|
||
<div class="me-card" style="margin-top:13px"><div class="ability"><div class="slot-title">可使用 <span class="small">31 / 48</span></div><p class="small">核心内容已获得独立使用证据</p><div class="meter"><span style="width:65%"></span></div></div><div class="ability"><div class="slot-title">已掌握（间隔复习） <span class="small">9 / 30</span></div><p class="small">达到四次间隔复习要求</p><div class="meter"><span style="width:30%"></span></div></div><div class="ability"><div class="slot-title">两套四技能评估 <span class="small">0 / 2</span></div><p class="small">两套题组需间隔至少 24 小时</p><div class="meter"><span style="width:0%"></span></div></div></div>
|
||
<details><summary>进入下一阶段的条件</summary><p>60 项固定核心内容中至少 48 项可使用、30 项已掌握，且两套不同题组的听说读写评估都通过并间隔至少 24 小时。</p></details>
|
||
<button class="primary" data-go="review" type="button">去复习 3 项，推进掌握</button></div>
|
||
</section>
|
||
<section class="screen" data-screen="me-assess" 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 scroll"><p class="bodycopy">评估不提供翻译或句框。两套都通过，且间隔 24 小时以上，才计入升级。</p>
|
||
<div class="slot"><div class="slot-title">A0-E1 <span class="tag">未开始</span></div><p class="slot-note">听 · 说 · 读 · 写，各 2 题 · 约 12 分钟</p><button class="primary" type="button">开始评估</button></div>
|
||
<div class="slot"><div class="slot-title">A0-E2 <span class="tag">未解锁</span></div><p class="slot-note">A0-E1 通过 24 小时后可开始</p></div>
|
||
<p class="small" style="margin-top:12px">完成后可在这里查看得分和错题回顾。</p></div>
|
||
</section>
|
||
<section class="screen" data-screen="me-records" 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 scroll"><div class="segmented"><button class="on" type="button">全部</button><button type="button">独立完成</button><button type="button">带帮助</button></div>
|
||
<div class="day">今天</div><div class="menu"><div class="menu-row"><span class="label">I'm from Hong Kong.<small>复习 · 口语</small></span><span class="tag ok">独立完成</span></div><div class="menu-row"><span class="label">My number is 1-2-3.<small>听写</small></span><span class="tag help">带提示</span></div></div>
|
||
<div class="day">昨天</div><div class="menu"><div class="menu-row"><span class="label">第 5 课 · 来自哪里<small>课程 · 6 步完成</small></span><span class="tag ok">完成</span></div><div class="menu-row"><span class="label">初次见面<small>AI 对话 · 4 轮</small></span><span class="tag help">带帮助</span></div><div class="menu-row"><span class="label">Nice to meet you.<small>复习 · 写作</small></span><span class="tag ok">独立完成</span></div></div>
|
||
<p class="small" style="margin-top:12px">记录只保存在本机，用于解释进度。</p></div>
|
||
</section>
|
||
<section class="screen" data-screen="me-audio" 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 scroll"><div class="menu"><div class="menu-row"><i class="ico">▶</i><span class="label">I'm from Hong Kong.<small>今天 9:12 · 0:03</small></span><span class="val">删除</span></div><div class="menu-row"><i class="ico">▶</i><span class="label">My name is Shen.<small>昨天 20:40 · 0:02</small></span><span class="val">删除</span></div><div class="menu-row"><i class="ico">▶</i><span class="label">Nice to meet you.<small>昨天 20:35 · 0:02</small></span><span class="val">删除</span></div></div>
|
||
<div class="menu" style="margin-top:12px"><div class="menu-row"><span class="label">保存原始录音<small>仅保存在本机</small></span><div class="toggle"><i></i></div></div></div>
|
||
<button class="secondary" type="button">清除全部录音</button></div>
|
||
</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 scroll"><div class="menu"><button class="menu-row" type="button"><i class="ico">⏱</i><span class="label">每日学习时间</span><span class="val">20 分钟</span><span class="chev">›</span></button><div class="menu-row"><i class="ico">中</i><span class="label">默认显示中文提示<small>A0 阶段建议开启</small></span><div class="toggle"><i></i></div></div><button class="menu-row" type="button"><i class="ico">🔊</i><span class="label">英文朗读速度</span><span class="val">慢速</span><span class="chev">›</span></button><button class="menu-row" type="button"><i class="ico">🗣</i><span class="label">离线语音识别</span><span class="val">SenseVoice</span><span class="chev">›</span></button></div></div>
|
||
</section>
|
||
<section class="screen" data-screen="set-theme" 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 scroll"><div class="group-title">主题</div><div class="segmented"><button class="on" type="button">跟随系统</button><button type="button">浅色</button><button type="button">深色</button></div><p class="small" style="margin:10px 4px 0">选择“跟随系统”时，随手机的深色模式自动切换。</p></div>
|
||
</section>
|
||
<section class="screen" data-screen="set-sync" 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 scroll"><div class="me-card"><div class="me-head"><div class="avatar">☁</div><div><div class="me-name">shen</div><p class="small">上次同步：今天 9:15</p></div></div></div>
|
||
<div class="menu" style="margin-top:12px"><div class="menu-row"><span class="label">自动同步<small>学习后在后台同步</small></span><div class="toggle"><i></i></div></div><button class="menu-row" type="button"><i class="ico">🌐</i><span class="label">服务器地址</span><span class="val">sync.example.com</span><span class="chev">›</span></button></div>
|
||
<button class="primary" type="button">立即同步</button><button class="secondary" type="button">退出登录</button></div>
|
||
</section>
|
||
<section class="screen" data-screen="set-ai" hidden>
|
||
<div class="status"><span>9:41</span><span>● ● ●</span></div><div class="appbar"><button class="back" data-go="progress" type="button">‹</button><h2>AI 服务</h2></div>
|
||
<div class="appbody scroll"><div class="menu"><button class="menu-row" type="button"><i class="ico">🤖</i><span class="label">服务类型</span><span class="val">OpenAI 兼容</span><span class="chev">›</span></button><div class="field"><span>接口地址</span>https://api.deepseek.com</div><div class="field"><span>模型</span>deepseek-flash</div><div class="field" style="border-bottom:0"><span>API Key</span>••••••••••••</div></div>
|
||
<div class="row2"><button class="secondary" type="button">测试连接</button><button class="primary" style="margin-top:8px" type="button">保存</button></div>
|
||
<p class="small" style="margin:12px 4px 0">AI 只提供建议，不会直接决定你的掌握程度。</p></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></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)));
|
||
root.querySelectorAll('[data-today]').forEach(button => button.addEventListener('click', () => {
|
||
root.querySelectorAll('[data-today]').forEach(b => b.classList.toggle('on', b === button));
|
||
root.querySelectorAll('[data-today-card]').forEach(card => { card.hidden = card.dataset.todayCard !== button.dataset.today; });
|
||
}));
|
||
show('home');
|
||
})();
|
||
</script>
|
||
</div>
|