fs-notebook-tabs

name	fs-notebook-tabs
en_name	Defend a CS Capstone like a Top Thesis Advisor
zh_name	像顶级导师一样答辩计算机毕业项目
description	A computer-science capstone: an on-device ML keyboard that predicts next words privately — problem, method, evaluation, and defense answers. Built as a decision-grade coursework defense deck for professor, defense committee.
en_description	A computer-science capstone: an on-device ML keyboard that predicts next words privately — problem, method, evaluation, and defense answers. Built as a decision-grade coursework defense deck for professor, defense committee.
zh_description	像顶级导师一样答辩计算机毕业项目——一份可商业交付的课业答辩 Deck，围绕真实主题、证据链与决策目标组织。
tags	["student-coursework","senior-capstone-defense-deck","education","coursework","defense","academic","decision-deck","commercial-slide-agent","fs-notebook-tabs"]
triggers	["senior-capstone-defense-deck","student-coursework","Defend a CS Capstone like a Top Thesis Advisor","像顶级导师一样答辩计算机毕业项目","coursework","defense","academic","html deck","html slides"]
od	{"mode":"deck","surface":"web","upstream":"https://github.com/zarazhangrui/frontend-slides","preview":{"type":"html","entry":"example.html"},"example_prompt_i18n":{"zh-CN":"用「索引笔记本」把我的内容做成单文件 HTML 幻灯片：深底之上的奶油纸卡、右缘薄荷/薰衣草/粉/天蓝竖向索引标签、左侧活页装订孔，Bodoni Moda 标题 + DM Sans 正文。从 example.html 出发只替换内容，所有设计 token 保持不变。"},"category":"student-coursework","scenario":"education","example_prompt":"Create \"Defend a CS Capstone like a Top Thesis Advisor\" as a decision-grade Student coursework deck in this template's own visual system. Subject: A computer-science capstone: an on-device ML keyboard that predicts next words privately — problem, method, evaluation, and defense answers. Audience: professor, defense committee. 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: can a reviewer find the contribution, evidence, and limitation in under 90 seconds."}

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;           
    : ;
    : ;
    : ;              
    : ;             
    : ;             
    : ;             
    : ;             
    : ;             
    : (--bg-outer);
    : (--bg-outer);

    
    : , , serif;   
    : , , sans-serif;  
    : ;
    : ;
    : ;
    : ;
    : ;

    
    : ;
    : ;
    : ;
    : ;        
    : ;
    : ;

    
    : (, , , );   
    : ;
}