appscms-tools-theme 4.8.8 → 4.9.0

data/_data/review/trustpilot.json

@@ -0,0 +1,30 @@
+{
+    "reviews": [
+      { 
+        "name": "Alice Johnson",
+        "title": "Excellent Image Editing Tool",
+        "review": "Safeimagekit is a lifesaver for quick and secure image editing. Love the variety of tools!"
+      },
+      { 
+        "name": "Michael Lee",
+        "title": "Very Easy to Use",
+        "review": "Super simple to resize and adjust images. No need to download anything; works seamlessly online!"
+      },
+      { 
+        "name": "Sophia Martinez",
+        "title": "Great for Quick Edits",
+        "review": "Perfect for quick edits without compromising privacy. Highly recommend Safeimagekit."
+      },
+      { 
+        "name": "David Kim",
+        "title": "Fast and Reliable",
+        "review": "Impressed by the speed and reliability of Safeimagekit. Great for editing on the go without extra downloads."
+      }
+    ],
+    "title":"Over 5 Million Users Enjoy Using Our Applications monthly.",
+    "description":"Join a thriving community of creators who rely on our safeimagekit.com Tools.",
+    "rated": "4.8",
+    "numberOfReviews": "320",
+    "trustpilotReviewLink": "https://www.trustpilot.com/review/safeimagekit.com"
+  }
+  

data/_includes/appscms/infographics/infographics.html

@@ -1,6 +1,63 @@
 <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 {
-    display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
@@ -9,120 +66,153 @@
     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-body img {
-    width: 100%;
-    height: auto;
-  }
-  .close1 {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 24px;
-    color: #fff;
-    cursor: pointer;
-  }
-  .close1:hover {
-    color: #ccc;
+  
+  .modal1.show .modal1-content1 {
+    opacity: 1;
+    transform: translateY(0);
   }
-</style>
-<div class="inforgraphics_section">
-  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
-  <div class="wrapper">
-    <img
-      class="infographics-arrow"
-      id="left"
-      src="/assets/images/arrow-left.svg"
-      alt=""
-    />
-    <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>
+    .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>
-        {% endfor %} {%- endif -%}
       </div>
+      <i id="right" class="fas fa-angle-right"></i>
     </div>
-    <img
-      class="infographics-arrow"
-      id="right"
-      src="/assets/images/arrow-right.svg"
-      alt=""
-    />
   </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 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>
-</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();
+  <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;
+      }
     }
-  });
-  const carousel = document.querySelector(".carousel-inner"),
-    firstImg = carousel.querySelectorAll("img")[0],
-    arrowIcons = document.querySelectorAll(".infographics-arrow");
-  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",
+  
+    // 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();
       });
-      setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
     });
+  
+    // 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>
+  
+  </script>
+  

data/_includes/appscms/navbars/navbar.html

@@ -1,76 +1,4 @@
-<style>
-  .search-container {
-    display: flex;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    overflow: hidden;
-    height: 38px;
-    width: 400px;
-    background-color: white;
-    position: relative;
-}
 
-.search-input {
-    flex: 1;
-    border: none;
-    padding: 12px 16px;
-    font-size: 16px;
-    outline: none;
-}
-
-.search-input::placeholder {
-    color: #888;
-}
-
-.search-button {
-    background-color: var(--primary-color);
-    border: none;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    outline: none;
-    border-radius: 0 !important;
-}
-
-.search-button svg {
-    /* fill: #fff; */
-    height: 20px;
-}
-
-.search-button:active {
-    background-color: #555;
-}
-.nav-search{
-  position: relative;
-}
-.result-item{
-  padding: 9px 12px;
-}
-.result-item a{
-  color: #222325;
-}
-.searchbarResults{
-  overflow: scroll;
-  height: 60vh;
-  background-color: #fff;
-    border: 1px solid #e4e5e7;
-    border-radius: 6px;
-    -webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
-    box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    color: #74767e;
-    cursor: default;
-    margin-top: 8px;
-    padding: 12px;
-    position: absolute;
-    width: 100%;
-    z-index: 101;
-    display: none;
-}
-</style>
 {% 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] %}

data/_includes/appscms/navbars/toolbar.html

@@ -1,87 +1,4 @@
-<style>
-  .mobile-search-bar {
-    position: relative;
-    height: 100px;
-    width: 100%;
-    display: none;
-  }
-
-  .mobile-search-container {
-    display: flex;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    overflow: hidden;
-    height: 38px;
-    margin: 20px 0px 20px 0px;
-    background-color: white;
-    position: relative;
-  }
-
-  .mobile-search-input {
-    flex: 1;
-    border: none;
-    padding: 12px 16px;
-    font-size: 16px;
-    outline: none;
-  }
-
-  .mobile-search-input::placeholder {
-    color: #888;
-  }
-
-  .mobile-search-button {
-    background-color: #000;
-    border: none;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    outline: none;
-  }
-
-  .mobile-search-button svg {
-    /* fill: #fff; */
-    height: 20px;
-  }
-
-  .mobile-search-button:active {
-    background-color: #555;
-  }
-
-  .mobile-nav-search {
-    position: relative;
-  }
-
-  .mobile-result-item {
-    padding: 9px 12px;
-  }
-
-  .mobile-result-item a {
-    color: #222325;
-  }
-
-  .mobile-searchbarResults {
-    background-color: #fff;
-    border: 1px solid #e4e5e7;
-    border-radius: 6px;
-    -webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
-    box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    color: #74767e;
-    cursor: default;
-    margin-top: 8px;
-    padding: 12px;
-    position: fixed;
-    margin-top: 42px;
-    width: 244px;
-    height: 400px;
-    overflow-y: scroll;
-    z-index: 101;
-    display: none;
-  }
-</style>
+
 
 {%- if site.newToolBar -%}
 <div class="appscms-toolbar"> 
@@ -128,7 +45,7 @@
                     <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
                     {%- for i in item.featuredLinks -%}
                     <a href="{{i.url}}" class="category-tools__item">
-                      <div class="icon_box v_2 v2">
+                      <div class="icon_box v_2 v2" style="background-color: {{i.color}};">
                         <img src="{{i.iconSrc}}" alt="icon-img" />
                       </div>
                       <div class="category-tools__content">
@@ -202,8 +119,8 @@
                     <h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
                     {%- for i in item.featuredLinks -%}
                     <a href="{{i.url}}" class="category-tools__item">
-                      <div class="icon_box v_2 v2">
-                        <img src="{{i.iconSrc}}" alt="icon-img" />
+                      <div class="icon_box v_2 v2" >
+                        <img style="background-color: {{i.color}};" src="{{i.iconSrc}}" alt="icon-img" />
                       </div>
                       <div class="category-tools__content">
                         <h4>{{i.name}}</h4>
@@ -385,57 +302,3 @@
 
 </script>
 
-<style>
-  .scroll-container {
-    display: flex;
-    align-items: center;
-    background-color: #333;
-    position: relative;
-  }
-
-  .scroll-left,
-  .scroll-right {
-    background-color: #4456f6f7;
-    color: white;
-    border: none;
-    height: 40px;
-    cursor: pointer;
-    position: absolute;
-    width: 40px;
-    top: 50%;
-    z-index: 100;
-    transform: translateY(-50%);
-  }
-
-  .scroll-left {
-    left: 0;
-  }
-
-  .scroll-right {
-    right: 0;
-  }
-
-  .scroll-left:hover,
-  .scroll-right:hover {
-    background-color: #8691f6f7;
-  }
-
-  .navbar {
-    /* overflow-x: auto; */
-    white-space: nowrap;
-    flex-grow: 1;
-    scroll-behavior: smooth;
-    display: flex;
-  }
-
-  .navbar ul {
-    padding: 0;
-    margin: 0;
-    display: flex;
-    list-style-type: none;
-  }
-
-  .navbar li {
-    display: inline;
-  }
-</style>