advanced-html-generator

# Advanced HTML Generator v3.0.0 - 终极版 生成专业级、功能超级强大、代码量 3000+ 行、特效总数 100+ 种的现代 HTML 网页，包含极致的高级功能和细腻动画效果。 ## 🎯 核心要求（必须遵守） 1. **代码量必须 ≥ 3000 行** - 这是硬性指标！（HTML 500+ / CSS 1000+ / JS 1500+） 2. **真实功能 > 视觉长度** - 代码要真正强大，功能要实用 3. **现代标准** - 使用 HTML5、CSS3、ES6+ 最新特性 4. **即开即用** - 生成的页面可直接在浏览器打开运行 5. **专业规范** - 代码结构清晰、注释完整、命名规范 6. **动画超细腻** - 每个动画都要流畅、细腻、有层次感 7. **特效出乎意料** - 加入让人眼前一亮的特殊效果 8. **性能优化** - 使用 requestAnimationFrame、防抖节流、虚拟滚动等 9. **所有按钮必须可点击** - 每个按钮都要有实际功能，不能是 disabled 或装饰 10. **特效总数 ≥ 100 种** - 视觉效果 + 动画效果 + 交互功能 + 数据可视化 ≥ 100 ## 🚀 必选超级功能清单（v3.0.0 终极版） ### 视觉效果（必须包含 20+ 种） - ✅ **粒子背景动画** - 鼠标移动时粒子跟随、连线、排斥效果 - ✅ **3D 卡片翻转/倾斜效果** - 鼠标悬停时 3D 变换、透视效果 - ✅ **渐变边框/流光溢彩动画** - 边框彩色流动、霓虹灯效果 - ✅ **霓虹灯/发光文字效果** - 文字发光、闪烁、彩虹渐变 - ✅ **星空/闪烁背景** - 动态星空或光点、流星效果 - ✅ **视差滚动效果** - 多层背景不同速度滚动、鼠标视差 - ✅ **毛玻璃/模糊效果** - backdrop-filter 应用、玻璃态设计 - ✅ **波纹/水波纹效果** - 点击时波纹扩散、涟漪效果 - ✅ **加载进度条/骨架屏** - 页面加载动画、进度指示 - ✅ **打字机/逐字显示效果** - 文字逐个显示、光标闪烁 - ✅ **矩阵雨效果** - 黑客帝国风格的文字雨 - ✅ **赛博朋克风格** - 霓虹色彩、网格线、扫描线 - ✅ **全息投影效果** - 3D 投影、光线折射 - ✅ **火焰/粒子爆炸效果** - Canvas 粒子系统 - ✅ **音频可视化** - Web Audio API 音频波形显示 - ✅ **烟雾/云朵效果** - Canvas 烟雾粒子 - ✅ **水波/液体效果** - 鼠标点击产生水波 - ✅ **闪电/电弧效果** - 随机闪电效果 - ✅ **彩虹渐变背景** - 动态彩虹渐变 - ✅ **像素化效果** - 像素风格滤镜 ### 动画效果（必须包含 35+ 种） - ✅ **滚动触发动画** - Intersection Observer 实现、多重触发 - ✅ **元素依次进场** - 每个元素不同方向飞入（15+ 方向） - ✅ **数字滚动计数** - 统计数字从 0 滚动到目标、缓动函数 - ✅ **悬停微动画** - 按钮、卡片悬停时的细腻反馈 - ✅ **页面过渡动画** - 页面切换时的过渡效果 - ✅ **鼠标跟随效果** - 元素跟随鼠标移动、磁吸效果 - ✅ **弹性/回弹动画** - 使用 cubic-bezier 弹性曲线 - ✅ **旋转/缩放组合动画** - transform 多重变换 - ✅ **颜色渐变动画** - 背景色、文字色渐变过渡 - ✅ **路径动画** - 元素沿路径移动、贝塞尔曲线 - ✅ **抖动/摇摆动画** - 错误提示、警告效果 - ✅ **心跳动画** - 脉冲效果、呼吸灯 - ✅ **翻转卡片动画** - 3D 翻转动画 - ✅ **折叠/展开动画** - 手风琴效果 - ✅ **进度条动画** - 圆形/线性进度条 - ✅ **文字烟雾效果** - 文字消散、聚集 - ✅ **图片滤镜动画** - 黑白、复古、鲜艳等滤镜切换 - ✅ **阴影动画** - 动态阴影、光晕效果 - ✅ **边框绘制动画** - 边框从无到有绘制 - ✅ **背景网格动画** - 网格线移动、消失 - ✅ **波浪动画** - 波浪形运动 - ✅ **螺旋动画** - 螺旋形进入/退出 - ✅ **爆炸动画** - 元素爆炸分散 - ✅ **融化动画** - 元素融化效果 - ✅ **粒子聚集动画** - 粒子聚集成形 - ✅ **星系旋转动画** - 行星绕轨道旋转 - ✅ **磁铁吸引动画** - 元素被吸引效果 - ✅ **果冻/弹性动画** - 果冻般的弹性 - ✅ **纸张翻转动画** - 翻书效果 - ✅ **窗帘开启动画** - 窗帘拉开效果 - ✅ **放大镜动画** - 鼠标悬停放大 - ✅ **万花筒动画** - 对称旋转效果 - ✅ **分形动画** - 分形图案生成 ### 交互功能（必须包含 20+ 种） - ✅ **暗黑模式切换** - 完整的主题切换系统、跟随系统 - ✅ **拖拽排序** - 卡片可拖拽重新排列、本地存储 - ✅ **手势操作** - 移动端滑动、捏合、长按等 - ✅ **右键菜单** - 自定义上下文菜单、多级菜单 - ✅ **键盘快捷键** - 键盘操作支持、组合键 - ✅ **复制到剪贴板** - 一键复制功能、复制成功提示 - ✅ **模态框/弹窗系统** - 多种弹窗样式、动画 - ✅ **表单验证+动画** - 实时验证+错误提示动画 - ✅ **搜索+筛选+排序** - 完整的数据操作 - ✅ **本地存储** - LocalStorage 数据持久化 - ✅ **无限滚动** - 滚动加载更多 - ✅ **虚拟滚动** - 大数据列表优化 - ✅ **实时搜索** - 防抖搜索、高亮显示 - ✅ **拖放上传** - 文件拖放上传、进度显示 - ✅ **全屏模式** - 全屏切换、退出提示 - ✅ **打印功能** - 页面打印、打印预览 - ✅ **分享功能** - 社交分享、复制链接 - ✅ **语音朗读** - TTS 语音合成 - ✅ **截图功能** - Canvas 截图、下载 - ✅ **导出功能** - 导出 PDF/图片/JSON ### 数据可视化（必须包含 10+ 种） - ✅ **Canvas 绘制图表** - 饼图、柱状图、折线图、雷达图 - ✅ **进度环/圆形进度条** - CSS 或 Canvas 实现 - ✅ **标签云/词云** - 动态标签展示、点击交互 - ✅ **时间轴** - 历史事件时间轴、可折叠 - ✅ **关系图/网络图** - 节点连接图、力导向图 - ✅ **热力图** - 数据热力分布 - ✅ **实时数据更新** - WebSocket 或轮询 - ✅ **3D 图表** - WebGL 3D 可视化 - ✅ **地图可视化** - 地图标记、路径规划 - ✅ **树状图/思维导图** - 节点树展示 - ✅ **桑基图** - 流量分布图 - ✅ **漏斗图** - 转化率可视化 - ✅ **仪表盘** - 速度表、温度计 ### 响应式设计（必须完美适配） - ✅ **移动优先** - Mobile First 策略 - ✅ **媒体查询** - 至少 5 个断点（480px/768px/1024px/1200px/1400px） - ✅ **弹性布局** - Flexbox + Grid 组合 - ✅ **汉堡菜单** - 移动端导航菜单、手势滑动 - ✅ **触摸优化** - 触摸事件处理、防误触 - ✅ **横屏适配** - 横屏模式优化 - ✅ **安全区域适配** - iPhone X+ 刘海屏适配 - ✅ **字体响应式** - clamp() 函数响应式字体 ### 性能优化（必须实现） - ✅ **防抖与节流** - 滚动、输入等事件优化 - ✅ **图片懒加载** - Intersection Observer 实现 - ✅ **虚拟滚动** - 大数据列表优化 - ✅ **Web Worker** - 复杂计算放到后台 - ✅ **requestAnimationFrame** - 动画性能优化 - ✅ **CSS 动画优先** - transform、opacity 避免重排 - ✅ **代码分割** - 按功能模块化 - ✅ **Tree Shaking** - 只引入使用的代码 ## 📏 代码量达标策略（v3.0.0） ### HTML 部分（目标 500+ 行） - 语义化标签完整 - 结构清晰、嵌套合理 - 注释分区明确（25+ 分区） - 数据属性丰富（data-*） - ARIA 无障碍属性完整 - SEO meta 标签完整 - Open Graph 社交分享标签 - 结构化数据（JSON-LD） ### CSS 部分（目标 1000+ 行） - 至少 100 个选择器 - 35+ 个动画定义（@keyframes） - 完整的响应式媒体查询（5+ 断点） - 详细的注释说明（每 10 行一个注释） - CSS 变量系统（:root 定义 60+ 变量） - 工具类（utility classes）80+ - 打印样式（@media print） - 暗黑模式完整适配 - 动画性能优化注释 ### JavaScript 部分（目标 1500+ 行） - 至少 30 个功能函数 - 完整的事件监听系统（20+ 事件） - 数据处理逻辑（增删改查） - Canvas 绘图代码（5+ 个画布） - Web Audio API 代码 - 详细的注释（每行关键代码都有注释） - JSDoc 注释（每个函数） - 错误处理（try-catch） - 性能监控代码 ## 🎨 代码生成规范（v3.0.0 终极版） ### 注释要求（必须超详细） ```css /* ========================================== 区域说明：导航栏样式 作者：AI Generator v3.0.0 日期：2026-06-23 功能：固定顶部、透明背景、滚动变色、毛玻璃效果 兼容性：Chrome 90+, Firefox 88+, Safari 14+ 性能：使用 transform 优化动画性能 TODO：添加多语言支持 ========================================== */ ``` ```javascript /** * 函数名称：initParticleSystem * 功能：初始化粒子背景系统 * 参数：无 * 返回：无 * 作者：AI Generator v3.0.0 * 日期：2026-06-23 * 版本：v3.0.0 * 依赖：无 * 兼容性：现代浏览器 * 性能：使用 requestAnimationFrame 优化 * 示例： * initParticleSystem(); * 注意：会创建全屏 Canvas 元素 */ ``` ### 代码格式要求 - 缩进：2 空格（统一） - 引号：单引号（JS）、双引号（HTML 属性） - 分号：必须（每行结尾） - 空格：运算符两侧、逗号后必须有空格 - 空行：逻辑块之间必须有空行 ### 命名规范 - CSS 类名：kebab-case（如：skill-card） - JS 变量：camelCase（如：skillList） - JS 常量：UPPER_SNAKE_CASE（如：MAX_COUNT） - 函数名：动词开头（如：initTheme、loadData） - 自定义属性：data-kebab-case（如：data-skill-id） ## 🔥 工作流程（v3.0.0 终极版） ### Step 1：解析用户需求（两句话） **第一句话** - 页面内容： - 用户想要什么类型的页面？ - 页面主要展示什么内容？ **第二句话** - 高级功能： - 需要什么交互效果？ - 需要什么高级特性？ - 目标用户和设备？ ### Step 2：功能规划（终极版） **必选功能清单（根据需求从上面选择，但必须 ≥ 3000 行，特效 ≥ 100 种）：** 1. 选择 20+ 种视觉效果 2. 选择 35+ 种动画效果 3. 选择 20+ 种交互功能 4. 选择 10+ 种数据可视化 5. 完整的响应式设计（5+ 断点） 6. 性能优化（8+ 项） 7. **所有按钮必须可点击**（每个按钮都有真实功能） 8. **特效总数 ≥ 100 种** **额外加分项（可选）：** - 加入音效（Web Audio API） - 加入震动反馈（Vibration API） - 加入语音识别（Speech API） - 加入摄像头/麦克风（getUserMedia） - 加入 WebGL 3D 效果 - 加入 WebSocket 实时通信 - 加入 Service Worker 离线支持 - 加入 WebRTC 视频通话 - 加入 Geolocation 地理位置 - 加入 Canvas 游戏 ### Step 3：代码生成（重点中的重点！） **生成策略：** 1. **先写详细注释框架** - 规划好每个部分要写什么（150+ 行注释） 2. **HTML 结构** - 完整、语义化、有层次（500+ 行） 3. **CSS 样式** - 变量系统、动画定义、响应式（1000+ 行） 4. **JavaScript 功能** - 模块化、函数化、详细注释（1500+ 行） 5. **检查代码行数** - 如果不够 3000 行，继续添加： - 更多动画变体（15+ 新增） - 更多交互细节（拖拽、手势等） - 更多注释说明（每个函数都加 JSDoc） - 更多功能函数（工具函数、数据处理） - 更多 Canvas 效果（粒子、图表等） - 更多响应式细节（5+ 断点完整适配） 6. **检查特效数量** - 如果不够 100 种，继续添加： - 更多视觉效果（5+ 新增） - 更多动画效果（10+ 新增） - 更多交互功能（5+ 新增） 7. **检查按钮可点击性** - 每个按钮都要有实际功能，不能是 disabled 或装饰 **代码行数检查清单：** - [ ] HTML ≥ 500 行 - [ ] CSS ≥ 1000 行 - [ ] JavaScript ≥ 1500 行 - [ ] 总计 ≥ 3000 行 **特效数量检查清单：** - [ ] 视觉效果 ≥ 20 种 - [ ] 动画效果 ≥ 35 种 - [ ] 交互功能 ≥ 20 种 - [ ] 数据可视化 ≥ 10 种 - [ ] 总计 ≥ 100 种 **按钮可点击检查清单：** - [ ] 每个按钮都有 onclick 或其他事件监听 - [ ] 没有 disabled 按钮（除非是临时状态） - [ ] 没有空函数或 alert('演示') 之类的假功能 - [ ] 每个按钮都有实际、有用的功能 ### Step 4：质量检查（必须全部通过） **功能检查：** - [ ] 所有动画流畅运行（60fps） - [ ] 所有交互功能正常 - [ ] 所有按钮都可点击且有实际功能 - [ ] 响应式完美适配（5+ 断点） - [ ] 暗黑模式切换正常 - [ ] 无 JavaScript 错误（控制台） - [ ] 无障碍访问支持（ARIA） - [ ] SEO 优化（meta 标签） **代码检查：** - [ ] 代码行数 ≥ 3000 行（必须！） - [ ] 特效总数 ≥ 100 种（必须！） - [ ] 注释覆盖率 ≥ 40% - [ ] 无冗余代码 - [ ] 缩进统一 - [ ] 命名规范 - [ ] JSDoc 注释完整 **性能检查：** - [ ] Lighthouse 性能评分 ≥ 90 - [ ] 首屏加载时间 < 2s - [ ] 动画使用 transform/opacity - [ ] 图片懒加载实现 - [ ] 防抖节流实现 **兼容性检查：** - [ ] Chrome 90+ 正常 - [ ] Firefox 88+ 正常 - [ ] Safari 14+ 正常 - [ ] 移动端浏览器正常 - [ ] 平板设备正常 ### Step 5：输出格式 **输出内容：** 1. **功能清单** - 列出实现的所有功能（带 emoji、分类、计数） 2. **代码统计** - HTML/CSS/JS 行数统计、注释覆盖率 3. **特效统计** - 视觉效果/动画效果/交互功能/数据可视化 数量 4. **性能报告** - 优化项、兼容性 5. **完整代码** - 单个 HTML 文件（包含内联 CSS 和 JS） 6. **使用说明** - 如何运行、修改、扩展 7. **兼容性说明** - 支持的浏览器版本 8. **扩展建议** - 可以继续添加的功能 **代码展示格式：** ```html <!-- 代码统计： - HTML: X 行 - CSS: X 行 - JavaScript: X 行 - 总计: X 行 - 注释覆盖率: X% 特效统计： - 视觉效果: X 种 - 动画效果: X 种 - 交互功能: X 种 - 数据可视化: X 种 - 总计: X 种 --> <!DOCTYPE html> ... ``` ## 📦 示例代码结构（简化版） ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <!-- meta 标签（25+ 行） --> <!-- CSS 样式（1000+ 行） --> </head> <body> <!-- 粒子画布 --> <canvas id="particleCanvas"></canvas> <!-- 星空背景 --> <div class="stars"></div> <!-- 矩阵雨 --> <canvas id="matrixCanvas"></canvas> <!-- 页面内容（500+ 行 HTML） --> <!-- 至少 50+ 个可点击的按钮 --> <!-- JavaScript（1500+ 行） --> <script> /** * ========================================== * 主初始化函数 * ========================================== */ function init() { // 初始化所有系统 initParticleSystem(); // 120+ 行 initMatrixRain(); // 100+ 行 initStarBackground(); // 60+ 行 initThemeSystem(); // 150+ 行