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.
125 lines
3.6 KiB
HTML
125 lines
3.6 KiB
HTML
<!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;
|
|
}
|
|
|
|
/* ✨ 按钮样式 */
|
|
.nav-button {
|
|
@apply px-12 py-6 rounded-2xl text-4xl font-bai-ge transition-all duration-300 shadow-lg;
|
|
background: linear-gradient(to right, #f59e0b, #facc15);
|
|
color: black;
|
|
}
|
|
.nav-button:hover {
|
|
@apply scale-105 shadow-2xl;
|
|
background: linear-gradient(to right, #fde68a, #fbbf24);
|
|
}
|
|
</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>
|
|
|
|
<img
|
|
src="assets/background.png"
|
|
alt="Background"
|
|
class="absolute top-0 left-0 w-full h-full object-cover"
|
|
/>
|
|
|
|
<!-- 标题 -->
|
|
<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
|
|
class="absolute inset-0 flex flex-col items-center justify-center gap-16"
|
|
>
|
|
<button class="nav-button" onclick="goFullscreenAndRedirect('./main/')">
|
|
🏮 封面图展示
|
|
</button>
|
|
|
|
<button
|
|
class="nav-button"
|
|
onclick="goFullscreenAndRedirect('./commitee-list/')"
|
|
>
|
|
👥 筹委会名单
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 🌕 点击按钮 → 请求全屏 → 跳转
|
|
function goFullscreenAndRedirect(url) {
|
|
const docEl = document.documentElement;
|
|
if (docEl.requestFullscreen) {
|
|
docEl.requestFullscreen();
|
|
} else if (docEl.webkitRequestFullscreen) {
|
|
docEl.webkitRequestFullscreen();
|
|
} else if (docEl.msRequestFullscreen) {
|
|
docEl.msRequestFullscreen();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
window.location.href = url;
|
|
}, 500);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|