choozmo
/
AI_Video_LP


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
							<!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 Free PR Service 新聞發布服務 | 集仕多</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">

  <style>
    /* 外層容器 */
    .container {
      width: 100%;
      overflow-x: auto;
      margin-bottom: 12px;
      font-weight: 500;
    }

    h1 {
      margin-bottom: 3rem;
      text-align: center;
      font-weight: bold;
    }

    /* 內容框架 */
    .form-wrapper {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 16px 0;
      border-radius: 8px;
    }

    /* 圖片上傳 */
    .upload-section {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
    }

    .file-input {
      padding: 8px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 6px;
      cursor: pointer;
    }

    /* .upload-section {
      width: 100%;
    }

    .file-input {
      display: none;
    }

    .upload-btn {
      color: #920783;
      background-color: #ffffff;
      border: 1px solid #920783;
      font-weight: 500;
      border-radius: 8px;
      font-size: 14px;
      padding: 10px 20px;
      margin-right: 8px;
      margin-bottom: 8px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .upload-btn:hover {
      background-color: #920783;
      color: #ffffff;
    } */

    /* 圖片預覽 */
    .preview {
      margin-top: 8px;
    }

    .preview-img {
      max-height: 240px;
      object-fit: cover;
      border-radius: 8px;
    }

    /* 文字輸入 */
    .text-section {
      width: 100%;
    }

    .text-area {
      width: 100%;
      height: 160px;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 12px;
      resize: none;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    /* 選項 */
    .options {
      margin-top: 16px;
    }

    .options-title {
      margin-bottom: 8px;
      font-weight: 600;
      font-size: 1.25rem;
    }

    .option-item {
      display: block;
      cursor: pointer;
      margin-bottom: 4px;
    }

    /* 送出按鈕 */
    .submit-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #ffffff;
      background-color: #920783;
      border: 1px solid transparent;
      font-weight: 500;
      border-radius: 8px;
      padding: 10px 50px;
      margin-right: 8px;
      margin-bottom: 8px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .submit-btn:hover {
      background-color: #ffffff;
      color: #920783;
      border: 1px solid #920783;
    }

    .submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* 讀取動畫 */
    .spinner {
      animation: spin 1s linear infinite;
      height: 20px;
      width: 20px;
      color: white;
    }

    .spinner-bg {
      opacity: 0.25;
    }

    .spinner-path {
      opacity: 0.75;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .contact-input {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px;
    }

    .contact-input input {
      padding: 10px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .contact-input input:focus,
    .text-area:focus {
      outline: none;
      border-color: #920783;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    label span {
      color: red;
    }

    .bg-img {
      position: absolute;
      z-index: -1;
      top: -15vw;
      opacity: 0.5;
    }

    small {
      display: inline-block;
      color: #767676;
      font-weight: 600;
    }

    label {
      font-weight: 600;
      margin-bottom: 6px;
    }
  </style>

  <!-- 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="media-release">

    <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="mediaForm" class="row g-3 justify-content-center mt-5">
        <h1 class="text-center mb-0">
          Free PR Service <br> <small>新聞發布服務</small>
        </h1>

        <div class="col-md-8">

          <div class="contact-input  mb-4">
            <label for="email">
              Email <span>(*) mandatory</span>
              <br> <small>電子郵件</small>
            </label>
            <input type="text" id="email" placeholder="Enter your email" />
          </div>

          <div class="contact-input mb-4">
            <label for="headline">
              News Headline <span>(*) mandatory</span> <br> <small>新聞標題</small>
            </label>
            <input type="text" id="headline" placeholder="Enter news headline" />
          </div>

          <div class="contact-input  mb-4">
            <label for="contactId">LINE ID / WhatsApp ID</label>
            <input type="text" id="contactId" placeholder="Enter your LINE or WhatsApp ID" />
          </div>

          <div class="form-wrapper">
            <div class="text-section mb-2">
              <label for="newsText" class="form-label">News Content <span>(*) mandatory</span>
                <br><small>新聞內文</small></label>
              <textarea id="newsText" placeholder="Enter news content..." class="text-area"></textarea>
            </div>

            <div class="upload-section">
              <label for="fileInput">Select Image <span>(*) mandatory</span> <br><small>選擇圖片</small></label>
              <input type="file" id="fileInput" class="file-input" accept="image/*" />
              <div id="preview" class="preview"></div>

              <!-- <input type="file" id="fileInput" class="file-input" accept="image/*" />
              <button type="button" id="uploadBtn" class="upload-btn">Select Image <br> 選擇圖片 </button>
              <div id="preview" class="preview"></div> -->
            </div>
          </div>

          <!-- <div class="options">
            <p class="options-title mb-0">Publishing Platform (optional, multiple choices allowed)</p>
            <small class="mb-3">發布平台（可多選，非必填）</small>
            <label class="option-item"><input type="checkbox" value="經濟日報網路版" />
              Economic Daily <br>
              <small class="ms-3">&nbsp;經濟日報網路版</small>
            </label>
            <label class="option-item"><input type="checkbox" value="工商時報網路版" /> Commercial Times <br>
              <small class="ms-3">&nbsp;工商時報網路版</small></label>
            <label class="option-item"><input type="checkbox" value="Yahoo 新聞" /> Yahoo News <br> <small
                class="ms-3">&nbsp;Yahoo
                新聞</small></label>
          </div> -->


          <button type="button" id="submitBtn" class="submit-btn">
            <span>Submit <br> 送出</span>
          </button>
        </div>
      </form>

      <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-8">
            <section class="mt-5 py-5 bg-light">
              <div class="container text-center">
                <h3 class="fw-bold mb-4">Case Studies <br> <small class="mt-1">新聞發布案例</small></h3>
                <a href="https://drive.google.com/drive/folders/1n0uWt_VSQ_B8S8UZD5cf9i9L6x4dGKHu?usp=sharing"
                  target="_blank" class="btn btn-lg px-4 fw-bold" style="background-color:#ea5413; color:#fff;">
                  Explore Case Studies <br> <small class="text-white">查看案例集</small>
                </a>
              </div>
            </section>
          </div>
        </div>
      </div>

      <!-- <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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script>
    const fileInput = document.getElementById("fileInput");
    // const uploadBtn = document.getElementById("uploadBtn");
    const preview = document.getElementById("preview");
    const email = document.getElementById("email");
    const headline = document.getElementById("headline");
    const newsText = document.getElementById("newsText");
    const contactId = document.getElementById("contactId");
    const submitBtn = document.getElementById("submitBtn");
    const optionCheckboxes = document.querySelectorAll(".options input[type=checkbox]");

    let file = null;
    let fileName = "";
    let previewUrl = null;
    let isLoading = false;

    // // 觸發檔案選擇
    // uploadBtn.addEventListener("click", () => {
    //   fileInput.click();
    // });

    // 選擇檔案後處理
    fileInput.addEventListener("change", (e) => {
      const f = e.target.files[0];
      if (f) {
        file = f;
        previewUrl = URL.createObjectURL(f);
        fileName = f.name;
        preview.innerHTML = `<img src="${previewUrl}" class="preview-img" />`;
        // uploadBtn.textContent = fileName;
      }
    });

    // 送出表單
    submitBtn.addEventListener("click", async () => {
      console.log('送出表單');

      if (isLoading) return;

      // 檢查檔案
      if (!file) {
        Swal.fire({
          title: "請上傳圖片",
          icon: "warning",
          confirmButtonColor: "#910784",
        });
        return;
      }

      // 檢查標題
      if (!headline.value.trim()) {
        Swal.fire({
          title: "請輸入新聞標題",
          icon: "warning",
          confirmButtonColor: "#910784",
        });
        return;
      }

      // 檢查文字
      if (!newsText.value.trim()) {
        Swal.fire({
          title: "請輸入新聞稿文字",
          icon: "warning",
          confirmButtonColor: "#910784",
        });
        return;
      }

      // 檢查信箱
      if (!email.value.trim()) {
        Swal.fire({
          title: "請輸入 Email",
          icon: "warning",
          confirmButtonColor: "#910784",
        });
        return;
      }

      // 取得勾選選項
      const selectedOptions = Array.from(optionCheckboxes)
        .filter(cb => cb.checked)
        .map(cb => cb.value);

      isLoading = true;
      submitBtn.disabled = true;
      submitBtn.textContent = "處理中...";

      const formData = new FormData();
      formData.append("email", email.value);
      formData.append("image", file);
      formData.append("text", newsText.value);
      formData.append("title", headline.value);
      formData.append("contact_id", contactId.value);
      selectedOptions.forEach(opt => formData.append("options", opt));

      try {
        const response = await fetch("https://cmm.ai:10001/auth/add_form_record", {
          method: "POST",
          body: formData
        });

        const result = await response.json();
        console.log("handleSubmit", result);

        Swal.fire({
          title: "送出成功！",
          icon: "success",
          confirmButtonColor: "#910784",
        }).then(() => {
          // 清空欄位
          file = null;
          previewUrl = null;
          fileName = "";
          preview.innerHTML = "";
          email.value = "";
          headline.value = "";
          newsText.value = "";
          contactId.value = "";
          optionCheckboxes.forEach(cb => cb.checked = false);
          // uploadBtn.textContent = "選擇圖片";
        });

      } catch (error) {
        console.error("error", error);
      } finally {
        isLoading = false;
        submitBtn.disabled = false;
        submitBtn.innerHTML = "<span>Submit <br> 送出</span>";
      }
    });
  </script>
</body>

</html>