feat(about): 添加背景音乐功能并优化玻璃态效果

- 在 about.html 中添加音频元素和播放控制按钮
- 更新 CSS 样式以增强玻璃态视觉效果和悬停动画
- 在 JavaScript 中实现音频初始化和播放控制逻辑
- 添加多语言支持的字幕和标签翻译
- 优化移动端 FAB 菜单交互体验
- 移除旧版音乐模块相关代码

about.html

@@ -155,6 +155,7 @@
             <div class="bento-card area-interests">
                 <div class="card-header">
                     <h3 data-i18n="interest.title">Interests</h3>
+                    <span class="card-subtitle" data-i18n="interest.subtitle">Some of my interests</span>
                 </div>
                 <div class="interest-list">
                     <div class="interest-item">
@@ -249,8 +250,10 @@
             <div class="fab-menu" id="fab-menu">
                 <button id="fab-lang" class="fab-item"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button>
                 <button id="fab-theme" class="fab-item"><i class="ri-moon-line"></i><span class="fab-text">Theme</span></button>
+                <button id="fab-music" class="fab-item"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
             </div>
         </div>
+        <audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T.mp3" autoplay loop preload="auto"></audio>
     </main>
 
     <!-- 微信弹窗 -->

css/about.css

@@ -14,10 +14,10 @@
     --bg-grad-1: #a1c4fd;
     --bg-grad-2: #c2e9fb;
 
-    --glass-bg: rgba(255, 255, 255, 0.65);
+    --glass-bg: rgba(255, 255, 255, 0.55);
     --glass-border: 1px solid rgba(255, 255, 255, 0.9);
-    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+    --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
-    --glass-blur: 20px;
+    --glass-blur: 28px;
 
     --text-primary: #2d3436;
     --text-secondary: #636e72;
@@ -48,9 +48,9 @@
     --bg-grad-1: #2d3436;
     --bg-grad-2: #000000;
 
-    --glass-bg: rgba(30, 30, 35, 0.65);
+    --glass-bg: rgba(30, 30, 35, 0.55);
     --glass-border: 1px solid rgba(255, 255, 255, 0.08);
-    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
+    --glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
 
     --text-primary: #dfe6e9;
     --text-secondary: #b2bec3;
@@ -140,8 +140,8 @@ body {
    ========================================= */
 .glass-nav, .bento-card, .glass-panel, .modal-glass {
     background: var(--glass-bg);
-    backdrop-filter: blur(var(--glass-blur));
+    backdrop-filter: blur(var(--glass-blur)) saturate(130%);
-    -webkit-backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
     border: var(--glass-border);
     box-shadow: var(--glass-shadow);
     border-radius: var(--radius);
@@ -150,7 +150,7 @@ body {
 
 .bento-card:hover, .glass-panel:hover {
     transform: translateY(-4px);
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.15);
     border-color: var(--accent);
 }
 
@@ -1586,4 +1586,5 @@ body {
 .fab-menu { display: none; flex-direction: column; gap: 10px; margin-top: 10px; }
 .fab-item { display: flex; align-items: center; gap: 6px; background: var(--glass-bg); border-radius: 18px; padding: 8px 12px; border: var(--glass-border); box-shadow: var(--glass-shadow); }
 .fab-menu.open { display: flex; }
+.site-audio { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; display: none; }
 /* music module removed */

js/about.js

@@ -42,7 +42,8 @@ class I18nManager {
                 "mbti.tag3": "深度洞察与创意",
                 "mbti.tag4": "关怀与同理心",
                 "tech.title": "技术栈宇宙",
-                "interest.title": "个人兴趣",
+                "interest.title": "兴趣",
+                "interest.subtitle": "INFJ · 创造者 · 探索者",
                 "interest.cycling": "骑行",
                 "interest.cycling_desc": "享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感",
                 "interest.reading": "阅读",
@@ -81,6 +82,7 @@ class I18nManager {
                 "mbti.tag4": "Care & Empathy",
                 "tech.title": "Tech Universe",
                 "interest.title": "Interests",
+                "interest.subtitle": "INFJ · Creator · Explorer",
                 "interest.cycling": "Cycling",
                 "interest.cycling_desc": "Enjoy the freedom on the road, measure the world with wheels, and find inspiration in the scenery",
                 "interest.reading": "Reading",
@@ -390,6 +392,7 @@ class UIManager {
         this.initBioToggle();
         this.initNavInteraction();
         this.initProfileGradient();
+        this.initAudio();
         this.initFab();
         let resizeTimer = null;
         window.addEventListener('resize', () => {
@@ -610,12 +613,15 @@ class UIManager {
         const menu = document.getElementById('fab-menu');
         const fLang = document.getElementById('fab-lang');
         const fTheme = document.getElementById('fab-theme');
-        if (!main || !menu || !fLang || !fTheme) return;
+        const fMusic = document.getElementById('fab-music');
+        if (!main || !menu || !fLang || !fTheme || !fMusic) return;
         const updateLabels = () => {
             const lang = localStorage.getItem('lang') || (navigator.language && navigator.language.startsWith('zh') ? 'zh' : 'en');
             const theme = (localStorage.getItem('theme') === 'night') ? 'night' : 'day';
             fLang.querySelector('.fab-text').textContent = lang === 'zh' ? '中文' : 'English';
             fTheme.querySelector('.fab-text').textContent = theme === 'night' ? 'Night' : 'Day';
+            const playing = (this.audio && !this.audio.paused);
+            fMusic.querySelector('.fab-text').textContent = lang === 'zh' ? (playing ? '暂停' : '播放') : (playing ? 'Pause' : 'Play');
         };
         main.addEventListener('click', () => {
             menu.classList.toggle('open');
@@ -629,9 +635,28 @@ class UIManager {
             document.getElementById('theme-btn')?.click();
             updateLabels();
         });
+        fMusic.addEventListener('click', () => {
+            if (this.audio) {
+                if (this.audio.paused) {
+                    this.audio.play().catch(() => {});
+                } else {
+                    this.audio.pause();
+                }
+            }
+            updateLabels();
+        });
         updateLabels();
     }
 
+    initAudio() {
+        const el = document.getElementById('site-audio');
+        if (!el) return;
+        this.audio = el;
+        this.audio.loop = true;
+        const tryPlay = () => { this.audio.play().catch(() => {}); };
+        tryPlay();
+    }
+
     _t(key) {
         try {
             return (new I18nManager()).dict[(localStorage.getItem('lang') || 'zh')][key];