choozmo
/
AI_Video_LP


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>ChoozMo 全球 YT 推廣服務 | 集仕多</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link rel="stylesheet" href="/css/style.css">
  <!-- 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 -->

  <!-- Google Tag Manager -->
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-MTWWP3G');</script>
  <!-- End Google Tag Manager -->

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-G5H9MMGQFM"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-G5H9MMGQFM');
  </script>

  <!-- Global site tag (gtag.js) - Google Ads: 474336061 -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-474336061"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'AW-474336061');
  </script>
</head>

<body>
  {{ partial "navbar.html" . }}
  <main id="global-yt">

    <img src="/imgs/dm/ai-video/SaaS-08.webp" alt="" class="img-fluid bg-img">
    <div class="container my-5 py-5 position-relative">
      <form id="ytForm" class="row g-3 justify-content-center">
        <p class="text-center">
          請留下您的資訊
        </p>

        <div class="col-md-7 mb-3">
          <label for="email" class="form-label">
            電子郵件：
          </label>
          <input type="email" class="form-control" id="email" placeholder="請輸入您的電子郵件地址" required>
        </div>

        <div class="col-md-7 mb-3">
          <label for="youtubeLink" class="form-label">
            YouTube 連結：
          </label>
          <input type="url" class="form-control" id="youtubeLink" placeholder="請貼上您的 YouTube 影片連結" required>
        </div>

        <div class="col-md-7 mt-4">
          <button onclick="sendYTData()" id="submitYTData" type="submit" class="btn btn-primary w-100">送出</button>
        </div>

      </form>

      <hr>

      <div class="content">
        {{ .Content }}
      </div>

      <div id="form">
        {{ partial "form-main.html" . }}
      </div>
    </div>


  </main>

  {{ partial "footer.html" . }}

  <script type="application/javascript">
    var doNotTrack = false;
    if (!doNotTrack) {
      (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
          m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
      ga('create', 'UA-153100602-5', 'auto');

      ga('send', 'pageview');
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
    crossorigin="anonymous"></script>

  <script>
    function sendYTData() {
      event.preventDefault(); // 阻止表單自動送出

      const email = document.getElementById("email").value.trim();
      const ytLink = document.getElementById("youtubeLink").value.trim();
      const submitBtn = document.querySelector("#submitYTData");

      if (!email || !ytLink) {
        alert("請完整填寫電子郵件與 YouTube 連結");
        return;
      }

      // 顯示 Loading 狀態
      submitBtn.disabled = true;
      submitBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 送出中...`;

      const data = {
        yt_link: ytLink,
        email: email
      };

      fetch("https://cmm.ai:10001/auth/add_yt_record", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(response => response.json())
        .then(result => {
          console.log("成功送出：", result);
          alert("您的資料已送出！");

          // 清空輸入框
          document.getElementById("email").value = "";
          document.getElementById("youtubeLink").value = "";
        })
        .catch(error => {
          console.error("送出失敗：", error);
          alert("送出失敗，請稍後再試！");
        })
        .finally(() => {
          // 恢復按鈕狀態
          submitBtn.disabled = false;
          submitBtn.innerHTML = "送出";
        });
    }
  </script>
</body>

</html>