presentation-by-html

Presentation 构建器 Overview

Build presentation materials as HTML through a two-phase process: brAInstorm first, build second. Never produce slides before the narrative structure is solid.

Phase 1: BrAInstorm

Conduct a structured dia记录ue before writing any code.

Required Questions

Audience & 格式化:

Who is the audience? Technical depth? Prior knowledge? Duration? 格式化 constrAInts?

Content Core:

What problem does this solve? What was the 状态 quo before? What is the core capability / contribution? Current 状态 (shipped / MVP / in-进度)? Demos, data, or real cases avAIlable?

Narrative Intent:

What should the audience take away? Pitfalls, "aha moments", counter-intuitive insights? Structuring Principles Effect before mechanism: Show what it does before explAIning how Pitfalls are gold: Real 失败s resonate more than polished 成功. Structure each as: phenomenon -> cause -> solution -> generalizable insight Avoid 命令行工具ché openings: Prefer tension, paradox, or direct demo over "imagine it's 3am..." Time-box sections: Allocate minutes explicitly. Core insights deserve >40% of time One takeaway per slide: Two ideas = two slides Iterate Until Stable

Continue dia记录ue until:

框架 covers all sections with time estimates Narrative arc is clear (hook -> problem -> solution -> lessons -> future) User confirms "框架 OK" Phase 2: Build HTML File Structure

Separate concerns into three files for mAIntAInability:

project/ presentation.html # Semantic structure only, no inline styles except layout-specific css/style.css # All visual styling, animations, 组件 patterns js/deck.js # Navigation, interactions, TOC, expandable 记录ic images/ # Screenshots, avatars, demo videos

Interaction Patterns (Critical)

The presentation is NOT a static slide deck. It uses interactive detAIl-on-demand patterns:

• Tab Cards — 命令行工具ckable cards that switch a 分享d detAIl area below

Use when: Multiple sub-topics exist under one slide, each with rich detAIl.

• Expandable DetAIls — Cards that expand to reveal deeper content

Use when: A slide has layered in格式化ion — show summary by default, expand for evidence/examples. Supports data-default-open attribute.

• Left-Tab + Right-DetAIl Panel — Vertical tab 列出 with adjacent detAIl pane

Use when: Each tab has substantial content (code blocks, diagrams) that benefits from full-width display. Example: security isolation detAIls.

Visual De签名 系统 组件 CSS Class Usage Cards .card .card-accent .card-{color} Discrete points, categorized items Tags .tag .tag-{color} Labels, keywords, 状态 badges Grids .grid-2 .grid-3 Parallel comparisons Quote .quote Key insights, memorable one-liners Architecture boxes .arch-box .arch-box.primary 系统 diagrams Code blocks

 with .comment .keyword .string .func .op spans	Syntax-highlighted dark code
Comparison	.compare-box .compare-before .compare-after	Before/after with positioned labels
Timeline	.timeline .timeline-item	Sequential 事件 with time markers
Pitfall insight	.pitfall-step .pitfall-insight	Highlighted takeaway badges
Big numbers	.big-number	指标 with placeholder __ for pending data
Color 系统 (Semantic)
--primary: #1a73e8;       / neutral/default/architecture /
--accent: #ea4335;        / problem/danger/before /
--accent-green: #34a853;  / solution/成功/after /
--accent-yellow: #fbbc04; / caution/intermediate /
--accent-purple: #9334e6; / advanced/depth/evaluator /
Animation Patterns
Fade-in with stagger: .fade-in .fade-in-d1 through .fade-in-d6 for 进度ive reveal
Step-by-step flow: .anim-step + .anim-flow contAIner, revealed sequentially by JS
Flow diagram: .flow-node + .flow-connector revealed node-by-node with delays
Tab transitions: CSS @keyframes tabFadeIn for smooth panel switching
Slide Types
Title slide (.slide-title): Gradient background, white text
Section divider (.slide-section): Large faded number + heading
Content slide: h2/h3 + interactive 组件s
Architecture slide: CSS flex/grid layouts with .arch-box nodes
Comparison slide: .compare-before / .compare-after side-by-side
Data slide: .big-number with __ placeholders for pending 指标
Q&A slide: Minimal title-slide style
JS Engine Responsibilities
deck.js handles:
Slide navigation (keyboard ←→/Space/PgUp/PgDn, touch swipe, ESC for TOC)
进度 bar + counter 更新
Tab card switching (命令行工具ck → toggle active class on cards and deta