📝 Presentation Creation Guide

This guide will help you create HTML presentations that work seamlessly with the Speaker Notes Controller.

1. Basic Structure

Every presentation should follow this basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Presentation Title</title>
    <style>
        /* Your styles here */
    </style>
</head>
<body>
    <!-- Your slides here -->
</body>
</html>

2. Creating Slides

Each slide should be a <section> element with the class workshop-slide:

<section class="workshop-slide slide-hero" id="intro">
    <div class="time-marker">0</div>
    <div class="workshop-content">
        <h1>Your Slide Title</h1>
        <p>Your slide content</p>
    </div>
</section>

Essential Slide Components

Component Purpose Example
class="workshop-slide" Required for slide detection <section class="workshop-slide">
id="slide-name" Unique identifier for navigation id="introduction"
time-marker Timing indicator (now hidden) <div class="time-marker">5</div>
workshop-content Container for slide content <div class="workshop-content">

3. Slide Style Classes

Use these pre-defined classes to style your slides:

Available Style Classes

4. Basic Styling

Add this CSS to your presentation for a professional look:

<style>
    body { 
        margin: 0; 
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
    }
    
    .workshop-slide { 
        min-height: 100vh; 
        padding: 60px; 
        display: flex; 
        flex-direction: column;
        justify-content: center; 
        align-items: center; 
        text-align: center; 
        position: relative; 
    }
    
    .workshop-content { 
        max-width: 1000px; 
        width: 100%; 
    }
    
    .slide-hero { 
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
        color: white; 
    }
    
    .slide-dark { 
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); 
        color: white; 
    }
    
    .slide-light { 
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
        color: #333; 
    }
    
    h1 { 
        font-size: 3em; 
        margin-bottom: 20px; 
    }
    
    h2 { 
        font-size: 2.5em; 
        margin-bottom: 20px; 
    }
    
    p { 
        font-size: 1.2em; 
        line-height: 1.6; 
    }
</style>

5. Complete Example

Here's a complete 3-slide presentation example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Amazing Presentation</title>
    <style>
        body { 
            margin: 0; 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
        }
        
        .workshop-slide { 
            min-height: 100vh; 
            padding: 60px; 
            display: flex; 
            flex-direction: column;
            justify-content: center; 
            align-items: center; 
            text-align: center; 
            position: relative; 
        }
        
        .workshop-content { 
            max-width: 1000px; 
            width: 100%; 
        }
        
        .slide-hero { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            color: white; 
        }
        
        .slide-dark { 
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); 
            color: white; 
        }
        
        .slide-light { 
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
            color: #333; 
        }
        
        h1 { font-size: 3em; margin-bottom: 20px; }
        h2 { font-size: 2.5em; margin-bottom: 20px; }
        p { font-size: 1.2em; line-height: 1.6; }
        
        .btn {
            padding: 15px 30px;
            font-size: 1.1em;
            border: none;
            border-radius: 8px;
            background: #4a9eff;
            color: white;
            text-decoration: none;
            display: inline-block;
            margin-top: 20px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .btn:hover {
            background: #357abd;
        }
    </style>
</head>
<body>
    <!-- Slide 1: Welcome -->
    <section class="workshop-slide slide-hero" id="welcome">
        <div class="time-marker">0</div>
        <div class="workshop-content">
            <h1>Welcome to My Presentation</h1>
            <p>An amazing journey into the world of awesome</p>
            <a href="#main" class="btn">Let's Begin</a>
        </div>
    </section>
    
    <!-- Slide 2: Main Content -->
    <section class="workshop-slide slide-dark" id="main">
        <div class="time-marker">5</div>
        <div class="workshop-content">
            <h2>The Main Point</h2>
            <p>Here's where we dive deep into the subject matter.</p>
            <ul style="text-align: left; max-width: 600px; margin: 20px auto;">
                <li>First important point</li>
                <li>Second crucial insight</li>
                <li>Third key takeaway</li>
            </ul>
        </div>
    </section>
    
    <!-- Slide 3: Conclusion -->
    <section class="workshop-slide slide-light" id="conclusion">
        <div class="time-marker">10</div>
        <div class="workshop-content">
            <h2>Thank You!</h2>
            <p>Questions? Let's discuss!</p>
            <p>Contact: your@email.com</p>
        </div>
    </section>
</body>
</html>

6. Advanced Features

Adding Images

<img src="your-image-url.jpg" 
     alt="Description of image" 
     style="max-width: 80%; height: auto; margin: 20px auto; display: block;">

Creating Columns

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
    <div>
        <h3>Column 1</h3>
        <p>Content for the first column</p>
    </div>
    <div>
        <h3>Column 2</h3>
        <p>Content for the second column</p>
    </div>
</div>

Adding Animations

<style>
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-in {
        animation: fadeIn 1s ease-out;
    }
</style>

<h1 class="animate-in">This will fade in!</h1>
💡 Pro Tips:
⚠️ Important Notes:

7. Resources