feat(about): 添加背景音乐功能并优化玻璃态效果
- 在 about.html 中添加音频元素和播放控制按钮 - 更新 CSS 样式以增强玻璃态视觉效果和悬停动画 - 在 JavaScript 中实现音频初始化和播放控制逻辑 - 添加多语言支持的字幕和标签翻译 - 优化移动端 FAB 菜单交互体验 - 移除旧版音乐模块相关代码
This commit is contained in:
hehh
@@ -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>
|
||||
|
||||
<!-- 微信弹窗 -->
|
||||
|
||||
@@ -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 */
|
||||
29
js/about.js
29
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,7 +635,26 @@ 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) {
|
||||
|
||||
Reference in New Issue
Block a user