--- name: hps-memphis-pop en_name: "Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator" zh_name: "像内容策展人一样做流行文化回顾演讲" description: | A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community. en_description: | A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community. zh_description: | 像内容策展人一样做流行文化回顾演讲——一份可商业交付的生活故事 Deck，围绕真实主题、证据链与决策目标组织。 tags: - "life" - "travel-photo-essay-deck" - "personal" - "story" - "photo-essay" - "decision-deck" - "commercial-slide-agent" - "hps-memphis-pop" triggers: - "travel-photo-essay-deck" - "life" - "Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator" - "像内容策展人一样做流行文化回顾演讲" - "story" - "personal" - "photo-essay" - "html deck" - "html slides" od: mode: deck surface: web upstream: "https://github.com/lewislulu/html-ppt-skill" preview: type: html entry: example.html design_system: requires: false speaker_notes: true animations: true example_prompt_i18n: zh-CN: "用孟菲斯波普把我的内容做成一套 80 年代孟菲斯风格的单文件 HTML 幻灯片：奶油色 confetti 圆点画布、黑描边硬阴影卡片、热粉 accent 和 Archivo Black 大标题。从种子 example.html 出发——完整保留 token 表、slide 骨架和键盘运行时，只替换幻灯片内容，使用真实内容，不要 lorem ipsum。" category: "life" scenario: "personal" example_prompt: "Create \"Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator\" as a decision-grade Life & story deck in this template's own visual system. Subject: A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Audience: talk audience, design community. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once." --- # Memphis Pop（孟菲斯波普） A locked single-theme deck plugin: the `memphis-pop` skin from the upstream MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill) (36 themes × 31 layouts), shipped as one self-contained seed — `example.html` — that carries the full token sheet, the Memphis decor devices, the slide scaffold, and the keyboard runtime. **Start from `example.html`. Replace content only. Never rewrite the design system or the runtime script. Never introduce colors or fonts outside this spec.** Positioning vs. sibling Memphis-adjacent plugins: this is the **full-bleed scattered confetti-dot pattern** Memphis. `daisy-days` is hand-drawn daisy childlike (flower illustration devices), `block-frame` is big-color-block neobrutalist (no pattern). The three decor systems are mutually exclusive — do not mix. ## Locked token sheet (do not deviate) Every variable below is defined in the seed's `:root`. Slides reference tokens only — never hard-code a color in slide markup. ```css :root{ --bg:#fef6e8; /* warm cream canvas */ --bg-soft:#fdebc7; --surface:#ffffff; /* card face */ --surface-2:#fff1d1; --border:#111111; /* everything outlines in near-black */ --border-strong:#111111; --text-1:#111111; --text-2:#333333; --text-3:#666666; --accent:#ff3d8b; /* hot pink — the lead */ --accent-2:#37c2d7; /* teal */ --accent-3:#ffcc00; /* yellow */ --good:#6ac04c; --warn:#ffcc00; --bad:#ff3d8b; --grad:linear-gradient(135deg,#ff3d8b,#ffcc00 50%,#37c2d7); --grad-soft:linear-gradient(135deg,#fdebc7,#fff1d1); --radius:10px; --radius-sm:6px; --radius-lg:18px; --shadow:5px 5px 0 #111; /* hard offset, never blurred */ --shadow-lg:9px 9px 0 #111; --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif; --font-serif:'Space Grotesk','Noto Sans SC',sans-serif; --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace; --font-display:'Archivo Black','Space Grotesk',sans-serif; --letter-tight:-.01em; --letter-normal:0; --ease:cubic-bezier(.4,0,.2,1); } ``` Fonts come from Google Fonts `@import` only (Archivo Black, Space Grotesk, Noto Sans SC, JetBrains Mono). No other external resource of any kind. ## Signature decor devices (the Memphis kit) 1. **Confetti-dot canvas** — the `body` background tiles three offset `radial-gradient` layers of 3px dots (pink / teal / yellow at 200 / 220 / 260px tile sizes) over `--bg`. It is full-bleed on every slide; slides stay transparent so the pattern always shows through. Never paint an opaque slide background. 2. **Black-outlined cards** — `.card` is `2.5px solid #111` with `--shadow` (hard offset, zero blur). Hero cards may use `--shadow-lg`. 3. **Geometric SVG confetti** — inline SVG triangles, squiggle zigzags, circles, plus signs and half-tone arcs, each stroked in `#111` and filled with one accent, scattered absolutely behind/around content (`.memphis-shape`). 2–4 per slide maximum. 4. **Tilted sticker pills** — `.pill` carries a 2px black border, an accent fill and a slight `rotate(±2deg)`; used as tags and badges. 5. **Thick black divider bars** — `.divider-accent` is a hot-pink bar with a black outline; section dividers pair it with a giant outlined numeral. 6. **Gradient display numerals** — `.gradient-text` (the tri-color `--grad`) is reserved for big numbers and 1–2 highlight words. ## Layout system (shared upstream 31-layout catalog) The upstream catalog is shared across the html-ppt family; compose pages from these master categories: | group | layouts | |---|---| | Openers & transitions | cover · toc · section-divider | | Text-centric | bullets · two-column · three-column · big-quote | | Numbers & data | stat-highlight · kpi-grid · table · chart-bar/line/pie/radar | | Code & terminal | code · diff · terminal | | Diagrams & flows | flow-diagram · arch-diagram · process-steps · mindmap | | Plans & comparisons | timeline · roadmap · gantt · comparison · pros-cons · todo-checklist | | Visuals | image-hero · image-grid | | Closers | cta · thanks | Default sequence: `cover → toc → (section-divider → 2–4 content pages) × N → thanks`. Charts are always pure CSS or inline SVG — never Chart.js or any external library. The seed demonstrates: cover, toc, section-divider, two-column, kpi-grid, stat-highlight, chart-bar, process-steps, big-quote, thanks. ## Page structure & runtime contract (keep the seed script verbatim) - Every page is `
` inside `
` — a horizontal scroll-snap strip, each slide exactly `100vw × 100vh` (one screen, no internal scrolling), 16:9 / 1280×720 baseline with `clamp()` type scales, padding `72px 96px`. - Fixed chrome: `.deck-header` (deck title + theme chip), `.deck-footer` (attribution + `N / total` counter), `.progress-bar`. - Keyboard: `←` `→` `Space` `PageUp` `PageDown` `Home` `End` navigate. - Hash routing: `#/N` (1-based) deep-links a slide; navigation syncs the hash via `history.replaceState` wrapped in try/catch (srcdoc-safe). - The script dedupes dual window/document capture-phase key listeners by Event identity and auto-focuses `` so keys work without a click — these solve real iframe-host bugs; do not "simplify" them away. - Speaker notes: one hidden `
…
` per slide. ## Authoring checklist 1. Copy `example.html`; keep all `