hps-retro-tv

name	hps-retro-tv
en_name	Turn Home Movies into a Family-History Story like a Documentary Editor
zh_name	像纪录片剪辑师一样把家庭影像做成家族史
description	A family history told through five decades of home movies — the opening question, the eras, and what the footage reveals. Built as a decision-grade story deck for family, close friends.
en_description	A family history told through five decades of home movies — the opening question, the eras, and what the footage reveals. Built as a decision-grade story deck for family, close friends.
zh_description	像纪录片剪辑师一样把家庭影像做成家族史——一份可商业交付的生活故事 Deck，围绕真实主题、证据链与决策目标组织。
tags	["life","travel-photo-essay-deck","personal","story","photo-essay","decision-deck","commercial-slide-agent","hps-retro-tv"]
triggers	["travel-photo-essay-deck","life","Turn Home Movies into a Family-History Story like a Documentary Editor","像纪录片剪辑师一样把家庭影像做成家族史","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 幻灯片：暖奶油底每页叠加 CRT 扫描线、琥珀与砖红 accent、Playfair Display 厚重投影大标题、检验图彩条和天线装饰。从种子 example.html 出发——完整保留 token 表、slide 骨架和键盘运行时，只替换幻灯片内容，使用真实内容，不要 lorem ipsum。"},"category":"life","scenario":"personal","example_prompt":"Create \"Turn Home Movies into a Family-History Story like a Documentary Editor\" as a decision-grade Life & story deck in this template's own visual system. Subject: A family history told through five decades of home movies — the opening question, the eras, and what the footage reveals. Audience: family, close friends. 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."}

Retro TV（复古显像管）

A locked single-theme deck plugin: the retro-tv skin from the upstream MIT-licensed lewislulu/html-ppt-skill (36 themes × 31 layouts), shipped as one self-contained seed — example.html — that carries the full token sheet, the broadcast 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 retro-skeuomorphic plugins: this is the light warm-cream picture-tube device — scanlines on a cream canvas, not on a black screen. retro-windows is Win95 grey window chrome (title bars, bevels); hermes is dark-background green-phosphor terminal CRT. The three device systems are mutually exclusive — no dark backgrounds, no terminal language, no window chrome here. 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.

:root{
  --bg:#f5ecd7;            /* warm cream canvas */
  --bg-soft:#efe4c6;
  --surface:#fbf5e2;       /* parchment card face */
  --surface-2:#efe3c2;
  --border:rgba(120,70,20,.22);        /* warm brown hairlines */
  --border-strong:rgba(120,70,20,.45);
  --text-1:#2a1a08; --text-2:#6b4a22; --text-3:#a68656;
  --accent:#e67e14;        /* amber — the lead */
  --accent-2:#c73a1f;      /* brick red — headlines & emphasis */
  --accent-3:#f2b544;      /* gold — support */
  --good:#3e8940; --warn:#e67e14; --bad:#c73a1f;
  --grad:linear-gradient(135deg,#c73a1f,#e67e14 55%,#f2b544);
  --grad-soft:linear-gradient(135deg,#fde6c4,#fbd9a0);
  --radius:10px; --radius-sm:6px; --radius-lg:16px;
  --shadow:0 6px 0 rgba(80,40,0,.12),0 12px 28px rgba(80,40,0,.15);
  --shadow-lg:0 10px 0 rgba(80,40,0,.15),0 24px 50px rgba(80,40,0,.2);
  --font-sans:'Inter','Noto Sans SC',sans-serif;
  --font-serif:'Playfair Display','Noto Serif SC',serif;
  --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  --font-display:'Playfair Display','Noto Serif SC',serif;
  --letter-tight:-.01em; --letter-normal:0;
  --ease:cubic-bezier(.4,0,.2,1);
}

Shadows are always the chunky tube pair — a hard 0 Npx 0 offset plus a soft warm blur together. Never a plain flat or pure-black shadow.

Fonts come from Google Fonts @import only (Playfair Display, Inter, Noto Sans SC, JetBrains Mono). No other external resource of any kind.

Signature decor devices (the broadcast kit)

1. Picture-tube canvas — the body background layers faint horizontal scanlines repeating-linear-gradient(0deg,rgba(80,40,0,.06) 0 2px, transparent 2px 4px) over a curved-glass vignette radial-gradient(ellipse at center,#f7ecd0 0%,#e8d9b0 85%,#c9b888 100%) that darkens toward the edges like a powered-on CRT. Slides stay transparent so it shows through everywhere. Never paint an opaque slide background.
2. Per-slide CRT scanline overlay — .slide::before adds repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 2px,transparent 2px 4px) at z-index:1; all slide content sits at z-index:2. Every page reads as a broadcast frame. Never remove or dim it.
3. Test-card color bars — .test-bars is an SMPTE-style strip of six bars in the locked palette (brick / amber / gold / green / parchment / brown). One per slide maximum, as a garnish.
4. Playfair headlines with heavy shadows — .h1 is brick red #c73a1f with text-shadow:3px 3px 0 rgba(80,40,0,.18); .h2 is warm ink with a 2px offset shadow. Quotes and the giant section numeral go italic Playfair.
5. Antenna / dial / tiny-TV inline SVG — rabbit-ear antennas, dial knobs and little TV sets stroked in warm browns (#6b4a22/#a68656) with amber/brick tips (.tv-shape). 1–2 per slide maximum.
6. ON AIR lamp & channel badges — .on-air is a brick pill with a pulsing gold dot; step cards get an automatic CH 01…04 mono badge; pills are mono-type rounded chips with a soft drop ledge.
7. Gradient display numerals — .gradient-text (the brick→amber→gold --grad) is reserved for big numbers and 1–2 highlight words.
8. Tube-on entry — .anim-tube-on flickers a headline or stat in like a CRT warming up (vertical-collapse scale). Use on cover and stat pages.

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 <section class="slide" data-title="..."> inside <div class="deck" id="deck"> — 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 <body> so keys work without a click — these solve real iframe-host bugs; do not "simplify" them away.
• Speaker notes: one hidden <div class="notes">…</div> per slide.

Authoring checklist

1. Copy example.html; keep all <style> blocks and the <script> verbatim.
2. Replace the 10 demo slides with the planned layout sequence; real content, real numbers — no lorem ipsum, no placeholder images.
3. Keep the picture-tube canvas and the per-slide scanline overlay on every page; place at most 1–2 .tv-shape SVGs (plus optionally one .test-bars strip) per slide.
4. Stay inside the locked palette: amber leads, brick red for headlines and emphasis, gold support, warm-brown ink — no dark backgrounds, no green-terminal or window-chrome language, nothing else.
5. Write 1–3 sentence speaker notes per slide in .notes.
6. Verify: arrows + Space navigate, #/5 deep-links, no slide overflows vertically, every shadow is the chunky offset-plus-warm-blur pair.

Attribution

Visual system, token vocabulary, theme palette, and layout taxonomy come from the upstream MIT-licensed lewislulu/html-ppt-skill (© lewis <[e-mail]>), theme retro-tv. The LICENSE file ships alongside this skill — keep it in place when redistributing.