html-presentation-v1
html-presentation
简体中文 · English
Single-file HTML presentation template library — 20 templates × 10 fully-worked slides each, zero dependencies, works offline.
A slide template repository built for both AI Skills and human users: no tooling required — open any template in a browser and present. Every template ships as a complete, layout-verified demo deck, so turning it into your own presentation is just a matter of replacing the text.
✨ Features
- Single file, zero dependencies — All CSS, JS, charts and code highlighting are inlined. No CDN, no web fonts, no icon libraries; double-click and it runs even offline.
- 20 templates × 10 slides — Each template demonstrates 10 real layouts (cover, agenda, data, chart, table, timeline, quote, closing…), making them reliable references for density and rhythm.
- Three design families in one repo — All 12 glass templates share the same Glassmorphism DNA (saturated gradients, ambient light, frosted glass, humanist typography): 8 classics (01-08) plus 4 new color worlds (09-12).
- Keynote editions (13-18) — Apple-keynote style fullscreen minimalism: glass light-and-shadow with 3D glass cubes, backdrop-filter frost, prism dispersion and a looping soft sweep; three light editions (cream autumn / morning-mist celadon / glacier mist) and three dark editions (dark stage / deep-space blue / aurora night-flight).
- Gallery & Scroll editions (19-20) — 19 Gallery Album: museum-catalog editorial typography with left-aligned asymmetric grids, oversized serif titles, magazine-style corner details and glass frames refracting oversized characters; 20 Eastern Scroll: ink-green & gilded gold, center-axis vertical writing, chapter numerals (壹贰叁肆伍), glass moon/screens and vermilion seals — for exhibition catalogs and Eastern aesthetics.
- One unified slide engine — Keyboard, touch swipe, buttons, URL hash deep links and fullscreen behave identically across all templates; 13-20 add mouse-wheel navigation.
- Built-in guardrails — The repo includes layout rules and an avoid-list, so AI agents generating from these docs reliably dodge the classic “AI slide” pitfalls: purple gradients, emoji bullets, truncated content.
- Ready to use as a Skill — Ships with a standard
SKILL.md; drop the repo into any Skill-capable AI environment.
🗂 Template Gallery
Glassmorphism Classics（01-08）
Saturated gradients and ambient blobs, see-through frosted glass, humanist serif in large sizes — for warm, atmospheric talks.
| Template | Demo deck | Best for |
|---|---|---|
 |
01 Liquid Glass · mint green | Product launches, general decks |
 |
02 Flowing Glass · flowing violet | Brand & visual identity proposals |
 |
03 Morandi Mineral · misty green | Lifestyle and humanities talks |
 |
04 Academic Liquid · grey-teal | Teaching, workshops |
 |
05 Natural Vitality · fresh leaf | Community, environment, light topics |
 |
06 Chart Suite · aurora green | Business reviews, data reports (SVG charts) |
 |
07 Dual Theme · emerald green | Internal launches, one-click light/dark |
 |
08 Code Flagship · denim blue | Tech talks: highlighted code + charts + dual theme |
New Colors（09-12）
Same glass DNA as the classics, four new color worlds: warm apricot / mint breeze / cherry dusk / golden sunset.
| Template | Demo deck | Best for |
|---|---|---|
 |
09 Warm Apricot Glass · terracotta | Brand stories, community dining (warm & friendly) |
 |
10 Mint Breeze Glass · deep teal | Outdoor plans, lifestyle sharing (fresh & airy) |
 |
11 Cherry Dusk Glass · rose red | Weddings, ceremonies, romantic proposals |
 |
12 Golden Sunset Glass · amber gold | Exhibitions, publishing, humanities (refined warmth) |
Keynote Editions（13-18）
Apple-keynote style fullscreen minimalism: one idea per 100vh slide, oversized single-line titles, staggered entrance; full glass-light toolkit (glass cubes, dispersion glow, looping sweep); sans-serif system font stack; mouse-wheel navigation. Three light editions (cream autumn / celadon / glacier) plus three dark editions (dark stage / deep space / aurora).
| Template | Demo deck | Best for |
|---|---|---|
 |
13 Cream Autumn Glass Keynote · caramel orange | Product launches, new arrivals (cream beige × glass light) |
 |
14 Dark Stage Keynote · honey gold | Flagship launches, award nights, annual talks (near-black × dark glass) |
 |
15 Morning Mist Celadon Keynote · celadon green | Tea, wellness and lifestyle brand launches (misty celadon × white porcelain glass) |
 |
16 Deep Space Blue Keynote · starlight blue | Tech and AI product launches (deep-space navy × starlit dispersion) |
 |
17 Glacier Mist Glass Keynote · glacier blue | Climate, environment and deep-tech launches (fog blue-grey × white ice glass) |
 |
18 Aurora Night-flight Glass Keynote · aurora teal × mist violet | Aerospace, communications, night-themed launches (midnight navy × slanted aurora bands) |
Gallery & Scroll Editions（19-20）
Two high-craft layout variations where glass plays a supporting role. 19 is the western gallery album — the opposite of centered keynotes: left-aligned asymmetric grids, oversized serif titles filling the left two-thirds, small two-column body text at lower right, magazine-style corner details (VOL / date / chapter / folio); glass is used only as a picture frame — hairline border + blur(12px) + oversized serif characters refracting behind, with a faint ≤10% dispersion in one corner; paper-grain background with no colored glows and a slower ≤5% sweep. 20 is the eastern scroll — ink-green pond base × gilded gold × moon white, center-axis symmetry with Kaiti vertical writing, hollow-stroked chapter numerals (壹贰叁肆伍), a five-panel glass-screen agenda, a glass moon with breathing halo, tea-cup rings, vermilion seals, Chinese-numeral dates, mountain silhouettes and fireflies; backdrop blur, gold-tinted dispersion and the 8s sweep are all preserved.
| Template | Demo deck | Best for |
|---|---|---|
 |
19 Gallery Album (warm white paper) · vermilion red | Exhibition catalogs, cultural specials, brand annuals (warm paper × vermilion accents) |
 |
20 Eastern Scroll (ink green & gold) · gilded gold | Eastern aesthetics, tea culture, humanities journals (ink-green base × vertical chapters × glass moon & seals) |
🚀 Quick Start
git clone https://github.com/your-name/html-presentation.git
cd html-presentation/references/templates
# Open any templateXX.html in your browser — that's it.
Make it yours: duplicate a template → keep all CSS and the <script> engine at the bottom → replace text slide by slide → save. Done.
⌨️ Controls
| Key / gesture | Action |
|---|---|
← → ↑ ↓ / Space / PageUp PageDown |
Navigate |
| Mouse wheel (13-20) | Navigate (inertia-throttled) |
Home / End |
First / last slide |
F |
Toggle fullscreen |
ESC |
Exit fullscreen |
| Swipe on mobile | Navigate |
Append #5 to the URL |
Jump to slide 5 |
| Browser back / forward | Synced navigation |
📁 Repository Layout
html-presentation/
├── README.md # Chinese documentation
├── README.en.md # English documentation (this file)
├── SKILL.md # Skill definition: the agent workflow
├── LICENSE # MIT license
├── .gitignore
├── assets/
│ ├── previews/ # Template cover previews (20)
│ └── social-card.jpg # GitHub social preview card (1280×640, upload via Settings → Social preview)
├── scripts/
│ └── qa_overflow.js # Self-check script: headless per-slide overflow test
└── references/
├── LAYOUT_RULES.md # Layout rules: canvas, type, density budget, components
├── AVOID_LIST.md # Avoid-list: prohibitions + pre-flight checklist
├── TEMPLATES.md # Template catalog: index of 20 + standard 10-slide arc
└── templates/
└── template01-20.html # The 20 templates (docs and examples in one)
🎨 Design System
The standard 10-slide arc (shared by all 20 templates): Cover → Agenda → Problem → Core idea → Key data → Comparison → Roadmap → Deep dive → Summary → Closing (13-18 use a keynote variation, 19 an album variation and 20 a scroll variation: page types are reorganized per family, count unchanged).
Density budget: max 5 bullets per slide, max 80 CJK characters of body copy, titles ≤14 characters and always on a single line; overloaded content must be split across slides — never shrink the font to squeeze things in. This is the fundamental guarantee against truncated content.
Zero-dependency trio: charts are hand-drawn inline SVG; code highlighting is hand-tagged <span>s; icons are inline SVG geometry; fonts fall back through local stacks (glass 01-12: LXGW WenKai → Kaiti → serif; keynote 13-18: PingFang SC → YaHei → sans-serif; album 19: Songti SC → Noto Serif SC → serif; scroll 20: Kaiti SC → STKaiti → KaiTi → serif).
One idea per slide, and a single accent color across the whole deck.
Full rules: references/LAYOUT_RULES.md and references/AVOID_LIST.md.
🤖 Using as a Skill
The SKILL.md at the repository root is a standard Skill manifest. Once installed in a Skill-capable AI environment, the agent triggers whenever the user asks for “a deck / slides / a presentation”: pick a template → duplicate it as the draft → rewrite content slide by slide → run the pre-flight checks → deliver. The rule files (layout / avoid-list / catalog) are read during generation to enforce output quality.
🛠 Extending
- Content edits: touch only text and numbers — never the CSS class structure or the engine.
- Recolor: edit the
:rootCSS variables only (dual-theme templates have a dark block too). - Add slides: duplicate the structurally closest slide; progress bar and counter adapt automatically.
- New templates: fork the closest family exemplar, follow both rule documents, and run the self-check in section 9 of the avoid-list before shipping.
📄 License
Released under the MIT License: templates and docs are free to use for personal and commercial presentations. Derived templates are welcome via PRs.