feat(ui): update styles and add settings dropdown

- Change progress bar gradient to pink
- Remove upload button section from HTML
- Update mic button styling with glass effect
- Add settings button and dropdown elements
- Set default video source in HTML

index.html

@@ -13,7 +13,7 @@
     <!-- 视频背景 -->
     <video autoplay muted loop id="bg-video">
         <!-- 初始可以留空，或放一个默认视频 -->
-        <source id="video-source" src="" type="video/mp4">
+        <source id="video-source" src="3D 建模图片制作.mp4" type="video/mp4">
         Your browser does not support the video tag.
     </video>
 
@@ -28,15 +28,6 @@
             </div>
         </header>
 
-        <!-- 中间区域，用于放置上传按钮 -->
-        <main class="center-content">
-            <div class="button-container">
-                <label for="video-upload" class="upload-button">更换背景</label>
-                <input type="file" id="video-upload" accept="video/*" hidden>
-                <button id="toggle-fit-button" class="upload-button">适应高度</button>
-            </div>
-        </main>
-
         <!-- 底部麦克风和链接 -->
         <footer class="bottom-bar">
             <button class="mic-button" id="mic-button" aria-label="Start Listening">

script.js

@@ -6,8 +6,9 @@ document.addEventListener('DOMContentLoaded', function() {
     const videoSource = document.getElementById('video-source');
     const micButton = document.getElementById('mic-button');
     const favorabilityBar = document.getElementById('favorability-bar');
-
     const toggleFitButton = document.getElementById('toggle-fit-button');
+    const settingsButton = document.getElementById('settings-button');
+    const settingsDropdown = document.getElementById('settings-dropdown');
 
     // --- 视频上传功能 ---
     videoUploadInput.addEventListener('change', function(event) {

style.css

@@ -64,65 +64,50 @@ html, body {
 .progress-fill {
     height: 100%;
     width: 65%; /* 初始好感度值 */
-    background: linear-gradient(90deg, #4facfe, #00f2fe);
+    background: linear-gradient(90deg, #ff9a9e, #fecfef); /* 粉色渐变 */
     border-radius: 10px;
     transition: width 0.5s ease-in-out;
 }
 
 /* --- 中间内容 (上传按钮) --- */
 .center-content {
-    /* 这个区域是弹性填充的，所以不需要太多样式 */
+    /* 这个区域现在是空的，可以移除或保留以备将来使用 */
-}
-
-.button-container {
-    display: flex;
-    gap: 10px; /* 按钮之间的间距 */
-}
-
-.upload-button {
-    background-color: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    padding: 8px 16px;
-    border-radius: 20px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    transition: background-color 0.3s ease;
-}
-
-.upload-button:hover {
-    background-color: rgba(255, 255, 255, 0.4);
 }
 
 /* --- 底部内容 --- */
 .bottom-bar {
     width: 100%;
     display: flex;
-    flex-direction: column;
+    flex-direction: column; /* 垂直排列 */
-    align-items: center;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    position: relative; /* 为链接定位 */
 }
 
 .mic-button {
     width: 80px;
     height: 80px;
-    background: linear-gradient(45deg, #ff5f6d, #ffc371);
+    background: rgba(255, 255, 255, 0.15);
-    border: none;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .mic-button:hover {
     transform: scale(1.1);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }
 
 .mic-button:active {
     transform: scale(1.05);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
 .mic-button i {
@@ -137,18 +122,18 @@ html, body {
 
 @keyframes pulse {
     0% {
-        box-shadow: 0 0 0 0 rgba(255, 95, 109, 0.7);
+        box-shadow: 0 0 0 0 rgba(255, 154, 158, 0.7);
     }
     70% {
-        box-shadow: 0 0 0 20px rgba(255, 95, 109, 0);
+        box-shadow: 0 0 0 20px rgba(255, 154, 158, 0);
     }
     100% {
-        box-shadow: 0 0 0 0 rgba(255, 95, 109, 0);
+        box-shadow: 0 0 0 0 rgba(255, 154, 158, 0);
     }
 }
 
 .footer-credit {
-    margin-top: 20px;
+    margin-top: 20px; /* 与麦克风按钮的间距 */
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     font-size: 1rem;