appscms-tools-theme 4.6.1 → 4.6.2

data/_includes/appscms/headings/devtool-headings.html

@@ -1,38 +1,38 @@
-{%- if page.layout == "appscms-audio" or page.layout == "appscms-video" -%} {%-
-    else -%}
-    <div class="container heading" style="height: 40vh;">
-      <div class="contenttool-bg-lite" style="margin-top: 20vh;"></div>
-      <div class="row">
-        <div
-          class="container mt-3 grid-contentttool-h1"
-        >
-          {%- if pageData.H1 -%} {%- assign h1 = pageData.H1 -%} {%- elsif
-          pageData.h1 -%} {%- assign h1 = pageData.h1 -%} {%- endif -%} {%- if
-          pageData.H2 -%} {%- assign h2 = pageData.H2 -%} {%- elsif pageData.h2 -%}
-          {%- assign h2 = pageData.h2 -%} {%- endif -%}
-    <div class="heading-landing-text">
-          <h1 class="text-center appscms-h1 contenttool-landing-h1 text-white">
-            {%- for word in h1 -%} {%- if forloop.first == true -%} {{word |
-            capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
-          </h1>
-          <h2 class="text-center appscms-h2 contenttool-landing-h2 text-white">
-            {%- for word in h2 -%} {%- if forloop.first == true -%} {{word |
-            capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
-          </h2>
-          <div class="random-spans">
-            <span class="span1" style="position: absolute; transform: rotate(10deg); left: 20vw; top: 20vh; font-size: 38px; color: white;">+</span>
-            <span class="span2" style="position: absolute; transform: rotate(-20deg); left: 40vw; top: 30vh; font-size: 24px; color: white;">+</span>
-            <span class="span3" style="position: absolute; transform: rotate(5deg); right: 20vw; top: 40vh; font-size: 28px; color: white;">+</span>
-            <span class="span4" style="position: absolute; transform: rotate(-15deg); left: 77vw; bottom: 60vh; font-size: 22px; color: white;">+</span>
-            <span class="span5" style="position: absolute; transform: rotate(25deg); left: 10vw; bottom: 30vh; font-size: 24px; color: white;">+</span>
-            <span class="span6" style="position: absolute; transform: rotate(0deg); right: 10vw; bottom: 20vh; font-size: 14px; color: white;">+</span>
-            <span class="span7" style="position: absolute; transform: rotate(-10deg); left: 50vw; top: 10vh; font-size: 26px; color: white;">+</span>
-            <span class="span8" style="position: absolute; transform: rotate(15deg); right: 10vw; bottom: 30vh; font-size: 35px; color: white;">+</span>
-            <span class="span9" style="position: absolute; transform: rotate(-5deg); right: 5vw; top: 20vh; font-size: 30px; color: white;">+</span>
-            <span class="span10" style="position: absolute; transform: rotate(8deg); left: 15vw; bottom: 15vh; font-size: 32px; color: white;">+</span>
-          </div>
-        </div>
-        </div>               
-      </div>
-    </div>
-    {%- endif -%}
+{%- if page.layout == "appscms-audio" or page.layout == "appscms-video" -%} {%-
+    else -%}
+    <div class="container heading" style="height: 40vh;">
+      <div class="contenttool-bg-lite" style="margin-top: 20vh;"></div>
+      <div class="row">
+        <div
+          class="container mt-3 grid-contentttool-h1"
+        >
+          {%- if pageData.H1 -%} {%- assign h1 = pageData.H1 -%} {%- elsif
+          pageData.h1 -%} {%- assign h1 = pageData.h1 -%} {%- endif -%} {%- if
+          pageData.H2 -%} {%- assign h2 = pageData.H2 -%} {%- elsif pageData.h2 -%}
+          {%- assign h2 = pageData.h2 -%} {%- endif -%}
+    <div class="heading-landing-text">
+          <h1 class="text-center appscms-h1 contenttool-landing-h1 text-white">
+            {%- for word in h1 -%} {%- if forloop.first == true -%} {{word |
+            capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
+          </h1>
+          <h2 class="text-center appscms-h2 contenttool-landing-h2 text-white">
+            {%- for word in h2 -%} {%- if forloop.first == true -%} {{word |
+            capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
+          </h2>
+          <div class="random-spans">
+            <span class="span1" style="position: absolute; transform: rotate(10deg); left: 20vw; top: 20vh; font-size: 38px; color: white;">+</span>
+            <span class="span2" style="position: absolute; transform: rotate(-20deg); left: 40vw; top: 30vh; font-size: 24px; color: white;">+</span>
+            <span class="span3" style="position: absolute; transform: rotate(5deg); right: 20vw; top: 40vh; font-size: 28px; color: white;">+</span>
+            <span class="span4" style="position: absolute; transform: rotate(-15deg); left: 77vw; bottom: 60vh; font-size: 22px; color: white;">+</span>
+            <span class="span5" style="position: absolute; transform: rotate(25deg); left: 10vw; bottom: 30vh; font-size: 24px; color: white;">+</span>
+            <span class="span6" style="position: absolute; transform: rotate(0deg); right: 10vw; bottom: 20vh; font-size: 14px; color: white;">+</span>
+            <span class="span7" style="position: absolute; transform: rotate(-10deg); left: 50vw; top: 10vh; font-size: 26px; color: white;">+</span>
+            <span class="span8" style="position: absolute; transform: rotate(15deg); right: 10vw; bottom: 30vh; font-size: 35px; color: white;">+</span>
+            <span class="span9" style="position: absolute; transform: rotate(-5deg); right: 5vw; top: 20vh; font-size: 30px; color: white;">+</span>
+            <span class="span10" style="position: absolute; transform: rotate(8deg); left: 15vw; bottom: 15vh; font-size: 32px; color: white;">+</span>
+          </div>
+        </div>
+        </div>               
+      </div>
+    </div>
+    {%- endif -%}

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

@@ -1,20 +1,20 @@
-<div class="container" id="appscms-tools-section">
-    <div class="appscms-contenttool-container" id="appscms-tools-section-row">
-          {% for item in pageData.features %}
-            <a href="{{item.url}}">
-            <div class="appscms-contenttool-tool">
-              <div class="contentool-tool-image-background" style="background: {{item.color}};">
-                <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-text">{{item.description}}</p>
-                </div>
-            </div>
-          </a>
-          {% endfor %}
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="container" id="appscms-tools-section">
+    <div class="appscms-contenttool-container" id="appscms-tools-section-row">
+          {% for item in pageData.features %}
+            <a href="{{item.url}}">
+            <div class="appscms-contenttool-tool">
+              <div class="contentool-tool-image-background" style="background: {{item.color}};">
+                <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-text">{{item.description}}</p>
+                </div>
+            </div>
+          </a>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
   

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,166 +1,166 @@
-<style>
-  .modal1 {
-    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);
-  }
-  .modal1-content1 {
-    margin: auto;
-    display: block;
-    width: 80%;
-    max-width: 800px;
-    margin-top: 20px;
-  }
-  .modal1-body img {
-    width: 100%;
-    height: auto;
-  }
-  .close1 {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 24px;
-  color: #fff;
-  cursor: pointer;
-}
-.close1: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="openModal1('{{ 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="imageModal1" class="modal1" onclick="closeModal1()">
-  <span class="close1" onclick="closeModal1()">&times;</span>
-  <div class="modal1-content1">
-    <div class="modal1-body">
-      <img id="modal1Image" src="" alt="Image">
-    </div>
-  </div>
-</div>
-<script>
-   function openModal1(imageSrc) {
-    var modal1 = document.getElementById('imageModal1');
-    var modal1Img = document.getElementById('modal1Image');
-    modal1.style.display = "block";
-    modal1Img.src = imageSrc;
-  }
-  function closeModal1() {
-    var modal1 = document.getElementById('imageModal1');
-    modal1.style.display = "none";
-  }
-  document.addEventListener('click', function(event) {
-    var modal1 = document.getElementById('imageModal1');
-    if (event.target === modal1) {
-      closeModal1();
-    }
-  });
-  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>
-
-
-
-
-
-
+<style>
+  .modal1 {
+    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);
+  }
+  .modal1-content1 {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 800px;
+    margin-top: 20px;
+  }
+  .modal1-body img {
+    width: 100%;
+    height: auto;
+  }
+  .close1 {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  color: #fff;
+  cursor: pointer;
+}
+.close1: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="openModal1('{{ 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="imageModal1" class="modal1" onclick="closeModal1()">
+  <span class="close1" onclick="closeModal1()">&times;</span>
+  <div class="modal1-content1">
+    <div class="modal1-body">
+      <img id="modal1Image" src="" alt="Image">
+    </div>
+  </div>
+</div>
+<script>
+   function openModal1(imageSrc) {
+    var modal1 = document.getElementById('imageModal1');
+    var modal1Img = document.getElementById('modal1Image');
+    modal1.style.display = "block";
+    modal1Img.src = imageSrc;
+  }
+  function closeModal1() {
+    var modal1 = document.getElementById('imageModal1');
+    modal1.style.display = "none";
+  }
+  document.addEventListener('click', function(event) {
+    var modal1 = document.getElementById('imageModal1');
+    if (event.target === modal1) {
+      closeModal1();
+    }
+  });
+  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>