eb4ca98763
This commit introduces a complete multi-page presentation system for the 20251012 event. Key features include: - **Page Structure:** Establishes the page flow with an entry point, a main cover scene, a committee list, and individual speech video pages. - **Real-time Chroma Key:** Implements a canvas-based green screen effect to composite a video onto a background image. A control panel allows for real-time adjustment of keying parameters, position, and scale. - **Unified Navigation:** A new `nav.js` script enables seamless navigation between pages using keyboard (arrow keys, Enter), touch swipes, and on-screen buttons. The navigation logic follows a predefined sequence (entry -> main -> committee -> speeches). - **Dynamic Content:** The committee list page dynamically generates its content from a JavaScript data source.
87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
// 🎯 筹委会主要名单（简体）
|
|
const committeeData = [
|
|
{
|
|
role: "主席",
|
|
name: "黄祖全（小龙）",
|
|
subRole: "副主席",
|
|
subName: "周秉聪",
|
|
},
|
|
{ role: "总务", name: "江德景", subRole: "副总务", subName: "林泓明" },
|
|
{ role: "文书", name: "苏俊文", subRole: "副文书", subName: "谢进勇" },
|
|
{ role: "财政", name: "陈祖平", subRole: "副财政", subName: "郑礼靖" },
|
|
{ role: "查账", name: "黄杨顺" },
|
|
{ role: "交通", name: "胡千鸿", subRole: "副交通", subName: "颜楷庆" },
|
|
{ role: "交际", name: "黄伟汉", subRole: "副交际", subName: "陈俊宇" },
|
|
];
|
|
|
|
// 🎯 工委名单
|
|
const members = [
|
|
"蓝皓贤",
|
|
"黄寿琪",
|
|
"赵汶德",
|
|
"Dinesh",
|
|
"李善业",
|
|
"郑杰瑞",
|
|
"颜俊宇",
|
|
"黄靖杰",
|
|
"潘俊轩",
|
|
"张祥明",
|
|
"黄升文",
|
|
"陈照明",
|
|
"赵汶德",
|
|
"陈世勇",
|
|
"王畯杰",
|
|
"黄伟宏",
|
|
"杜恩浩",
|
|
"林育森",
|
|
"陈仲旺",
|
|
"刘伟杰",
|
|
"刘伟鸿",
|
|
"林鸿旺",
|
|
];
|
|
|
|
const body = document.getElementById("committeeBody");
|
|
const membersGrid = document.getElementById("committeeMembers");
|
|
|
|
// 🧩 动态生成主要职位（四列）
|
|
committeeData.forEach((item) => {
|
|
// 正职
|
|
const roleEl = document.createElement("div");
|
|
roleEl.className = "text-yellow-300 font-semibold text-right pr-2";
|
|
roleEl.textContent = item.role;
|
|
body.appendChild(roleEl);
|
|
|
|
const nameEl = document.createElement("div");
|
|
nameEl.className = "text-left";
|
|
nameEl.textContent = item.name;
|
|
body.appendChild(nameEl);
|
|
|
|
// 副职（若存在）
|
|
if (item.subRole && item.subName) {
|
|
const subRoleEl = document.createElement("div");
|
|
subRoleEl.className = "text-yellow-300 font-semibold text-right pr-2";
|
|
subRoleEl.textContent = item.subRole;
|
|
body.appendChild(subRoleEl);
|
|
|
|
const subNameEl = document.createElement("div");
|
|
subNameEl.className = "text-left";
|
|
subNameEl.textContent = item.subName;
|
|
body.appendChild(subNameEl);
|
|
} else {
|
|
// 没有副职则补空格，保持四列对齐
|
|
const empty1 = document.createElement("div");
|
|
empty1.textContent = "";
|
|
const empty2 = document.createElement("div");
|
|
empty2.textContent = "";
|
|
body.appendChild(empty1);
|
|
body.appendChild(empty2);
|
|
}
|
|
});
|
|
|
|
// 🧩 工委名单生成（六列）
|
|
members.forEach((name) => {
|
|
const div = document.createElement("div");
|
|
div.textContent = name;
|
|
membersGrid.appendChild(div);
|
|
});
|