Initial release

2026-05-14 06:53:47 -07:00 · 2026-05-11 19:29:55 +01:00
commit d4d1215874
16967 changed files with 4075897 additions and 0 deletions
--- a/resources/web/data/text.js
+++ b/resources/web/data/text.js
--- a/resources/web/flush/WipingDialog.html
+++ b/resources/web/flush/WipingDialog.html
@@ -0,0 +1,671 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      * {
+        user-select: none;
+        -webkit-user-select: none;
+      }
+
+      html, body {
+        margin: 0px;
+        padding: 0px;
+        height: 100%;
+        background: #f5f5f5;
+        font-family: sans-serif;
+        overscroll-behavior: none;
+      }
+      
+      body {
+          position: fixed;
+          inset: 0;
+      }
+
+      .container {
+        background: #fff;
+        padding: 20px;
+        padding-bottom: 10px;
+        border: 1px solid #ccc;
+        max-width:fit-content(1000px);
+        margin: 0 auto;
+      }
+
+      .tip-panel {
+        background: #eeeeee;
+        padding: 10px;
+        margin-bottom: 10px;
+        font-size: 12px;
+      }
+
+      .scroll-container {
+        max-width: 100%;
+        max-height: 500px;
+        overflow: auto;
+        border: 1px solid #ccc;
+        position: relative;
+        margin: 0px;
+      }
+
+      table {
+        border-collapse: collapse;
+        width: 100%;
+      }
+
+      th, td {
+        border: 1px solid #ccc;
+        text-align: center;
+        padding: 2px;
+        position: relative;
+        width: 40px;
+        height: 25px;
+      }
+
+      thead th {
+        position: sticky;
+        top: 0;
+        background: #eee;
+        z-index: 10;
+      }
+
+      tbody th {
+        position: sticky;
+        left: 0;
+        background: #eee;
+        z-index: 9;
+      }
+
+      tbody tr:nth-child(even) {
+        background: #ffffff;
+      }
+
+      tbody tr:nth-child(odd) {
+        background: #eeeeee;
+      }
+
+      tbody td:first-child,
+      thead th:first-child {
+        position: sticky;
+        top: 0;
+        left: 0;
+        background: #eee;
+        z-index: 11;
+      }
+
+      .icon-button {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #999;
+        text-align: center;
+        line-height: 15px;
+        color: #fff;
+        font-weight: bold;
+        font-size: 12px;
+        border-radius: 4px;
+        cursor: default;
+        user-select: none;
+        padding: 1px;
+      }
+
+      input[type="number"].table-input {
+        width: 30px;
+        height: 20px;
+        text-align: center;
+        -moz-appearance: textfield;
+        appearance: textfield;
+        border: none;
+        background-color: inherit;
+      }
+
+      input[type="number"].table-input::-webkit-inner-spin-button,
+      input[type="number"].table-input::-webkit-outer-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+      }
+
+      input[type="number"].multiplier-input {
+        width: 60px;
+      }
+      body.dark-mode input[type="number"].multiplier-input {
+        width: 60px;
+        background-color: #4c4c55;
+        color: white;
+      }
+
+      .warning-text {
+        color: red;
+        font-size: 12px;
+      }
+
+      .normal-text {
+        color: black;
+        font-size: 12px;
+      }
+
+      .icon-gap {
+        width: 10px;
+        display: inline-block;
+      }
+
+      select {
+        padding: 6px 9px;
+        border: 1px solid #dbdbdb;
+        border-radius: 3px;
+        font-size: 12px;
+        cursor: pointer;
+        appearance: auto;
+        background-color: white;
+        color: black;
+      }
+
+      select option {
+        background-color: white;
+        color: black;
+      }
+
+      select:hover,
+      select:focus {
+        outline: none;
+        border-color: #26A69A;
+        background-color: #edfaf2;
+      }
+
+      .button-container {
+        display: flex;
+        justify-content: center;
+        gap: 0px;
+        margin: 10px;
+      }
+
+      /* 暗色模式样式 */
+      body.dark-mode {
+        background-color: #2d2d31;
+        color: #e0e0e0;
+      }
+
+      body.dark-mode .container {
+        background: inherit;
+        border-color: #2d2d31;
+      }
+
+      body.dark-mode .tip-panel {
+        background: #4c4c55;
+        color: #ccc;
+      }
+
+      body.dark-mode .scroll-container {
+        border-color: #4c4c55;
+      }
+
+      body.dark-mode table {
+        background: inherit;
+        border-color: #4c4c55;
+      }
+
+      body.dark-mode input[type="number"].table-input {
+        width: 30px;
+        height: 20px;
+        text-align: center;
+        -moz-appearance: textfield;
+        appearance: textfield;
+        border: none;
+        color: #e0e0e0;
+        background-color: inherit;
+      }
+
+      body.dark-mode th, body.dark-mode td {
+        background: inherit;
+        border-color: #555;
+        color: #e0e0e0;
+      }
+
+      body.dark-mode thead th{
+        position: sticky;
+        z-index: 10
+      }
+
+      body.dark-mode tbody th{
+        position: sticky;
+        z-index: 9
+      }
+
+      body.dark-mode tbody tr:nth-child(even) {
+        background: #2d2d31;
+      }
+
+      body.dark-mode tbody tr:nth-child(odd) {
+        background: #4c4c55;
+      }
+
+      body.dark-mode tbody td:first-child,
+      body.dark-mode thead th:first-child {
+        position: sticky;
+        z-index: 11;
+      }
+      body.dark-mode select {
+        background-color: #2d2d31;
+        color: white;
+        border-color: #4c4c55;
+      }
+
+      body.dark-mode .warning-text {
+        color: #f44336;
+      }
+
+      body.dark-mode .normal-text {
+        color: #e0e0e0;
+      }
+
+      body.dark-mode .icon-button {
+        background-color: #4c4c55;
+      }
+    </style>
+  </head>
+
+  <link rel="stylesheet" type="text/css" href="../include/global.css" /> <!-- ORCA One for all-->
+
+  <body>
+    <div class="container">
+      <div class="tip-panel" id="auto_flush_tip">
+        Orca would re-calculate your flushing volumes every time the filament
+        color changed or filaments changed. You could disable the auto-calculate
+        in Orca Slicer &gt; Preferences.
+      </div>
+
+      <div style="margin-bottom: 10px; display: flex; align-items: center;">
+        <div
+          class="ButtonStyleConfirm ButtonTypeWindow"
+          onclick="calcFlushingVolumes()"
+          id="calc_btn"
+        >
+          Re-Calculate
+      </div>
+        <select
+          id="extruders"
+          onchange="handleExtruderSelect(document.getElementById('extruders').value)"
+        >
+          <option value="left" id="extruder_label_0">Left Nozzle</option>
+          <option value="right" id="extruder_label_1">Right Nozzle</option>
+        </select>
+      </div>
+
+      <div class="scroll-container">
+        <table id="flushTable">
+          <thead>
+            <tr>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+
+      <div style="margin-top: 10px;">
+        <div id="volume_desp_panel" class="normal-text">
+          Flushing volume (mm³) for each filament pair.
+        </div>
+        <div
+          id="volume_range_panel"
+          class="normal-text"
+          style="margin-top: 5px;"
+        >
+          Suggestion: Flushing Volume in range [50, 999]
+        </div>
+        <div style="margin-top: 8px;">
+          <label
+            for="multiplierInput"
+            id="multiplier_label"
+            style="font-size: 12px;"
+            >Multiplier</label
+          >
+          <input
+            type="number"
+            step="0.1"
+            id="multiplierInput"
+            class="multiplier-input"
+            value="1.00"
+            oninput="onMultiplierChange()"
+          />
+        </div>
+        <div
+          style="margin-top: 5px; margin-bottom: 5px; color: #666; font-size: 12px;"
+          id="multiplier_range_panel"
+        >
+          The multiplier should be in range [0.50, 3.00].
+        </div>
+      </div>
+      <div class="button-container" style="padding: 0px; margin: 0px;">
+        <div class="ButtonStyleConfirm ButtonTypeChoice" id="ok_btn" onclick="storeData()">
+          Save
+        </div>
+        <div class="ButtonStyleRegular ButtonTypeChoice" id="cancel_btn" onclick="quit()">
+          Cancel
+        </div>
+      </div>
+    </div>
+
+    <script>
+      let m_number_of_filaments  // 材料数量
+      let m_number_of_extruders // 喷嘴数量
+      let m_colours // 颜色
+      let m_display_matrix // 显示的矩阵
+      let m_raw_matrix // 原始数据
+      let m_flush_multipiers // 冲刷系数
+      let m_cell_inputs = []; //显示的内容
+      let m_curr_extruder_id = 0
+      let m_min_flush_volumes = []
+      let m_max_flush_volumes = []
+      let m_min_flush_multiplier = 0.50
+      let m_max_flush_multiplier = 3
+      let m_default_matrix //系统默认矩阵
+
+      function storeData() {
+        var data = JSON.stringify({
+          msg: 'storeData',
+          number_of_extruders: m_number_of_extruders,
+          raw_matrix: m_raw_matrix,
+          flush_multiplier: m_flush_multipiers
+        })
+        window.wipingDialog.postMessage(data);
+      }
+
+      function quit() {
+        var data = JSON.stringify({
+          msg: 'quit'
+        })
+        window.wipingDialog.postMessage(data);
+      }
+
+      function calcFlushingVolumes() {
+        var data = JSON.stringify({
+          msg: 'updateMatrix',
+          extruder_id: m_curr_extruder_id
+        })
+        window.wipingDialog.postMessage(data);
+      }
+
+      function updateTable(dataMatrix, extruder_id) {
+        for (let i = 0; i < m_number_of_filaments; i++) {
+          for (let j = 0; j < m_number_of_filaments; j++) {
+            var newValue
+            var index = m_number_of_filaments * i + j
+            newValue = (i == j ? 0 : rawToDislay(dataMatrix[index] ,m_flush_multipiers[extruder_id]))
+            newValue = limitDisplayVal(newValue,extruder_id)
+              m_cell_inputs[i][j].value = newValue;
+              m_display_matrix[index] = newValue;
+              m_raw_matrix[extruder_id][index] = dataMatrix[index]
+          }
+        }
+        updateWarningTexts();
+      }
+
+      // const virtual_data = {
+      //   filament_colors: [
+      //     '#123456', '#7890AB', '#CDEF01', '#F1A2B3', '#4D8B72', '#D9E1F2', '#B76C8C', '#A9C3D3',
+      //     '#FF5733', '#33FF57', '#5733FF', '#FF33FF', '#FFFF33', '#33FFFF', '#FF5733', '#3333FF'
+      //   ],
+      //   extruder_num: 2,
+      //   flush_volume_matrixs: [
+      //     Array.from({ length: 256 }, () => Math.floor(Math.random() * 1000)),
+      //     Array.from({ length: 256 }, () => Math.floor(Math.random() * 1000))
+      //   ],
+      //   flush_multiplier:[1,1]
+      // }
+      window.addEventListener("DOMContentLoaded",function(){
+        var data = JSON.stringify({
+          msg: 'init',
+        })
+        window.wipingDialog.postMessage(data);
+      });
+
+      // Escape should close the dialog even when focus is inside web content.
+      document.addEventListener("keydown", function (event) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          quit();
+        }
+      }, true);
+
+      function buildText(data) {
+        document.getElementById('volume_desp_panel').innerText = data.volume_desp_panel
+        document.getElementById('volume_range_panel').innerText = data.volume_range_panel
+        document.getElementById('multiplier_range_panel').innerText = data.multiplier_range_panel
+        document.getElementById('auto_flush_tip').innerText = data.auto_flush_tip
+        document.getElementById('calc_btn').innerText = data.calc_btn_panel
+        document.getElementById('extruder_label_0').innerText = data.extruder_label_0
+        document.getElementById('extruder_label_1').innerText = data.extruder_label_1
+        document.getElementById('multiplier_label').innerText = data.multiplier_label
+        document.getElementById('ok_btn').innerText = data.ok_btn_label
+        document.getElementById('cancel_btn').innerText = data.cancel_btn_label
+        updateVolumeRange(m_min_flush_volumes[m_curr_extruder_id],m_max_flush_volumes[m_curr_extruder_id]) 
+        updateMultiplierRange(m_min_flush_multiplier,m_max_flush_multiplier)
+      }
+
+      // 计算亮度
+      function getLuminance(color) {
+        const hex = color.replace(/^#/, '');
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+      }
+
+      function updateVolumeRange(min_volume,max_volume){
+        // Orca: "Typical" guidance only unlinked from upper bound in the slicer.
+        const TYPICAL_MAX_FLUSH_VOLUME = 900;
+        const panel = document.getElementById('volume_range_panel');
+        panel.innerText = panel.innerText.replace(/\[.*\]/, `[${min_volume}, ${TYPICAL_MAX_FLUSH_VOLUME}]`);
+      }
+
+      function updateMultiplierRange(min_multiplier,max_multiplier){
+        const panel = document.getElementById('multiplier_range_panel');
+        panel.innerText = panel.innerText.replace(/\[.*\]/, `[${min_multiplier}, ${max_multiplier}]`);
+      }
+
+      function updateFlushMultiplier(extruder_id){
+        document.getElementById("multiplierInput").value = m_flush_multipiers[extruder_id]
+      }
+
+      function rawToDislay(val, ratio){
+        return Math.round(val * ratio)
+      }
+
+      function displayToRaw(val, ratio){
+        if(ratio==0)
+          return 0
+        else
+          return Math.round(val / ratio)
+      }
+
+      function limitDisplayVal(val,extruder_id){
+        if (isNaN(val))
+          return 0
+        if (val < 0)
+          return 0
+        if (val > m_max_flush_volumes[extruder_id])
+          return m_max_flush_volumes[extruder_id];
+        return val
+      }
+
+      function buildTable(data) {
+        m_colours = data.filament_colors
+        m_number_of_extruders = data.extruder_num
+        m_number_of_filaments = data.filament_colors.length
+        m_display_matrix = data.flush_volume_matrixs[0].slice();
+        m_raw_matrix = data.flush_volume_matrixs.map(function(arr) {
+          return arr.slice();
+        });
+        m_default_matrix = data.default_matrixs.map(function (arr) {
+            return arr.slice();
+        });
+        m_flush_multipiers = data.flush_multiplier.slice()
+        m_max_flush_volumes = data.max_flush_volumes
+        m_min_flush_volumes = data.min_flush_volumes
+        m_min_flush_multiplier = data.min_flush_multiplier
+        m_max_flush_multiplier = data.max_flush_multiplier
+
+        if(data.is_dark_mode == true)
+          document.body.classList.add('dark-mode');
+
+        updateFlushMultiplier(m_curr_extruder_id)
+
+        const selectElement = document.getElementById('extruders');
+        if (m_number_of_extruders > 1) {
+          selectElement.style.display = 'inline-block';
+        } else {
+          selectElement.style.display = 'none';
+        }
+
+        var thead = document.querySelector("#flushTable thead tr");
+        var tbody = document.querySelector("#flushTable tbody");
+        thead.innerHTML = "";
+        tbody.innerHTML = "";
+
+        for (let j = 0; j < m_number_of_filaments; j++) {
+          if (j == 0) {
+            var tag = document.createElement("th")
+            tag.innerHTML = "<div style='font-size:12px'>from/to</div>"
+            thead.appendChild(tag)
+          }
+          let th = document.createElement("th");
+          const luminance = getLuminance(m_colours[j]);
+          const textColor = luminance > 0.5 ? "black" : "white";
+          th.innerHTML = `<div class="icon-button" style="font-size:10px;background:${m_colours[j]}; color:${textColor};">${j + 1}</div>`;
+          thead.appendChild(th);
+        }
+
+        for (let i = 0; i < m_number_of_filaments; i++) {
+          let tr = document.createElement("tr");
+
+          let rowHeader = document.createElement("th");
+          const luminance = getLuminance(m_colours[i]);
+          const textColor = luminance > 0.5 ? "black" : "white";
+          rowHeader.innerHTML = `<div class="icon-button" style="font-size:10px; background:${m_colours[i]};color:${textColor};">${i + 1}</div>`;
+          tr.appendChild(rowHeader);
+
+          m_cell_inputs[i] = [];
+
+          for (let j = 0; j < m_number_of_filaments; j++) {
+            let td = document.createElement("td");
+            td.style.overflow = "hidden";
+            td.style.textOverflow = "ellipsis";
+            let displayVal  = rawToDislay(m_raw_matrix[m_curr_extruder_id][m_number_of_filaments * i + j], m_flush_multipiers[m_curr_extruder_id])
+            displayVal = limitDisplayVal(displayVal, m_curr_extruder_id)
+            m_display_matrix[m_number_of_filaments*i + j] = displayVal
+            let readonly = (i === j);
+            let input = document.createElement("input");
+            input.className = "table-input"
+            input.type = "number";
+            input.value = readonly ? 0 : displayVal;
+            if (readonly) {
+              input.readOnly = true;
+            }
+            input.addEventListener("input", (e) => onCellInput(i, j, e));
+
+            m_cell_inputs[i][j] = input;
+
+            td.appendChild(input);
+            tr.appendChild(td);
+          }
+
+          tbody.appendChild(tr);
+        }
+        updateWarningTexts();
+      }
+
+      function onCellInput(i, j, event) {
+        const input = event.target;
+        let val = parseInt(input.value, 10);
+        val = limitDisplayVal(val, m_curr_extruder_id);
+        input.value = val;
+
+        if (i !== j) {
+          var index = m_number_of_filaments*i+j
+          m_raw_matrix[m_curr_extruder_id][index] = displayToRaw(val, m_flush_multipiers[m_curr_extruder_id])
+          m_display_matrix[index] = val;
+        }
+        updateWarningTexts();
+      }
+
+      function handleExtruderSelect(extruder) {
+        m_curr_extruder_id = extruder == 'left' ? 0 : 1
+        updateVolumeRange(m_min_flush_volumes[m_curr_extruder_id],m_max_flush_volumes[m_curr_extruder_id])
+        updateFlushMultiplier(m_min_flush_multiplier[m_curr_extruder_id],m_max_flush_multiplier[m_curr_extruder_id])
+        updateFlushMultiplier(m_curr_extruder_id)
+        updateTable(m_raw_matrix[m_curr_extruder_id], m_curr_extruder_id)
+      }
+
+      function onMultiplierChange() {
+        let val = parseFloat(document.getElementById("multiplierInput").value);
+        if (isNaN(val)) val = 1.0;
+        if(val<m_min_flush_multiplier){
+          val = m_min_flush_multiplier
+          document.getElementById("multiplierInput").value = m_min_flush_multiplier;
+        }
+        else if(val>m_max_flush_multiplier){
+          val = m_max_flush_multiplier
+          document.getElementById("multiplierInput").value = m_max_flush_multiplier;
+        }
+        m_flush_multipiers[m_curr_extruder_id] = val;
+        for (let i = 0; i < m_number_of_filaments; i++) {
+          for (let j = 0; j < m_number_of_filaments; j++) {
+            if (i === j) continue;
+            var index = i * m_number_of_filaments + j;
+            let displayVal = rawToDislay(m_raw_matrix[m_curr_extruder_id][index] ,m_flush_multipiers[m_curr_extruder_id])
+            displayVal = limitDisplayVal(displayVal, m_curr_extruder_id)
+            m_cell_inputs[i][j].value = displayVal;
+            m_display_matrix[index] = displayVal;
+          }
+        }
+        updateWarningTexts();
+      }
+
+
+
+      function updateWarningTexts() {
+        let val = parseFloat(document.getElementById("multiplierInput").value);
+        const input = document.getElementById('multiplierInput');
+        if (val !== 1.0) {
+            input.style.color = 'orange';
+        } else {
+            input.style.color = 'black';
+        }
+
+        let hasException = false;
+        for (let i = 0; i < m_number_of_filaments; i++) {
+          for (let j = 0; j < m_number_of_filaments; j++) {
+            if (i === j) continue;
+            const input = m_cell_inputs[i][j];
+            let val = parseInt(input.value, 10);
+            if (isNaN(val)) val = 0;
+
+            var index = i * m_number_of_filaments + j;
+            let defaultVal = rawToDislay(m_default_matrix[m_curr_extruder_id][index], m_flush_multipiers[m_curr_extruder_id])
+
+            if (val < m_min_flush_volumes[m_curr_extruder_id] || val > m_max_flush_volumes[m_curr_extruder_id]) {
+              input.style.color = "red";
+              hasException = true;
+            }
+            else if (val != defaultVal) {
+              input.style.color = "orange";
+            }
+            else {
+              input.style.removeProperty("color");
+            }
+          }
+        }
+
+        const rangeLabel = document.getElementById("volume_range_panel");
+        if (hasException) {
+          rangeLabel.classList.remove("normal-text");
+          rangeLabel.classList.add("warning-text");
+        } else {
+          rangeLabel.classList.remove("warning-text");
+          rangeLabel.classList.add("normal-text");
+        }
+      }
+    </script>
+  </body>
+</html>
--- a/resources/web/guide/0/index.html
+++ b/resources/web/guide/0/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>loading</title>
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="load.css" />
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />	
+<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="load.js"></script>		
+</head>
+<body onLoad="OnInit()">
+	<div id="LoadBlock">
+		<img id="LoadingSvg" src="loading.svg" />
+		<div id="LoadTip" class="trans" tid="t126">Loading……</div>
+	</div>
+</body>
+</html>
--- a/resources/web/guide/0/load.css
+++ b/resources/web/guide/0/load.css
@@ -0,0 +1,36 @@
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+body
+{
+	display:flex;
+	align-content: center;
+	justify-content: center;
+}
+
+#LoadBlock
+{
+	display:flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#LoadingSvg
+{
+	animation: rotate 1.2s infinite linear;
+	margin-right: 8px;
+	height: 120%;
+}
+
+#LoadTip
+{
+	font-size: 15px;
+	font-weight: 700;
+	color: #009688;
+}
--- a/resources/web/guide/0/load.js
+++ b/resources/web/guide/0/load.js
@@ -0,0 +1,27 @@
+
+var TargetPage=null;
+
+function OnInit()
+{
+	TranslatePage();
+
+	TargetPage=GetQueryString("target");
+	
+	// Fallback timeout in case the C++ -> JS signal fails (e.g., WebKit issues)
+	setTimeout("JumpToTarget()",20*1000);
+}
+
+function HandleStudio( pVal )
+{
+	let strCmd=pVal['command'];
+	
+	if(strCmd=='userguide_profile_load_finish')
+	{
+		JumpToTarget();
+	}
+}
+
+function JumpToTarget()
+{
+	window.open('../'+TargetPage+'/index.html','_self');
+}
--- a/resources/web/guide/0/loading.svg
+++ b/resources/web/guide/0/loading.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 19.2742C11 19.675 11.3555 20 11.7941 20C16.3261 20 20 16.6421 20 12.5C20 8.35786 16.3261 5 11.7941 5C11.3555 5 11 5.32496 11 5.72581C11 6.12666 11.3555 6.45161 11.7941 6.45161C15.4489 6.45161 18.4118 9.15957 18.4118 12.5C18.4118 15.8404 15.4489 18.5484 11.7941 18.5484C11.3555 18.5484 11 18.8733 11 19.2742Z" fill="url(#paint0_linear_2417_1599)"/>
+<defs>
+<linearGradient id="paint0_linear_2417_1599" x1="11.9338" y1="19.2801" x2="11" y2="5.79458" gradientUnits="userSpaceOnUse">
+<stop stop-color="#009688"/>
+<stop offset="1" stop-color="#009688" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/resources/web/guide/1/1.css
+++ b/resources/web/guide/1/1.css
@@ -0,0 +1,41 @@
+html
+{
+	background-color: #fff;
+}
+
+body
+{
+	text-align:center;
+	padding-top: 10%;
+	overflow: auto;
+}
+
+#SlicerIcon
+{
+
+}
+
+#Title
+{
+	height:20mm;
+	line-height: 20mm;
+	font-size: 6mm;
+	color: #009688;
+}
+
+#STip
+{
+	padding:0mm 20mm;
+	height: 15%;
+}
+
+#BtnArea
+{
+	align-items: center;
+}
+
+#StartBtn
+{
+	display: inline-block;
+    text-decoration:none;	
+}
--- a/resources/web/guide/1/1.js
+++ b/resources/web/guide/1/1.js
@@ -0,0 +1,5 @@
+
+function OnStart()
+{
+	window.location.href="../2/index.html"+"?"+GetGetStr();
+}
--- a/resources/web/guide/1/index.html
+++ b/resources/web/guide/1/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P1</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />		
+<link rel="stylesheet" type="text/css" href="1.css" />
+<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+</head>
+<body onLoad="TranslatePage()">
+	<div id="SlicerIcon" style="text-align: center;">
+		<img src="../../image/logo.png"/>
+	</div>
+	<div id="Title" class="trans" tid="t1">Welcome to Orca Slicer</div>
+	<div id="STip" class="trans" tid="t2">Orca Slicer will be setup in several steps. Let's start!</div>
+	<div id="BtnArea">
+	    <a id="StartBtn" class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t24" href="../11/index.html">Get Started</a>
+	</div>
+</body>
+</html>
--- a/resources/web/guide/11/11.css
+++ b/resources/web/guide/11/11.css
@@ -0,0 +1,72 @@
+
+#Content
+{
+	display: flex;
+	flex-direction: column;
+	justify-content:flex-start;
+	align-items:center;
+	align-content: center;
+}
+
+
+#EarthIcon img
+{
+	width: 40%;
+	min-width: 100px;
+}
+
+#EarthIcon
+{
+	margin-bottom: 20px;
+	text-align: center;
+}
+
+#RegionList
+{
+	border: 3px solid #C7C7C7;
+	width: 400px;
+	cursor: pointer;
+}
+
+.RegionItem
+{
+	line-height: 40px;
+	height: 40px;
+	padding-left: 10px;
+	text-align: center;
+}
+
+.RegionItem:hover
+{
+	background-color: #ECECEC;
+}
+
+
+.RegionSelected
+{
+	background-color:#009688;
+	color: #fff;
+}
+
+.RegionSelected:hover
+{
+	background-color:#009688;
+	color: #fff;	
+}
+
+
+#ChangeTip
+{
+	margin-top: 15px;
+	line-height:20px;
+	text-align: center;
+	display: flex;
+	align-items: center;
+}
+
+.TipIcon
+{
+	width:24px;
+	height: 24px;
+	margin-right: 5px;
+}
--- a/resources/web/guide/11/11.js
+++ b/resources/web/guide/11/11.js
@@ -0,0 +1,68 @@
+var m_OldRegion='';
+var m_Region='';
+
+function OnInit()
+{
+	//let strInput=JSON.stringify(cData);
+	//HandleStudio(strInput);
+	
+	TranslatePage();
+	
+	RequestProfile();
+}
+
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio( pVal )
+{
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		HandleRegionlList(pVal['response']);
+	}
+}
+
+function HandleRegionlList(  pItem )
+{
+	m_OldRegion=pItem['region'];
+	
+	let nNum=$(".RegionItem[region='"+m_OldRegion+"']").length;
+	if( nNum==1 )
+		ChooseRegion(m_OldRegion);
+}
+
+
+function ChooseRegion( strRegion )
+{
+	m_Region=strRegion;
+	
+	$('.RegionItem').removeClass('RegionSelected');
+	$(".RegionItem[region='"+strRegion+"']").addClass('RegionSelected');
+}
+
+function GotoPolicyPage()
+{
+	let ItemSelected=$('.RegionSelected')[0];
+	let RegionFinal=$(ItemSelected).attr("region");
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="save_region";
+	tSend['region']=RegionFinal;
+	
+	SendWXMessage( JSON.stringify(tSend) );
+	
+	window.location.href="../21/index.html";
+}
+
+
--- a/resources/web/guide/11/earth.png
+++ b/resources/web/guide/11/earth.png
--- a/resources/web/guide/11/index.html
+++ b/resources/web/guide/11/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P21</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />		
+<link rel="stylesheet" type="text/css" href="11.css" />
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />	
+<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="11.js"></script>		
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t47">Please select your login region</div>
+</div>
+<div id="Content">
+	<div id="EarthIcon"><img src="earth.png"/></div>
+	<div id="RegionList">
+		<div class="trans RegionItem RegionSelected TextS1" tid="t48" region="Asia-Pacific" onclick="ChooseRegion('Asia-Pacific')">Asia-Pacific</div>
+		<div class="trans RegionItem" tid="t49" region="China" onclick="ChooseRegion('China')">China</div>
+		<div class="trans RegionItem" tid="t60" region="Europe" onclick="ChooseRegion('Europe')">Europe</div>
+		<div class="trans RegionItem" tid="t61" region="North America" onclick="ChooseRegion('North America')">North America</div>
+		<div class="trans RegionItem" tid="t62" region="Others" onclick="ChooseRegion('Others')">Others</div>
+	</div>
+<!--	<div id="ChangeTip">
+		<div><img class="TipIcon" src="tip.png" /></div>
+		<div tid="t63">After changing the region, your account will be logged out. Please log in again later.</div>
+	</div>-->
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" id="AcceptBtn" tid="t9"  onclick="GotoPolicyPage()">Next</div>
+</div>	
+</body>
+</html>
--- a/resources/web/guide/11/tip.png
+++ b/resources/web/guide/11/tip.png
--- a/resources/web/guide/21/21.css
+++ b/resources/web/guide/21/21.css
@@ -0,0 +1,198 @@
+#Content
+{
+	overflow-y:auto;
+	padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
+}
+
+.BlockBanner
+{
+	padding: 0px;
+	border-bottom:#009688 1px solid;
+	width: 100%;
+	display: flex;
+	justify-content:space-between;
+	align-items: center;
+}
+
+
+.BannerBtns
+{
+	display: flex;
+	white-space: nowrap;
+	justify-content: space-around;
+	align-items: center;
+	text-align: center;
+	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
+}
+
+.BlockBanner  a
+{
+	display: inline-block;
+	background-color:#009688;
+	line-height: 40px;
+	height: 40px;
+	padding: 0px 24px;
+	color: #fff;
+}
+
+.PrinterArea
+{
+	padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.PrinterBlock
+{
+	width: 160px;
+	text-align: center;
+	padding: 10px;
+}
+
+.PImg
+{
+	width:120px;      /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
+	height:120px;	  /* ORCA fit image to fill frame */
+	padding:10px 20px /* ORCA use less vertical padding */
+}
+
+.ModelCheckBox
+{
+	flex: 0 0 18px;			/* ORCA match checkbox style and size */
+	margin: 10px 5px 0 0;
+	width: 18px;
+	height: 18px;
+	background-image: url("../img/emptycheck.svg");
+	background-size: cover;
+}
+
+.ModelCheckBox.ModelCheckBoxSelected
+{
+	background-image: url("../img/greencheck.svg");
+}
+
+img.ModelThumbnail
+{
+	width:  100%;
+	height: 100%;
+}
+
+.PName
+{
+	font-weight: 700;
+	text-align:left;
+}
+
+.pNozzel
+{
+	display: none;
+	align-items: center;
+	justify-content:flex-start;
+	color: #5A5A5A;	
+	padding-left: 0px; /* ORCA Align checkboxes with with model text */
+}
+
+.pNozzel input
+{
+	vertical-align: middle;
+	margin-right: 5px;
+}
+
+
+/*-----Notice-----*/
+#NoticeMask
+{
+	background-color: #000;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	opacity: 0.05;
+	display: none;
+}
+
+#NoticeBody
+{
+	display: none;
+	width: 400px;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 4px;
+	background-color: inherit;	
+	position: absolute;
+	left: 50%;
+	top: 200px;
+	margin-left: -200px;
+}
+
+#NoticeBar
+{
+	background-color:#00f0d8;
+	height: 40px;
+	line-height: 40px;
+	color: #fff;
+	text-align: center;
+}
+
+#NoticeContent
+{
+	padding: 4mm 10mm;	
+}
+
+
+#NoticeBtns
+{
+	margin-top: 4mm;
+	display: flex;
+	justify-content:flex-end;
+}
+
+.search {
+	width: 100%;
+	position: relative;
+	display: flex;
+}
+  
+.searchTerm {
+	width: 100%;
+	border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
+	/*border-right: none;*/
+	padding: 5px;
+	padding-left:32px;
+	height: 20px;      /* ORCA match height */
+	line-height: 20px; /* ORCA center text vertically */
+	border-radius: 5px 5px 5px 5px;
+	outline: none;
+	color: #9DBFAF;
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm {border: 1px solid #4A4A51;}
+}
+
+.searchTerm:focus{
+	color: #363636;       /* ORCA Searchbox > use normal text color */
+	border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm:focus{color: #FFFFFF}
+}
+
+#search-icon{ /* ORCA */
+	position:absolute;
+    top: 50%;
+    transform: translateY(-50%);
+	left:8px;
+	margin:0px auto;
+	fill:#7C8282
+}
+@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
+	#search-icon{fill:#949494}
+}
+
+/*Resize the wrap to see the search bar change!*/
+.wrap{
+	width: 30%;
+	padding-bottom: 5px;
+	padding-left: 32px; /* ORCA Align with content */
+}
--- a/resources/web/guide/21/21.js
+++ b/resources/web/guide/21/21.js
@@ -0,0 +1,417 @@
+function OnInit()
+{
+	//let strInput=JSON.stringify(cData);
+	//HandleModelList(cData);
+	
+	TranslatePage();
+	
+	RequestProfile();
+}
+
+
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio( pVal )
+{
+//	alert(strInput);
+//	alert(JSON.stringify(strInput));
+//	
+//	let pVal=IsJson(strInput);
+//	if(pVal==null)
+//	{
+//		alert("Msg Format Error is not Json");
+//		return;
+//	}
+	
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		HandleModelList(pVal['response']);
+	}
+}
+
+function ShowPrinterThumb(pItem, strImg)
+{
+	$(pItem).attr('src',strImg);
+	$(pItem).attr('onerror',null);
+}
+
+function ChooseModel( vendor, ModelName )
+{
+	let ChooseItem=$(".ModelCheckBox[vendor='"+vendor+"'][model='"+ModelName+"']");
+	
+	if(ChooseItem!=null)
+	{
+		if( $(ChooseItem).hasClass('ModelCheckBoxSelected') )
+			$(ChooseItem).removeClass('ModelCheckBoxSelected');
+		else
+			$(ChooseItem).addClass('ModelCheckBoxSelected');		
+
+		SetModelSelect(vendor, ModelName, $(ChooseItem).hasClass('ModelCheckBoxSelected'));
+	}		
+}
+
+function HandleModelList( pVal )
+{
+	if( !pVal.hasOwnProperty("model") )
+		return;
+
+    pModel=pVal['model'];
+	
+	let nTotal=pModel.length;
+	let ModelHtml={};
+	for(let n=0;n<nTotal;n++)
+	{
+		let OneModel=pModel[n];
+		
+		let strVendor=OneModel['vendor'];
+		
+		//Add Vendor Html Node
+		if($(".OneVendorBlock[vendor='"+strVendor+"']").length==0)
+		{
+			let sVV=strVendor;
+			if( sVV=="BBL" )
+				sVV="Bambu Lab";
+			if( sVV=="Custom")
+				sVV="Custom Printer";
+			if( sVV=="Other")
+				sVV="Orca colosseum";
+
+			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
+'<div class="BlockBanner">'+
+'	<a>'+sVV+'</a>'+				
+'	<div class="BannerBtns">'+
+'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
+'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
+'	</div>'+
+'</div>'+
+'<div class="PrinterArea">	'+
+'</div>'+
+'</div>';
+			
+			$('#Content').append(HtmlNewVendor);
+		}
+		
+		let ModelName=OneModel['model'];
+		
+		//Collect Html Node Nozzel Html
+		if( !ModelHtml.hasOwnProperty(strVendor))
+			ModelHtml[strVendor]='';
+			
+		ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
+	}
+	
+	//Update Nozzel Html Append
+	for( let key in ModelHtml )
+	{
+		$(".OneVendorBlock[vendor='"+key+"'] .PrinterArea").append( ModelHtml[key] );
+	}
+	
+	
+	//Update Checkbox
+	for(let m=0;m<nTotal;m++)
+	{
+		let OneModel=pModel[m];
+
+		let SelectList=OneModel['nozzle_selected'];
+		if(SelectList!='')
+		{
+			ChooseModel(OneModel['vendor'], OneModel['model']);
+		}
+	}	
+
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
+	// let nSelect=AlreadySelect.length;
+	// if(nSelect==0)
+	// {
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	// }
+	
+	TranslatePage();
+}
+
+function SetModelSelect(vendor, model, checked) {
+	if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
+		return;
+	}
+
+	if (!ModelNozzleSelected.hasOwnProperty(vendor) && checked) {
+		ModelNozzleSelected[vendor] = {};
+	}
+
+	let oVendor = ModelNozzleSelected[vendor];
+	if (oVendor.hasOwnProperty(model) || checked) {
+		oVendor[model] = checked;
+	}
+}
+
+function GetModelSelect(vendor, model) {
+	if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
+		return false;
+	}
+
+	let oVendor = ModelNozzleSelected[vendor];
+	if (!oVendor.hasOwnProperty(model)) {
+		return false;
+	}
+
+	return oVendor[model];
+}
+
+function FilterModelList(keyword) {
+
+	//Save checkbox state
+	let ModelSelect = $('.ModelCheckBox');
+	for (let n = 0; n < ModelSelect.length; n++) {
+		let OneItem = ModelSelect[n];
+
+		let strModel = OneItem.getAttribute("model");
+
+		let strVendor = OneItem.getAttribute("vendor");
+
+		SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
+	}
+
+	let nTotal = pModel.length;
+	let ModelHtml = {};
+	let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
+
+	$('#Content').empty();
+	for (let n = 0; n < nTotal; n++) {
+		let OneModel = pModel[n];
+
+		let strVendor = OneModel['vendor'];
+		let search = (OneModel['name'] + '\0' + strVendor).toLowerCase();
+
+		if (!kwSplit.every(s => search.includes(s)))
+			continue;
+
+		//Add Vendor Html Node
+		if ($(".OneVendorBlock[vendor='" + strVendor + "']").length == 0) {
+			let sVV = strVendor;
+			if (sVV == "BBL")
+				sVV = "Bambu Lab";
+			if (sVV == "Custom")
+				sVV = "Custom Printer";
+			if (sVV == "Other")
+				sVV = "Orca colosseum";
+
+			let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
+				'<div class="BlockBanner">' +
+				'	<a>' + sVV + '</a>' +
+				'	<div class="BannerBtns">' +
+				'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
+				'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
+				'	</div>' +
+				'</div>' +
+				'<div class="PrinterArea">	' +
+				'</div>' +
+				'</div>';
+
+			$('#Content').append(HtmlNewVendor);
+		}
+
+		//Collect Html Node Nozzel Html
+		if (!ModelHtml.hasOwnProperty(strVendor))
+			ModelHtml[strVendor] = '';
+
+		ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
+	}
+
+	//Update Nozzel Html Append
+	for (let key in ModelHtml) {
+		let obj = $(".OneVendorBlock[vendor='" + key + "'] .PrinterArea");
+		obj.empty();
+		obj.append(ModelHtml[key]);
+	}
+
+
+	//Update Checkbox
+	ModelSelect = $('.ModelCheckBox');
+	for (let n = 0; n < ModelSelect.length; n++) {
+		let OneItem = ModelSelect[n];
+
+		let strModel = OneItem.getAttribute("model");
+		let strVendor = OneItem.getAttribute("vendor");
+
+		let checked = GetModelSelect(strVendor, strModel);
+
+		if (checked)
+			$(OneItem).addClass('ModelCheckBoxSelected');
+		else
+			$(OneItem).removeClass('ModelCheckBoxSelected');
+	}
+
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
+	// let nSelect=AlreadySelect.length;
+	// if(nSelect==0)
+	// {
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	// }
+
+	TranslatePage();
+}
+
+function CreatePrinterBlock(OneModel)
+{
+	// ORCA use single functuon to create blocks to simplify code
+	let vendor = OneModel['vendor']
+	vendorName = vendor=="BBL" ? "Bambu Lab" : vendor=="Custom" ? "Generic Printer" : vendor;
+
+	let modelName = OneModel['name'];
+	// Most of it unneeded. this can be applied in profiles
+	if( vendor=="Custom")					
+	modelName = modelName.split(" ")[1];
+	// these uses different case in name; seckit, ratrig, blocks
+	else if (modelName.toLowerCase().startsWith(vendorName.toLowerCase()))  
+	modelName = modelName.slice(vendorName.length);
+	// these not matches. have to fix in profiles to reduce conditions in here;
+	else if (vendor == "MagicMaker" && modelName.startsWith("MM"))
+	modelName = modelName.slice(("MM").length);
+	else if (vendor == "OrcaArena")
+	modelName = modelName.slice(("Orca Arena").length);
+	else if (vendor == "RolohaunDesign" && modelName.startsWith("Rolohaun"))
+	modelName = modelName.slice(("Rolohaun").length);
+
+	return '<div class="PrinterBlock" onClick="ChooseModel(\''+vendor+'\',\''+OneModel['model']+'\')">'+
+	'<div class="PImg">'+
+	'<img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
+	'</div>'+
+	'<div style="display: flex;">'+
+	'	<div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
+	'	<div class="PName"><p>'+ vendorName +'</p><p>' + modelName +'</p></div>'+
+	'</div>'+
+	'</div>';
+}
+
+function SelectPrinterAll( sVendor )
+{
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, true);
+	});
+}
+
+
+function SelectPrinterNone( sVendor )
+{
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").removeClass('ModelCheckBoxSelected');
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, false);
+	});
+}
+
+
+function GotoFilamentPage()
+{
+	let nChoose=OnExitFilter();
+	
+	if(nChoose>0)
+		window.open('../22/index.html','_self');
+}
+
+function OnExitFilter() {
+
+	let nTotal = 0;
+	let ModelAll = {};
+	for (vendor in ModelNozzleSelected) {
+		for (model in ModelNozzleSelected[vendor]) {
+			if (!ModelNozzleSelected[vendor][model])
+				continue;
+
+			if (!ModelAll.hasOwnProperty(model)) {
+				//alert("ADD: "+strModel);
+
+				ModelAll[model] = {};
+
+				ModelAll[model]["model"] = model;
+			}
+
+			nTotal++;
+		}
+	}
+
+	var tSend = {};
+	tSend['sequence_id'] = Math.round(new Date() / 1000);
+	tSend['command'] = "save_userguide_models";
+	tSend['data'] = ModelAll;
+
+	SendWXMessage(JSON.stringify(tSend));
+
+	return nTotal;
+
+}
+
+//
+function OnExit()
+{	
+	let ModelAll={};
+	
+	let ModelSelect=$(".ModelCheckBoxSelected");
+	let nTotal=ModelSelect.length;
+
+	if( nTotal==0 )
+	{
+		ShowNotice(1);
+		
+		return 0;
+	}
+	
+	for(let n=0;n<nTotal;n++)
+	{
+	    let OneItem=ModelSelect[n];
+		
+		let strModel=OneItem.getAttribute("model");
+			
+		//alert(strModel+strVendor+strNozzel);
+		
+		if(!ModelAll.hasOwnProperty(strModel))
+		{
+			//alert("ADD: "+strModel);
+			
+			ModelAll[strModel]={};
+		
+			ModelAll[strModel]["model"]=strModel;
+		}
+	}
+		
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="save_userguide_models";
+	tSend['data']=ModelAll;
+	
+	SendWXMessage( JSON.stringify(tSend) );
+
+    return nTotal;
+}
+
+
+function ShowNotice( nShow )
+{
+	if(nShow==0)
+	{
+		$("#NoticeMask").hide();
+		$("#NoticeBody").hide();
+	}
+	else
+	{
+		$("#NoticeMask").show();
+		$("#NoticeBody").show();
+	}
+}
+
+
+
+
--- a/resources/web/guide/21/index.html
+++ b/resources/web/guide/21/index.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P21</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="21.css" />
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />	
+<script type="text/javascript" src="test.js"></script>	
+<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="21.js"></script>		
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t10">Printer Selection</div>
+</div>
+<div class="wrap">
+	<div class="search">
+		<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
+		<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
+			<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
+			<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
+		</svg>
+	</div>
+</div>
+<div id="Content"  class="ZScrol">
+
+<!--<div class="OneVendorBlock" Vendor="BBL">	
+<div class="BlockBanner">
+	<a>BBL-3DP</a>		
+	<div class="BannerBtns">
+		<div class="ButtonStyleConfirm ButtonTypeWindow trans" onClick="SelectPrinterAll('BBL')">所有</div>
+		<div class="ButtonStyleRegular ButtonTypeWindow trans" onClick="SelectPrinterNone('BBL')">无</div>
+	</div>
+</div>
+	
+<div class="PrinterArea">	
+	
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected" model="BBL-3DP-V5NORMAL" onClick="ChooseModel('BBL-3DP-V5NORMAL')"></div>		
+	</div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>	
+</div>
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox"></div>
+	</div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BBL" />0.22mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
+</div>
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox"></div>
+	</div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BBL" />0.11mm nozzle</div>
+</div>
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
+	</div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BBL" />0.22mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
+</div>	
+</div>		
+
+</div>
+	
+
+<div class="OneVendorBlock" Vendor="BAMBU">	
+<div class="BlockBanner">
+	<a>BAMBU-3DP</a>		
+	<div class="BannerBtns">
+		<div class="SmallBtn_Green trans" onClick="SelectPrinterAll('BAMBU')">所有</div>
+		<div class="SmallBtn trans" onClick="SelectPrinterNone('BAMBU')">无</div>
+	</div>
+</div>
+	
+<div class="PrinterArea">	
+	
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
+	</div>	
+    <div class="PName TextS1">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
+</div>
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
+	</div>	
+    <div class="PName TextS1">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BAMBU" />0.2mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
+</div>		
+</div>		
+
+</div>-->
+	
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" id="PreBtn" tid="t8"  onclick="window.open('../1/index.html','_self')">Back</div>
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" id="AcceptBtn" tid="t9"  onclick="GotoFilamentPage()">Next</div>
+</div>
+	
+<div id="NoticeMask"></div>
+<div id="NoticeBody">
+	<div id="NoticeBar" class="trans" tid="t18">error</div>
+	<div id="NoticeContent">
+	<div id="NoticeText" class="trans" tid="t37">At least one printer must be selected.</div>
+	<div id="NoticeBtns">
+		<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t36" onClick="ShowNotice(0)">ok</div>
+	</div>
+	</div>
+</div>	
+	
+	
+</body>
+<script>
+	document.onkeydown = function (event) {
+		var e = event || window.event || arguments.callee.caller.arguments[0];
+
+		if (window.event) {
+			try { e.keyCode = 0; } catch (e) { }
+			e.returnValue = true;
+		}
+	};
+	let pModel = {};
+	let ModelNozzleSelected = {};
+	function textInput(obj) {
+		FilterModelList(obj.value);
+	}
+</script>
+</html>
--- a/resources/web/guide/22/22.css
+++ b/resources/web/guide/22/22.css
@@ -0,0 +1,269 @@
+
+.ChooseBlock
+{
+	display:flex;
+	line-height: 32px;
+}
+
+.CName
+{
+	width:130px;
+	font-weight: 700;
+	height: 100%;
+	text-align: right;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+#ItemBlockArea
+{
+	display:flex;
+	overflow-y:scroll;
+	flex-wrap:wrap;
+	flex-direction: row;
+	padding: 0 0 0 8px;
+}
+
+.MItem
+{
+	width:33%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-right: 4px !important;
+	top: -100px; /* ORCA this will be activated when item filtered with position:absolute */
+}
+
+.MItem label
+{
+	margin-right: 0px !important;
+}
+
+#NoticeMask
+{
+	background-color: #000;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	opacity: 0.05;
+	display: none;
+}
+
+#NoticeBody
+{
+	display: none;
+	width: 500px;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 4px;
+	background-color: inherit;	
+	position: absolute;
+	left: 50%;
+	top: 200px;
+	margin-left: -250px;
+}
+
+#NoticeBar
+{
+	background-color: var(--main-color);
+	height: 40px;
+	line-height: 40px;
+	color: #fff;
+	text-align: center;
+}
+
+#NoticeContent
+{
+	padding: 4mm 10mm;	
+}
+
+
+#NoticeBtns
+{
+	margin-top: 4mm;
+	display: flex;
+	justify-content:flex-end;
+}
+
+#GotoNetPluginBtn
+{
+	display: none;
+}
+
+
+/* ORCA column browser */
+
+#Content {
+	padding: 10px 15px 5px;
+	height: 100%;
+}
+
+.cbr-browser-container {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: 210px auto;
+	width: 100%;
+	height: 100%;
+	border: 1px solid var(--border-color);
+	box-sizing: border-box;
+}
+
+.cbr-column:last-child {
+	grid-column: 1 / -1;
+	border-top: 1px solid var(--border-color);
+}
+
+.cbr-column {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.cbr-column:nth-child(-n+2) {
+	border-right: 1px solid var(--border-color);
+}
+
+.cbr-column .CValues {
+	display: grid;
+}
+
+.CValues label {
+	margin-right: 0 !important;
+}
+
+.cbr-column-title-container {
+	position: sticky;
+	background: var(--bg-color-secondary);
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid var(--border-color);
+}
+
+.cbr-search-bar,
+.cbr-filter-bar {
+	font-size: 16px;
+	background: var(--bg-color-secondary);
+	border: 1px solid transparent;
+	padding: 2px 27px 2px 27px;
+	line-height: 24px;
+}
+
+.cbr-search-bar {
+	width: calc(100% - 18px);
+}
+
+.cbr-filter-bar {
+	border-color: var(--border-color);
+	width: 160px;
+	height:24px;
+}
+
+.cbr-column-title-container .ComboBox > select {
+	margin: 3px 0;
+	height: 30px;
+}
+
+.cbr-column-title-container input:is(:hover,:focus) {
+	border-color: var(--main-color);
+	outline: none;
+}
+
+.cbr-column-title-container input:is(:focus) {
+	background: var(--focus-bg-box);
+}
+
+.cbr-filter-box {
+	position: relative;
+	margin: 3px;
+}
+
+.list-item-count {
+	color:var(--fg-color-label);
+	margin-left:10px
+}
+
+.cbr-filter-btns {
+	display: flex;
+	margin: 5px 5px 5px auto;
+}
+
+.cbr-filter-btns div:first-of-type {
+	margin-left: 10px;
+}
+
+.cbr-filter-mode-filter {
+	display: none;
+}
+
+.clear-icon,
+.search-icon,
+.filter-icon {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	-webkit-mask-image: var(--url);
+	mask-image: var(--url);
+	width:  16px;
+  	height: 16px;
+	background-color: var(--icon-color);
+	pointer-events:none;
+}
+
+.filter-icon {--url: var(--icon-filter)}
+.search-icon {--url: var(--icon-search)}
+.clear-icon  {--url: var(--icon-input-clear)}
+
+.search-icon,
+.filter-icon {
+	left:  6px;
+}
+
+.clear-icon  {
+	right: 6px;
+	display: none;
+}
+
+.cbr-search-bar:not(:placeholder-shown) ~ .clear-icon,
+.cbr-filter-bar:not(:placeholder-shown) ~ .clear-icon  {
+	display: block;
+}
+
+input[onclear="1"]{
+	cursor:default
+}
+
+.cbr-search-placeholder,
+.cbr-filter-placeholder {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	font-size: 16px;
+	color: var(--fg-color-label);
+	pointer-events: none;
+	line-height: 24px;
+	left: 27px;
+}
+
+.cbr-search-bar:not(:placeholder-shown) + .cbr-search-placeholder,
+.cbr-filter-bar:not(:placeholder-shown) + .cbr-filter-placeholder {
+	opacity: 0;
+}
+
+.cbr-content {
+	overflow-y: auto;
+}
+
+.cbr-content div {
+	padding-left: 8px;
+}
+
+.cbr-content label {
+	margin-right: 0 !important;
+	padding: 1px 0 !important;
+}
+
+.cbr-content div.cbr-no-items {
+	display: none;
+}
--- a/resources/web/guide/22/22.js
+++ b/resources/web/guide/22/22.js
@@ -0,0 +1,603 @@
+
+var m_ProfileItem;
+
+var FilamentPriority=new Array( "pla","abs","pet","tpu","pc");
+var VendorPriority=new Array("generic");
+  
+function OnInit()
+{
+	TranslatePage();
+	
+	RequestProfile();
+
+}
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio(pVal)
+{
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		m_ProfileItem=pVal['response'];
+		SortUI();
+	}
+}
+
+function GetFilamentShortname( sName )
+{
+	let sShort=sName.split('@')[0].trim();
+	
+	return sShort;
+}
+
+
+function SortUI()
+{
+	var ModelList=new Array();
+	
+	let nMode=m_ProfileItem["model"].length;
+	for(let n=0;n<nMode;n++)
+	{
+		let OneMode=m_ProfileItem["model"][n];
+		
+		if( OneMode["nozzle_selected"]!="" )
+			ModelList.push(OneMode);
+	}
+	
+	//model
+	let HtmlMode='';
+	nMode=ModelList.length;
+	for(let n=0;n<nMode;n++)
+	{
+		let sModel=ModelList[n];	
+		/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+		HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
+	}
+	
+	$('#MachineList .CValues').append(HtmlMode);	
+	$('#MachineList .CValues input').prop("checked",true);
+	//if(nMode<=1)
+	//{
+	//	$('#MachineList').hide();
+	//}
+	
+	//Filament - Create sorted array with generic vendor first
+	let FilamentArray=new Array();
+	let GenericFilamentArray=new Array();
+	for( let key in m_ProfileItem['filament'] )
+	{
+		let OneFila=m_ProfileItem['filament'][key];
+		if(OneFila['vendor'].toLowerCase() === 'generic')
+			GenericFilamentArray.push({key: key, data: OneFila});
+		else
+			FilamentArray.push({key: key, data: OneFila});
+	}
+	// Combine arrays with generic filaments first
+	let SortedFilamentArray = GenericFilamentArray.concat(FilamentArray);
+	
+	let HtmlFilament='';
+	let SelectNumber=0;
+
+	var TypeHtmlArray={};
+    var VendorHtmlArray={};
+	for( let n=0; n<SortedFilamentArray.length; n++ )
+	{
+		let filamentItem = SortedFilamentArray[n];
+		let key = filamentItem.key;
+		let OneFila = filamentItem.data;
+		
+		//alert(JSON.stringify(OneFila));
+		
+		let fWholeName=OneFila['name'].trim();
+		let fShortName=GetFilamentShortname( OneFila['name'] );
+		let fVendor=OneFila['vendor'];
+		let fType=OneFila['type'];
+		let fSelect=OneFila['selected'];
+		let fModel=OneFila['models']
+		
+		
+        let bFind=false;		
+		//let bCheck=$("#MachineList input:first").prop("checked");
+		if( fModel=='')
+		{
+			// Orca: hide
+			bFind=true;
+		}
+		else
+		{
+			//check in modellist		    
+		    let nModelAll=ModelList.length;
+		    for(let m=0;m<nModelAll;m++)
+		    {
+	    		let sOne=ModelList[m];
+			
+				let OneName=sOne['model'];
+				let NozzleArray=sOne["nozzle_selected"].split(';');
+				
+				let nNozzle=NozzleArray.length;
+				
+				for( let b=0;b<nNozzle;b++ )
+				{
+					let nowModel= OneName+"++"+NozzleArray[b];
+					if(fModel.indexOf(nowModel)>=0)
+					{
+						bFind=true;
+						break;
+					}
+				}
+			}
+		}
+		
+		if(bFind)
+		{
+			//Type
+			let LowType=fType.toLowerCase();
+		    if(!TypeHtmlArray.hasOwnProperty(LowType))
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   /><span>'+fType+'</span></label>';
+			
+				TypeHtmlArray[LowType]=HtmlType;
+		    }
+			
+			//Vendor
+			let lowVendor=fVendor.toLowerCase();
+			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
+				
+				VendorHtmlArray[lowVendor]=HtmlVendor;
+		    }
+			
+			//Filament
+			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
+	        if(pFila.length==0)
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
+			
+			    $("#ItemBlockArea").append(HtmlFila);
+		    } 
+			else
+			{
+				let strModel=pFila.attr("model");
+				let strFilalist=pFila.attr("filalist");
+				
+				if(strModel == '' || fModel == '')
+					pFila.attr("model", '');
+				else
+					pFila.attr("model", strModel+fModel);
+					
+				pFila.attr("filalist", strFilalist+fWholeName+';');
+			}
+			
+		    if(fSelect*1==1)
+			{
+				//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
+					
+				$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
+				SelectNumber++;
+			}
+//			else
+//				$("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);			
+		}
+	} 
+
+	//Sort TypeArray
+	let TypeAdvNum=FilamentPriority.length;
+	for( let n=0;n<TypeAdvNum;n++ )
+	{
+		let strType=FilamentPriority[n];
+		
+		if( TypeHtmlArray.hasOwnProperty( strType ) )
+		{
+			$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
+			delete( TypeHtmlArray[strType] );
+		}
+	}
+    for(let key in TypeHtmlArray )
+	{
+		$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
+	}
+	$("#FilatypeList .CValues input").prop("checked",true);
+	
+	//Sort VendorArray
+	let VendorAdvNum=VendorPriority.length;
+	for( let n=0;n<VendorAdvNum;n++ )
+	{
+		let strVendor=VendorPriority[n];
+		
+		if( VendorHtmlArray.hasOwnProperty( strVendor ) )
+		{
+			$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
+			delete( VendorHtmlArray[strVendor] );
+		}
+	}
+    for(let key in VendorHtmlArray )
+	{
+		$("#VendorList .CValues").append( VendorHtmlArray[key] );
+	}	
+	$("#VendorList .CValues input").prop("checked",true);
+	
+	//------
+	if(SelectNumber==0)
+		ChooseDefaultFilament();
+	
+	//--If Need Install Network Plugin
+	if(m_ProfileItem["network_plugin_install"]!='1' || (m_ProfileItem["network_plugin_install"]=='1' && m_ProfileItem["network_plugin_compability"]=='0') )
+	{
+		$("#AcceptBtn").hide();
+		$("#GotoNetPluginBtn").show();
+	}
+
+	UpdateStats();
+}
+
+
+function ChooseAllMachine()
+{
+	let bCheck=$("#MachineList input:first").prop("checked");
+	
+	$("#MachineList input").prop("checked",bCheck);
+	
+	SortFilament();
+}
+
+function MachineClick()
+{
+	let nChecked=$("#MachineList input:gt(0):checked").length
+	let nAll    =$("#MachineList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#MachineList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#MachineList input:first").prop("checked",false);
+	}
+	
+	SortFilament();
+}
+
+function ChooseAllFilament()
+{
+	let bCheck=$("#FilatypeList input:first").prop("checked");	
+	$("#FilatypeList input").prop("checked",bCheck);	
+	
+	SortFilament();
+}
+
+function FilaClick()
+{
+	let nChecked=$("#FilatypeList input:gt(0):checked").length
+	let nAll    =$("#FilatypeList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#FilatypeList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#FilatypeList input:first").prop("checked",false);
+	}
+	
+	SortFilament();	
+}
+
+function ChooseAllVendor()
+{
+	let bCheck=$("#VendorList input:first").prop("checked");	
+	$("#VendorList input").prop("checked",bCheck);	
+	
+	SortFilament();
+}
+
+function VendorClick()
+{
+	let nChecked=$("#VendorList input:gt(0):checked").length
+	let nAll    =$("#VendorList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#VendorList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#VendorList input:first").prop("checked",false);
+	}
+	
+	SortFilament();
+}
+
+
+
+function SortFilament()
+{
+	let FilaNodes=$("#ItemBlockArea .MItem");
+	let nFilament=FilaNodes.length;
+	//$("#ItemBlockArea .MItem").hide();
+	
+	//ModelList
+	let pModel=$("#MachineList input:checked");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		
+		let mName=OneModel.getAttribute("mode");
+		if( mName=='all' )
+		{
+			continue;
+		}
+		else
+		{
+			let mNozzle=OneModel.getAttribute("nozzle");
+			let NozzleArray=mNozzle.split(';');
+			
+			for( let bb=0;bb<NozzleArray.length;bb++ )
+			{
+				let NewModel='['+mName+'++'+NozzleArray[bb]+']';
+			
+				ModelList.push( NewModel );
+			}
+		}
+	}
+	
+	//TypeList
+	let pType=$("#FilatypeList input:gt(0):checked");
+	let nType=pType.length;
+	let TypeList=new Array();
+	for(let n=0;n<nType;n++)
+	{
+		let OneType=pType[n];
+		TypeList.push(  OneType.getAttribute("filatype") );
+	}	
+	
+	//VendorList
+	let pVendor=$("#VendorList input:gt(0):checked");
+	let nVendor=pVendor.length;
+	let VendorList=new Array();
+	for(let n=0;n<nVendor;n++)
+	{
+		let OneVendor=pVendor[n];
+		VendorList.push(  OneVendor.getAttribute("vendor") );
+	}		
+	
+	
+	//Update Filament UI
+	for(let m=0;m<nFilament;m++)
+	{
+		let OneNode=FilaNodes[m];
+		let OneFF=OneNode.getElementsByTagName("input")[0];
+		
+	    let fModel=OneFF.getAttribute("model");
+		let fVendor=OneFF.getAttribute("vendor");
+		let fType=OneFF.getAttribute("filatype");
+		let fName=OneFF.getAttribute("name");
+		
+		if(TypeList.in_array(fType) && VendorList.in_array(fVendor))
+		{
+			let HasModel=false;
+			for(let m=0;m<ModelList.length;m++)
+			{
+				let ModelSrc=ModelList[m];
+				
+				if( fModel.indexOf(ModelSrc)>=0)
+				{
+					HasModel=true;
+					break;
+				}
+			}
+			
+			if(HasModel || fModel=='')
+			    $(OneNode).show();
+			else
+				$(OneNode).hide();
+		}
+		else{
+			$(OneNode).hide();
+			//alert(fName) //debug non common filament type
+		}
+	}
+
+	UpdateStats();
+}
+
+function UpdateStats()
+{
+	let $i             = $("#ItemBlockArea");
+	let $allItems      = $i.find(".MItem");
+	let $visibleItems  = $i.find(".MItem:visible");
+	let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
+	let visibleCount   = Math.min($filteredItems.length, $visibleItems.length);
+	
+	$(".list-item-count").text(
+		$i.find("input:checked").length + " / " + 
+		$allItems.length +
+		($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
+	);
+}
+
+function ChooseDefaultFilament()
+{
+	//ModelList
+	let pModel=$("#MachineList input:gt(0)");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		ModelList.push(  OneModel.getAttribute("mode") );
+	}	
+	
+	//DefaultMaterialList
+	let DefaultMaterialString=new Array();
+	let nMode=m_ProfileItem["model"].length;
+	for(let n=0;n<nMode;n++)
+	{
+		let OneMode=m_ProfileItem["model"][n];
+		let ModeName=OneMode['model'];
+        let DefaultM=OneMode['materials'];
+		
+		if( ModelList.indexOf(ModeName)>-1 )	
+		{
+			DefaultMaterialString+=OneMode['materials']+';';
+		}
+	}	
+	
+	let DefaultMaterialArray=DefaultMaterialString.split(';');
+	//alert(DefaultMaterialString);
+	
+	//Filament
+	let FilaNodes=$("#ItemBlockArea .MItem");
+    let nFilament=FilaNodes.length;
+    for(let m=0;m<nFilament;m++)
+	{
+		let OneNode=FilaNodes[m];
+		let OneFF=OneNode.getElementsByTagName("input")[0];
+		$(OneFF).prop("checked",false);
+		
+	    let filamentList=GetFilamentShortname(OneFF.getAttribute("filalist")); 
+		//alert(filamentList);
+		let filamentArray=filamentList.split(';')
+		
+		let HasModel=false;
+		let NowFilaLength=filamentArray.length;
+		for(let p=0;p<NowFilaLength;p++)
+		{
+			let NowFila=filamentArray[p];
+		
+			if( NowFila!='' && DefaultMaterialArray.indexOf(NowFila)>-1)
+			{
+				HasModel=true;
+				break;
+			}
+		}
+			
+		if(HasModel)
+		    $(OneFF).prop("checked",true);
+	}
+	
+	ShowNotice(0);
+
+	UpdateStats();
+}
+
+function SelectAllFilament( nShow )
+{
+	// ORCA add ability to only select / unselect filted items
+	if (document.querySelector('.cbr-filter-bar').value) {
+		$('#ItemBlockArea .MItem:visible input')
+		.filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'})
+		.prop("checked", nShow != 0);
+	}
+	else {
+		$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
+	}
+}
+
+function ShowNotice( nShow )
+{
+	if(nShow==0)
+	{
+		$("#NoticeMask").hide();
+		$("#NoticeBody").hide();
+	}
+	else
+	{
+		$("#NoticeMask").show();
+		$("#NoticeBody").show();
+	}
+}
+
+
+function ResponseFilamentResult()
+{
+	let FilaSelectedList= $("#ItemBlockArea input:checked");
+	let nAll=FilaSelectedList.length;
+
+	if( nAll==0 )
+	{
+		ShowNotice(1);
+		return false;
+	}
+	
+	let FilaArray=new Array();
+	for(let n=0;n<nAll;n++)
+	{
+		let strFilalist=FilaSelectedList[n].getAttribute("filalist");
+		if(strFilalist) {
+			let filaNames = strFilalist.split(';');
+			for(let i=0; i<filaNames.length; i++) {
+				let fname = filaNames[i].trim();
+				if(fname !== '')
+					FilaArray.push(fname);
+			}
+		}
+	}
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="save_userguide_filaments";
+	tSend['data']={};
+	tSend['data']['filament']=FilaArray;
+		
+	SendWXMessage( JSON.stringify(tSend) );
+	
+	return true;
+}
+
+
+function ReturnPreviewPage()
+{
+	let nMode=m_ProfileItem["model"].length;
+	
+	if( nMode==1)
+		document.location.href="../1/index.html";
+	else
+		document.location.href="../21/index.html";	
+}
+
+
+function GotoNetPluginPage()
+{
+	let bRet=ResponseFilamentResult();
+	
+	if(bRet)
+		window.location.href="../4orca/index.html";
+}
+
+function FinishGuide()
+{
+	let bRet=ResponseFilamentResult();
+	
+	if(bRet)	
+	{
+		var tSend={};
+		tSend['sequence_id']=Math.round(new Date() / 1000);
+		tSend['command']="user_guide_finish";
+		tSend['data']={};
+		tSend['data']['action']="finish";
+		
+		SendWXMessage( JSON.stringify(tSend) );	
+	}
+	//window.location.href="../6/index.html";
+}
+
+
+
+
+
--- a/resources/web/guide/22/index.html
+++ b/resources/web/guide/22/index.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=0" />
+<title>引导_P21</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="22.css" />
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />		
+<script type="text/javascript" src="test.js"></script>
+<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="./22.js"></script>	
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t14">Filament Selection</div>
+</div>
+<div id="Content" class="ZScrol">
+<!-- ORCA column browser -->
+<div class="cbr-browser-container">
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="1"/>
+			<span class="cbr-search-placeholder trans" tid="t15">printer</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="MachineList">
+			<div class="CValues">
+				<label><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></label>
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="2"/>
+			<span class="cbr-search-placeholder trans" tid="t16">filament type</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="FilatypeList">
+			<div class="CValues">
+				<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></label>	
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="3"/>
+			<span class="cbr-search-placeholder trans" tid="t17">vendor</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="VendorList">
+			<div class="CValues">
+				<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></label>
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="cbr-filter-box">
+				<div class="filter-icon"></div>
+				<input type="text" class="cbr-filter-bar" placeholder=" " tabindex="4"/>
+				<span class="cbr-filter-placeholder trans">Filter items</span>
+				<div class="clear-icon"></div>
+			</div>
+			<div class="ComboBox NoLabel">
+				<div class="arrow-icon"></div>
+				<select id="filter-tags">
+					<option value="0" disabled selected hidden></option>
+					<option value="1">Checked</option>
+					<option value="2">Unchecked</option>
+				</select>
+			</div>
+			<div class="list-item-count"></div>
+			<div class="cbr-filter-btns">
+				<span class="cbr-filter-mode-filter  trans">Select filtered</span>
+				<span class="cbr-filter-mode-visible trans">Select visible</span>
+				<div class="ButtonStyleConfirm ButtonTypeWindow  trans" tid="t11" onClick="SelectAllFilament(1)">all</div>
+				<div class="ButtonStyleRegular ButtonTypeWindow  trans" tid="t12" onClick="SelectAllFilament(0)">Clear all</div>
+			</div>	
+		</div>
+		<div class="cbr-content thin-scroll" id="ItemBlockArea">
+			<!-- <label class="MItem"><input type="checkbox" class="trans" tid="t11" onClick="SelectAllFilament()" /><span class="trans" tid="t11">all</span></label> -->
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+</div>
+
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t8" id="PreBtn"  onclick="ReturnPreviewPage()">Back</div>
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t25" id="AcceptBtn"  onclick="FinishGuide()">finish</div>
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t9" id="GotoNetPluginBtn"  onclick="GotoNetPluginPage()">Next</div>	
+</div>
+<div id="NoticeMask">
+</div>
+	<div id="NoticeBody">
+	<div id="NoticeBar" class="trans" tid="t18">error</div>
+	<div id="NoticeContent">
+	<div id="NoticeText" class="trans" tid="t19">At least one filament must be selected. </div>
+	<div id="NoticeText" class="trans" tid="t20">Do you want to use default filament ?</div>
+	<div id="NoticeBtns">
+		<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t21" onClick="ChooseDefaultFilament()">Yes</div>
+		<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t22" onClick="ShowNotice(0)">No</div>
+	</div>
+	</div>
+	</div>
+
+</body>
+<script>
+	document.onkeydown = function (event) {
+		var e = event || window.event || arguments.callee.caller.arguments[0];
+
+		//if (window.event) {
+		//	try { e.keyCode = 0; } catch (e) { }
+		//	e.returnValue = false;
+		//}
+	};
+
+	function addClearBtnEvents(el){
+		el.addEventListener('click', e => {
+			if (el.getAttribute("onclear") == "1") {
+				el.value = '';
+				el.dispatchEvent(new Event('input', {bubbles: true}));
+			}
+		});
+		el.addEventListener('mousemove', e => {
+			const rc = el.getBoundingClientRect();
+			const onRight = el.value && (e.clientX - rc.left > rc.width - 32);
+			el.setAttribute("onclear", onRight ? "1" : "0");
+		});
+		el.addEventListener('mouseleave', e => {
+			el.setAttribute("onclear", "0");
+		});
+	}
+
+	document.querySelectorAll('.cbr-search-bar').forEach(searchBar => {
+        searchBar.addEventListener('input', function() {
+            const search = this.value.trim().toLowerCase(),
+            	  list   = this.closest('.cbr-column').querySelector('.cbr-content'),
+            	  items  = list.querySelectorAll('label');
+            let   hidden = 0;
+
+            items.forEach((item, i) => {
+				if(i == 0){
+					item.style.display ="block";
+					return;
+				};
+                const text = item.querySelector("span").textContent.toLowerCase();
+                const hide = search && !text.includes(search);
+                item.style.display = hide ? "none" : "block";
+                if(hide) hidden++;
+            });
+
+			if(items.length - hidden == 1){
+				items[0].style.display = "none";
+				hidden++;
+			}
+
+            list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+        });
+		addClearBtnEvents(searchBar);
+	});
+
+	const filterBar         = document.querySelector('.cbr-filter-bar');
+	const filterModeFilter  = document.querySelector('.cbr-filter-mode-filter' );
+	const filterModeVisible = document.querySelector('.cbr-filter-mode-visible');
+	
+	filterBar.addEventListener('input', function() {
+        const search = this.value.trim().toLowerCase();
+        const list   = this.closest('.cbr-column').querySelector('.cbr-content');
+        const items  = list.querySelectorAll('label');
+        let   hidden = 0;
+		
+		filterModeFilter.style.display  = search ? "block" : "none";
+		filterModeVisible.style.display = search ? "none" : "block";
+
+		const showSel   = search == "::checked";
+		const showUnsel = search == "::unchecked";
+		
+		if(showSel || showUnsel){
+			items.forEach(item => {
+				const cb   = item.querySelector("input");
+				const hide = showSel ? !cb.checked : cb.checked;
+				item.style.position = hide ? "absolute" : "unset";
+				if(hide) hidden++;
+			});
+		}
+		else {
+			items.forEach(item => {
+				const text = item.querySelector("span").textContent.toLowerCase();
+				const hide = search && !text.includes(search);
+				item.style.position = hide ? "absolute" : "unset";
+				if(hide) hidden++;
+			});
+		}
+	
+        list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+
+		UpdateStats();
+	});
+	addClearBtnEvents(filterBar);
+
+	document.querySelector('#filter-tags').addEventListener('change', e => {
+		let v = e.target.value;
+		filterBar.value = v == "1" ? "::checked" : "::unchecked";
+		filterBar.dispatchEvent(new Event('input', {bubbles: true}));
+		filterBar.focus();
+		e.target.value = 0; // reset back to make dropdown items always selectable
+    });
+
+</script>
+</html>
--- a/resources/web/guide/23/23.css
+++ b/resources/web/guide/23/23.css
@@ -0,0 +1,363 @@
+
+.ChooseBlock
+{
+	display:flex;
+	line-height: 32px;
+}
+
+.CName
+{
+	width:130px;
+	font-weight: 700;
+	height: 100%;
+	text-align: right;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+#ItemBlockArea
+{
+	display:flex;
+	overflow-y:scroll;
+	flex-wrap:wrap;
+	flex-direction: row;
+	padding: 0 0 0 8px;
+}
+
+.MItem
+{
+	width:33%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-right: 4px !important;
+	top: -100px; /* ORCA this will be activated when item filtered with position:absolute */
+}
+
+.MItem label
+{
+	margin-right: 0px !important;
+}
+
+#NoticeMask
+{
+	background-color: #000;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	opacity: 0.05;
+	display: none;
+}
+
+#NoticeBody
+{
+	display: none;
+	width: 500px;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 4px;
+	background-color: inherit;	
+	position: absolute;
+	left: 50%;
+	top: 200px;
+	margin-left: -250px;
+}
+
+#NoticeBar
+{
+	background-color: var(--main-color);
+	height: 40px;
+	line-height: 40px;
+	color: #fff;
+	text-align: center;
+}
+
+#NoticeContent
+{
+	padding: 4mm 10mm;	
+}
+
+
+#NoticeBtns
+{
+	margin-top: 4mm;
+	display: flex;
+	justify-content:flex-end;
+}
+
+#SystemFilamentsArea
+{
+	display: none;
+	flex-direction: column;
+	height: 100%;
+}
+
+#CFilament_Btn_Area
+{
+	display: flex;
+	align-items: center;
+	height: 30px;
+}
+
+#Title
+{
+	margin: 0px 40px;
+	border-bottom: 1px solid var(--border-color);
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+#Title div
+{
+	cursor: pointer;
+	font-size: 24px;
+}
+
+#Title div.TitleSelected
+{
+	height: calc(100% - 6px);
+	display: flex;
+	align-items: center;
+	border-bottom: 6px solid var(--main-color);
+}
+
+#Title div.TitleUnselected
+{
+	height: 100%;
+	display: flex;
+	align-items: center;
+	color: #000;
+}
+
+#CustomFilamentsArea
+{
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+#CFilament_List
+{
+	display:flex;
+	overflow-y:auto;
+	flex-wrap:wrap;
+	justify-content:flex-start;
+	align-items: flex-start;
+	align-content:flex-start;
+	line-height: 32px;
+	height: 100%;
+}
+
+.CFilament_Item
+{
+	display: flex;
+	align-items: center;
+	margin-right: 10%;
+	width: 44%;
+}
+
+.CFilament_Item:nth-of-type(2n) {
+	margin-right: 2%;
+}
+
+.CFilament_Name
+{
+	width: 100%;
+	overflow: hidden;
+    white-space: nowrap; /* ?????? */
+    text-overflow: ellipsis; /* ????????? */
+}
+
+.CFilament_EditBtn
+{
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+}
+
+.CFilament_EditBtn:hover
+{
+	
+}
+
+/* ORCA column browser */
+
+#Content {
+	height: 100%;
+}
+
+body:has(#SystemFilamentBtn.TitleSelected) #Content { /* :has selector browser support 2023+ */
+	padding: 15px 15px 5px;
+}
+
+.cbr-browser-container {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: 210px auto;
+	width: 100%;
+	height: 100%;
+	border: 1px solid var(--border-color);
+	box-sizing: border-box;
+}
+
+.cbr-column:last-child {
+	grid-column: 1 / -1;
+	border-top: 1px solid var(--border-color);
+}
+
+.cbr-column {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.cbr-column:nth-child(-n+2) {
+	border-right: 1px solid var(--border-color);
+}
+
+.cbr-column .CValues {
+	display: grid;
+}
+
+.CValues label {
+	margin-right: 0 !important;
+}
+
+.cbr-column-title-container {
+	position: sticky;
+	background: var(--bg-color-secondary);
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid var(--border-color);
+}
+
+.cbr-search-bar,
+.cbr-filter-bar {
+	font-size: 16px;
+	background: var(--bg-color-secondary);
+	border: 1px solid transparent;
+	padding: 2px 27px 2px 27px;
+	line-height: 24px;
+}
+
+.cbr-search-bar {
+	width: calc(100% - 18px);
+}
+
+.cbr-filter-bar {
+	border-color: var(--border-color);
+	width: 160px;
+	height:24px;
+}
+
+.cbr-column-title-container .ComboBox > select {
+	margin: 3px 0;
+	height: 30px;
+}
+
+.cbr-column-title-container input:is(:hover,:focus) {
+	border-color: var(--main-color);
+	outline: none;
+}
+
+.cbr-column-title-container input:is(:focus) {
+	background: var(--focus-bg-box);
+}
+
+.cbr-filter-box {
+	position: relative;
+	margin: 3px;
+}
+
+.list-item-count {
+	color:var(--fg-color-label);
+	margin-left:10px
+}
+
+.cbr-filter-btns {
+	display: flex;
+	margin: 5px 5px 5px auto;
+}
+
+.cbr-filter-btns div:first-of-type {
+	margin-left: 10px;
+}
+
+.cbr-filter-mode-filter {
+	display: none;
+}
+
+.clear-icon,
+.search-icon,
+.filter-icon {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	-webkit-mask-image: var(--url);
+	mask-image: var(--url);
+	width:  16px;
+  	height: 16px;
+	background-color: var(--icon-color);
+	pointer-events:none;
+}
+
+.filter-icon {--url: var(--icon-filter)}
+.search-icon {--url: var(--icon-search)}
+.clear-icon  {--url: var(--icon-input-clear)}
+
+.search-icon,
+.filter-icon {
+	left:  6px;
+}
+
+.clear-icon  {
+	right: 6px;
+	display: none;
+}
+
+.cbr-search-bar:not(:placeholder-shown) ~ .clear-icon,
+.cbr-filter-bar:not(:placeholder-shown) ~ .clear-icon  {
+	display: block;
+}
+
+input[onclear="1"]{
+	cursor:default
+}
+
+.cbr-search-placeholder,
+.cbr-filter-placeholder {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	font-size: 16px;
+	color: var(--fg-color-label);
+	pointer-events: none;
+	line-height: 24px;
+	left: 27px;
+}
+
+.cbr-search-bar:not(:placeholder-shown) + .cbr-search-placeholder,
+.cbr-filter-bar:not(:placeholder-shown) + .cbr-filter-placeholder {
+	opacity: 0;
+}
+
+.cbr-content {
+	overflow-y: auto;
+}
+
+.cbr-content div {
+	padding-left: 8px;
+}
+
+.cbr-content label {
+	margin-right: 0 !important;
+	padding: 1px 0 !important;
+}
+
+.cbr-content div.cbr-no-items {
+	display: none;
+}
--- a/resources/web/guide/23/23.js
+++ b/resources/web/guide/23/23.js
@@ -0,0 +1,661 @@
+var m_ProfileItem;
+
+var FilamentPriority=new Array( "pla","abs","pet","tpu","pc");
+var VendorPriority=new Array("generic");
+
+function OnInit()
+{
+	TranslatePage();
+    OnSelectMenu(1);
+	
+	RequestProfile();
+	
+	RequestCustomFilaments();
+	//TestCustomFilaments();
+	//OnSelectMenu(2);
+}
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio(pVal)
+{
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		m_ProfileItem=pVal['response'];
+		SortUI();
+	}
+	else if(strCmd=='update_custom_filaments')
+	{
+		UpdateCustomFilaments( pVal['data'] );
+	}
+}
+
+function GetFilamentShortname( sName )
+{
+	let sShort=sName.split('@')[0].trim();
+	
+	return sShort;
+}
+
+
+function SortUI()
+{
+	var ModelList=new Array();
+	
+	let nMode=m_ProfileItem["model"].length;
+	for(let n=0;n<nMode;n++)
+	{
+		let OneMode=m_ProfileItem["model"][n];
+		
+		if( OneMode["nozzle_selected"]!="" )
+			ModelList.push(OneMode);
+	}
+	
+
+	//model
+	let HtmlMode='';
+	nMode=ModelList.length;
+	for(let n=0;n<nMode;n++)
+	{
+		let sModel=ModelList[n];	
+		/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+		HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
+	}
+	
+	$('#MachineList .CValues').append(HtmlMode);	
+	$('#MachineList .CValues input').prop("checked",true);
+	//if(nMode<=1)
+	//{
+	//	$('#MachineList').hide();
+	//}
+	
+	//Filament - Create sorted array with generic vendor first
+	let FilamentArray=new Array();
+	let GenericFilamentArray=new Array();
+	for( let key in m_ProfileItem['filament'] )
+	{
+		let OneFila=m_ProfileItem['filament'][key];
+		if(OneFila['vendor'].toLowerCase() === 'generic')
+			GenericFilamentArray.push({key: key, data: OneFila});
+		else
+			FilamentArray.push({key: key, data: OneFila});
+	}
+	// Combine arrays with generic filaments first
+	let SortedFilamentArray = GenericFilamentArray.concat(FilamentArray);
+	
+	let HtmlFilament='';
+	let SelectNumber=0;
+
+	var TypeHtmlArray={};
+    var VendorHtmlArray={};
+	for( let n=0; n<SortedFilamentArray.length; n++ )
+	{
+		let filamentItem = SortedFilamentArray[n];
+		let key = filamentItem.key;
+		let OneFila = filamentItem.data;
+		
+		//alert(JSON.stringify(OneFila));
+		
+		let fWholeName=OneFila['name'].trim();
+		let fShortName=GetFilamentShortname( OneFila['name'] );
+		let fVendor=OneFila['vendor'];
+		let fType=OneFila['type'];
+		let fSelect=OneFila['selected'];
+		let fModel=OneFila['models']
+		
+        let bFind=false;		
+		//let bCheck=$("#MachineList input:first").prop("checked");
+		if( fModel=='')
+		{
+			bFind=true;
+		}
+		else
+		{
+			//check in modellist		    
+		    let nModelAll=ModelList.length;
+		    for(let m=0;m<nModelAll;m++)
+		    {
+	    		let sOne=ModelList[m];
+			
+				let OneName=sOne['model'];
+				let NozzleArray=sOne["nozzle_selected"].split(';');
+				
+				let nNozzle=NozzleArray.length;
+				
+				for( let b=0;b<nNozzle;b++ )
+				{
+					let nowModel= OneName+"++"+NozzleArray[b];
+					if(fModel.indexOf(nowModel)>=0)
+					{
+						bFind=true;
+						break;
+					}
+				}
+			}
+		}
+		
+		if(bFind)
+		{
+			//Type
+			let LowType=fType.toLowerCase();
+		    if(!TypeHtmlArray.hasOwnProperty(LowType))
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   /><span>'+fType+'</span></label>';
+			
+				TypeHtmlArray[LowType]=HtmlType;
+		    }
+			
+			//Vendor
+			let lowVendor=fVendor.toLowerCase();
+			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
+				
+				VendorHtmlArray[lowVendor]=HtmlVendor;
+		    }
+			
+			//Filament
+			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
+	        if(pFila.length==0)
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
+			
+			    $("#ItemBlockArea").append(HtmlFila);
+		    } 
+			else
+			{
+				let strModel=pFila.attr("model");
+				let strFilalist=pFila.attr("filalist");
+				
+				if(strModel == '' || fModel == '')
+					pFila.attr("model", '');
+				else
+					pFila.attr("model", strModel+fModel);
+				pFila.attr("filalist", strFilalist+fWholeName+';');
+			}
+			
+		    if(fSelect*1==1)
+			{
+				//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
+					
+				$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
+				SelectNumber++;
+			}
+//			else
+//				$("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);			
+		}
+	} 
+
+	//Sort TypeArray
+	let TypeAdvNum=FilamentPriority.length;
+	for( let n=0;n<TypeAdvNum;n++ )
+	{
+		let strType=FilamentPriority[n];
+		
+		if( TypeHtmlArray.hasOwnProperty( strType ) )
+		{
+			$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
+			delete( TypeHtmlArray[strType] );
+		}
+	}
+    for(let key in TypeHtmlArray )
+	{
+		$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
+	}
+	$("#FilatypeList .CValues input").prop("checked",true);
+	
+	//Sort VendorArray
+	let VendorAdvNum=VendorPriority.length;
+	for( let n=0;n<VendorAdvNum;n++ )
+	{
+		let strVendor=VendorPriority[n];
+		
+		if( VendorHtmlArray.hasOwnProperty( strVendor ) )
+		{
+			$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
+			delete( VendorHtmlArray[strVendor] );
+		}
+	}
+    for(let key in VendorHtmlArray )
+	{
+		$("#VendorList .CValues").append( VendorHtmlArray[key] );
+	}	
+	$("#VendorList .CValues input").prop("checked",true);
+	
+	//------
+	if(SelectNumber==0)
+		ChooseDefaultFilament();
+
+	UpdateStats();
+}
+
+
+function ChooseAllMachine()
+{
+	let bCheck=$("#MachineList input:first").prop("checked");
+	
+	$("#MachineList input").prop("checked",bCheck);
+	
+	SortFilament();
+}
+
+function MachineClick()
+{
+	let nChecked=$("#MachineList input:gt(0):checked").length
+	let nAll    =$("#MachineList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#MachineList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#MachineList input:first").prop("checked",false);
+	}
+	
+	SortFilament();
+}
+
+function ChooseAllFilament()
+{
+    let bCheck=$("#FilatypeList input:first").prop("checked");	
+	$("#FilatypeList input").prop("checked",bCheck);	
+    
+    SortFilament();
+}
+
+function FilaClick()
+{
+	let nChecked=$("#FilatypeList input:gt(0):checked").length
+	let nAll    =$("#FilatypeList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#FilatypeList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#FilatypeList input:first").prop("checked",false);
+	}
+	
+	SortFilament();	
+}
+
+function ChooseAllVendor()
+{
+	let bCheck=$("#VendorList input:first").prop("checked");	
+	$("#VendorList input").prop("checked",bCheck);	
+	
+	SortFilament();
+}
+
+function VendorClick()
+{
+	let nChecked=$("#VendorList input:gt(0):checked").length
+	let nAll    =$("#VendorList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#VendorList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#VendorList input:first").prop("checked",false);
+	}
+	
+	SortFilament();
+}
+
+
+
+function SortFilament()
+{
+	let FilaNodes=$("#ItemBlockArea .MItem");
+	let nFilament=FilaNodes.length;
+	//$("#ItemBlockArea .MItem").hide();
+	
+	//ModelList
+	let pModel=$("#MachineList input:checked");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		
+		let mName=OneModel.getAttribute("mode");
+		if( mName=='all' )
+		{
+			continue;
+		}
+		else
+		{
+			let mNozzle=OneModel.getAttribute("nozzle");
+			let NozzleArray=mNozzle.split(';');
+			
+			for( let bb=0;bb<NozzleArray.length;bb++ )
+			{
+				let NewModel='['+mName+'++'+NozzleArray[bb]+']';
+			
+				ModelList.push( NewModel );
+			}
+		}
+	}
+	
+	//TypeList
+	let pType=$("#FilatypeList input:gt(0):checked");
+	let nType=pType.length;
+	let TypeList=new Array();
+	for(let n=0;n<nType;n++)
+	{
+		let OneType=pType[n];
+		TypeList.push(  OneType.getAttribute("filatype") );
+	}	
+	
+	//VendorList
+	let pVendor=$("#VendorList input:gt(0):checked");
+	let nVendor=pVendor.length;
+	let VendorList=new Array();
+	for(let n=0;n<nVendor;n++)
+	{
+		let OneVendor=pVendor[n];
+		VendorList.push(  OneVendor.getAttribute("vendor") );
+	}		
+	
+	
+	//Update Filament UI
+	for(let m=0;m<nFilament;m++)
+	{
+		let OneNode=FilaNodes[m];
+		let OneFF=OneNode.getElementsByTagName("input")[0];
+		
+	    let fModel=OneFF.getAttribute("model");
+		let fVendor=OneFF.getAttribute("vendor");
+		let fType=OneFF.getAttribute("filatype");
+		let fName=OneFF.getAttribute("name");
+		
+		if(TypeList.in_array(fType) && VendorList.in_array(fVendor))
+		{
+			let HasModel=false;
+			for(let m=0;m<ModelList.length;m++)
+			{
+				let ModelSrc=ModelList[m];
+				
+				if( fModel.indexOf(ModelSrc)>=0)
+				{
+					HasModel=true;
+					break;
+				}
+			}
+			
+			if(HasModel || fModel=='')
+			    $(OneNode).show();
+			else
+				$(OneNode).hide();
+		}
+		else{
+			$(OneNode).hide();
+			//alert(fName) //debug non common filament type
+		}
+			
+	}
+
+	UpdateStats();
+}
+
+function UpdateStats()
+{
+	let $i             = $("#ItemBlockArea");
+	let $allItems      = $i.find(".MItem");
+	let $visibleItems  = $i.find(".MItem:visible");
+	let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
+	let visibleCount   = Math.min($filteredItems.length, $visibleItems.length);
+	
+	$(".list-item-count").text(
+		$i.find("input:checked").length + " / " + 
+		$allItems.length +
+		($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
+	);
+}
+
+function ChooseDefaultFilament()
+{
+	//ModelList
+	let pModel=$("#MachineList input:gt(0):checked");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		ModelList.push(  OneModel.getAttribute("mode") );
+	}	
+	
+	//Filament
+	let FilaNodes=$("#ItemBlockArea .MItem");
+    let nFilament=FilaNodes.length;
+    for(let m=0;m<nFilament;m++)
+	{
+		let OneNode=FilaNodes[m];
+		let OneFF=OneNode.getElementsByTagName("input")[0];
+		$(OneFF).prop("checked",false);
+		
+	    let fModel=OneFF.getAttribute("model");
+		
+		let HasModel=false;
+		for(let m=0;m<nModel;m++)
+		{
+			let ModelSrc=ModelList[m];
+		
+			if( fModel.indexOf(ModelSrc)>=0)
+			{
+				HasModel=true;
+				break;
+			}
+		}
+			
+		if(HasModel)
+		    $(OneFF).prop("checked",true);
+	}
+	
+	ShowNotice(0);
+}
+
+function SelectAllFilament( nShow )
+{
+	// ORCA add ability to only select / unselect filted items
+	if (document.querySelector('.cbr-filter-bar').value) {
+		$('#ItemBlockArea .MItem:visible input')
+		.filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'})
+		.prop("checked", nShow != 0);
+	}
+	else {
+		$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
+	}
+
+	UpdateStats();
+}
+
+function ShowNotice( nShow )
+{
+	if(nShow==0)
+	{
+		$("#NoticeMask").hide();
+		$("#NoticeBody").hide();
+	}
+	else
+	{
+		$("#NoticeMask").show();
+		$("#NoticeBody").show();
+	}
+}
+
+
+function ResponseFilamentResult()
+{
+	let FilaSelectedList= $("#ItemBlockArea input:checked");
+	let nAll=FilaSelectedList.length;
+
+	if( nAll==0 )
+	{
+		ShowNotice(1);
+		return false;
+	}
+	
+	let FilaArray=new Array();
+	for(let n=0;n<nAll;n++)
+	{
+		let strFilalist=FilaSelectedList[n].getAttribute("filalist");
+		if(strFilalist) {
+			let filaNames = strFilalist.split(';');
+			for(let i=0; i<filaNames.length; i++) {
+				let fname = filaNames[i].trim();
+				if(fname !== '')
+					FilaArray.push(fname);
+			}
+		}
+	}
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="save_userguide_filaments";
+	tSend['data']={};
+	tSend['data']['filament']=FilaArray;
+	
+	SendWXMessage( JSON.stringify(tSend) );
+	
+	return true;
+}
+
+
+function CancelSelect()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="user_guide_cancel";
+	tSend['data']={};
+		
+	SendWXMessage( JSON.stringify(tSend) );			
+}
+
+
+function ConfirmSelect()
+{
+	let bRet=ResponseFilamentResult();
+	
+	if(bRet)
+    {
+		var tSend={};
+		tSend['sequence_id']=Math.round(new Date() / 1000);
+		tSend['command']="user_guide_finish";
+		tSend['data']={};
+		tSend['data']['action']="finish";
+		
+		SendWXMessage( JSON.stringify(tSend) );			
+	}
+}
+
+
+function OnSelectMenu( nIndex )
+{
+	switch(nIndex)
+	{
+		case 1:
+			$('#SystemFilamentBtn').addClass('TitleSelected');
+			$('#SystemFilamentBtn').removeClass('TitleUnselected');		
+			
+			$('#CustomFilamentBtn').addClass('TitleUnselected');
+			$('#CustomFilamentBtn').removeClass('TitleSelected');	
+			
+			$('#SystemFilamentsArea').css('display','flex');
+			$('#CustomFilamentsArea').css('display','none');
+			break;
+		case 2:
+			$('#CustomFilamentBtn').addClass('TitleSelected');
+			$('#CustomFilamentBtn').removeClass('TitleUnselected');
+			
+			$('#SystemFilamentBtn').addClass('TitleUnselected');
+			$('#SystemFilamentBtn').removeClass('TitleSelected');	
+			
+			$('#CustomFilamentsArea').css('display','flex');
+			$('#SystemFilamentsArea').css('display','none');			
+			break;
+	}
+}
+
+function RequestCustomFilaments()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_custom_filaments";
+		
+	SendWXMessage( JSON.stringify(tSend) );		
+}
+
+function TestCustomFilaments()
+{
+	let strTest='{"command":"update_custom_filaments","data":[{"id":"P0c71f94","name":"AMOLEN ABS 222"},{"id":"P19cc6c5","name":"PrimaSelect PLA 231654"},{"id":"P93a5c3b","name":"3DJAKE PLA 111"}],"sequence_id":"2000"}';
+	let tItem=JSON.parse(strTest);
+	
+	HandleStudio(tItem);
+}
+
+function UpdateCustomFilaments( CFList )
+{
+	let strHtml='';
+	let nTotal=CFList.length;
+	
+	for(let n=0;n<nTotal;n++)
+	{
+		let pItem=CFList[n];
+		
+		let F_id=pItem['id'];
+		let F_name=pItem['name'];
+		
+		let strAdd='<div class="CFilament_Item">'+
+			       '<a  class="CFilament_Name" title="'+F_name+'">'+F_name+'</a><img onClick="CFEdit(\''+F_id+'\')" class="CFilament_EditBtn" src="../../image/edit.svg" />'+
+		           '</div>';
+		
+		strHtml+=strAdd;
+	}
+	
+	$('#CFilament_List').html(strHtml);
+}
+
+
+function OnClickCustomFilamentAdd()
+{
+	//alert('Create New Custom Filament');
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="create_custom_filament";
+		
+	SendWXMessage( JSON.stringify(tSend) );		
+}
+
+//编辑某一个自定义材料
+function CFEdit( fid )
+{
+	//alert(fid);
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="modify_custom_filament";
+	tSend['id']=fid;
+		
+	SendWXMessage( JSON.stringify(tSend) );	
+}
+
+
--- a/resources/web/guide/23/index.html
+++ b/resources/web/guide/23/index.html
@@ -0,0 +1,246 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=0" />
+<title>引导_P21</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="23.css" />
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />	
+<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="./23.js"></script>	
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div id="SystemFilamentBtn" class="TitleSelected trans" tid="t109" onClick="OnSelectMenu(1)">System Filaments</div>
+	<div id="CustomFilamentBtn" class="TitleUnselected trans" tid="t110" onClick="OnSelectMenu(2)">Custom Filaments</div>
+</div>
+<div id="Content" class="ZScrol">
+	
+<div id="SystemFilamentsArea">
+
+<!-- ORCA column browser -->
+<div class="cbr-browser-container">
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="1"/>
+			<span class="cbr-search-placeholder trans" tid="t15">printer</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="MachineList">
+			<div class="CValues">
+				<label><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></label>
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="2"/>
+			<span class="cbr-search-placeholder trans" tid="t16">filament type</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="FilatypeList">
+			<div class="CValues">
+				<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></label>	
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="3"/>
+			<span class="cbr-search-placeholder trans" tid="t17">vendor</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="VendorList">
+			<div class="CValues">
+				<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></label>
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="cbr-filter-box">
+				<div class="filter-icon"></div>
+				<input type="text" class="cbr-filter-bar" placeholder=" " tabindex="4"/>
+				<span class="cbr-filter-placeholder trans">Filter items</span>
+				<div class="clear-icon"></div>
+			</div>
+			<div class="ComboBox NoLabel">
+				<div class="arrow-icon"></div>
+				<select id="filter-tags">
+					<option value="0" disabled selected hidden></option>
+					<option value="1">Checked</option>
+					<option value="2">Unchecked</option>
+				</select>
+			</div>
+			<div class="list-item-count"></div>
+			<div class="cbr-filter-btns">
+				<span class="cbr-filter-mode-filter  trans">Select filtered</span>
+				<span class="cbr-filter-mode-visible trans">Select visible</span>
+				<div class="ButtonStyleConfirm ButtonTypeWindow  trans" tid="t11" onClick="SelectAllFilament(1)">all</div>
+				<div class="ButtonStyleRegular ButtonTypeWindow  trans" tid="t12" onClick="SelectAllFilament(0)">Clear all</div>
+			</div>	
+		</div>
+		<div class="cbr-content thin-scroll" id="ItemBlockArea">
+			<!-- <label class="MItem"><input type="checkbox" class="trans" tid="t11" onClick="SelectAllFilament()" /><span class="trans" tid="t11">all</span></label> -->
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+</div>
+
+</div>
+	
+<div id="CustomFilamentsArea">
+	<div id="CFilament_Btn_Area">
+		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t111" onClick="OnClickCustomFilamentAdd()">Create New</div>
+	</div>
+    <div id="CFilament_List" class="thin-scroll">
+	</div>
+</div>
+	
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t39" id="AcceptBtn"  onclick="ConfirmSelect()">Confirm</div>	
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t38" id="PreBtn"  onclick="CancelSelect()">Cancel</div>
+</div>
+<div id="NoticeMask">
+</div>
+	<div id="NoticeBody">
+	<div id="NoticeBar" class="trans" tid="t18">error</div>
+	<div id="NoticeContent">
+	<div id="NoticeText" class="trans" tid="t19">At least one filament must be selected. </div>
+	<div id="NoticeText" class="trans" tid="t20">Do you want to use default filament ?</div>
+	<div id="NoticeBtns">
+		<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t21" onClick="ChooseDefaultFilament()">yes</div>
+		<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t22" onClick="ShowNotice(0)">no</div>
+	</div>
+	</div>
+	</div>
+
+</body>
+<script>
+	document.onkeydown = function (event) {
+		var e = event || window.event || arguments.callee.caller.arguments[0];
+
+		if (e.keyCode == 27)
+			ClosePage();
+
+		//if (window.event) {
+		//	try { e.keyCode = 0; } catch (e) { }
+		//	e.returnValue = false;
+		//}
+	};
+    window.addEventListener('wheel', function (event) {
+        if (event.ctrlKey === true || event.metaKey) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+
+	function addClearBtnEvents(el){
+		el.addEventListener('click', e => {
+			if (el.getAttribute("onclear") == "1") {
+				el.value = '';
+				el.dispatchEvent(new Event('input', {bubbles: true}));
+			}
+		});
+		el.addEventListener('mousemove', e => {
+			const rc = el.getBoundingClientRect();
+			const onRight = el.value && (e.clientX - rc.left > rc.width - 32);
+			el.setAttribute("onclear", onRight ? "1" : "0");
+		});
+		el.addEventListener('mouseleave', e => {
+			el.setAttribute("onclear", "0");
+		});
+	}
+
+	document.querySelectorAll('.cbr-search-bar').forEach(searchBar => {
+        searchBar.addEventListener('input', function() {
+            const search = this.value.trim().toLowerCase(),
+            	  list   = this.closest('.cbr-column').querySelector('.cbr-content'),
+            	  items  = list.querySelectorAll('label');
+            let   hidden = 0;
+
+            items.forEach((item, i) => {
+				if(i == 0){
+					item.style.display ="block";
+					return;
+				};
+                const text = item.querySelector("span").textContent.toLowerCase();
+                const hide = search && !text.includes(search);
+                item.style.display = hide ? "none" : "block";
+                if(hide) hidden++;
+            });
+
+			if(items.length - hidden == 1){
+				items[0].style.display = "none";
+				hidden++;
+			}
+
+            list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+        });
+		addClearBtnEvents(searchBar);
+	});
+
+	const filterBar         = document.querySelector('.cbr-filter-bar');
+	const filterModeFilter  = document.querySelector('.cbr-filter-mode-filter' );
+	const filterModeVisible = document.querySelector('.cbr-filter-mode-visible');
+	
+	filterBar.addEventListener('input', function() {
+        const search = this.value.trim().toLowerCase();
+        const list   = this.closest('.cbr-column').querySelector('.cbr-content');
+        const items  = list.querySelectorAll('label');
+        let   hidden = 0;
+		
+		filterModeFilter.style.display  = search ? "block" : "none";
+		filterModeVisible.style.display = search ? "none" : "block";
+
+		const showSel   = search == "::checked";
+		const showUnsel = search == "::unchecked";
+		
+		if(showSel || showUnsel){
+			items.forEach(item => {
+				const cb   = item.querySelector("input");
+				const hide = showSel ? !cb.checked : cb.checked;
+				item.style.position = hide ? "absolute" : "unset";
+				if(hide) hidden++;
+			});
+		}
+		else {
+			items.forEach(item => {
+				const text = item.querySelector("span").textContent.toLowerCase();
+				const hide = search && !text.includes(search);
+				item.style.position = hide ? "absolute" : "unset";
+				if(hide) hidden++;
+			});
+		}
+	
+        list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+
+		UpdateStats();
+	});
+	addClearBtnEvents(filterBar);
+
+	document.querySelector('#filter-tags').addEventListener('change', e => {
+		let v = e.target.value;
+		filterBar.value = v == "1" ? "::checked" : "::unchecked";
+		filterBar.dispatchEvent(new Event('input', {bubbles: true}));
+		filterBar.focus();
+		e.target.value = 0; // reset back to make dropdown items always selectable
+    });
+
+</script>
+</html>
--- a/resources/web/guide/24/24.css
+++ b/resources/web/guide/24/24.css
@@ -0,0 +1,223 @@
+#Content
+{
+	overflow-y:auto;
+	padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
+}
+
+.BlockBanner
+{
+	padding: 0px;
+	border-bottom:#009688 1px solid;
+	width: 100%;
+	display: flex;
+	justify-content:space-between;
+	align-items: center;
+}
+
+.BannerBtns
+{
+	display: flex;
+	white-space: nowrap;
+	justify-content: space-around;
+	align-items: center;
+	text-align: center;
+	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
+}
+
+/*.Banner-Btn
+{
+	background-color: #C0C0C0;
+	color: #000;
+	padding: 0px 6px;
+	min-width: 50px;
+	border-radius: 4px;
+	height: 32px;
+	line-height: 32px;
+	cursor: pointer;
+}
+
+.Banner-Btn-green
+{
+	background-color: #009688;
+	color: #fff;
+	padding: 0px 6px;
+	min-width: 50px;
+	border-radius: 8px;
+	height: 32px;
+	line-height: 32px;
+	cursor: pointer;
+}*/
+
+.BlockBanner  a
+{
+	display: inline-block;
+	background-color:#009688;
+	line-height: 40px;
+	height: 40px;
+	padding: 0px 24px;
+	color: #fff;
+}
+
+.PrinterArea
+{
+	padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.PrinterBlock
+{
+	width: 160px;
+	text-align: center;
+	padding: 10px;
+}
+
+.PImg
+{
+	position:relative;
+	width:120px;      /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
+	height:120px;	  /* ORCA fit image to fill frame */
+	padding:10px 20px /* ORCA use less vertical padding */
+}
+
+.ModelCheckBox
+{
+	flex: 0 0 18px;			/* ORCA match checkbox style and size */
+	margin: 10px 5px 0 0;
+	width: 18px;
+	height: 18px;
+	background-image: url("../img/emptycheck.svg");
+	background-size: cover;
+}
+
+.ModelCheckBox.ModelCheckBoxSelected
+{
+	background-image: url("../img/greencheck.svg");
+}
+
+img.ModelThumbnail
+{
+	width:  100%;
+	height: 100%;
+}
+
+.PName
+{
+	font-weight: 700;
+	line-height: 20px; /* ORCA */
+	text-align: left;
+}
+
+.pNozzel
+{
+	display: none;
+	align-items: center;
+	justify-content:flex-start;
+	color: #5A5A5A;	
+	padding-left: 0px; /* ORCA Align checkboxes with with model text */
+}
+
+.pNozzel input
+{
+	vertical-align: middle;
+	margin-right: 5px;
+}
+
+
+/*-----Notice-----*/
+#NoticeMask
+{
+	background-color: #000;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	opacity: 0.05;
+	display: none;
+}
+
+#NoticeBody
+{
+	display: none;
+	width: 400px;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 4px;
+	background-color: inherit;	
+	position: absolute;
+	left: 50%;
+	top: 200px;
+	margin-left: -200px;
+}
+
+#NoticeBar
+{
+	background-color:#00f0d8;
+	height: 40px;
+	line-height: 40px;
+	color: #fff;
+	text-align: center;
+}
+
+#NoticeContent
+{
+	padding: 4mm 10mm;	
+}
+
+
+#NoticeBtns
+{
+	margin-top: 4mm;
+	display: flex;
+	justify-content:flex-end;
+}
+
+.search {
+	width: 100%;
+	position: relative;
+	display: flex;
+}
+  
+.searchTerm {
+	width: 100%;
+	border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
+	/*border-right: none;*/
+	padding: 5px;
+	padding-left:32px;
+	height: 20px;      /* ORCA match height */
+	line-height: 20px; /* ORCA center text vertically */
+	border-radius: 5px 5px 5px 5px;
+	outline: none;
+	color: #9DBFAF;
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm {border: 1px solid #4A4A51;}
+}
+
+.searchTerm:focus{
+	color: #363636;       /* ORCA Searchbox > use normal text color */
+	border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm:focus{color: #FFFFFF}
+}
+
+#search-icon{ /* ORCA */
+	position:absolute;
+    top: 50%;
+    transform: translateY(-50%);
+	left:8px;
+	margin:0px auto;
+	fill:#7C8282
+}
+@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
+	#search-icon{fill:#949494}
+}
+
+/*Resize the wrap to see the search bar change!*/
+.wrap{
+	width: 30%;
+	padding-bottom: 5px;
+	padding-left: 32px; /* ORCA Align with content */
+}
--- a/resources/web/guide/24/24.js
+++ b/resources/web/guide/24/24.js
@@ -0,0 +1,435 @@
+function OnInit()
+{
+	//let strInput=JSON.stringify(cData);
+	//HandleModelList(cData);
+	
+	TranslatePage();
+	
+	RequestProfile();
+}
+
+
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio( pVal )
+{
+//	alert(strInput);
+//	alert(JSON.stringify(strInput));
+//	
+//	let pVal=IsJson(strInput);
+//	if(pVal==null)
+//	{
+//		alert("Msg Format Error is not Json");
+//		return;
+//	}
+	
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		HandleModelList(pVal['response']);
+	}
+}
+
+function ShowPrinterThumb(pItem, strImg)
+{
+	$(pItem).attr('src',strImg);
+	$(pItem).attr('onerror',null);
+}
+
+function ChooseModel( vendor, ModelName )
+{
+	let ChooseItem=$(".ModelCheckBox[vendor='"+vendor+"'][model='"+ModelName+"']");
+	
+	if(ChooseItem!=null)
+	{
+		if( $(ChooseItem).hasClass('ModelCheckBoxSelected') )
+			$(ChooseItem).removeClass('ModelCheckBoxSelected');
+		else
+			$(ChooseItem).addClass('ModelCheckBoxSelected');		
+
+		SetModelSelect(vendor, ModelName, $(ChooseItem).hasClass('ModelCheckBoxSelected'));
+	}		
+}
+
+function HandleModelList( pVal )
+{
+	if( !pVal.hasOwnProperty("model") )
+		return;
+
+    pModel=pVal['model'];
+	
+	let nTotal=pModel.length;
+	let ModelHtml={};
+	for(let n=0;n<nTotal;n++)
+	{
+		let OneModel=pModel[n];
+		
+		let strVendor=OneModel['vendor'];
+		
+		//Add Vendor Html Node
+		if($(".OneVendorBlock[vendor='"+strVendor+"']").length==0)
+		{
+			let sVV=strVendor;
+			if( sVV=="BBL" )
+				sVV="Bambu Lab";
+			if( sVV=="Custom")
+				sVV="Custom Printer";
+			if( sVV=="Other")
+				sVV="Orca colosseum";
+
+			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
+'<div class="BlockBanner">'+
+'	<a>'+sVV+'</a>'+				
+'	<div class="BannerBtns">'+
+'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
+'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
+'	</div>'+
+'</div>'+
+'<div class="PrinterArea">	'+
+'</div>'+
+'</div>';
+			
+			$('#Content').append(HtmlNewVendor);
+		}
+		
+		let ModelName=OneModel['model'];
+		
+		//Collect Html Node Nozzel Html
+		if( !ModelHtml.hasOwnProperty(strVendor))
+			ModelHtml[strVendor]='';
+
+		ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
+	}
+	
+	//Update Nozzel Html Append
+	for( let key in ModelHtml )
+	{
+		$(".OneVendorBlock[vendor='"+key+"'] .PrinterArea").append( ModelHtml[key] );
+	}
+	
+	
+	//Update Checkbox
+	for(let m=0;m<nTotal;m++)
+	{
+		let OneModel=pModel[m];
+
+		let SelectList=OneModel['nozzle_selected'];
+		if(SelectList!='')
+		{
+			ChooseModel(OneModel['vendor'], OneModel['model']);
+		}
+	}	
+
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
+	// let nSelect=AlreadySelect.length;
+	// if(nSelect==0)
+	// {
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	// }
+	
+	TranslatePage();
+}
+
+function SetModelSelect(vendor, model, checked) {
+	if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
+		return;
+	}
+
+	if (!ModelNozzleSelected.hasOwnProperty(vendor) && checked) {
+		ModelNozzleSelected[vendor] = {};
+	}
+
+	let oVendor = ModelNozzleSelected[vendor];
+	if (oVendor.hasOwnProperty(model) || checked) {
+		oVendor[model] = checked;
+	}
+}
+
+function GetModelSelect(vendor, model) {
+	if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
+		return false;
+	}
+
+	let oVendor = ModelNozzleSelected[vendor];
+	if (!oVendor.hasOwnProperty(model)) {
+		return false;
+	}
+
+	return oVendor[model];
+}
+
+function FilterModelList(keyword) {
+
+	//Save checkbox state
+	let ModelSelect = $('.ModelCheckBox');
+	for (let n = 0; n < ModelSelect.length; n++) {
+		let OneItem = ModelSelect[n];
+
+		let strModel = OneItem.getAttribute("model");
+
+		let strVendor = OneItem.getAttribute("vendor");
+
+		SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
+	}
+
+	let nTotal = pModel.length;
+	let ModelHtml = {};
+	let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
+
+	$('#Content').empty();
+	for (let n = 0; n < nTotal; n++) {
+		let OneModel = pModel[n];
+
+		let strVendor = OneModel['vendor'];
+		let search = (OneModel['name'] + '\0' + strVendor).toLowerCase();
+
+		if (!kwSplit.every(s => search.includes(s)))
+			continue;
+
+		//Add Vendor Html Node
+		if ($(".OneVendorBlock[vendor='" + strVendor + "']").length == 0) {
+			let sVV = strVendor;
+			if (sVV == "BBL")
+				sVV = "Bambu Lab";
+			if (sVV == "Custom")
+				sVV = "Custom Printer";
+			if (sVV == "Other")
+				sVV = "Orca colosseum";
+
+			let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
+				'<div class="BlockBanner">' +
+				'	<a>' + sVV + '</a>' +
+				'	<div class="BannerBtns">' +
+				'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
+				'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
+				'	</div>' +
+				'</div>' +
+				'<div class="PrinterArea">	' +
+				'</div>' +
+				'</div>';
+
+			$('#Content').append(HtmlNewVendor);
+		}
+
+		//Collect Html Node Nozzel Html
+		if (!ModelHtml.hasOwnProperty(strVendor))
+			ModelHtml[strVendor] = '';
+			
+		ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
+	}
+
+	//Update Nozzel Html Append
+	for (let key in ModelHtml) {
+		let obj = $(".OneVendorBlock[vendor='" + key + "'] .PrinterArea");
+		obj.empty();
+		obj.append(ModelHtml[key]);
+	}
+
+
+	//Update Checkbox
+	ModelSelect = $('.ModelCheckBox');
+	for (let n = 0; n < ModelSelect.length; n++) {
+		let OneItem = ModelSelect[n];
+
+		let strModel = OneItem.getAttribute("model");
+		let strVendor = OneItem.getAttribute("vendor");
+
+		let checked = GetModelSelect(strVendor, strModel);
+
+		if (checked)
+			$(OneItem).addClass('ModelCheckBoxSelected');
+		else
+			$(OneItem).removeClass('ModelCheckBoxSelected');
+	}
+
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
+	// let nSelect=AlreadySelect.length;
+	// if(nSelect==0)
+	// {
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	// }
+
+	TranslatePage();
+}
+
+function CreatePrinterBlock(OneModel)
+{
+	// ORCA use single functuon to create blocks to simplify code
+	let vendor = OneModel['vendor']
+	vendorName = vendor=="BBL" ? "Bambu Lab" : vendor=="Custom" ? "Generic Printer" : vendor;
+
+	let modelName = OneModel['name'];
+	// Most of it unneeded. this can be applied in profiles
+	if( vendor=="Custom")					
+	modelName = modelName.split(" ")[1];
+	// these uses different case in name; seckit, ratrig, blocks
+	else if (modelName.toLowerCase().startsWith(vendorName.toLowerCase()))  
+	modelName = modelName.slice(vendorName.length);
+	// these not matches. have to fix in profiles to reduce conditions in here;
+	else if (vendor == "MagicMaker" && modelName.startsWith("MM"))
+	modelName = modelName.slice(("MM").length);
+	else if (vendor == "OrcaArena")
+	modelName = modelName.slice(("Orca Arena").length);
+	else if (vendor == "RolohaunDesign" && modelName.startsWith("Rolohaun"))
+	modelName = modelName.slice(("Rolohaun").length);
+
+	return '<div class="PrinterBlock" onClick="ChooseModel(\''+vendor+'\',\''+OneModel['model']+'\')">'+
+	'<div class="PImg">'+
+	'<img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
+	'</div>'+
+	'<div style="display: flex;">'+
+	'	<div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
+	'	<div class="PName"><p>'+ vendorName +'</p><p>' + modelName +'</p></div>'+
+	'</div>'+
+	'</div>';
+}
+
+function SelectPrinterAll( sVendor )
+{
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, true);
+	});
+}
+
+
+function SelectPrinterNone( sVendor )
+{
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").removeClass('ModelCheckBoxSelected');
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, false);
+	});
+}
+
+function OnExitFilter() {
+
+	let nTotal = 0;
+	let ModelAll = {};
+	for (vendor in ModelNozzleSelected) {
+		for (model in ModelNozzleSelected[vendor]) {
+			if (!ModelNozzleSelected[vendor][model])
+				continue;
+
+			if (!ModelAll.hasOwnProperty(model)) {
+				//alert("ADD: "+strModel);
+
+				ModelAll[model] = {};
+
+				ModelAll[model]["model"] = model;
+			}
+
+			nTotal++;
+		}
+	}
+
+	var tSend = {};
+	tSend['sequence_id'] = Math.round(new Date() / 1000);
+	tSend['command'] = "save_userguide_models";
+	tSend['data'] = ModelAll;
+
+	SendWXMessage(JSON.stringify(tSend));
+
+	return nTotal;
+
+}
+
+//
+function OnExit()
+{	
+	let ModelAll={};
+	
+	let ModelSelect=$(".ModelCheckBoxSelected");
+	let nTotal=ModelSelect.length;
+
+	if( nTotal==0 )
+	{
+		ShowNotice(1);
+		
+		return 0;
+	}
+	
+	for(let n=0;n<nTotal;n++)
+	{
+	    let OneItem=ModelSelect[n];
+		
+		let strModel=OneItem.getAttribute("model");
+			
+		//alert(strModel+strVendor+strNozzel);
+		
+		if(!ModelAll.hasOwnProperty(strModel))
+		{
+			//alert("ADD: "+strModel);
+			
+			ModelAll[strModel]={};
+		
+			ModelAll[strModel]["model"]=strModel;
+		}
+	}
+		
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="save_userguide_models";
+	tSend['data']=ModelAll;
+	
+	SendWXMessage( JSON.stringify(tSend) );
+
+    return nTotal;
+}
+
+
+function ShowNotice( nShow )
+{
+	if(nShow==0)
+	{
+		$("#NoticeMask").hide();
+		$("#NoticeBody").hide();
+	}
+	else
+	{
+		$("#NoticeMask").show();
+		$("#NoticeBody").show();
+	}
+}
+
+function CancelSelect()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="user_guide_cancel";
+	tSend['data']={};
+		
+	SendWXMessage( JSON.stringify(tSend) );			
+}
+
+
+function ConfirmSelect()
+{
+	let nChoose=OnExitFilter();
+	
+	if(nChoose>0)
+    {
+		var tSend={};
+		tSend['sequence_id']=Math.round(new Date() / 1000);
+		tSend['command']="user_guide_finish";
+		tSend['data']={};
+		tSend['data']['action']="finish";
+		
+		SendWXMessage( JSON.stringify(tSend) );			
+	}
+}
+
+
+
+
--- a/resources/web/guide/24/index.html
+++ b/resources/web/guide/24/index.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P21</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />
+<link rel="stylesheet" type="text/css" href="24.css" />
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />	
+<!-- <script type="text/javascript" src="test.js"></script> -->
+<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<!-- <script type="text/javascript" src="../js/common.js"></script> -->
+<script type="text/javascript" src="24.js"></script>		
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t10">Printer Selection</div>
+</div>
+<div class="wrap">
+	<div class="search">
+		<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
+		<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
+			<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
+			<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
+		</svg>
+	</div>
+</div>
+<div id="Content"  class="ZScrol"s>
+
+<!--<div class="OneVendorBlock" Vendor="BBL">	
+<div class="BlockBanner">
+	<div class="BannerBtns">
+		<div class="ButtonStyleConfirm ButtonTypeWindow" onClick="SelectPrinterAll('BBL')">所有</div>
+		<div class="ButtonStyleRegular ButtonTypeWindow" onClick="SelectPrinterNone('BBL')">无</div>
+	</div>
+	
+	<a>BBL-3DP</a>	
+</div>
+	
+<div class="PrinterArea">	
+	
+<div class="PrinterBlock">
+	<div class="PImg"><img src="p2.jpg"  /></div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
+</div>
+<div class="PrinterBlock">
+	<div class="PImg"><img src="p1.jpg"  /></div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BBL" />0.2mm nozzle</div>
+	<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
+</div>
+	
+</div>		
+
+</div>
+	
+
+<div class="OneVendorBlock" Vendor="BAMBU">	
+<div class="BlockBanner">
+	<div class="BannerBtns">
+		<div class="Banner-Btn-green" onClick="SelectPrinterAll('BAMBU')">所有</div>
+		<div class="Banner-Btn" onClick="SelectPrinterNone('BAMBU')">无</div>
+	</div>
+	
+	<a>BBL-3DP</a>	
+</div>
+	
+<div class="PrinterArea">	
+	
+<div class="PrinterBlock">
+	<div class="PImg"><img src="p2.jpg"  /></div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
+	<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
+</div>
+<div class="PrinterBlock">
+	<div class="PImg"><img src="p1.jpg"  /></div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
+	<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BAMBU" />0.2mm nozzle</div>
+	<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
+</div>		
+</div>		
+
+</div>-->
+	
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t39" id="AcceptBtn"  onclick="ConfirmSelect()">Confirm</div>	
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t38" id="PreBtn"  onclick="CancelSelect()">Cancel</div>
+</div>
+	
+<div id="NoticeMask"></div>
+<div id="NoticeBody">
+	<div id="NoticeBar" class="trans" tid="t18">error</div>
+	<div id="NoticeContent">
+	<div id="NoticeText" class="trans" tid="t37">At least one printer must be selected.</div>
+	<div id="NoticeBtns">
+		<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t36" onClick="ShowNotice(0)">ok</div>
+	</div>
+	</div>
+</div>	
+	
+	
+</body>
+<script>
+	document.onkeydown = function (event) {
+		var e = event || window.event || arguments.callee.caller.arguments[0];
+
+		if (e.keyCode == 27)
+			ClosePage();
+
+		if (window.event) {
+			try { e.keyCode = 0; } catch (e) { }
+			e.returnValue = true;
+		}
+	};
+	let pModel = {};
+	let ModelNozzleSelected = {};
+	function textInput(obj) {
+		FilterModelList(obj.value);
+	}
+</script>
+</html>
--- a/resources/web/guide/3/3.css
+++ b/resources/web/guide/3/3.css
@@ -0,0 +1,46 @@
+.PolicyArea
+{
+	background-color: #4A4A51;	
+}
+
+#PolicyTxt
+{
+	padding: 12px;
+	word-wrap:break-word;
+	overflow-y: auto;
+	min-height: 200px;
+	text-indent: 2em;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #D7D7D7;
+}
+
+#PolicyTxt::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+}
+
+#PolicyTxt::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background-color: #AAAAAA;
+}
+
+#PolicyTxt::-webkit-scrollbar-track {/*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+	    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+        border-radius: 10px;
+        background: #EDEDED;
+}
+
+#C_List li
+{
+	margin-left: 4em;
+}
+
+p
+{ 
+	text-indent:2em;
+	margin-bottom: 2px;
+}
--- a/resources/web/guide/3/3.js
+++ b/resources/web/guide/3/3.js
@@ -0,0 +1,80 @@
+
+function OnInit()
+{
+	TranslatePage();
+	
+	SendPrivacySelect();
+}
+
+
+function SendPrivacySelect()
+{	
+	let nVal="refuse";
+	if( $('#ChoosePrivacy').is(':checked') ) 
+		nVal="agree";
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="user_private_choice";
+	tSend['data']={};
+	tSend['data']['action']=nVal;
+	
+	SendWXMessage( JSON.stringify(tSend) );	
+}
+
+
+function GotoNextPage()
+{
+	RequestProfile();	
+}
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio( pVal )
+{	
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		HandleModelInfo(pVal['response']);
+	}
+}
+
+function HandleModelInfo( pVal )
+{
+	let Modellist=pVal["model"];
+	let nModel=Modellist.length;
+	
+	if(nModel==1)
+	{
+//		let pModel=Modellist[0];
+//		
+//		var tSend={};
+//		tSend['sequence_id']=Math.round(new Date() / 1000);
+//		tSend['command']="save_userguide_models";
+//		tSend['data']={};
+//		
+//		let ModelName=pModel['model'];
+//		
+//		tSend['data'][ModelName]={};
+//		tSend['data'][ModelName]['model']=pModel['model'];
+//		tSend['data'][ModelName]['nozzle_diameter']=pModel['nozzle_diameter'];
+//		tSend['data'][ModelName]['vendor']=pModel['vendor'];
+//		
+//		SendWXMessage( JSON.stringify(tSend) );
+			
+		window.location.href="../22/index.html";
+			
+		return;
+	}
+
+	window.location.href="../21/index.html";	
+}
--- a/resources/web/guide/3/index.html
+++ b/resources/web/guide/3/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P1</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="3.css" />
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />
+<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="./3.js"></script>	
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t6">We kindly request your help to improve<br/> everyone's printing</div>
+</div>
+<div id="Content">
+	<div id="PolicyTxt" class="TextS2 TextArea1 ZScrol">
+<a class="trans" tid="t54">In the 3D Printing community, we learn from each other’s successes and failures to adjust our own slicing parameters and settings. Orca Slicer follows the same principle and uses machine learning to improve its performance from the successes and failures of the vast number of prints by our users. We are training Orca Slicer to be smarter by feeding them the real-world data. If you are willing, this service will access information from your error logs and usage logs, which may include information described in </a><a class="HyperLink trans" tid="t55" href="https://bambulab.com/policies/privacy" target="_blank">Privacy Policy</a><a class="trans" tid="t56">
+. We will not collect any Personal Data by which an individual can be identified directly or indirectly, including without limitation names, addresses, payment information, or phone numbers. By enabling this service, you agree to these terms and the statement about Privacy Policy.
+</a>
+	</div>
+<br/>	
+
+	<label> <!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
+	<input id="ChoosePrivacy" type="checkbox" onClick="SendPrivacySelect()"  onChange="SendPrivacySelect()" />
+	<span class="trans TextS1" tid="t7">Allow sending anonymous data</span>
+</label>
+</div>		
+<div id="AcceptArea">
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t8" id="PreBtn"  onclick="window.open('../11/index.html','_self')">Back</div>
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t9" id="AcceptBtn"  onclick="GotoNextPage()">Next</div>
+</div>
+</body>
+</html>
--- a/resources/web/guide/31/31.css
+++ b/resources/web/guide/31/31.css
@@ -0,0 +1,40 @@
+
+#PolicyTxt
+{
+	background-color: #EBEBEB;
+	padding: 12px;
+	word-wrap:break-word;
+	overflow-y: scroll;
+	min-height: 200px;
+	text-indent: 2em;
+}
+
+#PolicyTxt::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+}
+
+#PolicyTxt::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background-color: #AAAAAA;
+}
+
+#PolicyTxt::-webkit-scrollbar-track {/*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+	    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+        border-radius: 10px;
+        background: #EDEDED;
+}
+
+#C_List li
+{
+	margin-left: 4em;
+}
+
+p
+{ 
+	text-indent:2em;
+	margin-bottom: 2px;
+}
--- a/resources/web/guide/31/31.js
+++ b/resources/web/guide/31/31.js
@@ -0,0 +1,80 @@
+
+function OnInit()
+{
+	TranslatePage();
+	
+	SendPrivacySelect();
+}
+
+
+function SendPrivacySelect()
+{	
+	let nVal="refuse";
+	if( $('#ChoosePrivacy').is(':checked') ) 
+		nVal="agree";
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="user_private_choice";
+	tSend['data']={};
+	tSend['data']['action']=nVal;
+	
+	SendWXMessage( JSON.stringify(tSend) );	
+}
+
+
+function GotoNextPage()
+{
+	RequestProfile();	
+}
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio( pVal )
+{	
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		HandleModelInfo(pVal['response']);
+	}
+}
+
+function HandleModelInfo( pVal )
+{
+	let Modellist=pVal["model"];
+	let nModel=Modellist.length;
+	
+	if(nModel==1)
+	{
+//		let pModel=Modellist[0];
+//		
+//		var tSend={};
+//		tSend['sequence_id']=Math.round(new Date() / 1000);
+//		tSend['command']="save_userguide_models";
+//		tSend['data']={};
+//		
+//		let ModelName=pModel['model'];
+//		
+//		tSend['data'][ModelName]={};
+//		tSend['data'][ModelName]['model']=pModel['model'];
+//		tSend['data'][ModelName]['nozzle_diameter']=pModel['nozzle_diameter'];
+//		tSend['data'][ModelName]['vendor']=pModel['vendor'];
+//		
+//		SendWXMessage( JSON.stringify(tSend) );
+			
+		window.location.href="../22/index.html";
+			
+		return;
+	}
+
+	window.location.href="../21/index.html";	
+}
--- a/resources/web/guide/31/index.html
+++ b/resources/web/guide/31/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P1</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="31.css" />
+<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="./31.js"></script>	
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t6">We kindly request your help to improve<br/> everyone's printing</div>
+</div>
+<div id="Content">
+	<div id="PolicyTxt">
+<a class="trans" tid="t54">In the 3D Printing community, we learn from each other’s successes and failures to adjust our own slicing parameters and settings. Orca Slicer follows the same principle and uses machine learning to improve its performance from the successes and failures of the vast number of prints by our users. We are training Orca Slicer to be smarter by feeding them the real-world data. If you are willing, this service will access information from your error logs and usage logs, which may include information described in </a><a class="HyperLink trans" tid="t55" href="https://bambulab.com/policies/privacy" target="_blank">Privacy Policy</a><a class="trans" tid="t56">
+. We will not collect any Personal Data by which an individual can be identified directly or indirectly, including without limitation names, addresses, payment information, or phone numbers. By enabling this service, you agree to these terms and the statement about Privacy Policy.
+</a>
+	</div>
+<br/>	
+
+	<label><!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
+	<input id="ChoosePrivacy" type="checkbox" onClick="SendPrivacySelect()"  onChange="SendPrivacySelect()" />
+	<span class="trans" tid="t7">Allow sending anonymous data</span>
+</label>
+</div>		
+<div id="AcceptArea">
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t8" id="PreBtn"  onclick="window.open('../11/index.html','_self')">Back</div>
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t9" id="AcceptBtn"  onclick="GotoNextPage()">Next</div>
+</div>
+</body>
+</html>
--- a/resources/web/guide/4orca/4orca.css
+++ b/resources/web/guide/4orca/4orca.css
@@ -0,0 +1,33 @@
+
+#Content
+{
+	padding:0%  15%;
+}
+
+#FeatureText
+{
+	line-height: 30px;
+	margin-top: 10mm;
+}
+
+
+#CheckArea
+{
+	margin-top:10mm;
+	line-height: 30px;
+}
+/* ORCA brokes shape of custom css checkbox
+#StealthMode
+{
+	width: 30px;
+}
+*/
+#RestartText
+{
+	padding-left:30px;
+}
+
+.TextPoint
+{
+	font-size:14px;
+}
--- a/resources/web/guide/4orca/4orca.js
+++ b/resources/web/guide/4orca/4orca.js
@@ -0,0 +1,48 @@
+
+function OnInit()
+{
+	TranslatePage();
+	
+	SendStealthModeCheck();
+}
+
+
+
+function SendStealthModeCheck()
+{
+	let nVal="no";
+	if( $('#StealthMode').is(':checked') ) 
+		nVal="yes";
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="save_stealth_mode";
+	tSend['data']={};
+	tSend['data']['action']=nVal;
+	
+	SendWXMessage( JSON.stringify(tSend) );
+
+	return true;
+}
+
+function GotoNetPluginPage()
+{
+	let bRet=SendStealthModeCheck();
+	
+	if(bRet)
+		window.location.href="../5/index.html";
+}
+
+
+function FinishGuide()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="user_guide_finish";
+	tSend['data']={};
+	tSend['data']['action']="finish";
+	
+	SendWXMessage( JSON.stringify(tSend) );	
+	
+	//window.location.href="../6/index.html";
+}
--- a/resources/web/guide/4orca/index.html
+++ b/resources/web/guide/4orca/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P1</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />		
+<link rel="stylesheet" type="text/css" href="4orca.css" />
+<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="4orca.js"></script>	
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="orca3">Stealth Mode</div>
+</div>
+<div id="Content">
+
+    <div id="FeatureText">
+		<div><a tid="orca4" class="trans TextS1">This stops the transmission of data to Bambu's cloud services. Users who don't use BBL machines or use LAN mode only can safely turn on this function.</a></div>
+    </div>
+	
+	
+	<!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
+	<label id="CheckArea"><input id="StealthMode" onClick="SendStealthModeCheck()" type="checkbox"><a tid="orca5" class="trans TextS1">Enable Stealth Mode.</a></label>
+	<div id="RestartText" tid="t70" class="trans" ></div>
+	
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t8" id="PreBtn"  onclick="window.history.back()">Back</div>
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t9" id="GotoNetPluginBtn"  onclick="GotoNetPluginPage()">Next</div>	
+</div>	
+</body>
+</html>
--- a/resources/web/guide/5/5.css
+++ b/resources/web/guide/5/5.css
@@ -0,0 +1,34 @@
+
+#Content
+{
+	padding:0%  15%;
+}
+
+#FeatureText
+{
+	line-height: 30px;
+	margin-top: 10mm;
+}
+
+
+#CheckArea
+{
+	margin-top:10mm;
+	line-height: 30px;
+}
+/* ORCA brokes shape of custom css checkbox
+#InstallCheck
+{
+	width: 30px;
+}
+*/
+
+#RestartText
+{
+	padding-left:30px;
+}
+
+.TextPoint
+{
+	font-size:14px;
+}
--- a/resources/web/guide/5/5.js
+++ b/resources/web/guide/5/5.js
@@ -0,0 +1,39 @@
+
+function OnInit()
+{
+	TranslatePage();
+	
+	SendInstallPluginCheck();
+}
+
+
+
+function SendInstallPluginCheck()
+{
+	let nVal="no";
+	if( $('#InstallCheck').is(':checked') ) 
+		nVal="yes";
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="network_plugin_install";
+	tSend['data']={};
+	tSend['data']['action']=nVal;
+	
+	SendWXMessage( JSON.stringify(tSend) );		
+}
+
+
+
+function FinishGuide()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="user_guide_finish";
+	tSend['data']={};
+	tSend['data']['action']="finish";
+	
+	SendWXMessage( JSON.stringify(tSend) );	
+	
+	//window.location.href="../6/index.html";
+}
--- a/resources/web/guide/5/index.html
+++ b/resources/web/guide/5/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P1</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />		
+<link rel="stylesheet" type="text/css" href="5.css" />
+<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="5.js"></script>	
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t64">Proprietary Plugins</div>
+</div>
+<div id="Content">
+
+    <div id="FeatureText">
+		<div><a tid="t75" class="trans TextS1">Some printer vendors require proprietary plugins for communication with their printers. Please select the corresponding plugin if you use such printers.</a></div>
+		<div><a tid="t65" class="trans TextS1">Please be aware that these plugins are not developed or maintained by OrcaSlicer. They should be used at your own discretion and risk.</a></div>
+
+		<!-- <div><span class="TextPoint">●</span>&nbsp;&nbsp;<a tid="t65" class="trans" ></a></div>
+	    <div><span class="TextPoint">●</span>&nbsp;&nbsp;<a tid="t66" class="trans" ></a></div>
+        <div><span class="TextPoint">●</span>&nbsp;&nbsp;<a tid="t67" class="trans" ></a></div>
+		<div><span class="TextPoint">●</span>&nbsp;&nbsp;<a tid="t68" class="trans" ></a></div> -->
+    </div>
+	
+	
+	<!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
+	<label id="CheckArea"><input id="InstallCheck" onClick="SendInstallPluginCheck()" type="checkbox"><a tid="t69" class="trans TextS1">Install Bambu Network Plug-in. </a></label>
+	<div id="RestartText" tid="t70" class="trans" ></div>
+	
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t8" id="PreBtn"  onclick="window.history.back()">Back</div>
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t25" id="AcceptBtn"  onclick="FinishGuide()">Finish</div>
+</div>	
+</body>
+</html>
--- a/resources/web/guide/6/6.css
+++ b/resources/web/guide/6/6.css
@@ -0,0 +1,138 @@
+*
+{
+	padding: 0;
+	border: 0;
+	margin: 0;		
+    font-family: "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans;	
+}
+
+html,body
+{
+	font-size: 14px;
+	height:100%;
+}
+
+.LinkBtn
+{
+	color: #1200FF;	
+	cursor: pointer;
+}
+
+.LinkBtn:hover
+{
+	text-decoration:underline;
+}
+
+.Btn_Green
+{
+	padding: 1.5mm 6mm;
+	font-size: 14px;
+	text-align: center;
+	background-color: #009688;
+	border-radius: 6px;
+	color: #fff;
+	cursor: pointer;
+	display: inline-block;	
+	border: 1px solid #02c7b3;
+}
+
+.Btn_Green:hover
+{
+	background-color:#4db6ac;
+
+}
+
+
+#DownBlock
+{
+	height: 60%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+#DownArea
+{
+	width:80%;
+	height: 50%;
+	line-height: 50px;
+	display: inline;
+}
+
+#DownText
+{
+	display: flex;
+	align-items: center;
+}
+
+#RetryBtn
+{
+	background-image:url("restart.png");
+	background-size: 100%  100%;
+	width: 20px;
+	height: 20px;
+	margin-left: 20px;
+	display: none;
+}
+
+
+#DownPercent
+{
+	height:20px;
+}
+
+#PercentBkg
+{
+	height:20px;
+	background-color:#CFCFCF;
+	border-radius: 20px;	
+}
+
+#PercentTip
+{
+	float: left;
+	height:20px;
+	width: 0%;
+	background-color:#009688;
+	border-radius: 20px;		
+}
+
+#DownSuccessTip
+{
+	width:80%;
+	display: none;
+	text-align: center;
+}
+
+#InstallFailedTip
+{
+	display:none;
+	height: auto;
+}
+
+
+/*------Btn Area------*/
+
+#BtnBlock
+{
+	height:40%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#CancelBtn
+{
+	display: inline;
+}
+
+#RestartBtn
+{
+	display: none;
+}
+
+#CloseBtn
+{
+	display: none;
+}
--- a/resources/web/guide/6/6.js
+++ b/resources/web/guide/6/6.js
@@ -0,0 +1,167 @@
+
+
+function OnInit()
+{
+	//let strInput=JSON.stringify(cData);
+	//HandleStudio(strInput);
+	
+//	let tVal={};
+//	tVal['status']=3;
+//	tVal['percent']=30;
+//	
+//	HandStatusPercent(tVal);
+	
+	TranslatePage();
+	SendDownloadCmd();
+}
+
+function SendDownloadCmd()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="Begin_Download_network_plugin";
+	
+	SendWXMessage( JSON.stringify(tSend) );		
+}
+
+
+function HandleStudio( pVal )
+{
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='ShowStatusPercent')
+	{
+		HandStatusPercent(pVal['data']);
+	}
+}
+
+
+function HandStatusPercent( pVal )
+{
+	let nStatus=pVal['status']*1;
+	let nPercent=pVal['percent'];
+	
+	if(nStatus==0)
+	{
+		//正常下载
+		$('#DownStepText').attr("tid","t71");
+		$('#RetryBtn').hide();
+		
+		$('#PercentTip').css("width",nPercent+'%');
+	}
+	else if(nStatus==1)
+	{
+		//下载失败 或 解压缩补丁包失败
+		$('#DownStepText').attr("tid","t72");
+		$('#PercentTip').css("width",0+'%');
+		$('#RetryBtn').show();
+	}
+	else if(nStatus==2)
+	{
+		//下载完成
+		$('#PercentTip').css("width",100+'%');
+		
+		setTimeout("SendInstallPluginCmd()",100);
+	}
+	else if(nStatus==3)
+	{
+		//解压缩补丁包失败
+		$('#DownArea').hide();
+		$("#InstallFailedTip").show();
+		
+		$('#CancelBtn').hide();
+		$('#RestartBtn').hide();
+		$('#CloseBtn').show();		
+	}
+	else if(nStatus==4)
+	{
+		//安装补丁包完成
+		$('#DownArea').hide();
+		$('#DownSuccessTip').show();
+		
+		$('#CancelBtn').hide();
+		$('#CloseBtn').hide();	
+		$('#RestartBtn').show();
+		
+		//pTimer=setInterval("RunInverse()",1000);
+	}
+	
+	TranslatePage();
+}
+
+var nCount=3;
+var pTimer=null;
+function RunInverse()
+{
+	$('#CountNumber').text(nCount+'');
+	nCount--;
+	
+	if(nCount==-1)
+	{
+		RestartBambuStudio();
+	}
+	
+}
+
+function RetryDownload()
+{
+	$('#DownStepText').attr("tid","t71");	
+	$('#PercentTip').css("width",0+'%');
+	SendDownloadCmd();
+}
+
+
+function CancelDownload()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="netplugin_download_cancel";
+	
+	SendWXMessage( JSON.stringify(tSend) );		
+	
+}
+
+function SendInstallPluginCmd()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="begin_install_plugin";
+	
+	SendWXMessage( JSON.stringify(tSend) );			
+}
+
+
+
+function RestartBambuStudio()
+{
+	if( pTimer!=null )
+	{
+		clearInterval(pTimer);
+		pTimer=null;
+	}
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="restart_studio";
+	
+	SendWXMessage( JSON.stringify(tSend) );	
+}
+
+function CloseDownDialog()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="close_download_dialog";
+	
+	SendWXMessage( JSON.stringify(tSend) );		
+}
+
+function OpenPluginFolder()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="open_plugin_folder";
+	
+	SendWXMessage( JSON.stringify(tSend) );		
+}
--- a/resources/web/guide/6/index.html
+++ b/resources/web/guide/6/index.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P1</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="6.css" />
+<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="6.js"></script>	
+</head>
+<body onLoad="OnInit()">
+	
+<div id="DownBlock">
+	<div id="DownArea">
+	<div id="DownText">
+	    <div id="DownStepText" class="trans" tid="t71">Downloading</div>
+		<div id="RetryBtn" onClick="RetryDownload()"></div>
+    </div>
+	<div>
+		<div id="PercentTip"></div>
+		<div id="PercentBkg"></div>
+	</div>
+	</div>
+	
+	<div id="DownSuccessTip" class="trans" tid="t73">Installation successful.</div>
+	
+	<div id="InstallFailedTip">
+	    <div><a class="trans" tid="t79">Failed to install plug-in. </a><a class="trans" tid="t80">Try the following steps:</a></div>
+	    <div><a class="trans" tid="t81">1, Click </a><a class="trans LinkBtn" tid="t77" onClick="OpenPluginFolder()">here</a><a class="trans" tid="t82"> to open the plug-in directory</a> </div>
+		<div class="trans" tid="t83">2, Close all open Orca Slicer</div>
+		<div class="trans" tid="t84">3, Delete all files under the plug-in directory</div>
+		<div class="trans" tid="t85">4, Reopen Orca Slicer and install the plug-in again</div>
+	</div>
+	
+	
+</div>
+	
+<div id="BtnBlock">
+	<div id="CancelBtn"  class="ButtonStyleRegular ButtonTypeChoice trans" tid="t38" onClick="CancelDownload()"    >Cancel</div>
+	<div id="RestartBtn" class="ButtonStyleRegular ButtonTypeChoice trans" tid="t25" onClick="RestartBambuStudio()">Finish</div>
+	<div id="CloseBtn"   class="ButtonStyleRegular ButtonTypeChoice trans" tid="t86" onClick="CloseDownDialog()"   >Close </div>
+</div>
+</body>
+</html>
--- a/resources/web/guide/6/restart.png
+++ b/resources/web/guide/6/restart.png
--- a/resources/web/guide/css/common.css
+++ b/resources/web/guide/css/common.css
@@ -0,0 +1,175 @@
+*
+{
+	padding: 0;
+	border: 0;
+	margin: 0;		
+    font-family: "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+html
+{
+	height:100%;
+	background-color: #626262;
+}
+
+body
+{
+	height:100%;
+	max-height: 660px;
+	max-width: 820px;
+	padding: 0;
+	border: 0;
+	margin: 0;	
+	overflow: hidden;
+	background-color: #fff;
+	font-size: 14px;
+	line-height: 22px;
+}
+
+.TextPoint
+{
+	font-size:1px;
+}
+
+.ZScrol::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 12px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 12px;
+	padding: 2px;
+}
+
+.ZScrol::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 6px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background-color: #AAAAAA;
+}
+
+.ZScrol::-webkit-scrollbar-track {/*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+	    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+        border-radius: 10px;
+        background: #EDEDED;
+}
+
+/*----Three Part----*/
+body
+{
+	display:flex;
+	flex-direction: column;
+}
+
+
+#Title
+{
+	height: 12%;
+	display: flex;
+	text-align: center;
+	flex-direction:column;
+	justify-content: center;
+}
+
+#Title div
+{
+	font-size:28px;
+	line-height: 28px;
+	color: #009688;
+	padding: 0px 10mm;
+}
+
+
+#Content
+{
+	height: 76%;
+	padding: 20px 40px;
+	overflow-x: hidden;
+	overflow-y: auto;
+	text-align: left;
+	font-size: 14px;
+	line-height: 22px;
+	color: #464646;
+	position: relative;
+	display:flex;
+	flex-direction: column;		
+}
+
+#Content div
+{
+
+}
+
+
+#AcceptArea
+{
+	height:var(--dialog-button-sizer-height); /*----ORCA Use fixed size to prevent position change----*/
+	max-height:var(--dialog-button-sizer-height);
+	min-height:var(--dialog-button-sizer-height);
+	padding: 0 var(--dialog-button-gap);
+	text-align: left;
+	display: flex;
+	justify-content:flex-end;
+	align-items: center;	
+}
+
+/*---HyperLink---*/
+.HyperLink
+{
+	color: #009688;
+	text-decoration: underline;
+    font-weight: 700;
+	cursor: pointer;
+}
+
+/*---Checkboxes ORCA ---*/
+label:has(input[type="checkbox"]){
+	margin:0;
+	padding: 0;
+	margin-right: 20px;
+}
+
+label:has(input[type="checkbox"])>span{
+	vertical-align: middle;
+	line-height: 1.2em;
+	margin:0;
+}
+
+input[type="checkbox"] {
+	-webkit-appearance: none;
+	appearance: none;
+	background-color:#FFFFFF;
+	margin:0;
+	margin-right: 6px;
+	width: 1em;
+	height: 1em;
+	border: 0.1em solid #DBDBDB;
+	border-radius: 0.15em;
+	display: inline-flex;
+	place-content: center;
+	background-color:#FFFFFF;
+}
+
+input[type="checkbox"]::before {
+	content: "";
+	width: 0.8em;
+	height: 0.8em;
+	transform: scale(0);
+	box-shadow: inset 1em 1em #FFFFFF;
+	clip-path: polygon(7% 37%, 0 45%, 33% 78%, 100% 30%, 95% 21%, 33% 64%);
+}
+
+input[type="checkbox"]:checked {
+	border-color:#009688;
+	background-color:#009688;
+}
+
+input[type="checkbox"]:checked::before {
+    transform: scale(1);
+}
+
+/*----------------Light Mode-------------------*/
+
+
+
+
+
--- a/resources/web/guide/css/dark.css
+++ b/resources/web/guide/css/dark.css
@@ -0,0 +1,75 @@
+*
+{
+	color: #efeff0;
+	border-color: #B9B9BC;
+}
+
+body
+{
+	background-color:#2D2D31; /* ORCA match background color */
+	color: #efeff0;
+}
+
+.ZScrol::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    background-color: #939594;
+}
+
+.ZScrol::-webkit-scrollbar-track {/*滚动条里面轨道*/
+        background: #161817;
+}
+
+#Title div
+{
+	color: #009688;
+}
+
+.search>input[type=text]{
+	background-color:#2D2D31;
+}
+
+/*---Checkboxes ORCA---*/
+input[type=checkbox]{
+	background-color:#2D2D31;
+	border-color:#4A4A51;
+}
+
+input[type=checkbox]:checked{
+	background-color:#009688;
+}
+
+/*-------Text------*/
+
+.TextS1
+{
+
+}
+
+.TextS2
+{
+	color:#B9B9BC;
+}
+
+/*---Policy---*/
+.TextArea1
+{
+	background-color: #4A4A51;
+	color: #BEBEC0;
+}
+
+/*----Region---*/
+.RegionItem:hover
+{
+	background-color:#4C4C55;
+}
+
+.RegionSelected:hover
+{
+	background-color:#009688;
+	color: #fff;	
+}
+
+/*----Menu----*/
+#Title div.TitleUnselected
+{
+	color: #BEBEC0;
+}
--- a/resources/web/guide/css/home.css
+++ b/resources/web/guide/css/home.css
@@ -0,0 +1,35 @@
+#FullArea
+{
+	height:100%;
+}
+
+
+#LoadProgress
+{
+	position:fixed;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 3mm;
+	display: none;
+}
+
+#PercentTip
+{
+	width:70%;
+	height: 100%;
+	background-color: #335DFC;
+}
+
+
+#PageArea
+{
+	width:100%;
+	height: 100%;
+}
+
+#IEPage
+{
+	height:100%;
+	width: 100%;
+}
--- a/resources/web/guide/css/test.css
+++ b/resources/web/guide/css/test.css
@@ -0,0 +1,58 @@
+*
+{
+	padding: 0;
+	border: 0;
+	margin: 0;
+}
+
+
+html,body
+{
+	height:100%;
+	padding: 0;
+	border: 0;
+	margin: 0;	
+	overflow: hidden;
+	background-color: #fff;
+}
+
+#PageArea
+{
+	height:100%;
+	width: 100%;
+}
+
+.swiper {
+    height: 100%;
+	top: 0px;
+	left: 0px;
+	bottom: 35px;
+}
+
+.swiper-slide {
+	font-size: 18px;
+    height: 100%;
+	width: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.swiper-slide iframe
+{
+	width:100%;
+	height: 100%;
+	overflow-y: hidden;
+}
+
+.CBtn
+{
+	padding: 3mm 100m;
+	background-color: #77EFF9;
+	display: inline-block;
+	height: 30px;
+	width: 150px;
+	text-align: center;
+	z-index: 99;
+	position: absolute;
+	top:30px;
+}
--- a/resources/web/guide/img/emptycheck.svg
+++ b/resources/web/guide/img/emptycheck.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><rect x="0.5" y="1.5" width="14" height="14" rx="1" style="fill:none;stroke:#949494;stroke-miterlimit:10;opacity:1"/></svg>
--- a/resources/web/guide/img/greencheck.svg
+++ b/resources/web/guide/img/greencheck.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><rect x="0" y="1" width="15" height="15" rx="1.5" style="fill:#009688"/><polyline points="12.5 6.5 5.5 11.5 2.5 7.5" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round"/></svg>
--- a/resources/web/guide/index.html
+++ b/resources/web/guide/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>Slicer新手引导</title>
+<link rel="stylesheet" type="text/css" href="./css/common.css" />
+<link rel="stylesheet" type="text/css" href="./css/home.css" />	
+<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
+</head>
+<body onLoad="OnInit()">
+<div id="LoadProgress">
+	<div id="PercentTip"></div>
+</div>
+
+<div id="PageArea">
+	<iframe id="IEPage" src="1/index.html"></iframe>	
+</div>	
+</body>
+</html>
--- a/resources/web/guide/js/common.js
+++ b/resources/web/guide/js/common.js
@@ -0,0 +1,21 @@
+function ClosePage() {
+	var tSend = {};
+	tSend['sequence_id'] = Math.round(new Date() / 1000);
+	tSend['command'] = "close_page";
+	SendWXMessage(JSON.stringify(tSend));
+}
+
+document.onkeydown = function (event) {
+    var e = event || window.event || arguments.callee.caller.arguments[0];
+
+    if (window.event) {
+        try { e.keyCode = 0; } catch (e) { }
+        e.returnValue = false;
+    }
+};
+
+window.addEventListener('wheel', function (event) {
+    if (event.ctrlKey === true || event.metaKey) {
+        event.preventDefault();
+    }
+}, { passive: false });
--- a/resources/web/guide/js/globalapi.js
+++ b/resources/web/guide/js/globalapi.js
@@ -0,0 +1,339 @@
+
+/*------------------ Date Function ------------------------*/
+function GetFullToday( )
+{
+	var d=new Date();
+	
+	var nday=d.getDate();
+	var nmonth=d.getMonth()+1;
+	var nyear=d.getFullYear();
+	
+	var strM=nmonth+'';
+	if( nmonth<10 )
+		strM='0'+nmonth;
+
+    var strD=nday+'';
+    if( nday<10 )
+	    strD='0'+nday;
+		
+	return nyear+'-'+strM+'-'+strD;
+}
+
+function GetFullDate()
+{
+	var d=new Date();
+	
+	var tDate={};
+	
+	tDate.nyear=d.getFullYear();
+	tDate.nmonth=d.getMonth()+1;
+	tDate.nday=d.getDate();
+	
+	tDate.nhour=d.getHours();
+	tDate.nminute=d.getMinutes();
+	tDate.nsecond=d.getSeconds();	
+	
+	tDate.nweek=d.getDay();
+	tDate.ndate=d.getDate();
+	
+	var strM=tDate.nmonth+'';
+	if( tDate.nmonth<10 )
+		strM='0'+tDate.nmonth;
+
+    var strD=tDate.nday+'';
+    if( tDate.nday<10 )
+	    strD='0'+tDate.nday;
+	
+	var strH=tDate.nhour+'';
+	if( tDate.nhour<10 )
+		strH='0'+tDate.nhour;
+
+	var strMin=tDate.nminute+'';
+	if( tDate.nminute<10 )
+		strMin='0'+tDate.nminute;
+
+	var strS=tDate.nsecond+'';
+	if( tDate.nsecond<10 )
+		strS='0'+tDate.nsecond;					
+	
+	tDate.strdate=tDate.nyear+'-'+strM+'-'+strD;
+	tDate.strFulldate=tDate.strdate+' '+strH+':'+strMin+':'+strS;
+	
+	return tDate;
+}
+
+
+function Unixtimestamp2Date( nSecond )
+{
+	var d=new Date(nSecond*1000);
+	
+	var tDate={};
+	
+	tDate.nyear=d.getFullYear();
+	tDate.nmonth=d.getMonth()+1;
+	tDate.nday=d.getDate();
+	
+	tDate.nhour=d.getHours();
+	tDate.nminute=d.getMinutes();
+	tDate.nsecond=d.getSeconds();	
+	
+	tDate.nweek=d.getDay();
+	tDate.ndate=d.getDate();
+	
+	var strM=tDate.nmonth+'';
+	if( tDate.nmonth<10 )
+		strM='0'+tDate.nmonth;
+
+    var strD=tDate.nday+'';
+    if( tDate.nday<10 )
+	    strD='0'+tDate.nday;
+				
+	tDate.strdate=tDate.nyear+'-'+strM+'-'+strD;
+	
+	return tDate.strdate;
+}
+
+
+//------------Array Function-------------
+Array.prototype.in_array = function (e) {
+    let sArray= ',' + this.join(this.S) + ',';
+	let skey=','+e+',';
+	
+	if(sArray.indexOf(skey)>=0)
+		return true;
+	else
+		return false;
+ }
+
+
+
+//------------String Function------------------
+/**
+* Delete Left/Right Side Blank
+*/
+String.prototype.trim=function()
+{
+     return this.replace(/(^\s*)|(\s*$)/g, '');
+}
+/**
+* Delete Left Side Blank
+*/
+String.prototype.ltrim=function()
+{
+     return this.replace(/(^\s*)/g,'');
+}
+/**
+* Delete Right Side Blank
+*/
+String.prototype.rtrim=function()
+{
+     return this.replace(/(\s*$)/g,'');
+}
+
+
+//----------------Get Param-------------
+function GetQueryString(name) 
+{
+	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
+    var r = window.location.search.substr(1).match(reg); 
+    if (r!=null)
+	{
+		return unescape(r[2]);
+	}
+    else
+	{
+		return null; 
+    }
+} 
+
+function GetGetStr()
+{
+	let strGet="";
+	
+	//获取当前URL
+    let url = document.location.href;
+
+    //获取?的位置
+    let index = url.indexOf("?")
+    if(index != -1) {
+        //截取出?后面的字符串
+        strGet = url.substr(index + 1);	
+	}
+	
+	return strGet;
+}
+
+
+/*--------------------JSON  Function------------*/
+
+/*
+功能：检查一个字符串是不是标准的JSON格式
+参数： strJson          被检查的字符串
+返回值： 如果字符串是一个标准的JSON格式，则返回JSON对象
+        如果字符串不是标准JSON格式，则返回null
+*/
+function IsJson( strJson )
+{
+	var tJson=null;
+	try
+	{
+		tJson=JSON.parse(strJson);
+	}
+	catch(exception)
+	{
+	    return null;
+	}	
+	
+	return tJson;
+}
+
+/*-----------------------Ajax Function--------------------*/
+/*对JQuery的Ajax函数的封装，只支持异步
+参数说明：
+    url      目标地址
+	action   post/get
+	data     字符串格式的发送内容
+	asyn     true---异步模式;false-----同步模式;
+*/
+function HttpReq( url,action, data,callbackfunc)
+{
+	var strAction=action.toLowerCase();
+	
+	if( strAction=="post")
+	{
+		$.post(url,data,callbackfunc);			
+	}
+	else if( strAction=="get")
+    {
+		$.get(url,callbackfunc);
+	}
+}
+
+/*---------------Cookie Function-------------------*/ 
+function setCookie(name, value, time='',path='') {
+    if(time && path){
+        var strsec = time * 1000;
+        var exp = new Date();
+        exp.setTime(exp.getTime() + strsec * 1);
+        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path="+path;
+    }else if(time){
+        var strsec = time * 1000;
+        var exp = new Date();
+        exp.setTime(exp.getTime() + strsec * 1);
+        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
+    }else if(path){
+        document.cookie = name + "=" + escape(value) + ";path="+path;
+    }else{
+        document.cookie = name + "=" + escape(value);
+    }
+}
+
+function getCookie(c_name) 
+{
+	if(document.cookie.length > 0) {
+		c_start = document.cookie.indexOf(c_name + "=");//获取字符串的起点
+	    if(c_start != -1) {
+			c_start = c_start + c_name.length + 1;//获取值的起点
+			c_end = document.cookie.indexOf(";", c_start);//获取结尾处
+			if(c_end == -1) c_end = document.cookie.length;//如果是最后一个，结尾就是cookie字符串的结尾
+			return decodeURI(document.cookie.substring(c_start, c_end));//截取字符串返回
+	    }
+	}
+	
+	return "";
+}
+
+function checkCookie(c_name) {     
+    username = getCookie(c_name);     
+    console.log(username);     
+    if (username != null && username != "")     
+    { return true; }     
+    else     
+    { return false;  }
+}
+
+function clearCookie(name) {     
+    setCookie(name, "", -1); 
+}
+
+
+/*--------Studio WX Message-------*/
+function IsInSlicer()
+{
+	let bMatch=navigator.userAgent.match(  RegExp('BBL-Slicer','i') );
+	
+	return bMatch;
+}
+
+
+
+function SendWXMessage( strMsg )
+{
+	let bCheck=IsInSlicer();
+	
+	if(bCheck!=null)
+	{
+		window.wx.postMessage(strMsg);
+	}
+}
+
+/*------CSS Link Control----*/
+function RemoveCssLink( LinkPath )
+{
+	let pNow=$("head link[href='"+LinkPath+"']");
+	
+	let nTotal=pNow.length;
+    for( let n=0;n<nTotal;n++ )
+	{
+		pNow[n].remove();
+	}	
+}
+
+function AddCssLink( LinkPath )
+{	
+	var head = document.getElementsByTagName('head')[0];
+	var link = document.createElement('link');
+	link.href = LinkPath;
+	link.rel = 'stylesheet';
+	link.type = 'text/css';
+	head.appendChild(link);
+}
+
+function CheckCssLinkExist( LinkPath )
+{
+	let pNow=$("head link[href='"+LinkPath+"']");
+	let nTotal=pNow.length;
+	
+	return nTotal;
+}
+
+
+/*------Dark Mode------*/
+
+function SwitchDarkMode( DarkCssPath )
+{		
+	ExecuteDarkMode( DarkCssPath );
+    setInterval("ExecuteDarkMode('"+DarkCssPath+"')",1000);	
+}
+
+function ExecuteDarkMode( DarkCssPath )
+{
+    let nMode=0;
+	let bDarkMode=navigator.userAgent.match(  RegExp('dark','i') );	
+	if( bDarkMode!=null )
+		nMode=1;
+	
+	let nNow=CheckCssLinkExist(DarkCssPath);
+	if( nMode==0 )
+	{
+		if(nNow>0)
+			RemoveCssLink(DarkCssPath);
+	}
+	else
+	{
+		if(nNow==0)
+			AddCssLink(DarkCssPath);
+	}	
+}
+
+SwitchDarkMode( "../css/dark.css" );
--- a/resources/web/guide/js/home.js
+++ b/resources/web/guide/js/home.js
@@ -0,0 +1,12 @@
+
+
+
+function NextSlide()
+{
+	$('.swiper-button-next').click();
+}
+
+function PreSlide()
+{
+	$('.swiper-button-prev').click();
+}
--- a/resources/web/guide/js/jquery-2.1.1.min.js
+++ b/resources/web/guide/js/jquery-2.1.1.min.js
--- a/resources/web/guide/js/jquery-3.6.0.min.js
+++ b/resources/web/guide/js/jquery-3.6.0.min.js
--- a/resources/web/guide/js/json2.js
+++ b/resources/web/guide/js/json2.js
@@ -0,0 +1,185 @@
+var JSON;
+if (!JSON) {
+    JSON = {};
+}
+(function () {
+    'use strict';
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10 ? '0' + n : n;
+    }
+    if (typeof Date.prototype.toJSON !== 'function') {
+        Date.prototype.toJSON = function (key) {
+
+            return isFinite(this.valueOf())
+                ? this.getUTCFullYear()     + '-' +
+                    f(this.getUTCMonth() + 1) + '-' +
+                    f(this.getUTCDate())      + 'T' +
+                    f(this.getUTCHours())     + ':' +
+                    f(this.getUTCMinutes())   + ':' +
+                    f(this.getUTCSeconds())   + 'Z'
+                : null;
+        };
+
+        String.prototype.toJSON      =
+            Number.prototype.toJSON  =
+            Boolean.prototype.toJSON = function (key) {
+                return this.valueOf();
+            };
+    }
+    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        gap,
+        indent,
+        meta = {    // table of character substitutions
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        rep;
+    function quote(string) {
+        escapable.lastIndex = 0;
+        return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
+            var c = meta[a];
+            return typeof c === 'string'
+                ? c
+                : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+        }) + '"' : '"' + string + '"';
+    }
+    function str(key, holder) {
+       var i,          // The loop counter.
+            k,          // The member key.
+            v,          // The member value.
+            length,
+            mind = gap,
+            partial,
+            value = holder[key];
+       if (value && typeof value === 'object' &&
+                typeof value.toJSON === 'function') {
+            value = value.toJSON(key);
+        }
+        if (typeof rep === 'function') {
+            value = rep.call(holder, key, value);
+        }
+       switch (typeof value) {
+        case 'string':
+            return quote(value);
+        case 'number':
+            return isFinite(value) ? String(value) : 'null';
+        case 'boolean':
+        case 'null':
+            return String(value);
+       case 'object':
+            if (!value) {
+                return 'null';
+            }
+           gap += indent;
+            partial = [];
+            if (Object.prototype.toString.apply(value) === '[object Array]') {
+               length = value.length;
+                for (i = 0; i < length; i += 1) {
+                    partial[i] = str(i, value) || 'null';
+                }
+                v = partial.length === 0
+                    ? '[]'
+                    : gap
+                    ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
+                    : '[' + partial.join(',') + ']';
+                gap = mind;
+                return v;
+            }
+           if (rep && typeof rep === 'object') {
+                length = rep.length;
+                for (i = 0; i < length; i += 1) {
+                    if (typeof rep[i] === 'string') {
+                        k = rep[i];
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            } else {
+               for (k in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, k)) {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            }
+            v = partial.length === 0
+                ? '{}'
+                : gap
+                ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
+                : '{' + partial.join(',') + '}';
+            gap = mind;
+            return v;
+        }
+    }
+   if (typeof JSON.stringify !== 'function') {
+        JSON.stringify = function (value, replacer, space) {
+            var i;
+            gap = '';
+            indent = '';
+           if (typeof space === 'number') {
+                for (i = 0; i < space; i += 1) {
+                    indent += ' ';
+                }
+           } else if (typeof space === 'string') {
+                indent = space;
+            }
+           rep = replacer;
+            if (replacer && typeof replacer !== 'function' &&
+                    (typeof replacer !== 'object' ||
+                    typeof replacer.length !== 'number')) {
+                throw new Error('JSON.stringify');
+            }
+           return str('', {'': value});
+        };
+    }
+    if (typeof JSON.parse !== 'function') {
+        JSON.parse = function (text, reviver) {
+            var j;
+            function walk(holder, key) {
+                var k, v, value = holder[key];
+                if (value && typeof value === 'object') {
+                    for (k in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+           text = String(text);
+            cx.lastIndex = 0;
+            if (cx.test(text)) {
+                text = text.replace(cx, function (a) {
+                    return '\\u' +
+                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+            if (/^[\],:{}\s]*$/
+                    .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
+                        .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+                        .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+               j = eval('(' + text + ')');
+                return typeof reviver === 'function'
+                    ? walk({'': j}, '')
+                    : j;
+            }
+            throw new SyntaxError('JSON.parse');
+        };
+    }
+}());
--- a/resources/web/guide/swiper/LICENSE
+++ b/resources/web/guide/swiper/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Vladimir Kharlampidi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/resources/web/guide/swiper/README.md
+++ b/resources/web/guide/swiper/README.md
@@ -0,0 +1,11 @@
+Swiper
+==========
+
+Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
+
+Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.
+
+# Getting Started
+  * [Getting Started Guide](https://swiperjs.com/get-started/)
+  * [API](https://swiperjs.com/swiper-api/)
+  * [Demos](https://swiperjs.com/demos/)
--- a/resources/web/guide/swiper/angular/angular/src/public-api.d.ts
+++ b/resources/web/guide/swiper/angular/angular/src/public-api.d.ts
@@ -0,0 +1,3 @@
+export * from './swiper.module';
+export * from './swiper.component';
+export * from './swiper-slide.directive';
--- a/resources/web/guide/swiper/angular/angular/src/swiper-slide.directive.d.ts
+++ b/resources/web/guide/swiper/angular/angular/src/swiper-slide.directive.d.ts
@@ -0,0 +1,26 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SwiperSlideDirective {
+    template: TemplateRef<any>;
+    virtualIndex: number;
+    class: string;
+    autoplayDelay: string | null;
+    set zoom(val: boolean);
+    get zoom(): boolean;
+    private _zoom;
+    slideIndex: number;
+    get classNames(): string;
+    set classNames(val: string);
+    private _hasClass;
+    slideData: {
+        isActive: boolean;
+        isPrev: boolean;
+        isNext: boolean;
+        isVisible: boolean;
+        isDuplicate: boolean;
+    };
+    private _classNames;
+    constructor(template: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwiperSlideDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SwiperSlideDirective, "ng-template[swiperSlide]", never, { "virtualIndex": "virtualIndex"; "class": "class"; "autoplayDelay": "data-swiper-autoplay"; "zoom": "zoom"; }, {}, never>;
+}
--- a/resources/web/guide/swiper/angular/angular/src/swiper.component.d.ts
+++ b/resources/web/guide/swiper/angular/angular/src/swiper.component.d.ts
--- a/resources/web/guide/swiper/angular/angular/src/swiper.module.d.ts
+++ b/resources/web/guide/swiper/angular/angular/src/swiper.module.d.ts
@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./swiper.component";
+import * as i2 from "./swiper-slide.directive";
+import * as i3 from "@angular/common";
+export declare class SwiperModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwiperModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SwiperModule, [typeof i1.SwiperComponent, typeof i2.SwiperSlideDirective], [typeof i3.CommonModule], [typeof i1.SwiperComponent, typeof i2.SwiperSlideDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SwiperModule>;
+}
--- a/resources/web/guide/swiper/angular/angular/src/utils/get-params.d.ts
+++ b/resources/web/guide/swiper/angular/angular/src/utils/get-params.d.ts
@@ -0,0 +1,6 @@
+export declare const allowedParams: string[];
+export declare function getParams(obj?: any): {
+    params: any;
+    passedParams: any;
+    rest: any;
+};
--- a/resources/web/guide/swiper/angular/angular/src/utils/params-list.d.ts
+++ b/resources/web/guide/swiper/angular/angular/src/utils/params-list.d.ts
@@ -0,0 +1 @@
+export declare const paramsList: string[];
--- a/resources/web/guide/swiper/angular/angular/src/utils/utils.d.ts
+++ b/resources/web/guide/swiper/angular/angular/src/utils/utils.d.ts
@@ -0,0 +1,6 @@
+export declare function isObject(o: any): boolean;
+export declare function isShowEl(val: any, obj: any, el: any): boolean;
+export declare function extend(target: any, src: any): void;
+export declare function coerceBooleanProperty(value: any): boolean;
+export declare const ignoreNgOnChanges: string[];
+export declare function setProperty(val: any, obj?: {}): {} | false;
--- a/resources/web/guide/swiper/angular/bundles/swiper_angular.umd.js
+++ b/resources/web/guide/swiper/angular/bundles/swiper_angular.umd.js
--- a/resources/web/guide/swiper/angular/bundles/swiper_angular.umd.js.map
+++ b/resources/web/guide/swiper/angular/bundles/swiper_angular.umd.js.map
--- a/resources/web/guide/swiper/angular/esm2015/angular/src/public-api.js
+++ b/resources/web/guide/swiper/angular/esm2015/angular/src/public-api.js
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of angular
+ */
+export * from './swiper.module';
+export * from './swiper.component';
+export * from './swiper-slide.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hbmd1bGFyL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLG9CQUFvQixDQUFDO0FBQ25DLGNBQWMsMEJBQTBCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIGFuZ3VsYXJcbiAqL1xuZXhwb3J0ICogZnJvbSAnLi9zd2lwZXIubW9kdWxlJztcbmV4cG9ydCAqIGZyb20gJy4vc3dpcGVyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL3N3aXBlci1zbGlkZS5kaXJlY3RpdmUnO1xuIl19
--- a/resources/web/guide/swiper/angular/esm2015/angular/src/swiper-slide.directive.js
+++ b/resources/web/guide/swiper/angular/esm2015/angular/src/swiper-slide.directive.js
@@ -0,0 +1,60 @@
+import { Directive, Input } from '@angular/core';
+import { coerceBooleanProperty } from './utils/utils';
+import * as i0 from "@angular/core";
+export class SwiperSlideDirective {
+    constructor(template) {
+        this.template = template;
+        this.class = '';
+        this.autoplayDelay = null;
+        this.slideData = {
+            isActive: false,
+            isPrev: false,
+            isNext: false,
+            isVisible: false,
+            isDuplicate: false,
+        };
+    }
+    set zoom(val) {
+        this._zoom = coerceBooleanProperty(val);
+    }
+    get zoom() {
+        return this._zoom;
+    }
+    get classNames() {
+        return this._classNames;
+    }
+    set classNames(val) {
+        if (this._classNames === val) {
+            return;
+        }
+        this._classNames = val;
+        this.slideData = {
+            isActive: this._hasClass(['swiper-slide-active', 'swiper-slide-duplicate-active']),
+            isVisible: this._hasClass(['swiper-slide-visible']),
+            isDuplicate: this._hasClass(['swiper-slide-duplicate']),
+            isPrev: this._hasClass(['swiper-slide-prev', 'swiper-slide-duplicate-prev']),
+            isNext: this._hasClass(['swiper-slide-next', 'swiper-slide-duplicate-next']),
+        };
+    }
+    _hasClass(classNames) {
+        return classNames.some((className) => this._classNames.indexOf(className) >= 0);
+    }
+}
+SwiperSlideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.2", ngImport: i0, type: SwiperSlideDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+SwiperSlideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.2", type: SwiperSlideDirective, selector: "ng-template[swiperSlide]", inputs: { virtualIndex: "virtualIndex", class: "class", autoplayDelay: ["data-swiper-autoplay", "autoplayDelay"], zoom: "zoom" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.2", ngImport: i0, type: SwiperSlideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[swiperSlide]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { virtualIndex: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], autoplayDelay: [{
+                type: Input,
+                args: ['data-swiper-autoplay']
+            }], zoom: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpcGVyLXNsaWRlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hbmd1bGFyL3NyYy9zd2lwZXItc2xpZGUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFJdEQsTUFBTSxPQUFPLG9CQUFvQjtJQTBDL0IsWUFBbUIsUUFBMEI7UUFBMUIsYUFBUSxHQUFSLFFBQVEsQ0FBa0I7UUF4Q3BDLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDRyxrQkFBYSxHQUFrQixJQUFJLENBQUM7UUE4Qm5FLGNBQVMsR0FBRztZQUNWLFFBQVEsRUFBRSxLQUFLO1lBQ2YsTUFBTSxFQUFFLEtBQUs7WUFDYixNQUFNLEVBQUUsS0FBSztZQUNiLFNBQVMsRUFBRSxLQUFLO1lBQ2hCLFdBQVcsRUFBRSxLQUFLO1NBQ25CLENBQUM7SUFHOEMsQ0FBQztJQXRDakQsSUFDSSxJQUFJLENBQUMsR0FBWTtRQUNuQixJQUFJLENBQUMsS0FBSyxHQUFHLHFCQUFxQixDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzFDLENBQUM7SUFDRCxJQUFJLElBQUk7UUFDTixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUM7SUFDcEIsQ0FBQztJQUdELElBQUksVUFBVTtRQUNaLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUMxQixDQUFDO0lBQ0QsSUFBSSxVQUFVLENBQUMsR0FBRztRQUNoQixJQUFJLElBQUksQ0FBQyxXQUFXLEtBQUssR0FBRyxFQUFFO1lBQzVCLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxXQUFXLEdBQUcsR0FBRyxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxTQUFTLEdBQUc7WUFDZixRQUFRLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLHFCQUFxQixFQUFFLCtCQUErQixDQUFDLENBQUM7WUFDbEYsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1lBQ25ELFdBQVcsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsd0JBQXdCLENBQUMsQ0FBQztZQUN2RCxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLG1CQUFtQixFQUFFLDZCQUE2QixDQUFDLENBQUM7WUFDNUUsTUFBTSxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxtQkFBbUIsRUFBRSw2QkFBNkIsQ0FBQyxDQUFDO1NBQzdFLENBQUM7SUFDSixDQUFDO0lBRU8sU0FBUyxDQUFDLFVBQW9CO1FBQ3BDLE9BQU8sVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLFNBQVMsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDbEYsQ0FBQzs7aUhBaENVLG9CQUFvQjtxR0FBcEIsb0JBQW9COzJGQUFwQixvQkFBb0I7a0JBSGhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDBCQUEwQjtpQkFDckM7a0dBRVUsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ3lCLGFBQWE7c0JBQTNDLEtBQUs7dUJBQUMsc0JBQXNCO2dCQUV6QixJQUFJO3NCQURQLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgY29lcmNlQm9vbGVhblByb3BlcnR5IH0gZnJvbSAnLi91dGlscy91dGlscyc7XG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICduZy10ZW1wbGF0ZVtzd2lwZXJTbGlkZV0nLFxufSlcbmV4cG9ydCBjbGFzcyBTd2lwZXJTbGlkZURpcmVjdGl2ZSB7XG4gIEBJbnB1dCgpIHZpcnR1YWxJbmRleDogbnVtYmVyO1xuICBASW5wdXQoKSBjbGFzczogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgnZGF0YS1zd2lwZXItYXV0b3BsYXknKSBhdXRvcGxheURlbGF5OiBzdHJpbmcgfCBudWxsID0gbnVsbDtcbiAgQElucHV0KClcbiAgc2V0IHpvb20odmFsOiBib29sZWFuKSB7XG4gICAgdGhpcy5fem9vbSA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWwpO1xuICB9XG4gIGdldCB6b29tKCkge1xuICAgIHJldHVybiB0aGlzLl96b29tO1xuICB9XG4gIHByaXZhdGUgX3pvb206IGJvb2xlYW47XG4gIHNsaWRlSW5kZXg6IG51bWJlcjtcbiAgZ2V0IGNsYXNzTmFtZXMoKSB7XG4gICAgcmV0dXJuIHRoaXMuX2NsYXNzTmFtZXM7XG4gIH1cbiAgc2V0IGNsYXNzTmFtZXModmFsKSB7XG4gICAgaWYgKHRoaXMuX2NsYXNzTmFtZXMgPT09IHZhbCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLl9jbGFzc05hbWVzID0gdmFsO1xuICAgIHRoaXMuc2xpZGVEYXRhID0ge1xuICAgICAgaXNBY3RpdmU6IHRoaXMuX2hhc0NsYXNzKFsnc3dpcGVyLXNsaWRlLWFjdGl2ZScsICdzd2lwZXItc2xpZGUtZHVwbGljYXRlLWFjdGl2ZSddKSxcbiAgICAgIGlzVmlzaWJsZTogdGhpcy5faGFzQ2xhc3MoWydzd2lwZXItc2xpZGUtdmlzaWJsZSddKSxcbiAgICAgIGlzRHVwbGljYXRlOiB0aGlzLl9oYXNDbGFzcyhbJ3N3aXBlci1zbGlkZS1kdXBsaWNhdGUnXSksXG4gICAgICBpc1ByZXY6IHRoaXMuX2hhc0NsYXNzKFsnc3dpcGVyLXNsaWRlLXByZXYnLCAnc3dpcGVyLXNsaWRlLWR1cGxpY2F0ZS1wcmV2J10pLFxuICAgICAgaXNOZXh0OiB0aGlzLl9oYXNDbGFzcyhbJ3N3aXBlci1zbGlkZS1uZXh0JywgJ3N3aXBlci1zbGlkZS1kdXBsaWNhdGUtbmV4dCddKSxcbiAgICB9O1xuICB9XG5cbiAgcHJpdmF0ZSBfaGFzQ2xhc3MoY2xhc3NOYW1lczogc3RyaW5nW10pIHtcbiAgICByZXR1cm4gY2xhc3NOYW1lcy5zb21lKChjbGFzc05hbWUpID0+IHRoaXMuX2NsYXNzTmFtZXMuaW5kZXhPZihjbGFzc05hbWUpID49IDApO1xuICB9XG4gIHNsaWRlRGF0YSA9IHtcbiAgICBpc0FjdGl2ZTogZmFsc2UsXG4gICAgaXNQcmV2OiBmYWxzZSxcbiAgICBpc05leHQ6IGZhbHNlLFxuICAgIGlzVmlzaWJsZTogZmFsc2UsXG4gICAgaXNEdXBsaWNhdGU6IGZhbHNlLFxuICB9O1xuXG4gIHByaXZhdGUgX2NsYXNzTmFtZXM6IHN0cmluZztcbiAgY29uc3RydWN0b3IocHVibGljIHRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+KSB7fVxufVxuIl19
--- a/resources/web/guide/swiper/angular/esm2015/angular/src/swiper.component.js
+++ b/resources/web/guide/swiper/angular/esm2015/angular/src/swiper.component.js
--- a/resources/web/guide/swiper/angular/esm2015/angular/src/swiper.module.js
+++ b/resources/web/guide/swiper/angular/esm2015/angular/src/swiper.module.js
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SwiperComponent } from './swiper.component';
+import { SwiperSlideDirective } from './swiper-slide.directive';
+import * as i0 from "@angular/core";
+export class SwiperModule {
+}
+SwiperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.2", ngImport: i0, type: SwiperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SwiperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.2", ngImport: i0, type: SwiperModule, declarations: [SwiperComponent, SwiperSlideDirective], imports: [CommonModule], exports: [SwiperComponent, SwiperSlideDirective] });
+SwiperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.2", ngImport: i0, type: SwiperModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.2", ngImport: i0, type: SwiperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SwiperComponent, SwiperSlideDirective],
+                    exports: [SwiperComponent, SwiperSlideDirective],
+                    imports: [CommonModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpcGVyLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hbmd1bGFyL3NyYy9zd2lwZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUNyRCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7QUFNaEUsTUFBTSxPQUFPLFlBQVk7O3lHQUFaLFlBQVk7MEdBQVosWUFBWSxpQkFKUixlQUFlLEVBQUUsb0JBQW9CLGFBRTFDLFlBQVksYUFEWixlQUFlLEVBQUUsb0JBQW9COzBHQUdwQyxZQUFZLFlBRmQsQ0FBQyxZQUFZLENBQUM7MkZBRVosWUFBWTtrQkFMeEIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLEVBQUUsb0JBQW9CLENBQUM7b0JBQ3JELE9BQU8sRUFBRSxDQUFDLGVBQWUsRUFBRSxvQkFBb0IsQ0FBQztvQkFDaEQsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO2lCQUN4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU3dpcGVyQ29tcG9uZW50IH0gZnJvbSAnLi9zd2lwZXIuY29tcG9uZW50JztcbmltcG9ydCB7IFN3aXBlclNsaWRlRGlyZWN0aXZlIH0gZnJvbSAnLi9zd2lwZXItc2xpZGUuZGlyZWN0aXZlJztcbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1N3aXBlckNvbXBvbmVudCwgU3dpcGVyU2xpZGVEaXJlY3RpdmVdLFxuICBleHBvcnRzOiBbU3dpcGVyQ29tcG9uZW50LCBTd2lwZXJTbGlkZURpcmVjdGl2ZV0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBTd2lwZXJNb2R1bGUge31cbiJdfQ==
--- a/resources/web/guide/swiper/angular/esm2015/angular/src/utils/get-params.js
+++ b/resources/web/guide/swiper/angular/esm2015/angular/src/utils/get-params.js
@@ -0,0 +1,38 @@
+// eslint-disable-next-line
+import { isObject, extend } from './utils';
+import { paramsList } from './params-list';
+// @ts-ignore
+import Swiper from 'swiper';
+export const allowedParams = paramsList.map((key) => key.replace(/_/, ''));
+export function getParams(obj = {}) {
+    const params = {
+        on: {},
+    };
+    const passedParams = {};
+    extend(params, Swiper.defaults);
+    extend(params, Swiper.extendedDefaults);
+    params._emitClasses = true;
+    const rest = {};
+    Object.keys(obj).forEach((key) => {
+        const _key = key.replace(/^_/, '');
+        if (typeof obj[_key] === 'undefined')
+            return;
+        if (allowedParams.indexOf(_key) >= 0) {
+            if (isObject(obj[_key])) {
+                params[_key] = {};
+                passedParams[_key] = {};
+                extend(params[_key], obj[_key]);
+                extend(passedParams[_key], obj[_key]);
+            }
+            else {
+                params[_key] = obj[_key];
+                passedParams[_key] = obj[_key];
+            }
+        }
+        else {
+            rest[_key] = obj[_key];
+        }
+    });
+    return { params, passedParams, rest };
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0LXBhcmFtcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hbmd1bGFyL3NyYy91dGlscy9nZXQtcGFyYW1zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDJCQUEyQjtBQUMzQixPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLFNBQVMsQ0FBQztBQUMzQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLGFBQWE7QUFDYixPQUFPLE1BQU0sTUFBTSxRQUFRLENBQUM7QUFFNUIsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLFVBQVUsQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7QUFDM0UsTUFBTSxVQUFVLFNBQVMsQ0FBQyxNQUFXLEVBQUU7SUFDckMsTUFBTSxNQUFNLEdBQVE7UUFDbEIsRUFBRSxFQUFFLEVBQUU7S0FDUCxDQUFDO0lBQ0YsTUFBTSxZQUFZLEdBQVEsRUFBRSxDQUFDO0lBQzdCLE1BQU0sQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2hDLE1BQU0sQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDeEMsTUFBTSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7SUFFM0IsTUFBTSxJQUFJLEdBQVEsRUFBRSxDQUFDO0lBQ3JCLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBVyxFQUFFLEVBQUU7UUFDdkMsTUFBTSxJQUFJLEdBQUcsR0FBRyxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDbkMsSUFBSSxPQUFPLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxXQUFXO1lBQUUsT0FBTztRQUM3QyxJQUFJLGFBQWEsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ3BDLElBQUksUUFBUSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFFO2dCQUN2QixNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDO2dCQUNsQixZQUFZLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDO2dCQUN4QixNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO2dCQUNoQyxNQUFNLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO2FBQ3ZDO2lCQUFNO2dCQUNMLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ3pCLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDaEM7U0FDRjthQUFNO1lBQ0wsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUN4QjtJQUNILENBQUMsQ0FBQyxDQUFDO0lBRUgsT0FBTyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsSUFBSSxFQUFFLENBQUM7QUFDeEMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZVxuaW1wb3J0IHsgaXNPYmplY3QsIGV4dGVuZCB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgcGFyYW1zTGlzdCB9IGZyb20gJy4vcGFyYW1zLWxpc3QnO1xuLy8gQHRzLWlnbm9yZVxuaW1wb3J0IFN3aXBlciBmcm9tICdzd2lwZXInO1xuXG5leHBvcnQgY29uc3QgYWxsb3dlZFBhcmFtcyA9IHBhcmFtc0xpc3QubWFwKChrZXkpID0+IGtleS5yZXBsYWNlKC9fLywgJycpKTtcbmV4cG9ydCBmdW5jdGlvbiBnZXRQYXJhbXMob2JqOiBhbnkgPSB7fSkge1xuICBjb25zdCBwYXJhbXM6IGFueSA9IHtcbiAgICBvbjoge30sXG4gIH07XG4gIGNvbnN0IHBhc3NlZFBhcmFtczogYW55ID0ge307XG4gIGV4dGVuZChwYXJhbXMsIFN3aXBlci5kZWZhdWx0cyk7XG4gIGV4dGVuZChwYXJhbXMsIFN3aXBlci5leHRlbmRlZERlZmF1bHRzKTtcbiAgcGFyYW1zLl9lbWl0Q2xhc3NlcyA9IHRydWU7XG5cbiAgY29uc3QgcmVzdDogYW55ID0ge307XG4gIE9iamVjdC5rZXlzKG9iaikuZm9yRWFjaCgoa2V5OiBzdHJpbmcpID0+IHtcbiAgICBjb25zdCBfa2V5ID0ga2V5LnJlcGxhY2UoL15fLywgJycpO1xuICAgIGlmICh0eXBlb2Ygb2JqW19rZXldID09PSAndW5kZWZpbmVkJykgcmV0dXJuO1xuICAgIGlmIChhbGxvd2VkUGFyYW1zLmluZGV4T2YoX2tleSkgPj0gMCkge1xuICAgICAgaWYgKGlzT2JqZWN0KG9ialtfa2V5XSkpIHtcbiAgICAgICAgcGFyYW1zW19rZXldID0ge307XG4gICAgICAgIHBhc3NlZFBhcmFtc1tfa2V5XSA9IHt9O1xuICAgICAgICBleHRlbmQocGFyYW1zW19rZXldLCBvYmpbX2tleV0pO1xuICAgICAgICBleHRlbmQocGFzc2VkUGFyYW1zW19rZXldLCBvYmpbX2tleV0pO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgcGFyYW1zW19rZXldID0gb2JqW19rZXldO1xuICAgICAgICBwYXNzZWRQYXJhbXNbX2tleV0gPSBvYmpbX2tleV07XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIHJlc3RbX2tleV0gPSBvYmpbX2tleV07XG4gICAgfVxuICB9KTtcblxuICByZXR1cm4geyBwYXJhbXMsIHBhc3NlZFBhcmFtcywgcmVzdCB9O1xufVxuIl19
--- a/resources/web/guide/swiper/angular/esm2015/angular/src/utils/params-list.js
+++ b/resources/web/guide/swiper/angular/esm2015/angular/src/utils/params-list.js
--- a/resources/web/guide/swiper/angular/esm2015/angular/src/utils/utils.js
+++ b/resources/web/guide/swiper/angular/esm2015/angular/src/utils/utils.js
@@ -0,0 +1,49 @@
+export function isObject(o) {
+    return (typeof o === 'object' &&
+        o !== null &&
+        o.constructor &&
+        Object.prototype.toString.call(o).slice(8, -1) === 'Object');
+}
+export function isShowEl(val, obj, el) {
+    return ((coerceBooleanProperty(val) === true && obj && !obj.el) ||
+        !(typeof obj !== 'boolean' &&
+            obj.el !== (el === null || el === void 0 ? void 0 : el.nativeElement) &&
+            (typeof obj.el === 'string' || typeof obj.el === 'object')));
+}
+export function extend(target, src) {
+    const noExtend = ['__proto__', 'constructor', 'prototype'];
+    Object.keys(src)
+        .filter((key) => noExtend.indexOf(key) < 0)
+        .forEach((key) => {
+        if (typeof target[key] === 'undefined') {
+            target[key] = src[key];
+            return;
+        }
+        if (target[key] && !src[key]) {
+            return;
+        }
+        if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
+            if (src[key].__swiper__)
+                target[key] = src[key];
+            else
+                extend(target[key], src[key]);
+        }
+        else {
+            target[key] = src[key];
+        }
+    });
+}
+export function coerceBooleanProperty(value) {
+    return value != null && `${value}` !== 'false';
+}
+export const ignoreNgOnChanges = ['pagination', 'navigation', 'scrollbar', 'virtual'];
+export function setProperty(val, obj = {}) {
+    if (isObject(val)) {
+        return val;
+    }
+    if (coerceBooleanProperty(val) === true) {
+        return obj;
+    }
+    return false;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvYW5ndWxhci9zcmMvdXRpbHMvdXRpbHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxVQUFVLFFBQVEsQ0FBQyxDQUFNO0lBQzdCLE9BQU8sQ0FDTCxPQUFPLENBQUMsS0FBSyxRQUFRO1FBQ3JCLENBQUMsS0FBSyxJQUFJO1FBQ1YsQ0FBQyxDQUFDLFdBQVc7UUFDYixNQUFNLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLFFBQVEsQ0FDNUQsQ0FBQztBQUNKLENBQUM7QUFFRCxNQUFNLFVBQVUsUUFBUSxDQUFDLEdBQVEsRUFBRSxHQUFRLEVBQUUsRUFBTztJQUNsRCxPQUFPLENBQ0wsQ0FBQyxxQkFBcUIsQ0FBQyxHQUFHLENBQUMsS0FBSyxJQUFJLElBQUksR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQztRQUN2RCxDQUFDLENBQ0MsT0FBTyxHQUFHLEtBQUssU0FBUztZQUN4QixHQUFHLENBQUMsRUFBRSxNQUFLLEVBQUUsYUFBRixFQUFFLHVCQUFGLEVBQUUsQ0FBRSxhQUFhLENBQUE7WUFDNUIsQ0FBQyxPQUFPLEdBQUcsQ0FBQyxFQUFFLEtBQUssUUFBUSxJQUFJLE9BQU8sR0FBRyxDQUFDLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FDM0QsQ0FDRixDQUFDO0FBQ0osQ0FBQztBQUVELE1BQU0sVUFBVSxNQUFNLENBQUMsTUFBVyxFQUFFLEdBQVE7SUFDMUMsTUFBTSxRQUFRLEdBQUcsQ0FBQyxXQUFXLEVBQUUsYUFBYSxFQUFFLFdBQVcsQ0FBQyxDQUFDO0lBQzNELE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1NBQ2IsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUMxQyxPQUFPLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRTtRQUNmLElBQUksT0FBTyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssV0FBVyxFQUFFO1lBQ3RDLE1BQU0sQ0FBQyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDdkIsT0FBTztTQUNSO1FBQ0QsSUFBSSxNQUFNLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDNUIsT0FBTztTQUNSO1FBQ0QsSUFBSSxRQUFRLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksUUFBUSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNuRixJQUFJLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxVQUFVO2dCQUFFLE1BQU0sQ0FBQyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7O2dCQUMzQyxNQUFNLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1NBQ3BDO2FBQU07WUFDTCxNQUFNLENBQUMsR0FBRyxDQUFDLEdBQUcsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQyxDQUFDLENBQUM7QUFDUCxDQUFDO0FBRUQsTUFBTSxVQUFVLHFCQUFxQixDQUFDLEtBQVU7SUFDOUMsT0FBTyxLQUFLLElBQUksSUFBSSxJQUFJLEdBQUcsS0FBSyxFQUFFLEtBQUssT0FBTyxDQUFDO0FBQ2pELENBQUM7QUFFRCxNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLFlBQVksRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLFNBQVMsQ0FBQyxDQUFDO0FBRXRGLE1BQU0sVUFBVSxXQUFXLENBQUMsR0FBUSxFQUFFLEdBQUcsR0FBRyxFQUFFO0lBQzVDLElBQUksUUFBUSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1FBQ2pCLE9BQU8sR0FBRyxDQUFDO0tBQ1o7SUFFRCxJQUFJLHFCQUFxQixDQUFDLEdBQUcsQ0FBQyxLQUFLLElBQUksRUFBRTtRQUN2QyxPQUFPLEdBQUcsQ0FBQztLQUNaO0lBRUQsT0FBTyxLQUFLLENBQUM7QUFDZixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGZ1bmN0aW9uIGlzT2JqZWN0KG86IGFueSk6IGJvb2xlYW4ge1xuICByZXR1cm4gKFxuICAgIHR5cGVvZiBvID09PSAnb2JqZWN0JyAmJlxuICAgIG8gIT09IG51bGwgJiZcbiAgICBvLmNvbnN0cnVjdG9yICYmXG4gICAgT2JqZWN0LnByb3RvdHlwZS50b1N0cmluZy5jYWxsKG8pLnNsaWNlKDgsIC0xKSA9PT0gJ09iamVjdCdcbiAgKTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGlzU2hvd0VsKHZhbDogYW55LCBvYmo6IGFueSwgZWw6IGFueSk6IGJvb2xlYW4ge1xuICByZXR1cm4gKFxuICAgIChjb2VyY2VCb29sZWFuUHJvcGVydHkodmFsKSA9PT0gdHJ1ZSAmJiBvYmogJiYgIW9iai5lbCkgfHxcbiAgICAhKFxuICAgICAgdHlwZW9mIG9iaiAhPT0gJ2Jvb2xlYW4nICYmXG4gICAgICBvYmouZWwgIT09IGVsPy5uYXRpdmVFbGVtZW50ICYmXG4gICAgICAodHlwZW9mIG9iai5lbCA9PT0gJ3N0cmluZycgfHwgdHlwZW9mIG9iai5lbCA9PT0gJ29iamVjdCcpXG4gICAgKVxuICApO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gZXh0ZW5kKHRhcmdldDogYW55LCBzcmM6IGFueSkge1xuICBjb25zdCBub0V4dGVuZCA9IFsnX19wcm90b19fJywgJ2NvbnN0cnVjdG9yJywgJ3Byb3RvdHlwZSddO1xuICBPYmplY3Qua2V5cyhzcmMpXG4gICAgLmZpbHRlcigoa2V5KSA9PiBub0V4dGVuZC5pbmRleE9mKGtleSkgPCAwKVxuICAgIC5mb3JFYWNoKChrZXkpID0+IHtcbiAgICAgIGlmICh0eXBlb2YgdGFyZ2V0W2tleV0gPT09ICd1bmRlZmluZWQnKSB7XG4gICAgICAgIHRhcmdldFtrZXldID0gc3JjW2tleV07XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cbiAgICAgIGlmICh0YXJnZXRba2V5XSAmJiAhc3JjW2tleV0pIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuICAgICAgaWYgKGlzT2JqZWN0KHNyY1trZXldKSAmJiBpc09iamVjdCh0YXJnZXRba2V5XSkgJiYgT2JqZWN0LmtleXMoc3JjW2tleV0pLmxlbmd0aCA+IDApIHtcbiAgICAgICAgaWYgKHNyY1trZXldLl9fc3dpcGVyX18pIHRhcmdldFtrZXldID0gc3JjW2tleV07XG4gICAgICAgIGVsc2UgZXh0ZW5kKHRhcmdldFtrZXldLCBzcmNba2V5XSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0YXJnZXRba2V5XSA9IHNyY1trZXldO1xuICAgICAgfVxuICAgIH0pO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlOiBhbnkpOiBib29sZWFuIHtcbiAgcmV0dXJuIHZhbHVlICE9IG51bGwgJiYgYCR7dmFsdWV9YCAhPT0gJ2ZhbHNlJztcbn1cblxuZXhwb3J0IGNvbnN0IGlnbm9yZU5nT25DaGFuZ2VzID0gWydwYWdpbmF0aW9uJywgJ25hdmlnYXRpb24nLCAnc2Nyb2xsYmFyJywgJ3ZpcnR1YWwnXTtcblxuZXhwb3J0IGZ1bmN0aW9uIHNldFByb3BlcnR5KHZhbDogYW55LCBvYmogPSB7fSk6IHt9IHwgZmFsc2Uge1xuICBpZiAoaXNPYmplY3QodmFsKSkge1xuICAgIHJldHVybiB2YWw7XG4gIH1cblxuICBpZiAoY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbCkgPT09IHRydWUpIHtcbiAgICByZXR1cm4gb2JqO1xuICB9XG5cbiAgcmV0dXJuIGZhbHNlO1xufVxuIl19
--- a/resources/web/guide/swiper/angular/esm2015/swiper-angular.js
+++ b/resources/web/guide/swiper/angular/esm2015/swiper-angular.js
@@ -0,0 +1,2 @@
+export * from './angular/src/public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpcGVyLWFuZ3VsYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvc3dpcGVyLWFuZ3VsYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYywwQkFBMEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vYW5ndWxhci9zcmMvcHVibGljLWFwaSc7XG4iXX0=
--- a/resources/web/guide/swiper/angular/esm2015/swiper_angular.js
+++ b/resources/web/guide/swiper/angular/esm2015/swiper_angular.js
@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './swiper-angular';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpcGVyX2FuZ3VsYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvc3dpcGVyX2FuZ3VsYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGtCQUFrQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3N3aXBlci1hbmd1bGFyJztcbiJdfQ==
--- a/resources/web/guide/swiper/angular/fesm2015/swiper_angular.js
+++ b/resources/web/guide/swiper/angular/fesm2015/swiper_angular.js
--- a/resources/web/guide/swiper/angular/fesm2015/swiper_angular.js.map
+++ b/resources/web/guide/swiper/angular/fesm2015/swiper_angular.js.map
--- a/resources/web/guide/swiper/angular/package.json
+++ b/resources/web/guide/swiper/angular/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "swiper_angular",
+  "version": "0.0.1",
+  "private": "true",
+  "peerDependencies": {
+    "@angular/common": "^12.2.0",
+    "@angular/core": "^12.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "main": "bundles/swiper_angular.umd.js",
+  "module": "fesm2015/swiper_angular.js",
+  "es2015": "fesm2015/swiper_angular.js",
+  "esm2015": "esm2015/swiper_angular.js",
+  "fesm2015": "fesm2015/swiper_angular.js",
+  "typings": "swiper_angular.d.ts",
+  "sideEffects": false
+}
--- a/resources/web/guide/swiper/angular/swiper-angular.d.ts
+++ b/resources/web/guide/swiper/angular/swiper-angular.d.ts
@@ -0,0 +1 @@
+export * from './angular/src/public-api';
--- a/resources/web/guide/swiper/angular/swiper_angular.d.ts
+++ b/resources/web/guide/swiper/angular/swiper_angular.d.ts
@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="swiper_angular" />
+export * from './swiper-angular';
--- a/resources/web/guide/swiper/core/breakpoints/getBreakpoint.js
+++ b/resources/web/guide/swiper/core/breakpoints/getBreakpoint.js
@@ -0,0 +1,40 @@
+import { getWindow } from 'ssr-window';
+export default function getBreakpoint(breakpoints, base = 'window', containerEl) {
+  if (!breakpoints || base === 'container' && !containerEl) return undefined;
+  let breakpoint = false;
+  const window = getWindow();
+  const currentHeight = base === 'window' ? window.innerHeight : containerEl.clientHeight;
+  const points = Object.keys(breakpoints).map(point => {
+    if (typeof point === 'string' && point.indexOf('@') === 0) {
+      const minRatio = parseFloat(point.substr(1));
+      const value = currentHeight * minRatio;
+      return {
+        value,
+        point
+      };
+    }
+
+    return {
+      value: point,
+      point
+    };
+  });
+  points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));
+
+  for (let i = 0; i < points.length; i += 1) {
+    const {
+      point,
+      value
+    } = points[i];
+
+    if (base === 'window') {
+      if (window.matchMedia(`(min-width: ${value}px)`).matches) {
+        breakpoint = point;
+      }
+    } else if (value <= containerEl.clientWidth) {
+      breakpoint = point;
+    }
+  }
+
+  return breakpoint || 'max';
+}
--- a/resources/web/guide/swiper/core/breakpoints/index.js
+++ b/resources/web/guide/swiper/core/breakpoints/index.js
@@ -0,0 +1,6 @@
+import setBreakpoint from './setBreakpoint.js';
+import getBreakpoint from './getBreakpoint.js';
+export default {
+  setBreakpoint,
+  getBreakpoint
+};
--- a/resources/web/guide/swiper/core/breakpoints/setBreakpoint.js
+++ b/resources/web/guide/swiper/core/breakpoints/setBreakpoint.js
@@ -0,0 +1,72 @@
+import { extend } from '../../shared/utils.js';
+
+const isGridEnabled = (swiper, params) => {
+  return swiper.grid && params.grid && params.grid.rows > 1;
+};
+
+export default function setBreakpoint() {
+  const swiper = this;
+  const {
+    activeIndex,
+    initialized,
+    loopedSlides = 0,
+    params,
+    $el
+  } = swiper;
+  const breakpoints = params.breakpoints;
+  if (!breakpoints || breakpoints && Object.keys(breakpoints).length === 0) return; // Get breakpoint for window width and update parameters
+
+  const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);
+  if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;
+  const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
+  const breakpointParams = breakpointOnlyParams || swiper.originalParams;
+  const wasMultiRow = isGridEnabled(swiper, params);
+  const isMultiRow = isGridEnabled(swiper, breakpointParams);
+  const wasEnabled = params.enabled;
+
+  if (wasMultiRow && !isMultiRow) {
+    $el.removeClass(`${params.containerModifierClass}grid ${params.containerModifierClass}grid-column`);
+    swiper.emitContainerClasses();
+  } else if (!wasMultiRow && isMultiRow) {
+    $el.addClass(`${params.containerModifierClass}grid`);
+
+    if (breakpointParams.grid.fill && breakpointParams.grid.fill === 'column' || !breakpointParams.grid.fill && params.grid.fill === 'column') {
+      $el.addClass(`${params.containerModifierClass}grid-column`);
+    }
+
+    swiper.emitContainerClasses();
+  }
+
+  const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
+  const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
+
+  if (directionChanged && initialized) {
+    swiper.changeDirection();
+  }
+
+  extend(swiper.params, breakpointParams);
+  const isEnabled = swiper.params.enabled;
+  Object.assign(swiper, {
+    allowTouchMove: swiper.params.allowTouchMove,
+    allowSlideNext: swiper.params.allowSlideNext,
+    allowSlidePrev: swiper.params.allowSlidePrev
+  });
+
+  if (wasEnabled && !isEnabled) {
+    swiper.disable();
+  } else if (!wasEnabled && isEnabled) {
+    swiper.enable();
+  }
+
+  swiper.currentBreakpoint = breakpoint;
+  swiper.emit('_beforeBreakpoint', breakpointParams);
+
+  if (needsReLoop && initialized) {
+    swiper.loopDestroy();
+    swiper.loopCreate();
+    swiper.updateSlides();
+    swiper.slideTo(activeIndex - loopedSlides + swiper.loopedSlides, 0, false);
+  }
+
+  swiper.emit('breakpoint', breakpointParams);
+}
--- a/resources/web/guide/swiper/core/check-overflow/index.js
+++ b/resources/web/guide/swiper/core/check-overflow/index.js
@@ -0,0 +1,38 @@
+function checkOverflow() {
+  const swiper = this;
+  const {
+    isLocked: wasLocked,
+    params
+  } = swiper;
+  const {
+    slidesOffsetBefore
+  } = params;
+
+  if (slidesOffsetBefore) {
+    const lastSlideIndex = swiper.slides.length - 1;
+    const lastSlideRightEdge = swiper.slidesGrid[lastSlideIndex] + swiper.slidesSizesGrid[lastSlideIndex] + slidesOffsetBefore * 2;
+    swiper.isLocked = swiper.size > lastSlideRightEdge;
+  } else {
+    swiper.isLocked = swiper.snapGrid.length === 1;
+  }
+
+  if (params.allowSlideNext === true) {
+    swiper.allowSlideNext = !swiper.isLocked;
+  }
+
+  if (params.allowSlidePrev === true) {
+    swiper.allowSlidePrev = !swiper.isLocked;
+  }
+
+  if (wasLocked && wasLocked !== swiper.isLocked) {
+    swiper.isEnd = false;
+  }
+
+  if (wasLocked !== swiper.isLocked) {
+    swiper.emit(swiper.isLocked ? 'lock' : 'unlock');
+  }
+}
+
+export default {
+  checkOverflow
+};
--- a/resources/web/guide/swiper/core/classes/addClasses.js
+++ b/resources/web/guide/swiper/core/classes/addClasses.js
@@ -0,0 +1,52 @@
+function prepareClasses(entries, prefix) {
+  const resultClasses = [];
+  entries.forEach(item => {
+    if (typeof item === 'object') {
+      Object.keys(item).forEach(classNames => {
+        if (item[classNames]) {
+          resultClasses.push(prefix + classNames);
+        }
+      });
+    } else if (typeof item === 'string') {
+      resultClasses.push(prefix + item);
+    }
+  });
+  return resultClasses;
+}
+
+export default function addClasses() {
+  const swiper = this;
+  const {
+    classNames,
+    params,
+    rtl,
+    $el,
+    device,
+    support
+  } = swiper; // prettier-ignore
+
+  const suffixes = prepareClasses(['initialized', params.direction, {
+    'pointer-events': !support.touch
+  }, {
+    'free-mode': swiper.params.freeMode && params.freeMode.enabled
+  }, {
+    'autoheight': params.autoHeight
+  }, {
+    'rtl': rtl
+  }, {
+    'grid': params.grid && params.grid.rows > 1
+  }, {
+    'grid-column': params.grid && params.grid.rows > 1 && params.grid.fill === 'column'
+  }, {
+    'android': device.android
+  }, {
+    'ios': device.ios
+  }, {
+    'css-mode': params.cssMode
+  }, {
+    'centered': params.cssMode && params.centeredSlides
+  }], params.containerModifierClass);
+  classNames.push(...suffixes);
+  $el.addClass([...classNames].join(' '));
+  swiper.emitContainerClasses();
+}
--- a/resources/web/guide/swiper/core/classes/index.js
+++ b/resources/web/guide/swiper/core/classes/index.js
@@ -0,0 +1,6 @@
+import addClasses from './addClasses.js';
+import removeClasses from './removeClasses.js';
+export default {
+  addClasses,
+  removeClasses
+};
--- a/resources/web/guide/swiper/core/classes/removeClasses.js
+++ b/resources/web/guide/swiper/core/classes/removeClasses.js
@@ -0,0 +1,9 @@
+export default function removeClasses() {
+  const swiper = this;
+  const {
+    $el,
+    classNames
+  } = swiper;
+  $el.removeClass(classNames.join(' '));
+  swiper.emitContainerClasses();
+}
--- a/resources/web/guide/swiper/core/core.js
+++ b/resources/web/guide/swiper/core/core.js
@@ -0,0 +1,610 @@
+/* eslint no-param-reassign: "off" */
+import { getDocument } from 'ssr-window';
+import $ from '../shared/dom.js';
+import { extend, now, deleteProps } from '../shared/utils.js';
+import { getSupport } from '../shared/get-support.js';
+import { getDevice } from '../shared/get-device.js';
+import { getBrowser } from '../shared/get-browser.js';
+import Resize from './modules/resize/resize.js';
+import Observer from './modules/observer/observer.js';
+import eventsEmitter from './events-emitter.js';
+import update from './update/index.js';
+import translate from './translate/index.js';
+import transition from './transition/index.js';
+import slide from './slide/index.js';
+import loop from './loop/index.js';
+import grabCursor from './grab-cursor/index.js';
+import events from './events/index.js';
+import breakpoints from './breakpoints/index.js';
+import classes from './classes/index.js';
+import images from './images/index.js';
+import checkOverflow from './check-overflow/index.js';
+import defaults from './defaults.js';
+import moduleExtendParams from './moduleExtendParams.js';
+const prototypes = {
+  eventsEmitter,
+  update,
+  translate,
+  transition,
+  slide,
+  loop,
+  grabCursor,
+  events,
+  breakpoints,
+  checkOverflow,
+  classes,
+  images
+};
+const extendedDefaults = {};
+
+class Swiper {
+  constructor(...args) {
+    let el;
+    let params;
+
+    if (args.length === 1 && args[0].constructor && Object.prototype.toString.call(args[0]).slice(8, -1) === 'Object') {
+      params = args[0];
+    } else {
+      [el, params] = args;
+    }
+
+    if (!params) params = {};
+    params = extend({}, params);
+    if (el && !params.el) params.el = el;
+
+    if (params.el && $(params.el).length > 1) {
+      const swipers = [];
+      $(params.el).each(containerEl => {
+        const newParams = extend({}, params, {
+          el: containerEl
+        });
+        swipers.push(new Swiper(newParams));
+      });
+      return swipers;
+    } // Swiper Instance
+
+
+    const swiper = this;
+    swiper.__swiper__ = true;
+    swiper.support = getSupport();
+    swiper.device = getDevice({
+      userAgent: params.userAgent
+    });
+    swiper.browser = getBrowser();
+    swiper.eventsListeners = {};
+    swiper.eventsAnyListeners = [];
+    swiper.modules = [...swiper.__modules__];
+
+    if (params.modules && Array.isArray(params.modules)) {
+      swiper.modules.push(...params.modules);
+    }
+
+    const allModulesParams = {};
+    swiper.modules.forEach(mod => {
+      mod({
+        swiper,
+        extendParams: moduleExtendParams(params, allModulesParams),
+        on: swiper.on.bind(swiper),
+        once: swiper.once.bind(swiper),
+        off: swiper.off.bind(swiper),
+        emit: swiper.emit.bind(swiper)
+      });
+    }); // Extend defaults with modules params
+
+    const swiperParams = extend({}, defaults, allModulesParams); // Extend defaults with passed params
+
+    swiper.params = extend({}, swiperParams, extendedDefaults, params);
+    swiper.originalParams = extend({}, swiper.params);
+    swiper.passedParams = extend({}, params); // add event listeners
+
+    if (swiper.params && swiper.params.on) {
+      Object.keys(swiper.params.on).forEach(eventName => {
+        swiper.on(eventName, swiper.params.on[eventName]);
+      });
+    }
+
+    if (swiper.params && swiper.params.onAny) {
+      swiper.onAny(swiper.params.onAny);
+    } // Save Dom lib
+
+
+    swiper.$ = $; // Extend Swiper
+
+    Object.assign(swiper, {
+      enabled: swiper.params.enabled,
+      el,
+      // Classes
+      classNames: [],
+      // Slides
+      slides: $(),
+      slidesGrid: [],
+      snapGrid: [],
+      slidesSizesGrid: [],
+
+      // isDirection
+      isHorizontal() {
+        return swiper.params.direction === 'horizontal';
+      },
+
+      isVertical() {
+        return swiper.params.direction === 'vertical';
+      },
+
+      // Indexes
+      activeIndex: 0,
+      realIndex: 0,
+      //
+      isBeginning: true,
+      isEnd: false,
+      // Props
+      translate: 0,
+      previousTranslate: 0,
+      progress: 0,
+      velocity: 0,
+      animating: false,
+      // Locks
+      allowSlideNext: swiper.params.allowSlideNext,
+      allowSlidePrev: swiper.params.allowSlidePrev,
+      // Touch Events
+      touchEvents: function touchEvents() {
+        const touch = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
+        const desktop = ['pointerdown', 'pointermove', 'pointerup'];
+        swiper.touchEventsTouch = {
+          start: touch[0],
+          move: touch[1],
+          end: touch[2],
+          cancel: touch[3]
+        };
+        swiper.touchEventsDesktop = {
+          start: desktop[0],
+          move: desktop[1],
+          end: desktop[2]
+        };
+        return swiper.support.touch || !swiper.params.simulateTouch ? swiper.touchEventsTouch : swiper.touchEventsDesktop;
+      }(),
+      touchEventsData: {
+        isTouched: undefined,
+        isMoved: undefined,
+        allowTouchCallbacks: undefined,
+        touchStartTime: undefined,
+        isScrolling: undefined,
+        currentTranslate: undefined,
+        startTranslate: undefined,
+        allowThresholdMove: undefined,
+        // Form elements to match
+        focusableElements: swiper.params.focusableElements,
+        // Last click time
+        lastClickTime: now(),
+        clickTimeout: undefined,
+        // Velocities
+        velocities: [],
+        allowMomentumBounce: undefined,
+        isTouchEvent: undefined,
+        startMoving: undefined
+      },
+      // Clicks
+      allowClick: true,
+      // Touches
+      allowTouchMove: swiper.params.allowTouchMove,
+      touches: {
+        startX: 0,
+        startY: 0,
+        currentX: 0,
+        currentY: 0,
+        diff: 0
+      },
+      // Images
+      imagesToLoad: [],
+      imagesLoaded: 0
+    });
+    swiper.emit('_swiper'); // Init
+
+    if (swiper.params.init) {
+      swiper.init();
+    } // Return app instance
+
+
+    return swiper;
+  }
+
+  enable() {
+    const swiper = this;
+    if (swiper.enabled) return;
+    swiper.enabled = true;
+
+    if (swiper.params.grabCursor) {
+      swiper.setGrabCursor();
+    }
+
+    swiper.emit('enable');
+  }
+
+  disable() {
+    const swiper = this;
+    if (!swiper.enabled) return;
+    swiper.enabled = false;
+
+    if (swiper.params.grabCursor) {
+      swiper.unsetGrabCursor();
+    }
+
+    swiper.emit('disable');
+  }
+
+  setProgress(progress, speed) {
+    const swiper = this;
+    progress = Math.min(Math.max(progress, 0), 1);
+    const min = swiper.minTranslate();
+    const max = swiper.maxTranslate();
+    const current = (max - min) * progress + min;
+    swiper.translateTo(current, typeof speed === 'undefined' ? 0 : speed);
+    swiper.updateActiveIndex();
+    swiper.updateSlidesClasses();
+  }
+
+  emitContainerClasses() {
+    const swiper = this;
+    if (!swiper.params._emitClasses || !swiper.el) return;
+    const cls = swiper.el.className.split(' ').filter(className => {
+      return className.indexOf('swiper') === 0 || className.indexOf(swiper.params.containerModifierClass) === 0;
+    });
+    swiper.emit('_containerClasses', cls.join(' '));
+  }
+
+  getSlideClasses(slideEl) {
+    const swiper = this;
+    return slideEl.className.split(' ').filter(className => {
+      return className.indexOf('swiper-slide') === 0 || className.indexOf(swiper.params.slideClass) === 0;
+    }).join(' ');
+  }
+
+  emitSlidesClasses() {
+    const swiper = this;
+    if (!swiper.params._emitClasses || !swiper.el) return;
+    const updates = [];
+    swiper.slides.each(slideEl => {
+      const classNames = swiper.getSlideClasses(slideEl);
+      updates.push({
+        slideEl,
+        classNames
+      });
+      swiper.emit('_slideClass', slideEl, classNames);
+    });
+    swiper.emit('_slideClasses', updates);
+  }
+
+  slidesPerViewDynamic(view = 'current', exact = false) {
+    const swiper = this;
+    const {
+      params,
+      slides,
+      slidesGrid,
+      slidesSizesGrid,
+      size: swiperSize,
+      activeIndex
+    } = swiper;
+    let spv = 1;
+
+    if (params.centeredSlides) {
+      let slideSize = slides[activeIndex].swiperSlideSize;
+      let breakLoop;
+
+      for (let i = activeIndex + 1; i < slides.length; i += 1) {
+        if (slides[i] && !breakLoop) {
+          slideSize += slides[i].swiperSlideSize;
+          spv += 1;
+          if (slideSize > swiperSize) breakLoop = true;
+        }
+      }
+
+      for (let i = activeIndex - 1; i >= 0; i -= 1) {
+        if (slides[i] && !breakLoop) {
+          slideSize += slides[i].swiperSlideSize;
+          spv += 1;
+          if (slideSize > swiperSize) breakLoop = true;
+        }
+      }
+    } else {
+      // eslint-disable-next-line
+      if (view === 'current') {
+        for (let i = activeIndex + 1; i < slides.length; i += 1) {
+          const slideInView = exact ? slidesGrid[i] + slidesSizesGrid[i] - slidesGrid[activeIndex] < swiperSize : slidesGrid[i] - slidesGrid[activeIndex] < swiperSize;
+
+          if (slideInView) {
+            spv += 1;
+          }
+        }
+      } else {
+        // previous
+        for (let i = activeIndex - 1; i >= 0; i -= 1) {
+          const slideInView = slidesGrid[activeIndex] - slidesGrid[i] < swiperSize;
+
+          if (slideInView) {
+            spv += 1;
+          }
+        }
+      }
+    }
+
+    return spv;
+  }
+
+  update() {
+    const swiper = this;
+    if (!swiper || swiper.destroyed) return;
+    const {
+      snapGrid,
+      params
+    } = swiper; // Breakpoints
+
+    if (params.breakpoints) {
+      swiper.setBreakpoint();
+    }
+
+    swiper.updateSize();
+    swiper.updateSlides();
+    swiper.updateProgress();
+    swiper.updateSlidesClasses();
+
+    function setTranslate() {
+      const translateValue = swiper.rtlTranslate ? swiper.translate * -1 : swiper.translate;
+      const newTranslate = Math.min(Math.max(translateValue, swiper.maxTranslate()), swiper.minTranslate());
+      swiper.setTranslate(newTranslate);
+      swiper.updateActiveIndex();
+      swiper.updateSlidesClasses();
+    }
+
+    let translated;
+
+    if (swiper.params.freeMode && swiper.params.freeMode.enabled) {
+      setTranslate();
+
+      if (swiper.params.autoHeight) {
+        swiper.updateAutoHeight();
+      }
+    } else {
+      if ((swiper.params.slidesPerView === 'auto' || swiper.params.slidesPerView > 1) && swiper.isEnd && !swiper.params.centeredSlides) {
+        translated = swiper.slideTo(swiper.slides.length - 1, 0, false, true);
+      } else {
+        translated = swiper.slideTo(swiper.activeIndex, 0, false, true);
+      }
+
+      if (!translated) {
+        setTranslate();
+      }
+    }
+
+    if (params.watchOverflow && snapGrid !== swiper.snapGrid) {
+      swiper.checkOverflow();
+    }
+
+    swiper.emit('update');
+  }
+
+  changeDirection(newDirection, needUpdate = true) {
+    const swiper = this;
+    const currentDirection = swiper.params.direction;
+
+    if (!newDirection) {
+      // eslint-disable-next-line
+      newDirection = currentDirection === 'horizontal' ? 'vertical' : 'horizontal';
+    }
+
+    if (newDirection === currentDirection || newDirection !== 'horizontal' && newDirection !== 'vertical') {
+      return swiper;
+    }
+
+    swiper.$el.removeClass(`${swiper.params.containerModifierClass}${currentDirection}`).addClass(`${swiper.params.containerModifierClass}${newDirection}`);
+    swiper.emitContainerClasses();
+    swiper.params.direction = newDirection;
+    swiper.slides.each(slideEl => {
+      if (newDirection === 'vertical') {
+        slideEl.style.width = '';
+      } else {
+        slideEl.style.height = '';
+      }
+    });
+    swiper.emit('changeDirection');
+    if (needUpdate) swiper.update();
+    return swiper;
+  }
+
+  mount(el) {
+    const swiper = this;
+    if (swiper.mounted) return true; // Find el
+
+    const $el = $(el || swiper.params.el);
+    el = $el[0];
+
+    if (!el) {
+      return false;
+    }
+
+    el.swiper = swiper;
+
+    const getWrapperSelector = () => {
+      return `.${(swiper.params.wrapperClass || '').trim().split(' ').join('.')}`;
+    };
+
+    const getWrapper = () => {
+      if (el && el.shadowRoot && el.shadowRoot.querySelector) {
+        const res = $(el.shadowRoot.querySelector(getWrapperSelector())); // Children needs to return slot items
+
+        res.children = options => $el.children(options);
+
+        return res;
+      }
+
+      return $el.children(getWrapperSelector());
+    }; // Find Wrapper
+
+
+    let $wrapperEl = getWrapper();
+
+    if ($wrapperEl.length === 0 && swiper.params.createElements) {
+      const document = getDocument();
+      const wrapper = document.createElement('div');
+      $wrapperEl = $(wrapper);
+      wrapper.className = swiper.params.wrapperClass;
+      $el.append(wrapper);
+      $el.children(`.${swiper.params.slideClass}`).each(slideEl => {
+        $wrapperEl.append(slideEl);
+      });
+    }
+
+    Object.assign(swiper, {
+      $el,
+      el,
+      $wrapperEl,
+      wrapperEl: $wrapperEl[0],
+      mounted: true,
+      // RTL
+      rtl: el.dir.toLowerCase() === 'rtl' || $el.css('direction') === 'rtl',
+      rtlTranslate: swiper.params.direction === 'horizontal' && (el.dir.toLowerCase() === 'rtl' || $el.css('direction') === 'rtl'),
+      wrongRTL: $wrapperEl.css('display') === '-webkit-box'
+    });
+    return true;
+  }
+
+  init(el) {
+    const swiper = this;
+    if (swiper.initialized) return swiper;
+    const mounted = swiper.mount(el);
+    if (mounted === false) return swiper;
+    swiper.emit('beforeInit'); // Set breakpoint
+
+    if (swiper.params.breakpoints) {
+      swiper.setBreakpoint();
+    } // Add Classes
+
+
+    swiper.addClasses(); // Create loop
+
+    if (swiper.params.loop) {
+      swiper.loopCreate();
+    } // Update size
+
+
+    swiper.updateSize(); // Update slides
+
+    swiper.updateSlides();
+
+    if (swiper.params.watchOverflow) {
+      swiper.checkOverflow();
+    } // Set Grab Cursor
+
+
+    if (swiper.params.grabCursor && swiper.enabled) {
+      swiper.setGrabCursor();
+    }
+
+    if (swiper.params.preloadImages) {
+      swiper.preloadImages();
+    } // Slide To Initial Slide
+
+
+    if (swiper.params.loop) {
+      swiper.slideTo(swiper.params.initialSlide + swiper.loopedSlides, 0, swiper.params.runCallbacksOnInit, false, true);
+    } else {
+      swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit, false, true);
+    } // Attach events
+
+
+    swiper.attachEvents(); // Init Flag
+
+    swiper.initialized = true; // Emit
+
+    swiper.emit('init');
+    swiper.emit('afterInit');
+    return swiper;
+  }
+
+  destroy(deleteInstance = true, cleanStyles = true) {
+    const swiper = this;
+    const {
+      params,
+      $el,
+      $wrapperEl,
+      slides
+    } = swiper;
+
+    if (typeof swiper.params === 'undefined' || swiper.destroyed) {
+      return null;
+    }
+
+    swiper.emit('beforeDestroy'); // Init Flag
+
+    swiper.initialized = false; // Detach events
+
+    swiper.detachEvents(); // Destroy loop
+
+    if (params.loop) {
+      swiper.loopDestroy();
+    } // Cleanup styles
+
+
+    if (cleanStyles) {
+      swiper.removeClasses();
+      $el.removeAttr('style');
+      $wrapperEl.removeAttr('style');
+
+      if (slides && slides.length) {
+        slides.removeClass([params.slideVisibleClass, params.slideActiveClass, params.slideNextClass, params.slidePrevClass].join(' ')).removeAttr('style').removeAttr('data-swiper-slide-index');
+      }
+    }
+
+    swiper.emit('destroy'); // Detach emitter events
+
+    Object.keys(swiper.eventsListeners).forEach(eventName => {
+      swiper.off(eventName);
+    });
+
+    if (deleteInstance !== false) {
+      swiper.$el[0].swiper = null;
+      deleteProps(swiper);
+    }
+
+    swiper.destroyed = true;
+    return null;
+  }
+
+  static extendDefaults(newDefaults) {
+    extend(extendedDefaults, newDefaults);
+  }
+
+  static get extendedDefaults() {
+    return extendedDefaults;
+  }
+
+  static get defaults() {
+    return defaults;
+  }
+
+  static installModule(mod) {
+    if (!Swiper.prototype.__modules__) Swiper.prototype.__modules__ = [];
+    const modules = Swiper.prototype.__modules__;
+
+    if (typeof mod === 'function' && modules.indexOf(mod) < 0) {
+      modules.push(mod);
+    }
+  }
+
+  static use(module) {
+    if (Array.isArray(module)) {
+      module.forEach(m => Swiper.installModule(m));
+      return Swiper;
+    }
+
+    Swiper.installModule(module);
+    return Swiper;
+  }
+
+}
+
+Object.keys(prototypes).forEach(prototypeGroup => {
+  Object.keys(prototypes[prototypeGroup]).forEach(protoMethod => {
+    Swiper.prototype[protoMethod] = prototypes[prototypeGroup][protoMethod];
+  });
+});
+Swiper.use([Resize, Observer]);
+export default Swiper;
--- a/resources/web/guide/swiper/core/defaults.js
+++ b/resources/web/guide/swiper/core/defaults.js
@@ -0,0 +1,120 @@
+export default {
+  init: true,
+  direction: 'horizontal',
+  touchEventsTarget: 'wrapper',
+  initialSlide: 0,
+  speed: 300,
+  cssMode: false,
+  updateOnWindowResize: true,
+  resizeObserver: true,
+  nested: false,
+  createElements: false,
+  enabled: true,
+  focusableElements: 'input, select, option, textarea, button, video, label',
+  // Overrides
+  width: null,
+  height: null,
+  //
+  preventInteractionOnTransition: false,
+  // ssr
+  userAgent: null,
+  url: null,
+  // To support iOS's swipe-to-go-back gesture (when being used in-app).
+  edgeSwipeDetection: false,
+  edgeSwipeThreshold: 20,
+  // Autoheight
+  autoHeight: false,
+  // Set wrapper width
+  setWrapperSize: false,
+  // Virtual Translate
+  virtualTranslate: false,
+  // Effects
+  effect: 'slide',
+  // 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
+  // Breakpoints
+  breakpoints: undefined,
+  breakpointsBase: 'window',
+  // Slides grid
+  spaceBetween: 0,
+  slidesPerView: 1,
+  slidesPerGroup: 1,
+  slidesPerGroupSkip: 0,
+  slidesPerGroupAuto: false,
+  centeredSlides: false,
+  centeredSlidesBounds: false,
+  slidesOffsetBefore: 0,
+  // in px
+  slidesOffsetAfter: 0,
+  // in px
+  normalizeSlideIndex: true,
+  centerInsufficientSlides: false,
+  // Disable swiper and hide navigation when container not overflow
+  watchOverflow: true,
+  // Round length
+  roundLengths: false,
+  // Touches
+  touchRatio: 1,
+  touchAngle: 45,
+  simulateTouch: true,
+  shortSwipes: true,
+  longSwipes: true,
+  longSwipesRatio: 0.5,
+  longSwipesMs: 300,
+  followFinger: true,
+  allowTouchMove: true,
+  threshold: 0,
+  touchMoveStopPropagation: false,
+  touchStartPreventDefault: true,
+  touchStartForcePreventDefault: false,
+  touchReleaseOnEdges: false,
+  // Unique Navigation Elements
+  uniqueNavElements: true,
+  // Resistance
+  resistance: true,
+  resistanceRatio: 0.85,
+  // Progress
+  watchSlidesProgress: false,
+  // Cursor
+  grabCursor: false,
+  // Clicks
+  preventClicks: true,
+  preventClicksPropagation: true,
+  slideToClickedSlide: false,
+  // Images
+  preloadImages: true,
+  updateOnImagesReady: true,
+  // loop
+  loop: false,
+  loopAdditionalSlides: 0,
+  loopedSlides: null,
+  loopFillGroupWithBlank: false,
+  loopPreventsSlide: true,
+  // Swiping/no swiping
+  allowSlidePrev: true,
+  allowSlideNext: true,
+  swipeHandler: null,
+  // '.swipe-handler',
+  noSwiping: true,
+  noSwipingClass: 'swiper-no-swiping',
+  noSwipingSelector: null,
+  // Passive Listeners
+  passiveListeners: true,
+  // NS
+  containerModifierClass: 'swiper-',
+  // NEW
+  slideClass: 'swiper-slide',
+  slideBlankClass: 'swiper-slide-invisible-blank',
+  slideActiveClass: 'swiper-slide-active',
+  slideDuplicateActiveClass: 'swiper-slide-duplicate-active',
+  slideVisibleClass: 'swiper-slide-visible',
+  slideDuplicateClass: 'swiper-slide-duplicate',
+  slideNextClass: 'swiper-slide-next',
+  slideDuplicateNextClass: 'swiper-slide-duplicate-next',
+  slidePrevClass: 'swiper-slide-prev',
+  slideDuplicatePrevClass: 'swiper-slide-duplicate-prev',
+  wrapperClass: 'swiper-wrapper',
+  // Callbacks
+  runCallbacksOnInit: true,
+  // Internals
+  _emitClasses: false
+};
--- a/resources/web/guide/swiper/core/events-emitter.js
+++ b/resources/web/guide/swiper/core/events-emitter.js
@@ -0,0 +1,108 @@
+/* eslint-disable no-underscore-dangle */
+export default {
+  on(events, handler, priority) {
+    const self = this;
+    if (typeof handler !== 'function') return self;
+    const method = priority ? 'unshift' : 'push';
+    events.split(' ').forEach(event => {
+      if (!self.eventsListeners[event]) self.eventsListeners[event] = [];
+      self.eventsListeners[event][method](handler);
+    });
+    return self;
+  },
+
+  once(events, handler, priority) {
+    const self = this;
+    if (typeof handler !== 'function') return self;
+
+    function onceHandler(...args) {
+      self.off(events, onceHandler);
+
+      if (onceHandler.__emitterProxy) {
+        delete onceHandler.__emitterProxy;
+      }
+
+      handler.apply(self, args);
+    }
+
+    onceHandler.__emitterProxy = handler;
+    return self.on(events, onceHandler, priority);
+  },
+
+  onAny(handler, priority) {
+    const self = this;
+    if (typeof handler !== 'function') return self;
+    const method = priority ? 'unshift' : 'push';
+
+    if (self.eventsAnyListeners.indexOf(handler) < 0) {
+      self.eventsAnyListeners[method](handler);
+    }
+
+    return self;
+  },
+
+  offAny(handler) {
+    const self = this;
+    if (!self.eventsAnyListeners) return self;
+    const index = self.eventsAnyListeners.indexOf(handler);
+
+    if (index >= 0) {
+      self.eventsAnyListeners.splice(index, 1);
+    }
+
+    return self;
+  },
+
+  off(events, handler) {
+    const self = this;
+    if (!self.eventsListeners) return self;
+    events.split(' ').forEach(event => {
+      if (typeof handler === 'undefined') {
+        self.eventsListeners[event] = [];
+      } else if (self.eventsListeners[event]) {
+        self.eventsListeners[event].forEach((eventHandler, index) => {
+          if (eventHandler === handler || eventHandler.__emitterProxy && eventHandler.__emitterProxy === handler) {
+            self.eventsListeners[event].splice(index, 1);
+          }
+        });
+      }
+    });
+    return self;
+  },
+
+  emit(...args) {
+    const self = this;
+    if (!self.eventsListeners) return self;
+    let events;
+    let data;
+    let context;
+
+    if (typeof args[0] === 'string' || Array.isArray(args[0])) {
+      events = args[0];
+      data = args.slice(1, args.length);
+      context = self;
+    } else {
+      events = args[0].events;
+      data = args[0].data;
+      context = args[0].context || self;
+    }
+
+    data.unshift(context);
+    const eventsArray = Array.isArray(events) ? events : events.split(' ');
+    eventsArray.forEach(event => {
+      if (self.eventsAnyListeners && self.eventsAnyListeners.length) {
+        self.eventsAnyListeners.forEach(eventHandler => {
+          eventHandler.apply(context, [event, ...data]);
+        });
+      }
+
+      if (self.eventsListeners && self.eventsListeners[event]) {
+        self.eventsListeners[event].forEach(eventHandler => {
+          eventHandler.apply(context, data);
+        });
+      }
+    });
+    return self;
+  }
+
+};
--- a/resources/web/guide/swiper/core/events/index.js
+++ b/resources/web/guide/swiper/core/events/index.js
@@ -0,0 +1,97 @@
+import { getDocument } from 'ssr-window';
+import onTouchStart from './onTouchStart.js';
+import onTouchMove from './onTouchMove.js';
+import onTouchEnd from './onTouchEnd.js';
+import onResize from './onResize.js';
+import onClick from './onClick.js';
+import onScroll from './onScroll.js';
+let dummyEventAttached = false;
+
+function dummyEventListener() {}
+
+const events = (swiper, method) => {
+  const document = getDocument();
+  const {
+    params,
+    touchEvents,
+    el,
+    wrapperEl,
+    device,
+    support
+  } = swiper;
+  const capture = !!params.nested;
+  const domMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';
+  const swiperMethod = method; // Touch Events
+
+  if (!support.touch) {
+    el[domMethod](touchEvents.start, swiper.onTouchStart, false);
+    document[domMethod](touchEvents.move, swiper.onTouchMove, capture);
+    document[domMethod](touchEvents.end, swiper.onTouchEnd, false);
+  } else {
+    const passiveListener = touchEvents.start === 'touchstart' && support.passiveListener && params.passiveListeners ? {
+      passive: true,
+      capture: false
+    } : false;
+    el[domMethod](touchEvents.start, swiper.onTouchStart, passiveListener);
+    el[domMethod](touchEvents.move, swiper.onTouchMove, support.passiveListener ? {
+      passive: false,
+      capture
+    } : capture);
+    el[domMethod](touchEvents.end, swiper.onTouchEnd, passiveListener);
+
+    if (touchEvents.cancel) {
+      el[domMethod](touchEvents.cancel, swiper.onTouchEnd, passiveListener);
+    }
+  } // Prevent Links Clicks
+
+
+  if (params.preventClicks || params.preventClicksPropagation) {
+    el[domMethod]('click', swiper.onClick, true);
+  }
+
+  if (params.cssMode) {
+    wrapperEl[domMethod]('scroll', swiper.onScroll);
+  } // Resize handler
+
+
+  if (params.updateOnWindowResize) {
+    swiper[swiperMethod](device.ios || device.android ? 'resize orientationchange observerUpdate' : 'resize observerUpdate', onResize, true);
+  } else {
+    swiper[swiperMethod]('observerUpdate', onResize, true);
+  }
+};
+
+function attachEvents() {
+  const swiper = this;
+  const document = getDocument();
+  const {
+    params,
+    support
+  } = swiper;
+  swiper.onTouchStart = onTouchStart.bind(swiper);
+  swiper.onTouchMove = onTouchMove.bind(swiper);
+  swiper.onTouchEnd = onTouchEnd.bind(swiper);
+
+  if (params.cssMode) {
+    swiper.onScroll = onScroll.bind(swiper);
+  }
+
+  swiper.onClick = onClick.bind(swiper);
+
+  if (support.touch && !dummyEventAttached) {
+    document.addEventListener('touchstart', dummyEventListener);
+    dummyEventAttached = true;
+  }
+
+  events(swiper, 'on');
+}
+
+function detachEvents() {
+  const swiper = this;
+  events(swiper, 'off');
+}
+
+export default {
+  attachEvents,
+  detachEvents
+};
--- a/resources/web/guide/swiper/core/events/onClick.js
+++ b/resources/web/guide/swiper/core/events/onClick.js
@@ -0,0 +1,13 @@
+export default function onClick(e) {
+  const swiper = this;
+  if (!swiper.enabled) return;
+
+  if (!swiper.allowClick) {
+    if (swiper.params.preventClicks) e.preventDefault();
+
+    if (swiper.params.preventClicksPropagation && swiper.animating) {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+    }
+  }
+}
--- a/resources/web/guide/swiper/core/events/onResize.js
+++ b/resources/web/guide/swiper/core/events/onResize.js
@@ -0,0 +1,43 @@
+export default function onResize() {
+  const swiper = this;
+  const {
+    params,
+    el
+  } = swiper;
+  if (el && el.offsetWidth === 0) return; // Breakpoints
+
+  if (params.breakpoints) {
+    swiper.setBreakpoint();
+  } // Save locks
+
+
+  const {
+    allowSlideNext,
+    allowSlidePrev,
+    snapGrid
+  } = swiper; // Disable locks on resize
+
+  swiper.allowSlideNext = true;
+  swiper.allowSlidePrev = true;
+  swiper.updateSize();
+  swiper.updateSlides();
+  swiper.updateSlidesClasses();
+
+  if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !swiper.isBeginning && !swiper.params.centeredSlides) {
+    swiper.slideTo(swiper.slides.length - 1, 0, false, true);
+  } else {
+    swiper.slideTo(swiper.activeIndex, 0, false, true);
+  }
+
+  if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
+    swiper.autoplay.run();
+  } // Return locks after resize
+
+
+  swiper.allowSlidePrev = allowSlidePrev;
+  swiper.allowSlideNext = allowSlideNext;
+
+  if (swiper.params.watchOverflow && snapGrid !== swiper.snapGrid) {
+    swiper.checkOverflow();
+  }
+}
--- a/resources/web/guide/swiper/core/events/onScroll.js
+++ b/resources/web/guide/swiper/core/events/onScroll.js
@@ -0,0 +1,35 @@
+export default function onScroll() {
+  const swiper = this;
+  const {
+    wrapperEl,
+    rtlTranslate,
+    enabled
+  } = swiper;
+  if (!enabled) return;
+  swiper.previousTranslate = swiper.translate;
+
+  if (swiper.isHorizontal()) {
+    swiper.translate = -wrapperEl.scrollLeft;
+  } else {
+    swiper.translate = -wrapperEl.scrollTop;
+  } // eslint-disable-next-line
+
+
+  if (swiper.translate === -0) swiper.translate = 0;
+  swiper.updateActiveIndex();
+  swiper.updateSlidesClasses();
+  let newProgress;
+  const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();
+
+  if (translatesDiff === 0) {
+    newProgress = 0;
+  } else {
+    newProgress = (swiper.translate - swiper.minTranslate()) / translatesDiff;
+  }
+
+  if (newProgress !== swiper.progress) {
+    swiper.updateProgress(rtlTranslate ? -swiper.translate : swiper.translate);
+  }
+
+  swiper.emit('setTranslate', swiper.translate, false);
+}
--- a/resources/web/guide/swiper/core/events/onTouchEnd.js
+++ b/resources/web/guide/swiper/core/events/onTouchEnd.js
@@ -0,0 +1,143 @@
+import { now, nextTick } from '../../shared/utils.js';
+export default function onTouchEnd(event) {
+  const swiper = this;
+  const data = swiper.touchEventsData;
+  const {
+    params,
+    touches,
+    rtlTranslate: rtl,
+    slidesGrid,
+    enabled
+  } = swiper;
+  if (!enabled) return;
+  let e = event;
+  if (e.originalEvent) e = e.originalEvent;
+
+  if (data.allowTouchCallbacks) {
+    swiper.emit('touchEnd', e);
+  }
+
+  data.allowTouchCallbacks = false;
+
+  if (!data.isTouched) {
+    if (data.isMoved && params.grabCursor) {
+      swiper.setGrabCursor(false);
+    }
+
+    data.isMoved = false;
+    data.startMoving = false;
+    return;
+  } // Return Grab Cursor
+
+
+  if (params.grabCursor && data.isMoved && data.isTouched && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
+    swiper.setGrabCursor(false);
+  } // Time diff
+
+
+  const touchEndTime = now();
+  const timeDiff = touchEndTime - data.touchStartTime; // Tap, doubleTap, Click
+
+  if (swiper.allowClick) {
+    swiper.updateClickedSlide(e);
+    swiper.emit('tap click', e);
+
+    if (timeDiff < 300 && touchEndTime - data.lastClickTime < 300) {
+      swiper.emit('doubleTap doubleClick', e);
+    }
+  }
+
+  data.lastClickTime = now();
+  nextTick(() => {
+    if (!swiper.destroyed) swiper.allowClick = true;
+  });
+
+  if (!data.isTouched || !data.isMoved || !swiper.swipeDirection || touches.diff === 0 || data.currentTranslate === data.startTranslate) {
+    data.isTouched = false;
+    data.isMoved = false;
+    data.startMoving = false;
+    return;
+  }
+
+  data.isTouched = false;
+  data.isMoved = false;
+  data.startMoving = false;
+  let currentPos;
+
+  if (params.followFinger) {
+    currentPos = rtl ? swiper.translate : -swiper.translate;
+  } else {
+    currentPos = -data.currentTranslate;
+  }
+
+  if (params.cssMode) {
+    return;
+  }
+
+  if (swiper.params.freeMode && params.freeMode.enabled) {
+    swiper.freeMode.onTouchEnd({
+      currentPos
+    });
+    return;
+  } // Find current slide
+
+
+  let stopIndex = 0;
+  let groupSize = swiper.slidesSizesGrid[0];
+
+  for (let i = 0; i < slidesGrid.length; i += i < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup) {
+    const increment = i < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
+
+    if (typeof slidesGrid[i + increment] !== 'undefined') {
+      if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + increment]) {
+        stopIndex = i;
+        groupSize = slidesGrid[i + increment] - slidesGrid[i];
+      }
+    } else if (currentPos >= slidesGrid[i]) {
+      stopIndex = i;
+      groupSize = slidesGrid[slidesGrid.length - 1] - slidesGrid[slidesGrid.length - 2];
+    }
+  } // Find current slide size
+
+
+  const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;
+  const increment = stopIndex < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
+
+  if (timeDiff > params.longSwipesMs) {
+    // Long touches
+    if (!params.longSwipes) {
+      swiper.slideTo(swiper.activeIndex);
+      return;
+    }
+
+    if (swiper.swipeDirection === 'next') {
+      if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + increment);else swiper.slideTo(stopIndex);
+    }
+
+    if (swiper.swipeDirection === 'prev') {
+      if (ratio > 1 - params.longSwipesRatio) swiper.slideTo(stopIndex + increment);else swiper.slideTo(stopIndex);
+    }
+  } else {
+    // Short swipes
+    if (!params.shortSwipes) {
+      swiper.slideTo(swiper.activeIndex);
+      return;
+    }
+
+    const isNavButtonTarget = swiper.navigation && (e.target === swiper.navigation.nextEl || e.target === swiper.navigation.prevEl);
+
+    if (!isNavButtonTarget) {
+      if (swiper.swipeDirection === 'next') {
+        swiper.slideTo(stopIndex + increment);
+      }
+
+      if (swiper.swipeDirection === 'prev') {
+        swiper.slideTo(stopIndex);
+      }
+    } else if (e.target === swiper.navigation.nextEl) {
+      swiper.slideTo(stopIndex + increment);
+    } else {
+      swiper.slideTo(stopIndex);
+    }
+  }
+}
--- a/resources/web/guide/swiper/core/events/onTouchMove.js
+++ b/resources/web/guide/swiper/core/events/onTouchMove.js
@@ -0,0 +1,222 @@
+import { getDocument } from 'ssr-window';
+import $ from '../../shared/dom.js';
+import { now } from '../../shared/utils.js';
+export default function onTouchMove(event) {
+  const document = getDocument();
+  const swiper = this;
+  const data = swiper.touchEventsData;
+  const {
+    params,
+    touches,
+    rtlTranslate: rtl,
+    enabled
+  } = swiper;
+  if (!enabled) return;
+  let e = event;
+  if (e.originalEvent) e = e.originalEvent;
+
+  if (!data.isTouched) {
+    if (data.startMoving && data.isScrolling) {
+      swiper.emit('touchMoveOpposite', e);
+    }
+
+    return;
+  }
+
+  if (data.isTouchEvent && e.type !== 'touchmove') return;
+  const targetTouch = e.type === 'touchmove' && e.targetTouches && (e.targetTouches[0] || e.changedTouches[0]);
+  const pageX = e.type === 'touchmove' ? targetTouch.pageX : e.pageX;
+  const pageY = e.type === 'touchmove' ? targetTouch.pageY : e.pageY;
+
+  if (e.preventedByNestedSwiper) {
+    touches.startX = pageX;
+    touches.startY = pageY;
+    return;
+  }
+
+  if (!swiper.allowTouchMove) {
+    // isMoved = true;
+    swiper.allowClick = false;
+
+    if (data.isTouched) {
+      Object.assign(touches, {
+        startX: pageX,
+        startY: pageY,
+        currentX: pageX,
+        currentY: pageY
+      });
+      data.touchStartTime = now();
+    }
+
+    return;
+  }
+
+  if (data.isTouchEvent && params.touchReleaseOnEdges && !params.loop) {
+    if (swiper.isVertical()) {
+      // Vertical
+      if (pageY < touches.startY && swiper.translate <= swiper.maxTranslate() || pageY > touches.startY && swiper.translate >= swiper.minTranslate()) {
+        data.isTouched = false;
+        data.isMoved = false;
+        return;
+      }
+    } else if (pageX < touches.startX && swiper.translate <= swiper.maxTranslate() || pageX > touches.startX && swiper.translate >= swiper.minTranslate()) {
+      return;
+    }
+  }
+
+  if (data.isTouchEvent && document.activeElement) {
+    if (e.target === document.activeElement && $(e.target).is(data.focusableElements)) {
+      data.isMoved = true;
+      swiper.allowClick = false;
+      return;
+    }
+  }
+
+  if (data.allowTouchCallbacks) {
+    swiper.emit('touchMove', e);
+  }
+
+  if (e.targetTouches && e.targetTouches.length > 1) return;
+  touches.currentX = pageX;
+  touches.currentY = pageY;
+  const diffX = touches.currentX - touches.startX;
+  const diffY = touches.currentY - touches.startY;
+  if (swiper.params.threshold && Math.sqrt(diffX ** 2 + diffY ** 2) < swiper.params.threshold) return;
+
+  if (typeof data.isScrolling === 'undefined') {
+    let touchAngle;
+
+    if (swiper.isHorizontal() && touches.currentY === touches.startY || swiper.isVertical() && touches.currentX === touches.startX) {
+      data.isScrolling = false;
+    } else {
+      // eslint-disable-next-line
+      if (diffX * diffX + diffY * diffY >= 25) {
+        touchAngle = Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180 / Math.PI;
+        data.isScrolling = swiper.isHorizontal() ? touchAngle > params.touchAngle : 90 - touchAngle > params.touchAngle;
+      }
+    }
+  }
+
+  if (data.isScrolling) {
+    swiper.emit('touchMoveOpposite', e);
+  }
+
+  if (typeof data.startMoving === 'undefined') {
+    if (touches.currentX !== touches.startX || touches.currentY !== touches.startY) {
+      data.startMoving = true;
+    }
+  }
+
+  if (data.isScrolling) {
+    data.isTouched = false;
+    return;
+  }
+
+  if (!data.startMoving) {
+    return;
+  }
+
+  swiper.allowClick = false;
+
+  if (!params.cssMode && e.cancelable) {
+    e.preventDefault();
+  }
+
+  if (params.touchMoveStopPropagation && !params.nested) {
+    e.stopPropagation();
+  }
+
+  if (!data.isMoved) {
+    if (params.loop && !params.cssMode) {
+      swiper.loopFix();
+    }
+
+    data.startTranslate = swiper.getTranslate();
+    swiper.setTransition(0);
+
+    if (swiper.animating) {
+      swiper.$wrapperEl.trigger('webkitTransitionEnd transitionend');
+    }
+
+    data.allowMomentumBounce = false; // Grab Cursor
+
+    if (params.grabCursor && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
+      swiper.setGrabCursor(true);
+    }
+
+    swiper.emit('sliderFirstMove', e);
+  }
+
+  swiper.emit('sliderMove', e);
+  data.isMoved = true;
+  let diff = swiper.isHorizontal() ? diffX : diffY;
+  touches.diff = diff;
+  diff *= params.touchRatio;
+  if (rtl) diff = -diff;
+  swiper.swipeDirection = diff > 0 ? 'prev' : 'next';
+  data.currentTranslate = diff + data.startTranslate;
+  let disableParentSwiper = true;
+  let resistanceRatio = params.resistanceRatio;
+
+  if (params.touchReleaseOnEdges) {
+    resistanceRatio = 0;
+  }
+
+  if (diff > 0 && data.currentTranslate > swiper.minTranslate()) {
+    disableParentSwiper = false;
+    if (params.resistance) data.currentTranslate = swiper.minTranslate() - 1 + (-swiper.minTranslate() + data.startTranslate + diff) ** resistanceRatio;
+  } else if (diff < 0 && data.currentTranslate < swiper.maxTranslate()) {
+    disableParentSwiper = false;
+    if (params.resistance) data.currentTranslate = swiper.maxTranslate() + 1 - (swiper.maxTranslate() - data.startTranslate - diff) ** resistanceRatio;
+  }
+
+  if (disableParentSwiper) {
+    e.preventedByNestedSwiper = true;
+  } // Directions locks
+
+
+  if (!swiper.allowSlideNext && swiper.swipeDirection === 'next' && data.currentTranslate < data.startTranslate) {
+    data.currentTranslate = data.startTranslate;
+  }
+
+  if (!swiper.allowSlidePrev && swiper.swipeDirection === 'prev' && data.currentTranslate > data.startTranslate) {
+    data.currentTranslate = data.startTranslate;
+  }
+
+  if (!swiper.allowSlidePrev && !swiper.allowSlideNext) {
+    data.currentTranslate = data.startTranslate;
+  } // Threshold
+
+
+  if (params.threshold > 0) {
+    if (Math.abs(diff) > params.threshold || data.allowThresholdMove) {
+      if (!data.allowThresholdMove) {
+        data.allowThresholdMove = true;
+        touches.startX = touches.currentX;
+        touches.startY = touches.currentY;
+        data.currentTranslate = data.startTranslate;
+        touches.diff = swiper.isHorizontal() ? touches.currentX - touches.startX : touches.currentY - touches.startY;
+        return;
+      }
+    } else {
+      data.currentTranslate = data.startTranslate;
+      return;
+    }
+  }
+
+  if (!params.followFinger || params.cssMode) return; // Update active index in free mode
+
+  if (params.freeMode && params.freeMode.enabled && swiper.freeMode || params.watchSlidesProgress) {
+    swiper.updateActiveIndex();
+    swiper.updateSlidesClasses();
+  }
+
+  if (swiper.params.freeMode && params.freeMode.enabled && swiper.freeMode) {
+    swiper.freeMode.onTouchMove();
+  } // Update progress
+
+
+  swiper.updateProgress(data.currentTranslate); // Update translate
+
+  swiper.setTranslate(data.currentTranslate);
+}
--- a/resources/web/guide/swiper/core/events/onTouchStart.js
+++ b/resources/web/guide/swiper/core/events/onTouchStart.js
@@ -0,0 +1,114 @@
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom.js';
+import { now } from '../../shared/utils.js'; // Modified from https://stackoverflow.com/questions/54520554/custom-element-getrootnode-closest-function-crossing-multiple-parent-shadowd
+
+function closestElement(selector, base = this) {
+  function __closestFrom(el) {
+    if (!el || el === getDocument() || el === getWindow()) return null;
+    if (el.assignedSlot) el = el.assignedSlot;
+    const found = el.closest(selector);
+    return found || __closestFrom(el.getRootNode().host);
+  }
+
+  return __closestFrom(base);
+}
+
+export default function onTouchStart(event) {
+  const swiper = this;
+  const document = getDocument();
+  const window = getWindow();
+  const data = swiper.touchEventsData;
+  const {
+    params,
+    touches,
+    enabled
+  } = swiper;
+  if (!enabled) return;
+
+  if (swiper.animating && params.preventInteractionOnTransition) {
+    return;
+  }
+
+  if (!swiper.animating && params.cssMode && params.loop) {
+    swiper.loopFix();
+  }
+
+  let e = event;
+  if (e.originalEvent) e = e.originalEvent;
+  let $targetEl = $(e.target);
+
+  if (params.touchEventsTarget === 'wrapper') {
+    if (!$targetEl.closest(swiper.wrapperEl).length) return;
+  }
+
+  data.isTouchEvent = e.type === 'touchstart';
+  if (!data.isTouchEvent && 'which' in e && e.which === 3) return;
+  if (!data.isTouchEvent && 'button' in e && e.button > 0) return;
+  if (data.isTouched && data.isMoved) return; // change target el for shadow root component
+
+  const swipingClassHasValue = !!params.noSwipingClass && params.noSwipingClass !== '';
+
+  if (swipingClassHasValue && e.target && e.target.shadowRoot && event.path && event.path[0]) {
+    $targetEl = $(event.path[0]);
+  }
+
+  const noSwipingSelector = params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`;
+  const isTargetShadow = !!(e.target && e.target.shadowRoot); // use closestElement for shadow root element to get the actual closest for nested shadow root element
+
+  if (params.noSwiping && (isTargetShadow ? closestElement(noSwipingSelector, e.target) : $targetEl.closest(noSwipingSelector)[0])) {
+    swiper.allowClick = true;
+    return;
+  }
+
+  if (params.swipeHandler) {
+    if (!$targetEl.closest(params.swipeHandler)[0]) return;
+  }
+
+  touches.currentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+  touches.currentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+  const startX = touches.currentX;
+  const startY = touches.currentY; // Do NOT start if iOS edge swipe is detected. Otherwise iOS app cannot swipe-to-go-back anymore
+
+  const edgeSwipeDetection = params.edgeSwipeDetection || params.iOSEdgeSwipeDetection;
+  const edgeSwipeThreshold = params.edgeSwipeThreshold || params.iOSEdgeSwipeThreshold;
+
+  if (edgeSwipeDetection && (startX <= edgeSwipeThreshold || startX >= window.innerWidth - edgeSwipeThreshold)) {
+    if (edgeSwipeDetection === 'prevent') {
+      event.preventDefault();
+    } else {
+      return;
+    }
+  }
+
+  Object.assign(data, {
+    isTouched: true,
+    isMoved: false,
+    allowTouchCallbacks: true,
+    isScrolling: undefined,
+    startMoving: undefined
+  });
+  touches.startX = startX;
+  touches.startY = startY;
+  data.touchStartTime = now();
+  swiper.allowClick = true;
+  swiper.updateSize();
+  swiper.swipeDirection = undefined;
+  if (params.threshold > 0) data.allowThresholdMove = false;
+
+  if (e.type !== 'touchstart') {
+    let preventDefault = true;
+    if ($targetEl.is(data.focusableElements)) preventDefault = false;
+
+    if (document.activeElement && $(document.activeElement).is(data.focusableElements) && document.activeElement !== $targetEl[0]) {
+      document.activeElement.blur();
+    }
+
+    const shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault;
+
+    if ((params.touchStartForcePreventDefault || shouldPreventDefault) && !$targetEl[0].isContentEditable) {
+      e.preventDefault();
+    }
+  }
+
+  swiper.emit('touchStart', e);
+}
--- a/resources/web/guide/swiper/core/grab-cursor/index.js
+++ b/resources/web/guide/swiper/core/grab-cursor/index.js
@@ -0,0 +1,6 @@
+import setGrabCursor from './setGrabCursor.js';
+import unsetGrabCursor from './unsetGrabCursor.js';
+export default {
+  setGrabCursor,
+  unsetGrabCursor
+};
--- a/resources/web/guide/swiper/core/grab-cursor/setGrabCursor.js
+++ b/resources/web/guide/swiper/core/grab-cursor/setGrabCursor.js
@@ -0,0 +1,9 @@
+export default function setGrabCursor(moving) {
+  const swiper = this;
+  if (swiper.support.touch || !swiper.params.simulateTouch || swiper.params.watchOverflow && swiper.isLocked || swiper.params.cssMode) return;
+  const el = swiper.params.touchEventsTarget === 'container' ? swiper.el : swiper.wrapperEl;
+  el.style.cursor = 'move';
+  el.style.cursor = moving ? '-webkit-grabbing' : '-webkit-grab';
+  el.style.cursor = moving ? '-moz-grabbin' : '-moz-grab';
+  el.style.cursor = moving ? 'grabbing' : 'grab';
+}
--- a/resources/web/guide/swiper/core/grab-cursor/unsetGrabCursor.js
+++ b/resources/web/guide/swiper/core/grab-cursor/unsetGrabCursor.js
@@ -0,0 +1,9 @@
+export default function unsetGrabCursor() {
+  const swiper = this;
+
+  if (swiper.support.touch || swiper.params.watchOverflow && swiper.isLocked || swiper.params.cssMode) {
+    return;
+  }
+
+  swiper[swiper.params.touchEventsTarget === 'container' ? 'el' : 'wrapperEl'].style.cursor = '';
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><rect x="0.5" y="1.5" width="14" height="14" rx="1" style="fill:none;stroke:#949494;stroke-miterlimit:10;opacity:1"/></svg>`