Tootaio/dinner.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
xiaomai
2025-09-16 23:48:44 +08:00
parent 71b2dcf0a5
commit bcbae992a3
16 changed files with 612 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
20250916/sponsor-list/index.html
View File

@@ -1,47 +1,20 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>赞助人名单</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Sponsor List</title>
<link rel="stylesheet" href="style.css?t=1610" />
</head>
<body class="theme-default">
<body>
<canvas id="background"></canvas>
<div class="container">
<div class="header">
<h1>赞助人名单</h1>
<!-- <p class="subtitle">衷心感谢以下企业及个人的慷慨赞助</p> -->
<!--
<div class="stats">
<div id="totalSponsors"><i class="fas fa-users"></i> 赞助单位: 0</div>
<div id="totalAmount"><i class="fas fa-coins"></i> 总金额: RM 0</div>
<div id="totalSeats"><i class="fas fa-chair"></i> 席位总数: 0</div>
</div>
-->
</div>
<div class="main-content">
<div class="section">
<h2>赞助金额</h2>
<div class="scroll-container">
<div class="scroll-content" id="moneyList"></div>
</div>
</div>
<div class="section">
<h2>席位赞助 (RM2000)</h2>
<div class="scroll-container">
<div class="scroll-content" id="seatList"></div>
</div>
</div>
</div>
<div class="footer">
<p id="footerText">感谢所有赞助商对本次活动的大力支持 | 2023年</p>
</div>
<header>
<h1>柔 佛 永 平 關 聖 宮 聯 誼 會</h1>
<h2>赞助者名单 Sponsor List</h2>
</header>
<div id="sponsorList" class="scrolling-list"></div>
</div>
<script src="script.js"></script>
</body>