aibot88 Presentation Master — Workflow Guide
Quick Reference
Input: Topic + Author names
Output: 2 HTML files (slides + speech notes)
Style: Study examples/ folder for quality reference
Language: Match user's language
Essential Requirements
1. Layout Rules
/* CRITICAL: No scrolling on slides */
.slide {
overflow: hidden;
padding: 40px 60px 80px 60px; /* bottom padding for nav */
}
Why 80px bottom padding? Navigation buttons sit at bottom — content must not overlap them.
2. Navigation Pattern
┌─────────────────────────────────────┐
│ │
│ SLIDE CONTENT │
│ │
│ │
├─────────────────────────────────────┤
│ [1/15] [◄] [►] │ ← Nav area (~60px)
└─────────────────────────────────────┘
↑ Counter ↑ Buttons
bottom-left bottom-right
Key: Counter on left, buttons on right. Both fixed position, ~24-30px from edges.
3. Content Density
Since slides can't scroll, content must be compact:
| Element | Recommended Size |
|---|---|
| h1 (title) | 2.5-3.5rem |
| h2 (slide heading) | 1.75-2rem |
| h3 (card heading) | 1-1.2rem |
| Body text | 0.85-0.95rem |
| Card padding | 1-1.5rem |
| Grid gaps | 0.75-1.25rem |
Tip: Use grids (2-4 columns) to fit more content horizontally.
Slide Structure
Recommended: 14-22 slides
Slide 1: Title (topic + authors)
Slide 2: Overview/Agenda
Slides 3-N: Content (mix of types)
Slide N-1: Summary/Key Takeaways
Slide N: Thank You
Slide Types to Mix
| Type | Use For | Layout |
|---|---|---|
| Title | Opening, section dividers | Centered, gradient bg |
| Content | Main ideas | Heading + bullets/cards |
| Grid | Multiple concepts | 2-4 column card grid |
| Comparison | Pros/cons, before/after | 2-column layout |
| Stats | Key numbers | Large numbers + labels |
| Quote | Expert opinion | Blockquote style |
| Timeline | History, process | Vertical/horizontal steps |
Visual Design
Default Style
Study examples/ — they show the quality bar:
- Dark backgrounds with colored accents
- Glass/gradient cards with subtle borders
- Smooth animations (fade, slide)
- Icon usage for visual interest
Key Visual Elements
Every content slide should include:
- Cards or containers (not bare lists)
- Color accents or icons
- Clear visual hierarchy
- Adequate spacing
Animation Classes
.animate-in {
opacity: 0;
transform: translateY(20px);
}
.slide.active .animate-in {
animation: fadeUp 0.5s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
Technical Implementation
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Topic}</title>
<style>
/* All CSS inline */
</style>
</head>
<body>
<!-- Background effects (optional) -->
<div class="bg-effects">...</div>
<!-- Progress bar -->
<div class="progress-bar" id="progress"></div>
<!-- Slides -->
<div class="slides-container">
<div class="slide active" data-slide="1">...</div>
<div class="slide" data-slide="2">...</div>
<!-- ... more slides ... -->
</div>
<!-- Navigation: counter left, buttons right -->
<div class="slide-counter">
<span id="currentSlide">1</span> / <span id="totalSlides">N</span>
</div>
<nav class="nav-container">
<button class="nav-btn"
<button class="nav-btn"
</nav>
<script>
/* Navigation logic */
</script>
</body>
</html>
Navigation JavaScript
let currentSlide = 1;
const totalSlides = N; // Set actual count
const slides = document.querySelectorAll('.slide');
function showSlide(n) {
if (n < 1) n = 1;
if (n > totalSlides) n = totalSlides;
slides.forEach(slide => slide.classList.remove('active'));
slides[n - 1].classList.add('active');
currentSlide = n;
document.getElementById('currentSlide').textContent = currentSlide;
document.getElementById('prevBtn').disabled = currentSlide === 1;
document.getElementById('nextBtn').disabled = currentSlide === totalSlides;
document.getElementById('progress').style.width =
((currentSlide / totalSlides) * 100) + '%';
}
function nextSlide() { showSlide(currentSlide + 1); }
function prevSlide() { showSlide(currentSlide - 1); }
// Keyboard support
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') {
e.preventDefault();
nextSlide();
}
if (e.key === 'ArrowLeft') {
e.preventDefault();
prevSlide();
}
});
// Touch/swipe support
let touchStartX = 0;
document.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
});
document.addEventListener('touchend', (e) => {
const diff = touchStartX - e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) {
diff > 0 ? nextSlide() : prevSlide();
}
});
showSlide(1);
Speaker Notes Format
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Speech Notes — {Topic}</title>
<style>
body {
font-family: system-ui, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 40px;
line-height: 1.7;
}
.slide-notes {
margin-bottom: 2rem;
padding: 1.5rem;
border-left: 4px solid #3b82f6;
background: #f8fafc;
}
.slide-number {
font-weight: bold;
color: #3b82f6;
}
.slide-title {
font-size: 1.2rem;
font-weight: 600;
margin: 0.5rem 0;
}
.duration {
font-size: 0.85rem;
color: #64748b;
}
</style>
</head>
<body>
<h1>Speech Notes</h1>
<p class="subtitle">{Topic}</p>
<div class="slide-notes">
<span class="slide-number">Slide 1</span>
<span class="duration">~30 sec</span>
<div class="slide-title">Title Slide</div>
<p>Opening remarks...</p>
<p>Introduction to topic...</p>
</div>
<!-- Repeat for each slide -->
<div class="total-time">
Total: ~15-20 min
</div>
</body>
</html>
Content Guidelines
Do's
- ✓ One main idea per slide
- ✓ Concrete examples (not abstract statements)
- ✓ Visual structure (cards, grids, icons)
- ✓ Logical flow between slides
- ✓ Natural speaker notes (conversational)
Don'ts
- ✗ Scrolling content
- ✗ Walls of text
- ✗ Generic filler ("This is important...")
- ✗ Made-up statistics
- ✗ External dependencies
Reference: Study Examples
The examples/ folder contains production-quality presentations:
| File | Style | Learn From |
|---|---|---|
| Artificial Intelligence.html | Dark glass | Animations, grids, timeline |
| Climate Change.html | Light professional | Cards, stats, clean layout |
| Cybersecurity.html | Neon/gaming | Particles, threat meters, glow |
Best practice: Open examples in browser, study their CSS patterns, adapt to your topic.
Checklist Before Completion
- Content fits without scrolling
- Navigation visible and doesn't overlap content
- All slides have visual structure (not plain text)
- Facts are accurate
- Speech notes cover every slide
- Works offline (no external deps)
- Keyboard navigation works
- Touch/swipe works
Remember: The examples/ folder is your quality reference. Be creative, but maintain that level of polish.