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-v2/script.js
+++ b/20250916/archive/sponsor-list-v2/script.js
@@ -0,0 +1,92 @@
+// 自动更新年份
+document.getElementById(
+  "footerText"
+).innerHTML = `© ${new Date().getFullYear()} Tootaio.com 保留所有权利。| 由 <a href="https://tootaio.com" target="_blank" rel="noopener">Tootaio</a> 制作。`;
+
+// 页面初始化
+function initSponsorsAndSeats(sponsors, seats) {
+  const moneyList = document.getElementById("moneyList");
+  const seatList = document.getElementById("seatList");
+
+  // Sort by amount descending
+  sponsors.sort((a, b) => parseFloat(b.amount) - parseFloat(a.amount));
+  seats.sort((a, b) => parseInt(b.seat) - parseInt(a.seat));
+
+  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);
+  });