Menu
15-slot HTML presentation structure — cover · agenda · 3 section dividers · about · vision · team · services · process · gallery · stats · testimonials · pricelist · thank-you. Oversized headlines, full-bleed colour-field rhythm, a motif on every slide.
Based on SOC occupation classification
| name | html-ppt-aplocoto |
| description | 15-slot HTML presentation structure — cover · agenda · 3 section dividers · about · vision · team · services · process · gallery · stats · testimonials · pricelist · thank-you. Oversized headlines, full-bleed colour-field rhythm, a motif on every slide. |
The structure layer: what goes where, palette-agnostic. Colour/font are bound to CSS role vars so the skin is swappable.
Reference: build.mjs (source generator) -> example.html (rendered static deck) · preview/slide-01..15.png.
A 15-page deck for consumer / family / event / brand-pitch briefs. Each slot's role and required content are defined in the content-role contract; the slot map below adds aplocoto's layout for each slot (by number).
| Slot | Layout |
|---|---|
| 01 | 2 big-circle photo frames · year burst-badge · pill · giant 4-line all-caps headline on a colour ground |
| 02 | vertical TOC list — 4 entries pointing to dividers 03 / 07 / 11 / 15 |
| 03 | full ink ground · 3 decorative burst-badges · centred kicker + display title |
| 04 | text + photo split · lead + body + a chip pair |
| 05 | angled split (ink left + cream right) · 3-item numbered list with burst numerals |
| 06 | 4 × 1 team cards (photo + name + role) |
| 07 | same as 03 |
| 08 | 2 × 2 icon quad |
| 09 | 4-step horizontal spine |
| 10 | irregular photo grid + 2 hashtag pill overlays |
| 11 | same as 03 |
| 12 | big-circle panel + 3 burst-badge stats on a colour ground |
| 13 | 3 quote cards (photo + quote + attribution) |
| 14 | 3 price cards (hue rotation) · ink "Most popular" pill on the middle card |
| 15 | year burst-badge + pill on an ink ground |
Run from this directory:
node build.mjs
The script regenerates example.html from structured demo data and small layout helpers (burst badges, pills, media frames, cards, dividers). The checked-in previews are screenshots of the generated example deck.
Replace content per slot, keep the layout:
| Brief | Content swap |
|---|---|
| Family / kids brand (default) | the demo content |
| Event programme | About → "What it is" · Team → speakers · Services → tracks · Pricelist → ticket tiers · Testimonials → past-attendee quotes |
| Internal review | About → "About this team" · Services → workstreams · Process → quarter plan · Stats → KPIs · Pricelist → budget tiers |
Google Maps Platform API for geocoding, places, routes, and distance matrices. Use when user mentions "Google Maps", "geocode", "directions", "places API", route matrix, or asks to look up an address, route, or place metadata.
A high-fashion editorial video style - cold desaturated grade, dramatic high-contrast light, monumental clean architecture or backdrop, deliberate model pose, strong silhouette, and luxury material texture. Applies to fashion, beauty, luxury, and personal-brand subjects. Trigger on /fashion-editorial, "Fashion Editorial", "luxury fashion campaign", "high fashion video", or "editorial model film".
A hand-drawn fantasy animation video style - painterly 2D backgrounds, expressive simple characters, lush nature, soft diffused light, warm storybook color, and gentle magical wonder. Applies to any fantasy, character, nature, or adventure subject. Trigger on /hand-drawn-fantasy-anime, "hand-drawn fantasy animation", "painterly 2D fantasy", "storybook anime", or "warm forest animation".
A dark luxury product macro video style - premium materials in extreme close-up, black studio, pinpoint specular highlights, ultra-shallow focus, engraved or mechanical detail, and refined reveal pacing. Applies to watches, jewelry, pens, cameras, fragrance caps, and other high-end objects. Trigger on /luxury-product, "Luxury Product", "premium product macro", "dark luxury product video", or "metal detail reveal".
A sports performance advertising video style - athlete effort, gear and body close-ups, impact rhythm, motion blur, Dutch or low angles, high-contrast desaturated grade, and dramatic rim light. Applies to any sport, athlete, training action, or performance product. Trigger on /sports-performance-ad, "sports performance ad", "athletic commercial", "training commercial", or "sports brand film".
Playful-editorial presentation look — saturated colour fields, scalloped sunburst badges and pill chips, oversized stacked headlines. Carnival palette · Archivo + Manrope · pill radius. The design system (visual language).