vibe/voicepaste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 重新设计前端 UI 主题与视觉效果

Browse Source 
- 色彩系统从冷黑灰调整为带靛蓝底色的暖深色主题
- 强调色从 #3b82f6 蓝色替换为 #6366f1 Indigo
- 麦克风按钮增大至 96px，添加渐变背景与录音波纹环动画
- 状态指示器改为 pill 胶囊形，连接态带发光效果
- 预览区录音时显示 indigo 边框光晕与顶部渐变
- Toast 添加毛玻璃背景与弹出位移动画
- 历史卡片添加 slide-up 滑入动效支持
- 新增 theme-color meta 匹配深色主题
This commit is contained in:
imbytecat
2026-03-02 05:23:39 +08:00
parent 48c8444b3f
commit 2c322f5ab1
2 changed files with 259 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/index.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#08080d">
<title>VoicePaste</title>
</head>
<body>
@@ -24,13 +25,21 @@
</section>
<section id="mic-section">
<button id="mic-btn" type="button" disabled>
<svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor" aria-label="麦克风" role="img">
<title>麦克风</title>
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
<path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
</svg>
</button>
<div class="mic-wrapper">
<button id="mic-btn" type="button" disabled>
<svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor" aria-label="麦克风" role="img">
<title>麦克风</title>
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
<path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
</svg>
</button>
<div class="mic-rings" aria-hidden="true">
<span class="ring"></span>
<span class="ring"></span>
<span class="ring"></span>
</div>
</div>
<p class="mic-hint">按住说话</p>
</section>
<section id="history-section">