「WebSlide Pro 簡報播放器」是阿凱老師早期用 Gemini 寫程式 + 嵌進 Google Sites 的隱藏自製神器 — 800+ 行 JS/CSS/HTML 單檔 web app，整份程式碼活在 Google Sites 後台的 data-code 屬性內（GitHub 上找不到），由 Google sandbox iframe 執行。
🎯 核心特色
- 📦 雙格式輸入 — 上傳
.zip（內含 HTML 簡報）或.pdf，PDF.js 3.11.174 自動把每頁 render 成圖片包進 iframe - 🎬 17 種電影級 3D 轉場動畫 — fade / slide（4 向）/ zoom / flip / cube / blurZoom / spin⋯ 程式碼 line 211-260 全列出 keyframes，特效開關 toggle（btn-fx）一鍵切純翻頁 vs 動畫
- 🎞️ 雙 iframe
frame-a/frame-b無閃爍翻頁 — 輪流預載 +sandbox="allow-scripts allow-same-origin"安全限制 → 翻頁如電影般滑順 - 👆 左右 1/6 寬點擊翻頁區 — 演講時手點螢幕邊緣換頁，不用簡報筆
- 🖥️ 全螢幕模式 +
.fake-fullscreenCSS fallback — 不依賴瀏覽器 fullscreen API（避開相容性坑） - 📤 jsPDF 2.5.1 匯出 PDF — 演講後留檔給觀課老師
- 📊 進度 modal + 頁碼 HUD — 處理 PDF / ZIP 顯示百分比 + spinner
💡 設計理念
純前端單檔 HTML web app 完全自寫程式碼（不是 Glide / Bolt / Lovable / EZPage 等 no-code 平台產物）：Tailwind CSS（CDN）+ JSZip 3.10.1 + jsPDF 2.5.1 + PDF.js 3.11.174 + Lucide Icons + Noto Sans TC。部署方式特殊：不在 GitHub，而是嵌在 sites.google.com/mail2.smes.tyc.edu.tw/swissknife/webslide-簡報播放器 內 — 阿凱說「這也是我自製的，只是當時還不熟 GitHub 所以建在其他平台」。用 PPT 跨機器 50% 出包（字型跑掉 / 影片不能播 / 動畫亂跳 / 超連結失效），用 #76 是 0% 出包。
🎒 適合情境
- 要上公開課 / 教甄面試 / 校外研習的老師（完全沒帶 USB 也能播）
- 行政人員（校務會議、研習報告）
- 補習班 / 安親班教師
- 想做出「老派 PPT 沒有的互動」的演講者
配對 #81 國小資訊科技教學駕駛艙 入口網把所有簡報集中、#11 剛好學課堂互動 簡報中插入即時投票、#27 swissknife 許願池 看阿凱完整 13 個 Google Sites Embedded 工具集。把上週做的 PPT 丟進去 → 5 分鐘變網頁版 → 再也不怕字跑掉。