Content To Html

/* 标题 */
font-family: "Outfit", sans-serif; /* 几何感、辨识度强 */
/* 正文 */
font-family: "Plus Jakarta Sans", sans-serif; /* 可读性强 */
/* 技术术语/代码/角标 */
font-family: "JetBrains Mono", monospace; /* 区分技术内容 */

页面结构

所有内容都应输出为单个 .html 文件，内联所有样式和脚本，无需外部图片。

典型结构如下（根据内容自行裁减）：

<header>
  <!-- Phase badge + 主标题 + 右侧进度环（可选） -->
</header>

<section class="goal-section">
  <!-- 核心目标/背景说明（一段话） -->
</section>

<div class="content-grid">
  <!-- 多个 <article class="card"> 展示分组内容 -->
</div>

<footer>
  <!-- 版本号 + 生成日期，增强截图的专业感 -->
</footer>

卡片与任务列表

这是最常用的内容单元：

<article class="card">
  <div class="card-header">
    <span class="card-id mono">01</span>
    <h3 class="card-title">分组标题</h3>
  </div>
  <ul class="task-list">
    <li class="task-item">
      <div class="check-box"></div>
      <!-- 未完成：空方框 -->
      <div class="task-content">任务描述</div>
    </li>
    <li class="task-item done">
      <div class="check-box checked">✓</div>
      <!-- 已完成 -->
      <div class="task-content">已完成的任务</div>
    </li>
  </ul>
</article>

卡片左侧竖条颜色在 --accent（蓝）和 --accent-alt（紫）之间交替，通过 .card.alternate::before 实现。

排版规范（截屏优化关键）

这些参数直接影响截图质量，理解背后的道理有助于维持平衡：

动态进度环（可选）

如果内容包含任务清单，可在 Header 右侧放置进度环，计算完成百分比：

const total = document.querySelectorAll(".task-item").length
const done = document.querySelectorAll(".task-item.done").length
const pct = total > 0 ? Math.round((done / total) * 100) : 0
// 用 SVG stroke-dashoffset 动画更新圆环

注意：对于静态展示，进度值直接基于 HTML 中的 .done class 计算，不需要点击交互和 localStorage。

入场动画

使用 Intersection Observer 实现卡片的交错淡入，让截屏前的页面加载更有质感：

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry, i) => {
    if (entry.isIntersecting) {
      setTimeout(() => entry.target.classList.add("visible"), i * 80)
    }
  })
})
document.querySelectorAll(".staggered").forEach((el) => observer.observe(el))

对应 CSS：

.staggered {
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.5s ease;
}
.staggered.visible {
  opacity: 1;
  transform: translateY(0);
}

专业页脚

截图页应包含页脚，增加可追溯性和专业感：

<footer>
  <span class="mono">CONTENT TITLE / PHASE/VERSION</span>
  <span>生成于 YYYY-MM-DD</span>
</footer>

工作流程

接到内容后按以下步骤执行：

1. 理解内容结构：识别顶层标题（版本/阶段号、目标），中层（功能分组），底层（具体任务项）
2. 决定网格布局：内容 ≤ 3 组用 2 列；≥ 4 组用 minmax(320px, 1fr) 自适应
3. 标记状态：带 [x] 的任务加 done class，带 [ ] 的不加
4. 生成文件：输出到用户当前项目目录下，文件名格式建议 v-[内容标识]-[版本].html（如 v-plan-0415.html）
5. 告知用户：提示用户在浏览器中打开文件，或直接用浏览器截全屏

常见内容类型参考

约束（始终遵守）

• 输出始终为单个 HTML 文件，所有样式内联，不引用本地图片
• 主题固定为亮色，不提供深色模式切换
• 布局优先紧凑：宁可信息稠密，也不要留白过多
• 无持久化：不使用 localStorage，不需要可勾选功能
• 背景图案/纹理效果要克制，截图清晰优先于视觉炫技