# HTML Presentation Template
Reference architecture for generating slide presentations. Every presentation follows this structure.
## Base HTML Structure
```html
Presentation Title
Presentation Title
Subtitle or author
Slide Title
Content...
```
## Required JavaScript Features
Every presentation must include:
1. **SlidePresentation Class** — Main controller with:
- Keyboard navigation (arrows, space, page up/down)
- Touch/swipe support
- Mouse wheel navigation
- Progress bar updates
- Navigation dots
2. **Intersection Observer** — For scroll-triggered animations:
- Add `.visible` class when slides enter viewport
- Trigger CSS transitions efficiently
3. **Optional Enhancements** (match to chosen style):
- Custom cursor with trail
- Particle system background (canvas)
- Parallax effects
- 3D tilt on hover
- Magnetic buttons
- Counter animations
4. **Inline Editing** (only if user opted in during Phase 1 — skip entirely if they said No):
- Edit toggle button (hidden by default, revealed via hover hotzone or `E` key)
- Auto-save to localStorage
- Export/save file functionality
- See "Inline Editing Implementation" section below
## Fullscreen Controller (Required in Every Presentation)
Every presentation must include a fullscreen toggle. Presenters use `F` to go fullscreen before presenting; without it they must leave the browser to use system fullscreen, which breaks keyboard navigation.
HTML — add one button near the nav dots:
```html
```
CSS:
```css
.fullscreen-btn {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 2.5rem;
height: 2.5rem;
border: none;
border-radius: 50%;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 1rem;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s;
z-index: 9999;
}
body:hover .fullscreen-btn { opacity: 1; }
```
JS — `FullscreenController` class (add inside `