| name | fudan-html-ppt-template |
| description | Generate stable Fudan University style 16:9 HTML presentation decks. Use when Codex needs to create a reusable blue-white academic HTML slide deck template for Fudan University reports, thesis proposals, thesis defenses, course presentations, research group meetings, project reports, or any request mentioning 复旦大学, Fudan, HTML PPT, HTML slides, 开题, 答辩, 汇报, 组会, 课程展示, or academic presentation templates. Outputs must be editable HTML/CSS/JS slides, not image-only, PDF-only, or PowerPoint-only files. |
Fudan HTML PPT Template
Use this skill to generate a Fudan University blue-white academic HTML presentation deck. The canonical skill name is fudan-html-ppt-template; accept fudan_html_ppt_template as a user-facing alias.
Goal
Generate a browser-renderable 16:9 HTML PPT-style deck with fixed slide stages, consistent Fudan blue-white academic styling, safe content zones, deterministic layouts, overflow handling, auto-pagination, and layout validation.
Never generate a pure image deck, bake text into background images, or rely on uncontrolled browser flow for slide height.
Output Contract
Create either a structured folder or a single-file HTML deck. Prefer:
dist/
index.html
assets/
images/
fudan_emblem.png
fudan_emblem_white.png
fudan_wordmark.png
fudan_wordmark_white.png
campus-line-art.svg
footer-wave.svg
logo-placeholder.svg
css/
fudan-theme.css
layout.css
components.css
js/
fit-text.js
auto-paginate.js
layout-check.js
README.md
For single-file HTML, inline CSS, JS, and SVG. Keep logo image paths configurable.
Asset portability is part of the output contract: if the deck references assets/..., those files must be copied into the final output folder so index.html can be opened independently from the skill folder.
Asset Handling
Before writing or delivering a deck, resolve bundled assets explicitly:
- Prefer structured output: copy the whole bundled
assets/, css/, and js/ directories from this skill into dist/ before referencing them.
- Use
scripts/prepare_assets.py dist when available; it copies required logo, emblem, footer, CSS, and JS resources into the output folder.
- If the target agent platform cannot upload or expose skill asset files, generate a single-file HTML deck and inline image/SVG assets as
data: URLs. Do this at least for fudan_wordmark.png, fudan_emblem.png, and footer-wave.svg.
- If the platform supports public files but not bundled skill files, ask for or use a public asset URL and set
logoSrc / emblemSrc / footerWaveSrc to those URLs.
- Never reference absolute local skill paths such as
/Users/.../.codex/skills/... in final HTML; they are not portable and will fail on other machines or agent platforms.
- If
assets/images/fudan_wordmark.png exists after asset preparation, body/content slide headers must use that real image asset for the Fudan brand mark. Do not simulate the official logo/wordmark with plain text such as 复旦大学 / Fudan University.
- If official assets are unavailable, fall back to
assets/logo-placeholder.svg and state that the official logo was not bundled or reachable. Do not fabricate official Fudan logo details.
Workflow
- Parse user content: report title, subtitle, reporter, department, date, email, sections, figures, tables, and content density.
- Resolve output asset strategy: copy bundled assets for structured output, or inline image/SVG assets for single-file/external platforms.
- Select slide types from the fixed set:
cover, agenda, section, content, two-column, closing. Use extensions only when needed: chart, quote, timeline, comparison.
- Apply predefined templates from
templates/; do not invent new layouts for standard slide types.
- Fill content into the named containers.
- Run capacity judgment before rendering: title length, bullet count, estimated lines, figure/table size.
- Auto-correct overflow: shrink titles slightly, paginate body content, split tables, contain figures, or switch to a better slide type.
- Run
js/layout-check.js in a browser context and fix issues before final delivery.
- Deliver final HTML/CSS/JS/assets and summarize layout-check status.
Inputs
Accept JSON like:
{
"theme": "fudan-blue",
"aspectRatio": "16:9",
"slideSize": { "width": 1920, "height": 1080 },
"language": "zh-CN",
"logoSrc": "assets/images/fudan_wordmark.png",
"deckTitle": "汇报标题",
"subtitle": "副标题 / 课程名称",
"reporter": "XXX",
"department": "XXX",
"date": "2026年6月",
"email": "example@fudan.edu.cn",
"showMotto": true,
"showPageNumber": true,
"styleVariant": "academic-clean",
"sections": []
}
Default values must work. If no logoSrc is provided, use assets/images/fudan_wordmark.png when bundled and copied into the output folder. If structured assets cannot be delivered, replace logoSrc with an inline data:image/png;base64,... URI or a public URL. If unavailable, use assets/logo-placeholder.svg. Do not invent official logo details.
Visual Rules
Use a formal Fudan blue-white academic style:
- Use deep blue and white as the dominant palette.
- Use dark gray for body text, never pure black for long body copy.
- Use light blue lines for dividers and low-opacity decoration.
- Use a pure white slide background (
#FFFFFF) by default for formal course reports. Do not use page-level radial gradients, linear gradients, light glows, or atmospheric tinted backgrounds unless the user explicitly asks for them.
- Use full blue wave footers on cover, agenda, and closing slides, but keep their footer content clean: show the page number only unless the user explicitly asks for footer text. Prefer pure-color footers and title rules; avoid gradient footers or gradient title underlines by default.
- Use pure-color card backgrounds such as white or very pale blue. Gradients are not allowed on cards; use a restrained shadow or low-opacity blue glow for depth.
- Avoid high-saturation red, orange, purple, decorative textures, heavy shadows, cartoon elements, and crowded content.
Header And Section Label Rules
User-preferred Fudan deck chrome:
- For body/content slides, reserve the upper-left header zone for the current chapter / section name, e.g.
01 问题背景, 02 方法框架, or 本章：估值流程. This section label is a primary navigation cue, not a tiny eyebrow: use about 30-34px at 1920x1080, weight 700, and align it to the safe margin. Wrap the numeric prefix in a latin/numeric span when possible so it uses Times New Roman.
- Move the compact Fudan wordmark / brand mark to the upper-right on body/content slides. It should sit near the top-right safe margin and be right-aligned inside its container; avoid a large empty gap to the right edge. Do not place the brand wordmark in the upper-left on standard inner pages, because that position is reserved for the section label. Use the real bundled
assets/images/fudan_wordmark.png when present; do not recreate the wordmark as editable text.
- The page title should sit below this header zone and should not overlap either the section label or the upper-right brand mark. On dense academic content slides, default to about 46-54px at 1920x1080; do not use cover-scale titles on inner pages.
- Inner-page titles should use formal academic-report wording. Avoid colloquial or conversational headings such as
为什么...？, 到底..., 干嘛, 真正想说什么, or casual 做什么/怎么沟通 phrasing. Prefer patterns like 研究背景：..., 方法框架：..., 实验设计：..., 实验结果：..., 机制分析：..., and 结论与讨论：....
- Section divider slides should still show the large section number and title, but the large section number must read as an intentional background/anchor element, not as a top-left header label.
- Cover, agenda, and closing pages should stay clean: do not show the upper-left Fudan logo/wordmark block and do not show the lower-left motto text
博学而笃志 切问而近思.
- Do not add decorative bullet-dot prefixes in the cover meta row by default. If reporter, department, date, or email are shown, use plain aligned text or subtle separators rather than leading
● markers.
Core colors:
:root {
--fudan-blue: #003F88;
--fudan-blue-deep: #002B5E;
--fudan-blue-mid: #2F6FB3;
--fudan-blue-light: #DCEAF8;
--fudan-blue-pale: #EEF5FC;
--text-main: #1F2A36;
--text-secondary: #4B5563;
--line-light: #BFD5EE;
--bg-white: #FFFFFF;
}
Slide Stage
Use a fixed stage:
.slide {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
background: var(--bg-white);
box-sizing: border-box;
}
Development may use 1600 x 900, but final CSS must expose the stage through variables and preserve 16:9. Do not let body natural flow determine slide height.
For browser usability, the delivered index.html must not require the user to manually zoom the browser to 30-50% to see one complete slide. Keep the canonical slide stage fixed for export/print, but wrap slides in a responsive preview layer that scales them to fit the viewport width in normal browsing. Use CSS such as a --preview-scale variable, transform: scale(...), transform-origin: top center, or an equivalent .slide-shell layout so each slide is viewable at a practical default size while preserving 16:9 geometry.
Use safe zones:
- General safe margin: 72px.
- Content top after title: usually 260px or lower.
- Content bottom before minimal footer: at least 120px.
- Full footer height: 160-190px.
- Minimal footer height: 72-96px.
Typography
Use serif Chinese fonts for large academic titles and sans-serif fonts for body copy:
--font-title-cn: "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", "Microsoft YaHei", serif;
--font-body-cn: "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
--font-latin: "Times New Roman", Times, serif;
Use --font-latin for all English and numeric text, including English subtitles, abbreviations such as DCF/WACC, section numbers, agenda/page numbers, dates, chart values, formula labels, and standalone numeric callouts. Chinese title/body text should continue to use the Chinese title/body font variables.
Use stable hierarchy:
- Cover title: 88-112px, weight 700, line-height 1.08, max 2 lines.
- Page title: 46-56px, weight 700, line-height 1.15, max 2 lines; reserve larger sizes only for section divider slides.
- Level 1 heading: 30-38px, weight 700.
- Level 2 heading: 24-30px, weight 600.
- Body: 26-30px, line-height 1.55.
- Caption/page/meta: 18-22px.
Hard minimums:
- Body text: never below 20px.
- Captions: never below 16px.
- Tables: never below 18px.
- Do not shrink unlimited content to fit; paginate instead.
Fixed Slide Types
Use only predefined layouts unless the user content requires an extension.
cover
Use left-middle title, optional English title, subtitle, optional plain meta row, right low-opacity Fudan emblem watermark, and full footer wave. Do not use the same upper-left compact brand header that inner pages use; keep the cover visually clean. Do not show the lower-left motto in the footer. Do not add leading ● bullets to meta items by default. Title max 2 lines; if longer, shrink within the allowed range, then split or move detail to subtitle. The subtitle is optional, but when present it must wrap to show the full text and must not be ellipsized.
agenda
Use large “目录”, 4-6 aligned items with blue number blocks and connector lines, right watermark, and full footer. Do not show the upper-left Fudan logo/wordmark block or the lower-left motto. More than 6 items means two columns or a second agenda slide.
section
Use large section number and title with one short description. Keep generous whitespace, low-opacity geometric/campus background, and minimal footer.
content
Use a compact upper-right brand header, upper-left current section label, page title, text panel, optional figure panel, and minimal footer. Supported variants:
text-image: left text, right figure.image-text: left figure, right text.full-text: full-width text.full-figure: large contained figure, optional caption.title-bullets: title plus key bullets.
Capacity: max 5 bullets per page, max 2 visual lines per bullet, max 8-12 body lines total.
two-column
Use two equal cards with aligned headings and bullets. Each card max 5 bullets, max 2 lines per bullet. Use pure white or very pale blue card backgrounds, thin borders, a restrained shadow or glow, and radius no greater than 8px.
chart
Use for one primary chart plus a concise insight panel. The chart must be the dominant element and should answer one analytical question.
Structure:
- Compact brand header, page title, large chart canvas, right or bottom insight panel, optional source note, minimal footer.
- Chart canvas should use
chart-panel with a fixed plot area; legends and axis labels must sit inside the panel and not overlap data marks.
- Insight panel should contain 3-4 bullets, max 2 lines each, or 2-3 metric cards.
Capacity:
- One main chart per slide; use small multiples only when each panel has a shared scale and no more than 4 panels.
- Max 8 x-axis categories for bar/line charts; max 5 slices for pie/donut charts.
- Chart labels: at least 18px; axis/title labels: at least 20px; insight body: 26-30px.
Rules:
- Prefer SVG or HTML/CSS charts generated in the deck; external chart images must use
object-fit: contain.
- Use Fudan blue plus neutral gray; one accent color is allowed for contrast.
- Include source/口径 note when data is shown.
- If a chart needs a dense table to explain it, split into a separate content or comparison slide.
quote
Use for a key statement, thesis, policy quote, expert view, or transition argument. Keep it sparse and editorial.
Structure:
- Compact or large brand header, quote text block, attribution/source line, optional short implication box, low-opacity watermark, minimal footer.
- Quote block should be centered-left or centered; attribution sits directly below and must not enter the footer.
Capacity:
- Quote text max 70 Chinese characters or 45 English words.
- Attribution max 1 line; implication box max 2 bullets.
- Quote font 48-68px for Chinese, 38-54px for English; never below 34px.
Rules:
- Use opening quote mark decoration only if it does not compete with the text.
- Do not place long paragraphs in a quote slide; convert long material to a content page.
- Do not fabricate quotes. If the quote is paraphrased, label it as 观点摘要 or 核心表述 rather than direct quotation.
timeline
Use for development history, research plan, project milestones, policy evolution, product roadmap, or transaction chronology.
Structure:
- Compact brand header, page title, horizontal timeline across the content area, 4-6 milestone nodes, optional bottom note, minimal footer.
- Each milestone uses date/phase, short heading, and one concise description.
Capacity:
- 4-6 nodes per slide. More than 6 nodes requires a second timeline slide.
- Date/phase label max 12 Chinese characters; milestone heading max 14 Chinese characters; description max 2 lines.
- Node body text at least 22px; date labels at least 20px.
Rules:
- Use fixed grid positions; connectors must terminate at node centers or edges.
- Keep all nodes aligned to the same baseline unless a two-row timeline is explicitly needed.
- Do not use diagonal or decorative connector paths that cross labels.
comparison
Use for valuation comparison, method comparison, before/after, alternatives, peer group analysis, or pros/cons.
Structure:
- Compact brand header, page title, comparison grid, optional conclusion strip, minimal footer.
- Supported variants: two-column cards, three-column cards, matrix table, or scored comparison.
Capacity:
- Two-column: max 5 bullets per side.
- Three-column: max 4 bullets per column.
- Matrix: max 5 columns and 6 rows; split or summarize larger tables.
- Body text at least 20px; table text at least 18px.
Rules:
- Use consistent row heights and aligned headings to support scanning.
- Highlight only the decisive differences; avoid coloring every cell.
- If comparing companies or securities, include metric definitions and date/period口径.
closing
Use “感谢聆听”, “Q&A”, reporter/email, right watermark, and full footer. Do not show the upper-left Fudan logo/wordmark block or the lower-left motto. Keep it sparse.
Pro Extension: Unified Grid + Extended Academic Layouts
This deck ships a Pro extension (css/grid.css + css/components-pro.css + templates/pro-*.html) that adds a unified grid system and 11 extra academic layouts. It exists to fix three recurring problems: inconsistent spacing, component overlap, and template scarcity. Preview all layouts with example content in gallery.html.
Anti-overlap rule (MANDATORY for Pro layouts)
Do NOT hard-code per-element position: absolute coordinates for Pro content. Instead place all main content inside a single .stage-body container and lay it out with grid/flex utility classes. .stage-body is a fixed safe rectangle (below the title, above the footer) defined once in css/grid.css, so content can never collide with the section label, page title, brand mark, or footer.
<main class="stage-body">
<div class="grid grid-3 gap-lg"> ... cards ... </div>
</main>
Unified grid tokens (override the legacy 72/84/92/96px drift):
--grid-x: 96px;
--grid-body-top: 288px;
--grid-body-bottom: 132px;
--grid-gap: 40px;
Grid utilities: .grid + .grid-2/.grid-3/.grid-4/.grid-2-1/.grid-1-2/.grid-golden, row helpers .rows-auto-1, span helpers .col-span-2, spacing .gap-lg/.gap-sm, and .stack + .flex-fill for vertical title/content stacking. Every grid/stack child gets min-width:0; min-height:0 so long content shrinks instead of bursting the container.
Pro title box: .slide-pro .content-title is widened to the full safe area, wraps to 2 lines, and is fixed at 46px — it does not rely on fit-text.js to avoid clipping. Add class slide-pro to every Pro <section class="slide ...">.
New slide types (templates/pro-*.html)
pro-metrics: four stat cards (first one filled/highlighted). For key figures and result overviews. Max 4 cards; value uses --font-latin.pro-process: 4-step horizontal flow with arrow connectors. For experiment pipelines and method steps. Max 4 steps, description max 4 lines.pro-vprocess: left description panel + right numbered vertical axis. For algorithm steps and derivations. Max 3-4 steps.pro-question: three RQ cards (tag + question + note). For thesis-proposal / defense research questions. Max 3 questions, question max 3 lines.pro-matrix: labeled 2x2 quadrant with axes. For positioning analysis, SWOT, prioritization. Max 3 bullets per cell.pro-data-table: normalized academic table (zebra rows, highlight row, right-aligned numbers). Max 6 columns / 8 rows; numbers use --font-latin.pro-team: four avatar/name/role/note cards. For acknowledgements and lab intros. Avatar accepts an initial glyph or <img>.pro-references: two-column auto-numbered citation list. Latin text uses Times New Roman. Max ~6-8 entries per slide, each clamped to 2 lines.pro-framework: golden-ratio split of an inline SVG framework diagram + a bullet panel. Follow FrameworkDiagram anchor rules for connectors.pro-icon-points: two-column numbered points (title + description). For contributions, innovations, significance. Up to 6 points.pro-prose-two: two titled prose columns + a bottom conclusion strip. For conclusions, discussion, limitations.
Pro capacity + validation
Pro layouts inherit the global Overflow Policy. Because content lives in .stage-body, most overflow is prevented structurally, but still: keep card/cell text within the stated max lines (components clamp with -webkit-line-clamp), never exceed the stated item counts, and never drop body text below 20px. Validate the same way — render and check that .stage-body bottom does not cross the footer top and the title does not overlap the section label.
Gallery
gallery.html renders all 22 layouts (11 native + 11 Pro) at scaled preview size with a real thesis-defense example (long-context RAG robustness). Open it to browse every template. Its .slide-shell wraps each .slide with transform: scale(...) using a UNITLESS factor (e.g. scale(0.58333)); never write scale(calc(1120px/1920)) because a px-bearing ratio is invalid and the scale silently fails.
Components
Implement or reuse these components:
BrandHeader(logoSrc, universityNameCn, universityNameEn, size): fixed brand zone, large/small variants, bundled Fudan assets preferred. When used on body/content slides, position it upper-right by default; avoid upper-left placement unless the user explicitly asks.SectionLabel(sectionName, sectionNumber): upper-left header label for the current chapter / section on body/content slides. It must use the section name from the agenda or inferred structure, stay compact, and never collide with the page title.SlideTitle(title, subtitle): title max 2 lines, controlled font scaling, blue divider. Subtitle remains optional and should only render when provided; when rendered, it wraps fully and is not ellipsized.FooterWave(variant, showMotto, pageNumber): full, minimal, or none; never overlaps content. On cover, agenda, and closing pages, default showMotto to false.EmblemWatermark(position, opacity): official emblem PNG watermark when available, pointer-events: none, low z-index. Prefer this over building line art unless the user explicitly asks for campus illustration.BulletList(items, maxItems, maxLinesPerItem): capacity-aware, returns overflow instead of stuffing.FigurePlaceholder(imageSrc, caption): object-fit: contain, caption below, dashed placeholder when empty.FrameworkDiagram(nodes, edges): for inline SVG diagrams, define node rectangles first, then connect edges to explicit node anchor coordinates. Use grid-aligned orthogonal paths or simple arrows. Never draw connector lines by eye; lines must terminate at node edges or arrowheads and must not cross labels.InfoMetaRow(reporter, department, date, email): aligned meta text, hide empty values, max 3-4 items. On cover slides, do not use leading bullet-dot icons by default; use plain text or subtle separators.
Layering
Use this z-index scale:
.slide-bg { z-index: 0; }
.campus-line-art, .watermark { z-index: 1; }
.footer-wave { z-index: 2; }
.brand-header, .slide-content, .slide-title, .meta-row { z-index: 5; }
Do not use arbitrary high z-index values. Backgrounds must never sit above readable content.
Overflow Policy
Highest priority order:
- No overflow.
- Readability.
- Visual consistency.
- Content completeness.
- Decorative richness.
Apply:
- Long titles: allow max 2 lines, shrink up to 15%, then ellipsize or suggest split.
- Long body: paginate; never reduce body below 20px.
- Too many bullets: split into continuation slides with title
原标题（续）.
- Long bullet: split by Chinese punctuation, then ellipsize only if unavoidable.
- Large image: contain within the figure panel and preserve aspect ratio.
- Inline SVG diagram: align every node to a fixed grid, set all
text-anchor values intentionally, keep labels centered inside nodes, and connect paths to known anchors such as left, right, top, bottom, or center. Re-run layout check and visually inspect the SVG after any coordinate edit.
- Large table: max 6 columns and 8 rows per slide; summarize, split, or convert to cards.
Use js/fit-text.js only for titles and small text blocks. Use js/auto-paginate.js for body content.
Validation
Before delivery, run window.FudanLayoutCheck.checkDeck() in a browser after rendering. Fix all blocking issues:
- Slide aspect ratio not 16:9.
- Scrollbars or slide boundary overflow.
- Text or image overflow.
- Body content entering footer area.
- Title overlapping logo.
- Elements outside safe margins.
- Fonts below minimum size.
- Background or footer covering content.
Report whether layout check passed. If warnings remain, list them and explain why they are acceptable.
Bundled Resources
templates/: fixed HTML snippets for each slide type.scripts/prepare_assets.py: copies bundled assets/, css/, and js/ into an output folder; optionally rewrites HTML image/SVG references to inline data: URLs for platforms that cannot carry asset files.css/fudan-theme.css: color, typography, and global deck rules.css/layout.css: fixed slide geometry, safe zones, variants, print rules.css/components.css: reusable component styles.js/fit-text.js: title and small-block text fitting helpers.js/auto-paginate.js: deterministic content pagination helpers.js/layout-check.js: browser validation helpers.assets/images/: user-provided Fudan logo and wordmark PNG files.assets/campus-line-art.svg: abstract campus line-art background.assets/footer-wave.svg: reusable wave footer shape.assets/logo-placeholder.svg: fallback non-official logo placeholder.examples/: sample input and sample output deck.
Prohibitions
Do not:
- Output pure image PPTs.
- Bake editable text into background images.
- Use random layouts, random colors, or per-page styling drift.
- Use tiny fonts to force content into a page.
- Let body text enter the footer.
- Let images overflow or distort.
- Let title overlap logo.
- Add unlimited bullets.
- Use body natural flow as slide height.
- Depend on external CDNs for correct rendering.
- Deliver HTML that references missing skill-local assets or absolute local asset paths.
- Fabricate official Fudan logo details.
- Use complex background visuals that interfere with readability.
- Deliver final HTML without layout checking.
