feat(demo): update screenshots and add line graph feature

Author: alvin000009238

demo/assets/advanved_page.webp

@@ -142,6 +142,18 @@ <h3 data-i18n="feature.trend.title">追蹤你的進步軌跡</h3>
           <p data-i18n="feature.trend.desc">自動比對同學期歷次考試，清楚看到平均與排名的變化趨勢。</p>
         </div>
 
+        <div class="feature-card">
+          <div class="feature-card-phone">
+            <div class="phone-mockup">
+              <div class="phone-screen">
+                <img src="./assets/line_graph.webp" alt="成績折線圖頁面" loading="lazy" width="1440" height="2993">
+              </div>
+            </div>
+          </div>
+          <h3 data-i18n="feature.line_graph.title">視覺化歷次成績</h3>
+          <p data-i18n="feature.line_graph.desc">透過折線圖直觀呈現各科成績走勢，支援多科目同時比較，成績起伏一目了然。</p>
+        </div>
+
         <div class="feature-card">
           <div class="feature-card-phone">
             <div class="phone-mockup">
@@ -166,19 +178,6 @@ <h3 data-i18n="feature.timetable.title">輕鬆查看課表</h3>
           <p data-i18n="feature.timetable.desc">隨時隨地查看每日課表，掌握上課節次與科目。</p>
         </div>
 
-        <div class="feature-card"
-          style="display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px dashed var(--border-medium); background: transparent;">
-          <div
-            style="width: 64px; height: 64px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
-            <svg style="width: 32px; height: 32px; color: var(--text-tertiary);" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 5v14M5 12h14" />
-            </svg>
-          </div>
-          <h3 data-i18n="feature.more.title">更多功能</h3>
-          <p data-i18n="feature.more.desc">持續開發增加中，敬請期待...</p>
-        </div>
-
       </div>
 
     </div>

demo/assets/line_graph.webp

@@ -23,10 +23,10 @@ const translations = {
     'feature.simulator.desc': '拖動滑桿調整各科分數，即時計算調整後的加權平均，規劃你的讀書策略。',
     'feature.trend.title': '追蹤你的進步軌跡',
     'feature.trend.desc': '自動比對同學期歷次考試，清楚看到平均與排名的變化趨勢。',
+    'feature.line_graph.title': '視覺化歷次成績',
+    'feature.line_graph.desc': '透過折線圖直觀呈現各科成績走勢，支援多科目同時比較，成績起伏一目了然。',
     'feature.timetable.title': '輕鬆查看課表',
     'feature.timetable.desc': '隨時隨地查看每日課表，掌握上課節次與科目。',
-    'feature.more.title': '更多功能',
-    'feature.more.desc': '持續開發增加中，敬請期待...',
     'privacy.title': '隱私與安全',
     'privacy.nopassword.title': '不保存密碼',
     'privacy.nopassword.desc': '你的密碼只在登入時使用，不會被儲存在任何地方。',
@@ -65,10 +65,10 @@ const translations = {
     'feature.simulator.desc': 'Drag sliders to adjust scores per subject and instantly calculate the new weighted average.',
     'feature.trend.title': 'Track your progress',
     'feature.trend.desc': 'Automatically compares exams across the semester to visualize average and rank trends.',
+    'feature.line_graph.title': 'Visualize Grade Trends',
+    'feature.line_graph.desc': 'Intuitively display grade trends for each subject through line graphs, supporting multi-subject comparisons at a glance.',
     'feature.timetable.title': 'Check Timetable Easily',
     'feature.timetable.desc': 'View your daily timetable anytime, anywhere. Keep track of class periods and subjects.',
-    'feature.more.title': 'More Features',
-    'feature.more.desc': 'More features are continually being added, stay tuned...',
     'privacy.title': 'Privacy & Security',
     'privacy.nopassword.title': 'No password storage',
     'privacy.nopassword.desc': 'Your password is only used during login and is never stored anywhere.',