appscms-tools-theme 5.2.5 → 5.2.6

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

@@ -0,0 +1,33 @@
+{%- 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

@@ -0,0 +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 -%}

data/_includes/appscms/headings/headings.html

@@ -0,0 +1,24 @@
+{%- 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

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

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

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

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

@@ -0,0 +1,58 @@
+{% 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

@@ -0,0 +1,89 @@
+{%- 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

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

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