From 880de1dd78fa6d3e8bab55809adfbf613287c185 Mon Sep 17 00:00:00 2001 From: F04C Date: Wed, 16 Jul 2025 14:14:10 +0800 Subject: [PATCH] first commit --- index.html | 51 +++++++++++++++ script.js | 59 +++++++++++++++++ style.css | 188 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 298 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..3b25b15 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + Voice Assistant + + + + + + + + + + +
+ + +
+ +
+
+
+
+ + +
+ + +
+ + + + +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..7b204e8 --- /dev/null +++ b/script.js @@ -0,0 +1,59 @@ +document.addEventListener('DOMContentLoaded', function() { + + // 获取需要的 DOM 元素 + const videoUploadInput = document.getElementById('video-upload'); + const bgVideo = document.getElementById('bg-video'); + const videoSource = document.getElementById('video-source'); + const micButton = document.getElementById('mic-button'); + const favorabilityBar = document.getElementById('favorability-bar'); + + // --- 视频上传功能 --- + videoUploadInput.addEventListener('change', function(event) { + const file = event.target.files[0]; + + if (file) { + // 使用 URL.createObjectURL 为用户选择的本地文件创建一个临时的 URL + const fileURL = URL.createObjectURL(file); + + // 设置 video 元素的 source + videoSource.setAttribute('src', fileURL); + + // 加载并播放新的视频 + bgVideo.load(); + bgVideo.play().catch(error => { + // 某些浏览器可能会阻止自动播放，这是一种友好的处理方式 + console.error("Video play failed:", error); + }); + } + }); + + // --- 麦克风按钮交互和好感度条模拟 --- + let isListening = false; + let currentFavorability = 65; // 与 CSS 中的初始宽度保持一致 + + micButton.addEventListener('click', function() { + isListening = !isListening; + + // 切换 "监听中" 的样式 (动画) + micButton.classList.toggle('is-listening', isListening); + + // 模拟交互：每次点击麦克风，好感度增加 + if (isListening) { + // 增加好感度，但最高不超过 100 + currentFavorability += 5; + if (currentFavorability > 100) { + currentFavorability = 100; + } + } else { + // 如果停止监听，可以稍微降低一点好感度（可选） + currentFavorability -= 2; + if (currentFavorability < 0) { + currentFavorability = 0; + } + } + + // 更新好感度进度条的宽度 + favorabilityBar.style.width = currentFavorability + '%'; + }); + +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b488c8f --- /dev/null +++ b/style.css @@ -0,0 +1,188 @@ +/* --- 基本重置和全局样式 --- */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + color: white; + overflow: hidden; /* 防止视频导致滚动条 */ +} + +/* --- 视频背景 --- */ +#bg-video { + position: fixed; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + transform: translateX(-50%) translateY(-50%); + z-index: -1; /* 将视频置于最底层 */ + object-fit: cover; /* 关键：让视频填满整个屏幕而不变形 */ + background-color: #1a1a1a; /* 视频加载前的背景色 */ +} + +/* --- 内容覆盖层 --- */ +.content-overlay { + position: relative; + height: 100vh; + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; /* 顶部和底部分别对齐 */ + align-items: center; + padding: 25px; + background-color: rgba(0, 0, 0, 0.35); /* 半透明黑色蒙版，确保文字清晰可见 */ + z-index: 1; +} + +/* --- 顶部好感度条 --- */ +.top-bar { + width: 100%; + max-width: 500px; + text-align: left; +} + +.top-bar label { + font-size: 1rem; + font-weight: 600; + text-shadow: 1px 1px 3px rgba(0,0,0,0.5); + margin-bottom: 8px; + display: block; +} + +.progress-container { + width: 100%; + height: 12px; + background-color: rgba(255, 255, 255, 0.3); + border-radius: 10px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + width: 65%; /* 初始好感度值 */ + background: linear-gradient(90deg, #4facfe, #00f2fe); + border-radius: 10px; + transition: width 0.5s ease-in-out; +} + +/* --- 中间内容 (上传按钮) --- */ +.center-content { + /* 这个区域是弹性填充的，所以不需要太多样式 */ +} + +.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; + align-items: center; +} + +.mic-button { + width: 80px; + height: 80px; + background: linear-gradient(45deg, #ff5f6d, #ffc371); + border: none; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + 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); +} + +.mic-button:active { + transform: scale(1.05); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); +} + +.mic-button i { + font-size: 36px; + color: white; +} + +/* 麦克风 "监听中" 的动画效果 */ +.mic-button.is-listening { + animation: pulse 1.5s infinite; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(255, 95, 109, 0.7); + } + 70% { + box-shadow: 0 0 0 20px rgba(255, 95, 109, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(255, 95, 109, 0); + } +} + +.footer-credit { + margin-top: 20px; + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + font-size: 1rem; + transition: color 0.3s ease; +} + +.footer-credit:hover { + color: white; + text-decoration: underline; +} + +/* --- 响应式设计 --- */ +@media (max-width: 600px) { + .content-overlay { + padding: 20px; + } + + .top-bar label { + font-size: 0.9rem; + } + + .progress-container { + height: 10px; + } + + .mic-button { + width: 70px; + height: 70px; + } + + .mic-button i { + font-size: 30px; + } + + .footer-credit { + margin-top: 15px; + font-size: 0.9rem; + } +} \ No newline at end of file