commit ae8d3ce51086814e930705e2f89107fa4e81ca47 Author: xiaomai Date: Mon Sep 15 00:28:27 2025 +0800 first commit diff --git a/20250916/README.md b/20250916/README.md new file mode 100644 index 0000000..71616d1 --- /dev/null +++ b/20250916/README.md @@ -0,0 +1,8 @@ +这个是大屏的赞助人 Sponsor List +https://dinner.tootaio.com/20250916/sponsor-list/ + +这个是手机版，客人可以看的 Sponsor List +https://dinner.tootaio.com/20250916/sponsor-list-mobile/ + +这个是 PPT（用电脑看，左右键换页面）背景图给我之后我放上去 +https://dinner.tootaio.com/20250916/ppt/ \ No newline at end of file diff --git a/20250916/archive/sponsor-list-dynamic-vue/index.html b/20250916/archive/sponsor-list-dynamic-vue/index.html new file mode 100644 index 0000000..b3ec668 --- /dev/null +++ b/20250916/archive/sponsor-list-dynamic-vue/index.html @@ -0,0 +1,146 @@ + + + + + + 赞助名单展示 + + + + + + + + + + + +

+ +

+ 🎉 感谢所有赞助人 🎉 +

+ + +

💰 赞助金额

+ {{ s.name }} + RM {{ s.amount.toLocaleString() }} +

+ +

+ {{ s.name }} + RM {{ s.amount.toLocaleString() }} +

+ 赞助人数: {{ sponsors.length }} | + 总金额: RM {{ totalAmount.toLocaleString() }} +

+ + +

🪑 席位赞助

+ {{ s.name }} + {{ s.seat }} 席 +

+ +

+ {{ s.name }} + {{ s.seat }} 席 +

+ 席位总数: {{ totalSeats }} +

+ + + + diff --git a/20250916/archive/sponsor-list/index.html b/20250916/archive/sponsor-list/index.html new file mode 100644 index 0000000..159f1fc --- /dev/null +++ b/20250916/archive/sponsor-list/index.html @@ -0,0 +1,104 @@ + + + + + + 赞助人名单 - 多主题大屏展示 + + + + +

+ + + +

赞助金额

席位赞助

+ + +

+ + + diff --git a/20250916/archive/sponsor-list/script.js b/20250916/archive/sponsor-list/script.js new file mode 100644 index 0000000..2a49341 --- /dev/null +++ b/20250916/archive/sponsor-list/script.js @@ -0,0 +1,136 @@ +// 自动更新年份 +document.getElementById( + "footerText" +).innerHTML = `© ${new Date().getFullYear()} Tootaio.com 保留所有权利。| 由 Tootaio 制作。`; + +// 主题切换功能 +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 = `${s.name}RM ${Number( + s.amount + ).toLocaleString()}`; + 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 = `${s.name}${s.seat} 席`; + 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); + }); diff --git a/20250916/archive/sponsor-list/style.css b/20250916/archive/sponsor-list/style.css new file mode 100644 index 0000000..f1065c5 --- /dev/null +++ b/20250916/archive/sponsor-list/style.css @@ -0,0 +1,474 @@ +:root { + /* 默认主题 - 深海蓝 */ + --primary-bg: linear-gradient(135deg, #0f1c30, #1a2a6c); + --card-bg: rgba(0, 0, 0, 0.3); + --primary-text: #ffffff; + --accent-color: #4fc3f7; + --secondary-accent: #ffd700; + --header-color: #ffd700; + --stats-color: #4fc3f7; + --item-bg: rgba(255, 255, 255, 0.05); + --sponsor-border: #4fc3f7; + --seat-border: #ffd700; + --shadow-color: rgba(0, 0, 0, 0.5); +} + +/* 浅色主题 */ +.theme-light { + --primary-bg: linear-gradient(135deg, #f5f7fa, #e4e8f0); + --card-bg: rgba(255, 255, 255, 0.8); + --primary-text: #2d3748; + --accent-color: #3182ce; + --secondary-accent: #d69e2e; + --header-color: #2b6cb0; + --stats-color: #4a5568; + --item-bg: rgba(0, 0, 0, 0.05); + --sponsor-border: #3182ce; + --seat-border: #d69e2e; + --shadow-color: rgba(0, 0, 0, 0.1); +} + +/* 深紫色主题 */ +.theme-purple { + --primary-bg: linear-gradient(135deg, #1a1a2e, #4a154b); + --card-bg: rgba(0, 0, 0, 0.4); + --primary-text: #f0e6ef; + --accent-color: #9f7aea; + --secondary-accent: #faf089; + --header-color: #faf089; + --stats-color: #9f7aea; + --item-bg: rgba(255, 255, 255, 0.08); + --sponsor-border: #9f7aea; + --seat-border: #faf089; + --shadow-color: rgba(0, 0, 0, 0.6); +} + +/* 绿色主题 */ +.theme-green { + --primary-bg: linear-gradient(135deg, #0a2f1d, #1a3c2b); + --card-bg: rgba(0, 0, 0, 0.35); + --primary-text: #e6fffa; + --accent-color: #38b2ac; + --secondary-accent: #fefcbf; + --header-color: #fefcbf; + --stats-color: #38b2ac; + --item-bg: rgba(255, 255, 255, 0.06); + --sponsor-border: #38b2ac; + --seat-border: #fefcbf; + --shadow-color: rgba(0, 0, 0, 0.55); +} + +/* 红色主题 */ +.theme-red { + --primary-bg: linear-gradient(135deg, #2a0e0e, #8b0000); + --card-bg: rgba(0, 0, 0, 0.4); + --primary-text: #ffe6e6; + --accent-color: #ff6b6b; + --secondary-accent: #ffd93d; + --header-color: #ffd93d; + --stats-color: #ff6b6b; + --item-bg: rgba(255, 255, 255, 0.08); + --sponsor-border: #ff6b6b; + --seat-border: #ffd93d; + --shadow-color: rgba(0, 0, 0, 0.6); +} + +/* 橙色主题 */ +.theme-orange { + --primary-bg: linear-gradient(135deg, #332211, #cc5500); + --card-bg: rgba(0, 0, 0, 0.35); + --primary-text: #fff5e6; + --accent-color: #ff8c42; + --secondary-accent: #ffd700; + --header-color: #ffd700; + --stats-color: #ff8c42; + --item-bg: rgba(255, 255, 255, 0.07); + --sponsor-border: #ff8c42; + --seat-border: #ffd700; + --shadow-color: rgba(0, 0, 0, 0.55); +} + +/* 粉色主题 */ +.theme-pink { + --primary-bg: linear-gradient(135deg, #2e1a2e, #8a2be2); + --card-bg: rgba(0, 0, 0, 0.4); + --primary-text: #fce4ec; + --accent-color: #ff6ec7; + --secondary-accent: #a5d6ff; + --header-color: #a5d6ff; + --stats-color: #ff6ec7; + --item-bg: rgba(255, 255, 255, 0.08); + --sponsor-border: #ff6ec7; + --seat-border: #a5d6ff; + --shadow-color: rgba(0, 0, 0, 0.6); +} + +/* 金色奢华主题 */ +.theme-gold { + --primary-bg: linear-gradient(135deg, #1a1818, #4a3c2a); + --card-bg: rgba(0, 0, 0, 0.5); + --primary-text: #f8ecc9; + --accent-color: #c5a572; + --secondary-accent: #ffd700; + --header-color: #ffd700; + --stats-color: #c5a572; + --item-bg: rgba(200, 170, 100, 0.1); + --sponsor-border: #c5a572; + --seat-border: #ffd700; + --shadow-color: rgba(0, 0, 0, 0.7); +} + +/* 科技蓝主题 */ +.theme-tech { + --primary-bg: linear-gradient(135deg, #001425, #003a5d); + --card-bg: rgba(0, 30, 60, 0.6); + --primary-text: #e0f7ff; + --accent-color: #00c8ff; + --secondary-accent: #00ffcc; + --header-color: #00ffcc; + --stats-color: #00c8ff; + --item-bg: rgba(0, 200, 255, 0.1); + --sponsor-border: #00c8ff; + --seat-border: #00ffcc; + --shadow-color: rgba(0, 40, 80, 0.7); +} + +/* 深色简约主题 */ +.theme-dark-minimal { + --primary-bg: linear-gradient(135deg, #0a0a0a, #2d2d2d); + --card-bg: rgba(40, 40, 40, 0.7); + --primary-text: #e0e0e0; + --accent-color: #7c7c7c; + --secondary-accent: #ffffff; + --header-color: #ffffff; + --stats-color: #7c7c7c; + --item-bg: rgba(255, 255, 255, 0.05); + --sponsor-border: #7c7c7c; + --seat-border: #ffffff; + --shadow-color: rgba(0, 0, 0, 0.8); +} + +/* 日落主题 */ +.theme-sunset { + --primary-bg: linear-gradient(135deg, #0f1c30, #e25822); + --card-bg: rgba(0, 0, 0, 0.4); + --primary-text: #fff5e6; + --accent-color: #ff8c42; + --secondary-accent: #ffd93d; + --header-color: #ffd93d; + --stats-color: #ff8c42; + --item-bg: rgba(255, 255, 255, 0.08); + --sponsor-border: #ff8c42; + --seat-border: #ffd93d; + --shadow-color: rgba(0, 0, 0, 0.6); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + transition: background-color 0.5s ease, color 0.5s ease, transform 0.3s ease; +} + +body { + background: var(--primary-bg); + color: var(--primary-text); + font-family: "Microsoft YaHei", sans-serif; + padding: 20px; + overflow-x: hidden; + min-height: 100vh; +} + +.container { + max-width: 1800px; + margin: auto; + position: relative; +} + +.theme-panel { + position: fixed; + top: 50%; + right: 20px; + transform: translateY(-50%); + display: flex; + flex-direction: column; + gap: 12px; + z-index: 100; + background: var(--card-bg); + padding: 15px; + border-radius: 20px; + box-shadow: 0 5px 20px var(--shadow-color); + backdrop-filter: blur(5px); +} + +.theme-btn { + width: 30px; + height: 30px; + border-radius: 50%; + border: 2px solid var(--primary-text); + cursor: pointer; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.theme-btn:hover { + transform: scale(1.15); + box-shadow: 0 0 10px var(--secondary-accent); +} + +.theme-btn.active { + transform: scale(1.2); + box-shadow: 0 0 15px var(--secondary-accent); +} + +.theme-default { + background: linear-gradient(135deg, #0f1c30, #1a2a6c); +} + +.theme-light-btn { + background: linear-gradient(135deg, #f5f7fa, #e4e8f0); +} + +.theme-purple-btn { + background: linear-gradient(135deg, #1a1a2e, #4a154b); +} + +.theme-green-btn { + background: linear-gradient(135deg, #0a2f1d, #1a3c2b); +} + +.theme-red-btn { + background: linear-gradient(135deg, #2a0e0e, #8b0000); +} + +.theme-orange-btn { + background: linear-gradient(135deg, #332211, #cc5500); +} + +.theme-pink-btn { + background: linear-gradient(135deg, #2e1a2e, #8a2be2); +} + +.theme-gold-btn { + background: linear-gradient(135deg, #1a1818, #4a3c2a); +} + +.theme-tech-btn { + background: linear-gradient(135deg, #001425, #003a5d); +} + +.theme-dark-minimal-btn { + background: linear-gradient(135deg, #0a0a0a, #2d2d2d); +} + +.theme-sunset-btn { + background: linear-gradient(135deg, #0f1c30, #e25822); +} + +.header, +.footer { + text-align: center; + padding: 30px; + background: var(--card-bg); + border-radius: 20px; + box-shadow: 0 10px 30px var(--shadow-color); + backdrop-filter: blur(10px); + margin-bottom: 30px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.footer { + margin-top: 30px; + padding: 20px; +} + +h1 { + font-size: 2rem; + color: var(--header-color); + margin-bottom: 15px; + text-shadow: 0 2px 10px var(--shadow-color); + letter-spacing: 1.5px; +} + +a { + color: var(--accent-color); + text-decoration: none; + transition: color 0.3s ease; +} + +.subtitle { + font-size: 1.5rem; + color: var(--primary-text); + opacity: 0.9; + margin-bottom: 25px; +} + +.stats { + display: flex; + justify-content: center; + gap: 50px; + margin: 25px 0; +} + +.stats div { + font-size: 3rem; + color: var(--stats-color); + font-weight: bold; + display: flex; + align-items: center; + gap: 12px; + padding: 12px 20px; + background: var(--item-bg); + border-radius: 12px; +} + +.stats i { + font-size: 2.2rem; +} + +.main-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin-top: 20px; +} + +.section { + background: var(--card-bg); + border-radius: 20px; + padding: 30px; + height: 650px; + position: relative; + overflow: hidden; + box-shadow: 0 10px 30px var(--shadow-color); + backdrop-filter: blur(5px); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.section h2 { + text-align: center; + color: var(--accent-color); + margin-bottom: 25px; + font-size: 2.4rem; + text-shadow: 0 1px 5px var(--shadow-color); + position: relative; + padding-bottom: 12px; +} + +.section h2:after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 4px; + background: var(--secondary-accent); + border-radius: 4px; +} + +.scroll-container { + height: 540px; + overflow: hidden; + position: relative; + border-radius: 15px; + margin-top: 15px; +} + +.scroll-content { + position: absolute; + width: 100%; +} + +.sponsor-item, +.seat-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 18px 25px; + margin: 15px 0; + background: var(--item-bg); + border-radius: 12px; + font-size: 1.7rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.sponsor-item:hover, +.seat-item:hover { + transform: translateY(-3px); + box-shadow: 0 8px 20px var(--shadow-color); +} + +.sponsor-item { + border-left: 6px solid var(--sponsor-border); +} + +.seat-item { + border-left: 6px solid var(--seat-border); +} + +.amount { + color: var(--secondary-accent); + font-weight: bold; + font-size: 1.8rem; +} + +.scroll-content { + animation: scroll 40s linear infinite; +} + +.scroll-content:hover { + animation-play-state: paused; +} + +@keyframes scroll { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-50%); + } +} + +/* 响应式设计 */ +@media (max-width: 1200px) { + .main-content { + grid-template-columns: 1fr; + } + + h1 { + font-size: 3rem; + } + + .stats { + gap: 20px; + } +} + +@media (max-width: 768px) { + .stats { + flex-direction: column; + gap: 15px; + } + + .header, + .footer { + padding: 20px; + } + + .section { + padding: 20px; + height: 500px; + } + + .scroll-container { + height: 400px; + } + + .theme-panel { + top: auto; + bottom: 20px; + right: 20px; + flex-direction: row; + transform: none; + } +} diff --git a/20250916/archive/sponsor-person/index.html b/20250916/archive/sponsor-person/index.html new file mode 100644 index 0000000..1b0fbbe --- /dev/null +++ b/20250916/archive/sponsor-person/index.html @@ -0,0 +1,426 @@ + + + + + + 赞助人名单 + + + + +

赞助人名单

衷心感谢以下企业及个人对本次活动的大力支持与慷慨赞助，您的贡献是活动成功举办的重要保障。

+ +

赞助企业/个人

RM 75,387.88

赞助总额

席位总数

+ +

+ + + + +

+ +

+                
+                    最高赞助
+                

+                
+                    Fipay

+                     RM 15,547

+                    铂金赞助商
+                

+            

+ +

钻石赞助

+ + +

+ +

钻石赞助

+ + +

+ +

黄金赞助

+ + +

+ +

白银赞助

+ + +

白银赞助

+ + +

+ +

青铜赞助

+ + +

+ +

青铜赞助

+ + +

席位赞助

+ + + 席位赞助商 +

+ +

席位赞助

+ + + 席位赞助商 +

+ +

席位赞助

+ + + 席位赞助商 +

+ + +

席位赞助

+ + + 席位赞助商 +

+ + +

+ + + + \ No newline at end of file diff --git a/20250916/data/seats.json b/20250916/data/seats.json new file mode 100644 index 0000000..ae0732f --- /dev/null +++ b/20250916/data/seats.json @@ -0,0 +1,47 @@ +[ + { "name": "郑来兴", "seat": 1 }, + { "name": "大宝榴莲", "seat": 1 }, + { "name": "姚招盛", "seat": 1 }, + { "name": "黄啟业", "seat": 1 }, + { "name": "江仁楷", "seat": 1 }, + { "name": "伯乐集团", "seat": 1 }, + { "name": "陈祥龙", "seat": 1 }, + { "name": "颜凯伟", "seat": 1 }, + { "name": "陈家晟", "seat": 1 }, + { "name": "永和工业有限公司", "seat": 1 }, + { "name": "三泰kopitiam", "seat": 1 }, + { "name": "林文庆", "seat": 1 }, + { "name": "居銮dw", "seat": 1 }, + { "name": "居銮阿童", "seat": 1 }, + { "name": "王重晟", "seat": 1 }, + { "name": "张国靖", "seat": 1 }, + { "name": "領善精密刀具貿易", "seat": 1 }, + { "name": "快乐园", "seat": 1 }, + { "name": "瞿永钦", "seat": 1 }, + { "name": "陳学發", "seat": 1 }, + { "name": "黄祖全", "seat": 1 }, + { "name": "黄耀宏", "seat": 1 }, + { "name": "蔡金莱", "seat": 1 }, + { "name": "国安生果", "seat": 1 }, + { "name": "荣成生命礼仪有限公司", "seat": 1 }, + { "name": "李福丞", "seat": 1 }, + { "name": "Phone Point Telecommunication Sdn Bhd", "seat": 1 }, + { "name": "鼎盛集团", "seat": 1 }, + { "name": "潘联国", "seat": 1 }, + { "name": "刘云鳞", "seat": 1 }, + { "name": "klevin ou", "seat": 1 }, + { "name": "吴厚雄", "seat": 1 }, + { "name": "黄金林", "seat": 1 }, + { "name": "Sin Chu Hin BP", "seat": 1 }, + { "name": "LT Group", "seat": 1 }, + { "name": "永平天保公", "seat": 1 }, + { "name": "永平福满家美食阁", "seat": 1 }, + { "name": "颜汉龙", "seat": 1 }, + { "name": "明義柅轮电池服务", "seat": 1 }, + { "name": "MDL AUTO WERKZ", "seat": 1 }, + { "name": "柔中汽车机件有限公司", "seat": 1 }, + { "name": "永兴石灰", "seat": 1 }, + { "name": "winbox", "seat": 1 }, + { "name": "南利企业", "seat": 1 }, + { "name": "戴祖发", "seat": 1 } +] diff --git a/20250916/data/sponsors.json b/20250916/data/sponsors.json new file mode 100644 index 0000000..c5a1e61 --- /dev/null +++ b/20250916/data/sponsors.json @@ -0,0 +1,33 @@ +[ + { "name": "Fipay", "amount": 15547 }, + { "name": "EV777", "amount": 10000 }, + { "name": "Smart 6655", "amount": 10000 }, + { "name": "亮湘厨中国烧烤", "amount": 8000 }, + { "name": "99 IT", "amount": 5000 }, + { "name": "周凯雄", "amount": 5000 }, + { "name": "LT Group", "amount": 4000 }, + { "name": "联兴气车", "amount": 3500 }, + { "name": "程华强", "amount": 3000 }, + { "name": "吴厚雄", "amount": 3000 }, + { "name": "GoDrive Car Rental SDN BHD", "amount": 1888.88 }, + { "name": "江先峰", "amount": 1547 }, + { "name": "顺发吊车", "amount": 1000 }, + { "name": "白俊雄", "amount": 1000 }, + { "name": "裕源生果有限公司", "amount": 1000 }, + { "name": "福泉风水", "amount": 800 }, + { "name": "吴田财", "amount": 547 }, + { "name": "许展鸿", "amount": 547 }, + { "name": "林凯胜", "amount": 547 }, + { "name": "新强羽球馆", "amount": 547 }, + { "name": "江彩珊", "amount": 500 }, + { "name": "居銮阿伟", "amount": 500 }, + { "name": "小K", "amount": 500 }, + { "name": "詹志新", "amount": 500 }, + { "name": "林22", "amount": 500 }, + { "name": "謝明忠", "amount": 500 }, + { "name": "許忠礼", "amount": 500 }, + { "name": "four season fruity sdn bhd", "amount": 500 }, + { "name": "陈文毅", "amount": 500 }, + { "name": "青海茶餐室", "amount": 500 }, + { "name": "八子", "amount": 200 } +] diff --git a/20250916/ppt/config/banquet.json b/20250916/ppt/config/banquet.json new file mode 100644 index 0000000..5c2c28f --- /dev/null +++ b/20250916/ppt/config/banquet.json @@ -0,0 +1,41 @@ +{ + "manifest": "/templates/manifest.json", + "slides": [ + { + "type": "cover", + "template": "cover", + "data": { + "title": "柔佛永平关圣公联谊会", + "subtitle": "筹募活动基金联欢晚会", + "date": "2025年9月16日", + "location": "永平富华冷气酒家" + }, + "background": "https://picsum.photos/1920/1080?grayscale" + }, + { + "type": "speech", + "template": "speech", + "data": { + "name": "林添顺", + "nameEn": "YB Ling Tian Soon (Ah Soon)", + "title": "柔佛州州议员兼州行政议员", + "avatar": "images/林添顺.jpg", + "bio": "马华公会（MCA）领袖，现任柔佛州永平区州议员兼州行政议会卫生及环境委员会主席。青年政治人物，积极推动民生与公共服务改善，关注教育、环境及社区发展。" + }, + "background": "https://picsum.photos/1920/1080?grayscale&random=1", + "overrideCss": "overrides/zhanghua.css" + }, + { + "type": "speech", + "template": "speech", + "data": { + "name": "嘉宾姓名", + "title": "职位 / 头衔", + "avatar": "images/关圣公致辞2.jpg", + "bio": "嘉宾介绍" + }, + "background": "https://picsum.photos/1920/1080?grayscale&random=2", + "overrideCss": "overrides/limei.css" + } + ] +} diff --git a/20250916/ppt/css/base.css b/20250916/ppt/css/base.css new file mode 100644 index 0000000..d257e12 --- /dev/null +++ b/20250916/ppt/css/base.css @@ -0,0 +1,126 @@ +/* ============================ + base.css - Banquet PPT 基础样式 + ============================ */ + +/* 1. Reset 基础样式 (简化版 normalize) */ +*{ + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Noto Sans SC', sans-serif; +} + +html, +body { + height: 100%; + width: 100%; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + background-color: #111; /* 深色背景，适合投影 */ + color: #fff; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + overflow: hidden; /* 防止出现滚动条 */ +} + +/* 2. 容器样式 */ +#app { + height: 100%; + width: 100%; + position: relative; + overflow: hidden; +} + +/* 3. 幻灯片基础样式 */ +.banquet-slide { + display: none; /* 默认隐藏，js 会控制显示 */ + height: 100%; + width: 100%; + padding: 2rem; + position: absolute; + top: 0; + left: 0; + + background-color: #222; /* 默认深灰背景 */ + background-size: cover; + background-position: center; + + display: flex; + align-items: center; + justify-content: center; + + font-size: 2rem; + transition: opacity 0.4s ease, transform 0.4s ease; +} + +/* 当前显示的 slide（可选效果：淡入） */ +.banquet-slide[style*="block"] { + opacity: 1; + z-index: 1; +} +.banquet-slide[style*="none"] { + opacity: 0; + z-index: 0; +} + +/* 4. 标题/正文默认样式 */ +h1, +h2, +h3 { + font-weight: bold; + margin-bottom: 1rem; +} + +h1 { + font-size: 3rem; +} + +h2 { + font-size: 2.2rem; +} + +h3 { + font-size: 1.6rem; +} + +p { + margin-bottom: 1rem; + font-size: 1.2rem; +} + +/* 5. 辅助类 */ +.text-center { + text-align: center; +} +.text-right { + text-align: right; +} +.text-left { + text-align: left; +} + +.mt-1 { + margin-top: 0.5rem; +} +.mt-2 { + margin-top: 1rem; +} +.mt-3 { + margin-top: 1.5rem; +} + +/* 6. 简单过渡动画（可选） */ +.fade-in { + animation: fadeIn 0.6s ease forwards; +} +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(15px); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/20250916/ppt/index.html b/20250916/ppt/index.html new file mode 100644 index 0000000..992c4b4 --- /dev/null +++ b/20250916/ppt/index.html @@ -0,0 +1,40 @@ + + + + + + 宴会展示PPT + + + + + + +

+ + + + + diff --git a/20250916/ppt/js/engine.js b/20250916/ppt/js/engine.js new file mode 100644 index 0000000..120d5aa --- /dev/null +++ b/20250916/ppt/js/engine.js @@ -0,0 +1,32 @@ +function escapeHtml(str) { + if (str == null) return ""; + return String(str) + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} + +export function renderTemplate(template, data = {}, opts = { allowRaw: true }) { + // 支持 nested keys (a.b.c) + const get = (path) => + path + .split(".") + .reduce((acc, k) => (acc == null ? undefined : acc[k]), data); + + return template.replace( + /\{\{\{\s*([\w$.]+)\s*\}\}\}|\{\{\s*([\w$.]+)\s*\}\}/g, + (m, rawKey, escKey) => { + const key = rawKey || escKey; + const val = get(key); + if (rawKey) + return opts.allowRaw + ? val == null + ? "" + : String(val) + : escapeHtml(val); + return val == null ? "" : escapeHtml(val); + } + ); +} diff --git a/20250916/ppt/js/loader.js b/20250916/ppt/js/loader.js new file mode 100644 index 0000000..97500c4 --- /dev/null +++ b/20250916/ppt/js/loader.js @@ -0,0 +1,201 @@ +// js/loader.js +// 负责：加载 manifest、加载模板 HTML（并注入模板 CSS）、渲染接口、加载 override CSS +// 依赖：./engine.js 导出的 renderTemplate(template, data, opts) + +import { renderTemplate } from "./engine.js"; + +const manifestCache = new Map(); // manifestPath -> manifest object +const templateCache = new Map(); // cacheKey -> { html, meta, baseUrl } + +/** + * Resolve a possibly-relative URL against a base (template HTML path or manifest path). + * Returns an absolute-ish href (as string) that can be used in link[href="..."] matching. + */ +function resolveUrl(href, base) { + try { + // new URL(href, base) will resolve relative href against base + return new URL(href, base).toString(); + } catch (e) { + // fallback: return original + return href; + } +} + +/** + * Load manifest JSON (模板注册表). 支持缓存。 + * manifestPath: string (绝对或相对 URL) + */ +export async function loadManifest(manifestPath = "templates/manifest.json") { + if (manifestCache.has(manifestPath)) return manifestCache.get(manifestPath); + + const res = await fetch(manifestPath); + if (!res.ok) + throw new Error(`无法加载 manifest: ${manifestPath} (${res.status})`); + const manifest = await res.json(); + + // store base for resolving any relative css/html in manifest entries + const base = new URL(location.origin + location.pathname + manifestPath).toString(); + manifestCache.set(manifestPath, { data: manifest, base }); + return manifestCache.get(manifestPath); +} + +/** + * Load template by name using manifest. + * manifestPath: path to manifest (from config) — loader will call loadManifest(manifestPath) + * templateName: key inside manifest (e.g., "speech") + * + * Returns an object: + * { + * html: '...', // body innerHTML of template + * meta: { html: '/templates/speech.html', css: '/templates/speech.css' }, + * baseUrl: 'https://yourhost/templates/' // used to resolve relative hrefs in template + * } + */ +export async function loadTemplateByName(manifestPath, templateName) { + const manifestObj = await loadManifest(manifestPath); + const manifest = manifestObj.data; + const manifestBase = manifestObj.base; + + const meta = manifest[templateName]; + if (!meta) + throw new Error(`模板未注册: ${templateName} (manifest: ${manifestPath})`); + + // determine absolute paths for template html and template css (if provided) + const htmlPath = resolveUrl(meta.html, manifestBase); + const cssPath = meta.css ? resolveUrl(meta.css, manifestBase) : null; + + // cacheKey should include both htmlPath and cssPath + const cacheKey = `${htmlPath}::${cssPath || ""}`; + if (templateCache.has(cacheKey)) return templateCache.get(cacheKey); + + // fetch template HTML + const res = await fetch(htmlPath); + if (!res.ok) + throw new Error(`无法加载模板 HTML: ${htmlPath} (${res.status})`); + const rawHtml = await res.text(); + + // inject manifest-declared css (meta.css) into head if present (and not already injected) + if (cssPath) { + injectCssIfNeeded(cssPath); + } + + // parse template HTML to capture any declared inside template, + // and inject those into head too (resolving relative hrefs against htmlPath) + const parser = new DOMParser(); + const doc = parser.parseFromString(rawHtml, "text/html"); + const linkEls = Array.from(doc.querySelectorAll('link[rel="stylesheet"]')); + + linkEls.forEach((linkEl) => { + const href = linkEl.getAttribute("href"); + if (!href) return; + const resolved = resolveUrl(href, htmlPath); + injectCssIfNeeded(resolved); + }); + + // optionally: you might want to extract and move inline