simplex-chat/website/src/_includes/simplex_explained.html

<style>
    .tab-button {
        color: #a8b0b4;
        background: linear-gradient(#fff, #fff) padding-box,
            linear-gradient(to bottom, #a8b0b4, transparent) border-box;
        border: 1px solid transparent;
        border-radius: 6px 6px 0px 0px;
        transition: color 0.3s ease;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .dark .tab-button{
        color: #fff;
        background: linear-gradient(#0C0B13, #0C0B13) padding-box,
            linear-gradient(to bottom, #01F1FF, transparent) border-box;
    }
    .tab-button.active {
        color: #0053d0;
        text-decoration: none;
    }
    .dark .tab-button.active {
        color: #70F0F9;
    }
</style>

<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[890px] py-[90px] px-5">
    <div class="container">
        <h2 class="text-[35px] leading-[45px] md:leading-[55px] lg:text-[38px] text-center font-bold text-grey-black dark:text-white mb-9">{{ "simplex-explained" | i18n({}, lang ) | safe }}</h2>

        <!-- Tab links -->
        <div class="tabs hidden md:flex gap-2 mb-24">
            <div data-btn-index="0" class="flex-1 tab-button tab-1 p-2 text-[20px] text-center font-bold cursor-pointer active">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
            <div data-btn-index="1" class="flex-1 tab-button tab-2 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
            <div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
        </div>

        <div class="simplex-explained-lottie h-[340px] mb-[74px] hidden md:block"></div>

        <!-- Tab content -->
        <div class="swiper simplex-explained-swiper">
            <div class="swiper-wrapper h-[inherit] mb-20 md:mb-0">

                <div class="swiper-slide h-[inherit]">
                    <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
                    <div class="flex flex-col justify-center items-center">
                        <img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-1.svg" alt="" />
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-1-p-1" | i18n({}, lang ) | safe }}
                        </p>
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-1-p-2" | i18n({}, lang ) | safe }}
                        </p>
                    </div>
                </div>

                <div class="swiper-slide h-[inherit]">
                    <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
                    <div class="flex flex-col justify-center items-center">
                        <img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-2.svg" alt="" />
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-2-p-1" | i18n({}, lang ) | safe }}
                        </p>
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-2-p-2" | i18n({}, lang ) | safe }}
                        </p>
                    </div>
                </div>

                <div class="swiper-slide h-[inherit]">
                    <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
                    <div class="flex flex-col justify-center items-center">
                        <img class="h-[340px] mb-[74px] mt-[74px] md:hidden" src="/img/new/explained-3.svg" alt="" />
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-3-p-1" | i18n({}, lang ) | safe }}
                        </p>
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-3-p-2" | i18n({}, lang ) | safe }}
                        </p>
                    </div>
                </div>

            </div>
            <div class="swiper-pagination simplex-explained-swiper-pagination mt-100 md:hidden"></div>
        </div>
    </div>
</section>

<script src="/js/lottie.min.js"></script>
<script>
window.addEventListener("load", function () {
    const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
    const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");

    const simplexExplainedLottie = document.querySelector('.simplex-explained-lottie');

    const simplexExplainedLottieAnimation = lottie.loadAnimation({
        container: simplexExplainedLottie,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        path: '/lottie_file/SimpleXExplainedLottie.json'
    })

    let targetFrame = null;

    function animateToTarget() {
        if (targetFrame !== null) {
            const currentFrame = Math.round(simplexExplainedLottieAnimation.currentRawFrame);
            if (currentFrame !== targetFrame) {
                const direction = currentFrame < targetFrame ? 1 : -1;
                simplexExplainedLottieAnimation.goToAndStop(currentFrame + direction, true);
                setTimeout(animateToTarget, 22);  // Add delay here
            }
        }
    }

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target.classList.contains("swiper-pagination")) {
                simplexExplainedSwiper__bullets.forEach((el,index) => {
                    if (el.classList.contains("swiper-pagination-bullet-active")) {
                        simplexExplainedSwiper__tabs[index].classList.add("active");

                        const currentFrame = Math.round(simplexExplainedLottieAnimation.currentRawFrame);
                        if(index === 0){
                            if (currentFrame > 0) {
                                targetFrame = 0;
                                animateToTarget();
                            }
                        }else if(index === 1){ 
                            if (currentFrame !== 35) {
                                targetFrame = 35;
                                animateToTarget();
                            }
                        }else if(index === 2){
                            if (currentFrame < 68) {
                                targetFrame = 68;
                                animateToTarget();
                            }
                        }
                    } else {
                        simplexExplainedSwiper__tabs[index].classList.remove("active");
                    }
                });
            }
        });
    }); 

    const targetNode = document.querySelector(".simplex-explained-swiper .swiper-pagination");
    observer.observe(targetNode, { attributes: true });

    window.addEventListener('click',e=>{
        if(e.target.closest("#simplex-explained .tabs .tab-button")){
            const index = e.target.closest("#simplex-explained .tabs .tab-button").dataset.btnIndex;
            simplexExplainedSwiper__bullets[index].click();
        }
    })
});
</script>