ts-glitter 19.2.9 → 19.3.0

package/lowcode/Entry.js

@@ -20,6 +20,14 @@ import { ApiCart } from './glitter-base/route/api-cart.js';
 export class Entry {
     static onCreate(glitter) {
         var _a, _b;
+        if (window.parent.glitter.getUrlParameter('device') === 'mobile') {
+            glitter.share.is_application = true;
+        }
+        else {
+            glitter.runJsInterFace("is_application", {}, (res) => {
+                glitter.share.is_application = res.is_application;
+            });
+        }
         if (glitter.getUrlParameter('EndCheckout') === '1') {
             try {
                 const lineItemIds = JSON.parse(localStorage.getItem('clear_cart_items'));
@@ -132,7 +140,7 @@ export class Entry {
         }
         window.renderClock = (_b = window.renderClock) !== null && _b !== void 0 ? _b : createClock();
         console.log(`Entry-time:`, window.renderClock.stop());
-        glitter.share.editerVersion = 'V_19.2.9';
+        glitter.share.editerVersion = 'V_19.3.0';
         glitter.share.start = new Date();
         const vm = { appConfig: [] };
         window.saasConfig = {
@@ -616,14 +624,14 @@ export class Entry {
             }
         });
         glitter.runJsInterFace('getTopInset', {}, (response) => {
-            glitter.share.top_inset = response.data;
+            glitter.share.top_inset = parseInt(response.data, 10);
         }, {
             webFunction: () => {
                 return { data: 0 };
             },
         });
         glitter.runJsInterFace('getBottomInset', {}, (response) => {
-            glitter.share.bottom_inset = response.data;
+            glitter.share.bottom_inset = parseInt(response.data, 10);
         }, {
             webFunction: () => {
                 return { data: 0 };

package/lowcode/Entry.ts

@@ -13,6 +13,13 @@ import { ApiCart } from './glitter-base/route/api-cart.js';
 export class Entry {
     // 建立初始函式
     public static onCreate(glitter: Glitter) {
+        if((window.parent as any).glitter.getUrlParameter('device')==='mobile') {
+            glitter.share.is_application=true
+        }else{
+            glitter.runJsInterFace("is_application",{},(res)=>{
+                glitter.share.is_application=res.is_application;
+            })
+        }
         //判斷結帳成功清空購物車紀錄
         if (glitter.getUrlParameter('EndCheckout') === '1') {
             try {
@@ -132,7 +139,7 @@ export class Entry {
         }
         (window as any).renderClock = (window as any).renderClock ?? createClock();
         console.log(`Entry-time:`, (window as any).renderClock.stop());
-        glitter.share.editerVersion = 'V_19.2.9';
+        glitter.share.editerVersion = 'V_19.3.0';
         glitter.share.start = new Date();
         const vm = { appConfig: [] };
         (window as any).saasConfig = {
@@ -696,7 +703,7 @@ export class Entry {
             'getTopInset',
             {},
             (response: any) => {
-                glitter.share.top_inset = response.data;
+                glitter.share.top_inset = parseInt(response.data,10);
             },
             {
                 webFunction: () => {
@@ -709,7 +716,7 @@ export class Entry {
             'getBottomInset',
             {},
             (response: any) => {
-                glitter.share.bottom_inset = response.data;
+                glitter.share.bottom_inset = parseInt(response.data,10);
             },
             {
                 webFunction: () => {

package/lowcode/app-component/footer.js

@@ -1,16 +1,30 @@
+import { GlobalUser } from '../glitter-base/global/global-user.js';
+import { ApiCart } from '../glitter-base/route/api-cart.js';
+import { Animation } from '../glitterBundle/module/Animation.js';
+import { Language } from '../glitter-base/global/language.js';
+import { CheckoutIndex } from '../public-components/checkout/index.js';
 const html = String.raw;
 export class Footer {
     static main(cf) {
-        return [
+        const gvc = cf.gvc;
+        return html ` 
+      <div style="height: ${gvc.glitter.share.bottom_inset / 2}px;"></div>
+      <div
+      class="position-fixed bottom-0 d-flex shadow vw-100 start-0"
+      style="z-index:10;justify-content: space-around;background: rgba(255,255,255,0.95);
+padding-bottom: ${gvc.glitter.share.bottom_inset / 2}px;;
+"
+    >
+      ${[
             {
                 title: '首頁',
                 icon: '<i class="fa-solid fa-house"></i>',
                 event: cf.gvc.event(() => {
-                    cf.gvc.glitter.href = '/index-mobile' + location.search;
+                    cf.gvc.glitter.href = '/index-app' + location.search;
                 }),
                 select: () => {
-                    return cf.gvc.glitter.getUrlParameter('page') === 'index-mobile';
-                }
+                    return cf.gvc.glitter.getUrlParameter('page') === 'index-app';
+                },
             },
             {
                 title: '分類',
@@ -20,18 +34,94 @@ export class Footer {
                 }),
                 select: () => {
                     return cf.gvc.glitter.getUrlParameter('page') === 'all-product';
-                }
+                },
             },
             {
                 title: '購物車',
                 icon: '<i class="fa-regular fa-cart-shopping"></i>',
                 event: cf.gvc.event(() => {
-                    cf.gvc.glitter.href = '/checkout' + location.search;
+                    ApiCart.checkoutCart = ApiCart.globalCart;
+                    gvc.glitter.innerDialog((gvc) => {
+                        return gvc.bindView(() => {
+                            const id = gvc.glitter.getUUID();
+                            return {
+                                bind: id,
+                                view: () => {
+                                    return [
+                                        html ` <div
+                          class="w-100 d-flex align-items-center justify-content-center fw-bold position-absolute top-0 start-0"
+                          style="height: 50px;
+                              background: ${gvc.glitter.share.globalValue['theme_color.0.solid-button-bg']};
+                              color:${gvc.glitter.share.globalValue['theme_color.0.solid-button-text']};
+                              z-index: 999;
+                              "
+                        >
+                          ${Language.text('cart')}
+                          <div
+                            class="position-absolute  d-flex align-items-center justify-content-center"
+                            style="top:50%;transform: translateY(-50%);
+width:40px;height: 40px;
+right:0px;
+"
+                            onclick="${gvc.event(() => {
+                                            gvc.closeDialog();
+                                        })}"
+                          >
+                            <i class="fa-solid fa-xmark"></i>
+                          </div>
+                        </div>`,
+                                        `  <div style="height:50px;"></div>`,
+                                        CheckoutIndex.main(gvc, cf.widget, {}),
+                                    ].join('');
+                                },
+                                divCreate: {
+                                    class: `h-100  w-100`,
+                                    style: `overflow-y: auto;background:#f0f0f0;`,
+                                },
+                            };
+                        });
+                    }, 'checkout', {
+                        animation: Animation.popup,
+                    });
                 }),
                 select: () => {
                     return cf.gvc.glitter.getUrlParameter('page') === 'checkout';
-                }
+                },
             },
+            ...(() => {
+                if (window.store_info.chat_toggle) {
+                    return [
+                        {
+                            title: '訊息',
+                            icon: '<i class="fa-sharp fa-solid fa-headset"></i>',
+                            event: cf.gvc.event(() => {
+                                const userID = (() => {
+                                    if (GlobalUser.token) {
+                                        return GlobalUser.parseJWT(GlobalUser.token).payload.userID;
+                                    }
+                                    else {
+                                        return gvc.glitter.macAddress;
+                                    }
+                                })();
+                                gvc.glitter.getModule(new URL('./cms-plugin/customer-message-user.js', gvc.glitter.root_path).href, cl => {
+                                    cl.mobileChat({
+                                        gvc: gvc,
+                                        chat: {
+                                            chat_id: [`${userID}`, 'manager'].sort().join('-'),
+                                            type: 'user',
+                                        },
+                                        user_id: `${userID}`,
+                                    });
+                                });
+                            }),
+                            select: () => { },
+                        },
+                    ];
+                }
+                else {
+                    return [];
+                }
+            })(),
             {
                 title: '我的',
                 icon: '<i class="fa-regular fa-user"></i>',
@@ -40,15 +130,27 @@ export class Footer {
                 }),
                 select: () => {
                     return cf.gvc.glitter.getUrlParameter('page') === 'account_userinfo';
-                }
-            }
-        ].map((dd) => {
-            const color = (dd.select()) ? cf.widget.formData.select_color : cf.widget.formData.un_select_color;
-            return html `<div class="d-flex flex-column align-items-center justify-content-center" style="height:63px;gap: 2px;cursor: pointer;" onclick="${dd.event}">
-        <div class="d-flex align-items-center justify-content-center fs-5" style="width:25px;height: 25px;color:${color};">${dd.icon}</div>
-        <div class="fw-500" style="font-size: 12px; color:${color};" >${dd.title}</div>
+                },
+            },
+        ]
+            .map((dd) => {
+            const color = dd.select() ? cf.gvc.glitter.share.globalValue['theme_color.0.border-button-text'] : '#8D8D8D';
+            return html ` <div
+            class="d-flex flex-column align-items-center justify-content-center"
+            style="height:63px;gap: 2px;cursor: pointer;"
+            onclick="${dd.event}"
+          >
+            <div
+              class="d-flex align-items-center justify-content-center fs-5"
+              style="width:25px;height: 25px;color:${color};"
+            >
+              ${dd.icon}
+            </div>
+            <div class="fw-bold" style="font-size: 12px; color:${color};">${dd.title}</div>
+          </div>`;
+        })
+            .join('')}
     </div>`;
-        }).join('');
     }
 }
 window.glitter.setModule(import.meta.url, Footer);

package/lowcode/app-component/footer.ts

@@ -1,65 +1,166 @@
-import {GVC} from "../glitterBundle/GVController.js";
-const html=String.raw
-export class Footer{
+import { GVC } from '../glitterBundle/GVController.js';
+import { GlobalUser } from '../glitter-base/global/global-user.js';
+import { ApiCart } from '../glitter-base/route/api-cart.js';
+import { Animation } from '../glitterBundle/module/Animation.js';
+import { Language } from '../glitter-base/global/language.js';
+import { CheckoutIndex } from '../public-components/checkout/index.js';
 
-    public static main(cf: { gvc: GVC; formData: any; widget: any; key: string; callback: (data: any) => void }){
-return [
-    {
-        title:'首頁',
-        icon:'<i class="fa-solid fa-house"></i>',
-        event:cf.gvc.event(()=>{
-cf.gvc.glitter.href='/index-mobile'+location.search
-        }),
-        select:()=>{
-            return cf.gvc.glitter.getUrlParameter('page')==='index-mobile'
-        }
-    },
-    {
-        title:'分類',
-        icon:'<i class="fa-duotone fa-solid fa-grid-2"></i>',
-        event:cf.gvc.event(()=>{
-            cf.gvc.glitter.href='/all-product'+location.search
-        }),
-        select:()=>{
-            return cf.gvc.glitter.getUrlParameter('page')==='all-product'
-        }
-    },
-    {
-        title:'購物車',
-        icon:'<i class="fa-regular fa-cart-shopping"></i>',
-        event:cf.gvc.event(()=>{
-            cf.gvc.glitter.href='/checkout'+location.search
-        }),
-        select:()=>{
-            return cf.gvc.glitter.getUrlParameter('page')==='checkout'
-        }
-    },
-    // {
-    //     title:'訊息',
-    //     icon:'<i class="fa-sharp fa-solid fa-headset"></i>',
-    //     event:cf.gvc.event(()=>{}),
-    //     select:()=>{
-    //
-    //     }
-    // },
-    {
-        title:'我的',
-        icon:'<i class="fa-regular fa-user"></i>',
-        event:cf.gvc.event(()=>{
-            cf.gvc.glitter.href='/account_userinfo'+location.search
-        }),
-        select:()=>{
-            return cf.gvc.glitter.getUrlParameter('page')==='account_userinfo'
-        }
-    }
-].map((dd:any)=>{
-    const color=(dd.select()) ? cf.widget.formData.select_color:cf.widget.formData.un_select_color
-    return html`<div class="d-flex flex-column align-items-center justify-content-center" style="height:63px;gap: 2px;cursor: pointer;" onclick="${dd.event}">
-        <div class="d-flex align-items-center justify-content-center fs-5" style="width:25px;height: 25px;color:${color};">${dd.icon}</div>
-        <div class="fw-500" style="font-size: 12px; color:${color};" >${dd.title}</div>
-    </div>`
-}).join('')
-    }
+const html = String.raw;
+
+export class Footer {
+  public static main(cf: { gvc: GVC; formData: any; widget: any; key: string; callback: (data: any) => void }) {
+    const gvc = cf.gvc;
+    return html` 
+      <div style="height: ${gvc.glitter.share.bottom_inset / 2 }px;"></div>
+      <div
+      class="position-fixed bottom-0 d-flex shadow vw-100 start-0"
+      style="z-index:10;justify-content: space-around;background: rgba(255,255,255,0.95);
+padding-bottom: ${gvc.glitter.share.bottom_inset / 2 }px;;
+"
+    >
+      ${[
+        {
+          title: '首頁',
+          icon: '<i class="fa-solid fa-house"></i>',
+          event: cf.gvc.event(() => {
+            cf.gvc.glitter.href = '/index-app' + location.search;
+          }),
+          select: () => {
+            return cf.gvc.glitter.getUrlParameter('page') === 'index-app';
+          },
+        },
+        {
+          title: '分類',
+          icon: '<i class="fa-duotone fa-solid fa-grid-2"></i>',
+          event: cf.gvc.event(() => {
+            cf.gvc.glitter.href = '/all-product' + location.search;
+          }),
+          select: () => {
+            return cf.gvc.glitter.getUrlParameter('page') === 'all-product';
+          },
+        },
+        {
+          title: '購物車',
+          icon: '<i class="fa-regular fa-cart-shopping"></i>',
+          event: cf.gvc.event(() => {
+            ApiCart.checkoutCart = ApiCart.globalCart;
+            gvc.glitter.innerDialog(
+              (gvc: GVC) => {
+                return gvc.bindView(() => {
+                  const id = gvc.glitter.getUUID();
+                  return {
+                    bind: id,
+                    view: () => {
+                      return [
+                        html` <div
+                          class="w-100 d-flex align-items-center justify-content-center fw-bold position-absolute top-0 start-0"
+                          style="height: 50px;
+                              background: ${gvc.glitter.share.globalValue['theme_color.0.solid-button-bg']};
+                              color:${gvc.glitter.share.globalValue['theme_color.0.solid-button-text']};
+                              z-index: 999;
+                              "
+                        >
+                          ${Language.text('cart')}
+                          <div
+                            class="position-absolute  d-flex align-items-center justify-content-center"
+                            style="top:50%;transform: translateY(-50%);
+width:40px;height: 40px;
+right:0px;
+"
+                            onclick="${gvc.event(() => {
+                              gvc.closeDialog();
+                            })}"
+                          >
+                            <i class="fa-solid fa-xmark"></i>
+                          </div>
+                        </div>`,
+                        `  <div style="height:50px;"></div>`,
+                        CheckoutIndex.main(gvc, cf.widget, {}),
+                      ].join('');
+                    },
+                    divCreate: {
+                      class: `h-100  w-100`,
+                      style: `overflow-y: auto;background:#f0f0f0;`,
+                    },
+                  };
+                });
+              },
+              'checkout',
+              {
+                animation: Animation.popup,
+              }
+            );
+            // ApiCart.toCheckOutPage(ApiCart.globalCart);
+          }),
+          select: () => {
+            return cf.gvc.glitter.getUrlParameter('page') === 'checkout';
+          },
+        },
+        ...(() => {
+          if ((window as any).store_info.chat_toggle) {
+            return [
+              {
+                title: '訊息',
+                icon: '<i class="fa-sharp fa-solid fa-headset"></i>',
+                event: cf.gvc.event(() => {
+                  const userID = (() => {
+                    if (GlobalUser.token) {
+                      return GlobalUser.parseJWT(GlobalUser.token).payload.userID;
+                    } else {
+                      return gvc.glitter.macAddress;
+                    }
+                  })();
+                  gvc.glitter.getModule(
+                    new URL('./cms-plugin/customer-message-user.js', gvc.glitter.root_path).href,
+                    cl => {
+                      cl.mobileChat({
+                        gvc: gvc,
+                        chat: {
+                          chat_id: [`${userID}`, 'manager'].sort().join('-'),
+                          type: 'user',
+                        },
+                        user_id: `${userID}`,
+                      });
+                    }
+                  );
+                }),
+                select: () => {},
+              },
+            ];
+          } else {
+            return [];
+          }
+        })(),
+        {
+          title: '我的',
+          icon: '<i class="fa-regular fa-user"></i>',
+          event: cf.gvc.event(() => {
+            cf.gvc.glitter.href = '/account_userinfo' + location.search;
+          }),
+          select: () => {
+            return cf.gvc.glitter.getUrlParameter('page') === 'account_userinfo';
+          },
+        },
+      ]
+        .map((dd: any) => {
+          const color = dd.select() ? cf.gvc.glitter.share.globalValue['theme_color.0.border-button-text'] : '#8D8D8D';
+          return html` <div
+            class="d-flex flex-column align-items-center justify-content-center"
+            style="height:63px;gap: 2px;cursor: pointer;"
+            onclick="${dd.event}"
+          >
+            <div
+              class="d-flex align-items-center justify-content-center fs-5"
+              style="width:25px;height: 25px;color:${color};"
+            >
+              ${dd.icon}
+            </div>
+            <div class="fw-bold" style="font-size: 12px; color:${color};">${dd.title}</div>
+          </div>`;
+        })
+        .join('')}
+    </div>`;
+  }
 }
 
 (window as any).glitter.setModule(import.meta.url, Footer);

package/lowcode/backend-manager/bg-widget.js

@@ -1919,7 +1919,7 @@ ${(_c = obj.default) !== null && _c !== void 0 ? _c : ''}</textarea
     static container(htmlString, obj) {
         var _a;
         return html ` <div
-      class=" mb-0 ${document.body.clientWidth > 768 ? 'mx-auto mt-4' : 'w-100 mx-0 mt-2'}"
+      class=" mb-0 ${document.body.clientWidth > 768 ? 'mx-auto mt-4' : 'w-100 mx-0'}"
       style="max-width: 100%; width: ${this.getContainerWidth()}px; ${(_a = obj === null || obj === void 0 ? void 0 : obj.style) !== null && _a !== void 0 ? _a : ''}"
     >
       ${htmlString}

package/lowcode/backend-manager/bg-widget.ts

@@ -2314,7 +2314,7 @@ ${obj.default ?? ''}</textarea
     }
   ) {
     return html` <div
-      class=" mb-0 ${document.body.clientWidth > 768 ? 'mx-auto mt-4' : 'w-100 mx-0 mt-2'}"
+      class=" mb-0 ${document.body.clientWidth > 768 ? 'mx-auto mt-4' : 'w-100 mx-0'}"
       style="max-width: 100%; width: ${this.getContainerWidth()}px; ${obj?.style ?? ''}"
     >
       ${htmlString}

package/lowcode/cms-plugin/app-design.js

@@ -0,0 +1,150 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { BgWidget } from '../backend-manager/bg-widget.js';
+import { ApiPageConfig } from '../api/pageConfig.js';
+export class AppDesign {
+    static main(gvc) {
+        const html = String.raw;
+        return BgWidget.container([
+            html ` <div class="title-container">${BgWidget.title('APP佈景主題')}</div>`,
+            BgWidget.card(gvc.bindView(() => {
+                const id = gvc.glitter.getUUID();
+                return {
+                    bind: id,
+                    view: () => {
+                        return html `
+                  <div class="d-flex flex-column" style="gap:5px;">
+                    ${[
+                            `<div class="tx_normal fs-5 fw-500">2414-居家生活</div>`,
+                            `<div class="tx_normal fs-sm fw-500 text-body" style="">上次儲存時間: 03-21 14:27</div>`,
+                            ``,
+                        ].join('')}
+                  </div>
+                  <div class="flex-fill"></div>
+                  <div class="d-flex" style="gap:10px;">
+                    ${[
+                            BgWidget.grayButton('主題資訊', gvc.event(() => { })),
+                            BgWidget.save(gvc.event(() => {
+                                window.parent.glitter.setUrlParameter('function', 'user-editor');
+                                window.parent.glitter.setUrlParameter('device', 'mobile');
+                                window.parent.glitter.setUrlParameter('page', 'index-app');
+                                window.parent.location.reload();
+                            }), '主題設計'),
+                        ].join('')}
+                  </div>
+                `;
+                    },
+                    divCreate: {
+                        class: `w-100 d-flex align-items-center`,
+                        style: `gap:10px;`,
+                    },
+                };
+            })),
+            BgWidget.card(html `
+          <div class="d-flex flex-column" style="gap:5px;">
+            ${[
+                `<div class="tx_normal fs-6 fw-bold">佈景主題庫</div>`,
+                `<div class="tx_normal fs-sm fw-500 text-body" style="">從佈景主題庫中，更換佈景主題樣式。</div>`,
+                ``,
+            ].join('')}
+          </div>
+        `),
+            BgWidget.card(html `
+          <div class="d-flex flex-column" style="gap:5px;">
+            ${[
+                `<div class="tx_normal fs-6 fw-bold">熱門免費佈景主題</div>`,
+                `<div class="tx_normal fs-sm fw-500 text-body" style="">佈景主題涵蓋核心功能，無需編寫程式碼即可讓您輕鬆自訂。</div>`,
+                `<div class="w-100 border-top my-2"></div>`,
+                gvc.bindView(() => {
+                    return {
+                        bind: gvc.glitter.getUUID(),
+                        view: () => __awaiter(this, void 0, void 0, function* () {
+                            const templateList = (yield ApiPageConfig.getTemplateList()).response.result.reverse();
+                            return templateList
+                                .map((dd) => {
+                                return html ` <div class="w-100 h-100 parent mx-auto" style="cursor:pointer;">
+      <div class="hoverBlock shadow rounded-3" style="position: relative;">
+        <div
+          class=" "
+          style="width: 100%;
+ position: relative;
+ border-top-left-radius: 12.24px;
+ border-top-right-radius: 12.24px;
+top:0px;
+
+             background-image: url('${dd.template_config.image[0]}');
+ /* 设置背景图片的URL */
+    background-size: cover;
+ /* 将背景图片放大以覆盖整个容器 */
+    background-position: center;
+ /* 将背景图片水平和垂直居中对齐 */
+    background-repeat: no-repeat;
+ /* 防止背景图片重复 */
+                 padding-bottom: 133%;"
+        ></div>
+        <div
+          class="hoverPlace"
+          style="position: absolute;width: 100%;height: 100%;background:rgba(255, 255, 255, 0.5);top: 0px;left: 0px;align-items: center;justify-content: center;gap:0px;opacity: 0;z-index: 2;"
+        >
+          <div
+            class="btn btn-sm bgf6 text-black border"
+            style="color: black !important;width: 60px;height: 28px;"
+          >
+            預覽
+          </div>
+          <div
+            class="btn btn-primary-c addTheme"
+            style="color: black;width: 40px;margin-left: 10px;color: white;height: 28px;background:#393939;"
+          >
+            新增
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex-fill py-3"
+        style="display: flex;flex-direction: column;gap: 10px;"
+      >
+        <div
+          class="fs-5"
+          style="color: black;text-align: start;font-size: 24px;font-style: normal;font-weight: 600;line-height: 100%;"
+        >
+          ${dd.template_config.name}
+        </div>
+        <div class="d-flex flex-wrap" style="gap: 5px;" >
+          ${dd.template_config.tag.map((dd) => {
+                                    return `  <div
+            class="badge bg-primary text-white"
+            style="color: rgb(218, 187, 131);text-align: start;font-size: 14px;font-style: normal;font-weight: 600;line-height: 100%;background: linear-gradient(143deg, #FFB400 -22.7%, #FF6C02 114.57%);;"
+          >
+            ${dd}
+          </div>`;
+                                }).join('')}
+        </div>
+      </div>
+    </div>`;
+                            }).map((dd) => {
+                                return `<div class="col-6 col-lg-4">${dd}</div>`;
+                            })
+                                .join('');
+                        }),
+                        divCreate: {
+                            class: `row`
+                        }
+                    };
+                }),
+            ].join('')}
+          </div>
+        `),
+        ].join(`<div class="my-3"></div>`), {
+            style: 'max-width:950px;',
+        });
+    }
+}
+window.glitter.setModule(import.meta.url, AppDesign);