appscms-tools-theme 5.2.5 → 5.2.6

data/_includes/header/index.html

@@ -0,0 +1,153 @@
+{% assign lang = page.lang %}
+{% assign siteData = site.data.header[lang].data %}
+{% assign dataToShow = site.data.header[lang].data %}
+{% assign file = page.fileName %}
+{% assign folder = page.folderName %}
+{% assign Data = site.data[folder][lang][file] %}
+{% assign logovalue = "40px" %}
+{%- if page.layout == 'home-1' or page.layout == "feature-1" -%}
+<header data-layout="{{page.layout}}" id="header" class="home1-nav-header">
+  <nav class="header-navbar navbar navbar-expand-lg">
+    <div class="container px-0">
+      {% if dataToShow.navbarBrandText != "" %}
+      <a id="home-link" class="navbar-brand" href="/"
+        title="{{dataToShow.navbarBrandText}}">{{dataToShow.navbarBrandText}}</a>
+      {% else %}
+      <a id="home-link" href="/">
+        <img class="header-logo-height" width="{{dataToShow.navbarBrandLogoWidth  }}"
+          height="{{dataToShow.navbarBrandLogoHeight | default: logovalue }}" src="{{ dataToShow.navbarBrandLogo }}"
+          alt="{{ dataToShow.navbarBrandLogo }}" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
+      </a>
+      {% endif %}
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="hamburger">
+        <div class="header_bars"></div>
+        <div class="header_bars"></div>
+        <div class="header_bars"></div>
+      </button>
+
+
+
+      <div class="d-flex align-items-center">
+        {%- if site.navigationSearch -%}
+        <div class="nav-search mr-4">
+          <div class="search-container">
+            <input type="text" class="search-input" placeholder="Search Tools">
+            <button class="search-button">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path
+                    d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
+                    stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+              </svg>
+            </button>
+          </div>
+
+          <div id="results" class="searchbarResults"></div>
+        </div>
+        {%- endif -%}
+
+        <div class="appscms-navbar-nav-links">
+          {%- for item in dataToShow.navItems -%}
+          <a class="appscms-nav-link" href="{{item.url}}">{{item.name}}</a>
+          {%- endfor -%}
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>
+{%- else -%}
+<header id="header">
+  <nav class="navbar navbar-expand-lg py-3 px-sm-2">
+    {% if dataToShow.navbarBrandText != "" %}
+    <a id="home-link" class="navbar-brand" href="/"
+      title="{{dataToShow.navbarBrandText}}">{{dataToShow.navbarBrandText}}</a>
+    {% else %}
+    <a id="home-link" href="/">
+      <img class="logo-height" width="{{dataToShow.navbarBrandLogoWidth | default: logovalue}}"
+        height="{{dataToShow.navbarBrandLogoHeight | default: logovalue}}" src="{{ dataToShow.navbarBrandLogo }}"
+        alt="{{ dataToShow.navbarBrandLogo }}" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
+    </a>
+    {% endif %}
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <div class="hamburger-menu">
+        <span class="line-top"></span>
+        <span class="line-center"></span>
+        <span class="line-bottom"></span>
+      </div>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      {%- if Data.megaMenu -%}
+      <div class="nav-item nav__item">
+        <a class="dropdown-toggle ml-lg-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
+          aria-haspopup="true" aria-expanded="false">
+          {{Data.megaMenu.nav-link-name}}
+        </a>
+        <div class="dropmenu dropdown-menu" aria-labelledby="navbarDropdown">
+          <div class="inner-dropdown">
+            {%- for item in Data.megaMenu.dropdown -%}
+            <div class="catPad mb-4">
+              <div class="text-muted">{{item.categoryName}}</div>
+              {%- for item in item.links -%}
+              <div>
+                <a href="{{item.url}}">
+                  {%- if item.iconSrc -%}
+                  <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;" src="{{item.iconSrc}}" {%-
+                    if site.crossorigin -%} crossorigin {%- endif -%}>
+                  {%- endif -%}
+                  {{item.name}}
+                </a>
+              </div>
+              {%- endfor -%}
+            </div>
+            {%- endfor -%}
+          </div>
+          </d>
+        </div>
+      </div>
+      {%- else -%}
+      {%- if dataToShow.megaMenu -%}
+      <div class="nav-item nav__item">
+        <a class="dropdown-toggle ml-lg-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
+          aria-haspopup="true" aria-expanded="false">
+          {{dataToShow.megaMenu.nav-link-name}}
+        </a>
+        <div class="dropmenu dropdown-menu" aria-labelledby="navbarDropdown">
+          <div class="inner-dropdown">
+            {%- for item in dataToShow.megaMenu.dropdown -%}
+            <div class="catPad mb-4">
+              <div class="text-muted">{{item.categoryName}}</div>
+              {%- for item in item.links -%}
+              <div>
+                <a href="{{item.url}}">
+                  {%- if item.iconSrc -%}
+                  <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;" src="{{item.iconSrc}}" {%-
+                    if site.crossorigin -%} crossorigin {%- endif -%}>
+                  {%- endif -%}
+                  {{item.name}}</a>
+              </div>
+              {%- endfor -%}
+            </div>
+            {%- endfor -%}
+          </div>
+        </div>
+      </div>
+      {%- endif -%}
+      {%- endif -%}
+      <div class="navbar-nav">
+        {% for item in dataToShow.navItems %}
+        <div class="nav-item nav__item mr-auto">
+          <a href="{{item.url}}">{{item.name}}</a>
+        </div>
+        {% endfor %}
+        </d>
+      </div>
+    </div>
+  </nav>
+</header>
+{% endif %}

data/_includes/infographics/infographics.html

@@ -0,0 +1,244 @@
+<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;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .carousel img {
+    object-fit: contain;
+
+    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: "100vw",
+        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/internationalization-section.html

@@ -0,0 +1,67 @@
+{%- include languages/languages.html -%} {%- if page.nointernationalization -%}
+<div></div>
+{%- elsif site.internationalizationall -%}
+
+<div class="internationalization-section">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12 mx-auto">
+        <div class="d-flex justify-content-center mt-1">
+          <h3>Available in</h3>
+        </div>
+        <div class="internationalization-languages">
+          {%- for item in matchurls -%} {%- if item != 'zh-TW' -%} {%- if item ==
+          'en'-%} {%- if dataFile.htmlLangAtt == item -%}
+      
+          <a
+            class="active-lang internationalization-language-drop-down-item font-weight-bold"
+            href="{{ page.permalink}}"
+            >English <i class="fas fa-check ml-auto"></i>
+          </a>
+      
+          {%- else -%} {%- if dataFile.features -%}
+          <a class="internationalization-language-drop-down-item" href="/">English</a>
+          {%- else -%}
+          <a
+            class="internationalization-language-drop-down-item"
+            href="/{{ page.permalink | split: '/' | last}}"
+            >English
+          </a>
+          {%- endif -%} {%- endif -%} {%- else -%} {%- if dataFile.htmlLangAtt == item
+          -%} < > {%- if page.permalink | split: '/' | last != item -%}
+          <a
+            class="internationalization-language-drop-down-item font-weight-bold active-lang"
+            href="{{ page.permalink}}"
+            >{{[item][1]}}
+            <i class="fas fa-check ml-auto"></i>
+          </a>
+          {%- else -%}
+          <a class="active-lang" href="/{{item}}"
+            >{{[item][1]}}
+            <i class="fas fa-check ml-auto"></i>
+          </a>
+          {%- endif -%} {%- else -%} {%- if page.permalink | split: '/' | last != item
+          -%} {%- if dataFile.features -%}
+          <a class="internationalization-language-drop-down-item" href="/{{item}}">{{[item][1]}} </a>
+          {%- else -%}
+          <a
+            class="internationalization-language-drop-down-item"
+            href="/{{item}}/{{ page.permalink | split: '/' | last}}"
+            >{{[item][1]}}
+          </a>
+          {%- endif -%} {%- else -%}
+          <a class="internationalization-language-drop-down-item" href="/{{item}}">{{[item][1]}} </a>
+          {%- endif -%} {%- endif -%} {%- endif -%} {%- endif -%} {%- endfor -%}
+        </ul>
+      </div>
+      </div>
+    </div>
+   
+  </div>
+ 
+</div>
+
+
+
+{%- endif -%}
+

data/_includes/languages/languages.html

@@ -0,0 +1,61 @@
+{%- if page.matchurls -%}
+{%- assign matchurls = page.matchurls | split: '&&' -%}
+{%- else -%}
+{%- if site.languageslist -%}
+{%- assign matchurls = site.languageslist | split: '&&' -%}
+{%- else -%}
+{%- assign matchurls
+= "id&&da&&de&&en&&es&&fr&&it&&nl&&pl&&pt&&sv&&vi&&tr&&ru&&uk&&ar&&hi&&th&&ko&&ja&&zh&&zh-TW&&zh-tw" | split: '&&' -%}
+{%- endif -%}
+{%- endif -%}
+{% assign id = "id&&Bahasa Indonesia" | split: '&&' %}
+{% assign ms-MY = "ms-MY&&Bahasa Malaysia" | split: '&&' %}
+{% assign da = "da&&Dansk" | split: '&&' %}
+{% assign de = "de&&Deutsch" | split: '&&' %}
+{% assign en = "en&&English" | split: '&&' %}
+{% assign es = "es&&Español" | split: '&&' %}
+{% assign fr = "fr&&Français" | split: '&&' %}
+{% assign it = "it&&Italiano" | split: '&&' %}
+{% assign nl = "nl&&Nederlands" | split: '&&' %}
+{% assign nb = "nb&&Norsk (bokmål)" | split: '&&' %}
+{% assign pl = "pl&&Polski" | split: '&&' %}
+{% assign pt = "pt&&Português" | split: '&&' %}
+{% assign sv = "sv&&Svenska" | split: '&&' %}
+{% assign vi = "vi&&Tiếng Việt" | split: '&&' %}
+{% assign tr = "tr&&Türkçe" | split: '&&' %}
+{% assign ru = "ru&&Русский" | split: '&&' %}
+{% assign uk = "uk&&Українська" | split: '&&' %}
+{% assign ar = "ar&&العربية" | split: '&&' %}
+{% assign hi = "hi&&हिन्दी" | split: '&&' %}
+{% assign th = "th&&ภาษาไทย" | split: '&&' %}
+{% assign ko = "ko&&한국어" | split: '&&' %}
+{% assign ja = "ja&&日本語" | split: '&&' %}
+{% assign zh = "zh&&简体中文" | split: '&&' %}
+{% assign zh-TW = "zh-TW&&繁體中文" | split: '&&' %}
+{% assign zh-tw = "zh-tw&&繁體中文" | split: '&&' %}
+{% assign am= "am&&አማርኛ" | split: '&&' %}
+{% assign fil= "fil&&pilipino" | split: '&&' %}
+{% assign fa= "fa&&فارسی" | split: '&&' %}
+{% assign gu= "gu&&ગુજરાતી" | split: '&&' %}
+{% assign ga= "ga&&Gaeilge" | split: '&&' %}
+{% assign rw= "rw&&kinyarwanda" | split: '&&' %}
+{% assign la= "la&&Srpski" | split: '&&' %}
+{% assign ml= "ml&&മലയാളം" | split: '&&' %}
+{% assign mr= "mr&&मराठी" | split: '&&' %}
+{% assign zh= "zh&&拼音" | split: '&&' %}
+{% assign pt= "pt&&(Português)" | split: '&&' %}
+{% assign pa= "pa&&ਪੰਜਾਬੀ" | split: '&&' %}
+{% assign tl= "tl&&tagalog" | split: '&&' %}
+{% assign ta= "ta&&தமிழ்" | split: '&&' %}
+{% assign te= "te&&తెలుగు" | split: '&&' %}
+{% assign ur= "ur&&اردو" | split: '&&' %}
+{% assign as= "as&&অসমীয়া" | split: '&&' %}
+{% assign bn= "bn&&বাংলা" | split: '&&' %}
+{% assign kn= "kn&&ಕನ್ನಡ" | split: '&&' %}
+{% assign ne= "ne&&नेपाली" | split: '&&' %}
+{% assign no= "no&&Norsk" | split: '&&' %}
+{% assign fa= "fa&&فارسی" | split: '&&' %}
+{% assign or= "or&&ଓଡ଼ିଆ" | split: '&&' %}
+{% assign sa= "sa&&संस्कृत" | split: '&&' %}
+{% assign si= "si&&සිංහල" | split: '&&' %}
+{% assign tr= "tr&&Türkçe" | split: '&&' %}

data/_includes/monumetric/ads.html

@@ -0,0 +1,58 @@
+{% if page.url != '/' %}
+{% if jekyll.environment == 'production' and site.adsId %}
+<script>
+    const autoLoadDuration = 5; //In Seconds
+    const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
+
+    const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);
+
+    eventList.forEach(function (event) {
+        window.addEventListener(event, triggerScripts, { passive: true })
+    });
+
+    function triggerScripts() {
+        runScripts();
+        clearTimeout(autoLoadTimeout);
+        eventList.forEach(function (event) {
+            window.removeEventListener(event, triggerScripts, { passive: true });
+        });
+    }
+
+    function runScripts() {
+        document.querySelectorAll("script[delay]").forEach(function (scriptTag) {
+            scriptTag.setAttribute("src", scriptTag.getAttribute("delay"));
+        });
+    }
+</script>
+<script type="text/javascript" delay="/assets/js/ads.js" crossorigin="anonymous"></script>
+{% endif %}
+
+{% if jekyll.environment == 'development' and site.adsId %}
+<script>
+    const autoLoadDuration = 5; //In Seconds
+    const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
+
+    const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);
+
+    eventList.forEach(function (event) {
+        window.addEventListener(event, triggerScripts, { passive: true })
+    });
+
+    function triggerScripts() {
+        runScripts();
+        clearTimeout(autoLoadTimeout);
+        eventList.forEach(function (event) {
+            window.removeEventListener(event, triggerScripts, { passive: true });
+        });
+    }
+
+    function runScripts() {
+        document.querySelectorAll("script[delay]").forEach(function (scriptTag) {
+            scriptTag.setAttribute("src", scriptTag.getAttribute("delay"));
+        });
+    }
+</script>
+<script type="text/javascript" delay="/assets/js/ads.js" crossorigin="anonymous"></script>
+
+{% endif %}
+{% endif %}

data/_includes/monumetric/monumetric.html

@@ -0,0 +1,58 @@
+{% if page.url != '/' and page.lang == "en" %}
+{% if jekyll.environment == 'production' and site.monumetricId %}
+<script>
+    const autoLoadDuration = 5; //In Seconds
+    const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
+
+    const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);
+
+    eventList.forEach(function (event) {
+        window.addEventListener(event, triggerScripts, { passive: true })
+    });
+
+    function triggerScripts() {
+        runScripts();
+        clearTimeout(autoLoadTimeout);
+        eventList.forEach(function (event) {
+            window.removeEventListener(event, triggerScripts, { passive: true });
+        });
+    }
+
+    function runScripts() {
+        document.querySelectorAll("script[delay]").forEach(function (scriptTag) {
+            scriptTag.setAttribute("src", scriptTag.getAttribute("delay"));
+        });
+    }
+</script>
+<script type="text/javascript" defer delay="{{site.monumetricId}}" data-cfasync="false"></script>
+{% endif %}
+
+{% if jekyll.environment == 'development' and site.monumetricId %}
+<script>
+    const autoLoadDuration = 5; //In Seconds
+    const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
+
+    const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);
+
+    eventList.forEach(function (event) {
+        window.addEventListener(event, triggerScripts, { passive: true })
+    });
+
+    function triggerScripts() {
+        runScripts();
+        clearTimeout(autoLoadTimeout);
+        eventList.forEach(function (event) {
+            window.removeEventListener(event, triggerScripts, { passive: true });
+        });
+    }
+
+    function runScripts() {
+        document.querySelectorAll("script[delay]").forEach(function (scriptTag) {
+            scriptTag.setAttribute("src", scriptTag.getAttribute("delay"));
+        });
+    }
+</script>
+<script type="text/javascript" delay="{{site.monumetricId}}"></script>
+
+{% endif %}
+{% endif %}