fixed

layouts/ai-customer/single.html

@@ -23,6 +23,32 @@
         max-width: 50%;
     }
 
+    /* 针对小屏幕设备（如手机） */
+    @media (max-width: 600px) {
+        .container {
+            max-width: 90%;
+            /* 在小屏幕上容器宽度限制为父元素的90% */
+        }
+    }
+
+    /* 针对中等屏幕设备（如平板） */
+    @media (max-width: 992px) {
+        .container {
+            max-width: 90%;
+            /* 在平板上容器宽度限制为父元素的75% */
+        }
+    }
+
+    /* 针对大屏幕设备（如桌面） */
+    @media (min-width: 1200px) {
+        .container {
+            max-width: 50%;
+            /* 在桌面上容器最大宽度为父元素的50% */
+        }
+    }
+
+
+
     .video-box {
         width: 100%;
         padding-bottom: 56%;
@@ -218,7 +244,7 @@
 
 
 
-    < <section class="aicustoerSec06">
+    <section class="aicustoerSec06">
         <h2>
             ChoozMo AI 客服常見問題
         </h2>
@@ -326,132 +352,149 @@
 
             </div>
         </div>
-        </section>
+    </section>
 
-        <section id="aicustoerCta" class="sec-action pb-5">
-            <div class="container-fluid">
-                <div class="action-clip text-center">
-                    <h2 class="mb-0" style="line-height: 46px;">
-                        你不會的，AI 都能做
-                        <br>
-                        Choozmo 多語言 AI 客服
+    <section id="aicustoerCta" class="sec-action pb-5">
+        <div class="container-fluid">
+            <div class="action-clip text-center">
+                <h2 class="mb-0" style="line-height: 46px;">
+                    你不會的，AI 都能做
+                    <br>
+                    Choozmo 多語言 AI 客服
 
-                    </h2>
-                </div>
-                <div class="action-triangle">
-                </div>
+                </h2>
             </div>
-            <div class="container text-center">
-                <a class="action-btn" href="#ctablock">
-                    立即擁有Ai客服
-
-                </a>
+            <div class="action-triangle">
             </div>
-        </section>
-
-
-        {{ partial "footer.html" . }}
-
-
-
-
-        <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="//code.jquery.com/jquery-3.1.1.min.js"
-            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
-        <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">
-
-
-            // 電話國碼
-            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);
+        </div>
+        <div class="container text-center">
+            <a class="action-btn" href="#ctablock">
+                立即擁有Ai客服
 
-                if (document.querySelector('input[id="agreeValue"]:checked')) {
-                    agree = "同意";
-                } else {
-                    agree = "不同意";
-                }
+            </a>
+        </div>
+    </section>
 
-                // if (document.querySelector('input[name="demandValue"]:checked')) {
-                //   demand = document.querySelector('input[name="demandValue"]:checked').value;
-                // }
 
-                // if (demand === "其他") {
-                //   demand = document.querySelector('#otherText').value;
-                // }
+    {{ partial "footer.html" . }}
+
+
+
+
+    <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="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+        crossorigin="anonymous"></script>
+    <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">
+
+
+        // 電話國碼
+        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 = "不同意";
+            }
 
-                let countryCode = document.querySelector('#countryCode').value; // 國碼
-                let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
+            // 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
+            }
 
-                phone = `${countryCode} ${phoneCode}`;
+            console.log(insertdata);
 
-                const insertdata = {
+            $.ajax({
+                url: scriptURL,
+                method: "post",
+                data: {
                     "name": name,
                     "phone": phone,
                     "company": company,
@@ -461,64 +504,47 @@
                     // "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("成功提交！");
-                        }
-                    },
-                });
-            }
+                },
+                success: function (response) {
+                    if (response == "成功") {
+                        $('.loading-btn').hide();
+                        alert("成功提交！");
+                    }
+                },
+            });
+        }
 
-            $('#submitBtn').on('click', function (e) {
-                e.preventDefault();
+        $('#submitBtn').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')) {
-                //   demand = document.querySelector('input[name="demandValue"]:checked').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;
-                // }
+            // if (demand === "其他") {
+            //   demand = document.querySelector('#otherText').value;
+            // }
 
-                // 手動觸發表單提交
-                let form = $(this).closest('form');
-                form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
+            // 手動觸發表單提交
+            let form = $(this).closest('form');
+            form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
 
-                if (countryCode === "選擇國碼") {
-                    console.log('表單未通過驗證');
-                    $('.errorText').show();
-                    return;
-                }
+            if (countryCode === "選擇國碼") {
+                console.log('表單未通過驗證');
+                $('.errorText').show();
+                return;
+            }
 
-                if (form[0].reportValidity()) {
-                    $('.loading-btn').show();
-                    $('.errorText').hide();
-                    send();
-                }
-            });
-        </script>
+            if (form[0].reportValidity()) {
+                $('.loading-btn').show();
+                $('.errorText').hide();
+                send();
+            }
+        });
+    </script>
 
 </body>