feat(video): add video fit toggle button and update styling

- Add toggle button to switch between 'cover' and 'contain' video fit modes
- Update video background styling for simpler positioning
- Group upload and fit buttons in a flex container

index.html

@@ -30,8 +30,11 @@
 
         <!-- 中间区域，用于放置上传按钮 -->
         <main class="center-content">
-            <label for="video-upload" class="upload-button">Change Background</label>
+            <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>
 
         <!-- 底部麦克风和链接 -->

script.js

@@ -7,6 +7,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const micButton = document.getElementById('mic-button');
     const favorabilityBar = document.getElementById('favorability-bar');
 
+    const toggleFitButton = document.getElementById('toggle-fit-button');
+
     // --- 视频上传功能 ---
     videoUploadInput.addEventListener('change', function(event) {
         const file = event.target.files[0];
@@ -27,6 +29,19 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+    // --- 视频适应模式切换功能 ---
+    let isFitHeight = false;
+    toggleFitButton.addEventListener('click', function() {
+        isFitHeight = !isFitHeight;
+        if (isFitHeight) {
+            bgVideo.style.objectFit = 'contain';
+            toggleFitButton.textContent = '适应宽度';
+        } else {
+            bgVideo.style.objectFit = 'cover';
+            toggleFitButton.textContent = '适应高度';
+        }
+    });
+
     // --- 麦克风按钮交互和好感度条模拟 ---
     let isListening = false;
     let currentFavorability = 65; // 与 CSS 中的初始宽度保持一致

style.css

@@ -15,15 +15,12 @@ html, body {
 /* --- 视频背景 --- */
 #bg-video {
     position: fixed;
-    top: 50%;
+    top: 0;
-    left: 50%;
+    left: 0;
-    min-width: 100%;
+    width: 100%;
-    min-height: 100%;
+    height: 100%;
-    width: auto;
-    height: auto;
-    transform: translateX(-50%) translateY(-50%);
     z-index: -1; /* 将视频置于最底层 */
-    object-fit: cover; /* 关键：让视频填满整个屏幕而不变形 */
+    object-fit: cover; /* 默认填满整个屏幕（裁剪），JS会切换它 */
     background-color: #1a1a1a; /* 视频加载前的背景色 */
 }
 
@@ -77,6 +74,11 @@ html, body {
     /* 这个区域是弹性填充的，所以不需要太多样式 */
 }
 
+.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);