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

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.
2025-10-13 08:00:15 +08:00
parent ea4ccec42d
commit eb4ca98763
12 changed files with 1166 additions and 50 deletions
--- a/20251012/index.html
+++ b/20251012/index.html
@@ -0,0 +1,124 @@
+<!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>