diff --git a/exam/1.css b/exam/1.css
new file mode 100644
index 0000000..c657a04
--- /dev/null
+++ b/exam/1.css
@@ -0,0 +1,357 @@
+:root {
+  --bg-color: #ffffff;
+  --sidebar-bg: #ffffff;
+  --border-color: #e3e3e3;
+  --text-color: #000000;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: rgb(243, 243, 243);
+  color: var(--text-color);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+.allowS{
+  user-select: all;
+}
+
+/* 顶部菜单栏 */
+.menu-bar {
+  height: 52px;
+  background: rgb(243, 243, 243);
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+.menu-bar button {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  padding: 4px 8px;
+  cursor: pointer;
+  margin: 0 15px;
+}
+
+.menu-bar button:hover {
+  background: #d3d3d3;
+}
+
+/* 主容器 */
+.container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 左侧功能栏 */
+.activity-bar {
+  width: 260px;
+  background: rgb(243, 243, 243);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  padding: 5px;
+  gap: 2px;
+}
+
+.activity-item {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+}
+
+/* 资源管理器 */
+.explorer {
+  width: 250px;
+  background: rgb(246, 246, 246);
+  border: 1px solid var(--border-color);
+  border-right: none;
+  overflow-y: auto;
+  border-radius: 10px 0 0 0;
+  padding: 5px;
+  gap: 2px;
+}
+
+.explorer-item {
+  cursor: pointer;
+  width: 100%;
+}
+
+/* 编辑区域 */
+.editor-area {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
+  background: rgb(249, 249, 249);
+  border: 1px solid var(--border-color);
+}
+
+/* 课程卡片 */
+.class-card {
+  /* background: #2d2d2d; */
+  padding: 1rem;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  cursor: move;
+}
+
+.time-input {
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding: 4px;
+  margin: 0 4px;
+}
+
+/* 拖拽区域 */
+#class-list {
+  min-height: 300px;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+/* YAML编辑器 */
+#yaml-editor {
+  width: 100%;
+}
+
+#yaml-editor::part(control){ height:500px; }
+
+button,
+input,
+select,
+textarea {
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: #007acc;
+  box-shadow: 0 0 0 1px #007acc;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+#subject-form {
+  display: flex;
+  flex-direction: column;
+}
+
+#subject-form input {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  margin: 0.5rem 0;
+}
+
+#subject-list,
+#schedule-list {
+  width: 100%;
+}
+
+fluent-listbox {
+  border: none;
+  outline: none;
+}
+
+.activity-bar {
+  border: none;
+}
+
+fluent-option {
+  padding-left: 10px;
+}
+
+fluent-listbox fluent-option {
+  padding-left: 10px;
+  background-color: transparent;
+}
+
+fluent-listbox fluent-option:hover {
+  background-color: rgba(223, 223, 223, 0.445);
+}
+
+fluent-listbox fluent-option.selected {
+  background-color: rgb(223, 223, 223);
+}
+
+fluent-text-field {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.desktop-only {
+  display: block;
+}
+
+.mobile-only {
+  display: none;
+}
+
+.mobile-only-flex {
+  display: none;
+}
+
+#mobile-bottomBar {
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  background: rgb(243, 243, 243);
+  border-top: 1px solid var(--border-color);
+  justify-content: space-around;
+  padding: 10px 0;
+  z-index: 1;
+}
+
+#mobile-bottomBar > button {
+  display: flex;
+  background-color: transparent;
+  flex-direction: column;
+  border: none;
+  padding: 10px;
+  padding-top: 5px;
+  border-radius: 7px;
+  text-align: center;
+}
+
+#mobile-bottomBar > button > i {
+  font-size: 20px;
+  width: 100%;
+}
+
+#mobile-bottomBar > button:hover {
+  background-color: #dadadab4;
+}
+
+#mobile-bottomBar > button.selected {
+  background-color: #dadada8f;
+}
+
+#mobile-bottomBar .selected::before {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 15px;
+  width: 30px;
+  height: 4px;
+  background: rgb(3, 106, 196);
+  border-radius: 20px;
+  margin-left: 13.5px;
+}
+
+#mobile-bottomBar > button:active::before {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 15px;
+  width: 22px;
+  height: 4px;
+  background: rgb(3, 106, 196);
+  border-radius: 20px;
+  margin-left: 17px;
+}
+
+#mobile-bottomBar > button:focus {
+  box-shadow: none;
+}
+
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: block;
+  }
+
+  .mobile-only-flex {
+    display: flex;
+  }
+
+  .explorer {
+    width: 100vw;
+  }
+
+  .activity-bar {
+    width: 100vw;
+  }
+
+  .editor-area {
+    width: 100vw;
+  }
+
+  .menu-bar {
+    display: block;
+    height: auto;
+  }
+
+  .menu-bar #titleArea {
+    width: 100%;
+    margin: 10px;
+  }
+
+  .menu-bar #separator {
+    display: none;
+  }
+
+  .menu-bar #clearButton {
+    width: 56px;
+    margin-right: 0;
+  }
+
+  .menu-bar #fileArea {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .menu-bar #fileArea > fluent-button {
+    flex: 1;
+  }
+
+  .activity-bar {
+    display: none;
+  }
+
+  .container {
+    flex-direction: column;
+  }
+
+  .editor-area {
+    display: none;
+    flex: 1;
+  }
+
+  .explorer {
+    border-radius: 0;
+    padding: 20px;
+    flex: 1;
+  }
+}
diff --git a/exam/index.html b/exam/index.html
index 6e4faf2..ff3620f 100644
--- a/exam/index.html
+++ b/exam/index.html
@@ -18,11 +18,15 @@
         <p id="message"></p>
         <div class="content">
             <div class="left-column">
-                <div id="current-time"></div>
-                <div id="current-subject"></div>
-                <div id="exam-timing"></div>
-                <div id="remaining-time"></div>
-                <div id="status"></div>
+                <div class="clock-section">
+                    <div id="current-time"></div>
+                </div>
+                <div class="info-section">
+                    <div id="current-subject"></div>
+                    <div id="exam-timing"></div>
+                    <div id="remaining-time"></div>
+                    <div id="status"></div>
+                </div>
             </div>
             <div class="right-column">
                 <table>
diff --git a/exam/styles.css b/exam/styles.css
index 57f31a4..a4c3835 100644
--- a/exam/styles.css
+++ b/exam/styles.css
@@ -19,10 +19,9 @@ body::-webkit-scrollbar {
     to { opacity: 1; }
 }
 
-#fullscreen-btn {
+#fullscreen-btn, #settings-btn {
     position: absolute;
     top: 20px;
-    right: 20px;
     padding: 10px 20px;
     font-size: 1rem;
     cursor: pointer;
@@ -35,28 +34,15 @@ body::-webkit-scrollbar {
     z-index: 1001;
 }
 
+#fullscreen-btn {
+    right: 20px;
+}
+
 #settings-btn {
-    position: absolute;
-    top: 20px;
     right: 120px; /* Fullscreen button's left */
-    padding: 10px 20px;
-    font-size: 1rem;
-    cursor: pointer;
-    background-color: #1f1f1f;
-    color: #e0e0e0;
-    border: 1px solid #333;
-    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;
 }
 
-#settings-btn:hover {
-    background-color: #333;
-    transform: scale(1.05);
-}
-
-#fullscreen-btn:hover {
+#settings-btn:hover, #fullscreen-btn:hover {
     background-color: #333;
     transform: scale(1.05);
 }
@@ -66,6 +52,7 @@ body::-webkit-scrollbar {
     max-width: 1400px; /* 增加主体部分宽度 */
     margin: auto;
     background-color: rgba(31, 31, 31, 0.5); /* 使用rgba设置背景透明度 */
+    backdrop-filter: blur(10px);
     border-radius: 8px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 }
@@ -99,22 +86,30 @@ h1 {
 .content {
     display: flex;
     justify-content: space-between;
+    gap: 2px; /* 板块间隔2px */
 }
 
 .left-column, .right-column {
     width: 48%;
-    background-color: rgba(31, 31, 31, 0.2);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.clock-section, .info-section, .right-column {
+    background-color: rgba(31, 31, 31, 0.5); /* 亚克力效果 */
+    backdrop-filter: blur(10px);
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     border-radius: 8px;
 }
 
 #current-time {
-    font-size: 10rem;
-    font-weight: bold;
+    font-size: 6rem;
     text-align: center;
-    margin-bottom: 20px;
     color: #7cc3fb;
+    margin: 0;
+    font-weight: bold;
 }
 
 #current-subject, #exam-timing, #remaining-time, #status {
@@ -207,6 +202,7 @@ td:last-child {
     width: 80%;
     max-width: 600px;
     border-radius: 10px;
+    backdrop-filter: blur(10px);
 }
 
 #settings-modal-content label {
@@ -227,6 +223,12 @@ td:last-child {
     color: #e0e0e0;
 }
 
+#settings-modal-content input:focus {
+    outline: none;
+    border-color: #007acc;
+    box-shadow: 0 0 0 1px #007acc;
+}
+
 #settings-modal-content button {
     padding: 10px 20px;
     font-size: 2rem;