choozmo
/
AI_Video_LP


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">

{{ partial "components/head.html" . }}
<!-- Start of HubSpot Embed Code -->
<!-- <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script> -->
<!-- End of HubSpot Embed Code -->

<body>

  <div id="all" style="overflow: hidden;">

    {{ partial "components/nav.html" . }}

    <div id="home">
      {{ partial "components/carousel.html" . }}
      <div class="home-cn">
        <!-- {{ partial "components/main.html" . }} -->
        <!-- {{ partial "components/serve.html" . }} -->
        <!-- {{ partial "components/ai-video.html" . }} -->
        <div class="reporter-img">
          <img src="imgs/home/ai-reporter.webp" alt="AI記者｜語音專訪">
        </div>
        {{ partial "components/progress.html" . }}
        {{ partial "LP_components/blogs_tab.html" . }}
        {{ partial "LP_components/action.html" . }}
        {{ partial "footer.html" . }}
      </div>
      <div class="home-en">
        <!-- {{ partial "components/en/main.html" . }} -->
        <!-- {{ partial "components/en/serve.html" . }} -->
        <!-- {{ partial "components/en/ai-video.html" . }} -->
        {{ partial "components/progress.html" . }}
        {{ partial "components/en/action.html" . }}
        {{ partial "components/en/footer.html" . }}
      </div>
    </div>

    <!-- Modal 測試 -->
    <!-- <div class="modal fade" id="aiModal" tabindex="-1" aria-labelledby="aiModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="aiModalLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
              <div class="col-6">
                <div class="p-3 border bg-light">Row column</div>
              </div>
              <div class="col-6">
                <div class="p-3 border bg-light">Row column</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->


    <!-- <div id="home">
      {{ partial "components/carousel.html" . }}
      {{ partial "components/main.html" . }}
      {{ partial "components/serve.html" . }}
      {{ partial "components/ai-video.html" . }}
      {{ partial "components/progress.html" . }}
      {{ partial "LP_components/blogs_tab.html" . }}
      {{ partial "LP_components/action.html" . }}
      {{ partial "footer.html" . }}
    </div> -->

    <!-- {{ partial "nav.html" . }}
    {{ partial "LP_components/hero.html" . }}
    {{ partial "LP_components/video.html" . }}
    {{ partial "LP_components/use_cases.html" . }}
    {{ partial "LP_components/steps.html" . }}
    {{ partial "LP_components/features.html" . }}
    {{ partial "LP_components/blogs_tab.html" . }}
    {{ partial "LP_components/action.html" . }}
    {{ partial "LP_components/Footer.html" . }}
    {{ partial "LP_components/news.html" . }} -->
  </div>
  <!-- /#all -->

  {{ partial "components/scripts.html" . }}

  <script>
    $('#home_en').hide();
    localStorage.setItem('lang', 'cn'); // 預設為中文

    // 切換首頁語言
    function toggleLang() {
      let currentLang = localStorage.getItem('lang');
      if (currentLang === 'en') {
        localStorage.setItem('lang', 'cn');
      } else if (currentLang === 'cn') {
        localStorage.setItem('lang', 'en');
      }
      let lang = localStorage.getItem('lang');
      toggleTemplate(lang);
    }

    function toggleTemplate(lang) {
      if (lang === 'en') {
        $('.home-en').show();
        $('.home-cn').hide();
      } else {
        $('.home-en').hide();
        $('.home-cn').show();
      }
      $('html, body').animate({
        scrollTop: $(`.home-${lang}`).offset().top
      }, 0);
    }

    function tabLP() {
      if (('.m-tabs').length) {
        // Show the first tab by default
        $('.blog-tabs-stage>div').hide();
        $('.blog-tabs-stage>div:first').show();
        $('.blog-tabs-nav li:first').addClass('blog-tab-active');

        // Change tab class and display content
        $('.blog-tabs-nav a').on('click', function (event) {
          event.preventDefault();
          $('.blog-tabs-nav li').removeClass('blog-tab-active');
          $(this).parent().addClass('blog-tab-active');
          $('.blog-tabs-stage>div').hide();
          $($(this).attr('href')).show();
        });
      }
    }
    tabLP();

    function debounce(func, wait = 20, immediate = true) {
      var timeout;
      return function () {
        var context = this, args = arguments;
        var later = function () {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    };
    const featuresBlock = document.querySelectorAll('.features-block');
    const featuresRow = document.querySelectorAll('.sec-features .row');
    function checkSlide() {
      featuresRow.forEach((block, i) => {
        // half way through the image
        const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
        // bottom of the image
        const isHalfShown = slideInAt > block.offsetTop;
        if (isHalfShown) {
          console.log('active');
          featuresBlock[i].classList.add('active');
        }
      });
    }
    window.addEventListener('scroll', debounce(checkSlide));

    var swiper = new Swiper(".carousel", {
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      loop: true,
      observer: true,
      observeParents: true,
      parallax: true,
      slidesPerView: 1,
      slidesPerGroup: 1,
    });

    let aiModal = new bootstrap.Modal(document.getElementById('aiModal')); // relatedTarget
    aiModal.show();
  </script>
  <!-- 進度條 -->
  <script src="../js/progress.js"></script>
</body>

</html>