Notebook Tabs (索引笔记本)

A theme-locked deck plugin derived from the MIT-licensed zarazhangrui/frontend-slides "Notebook Tabs" style preset (STYLE_PRESETS.md section 5). The whole deck reads as one physical, editorially typeset notebook: every slide is a cream paper page floating on a dark desk, with a colorful tab index on the right fore-edge and binder holes on the left.

Start from example.html in this plugin folder. It is the proven seed: keep its stage CSS, the paper/holes/tabs device, the :root token block, and the entire SlidePresentation controller script verbatim — replace only the slide content. Do not redesign, do not introduce any color or font outside this spec.

Fixed 16:9 stage (locked scaling system)

• Every deck is authored on a fixed 1920×1080 canvas: .deck-viewport (fills the window) wraps .deck-stage (1920×1080, transform-origin: 0 0).
• JavaScript scales the whole stage uniformly: factor = min(innerWidth/1920, innerHeight/1080), then translate(x, y) scale(factor) to center with letterbox/pillarbox; re-run on resize. This is the viewport-base.css system — the full file is already inlined in the seed.
• Never reflow slide content per device. No responsive breakpoints inside slides. All measurements are fixed px at the 1920×1080 design size (the upstream preset's clamp() tab sizing is superseded by stage scaling — use fixed px).
• Slide switching toggles .active/.visible (visibility/opacity/pointer-events) — never display: none.
• Keyboard (←/→/↑/↓/Space/PageUp/PageDown/Home/End), debounced wheel (~650ms), touch swipe (≥40px), and #/<index> hash routing with deep-link restore. The page counter lives in .deck-controls, fixed-positioned outside the scaled stage.

Design tokens (locked — reproduce exactly, never substitute)

:root {
    /* Colors */
    --bg-outer: #2d2d2d;          /* dark desk behind the notebook */
    --bg-page: #f8f6f1;           /* cream paper */
    --text-primary: #1a1a1a;
    --text-secondary: #6b6358;
    --rule: #d8d2c4;              /* hairline rules on paper */
    --tab-1: #98d4bb;             /* Mint */
    --tab-2: #c7b8ea;             /* Lavender */
    --tab-3: #f4b8c5;             /* Pink */
    --tab-4: #a8d8ea;             /* Sky */
    --tab-5: #ffe6a7;             /* Cream */
    --stage-bg: var(--bg-outer);
    --slide-bg: var(--bg-outer);

    /* Typography */
    --font-display: 'Bodoni Moda', 'Didot', serif;   /* 400/700 + italic */
    --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;  /* 400/500/700 */
    --title-size: 150px;
    --h2-size: 84px;
    --subtitle-size: 30px;
    --body-size: 26px;
    --label-size: 17px;

    /* Paper geometry inside the 1920×1080 stage */
    --paper-top: 56px;
    --paper-bottom: 56px;
    --paper-left: 120px;
    --paper-right: 150px;        /* leaves room for the protruding tabs */
    --paper-pad-x: 110px;
    --paper-pad-y: 78px;

    /* Motion */
    --ease-page: cubic-bezier(0.16, 1, 0.3, 1);   /* the one signature easing */
    --duration-normal: 0.7s;
}

Fonts load via one Google Fonts @import (Bodoni Moda ital,wght 0,400/0,700/1,400 + DM Sans 400/500/700). Forbidden: any other font, Inter/Roboto/Arial/system display fonts, any color outside the tokens above, gradients as decoration, indigo #6366f1, dark-glassmorphism panels.

Signature devices (every slide carries all of them)

1. Paper card .paper — absolutely positioned by the --paper-* insets, border-radius: 8px, layered shadow (0 2px 4px + 0 18px 50px dark drops + a 1px inner white highlight), faint 44px-pitch ruled-line grain via a layered linear-gradient, z-index: 1.
2. Binder holes .holes — a left-margin flex column of 10 punched circles (26px, background: var(--bg-outer), inset dark shadow + 1px white bottom highlight), inside the paper at left: 38px.
3. Margin rule .margin-rule — a 1px vertical line at left: 92px in var(--tab-3) at 0.55 opacity, echoing a real notebook's red margin line.

…