GitHub - Vickyeeii/Clone-8

Branches Tags
Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
.github/workflows		.github/workflows
index.html		index.html
utilities_changelog.html		utilities_changelog.html
utilities_instruction.html		utilities_instruction.html
utilities_license.html		utilities_license.html
utilities_style-guide.html		utilities_style-guide.html
Repository files navigation

<!DOCTYPE html>
<html
  data-wf-domain="kitpro-fluke.webflow.io"
  data-wf-page="68ae68d1a017ccf41fd5f80e"
  data-wf-site="68ae68d1a017ccf41fd5f812"
  lang="en"
>
  <head>
    <meta charset="utf-8" />
    <title>License - Fluke - HTML website template</title>
    <meta
      content="Standard and guidelines for this template."
      name="description"
    />
    <meta
      content="License  - Fluke -  HTML website template"
      property="og:title"
    />
    <meta
      content="Standard and guidelines for this template."
      property="og:description"
    />
    <meta
      content="License  - Fluke -  HTML website template"
      property="twitter:title"
    />
    <meta
      content="Standard and guidelines for this template."
      property="twitter:description"
    />
    <meta content="website" property="og:type" />
    <meta content="summary_large_image" name="twitter:card" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Webflow" name="generator" />
    <link
      href="https://cdn.prod.website-files.com/68ae68d1a017ccf41fd5f812/css/kitpro-fluke.webflow.shared.7e2a5c528.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link
      crossorigin="anonymous"
      href="https://fonts.gstatic.com"
      rel="preconnect"
    />
    <script
      src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"
      type="text/javascript"
    ></script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [
            "Inter Tight:100,200,300,regular,500,600,700,800,900,italic",
            "Material Icons:regular",
          ],
        },
      });
    </script>
    <script type="text/javascript">
      !(function (o, c) {
        var n = c.documentElement,
          t = " w-mod-";
        (n.className += t + "js"),
          ("ontouchstart" in o ||
            (o.DocumentTouch && c instanceof DocumentTouch)) &&
            (n.className += t + "touch");
      })(window, document);
    </script>
    <link
      href="https://cdn.prod.website-files.com/68ae68d1a017ccf41fd5f812/68c12117b58523da25614921_favicon.png"
      rel="shortcut icon"
      type="image/x-icon"
    />
    <link
      href="https://cdn.prod.website-files.com/68ae68d1a017ccf41fd5f812/68c1211cae8a938e130c8da2_webclip.png"
      rel="apple-touch-icon"
    />
    <script>
      function removeExisting() {
        const idsToRemove = ["root"];

        idsToRemove.forEach((id) => {
          const el = document.getElementById(id);
          if (el) {
            el.remove();
            console.log(`Removed existing: <div id="${id}">`);
          }
        });

        const classBasedRoot = document.querySelector(
          "div.stack_s1n8l1x5.button_blajnuz"
        );
        if (classBasedRoot) {
          classBasedRoot.remove();
          console.log("Removed existing root via class-based selector.");
        }

        const badge = document.querySelector(".w-webflow-badge");
        if (badge) {
          badge.remove();
          console.log("Removed existing: element with class 'w-webflow-badge'");
        }

        const meta = document.querySelector(
          'meta[name="robots"][content="noindex"]'
        );
        if (meta) {
          meta.remove();
          console.log(
            "Removed existing: <meta name='robots' content='noindex'>"
          );
        }
      }

      document.addEventListener("DOMContentLoaded", () => {
        removeExisting();

        const observer = new MutationObserver((mutations) => {
          for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
              if (node.nodeType === Node.ELEMENT_NODE) {
                if (
                  node.tagName === "META" &&
                  node.getAttribute("name") === "robots" &&
                  node.getAttribute("content") === "noindex"
                ) {
                  node.remove();
                  console.log(
                    "Removed: <meta name='robots' content='noindex'>"
                  );
                }

                if (
                  node.classList &&
                  node.classList.contains("w-webflow-badge")
                ) {
                  node.remove();
                  console.log("Removed: element with class 'w-webflow-badge'");
                }
              }
            }
          }
        });

        observer.observe(document, { childList: true, subtree: true });
      });
    </script>
  </head>
  <body>
    <section class="main-section utilities-head">
      <div class="w-layout-blockcontainer main-container w-container">
        <div class="utility-title">
          <h2>License</h2>
          <div class="license-description">
            <p>
              All graphical assets in this template are licensed for personal
              and commercial use. If you’d like to use a specific asset, please
              check the license below.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="main-section utility-content">
      <div class="w-layout-blockcontainer main-container w-container">
        <div class="w-layout-vflex license-block-wrapper">
          <div class="w-layout-hflex license-block">
            <div class="license-type">
              <div class="medium-text">Image License</div>
            </div>
            <div class="license-detail">
              <p>
                All images featured in this template are licensed for both
                personal and commercial use at no cost. If you wish to use a
                particular image, you can review the licenses and download them
                for free from
                <a class="link-license" href="https://uxwing.com/"> UXwing </a>
                ,
                <a class="link-license" href="https://www.pexels.com/">
                  Pexels
                </a>
                ,
                <a class="link-license" href="https://www.lummi.ai/">
                  Lummi.ai
                </a>
                ,
                <a
                  class="link-license"
                  href="https://www.freepik.com/"
                  target="_blank"
                >
                  Freepik
                </a>
                and
                <a
                  class="link-license"
                  href="https://unsplash.com/"
                  target="_blank"
                >
                  Unsplash
                </a>
                .
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <script
      crossorigin="anonymous"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=68ae68d1a017ccf41fd5f812"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/68ae68d1a017ccf41fd5f812/js/webflow.schunk.36b8fb49256177c8.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/68ae68d1a017ccf41fd5f812/js/webflow.schunk.1d96d0c61ec66ecf.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/68ae68d1a017ccf41fd5f812/js/webflow.4864b1ed.1cb3a8e05f8ff8e3.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/gsap/3.13.0/gsap.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/gsap/3.13.0/Flip.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollTrigger.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/gsap/3.13.0/SplitText.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/gsap/3.13.0/CustomEase.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/gsap/3.13.0/CustomWiggle.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/gsap/3.13.0/CustomBounce.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdn.prod.website-files.com/gsap/3.13.0/EasePack.min.js"
      type="text/javascript"
    ></script>
    <script type="text/javascript">
      gsap.registerPlugin(
        Flip,
        ScrollTrigger,
        SplitText,
        CustomEase,
        CustomWiggle,
        CustomBounce,
        EasePack
      );
    </script>
    <script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
    <script>
      // lenis smooth scroll

      {
        let lenis;

        const initScroll = () => {
          lenis = new Lenis({});
          lenis.on("scroll", ScrollTrigger.update);
          gsap.ticker.add((time) => lenis.raf(time * 1000));
          gsap.ticker.lagSmoothing(0);
        };

        function initGsapGlobal() {
          // Do everything that needs to happen
          //  before triggering all
          // the gsap animations

          initScroll();

          // match reduced motion media
          // const media = gsap.matchMedia();

          // Send a custom
          //  event to all your
          // gsap animations
          // to start them

          const sendGsapEvent = () => {
            window.dispatchEvent(
              new CustomEvent("GSAPReady", {
                detail: {
                  lenis,
                },
              })
            );
          };

          // Check if fonts are already loaded

          if (document.fonts.status === "loaded") {
            sendGsapEvent();
          } else {
            document.fonts.ready.then(() => {
              sendGsapEvent();
            });
          }

          // We need specific handling because the
          // grid/list changes the scroll height of the whole container
          //

          let resizeTimeout;
          const onResize = () => {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => {
              ScrollTrigger.refresh();
            }, 50);
          };

          window.addEventListener("resize", () => onResize());
          const resizeObserver = new ResizeObserver((entries) => onResize());
          resizeObserver.observe(document.body);

          queueMicrotask(() => {
            gsap.to("[data-start='hidden']", {
              autoAlpha: 1,
              duration: 0.1,
              delay: 0.2,
            });
          });
        }

        // this only for dev

        const documentReady =
          document.readyState === "complete" ||
          document.readyState === "interactive";

        if (documentReady) {
          initGsapGlobal();
        } else {
          addEventListener("DOMContentLoaded", (event) => initGsapGlobal());
        }
      }
    </script>
    <script>
      //About Section
      // Image Card Loop
      const items = document.querySelectorAll(".project-card");
      const offset = 30;

      gsap.set(items, {
        zIndex: (index) => items.length - index,
        opacity: 0,
        scale: 0.8,
      });

      // ------------------ Diagonal Loop (Desktop, unchanged) ------------------ //
      function diagonalLoop(items) {
        let totalItems = items.length;
        let currentItem = 0;

        function updatePositions() {
          for (let i = 0; i < totalItems; i++) {
            let itemIndex = (currentItem + i) % totalItems;
            let item = items[itemIndex];
            gsap.to(item, {
              x: offset * i,
              y: -offset * i * 1.5, // ⬆️ diagonal upward
              zIndex: totalItems - i,
              scale: 1,
              opacity: 1,
              duration: 0.6,
            });
          }
        }

        function moveToNext() {
          currentItem = (currentItem + 1) % totalItems;
          updatePositions();
        }

        updatePositions();
        setInterval(moveToNext, 2000);
      }

      // ------------------ Straight Loop (Mobile, fixed to stack upward) ------------------ //
      function straightLoop(items) {
        let totalItems = items.length;
        let currentItem = 0;

        function updatePositions() {
          for (let i = 0; i < totalItems; i++) {
            let itemIndex = (currentItem + i) % totalItems;
            let item = items[itemIndex];
            gsap.to(item, {
              x: 0,
              y: -offset * i * 1.5, // ⬆️ straight upward (TOP visible first)
              zIndex: totalItems - i,
              scale: 1,
              opacity: 1,
              duration: 0.6,
            });
          }
        }

        function moveToNext() {
          currentItem = (currentItem + 1) % totalItems;
          updatePositions();
        }

        updatePositions();
        setInterval(moveToNext, 2000);
      }

      // ------------------ Responsive Setup ------------------ //
      document.addEventListener("DOMContentLoaded", function () {
        gsap.registerPlugin(ScrollTrigger);

        ScrollTrigger.create({
          trigger: ".about-scroll-trigger",
          start: "top 80%",
          once: true,
          onEnter: () => {
            if (window.innerWidth <= 428) {
              straightLoop(items); // 📱 Mobile → stacked upward (top peeks out)
            } else {
              diagonalLoop(items); // 💻 Desktop → original diagonal upward
            }
          },
        });
      });
      // END Image Card Loop

      //WHY US SECTION
      // Counter
      gsap.registerPlugin(ScrollTrigger);

      document.querySelectorAll(".why-us-card").forEach((card) => {
        let counter = card.querySelector(".number");

        if (counter) {
          let finalValue = parseInt(counter.textContent, 10);

          // Set initial value to 0
          counter.textContent = "0";

          ScrollTrigger.create({
            trigger: card,
            start: "top 80%", // when each card reaches 80% down the viewport
            once: true,
            onEnter: () => {
              gsap.fromTo(
                counter,
                { innerText: 0 },
                {
                  innerText: finalValue,
                  duration: 2,
                  ease: "power1.out",
                  snap: { innerText: 1 },
                }
              );
            },
          });
        }
      });

      // END Counter
    </script>
  </body>
</html>