添加半透明卡片

css/body.css

@@ -34,7 +34,7 @@ body {
 
 .logo {
     margin-top: 40px;
-    font-size: 32px;
+    font-size: 50px;
 }
 
 .intro a {

css/tool_card.css

@@ -0,0 +1,23 @@
+/* 工具卡片 */
+.tool-card {
+    display: flex;
+    border-radius: 12px;
+    background: rgba(200, 200, 200, 0.2);   /* 淡灰半透明 */
+    backdrop-filter: blur(8px);            /* 背景模糊 */
+    -webkit-backdrop-filter: blur(8px);    /* Safari 兼容 */
+    padding: 20px;
+    justify-content: center;
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+}
+
+/* 工具卡片动画完成状态 */
+.tool-card.animated {
+    opacity: 1;
+    transform: translateY(0); /* 恢复到正常位置 */
+}
+
+/* 工具卡片悬停效果 */
+.tool-card:hover {
+    transform: scale(1.03);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+}

index.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="css/chat.css">
     <link rel="stylesheet" href="css/font.css">
     <link rel="stylesheet" href="css/time.css">
+    <link rel="stylesheet" href="css/tool_card.css">
     <link rel="stylesheet" href="css/max_width.css">
 </head>
 
@@ -36,10 +37,12 @@
 
         <!-- 右侧内容 -->
         <div class="right-panel">
+            <div class="tool-card">
                 <div class="datetime">
                     <div id="timeDisplay" class="time">--:--:--</div>
                     <div id="dateDisplay" class="date">加载中...</div>
                 </div>
+            </div>
             <div class="future-content">
                 <p>此处预留未来内容</p>
             </div>