feat: 在线时间和考试看板返回按钮的实现 #20

exam/Styles/ealg/dark.css

@@ -1,3 +1,25 @@
+#return-btn {
+    position: absolute; /* 绝对定位 */
+    top: 20px; /* 距离顶部 20px */
+    left: 20px; /* 距离左侧 20px */
+    padding: 12px 24px; /* 内边距 */
+    font-size: 1rem; /* 字体大小 */
+    cursor: pointer; /* 鼠标悬停时显示为手型 */
+    background-color: #2b2b2b; /* 按钮背景颜色 */
+    color: #ffffff; /* 按钮文字颜色 */
+    border: 1px solid #444444; /* 按钮边框样式 */
+    border-radius: 20px; /* 按钮圆角大小 */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 按钮阴影 */
+    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
+    z-index: 1001; /* 按钮层级 */
+}
+
+#return-btn:hover {
+    background-color: #3c3c3c; /* 悬停时的背景颜色 */
+    transform: translateY(-1px); /* 悬停时向上移动 1px */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 悬停时的阴影效果 */
+}
+
 body {
     font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
     margin: 0;

exam/Styles/ealg/light.css

@@ -1,3 +1,25 @@
+#return-btn {
+    position: absolute; /* 绝对定位 */
+    top: 20px; /* 距离顶部 20px */
+    left: 20px; /* 距离左侧 20px */
+    padding: 12px 24px; /* 内边距 */
+    font-size: 1rem; /* 字体大小 */
+    cursor: pointer; /* 鼠标悬停时显示为手型 */
+    background-color: #E8DEF8; /* 按钮背景颜色 */
+    color: #1C1B1F; /* 按钮文字颜色 */
+    border: none; /* 按钮边框样式 */
+    border-radius: 20px; /* 按钮圆角大小 */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
+    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
+    z-index: 1001; /* 按钮层级 */
+}
+
+#return-btn:hover {
+    background-color: #D0BCFF; /* 悬停时的背景颜色 */
+    transform: translateY(-1px); /* 悬停时向上移动 1px */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
+}
+
 body {
     font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
     margin: 0;

exam/Styles/md3/dark.css

@@ -1,3 +1,25 @@
+#return-btn {
+    position: absolute; /* 绝对定位 */
+    top: 20px; /* 距离顶部 20px */
+    left: 20px; /* 距离左侧 20px */
+    padding: 12px 24px; /* 内边距 */
+    font-size: 1rem; /* 字体大小 */
+    cursor: pointer; /* 鼠标悬停时显示为手型 */
+    background-color: #4A4458; /* 按钮背景颜色 */
+    color: #E6E1E5; /* 按钮文字颜色 */
+    border: none; /* 按钮边框样式 */
+    border-radius: 20px; /* 按钮圆角大小 */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 按钮阴影 */
+    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
+    z-index: 1001; /* 按钮层级 */
+}
+
+#return-btn:hover {
+    background-color: #635B70; /* 悬停时的背景颜色 */
+    transform: translateY(-1px); /* 悬停时向上移动 1px */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 悬停时的阴影效果 */
+}
+
 body {
     font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
     margin: 0;

exam/Styles/md3/light.css

@@ -1,3 +1,25 @@
+#return-btn {
+    position: absolute; /* 绝对定位 */
+    top: 20px; /* 距离顶部 20px */
+    left: 20px; /* 距离左侧 20px */
+    padding: 12px 24px; /* 内边距 */
+    font-size: 1rem; /* 字体大小 */
+    cursor: pointer; /* 鼠标悬停时显示为手型 */
+    background-color: #E8DEF8; /* 按钮背景颜色 */
+    color: #000000; /* 按钮文字颜色 */
+    border: none; /* 按钮边框样式 */
+    border-radius: 20px; /* 按钮圆角大小 */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
+    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
+    z-index: 1001; /* 按钮层级 */
+}
+
+#return-btn:hover {
+    background-color: #D0BCFF; /* 悬停时的背景颜色 */
+    transform: translateY(-1px); /* 悬停时向上移动 1px */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
+}
+
 body {
     font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
     margin: 0;

exam/Styles/old/dark.css

@@ -1,3 +1,24 @@
+#return-btn {
+    position: absolute; /* 绝对定位 */
+    top: 20px; /* 距离顶部 20px */
+    left: 20px; /* 距离左侧 20px */
+    background-color: #1f1f1f; /* 按钮背景颜色 */
+    color: #e0e0e0; /* 按钮文字颜色 */
+    border: 1px solid #333333; /* 按钮边框样式 */
+    border-radius: 4px; /* 按钮圆角大小 */
+    padding: 8px 16px; /* 按钮内边距 */
+    font-size: 14px; /* 按钮字体大小 */
+    cursor: pointer; /* 鼠标悬停时显示为手型 */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
+    transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
+    z-index: 1001; /* 按钮层级 */
+}
+
+#return-btn:hover {
+    background-color: #2a2a2a; /* 按钮悬停时的背景颜色 */
+    transform: scale(1.05); /* 悬停时放大 5% */
+}
+
 body {
     font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif;
     margin: 0;

exam/Styles/old/light.css

@@ -1,82 +1,103 @@
+#return-btn {
+    position: absolute; /* 绝对定位 */
+    top: 20px; /* 距离顶部 20px */
+    left: 20px; /* 距离左侧 20px */
+    padding: 10px 20px; /* 内边距 */
+    font-size: 1rem; /* 字体大小 */
+    cursor: pointer; /* 鼠标悬停时显示为手型 */
+    background-color: #f0f0f0; /* 按钮背景颜色 */
+    color: #333; /* 按钮文字颜色 */
+    border: 1px solid #ccc; /* 按钮边框 */
+    border-radius: 5px; /* 按钮圆角 */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
+    transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
+    z-index: 1001; /* 设置按钮的层级，确保在其他元素之上 */
+}
+
+#return-btn:hover {
+    background-color: #ccc; /* 悬停时的背景颜色 */
+    transform: scale(1.05); /* 悬停时放大 5% */
+}
+
 body {
-    font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif;
+    font-family: 'HarmonyOS Sans SC Regular', 'Roboto', Arial, sans-serif; /* 设置字体 */
-    margin: 0;
+    margin: 0; /* 去除默认外边距 */
-    padding: 0;
+    padding: 0; /* 去除默认内边距 */
-    background: url('background_light.jpg') no-repeat center center fixed;
+    background: url('background_light.jpg') no-repeat center center fixed; /* 设置背景图片 */
-    background-size: cover;
+    background-size: cover; /* 背景图片覆盖整个页面 */
-    animation: fadeIn 1s;
+    animation: fadeIn 1s; /* 页面加载时的淡入动画 */
-    color: #333;
+    color: #333; /* 全局文字颜色 */
-    overflow: auto;
+    overflow: auto; /* 允许页面滚动 */
 }
 
 body::-webkit-scrollbar {
-    display: none;
+    display: none; /* 隐藏滚动条 */
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
+    from { opacity: 0; } /* 动画开始时透明 */
-    to { opacity: 1; }
+    to { opacity: 1; } /* 动画结束时完全显示 */
 }
 
 #fullscreen-btn, #settings-btn {
-    position: absolute;
+    position: absolute; /* 绝对定位 */
-    top: 20px;
+    top: 20px; /* 距离顶部 20px */
-    padding: 10px 20px;
+    padding: 10px 20px; /* 内边距 */
-    font-size: 1rem;
+    font-size: 1rem; /* 字体大小 */
-    cursor: pointer;
+    cursor: pointer; /* 鼠标悬停时显示为手型 */
-    background-color: #f0f0f0;
+    background-color: #f0f0f0; /* 按钮背景颜色 */
-    color: #333;
+    color: #333; /* 按钮文字颜色 */
-    border: 1px solid #ccc;
+    border: 1px solid #ccc; /* 按钮边框 */
-    border-radius: 5px;
+    border-radius: 5px; /* 按钮圆角 */
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 按钮阴影 */
-    transition: background-color 0.3s ease, transform 0.3s ease;
+    transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和缩放的过渡效果 */
-    z-index: 1001;
+    z-index: 1001; /* 设置按钮的层级，确保在其他元素之上 */
 }
 
 #fullscreen-btn {
-    right: 20px;
+    right: 20px; /* 距离右侧 20px */
 }
 
 #settings-btn {
-    right: 120px;
+    right: 120px; /* 距离右侧 120px */
 }
 
 #settings-btn:hover, #fullscreen-btn:hover {
-    background-color: #ccc;
+    background-color: #ccc; /* 悬停时的背景颜色 */
-    transform: scale(1.05);
+    transform: scale(1.05); /* 悬停时放大 5% */
 }
 
 .container {
-    padding: 20px;
+    padding: 20px; /* 内边距 */
-    max-width: 1400px;
+    max-width: 1400px; /* 最大宽度 */
-    margin: auto;
+    margin: auto; /* 居中对齐 */
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: rgba(255, 255, 255, 0.4); /* 半透明背景 */
 }
 
 h1 {
-    font-size: 3.5rem;
+    font-size: 3.5rem; /* 字体大小 */
-    font-weight: bold;
+    font-weight: bold; /* 字体加粗 */
-    text-align: left;
+    text-align: left; /* 左对齐 */
-    margin-bottom: 10px;
+    margin-bottom: 10px; /* 下边距 */
-    color: #333;
+    color: #333; /* 文字颜色 */
-    display: flex;
+    display: flex; /* 使用 flex 布局 */
-    align-items: center;
+    align-items: center; /* 垂直居中 */
-    justify-content: space-between;
+    justify-content: space-between; /* 两端对齐 */
 }
 
 #room {
-    font-size: 3.5rem;
+    font-size: 3.5rem; /* 字体大小 */
-    font-weight: bold;
+    font-weight: bold; /* 字体加粗 */
-    color: #333;
+    color: #333; /* 文字颜色 */
-    position: relative;
+    position: relative; /* 相对定位 */
-    right: 0;
+    right: 0; /* 向右移动 0 */
-    margin-left: 20px;
+    margin-left: 20px; /* 左边距 */
 }
 
 #message {
-    font-size: 1.5rem;
+    font-size: 1.5rem; /* 字体大小 */
-    color: #16a3d1;
+    color: #16a3d1; /* 文字颜色 */
-    margin-bottom: 20px;
+    margin-bottom: 20px; /* 下边距 */
 }
 
 .content {
@@ -127,11 +148,11 @@ h1 {
 }
 
 table {
-    width: 100%;
+    width: 100%; /* 表格宽度 */
-    border-collapse: collapse;
+    border-collapse: collapse; /* 合并边框 */
-    margin-top: 20px;
+    margin-top: 20px; /* 上边距 */
-    border: 1px solid #000;
+    border: 1px solid #000; /* 表格边框 */
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
 }
 
 th, td {
@@ -142,14 +163,14 @@ th, td {
 }
 
 th {
-    background-color: #f0f0f0;
+    background-color: #f0f0f0; /* 背景颜色 */
-    color: #333;
+    color: #333; /* 文字颜色 */
-    font-weight: bold;
+    font-weight: bold; /* 字体加粗 */
-    border-bottom: 2px solid #000;
+    border-bottom: 2px solid #000; /* 下边框 */
 }
 
 tr:hover {
-    background-color: #f0f0f0;
+    background-color: #f0f0f0; /* 背景颜色 */
 }
 
 table {
@@ -158,17 +179,20 @@ table {
 }
 
 td {
-    border-bottom: 1px solid #000;
+    border-bottom: 1px solid #000; /* 下边框 */
+    padding: 0px; /* 内边距 */
+    font-size: 1.8rem; /* 字体大小 */
+    text-align: center; /* 居中对齐 */
 }
 
 td:first-child {
-    border-top-left-radius: 8px;
+    border-top-left-radius: 8px; /* 左上角圆角 */
-    border-bottom-left-radius: 8px;
+    border-bottom-left-radius: 8px; /* 左下角圆角 */
 }
 
 td:last-child {
-    border-top-right-radius: 8px;
+    border-top-right-radius: 8px; /* 右上角圆角 */
-    border-bottom-right-radius: 8px;
+    border-bottom-right-radius: 8px; /* 右下角圆角 */
 }
 
 .exam-status-tag {
@@ -430,7 +454,7 @@ input:checked + .slider:before {
     transform: translateX(26px);
 }
 
-.theme-toggle-container {
+theme-toggle-container {
     display: flex;
     align-items: center;
     justify-content: space-between;

exam/index.html

@@ -11,6 +11,7 @@
     <div class="error-container">
         <div class="error-content" id="errorMessage"></div>
     </div>
+    <button id="return-btn" onclick="window.location.href = '../'">返回</button>
     <button id="settings-btn">设置</button>
     <button id="fullscreen-btn">全屏</button>
     <div class="container">

time/index.html

@@ -30,115 +30,16 @@
 	<link rel="shortcut icon" href="../favicon.ico">
 	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css?family=DM+Sans|Inter|Space+Mono|Work+Sans|Libre+Franklin&display=swap" rel="stylesheet">
-	<style>
+	<link rel="stylesheet" href="styles.css"> <!-- 引入单独的 CSS 文件 -->
-		/* 基础样式 */
-		body {
-			font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
-			margin: 0;
-			padding: 20px;
-			background: #1C1B1F;
-			color: #E6E1E5;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 100vh;
-		}
-
-		.container {
-			text-align: center;
-			background: #2B2930;
-			padding: 48px;
-			border-radius: 28px;
-			box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-			animation: fadeIn 0.3s ease-in-out;
-		}
-
-		.time {
-			font-size: 10rem;
-			margin: 0;
-			color: #D0BCFF;
-			font-weight: 400;
-			text-shadow: none;
-		}
-
-		.text {
-			font-size: 1.5rem;
-			margin-bottom: 32px;
-			color: #E6E1E5;
-		}
-
-		.controls {
-			margin-top: 40px;
-			display: flex;
-			gap: 12px;
-			flex-wrap: wrap;
-			justify-content: center;
-		}
-
-		.btn, #fontSelector {
-			padding: 12px 24px;
-			border: none;
-			border-radius: 20px;
-			cursor: pointer;
-			transition: all 0.2s ease;
-			font-size: 1rem;
-			font-weight: 500;
-			background-color: #4A4458;
-			color: #E6E1E5;
-			box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-		}
-
-		.btn:hover, #fontSelector:hover {
-			background-color: #635B70;
-			transform: translateY(-1px);
-			box-shadow: 0 2px 6px rgba(0,0,0,0.4);
-		}
-
-		#fontSelector {
-			padding: 10px 20px;
-		}
-
-		.btn.fullscreen {
-			background-color: #5C1130;
-			color: #FFB3B3;
-		}
-
-		.btn.fullscreen:hover {
-			background-color: #7D2046;
-		}
-
-		/* 简化动画效果 */
-		@keyframes fadeIn {
-			from { opacity: 0; transform: translateY(10px); }
-			to { opacity: 1; transform: translateY(0); }
-		}
-
-		/* 删除发光动画，符合 MD3 的简洁风格 */
-		
-		/* 下拉菜单样式 */
-		select {
-			appearance: none;
-			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E6E1E5'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
-			background-repeat: no-repeat;
-			background-position: right 10px center;
-			background-size: 20px;
-			padding-right: 40px;
-		}
-
-		select option {
-			background-color: #2B2930;
-			color: #E6E1E5;
-		}
-	</style>
 </head>
 
 <body>
+	<button id="return-btn" onclick="goBack()">返回</button> <!-- 新增返回按钮 -->
 	<div class="container">
 		<div class="text">当前时间：</div>
 		<div class="time" id="time"></div>
 		<div class="controls">
 			<select id="fontSelector" class="btn">
-				<!-- 新增的Google字体选项 -->
 				<option value="Roboto">Roboto（在线）</option>
 				<option value="DM Sans">DM Sans（在线）</option>
 				<option value="Inter">Inter（在线）</option>
@@ -157,6 +58,11 @@
 	</div>
 
 	<script>
+		// 返回上级目录的函数
+		function goBack() {
+			window.history.back();
+		}
+
 		setInterval(() => {
 			const date = new Date();
 			const time = date.toLocaleTimeString('zh-CN', {

time/styles.css

@@ -0,0 +1,112 @@
+/* 基础样式 */
+body {
+    font-family: 'Roboto', 'HarmonyOS Sans SC', sans-serif;
+    margin: 0;
+    padding: 20px;
+    background: #1C1B1F;
+    color: #E6E1E5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    text-align: center;
+    background: #2B2930;
+    padding: 48px;
+    border-radius: 28px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+.time {
+    font-size: 10rem;
+    margin: 0;
+    color: #D0BCFF;
+    font-weight: 400;
+    text-shadow: none;
+}
+
+.text {
+    font-size: 1.5rem;
+    margin-bottom: 32px;
+    color: #E6E1E5;
+}
+
+.controls {
+    margin-top: 40px;
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.btn,
+#fontSelector {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 1rem;
+    font-weight: 500;
+    background-color: #4A4458;
+    color: #E6E1E5;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.btn:hover,
+#fontSelector:hover {
+    background-color: #635B70;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+}
+
+#fontSelector {
+    padding: 10px 20px;
+}
+
+.btn.fullscreen {
+    background-color: #5C1130;
+    color: #FFB3B3;
+}
+
+.btn.fullscreen:hover {
+    background-color: #7D2046;
+}
+
+/* 返回按钮样式 */
+#return-btn {
+    position: absolute; /* 绝对定位 */
+    top: 20px; /* 距离顶部 20px */
+    left: 20px; /* 距离左侧 20px */
+    padding: 12px 24px; /* 内边距 */
+    font-size: 1rem; /* 字体大小 */
+    cursor: pointer; /* 鼠标悬停时显示为手型 */
+    background-color: #2b2b2b; /* 按钮背景颜色 */
+    color: #ffffff; /* 按钮文字颜色 */
+    border: 1px solid #444444; /* 按钮边框样式 */
+    border-radius: 20px; /* 按钮圆角大小 */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 按钮阴影 */
+    transition: all 0.2s ease; /* 背景颜色和缩放的过渡效果 */
+    z-index: 1001; /* 按钮层级 */
+}
+
+#return-btn:hover {
+    background-color: #3c3c3c; /* 悬停时的背景颜色 */
+    transform: translateY(-1px); /* 悬停时向上移动 1px */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 悬停时的阴影效果 */
+}
+
+/* 简化动画效果 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}