import { GlobalConfig } from '@/share/types'
// import { Script, Link } from 'hono-vite-react-stack-node/components'
import process from 'node:process'

// 全局配置常量
const GLOBAL_CONFIG: GlobalConfig = {
  OSS_BASE_URL: process.env.OSS_BASE_URL || 'https://oss.d8d.fun',
  APP_NAME: process.env.APP_NAME || '多八多Aider',
}

// export const renderer = reactRenderer(({ children }) => {
//   return (
//     <html>
//       <head>
//         <meta charSet="UTF-8" />
//         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
//         <script src="https://ai-oss.d8d.fun/umd/vconsole.3.15.1.min.js"></script>
//         <script dangerouslySetInnerHTML={{ __html: `
//           const init = () => {
//             const urlParams = new URLSearchParams(window.location.search);
//             if (${import.meta.env?.PROD ? "true":"false"} && !urlParams.has('vconsole')) return;
//             var vConsole = new VConsole({
//               theme: urlParams.get('vconsole_theme') || 'light',
//               onReady: function() {
//                 console.log('vConsole is ready');
//               }
//             });
//           }
//           init();
//         `}} />
//         {/* 注入全局配置 */}
//         <script dangerouslySetInnerHTML={{ __html: `window.CONFIG = ${JSON.stringify(GLOBAL_CONFIG)};` }} />

//       </head>
//       <body>
//         {children}
//         <script type="module" src="/src/client/index.tsx"></script>
//       </body>
//     </html> 
//   )
// })

// export const Rooter2 = () => {
//   return (
//     <html>
//       <head>
//         <meta charSet="UTF-8" />
//         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
//         <link href='/src/style.css' rel="stylesheet" />
//         <script src="https://ai-oss.d8d.fun/umd/vconsole.3.15.1.min.js"></script>
//         <script dangerouslySetInnerHTML={{
//           __html: `
//           const init = () => {
//             const urlParams = new URLSearchParams(window.location.search);
//             if (${import.meta.env?.PROD ? "true" : "false"} && !urlParams.has('vconsole')) return;
//             var vConsole = new VConsole({
//               theme: urlParams.get('vconsole_theme') || 'light',
//               onReady: function() {
//                 console.log('vConsole is ready');
//               }
//             });
//           }
//           init();
//         `}} />
//         {/* 注入全局配置 */}
//         <script dangerouslySetInnerHTML={{ __html: `window.CONFIG = ${JSON.stringify(GLOBAL_CONFIG)};` }} />

//       </head>
//       <body>
//         <div id='root' dangerouslySetInnerHTML={{ __html: '<!--app-html-->' }}></div>
//         <script type="module" src="/src/client/index.tsx"></script>
//       </body>
//     </html>
//   )
// }

export const Rooter = () => {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/datav/logo.ico" />
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover" />
        <title>荆楚农事智慧农业数据驾驶舱</title>
        <script src="https://ai-oss.d8d.fun/umd/vconsole.3.15.1.min.js"></script>
        <script dangerouslySetInnerHTML={{
          __html: `
          const init = () => {
            const urlParams = new URLSearchParams(window.location.search);
            if (${import.meta.env?.PROD ? "true" : "false"} && !urlParams.has('vconsole')) return;
            var vConsole = new VConsole({
              theme: urlParams.get('vconsole_theme') || 'light',
              onReady: function() {
                console.log('vConsole is ready');
              }
            });
          }
          init();
        `}} />
        {/* 注入全局配置 */}
        <script dangerouslySetInnerHTML={{ __html: `window.CONFIG = ${JSON.stringify(GLOBAL_CONFIG)};` }} />
        <script dangerouslySetInnerHTML={{ __html: `
          // 页面加载时将数据写入会话存储
          window.addEventListener('DOMContentLoaded', () => {
            try {
              // 写入farmInfo数据
              sessionStorage.setItem('map', JSON.stringify({"farmInfo":{}}));

              // 写入serviceCenterItem数据
              const serviceCenterItem = {
                "id": "2d30e42e7ce91bfb9815bf7d1696866e",
                "createBy": "总经理",
                "createdTime": 1751247641000,
                "updateBy": "总经理",
                "updateTime": 1751256001000,
                "name": "大客户",
                "title": "",
                "contentAbstract": "<p><br></p>",
                "titleImgUrl": "https://aimg.aikenong.com.cn/igyaccessor/1/1f380997c3264035aee46f24665fd89a.jpg",
                "mapImgUrl": "",
                "longitude": 114.290625,
                "latitude": 30.483818,
                "address": "湖北省武汉市洪山区湖北省武汉市洪山区烽胜路35号烽胜路35号",
                "organizationId": 1020,
                "provinceName": "湖北省",
                "provinceCode": "420000",
                "cityName": "武汉市",
                "cityCode": "420100",
                "countyName": "洪山区",
                "countyCode": "420111",
                "serviceStatuss": 1,
                "userList": [{
                  "userId": "1a83ff2edebbd45f3d0d3ea567e56591",
                  "userName": "王湛",
                  "userAvatarUrl": "",
                  "userRoleId": "33",
                  "userRoleName": "服务中心负责人"
                }],
                "serviceCenter": null,
                "personInCharge": "王湛",
                "landAreaUnit": "亩",
                "totalLandArea": 25853.35,
                "homeFarmCount": 1,
                "homeFarmLandArea": 700,
                "signFarmCount": 16,
                "signFarmLandArea": 23887.24,
                "farmerCount": 1,
                "noCenterFarmerCount": 0
              };
              sessionStorage.setItem('serviceCenterItem', JSON.stringify(serviceCenterItem));

              // 写入showModuleList数据
              const showModuleList = [
                {"id": 21052, "module": "地图影像替换", "moduleKey": "ver.perm.moon.map.replace", "show": true},
                {"id": 21054, "module": "VR册管理", "moduleKey": "ver.perm.vr.photo.album", "show": true},
                {"id": 21055, "module": "灌溉情况", "moduleKey": "ver.perm.irrigate.condition", "show": true},
                {"id": 21056, "module": "农机", "moduleKey": "ver.perm.machinery.track", "show": true},
                {"id": 21144, "module": "四情监测", "moduleKey": "ver.perm.monitoring.station", "show": true},
                {"id": 21145, "module": "农事审核", "moduleKey": "ver.perm.audit.farming", "show": true},
                {"id": 21146, "module": "农资计算器", "moduleKey": "ver.perm.agricultural.calculator", "show": true},
                {"id": 21147, "module": "导入地块", "moduleKey": "ver.perm.import.land", "show": true},
                {"id": 21148, "module": "进度管理", "moduleKey": "ver.perm.schedule.manage", "show": true},
                {"id": 21149, "module": "数据采集", "moduleKey": "data.gather.manage", "show": true},
                {"id": 21150, "module": "固定资产", "moduleKey": "ver.perm.fixed.asset.manage", "show": true},
                {"id": 21151, "module": "农资管理", "moduleKey": "ver.perm.agricultural.manage", "show": true},
                {"id": 21152, "module": "运营账单", "moduleKey": "ver.perm.bill.manage", "show": true},
                {"id": 21153, "module": "营业统计", "moduleKey": "ver.perm.business.statistics", "show": true},
                {"id": 21154, "module": "种植历史", "moduleKey": "ver.perm.plant.history", "show": true}
              ];
              sessionStorage.setItem('showModuleList', JSON.stringify(showModuleList));

              // 写入token数据
              sessionStorage.setItem('token', 'a3bce5c87f81473fb299d8cc405f2621');

              // 写入userInfo数据
              const userInfo = {
                "id": "77fe2d542e3c2584f149340f01aaa9b0",
                "systemId": 1,
                "userName": "总经理",
                "mobile": "13700001001",
                "remarks": "备注内容",
                "contract": "",
                "userStatus": "regular",
                "userType": "enterprise",
                "organizationId": 1020,
                "organizationName": "农事服务供应链有限公司",
                "organizationLogo": "https://aimg.aikenong.com.cn/igyaccessor/1/55050d133f1c4f65abe70db73ea07378.jpeg",
                "departmentId": 0,
                "departmentName": null,
                "provinceName": "",
                "cityName": "",
                "countyName": "",
                "townshipName": "",
                "address": "北京市朝阳区金长安A区",
                "longitude": 0,
                "latitude": 0,
                "imgUrl": "https://uimg.aikenong.com.cn/igyuser/1/804d4252a7fa4cea8f9dcc98b799cdd3.png",
                "roleType": "farm.org",
                "roleId": 26,
                "roleName": "总经理",
                "orgRoleName": null,
                "orgRoleId": null,
                "businessType": 0,
                "userClassify": "other",
                "userPermissionList": [
                  {"id": 20188, "permissionName": "企业权限", "permissionExplain": "", "perms": "enterprise.auth", "farmType": 1, "permCount": null},
                  {"id": 20190, "permissionName": "企业信息", "permissionExplain": "", "perms": "farm.enterprise.info", "farmType": 1, "permCount": null},
                  {"id": 20191, "permissionName": "查看企业信息", "permissionExplain": "", "perms": "farm.enterprise.info.show", "farmType": 1, "permCount": null},
                  {"id": 20192, "permissionName": "编辑企业信息", "permissionExplain": "", "perms": "farm.enterprise.info.edit", "farmType": 1, "permCount": null},
                  {"id": 20193, "permissionName": "农场管理", "permissionExplain": "", "perms": "farm.manage", "farmType": 1, "permCount": null},
                  {"id": 20194, "permissionName": "查看农场信息", "permissionExplain": "不勾选，可查看分配权限的农场", "perms": "farm.info.show", "farmType": 1, "permCount": null},
                  {"id": 20195, "permissionName": "创建农场", "permissionExplain": "", "perms": "farm.manage.creation", "farmType": 1, "permCount": null},
                  {"id": 20196, "permissionName": "编辑农场", "permissionExplain": "", "perms": "farm.manage.edit", "farmType": 1, "permCount": null},
                  {"id": 20197, "permissionName": "删除农场", "permissionExplain": "", "perms": "farm.manage.delete", "farmType": 1, "permCount": null},
                  {"id": 20198, "permissionName": "人员管理", "permissionExplain": "", "perms": "user.manage", "farmType": 1, "permCount": null},
                  {"id": 20199, "permissionName": "查看人员信息", "permissionExplain": "不勾选，可查看分配权限的农场人员。勾选完，可查看所有", "perms": "user.manage.show.info", "farmType": 1, "permCount": null},
                  {"id": 20200, "permissionName": "添加人员", "permissionExplain": "不勾选，农场管理员可研究对应农场人员。勾选，可添加所有人员。", "perms": "user.manage.add", "farmType": 1, "permCount": null},
                  {"id": 20201, "permissionName": "编辑人员", "permissionExplain": "不勾选，农场管理员可编辑对应农场人员。勾选可编辑所有人员。", "perms": "user.manage.edit", "farmType": 1, "permCount": null},
                  {"id": 20202, "permissionName": "删除人员", "permissionExplain": "不勾选，农场管理员可删除对应农场人员。勾选可删除所有人员。", "perms": "user.manage.delete", "farmType": 1, "permCount": null},
                  {"id": 20203, "permissionName": "种植方案管理", "permissionExplain": "", "perms": "plant.plan.manage", "farmType": 1, "permCount": null},
                  {"id": 20224, "permissionName": "删除自建品种", "permissionExplain": "", "perms": "plan.self.built.kind.delete", "farmType": 1, "permCount": null},
                  {"id": 20204, "permissionName": "查看方案信息", "permissionExplain": "不勾选，可查看分配权限的农场种植方案。", "perms": "plan.info.show", "farmType": 1, "permCount": null},
                  {"id": 20205, "permissionName": "创建方案", "permissionExplain": "", "perms": "plan.info.creation", "farmType": 1, "permCount": null},
                  {"id": 20206, "permissionName": "编辑方案", "permissionExplain": "", "perms": "plan.info.edit", "farmType": 1, "permCount": null},
                  {"id": 20207, "permissionName": "配置方案", "permissionExplain": "", "perms": "plan.info.config", "farmType": 1, "permCount": null},
                  {"id": 20208, "permissionName": "删除方案", "permissionExplain": "", "perms": "plan.info.delete", "farmType": 1, "permCount": null},
                  {"id": 20209, "permissionName": "生育期查看", "permissionExplain": "", "perms": "plan.stage.info.show", "farmType": 1, "permCount": null},
                  {"id": 20210, "permissionName": "创建生育期", "permissionExplain": "", "perms": "plan.stage.info.creation", "farmType": 1, "permCount": null},
                  {"id": 20211, "permissionName": "编辑生育期", "permissionExplain": "", "perms": "plan.stage.info.edit", "farmType": 1, "permCount": null},
                  {"id": 20212, "permissionName": "删除生育期", "permissionExplain": "", "perms": "plan.stage.info.delete", "farmType": 1, "permCount": null},
                  {"id": 20213, "permissionName": "查看农事类型", "permissionExplain": "", "perms": "plan.operate.type.show", "farmType": 1, "permCount": null},
                  {"id": 20214, "permissionName": "创建农事类型", "permissionExplain": "", "perms": "plan.operate.type.creation", "farmType": 1, "permCount": null}
                ]
              };
              sessionStorage.setItem('userInfo', JSON.stringify(userInfo));

              // 写入version数据
              const version = [
                {"id": 21035, "permissionName": "15天天气预报", "permissionExplain": "15天天气预报", "perms": "ver.perm.fifteen.days.weather", "farmType": 3, "permCount": 0},
                {"id": 21060, "permissionName": "农场地块信息导出", "permissionExplain": "农场地块信息导出", "perms": "ver.perm.land.info.export", "farmType": 3, "permCount": 0},
                {"id": 21041, "permissionName": "其他收支费用记录", "permissionExplain": "其他收支费用记录", "perms": "ver.perm.other.cost.record", "farmType": 3, "permCount": 0},
                {"id": 21017, "permissionName": "自定义品种", "permissionExplain": "自定义品种", "perms": "ver.perm.customization.model.count", "farmType": 4, "permCount": 99999999},
                {"id": 21014, "permissionName": "根据作物、品种、地块负责人，区分地块颜色", "permissionExplain": "根据作物、品种、地块负责人，区分地块颜色", "perms": "ver.perm.customization.color", "farmType": 3, "permCount": 0},
                {"id": 21023, "permissionName": "农事审核数据导出", "permissionExplain": "农事审核数据导出", "perms": "ver.perm.farming.audit.export", "farmType": 3, "permCount": 0},
                {"id": 21032, "permissionName": "病虫害自定义预警", "permissionExplain": "病虫害自定义预警", "perms": "ver.perm.calamity.warning.customization", "farmType": 3, "permCount": 0},
                {"id": 21007, "permissionName": "地形地貌特征", "permissionExplain": "地形地貌特征", "perms": "ver.perm.topographic.landform", "farmType": 3, "permCount": 0},
                {"id": 21029, "permissionName": "记录总量", "permissionExplain": "记录总量", "perms": "ver.perm.data.gather.record.count", "farmType": 4, "permCount": 100000},
                {"id": 21011, "permissionName": "地图概览（省）", "permissionExplain": "地图概览（省）", "perms": "ver.perm.map.mode", "farmType": 3, "permCount": 0},
                {"id": 21048, "permissionName": "农事提醒", "permissionExplain": "农事提醒", "perms": "ver.perm.operate.reminder.message", "farmType": 3, "permCount": 0},
                {"id": 21019, "permissionName": "方案导入", "permissionExplain": "方案导入", "perms": "ver.perm.customization.plan.import", "farmType": 3, "permCount": 0},
                {"id": 21039, "permissionName": "农资出库入库/导出", "permissionExplain": "农资出库入库/导出", "perms": "ver.perm.agricultural.outbound.storage.export", "farmType": 3, "permCount": 0},
                {"id": 21042, "permissionName": "创建员工账号（数量）", "permissionExplain": "创建员工账号（数量）", "perms": "ver.perm.create.user.count", "farmType": 4, "permCount": 99999999},
                {"id": 21055, "permissionName": "灌溉情况", "permissionExplain": "灌溉情况", "perms": "ver.perm.irrigate.condition", "farmType": 3, "permCount": 0},
                {"id": 21049, "permissionName": "异常天气提醒", "permissionExplain": "异常天气提醒", "perms": "ver.perm.calamity.weather.message", "farmType": 3, "permCount": 0},
                {"id": 21006, "permissionName": "气候信息（年辐射、年蒸散量）", "permissionExplain": "气候信息（年辐射、年蒸散量）", "perms": "ver.perm.climate.info", "farmType": 3, "permCount": 0},
                {"id": 21008, "permissionName": "积温积雨", "permissionExplain": "积温积雨", "perms": "ver.perm.cumtem.cumrain", "farmType": 3, "permCount": 0},
                {"id": 21015, "permissionName": "企业风采、自定义信息发布", "permissionExplain": "企业风采、自定义信息发布", "perms": "ver.perm.customization.info.publish", "farmType": 3, "permCount": 0},
                {"id": 21030, "permissionName": "病虫害预警", "permissionExplain": "病虫害预警", "perms": "ver.perm.calamity.warning.disease.pests", "farmType": 3, "permCount": 0},
                {"id": 21013, "permissionName": "自定义负责人", "permissionExplain": "自定义负责人", "perms": "ver.perm.customization.head", "farmType": 3, "permCount": 0},
                {"id": 21051, "permissionName": "遥感异常提醒", "permissionExplain": "遥感异常提醒", "perms": "ver.perm.growth.monitor.message", "farmType": 3, "permCount": 0},
                {"id": 21016, "permissionName": "作物种类数量", "permissionExplain": "作物种类数量", "perms": "ver.perm.kind.count", "farmType": 4, "permCount": 99999999},
                {"id": 21056, "permissionName": "农机轨迹接口", "permissionExplain": "农机轨迹接口", "perms": "ver.perm.machinery.track", "farmType": 3, "permCount": 0},
                {"id": 21047, "permissionName": "自定义@消息提醒", "permissionExplain": "自定义@消息提醒", "perms": "ver.perm.remind.message", "farmType": 3, "permCount": 0},
                {"id": 21057, "permissionName": "农事图文记录", "permissionExplain": "农事图文记录", "perms": "ver.perm.ordinary.farming.image.text", "farmType": 3, "permCount": 0},
                {"id": 21025, "permissionName": "自定义周期性任务", "permissionExplain": "自定义周期性任务", "perms": "ver.perm.customization.cycle.task", "farmType": 3, "permCount": 0},
                {"id": 21033, "permissionName": "2小时降雨云图", "permissionExplain": "2小时降雨云图", "perms": "ver.perm.two.hours.weather", "farmType": 3, "permCount": 0},
                {"id": 21004, "permissionName": "省份（位置）-跨省地块的管理", "permissionExplain": "省份（位置）-跨省地块的管理", "perms": "ver.perm.province.count", "farmType": 4, "permCount": 99999999}
              ];
              sessionStorage.setItem('version', JSON.stringify(version));

              console.log('数据已成功写入会话存储');
            } catch (error) {
              console.error('写入会话存储时出错:', error);
            }
          });
        `}}
        />
        <style dangerouslySetInnerHTML={{
          __html: `
            #firstLoad {
                width: 80px;
                height: 80px;
                position: absolute;
                z-index: 999;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%)
            }

            #firstLoad span {
                display: inline-block;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #fff;
                position: absolute;
                -webkit-animation: load 1.04s ease infinite
            }

            @-webkit-keyframes load {
                0% {
                    -webkit-transform: scale(1.2);
                    opacity: 1
                }

                100% {
                    -webkit-transform: scale(.3);
                    opacity: .5
                }
            }

            #firstLoad span:first-child {
                left: 0;
                top: 50%;
                margin-top: -10px;
                -webkit-animation-delay: .13s
            }

            #firstLoad span:nth-child(2) {
                left: 10px;
                top: 10px;
                -webkit-animation-delay: .26s
            }

            #firstLoad span:nth-child(3) {
                left: 50%;
                top: 0;
                margin-left: -10px;
                -webkit-animation-delay: .39s
            }

            #firstLoad span:nth-child(4) {
                top: 10px;
                right: 10px;
                -webkit-animation-delay: .52s
            }

            #firstLoad span:nth-child(5) {
                right: 0;
                top: 50%;
                margin-top: -10px;
                -webkit-animation-delay: .65s
            }

            #firstLoad span:nth-child(6) {
                right: 10px;
                bottom: 10px;
                -webkit-animation-delay: .78s
            }

            #firstLoad span:nth-child(7) {
                bottom: 0;
                left: 50%;
                margin-left: -10px;
                -webkit-animation-delay: .91s
            }

            #firstLoad span:nth-child(8) {
                bottom: 10px;
                left: 10px;
                -webkit-animation-delay: 1.04s
            }
        
        `}}
        />
        <script type="module" crossOrigin="" src="/datav/assets/js/index-6530d0f6.js"></script>
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/@vue-37836d09.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/vue-router-c7cbbcaa.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/lodash-es-acda58df.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/@vueuse-1ddca6f0.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/@element-plus-bb6eebe0.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/@popperjs-b696b006.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/@ctrl-41c0891e.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/d3-array-d83825ab.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/d3-geo-106fc929.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/@turf-e5dd68ad.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/dayjs-423c4f07.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/async-validator-7d693152.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/memoize-one-63ab667a.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/normalize-wheel-es-cf7d7ba7.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/@floating-ui-f285e0b8.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/element-plus-842069d4.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/vue-next-wxlogin-91e03b70.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/vue-demi-71ba0ef2.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/pinia-0c8641d4.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/destr-9c6e2924.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/deep-pick-omit-418f72d7.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/pinia-plugin-persistedstate-1ec13968.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/zrender-ee9f2f6d.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/echarts-a77f8af6.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/nprogress-85851b89.js" />
        <link rel="modulepreload" crossOrigin="" href="/datav/assets/js/mapbox-gl-b315653c.js" />
        <link rel="stylesheet" href="/datav/assets/css/element-plus-12e19b9b.css" />
        <link rel="stylesheet" href="/datav/assets/css/vue-next-wxlogin-d8a75ef8.css" />
        <link rel="stylesheet" href="/datav/assets/css/nprogress-771398e6.css" />
        <link rel="stylesheet" href="/datav/assets/css/mapbox-gl-bbaabcf2.css" />
        <link rel="stylesheet" href="/datav/assets/css/index-de466de5.css" />
      </head>
      <body>
        <div id="firstLoad">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div id="app"></div>
      </body>
    </html>

  )
}