|
|
@@ -0,0 +1,536 @@
|
|
|
+<!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;
|
|
|
+ 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: 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 -}}
|
|
|
+
|
|
|
+ {{ template "_internal/google_analytics_async.html" . }}
|
|
|
+</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">
|
|
|
+ <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"> 經濟日報網路版</small>
|
|
|
+ </label>
|
|
|
+ <label class="option-item"><input type="checkbox" value="工商時報網路版" /> Commercial Times <br>
|
|
|
+ <small class="ms-3"> 工商時報網路版</small></label>
|
|
|
+ <label class="option-item"><input type="checkbox" value="Yahoo 新聞" /> Yahoo News <br> <small
|
|
|
+ class="ms-3"> Yahoo
|
|
|
+ 新聞</small></label>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+
|
|
|
+ <div class="d-flex justify-content-center">
|
|
|
+ <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 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: "#e47140",
|
|
|
+ }).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>
|
|
|
+ <script src="/js/main.js"></script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
