@@ -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];