update

layouts/ai-customer/single.html

@@ -110,117 +110,7 @@
               <img class="img-fluid mb-3" src="/img/aicustomer/aicustomer4.webp" alt="">
 
               <p> ▲ 日照中心導入台語AI客服，提供親切流暢的語音互動，提升顧客服務體驗。</p>
-
-              <!-- <div id="news-form" class="news-form mt-0">
-            <div class="text-center title">
-              <h4>線上諮詢</h4>
-              <p>與我們合作，馬上展開全新的創作里程碑</p>
-            </div>
-            <form>
-              <div class="mb-4 align-items-center">
-                <label for="nameValue">
-                  聯繫人稱呼 <span class="text-danger">*</span>
-                </label>
-                <div class="mt-2">
-                  <input type="text" class="form-control" id="nameValue" placeholder="請留下聯繫人稱呼" required>
-                </div>
-              </div>
-  
-              <div class="row mb-4 align-items-center">
-                <label for="phoneValue">
-                  聯絡電話 <span class="text-danger">*</span>
-                </label>
-                <div class="mt-2 col-sm-4">
-                  <select id="countryCode" class="form-select">
-                    <option selected>選擇國碼</option>
-                  </select>
-                </div>
-                <div class="mt-3 mt-sm-2 col-sm-8">
-                  <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
-                </div>
-              </div>
-  
-              <div class="mb-4 align-items-center">
-                <label for="emailValue">
-                  電子信箱 <span class="text-danger">*</span>
-                </label>
-                <div class="mt-2">
-                  <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail" required>
-                </div>
-  
-                <div class="invalid-feedback">
-                  Please choose a username.
-                </div>
-              </div>
-  
-              <div class="mb-4 align-items-center">
-                <label for="captionValue">
-                  需求說明 <span class="text-danger">*</span>
-                </label>
-                <div class="mt-2">
-                  <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明" required></textarea>
-                </div>
-              </div>
-  
-              <div class="mb-4 align-items-center">
-                <label for="companyValue">
-                  公司名稱 (非必填)
-                </label>
-                <div class="mt-2">
-                  <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
-                </div>
-              </div>
-  
-              <div class="mb-4 align-items-center">
-                <label for="companyValue">
-                  LINE ID (非必填)
-                </label>
-                <div class="mt-2">
-                  <input type="text" class="form-control" id="lineidValue" placeholder="請留下 LINE ID">
-                </div>
-              </div>
-  
-              <div class="mt-2">
-                <div class="form-check">
-                  <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
-                  <label class="form-check-label w-100" for="agreeValue">
-                    本人同意集仕多搜集資料
-                  </label>
-                </div>
-              </div>
-  
-              <div style="height: 15px;">
-                <span class="errorText text-danger">尚有欄位未填寫</span>
-              </div>
-  
-              <div class="d-flex justify-content-center mt-5">
-  
-                <button type="submit" class="submit-btn" id="submitBtn">
-                  <span class="spinner-border spinner-border-sm me-2 loading-btn" role="status" aria-hidden="true"></span>
-                  送出
-                </button>
-              </div>
-            </form>
-          </div> -->
             </div>
-            <!-- <div class="aicustomer-sec02-1 row">
-          <div class="col-lg-3">
-            <img class="img-fluid" src="/img/aicustomer/aicustomer1.png" alt="">
-            <p>以Generative AI技術為核心，客製化專屬AI客服人物，為客戶提供多元服務，提高整體客戶體驗。
-            </p>
-          </div>
-          <div class="col-lg-3">
-            <img class="img-fluid" src="/img/aicustomer/aicustomer2.png" alt="">
-            <p>自家LLM訓練精準多語言，支援20+國語言，提供了更廣泛的可能性，並且
-              有助於打入不同的市場。
-            </p>
-          </div>
-          <div class="aisec02img-3 col-lg-3">
-            <img class="img-fluid" src="/img/aicustomer/aicustomer3.png" alt="">
-            <p>提供24小時即時支援，無需休息或輪班，因此可以快速回應客戶查詢和需求，提高滿意度和忠誠度。</p>
-          </div>
-        </div> -->
-          </div>
         </section>
 
         <section class="aicustomer-faq">
@@ -372,157 +262,6 @@
     crossorigin="anonymous"></script>
 
   <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
-
-  <script type="module">
-    // 電話國碼
-    const countryCodes = [
-      '+1',   // 美國
-      '+7',   // 俄羅斯
-      '+33',  // 法國
-      '+39',  // 義大利
-      '+44',  // 英國
-      '+46',  // 瑞典
-      '+47',  // 挪威
-      '+49',  // 德國
-      '+52',  // 墨西哥
-      '+60',  // 馬來西亞
-      '+61',  // 澳大利亞
-      '+62',  // 印尼
-      '+64',  // 紐西蘭
-      '+65',  // 新加坡
-      '+66',  // 泰國
-      '+81',  // 日本
-      '+82',  // 南韓
-      '+86',  // 中國大陸
-      '+91',  // 印度
-      '+353', // 愛爾蘭
-      '+852', // 香港
-      '+853', // 澳門
-      '+886', // 台灣
-    ];
-
-    console.log(countryCodes);
-    const countryCode = document.getElementById('countryCode');
-    countryCodes.forEach(code => {
-      const option = document.createElement('option');
-      option.value = code;
-      option.text = code;
-      countryCode.appendChild(option);
-    });
-
-
-    $('.errorText').hide();
-    $('.loading-btn').hide();
-    const scriptURL = 'https://script.google.com/macros/s/AKfycbzuwioqhnP2oL0AdHaYgEBvf0t0yWi2OTxZYlPYSoLuPyHhQFJKMm5mgOCoZEx-cIckbA/exec';
-
-
-    async function send() {
-      console.log('addEventListener');
-      let name = document.querySelector('#nameValue').value; // 聯絡人
-      let phone; // 聯絡電話
-      let company = document.querySelector('#companyValue').value; // 公司名稱
-      let email = document.querySelector('#emailValue').value; // 電子信箱
-      // let demand; // 需求目的
-      let caption = document.querySelector('#captionValue').value; // 需求說明
-      let lineid = document.querySelector('#lineidValue').value; // 需求說明
-      // let date = document.querySelector('#dateValue').value; // 預計活動需求日
-      let agree; // 搜集資料
-      let time; // 填單時間
-
-      // 取得當下時間
-      const now = new Date();
-      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
-      time = now.toLocaleString('zh-TW', options);
-      console.log('time', time);
-
-      if (document.querySelector('input[id="agreeValue"]:checked')) {
-        agree = "同意";
-      } else {
-        agree = "不同意";
-      }
-
-      // if (document.querySelector('input[name="demandValue"]:checked')) {
-      //   demand = document.querySelector('input[name="demandValue"]:checked').value;
-      // }
-
-      // if (demand === "其他") {
-      //   demand = document.querySelector('#otherText').value;
-      // }
-
-      let countryCode = document.querySelector('#countryCode').value; // 國碼
-      let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
-
-      phone = `${countryCode} ${phoneCode}`;
-
-      const insertdata = {
-        "name": name,
-        "phone": phone,
-        "company": company,
-        "email": email,
-        "lineid": lineid,
-        "caption": caption,
-        // "date": date,
-        "agree": agree,
-        "time": time
-      }
-
-      console.log(insertdata);
-
-      $.ajax({
-        url: scriptURL,
-        method: "post",
-        data: {
-          "name": name,
-          "phone": phone,
-          "company": company,
-          "email": email,
-          "lineid": lineid,
-          "caption": caption,
-          // "date": date,
-          "agree": agree,
-          "time": time
-        },
-        success: function (response) {
-          if (response == "成功") {
-            $('.loading-btn').hide();
-            alert("成功送出！");
-          }
-        },
-      });
-    }
-
-    $('#submitBtn').on('click', function (e) {
-      e.preventDefault();
-
-      let countryCode = document.querySelector('#countryCode').value;
-
-      // let demand = ""; // 需求目的
-      // if (document.querySelector('input[name="demandValue"]:checked')) {
-      //   demand = document.querySelector('input[name="demandValue"]:checked').value;
-      // }
-
-      // if (demand === "其他") {
-      //   demand = document.querySelector('#otherText').value;
-      // }
-
-      // 手動觸發表單送出
-      let form = $(this).closest('form');
-      form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
-
-      if (countryCode === "選擇國碼") {
-        console.log('表單未通過驗證');
-        $('.errorText').show();
-        return;
-      }
-
-      if (form[0].reportValidity()) {
-        $('.loading-btn').show();
-        $('.errorText').hide();
-        send();
-      }
-    });
-  </script>
-
 </body>
 
 </html>

layouts/partials/components/ai-anchor.html

@@ -2,11 +2,25 @@
   <h2>AI 虛擬主播大變革：24 小時無限可能的媒體新時代</h2>
   <p>AI 虛擬主播正在改變媒體產業的面貌，從新聞播報到客製化內容生成，它們的應用範圍廣泛且多樣。</p>
 
+  <div class="col-12 mt-4 pt-4">
+    <div class="background-cta">
+      <!-- <h2>想了解更多？</h2>
+      <p class="d-none d-sm-block">想了解 AI 智能客服如何幫助您提升服務品質及效率，讓您的品牌更具競爭力嗎？<br>歡迎點擊下方按鈕，與創辦人進行一對一交流！</p>
+      <p class="d-block d-sm-none">想了解 AI 智能客服<br>如何幫助您提升服務品質及效率<br>讓您的品牌更具競爭力嗎？<br>歡迎點擊下方按鈕<br>與創辦人進行一對一交流！</p>
+      <a href="https://cmm.ai/cal" target="_blank">
+        與創辦人交流
+      </a> -->
+     <a href="https://cmm.ai/cal" target="_blank">
+      <span class='pulse-button'>與創辦人聯繫</span>
+     </a>
+    </div>
+  </div>
+
   <div class="row justify-content-center">
     <div class="col-11 col-sm-10 main">
 
       <span class="d-flex">
-        <h3 class="pt-5 my-4 mx-auto">💡 AI 虛擬主播的定義與特點</h3>
+        <h3 class="my-4 pt-4 mx-auto">💡 AI 虛擬主播的定義與特點</h3>
       </span>
       <p>AI 虛擬主播是由人工智慧技術創建和操作的虛擬角色。它們融合了 AI 技術、語音合成、虛擬人物設計和數位媒體平台，使其能夠像真人主播一樣進行節目主持、新聞報導和遊戲實況轉播。這些 AI
         主播具備多項特點，包括使用高度逼真的語音合成技術，使其說話聲音類似真人。部分 AI 主播還擁有虛擬的人物設計，其臉部表情和動作由特殊演算法或動畫技術生成，使其看起來更加生動。此外，AI
@@ -37,20 +51,6 @@
         並且需要從零開始發展知名度，增加宣傳費用。</p>
     </div>
 
-    <div class="col-12 mt-5">
-      <div class="background-cta">
-        <!-- <h2>想了解更多？</h2>
-        <p class="d-none d-sm-block">想了解 AI 智能客服如何幫助您提升服務品質及效率，讓您的品牌更具競爭力嗎？<br>歡迎點擊下方按鈕，與創辦人進行一對一交流！</p>
-        <p class="d-block d-sm-none">想了解 AI 智能客服<br>如何幫助您提升服務品質及效率<br>讓您的品牌更具競爭力嗎？<br>歡迎點擊下方按鈕<br>與創辦人進行一對一交流！</p>
-        <a href="https://cmm.ai/cal" target="_blank">
-          與創辦人交流
-        </a> -->
-       <a href="https://cmm.ai/cal" target="_blank">
-        <span class='pulse-button'>與創辦人交流</span>
-       </a>
-      </div>
-    </div>
-
     <div class="col-12">
       <h4 class="pt-5 my-3 text-center">常見問題</h4>
 

layouts/partials/form-main.html

@@ -6,10 +6,10 @@
   <form>
     <div class="mb-4 align-items-center">
       <label for="nameValue">
-        聯繫人稱呼 <span class="text-danger">*</span>
+        聯絡人／公司名稱 <span class="text-danger">*</span>
       </label>
       <div class="mt-2">
-        <input type="text" class="form-control" id="nameValue" placeholder="請留下聯繫人稱呼" required>
+        <input type="text" class="form-control" id="nameValue" placeholder="請輸入聯絡人姓名或公司名稱" required>
       </div>
     </div>
 
@@ -17,14 +17,17 @@
       <label for="phoneValue">
         聯絡電話 <span class="text-danger">*</span>
       </label>
-      <div class="mt-2 col-sm-4">
+      <div class="mt-2">
+        <input type="tel" class="form-control" id="phoneCode" placeholder="請輸入手機或公司電話" required>
+      </div>
+      <!-- <div class="mt-2 col-sm-4">
         <select id="countryCode" class="form-select">
           <option selected>選擇國碼</option>
         </select>
       </div>
       <div class="mt-3 mt-sm-2 col-sm-8">
         <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
-      </div>
+      </div> -->
     </div>
 
     <div class="mb-4 align-items-center">
@@ -32,7 +35,7 @@
         電子信箱 <span class="text-danger">*</span>
       </label>
       <div class="mt-2">
-        <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail" required>
+        <input type="email" class="form-control" id="emailValue" placeholder="請輸入 E-mail" required>
       </div>
 
       <div class="invalid-feedback">
@@ -59,35 +62,35 @@
       </div>
     </div>
 
-    <div class="mb-4 align-items-center">
+    <!-- <div class="mb-4 align-items-center">
       <label for="companyValue">
         公司名稱 (非必填)
       </label>
       <div class="mt-2">
         <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
       </div>
-    </div>
+    </div> -->
 
-    <div class="mb-4 align-items-center">
-      <label for="companyValue">
+    <!-- <div class="mb-4 align-items-center">
+      <label for="lineidValue">
         LINE ID (非必填)
       </label>
       <div class="mt-2">
         <input type="text" class="form-control" id="lineidValue" placeholder="請留下 LINE ID">
       </div>
-    </div>
+    </div> -->
 
     <div class="mt-2">
       <div class="form-check">
         <input class="form-check-input" type="checkbox" id="agreeValue">
         <label class="form-check-label w-100" for="agreeValue">
-          本人同意集仕多搜集資料
+          是否同意集仕多搜集資料
         </label>
       </div>
     </div>
 
     <div style="height: 15px;">
-      <span class="errorText text-danger">尚有欄位未填寫</span>
+      <span class="error-text text-danger">尚有欄位未填寫</span>
     </div>
 
     <div class="d-flex justify-content-center">
@@ -111,43 +114,43 @@
   const supabase = createClient('http://172.105.241.163:8000', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZS1kZW1vIiwKICAgICJpYXQiOiAxNjQxNzY5MjAwLAogICAgImV4cCI6IDE3OTk1MzU2MDAKfQ.DaYlNEoUrrEn2Ig7tqibS-PHK5vgusbcbo7X36XVt4Q');
 
   // 電話國碼
-  const countryCodes = [
-    '+1',   // 美國
-    '+7',   // 俄羅斯
-    '+33',  // 法國
-    '+39',  // 義大利
-    '+44',  // 英國
-    '+46',  // 瑞典
-    '+47',  // 挪威
-    '+49',  // 德國
-    '+52',  // 墨西哥
-    '+60',  // 馬來西亞
-    '+61',  // 澳大利亞
-    '+62',  // 印尼
-    '+64',  // 紐西蘭
-    '+65',  // 新加坡
-    '+66',  // 泰國
-    '+81',  // 日本
-    '+82',  // 南韓
-    '+86',  // 中國大陸
-    '+91',  // 印度
-    '+353', // 愛爾蘭
-    '+852', // 香港
-    '+853', // 澳門
-    '+886', // 台灣
-  ];
-
-  console.log(countryCodes);
-  const countryCode = document.getElementById('countryCode');
-  countryCodes.forEach(code => {
-    const option = document.createElement('option');
-    option.value = code;
-    option.text = code;
-    countryCode.appendChild(option);
-  });
-
-
-  $('.errorText').hide();
+  // const countryCodes = [
+  //   '+1',   // 美國
+  //   '+7',   // 俄羅斯
+  //   '+33',  // 法國
+  //   '+39',  // 義大利
+  //   '+44',  // 英國
+  //   '+46',  // 瑞典
+  //   '+47',  // 挪威
+  //   '+49',  // 德國
+  //   '+52',  // 墨西哥
+  //   '+60',  // 馬來西亞
+  //   '+61',  // 澳大利亞
+  //   '+62',  // 印尼
+  //   '+64',  // 紐西蘭
+  //   '+65',  // 新加坡
+  //   '+66',  // 泰國
+  //   '+81',  // 日本
+  //   '+82',  // 南韓
+  //   '+86',  // 中國大陸
+  //   '+91',  // 印度
+  //   '+353', // 愛爾蘭
+  //   '+852', // 香港
+  //   '+853', // 澳門
+  //   '+886', // 台灣
+  // ];
+
+  // console.log(countryCodes);
+  // const countryCode = document.getElementById('countryCode');
+  // countryCodes.forEach(code => {
+  //   const option = document.createElement('option');
+  //   option.value = code;
+  //   option.text = code;
+  //   countryCode.appendChild(option);
+  // });
+
+
+  // $('.error-text').hide();
   $('.loading-btn').hide();
   const scriptURL = 'https://script.google.com/macros/s/AKfycbzuwioqhnP2oL0AdHaYgEBvf0t0yWi2OTxZYlPYSoLuPyHhQFJKMm5mgOCoZEx-cIckbA/exec';
 
@@ -155,12 +158,12 @@
   async function send() {
     console.log('addEventListener');
     let name = document.querySelector('#nameValue').value; // 聯絡人
-    let phone; // 聯絡電話
-    let company = document.querySelector('#companyValue').value; // 公司名稱
+    let phone = document.querySelector('#phoneCode').value; // 聯絡電話
+    // let company = document.querySelector('#companyValue').value; // 公司名稱
     let email = document.querySelector('#emailValue').value; // 電子信箱
     // let demand; // 需求目的
     let caption = document.querySelector('#captionValue').value; // 需求說明
-    let lineid = document.querySelector('#lineidValue').value; // 需求說明
+    // let lineid = document.querySelector('#lineidValue').value; // LINE ID
     // let date = document.querySelector('#dateValue').value; // 預計活動需求日
     let agree; // 搜集資料
     let time; // 填單時間
@@ -185,43 +188,30 @@
     //   demand = document.querySelector('#otherText').value;
     // }
 
-    let countryCode = document.querySelector('#countryCode').value; // 國碼
-    let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
-
-    phone = `${countryCode} ${phoneCode}`;
+    // let countryCode = document.querySelector('#countryCode').value; // 國碼
+    // let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
 
-    const insertdata = {
+    // phone = `${countryCode} ${phoneCode}`;
+    
+    $.ajax({
+      url: scriptURL,
+      method: "post",
+      data: {
       "name": name,
       "phone": phone,
-      "company": company,
       "email": email,
-      "lineid": lineid,
       "caption": caption,
-      // "date": date,
       "agree": agree,
       "time": time
-    }
-
-    console.log(insertdata);
-
-    $.ajax({
-      url: scriptURL,
-      method: "post",
-      data: {
-        "name": name,
-        "phone": phone,
-        "company": company,
-        "email": email,
-        "lineid": lineid,
-        "caption": caption,
-        // "date": date,
-        "agree": agree,
-        "time": time
-      },
+      // "company": company,
+      // "lineid": lineid,
+      // "date": date,
+    },
       success: function (response) {
         if (response == "成功") {
           $('.loading-btn').hide();
           alert("成功送出！");
+          return;
         }
       },
     });
@@ -230,7 +220,7 @@
   $('button').on('click', function (e) {
     e.preventDefault();
 
-    let countryCode = document.querySelector('#countryCode').value;
+    // let countryCode = document.querySelector('#countryCode').value;
 
     // let demand = ""; // 需求目的
     // if (document.querySelector('input[name="demandValue"]:checked')) {
@@ -245,15 +235,15 @@
     let form = $(this).closest('form');
     form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
 
-    if (countryCode === "選擇國碼") {
-      console.log('表單未通過驗證');
-      $('.errorText').show();
-      return;
-    }
+    // if (countryCode === "選擇國碼") {
+    //   console.log('表單未通過驗證');
+    //   $('.error-text').show();
+    //   return;
+    // }
 
     if (form[0].reportValidity()) {
       $('.loading-btn').show();
-      $('.errorText').hide();
+      $('.error-text').hide();
       send();
     }
   });

layouts/shortcodes/form-main.html

@@ -6,10 +6,10 @@
   <form>
     <div class="mb-4 align-items-center">
       <label for="nameValue">
-        聯繫人稱呼 <span class="text-danger">*</span>
+        聯絡人／公司名稱 <span class="text-danger">*</span>
       </label>
       <div class="mt-2">
-        <input type="text" class="form-control" id="nameValue" placeholder="請留下聯繫人稱呼" required>
+        <input type="text" class="form-control" id="nameValue" placeholder="請輸入聯絡人姓名或公司名稱" required>
       </div>
     </div>
 
@@ -17,14 +17,17 @@
       <label for="phoneValue">
         聯絡電話 <span class="text-danger">*</span>
       </label>
-      <div class="mt-2 col-sm-4">
+      <div class="mt-2">
+        <input type="tel" class="form-control" id="phoneCode" placeholder="請輸入手機或公司電話" required>
+      </div>
+      <!-- <div class="mt-2 col-sm-4">
         <select id="countryCode" class="form-select">
           <option selected>選擇國碼</option>
         </select>
       </div>
       <div class="mt-3 mt-sm-2 col-sm-8">
         <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
-      </div>
+      </div> -->
     </div>
 
     <div class="mb-4 align-items-center">
@@ -32,7 +35,7 @@
         電子信箱 <span class="text-danger">*</span>
       </label>
       <div class="mt-2">
-        <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail" required>
+        <input type="email" class="form-control" id="emailValue" placeholder="請輸入 E-mail" required>
       </div>
 
       <div class="invalid-feedback">
@@ -59,35 +62,35 @@
       </div>
     </div>
 
-    <div class="mb-4 align-items-center">
+    <!-- <div class="mb-4 align-items-center">
       <label for="companyValue">
         公司名稱 (非必填)
       </label>
       <div class="mt-2">
         <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
       </div>
-    </div>
+    </div> -->
 
-    <div class="mb-4 align-items-center">
-      <label for="companyValue">
+    <!-- <div class="mb-4 align-items-center">
+      <label for="lineidValue">
         LINE ID (非必填)
       </label>
       <div class="mt-2">
         <input type="text" class="form-control" id="lineidValue" placeholder="請留下 LINE ID">
       </div>
-    </div>
+    </div> -->
 
     <div class="mt-2">
       <div class="form-check">
-        <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
+        <input class="form-check-input" type="checkbox" id="agreeValue">
         <label class="form-check-label w-100" for="agreeValue">
-          本人同意集仕多搜集資料
+          是否同意集仕多搜集資料
         </label>
       </div>
     </div>
 
     <div style="height: 15px;">
-      <span class="errorText text-danger">尚有欄位未填寫</span>
+      <span class="error-text text-danger">尚有欄位未填寫</span>
     </div>
 
     <div class="d-flex justify-content-center">
@@ -111,43 +114,43 @@
   const supabase = createClient('http://172.105.241.163:8000', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZS1kZW1vIiwKICAgICJpYXQiOiAxNjQxNzY5MjAwLAogICAgImV4cCI6IDE3OTk1MzU2MDAKfQ.DaYlNEoUrrEn2Ig7tqibS-PHK5vgusbcbo7X36XVt4Q');
 
   // 電話國碼
-  const countryCodes = [
-    '+1',   // 美國
-    '+7',   // 俄羅斯
-    '+33',  // 法國
-    '+39',  // 義大利
-    '+44',  // 英國
-    '+46',  // 瑞典
-    '+47',  // 挪威
-    '+49',  // 德國
-    '+52',  // 墨西哥
-    '+60',  // 馬來西亞
-    '+61',  // 澳大利亞
-    '+62',  // 印尼
-    '+64',  // 紐西蘭
-    '+65',  // 新加坡
-    '+66',  // 泰國
-    '+81',  // 日本
-    '+82',  // 南韓
-    '+86',  // 中國大陸
-    '+91',  // 印度
-    '+353', // 愛爾蘭
-    '+852', // 香港
-    '+853', // 澳門
-    '+886', // 台灣
-  ];
-
-  console.log(countryCodes);
-  const countryCode = document.getElementById('countryCode');
-  countryCodes.forEach(code => {
-    const option = document.createElement('option');
-    option.value = code;
-    option.text = code;
-    countryCode.appendChild(option);
-  });
-
-
-  $('.errorText').hide();
+  // const countryCodes = [
+  //   '+1',   // 美國
+  //   '+7',   // 俄羅斯
+  //   '+33',  // 法國
+  //   '+39',  // 義大利
+  //   '+44',  // 英國
+  //   '+46',  // 瑞典
+  //   '+47',  // 挪威
+  //   '+49',  // 德國
+  //   '+52',  // 墨西哥
+  //   '+60',  // 馬來西亞
+  //   '+61',  // 澳大利亞
+  //   '+62',  // 印尼
+  //   '+64',  // 紐西蘭
+  //   '+65',  // 新加坡
+  //   '+66',  // 泰國
+  //   '+81',  // 日本
+  //   '+82',  // 南韓
+  //   '+86',  // 中國大陸
+  //   '+91',  // 印度
+  //   '+353', // 愛爾蘭
+  //   '+852', // 香港
+  //   '+853', // 澳門
+  //   '+886', // 台灣
+  // ];
+
+  // console.log(countryCodes);
+  // const countryCode = document.getElementById('countryCode');
+  // countryCodes.forEach(code => {
+  //   const option = document.createElement('option');
+  //   option.value = code;
+  //   option.text = code;
+  //   countryCode.appendChild(option);
+  // });
+
+
+  // $('.error-text').hide();
   $('.loading-btn').hide();
   const scriptURL = 'https://script.google.com/macros/s/AKfycbzuwioqhnP2oL0AdHaYgEBvf0t0yWi2OTxZYlPYSoLuPyHhQFJKMm5mgOCoZEx-cIckbA/exec';
 
@@ -155,12 +158,12 @@
   async function send() {
     console.log('addEventListener');
     let name = document.querySelector('#nameValue').value; // 聯絡人
-    let phone; // 聯絡電話
-    let company = document.querySelector('#companyValue').value; // 公司名稱
+    let phone = document.querySelector('#phoneCode').value; // 聯絡電話
+    // let company = document.querySelector('#companyValue').value; // 公司名稱
     let email = document.querySelector('#emailValue').value; // 電子信箱
     // let demand; // 需求目的
     let caption = document.querySelector('#captionValue').value; // 需求說明
-    let lineid = document.querySelector('#lineidValue').value; // 需求說明
+    // let lineid = document.querySelector('#lineidValue').value; // LINE ID
     // let date = document.querySelector('#dateValue').value; // 預計活動需求日
     let agree; // 搜集資料
     let time; // 填單時間
@@ -185,43 +188,30 @@
     //   demand = document.querySelector('#otherText').value;
     // }
 
-    let countryCode = document.querySelector('#countryCode').value; // 國碼
-    let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
-
-    phone = `${countryCode} ${phoneCode}`;
+    // let countryCode = document.querySelector('#countryCode').value; // 國碼
+    // let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
 
-    const insertdata = {
+    // phone = `${countryCode} ${phoneCode}`;
+    
+    $.ajax({
+      url: scriptURL,
+      method: "post",
+      data: {
       "name": name,
       "phone": phone,
-      "company": company,
       "email": email,
-      "lineid": lineid,
       "caption": caption,
-      // "date": date,
       "agree": agree,
       "time": time
-    }
-
-    console.log(insertdata);
-
-    $.ajax({
-      url: scriptURL,
-      method: "post",
-      data: {
-        "name": name,
-        "phone": phone,
-        "company": company,
-        "email": email,
-        "lineid": lineid,
-        "caption": caption,
-        // "date": date,
-        "agree": agree,
-        "time": time
-      },
+      // "company": company,
+      // "lineid": lineid,
+      // "date": date,
+    },
       success: function (response) {
         if (response == "成功") {
           $('.loading-btn').hide();
           alert("成功送出！");
+          return;
         }
       },
     });
@@ -230,7 +220,7 @@
   $('button').on('click', function (e) {
     e.preventDefault();
 
-    let countryCode = document.querySelector('#countryCode').value;
+    // let countryCode = document.querySelector('#countryCode').value;
 
     // let demand = ""; // 需求目的
     // if (document.querySelector('input[name="demandValue"]:checked')) {
@@ -245,15 +235,15 @@
     let form = $(this).closest('form');
     form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
 
-    if (countryCode === "選擇國碼") {
-      console.log('表單未通過驗證');
-      $('.errorText').show();
-      return;
-    }
+    // if (countryCode === "選擇國碼") {
+    //   console.log('表單未通過驗證');
+    //   $('.error-text').show();
+    //   return;
+    // }
 
     if (form[0].reportValidity()) {
       $('.loading-btn').show();
-      $('.errorText').hide();
+      $('.error-text').hide();
       send();
     }
   });

layouts/shortcodes/form.html

@@ -1,332 +0,0 @@
-<div class="news-form">
-  <div class="text-center title">
-    <h4>線上諮詢</h4>
-    <p>與我們合作，馬上展開全新的創作里程碑</p>
-  </div>
-  <form>
-    <div class="row mb-4">
-      <label for="nameValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
-        <div class="d-flex flex-nowrap">
-          聯絡人 <span class="text-danger">*</span>
-        </div>
-      </label>
-      <div class="col-md-10 col-lg-9 col-xl-10">
-        <input type="text" class="form-control" id="nameValue" placeholder="請留下聯絡人姓名" required>
-      </div>
-    </div>
-
-    <div class="row mb-4">
-      <label for="phoneValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
-        <div class="d-flex flex-nowrap">
-          聯絡電話 <span class="text-danger">*</span>
-        </div>
-      </label>
-      <div class="col-sm-4 col-md-3 col-lg-4 col-xl-3">
-        <select id="countryCode" class="form-select">
-          <option selected>選擇國碼</option>
-        </select>
-      </div>
-      <div class="col-sm-8 col-md-7 col-lg-5 col-xl-7 mt-3 mt-sm-0">
-        <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
-      </div>
-    </div>
-
-    <div class="row mb-4">
-      <label for="companyValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
-        <div class="d-flex flex-nowrap">
-          公司名稱 <span class="text-danger">*</span>
-        </div>
-      </label>
-      <div class="col-md-10 col-lg-9 col-xl-10">
-        <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱" required>
-      </div>
-    </div>
-
-    <div class="row mb-3">
-      <label for="emailValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
-        <div class="d-flex flex-nowrap">
-          電子信箱 <span class="text-danger">*</span>
-        </div>
-      </label>
-      <div class="col-md-10 col-lg-9 col-xl-10">
-        <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail" required>
-      </div>
-
-      <div class="invalid-feedback">
-        Please choose a username.
-      </div>
-    </div>
-
-    <div class="row mb-3">
-      <label for="dateValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
-        <div class="d-flex flex-nowrap">
-          預計活動需求日 <span class="text-danger">*</span>
-        </div>
-      </label>
-      <div class="col-md-10 col-lg-9 col-xl-10 d-flex align-items-center">
-        <input type="date" id="dateValue" name="dateValue" class="px-2"
-          style="border:1px solid #ced4da; border-radius: 3px;" required />
-      </div>
-    </div>
-
-    <div class="row mb-4">
-      <label for="budgetValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
-        <div class="d-flex flex-nowrap">
-          預算限制 <span class="text-danger">*</span>
-        </div>
-      </label>
-      <div class="col-md-10 col-lg-9 col-xl-10">
-        <select class="form-select" id="budgetValue" name="budgetValue">
-          <option selected>請選擇</option>
-          <option value="一萬以內">一萬以內</option>
-          <option value="一萬到五萬">一萬到五萬</option>
-          <option value="五萬到十萬">五萬到十萬</option>
-          <option value="無預算限制">無預算限制</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="row mb-4">
-      <label for="demandValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
-        <div class="d-flex flex-nowrap">
-          需求目的 <span class="text-danger">*</span>
-        </div>
-      </label>
-      <div class="col-md-10 col-lg-9 col-xl-10">
-        <!-- <input type="text" class="form-control" id="demandValue" placeholder="請留下需求目的"> -->
-        <fieldset>
-          <div>
-            <input type="radio" id="aiHost" name="demandValue" value="AI主持人" />
-            <label for="aiHost">AI主持人（尾牙、活動）</label>
-            <br>
-            <input type="radio" id="aiGuide" name="demandValue" value="AI導覽員" />
-            <label for="aiGuide">AI導覽員</label>
-            <br>
-            <input type="radio" id="aiOfficial" name="demandValue" value="AI長官替身" />
-            <label for="aiOfficial">AI長官替身</label>
-            <br>
-            <input type="radio" id="otherOption" name="demandValue" value="其他" />
-            <label for="otherOption">其他（可自行填寫）</label>
-            <input type="text" id="otherText" class="w-100" style="border:1px solid #ced4da; border-radius: 3px;" />
-          </div>
-        </fieldset>
-      </div>
-    </div>
-
-    <div class="row mb-4">
-      <label for="captionValue" class="col-md-2 col-lg-3 col-xl-2 col-form-label">
-        <div class="d-flex flex-nowrap">
-          需求說明 <span class="text-danger">*</span>
-        </div>
-      </label>
-      <div class="col-md-10 col-lg-9 col-xl-10">
-        <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明" required></textarea>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-md-10 col-lg-9 col-xl-10 offset-sm-2">
-        <div class="form-check">
-          <input class="form-check-input mt-2" type="checkbox" id="agreeValue">
-          <label class="form-check-label w-100" for="agreeValue">
-            本人同意集仕多搜集資料
-          </label>
-        </div>
-      </div>
-    </div>
-
-    <div style="height: 15px;">
-      <span class="errorText text-danger">尚有欄位未填寫</span>
-    </div>
-
-    <div class="d-flex justify-content-center mt-5">
-
-      <button type="submit" class="submit-btn" id="submitBtn">
-        <span class="spinner-border spinner-border-sm me-2 loading-btn" role="status" aria-hidden="true"></span>
-        送出
-      </button>
-    </div>
-  </form>
-</div>
-
-<script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
-  crossorigin="anonymous"></script>
-<!-- <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
-<script type="module">
-  import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
-
-  const supabase = createClient('http://172.105.241.163:8000', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZS1kZW1vIiwKICAgICJpYXQiOiAxNjQxNzY5MjAwLAogICAgImV4cCI6IDE3OTk1MzU2MDAKfQ.DaYlNEoUrrEn2Ig7tqibS-PHK5vgusbcbo7X36XVt4Q');
-
-  let { data: ai_news, error } = await supabase
-    .from('ai_news')
-    .select('*')
-
-  console.log('ai_news', ai_news);
-
-  const newData = {
-    name: 'New AI News',
-    data: "",
-  };
-
-  let { data: insertedData, error: insertError } = await supabase
-    .from('ai_news')
-    .insert([newData]);
-</script> -->
-<script>
-  // 電話國碼
-  const countryCodes = [
-    '+1',   // 美國
-    '+7',   // 俄羅斯
-    '+33',  // 法國
-    '+39',  // 義大利
-    '+44',  // 英國
-    '+46',  // 瑞典
-    '+47',  // 挪威
-    '+49',  // 德國
-    '+52',  // 墨西哥
-    '+60',  // 馬來西亞
-    '+61',  // 澳大利亞
-    '+62',  // 印尼
-    '+64',  // 紐西蘭
-    '+65',  // 新加坡
-    '+66',  // 泰國
-    '+81',  // 日本
-    '+82',  // 南韓
-    '+86',  // 中國大陸
-    '+91',  // 印度
-    '+353', // 愛爾蘭
-    '+852', // 香港
-    '+853', // 澳門
-    '+886', // 台灣
-  ];
-
-  const countryCode = document.getElementById('countryCode');
-  countryCodes.forEach(code => {
-    const option = document.createElement('option');
-    option.value = code;
-    option.text = code;
-    countryCode.appendChild(option);
-  });
-
-  // 串接 Google Sheets 表單：https://docs.google.com/spreadsheets/d/1fvCmsUu-0lAraKMSbApUy8cQre3F85eQzzZyh9qwNzA/edit#gid=0
-  $('.errorText').hide();
-  $('.loading-btn').hide();
-  const scriptURL = 'https://script.google.com/macros/s/AKfycbyAUKo8onoxuEgXP876QsR6q0_8379v4hMCvYVCk3gVaaTEIuK7hPNnOSKNWHlBJ4mVgA/exec';
-
-  function send() {
-    console.log('addEventListener');
-    let name = document.querySelector('#nameValue').value; // 聯絡人
-    let phone; // 聯絡電話
-    let company = document.querySelector('#companyValue').value; // 公司名稱
-    let email = document.querySelector('#emailValue').value; // 電子信箱
-    let demand; // 需求目的
-    let caption = document.querySelector('#captionValue').value; // 需求說明
-    let budget = document.querySelector('#budgetValue').value; // 預算限制
-    // let date = document.querySelector('#dateValue').value; // 預計活動需求日
-    let agree; // 搜集資料
-    let time; // 填單時間
-
-    // 取得當下時間
-    const now = new Date();
-    const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
-    time = now.toLocaleString('zh-TW', options);
-    console.log('time', time);
-
-    if (document.querySelector('input[id="agreeValue"]:checked')) {
-      agree = "同意";
-    } else {
-      agree = "不同意";
-    }
-
-    if (document.querySelector('input[name="demandValue"]:checked')) {
-      demand = document.querySelector('input[name="demandValue"]:checked').value;
-    }
-
-    if (demand === "其他") {
-      demand = document.querySelector('#otherText').value;
-    }
-
-    let countryCode = document.querySelector('#countryCode').value; // 國碼
-    let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
-
-    phone = `${countryCode} ${phoneCode}`;
-
-    $.ajax({
-      url: scriptURL,
-      method: "post",
-      data: {
-        "name": name,
-        "phone": phone,
-        "company": company,
-        "email": email,
-        "demand": demand,
-        "caption": caption,
-        "budget": budget,
-        // "date": date,
-        "agree": agree,
-        "time": time
-      },
-      success: function (response) {
-        if (response == "成功") {
-          $('.loading-btn').hide();
-          alert("成功送出！");
-        }
-
-      },
-    });
-
-    // 寄信
-    let templateParams = {
-      name: name,
-      phone: phone,
-      company: company,
-      email: email,
-      demand: demand,
-      caption: caption,
-      budget: budget,
-      date: date,
-      agree: agree,
-    };
-
-    emailjs.send('service_kyazqjp', 'template_n0sqgwh', templateParams).then(
-      (response) => {
-        console.log('SUCCESS!', response.status, response.text);
-      },
-      (error) => {
-        console.log('FAILED...', error);
-      },
-    );
-  };
-
-  $('button').on('click', function (e) {
-    e.preventDefault();
-
-    let countryCode = document.querySelector('#countryCode').value;
-    let budget = document.querySelector('#budgetValue').value; // 預算限制
-
-    let demand = ""; // 需求目的
-    if (document.querySelector('input[name="demandValue"]:checked')) {
-      demand = document.querySelector('input[name="demandValue"]:checked').value;
-    }
-
-    if (demand === "其他") {
-      demand = document.querySelector('#otherText').value;
-    }
-
-    // 手動觸發表單送出
-    let form = $(this).closest('form');
-    form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
-
-    if (countryCode === "選擇國碼" || budget === "請選擇" || demand === "") {
-      console.log('表單未通過驗證');
-      $('.errorText').show();
-      return;
-    }
-
-    if (form[0].reportValidity()) {
-      $('.loading-btn').show();
-      $('.errorText').hide();
-      send();
-    }
-  });
-</script>

layouts/virtual-host-solution/single.html

@@ -30,7 +30,7 @@
 
               <div class="background-cta">
                 <a href="https://cmm.ai/cal" target="_blank">
-                  <span class='pulse-button'>與創辦人交流</span>
+                  <span class='pulse-button'>與創辦人聯繫</span>
                 </a>
               </div>
 

static/css/custom.css

@@ -781,7 +781,7 @@
   margin-right: auto;
 }
 
-.box-simple .icon-feature>i {
+.box-simple .icon-feature > i {
   font-size: 4.5rem;
 }
 
@@ -1297,7 +1297,7 @@
   bottom: 5rem;
 }
 
-.sec06>.container {
+.sec06 > .container {
   box-shadow: 0px 0px 8px 2px rgb(212, 212, 212);
   transform: translateY(-12rem);
   background-color: white;
@@ -1445,7 +1445,7 @@
     height: 32vh;
   }
 
-  .sec-usecase .row>div {
+  .sec-usecase .row > div {
     width: 50%;
   }
 
@@ -1490,7 +1490,7 @@
     display: inline-block;
   }
 
-  .nav>li {
+  .nav > li {
     display: inline-block;
   }
 }
@@ -1543,7 +1543,7 @@
     max-width: 1200px;
   }
 
-  .sec-usecase .row>div {
+  .sec-usecase .row > div {
     width: 100%;
   }
 
@@ -1634,7 +1634,7 @@
     flex-direction: column;
   }
 
-  .container-footer>div {
+  .container-footer > div {
     margin-bottom: 1.5rem;
   }
 
@@ -1681,7 +1681,7 @@
   border: none;
 }
 
-.box-steps .icon>i {
+.box-steps .icon > i {
   font-size: 3.5rem;
 }
 
@@ -1741,7 +1741,7 @@
   min-height: 65px;
 }
 
-.navbar-brand>img {
+.navbar-brand > img {
   display: inline-block;
 }
 
@@ -2096,7 +2096,7 @@
 }
 
 @media (max-width: 765px) {
-  #vt-list .row>div {
+  #vt-list .row > div {
     padding-left: 0px;
   }
 }
@@ -2624,18 +2624,17 @@
 
 #all {
   width: 100%;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 #content #form {
-  top: 92px;
   margin-bottom: 100px;
 }
 
 #form {
   margin-top: 100px;
   position: sticky;
-  top: 85px;
+  top: 120px;
 }
 
 @media (max-width: 991px) {
@@ -2667,4 +2666,4 @@
 
 #form .submit-btn {
   margin-top: 20px;
-}
+}

static/css/style.css

@@ -5496,7 +5496,7 @@
 }
 .ai-kiosk #form {
   position: sticky;
-  top: 85px;
+  top: 120px;
 }
 @media (max-width: 991px) {
   .ai-kiosk #form {
@@ -5823,6 +5823,10 @@
   color: #000;
 }
 
+.error-text {
+  display: none;
+}
+
 .home-content h2 {
   font-size: 2rem;
   text-align: center;

static/css/style.scss

@@ -6448,7 +6448,7 @@
 
   #form {
     position: sticky;
-    top: 85px;
+    top: 120px;
 
     @media (max-width: 991px) {
       width: 90vw;
@@ -6813,6 +6813,10 @@
   }
 }
 
+.error-text {
+  display: none;
+}
+
 .home-content {
   h2 {
     font-size: 2rem;