1. 普通排版
Prompt
# Role
你是一位精通前端开发（HTML/CSS）和UI设计的专家，擅长制作高质量、商务风格的单页汇报幻灯片。
# Task
请帮我编写一个单文件的 HTML 页面，用于展示汇报内容。
页面不需要复杂的 JavaScript，重点在于通过 CSS 实现类似于 PPT 的精美排版。
# Content Topic (本次汇报的主题)
[在此处填写您的汇报内容，例如：关于公司年度预算审批流程的优化方案。内容包含现状痛点、优化后的流程图逻辑、以及需要领导决策的三个金额阈值点。]
# Design Style & Requirements (设计规范)
请严格遵守以下设计和代码规范：
1. 布局结构 (Layout)：
- 页面背景色为浅灰 (#eef2f5)。
- 核心容器 .slide-container 必须固定大小为 1280px x 720px (16:9 比例)，并在浏览器窗口中**水平垂直居中**。
- 容器内使用 Flexbox 或 CSS Grid 进行排版，严禁产生滚动条 (`overflow: hidden`)。
- 布局通常分为：顶部 Header（深蓝背景）、中间 Content（左右分栏或三列布局）、底部 Footer（极简信息）。
2. 配色方案 (Color Palette)：
- 主色调：商务蓝 (#0056b3) 用于标题、图标、强调文字。
- 辅助色：深蓝 (#004085) 用于 Header 渐变；浅蓝 (#e7f1ff) 用于背景装饰。
- 功能色：红色 (#d9534f) 用于警告/重点决策；绿色 (#28a745) 用于成功/通过状态。
- 文字色：深灰 (#333) 用于正文，白色用于深色背景上的文字。
3. UI 组件 (Components)：
- 卡片 (Cards)：使用白色背景，带有轻微的阴影 (`box-shadow: 0 4px 15px rgba(0,0,0,0.05)`) 和圆角 (8px)。
- 图标：必须引入 FontAwesome 6.0 CDN，并在标题、关键点前使用合适的 Icon。
- 标签 (Tags)：使用圆角小方块展示状态（如：已完成、待决策）。
- 列表：使用无序列表，去掉默认样式，改用自定义的圆点或图标作为 bullet。
4. Typography (排版)：
- 字体：'Microsoft YaHei', 'Helvetica Neue', sans-serif。
- 层次分明：H1 (26px+), H2/H3 (18-22px), 正文 (14-16px)。
5. 代码要求：
- 输出为一个完整的 HTML 文件。
- CSS 写在 <style> 标签内，不要外部链接。
- 代码整洁，注释清晰。
# Output
请直接生成 HTML 代码。
2. 表格排版
Prompt
# Role
你是一位专业的解决方案架构师，擅长制作对比鲜明的汇报材料。
# Task
请基于 AS-IS (现状) vs TO-BE (目标) 的逻辑，帮我编写一个 HTML 单页汇报代码。
# Design Requirements (样式规范)
1. 布局：使用 1280x720 固定容器。页面分为左右两栏对比，底部一栏展示 ROI。
2. 左栏 (AS-IS)：
- 标题：AS-IS 现状。
- 风格：灰色调/静默风格，强调痛点。
- 元素：使用“红色的叉”或“警告图标”列出 3 个核心问题。
3. 右栏 (TO-BE)：
- 标题：TO-BE 目标。
- 风格：商务蓝/高亮风格，强调解决方案。
- 元素：使用“绿色的勾”或“连接图标”列出 3 个对应的解决措施。
- 必须与左栏的问题一一对应（水平对齐）。
4. 底部栏 (ROI)：
- 展示 3 个核心价值数据（如：效率提升 50%，成本降低 20%）。
- 配上醒目的图标。
# Content (请替换为你的实际内容)
主题：[例如：传统 IDC 机房迁移至 AWS 云平台]
现状 1：硬件老化，扩容需采购周期 2 个月 -> 导致业务上线慢。
现状 2：单机房部署，无异地灾备 -> 存在数据丢失风险。
现状 3：运维依赖人工巡检 -> 故障发现滞后。
目标 1：弹性伸缩，资源秒级到位 -> 支撑业务敏捷迭代。
目标 2：多可用区(AZ)部署 -> 99.99% 高可用。
目标 3：云监控 + 自动化运维 -> 故障自动告警与自愈。
ROI：硬件成本降低 30%，部署效率提升 10 倍，SLA 提升至 99.99%。
# Output
输出完整的 HTML 代码，包含 FontAwesome 图标。