-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
540 lines (519 loc) · 34.7 KB
/
Copy pathindex.html
File metadata and controls
540 lines (519 loc) · 34.7 KB
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成績分析平台 - 中大壢中</title>
<!-- SEO 基本標籤 -->
<meta name="description" content="中大壢中成績分析平台，提供中大壢中學生登入查詢段考成績，並透過圖表分析個人與班級平均、五標落點與排名分佈，快速掌握學習狀況。">
<meta name="robots" content="index, follow">
<!-- Open Graph 標籤 -->
<meta property="og:title" content="成績分析平台 - 中大壢中">
<meta property="og:description" content="中大壢中學生專屬的成績分析工具，登入即可查詢各科成績、排名與落點分析。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://score.clhs.dev/">
<meta property="og:site_name" content="成績分析平台 - 中大壢中">
<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"SoftwareApplication",
"name":"成績分析平台 - 中大壢中",
"applicationCategory":"EducationApplication",
"operatingSystem":"Web",
"url":"https://score.clhs.dev/"
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; manifest-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://static.cloudflareinsights.com https://challenges.cloudflare.com; script-src-elem 'self' https://cdn.jsdelivr.net https://static.cloudflareinsights.com https://challenges.cloudflare.com; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://cdn.jsdelivr.net https://cloudflareinsights.com; frame-src https://challenges.cloudflare.com; img-src 'self' data:;">
<link rel="preload" as="style"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap"
media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap">
</noscript>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
<script src="/theme-init.js"></script>
<link rel="stylesheet" href="/dist/main-D2sAJccc.css" id="vite-css">
<link rel="icon" type="image/x-icon" href="/favicon.ico?v=20260402">
<link rel="icon" type="image/png" href="/favicon-96x96.png?v=20260402" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=20260402" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=20260402" />
<meta name="apple-mobile-web-app-title" content="成績分析" />
<link rel="manifest" href="/site.webmanifest?v=20260402" />
</head>
<body>
<div class="seo-hidden">
<h2>中大壢中成績分析平台</h2>
<p>提供學生安全、快速的平台查詢段考成績。透過視覺化圖表比較個人分數與班級平均，提供五標標準分析、落點預測及排名分佈，有效幫助學生掌握學習進度並規劃未來讀書計畫。</p>
</div>
<!-- 背景動畫元素 -->
<div class="bg-orbs">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="container">
<!-- 頂部標題區 -->
<header class="header">
<div class="header-content">
<div class="logo">
<div class="logo-icon">
<svg class="inline-svg-icon icon-24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
</svg>
</div>
<div class="logo-text header-title-group">
<h1>成績分析平台</h1>
<div class="subtitle-row">
<p class="subtitle" id="examTitle">--</p>
<span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
</div>
</div>
</div>
<div class="data-time-box">
<span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
<div class="time-info">
<span class="time-label" id="updateTimeLabel">資料更新時間</span>
<span class="time-value" id="updateTime" aria-labelledby="updateTimeLabel">--</span>
</div>
<div class="flex-center-gap-8 header-actions">
<button class="icon-btn theme-toggle-btn" id="themeToggleBtn" type="button" aria-label="切換至淺色模式"
title="切換主題" aria-pressed="false">
<span class="dropdown-icon theme-icon theme-icon-moon">
<svg class="inline-svg-icon icon-18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
</svg>
</span>
<span class="dropdown-icon theme-icon theme-icon-sun hidden">
<svg class="inline-svg-icon icon-18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="M565-395q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35Zm-226.5 56.5Q280-397 280-480t58.5-141.5Q397-680 480-680t141.5 58.5Q680-563 680-480t-58.5 141.5Q563-280 480-280t-141.5-58.5ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" />
</svg>
</span>
</button>
<button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
aria-label="分享">
<span class="dropdown-icon">
<svg class="inline-svg-icon icon-18" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
width="1em">
<path
d="M720-80q-50 0-85-35t-35-85q0-7 1-14.5t3-13.5L322-392q-17 15-38 23.5t-44 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q23 0 44 8.5t38 23.5l282-164q-2-6-3-13.5t-1-14.5q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-23 0-44-8.5T638-672L356-508q2 6 3 13.5t1 14.5q0 7-1 14.5t-3 13.5l282 164q17-15 38-23.5t44-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-640q17 0 28.5-11.5T760-760q0-17-11.5-28.5T720-800q-17 0-28.5 11.5T680-760q0 17 11.5 28.5T720-720ZM240-440q17 0 28.5-11.5T280-480q0-17-11.5-28.5T240-520q-17 0-28.5 11.5T200-480q0 17 11.5 28.5T240-440Zm480 280q17 0 28.5-11.5T760-200q0-17-11.5-28.5T720-240q-17 0-28.5 11.5T680-200q0 17 11.5 28.5T720-160Zm0-600ZM240-480Zm480 280Z" />
</svg>
</span>
<span>分享</span>
</button>
<button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="載入成績">
<span class="dropdown-icon">
<svg class="inline-svg-icon icon-18" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
width="1em">
<path
d="M160-160v-80h109q-51-44-80-106t-29-134q0-112 68-197.5T400-790v84q-70 25-115 86.5T240-480q0 54 21.5 99.5T320-302v-98h80v240H160Zm440 0q-50 0-85-35t-35-85q0-48 33-82.5t81-36.5q17-36 50.5-58.5T720-480q53 0 91.5 34.5T858-360q42 0 72 29t30 70q0 42-29 71.5T860-160H600Zm116-360q-7-41-27-76t-49-62v98h-80v-240h240v80H691q43 38 70.5 89T797-520h-81ZM600-240h260q8 0 14-6t6-14q0-8-6-14t-14-6h-70v-50q0-29-20.5-49.5T720-400q-29 0-49.5 20.5T650-330v10h-50q-17 0-28.5 11.5T560-280q0 17 11.5 28.5T600-240Zm120-80Z" />
</svg>
</span>
<span>載入成績</span>
</button>
</div>
</div>
</div>
</header>
<!-- 分享預覽視窗 -->
<div class="modal-overlay" id="shareModal">
<div class="modal-content">
<div class="modal-header">
<h3>
<svg class="inline-svg-icon icon-24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="M720-80q-50 0-85-35t-35-85q0-7 1-14.5t3-13.5L322-392q-17 15-38 23.5t-44 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q23 0 44 8.5t38 23.5l282-164q-2-6-3-13.5t-1-14.5q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-23 0-44-8.5T638-672L356-508q2 6 3 13.5t1 14.5q0 7-1 14.5t-3 13.5l282 164q17-15 38-23.5t44-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-640q17 0 28.5-11.5T760-760q0-17-11.5-28.5T720-800q-17 0-28.5 11.5T680-760q0 17 11.5 28.5T720-720ZM240-440q17 0 28.5-11.5T280-480q0-17-11.5-28.5T240-520q-17 0-28.5 11.5T200-480q0 17 11.5 28.5T240-440Zm480 280q17 0 28.5-11.5T760-200q0-17-11.5-28.5T720-240q-17 0-28.5 11.5T680-200q0 17 11.5 28.5T720-160Zm0-600ZM240-480Zm480 280Z" />
</svg>
分享成績單
</h3>
<button class="modal-close" id="closeShareModal" aria-label="關閉視窗">×</button>
</div>
<div class="modal-body">
<div id="sharePreview"></div>
</div>
</div>
</div>
<!-- 登入視窗 -->
<div class="modal-overlay" id="loginModal">
<div class="modal-content sm">
<div class="modal-header">
<h3 class="flex-center-gap-8">
登入系統
<span class="tooltip-icon inline-flex-center" tabindex="0" aria-label="提示說明" role="button"
data-tooltip="請使用欣河校園平台帳密登入">
<svg class="inline-svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
</svg>
</span>
</h3>
<button class="modal-close" id="closeLoginModal" aria-label="關閉視窗">×</button>
</div>
<div class="modal-body">
<form id="loginForm" method="post" action="javascript:void(0);">
<div class="form-group">
<input type="text" id="usernameInput" name="username" autocomplete="username"
placeholder=" " data-tour="login-username">
<label for="usernameInput">帳號</label>
</div>
<div class="form-group">
<div class="password-group">
<input type="password" id="passwordInput" name="password"
autocomplete="current-password" placeholder=" " data-tour="login-password">
<label for="passwordInput">密碼</label>
<button type="button" id="togglePasswordBtn" class="toggle-password-btn"
aria-label="顯示密碼" title="顯示密碼" aria-pressed="false">
<svg class="inline-svg-icon eye-icon" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
width="1em">
<path
d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z" />
</svg>
<svg class="inline-svg-icon eye-off-icon hidden" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
width="1em">
<path
d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z" />
</svg>
</button>
</div>
</div>
<button type="button" class="modal-btn reload demo-fill-login-btn hidden-full-center"
id="demoFillLoginBtn" data-tour="demo-fill-login">
一鍵填入教學帳密
</button>
<div id="loginStatus" class="status-msg"></div>
<p class="privacy-notice privacy-notice-text">
若您繼續，即代表您已閱讀並同意本網站的<a href="/privacy.html" target="_blank" class="link-primary">隱私權政策</a>
</p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="modal-btn cancel" id="cancelLogin">取消</button>
<button type="submit" class="modal-btn confirm" id="confirmLogin" form="loginForm"
data-tour="login-submit">登入</button>
</div>
</div>
</div>
<!-- 選擇考試視窗 -->
<div class="modal-overlay" id="selectExamModal">
<div class="modal-content sm">
<div class="modal-header">
<h3>選擇考試</h3>
<button class="modal-close" id="closeSelectModal" aria-label="關閉視窗">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<select id="yearSelect" data-tour="year-select">
<option value="">載入中...</option>
</select>
<label for="yearSelect">學年度</label>
</div>
<div class="form-group">
<select id="examSelect" data-tour="exam-select">
<option value="">請選擇考試</option>
</select>
<label for="examSelect">考試名稱</label>
</div>
<div id="fetchStatus" class="status-msg"></div>
</div>
<div class="modal-footer">
<div class="footer-left-group footer-left-group-style">
<button class="modal-btn danger" id="logoutBtn">登出</button>
</div>
<div class="footer-right-group flex-gap-12">
<button class="modal-btn cancel" id="cancelSelect">取消</button>
<button class="modal-btn confirm" id="confirmFetch" data-tour="fetch-btn">查詢</button>
</div>
</div>
</div>
</div>
<!-- 免責聲明視窗 -->
<div class="modal-overlay" id="disclaimerModal">
<div class="modal-content sm">
<div class="modal-header">
<h3 class="text-warning">
<svg class="inline-svg-icon icon-warning-24" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z" />
</svg>
免責聲明
</h3>
</div>
<div class="modal-body disclaimer-text">
<p>歡迎使用中大壢中成績分析平台！</p>
<p class="mt-12">
請注意，本網站為<strong>非官方</strong>開發之第三方服務，我們與壢中及欣河智慧校園平台無任何直接關聯。</p>
<p class="mt-12">
您的帳號密碼僅會用於直接向原系統請求成績資料，本站<strong>絕不</strong>記錄或收集您的登入憑證或其他個人隱私資訊。</p>
</div>
<div class="modal-footer flex-end">
<button class="modal-btn confirm" id="confirmDisclaimer">我了解了</button>
</div>
</div>
</div>
<!-- Turnstile 人機驗證視窗 -->
<div class="modal-overlay" id="turnstileModal">
<div class="modal-content sm">
<div class="modal-header">
<h3>安全驗證</h3>
</div>
<div class="modal-body turnstile-body">
<p class="turnstile-text">
請先完成人機驗證，再繼續操作
</p>
<div id="turnstileWidgetContainer" class="flex-center"></div>
</div>
<div class="modal-footer flex-center">
<button class="modal-btn cancel" id="cancelTurnstile">取消</button>
</div>
</div>
</div>
<!-- 提示視窗 (Alert) -->
<div class="modal-overlay" id="alertDialog">
<div class="modal-content sm">
<div class="modal-header">
<h3 id="alertTitle">提示</h3>
<button class="modal-close" id="closeAlertDialog" aria-label="關閉視窗">×</button>
</div>
<div class="modal-body">
<p id="alertMessage" class="mt-12"></p>
</div>
<div class="modal-footer flex-end">
<button class="modal-btn confirm" id="confirmAlertDialog">確定</button>
</div>
</div>
</div>
<!-- 確認視窗 (Confirm) -->
<div class="modal-overlay" id="confirmDialog">
<div class="modal-content sm">
<div class="modal-header">
<h3 id="confirmTitle">確認</h3>
<button class="modal-close" id="closeConfirmDialog" aria-label="關閉視窗">×</button>
</div>
<div class="modal-body">
<p id="confirmMessage" class="mt-12"></p>
</div>
<div class="modal-footer flex-end">
<button class="modal-btn cancel" id="cancelConfirmDialog">取消</button>
<button class="modal-btn confirm" id="acceptConfirmDialog">確定</button>
</div>
</div>
</div>
<!-- 學生資訊卡片 -->
<section class="student-card">
<div class="student-avatar">
<div class="avatar-ring"></div>
<span class="avatar-text" id="avatarText">--</span>
</div>
<div class="student-info">
<h2 class="student-name" id="studentName">--</h2>
<div class="student-details">
<div class="detail-item">
<span class="detail-icon">
<svg class="inline-svg-icon icon-18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="M80-120v-720h400v160h400v560H80Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h320v-400H480v80h80v80h-80v80h80v80h-80v80Zm160-240v-80h80v80h-80Zm0 160v-80h80v80h-80Z" />
</svg>
</span>
<span class="detail-text" id="studentClass">--</span>
</div>
<div class="detail-item">
<span class="detail-icon">
<svg class="inline-svg-icon icon-18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="M160-120v-240h640v240h-80v-160H240v160h-80Zm20-280q-25 0-42.5-17.5T120-460q0-25 17.5-42.5T180-520q25 0 42.5 17.5T240-460q0 25-17.5 42.5T180-400Zm100 0v-360q0-33 23.5-56.5T360-840h240q33 0 56.5 23.5T680-760v360H280Zm500 0q-25 0-42.5-17.5T720-460q0-25 17.5-42.5T780-520q25 0 42.5 17.5T840-460q0 25-17.5 42.5T780-400Zm-420-80h240v-280H360v280Zm0 0h240-240Z" />
</svg>
</span>
<span class="detail-text">座號 <span id="studentSeat">--</span></span>
</div>
<div class="detail-item">
<span class="detail-icon">
<svg class="inline-svg-icon icon-18" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="m240-160 40-160H120l20-80h160l40-160H180l20-80h160l40-160h80l-40 160h160l40-160h80l-40 160h160l-20 80H660l-40 160h160l-20 80H600l-40 160h-80l40-160H360l-40 160h-80Zm140-240h160l40-160H420l-40 160Z" />
</svg>
</span>
<span class="detail-text">學號 <span id="studentNo">--</span></span>
</div>
</div>
</div>
<div class="student-stats">
<div class="stat-box">
<span class="stat-value" id="avgScore">--</span>
<span class="stat-label">平均成績</span>
</div>
<div class="stat-box">
<span class="stat-value" id="totalSubjects">--</span>
<span class="stat-label">科目數</span>
</div>
<div class="stat-box">
<span class="stat-value" id="highestScore">--</span>
<span class="stat-label">最高分</span>
</div>
<div class="stat-box hidden" id="classRankBox">
<span class="stat-value" id="classRank">--</span>
<span class="stat-label">班級排名</span>
</div>
<div class="stat-box hidden" id="categoryRankBox">
<span class="stat-value" id="categoryRank">--</span>
<span class="stat-label">類組排名</span>
</div>
</div>
</section>
<!-- 成績概覽 -->
<section class="scores-overview">
<h3 class="section-title">
<span class="title-icon">
<svg class="inline-svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em"
viewBox="0 -960 960 960" width="1em">
<path
d="M360-240h440v-107H360v107ZM160-613h120v-107H160v107Zm0 187h120v-107H160v107Zm0 186h120v-107H160v107Zm200-186h440v-107H360v107Zm0-187h440v-107H360v107ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Z" />
</svg>
</span>
各科成績概覽
</h3>
<div class="scores-grid" id="scoresGrid">
<!-- 動態生成成績卡片 -->
</div>
</section>
<!-- 圖表區域 -->
<section class="charts-section">
<div class="chart-row">
<!-- 成績對比雷達圖 -->
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">
<span class="chart-icon">
<svg class="inline-svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q56 0 105.5-17.5T676-227l-57-57q-29 21-64.5 32.5T480-240q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 39-12 75t-33 65l57 57q32-41 50-91t18-106q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-160q22 0 42.5-5.5T561-342l-61-61q-5 2-10 2.5t-10 .5q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 6-.5 11.5T557-458l60 60q11-18 17-38.5t6-43.5q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Z" />
</svg>
</span>
個人 vs. 班級平均
</h3>
</div>
<div class="chart-body">
<canvas id="radarChart" aria-label="成績雷達圖" role="img"></canvas>
</div>
</div>
<!-- 成績長條圖 -->
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">
<span class="chart-icon">
<svg class="inline-svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
height="1em" viewBox="0 -960 960 960" width="1em">
<path
d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
</svg>
</span>
成績對比分析
</h3>
</div>
<div class="chart-body">
<canvas id="barChart" aria-label="成績對比分析" role="img"></canvas>
</div>
</div>
</div>
</section>
<!-- 五標分析 -->
<section class="standards-section">
<h3 class="section-title">
<span class="title-icon">
<svg class="inline-svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em"
viewBox="0 -960 960 960" width="1em">
<path
d="M280-280h80v-200h-80v200Zm320 0h80v-400h-80v400Zm-160 0h80v-120h-80v120Zm0-200h80v-80h-80v80ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" />
</svg>
</span>
班級五標分析
</h3>
<div class="standards-table-wrapper">
<table class="standards-table" id="standardsTable">
<thead>
<tr>
<th>科目</th>
<th class="top-mark">頂標</th>
<th class="front-mark">前標</th>
<th class="avg-mark">均標</th>
<th class="back-mark">後標</th>
<th class="bottom-mark">底標</th>
<th>標準差</th>
<th>我的成績</th>
<th>落點分析</th>
</tr>
</thead>
<tbody id="standardsBody">
<!-- 動態生成 -->
</tbody>
</table>
</div>
</section>
<!-- 分數分佈區 -->
<section class="distribution-section">
<h3 class="section-title">
<span class="title-icon">
<svg class="inline-svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em"
viewBox="0 -960 960 960" width="1em">
<path
d="M680-120q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T760-280q0-33-23.5-56.5T680-360q-33 0-56.5 23.5T600-280q0 33 23.5 56.5T680-200Zm-400-40q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T360-400q0-33-23.5-56.5T280-480q-33 0-56.5 23.5T200-400q0 33 23.5 56.5T280-320Zm160-240q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm0-80q33 0 56.5-23.5T520-720q0-33-23.5-56.5T440-800q-33 0-56.5 23.5T360-720q0 33 23.5 56.5T440-640Zm240 360ZM280-400Zm160-320Z" />
</svg>
</span>
班級分數分佈
</h3>
<div class="distribution-grid" id="distributionGrid">
<!-- 動態生成分佈圖 -->
</div>
</section>
<!-- 頁尾 -->
<footer class="footer">
<p class="footer-info">
<svg class="inline-svg-icon icon-16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="1em"
viewBox="0 -960 960 960" width="1em">
<path
d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
</svg>
本平台僅提供成績視覺化分析，實際成績仍以官方系統為準。
</p>
<p>© 2026 中大壢中成績分析 - 數據來源：欣河智慧校園平台</p>
<p class="footer-links">
<a href="mailto:contact@clhs.dev" class="footer-link">contact@clhs.dev</a>
<span class="footer-divider">|</span>
<a href="https://github.com/alvin000009238/grades" target="_blank" rel="noopener noreferrer"
class="footer-github-link">
<svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
<path
d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
</path>
</svg>
GitHub
</a>
<span id="commit-badge-container"></span>
</p>
</footer>
</div>
<script type="module" src="/dist/main-0jcAJeLy.js"></script>
</body>
</html>