Skip to content

Commit 24c711c

Browse files
alvin000009238alvin000009238
committed
style: overhaul web demo landing page with light mode and S24 ultra mockups
1 parent 239b55d commit 24c711c

4 files changed

Lines changed: 333 additions & 393 deletions

File tree

‎AGENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
- Release notes 來自 `CHANGELOG.md` 內與 tag 對應的 `## [x.y.z]` 區塊；新增版本時要先補 changelog。
3434
- `CHANGELOG.md` 的新版本內容必須和上一個版本比較，並比照既有 `v1.1.0` 的分類寫法（Features、Bug Fixes、Performance Improvements），不要混入更早版本已經發布的內容。
3535
- **重要規則**：將更新發布推送至 GitHub 前，必須先將 `CHANGELOG.md` 寫完並請使用者檢查和修改，確認無誤後才能推送。
36+
- **重要規則**：`CHANGELOG.md` 僅用於記錄與 Android app 有關的更新。若僅修改 Web Demo 等非 Android app 相關的程式碼，請勿更動 `CHANGELOG.md`，也不要新增版本號。
3637
- GitHub Secrets 需設定 `ANDROID_RELEASE_KEYSTORE_BASE64`、`ANDROID_RELEASE_KEYSTORE_PASSWORD`、`ANDROID_RELEASE_KEY_ALIAS`、`ANDROID_RELEASE_KEY_PASSWORD`。不要提交 keystore 或密碼。
3738

3839
## Android UI fake data

‎demo/index.html‎

Lines changed: 74 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>壢中成績 — Android App</title>
7+
<title>壢中成績 - Android App</title>
88
<meta name="description" content="壢中成績查詢與分析 Android App，自動化成績查詢、深度科目分析、成績模擬器與歷次趨勢追蹤。">
9-
<meta property="og:title" content="壢中成績 — Android App">
10-
<meta property="og:description" content="更聰明的方式，查看你的成績。">
9+
<meta property="og:title" content="壢中成績 - Android App">
10+
<meta property="og:description" content="一鍵掌握班排與科目表現，為壢中學生量身設計的成績查詢 App。">
1111
<meta property="og:type" content="website">
1212
<link rel="icon" type="image/png" href="./assets/icon.png">
1313
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -16,7 +16,7 @@
1616
<link
1717
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap"
1818
rel="stylesheet">
19-
<link rel="preload" as="image" href="./assets/icon.webp" type="image/webp">
19+
<link rel="preload" as="image" href="./assets/home_page.webp" type="image/webp">
2020
<link rel="stylesheet" href="./style.css">
2121
</head>
2222

@@ -31,18 +31,18 @@
3131
<button class="lang-toggle" id="lang-toggle" aria-label="Switch language">EN</button>
3232
</nav>
3333

34-
<!-- Hero -->
34+
<!-- Hero: Asymmetric Split with real phone mockup -->
3535
<section class="hero" id="hero">
3636
<div class="hero-bg-glow"></div>
3737
<div class="container hero-grid">
38-
<div class="hero-content fade-in">
38+
<div class="hero-content">
3939
<h1 class="hero-title" data-i18n="hero.title">壢中成績 app</h1>
4040
<p class="hero-subtitle" data-i18n="hero.subtitle">更聰明的方式，查看你的成績</p>
41-
<p class="hero-desc" data-i18n="hero.desc">自動化成績查詢與深度分析，一鍵掌握班排、科目表現與進退步趨勢，為中大壢中學生量身設計。</p>
41+
<p class="hero-desc" data-i18n="hero.desc">一鍵掌握班排與科目表現，為壢中學生量身設計。</p>
4242
<div class="hero-actions">
4343
<a href="https://github.com/alvin000009238/clhs_score/releases/latest" class="cta-btn" target="_blank"
4444
rel="noopener">
45-
<svg class="cta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
45+
<svg class="cta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
4646
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
4747
<polyline points="7 10 12 15 17 10" />
4848
<line x1="12" y1="15" x2="12" y2="3" />
@@ -53,7 +53,11 @@ <h1 class="hero-title" data-i18n="hero.title">壢中成績 app</h1>
5353
</div>
5454
</div>
5555
<div class="hero-visual">
56-
<img src="./assets/icon.webp" alt="壢中成績 App Icon" class="hero-icon-3d" loading="eager" width="512" height="512">
56+
<div class="phone-mockup phone-mockup--hero" id="hero-phone">
57+
<div class="phone-screen">
58+
<img src="./assets/home_page.webp" alt="壢中成績 App 首頁" loading="eager" width="1440" height="2993">
59+
</div>
60+
</div>
5761
</div>
5862
</div>
5963
</section>
@@ -63,101 +67,81 @@ <h1 class="hero-title" data-i18n="hero.title">壢中成績 app</h1>
6367
<div class="container">
6468
<h2 class="section-title fade-in" data-i18n="features.title">功能亮點</h2>
6569

66-
<!-- Feature 1: Login (reversed) -->
67-
<!-- Feature 1: Login (reversed) -->
68-
<div class="feature-row feature-row--reversed">
69-
<div class="feature-text reveal-right">
70-
<span class="feature-tag" data-i18n="feature.login.tag">快速登入</span>
71-
<h3 class="feature-title" data-i18n="feature.login.title">使用欣河智慧校園平台直接登入</h3>
72-
<p class="feature-desc" data-i18n="feature.login.desc">內嵌學校系統登入頁面，支援密碼自動填入，安全快速地驗證你的身份。</p>
73-
</div>
74-
<div class="feature-visual reveal-left">
75-
<div class="phone-mockup">
76-
<div class="phone-screen">
77-
<img src="./assets/login.webp" alt="登入頁面" loading="lazy" width="1440" height="2993">
70+
<!-- Feature Grid: 2 columns x 3 rows -->
71+
<div class="feature-grid fade-in">
72+
73+
<div class="feature-card">
74+
<div class="feature-card-phone">
75+
<div class="phone-mockup">
76+
<div class="phone-screen">
77+
<img src="./assets/login.webp" alt="登入頁面" loading="lazy" width="1440" height="2993">
78+
</div>
7879
</div>
7980
</div>
81+
<h3 data-i18n="feature.login.title">使用欣河智慧校園平台直接登入</h3>
82+
<p data-i18n="feature.login.desc">內嵌學校系統登入頁面，登入快速且便利。</p>
8083
</div>
81-
</div>
8284

83-
<!-- Feature 2: Overview -->
84-
<div class="feature-row">
85-
<div class="feature-text reveal-left">
86-
<span class="feature-tag" data-i18n="feature.overview.tag">總覽</span>
87-
<h3 class="feature-title" data-i18n="feature.overview.title">一眼掌握全局</h3>
88-
<p class="feature-desc" data-i18n="feature.overview.desc">加權平均、班排、類排、百分比，搭配優勢與待加強科目摘要。</p>
89-
</div>
90-
<div class="feature-visual reveal-right">
91-
<div class="phone-mockup">
92-
<div class="phone-screen">
93-
<img src="./assets/home_page.webp" alt="成績總覽頁面" loading="lazy" width="1440" height="2993">
85+
<div class="feature-card">
86+
<div class="feature-card-phone">
87+
<div class="phone-mockup">
88+
<div class="phone-screen">
89+
<img src="./assets/home_page.webp" alt="成績總覽頁面" loading="lazy" width="1440" height="2993">
90+
</div>
9491
</div>
9592
</div>
93+
<h3 data-i18n="feature.overview.title">一眼掌握全局</h3>
94+
<p data-i18n="feature.overview.desc">加權平均、班排、類排、百分比，搭配優勢與待加強科目摘要。</p>
9695
</div>
97-
</div>
9896

99-
<!-- Feature 3: Analysis (reversed) -->
100-
<div class="feature-row feature-row--reversed">
101-
<div class="feature-text reveal-right">
102-
<span class="feature-tag" data-i18n="feature.analysis.tag">智慧分析</span>
103-
<h3 class="feature-title" data-i18n="feature.analysis.title">深度洞察與建議</h3>
104-
<p class="feature-desc" data-i18n="feature.analysis.desc">基於成績走勢提供個人化的學習建議，幫助你精準掌握強弱項，規劃未來的讀書方向。</p>
105-
</div>
106-
<div class="feature-visual reveal-left">
107-
<div class="phone-mockup">
108-
<div class="phone-screen">
109-
<img src="./assets/analysis.webp" alt="智慧分析頁面" loading="lazy" width="1440" height="2993">
97+
<div class="feature-card">
98+
<div class="feature-card-phone">
99+
<div class="phone-mockup">
100+
<div class="phone-screen">
101+
<img src="./assets/analysis.webp" alt="智慧分析頁面" loading="lazy" width="1440" height="2993">
102+
</div>
110103
</div>
111104
</div>
105+
<h3 data-i18n="feature.analysis.title">深度洞察與建議</h3>
106+
<p data-i18n="feature.analysis.desc">基於成績走勢提供個人化的學習建議，幫助你精準掌握強弱項，規劃未來的讀書方向。</p>
112107
</div>
113-
</div>
114108

115-
<!-- Feature 4: Subjects -->
116-
<div class="feature-row">
117-
<div class="feature-text reveal-left">
118-
<span class="feature-tag" data-i18n="feature.subjects.tag">科目分析</span>
119-
<h3 class="feature-title" data-i18n="feature.subjects.title">每科都看得透徹</h3>
120-
<p class="feature-desc" data-i18n="feature.subjects.desc">各科成績與班平均的差距、五標落點、分數分布，還有與上次考試的比較。</p>
121-
</div>
122-
<div class="feature-visual reveal-right">
123-
<div class="phone-mockup">
124-
<div class="phone-screen">
125-
<img src="./assets/subject_page_detail.webp" alt="科目分析詳情頁面" loading="lazy" width="1440" height="2993">
109+
<div class="feature-card">
110+
<div class="feature-card-phone">
111+
<div class="phone-mockup">
112+
<div class="phone-screen">
113+
<img src="./assets/subject_page_detail.webp" alt="科目分析詳情頁面" loading="lazy" width="1440" height="2993">
114+
</div>
126115
</div>
127116
</div>
117+
<h3 data-i18n="feature.subjects.title">每科都看得透徹</h3>
118+
<p data-i18n="feature.subjects.desc">各科成績與班平均的差距、五標落點、分數分布，還有與上次考試的比較。</p>
128119
</div>
129-
</div>
130120

131-
<!-- Feature 5: Trend (reversed) -->
132-
<div class="feature-row feature-row--reversed">
133-
<div class="feature-text reveal-right">
134-
<span class="feature-tag" data-i18n="feature.trend.tag">歷次趨勢</span>
135-
<h3 class="feature-title" data-i18n="feature.trend.title">追蹤你的進步軌跡</h3>
136-
<p class="feature-desc" data-i18n="feature.trend.desc">自動比對同學期歷次考試，清楚看到平均與排名的變化趨勢。</p>
137-
</div>
138-
<div class="feature-visual reveal-left">
139-
<div class="phone-mockup">
140-
<div class="phone-screen">
141-
<img src="./assets/advanved_page.webp" alt="歷次趨勢頁面" loading="lazy" width="1440" height="2993">
121+
<div class="feature-card">
122+
<div class="feature-card-phone">
123+
<div class="phone-mockup">
124+
<div class="phone-screen">
125+
<img src="./assets/advanved_page.webp" alt="歷次趨勢頁面" loading="lazy" width="1440" height="2993">
126+
</div>
142127
</div>
143128
</div>
129+
<h3 data-i18n="feature.trend.title">追蹤你的進步軌跡</h3>
130+
<p data-i18n="feature.trend.desc">自動比對同學期歷次考試，清楚看到平均與排名的變化趨勢。</p>
144131
</div>
145-
</div>
146132

147-
<!-- Feature 6: Simulator -->
148-
<div class="feature-row">
149-
<div class="feature-text reveal-left">
150-
<span class="feature-tag" data-i18n="feature.simulator.tag">成績模擬器</span>
151-
<h3 class="feature-title" data-i18n="feature.simulator.title">試算你的目標成績</h3>
152-
<p class="feature-desc" data-i18n="feature.simulator.desc">拖動滑桿調整各科分數，即時計算調整後的加權平均，規劃你的讀書策略。</p>
153-
</div>
154-
<div class="feature-visual reveal-right">
155-
<div class="phone-mockup">
156-
<div class="phone-screen">
157-
<img src="./assets/simulator_page.webp" alt="成績模擬器頁面" loading="lazy" width="1440" height="2993">
133+
<div class="feature-card">
134+
<div class="feature-card-phone">
135+
<div class="phone-mockup">
136+
<div class="phone-screen">
137+
<img src="./assets/simulator_page.webp" alt="成績模擬器頁面" loading="lazy" width="1440" height="2993">
138+
</div>
158139
</div>
159140
</div>
141+
<h3 data-i18n="feature.simulator.title">試算你的目標成績</h3>
142+
<p data-i18n="feature.simulator.desc">拖動滑桿調整各科分數，即時計算調整後的加權平均，規劃你的讀書策略。</p>
160143
</div>
144+
161145
</div>
162146

163147
</div>
@@ -171,7 +155,7 @@ <h2 class="section-title fade-in" data-i18n="privacy.title">隱私與安全</h2>
171155

172156
<div class="privacy-card">
173157
<div class="privacy-icon">
174-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
158+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
175159
<rect x="3" y="11" width="18" height="11" rx="2" />
176160
<path d="M7 11V7a5 5 0 0110 0v4" />
177161
<circle cx="12" cy="16" r="1" />
@@ -183,8 +167,8 @@ <h3 data-i18n="privacy.nopassword.title">不保存密碼</h3>
183167

184168
<div class="privacy-card">
185169
<div class="privacy-icon">
186-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
187-
<path d="M5 12h14M12 5l7 7-7 7" /> <!-- changed to a direct connection arrow -->
170+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
171+
<path d="M5 12h14M12 5l7 7-7 7" />
188172
</svg>
189173
</div>
190174
<h3 data-i18n="privacy.nobackend.title">無後端伺服器</h3>
@@ -193,9 +177,9 @@ <h3 data-i18n="privacy.nobackend.title">無後端伺服器</h3>
193177

194178
<div class="privacy-card">
195179
<div class="privacy-icon">
196-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
180+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
197181
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
198-
<line x1="12" y1="18" x2="12.01" y2="18" /> <!-- changed to a mobile phone icon -->
182+
<line x1="12" y1="18" x2="12.01" y2="18" />
199183
</svg>
200184
</div>
201185
<h3 data-i18n="privacy.localonly.title">本機端處理</h3>
@@ -204,7 +188,7 @@ <h3 data-i18n="privacy.localonly.title">本機端處理</h3>
204188

205189
<div class="privacy-card">
206190
<div class="privacy-icon">
207-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
191+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
208192
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" />
209193
<polyline points="16 17 21 12 16 7" />
210194
<line x1="21" y1="12" x2="9" y2="12" />
@@ -222,7 +206,7 @@ <h3 data-i18n="privacy.logout.title">登出即清除</h3>
222206
<section class="disclaimer" id="disclaimer">
223207
<div class="container">
224208
<div class="disclaimer-box fade-in">
225-
<svg class="disclaimer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
209+
<svg class="disclaimer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
226210
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
227211
<line x1="12" y1="9" x2="12" y2="13" />
228212
<line x1="12" y1="17" x2="12.01" y2="17" />
@@ -236,12 +220,12 @@ <h2 data-i18n="disclaimer.title">免責聲明</h2>
236220
<!-- Bottom CTA -->
237221
<section class="bottom-cta-section" id="download">
238222
<div class="container">
239-
<div class="bottom-cta-box fade-in">
223+
<div class="bottom-cta-content fade-in">
240224
<h2 class="bottom-cta-title" data-i18n="bottom.cta.title">準備好開始了嗎？</h2>
241225
<p class="bottom-cta-desc" data-i18n="bottom.cta.desc">立即下載，體驗最流暢的成績查詢方式。</p>
242226
<a href="https://github.com/alvin000009238/clhs_score/releases/latest" class="cta-btn cta-btn--large"
243227
target="_blank" rel="noopener">
244-
<svg class="cta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
228+
<svg class="cta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
245229
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
246230
<polyline points="7 10 12 15 17 10" />
247231
<line x1="12" y1="15" x2="12" y2="3" />

0 commit comments

Comments
 (0)