presentation-repo/
├── index.html                    # Auto-generated index page (DO NOT EDIT)
├── .nojekyll                     # GitHub Pages config
├── package.json                  # Project configuration
├── package-lock.json             # Dependencies lock file
├── presentations/                # All presentations directory
│   ├── my-first-presentation/    # Individual presentation folder
│   │   ├── index.html           # Presentation HTML file
│   │   ├── metadata.json        # Presentation metadata
│   │   └── thumbnail.png        # Presentation thumbnail (800x600)
│   └── another-presentation/
│       ├── index.html
│       ├── metadata.json
│       └── thumbnail.png
├── templates/                    # Template files
│   ├── presentation-template.html   # Presentation template
│   ├── metadata-template.json       # Metadata template
│   └── index-template.html          # Index page template
├── scripts/                      # Build scripts
│   └── generate-index.js        # Index generation script
├── assets/                       # Shared resources
│   └── css/
│       └── custom.css           # Custom global styles
└── README.md                     # Repository documentation

{
  "id": "my-presentation",              // Unique identifier
  "title": "My Awesome Presentation",   // Display title
  "description": "A brief description", // Short description
  "author": "Author Name",              // Author name
  "date": "2026-02-10",                // Date (YYYY-MM-DD)
  "tags": ["tech", "tutorial"],        // Tags array
  "thumbnail": "thumbnail.png",         // Thumbnail filename
  "slides": 15,                         // Number of slides
  "language": "zh-CN",                  // Language code
  "category": "Tutorial"                // Category
}

您需要创建什么类型的演示文稿项目？

1. **单个演示文稿** - 创建一个独立的HTML文件
   - 适合：快速分享、一次性演讲、嵌入文档
   
2. **演示文稿仓库** - 创建一个完整的演示文稿管理系统
   - 适合：多个演示文稿、团队库、GitHub Pages发布、演示文稿作品集

请选择：[1] 单个演示文稿  [2] 演示文稿仓库

让我为您创建一个精彩的演示文稿！首先，我需要了解一些信息：

📌 **内容方面：**
1. 演示文稿的主题是什么？
2. 目标受众是谁？（客户、团队、学生、投资人？）
3. 核心信息是什么？（3-5个主要观点）
4. 预计需要多少张幻灯片？（快速演讲5-10张 / 标准演示15-25张 / 长篇讲座30+张）

🎨 **视觉风格：**
5. 您偏好什么视觉风格？
   - □ 专业商务（深色、简约）
   - □ 创意活泼（彩色、动感）
   - □ 极简主义（留白、聚焦）
   - □ 技术感（代码、图表）
   
6. 是否有品牌颜色要求？（如果有，请提供色值）

✨ **动画效果：**
7. 您需要什么程度的动画效果？
   - □ 基础（简单淡入淡出）
   - □ 中等（逐步显示要点）
   - □ 高级（元素变换、数据可视化动画）

🎤 **特殊功能：**
8. 是否需要以下功能？
   - □ 演讲者备注（用于演讲提示）
   - □ 代码高亮显示
   - □ 数学公式支持
   - □ 垂直嵌套幻灯片（章节内子主题）

根据您的需求，我建议以下结构：

📋 **建议的幻灯片结构：**

1. 标题页 - [主题]
2. 议程 - 本次演示的内容概览
3. 【第一部分】章节分隔符 - [第一个主要话题]
   ├─ 4. [子主题1]
   ├─ 5. [子主题2]
   └─ 6. [子主题3]
4. 【第二部分】章节分隔符 - [第二个主要话题]
   ├─ 7. [子主题1]
   └─ 8. [子主题2]
5. 总结 - 核心要点回顾
6. 结束页 - 致谢与问答

这个结构符合您的需求吗？是否需要调整？

现在让我们确定动画和交互细节：

🎭 **动画配置：**
1. 幻灯片切换效果偏好？
   - slide（滑动，默认）
   - fade（淡入淡出）
   - zoom（缩放）
   - convex（凸出）
   - concave（凹陷）

2. 要点列表是否需要逐条显示？（推荐）
   ☐ 是，要点逐条淡入
   ☐ 否，一次全部显示

3. 是否需要特殊动画？
   ☐ 元素自动变换（数字变化、图形变形）
   ☐ 高亮强调（当前要点高亮）
   ☐ 代码逐行显示

📝 **演讲者功能：**
4. 每张幻灯片是否需要演讲者备注？
   ☐ 是，我会提供每页的讲解提示
   ☐ 否，仅幻灯片内容

选择您需要的选项，我将据此创建演示文稿。

templates/viewer-reveal.html

<div class="reveal">
    <div class="slides">
        <!-- Each <section> is a slide -->
        <section class="slide-title">
            <h1>Title</h1>
        </section>
        
        <section class="slide-content">
            <h2>Content</h2>
            <ul>
                <li class="fragment">Point 1</li>
                <li class="fragment">Point 2</li>
            </ul>
            
            <!-- Speaker notes -->
            <aside class="notes">
                This is what you'll say...
            </aside>
        </section>
        
        <!-- Nested slides (vertical navigation) -->
        <section>
            <section><h2>Main Topic</h2></section>
            <section><h3>Subtopic 1</h3></section>
            <section><h3>Subtopic 2</h3></section>
        </section>
    </div>
</div>

<ul>
    <li class="fragment">Appears first</li>
    <li class="fragment">Appears second</li>
    <li class="fragment fade-in">Fades in</li>
    <li class="fragment fade-up">Slides up</li>
    <li class="fragment highlight-red">Highlights in red</li>
</ul>

const PRESENTATION_CONFIG = {
    // Basic info
    title: "Your Presentation Title",
    author: "Your Name",
    date: "2026年2月3日",
    
    // Theme colors
    theme: {
        primary: "#2E86AB",      // Main color
        secondary: "#A23B72",    // Secondary color
        accent: "#F18F01",       // Accent color
        background: "#0a0a0a",   // Background
        text: "#ffffff",         // Text color
        textMuted: "#cccccc"     // Muted text
    },
    
    // Reveal.js options
    revealOptions: {
        transition: 'slide',      // slide/fade/zoom/convex/concave
        controls: true,           // Show arrow controls
        progress: true,           // Show progress bar
        center: true,             // Vertical centering
        slideNumber: 'c/t',       // Show slide numbers
        hash: true,               // URL routing
        
        // Animation speed
        transitionSpeed: 'default', // default/fast/slow
        
        // Auto-advance (0 = disabled)
        autoSlide: 0,
        
        // Plugins (always included)
        plugins: [
            RevealMarkdown,
            RevealHighlight,
            RevealNotes,
            RevealZoom,
            RevealSearch,
            RevealMath.KaTeX
        ]
    }
};

<section>
    <h2>Slide Title</h2>
    <p>Public content...</p>
    
    <aside class="notes">
        Remember to emphasize this point.
        Mention the case study here.
        Time: 2 minutes on this slide.
    </aside>
</section>

<section>
    <h2>Code Example</h2>
    <pre><code class="language-javascript" data-trim data-line-numbers="1-2|4-6">
function hello(name) {
    console.log(`Hello, ${name}!`);
}

// Usage
hello('World');
    </code></pre>
</section>

<section>
    <h2>Mathematical Formula</h2>
    <p>The quadratic formula:</p>
    <p>$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$</p>
</section>

<section data-auto-animate>
    <h2 style="margin-top: 100px;">Animate</h2>
</section>
<section data-auto-animate>
    <h2 style="margin-top: 400px; color: red;">Animate</h2>
</section>

<section data-background-color="#ff0000">
    <h2>Red Background</h2>
</section>

<section data-background-image="url.jpg">
    <h2>Image Background</h2>
</section>

<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
    <h2>Gradient Background</h2>
</section>

🎯 打开方式：在任何现代浏览器中打开此 HTML 文件

⌨️ 快捷键：
  → / Space    下一张幻灯片
  ←            上一张幻灯片
  ↓            向下进入子幻灯片（如果有）
  ↑            向上返回
  ESC          概览模式（查看所有幻灯片）
  S            演讲者视图（包含备注和计时器）
  F            全屏模式
  ?            显示所有快捷键
  Ctrl+Shift+F 搜索
  Alt+Click    放大区域

📱 移动端：左右滑动切换幻灯片

🎤 演讲提示：
  - 按 S 打开演讲者视图，可以看到备注、下一张预览和计时器
  - 建议使用双屏，一个屏幕给观众，一个屏幕给自己（演讲者视图）

如需修改内容，在 HTML 文件中找到 <div class="slides"> 部分，
编辑对应的 <section> 标签即可。

让我为您创建一个演示文稿管理仓库！首先：

📁 **仓库基本信息：**
1. 仓库名称是什么？（例如：my-presentations, tech-talks, company-slides）
2. 仓库放在哪个目录？（默认：当前工作目录）
3. 是否要立即创建示例演示文稿？（推荐：是）

📋 **初始内容：**
4. 如果创建示例，主题是什么？
5. 您的GitHub用户名是什么？（用于GitHub Pages配置）

mkdir -p {repo-name}/{presentations,templates,scripts,assets/css}

cd {repo-name}
npm install
npm run build

📚 仓库已创建！现在设置GitHub Pages：

**1. 初始化Git并推送到GitHub：**
```bash
cd {repo-name}
git init
git add .
git commit -m "Initial commit: Presentation repository"
git remote add origin https://github.com/{username}/{repo-name}.git
git push -u origin main

# 创建新演示文稿目录
mkdir presentations/my-new-talk

# 复制模板
cp templates/presentation-template.html presentations/my-new-talk/index.html
cp templates/metadata-template.json presentations/my-new-talk/metadata.json

# 编辑内容和元数据
# 然后重新生成索引并部署
npm run deploy

npm run dev

### Step 6: Optional - Create GitHub Action for Auto-Deploy

**Ask user:**

If yes, create `.github/workflows/deploy.yml`:

```yaml
name: Generate Index and Deploy

on:
  push:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm install
      
      - name: Generate index
        run: npm run build
      
      - name: Commit and push if changed
        run: |
          git config --global user.name 'GitHub Action'
          git config --global user.email 'action@github.com'
          git add index.html
          git diff --quiet && git diff --staged --quiet || (git commit -m "Auto-generate index [skip ci]" && git push)

<section class="slide-title" data-transition="zoom">
    <h1>Main Title</h1>
    <p class="subtitle">Subtitle or description</p>
    <p class="author">Author Name | Date</p>
</section>

<section class="slide-title" data-transition="zoom">
    <h1 class="fragment">Main Title</h1>
    <p class="subtitle fragment">Subtitle appears second</p>
    <p class="author fragment">Author appears last</p>
</section>

<section class="slide-content">
    <h2>Slide Title</h2>
    <p>Introduction paragraph...</p>
    <ul>
        <li class="fragment">Point one appears first</li>
        <li class="fragment">Point two appears second</li>
        <li class="fragment">Point three appears last</li>
    </ul>
    
    <aside class="notes">
        Speaker notes: Emphasize point two.
    </aside>
</section>

<section class="slide-content">
    <h2>Code Example</h2>
    <pre><code class="language-python" data-trim data-line-numbers="1-3|5-7">
def calculate_total(items):
    total = sum(item.price for item in items)
    return total

# Usage example
items = [Item(10), Item(20)]
result = calculate_total(items)
    </code></pre>
</section>

<section>
    <h2>Comparison</h2>
    <div class="two-column">
        <div class="fragment">
            <h3>Before</h3>
            <ul>
                <li>Slow performance</li>
                <li>Complex setup</li>
                <li>Limited features</li>
            </ul>
        </div>
        <div class="fragment">
            <h3>After</h3>
            <ul>
                <li>2x faster ✨</li>
                <li>One-click setup</li>
                <li>Full-featured</li>
            </ul>
        </div>
    </div>
</section>

<section>
    <div class="image-text">
        <div>
            <h2>Feature Name</h2>
            <p>Description of the feature...</p>
            <ul>
                <li class="fragment">Benefit one</li>
                <li class="fragment">Benefit two</li>
                <li class="fragment">Benefit three</li>
            </ul>
        </div>
        <div class="fragment">
            <img src="https://via.placeholder.com/600x400" alt="Feature screenshot">
        </div>
    </div>
</section>

<section data-auto-animate>
    <div class="image-text">
        <div><h2>Initial State</h2></div>
        <img src="before.png" data-id="product">
    </div>
</section>
<section data-auto-animate>
    <div class="image-text">
        <div><h2>After Transformation</h2></div>
        <img src="after.png" data-id="product">
    </div>
</section>

<section class="slide-quote" data-background-gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
    <blockquote class="fragment">
        An impactful quote that emphasizes a key message
        and inspires the audience.
    </blockquote>
    <cite class="fragment">— Author Name, Title</cite>
</section>

<section class="slide-section" data-background-gradient="linear-gradient(135deg, #A23B72 0%, #F18F01 100%)">
    <h2 class="fragment">Part Two</h2>
</section>

<!-- Main topic (horizontal) -->
<section>
    <section>
        <h2>Main Topic</h2>
        <p>Press ↓ to dive deeper</p>
    </section>
    
    <!-- Subtopic 1 (vertical) -->
    <section>
        <h3>Subtopic 1</h3>
        <p>Detailed explanation...</p>
    </section>
    
    <!-- Subtopic 2 (vertical) -->
    <section>
        <h3>Subtopic 2</h3>
        <p>More details...</p>
    </section>
</section>

<!-- Next main topic (horizontal) -->
<section>
    <h2>Next Topic</h2>
</section>

<ul>
    <li class="fragment">Fade in (default)</li>
    <li class="fragment fade-in">Also fades in</li>
    <li class="fragment fade-out">Fades out</li>
    <li class="fragment fade-up">Slides in from bottom</li>
    <li class="fragment fade-down">Slides in from top</li>
    <li class="fragment fade-left">Slides in from right</li>
    <li class="fragment fade-right">Slides in from left</li>
</ul>

<ul>
    <li class="fragment grow">Grow larger</li>
    <li class="fragment shrink">Shrink smaller</li>
    <li class="fragment strike">Strike through</li>
    <li class="fragment highlight-red">Highlight in red</li>
    <li class="fragment highlight-blue">Highlight in blue</li>
    <li class="fragment highlight-green">Highlight in green</li>
    <li class="fragment highlight-current-red">Highlight current</li>
</ul>

<p class="fragment" data-fragment-index="3">Appears third</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>

<span class="fragment fade-in">
    <span class="fragment highlight-red">
        <span class="fragment fade-out">
            Text fades in, highlights red, then fades out
        </span>
    </span>
</span>

<section data-auto-animate>
    <h2>Auto-Animate</h2>
</section>
<section data-auto-animate>
    <h2 style="margin-top: 100px; color: red;">Auto-Animate</h2>
</section>

<section data-auto-animate>
    <div data-id="box" style="height: 50px; background: red;"></div>
</section>
<section data-auto-animate>
    <div data-id="box" style="height: 200px; background: blue;"></div>
</section>

<section data-auto-animate>
    <pre><code data-trim data-line-numbers>
let x = 10;
    </code></pre>
</section>
<section data-auto-animate>
    <pre><code data-trim data-line-numbers>
let x = 10;
let y = 20;
let sum = x + y;
    </code></pre>
</section>

<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<section data-auto-animate data-auto-animate-duration="2.0">

<section>
    <h2>Slide Title</h2>
    <p>Public content...</p>
    
    <aside class="notes">
        These notes are only visible in speaker view.
        - Remember to mention the case study
        - Emphasize the 2x performance improvement
        - Allow 2 minutes for this slide
    </aside>
</section>

<aside class="notes">
    <h4>Key Points:</h4>
    <ul>
        <li>Point one</li>
        <li>Point two</li>
    </ul>
    
    <p><strong>Time:</strong> 3 minutes</p>
</aside>

<section data-transition="zoom">
    <h2>This slide zooms in</h2>
</section>

<section data-transition="fade">
    <h2>This slide fades</h2>
</section>

<section data-transition="slide-in fade-out">
    <h2>Slides in, fades out</h2>
</section>

<section data-transition-speed="fast">
    <h2>Quick transition</h2>
</section>
<!-- Options: default, fast, slow -->

<section data-background-color="#ff0000">
    <h2>Red background</h2>
</section>

<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
    <h2>Gradient background</h2>
</section>

<section data-background-image="url.jpg">
    <h2>Image background</h2>
</section>

<section data-background-image="url.jpg" data-background-size="cover">
<section data-background-image="url.jpg" data-background-opacity="0.3">

<section data-background-video="video.mp4" data-background-video-loop data-background-video-muted>
    <h2>Video background</h2>
</section>

<section data-background-iframe="https://example.com" data-background-interactive>
    <h2>Interactive webpage background</h2>
</section>

<pre><code class="language-javascript">
function hello(name) {
    console.log(`Hello, ${name}!`);
}
</code></pre>

<pre><code class="language-python" data-line-numbers>
def calculate(x, y):
    result = x + y
    return result
</code></pre>

<pre><code class="language-java" data-line-numbers="1-2|4-6|8">
public class Hello {
    private String name;
    
    public Hello(String name) {
        this.name = name;
    }
    
    public void greet() {
        System.out.println("Hello, " + name);
    }
}
</code></pre>

<pre><code data-line-numbers="10-15">
// Code starting at line 10
</code></pre>

<p>The formula $E = mc^2$ shows energy-mass equivalence.</p>

<p>$$\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$</p>

<section>
    <h2>Quadratic Formula</h2>
    <p>
    $$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$
    </p>
    
    <aside class="notes">
        Explain each component of the formula.
    </aside>
</section>

<p>
$$
\begin{aligned}
a &= b + c \\
&= d + e + f
\end{aligned}
$$
</p>

<section data-markdown="slides.md" data-separator="^\n---\n$" data-separator-vertical="^\n--\n$"></section>

<section data-markdown>
    <textarea data-template>
        ## Slide Title
        
        - Bullet point one
        - Bullet point two
        
        **Bold text** and *italic text*
        
        ```javascript
        const code = "highlighted";
        ```
    </textarea>
</section>

<section data-markdown>
    <textarea data-template>
        ## Progressive Reveal
        
        - Item 1 <!-- .element: class="fragment" -->
        - Item 2 <!-- .element: class="fragment" -->
        - Item 3 <!-- .element: class="fragment" -->
    </textarea>
</section>

// Access Reveal instance
const reveal = window.PresentationAPI.reveal;

// Navigate programmatically
reveal.slide(3);          // Go to slide 3
reveal.slide(2, 1);       // Go to slide 2, vertical slide 1
reveal.next();            // Next slide
reveal.prev();            // Previous slide
reveal.left();            // Navigate left
reveal.right();           // Navigate right
reveal.down();            // Navigate down (nested)
reveal.up();              // Navigate up (nested)

// Get current state
const state = reveal.getState();
console.log(state);  // {indexh: 2, indexv: 0, indexf: 1}

// Get total slides
const total = reveal.getTotalSlides();

// Get current slide element
const currentSlide = reveal.getCurrentSlide();

// Check if at first/last
reveal.isFirstSlide();
reveal.isLastSlide();

// Toggle overview mode
reveal.toggleOverview();

// Toggle pause
reveal.togglePause();

// Toggle help overlay
reveal.toggleHelp();

// Toggle auto-slide
reveal.toggleAutoSlide();

// Slide changed event
reveal.on('slidechanged', event => {
    console.log('Now on slide:', event.indexh);
    // Send analytics
    // Update external UI
    // Trigger custom logic
});

// Fragment shown/hidden
reveal.on('fragmentshown', event => {
    console.log('Fragment shown:', event.fragment);
});

reveal.on('fragmenthidden', event => {
    console.log('Fragment hidden:', event.fragment);
});

// Ready event
reveal.on('ready', event => {
    console.log('Presentation ready');
});

// Overview toggled
reveal.on('overviewshown', () => {
    console.log('Overview mode activated');
});

reveal.on('overviewhidden', () => {
    console.log('Overview mode deactivated');
});

// Send slide changes to server
reveal.on('slidechanged', async event => {
    await fetch('/api/analytics', {
        method: 'POST',
        body: JSON.stringify({
            slide: event.indexh,
            timestamp: Date.now()
        })
    });
});

// Multi-screen synchronization
reveal.on('slidechanged', event => {
    // Broadcast to other windows
    localStorage.setItem('currentSlide', JSON.stringify(event));
});

window.addEventListener('storage', e => {
    if (e.key === 'currentSlide') {
        const {indexh, indexv} = JSON.parse(e.newValue);
        reveal.slide(indexh, indexv);
    }
});

// Load slide content dynamically
reveal.on('slidechanged', async event => {
    const slideId = event.currentSlide.getAttribute('data-slide-id');
    if (slideId) {
        const data = await fetch(`/api/slides/${slideId}`).then(r => r.json());
        event.currentSlide.innerHTML = data.content;
    }
});

// Change theme colors dynamically
function changeTheme(themeName) {
    const themes = {
        blue: { primary: '#2E86AB', secondary: '#A23B72', accent: '#F18F01' },
        green: { primary: '#2d6a4f', secondary: '#52b788', accent: '#d8f3dc' },
        red: { primary: '#9d0208', secondary: '#dc2f02', accent: '#f48c06' }
    };
    
    const theme = themes[themeName];
    Object.entries(theme).forEach(([key, value]) => {
        const cssVar = `--color-${key}`;
        document.documentElement.style.setProperty(cssVar, value);
    });
}

// Usage: changeTheme('green')

/* Custom slide variant */
.slide-highlight {
    background: linear-gradient(135deg, #fff5f5, #ffffff);
    border-left: 8px solid var(--color-accent);
    padding-left: 3em !important;
}

/* Custom animation */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.pulse-on-show.fragment.visible {
    animation: pulse 0.5s ease-in-out;
}

/* Responsive grid layout */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2em;
}

<!-- In <head> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>

<!-- In slide -->
<section>
    <h2>Sales Data</h2>
    <canvas id="salesChart" width="800" height="400"></canvas>
    <script>
        Reveal.on('slidechanged', event => {
            if (event.currentSlide.querySelector('#salesChart')) {
                new Chart(document.getElementById('salesChart'), {
                    type: 'line',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr'],
                        datasets: [{
                            label: 'Sales',
                            data: [12, 19, 3, 5],
                            borderColor: '#2E86AB',
                            tension: 0.1
                        }]
                    }
                });
            }
        });
    </script>
</section>

<!-- In <head> -->
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

<!-- In slide -->
<section>
    <h2>Architecture</h2>
    <div class="mermaid">
    graph TD
        A[Client] --> B[Load Balancer]
        B --> C[Server 1]
        B --> D[Server 2]
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>

<section>
    <h2>3D Model</h2>
    <div id="three-container" style="width: 800px; height: 600px;"></div>
    <script>
        // Initialize Three.js scene when slide is shown
        Reveal.on('slidechanged', event => {
            if (event.currentSlide.querySelector('#three-container')) {
                // Three.js setup code...
            }
        });
    </script>
</section>

1. 🎬 Title - Product name + tagline [TITLE, zoom transition]
2. 📋 Agenda - What we'll cover [CONTENT, fragments]
3. 🔴 Section - "The Problem" [SECTION, red background]
4. 😰 Pain Points - Current challenges [CONTENT, fragment list]
5. 💡 Solution Overview - How product solves it [CONTENT]
6. 🟢 Section - "Key Features" [SECTION, green background]
7-10. 📱 Feature Deep Dives [IMAGE-TEXT, one per slide, auto-animate]
    ├─ 7. Performance (fragment metrics)
    ├─ 8. Security (diagram)
    ├─ 9. UX (before/after comparison)
    └─ 10. Integration (code example)
11. 💰 Pricing - Tiers and packages [TWO-COLUMN]
12. 💬 Testimonial [QUOTE, gradient background]
13. 📞 Call to Action [TITLE, zoom transition]
14. 🙏 Thank You + Q&A [TITLE]

1. Title + Speaker Bio [TITLE]
2. Agenda [CONTENT, fragment]
3. Section - "Background" [SECTION]
4-6. Context (nested slides)
    <section>
        4. Main concept [CONTENT]
        5. Why it matters [CONTENT]
        6. Current approaches [TWO-COLUMN]
    </section>
7. Section - "Deep Dive" [SECTION]
8-15. Technical Details
    8. Architecture diagram [IMAGE-TEXT]
    9-11. Code examples (auto-animate)
    12. Performance metrics [CONTENT, fragments]
    13-14. Comparison (before/after)
    15. Demo transition [TITLE, fade]
16. Section - "Results" [SECTION]
17-19. Outcomes
    17. Benchmark data [CONTENT, chart.js]
    18. Real-world impact [QUOTE]
    19. Lessons learned [CONTENT]
20. Future Work [CONTENT, fragments]
21. Resources + Links [CONTENT]
22. Q&A [TITLE]

1. Lesson Title [TITLE]
2. Learning Objectives [CONTENT, fragment]
3. Section - "Introduction" [SECTION]
4-7. Background (vertical nested)
8. Section - "Core Concepts" [SECTION]
9-20. Main Content
    - One concept per slide
    - Use fragments for progressive reveal
    - Mix layouts: content, two-column, image-text
    - Add speaker notes for teaching points
21. Section - "Practice" [SECTION]
22-25. Examples and Exercises
    - Code examples with line highlighting
    - Interactive elements
    - Step-by-step walkthroughs
26. Summary [CONTENT, fragments]
27. Additional Resources [CONTENT]
28. Questions [TITLE]

// OLD (viewer.html)
const SLIDES = [
    {
        layout: "title",
        content: `<h1>Title</h1>`
    }
];

// NEW (viewer-reveal.html)
<section class="slide-title">
    <h1>Title</h1>
</section>

// OLD
const PRESENTATION = {
    title: "...",
    theme: { primary: "#...", ... }
};

// NEW
const PRESENTATION_CONFIG = {
    title: "...",
    theme: { primary: "#...", ... },
    revealOptions: { ... }
};