appscms-tools-theme 5.2.4 → 5.2.5

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

@@ -1,33 +0,0 @@
-{%- if page.layout == "appscms-audio" or page.layout == "appscms-video" -%} {%-
-    else -%}
-    <div class="container heading">
-      <div class="contenttool-bg-lite"></div>
-      <div class="row">
-        <div
-          class="container mt-3 grid-contentttool-h1" style="display: flex;"
-        >
-          {%- 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-left appscms-h1 contenttool-landing-h1">
-            {%- for word in h1 -%} {%- if forloop.first == true -%} {{word |
-            capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
-          </h1>
-          <h2 class="text-left appscms-h2 contenttool-landing-h2">
-            {%- for word in h2 -%} {%- if forloop.first == true -%} {{word |
-            capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
-          </h2>
-        </div>
-        <img id="landing-main-svg"  src="/assets/images/contenttool-main.svg" alt="manvector">           
-        </div>
-        <svg id="contenttool-line-top" width="242" height="321" viewBox="0 0 242 321" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1 1C6.15486 44.3372 60.1151 138.089 235.818 138.089C487.727 138.089 618.363 226.161 679 320" stroke="#0066FF" stroke-width="2" stroke-dasharray="5 8"/>
-            </svg> 
-            <svg id="contenttool-line-left-bottom" width="173" height="855" viewBox="0 0 173 855" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M-48.9434 1.14502C-15.7718 92.377 114.216 198.249 161.568 276.272C208.919 354.296 81.401 346.5 37.2577 552.416C1.94297 717.148 -4.2862 822.14 -2.98644 854.044" stroke="#0066FF" stroke-width="2" stroke-dasharray="5 8"/>
-                </svg>                
-      </div>
-    </div>
-    {%- endif -%}

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

@@ -1,38 +0,0 @@
-{%- 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/headings/headings.html

@@ -1,24 +0,0 @@
-{%- if page.layout == "appscms-audio" or page.layout == "appscms-video" -%} {%-
-else -%}
-<div class="container heading">
-  <div class="row">
-    <div
-      class="col-xxl-8 col-lg-9 col-md-12 col-sm-12 offset-md-1 offset-sm-0 py-3 pt-md-3 pt-sm-3 mx-auto"
-    >
-      {%- 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 -%}
-
-      <h1 class="text-center appscms-h1">
-        {%- for word in h1 -%} {%- if forloop.first == true -%} {{word |
-        capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
-      </h1>
-      <h2 class="text-center appscms-h2">
-        {%- for word in h2 -%} {%- if forloop.first == true -%} {{word |
-        capitalize }} {%- else -%} {{word}} {%- endif -%} {%- endfor -%}
-      </h2>
-    </div>
-  </div>
-</div>
-{%- endif -%}

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

@@ -1,20 +0,0 @@
-<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 +0,0 @@
-<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/home/feature-boxes.html

@@ -1,58 +0,0 @@
-{% if page.lang == "en" and site.categoryTab %}
-<div class="container" id="appscms-tools-section">
-  <div class="row">
-    <div class="col-md-10 mx-auto">
-      <div class="row" id="appscms-tools-section-row">
-        {% for product in pageData.features %} {%- for item in product.features
-        -%}
-        <div
-          class="col-xl-4 col-lg-6 col-md-6 col-3 appscms-tool-container"
-          data-category="{{product.category}}"
-          style="display: {{product.display}};"
-        >
-          <a href="{{item.url}}">
-            <div class="appscms-tool">
-              <div class="tool-top" style="background: {{item.color}};">
-                <div class="tool-img">
-                  <img crossorigin="anonymous" src="{{item.icon}}" alt="img" />
-                </div>
-                <div class="tool-text">
-                  {{item.description | truncate:67,'..'}}
-                </div>
-              </div>
-              <div class="tool-heading">{{item.name | truncate: 33, '..'}}</div>
-            </div>
-          </a>
-        </div>
-        {%- endfor -%} {% endfor %}
-      </div>
-    </div>
-  </div>
-</div>
-{%- else -%}
-<div class="container" id="appscms-tools-section">
-  <div class="row">
-    <div class="col-md-10 mx-auto">
-      <div class="row" id="appscms-tools-section-row">
-        {% for item in pageData.features %}
-        <div class="col-xl-4 col-lg-6 col-md-6 col-3 appscms-tool-container">
-          <a href="{{item.url}}">
-            <div class="appscms-tool">
-              <div class="tool-top" style="background: {{item.color}};">
-                <div class="tool-img">
-                  <img crossorigin="anonymous" src="{{item.icon}}" alt="img" />
-                </div>
-                <div class="tool-text">
-                  {{item.description | truncate:67,'..'}}
-                </div>
-              </div>
-              <div class="tool-heading">{{item.name | truncate: 33, '..'}}</div>
-            </div>
-          </a>
-        </div>
-        {% endfor %}
-      </div>
-    </div>
-  </div>
-</div>
-{%- endif -%}

data/_includes/appscms/howto/howto.html

@@ -1,89 +0,0 @@
-{%- if pageData.HOW_TO_CONTENT -%}
-<div class="container appscms-how-to-section p-3 pb-3 mt-5">
-  <div class="row py-3">
-    {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
-    <div class="col-md-9 mx-auto">
-      <div class="row">
-        {%- endif -%}
-        <div class="col-md-6 appscms-howto-image">
-          {%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
-          <div class="how-to-video-wrapper">
-            {% assign video_url = pageData.HOW_TO_CONTENT.YoutubeVideoUrl %}
-            {% assign video_id = "" %}
-            {% if video_url contains "youtu.be/" %}
-            {% assign parts = video_url | split: "/" %}
-            {% assign video_id = parts[3] %}
-            {% elsif video_url contains "youtube.com/watch" %}
-            {% assign params = video_url | split: "?" | last | split: "&" %}
-            {% for param in params %}
-            {% if param contains "v=" %}
-            {% assign video_id = param | split: "=" | last %}
-            {% endif %}
-            {% endfor %}
-            {% endif %}
-
-            <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
-              <img class="youtubeVideoPlayer" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
-              <div class="youtube-play-btn-wrapper">
-                <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
-              </div>
-            </div>
-          </div>
-          {%- else -%}
-          <div class="how-to-img-wrapper">
-            <img src="{{pageData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
-              alt="{{pageData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin -%}
-              crossorigin {%- endif -%}class="img-fluid align-self-end" alt="Your Image"
-              style="width: 100%; height: 100%" />
-          </div>
-          {%- endif -%}
-        </div>
-        <div class="col-md-6 appscms-howto-steps p-3">
-          <h2 class="mb-4 appscms-howto-heading">
-            {{pageData.HOW_TO_CONTENT.heading | replace: "$variable",
-            page.value}}
-          </h2>
-          {% for data in pageData.HOW_TO_CONTENT.steps %}
-          <div id="step{{forloop.index}}" class="how-to-list-item">
-            {{forloop.index}} . {{data | replace: "$variable", page.value}}
-          </div>
-          {% endfor %}
-        </div>
-        {%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
-      </div>
-    </div>
-    {%- endif -%}
-  </div>
-</div>
-
-{%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
-<script>
-  let videoContainer = document.querySelector('.how-to-video');
-  let thumbnail = document.getElementById('thumbnail-img');
-  let videoId = videoContainer.getAttribute("data-videoid")
-  let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
-  console.log(videoId)
-
-  // Function to load video
-  function loadVideo() {
-    videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>';
-  }
-  // Function to handle lazy loading of the thumbnail
-  function lazyLoadThumbnail(entries, observer) {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        // Load thumbnail when it becomes visible
-        thumbnail.src = thumbnailUrl;
-        // Stop observing once loaded
-        observer.unobserve(entry.target);
-      }
-    });
-  }
-  // Set up the Intersection Observer
-  var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 });
-  observer.observe(thumbnail);
-  // Optionally, you can add an event listener to trigger video loading on click or other interactions
-  thumbnail.addEventListener('click', loadVideo);
-</script>
-{%- endif -%}
-{%- endif -%}

data/_includes/appscms/infographics/infographics.html

@@ -1,217 +0,0 @@
-<style>
-  .modal-arrow-btn {
-    position: absolute;
-    top: 50%;
-    width: 50px;
-    height: 50px;
-    background: rgba(0, 0, 0, 0.5);
-    color: #fff;
-    border: none;
-    cursor: pointer;
-    font-size: 24px;
-    text-align: center;
-    line-height: 50px;
-    border-radius: 50%;
-    transform: translateY(-50%);
-  }
-
-  .modal-arrow-btn.prev {
-    left: 10px;
-  }
-
-  .modal-arrow-btn.next {
-    right: 10px;
-  }
-
-  @media (max-width: 768px) {
-    .modal-arrow-btn {
-      top: 30%;
-      width: 40px;
-      height: 40px;
-      font-size: 20px;
-      line-height: 40px;
-    }
-
-    .modal-arrow-btn.prev {
-      left: 5px;
-    }
-
-    .modal-arrow-btn.next {
-      right: 5px;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .modal-arrow-btn {
-      width: 30px;
-      height: 30px;
-      font-size: 16px;
-      line-height: 30px;
-    }
-
-    .modal-arrow-btn.prev {
-      left: 3px;
-    }
-
-    .modal-arrow-btn.next {
-      right: 3px;
-    }
-  }
-
-  .modal1 {
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(59, 58, 58, 0.9);
-    opacity: 0;
-    visibility: hidden;
-    transform: scale(0.8);
-    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
-  }
-
-  .modal1.show {
-    opacity: 1;
-    visibility: visible;
-    transform: scale(1);
-    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
-  }
-
-  .modal1-content1 {
-    margin: auto;
-    display: block;
-    width: 80%;
-    max-width: 800px;
-    margin-top: 20px;
-    opacity: 0;
-    transform: translateY(-20px);
-    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
-  }
-
-  .modal1.show .modal1-content1 {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .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="{{item.alt}}" 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>
-  <button class="modal-arrow-btn prev">&#10094;</button>
-  <button class="modal-arrow-btn next">&#10095;</button>
-  <div class="modal1-content1">
-    <div class="modal1-body">
-      <img id="modal1Image" src="" alt="Image" />
-    </div>
-  </div>
-</div>
-
-
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    let modal_array_of_images = [];
-    let current_modal_img = 0;
-
-    // Function to update the modal image
-    function updateModalImage() {
-      const modal1Img = document.getElementById("modal1Image");
-      if (modal_array_of_images.length > 0) {
-        modal1Img.src = modal_array_of_images[current_modal_img].src;
-      }
-    }
-
-    // Function to prepare the array of images for the modal
-    function readyallimages() {
-      modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
-    }
-
-    // Function to open the modal and set the current image
-    function openModal1(imageSrc) {
-      const modal1 = document.getElementById("imageModal1");
-      modal1.classList.add("show");
-      modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
-      current_modal_img = modal_array_of_images.findIndex(img => img.src === imageSrc);
-      updateModalImage();
-    }
-
-    // Function to close the modal
-    function closeModal1() {
-      const modal1 = document.getElementById("imageModal1");
-      modal1.classList.remove("show");
-    }
-
-    // Add click event listeners to each infographic image
-    document.querySelectorAll('.infographic-img').forEach(img => {
-      img.addEventListener('click', (event) => {
-        openModal1(event.target.src);
-      });
-    });
-
-    // Event listeners for the modal arrow buttons
-    const modal_btns = document.querySelectorAll('.modal-arrow-btn');
-    modal_btns.forEach(modal_btn => {
-      modal_btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        if (modal_btn.classList.contains('prev')) {
-          current_modal_img = (current_modal_img > 0) ? current_modal_img - 1 : modal_array_of_images.length - 1;
-        } else {
-          current_modal_img = (current_modal_img < modal_array_of_images.length - 1) ? current_modal_img + 1 : 0;
-        }
-        updateModalImage();
-      });
-    });
-
-    // Event listener for the close button
-    document.querySelectorAll(".close1").forEach(element => {
-      element.addEventListener("click", closeModal1);
-    });
-
-    // Event listener for closing the modal when clicking outside the image
-    document.getElementById("imageModal1").addEventListener("click", (event) => {
-      if (event.target === document.getElementById("imageModal1")) {
-        closeModal1();
-      }
-    });
-
-    // Initialize modal images on page load
-    readyallimages();
-  });
-
-</script>

data/_includes/appscms/loaders/loader.html

@@ -1,4 +0,0 @@
-
-<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>