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

feat(presentation): add multi-page event presentation with navigation

Browse Source 
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.
This commit is contained in:
xiaomai
2025-10-13 08:00:15 +08:00
parent ea4ccec42d
commit eb4ca98763
12 changed files with 1166 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
20251012/commitee-list/index.html Normal file
View File

@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Canvas 实时抠像（可控面板）</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="../scripts/nav.js"></script>
<style type="text/tailwindcss">
@theme {
/* 🎨 定义自定义字体族变量 */
--font-bai-ge: "BaiGeTianXing", sans-serif;
--font-gu-huang: "ShangShouGuHuang", sans-serif;
--font-tang-ying: "YeZiTangYingHei", sans-serif;
--color-default: #4f46e5;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-danger: #ef4444;
}
@font-face {
font-family: "BaiGeTianXing";
src: url("../fonts/字魂白鸽天行体.ttf") format("truetype");
font-display: swap;
}
@font-face {
font-family: "ShangShouGuHuang";
src: url("../fonts/ShangShouGuHuangTi-2.ttf") format("truetype");
font-display: swap;
}
@font-face {
font-family: "YeZiTangYingHei";
src: url("../fonts/YeZiGongChangTangYingHei-2.ttf") format("truetype");
font-display: swap;
}
canvas#mainCanvas {
image-rendering: optimizeQuality;
}
</style>
</head>
<body
class="min-h-screen flex items-center justify-center bg-black text-white"
>
<div class="stage relative w-full h-screen overflow-hidden">
<canvas id="mainCanvas" class="block w-full h-auto"></canvas>
<!-- 标题 -->
<h1
class="absolute top-4 text-center w-full font-bai-ge text-8xl text-yellow-300"
>
永平赵子龙庙
</h1>
<!-- 副标题描边层 -->
<h2
class="absolute top-28 w-full text-center font-bai-ge text-6xl text-transparent [-webkit-text-stroke:4px_yellow]"
>
庆祝赵子龙元帅暨众神圣诞千秋
</h2>
<!-- 副标题实色层 -->
<h2
class="absolute top-28 text-center w-full font-bai-ge text-6xl text-red-500"
>
庆祝赵子龙元帅暨众神圣诞千秋
</h2>
<!-- 筹委会名单（右侧） -->
<div
id="committeeTable"
class="absolute right-8 top-48 bg-white/20 text-black rounded-3xl shadow-2xl backdrop-blur-xl p-6 font-tang-ying w-[1100px] border border-yellow-400/40"
>
<h3
class="text-6xl text-yellow-400 font-bai-ge mb-6 text-center drop-shadow-[0_0_8px_rgba(255,255,0,0.5)]"
>
筹委会名单
</h3>
<div id="committeeBody" class="grid grid-cols-4 text-4xl leading-relaxed"></div>
<div class="mt-8">
<h4
class="text-4xl text-yellow-300 font-bai-ge mb-3 text-center drop-shadow-[0_0_6px_rgba(255,255,0,0.4)]"
>
工委
</h4>
<div
id="committeeMembers"
class="grid grid-cols-6 gap-x-4 gap-y-2 text-3xl leading-relaxed text-center"
></div>
</div>
</div>
<!-- 来源资源：替换为你自己的文件，若跨域请加 crossorigin="anonymous" 并确保服务器允许 CORS -->
<video
id="video"
class="hidden"
playsinline
muted
loop
autoplay
src="../assets/赵云绿幕.mp4"
></video>
<!-- Controls 面板（可关闭） -->
<div
class="absolute right-2 top-2 w-[320px] bg-white p-2 rounded-md hidden"
id="controlsPanel"
role="region"
aria-label="视频抠像控制面板"
>
<h4>
控制面板
<button class="close-btn" id="closePanel" title="关闭面板">✕</button>
</h4>
<div class="grid grid-cols-2 grid-rows-7">
<label>黑色阈值: <span id="thVal">30</span></label>
<input type="range" id="threshold" min="0" max="120" value="30" />
<label>羽化（softness）: <span id="sfVal">30</span></label>
<input type="range" id="softness" min="0" max="120" value="30" />
<label>左侧偏移 X (px): <span id="marginVal">40</span></label>
<input type="range" id="leftMargin" min="0" max="800" value="40" />
<label>顶部偏移 Y (px): <span id="topVal">0</span></label>
<input type="range" id="topOffset" min="-400" max="400" value="0" />
<label>缩放（%）: <span id="scaleVal">90</span></label>
<input type="range" id="scale" min="20" max="200" value="90" />
<label>旋转（deg）: <span id="rotVal">0</span></label>
<input type="range" id="rotation" min="-45" max="45" value="0" />
<label>不透明度: <span id="opaVal">100</span>%</label>
<input type="range" id="opacity" min="0" max="100" value="100" />
</div>
<div style="display: flex; gap: 6px; margin-top: 8px">
<button
id="resetBtn"
class="flex-1 bg-danger rounded-md cursor-pointer"
>
重置 (R)
</button>
<button
id="applyHint"
class="flex-1 bg-warning rounded-md cursor-pointer"
>
帮助
</button>
</div>
</div>
<!-- 当面板关闭时显示的打开按钮 -->
<button id="openBtn" class="open-controls" style="display: none">
打开控制面板
</button>
</div>
<script src="commitee.js"></script>
<script src="background.js"></script>
</body>
</html>