syuanyuri
/
news_aimedium_org


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
							<!doctype html>
<html lang="{{ .Lang }}">

<head>
  {{ partial "head" . }}

  <link rel="canonical" href="{{ .Permalink }}">

  <title>
    {{ block "title" . }}
    {{ .Title}}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}
    {{ end }}
  </title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"
    integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <link href='{{ "css/style.css" | relURL }}' rel="stylesheet">
  <style>
    .container {
      width: 100%;
      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;
    }

    .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: 500;
      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: var(--sub-color);
      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;
      text-decoration: none;
    }

    .submit-btn:hover {
      background-color: #ffffff;
      color: var(--sub-color);
      border: 1px solid var(--sub-color);
    }

    .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: var(--sub-color);
      box-shadow: none;
    }

    label span {
      color: red;
    }

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

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

    label {
      font-weight: 500;
      margin-bottom: 6px;
    }

    .title {
      color: var(--sub-color);
      text-align: center;
    }
  </style>

  {{ range .AlternativeOutputFormats -}}
  <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
  {{ end -}}
</head>

<body>
  {{ block "header" . }}
  {{ partial "header" . }}
  {{ end }}

  <div class="container my-5 py-5 position-relative">
    <h1 class="text-center mb-0">
      Free PR Service <br> <small>新聞發布服務</small>
    </h1>


    <div class="row g-3 justify-content-center mt-5">
      <div class="col-md-11">
        <div class="d-flex flex-column align-items-center mb-5">
          <h2 class="title">🎤 免費新聞發布，讓您的品牌被更多人看見</h2>
          <p class="lead mt-3 text-center">
            0 成本把您的產品、活動與品牌故事，<b>一鍵發布至新聞平台</b>，直達媒體與潛在客戶，輕鬆獲得曝光與關注！<br>
            只要填寫以下表單，我們協助您<span style="white-space:nowrap;">潤稿 × 發布</span>，加速上稿與曝光。
          </p>

          <div class="row g-4 mb-5 py-3">
            <!-- 免費＆省時 -->
            <div class="col-12 col-md-6 col-lg-3">
              <div class="card h-100 shadow-sm border-0">
                <div class="card-body text-center">
                  <div class="fs-1 mb-3">⏱️</div>
                  <h5 class="card-title">免費＆省時</h5>
                  <p class="card-text">填表 2 分鐘，其他交給我們。</p>
                </div>
              </div>
            </div>
            <!-- 專人協助 -->
            <div class="col-12 col-md-6 col-lg-3">
              <div class="card h-100 shadow-sm border-0">
                <div class="card-body text-center">
                  <div class="fs-1 mb-3">🙋</div>
                  <h5 class="card-title">專人協助</h5>
                  <p class="card-text">整理重點、統一格式，提升可讀與採用率。</p>
                </div>
              </div>
            </div>
            <!-- 快速擴散 -->
            <div class="col-12 col-md-6 col-lg-3">
              <div class="card h-100 shadow-sm border-0">
                <div class="card-body text-center">
                  <div class="fs-1 mb-3">📢</div>
                  <h5 class="card-title">快速擴散</h5>
                  <p class="card-text">依主題分類投遞至合適媒體／平台，提高被看見的機會。</p>
                </div>
              </div>
            </div>
            <!-- 彈性主題 -->
            <div class="col-12 col-md-6 col-lg-3">
              <div class="card h-100 shadow-sm border-0">
                <div class="card-body text-center">
                  <div class="fs-1 mb-3">✨</div>
                  <h5 class="card-title">彈性主題</h5>
                  <p class="card-text">新品上市、活動/展覽、里程碑公告、合作/募資、招募訊息…</p>
                </div>
              </div>
            </div>
          </div>

          <!-- <ul class="my-5" aria-label="服務重點">
            <li><strong>免費＆省時：</strong>填表 2 分鐘，其他交給我們。</li>
            <li><strong>專人協助：</strong>整理重點、統一格式，提升可讀與採用率。</li>
            <li><strong>快速擴散：</strong>依主題分類投遞至合適媒體／平台，提高被看見的機會。</li>
            <li><strong>彈性主題：</strong>新品上市、活動/展覽、里程碑公告、合作/募資、招募訊息…</li>
          </ul> -->

          <a href="#prForm" class="submit-btn" aria-label="前往表單填寫，開始免費發布">👉 立即填寫，免費發布</a>
          <small class="subtle">提交後，我們將盡快與您確認新聞稿並安排發布。</small>
        </div>
      </div>

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

        <form id="prForm" class="pt-5">
          <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 mb-2">
              <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>

            <!-- 上傳名單 (Excel/CSV) -->
            <div class="upload-section mb-2">
              <label for="listInput">Upload List<br><small>上傳名單（Excel / CSV）</small></label>
              <input type="file" id="listInput" class="file-input"
                accept=".csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
            </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> -->


          <div class="d-flex justify-content-center mt-4">
            <button type="button" id="submitBtn" class="submit-btn">
              <span>Submit <br> 送出</span>
            </button>
          </div>
        </form>
      </div>

      <!-- <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>

  {{ block "footer" . }}
  {{ partial "footer" . }}
  {{ end }}

  <!-- Bootstrap and Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"
    integrity="sha512-pax4MlgXjHEPfCwcJLQhigY7+N8rt6bVvWLFyUMuxShv170X53TRzGPmPkZmGBhk+jikR8WBM4yl7A9WMHHqvg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></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 listFile = null;
    let listFileName = "";
    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;
      }
    });

    const listInput = document.getElementById("listInput");

    // 上傳名單
    listInput.addEventListener("change", function () {
      const f = this.files && this.files[0] ? this.files[0] : null;
      if (!f) {
        listFile = null;
        listFileName = "";
        return;
      }

      // 格式檢查（.csv/.xls/.xlsx）
      const okTypes = [
        "text/csv",
        "application/vnd.ms-excel",
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      ];
      const okExt = [".csv", ".xls", ".xlsx"];
      const lowerName = f.name.toLowerCase();
      const pass =
        okTypes.includes(f.type) ||
        okExt.some((ext) => lowerName.endsWith(ext));

      if (!pass) {
        listFile = null;
        listFileName = "";
        listInput.value = ""; // 清空

        Swal.fire({
          title: "請選擇 .csv / .xls / .xlsx 檔案",
          icon: "warning",
          confirmButtonColor: "#910784",
        });

        return;
      }

      listFile = f;
      listFileName = f.name;
      console.log('listFile', listFile);
      console.log('listFileName', listFileName);

      // 顯示檔名與大小
      const sizeKB = Math.round(f.size / 1024);
    });


    // 送出表單
    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: "#e47140",
        }).then(() => {
          // 清空圖片相關
          file = null;
          previewUrl = null;
          fileName = "";
          preview.innerHTML = "";
          // input type=file，需要手動 reset
          document.getElementById("fileInput").value = "";

          // 清空名單相關
          listFile = null;
          listFileName = "";
          document.getElementById("listInput").value = "";

          // 清空其他欄位
          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>
  <script src="/js/main.js"></script>
</body>

</html>