fs-notebook-tabs

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;
}