IELTS-Speaking-AI/language-learning-prototype.html at main · 1599570912/IELTS-Speaking-AI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AI Scenario Language Coach Prototype</title>
  <link rel="stylesheet" href="./language-learning-prototype.css">
</head>
<body>
  <main class="app-shell">
    <aside class="sidebar" aria-label="学习设置">
      <div class="brand-block">
        <p class="eyebrow">Prototype</p>
        <h1>Scenario Language Coach</h1>
        <p class="brand-copy">用小场景组织英语和日语学习，让表达在不同情景里自然重逢。</p>
      </div>

      <section class="control-panel" aria-labelledby="language-title">
        <h2 id="language-title">语言</h2>
        <div class="segmented" role="group" aria-label="选择语言">
          <button class="segment active" type="button" data-language="en">English</button>
          <button class="segment" type="button" data-language="ja">日本語</button>
        </div>
      </section>

      <section class="control-panel" aria-labelledby="goal-title">
        <h2 id="goal-title">今日节奏</h2>
        <label class="field-label" for="timeSelect">可用时间</label>
        <select id="timeSelect">
          <option value="10">10 分钟</option>
          <option value="18" selected>18 分钟</option>
          <option value="25">25 分钟</option>
        </select>
      </section>

      <section class="control-panel" aria-labelledby="progress-title">
        <h2 id="progress-title">学习状态</h2>
        <div class="progress-list" id="progressList"></div>
        <div class="progress-insight-list" id="progressInsightList"></div>
      </section>

      <section class="control-panel" aria-labelledby="review-title">
        <h2 id="review-title">复现队列</h2>
        <div class="review-list" id="reviewList"></div>
      </section>

      <section class="control-panel" aria-labelledby="memory-title">
        <h2 id="memory-title">表达记忆</h2>
        <div class="memory-tools">
          <label class="field-label" for="memoryFilterSelect">显示范围</label>
          <select id="memoryFilterSelect">
            <option value="all" selected>全部表达</option>
            <option value="due">到期复现</option>
            <option value="needs_support">需要支架</option>
            <option value="learning">学习中</option>
            <option value="reviewing">复现中</option>
            <option value="stable">已稳定</option>
          </select>
        </div>
        <div class="memory-list" id="memoryList"></div>
      </section>

      <section class="control-panel" aria-labelledby="session-history-title">
        <h2 id="session-history-title">最近小结</h2>
        <div class="session-history-list" id="sessionHistoryList"></div>
      </section>

      <section class="control-panel" aria-labelledby="event-title">
        <h2 id="event-title">学习事件</h2>
        <div class="event-list" id="eventLog"></div>
      </section>
    </aside>

    <section class="workspace" aria-live="polite">
      <header class="topbar">
        <div>
          <p class="eyebrow">今日学习包</p>
          <h2 id="packTitle">正在载入内容</h2>
          <p class="pack-reason" id="packReason">正在分析今日学习路径</p>
        </div>
        <button class="quiet-button" type="button" id="resetProgressBtn">重置进度</button>
      </header>

      <section class="session-path" id="sessionPath" aria-label="今日学习路径"></section>

      <section class="pack-dashboard" aria-labelledby="task-range-title">
        <div class="task-filter-panel">
          <p class="eyebrow">任务范围</p>
          <h2 id="task-range-title">场景任务</h2>
          <label class="field-label dark-label" for="taskFilterSelect">显示</label>
          <select id="taskFilterSelect" class="light-select">
            <option value="recommended" selected>今日推荐</option>
            <option value="all">全部任务</option>
            <option value="unfinished">待练习</option>
            <option value="completed">已完成</option>
            <option value="review_linked">复现关联</option>
          </select>
        </div>
        <div class="pack-insight" id="packInsight"></div>
      </section>

      <section class="daily-pack" id="dailyPack"></section>

      <section class="session-layout">
        <article class="scenario-surface" id="scenarioSurface"></article>
        <aside class="practice-rail" id="practiceRail" aria-label="练习与反馈"></aside>
      </section>
    </section>
  </main>

  <script src="./language-learning-engine.js"></script>
  <script src="./language-learning-practice-engine.js"></script>
  <script src="./language-learning-prototype.js"></script>
</body>
</html>