appscms-tools-theme 4.5.4 → 4.5.5

data/_includes/appscms/home/devtool-feature-boxes.html

@@ -1,71 +1,71 @@
-<style>
-.appscms-contenttool-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 16px;
-}
-.appscms-contenttool-tool {
-  background-color: white;
-  padding: 21px;
-  border-radius: 13px;
-  transition: all 0.2s ease-in-out;
-}
-.appscms-contenttool-tool:hover {
-  transform: scale(1.03);
-  filter: saturate(1.3);
-}
-.contentool-tool-image-background {
-  background-color: rgba(255, 255, 255, 0.87);
-  width: 58px;
-  height: 58px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-}
-
-#contenttool-icon-img{
-  width: 45px;
-}
-.background img {
-  width: 100%;
-  height: auto;
-  border-radius: 10px;
-}
-.contenttool-tool-heading {
-  font-weight: 600;
-  font-size: 16px;
-  color: #0c0c0c !important;
-  margin-top: 10px;
-}
-.contenttool-tool-text{
-  font-weight: 500;
-  font-size: 13px;
-  color: rgb(29, 29, 29) !important;
-  margin-top: -5px;
-}
-#text-black{
-  color: rgb(39, 39, 39) !important;
-  font-weight: 450;
-}
-</style>
-<div class="container" id="appscms-tools-section">
-    <div class="appscms-contenttool-container">
-          {% for item in pageData.features %}
-            <a href="{{item.url}}">
-            <div class="appscms-contenttool-tool" style="background: {{item.color}};">
-              <div class="contentool-tool-image-background">
-                <img id="contenttool-icon-img" crossorigin="anonymous" src="{{item.icon}}" alt="img" />
-              </div>
-                <div class="contenttool-card-info">
-                  <p class="contenttool-tool-heading">{{item.name}}</p>
-                <p class="contenttool-tool-textk" id="text-black">{{item.description}}</p>
-                </div>
-            </div>
-          </a>
-          {% endfor %}
-        </div>
-      </div>
-    </div>
-  </div>
+<style>
+.appscms-contenttool-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+}
+.appscms-contenttool-tool {
+  background-color: white;
+  padding: 21px;
+  border-radius: 13px;
+  transition: all 0.2s ease-in-out;
+}
+.appscms-contenttool-tool:hover {
+  transform: scale(1.03);
+  filter: saturate(1.3);
+}
+.contentool-tool-image-background {
+  background-color: rgba(255, 255, 255, 0.87);
+  width: 58px;
+  height: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+}
+
+#contenttool-icon-img{
+  width: 45px;
+}
+.background img {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
+.contenttool-tool-heading {
+  font-weight: 600;
+  font-size: 16px;
+  color: #0c0c0c !important;
+  margin-top: 10px;
+}
+.contenttool-tool-text{
+  font-weight: 500;
+  font-size: 13px;
+  color: rgb(29, 29, 29) !important;
+  margin-top: -5px;
+}
+#text-black{
+  color: rgb(39, 39, 39) !important;
+  font-weight: 450;
+}
+</style>
+<div class="container" id="appscms-tools-section">
+    <div class="appscms-contenttool-container">
+          {% for item in pageData.features %}
+            <a href="{{item.url}}">
+            <div class="appscms-contenttool-tool" style="background: {{item.color}};">
+              <div class="contentool-tool-image-background">
+                <img id="contenttool-icon-img" crossorigin="anonymous" src="{{item.icon}}" alt="img" />
+              </div>
+                <div class="contenttool-card-info">
+                  <p class="contenttool-tool-heading">{{item.name}}</p>
+                <p class="contenttool-tool-textk" id="text-black">{{item.description}}</p>
+                </div>
+            </div>
+          </a>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
   

data/_includes/appscms/infographics/infographics.html

@@ -1,160 +1,160 @@
-<style>
-  .modal {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(59, 58, 58, 0.9);
-  }
-  .modal-content {
-    margin: auto;
-    display: block;
-    width: 80%;
-    max-width: 800px;
-    margin-top: 20px;
-  }
-  .modal-body img {
-    width: 100%;
-    height: auto;
-  }
-  .close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 24px;
-  color: #fff;
-  cursor: pointer;
-}
-.close:hover {
-  color: #ccc;
-}
-</style>
-<div class="inforgraphics_section">
-  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
-  <div class="wrapper">
-    <i id="left" class="fas fa-angle-left"></i>
-    <div class="carousel">
-      <div class="carousel-inner">
-        {%- if pageData.infographics -%} {% for item in pageData.infographics %}
-        <div class="slide">
-          <img
-            loading="lazy"
-            src="{{ item.image }}"
-            alt="img"
-            draggable="false"
-            class="infographic-img"
-            onclick="openModal('{{ item.image }}')"
-          />
-          <p class="infographic-desc">{{ item.description | capitalize }}</p>
-        </div>
-        {% endfor %} {%- endif -%}
-      </div>
-    </div>
-    <i id="right" class="fas fa-angle-right"></i>
-  </div>
-</div>
-<div id="imageModal" class="modal" onclick="closeModal()">
-  <span class="close" onclick="closeModal()">&times;</span>
-  <div class="modal-content">
-    <div class="modal-body">
-      <img id="modalImage" src="" alt="Image">
-    </div>
-  </div>
-</div>
-<script>
-   function openModal(imageSrc) {
-    var modal = document.getElementById('imageModal');
-    var modalImg = document.getElementById('modalImage');
-    modal.style.display = "block";
-    modalImg.src = imageSrc;
-  }
-  function closeModal() {
-    var modal = document.getElementById('imageModal');
-    modal.style.display = "none";
-  }
-  document.addEventListener('click', function(event) {
-    var modal = document.getElementById('imageModal');
-    if (event.target === modal) {
-      closeModal();
-    }
-  });
-  const carousel = document.querySelector(".carousel-inner"),
-    firstImg = carousel.querySelectorAll("img")[0],
-    arrowIcons = document.querySelectorAll(".wrapper i");
-  const numImages = carousel.querySelectorAll("img").length;
-  const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
-  if (numImages > 3) {
-    arrowIcons[1].style.display = "block";
-  } else {
-    arrowIcons[0].style.display = "none";
-    arrowIcons[1].style.display = "none";
-  }
-  let isDragStart = false,
-    isDragging = false,
-    prevPageX,
-    prevScrollLeft,
-    positionDiff;
-  const showHideIcons = () => {
-    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
-    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
-    arrowIcons[1].style.display =
-      carousel.scrollLeft == scrollWidth ? "none" : "block";
-  };
-  arrowIcons.forEach((icon) => {
-    icon.addEventListener("click", () => {
-      let firstImgWidth = firstImg.clientWidth + 40;
-      const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
-      carousel.scrollBy({
-        left: scrollAmount,
-        behavior: "smooth",
-      });
-      setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
-    });
-  });
-  // const autoSlide = () => {
-  //   // if there is no image left to scroll then return from here
-  //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
-  //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
-  //   let firstImgWidth = firstImg.clientWidth + 14;
-  //   // getting difference value that needs to add or reduce from carousel left to take middle img center
-  //   let valDifference = firstImgWidth - positionDiff;
-  //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
-  //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
-  //   }
-  //   // if user is scrolling to the left
-  //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
-  // }
-  // const dragStart = (e) => {
-  //   // updatating global variables value on mouse down event
-  //   isDragStart = true;
-  //   prevPageX = e.pageX || e.touches[0].pageX;
-  //   prevScrollLeft = carousel.scrollLeft;
-  // }
-  // const dragging = (e) => {
-  //   // scrolling images/carousel to left according to mouse pointer
-  //   if (!isDragStart) return;
-  //   e.preventDefault();
-  //   isDragging = true;
-  //   carousel.classList.add("dragging");
-  //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
-  //   carousel.scrollLeft = prevScrollLeft - positionDiff;
-  //   showHideIcons();
-  // }
-  // const dragStop = () => {
-  //   isDragStart = false;
-  //   carousel.classList.remove("dragging");
-  //   if (!isDragging) return;
-  //   isDragging = false;
-  //   autoSlide();
-  // }
-  // carousel.addEventListener("mousedown", dragStart);
-  // carousel.addEventListener("touchstart", dragStart);
-  // document.addEventListener("mousemove", dragging);
-  // carousel.addEventListener("touchmove", dragging);
-  // document.addEventListener("mouseup", dragStop);
-  // carousel.addEventListener("touchend", dragStop);
+<style>
+  .modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(59, 58, 58, 0.9);
+  }
+  .modal-content {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 800px;
+    margin-top: 20px;
+  }
+  .modal-body img {
+    width: 100%;
+    height: auto;
+  }
+  .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  color: #fff;
+  cursor: pointer;
+}
+.close:hover {
+  color: #ccc;
+}
+</style>
+<div class="inforgraphics_section">
+  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
+  <div class="wrapper">
+    <i id="left" class="fas fa-angle-left"></i>
+    <div class="carousel">
+      <div class="carousel-inner">
+        {%- if pageData.infographics -%} {% for item in pageData.infographics %}
+        <div class="slide">
+          <img
+            loading="lazy"
+            src="{{ item.image }}"
+            alt="img"
+            draggable="false"
+            class="infographic-img"
+            onclick="openModal('{{ item.image }}')"
+          />
+          <p class="infographic-desc">{{ item.description | capitalize }}</p>
+        </div>
+        {% endfor %} {%- endif -%}
+      </div>
+    </div>
+    <i id="right" class="fas fa-angle-right"></i>
+  </div>
+</div>
+<div id="imageModal" class="modal" onclick="closeModal()">
+  <span class="close" onclick="closeModal()">&times;</span>
+  <div class="modal-content">
+    <div class="modal-body">
+      <img id="modalImage" src="" alt="Image">
+    </div>
+  </div>
+</div>
+<script>
+   function openModal(imageSrc) {
+    var modal = document.getElementById('imageModal');
+    var modalImg = document.getElementById('modalImage');
+    modal.style.display = "block";
+    modalImg.src = imageSrc;
+  }
+  function closeModal() {
+    var modal = document.getElementById('imageModal');
+    modal.style.display = "none";
+  }
+  document.addEventListener('click', function(event) {
+    var modal = document.getElementById('imageModal');
+    if (event.target === modal) {
+      closeModal();
+    }
+  });
+  const carousel = document.querySelector(".carousel-inner"),
+    firstImg = carousel.querySelectorAll("img")[0],
+    arrowIcons = document.querySelectorAll(".wrapper i");
+  const numImages = carousel.querySelectorAll("img").length;
+  const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
+  if (numImages > 3) {
+    arrowIcons[1].style.display = "block";
+  } else {
+    arrowIcons[0].style.display = "none";
+    arrowIcons[1].style.display = "none";
+  }
+  let isDragStart = false,
+    isDragging = false,
+    prevPageX,
+    prevScrollLeft,
+    positionDiff;
+  const showHideIcons = () => {
+    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
+    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+    arrowIcons[1].style.display =
+      carousel.scrollLeft == scrollWidth ? "none" : "block";
+  };
+  arrowIcons.forEach((icon) => {
+    icon.addEventListener("click", () => {
+      let firstImgWidth = firstImg.clientWidth + 40;
+      const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
+      carousel.scrollBy({
+        left: scrollAmount,
+        behavior: "smooth",
+      });
+      setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+    });
+  });
+  // const autoSlide = () => {
+  //   // if there is no image left to scroll then return from here
+  //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
+  //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
+  //   let firstImgWidth = firstImg.clientWidth + 14;
+  //   // getting difference value that needs to add or reduce from carousel left to take middle img center
+  //   let valDifference = firstImgWidth - positionDiff;
+  //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
+  //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+  //   }
+  //   // if user is scrolling to the left
+  //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+  // }
+  // const dragStart = (e) => {
+  //   // updatating global variables value on mouse down event
+  //   isDragStart = true;
+  //   prevPageX = e.pageX || e.touches[0].pageX;
+  //   prevScrollLeft = carousel.scrollLeft;
+  // }
+  // const dragging = (e) => {
+  //   // scrolling images/carousel to left according to mouse pointer
+  //   if (!isDragStart) return;
+  //   e.preventDefault();
+  //   isDragging = true;
+  //   carousel.classList.add("dragging");
+  //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
+  //   carousel.scrollLeft = prevScrollLeft - positionDiff;
+  //   showHideIcons();
+  // }
+  // const dragStop = () => {
+  //   isDragStart = false;
+  //   carousel.classList.remove("dragging");
+  //   if (!isDragging) return;
+  //   isDragging = false;
+  //   autoSlide();
+  // }
+  // carousel.addEventListener("mousedown", dragStart);
+  // carousel.addEventListener("touchstart", dragStart);
+  // document.addEventListener("mousemove", dragging);
+  // carousel.addEventListener("touchmove", dragging);
+  // document.addEventListener("mouseup", dragStop);
+  // carousel.addEventListener("touchend", dragStop);
 </script>

data/_includes/appscms/loaders/loader.html

@@ -1,4 +1,4 @@
-
-<div class="appscms-loader">
-    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-</div>
+
+<div class="appscms-loader">
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+</div>

data/_includes/appscms/navbars/devtool-navbar.html

@@ -1,50 +1,50 @@
-<!-- nav bar code  -->
-
-{% assign lang = page.lang | default: "en" %} {% assign siteData = site.data.header[lang].data
-  %} {% assign featureData = page.fileName %} {% assign folder = page.folderName
-  %} {% assign Data= site.data[folder][lang][file] %}
-  <nav class="appscms-navbar">
-    <div class="row w-100 h-100">
-      <div class="col-11 mx-auto">
-      <div class="appscms-navbar-nav">
-        {%- if siteData.navbarBrandLogoSvg -%}
-        <a href="/"> {{siteData.navbarBrandLogoSvg}} </a>
-        {%- elsif siteData.navbarBrandText -%}
-        <span> {{siteData.navbarBrandText}}
-        {%- else -%}
-        {%- endif -%}
-        {%- if siteData.navItems -%}
-        <div class="appscms-navbar-nav-links">
-        {%- for item in siteData.navItems -%}
-        <a class="appscms-nav-link" style="color: rgb(244, 244, 244);" href="{{item.url}}">{{item.name}}</a>
-        {%- endfor -%}
-        </div>
-        {%- endif -%}
-        <div id="hamburger" data-open="false" class="hamburger">
-          <svg
-          style="font-size:25px"
-            stroke="currentColor"
-            fill="currentColor"
-            stroke-width="0"
-            viewBox="0 0 512 512"
-            aria-hidden="true"
-            focusable="false"
-            height="50px"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill="none"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="48"
-              d="M88 152h336M88 256h336M88 360h336"
-            ></path>
-          </svg>
-        </div>
-      </div>
-      </div>
-    </div>
-  </nav>
-
-
+<!-- nav bar code  -->
+
+{% assign lang = page.lang | default: "en" %} {% assign siteData = site.data.header[lang].data
+  %} {% assign featureData = page.fileName %} {% assign folder = page.folderName
+  %} {% assign Data= site.data[folder][lang][file] %}
+  <nav class="appscms-navbar">
+    <div class="row w-100 h-100">
+      <div class="col-11 mx-auto">
+      <div class="appscms-navbar-nav">
+        {%- if siteData.navbarBrandLogoSvg -%}
+        <a href="/"> {{siteData.navbarBrandLogoSvg}} </a>
+        {%- elsif siteData.navbarBrandText -%}
+        <span> {{siteData.navbarBrandText}}
+        {%- else -%}
+        {%- endif -%}
+        {%- if siteData.navItems -%}
+        <div class="appscms-navbar-nav-links">
+        {%- for item in siteData.navItems -%}
+        <a class="appscms-nav-link" style="color: rgb(244, 244, 244);" href="{{item.url}}">{{item.name}}</a>
+        {%- endfor -%}
+        </div>
+        {%- endif -%}
+        <div id="hamburger" data-open="false" class="hamburger">
+          <svg
+          style="font-size:25px"
+            stroke="currentColor"
+            fill="currentColor"
+            stroke-width="0"
+            viewBox="0 0 512 512"
+            aria-hidden="true"
+            focusable="false"
+            height="50px"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill="none"
+              stroke-linecap="round"
+              stroke-miterlimit="10"
+              stroke-width="48"
+              d="M88 152h336M88 256h336M88 360h336"
+            ></path>
+          </svg>
+        </div>
+      </div>
+      </div>
+    </div>
+  </nav>
+
+