feat(sponsor-list): implement new design with animated canvas background

This commit introduces a completely redesigned sponsor list page. The previous two-column layout is replaced with a modern, single-column auto-scrolling list that unifies all sponsors. A dynamic canvas animation has been added to the background for a more engaging visual experience. Previous versions of the page have been archived. This update also includes data corrections for sponsor names and minor fixes to the related PPT assets.
2025-09-16 23:48:44 +08:00
parent 71b2dcf0a5
commit bcbae992a3
16 changed files with 612 additions and 350 deletions
--- a/20250916/archive/sponsor-list-v1/script.js
+++ b/20250916/archive/sponsor-list-v1/script.js
@@ -0,0 +1,136 @@
+// 自动更新年份
+document.getElementById(
+  "footerText"
+).innerHTML = `© ${new Date().getFullYear()} Tootaio.com 保留所有权利。| 由 <a href="https://tootaio.com" target="_blank" rel="noopener">Tootaio</a> 制作。`;
+
+// 主题切换功能
+const themeButtons = document.querySelectorAll(".theme-btn");
+const body = document.body;
+
+themeButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    const theme = button.getAttribute("data-theme");
+
+    // 移除所有主题类
+    body.classList.remove(
+      "theme-default",
+      "theme-light",
+      "theme-purple",
+      "theme-green",
+      "theme-red",
+      "theme-orange",
+      "theme-pink",
+      "theme-gold",
+      "theme-tech",
+      "theme-dark-minimal",
+      "theme-sunset"
+    );
+
+    // 添加所选主题类
+    if (theme !== "default") {
+      body.classList.add(`theme-${theme}`);
+    }
+
+    // 更新活动按钮状态
+    themeButtons.forEach((btn) => btn.classList.remove("active"));
+    button.classList.add("active");
+
+    // 保存主题到本地存储
+    localStorage.setItem("selectedTheme", theme);
+  });
+});
+
+// 检查本地存储中的主题偏好
+const savedTheme = localStorage.getItem("selectedTheme");
+if (savedTheme) {
+  const themeButton = document.querySelector(
+    `.theme-btn[data-theme="${savedTheme}"]`
+  );
+  if (themeButton) {
+    themeButton.click();
+  }
+}
+
+// 页面初始化
+function initSponsorsAndSeats(sponsors, seats) {
+  const moneyList = document.getElementById("moneyList");
+  const seatList = document.getElementById("seatList");
+
+  let totalAmount = 0;
+  sponsors.forEach((s) => {
+    totalAmount += parseFloat(s.amount);
+    const div = document.createElement("div");
+    div.className = "sponsor-item";
+    div.innerHTML = `<span>${s.name}</span><span class="amount">RM ${Number(
+      s.amount
+    ).toLocaleString()}</span>`;
+    moneyList.appendChild(div);
+  });
+  // 复制一份实现无缝滚动
+  moneyList.innerHTML += moneyList.innerHTML;
+
+  let totalSeats = 0;
+  seats.forEach((s) => {
+    totalSeats += parseInt(s.seat);
+    const div = document.createElement("div");
+    div.className = "seat-item";
+    div.innerHTML = `<span>${s.name}</span><span class="amount">${s.seat} 席</span>`;
+    seatList.appendChild(div);
+  });
+  seatList.innerHTML += seatList.innerHTML;
+
+  // 更新统计数据
+  const totalSponsors = document.getElementById("totalSponsors");
+  if (totalSponsors) {
+    totalSponsors.innerHTML = ""; // 清空现有内容
+    var totalSponsorsIcon = document.createElement("i");
+    totalSponsorsIcon.className = "fas fa-users";
+    totalSponsors.prepend(totalSponsorsIcon);
+    totalSponsors.appendChild(
+      document.createTextNode(` 赞助单位: ${sponsors.length}`)
+    );
+  }
+  const totalAmountEl = document.getElementById("totalAmount");
+  totalAmountEl.innerHTML = ""; // 清空现有内容
+  var totalAmountIcon = document.createElement("i");
+  totalAmountIcon.className = "fas fa-coins";
+  totalAmountEl.prepend(totalAmountIcon);
+  totalAmountEl.appendChild(
+    document.createTextNode(` 总金额: RM ${totalAmount.toLocaleString()}`)
+  );
+  const totalSeatsEl = document.getElementById("totalSeats");
+  if (totalSeatsEl) {
+    totalSeatsEl.innerHTML = ""; // 清空现有内容
+    var totalSeatsIcon = document.createElement("i");
+    totalSeatsIcon.className = "fas fa-chair";
+    totalSeatsEl.prepend(totalSeatsIcon);
+    totalSeatsEl.appendChild(
+      document.createTextNode(` 席位总数: ${totalSeats}`)
+    );
+  }
+}
+
+// 🚀 动态加载 JSON 数据
+Promise.all([
+  fetch("../data/sponsors.json").then((res) => res.json()),
+  fetch("../data/seats.json").then((res) => res.json()),
+])
+  .then(([sponsors, seats]) => {
+    initSponsorsAndSeats(sponsors, seats);
+  })
+  .catch((err) => {
+    console.error("加载 JSON 数据失败，回退到本地 mock 数据", err);
+
+    // 备用 mock 数据（防止页面空白）
+    const mockSponsors = [
+      { name: "亮湘厨中国烧烤", amount: 8000 },
+      { name: "星空科技集团", amount: 15000 },
+      { name: "未来教育基金会", amount: 20000 },
+    ];
+    const mockSeats = [
+      { name: "郑来兴", seat: 1 },
+      { name: "未来教育基金会", seat: 5 },
+    ];
+
+    initSponsorsAndSeats(mockSponsors, mockSeats);
+  });