Commit 14727ad
feat: 新增赛博朋克风项目简介页 (动态拓扑图 + 流程图 + 通俗易懂)
放在 public/intro.html, 部署后访问:
https://ha2.digitalvio.shop/canvas/intro.html
设计:
- 暗黑赛博朋克风 — 紫黑底 (#05010f → #1a0a3a 渐变) + 网格 + 双色雾
- 主色霓虹品红 #ff2a6d / 副色霓虹青 #05d9e8 / 第三色紫 #a07cb8
- 字体: Noto Serif SC (大标题渐变) + Noto Sans SC (正文) + JetBrains Mono (代码态标签)
板块结构:
- Topbar — 状态条 + 进入画布链接
- Hero — ALETHEIA 大标题 (粉→青线性渐变) + 一句话定位 + 双 CTA
- 01 / WHAT IS IT — 通俗 3 步 (写下想法 / 启动引擎 / 看 Action Plan)
- 02 / DATA FLOW — SVG 动态拓扑图 (PROPOSER → REFUTER → SYNTHESIS 三层 + 流动虚线 + 节点入场动画)
- 03 / USER FLOW — 4 步用户视角流程图 (横向带 › 箭头连接)
- 04 / PERSONAS — 三个反驳人格卡片 (杠精/审计师/苏格拉底)
- 05 / SCENARIOS — 三种场景 (ToB/ToC/ToG) 权重说明
- Footer — GitHub + 演示房间链接
交互:
- IntersectionObserver 滚动入场 (translateY 40px → 0)
- 拓扑图节点用 CSS animation-delay 错峰出现 (REFUTER 0.3s/0.8s/1.3s/1.8s/2.3s, SYNTHESIS 3s)
- 边线 stroke-dasharray + stroke-dashoffset 动画营造数据流
build: 31KB intro.html, 直接 copy 到 dist/, 走 Caddy /canvas/* 静态文件路径.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>1 parent e7af521 commit 14727ad
1 file changed
Lines changed: 814 additions & 0 deletions
0 commit comments