241 lines
10 KiB
HTML
241 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>演示幻灯片 - 10页测试夹具</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body { width: 100%; height: 100%; overflow: hidden; font-family: sans-serif; }
|
||
.slides { width: 100%; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; }
|
||
section {
|
||
width: 100%; height: 100vh; display: flex; flex-direction: column;
|
||
justify-content: center; align-items: center; padding: 60px;
|
||
scroll-snap-align: start; position: relative;
|
||
}
|
||
|
||
/* 第1页 - 标题页，白色背景 */
|
||
.slide-1 { background: #ffffff; text-align: center; }
|
||
.slide-1 h1 { font-size: 72px; color: #1a1a2e; margin-bottom: 20px; }
|
||
.slide-1 p { font-size: 28px; color: #666; }
|
||
|
||
/* 第2页 - 纯文字页，浅灰背景 */
|
||
.slide-2 { background: #f5f5f5; align-items: flex-start; }
|
||
.slide-2 h2 { font-size: 48px; color: #222; margin-bottom: 30px; }
|
||
.slide-2 p { margin-bottom: 18px; line-height: 1.6; }
|
||
.slide-2 .text-lg { font-size: 28px; }
|
||
.slide-2 .text-md { font-size: 22px; }
|
||
.slide-2 .text-sm { font-size: 16px; color: #666; }
|
||
|
||
/* 第3页 - 列表页，浅蓝背景 */
|
||
.slide-3 { background: #e8f4f8; align-items: flex-start; }
|
||
.slide-3 h2 { font-size: 48px; color: #0d47a1; margin-bottom: 24px; }
|
||
.slide-3 h3 { font-size: 30px; color: #1565c0; margin: 16px 0 8px; }
|
||
.slide-3 ul { margin-left: 40px; font-size: 22px; line-height: 1.8; }
|
||
.slide-3 li { margin-bottom: 6px; }
|
||
.slide-3 p { font-size: 20px; color: #333; margin: 4px 0; }
|
||
|
||
/* 第4页 - 不同颜色页面，浅黄背景 */
|
||
.slide-4 { background: #fffde7; }
|
||
.slide-4 h2 { font-size: 48px; margin-bottom: 30px; }
|
||
.slide-4 p { font-size: 28px; margin: 10px 0; }
|
||
.color-red { color: #e53935; }
|
||
.color-green { color: #43a047; }
|
||
.color-blue { color: #1e88e5; }
|
||
.color-orange { color: #fb8c00; }
|
||
.color-purple { color: #8e24aa; }
|
||
|
||
/* 第5页 - 粗体/斜体混排，浅紫背景 */
|
||
.slide-5 { background: #f3e5f5; }
|
||
.slide-5 h2 { font-size: 48px; margin-bottom: 30px; }
|
||
.slide-5 p { font-size: 28px; margin: 12px 0; }
|
||
.bold { font-weight: bold; }
|
||
.italic { font-style: italic; }
|
||
.bi { font-weight: bold; font-style: italic; }
|
||
|
||
/* 第6页 - 左中右对齐，浅绿背景 */
|
||
.slide-6 { background: #e8f5e9; }
|
||
.slide-6 h2 { font-size: 48px; margin-bottom: 30px; }
|
||
.slide-6 .row { width: 100%; display: flex; justify-content: space-between; }
|
||
.slide-6 .col { width: 30%; }
|
||
.slide-6 h3 { font-size: 30px; margin-bottom: 12px; }
|
||
.slide-6 p { font-size: 22px; line-height: 1.6; }
|
||
.align-l { text-align: left; }
|
||
.align-c { text-align: center; }
|
||
.align-r { text-align: right; }
|
||
|
||
/* 第7页 - 深色背景白字，深蓝背景 */
|
||
.slide-7 { background: #1a237e; color: #fff; }
|
||
.slide-7 h2 { font-size: 48px; margin-bottom: 24px; }
|
||
.slide-7 p { font-size: 26px; margin: 10px 0; line-height: 1.6; }
|
||
.slide-7 .accent { color: #ffd54f; }
|
||
|
||
/* 第8页 - 多段落长文，浅橙背景 */
|
||
.slide-8 { background: #fff3e0; align-items: flex-start; }
|
||
.slide-8 h2 { font-size: 44px; color: #bf360c; margin-bottom: 20px; }
|
||
.slide-8 p { font-size: 20px; line-height: 1.8; margin-bottom: 14px; color: #333; max-width: 900px; }
|
||
|
||
/* 第9页 - 不同字体族，浅粉背景 */
|
||
.slide-9 { background: #fce4ec; }
|
||
.slide-9 h2 { font-size: 48px; margin-bottom: 30px; }
|
||
.slide-9 p { font-size: 30px; margin: 14px 0; }
|
||
.font-serif { font-family: serif; }
|
||
.font-mono { font-family: monospace; }
|
||
.font-sans { font-family: sans-serif; }
|
||
.font-cursive { font-family: cursive; }
|
||
|
||
/* 第10页 - 结尾页，黑色背景 */
|
||
.slide-10 { background: #000; color: #fff; text-align: center; }
|
||
.slide-10 h1 { font-size: 60px; margin-bottom: 20px; }
|
||
.slide-10 p { font-size: 28px; color: #ccc; }
|
||
|
||
/* 翻页指示 */
|
||
.page-num {
|
||
position: absolute; bottom: 20px; right: 30px;
|
||
font-size: 16px; color: #999; font-family: sans-serif;
|
||
}
|
||
.slide-7 .page-num { color: #90caf9; }
|
||
.slide-10 .page-num { color: #666; }
|
||
|
||
/* 导航箭头 */
|
||
.nav-hint {
|
||
position: absolute; bottom: 20px; left: 30px;
|
||
font-size: 14px; color: #bbb;
|
||
}
|
||
.slide-7 .nav-hint { color: #5c6bc0; }
|
||
.slide-10 .nav-hint { color: #444; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slides">
|
||
|
||
<!-- ===== 第1页 标题页 ===== -->
|
||
<section class="slide-1">
|
||
<h1>HTML to PPTX</h1>
|
||
<p>HTML 转可编辑 PowerPoint 演示引擎</p>
|
||
<p style="font-size:18px;color:#999;margin-top:60px;">测试夹具 · 10页演示</p>
|
||
<div class="page-num">1 / 10</div>
|
||
<div class="nav-hint">↓ 向下滚动</div>
|
||
</section>
|
||
|
||
<!-- ===== 第2页 纯文字页 ===== -->
|
||
<section class="slide-2">
|
||
<h2>纯文字排版</h2>
|
||
<p class="text-lg">大号文字 — 28px，适合标题性内容</p>
|
||
<p class="text-md">中号文字 — 22px，主体段落常用字号</p>
|
||
<p class="text-sm">小号文字 — 16px，注释、引用、次要信息</p>
|
||
<p class="text-md">CSS 可以通过 font-size 精确控制各级文字大小，</p>
|
||
<p class="text-md">在 PPTX 转换时这些样式应当被保留为对应的字号。</p>
|
||
<div class="page-num">2 / 10</div>
|
||
<div class="nav-hint">↓ 继续</div>
|
||
</section>
|
||
|
||
<!-- ===== 第3页 列表页 ===== -->
|
||
<section class="slide-3">
|
||
<h2>内容结构</h2>
|
||
<h3>一、项目背景</h3>
|
||
<p>将 HTML 内容转换为 PowerPoint 演示文稿，保留富文本样式。</p>
|
||
<h3>二、核心功能</h3>
|
||
<ul>
|
||
<li>HTML → 结构化解析</li>
|
||
<li>样式映射到 PPTX 格式</li>
|
||
<li>支持批量页面导出</li>
|
||
</ul>
|
||
<h3>三、技术选型</h3>
|
||
<p>Playwright + pptxgenjs 组合方案</p>
|
||
<div class="page-num">3 / 10</div>
|
||
<div class="nav-hint">↓ 继续</div>
|
||
</section>
|
||
|
||
<!-- ===== 第4页 不同颜色页面 ===== -->
|
||
<section class="slide-4">
|
||
<h2>多彩文字</h2>
|
||
<p class="color-red">红色文字 — 醒目提示</p>
|
||
<p class="color-green">绿色文字 — 通过 / 成功</p>
|
||
<p class="color-blue">蓝色文字 — 链接 / 信息</p>
|
||
<p class="color-orange">橙色文字 — 警告 / 注意</p>
|
||
<p class="color-purple">紫色文字 — 特殊标注</p>
|
||
<div class="page-num">4 / 10</div>
|
||
<div class="nav-hint">↓ 继续</div>
|
||
</section>
|
||
|
||
<!-- ===== 第5页 粗体/斜体混排 ===== -->
|
||
<section class="slide-5">
|
||
<h2>字形混排</h2>
|
||
<p class="bold">这段话全部是粗体（font-weight: bold）</p>
|
||
<p class="italic">这段话全部是斜体（font-style: italic）</p>
|
||
<p class="bi">这段话既粗体又斜体</p>
|
||
<p>普通文字中混入<span class="bold"> 粗体 </span>和<span class="italic"> 斜体 </span>片段</p>
|
||
<p>同时<span class="bi"> 粗斜体 </span>与<span class="bold"> 粗体 </span>混合呈现</p>
|
||
<div class="page-num">5 / 10</div>
|
||
<div class="nav-hint">↓ 继续</div>
|
||
</section>
|
||
|
||
<!-- ===== 第6页 左中右对齐 ===== -->
|
||
<section class="slide-6">
|
||
<h2>文本对齐</h2>
|
||
<div class="row">
|
||
<div class="col align-l">
|
||
<h3>左对齐</h3>
|
||
<p>这是左对齐的段落文字，适合大段正文阅读，符合大多数语言的阅读习惯。</p>
|
||
</div>
|
||
<div class="col align-c">
|
||
<h3>居中</h3>
|
||
<p>这是居中对齐的段落文字，常用于标题、引言或强调性内容。</p>
|
||
</div>
|
||
<div class="col align-r">
|
||
<h3>右对齐</h3>
|
||
<p>这是右对齐的段落文字，常用于落款、日期或装饰性文字。</p>
|
||
</div>
|
||
</div>
|
||
<div class="page-num">6 / 10</div>
|
||
<div class="nav-hint">↓ 继续</div>
|
||
</section>
|
||
|
||
<!-- ===== 第7页 深色背景白字 ===== -->
|
||
<section class="slide-7">
|
||
<h2>深色背景</h2>
|
||
<p>白色文字在深蓝背景上呈现</p>
|
||
<p>高反色对比确保可读性</p>
|
||
<p class="accent">强调色使用黄色 (#ffd54f)</p>
|
||
<p>这种配色适用于晚间演示或科技感主题</p>
|
||
<p>转换引擎需要正确处理前景色与背景色关系</p>
|
||
<div class="page-num">7 / 10</div>
|
||
<div class="nav-hint">↓ 继续</div>
|
||
</section>
|
||
|
||
<!-- ===== 第8页 多段落长文 ===== -->
|
||
<section class="slide-8">
|
||
<h2>长文阅读</h2>
|
||
<p>HTML to PPTX 转换引擎的设计目标是让用户能够从熟悉的 Web 内容出发，快速生成可编辑的 PowerPoint 演示文稿。核心技术路线是利用 Playwright 渲染 DOM 树，提取每个元素的样式和几何信息，再通过 pptxgenjs 在 PPTX 文件中重建相应的文本块和形状。</p>
|
||
<p>样式映射是转换的核心挑战。CSS 中的 font-size、font-weight、font-style、color、text-align、background-color 等属性需要在 PPTX 的 XML 格式中找到对应表现。本项目目前采用按页截取的方式保留结构和样式信息。</p>
|
||
<p>测试夹具覆盖了常见的排版场景：不同字号、颜色、字形、对齐方式和背景色。后续还将增加表格、图片、列表嵌套等复杂场景的测试用例，确保转换引擎覆盖实际使用中的各类需求。</p>
|
||
<div class="page-num">8 / 10</div>
|
||
<div class="nav-hint">↓ 继续</div>
|
||
</section>
|
||
|
||
<!-- ===== 第9页 不同字体族 ===== -->
|
||
<section class="slide-9">
|
||
<h2>字体族展示</h2>
|
||
<p class="font-serif">衬线字体 — Serif（如 Times New Roman）</p>
|
||
<p class="font-sans">无衬线字体 — Sans-serif（如 Arial）</p>
|
||
<p class="font-mono">等宽字体 — Monospace（如 Courier New）</p>
|
||
<p class="font-cursive">手写体 — Cursive（如 Comic Sans）</p>
|
||
<p style="font-family:'Georgia', serif;">Georgia 衬线字体示例文字</p>
|
||
<div class="page-num">9 / 10</div>
|
||
<div class="nav-hint">↓ 继续</div>
|
||
</section>
|
||
|
||
<!-- ===== 第10页 结尾页 ===== -->
|
||
<section class="slide-10">
|
||
<h1>感谢阅读</h1>
|
||
<p>10页测试夹具已完成</p>
|
||
<p style="font-size:20px;color:#666;margin-top:40px;">HTML to PPTX · Test Fixture</p>
|
||
<div class="page-num">10 / 10</div>
|
||
<div class="nav-hint">翻页结束</div>
|
||
</section>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|