UD5工具箱
本Pug转HTML工具由ud5.com提供，旨在为前端开发者提供便捷的在线Pug模板编译服务。工具的所有编译功能仅供学习、研究和开发调试参考用途。
工具基于浏览器端JavaScript环境运行Pug编译器，编译能力可能与Node.js环境下的官方Pug编译器存在细微差异。对于包含文件系统操作（如「include」「extends」涉及外部文件）的复杂模板，编译结果仅供参考，建议在本地Node.js环境中进行最终编译验证。
所有编译计算均在用户浏览器本地完成，ud5.com不收集、不存储、不传输用户的Pug源代码数据。但用户仍应注意保护涉及商业机密或敏感信息的模板代码内容。
本工具的编译结果可能因Pug语法的版本差异、浏览器环境的不同以及输入代码的复杂度不同而存在差异，输出HTML仅供参考。ud5.com不对因使用本工具编译结果而产生的任何直接或间接损失承担责任。用户在将编译结果用于生产环境前应自行进行充分的测试和验证。
ud5.com保留随时修改或更新本工具功能及免责声明的权利，恕不另行通知。使用本工具即表示您已阅读并理解以上声明内容。
将HTML标记转换为Pug（原Jade）的缩进语法模板，去除尖括号，让模板开发更快速。
将Markdown文本即时转换为HTML代码，实时预览样式，直接复制HTML用于网站发布。
使用原生HTML Popover属性创建提示、菜单与对话框，展示四种触发方式及样式定制。
通过实例展示原生拖放 API 的使用，包括文件拖拽上传和页面元素排序功能。
将HTML代码转换为兼容React JSX的代码（class→className，style→对象等）。
输入 HTML/CSS/JS 代码，在隔离沙箱中即时渲染，支持控制台捕获。
上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。
利用 `:target` 伪类创建无需JavaScript的弹窗组件，支持关闭按钮和遮罩层。
将普通CSS代码转换为Styled Components的模板字符串格式。
输入 Emmet 缩写，实时显示展开后的 HTML 结构，学习高级 Emmet 技巧。
拖拽添加图片与文字，生成响应式轮播图Slider，支持自动播放和导航点，提供HTML/CSS/JS代码。
设置总页数与当前页，生成数字式或省略式分页导航条。
通过注册CSS属性的类型和初始值，演示如何让渐变等属性实现平滑动画。
展示一些常用内置HTML元素和自定义元素例子，提供代码复制。
生成形似iOS或Android的开关切换按钮，支持动画和自定义颜色。
输入最小视口和最大视口下的字号，生成利用clamp()的流畅缩放字体规则。
在Emoji和它的JavaScript Unicode转义序列(如 \u{1F600})之间进行转换。
交互式调整滚动条宽度、滑块颜色、圆角等，预览容器滚动效果，复制::-webkit-scrollbar代码。
设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。
上传图片随意摆放、缩放、旋转，创建个人愿景或情绪板。
生成经典的“...”打字机加载动画，可定颜色和大小，纯CSS实现。
输入最小/最大字体大小和视口范围，生成精确的 clamp() 值及回退方案。
选中页面上的某个HTML元素，利用html2canvas将其渲染为PNG图片下载。
预置多种常见表单（登录、联系、搜索）的HTML代码，点击即可复制并稍作修改。
拖拽文本框、下拉框、单选复选等元素，排列组成表单，导出整洁的HTML表单结构代码。
输入文字描述或符号（如K, P），生成编织花样预览图，方便织女试读图解。
在线生成纯CSS三角形、箭头、气泡指示器，调整方向、大小和颜色，一键复制CSS代码。
输入代表情绪的关键词，自动匹配配色方案和字体样式，生成情绪板卡片。
选择条纹、网格、波点等预设图案，调节颜色和尺寸，生成纯CSS background代码。
输入网址，提取页面定义的所有CSS自定义属性（颜色），生成直观调色板。