html-slide-presenter

HTML Slide Presenter 📽️

html-slide-presenter 可生成专业级视觉演示文稿幻灯片，可直接在浏览器中运行，无需安装专有演示应用。

---

🌟 演示文稿主要功能

1. 精准的 16:9 显示比例：
   • 专为投影仪、Smart TV、教室显示器或交互式平板（IFP）设计，比例适宜。
2. 100% 独立的单文件（自包含且可离线使用）：
   • 所有 CSS 样式和 JS 交互功能都直接嵌入单个 index.html 文件中。无需本地服务或外部互联网连接。
3. 高对比度与清晰的字体排版（默认浅色主题）：
   • 在干净的白色／灰白色（#ffffff / #f8fafc）背景上使用清晰的文字颜色（Slate #0f172a 和 #1e293b），确保即使在明亮环境下，坐在教室后排也能清楚阅读。
4. 键盘与触控导航：
   • 右箭头 / Space / 点击：下一张幻灯片。
   • 左箭头 / Backspace：上一张幻灯片。
   • 按键 F：切换全屏。
   • 底部显示幻灯片编号和进度条。
5. 内置交互式 QR Code（促进学生参与）：
   • 在测验幻灯片或最后一张幻灯片中，系统会自动生成基于本地 SVG／Canvas 的 QR Code，学生可用智能手机扫描，以打开交互式测验或作业材料。
6. 即时导出为 PDF（@media print）：
   • 提供“打印为 PDF”按钮（或直接按 Ctrl+P）。CSS 打印规则会强制分页（page-break-after: always）并将边距设为零，因此每张幻灯片都会成为 PDF 中恰好一页的高清横向页面。

---

📐 HTML 幻灯片代码结构模板

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sesi 01: Pengantar Materi</title>
  <style>
    @page { size: 16in 9in; margin: 0; }
    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f1f5f9; color: #0f172a; }
    .slide-deck { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
    .slide { width: 1280px; height: 720px; aspect-ratio: 16/9; background: #ffffff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 50px 70px; box-sizing: border-box; display: none; flex-direction: column; justify-content: space-between; }
    .slide.active { display: flex; }
    h1 { font-size: 2.8rem; color: #0f172a; margin-bottom: 0.5rem; }
    p { font-size: 1.35rem; color: #334155; line-height: 1.6; }
    @media print {
      body { background: white; }
      .slide-deck { display: block; }
      .slide { display: flex !important; width: 100vw; height: 100vh; page-break-after: always; box-shadow: none; border-radius: 0; }
    }
  </style>
</head>
<body>
  
</body>
</html>