appscms-tools-theme 4.8.3 → 4.8.4

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,32 +1,241 @@
-<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="infographics image"
-            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="full size infographics image" />
-    </div>
-  </div>
-</div>
+<style>
+  .inforgraphics_section {
+    width: 100%;
+    padding: 50px 0px 50px 0px;
+    border-top: 1px solid rgb(224, 224, 224);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .inforgraphics_section .wrapper {
+    display: flex;
+    max-width: 700px;
+    position: relative;
+  }
+
+  .inforgraphics_section .wrapper i {
+    top: 50%;
+    height: 44px;
+    width: 44px;
+    color: #343f4f;
+    cursor: pointer;
+    font-size: 1.15rem;
+    position: absolute;
+    text-align: center;
+    line-height: 44px;
+    background: #eee;
+    border-radius: 50%;
+    transform: translateY(-50%);
+    transition: transform 0.1s linear;
+  }
+
+  .inforgraphics_section .wrapper i:active {
+    transform: translateY(-50%) scale(0.9);
+  }
+
+  .inforgraphics_section .wrapper i:hover {
+    background: #f2f2f2;
+  }
+
+  .inforgraphics_section .wrapper i:first-child {
+    left: 0px;
+    display: none;
+    z-index: 999;
+  }
+
+  .inforgraphics_section .wrapper i:last-child {
+    right: 0px;
+  }
+
+  .carousel {
+    display: flex;
+    max-width: 700px;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+  }
+
+  .carousel-inner {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .slide {
+    flex: 0 0 calc(100% / 3);
+    scroll-snap-align: start;
+    padding: 20px;
+  }
+
+  .carousel img {
+    width: 100%;
+    object-fit: contain;
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+
+  .carousel-inner p {
+    text-align: center;
+    margin: 10px 0;
+    font-size: 14px;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+
+  @media screen and (max-width: 768px) {
+    .inforgraphics_section .wrapper {
+      max-width: 100%;
+    }
+
+    .carousel-inner p {
+      font-size: 20px;
+    }
+
+    .inforgraphics_section .wrapper i:first-child {
+      left: 0;
+      /* margin-left: 14px; */
+      z-index: 99;
+    }
+
+    .inforgraphics_section .wrapper i:last-child {
+      right: 0;
+      z-index: 99;
+      display: block !important;
+    }
+
+    .carousel {
+      overflow-x: hidden;
+    }
+
+    .slide {
+      flex: 0 0 100%;
+      margin-right: 0;
+    }
+  }
+</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 homeData.infographics -%} {% for item in homeData.infographics %}
+        <div class="slide">
+          <img
+            loading="lazy"
+            src="{{ item.image }}"
+            alt="img"
+            draggable="false"
+          />
+          <p class="infographic-desc">{{ item.description | capitalize }}</p>
+        </div>
+        {% endfor %} {%- else -%} {% for item in featureData.infographics %}
+        <div class="slide">
+          <img
+            loading="lazy"
+            src="{{ item.image }}"
+            alt="img"
+            draggable="false"
+          />
+          <p class="infographic-desc">{{ item.description | capitalize }}</p>
+        </div>
+        {% endfor %} {%- endif -%}
+      </div>
+    </div>
+    <i id="right" class="fas fa-angle-right"></i>
+  </div>
+</div>
+
+<script>
+  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>
+
+