From a002fcc5d69b28b9edadc403a0a13857b661eae2 Mon Sep 17 00:00:00 2001 From: hehh Date: Sun, 23 Nov 2025 21:48:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(about):=20=E6=B7=BB=E5=8A=A0=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E9=9F=B3=E4=B9=90=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=8E=BB=E7=92=83=E6=80=81=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 about.html 中添加音频元素和播放控制按钮 - 更新 CSS 样式以增强玻璃态视觉效果和悬停动画 - 在 JavaScript 中实现音频初始化和播放控制逻辑 - 添加多语言支持的字幕和标签翻译 - 优化移动端 FAB 菜单交互体验 - 移除旧版音乐模块相关代码 --- about.html | 3 +++ css/about.css | 17 +++++++++-------- js/about.js | 29 +++++++++++++++++++++++++++-- 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/about.html b/about.html index c440f1d..bf9e835 100644 --- a/about.html +++ b/about.html @@ -155,6 +155,7 @@

Interests

+ Some of my interests
@@ -249,8 +250,10 @@
+
+ diff --git a/css/about.css b/css/about.css index 684ff54..afce0fb 100644 --- a/css/about.css +++ b/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-blur: 20px; + --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.12); + --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)); - -webkit-backdrop-filter: blur(var(--glass-blur)); + backdrop-filter: blur(var(--glass-blur)) saturate(130%); + -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 */ \ No newline at end of file diff --git a/js/about.js b/js/about.js index 74ca2bd..c1b446e 100644 --- a/js/about.js +++ b/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];