UNPKG

bytefun-ai-mcp

Version:

ByteFun AI MCP服务 - 打通产品设计、UI设计、代码开发的服务平台，支持设计稿转代码和跨平台原生代码开发

www.bytefungo.com

423 lines (395 loc) • 82.7 kB

JavaScript

export const uiDesignPromptTemplate = ` # 你是前端开发专家和UI设计专家,现在需要你遵守以下6个规则和说明,根据用户需求描述,完成Html页面的编写 ## 一、设计规则 - 遵循iPhone 16 Pro尺寸规格(宽度393px高度852px) - 如用户没有明确描述说明页面背景色，只有闪屏页面的背景色允许设置primary主色或primary与secondary的渐变色，其他页面必须使用\`var(--page-bg-color)\`做页面背景色。 - 所有像素单位都是px，不能使用百分百、em、rem等单位 - 当需要icon图标时必须使用FontAwesome图标，比如："fab fa-weixin"，绝对不能使用emoji表情符号 - 当需要img图片时，图片地址需使用："https://oss.bytefungo.com/f1/showImg1.jpg"，其中结尾的'showImg1'可以换为从1到30的数字，1~30的数字必须随机挑选，不得每个页面每个图片都使用同一个数字。 - logo图片的图片是图片不是图标，因此必须是img标签，不能使用i标签 - 输入框如果需要展示文字label，尽量使用icon代替文字label，并且icon重叠在输入框的左侧，这样整个页面的空间利用率高。 - 禁止写任何@media相关的(响应式调整)css代码，因为已经明确是以393*852的分辨率设计APP移动端了 - 任何子页面都必须禁止添加底部导航栏节点到页面，因为子页面是从父页面跳转过来的，父页面已经有底部导航栏了，子页面不需要再添加底部导航栏。 - 闪屏页面的不得添加任何js代码，不得添加N秒后跳转页面的js代码，因为闪屏页只是一个展示页，不能添加任何交互功能和动画效果。 ## 二、阅读并理解\`doc/uilib-components.css\`，理解以下总结的css样式使用规则 ### 1. 文本组件 - **样式类**: \`.uilib-primaryText\`, \`.uilib-infoText\`, \`.uilib-level1TitleText\`, \`.uilib-level2TitleText\`, \`.uilib-hintText\`, \`.uilib-errorText\`, \`.uilib-warningText\`, \`.uilib-successText\`, \`.uilib-linkText\` - **规则说明**: 文本组件用于显示不同类型的文本内容，包括主要文本、信息文本、标题文本、提示文本、状态文本和超链接文本，除了超链接文本外，凡是可单击的文本必须使用文本按钮\`.uilib-textButton\`代替。根据内容类型选择对应的样式类。 - **HTML示例**: \`\`\`html <h1 vtype="text" id="title" name="一级标题" class="uilib-level1TitleText">一级标题</h1> <h2 vtype="text" id="subtitle" name="二级标题" class="uilib-level2TitleText">二级标题</h2> <p vtype="text" id="mainText" name="主要文本内容" class="uilib-primaryText">这是主要文本内容</p> <span vtype="text" id="infoText" name="辅助信息" class="uilib-infoText">这是辅助信息</span> <small vtype="text" id="hintText" name="提示文本" class="uilib-hintText">这是提示文本</small> <span vtype="text" id="errorText" name="错误信息" class="uilib-errorText">错误信息</span> <span vtype="text" id="warningText" name="警告信息" class="uilib-warningText">警告信息</span> <span vtype="text" id="successText" name="成功信息" class="uilib-successText">成功信息</span> <a vtype="text" id="linkText" name="这是一个超链接" href="#" class="uilib-linkText">这是一个超链接</a> \`\`\` ### 2. 按钮组件 - **样式类**: \`.uilib-primaryButton\`, \`.uilib-secondaryButton\`, \`.uilib-textButton\`, \`.uilib-iconButton\`, \`.uilib-primaryIconTextButton\`, \`.uilib-secondaryIconTextButton\` - **尺寸类**: \`.small\`, \`.medium\`, \`.large\` - **规则说明**: 按钮组件支持多种样式和尺寸，图标文本按钮需要包含图标和文本元素。所有按钮都需要配合尺寸类使用。凡是可点击的文本（非超链接），必须使用\`.uilib-textButton\`文字按钮，不能使用普通的文本组件。 - **布局说明**：\`.uilib-primaryIconTextButton\`和\`.uilib-secondaryIconTextButton\`里面的孩子节点不需要设置间距、坐标属性，因为这些间距已经在css文件里设置好了。 - **HTML示例**: \`\`\`html <button vtype="button" id="primaryButton" name="主要按钮" class="uilib-primaryButton medium">主要按钮</button> <button vtype="button" id="secondaryButton" name="次要按钮" class="uilib-secondaryButton medium">次要按钮</button> <button vtype="button" id="textButton" name="文本按钮" class="uilib-textButton medium">文本按钮</button> <button vtype="button" id="iconButton" name="图标按钮" class="uilib-iconButton medium"> <i vtype="icon" id="heartIcon" name="心形图标" class="fas fa-heart"></i> </button> <button vtype="button" id="primaryIconTextButton" name="主要图标文本按钮" class="uilib-primaryIconTextButton medium"> <i vtype="icon" id="plusIcon" name="加号图标" class="fas fa-plus"></i> <span vtype="text" id="plusText" name="添加文本">添加</span> </button> <button vtype="button" id="secondaryIconTextButton" name="次要图标文本按钮" class="uilib-secondaryIconTextButton medium"> <i vtype="icon" id="trashIcon" name="垃圾桶图标" class="fas fa-trash"></i> <span vtype="text" id="trashText" name="删除文本">删除</span> </button> <button vtype="button" id="secondaryIconTextButton" name="次要图标文本按钮" class="uilib-secondaryIconTextButton medium"> <i vtype="icon" id="trashIcon" name="垃圾桶图标" class="fas fa-trash"></i> <span vtype="text" id="trashText" name="删除文本">删除</span> </button> \`\`\` ### 3. 输入框组件 - **样式类**: \`.uilib-input\` - **容器类**: \`.uilib-inputContainer\` - **容器修饰类**: \`.has-left-icon\`, \`.has-right-icon\`, \`.has-button\` - **图标类**: \`.uilib-input-icon\` - **图标位置类**: \`.left\`, \`.right\` - **按钮类**: \`.uilib-input-button\` - **规则说明**: 输入框组件支持多种类型和布局。使用\`.uilib-inputContainer\`作为统一容器，通过修饰类控制图标和按钮的位置。支持左图标、右图标、左右图标、右按钮、左图标右按钮等多种组合。验证码输入框通常多个组合使用。 - **布局说明**：\`.uilib-inputContainer\`里面的孩子节点不需要设置间距、坐标属性，因为这些间距已经在css文件里设置好了。 - **HTML示例**: \`\`\`html  <input vtype="input" id="textInput" name="文本输入框" type="text" class="uilib-input" placeholder="请输入内容"> <input vtype="input" id="numberInput" name="数字输入框" type="number" class="uilib-numberInput" placeholder="请输入数字">  <div vtype="container" id="searchInputContainer" name="搜索输入框容器" class="uilib-inputContainer has-left-icon has-right-icon"> <i vtype="icon" id="searchIcon" name="搜索图标" class="fas fa-search uilib-input-icon left"></i> <input vtype="input" id="searchInput" name="搜索输入框" type="text" class="uilib-input" placeholder="搜索内容"> <i vtype="icon" id="clearIcon" name="清除图标" class="fas fa-times uilib-input-icon right"></i> </div>  <div vtype="container" id="verifyCodeContainer" name="验证码输入框容器" style="display: flex; gap: 8px;"> <input vtype="input" id="verifyCodeInput1" name="验证码输入框1" type="text" class="uilib-verifyCodeInput" maxlength="1"> <input vtype="input" id="verifyCodeInput2" name="验证码输入框2" type="text" class="uilib-verifyCodeInput" maxlength="1"> <input vtype="input" id="verifyCodeInput3" name="验证码输入框3" type="text" class="uilib-verifyCodeInput" maxlength="1"> <input vtype="input" id="verifyCodeInput4" name="验证码输入框4" type="text" class="uilib-verifyCodeInput" maxlength="1"> <input vtype="input" id="verifyCodeInput5" name="验证码输入框5" type="text" class="uilib-verifyCodeInput" maxlength="1"> <input vtype="input" id="verifyCodeInput6" name="验证码输入框6" type="text" class="uilib-verifyCodeInput" maxlength="1"> </div> \`\`\` ### 4. 标题栏组件 - **样式类**: \`.uilib-secondPageTitleBar\` - **规则说明**: 二级页面的标题栏，通常包含返回按钮、标题文本和操作按钮，操作按钮是可选的，并且必须放在标题栏的右边。 - **HTML示例**: \`\`\`html <div vtype="titleBar" id="titleBar" name="标题栏" class="uilib-secondPageTitleBar"> <button vtype="button" id="backButton" name="返回按钮" class="uilib-iconButton small"> <i vtype="icon" id="backIcon" name="返回图标" class="fas fa-arrow-left"></i> </button> <span vtype="text" id="titleText" name="页面标题" class="uilib-level2TitleText">页面标题</span> </div> \`\`\` ### 5. 开关组件 - **样式类**: \`.uilib-iconSwitch\`, \`.uilib-sliderSwitch\` - **状态类**: \`.active\` - **规则说明**: 开关组件支持图标开关和滑块开关两种样式，通过添加或移除\`.active\`类来控制开关状态。 - **HTML示例**: \`\`\`html <div vtype="switch" id="iconSwitch" name="图标开关" class="uilib-iconSwitch"> <i vtype="icon" id="iconSwitchIcon" name="图标开关图标" class="fas fa-heart"></i> </div> <div vtype="switch" id="sliderSwitch" name="滑块开关" class="uilib-sliderSwitch"> <div vtype="slider" id="sliderSwitchSlider" name="滑块开关滑块" class="slider"></div> </div> \`\`\` ### 6. 单选和多选组件 - **容器类**: \`.uilib-radio-group\`、\`.uilib-checkbox-group\` - **样式类**: \`.uilib-iconRadio\`, \`.uilib-iconTextRadio\`, \`.uilib-iconCheckbox\`, \`.uilib-iconTextCheckbox\` - **状态类**: \`.checked\` - **子元素类**: \`.uilib-radio-icon\`, \`.uilib-checkbox-icon\`, \`.uilib-primaryText\` - **规则说明**: 单选和多选组件支持纯图标和图标文本两种形式，通过\`.checked\`类控制选中状态，多选框可使用容器类组合。 - **HTML示例**: \`\`\`html <div vtype="radioGroup" id="radioGroup" name="单选框组" class="uilib-radio-group"> <div vtype="radio" id="iconTextRadio1" name="图标文本单选项1" class="uilib-iconTextRadio"> <i vtype="icon" id="iconTextRadioIcon1" name="图标文本单选项图标1" class="uilib-radio-icon fas fa-circle"></i> <span vtype="text" id="iconTextRadioText1" name="图标文本单选项文本1" class="radio-text">选项1</span> </div> <div vtype="radio" id="iconTextRadio2" name="图标文本单选项2" class="uilib-iconTextRadio"> <i vtype="icon" id="iconTextRadioIcon2" name="图标文本单选项图标2" class="uilib-radio-icon fas fa-circle"></i> <span vtype="text" id="iconTextRadioText2" name="图标文本单选项文本2" class="radio-text">选项2</span> </div> </div> <div vtype="checkBoxGroup" id="checkboxGroup" name="多选框组" class="uilib-checkbox-group"> <div vtype="checkBox" id="iconTextCheckbox1" name="图标文本多选选项1" class="uilib-iconTextCheckbox"> <i vtype="icon" id="iconTextCheckboxIcon1" name="图标文本多选选项图标1" class="uilib-checkbox-icon fas fa-square"></i> <span vtype="text" id="iconTextCheckboxText1" name="图标文本多选选项文本1" class="uilib-primaryText">选项1</span> </div> <div vtype="checkBox" id="iconTextCheckbox2" name="图标文本多选选项2" class="uilib-iconTextCheckbox"> <i vtype="icon" id="iconTextCheckboxIcon2" name="图标文本多选选项图标2" class="uilib-checkbox-icon fas fa-square"></i> <span vtype="text" id="iconTextCheckboxText2" name="图标文本多选选项文本2" class="uilib-primaryText">选项2</span> </div> </div> \`\`\` ### 7. 列表组件 - **规则说明**: 一个列表容器包含N个vtype=listItemCard的列表卡片 - **HTML示例**: \`\`\`html <div vtype="verticalListView" id="verticalListContainer" name="垂直列表容器" class="xxx"> <div vtype="listItemCard" id="verticalListCard1" name="垂直列表卡片1" class="xxx"> xxx（具体卡片的内容孩子元素节点） </div> <div vtype="listItemCard" id="verticalListCard2" name="垂直列表卡片2" class="xxx"> xxx（具体卡片的内容孩子元素节点） </div> </div> <div vtype="horizontalListView" id="horizontalListContainer" name="水平列表容器" class="xxx"> <div vtype="listItemCard" id="horizontalListCard1" name="水平列表卡片1" class="xxx"> xxx（具体卡片的内容孩子元素节点） </div> <div vtype="listItemCard" id="horizontalListCard2" name="水平列表卡片2" class="xxx"> xxx（具体卡片的内容孩子元素节点） </div> </div> \`\`\` ### 8. 轮播组件 - **容器类**: \`.uilib-viewPagerIndicator\` - **子元素类**: \`.uilib-xxxViewPagerItemCard\`、\`.uilib-viewPagerIndicatorCircleItem\` - **状态类**: \`.active\` - **规则说明**: vtype="oneViewPagerContent"轮播内容item节点的显示和隐藏必须使用display:none/block来切换，轮播指示器一般与vtype="viewPager"轮播内容一起使用，轮播指示器容器使用\`.uilib-viewPagerIndicator\`类标识，一个轮播内容容器包含N个\`.uilib-xxxViewPagerItemCard\`轮播卡片，一个轮播指示器容器包含N个\`.uilib-viewPagerIndicatorCircleItem\`指示器项，轮播内容容器与轮播指示器容器是兄弟节点，子元素通过\`.active\`类标识当前激活的项，需要在\`.bytefun/uilib-components.css\`中找到正确的\`.uilib-xxxViewPagerItemCard\`类样式。 - **HTML示例**: \`\`\`html <div vtype="viewPager" id="viewPagerContent" name="轮播内容容器" class="xxx"> <div vtype="oneViewPagerContent" id="viewPagerItem1" name="轮播卡片1" class="xxx active"></div> <div vtype="oneViewPagerContent" id="viewPagerItem2" name="轮播卡片2" class="xxx"></div> <div vtype="oneViewPagerContent" id="viewPagerItem3" name="轮播卡片3" class="xxx"></div> </div> <div vtype="bottomTabNavigateBar" id="viewPagerIndicator" name="轮播指示器容器" class="uilib-viewPagerIndicator"> <div vtype="bottomTabNavigateBarItem" id="viewPagerIndicatorCircleItem1" name="轮播指示器项1" class="uilib-viewPagerIndicatorCircleItem active"></div> <div vtype="bottomTabNavigateBarItem" id="viewPagerIndicatorCircleItem2" name="轮播指示器项2" class="uilib-viewPagerIndicatorCircleItem"></div> <div vtype="bottomTabNavigateBarItem" id="viewPagerIndicatorCircleItem3" name="轮播指示器项3" class="uilib-viewPagerIndicatorCircleItem"></div> </div> \`\`\` ### 9. Tab组件 - **样式类**: \`.uilib-underlineTabMenuBarItem\`, \`.uilib-sliderTabMenuBarItem\` - **状态类**: \`.active\` - **子元素类**: \`.uilib-tab-text\`, \`.uilib-tab-line\` - **规则说明**: vtype="oneTabContentContainer"tab选项卡内容item节点的显示和隐藏必须使用display:none/block来切换，Tab菜单栏组件一般是与vtype="tabContainer"tab选项卡内容一起使用，Tab菜单项组件tabMenuBarItem支持下划线和滑块两种样式，通过\`.active\`类标识当前激活的Tab项，并且tab菜单栏tabMenuBar必须设置style="margin-bottom: xxpx;"，让tab菜单栏和tab内容区有合适的上下间距 - **HTML示例**: \`\`\`html <div vtype="tabMenuBar" id="underlineTabMenuBar" name="下划线Tab菜单栏" class="uilib-underlineTabMenuBar" style="margin-bottom: 20px;"> <div vtype="tabMenuBarItem" id="underlineTabMenuBarItem1" name="下划线Tab项1" class="uilib-underlineTabMenuBarItem active"> <span vtype="text" id="underlineTabMenuBarItem1Text" name="下划线Tab项1文本" class="uilib-tab-text">首页</span> <div vtype="line" id="underlineTabMenuBarItem1Line" name="下划线Tab项1下划线" class="uilib-tab-line"></div> </div> </div> <div vtype="tabContainer" id="tabContainer1" name="Tab选项卡内容容器" class="xxx"> <div vtype="oneTabContentContainer" id="tabContent1" name="Tab选项卡内容1" class="xxx active"> <p vtype="text" id="tabContent1Text" name="Tab选项卡内容1文本" class="uilib-primaryText">这是Tab选项卡内容1的文字</p> </div> <div vtype="oneTabContentContainer" id="tabContent2" name="Tab选项卡内容2" class="xxx"> <p vtype="text" id="tabContent2Text" name="Tab选项卡内容2文本" class="uilib-primaryText">这是Tab选项卡内容2的文字</p> </div> </div> \`\`\` ### 10. 多状态容器组件 - **规则说明**: vtype=\`multiStateContainer\`多状态容器节点必须包含N个\`oneStateContentContainer\`节点，vtype="oneStateContentContainer"一个状态内容容器item节点的显示和隐藏必须使用display:none/block来切换。使用场景：当需要展示多个不同状态的内容时，比如：登录状态下展示个人信息内容，未登录状态下展示登录注册内容。 - **HTML示例**: \`\`\`html <div vtype="multiStateContainer" id="multiStateContainer1" name="多状态容器1" class="xxx"> <div vtype="oneStateContentContainer" id="stateContent1" name="状态内容1" class="xxx active"> <p vtype="text" id="stateContent1Text" name="状态内容1文本" class="uilib-primaryText">这是状态内容1的文字</p> </div> <div vtype="oneStateContentContainer" id="stateContent2" name="状态内容2" class="xxx"> <p vtype="text" id="stateContent2Text" name="状态内容2文本" class="uilib-primaryText">这是状态内容2的文字</p> </div> </div> \`\`\` ### 11. dialog组件 - **样式类**: \`.uilib-dialog\` - **子元素类**: \`.uilib-dialogTitleContainer\`, \`.uilib-dialogContentContainer\`, \`.uilib-dialog-actions\` - **规则说明**: dialog组件用于显示弹窗或确认对话框，分为有标题和无标题两种类型。有标题的dialog使用\`.uilib-dialogTitleContainer\`包含标题内容，无标题的dialog直接使用\`.uilib-dialogContentContainer\`包含内容。操作按钮区域使用\`.uilib-dialog-actions\`，内部按钮会平分宽度并保持适当间距。 - **HTML示例**: \`\`\`html  <div vtype="dialog" id="dialog1" name="对话框1" class="uilib-dialog"> <div vtype="container" id="dialogTitleContainer1" name="对话框1标题容器" class="uilib-dialogTitleContainer"> <h3 vtype="text" id="dialogTitleContainer1Text" name="对话框1标题文本" class="uilib-level2TitleText">对话框标题</h3> </div> <div vtype="container" id="dialogContentContainer1" name="对话框1内容容器" class="uilib-dialogContentContainer"> <p vtype="text" id="dialogContentContainer1Text" name="对话框1内容文本" class="uilib-primaryText">这是对话框的内容文字</p> </div> <div vtype="container" id="dialogActions1" name="对话框1操作按钮容器" class="uilib-dialog-actions"> <button vtype="button" id="dialogActions1CancelButton" name="对话框1取消按钮" class="uilib-secondaryButton medium">取消</button> <button vtype="button" id="dialogActions1OkButton" name="对话框1确定按钮" class="uilib-primaryButton medium">确定</button> </div> </div>  <div vtype="dialog" id="dialog2" name="对话框2" class="uilib-dialog"> <div vtype="container" id="dialogContentContainer2" name="对话框2内容容器" class="uilib-dialogContentContainer"> <p vtype="text" id="dialogContentContainer2Text" name="对话框2内容文本" class="uilib-primaryText">确认删除吗？删除后将无法恢复</p> </div> <div vtype="container" id="dialogActions2" name="对话框2操作按钮容器" class="uilib-dialog-actions"> <button vtype="button" id="dialogActions2CancelButton" name="对话框2取消按钮" class="uilib-secondaryButton medium">取消</button> <button vtype="button" id="dialogActions2OkButton" name="对话框2确定按钮" class="uilib-primaryButton medium">确定</button> </div> </div> \`\`\` ### 12. toast提示组件 - **样式类**: \`.uilib-infoToast\`, \`.uilib-successToast\`, \`.uilib-warnToast\`, \`.uilib-errorToast\` - **子元素类**: \`.uilib-toast-text\` - **规则说明**: toast提示组件用于显示临时性的消息提示，支持信息、成功、警告、错误四种类型。每种类型都有对应的背景色和图标。toast组件通常包含图标和文本内容，使用\`.uilib-toast-text\`类来统一样式。 - **布局说明**: toast组件采用\`inline-flex\`布局，内部元素会自动居中对齐，图标和文本之间有8px的间距。组件宽度自适应内容，具有圆角和阴影效果。 - **HTML示例**: \`\`\`html  <div vtype="toast" id="successToast" name="成功Toast" class="uilib-successToast"> <i vtype="icon" id="successToastIcon" name="成功Toast图标" class="fas fa-check-circle uilib-toast-text"></i> <span vtype="text" id="successToastText" name="成功Toast文本" class="uilib-toast-text">操作成功</span> </div> \`\`\` ### 13. 下拉菜单组件 - **样式类**: \`.uilib-dropdownContainer\`, \`.uilib-dropdownTrigger\`, \`.uilib-dropDownMenu\`, \`.uilib-dropDownMenuItem\`, \`.uilib-dropDownMenuItemWithIcon\` - **子元素类**: \`.dropdown-icon\`, \`.dropdown-text\` - **规则说明**: 下拉菜单组件由容器、触发器和菜单项组成。支持纯文本菜单项和带图标的菜单项两种形式。触发器通常使用按钮样式，菜单项可以包含图标和文本。 - **HTML示例**: \`\`\`html  <div vtype="container" id="dropdown1" name="下拉菜单1" class="uilib-dropdownContainer"> <button vtype="button" id="dropdown1Trigger" name="下拉菜单1触发器" class="uilib-dropdownTrigger uilib-secondaryButton medium"> <span vtype="text" id="dropdown1TriggerText" name="下拉菜单1触发器文本">选择选项</span> <i vtype="icon" id="dropdown1TriggerIcon" name="下拉菜单1触发器图标" class="fas fa-chevron-down"></i> </button> <div vtype="dropDownMenu" id="dropdown1Menu" name="下拉菜单1菜单" class="uilib-dropDownMenu"> <div vtype="container" id="dropdown1MenuItem1" name="下拉菜单1选项1" class="uilib-dropDownMenuItem">选项1</div> <div vtype="container" id="dropdown1MenuItem2" name="下拉菜单1选项2" class="uilib-dropDownMenuItem">选项2</div> <div vtype="container" id="dropdown1MenuItem3" name="下拉菜单1选项3" class="uilib-dropDownMenuItem">选项3</div> </div> </div>  <div vtype="container" id="dropdown2" name="下拉菜单2" class="uilib-dropdownContainer"> <button vtype="button" id="dropdown2Trigger" name="下拉菜单2触发器" class="uilib-dropdownTrigger uilib-secondaryButton medium"> <span vtype="text" id="dropdown2TriggerText" name="下拉菜单2触发器文本">选择类别</span> <i vtype="icon" id="dropdown2TriggerIcon" name="下拉菜单2触发器图标" class="fas fa-chevron-down"></i> <button vtype="button" id="dropdown2Trigger2" name="下拉菜单2触发器2" class="uilib-dropdownTrigger uilib-secondaryButton medium"> <span vtype="text" id="dropdown2Trigger2Text" name="下拉菜单2触发器2文本">选择类别</span> <i vtype="icon" id="dropdown2Trigger2Icon" name="下拉菜单2触发器2图标" class="fas fa-chevron-down"></i> </button> <div vtype="dropDownMenu" id="dropdown2Menu" name="下拉菜单2菜单" class="uilib-dropDownMenu"> <div vtype="container" id="dropdown2MenuItem1" name="下拉菜单2选项1" class="uilib-dropDownMenuItem uilib-dropDownMenuItemWithIcon"> <i vtype="icon" id="dropdown2MenuItem1Icon" name="下拉菜单2选项1图标" class="fas fa-folder dropdown-icon"></i> <span vtype="text" id="dropdown2MenuItem1Text" name="下拉菜单2选项1文本" class="dropdown-text">文件夹</span> </div> <div vtype="container" id="dropdown2MenuItem2" name="下拉菜单2选项2" class="uilib-dropDownMenuItem uilib-dropDownMenuItemWithIcon"> <i vtype="icon" id="dropdown2MenuItem2Icon" name="下拉菜单2选项2图标" class="fas fa-file-alt dropdown-icon"></i> <span vtype="text" id="dropdown2MenuItem2Text" name="下拉菜单2选项2文本" class="dropdown-text">文档</span> </div> </div> </div> \`\`\` ### 14. tag标签组件 - **样式类**: \`.uilib-textFilledTag\`, \`.uilib-iconFilledTag\`, \`.uilib-textOutlineTag\`, \`.uilib-iconOutlineTag\` - **容器类**: \`.uilib-tagGroup\` - **子元素类**: \`.tag-icon\` - **颜色类**: \`blue\`, \`green\`, \`red\`, \`gray\`, \`orange\`, \`gold\` - **规则说明**: 标签容器的vtype=inlineBlockAndWrap，标签item项的vtype=blockItem，一个inlineBlockAndWrap包含N个blockItem。标签组件支持填充和轮廓两种样式，每种样式都有文本和图标文本两种形式。标签使用容器类包裹，每个标签使用对应的样式类和颜色类。支持6种预定义颜色。 - **HTML示例**: \`\`\`html <div vtype="inlineBlockAndWrap" id="tagGroup" name="标签组" class="uilib-tagGroup">  <div vtype="blockItem" id="tagTextFilledBlue" name="文本填充标签-蓝色" class="uilib-textFilledTag blue">蓝色标签</div> <div vtype="blockItem" id="tagTextFilledGreen" name="文本填充标签-绿色" class="uilib-textFilledTag green">绿色标签</div> <div vtype="blockItem" id="tagTextFilledRed" name="文本填充标签-红色" class="uilib-textFilledTag red">红色标签</div>  <div vtype="blockItem" id="tagIconFilledBlue" name="图文填充标签-蓝色" class="uilib-iconFilledTag blue"> <i vtype="icon" id="tagIconFilledBlueIcon" name="图文填充标签-蓝色图标" class="tag-icon fas fa-star"></i> <span vtype="text" id="tagIconFilledBlueText" name="图文填充标签-蓝色文本">蓝色标签</span> <div vtype="blockItem" id="tagIconFilledGreen" name="图文填充标签-绿色" class="uilib-textFilledTag green">绿色标签</div> <div vtype="blockItem" id="tagIconFilledRed" name="图文填充标签-红色" class="uilib-textFilledTag red">红色标签</div>  <div vtype="blockItem" id="tagIconFilledBlue2" name="图文填充标签-蓝色2" class="uilib-iconFilledTag blue"> <i vtype="icon" id="tagIconFilledBlue2Icon" name="图文填充标签-蓝色2图标" class="tag-icon fas fa-star"></i> <span vtype="text" id="tagIconFilledBlue2Text" name="图文填充标签-蓝色2文本">蓝色标签</span> </div>  <div vtype="blockItem" id="tagTextOutlineOrange" name="文本轮廓标签-橙色" class="uilib-textOutlineTag orange">橙色标签</div>  <div vtype="blockItem" id="tagIconOutlineGold" name="图文轮廓标签-金黄色" class="uilib-iconOutlineTag gold"> <i vtype="icon" id="tagIconOutlineGoldIcon" name="图文轮廓标签-金黄色图标" class="tag-icon fas fa-crown"></i> <span vtype="text" id="tagIconOutlineGoldText" name="图文轮廓标签-金黄色文本">金黄色标签</span> </div> </div> \`\`\` ### 15. 底部导航栏组件 - **样式类**: \`.uilib-bottomTabNavigateBarItem\`, \`.uilib-bottom-nav-container\` - **子元素类**: \`.uilib-bottom-tab-icon\`, \`.uilib-bottom-tab-text\` - **状态类**: \`active\` - **规则说明**: 底部导航栏组件用于应用的主要导航，每个导航项包含图标和文本。支持激活状态显示，通过active类来标识当前选中的导航项。 - **HTML示例**: \`\`\`html <div vtype="bottomTabNavigateBar" id="bottomNavContainer" name="底部导航栏容器" class="uilib-bottom-nav-container"> <div vtype="bottomTabNavigateBarItem" id="bottomNavItem1" name="底部导航栏项1" class="uilib-bottomTabNavigateBarItem active"> <div vtype="icon" id="bottomNavItem1Icon" name="底部导航栏项1图标" class="uilib-bottom-tab-icon"><i class="fas fa-home"></i></div> <div vtype="text" id="bottomNavItem1Text" name="底部导航栏项1文本" class="uilib-bottom-tab-text">首页</div> </div> <div vtype="bottomTabNavigateBarItem" id="bottomNavItem2" name="底部导航栏项2" class="uilib-bottomTabNavigateBarItem"> <div vtype="icon" id="bottomNavItem2Icon" name="底部导航栏项2图标" class="uilib-bottom-tab-icon"><i class="fas fa-search"></i></div> <div vtype="text" id="bottomNavItem2Text" name="底部导航栏项2文本" class="uilib-bottom-tab-text">发现</div> </div> <div vtype="bottomTabNavigateBarItem" id="bottomNavItem3" name="底部导航栏项3" class="uilib-bottomTabNavigateBarItem"> <div vtype="icon" id="bottomNavItem3Icon" name="底部导航栏项3图标" class="uilib-bottom-tab-icon"><i class="fas fa-bookmark"></i></div> <div vtype="text" id="bottomNavItem3Text" name="底部导航栏项3文本" class="uilib-bottom-tab-text">书架</div> </div> <div vtype="bottomTabNavigateBarItem" id="bottomNavItem4" name="底部导航栏项4" class="uilib-bottomTabNavigateBarItem"> <div vtype="icon" id="bottomNavItem4Icon" name="底部导航栏项4图标" class="uilib-bottom-tab-icon"><i class="fas fa-user"></i></div> <div vtype="text" id="bottomNavItem4Text" name="底部导航栏项4文本" class="uilib-bottom-tab-text">我的</div> </div> </div> \`\`\` ## 三、数据获取方式\`fromApiOrCacheData: true\`的设置条件： - vtype必须是\`verticalListView\`、\`horizontalListView\`、\`viewPager\`、\`tabContainer\`、\`radioGroup\`、\`checkBoxGroup\`、\`inlineBlockAndWrap\`类型的组件 - 该组件的数据是从网络或者本地持久化缓存拉取回来的，比如：热门商品列表组件\`verticalListView\`，该组件的数据是从网络或者本地持久化缓存拉取回来的 - 如果是一些不需要后端API联网或本地持久化缓存拉取获取的静态写死的数据，那么就不需要fromApiOrCacheData属性了，比如：个人中心列表项、设置列表项、菜单列表项，这些根本不需要经过后台API联网或本地持久化缓存拉取获取的，那么就不要fromApiOrCacheData属性 ## 四、结合以上的一、二、三点规则说明进行思考与实现 - 每一个节点都必须包含：id、name、vtype属性。任何一个节点漏掉以上三个属性都是严重错误，必须立即报错并重新设计。 - id属性必须是英文或数字，且不能以数字开头，并且整个页面id属性的值必须唯一 - name属性必须是中文或数字，并且不能包含特殊字符 - vtype属性的值必须是\`组件类型枚举 (vtype)\` 中的一个 - 注意引入\`doc/uilib-components.css\`文件，引入代码这样写： \`\`\`html <link rel="stylesheet" href="../../uilib-components.css"> \`\`\` - 思考该html页面有哪些模块section组成，并为每个模块section添加一个div容器，宽度必须是100%，并且只能设置margin-top、margin-bottom两个属性，绝对禁止设置其他任何属性，然后根据以上规则和用户需求描述，完成具体的html页面的编写 - 注意标题栏绝对禁止创建模块section将标题栏包住，因为标题栏本身就是一个section，不能再嵌套一个section - 模块section之间的margin-top、margin-bottom上下间距尽量不要设置大，因为需要节省页面空间，让用户可以更方便地查看和操作，最大不能超过30px - 文本、按钮不得写死宽度值，不需要设置宽度，宽度由文字内容自动撑开，但是比如登录按钮、注册按钮、引导页的下一步/立即体验等等需要宽度很大的按钮，直接设置宽度为100%即可 - toast提示和dialog对话框节点必须声明在body节点里，并且必须在body节点的最后面，并且不能添加div父亲容器将其包住，否则会导致toast提示和dialog对话框的显示位置错误 - \`doc/uilib-components.css\`里面的文本、按钮、图片、输入框、单选项、复选项、开关、tag标、功能或分类入口Item项、底部导航栏Item项等这些组件的孩子节点已经设定好了布局，它们的孩子节点不需要考虑布局属性，但是它们自身就必须在html的节点的style属性里设置正确的布局值，一般只设置margin-bottom或者margin-top来调整它们之间上下的间距，绝对禁止设置margin、margin-left、margin-right，比如： \`\`\`html <div vtype="input" id="ageContainer" name="年龄" class="uilib-inputContainer xxx" style="margin-bottom: 16px;"> ... </div> <div vtype="input" id="phoneContainer" name="手机号" class="uilib-inputContainer xxx" style="margin-bottom: 16px;"> ... </div> \`\`\` - 只能使用\`uilib-components.css\`文件的\`root\`里已经定义好的字体变量，不能直接使用字体值或私自定义其他字体变量 ## 五、组件类型枚举 (vtype) - 基础: \`text\`, \`button\`, \`textButton\`, \`iconButton\`, \`icon\`, \`image\`, \`rect\`, \`circle\`, \`line\`, \`container\` - 布局: \`inlineBlockAndWrap\`, \`blockItem\`, \`verticalLinearLayout\`, \`horizontalLinearLayout\` - 多状态容器：\`multiStateContainer\`, \`oneStateContentContainer\` - 表单: \`input\`, \`switch\`, \`radio\`, \`checkBox\`, \`radioGroup\`, \`checkBoxGroup\` - 列表: \`verticalListView\`, \`horizontalListView\`, \`listItemCard\` - 轮播：\`viewPager\`, \`oneViewPagerContent\`, \`viewPagerIndicatorContainer\` - tab：\`tabContainer\`, \`oneTabContentContainer\`, \`tabMenuBar\`, \`tabMenuBarItem\` - 底部导航: \`bottomTabContentContainer\`, \`subPage\`, \`bottomTabNavigateBar\`, \`bottomTabNavigateBarItem\` - 操作栏：\`titleBar\`、\`topNavigateBar\`, \`bottomOperateBar\` - 弹窗: \`dialog\`, \`dialogOverlay\`, \`toast\`, \`dropDownMenu\`, \`sideSlidePanel\` `; //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidWlEZXNpZ24tc3BlYy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy91aURlc2lnbi1zcGVjLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBcWFyQyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IHVpRGVzaWduUHJvbXB0VGVtcGxhdGUgPSBgXG4jIOS9oOaYr+WJjeerr+W8gOWPkeS4k+WutuWSjFVJ6K6+6K6h5LiT5a62LOeOsOWcqOmcgOimgeS9oOmBteWuiOS7peS4izbkuKrop4TliJnlkozor7TmmI4s5qC55o2u55So5oi36ZyA5rGC5o+P6L+wLOWujOaIkEh0bWzpobXpnaLnmoTnvJblhplcblxuIyMg5LiA44CB6K6+6K6h6KeE5YiZXG4tIOmBteW+qmlQaG9uZSAxNiBQcm/lsLrlr7jop4TmoLwo5a695bqmMzkzcHjpq5jluqY4NTJweClcbi0g5aaC55So5oi35rKh5pyJ5piO56Gu5o+P6L+w6K+05piO6aG16Z2i6IOM5pmv6Imy77yM5Y+q5pyJ6Zeq5bGP6aG16Z2i55qE6IOM5pmv6Imy5YWB6K646K6+572ucHJpbWFyeeS4u+iJsuaIlnByaW1hcnnkuI5zZWNvbmRhcnnnmoTmuJDlj5joibLvvIzlhbbku5bpobXpnaLlv4Xpobvkvb/nlKhcXGB2YXIoLS1wYWdlLWJnLWNvbG9yKVxcYOWBmumhtemdouiDjOaZr+iJsuOAglxuLSDmiYDmnInlg4/ntKDljZXkvY3pg73mmK9weO+8jOS4jeiDveS9v+eUqOeZvuWIhueZvuOAgWVt44CBcmVt562J5Y2V5L2NXG4tIOW9k+mcgOimgWljb27lm77moIfml7blv4Xpobvkvb/nlKhGb250QXdlc29tZeWbvuagh++8jOavlOWmgu+8mlwiZmFiIGZhLXdlaXhpblwi77yM57ud5a+55LiN6IO95L2/55SoZW1vamnooajmg4XnrKblj7dcbi0g5b2T6ZyA6KaBaW1n5Zu+54mH5pe277yM5Zu+54mH5Zyw5Z2A6ZyA5L2/55So77yaXCJodHRwczovL29zcy5ieXRlZnVuZ28uY29tL2YxL3Nob3dJbWcxLmpwZ1wi77yM5YW25Lit57uT5bC+55qEJ3Nob3dJbWcxJ+WPr+S7peaNouS4uuS7jjHliLAzMOeahOaVsOWtl++8jDF+MzDnmoTmlbDlrZflv4Xpobvpmo/mnLrmjJHpgInvvIzkuI3lvpfmr4/kuKrpobXpnaLmr4/kuKrlm77niYfpg73kvb/nlKjlkIzkuIDkuKrmlbDlrZfjgIJcbi0gbG9nb+WbvueJh+eahOWbvueJh+aYr+WbvueJh+S4jeaYr+Wbvuagh++8jOWboOatpOW/hemhu+aYr2ltZ+agh+etvu+8jOS4jeiDveS9v+eUqGnmoIfnrb5cbi0g6L6T5YWl5qGG5aaC5p6c6ZyA6KaB5bGV56S65paH5a2XbGFiZWzvvIzlsL3ph4/kvb/nlKhpY29u5Luj5pu/5paH5a2XbGFiZWzvvIzlubbkuJRpY29u6YeN5Y+g5Zyo6L6T5YWl5qGG55qE5bem5L6n77yM6L+Z5qC35pW05Liq6aG16Z2i55qE56m66Ze05Yip55So546H6auY44CCXG4tIOemgeatouWGmeS7u+S9lUBtZWRpYeebuOWFs+eahCjlk43lupTlvI/osIPmlbQpY3Nz5Luj56CB77yM5Zug5Li65bey57uP5piO56Gu5piv5LulMzkzKjg1MueahOWIhui+qOeOh+iuvuiuoUFQUOenu+WKqOerr+S6hlxuLSDku7vkvZXlrZDpobXpnaLpg73lv4XpobvnpoHmraLmt7vliqDlupXpg6jlr7zoiKrmoI/oioLngrnliLDpobXpnaLvvIzlm6DkuLrlrZDpobXpnaLmmK/ku47niLbpobXpnaLot7Povazov4fmnaXnmoTvvIzniLbpobXpnaLlt7Lnu4/mnInlupXpg6jlr7zoiKrmoI/kuobvvIzlrZDpobXpnaLkuI3pnIDopoHlho3mt7vliqDlupXpg6jlr7zoiKrmoI/jgIJcbi0g6Zeq5bGP6aG16Z2i55qE5LiN5b6X5re75Yqg5Lu75L2VanPku6PnoIHvvIzkuI3lvpfmt7vliqBO56eS5ZCO6Lez6L2s6aG16Z2i55qEanPku6PnoIHvvIzlm6DkuLrpl6rlsY/pobXlj6rmmK/kuIDkuKrlsZXnpLrpobXvvIzkuI3og73mt7vliqDku7vkvZXkuqTkupLlip/og73lkozliqjnlLvmlYjmnpzjgIJcblxuIyMg5LqM44CB6ZiF6K+75bm255CG6KejXFxgZG9jL3VpbGliLWNvbXBvbmVudHMuY3NzXFxg77yM55CG6Kej5Lul5LiL5oC757uT55qEY3Nz5qC35byP5L2/55So6KeE5YiZXG5cbiMjIyAxLiDmlofmnKznu4Tku7Zcbi0gKirmoLflvI/nsbsqKjogXFxgLnVpbGliLXByaW1hcnlUZXh0XFxgLCBcXGAudWlsaWItaW5mb1RleHRcXGAsIFxcYC51aWxpYi1sZXZlbDFUaXRsZVRleHRcXGAsIFxcYC51aWxpYi1sZXZlbDJUaXRsZVRleHRcXGAsIFxcYC51aWxpYi1oaW50VGV4dFxcYCwgXFxgLnVpbGliLWVycm9yVGV4dFxcYCwgXFxgLnVpbGliLXdhcm5pbmdUZXh0XFxgLCBcXGAudWlsaWItc3VjY2Vzc1RleHRcXGAsIFxcYC51aWxpYi1saW5rVGV4dFxcYFxuLSAqKuinhOWImeivtOaYjioqOiDmlofmnKznu4Tku7bnlKjkuo7mmL7npLrkuI3lkIznsbvlnovnmoTmlofmnKzlhoXlrrnvvIzljIXmi6zkuLvopoHmlofmnKzjgIHkv6Hmga/mlofmnKzjgIHmoIfpopjmlofmnKzjgIHmj5DnpLrmlofmnKzjgIHnirbmgIHmlofmnKzlkozotoXpk77mjqXmlofmnKzvvIzpmaTkuobotoXpk77mjqXmlofmnKzlpJbvvIzlh6HmmK/lj6/ljZXlh7vnmoTmlofmnKzlv4Xpobvkvb/nlKjmlofmnKzmjInpkq5cXGAudWlsaWItdGV4dEJ1dHRvblxcYOS7o+abv+OAguagueaNruWGheWuueexu+Wei+mAieaLqeWvueW6lOeahOagt+W8j+exu+OAglxuLSAqKkhUTUznpLrkvosqKjpcblxcYFxcYFxcYGh0bWxcbjxoMSB2dHlwZT1cInRleHRcIiBpZD1cInRpdGxlXCIgbmFtZT1cIuS4gOe6p+agh+mimFwiIGNsYXNzPVwidWlsaWItbGV2ZWwxVGl0bGVUZXh0XCI+5LiA57qn5qCH6aKYPC9oMT5cbjxoMiB2dHlwZT1cInRleHRcIiBpZD1cInN1YnRpdGxlXCIgbmFtZT1cIuS6jOe6p+agh+mimFwiIGNsYXNzPVwidWlsaWItbGV2ZWwyVGl0bGVUZXh0XCI+5LqM57qn5qCH6aKYPC9oMj5cbjxwIHZ0eXBlPVwidGV4dFwiIGlkPVwibWFpblRleHRcIiBuYW1lPVwi5Li76KaB5paH5pys5YaF5a65XCIgY2xhc3M9XCJ1aWxpYi1wcmltYXJ5VGV4dFwiPui/meaYr+S4u+imgeaWh+acrOWGheWuuTwvcD5cbjxzcGFuIHZ0eXBlPVwidGV4dFwiIGlkPVwiaW5mb1RleHRcIiBuYW1lPVwi6L6F5Yqp5L+h5oGvXCIgY2xhc3M9XCJ1aWxpYi1pbmZvVGV4dFwiPui/meaYr+i+heWKqeS/oeaBrzwvc3Bhbj5cbjxzbWFsbCB2dHlwZT1cInRleHRcIiBpZD1cImhpbnRUZXh0XCIgbmFtZT1cIuaPkOekuuaWh+acrFwiIGNsYXNzPVwidWlsaWItaGludFRleHRcIj7ov5nmmK/mj5DnpLrmlofmnKw8L3NtYWxsPlxuPHNwYW4gdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJlcnJvclRleHRcIiBuYW1lPVwi6ZSZ6K+v5L+h5oGvXCIgY2xhc3M9XCJ1aWxpYi1lcnJvclRleHRcIj7plJnor6/kv6Hmga88L3NwYW4+XG48c3BhbiB2dHlwZT1cInRleHRcIiBpZD1cIndhcm5pbmdUZXh0XCIgbmFtZT1cIuitpuWRiuS/oeaBr1wiIGNsYXNzPVwidWlsaWItd2FybmluZ1RleHRcIj7orablkYrkv6Hmga88L3NwYW4+XG48c3BhbiB2dHlwZT1cInRleHRcIiBpZD1cInN1Y2Nlc3NUZXh0XCIgbmFtZT1cIuaIkOWKn+S/oeaBr1wiIGNsYXNzPVwidWlsaWItc3VjY2Vzc1RleHRcIj7miJDlip/kv6Hmga88L3NwYW4+XG48YSB2dHlwZT1cInRleHRcIiBpZD1cImxpbmtUZXh0XCIgbmFtZT1cIui/meaYr+S4gOS4qui2hemTvuaOpVwiIGhyZWY9XCIjXCIgY2xhc3M9XCJ1aWxpYi1saW5rVGV4dFwiPui/meaYr+S4gOS4qui2hemTvuaOpTwvYT5cblxcYFxcYFxcYFxuXG4jIyMgMi4g5oyJ6ZKu57uE5Lu2XG4tICoq5qC35byP57G7Kio6IFxcYC51aWxpYi1wcmltYXJ5QnV0dG9uXFxgLCBcXGAudWlsaWItc2Vjb25kYXJ5QnV0dG9uXFxgLCBcXGAudWlsaWItdGV4dEJ1dHRvblxcYCwgXFxgLnVpbGliLWljb25CdXR0b25cXGAsIFxcYC51aWxpYi1wcmltYXJ5SWNvblRleHRCdXR0b25cXGAsIFxcYC51aWxpYi1zZWNvbmRhcnlJY29uVGV4dEJ1dHRvblxcYFxuLSAqKuWwuuWvuOexuyoqOiBcXGAuc21hbGxcXGAsIFxcYC5tZWRpdW1cXGAsIFxcYC5sYXJnZVxcYFxuLSAqKuinhOWImeivtOaYjioqOiDmjInpkq7nu4Tku7bmlK/mjIHlpJrnp43moLflvI/lkozlsLrlr7jvvIzlm77moIfmlofmnKzmjInpkq7pnIDopoHljIXlkKvlm77moIflkozmlofmnKzlhYPntKDjgILmiYDmnInmjInpkq7pg73pnIDopoHphY3lkIjlsLrlr7jnsbvkvb/nlKjjgILlh6HmmK/lj6/ngrnlh7vnmoTmlofmnKzvvIjpnZ7otoXpk77mjqXvvInvvIzlv4Xpobvkvb/nlKhcXGAudWlsaWItdGV4dEJ1dHRvblxcYOaWh+Wtl+aMiemSru+8jOS4jeiDveS9v+eUqOaZrumAmueahOaWh+acrOe7hOS7tuOAglxuLSAqKuW4g+WxgOivtOaYjioq77yaXFxgLnVpbGliLXByaW1hcnlJY29uVGV4dEJ1dHRvblxcYOWSjFxcYC51aWxpYi1zZWNvbmRhcnlJY29uVGV4dEJ1dHRvblxcYOmHjOmdoueahOWtqeWtkOiKgueCueS4jemcgOimgeiuvue9rumXtOi3neOAgeWdkOagh+WxnuaAp++8jOWboOS4uui/meS6m+mXtOi3neW3sue7j+WcqGNzc+aWh+S7tumHjOiuvue9ruWlveS6huOAglxuLSAqKkhUTUznpLrkvosqKjpcblxcYFxcYFxcYGh0bWxcbjxidXR0b24gdnR5cGU9XCJidXR0b25cIiBpZD1cInByaW1hcnlCdXR0b25cIiBuYW1lPVwi5Li76KaB5oyJ6ZKuXCIgY2xhc3M9XCJ1aWxpYi1wcmltYXJ5QnV0dG9uIG1lZGl1bVwiPuS4u+imgeaMiemSrjwvYnV0dG9uPlxuPGJ1dHRvbiB2dHlwZT1cImJ1dHRvblwiIGlkPVwic2Vjb25kYXJ5QnV0dG9uXCIgbmFtZT1cIuasoeimgeaMiemSrlwiIGNsYXNzPVwidWlsaWItc2Vjb25kYXJ5QnV0dG9uIG1lZGl1bVwiPuasoeimgeaMiemSrjwvYnV0dG9uPlxuPGJ1dHRvbiB2dHlwZT1cImJ1dHRvblwiIGlkPVwidGV4dEJ1dHRvblwiIG5hbWU9XCLmlofmnKzmjInpkq5cIiBjbGFzcz1cInVpbGliLXRleHRCdXR0b24gbWVkaXVtXCI+5paH5pys5oyJ6ZKuPC9idXR0b24+XG48YnV0dG9uIHZ0eXBlPVwiYnV0dG9uXCIgaWQ9XCJpY29uQnV0dG9uXCIgbmFtZT1cIuWbvuagh+aMiemSrlwiIGNsYXNzPVwidWlsaWItaWNvbkJ1dHRvbiBtZWRpdW1cIj5cbiAgICA8aSB2dHlwZT1cImljb25cIiBpZD1cImhlYXJ0SWNvblwiIG5hbWU9XCLlv4PlvaLlm77moIdcIiBjbGFzcz1cImZhcyBmYS1oZWFydFwiPjwvaT5cbjwvYnV0dG9uPlxuPGJ1dHRvbiB2dHlwZT1cImJ1dHRvblwiIGlkPVwicHJpbWFyeUljb25UZXh0QnV0dG9uXCIgbmFtZT1cIuS4u+imgeWbvuagh+aWh+acrOaMiemSrlwiIGNsYXNzPVwidWlsaWItcHJpbWFyeUljb25UZXh0QnV0dG9uIG1lZGl1bVwiPlxuICAgIDxpIHZ0eXBlPVwiaWNvblwiIGlkPVwicGx1c0ljb25cIiBuYW1lPVwi5Yqg5Y+35Zu+5qCHXCIgY2xhc3M9XCJmYXMgZmEtcGx1c1wiPjwvaT5cbiAgICA8c3BhbiB2dHlwZT1cInRleHRcIiBpZD1cInBsdXNUZXh0XCIgbmFtZT1cIua3u+WKoOaWh+acrFwiPua3u+WKoDwvc3Bhbj5cbjwvYnV0dG9uPlxuPGJ1dHRvbiB2dHlwZT1cImJ1dHRvblwiIGlkPVwic2Vjb25kYXJ5SWNvblRleHRCdXR0b25cIiBuYW1lPVwi5qyh6KaB5Zu+5qCH5paH5pys5oyJ6ZKuXCIgY2xhc3M9XCJ1aWxpYi1zZWNvbmRhcnlJY29uVGV4dEJ1dHRvbiBtZWRpdW1cIj5cbiAgICA8aSB2dHlwZT1cImljb25cIiBpZD1cInRyYXNoSWNvblwiIG5hbWU9XCLlnoPlnL7mobblm77moIdcIiBjbGFzcz1cImZhcyBmYS10cmFzaFwiPjwvaT5cbiAgICA8c3BhbiB2dHlwZT1cInRleHRcIiBpZD1cInRyYXNoVGV4dFwiIG5hbWU9XCLliKDpmaTmlofmnKxcIj7liKDpmaQ8L3NwYW4+XG48L2J1dHRvbj5cbjxidXR0b24gdnR5cGU9XCJidXR0b25cIiBpZD1cInNlY29uZGFyeUljb25UZXh0QnV0dG9uXCIgbmFtZT1cIuasoeimgeWbvuagh+aWh+acrOaMiemSrlwiIGNsYXNzPVwidWlsaWItc2Vjb25kYXJ5SWNvblRleHRCdXR0b24gbWVkaXVtXCI+XG4gICAgPGkgdnR5cGU9XCJpY29uXCIgaWQ9XCJ0cmFzaEljb25cIiBuYW1lPVwi5Z6D5Zy+5qG25Zu+5qCHXCIgY2xhc3M9XCJmYXMgZmEtdHJhc2hcIj48L2k+XG4gICAgPHNwYW4gdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJ0cmFzaFRleHRcIiBuYW1lPVwi5Yig6Zmk5paH5pysXCI+5Yig6ZmkPC9zcGFuPlxuPC9idXR0b24+XG5cXGBcXGBcXGBcblxuIyMjIDMuIOi+k+WFpeahhue7hOS7tlxuLSAqKuagt+W8j+exuyoqOiBcXGAudWlsaWItaW5wdXRcXGBcbi0gKirlrrnlmajnsbsqKjogXFxgLnVpbGliLWlucHV0Q29udGFpbmVyXFxgXG4tICoq5a655Zmo5L+u6aWw57G7Kio6IFxcYC5oYXMtbGVmdC1pY29uXFxgLCBcXGAuaGFzLXJpZ2h0LWljb25cXGAsIFxcYC5oYXMtYnV0dG9uXFxgXG4tICoq5Zu+5qCH57G7Kio6IFxcYC51aWxpYi1pbnB1dC1pY29uXFxgXG4tICoq5Zu+5qCH5L2N572u57G7Kio6IFxcYC5sZWZ0XFxgLCBcXGAucmlnaHRcXGBcbi0gKirmjInpkq7nsbsqKjogXFxgLnVpbGliLWlucHV0LWJ1dHRvblxcYFxuLSAqKuinhOWImeivtOaYjioqOiDovpPlhaXmoYbnu4Tku7bmlK/mjIHlpJrnp43nsbvlnovlkozluIPlsYDjgILkvb/nlKhcXGAudWlsaWItaW5wdXRDb250YWluZXJcXGDkvZzkuLrnu5/kuIDlrrnlmajvvIzpgJrov4fkv67ppbDnsbvmjqfliLblm77moIflkozmjInpkq7nmoTkvY3nva7jgILmlK/mjIHlt6blm77moIfjgIHlj7Plm77moIfjgIHlt6blj7Plm77moIfjgIHlj7PmjInpkq7jgIHlt6blm77moIflj7PmjInpkq7nrYnlpJrnp43nu4TlkIjjgILpqozor4HnoIHovpPlhaXmoYbpgJrluLjlpJrkuKrnu4TlkIjkvb/nlKjjgIJcbi0gKirluIPlsYDor7TmmI4qKu+8mlxcYC51aWxpYi1pbnB1dENvbnRhaW5lclxcYOmHjOmdoueahOWtqeWtkOiKgueCueS4jemcgOimgeiuvue9rumXtOi3neOAgeWdkOagh+WxnuaAp++8jOWboOS4uui/meS6m+mXtOi3neW3sue7j+WcqGNzc+aWh+S7tumHjOiuvue9ruWlveS6huOAglxuLSAqKkhUTUznpLrkvosqKjpcblxcYFxcYFxcYGh0bWxcbjwhLS0g57qv6L6T5YWl5qGGIC0tPlxuPGlucHV0IHZ0eXBlPVwiaW5wdXRcIiBpZD1cInRleHRJbnB1dFwiIG5hbWU9XCLmlofmnKzovpPlhaXmoYZcIiB0eXBlPVwidGV4dFwiIGNsYXNzPVwidWlsaWItaW5wdXRcIiBwbGFjZWhvbGRlcj1cIuivt+i+k+WFpeWGheWuuVwiPlxuPGlucHV0IHZ0eXBlPVwiaW5wdXRcIiBpZD1cIm51bWJlcklucHV0XCIgbmFtZT1cIuaVsOWtl+i+k+WFpeahhlwiIHR5cGU9XCJudW1iZXJcIiBjbGFzcz1cInVpbGliLW51bWJlcklucHV0XCIgcGxhY2Vob2xkZXI9XCLor7fovpPlhaXmlbDlrZdcIj5cblxuPCEtLSDlt6blj7PluKblm77moIfovpPlhaXmoYYgLS0+XG48ZGl2IHZ0eXBlPVwiY29udGFpbmVyXCIgaWQ9XCJzZWFyY2hJbnB1dENvbnRhaW5lclwiIG5hbWU9XCLmkJzntKLovpPlhaXmoYblrrnlmahcIiBjbGFzcz1cInVpbGliLWlucHV0Q29udGFpbmVyIGhhcy1sZWZ0LWljb24gaGFzLXJpZ2h0LWljb25cIj5cbiAgICA8aSB2dHlwZT1cImljb25cIiBpZD1cInNlYXJjaEljb25cIiBuYW1lPVwi5pCc57Si5Zu+5qCHXCIgY2xhc3M9XCJmYXMgZmEtc2VhcmNoIHVpbGliLWlucHV0LWljb24gbGVmdFwiPjwvaT5cbiAgICA8aW5wdXQgdnR5cGU9XCJpbnB1dFwiIGlkPVwic2VhcmNoSW5wdXRcIiBuYW1lPVwi5pCc57Si6L6T5YWl5qGGXCIgdHlwZT1cInRleHRcIiBjbGFzcz1cInVpbGliLWlucHV0XCIgcGxhY2Vob2xkZXI9XCLmkJzntKLlhoXlrrlcIj5cbiAgICA8aSB2dHlwZT1cImljb25cIiBpZD1cImNsZWFySWNvblwiIG5hbWU9XCLmuIXpmaTlm77moIdcIiBjbGFzcz1cImZhcyBmYS10aW1lcyB1aWxpYi1pbnB1dC1pY29uIHJpZ2h0XCI+PC9pPlxuPC9kaXY+XG5cbjwhLS0g6aqM6K+B56CB6L6T5YWl5qGGIC0tPlxuPGRpdiB2dHlwZT1cImNvbnRhaW5lclwiIGlkPVwidmVyaWZ5Q29kZUNvbnRhaW5lclwiIG5hbWU9XCLpqozor4HnoIHovpPlhaXmoYblrrnlmahcIiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7IGdhcDogOHB4O1wiPlxuICAgIDxpbnB1dCB2dHlwZT1cImlucHV0XCIgaWQ9XCJ2ZXJpZnlDb2RlSW5wdXQxXCIgbmFtZT1cIumqjOivgeeggei+k+WFpeahhjFcIiB0eXBlPVwidGV4dFwiIGNsYXNzPVwidWlsaWItdmVyaWZ5Q29kZUlucHV0XCIgbWF4bGVuZ3RoPVwiMVwiPlxuICAgIDxpbnB1dCB2dHlwZT1cImlucHV0XCIgaWQ9XCJ2ZXJpZnlDb2RlSW5wdXQyXCIgbmFtZT1cIumqjOivgeeggei+k+WFpeahhjJcIiB0eXBlPVwidGV4dFwiIGNsYXNzPVwidWlsaWItdmVyaWZ5Q29kZUlucHV0XCIgbWF4bGVuZ3RoPVwiMVwiPlxuICAgIDxpbnB1dCB2dHlwZT1cImlucHV0XCIgaWQ9XCJ2ZXJpZnlDb2RlSW5wdXQzXCIgbmFtZT1cIumqjOivgeeggei+k+WFpeahhjNcIiB0eXBlPVwidGV4dFwiIGNsYXNzPVwidWlsaWItdmVyaWZ5Q29kZUlucHV0XCIgbWF4bGVuZ3RoPVwiMVwiPlxuICAgIDxpbnB1dCB2dHlwZT1cImlucHV0XCIgaWQ9XCJ2ZXJpZnlDb2RlSW5wdXQ0XCIgbmFtZT1cIumqjOivgeeggei+k+WFpeahhjRcIiB0eXBlPVwidGV4dFwiIGNsYXNzPVwidWlsaWItdmVyaWZ5Q29kZUlucHV0XCIgbWF4bGVuZ3RoPVwiMVwiPlxuICAgIDxpbnB1dCB2dHlwZT1cImlucHV0XCIgaWQ9XCJ2ZXJpZnlDb2RlSW5wdXQ1XCIgbmFtZT1cIumqjOivgeeggei+k+WFpeahhjVcIiB0eXBlPVwidGV4dFwiIGNsYXNzPVwidWlsaWItdmVyaWZ5Q29kZUlucHV0XCIgbWF4bGVuZ3RoPVwiMVwiPlxuICAgIDxpbnB1dCB2dHlwZT1cImlucHV0XCIgaWQ9XCJ2ZXJpZnlDb2RlSW5wdXQ2XCIgbmFtZT1cIumqjOivgeeggei+k+WFpeahhjZcIiB0eXBlPVwidGV4dFwiIGNsYXNzPVwidWlsaWItdmVyaWZ5Q29kZUlucHV0XCIgbWF4bGVuZ3RoPVwiMVwiPlxuPC9kaXY+XG5cXGBcXGBcXGBcblxuIyMjIDQuIOagh+mimOagj+e7hOS7tlxuLSAqKuagt+W8j+exuyoqOiBcXGAudWlsaWItc2Vjb25kUGFnZVRpdGxlQmFyXFxgXG4tICoq6KeE5YiZ6K+05piOKio6IOS6jOe6p+mhtemdoueahOagh+mimOagj++8jOmAmuW4uOWMheWQq+i/lOWbnuaMiemSruOAgeagh+mimOaWh+acrOWSjOaTjeS9nOaMiemSru+8jOaTjeS9nOaMiemSruaYr+WPr+mAieeahO+8jOW5tuS4lOW/hemhu+aUvuWcqOagh+mimOagj+eahOWPs+i+ueOAglxuLSAqKkhUTUznpLrkvosqKjpcblxcYFxcYFxcYGh0bWxcbjxkaXYgdnR5cGU9XCJ0aXRsZUJhclwiIGlkPVwidGl0bGVCYXJcIiBuYW1lPVwi5qCH6aKY5qCPXCIgY2xhc3M9XCJ1aWxpYi1zZWNvbmRQYWdlVGl0bGVCYXJcIj5cbiAgICA8YnV0dG9uIHZ0eXBlPVwiYnV0dG9uXCIgaWQ9XCJiYWNrQnV0dG9uXCIgbmFtZT1cIui/lOWbnuaMiemSrlwiIGNsYXNzPVwidWlsaWItaWNvbkJ1dHRvbiBzbWFsbFwiPlxuICAgICAgICA8aSB2dHlwZT1cImljb25cIiBpZD1cImJhY2tJY29uXCIgbmFtZT1cIui/lOWbnuWbvuagh1wiIGNsYXNzPVwiZmFzIGZhLWFycm93LWxlZnRcIj48L2k+XG4gICAgPC9idXR0b24+XG4gICAgPHNwYW4gdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJ0aXRsZVRleHRcIiBuYW1lPVwi6aG16Z2i5qCH6aKYXCIgY2xhc3M9XCJ1aWxpYi1sZXZlbDJUaXRsZVRleHRcIj7pobXpnaLmoIfpopg8L3NwYW4+XG48L2Rpdj5cblxcYFxcYFxcYFxuXG4jIyMgNS4g5byA5YWz57uE5Lu2XG4tICoq5qC35byP57G7Kio6IFxcYC51aWxpYi1pY29uU3dpdGNoXFxgLCBcXGAudWlsaWItc2xpZGVyU3dpdGNoXFxgXG4tICoq54q25oCB57G7Kio6IFxcYC5hY3RpdmVcXGBcbi0gKirop4TliJnor7TmmI4qKjog5byA5YWz57uE5Lu25pSv5oyB5Zu+5qCH5byA5YWz5ZKM5ruR5Z2X5byA5YWz5Lik56eN5qC35byP77yM6YCa6L+H5re75Yqg5oiW56e76ZmkXFxgLmFjdGl2ZVxcYOexu+adpeaOp+WItuW8gOWFs+eKtuaAgeOAglxuLSAqKkhUTUznpLrkvosqKjpcblxcYFxcYFxcYGh0bWxcbjxkaXYgdnR5cGU9XCJzd2l0Y2hcIiBpZD1cImljb25Td2l0Y2hcIiBuYW1lPVwi5Zu+5qCH5byA5YWzXCIgY2xhc3M9XCJ1aWxpYi1pY29uU3dpdGNoXCI+XG4gICAgPGkgdnR5cGU9XCJpY29uXCIgaWQ9XCJpY29uU3dpdGNoSWNvblwiIG5hbWU9XCLlm77moIflvIDlhbPlm77moIdcIiBjbGFzcz1cImZhcyBmYS1oZWFydFwiPjwvaT5cbjwvZGl2PlxuPGRpdiB2dHlwZT1cInN3aXRjaFwiIGlkPVwic2xpZGVyU3dpdGNoXCIgbmFtZT1cIua7keWdl+W8gOWFs1wiIGNsYXNzPVwidWlsaWItc2xpZGVyU3dpdGNoXCI+XG4gICAgPGRpdiB2dHlwZT1cInNsaWRlclwiIGlkPVwic2xpZGVyU3dpdGNoU2xpZGVyXCIgbmFtZT1cIua7keWdl+W8gOWFs+a7keWdl1wiIGNsYXNzPVwic2xpZGVyXCI+PC9kaXY+XG48L2Rpdj5cblxcYFxcYFxcYFxuXG4jIyMgNi4g5Y2V6YCJ5ZKM5aSa6YCJ57uE5Lu2XG4tICoq5a655Zmo57G7Kio6IFxcYC51aWxpYi1yYWRpby1ncm91cFxcYOOAgVxcYC51aWxpYi1jaGVja2JveC1ncm91cFxcYFxuLSAqKuagt+W8j+exuyoqOiBcXGAudWlsaWItaWNvblJhZGlvXFxgLCBcXGAudWlsaWItaWNvblRleHRSYWRpb1xcYCwgXFxgLnVpbGliLWljb25DaGVja2JveFxcYCwgXFxgLnVpbGliLWljb25UZXh0Q2hlY2tib3hcXGBcbi0gKirnirbmgIHnsbsqKjogXFxgLmNoZWNrZWRcXGBcbi0gKirlrZDlhYPntKDnsbsqKjogXFxgLnVpbGliLXJhZGlvLWljb25cXGAsIFxcYC51aWxpYi1jaGVja2JveC1pY29uXFxgLCBcXGAudWlsaWItcHJpbWFyeVRleHRcXGBcbi0gKirop4TliJnor7TmmI4qKjog5Y2V6YCJ5ZKM5aSa6YCJ57uE5Lu25pSv5oyB57qv5Zu+5qCH5ZKM5Zu+5qCH5paH5pys5Lik56eN5b2i5byP77yM6YCa6L+HXFxgLmNoZWNrZWRcXGDnsbvmjqfliLbpgInkuK3nirbmgIHvvIzlpJrpgInmoYblj6/kvb/nlKjlrrnlmajnsbvnu4TlkIjjgIJcbi0gKipIVE1M56S65L6LKio6XG5cXGBcXGBcXGBodG1sXG48ZGl2IHZ0eXBlPVwicmFkaW9Hcm91cFwiIGlkPVwicmFkaW9Hcm91cFwiIG5hbWU9XCLljZXpgInmoYbnu4RcIiBjbGFzcz1cInVpbGliLXJhZGlvLWdyb3VwXCI+XG4gICAgPGRpdiB2dHlwZT1cInJhZGlvXCIgaWQ9XCJpY29uVGV4dFJhZGlvMVwiIG5hbWU9XCLlm77moIfmlofmnKzljZXpgInpobkxXCIgY2xhc3M9XCJ1aWxpYi1pY29uVGV4dFJhZGlvXCI+XG4gICAgICAgIDxpIHZ0eXBlPVwiaWNvblwiIGlkPVwiaWNvblRleHRSYWRpb0ljb24xXCIgbmFtZT1cIuWbvuagh+aWh+acrOWNlemAiemhueWbvuaghzFcIiBjbGFzcz1cInVpbGliLXJhZGlvLWljb24gZmFzIGZhLWNpcmNsZVwiPjwvaT5cbiAgICAgICAgPHNwYW4gdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJpY29uVGV4dFJhZGlvVGV4dDFcIiBuYW1lPVwi5Zu+5qCH5paH5pys5Y2V6YCJ6aG55paH5pysMVwiIGNsYXNzPVwicmFkaW8tdGV4dFwiPumAiemhuTE8L3NwYW4+XG4gICAgPC9kaXY+XG4gICAgPGRpdiB2dHlwZT1cInJhZGlvXCIgaWQ9XCJpY29uVGV4dFJhZGlvMlwiIG5hbWU9XCLlm77moIfmlofmnKzljZXpgInpobkyXCIgY2xhc3M9XCJ1aWxpYi1pY29uVGV4dFJhZGlvXCI+XG4gICAgICAgIDxpIHZ0eXBlPVwiaWNvblwiIGlkPVwiaWNvblRleHRSYWRpb0ljb24yXCIgbmFtZT1cIuWbvuagh+aWh+acrOWNlemAiemhueWbvuaghzJcIiBjbGFzcz1cInVpbGliLXJhZGlvLWljb24gZmFzIGZhLWNpcmNsZVwiPjwvaT5cbiAgICAgICAgPHNwYW4gdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJpY29uVGV4dFJhZGlvVGV4dDJcIiBuYW1lPVwi5Zu+5qCH5paH5pys5Y2V6YCJ6aG55paH5pysMlwiIGNsYXNzPVwicmFkaW8tdGV4dFwiPumAiemhuTI8L3NwYW4+XG4gICAgPC9kaXY+XG48L2Rpdj5cbjxkaXYgdnR5cGU9XCJjaGVja0JveEdyb3VwXCIgaWQ9XCJjaGVja2JveEdyb3VwXCIgbmFtZT1cIuWkmumAieahhue7hFwiIGNsYXNzPVwidWlsaWItY2hlY2tib3gtZ3JvdXBcIj5cbiAgICA8ZGl2IHZ0eXBlPVwiY2hlY2tCb3hcIiBpZD1cImljb25UZXh0Q2hlY2tib3gxXCIgbmFtZT1cIuWbvuagh+aWh+acrOWkmumAiemAiemhuTFcIiBjbGFzcz1cInVpbGliLWljb25UZXh0Q2hlY2tib3hcIj5cbiAgICAgICAgPGkgdnR5cGU9XCJpY29uXCIgaWQ9XCJpY29uVGV4dENoZWNrYm94SWNvbjFcIiBuYW1lPVwi5Zu+5qCH5paH5pys5aSa6YCJ6YCJ6aG55Zu+5qCHMVwiIGNsYXNzPVwidWlsaWItY2hlY2tib3gtaWNvbiBmYXMgZmEtc3F1YXJlXCI+PC9pPlxuICAgICAgICA8c3BhbiB2dHlwZT1cInRleHRcIiBpZD1cImljb25UZXh0Q2hlY2tib3hUZXh0MVwiIG5hbWU9XCLlm77moIfmlofmnKzlpJrpgInpgInpobnmlofmnKwxXCIgY2xhc3M9XCJ1aWxpYi1wcmltYXJ5VGV4dFwiPumAiemhuTE8L3NwYW4+XG4gICAgPC9kaXY+XG4gICAgPGRpdiB2dHlwZT1cImNoZWNrQm94XCIgaWQ9XCJpY29uVGV4dENoZWNrYm94MlwiIG5hbWU9XCLlm77moIfmlofmnKzlpJrpgInpgInpobkyXCIgY2xhc3M9XCJ1aWxpYi1pY29uVGV4dENoZWNrYm94XCI+XG4gICAgICAgIDxpIHZ0eXBlPVwiaWNvblwiIGlkPVwiaWNvblRleHRDaGVja2JveEljb24yXCIgbmFtZT1cIuWbvuagh+aWh+acrOWkmumAiemAiemhueWbvuaghzJcIiBjbGFzcz1cInVpbGliLWNoZWNrYm94LWljb24gZmFzIGZhLXNxdWFyZVwiPjwvaT5cbiAgICAgICAgPHNwYW4gdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJpY29uVGV4dENoZWNrYm94VGV4dDJcIiBuYW1lPVwi5Zu+5qCH5paH5pys5aSa6YCJ6YCJ6aG55paH5pysMlwiIGNsYXNzPVwidWlsaWItcHJpbWFyeVRleHRcIj7pgInpobkyPC9zcGFuPlxuICAgIDwvZGl2PlxuPC9kaXY+XG5cXGBcXGBcXGBcblxuIyMjIDcuIOWIl+ihqOe7hOS7tlxuLSAqKuinhOWImeivtOaYjioqOiDkuIDkuKrliJfooajlrrnlmajljIXlkKtO5LiqdnR5cGU9bGlzdEl0ZW1DYXJk55qE5YiX6KGo5Y2h54mHXG4tICoqSFRNTOekuuS+iyoqOlxuXFxgXFxgXFxgaHRtbFxuPGRpdiB2dHlwZT1cInZlcnRpY2FsTGlzdFZpZXdcIiBpZD1cInZlcnRpY2FsTGlzdENvbnRhaW5lclwiIG5hbWU9XCLlnoLnm7TliJfooajlrrnlmahcIiBjbGFzcz1cInh4eFwiPlxuICAgIDxkaXYgdnR5cGU9XCJsaXN0SXRlbUNhcmRcIiBpZD1cInZlcnRpY2FsTGlzdENhcmQxXCIgbmFtZT1cIuWeguebtOWIl+ihqOWNoeeJhzFcIiBjbGFzcz1cInh4eFwiPlxuICAgICAgICB4eHjvvIjlhbfkvZPljaHniYfnmoTlhoXlrrnlranlrZDlhYPntKDoioLngrnvvIlcbiAgICA8L2Rpdj5cbiAgICA8ZGl2IHZ0eXBlPVwibGlzdEl0ZW1DYXJkXCIgaWQ9XCJ2ZXJ0aWNhbExpc3RDYXJkMlwiIG5hbWU9XCLlnoLnm7TliJfooajljaHniYcyXCIgY2xhc3M9XCJ4eHhcIj5cbiAgICAgICAgeHh477yI5YW35L2T5Y2h54mH55qE5YaF5a655a2p5a2Q5YWD57Sg6IqC54K577yJXG4gICAgPC9kaXY+XG48L2Rpdj5cbjxkaXYgdnR5cGU9XCJob3Jpem9udGFsTGlzdFZpZXdcIiBpZD1cImhvcml6b250YWxMaXN0Q29udGFpbmVyXCIgbmFtZT1cIuawtOW5s+WIl+ihqOWuueWZqFwiIGNsYXNzPVwieHh4XCI+XG4gICAgPGRpdiB2dHlwZT1cImxpc3RJdGVtQ2FyZFwiIGlkPVwiaG9yaXpvbnRhbExpc3RDYXJkMVwiIG5hbWU9XCLmsLTlubPliJfooajljaHniYcxXCIgY2xhc3M9XCJ4eHhcIj5cbiAgICAgICAgeHh477yI5YW35L2T5Y2h54mH55qE5YaF5a655a2p5a2Q5YWD57Sg6IqC54K577yJXG4gICAgPC9kaXY+XG4gICAgPGRpdiB2dHlwZT1cImxpc3RJdGVtQ2FyZFwiIGlkPVwiaG9yaXpvbnRhbExpc3RDYXJkMlwiIG5hbWU9XCLmsLTlubPliJfooajljaHniYcyXCIgY2xhc3M9XCJ4eHhcIj5cbiAgICAgICAgeHh477yI5YW35L2T5Y2h54mH55qE5YaF5a655a2p5a2Q5YWD57Sg6IqC54K577yJXG4gICAgPC9kaXY+XG48L2Rpdj5cblxcYFxcYFxcYFxuXG4jIyMgOC4g6L2u5pKt57uE5Lu2XG4tICoq5a655Zmo57G7Kio6IFxcYC51aWxpYi12aWV3UGFnZXJJbmRpY2F0b3JcXGBcbi0gKirlrZDlhYPntKDnsbsqKjogXFxgLnVpbGliLXh4eFZpZXdQYWdlckl0ZW1DYXJkXFxg44CBXFxgLnVpbGliLXZpZXdQYWdlckluZGljYXRvckNpcmNsZUl0ZW1cXGBcbi0gKirnirbmgIHnsbsqKjogXFxgLmFjdGl2ZVxcYFxuLSAqKuinhOWImeivtOaYjioqOiB2dHlwZT1cIm9uZVZpZXdQYWdlckNvbnRlbnRcIui9ruaSreWGheWuuWl0ZW3oioLngrnnmoTmmL7npLrlkozpmpDol4/lv4Xpobvkvb/nlKhkaXNwbGF5Om5vbmUvYmxvY2vmnaXliIfmjaLvvIzova7mkq3mjIfnpLrlmajkuIDoiKzkuI52dHlwZT1cInZpZXdQYWdlclwi6L2u5pKt5YaF5a655LiA6LW35L2/55So77yM6L2u5pKt5oyH56S65Zmo5a655Zmo5L2/55SoXFxgLnVpbGliLXZpZXdQYWdlckluZGljYXRvclxcYOexu+agh+ivhu+8jOS4gOS4qui9ruaSreWGheWuueWuueWZqOWMheWQq07kuKpcXGAudWlsaWIteHh4Vmlld1BhZ2VySXRlbUNhcmRcXGDova7mkq3ljaHniYfvvIzkuIDkuKrova7mkq3mjIfnpLrlmajlrrnlmajljIXlkKtO5LiqXFxgLnVpbGliLXZpZXdQYWdlckluZGljYXRvckNpcmNsZUl0ZW1cXGDmjIfnpLrlmajpobnvvIzova7mkq3lhoXlrrnlrrnlmajkuI7ova7mkq3mjIfnpLrlmajlrrnlmajmmK/lhYTlvJ/oioLngrnvvIzlrZDlhYPntKDpgJrov4dcXGAuYWN0aXZlXFxg57G75qCH6K+G5b2T5YmN5r+A5rS755qE6aG577yM6ZyA6KaB5ZyoXFxgLmJ5dGVmdW4vdWlsaWItY29tcG9uZW50cy5jc3NcXGDkuK3mib7liLDmraPnoa7nmoRcXGAudWlsaWIteHh4Vmlld1BhZ2VySXRlbUNhcmRcXGDnsbvmoLflvI/jgIJcbi0gKipIVE1M56S65L6LKio6XG5cXGBcXGBcXGBodG1sXG48ZGl2IHZ0eXBlPVwidmlld1BhZ2VyXCIgaWQ9XCJ2aWV3UGFnZXJDb250ZW50XCIgbmFtZT1cIui9ruaSreWGheWuueWuueWZqFwiIGNsYXNzPVwieHh4XCI+XG4gICAgPGRpdiB2dHlwZT1cIm9uZVZpZXdQYWdlckNvbnRlbnRcIiBpZD1cInZpZXdQYWdlckl0ZW0xXCIgbmFtZT1cIui9ruaSreWNoeeJhzFcIiBjbGFzcz1cInh4eCBhY3RpdmVcIj48L2Rpdj5cbiAgICA8ZGl2IHZ0eXBlPVwib25lVmlld1BhZ2VyQ29udGVudFwiIGlkPVwidmlld1BhZ2VySXRlbTJcIiBuYW1lPVwi6L2u5pKt5Y2h54mHMlwiIGNsYXNzPVwieHh4XCI+PC9kaXY+XG4gICAgPGRpdiB2dHlwZT1cIm9uZVZpZXdQYWdlckNvbnRlbnRcIiBpZD1cInZpZXdQYWdlckl0ZW0zXCIgbmFtZT1cIui9ruaSreWNoeeJhzNcIiBjbGFzcz1cInh4eFwiPjwvZGl2PlxuPC9kaXY+XG48ZGl2IHZ0eXBlPVwiYm90dG9tVGFiTmF2aWdhdGVCYXJcIiBpZD1cInZpZXdQYWdlckluZGljYXRvclwiIG5hbWU9XCLova7mkq3mjIfnpLrlmajlrrnlmahcIiBjbGFzcz1cInVpbGliLXZpZXdQYWdlckluZGljYXRvclwiPlxuICAgIDxkaXYgdnR5cGU9XCJib3R0b21UYWJOYXZpZ2F0ZUJhckl0ZW1cIiBpZD1cInZpZXdQYWdlckluZGljYXRvckNpcmNsZUl0ZW0xXCIgbmFtZT1cIui9ruaSreaMh+ekuuWZqOmhuTFcIiBjbGFzcz1cInVpbGliLXZpZXdQYWdlckluZGljYXRvckNpcmNsZUl0ZW0gYWN0aXZlXCI+PC9kaXY+XG4gICAgPGRpdiB2dHlwZT1cImJvdHRvbVRhYk5hdmlnYXRlQmFySXRlbVwiIGlkPVwidmlld1BhZ2VySW5kaWNhdG9yQ2lyY2xlSXRlbTJcIiBuYW1lPVwi6L2u5pKt5oyH56S65Zmo6aG5MlwiIGNsYXNzPVwidWlsaWItdmlld1BhZ2VySW5kaWNhdG9yQ2lyY2xlSXRlbVwiPjwvZGl2PlxuICAgIDxkaXYgdnR5cGU9XCJib3R0b21UYWJOYXZpZ2F0ZUJhckl0ZW1cIiBpZD1cInZpZXdQYWdlckluZGljYXRvckNpcmNsZUl0ZW0zXCIgbmFtZT1cIui9ruaSreaMh+ekuuWZqOmhuTNcIiBjbGFzcz1cInVpbGliLXZpZXdQYWdlckluZGljYXRvckNpcmNsZUl0ZW1cIj48L2Rpdj5cbjwvZGl2PlxuXFxgXFxgXFxgXG5cbiMjIyA5LiBUYWLnu4Tku7Zcbi0gKirmoLflvI/nsbsqKjogXFxgLnVpbGliLXVuZGVybGluZVRhYk1lbnVCYXJJdGVtXFxgLCBcXGAudWlsaWItc2xpZGVyVGFiTWVudUJhckl0ZW1cXGBcbi0gKirnirbmgIHnsbsqKjogXFxgLmFjdGl2ZVxcYFxuLSAqKuWtkOWFg+e0oOexuyoqOiBcXGAudWlsaWItdGFiLXRleHRcXGAsIFxcYC51aWxpYi10YWItbGluZVxcYFxuLSAqKuinhOWImeivtOaYjioqOiB2dHlwZT1cIm9uZVRhYkNvbnRlbnRDb250YWluZXJcInRhYumAiemhueWNoeWGheWuuWl0ZW3oioLngrnnmoTmmL7npLrlkozpmpDol4/lv4Xpobvkvb/nlKhkaXNwbGF5Om5vbmUvYmxvY2vmnaXliIfmjaLvvIxUYWLoj5zljZXmoI/nu4Tku7bkuIDoiKzmmK/kuI52dHlwZT1cInRhYkNvbnRhaW5lclwidGFi6YCJ6aG55Y2h5YaF5a655LiA6LW35L2/55So77yMVGFi6I+c5Y2V6aG557uE5Lu2dGFiTWVudUJhckl0ZW3mlK/mjIHkuIvliJLnur/lkozmu5HlnZfkuKTnp43moLflvI/vvIzpgJrov4dcXGAuYWN0aXZlXFxg57G75qCH6K+G5b2T5YmN5r+A5rS755qEVGFi6aG577yM5bm25LiUdGFi6I+c5Y2V5qCPdGFiTWVudUJhcuW/hemhu+iuvue9rnN0eWxlPVwibWFyZ2luLWJvdHRvbTogeHhweDtcIu+8jOiuqXRhYuiPnOWNleagj+WSjHRhYuWGheWuueWMuuacieWQiOmAgueahOS4iuS4i+mXtOi3nVxuLSAqKkhUTUznpLrkvosqKjpcblxcYFxcYFxcYGh0bWxcbjxkaXYgdnR5cGU9XCJ0YWJNZW51QmFyXCIgaWQ9XCJ1bmRlcmxpbmVUYWJNZW51QmFyXCIgbmFtZT1cIuS4i+WIkue6v1RhYuiPnOWNleagj1wiIGNsYXNzPVwidWlsaWItdW5kZXJsaW5lVGFiTWVudUJhclwiIHN0eWxlPVwibWFyZ2luLWJvdHRvbTogMjBweDtcIj5cbiAgICA8ZGl2IHZ0eXBlPVwidGFiTWVudUJhckl0ZW1cIiBpZD1cInVuZGVybGluZVRhYk1lbnVCYXJJdGVtMVwiIG5hbWU9XCLkuIvliJLnur9UYWLpobkxXCIgY2xhc3M9XCJ1aWxpYi11bmRlcmxpbmVUYWJNZW51QmFySXRlbSBhY3RpdmVcIj5cbiAgICAgICAgPHNwYW4gdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJ1bmRlcmxpbmVUYWJNZW51QmFySXRlbTFUZXh0XCIgbmFtZT1cIuS4i+WIkue6v1RhYumhuTHmlofmnKxcIiBjbGFzcz1cInVpbGliLXRhYi10ZXh0XCI+6aaW6aG1PC9zcGFuPlxuICAgICAgICA8ZGl2IHZ0eXBlPVwibGluZVwiIGlkPVwidW5kZXJsaW5lVGFiTWVudUJhckl0ZW0xTGluZVwiIG5hbWU9XCLkuIvliJLnur9UYWLpobkx5LiL5YiS57q/XCIgY2xhc3M9XCJ1aWxpYi10YWItbGluZVwiPjwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+XG48ZGl2IHZ0eXBlPVwidGFiQ29udGFpbmVyXCIgaWQ9XCJ0YWJDb250YWluZXIxXCIgbmFtZT1cIlRhYumAiemhueWNoeWGheWuueWuueWZqFwiIGNsYXNzPVwieHh4XCI+XG4gICAgPGRpdiB2dHlwZT1cIm9uZVRhYkNvbnRlbnRDb250YWluZXJcIiBpZD1cInRhYkNvbnRlbnQxXCIgbmFtZT1cIlRhYumAiemhueWNoeWGheWuuTFcIiBjbGFzcz1cInh4eCBhY3RpdmVcIj5cbiAgICAgICAgPHAgdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJ0YWJDb250ZW50MVRleHRcIiBuYW1lPVwiVGFi6YCJ6aG55Y2h5YaF5a65MeaWh+acrFwiIGNsYXNzPVwidWlsaWItcHJpbWFyeVRleHRcIj7ov5nmmK9UYWLpgInpobnljaHlhoXlrrkx55qE5paH5a2XPC9wPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgdnR5cGU9XCJvbmVUYWJDb250ZW50Q29udGFpbmVyXCIgaWQ9XCJ0YWJDb250ZW50MlwiIG5hbWU9XCJUYWLpgInpobnljaHlhoXlrrkyXCIgY2xhc3M9XCJ4eHhcIj5cbiAgICAgICAgPHAgdnR5cGU9XCJ0ZXh0XCIgaWQ9XCJ0YWJDb250ZW50MlRleHRcIiBuYW1lPVwiVGFi6YCJ6aG55Y2h5YaF5a65MuaWh+acrFwiIGNsYXNzPVwidWlsaWItcHJpbWFyeVRleHRcIj7ov5nmmK9UYWLpgInpobnljaHlhoXlrrky55qE5paH5a2XPC9wPlxuICAgIDwvZGl2PlxuPC9kaXY+XG5cXGBcXGBcXGBcblxuIyMjIDEwLiDlpJrnirbmgIHlrrnlmajnu4Tku7Zcbi0gKirop4TliJnor7TmmI4qKjogdnR5cGU9XFxgbXVsdGlTdGF0ZUNvbnRhaW5lclxcYOWkmueKtuaAgeWuueWZqOiKgueCueW/hemhu+WMheWQq07kuKpcXGBvbmVTdGF0ZUNvbnRlbnRDb250YWluZXJcXGDoioLngrnvvIx2dHlwZT1cIm9uZVN0YXRlQ29udGVudENvbnRhaW5lclwi5LiA5Liq54q25oCB5YaF5a655a655ZmoaXRlbeiKgueCueeahOaYvuekuuWSjOmakOiXj+W/hemhu+S9v+eUqGRpc3BsYXk6bm9uZS9ibG9ja+adpeWIh+aNouOAguS9v+eUqOWcuuaZr++8muW9k+mcgOimgeWxleekuuWkmuS4quS4jeWQjOeKtuaAgeeahOWGheWuu