initial commit

assets/script.js

@@ -0,0 +1,132 @@
+// assets/script.js
+
+// 主题切换功能
+document.addEventListener("DOMContentLoaded", function () {
+  // 获取主题切换按钮
+  const themeToggle = document.getElementById("theme-toggle");
+  const themeIcon = themeToggle.querySelector("i");
+
+  // 检查本地存储的主题设置
+  const currentTheme = localStorage.getItem("theme") || "light";
+  document.documentElement.className = currentTheme;
+  updateThemeIcon(currentTheme);
+
+  // 主题切换事件
+  themeToggle.addEventListener("click", function () {
+    const currentTheme = document.documentElement.classList.contains("dark")
+      ? "dark"
+      : "light";
+    const newTheme = currentTheme === "light" ? "dark" : "light";
+
+    document.documentElement.className = newTheme;
+    localStorage.setItem("theme", newTheme);
+    updateThemeIcon(newTheme);
+  });
+
+  // 更新主题图标
+  function updateThemeIcon(theme) {
+    if (theme === "dark") {
+      themeIcon.className = "fas fa-sun";
+    } else {
+      themeIcon.className = "fas fa-moon";
+    }
+  }
+
+  // 移动端菜单切换
+  const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
+  const mobileMenu = document.getElementById("mobile-menu");
+
+  if (mobileMenuToggle) {
+    mobileMenuToggle.addEventListener("click", function () {
+      mobileMenu.classList.toggle("hidden");
+      const icon = this.querySelector("i");
+      if (mobileMenu.classList.contains("hidden")) {
+        icon.className = "fas fa-bars";
+      } else {
+        icon.className = "fas fa-times";
+      }
+    });
+  }
+
+  // 滚动动画
+  const fadeElements = document.querySelectorAll(".fade-in");
+
+  const fadeInOnScroll = function () {
+    fadeElements.forEach((element) => {
+      const elementTop = element.getBoundingClientRect().top;
+      const elementVisible = 150;
+
+      if (elementTop < window.innerHeight - elementVisible) {
+        element.classList.add("visible");
+      }
+    });
+  };
+
+  // 初始检查
+  fadeInOnScroll();
+
+  // 滚动时检查
+  window.addEventListener("scroll", fadeInOnScroll);
+
+  // 关闭移动端菜单当点击菜单项
+  const mobileMenuItems = document.querySelectorAll("#mobile-menu a");
+  mobileMenuItems.forEach((item) => {
+    item.addEventListener("click", function () {
+      mobileMenu.classList.add("hidden");
+      mobileMenuToggle.querySelector("i").className = "fas fa-bars";
+    });
+  });
+});
+
+// 暗色主题样式
+const darkThemeStyles = `
+    .dark {
+        --bg-color: #1a202c;
+        --text-color: #e2e8f0;
+        --card-bg: #2d3748;
+        --border-color: #4a5568;
+    }
+    
+    .dark body {
+        background-color: var(--bg-color);
+        color: var(--text-color);
+    }
+    
+    .dark .theme-transition {
+        background-color: var(--bg-color);
+        color: var(--text-color);
+    }
+    
+    .dark .bg-white {
+        background-color: var(--card-bg);
+    }
+    
+    .dark .text-gray-800 {
+        color: var(--text-color);
+    }
+    
+    .dark .text-gray-600 {
+        color: #cbd5e0;
+    }
+    
+    .dark .bg-gray-50 {
+        background-color: #2d3748;
+    }
+    
+    .dark .bg-gray-100 {
+        background-color: #4a5568;
+    }
+    
+    .dark .border-gray-700 {
+        border-color: #4a5568;
+    }
+    
+    .dark .shadow-md, .dark .shadow-lg {
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    }
+`;
+
+// 添加暗色主题样式到文档
+const styleSheet = document.createElement("style");
+styleSheet.textContent = darkThemeStyles;
+document.head.appendChild(styleSheet);