From f608a788f444ffffee8e0442ac139d56cf7234f5 Mon Sep 17 00:00:00 2001
From: MKStoler1024 <158786854+MKStoler1024@users.noreply.github.com>
Date: Mon, 14 Apr 2025 17:09:54 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E7=89=B9=E7=82=B9=E3=80=81=E9=83=A8=E7=BD=B2=E8=AF=B4=E6=98=8E?=
 =?UTF-8?q?=E5=92=8C=E5=BC=80=E5=8F=91=E4=BF=A1=E6=81=AF=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 about/index.html | 210 +++++++++++++++++++++++++++++++++++++++++++++++
 index.html       |  47 ++++++++---
 2 files changed, 247 insertions(+), 10 deletions(-)
 create mode 100644 about/index.html
diff --git a/about/index.html b/about/index.html
new file mode 100644
index 0000000..7aade5b
--- /dev/null
+++ b/about/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>关于 ExamSchedule</title>
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <style>
+        body {
+            background: #2C2B30;
+            margin: 0;
+            font-family: 'Google Sans', 'Roboto', sans-serif;
+            color: #E6E1E5;
+            padding: 40px;
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            animation: fadeInUp 1s ease-in-out;
+        }
+
+        h1 {
+            color: #E6E1E5;
+            font-size: 48px;
+            margin-bottom: 30px;
+            font-weight: 500;
+        }
+
+        .section {
+            background: #49454F;
+            padding: 24px;
+            border-radius: 16px;
+            margin-bottom: 24px;
+        }
+
+        h2 {
+            color: #E6E1E5;
+            font-size: 24px;
+            margin-top: 0;
+        }
+
+        .feature-list {
+            list-style: none;
+            padding: 0;
+        }
+
+        .feature-list li {
+            margin-bottom: 12px;
+            display: flex;
+            align-items: flex-start;
+        }
+
+        .feature-list .material-icons {
+            margin-right: 12px;
+            color: #D0BCFF;
+        }
+
+        .back-btn {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            color: #E6E1E5;
+            text-decoration: none;
+            font-size: 16px;
+            font-weight: 500;
+            padding: 12px 24px;
+            border-radius: 100px;
+            background-color: #49454F;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .back-btn:hover {
+            background-color: #605D64;
+            transform: translateY(-2px);
+        }
+
+        @keyframes fadeInUp {
+            0% {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        #license-content {
+            font-size: 0.9em;
+            color: #CAC4D0;
+            white-space: pre-wrap;
+            max-height: 400px;
+            overflow-y: auto;
+            padding: 16px;
+            background: #1C1B1F;
+            border-radius: 8px;
+            scrollbar-width: thin;
+            scrollbar-color: #49454F #1C1B1F;
+        }
+
+        #license-content::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        #license-content::-webkit-scrollbar-track {
+            background: #1C1B1F;
+            border-radius: 8px;
+        }
+
+        #license-content::-webkit-scrollbar-thumb {
+            background-color: #49454F;
+            border-radius: 8px;
+            border: 2px solid #1C1B1F;
+        }
+
+        #license-content::-webkit-scrollbar-thumb:hover {
+            background-color: #605D64;
+        }
+    </style>
+</head>
+<body>
+    <a href="../" class="back-btn">
+        <span class="material-icons">arrow_back</span>
+        返回
+    </a>
+    
+    <div class="container">
+        <h1>关于 ExamSchedule</h1>
+        
+        <div class="section">
+            <h2>功能特点</h2>
+            <ul class="feature-list">
+                <li>
+                    <span class="material-icons">dashboard</span>
+                    <div>
+                        <strong>考试看板</strong>
+                        <ul>
+                            <li>实时显示当前时间、考试科目、时间及状态</li>
+                            <li>支持全屏显示</li>
+                            <li>支持设置时间偏移和考场信息</li>
+                            <li>支持临时编辑消息</li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <span class="material-icons">schedule</span>
+                    <div>
+                        <strong>时间广播</strong>
+                        <ul>
+                            <li>支持自定义广播配置</li>
+                            <li>支持打开本地json配置</li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div class="section">
+            <h2>部署说明</h2>
+            <p>您可以访问 <a href="https://docs.examaware.tech/app/web/web-deploy.html" style="color: #D0BCFF;">部署教程</a> 了解详细的部署方法。</p>
+            <p>注意：广播与看板的配置文件是分开存储于两个文件夹之下的。</p>
+        </div>
+
+        <div class="section">
+            <h2>开发信息</h2>
+            <ul class="feature-list">
+                <li>
+                    <span class="material-icons">code</span>
+                    <div>主分支 (main) 提供稳定版本</div>
+                </li>
+                <li>
+                    <span class="material-icons">bug_report</span>
+                    <div>开发分支 (dev) 进行新功能开发</div>
+                </li>
+            </ul>
+        </div>
+
+        <div class="section">
+            <h2>许可证</h2>
+            <ul class="feature-list">
+                <li>
+                    <span class="material-icons">gavel</span>
+                    <div>
+                        <p>本项目采用 GNU General Public License v3.0</p>
+                        <pre id="license-content" style="font-size: 0.9em; color: #CAC4D0; white-space: pre-wrap; max-height: 400px; overflow-y: auto; padding: 16px; background: #1C1B1F; border-radius: 8px;">正在加载许可证内容...</pre>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <script>
+        // 加载LICENSE文件内容
+        fetch('../LICENSE')
+            .then(response => response.text())
+            .then(content => {
+                document.getElementById('license-content').textContent = content;
+            })
+            .catch(error => {
+                document.getElementById('license-content').textContent = '加载许可证内容失败：' + error;
+            });
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
index c2abf00..9f2b22f 100644
--- a/index.html
+++ b/index.html
@@ -81,12 +81,7 @@
         }
 
         .github-link {
-            position: absolute;
-            top: 16px;
-            right: 16px;
-            background-color: transparent;
-            padding: 8px;
-            border-radius: 50%;
+            position: static;
         }
 
         .github-link:hover {
@@ -115,6 +110,32 @@
         .material-icons {
             font-size: 20px;
         }
+
+        .top-right-links {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            display: flex;
+            gap: 16px;
+            align-items: center;
+        }
+
+        .about-link {
+            background-color: transparent;
+            padding: 8px 16px;
+            border-radius: 100px;
+            font-size: 14px;
+        }
+
+        .about-link:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            transform: none;
+            box-shadow: none;
+        }
+
+        .about-link .material-icons {
+            font-size: 18px;
+        }
     </style>
 </head>
 <body>
@@ -126,10 +147,16 @@
         <li><a href="./notification/"><span class="material-icons">campaign</span>考试广播</a></li>
     </ul>
 
-    <!-- 添加GitHub图标跳转项目地址 -->
-    <a href="https://github.com/ExamAware/ExamSchedule" target="_blank" class="github-link">
-        <img src="./github-icon.png" alt="GitHub" title="在GitHub上查看源代码">
-    </a>
+    <!-- 添加关于链接和GitHub图标 -->
+    <div class="top-right-links">
+        <a href="./about/" class="about-link">
+            <span class="material-icons">info</span>
+            关于
+        </a>
+        <a href="https://github.com/ExamAware/ExamSchedule" target="_blank" class="github-link">
+            <img src="./github-icon.png" alt="GitHub" title="在GitHub上查看源代码">
+        </a>
+    </div>
 
     <!-- 新增版权信息 -->
     <div class="copyright">&copy; 2024-2025 ExamAware开发团队 版权所有</div>
