Init Gitea

views/files/amipro_utils.js

@@ -0,0 +1,57 @@
+/**
+ * amiPro utils
+ */
+
+'use strict';
+
+function setI18NText(i18n_map){
+  for (const key of i18n_map.keys()) {
+    const elm = $("#"+key);
+    if(elm){
+      const lang = window.navigator.language;
+      var elem = i18n_map.get(key) 
+      var msg = null
+      if(elem){
+        msg = elem.get(lang)
+        if(!msg)msg=elem.get('en-US');
+      }
+      if(!msg)msg = key+"-"+lang
+      
+      $("#"+key).html(msg);
+    }
+  }
+}
+
+function getI18NText(i18n_map, key){
+  const lang = window.navigator.language;
+  var elem = i18n_map.get(key) 
+  var msg = null
+  if(elem){
+    msg = elem.get(lang)
+    if(!msg)msg=elem.get('en-US');
+  }
+  if(!msg)msg = key+"-"+lang
+  
+  return msg  
+}
+
+function getI18NJsonText(json_text){
+  const lang = window.navigator.language;
+  var msg = null
+  try {
+    var parsedJson = (typeof json_text == "object")?json_text:JSON.parse(json_text);
+    msg = parsedJson[lang] || parsedJson['en-US'];
+    if(!msg && 0<Object.keys(parsedJson).length)msg = parsedJson[Object.keys(parsedJson)[0]];
+    //TODO: Translate to lang by AI call
+  } catch (e) {
+    msg=json_text;
+  }
+  return msg  
+}
+
+function buildI18NJson(text, lang=window.navigator.language) {
+  //const lang = window.navigator.language;
+  var json = {};
+  json[lang] = text;
+  return JSON.stringify(json);
+}

views/files/config.js

@@ -0,0 +1,27 @@
+/**
+ * Config
+ * -------------------------------------------------------------------------------------
+ * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
+ * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
+ */
+
+'use strict';
+
+// JS global variables
+let config = {
+  colors: {
+    primary: '#696cff',
+    secondary: '#8592a3',
+    success: '#71dd37',
+    info: '#03c3ec',
+    warning: '#ffab00',
+    danger: '#ff3e1d',
+    dark: '#233446',
+    black: '#000',
+    white: '#fff',
+    body: '#f4f5fb',
+    headingColor: '#566a7f',
+    axisColor: '#a1acb8',
+    borderColor: '#eceef1'
+  }
+};

views/files/dashboards-analytics.js

@@ -0,0 +1,662 @@
+/**
+ * Dashboard Analytics
+ */
+
+'use strict';
+
+(function () {
+  let cardColor, headingColor, axisColor, shadeColor, borderColor;
+
+  cardColor = config.colors.white;
+  headingColor = config.colors.headingColor;
+  axisColor = config.colors.axisColor;
+  borderColor = config.colors.borderColor;
+
+  // Total Revenue Report Chart - Bar Chart
+  // --------------------------------------------------------------------
+  const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
+    totalRevenueChartOptions = {
+      series: [
+        {
+          name: '2021',
+          data: [18, 7, 15, 29, 18, 12, 9]
+        },
+        {
+          name: '2020',
+          data: [-13, -18, -9, -14, -5, -17, -15]
+        }
+      ],
+      chart: {
+        height: 300,
+        stacked: true,
+        type: 'bar',
+        toolbar: { show: false }
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '33%',
+          borderRadius: 12,
+          startingShape: 'rounded',
+          endingShape: 'rounded'
+        }
+      },
+      colors: [config.colors.primary, config.colors.info],
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: 'smooth',
+        width: 6,
+        lineCap: 'round',
+        colors: [cardColor]
+      },
+      legend: {
+        show: true,
+        horizontalAlign: 'left',
+        position: 'top',
+        markers: {
+          height: 8,
+          width: 8,
+          radius: 12,
+          offsetX: -3
+        },
+        labels: {
+          colors: axisColor
+        },
+        itemMargin: {
+          horizontal: 10
+        }
+      },
+      grid: {
+        borderColor: borderColor,
+        padding: {
+          top: 0,
+          bottom: -8,
+          left: 20,
+          right: 20
+        }
+      },
+      xaxis: {
+        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+        labels: {
+          style: {
+            fontSize: '13px',
+            colors: axisColor
+          }
+        },
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        labels: {
+          style: {
+            fontSize: '13px',
+            colors: axisColor
+          }
+        }
+      },
+      responsive: [
+        {
+          breakpoint: 1700,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '32%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1580,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '35%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1440,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '42%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1300,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '48%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1200,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '40%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 1040,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 11,
+                columnWidth: '48%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 991,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '30%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 840,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '35%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 768,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '28%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 640,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '32%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 576,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '37%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 480,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '45%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 420,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '52%'
+              }
+            }
+          }
+        },
+        {
+          breakpoint: 380,
+          options: {
+            plotOptions: {
+              bar: {
+                borderRadius: 10,
+                columnWidth: '60%'
+              }
+            }
+          }
+        }
+      ],
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
+    const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
+    totalRevenueChart.render();
+  }
+
+  // Growth Chart - Radial Bar Chart
+  // --------------------------------------------------------------------
+  const growthChartEl = document.querySelector('#growthChart'),
+    growthChartOptions = {
+      series: [78],
+      labels: ['Growth'],
+      chart: {
+        height: 240,
+        type: 'radialBar'
+      },
+      plotOptions: {
+        radialBar: {
+          size: 150,
+          offsetY: 10,
+          startAngle: -150,
+          endAngle: 150,
+          hollow: {
+            size: '55%'
+          },
+          track: {
+            background: cardColor,
+            strokeWidth: '100%'
+          },
+          dataLabels: {
+            name: {
+              offsetY: 15,
+              color: headingColor,
+              fontSize: '15px',
+              fontWeight: '600',
+              fontFamily: 'Public Sans'
+            },
+            value: {
+              offsetY: -25,
+              color: headingColor,
+              fontSize: '22px',
+              fontWeight: '500',
+              fontFamily: 'Public Sans'
+            }
+          }
+        }
+      },
+      colors: [config.colors.primary],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: 'dark',
+          shadeIntensity: 0.5,
+          gradientToColors: [config.colors.primary],
+          inverseColors: true,
+          opacityFrom: 1,
+          opacityTo: 0.6,
+          stops: [30, 70, 100]
+        }
+      },
+      stroke: {
+        dashArray: 5
+      },
+      grid: {
+        padding: {
+          top: -35,
+          bottom: -10
+        }
+      },
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof growthChartEl !== undefined && growthChartEl !== null) {
+    const growthChart = new ApexCharts(growthChartEl, growthChartOptions);
+    growthChart.render();
+  }
+
+  // Profit Report Line Chart
+  // --------------------------------------------------------------------
+  const profileReportChartEl = document.querySelector('#profileReportChart'),
+    profileReportChartConfig = {
+      chart: {
+        height: 80,
+        // width: 175,
+        type: 'line',
+        toolbar: {
+          show: false
+        },
+        dropShadow: {
+          enabled: true,
+          top: 10,
+          left: 5,
+          blur: 3,
+          color: config.colors.warning,
+          opacity: 0.15
+        },
+        sparkline: {
+          enabled: true
+        }
+      },
+      grid: {
+        show: false,
+        padding: {
+          right: 8
+        }
+      },
+      colors: [config.colors.warning],
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 5,
+        curve: 'smooth'
+      },
+      series: [
+        {
+          data: [110, 270, 145, 245, 205, 285]
+        }
+      ],
+      xaxis: {
+        show: false,
+        lines: {
+          show: false
+        },
+        labels: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        show: false
+      }
+    };
+  if (typeof profileReportChartEl !== undefined && profileReportChartEl !== null) {
+    const profileReportChart = new ApexCharts(profileReportChartEl, profileReportChartConfig);
+    profileReportChart.render();
+  }
+
+  // Order Statistics Chart
+  // --------------------------------------------------------------------
+  const chartOrderStatistics = document.querySelector('#orderStatisticsChart'),
+    orderChartConfig = {
+      chart: {
+        height: 165,
+        width: 130,
+        type: 'donut'
+      },
+      labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
+      series: [85, 15, 50, 50],
+      colors: [config.colors.primary, config.colors.secondary, config.colors.info, config.colors.success],
+      stroke: {
+        width: 5,
+        colors: cardColor
+      },
+      dataLabels: {
+        enabled: false,
+        formatter: function (val, opt) {
+          return parseInt(val) + '%';
+        }
+      },
+      legend: {
+        show: false
+      },
+      grid: {
+        padding: {
+          top: 0,
+          bottom: 0,
+          right: 15
+        }
+      },
+      plotOptions: {
+        pie: {
+          donut: {
+            size: '75%',
+            labels: {
+              show: true,
+              value: {
+                fontSize: '1.5rem',
+                fontFamily: 'Public Sans',
+                color: headingColor,
+                offsetY: -15,
+                formatter: function (val) {
+                  return parseInt(val) + '%';
+                }
+              },
+              name: {
+                offsetY: 20,
+                fontFamily: 'Public Sans'
+              },
+              total: {
+                show: true,
+                fontSize: '0.8125rem',
+                color: axisColor,
+                label: 'Weekly',
+                formatter: function (w) {
+                  return '38%';
+                }
+              }
+            }
+          }
+        }
+      }
+    };
+  if (typeof chartOrderStatistics !== undefined && chartOrderStatistics !== null) {
+    const statisticsChart = new ApexCharts(chartOrderStatistics, orderChartConfig);
+    statisticsChart.render();
+  }
+
+  // Income Chart - Area chart
+  // --------------------------------------------------------------------
+  const incomeChartEl = document.querySelector('#incomeChart'),
+    incomeChartConfig = {
+      series: [
+        {
+          data: [24, 21, 30, 22, 42, 26, 35, 29]
+        }
+      ],
+      chart: {
+        height: 215,
+        parentHeightOffset: 0,
+        parentWidthOffset: 0,
+        toolbar: {
+          show: false
+        },
+        type: 'area'
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 2,
+        curve: 'smooth'
+      },
+      legend: {
+        show: false
+      },
+      markers: {
+        size: 6,
+        colors: 'transparent',
+        strokeColors: 'transparent',
+        strokeWidth: 4,
+        discrete: [
+          {
+            fillColor: config.colors.white,
+            seriesIndex: 0,
+            dataPointIndex: 7,
+            strokeColor: config.colors.primary,
+            strokeWidth: 2,
+            size: 6,
+            radius: 8
+          }
+        ],
+        hover: {
+          size: 7
+        }
+      },
+      colors: [config.colors.primary],
+      fill: {
+        type: 'gradient',
+        gradient: {
+          shade: shadeColor,
+          shadeIntensity: 0.6,
+          opacityFrom: 0.5,
+          opacityTo: 0.25,
+          stops: [0, 95, 100]
+        }
+      },
+      grid: {
+        borderColor: borderColor,
+        strokeDashArray: 3,
+        padding: {
+          top: -20,
+          bottom: -8,
+          left: -10,
+          right: 8
+        }
+      },
+      xaxis: {
+        categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          show: true,
+          style: {
+            fontSize: '13px',
+            colors: axisColor
+          }
+        }
+      },
+      yaxis: {
+        labels: {
+          show: false
+        },
+        min: 10,
+        max: 50,
+        tickAmount: 4
+      }
+    };
+  if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
+    const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
+    incomeChart.render();
+  }
+
+  // Expenses Mini Chart - Radial Chart
+  // --------------------------------------------------------------------
+  const weeklyExpensesEl = document.querySelector('#expensesOfWeek'),
+    weeklyExpensesConfig = {
+      series: [65],
+      chart: {
+        width: 60,
+        height: 60,
+        type: 'radialBar'
+      },
+      plotOptions: {
+        radialBar: {
+          startAngle: 0,
+          endAngle: 360,
+          strokeWidth: '8',
+          hollow: {
+            margin: 2,
+            size: '45%'
+          },
+          track: {
+            strokeWidth: '50%',
+            background: borderColor
+          },
+          dataLabels: {
+            show: true,
+            name: {
+              show: false
+            },
+            value: {
+              formatter: function (val) {
+                return '$' + parseInt(val);
+              },
+              offsetY: 5,
+              color: '#697a8d',
+              fontSize: '13px',
+              show: true
+            }
+          }
+        }
+      },
+      fill: {
+        type: 'solid',
+        colors: config.colors.primary
+      },
+      stroke: {
+        lineCap: 'round'
+      },
+      grid: {
+        padding: {
+          top: -10,
+          bottom: -15,
+          left: -10,
+          right: -10
+        }
+      },
+      states: {
+        hover: {
+          filter: {
+            type: 'none'
+          }
+        },
+        active: {
+          filter: {
+            type: 'none'
+          }
+        }
+      }
+    };
+  if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) {
+    const weeklyExpenses = new ApexCharts(weeklyExpensesEl, weeklyExpensesConfig);
+    weeklyExpenses.render();
+  }
+})();

views/files/demo.css

@@ -0,0 +1,107 @@
+/*
+* demo.css
+* File include item demo only specific css only
+******************************************************************************/
+
+.menu .app-brand.demo {
+  height: 64px;
+  margin-top: 12px;
+}
+
+.app-brand-logo.demo svg {
+  width: 22px;
+  height: 38px;
+}
+
+.app-brand-text.demo {
+  font-size: 1.75rem;
+  letter-spacing: -0.5px;
+  text-transform: lowercase;
+}
+
+/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
+/* Detached navbar */
+.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
+  padding-top: 76px !important;
+}
+/* Default navbar */
+.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
+  padding-top: 64px !important;
+}
+
+/* Navbar page z-index issue solution */
+.content-wrapper .navbar {
+  z-index: auto;
+}
+
+/*
+* Content
+******************************************************************************/
+
+.demo-blocks > * {
+  display: block !important;
+}
+
+.demo-inline-spacing > * {
+  margin: 1rem 0.375rem 0 0 !important;
+}
+
+/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
+.demo-vertical-spacing > * {
+  margin-top: 1rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+.demo-vertical-spacing-lg > * {
+  margin-top: 1.875rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing-lg.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+.demo-vertical-spacing-xl > * {
+  margin-top: 5rem !important;
+  margin-bottom: 0 !important;
+}
+.demo-vertical-spacing-xl.demo-only-element > :first-child {
+  margin-top: 0 !important;
+}
+
+.rtl-only {
+  display: none !important;
+  text-align: left !important;
+  direction: ltr !important;
+}
+
+[dir='rtl'] .rtl-only {
+  display: block !important;
+}
+
+/*
+* Layout demo
+******************************************************************************/
+
+.layout-demo-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 1rem;
+}
+.layout-demo-placeholder img {
+  width: 900px;
+}
+.layout-demo-info {
+  text-align: center;
+  margin-top: 1rem;
+}

views/files/main.js

@@ -0,0 +1,118 @@
+/**
+ * Main
+ */
+
+'use strict';
+
+let menu, animate;
+
+(function () {
+  // Initialize menu
+  //-----------------
+
+  let layoutMenuEl = document.querySelectorAll('#layout-menu');
+  layoutMenuEl.forEach(function (element) {
+    menu = new Menu(element, {
+      orientation: 'vertical',
+      closeChildren: false
+    });
+    // Change parameter to true if you want scroll animation
+    window.Helpers.scrollToActive((animate = false));
+    window.Helpers.mainMenu = menu;
+  });
+
+  // Initialize menu togglers and bind click on each
+  let menuToggler = document.querySelectorAll('.layout-menu-toggle');
+  menuToggler.forEach(item => {
+    item.addEventListener('click', event => {
+      event.preventDefault();
+      window.Helpers.toggleCollapsed();
+    });
+  });
+
+  // Display menu toggle (layout-menu-toggle) on hover with delay
+  let delay = function (elem, callback) {
+    let timeout = null;
+    elem.onmouseenter = function () {
+      // Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
+      if (!Helpers.isSmallScreen()) {
+        timeout = setTimeout(callback, 300);
+      } else {
+        timeout = setTimeout(callback, 0);
+      }
+    };
+
+    elem.onmouseleave = function () {
+      // Clear any timers set to timeout
+      document.querySelector('.layout-menu-toggle').classList.remove('d-block');
+      clearTimeout(timeout);
+    };
+  };
+  if (document.getElementById('layout-menu')) {
+    delay(document.getElementById('layout-menu'), function () {
+      // not for small screen
+      if (!Helpers.isSmallScreen()) {
+        document.querySelector('.layout-menu-toggle').classList.add('d-block');
+      }
+    });
+  }
+
+  // Display in main menu when menu scrolls
+  let menuInnerContainer = document.getElementsByClassName('menu-inner'),
+    menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
+  if (menuInnerContainer.length > 0 && menuInnerShadow) {
+    menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
+      if (this.querySelector('.ps__thumb-y').offsetTop) {
+        menuInnerShadow.style.display = 'block';
+      } else {
+        menuInnerShadow.style.display = 'none';
+      }
+    });
+  }
+
+  // Init helpers & misc
+  // --------------------
+
+  // Init BS Tooltip
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+
+  // Accordion active class
+  const accordionActiveFunction = function (e) {
+    if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
+      e.target.closest('.accordion-item').classList.add('active');
+    } else {
+      e.target.closest('.accordion-item').classList.remove('active');
+    }
+  };
+
+  const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
+  const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
+    accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
+    accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
+  });
+
+  // Auto update layout based on screen size
+  window.Helpers.setAutoUpdate(true);
+
+  // Toggle Password Visibility
+  window.Helpers.initPasswordToggle();
+
+  // Speech To Text
+  window.Helpers.initSpeechToText();
+
+  // Manage menu expanded/collapsed with templateCustomizer & local storage
+  //------------------------------------------------------------------
+
+  // If current layout is horizontal OR current window screen is small (overlay menu) than return from here
+  if (window.Helpers.isSmallScreen()) {
+    return;
+  }
+
+  // If current layout is vertical and current window screen is > small
+
+  // Auto update menu collapsed/expanded based on the themeConfig
+  window.Helpers.setCollapsed(true, false);
+})();

views/files/md-block.js

@@ -0,0 +1,304 @@
+/**
+ * <md-block> custom element
+ * @author Lea Verou
+ */
+
+let marked = window.marked;
+let DOMPurify = window.DOMPurify;
+let Prism = window.Prism;
+
+export const URLs = {
+	marked: "https://cdn.jsdelivr.net/npm/marked/src/marked.min.js",
+	DOMPurify: "https://cdn.jsdelivr.net/npm/dompurify@2.3.3/dist/purify.es.min.js"
+}
+
+// Fix indentation
+function deIndent(text) {
+	let indent = text.match(/^[\r\n]*([\t ]+)/);
+
+	if (indent) {
+		indent = indent[1];
+
+		text = text.replace(RegExp("^" + indent, "gm"), "");
+	}
+
+	return text;
+}
+
+export class MarkdownElement extends HTMLElement {
+	constructor() {
+		super();
+
+		this.renderer = Object.assign({}, this.constructor.renderer);
+
+		for (let property in this.renderer) {
+			this.renderer[property] = this.renderer[property].bind(this);
+		}
+	}
+
+	get rendered() {
+		return this.getAttribute("rendered");
+	}
+
+	get mdContent () {
+		return this._mdContent;
+	}
+
+	set mdContent (html) {
+		this._mdContent = html;
+		this._contentFromHTML = false;
+
+		this.render();
+	}
+
+	connectedCallback() {
+		Object.defineProperty(this, "untrusted", {
+			value: this.hasAttribute("untrusted"),
+			enumerable: true,
+			configurable: false,
+			writable: false
+		});
+
+		if (this._mdContent === undefined) {
+			this._contentFromHTML = true;
+			this._mdContent = deIndent(this.innerHTML);
+			// https://github.com/markedjs/marked/issues/874#issuecomment-339995375
+			// marked expects markdown quotes (>) to be un-escaped, otherwise they won't render correctly
+			this._mdContent = this._mdContent.replace(/&gt;/g, '>');
+		}
+
+		this.render();
+	}
+
+	async render () {
+		if (!this.isConnected || this._mdContent === undefined) {
+			return;
+		}
+
+		if (!marked) {
+			marked = import(URLs.marked).then(m => m.marked);
+		}
+
+		marked = await marked;
+
+		marked.setOptions({
+			gfm: true,
+			smartypants: true,
+			langPrefix: "language-",
+		});
+
+		marked.use({renderer: this.renderer});
+
+		let html = this._parse();
+
+		if (this.untrusted) {
+			let mdContent = this._mdContent;
+			html = await MarkdownElement.sanitize(html);
+			if (this._mdContent !== mdContent) {
+				// While we were running this async call, the content changed
+				// We don’t want to overwrite with old data. Abort mission!
+				return;
+			}
+		}
+
+		this.innerHTML = html;
+
+		if (!Prism && URLs.Prism && this.querySelector("code")) {
+			Prism = import(URLs.Prism);
+
+			if (URLs.PrismCSS) {
+				let link = document.createElement("link");
+				link.rel = "stylesheet";
+				link.href = URLs.PrismCSS;
+				document.head.appendChild(link);
+			}
+		}
+
+		if (Prism) {
+			await Prism; // in case it's still loading
+			Prism.highlightAllUnder(this);
+		}
+
+		if (this.src) {
+			this.setAttribute("rendered", this._contentFromHTML? "fallback" : "remote");
+		}
+		else {
+			this.setAttribute("rendered", this._contentFromHTML? "content" : "property");
+		}
+
+		// Fire event
+		let event = new CustomEvent("md-render", {bubbles: true, composed: true});
+		this.dispatchEvent(event);
+	}
+
+	static async sanitize(html) {
+		if (!DOMPurify) {
+			DOMPurify = import(URLs.DOMPurify).then(m => m.default);
+		}
+
+		DOMPurify = await DOMPurify; // in case it's still loading
+
+		return DOMPurify.sanitize(html);
+	}
+};
+
+export class MarkdownSpan extends MarkdownElement {
+	constructor() {
+		super();
+	}
+
+	_parse () {
+		return marked.parseInline(this._mdContent);
+	}
+
+	static renderer = {
+		codespan (code) {
+			if (this._contentFromHTML) {
+				// Inline HTML code needs to be escaped to not be parsed as HTML by the browser
+				// This results in marked double-escaping it, so we need to unescape it
+				code = code.replace(/&amp;(?=[lg]t;)/g, "&");
+			}
+			else {
+				// Remote code may include characters that need to be escaped to be visible in HTML
+				code = code.replace(/</g, "&lt;");
+			}
+
+			return `<code>${code}</code>`;
+		}
+	}
+}
+
+export class MarkdownBlock extends MarkdownElement {
+	constructor() {
+		super();
+	}
+
+	get src() {
+		return this._src;
+	}
+
+	set src(value) {
+		this.setAttribute("src", value);
+	}
+
+	get hmin() {
+		return this._hmin || 1;
+	}
+
+	set hmin(value) {
+		this.setAttribute("hmin", value);
+	}
+
+	get hlinks() {
+		return this._hlinks ?? null;
+	}
+
+	set hlinks(value) {
+		this.setAttribute("hlinks", value);
+	}
+
+	_parse () {
+		return marked.parse(this._mdContent);
+	}
+
+	static renderer = Object.assign({
+		heading (text, level, _raw, slugger) {
+			level = Math.min(6, level + (this.hmin - 1));
+			const id = slugger.slug(text);
+			const hlinks = this.hlinks;
+
+			let content;
+
+			if (hlinks === null) {
+				// No heading links
+				content = text;
+			}
+			else {
+				content = `<a href="#${id}" class="anchor">`;
+
+				if (hlinks === "") {
+					// Heading content is the link
+					content += text + "</a>";
+				}
+				else {
+					// Headings are prepended with a linked symbol
+					content += hlinks + "</a>" + text;
+				}
+			}
+
+			return `
+				<h${level} id="${id}">
+					${content}
+				</h${level}>`;
+		},
+
+		code (code, language, escaped) {
+			if (this._contentFromHTML) {
+				// Inline HTML code needs to be escaped to not be parsed as HTML by the browser
+				// This results in marked double-escaping it, so we need to unescape it
+				code = code.replace(/&amp;(?=[lg]t;)/g, "&");
+			}
+			else {
+				// Remote code may include characters that need to be escaped to be visible in HTML
+				code = code.replace(/</g, "&lt;");
+			}
+
+			return `<pre class="language-${language}"><code>${code}</code></pre>`;
+		}
+	}, MarkdownSpan.renderer);
+
+	static get observedAttributes() {
+		return ["src", "hmin", "hlinks"];
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) {
+			return;
+		}
+
+		switch (name) {
+			case "src":
+				let url;
+				try {
+					url = new URL(newValue, location);
+				}
+				catch (e) {
+					return;
+				}
+
+				let prevSrc = this.src;
+				this._src = url;
+
+				if (this.src !== prevSrc) {
+					fetch(this.src)
+					.then(response => {
+						if (!response.ok) {
+							throw new Error(`Failed to fetch ${this.src}: ${response.status} ${response.statusText}`);
+						}
+
+						return response.text();
+					})
+					.then(text => {
+						this.mdContent = text;
+					})
+					.catch(e => {});
+				}
+
+				break;
+			case "hmin":
+				if (newValue > 0) {
+					this._hmin = +newValue;
+
+					this.render();
+				}
+				break;
+			case "hlinks":
+				this._hlinks = newValue;
+				this.render();
+		}
+	}
+}
+
+
+customElements.define("md-block", MarkdownBlock);
+customElements.define("md-span", MarkdownSpan);

views/files/perfect-scrollbar.css

@@ -0,0 +1,211 @@
+/*
+ * Container style
+ */
+.ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 15px;
+  /* there must be 'bottom' or 'top' for ps__rail-x */
+  bottom: 0px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  width: 15px;
+  /* there must be 'right' or 'left' for ps__rail-y */
+  right: 0;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: transparent;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+  background-color: #eee;
+  opacity: 0.9;
+}
+
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;
+  height: 6px;
+  /* there must be 'bottom' for ps__thumb-x */
+  bottom: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__thumb-y {
+  background-color: #aaa;
+  border-radius: 6px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  width: 6px;
+  /* there must be 'right' for ps__thumb-y */
+  right: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+  background-color: #999;
+  height: 11px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+  background-color: #999;
+  width: 11px;
+}
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+.ps {
+  position: relative;
+}
+
+.ps__rail-x {
+  height: 0.25rem;
+}
+
+.ps__rail-y {
+  width: 0.25rem;
+}
+
+.ps__rail-x,
+.ps__rail-y,
+.ps__thumb-x,
+.ps__thumb-y {
+  border-radius: 10rem;
+}
+
+.ps__rail-x:hover,
+.ps__rail-x:focus,
+.ps__rail-x.ps--clicking,
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking > .ps__thumb-x {
+  height: 0.375rem;
+}
+
+.ps__rail-y:hover,
+.ps__rail-y:focus,
+.ps__rail-y.ps--clicking,
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking > .ps__thumb-y {
+  width: 0.375rem;
+}
+
+.ps__thumb-x {
+  height: 0.25rem;
+  bottom: 0;
+}
+
+.ps__thumb-y {
+  width: 0.25rem;
+  right: 0;
+}
+
+.light-style .ps__thumb-x,
+.light-style .ps__thumb-y {
+  background-color: rgba(67, 89, 113, 0.4);
+}
+.light-style .ps__rail-x:hover,
+.light-style .ps__rail-y:hover,
+.light-style .ps__rail-x:focus,
+.light-style .ps__rail-y:focus,
+.light-style .ps__rail-x.ps--clicking,
+.light-style .ps__rail-y.ps--clicking {
+  background-color: rgba(67, 89, 113, 0.2);
+}
+.light-style .ps__rail-x:hover > .ps__thumb-x,
+.light-style .ps__rail-y:hover > .ps__thumb-y,
+.light-style .ps__rail-x:focus > .ps__thumb-x,
+.light-style .ps__rail-y:focus > .ps__thumb-y,
+.light-style .ps__rail-x.ps--clicking > .ps__thumb-x,
+.light-style .ps__rail-y.ps--clicking > .ps__thumb-y {
+  background-color: rgba(67, 89, 113, 0.7);
+}
+.light-style .ps-inverted .ps__rail-x:hover,
+.light-style .ps-inverted .ps__rail-y:hover,
+.light-style .ps-inverted .ps__rail-x:focus,
+.light-style .ps-inverted .ps__rail-y:focus,
+.light-style .ps-inverted .ps__rail-x.ps--clicking,
+.light-style .ps-inverted .ps__rail-y.ps--clicking {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.light-style .ps-inverted .ps__thumb-x,
+.light-style .ps-inverted .ps__thumb-y {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+.light-style .ps-inverted .ps__rail-x:hover > .ps__thumb-x,
+.light-style .ps-inverted .ps__rail-y:hover > .ps__thumb-y,
+.light-style .ps-inverted .ps__rail-x:focus > .ps__thumb-x,
+.light-style .ps-inverted .ps__rail-y:focus > .ps__thumb-y,
+.light-style .ps-inverted .ps__rail-x.ps--clicking > .ps__thumb-x,
+.light-style .ps-inverted .ps__rail-y.ps--clicking > .ps__thumb-y {
+  background-color: #fff;
+}
+
+@supports (-moz-appearance: none) {
+  #both-scrollbars-example {
+    max-width: 1080px;
+    margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

views/files/portal.js

@@ -0,0 +1,128 @@
+
+$(async function(){
+
+    setI18NText(i18n_messages);
+    
+    if('/docs.html' == window.location.pathname)return;
+    else if(sessionStorage.getItem('nickname') == null || sessionStorage.getItem('uid') == null ||
+            sessionStorage.getItem('nickname') == '' || sessionStorage.getItem('uid') == ''){
+        try{
+            var response = await fetch("/getusrinf", {
+                method: "POST",
+                cache: "no-cache"
+            });
+            if(response.status == 200){
+                let data = await response.json();
+                if(data.status == "OK"){
+                    sessionStorage.setItem('nickname', getI18NJsonText(data.name));
+                    sessionStorage.setItem('uid', data.uid);
+                    sessionStorage.setItem('email', data.email);
+                }else{
+                    window.location.href = "/login.html";
+                    return;
+                }
+            }else{
+                window.location.href = "/login.html";
+                return;
+            }
+        }catch(err){
+            window.location.href = "/login.html";
+            return;
+        }
+    }
+
+
+    try{
+    var response = await fetch("/chksession", {
+        method: "POST",
+        cache: "no-cache",
+        headers: {
+            "Content-Type": "application/json"
+        }
+    });
+    if(response.status == 200){
+        let data = await response.json();
+        if(data.status == "OK"){
+            //let user_id = data.user_id;
+            //$('#user_id').html(user_id);
+        }else{
+            window.location.href = "login.html";
+        }
+    }else{
+        window.location.href = "login.html";
+    }
+    }catch(err){
+    alert(getI18NText(i18n_messages, 'msg_sys_err'));
+    }finally{
+        if(document.getElementById("spinner"))document.getElementById("spinner").style.display = "none";
+    }
+
+})
+
+const i18n_messages = new Map();
+
+var lang_map = new Map();
+lang_map.set("en-US", "Conversations");
+lang_map.set("zh-CN", "对话");
+lang_map.set("ja", "会話");
+i18n_messages.set("menu_conversation", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "Space market");
+lang_map.set("zh-CN", "空间市场");
+lang_map.set("ja", "スペースマーケット");
+i18n_messages.set("menu_market", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "Space Settings");
+lang_map.set("zh-CN", "空间设置");
+lang_map.set("ja", "スペース設定");
+i18n_messages.set("menu_settings", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "Users");
+lang_map.set("zh-CN", "用户");
+lang_map.set("ja", "ユーザー");
+i18n_messages.set("menu_mgr", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "Space builder");
+lang_map.set("zh-CN", "空间构建");
+lang_map.set("ja", "スペースビルダー");
+i18n_messages.set("menu_builder", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "Documents");
+lang_map.set("zh-CN", "文档");
+lang_map.set("ja", "ドキュメント");
+i18n_messages.set("menu_docs", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "Contact us");
+lang_map.set("zh-CN", "联系我们");
+lang_map.set("ja", "お問い合わせ");
+i18n_messages.set("title_contact", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "Log out");
+lang_map.set("zh-CN", "登  出");
+lang_map.set("ja", "ログアウト");
+i18n_messages.set("label_logout", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "Device Management");
+lang_map.set("zh-CN", "设备管理");
+lang_map.set("ja", "デバイス管理");
+i18n_messages.set("label_device_mng", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "System error occurred. Please try again later");
+lang_map.set("zh-CN", "系统出现错误，请稍后重试。");
+lang_map.set("ja", "システムエラーが発生しました。後でもう一度お試しください");
+i18n_messages.set("msg_sys_err", lang_map);
+
+lang_map = new Map();
+lang_map.set("en-US", "SisAiWorld is a comprehensive software platform built on AI models, enabling users to efficiently leverage various software functions and services through templates provided by AI experts. Additionally, SisAiWorld offers a specialized marketplace for templates and prompts, ensuring the protection of AI experts' intellectual property.");
+lang_map.set("zh-CN", "SisAiWorld 是基于 AI 模型构建的综合软件平台，用户可以通过 AI 专家提供的模板有效地利用各种软件功能和服务。与此同时，SisAiWorld 还提供了专门的模板和提示市场，能够确保 AI 专家的知识产权得到保护。");
+lang_map.set("ja", "SisAiWorld は AI モデルに基づいて構築された包括的なソフトウェアプラットフォームで、AI 専門家によって提供されたテンプレートを使用して、さまざまなソフトウェア機能とサービスを効率的に活用できます。さらに、SisAiWorld は専門のテンプレートとプロンプトのマーケットプレイスを提供し、AI 専門家の知的財産権を保護できます。");
+i18n_messages.set("site_desc", lang_map);

views/files/spinner.css

@@ -0,0 +1,33 @@
+.spinner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    display: none;
+  }
+  
+  .spinner-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+