-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
462 lines (430 loc) · 28.6 KB
/
index.html
File metadata and controls
462 lines (430 loc) · 28.6 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
<!DOCTYPE html>
<html lang="zh-CN">
<script charset="UTF-8" id="MXA_COLLECT" src="//mxana.tacool.com/sdk.js"></script>
<script>MXA.init({ id: "c2-v9xZ800n", useHeatMap: true, useHash: true, useErrorLog: true })</script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExamAware | 智能考试信息显示工具</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 font-sans">
<header class="absolute top-0 right-0 p-6 z-20">
<button id="theme-toggle" class="px-4 py-2 bg-white bg-opacity-80 text-gray-800 rounded-lg font-bold hover:bg-opacity-90 transition shadow-md">
<i class="fas fa-moon mr-2"></i> Dark Mode
</button>
</header>
<div class="min-h-[50vh] bg-gradient-to-r from-blue-500 to-green-500 flex flex-col justify-center relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-20">
<div class="absolute w-40 h-40 rounded-full bg-white -left-10 -top-10 floating" style="animation-delay: 0s;"></div>
<div class="absolute w-60 h-60 rounded-full bg-white right-20 top-1/3 floating" style="animation-delay: 1s;"></div>
<div class="absolute w-32 h-32 rounded-full bg-white right-1/3 bottom-20 floating" style="animation-delay: 2s;"></div>
</div>
<div class="container mx-auto px-6 md:px-12 py-12 z-10 fade-in">
<div class="flex flex-col-reverse md:flex-row items-center justify-between">
<div class="w-full md:w-1/2 mt-8 md:mt-0">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-4">ExamAware</h1>
<h2 class="text-xl md:text-2xl text-white/90 mb-6">
智能考试信息显示工具 - 助您高效应考
</h2>
<div class="flex flex-col sm:flex-row gap-4">
<a href="https://docs.examaware.tech/" target="_blank"
class="btn-glow px-6 py-3 bg-white text-green-600 rounded-lg font-bold text-center hover:bg-opacity-90 transition">
<i class="fas fa-book mr-2"></i> 官方文档
</a>
<a href="https://github.com/ExamAware" target="_blank"
class="btn-glow px-6 py-3 bg-white text-gray-700 rounded-lg font-bold text-center hover:bg-opacity-90 transition">
<i class="fab fa-github mr-2"></i> GitHub主页
</a>
<a href="https://qm.qq.com/q/zDiEipHsaI" target="_blank"
class="btn-glow px-6 py-3 bg-white bg-opacity-20 text-white rounded-lg font-bold text-center hover:bg-opacity-30 transition border-2 border-white border-opacity-30">
<i class="fab fa-qq mr-2"></i> 加入QQ群
</a>
</div>
<div class="flex flex-wrap gap-4 mt-6">
<span class="px-3 py-1 bg-white/20 text-white rounded-full text-sm flex items-center">
<i class="fas fa-star mr-1 text-yellow-300"></i> 备受好评
</span>
<span class="px-3 py-1 bg-white/20 text-white rounded-full text-sm flex items-center">
<i class="fas fa-clock mr-1"></i> 实时考试信息
</span>
<span class="px-3 py-1 bg-white/20 text-white rounded-full text-sm flex items-center">
<i class="fas fa-layer-group mr-1"></i> 多平台支持
</span>
</div>
</div>
<div class="w-full md:w-1/3 flex justify-center mb-8 md:mb-0">
<img src="./logo.jpg"
alt="logo"
class="w-48 md:w-64 h-48 md:h-64 rounded-full border-4 border-white shadow-xl floating">
</div>
</div>
</div>
</div>
<div class="container mx-auto px-6 md:px-12 py-16">
<section class="mb-16 fade-in">
<h2 class="text-3xl font-bold text-center mb-8 gradient-text">ExamAware 系列软件</h2>
<p class="text-lg text-center text-gray-700 max-w-3xl mx-auto">
ExamAware 系列软件是显示当前时间与考试详细信息的显示工具，可以在各平台上运行。
我们从 2024 年开发至今，致力于为学生和考试工作人员提供最便捷的考试信息展示解决方案。
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition group">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-desktop text-blue-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 group-hover:text-blue-500 transition">桌面端应用</h3>
<p class="text-gray-600">
专为Windows设计的高可用性考试看板，支持自定义主题和考试信息展示。
</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition group">
<div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-mobile-alt text-green-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 group-hover:text-green-500 transition">移动端应用</h3>
<p class="text-gray-600">
适用于Android/iOS设备的便携版考试看板，随时随地查看考试信息。
</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition group">
<div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-globe text-purple-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 group-hover:text-purple-500 transition">网页版应用</h3>
<p class="text-gray-600">
无需安装，直接在浏览器中使用的考试信息展示工具，支持云同步。
</p>
</div>
</div>
</section>
<section class="mb-16 fade-in">
<h2 class="text-3xl font-bold text-center mb-8 gradient-text">仓库资源</h2>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="border-b border-gray-200 p-6">
<h3 class="text-xl font-bold mb-4 text-gray-800">
<i class="fas fa-history text-yellow-500 mr-2"></i> 旧版 ExamAware（已过时）
</h3>
<div class="space-y-4 pl-6">
<div class="font-medium text-gray-700 mb-2">ExamShowboard 系列</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-gray-400 rounded-full mt-2 mr-3"></div>
<div>
<a href="https://github.com/ExamAware/ExamShowboard-Legacy" target="_blank" class="font-medium hover:text-blue-500 transition"><span class="text-blue-500">ExamShowboard-Legacy</span></a> - 旧版桌面端考试看板，<a href="https://examboard.cn/" target="_blank" class="text-blue-500 hover:underline">在线体验➡️</a>
</div>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-gray-400 rounded-full mt-2 mr-3"></div>
<div>
<a href="https://github.com/ExamAware/ExamAware-Mobile" target="_blank" class="font-medium hover:text-blue-500 transition"><span class="text-blue-500">ExamAware-Mobile</span></a> - 旧版移动端考试看板
</div>
</div>
</div>
</div>
<div class="border-b border-gray-200 p-6">
<h3 class="text-xl font-bold mb-4 text-gray-800">
<i class="fas fa-bolt text-green-500 mr-2"></i> 新版 ExamAware
</h3>
<div class="space-y-4 pl-6">
<div class="font-medium text-gray-700 mb-2">ExamSchedule 系列</div>
<div class="space-y-4 pl-6">
<div class="flex items-start">
<div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3"></div>
<div>
<a href="https://github.com/ExamAware/ExamSchedule" target="_blank" class="font-medium hover:text-green-600 transition"><span class="text-green-600">ExamSchedule</span></a> - 高可用性网页版考试看板，<a href="https://es.examaware.cn/" target="_blank" class="text-blue-500 hover:underline">在线体验➡️</a>
</div>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3"></div>
<div>
<a href="https://github.com/ExamAware/ExamSchedule-Management" target="_blank" class="font-medium hover:text-green-600 transition"><span class="text-green-600">ExamSchedule-Management</span></a> - 考试看板云管理
</div>
</div>
<div class="flex items-start">
<div class="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3"></div>
<div>
<a href="https://github.com/ExamAware/ExamScheduleEditor" target="_blank" class="font-medium hover:text-green-600 transition"><span class="text-green-600">ExamScheduleEditor</span></a> - 旧版配置文件编辑器
</div>
</div>
</div>
<div class="font-medium text-gray-700 mb-2 mt-4">ExamAware2 系列</div>
<div class="space-y-4 pl-6">
<div class="flex items-start">
<div class="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3"></div>
<div>
<a href="https://github.com/ExamAware/ExamAware2-Desktop" target="_blank" class="font-medium hover:text-purple-600 transition"><span class="text-purple-600">ExamAware2-Desktop</span></a> - 🚧正在开发中 DSZ知试🧀桌面端
</div>
</div>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-4 text-gray-800">
<i class="fas fa-ellipsis-h text-blue-500 mr-2"></i> 其他
</h3>
<div class="flex items-start">
<div class="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3"></div>
<div>
<a href="https://github.com/ExamAware/ExamAware-docs" target="_blank" class="font-medium hover:text-blue-600 transition"><span class="text-blue-600">ExamAware-docs</span></a> - <a href="https://docs.examaware.cn/" target="_blank" class="text-blue-500 hover:underline">ExamAware 文档站</a>
</div>
</div>
</div>
</div>
</section>
<section class="mb-16 fade-in">
<h2 class="text-3xl font-bold text-center mb-8 gradient-text">系统需求</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
<div class="flex items-center mb-4">
<i class="fas fa-desktop text-blue-500 text-2xl mr-3"></i>
<h3 class="text-xl font-bold text-gray-800">桌面端</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<span class="flex items-center justify-center w-5 h-5 mt-0.5 mr-2 border border-blue-500 rounded-sm text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span><span class="font-medium px-2 py-0.5 bg-blue-100 text-blue-800 rounded-md">Windows</span> Windows 10 及以上，x64/x86 架构</span>
</li>
<li class="flex items-start">
<span class="flex items-center justify-center w-5 h-5 mt-0.5 mr-2 border border-blue-500 rounded-sm text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span><span class="font-medium px-2 py-0.5 bg-blue-100 text-blue-800 rounded-md">Linux</span> 尚未确定</span>
</li>
<li class="flex items-start">
<span class="flex items-center justify-center w-5 h-5 mt-0.5 mr-2 border border-blue-500 rounded-sm text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span><span class="font-medium px-2 py-0.5 bg-blue-100 text-blue-800 rounded-md">macOS</span> macOS 13 及以上</span>
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 border border-green-200">
<div class="flex items-center mb-4">
<i class="fas fa-mobile-alt text-green-500 text-2xl mr-3"></i>
<h3 class="text-xl font-bold text-gray-800">移动端</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<span class="flex items-center justify-center w-5 h-5 mt-0.5 mr-2 border border-blue-500 rounded-sm text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span><span class="font-medium px-2 py-0.5 bg-blue-100 text-blue-800 rounded-md">Android</span> Android 7 及以上</span>
</li>
<li class="flex items-start">
<span class="flex items-center justify-center w-5 h-5 mt-0.5 mr-2 border border-blue-500 rounded-sm text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span><span class="font-medium px-2 py-0.5 bg-blue-100 text-blue-800 rounded-md">iOS</span> iOS 13 及以上</span>
</li>
</ul>
</div>
<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 border border-purple-200">
<div class="flex items-center mb-4">
<i class="fas fa-globe text-purple-500 text-2xl mr-3"></i>
<h3 class="text-xl font-bold text-gray-800">网页版</h3>
</div>
<ul class="space-y-2 text-gray-700">
<li class="flex items-start">
<span class="flex items-center justify-center w-5 h-5 mt-0.5 mr-2 border border-blue-500 rounded-sm text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span>Edge 浏览器</span>
</li>
<li class="flex items-start">
<span class="flex items-center justify-center w-5 h-5 mt-0.5 mr-2 border border-blue-500 rounded-sm text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span>Chrome 浏览器</span>
</li>
<li class="flex items-start">
<span class="flex items-center justify-center w-5 h-5 mt-0.5 mr-2 border border-blue-500 rounded-sm text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</span>
<span>Firefox 浏览器</span>
</li>
<li class="flex items-start">
<span>其它浏览器请自行测试……</span>
</li>
</ul>
</div>
</section>
<section class="mb-16 fade-in">
<h2 class="text-3xl font-bold text-center mb-8 gradient-text">获取帮助＆加入社区</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6">
<div class="flex items-center mb-6">
<i class="fas fa-question-circle text-blue-500 text-3xl mr-4"></i>
<h3 class="text-xl font-bold text-gray-800">帮助&贡献</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start">
<div class="bg-blue-100 w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-book text-blue-500"></i>
</div>
<div class="ml-4">
<h4 class="font-medium text-gray-800">官方文档</h4>
<p class="text-sm text-gray-600 mt-1">
访问 <a href="https://docs.examaware.cn/" class="text-blue-500 hover:underline">ExamAware docs</a> 阅读完整文档
</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-green-100 w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-bug text-green-500"></i>
</div>
<div class="ml-4">
<h4 class="font-medium text-gray-800">问题反馈</h4>
<p class="text-sm text-gray-600 mt-1">
如果您遇到 Bug，或需要提出优化建议或新功能，请在对应仓库提交 Issues 或在 Discussions 中讨论
</p>
</div>
</li>
<li class="flex items-start">
<div class="bg-purple-100 w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-code-branch text-purple-500"></i>
</div>
<div class="ml-4">
<h4 class="font-medium text-gray-800">代码贡献</h4>
<p class="text-sm text-gray-600 mt-1">
欢迎为本软件进行改进或编写新功能提交 Pull Request
</p>
</div>
</li>
</ul>
</div>
<div class="qq-group-card bg-gradient-to-b from-blue-50 to-white rounded-xl shadow-lg p-6 border border-blue-200 flex flex-col">
<div class="flex items-center mb-6">
<i class="fab fa-qq text-blue-500 text-3xl mr-4"></i>
<h3 class="text-xl font-bold text-gray-800">QQ 群</h3>
</div>
<div class="flex-grow flex flex-col justify-center items-center">
<div class="bg-white p-4 rounded-lg shadow-inner border border-blue-300 mb-6">
<div class="text-5xl font-bold text-center text-blue-500 mb-2">901670561</div>
<div class="text-center text-sm text-gray-600">QQ 群号</div>
</div>
</div>
</div>
</div>
</section>
<section class="fade-in">
<h2 class="text-3xl font-bold text-center mb-8 gradient-text">Stars 历史</h2>
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="text-center">
<img src="https://starchart.cc/ExamAware/ExamShowboard-Legacy.svg?variant=adaptive"
alt="Star history chart"
class="w-full h-auto rounded-lg hover:shadow-md transition">
<div class="mt-4 font-medium">ExamShowboard-Legacy</div>
</div>
<div class="text-center">
<img src="https://starchart.cc/ExamAware/ExamSchedule.svg?variant=adaptive"
alt="Star history chart"
class="w-full h-auto rounded-lg hover:shadow-md transition">
<div class="mt-4 font-medium">ExamSchedule</div>
</div>
</div>
</div>
<div class="text-center text-gray-700">
如果这些项目对您有帮助，请向对应仓库点亮 <span class="text-yellow-400"><i class="fas fa-star"></i> Star</span>
</div>
</section>
</div>
<footer class="bg-gray-800 text-white py-8 fade-in">
<div class="container mx-auto px-6 text-center">
<div class="flex justify-center space-x-6 mb-6">
<a href="https://github.com/ExamAware" class="text-gray-300 hover:text-white transition">
<i class="fab fa-github text-2xl"></i>
</a>
<a href="https://qm.qq.com/q/zDiEipHsaI" class="text-gray-300 hover:text-white transition">
<i class="fab fa-qq text-2xl"></i>
</a>
</div>
<p class="text-gray-300">© 2025 ExamAware | All rights reserved.</p>
<p class="mt-2">
<a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-300 hover:text-white transition text-base font-bold">
津ICP备2025035356号-7
</a>
</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const body = document.body;
const themeToggleBtn = document.getElementById('theme-toggle');
function setTheme(theme) {
if (theme === 'dark') {
body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
if (themeToggleBtn) {
themeToggleBtn.innerHTML = '<i class="fas fa-sun mr-2"></i> 浅色模式';
themeToggleBtn.classList.remove('bg-opacity-20', 'text-white', 'border-white', 'border-opacity-30');
themeToggleBtn.classList.add('bg-white', 'text-gray-800');
}
} else {
body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
if (themeToggleBtn) {
themeToggleBtn.innerHTML = '<i class="fas fa-moon mr-2"></i> 深色模式';
themeToggleBtn.classList.remove('bg-white', 'text-gray-800');
themeToggleBtn.classList.add('bg-opacity-80', 'text-gray-800');
}
}
}
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
} else {
setTheme('light');
}
if (themeToggleBtn) {
themeToggleBtn.addEventListener('click', function() {
if (body.classList.contains('dark-mode')) {
setTheme('light');
} else {
setTheme('dark');
}
});
}
const fadeElements = document.querySelectorAll('.fade-in');
const fadeInOnScroll = function() {
fadeElements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementBottom = element.getBoundingClientRect().bottom;
if (elementTop < window.innerHeight - 100 && elementBottom > 0) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
fadeElements.forEach(element => {
element.style.opacity = '0';
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
});
fadeInOnScroll();
window.addEventListener('scroll', fadeInOnScroll);
});
</script>
</body>
</html>