SyuanYu 1 kuukausi sitten
vanhempi
commit
44a2992ab4

+ 3 - 3
layouts/ai-customer/single.html

@@ -197,7 +197,7 @@
   
                 <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>
@@ -485,7 +485,7 @@
         success: function (response) {
           if (response == "成功") {
             $('.loading-btn').hide();
-            alert("成功提交!");
+            alert("成功送出!");
           }
         },
       });
@@ -505,7 +505,7 @@
       //   demand = document.querySelector('#otherText').value;
       // }
 
-      // 手動觸發表單提交
+      // 手動觸發表單送出
       let form = $(this).closest('form');
       form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
 

+ 486 - 476
layouts/ai-presenter/single.html

@@ -19,537 +19,547 @@
   {{ partial "navbar.html" . }}
 
   <div class="ai-presenter">
-    <div class="container">
-      <div class="d-flex flex-column align-items-center">
-        <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI人物影片|SaaS首圖">
-
-        <h2 class="mt-5 title">
-          輸入文字 取得 AI 分鏡表<br>快速製作「AI 人物影片」
-        </h2>
-
-        <a href="https://cloud.choozmo.com/main/make-video" class="link-btn" target="_blank">免費開始體驗</a>
-
-        <h4 class="my-4 pt-lg-5 title">
-          💡 如何從文字生成AI人物影片
-        </h4>
-
-        <img src="/imgs/ai-presenter/四格SaaS教學gif.gif" alt="ChoozMo AI人物影片|四格SaaS教學">
-
-        <h4 class="my-4 pt-5 title">
-          💡 什麼是 AI 分鏡?
-        </h4>
-
-        <p>AI 分鏡是 ChoozMo 的獨家功能,讓您無需學習繁瑣的剪輯技術,也能輕鬆創作專業級影片!</p>
-        <p>只需簡單輸入文字,即可快速生成 AI 腳本 - 分鏡表:</p>
-
-        <ol>
-          <li>
-            <strong>自動生成腳本</strong>:AI 根據文字提示自動生成完整的腳本和分鏡設計。
-          </li>
-          <li>
-            <strong>輕鬆修改</strong>:對不滿意的內容可自由調整,確保完全符合您的需求。
-          </li>
-          <li>
-            <strong>無縫製作</strong>:修改完成後,將分鏡表上傳至系統,即可生成專屬的 AI 主播影片!
-          </li>
-        </ol>
-
-        <p>ChoozMo 讓影片製作變得簡單高效,省時又省力,讓您專注於創意發揮!</p>
-
-        <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI人物影片|AI分鏡表" class="my-5">
-
-        <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank">免費開始體驗</a>
-
-        <h4 class="my-4 pt-5 title">
-          💡 看 AI 影片案例
-        </h4>
-
-        <div class="row">
-          <div class="col-md-6">
-            <div class="iframe-box">
-              <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?si=i-KbVD-7JlSaIeWS&autoplay=1&mute=1"
-                title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-            </div>
-          </div>
-
-          <div class="col-md-6">
-            <div class="iframe-box">
-              <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?si=16RaVI7kdapf8eLG&autoplay=1&mute=1"
-                title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-            </div>
-          </div>
+    <div class="container-fluid pb-5">
+      <div class="row">
+        <div class="col-lg-8">
+          <div class="d-flex flex-column align-items-center main-content">
+            <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI人物影片|SaaS首圖">
+
+            <h2 class="mt-5 title">
+              輸入文字 取得 AI 分鏡表<br>快速製作「AI 人物影片」
+            </h2>
 
-          <div class="col-md-6">
-            <div class="iframe-box">
-              <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?si=QL6QYJEgVDFwO3pw&autoplay=1&mute=1"
-                title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-            </div>
-          </div>
+            <a href="https://cloud.choozmo.com/main/make-video" class="link-btn" target="_blank">免費開始體驗</a>
 
-          <div class="col-md-6">
-            <div class="iframe-box">
-              <iframe src="https://www.youtube.com/embed/95gce-Upi_A?si=syarZKF-BRWB96Fv&autoplay=1&mute=1"
-                title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-            </div>
-          </div>
-        </div>
+            <h4 class="my-4 pt-lg-5 title">
+              💡 如何從文字生成AI人物影片
+            </h4>
 
-        <h4 class="my-4 pt-5 title">
-          💡 為什麼選擇 ChoozMo SaaS AI 影片生成器?
-        </h4>
-
-        <p>ChoozMo 是您值得信賴的 AI 影片生成解決方案,具備以下三大優勢:</p>
-
-        <!-- 電腦版 -->
-        <table class="mt-3 d-none d-lg-table">
-          <thead>
-            <tr>
-              <th scope="col">電視台的專業品質</th>
-              <th scope="col">無需素材也能輕鬆創作</th>
-              <th scope="col">快速、高效、低成本</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <p>
-                  我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
-                </p>
+            <img src="/imgs/ai-presenter/四格SaaS教學gif.gif" alt="ChoozMo AI人物影片|四格SaaS教學">
 
-                <p class="mt-3">
-                  即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
-                </p>
-              </td>
-              <td>
-                <p>
-                  無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
-                </p>
+            <h4 class="my-4 pt-5 title">
+              💡 什麼是 AI 分鏡?
+            </h4>
 
-                <ul class="mt-3">
-                  <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
-                  <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
-                </ul>
-              </td>
-              <td>
-                <p>
-                  ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
-                </p>
-                <ul class="mt-3">
-                  <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
-                  <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <!-- 手機版 -->
-        <table class="d-table d-lg-none">
-          <tbody>
-
-            <tr>
-              <th>
-                電視台的專業品質
-              </th>
-            </tr>
-
-            <tr>
-              <td>
-                <p>
-                  我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
-                </p>
+            <p>AI 分鏡是 ChoozMo 的獨家功能,讓您無需學習繁瑣的剪輯技術,也能輕鬆創作專業級影片!</p>
+            <p>只需簡單輸入文字,即可快速生成 AI 腳本 - 分鏡表:</p>
 
-                <p class="mt-3">
-                  即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
-                </p>
-              </td>
-            </tr>
+            <ol>
+              <li>
+                <strong>自動生成腳本</strong>:AI 根據文字提示自動生成完整的腳本和分鏡設計。
+              </li>
+              <li>
+                <strong>輕鬆修改</strong>:對不滿意的內容可自由調整,確保完全符合您的需求。
+              </li>
+              <li>
+                <strong>無縫製作</strong>:修改完成後,將分鏡表上傳至系統,即可生成專屬的 AI 主播影片!
+              </li>
+            </ol>
 
-            <tr>
-              <th>
-                無需素材也能輕鬆創作
-              </th>
-            </tr>
+            <p>ChoozMo 讓影片製作變得簡單高效,省時又省力,讓您專注於創意發揮!</p>
 
-            <tr>
-              <td>
-                <p>
-                  無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
-                </p>
+            <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI人物影片|AI分鏡表" class="my-5">
 
-                <ul class="mt-3">
-                  <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
-                  <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
-                </ul>
-              </td>
-            </tr>
+            <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank">免費開始體驗</a>
 
-            <tr>
-              <th>
-                快速、高效、低成本
-              </th>
-            </tr>
+            <h4 class="my-4 pt-5 title">
+              💡 看 AI 影片案例
+            </h4>
 
-            <tr>
-              <td>
-                <p>
-                  ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
-                </p>
-                <ul class="mt-3">
-                  <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
-                  <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-
-          <!-- <tbody>
-              <tr>
-                <th>電視台的專業品質</th>
-                <td>
-                  <p>
-                    我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
-                  </p>
-  
-                  <p class="mt-3">
-                    即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
-                  </p>
-                </td>
-
-              
-              </tr>
-
-              <tr>
-                <th>無需素材也能輕鬆創作</th>
-                <td>
-                  <p>
-                    無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
-                  </p>
-  
-                  <ul class="mt-3">
-                    <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
-                    <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
-                  </ul>
-                </td>
-              </tr>
-
-              <tr>
-                <th>快速、高效、低成本</th>
-                <td>
-                  <p>
-                    ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
-                  </p>
-                  <ul class="mt-3">
-                    <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
-                    <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
-                  </ul>
-                </td>
-              </tr>
-            </tbody> -->
-        </table>
-
-        <div class="accordion mt-5" id="accordion_1">
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="heading_1">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#collapse_1" aria-expanded="true" aria-controls="collapse_1">
-                <h4>💡 AI 人物影片的應用場合?</h4>
-              </button>
-            </h2>
-            <div id="collapse_1" class="accordion-collapse collapse" aria-labelledby="heading_1"
-              data-bs-parent="#accordion_1">
-              <div class="accordion-body">
-                <p>AI 人物影片具有多元化的應用場景,適合以下場合:</p>
-
-                <ul>
-                  <li>教育訓練:快速生成專業教學影片,提升學習效果與參與度。</li>
-                  <li>開幕會場:製作吸睛的開幕介紹影片,增添活動亮點。</li>
-                  <li>產品/公司宣傳:用生動的 AI 角色展示品牌特色與產品價值,提升觀眾記憶度。</li>
-                  <li>個人品牌:KOL 與影音創作者可製作專屬影片,用於 YouTube、Instagram、TikTok 等社交平台,強化品牌形象與內容影響力。</li>
-                  <li>其他應用:無論是社交媒體內容、企業內部溝通,還是個性化影片創作,都能輕鬆實現。</li>
-                </ul>
+            <div class="row">
+              <div class="col-md-6">
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?si=i-KbVD-7JlSaIeWS&autoplay=1&mute=1"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                </div>
               </div>
-            </div>
-          </div>
-        </div>
 
-        <div class="accordion" id="accordion_2">
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="heading_2">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2">
-                <h4>💡 自由下載綠幕原檔</h4>
-              </button>
-            </h2>
-            <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
-              data-bs-parent="#accordion_2">
-              <div class="accordion-body">
-                <p>完成的 AI 人物影片不僅可直接使用,還可選擇下載AI人物綠幕原檔,為創作者提供更大的靈活性與主導權。您可以:</p>
-
-                <ul>
-                  <li>將影片導入其他剪輯工具進一步編輯。</li>
-                  <li>調整背景或添加更多個性化特效,滿足各種專業需求。</li>
-                </ul>
+              <div class="col-md-6">
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?si=16RaVI7kdapf8eLG&autoplay=1&mute=1"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                </div>
+              </div>
 
-                <p>透過 AI 影片製作工具,無論是商業用途還是個人創作,都能輕鬆打造專業級內容!</p>
+              <div class="col-md-6">
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?si=QL6QYJEgVDFwO3pw&autoplay=1&mute=1"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                </div>
+              </div>
 
-                <div class="my-5 d-flex flex-column flex-lg-row align-items-center demo-img">
-                  <img src="/imgs/ai-presenter/YT3.webp" alt="ChoozMo AI人物影片|綠幕主播">
-                  <p class="mb-0">➡️</p>
-                  <img src="/imgs/ai-presenter/綠幕主播.webp" alt="ChoozMo AI人物影片|綠幕主播">
+              <div class="col-md-6">
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/95gce-Upi_A?si=syarZKF-BRWB96Fv&autoplay=1&mute=1"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
 
-        <h4 class="my-4 title">
-          💡 常見問題
-        </h4>
-
-        <div class="accordion my-4" id="faq_accordion">
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="faq_heading_1">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#faq_collapse_1" aria-expanded="true" aria-controls="faq_collapse_1">
-                如何修改 AI 分鏡表內容?
-              </button>
-            </h2>
-            <div id="faq_collapse_1" class="accordion-collapse collapse" aria-labelledby="faq_heading_1"
-              data-bs-parent="#faq_accordion">
-              <div class="accordion-body">
-                AI 分鏡表提供了直觀的編輯功能,您可以輕鬆進入編輯頁面,自行設定大標題、字幕和素材文字內容。此外,素材圖片也可以自由更換,讓您的創作更加靈活。
+            <h4 class="my-4 pt-5 title">
+              💡 為什麼選擇 ChoozMo SaaS AI 影片生成器?
+            </h4>
+
+            <p>ChoozMo 是您值得信賴的 AI 影片生成解決方案,具備以下三大優勢:</p>
+
+            <!-- 電腦版 -->
+            <table class="mt-3 d-none d-lg-table">
+              <thead>
+                <tr>
+                  <th scope="col">電視台的專業品質</th>
+                  <th scope="col">無需素材也能輕鬆創作</th>
+                  <th scope="col">快速、高效、低成本</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <p>
+                      我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
+                    </p>
+
+                    <p class="mt-3">
+                      即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
+                    </p>
+                  </td>
+                  <td>
+                    <p>
+                      無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
+                    </p>
+
+                    <ul class="mt-3">
+                      <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
+                      <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
+                    </ul>
+                  </td>
+                  <td>
+                    <p>
+                      ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
+                    </p>
+                    <ul class="mt-3">
+                      <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
+                      <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
+                    </ul>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <!-- 手機版 -->
+            <table class="d-table d-lg-none">
+              <tbody>
+
+                <tr>
+                  <th>
+                    電視台的專業品質
+                  </th>
+                </tr>
+
+                <tr>
+                  <td>
+                    <p>
+                      我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
+                    </p>
+
+                    <p class="mt-3">
+                      即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
+                    </p>
+                  </td>
+                </tr>
+
+                <tr>
+                  <th>
+                    無需素材也能輕鬆創作
+                  </th>
+                </tr>
+
+                <tr>
+                  <td>
+                    <p>
+                      無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
+                    </p>
+
+                    <ul class="mt-3">
+                      <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
+                      <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
+                    </ul>
+                  </td>
+                </tr>
+
+                <tr>
+                  <th>
+                    快速、高效、低成本
+                  </th>
+                </tr>
+
+                <tr>
+                  <td>
+                    <p>
+                      ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
+                    </p>
+                    <ul class="mt-3">
+                      <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
+                      <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
+                    </ul>
+                  </td>
+                </tr>
+              </tbody>
+
+              <!-- <tbody>
+                  <tr>
+                    <th>電視台的專業品質</th>
+                    <td>
+                      <p>
+                        我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
+                      </p>
+      
+                      <p class="mt-3">
+                        即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
+                      </p>
+                    </td>
+    
+                  
+                  </tr>
+    
+                  <tr>
+                    <th>無需素材也能輕鬆創作</th>
+                    <td>
+                      <p>
+                        無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
+                      </p>
+      
+                      <ul class="mt-3">
+                        <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
+                        <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
+                      </ul>
+                    </td>
+                  </tr>
+    
+                  <tr>
+                    <th>快速、高效、低成本</th>
+                    <td>
+                      <p>
+                        ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
+                      </p>
+                      <ul class="mt-3">
+                        <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
+                        <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
+                      </ul>
+                    </td>
+                  </tr>
+                </tbody> -->
+            </table>
+
+            <div class="accordion mt-5" id="accordion_1">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_1">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_1" aria-expanded="true" aria-controls="collapse_1">
+                    <h4>💡 AI 人物影片的應用場合?</h4>
+                  </button>
+                </h2>
+                <div id="collapse_1" class="accordion-collapse collapse" aria-labelledby="heading_1"
+                  data-bs-parent="#accordion_1">
+                  <div class="accordion-body">
+                    <p>AI 人物影片具有多元化的應用場景,適合以下場合:</p>
+
+                    <ul>
+                      <li>教育訓練:快速生成專業教學影片,提升學習效果與參與度。</li>
+                      <li>開幕會場:製作吸睛的開幕介紹影片,增添活動亮點。</li>
+                      <li>產品/公司宣傳:用生動的 AI 角色展示品牌特色與產品價值,提升觀眾記憶度。</li>
+                      <li>個人品牌:KOL 與影音創作者可製作專屬影片,用於 YouTube、Instagram、TikTok 等社交平台,強化品牌形象與內容影響力。</li>
+                      <li>其他應用:無論是社交媒體內容、企業內部溝通,還是個性化影片創作,都能輕鬆實現。</li>
+                    </ul>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="faq_heading_2">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#faq_collapse_2" aria-expanded="false" aria-controls="faq_collapse_2">
-                是否可以上傳自己的圖片或影片素材?
-              </button>
-            </h2>
-            <div id="faq_collapse_2" class="accordion-collapse collapse" aria-labelledby="faq_heading_2"
-              data-bs-parent="#faq_accordion">
-              <div class="accordion-body">
-                當然可以!下載 AI 分鏡表後,所有內容皆可隨意編輯,您還能輕鬆上傳個人圖片或影片素材,讓影片更加個性化。
+            <div class="accordion" id="accordion_2">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="heading_2">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2">
+                    <h4>💡 自由下載綠幕原檔</h4>
+                  </button>
+                </h2>
+                <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
+                  data-bs-parent="#accordion_2">
+                  <div class="accordion-body">
+                    <p>完成的 AI 人物影片不僅可直接使用,還可選擇下載AI人物綠幕原檔,為創作者提供更大的靈活性與主導權。您可以:</p>
+
+                    <ul>
+                      <li>將影片導入其他剪輯工具進一步編輯。</li>
+                      <li>調整背景或添加更多個性化特效,滿足各種專業需求。</li>
+                    </ul>
+
+                    <p>透過 AI 影片製作工具,無論是商業用途還是個人創作,都能輕鬆打造專業級內容!</p>
+
+                    <div class="my-5 d-flex flex-column flex-lg-row align-items-center demo-img">
+                      <img src="/imgs/ai-presenter/YT3.webp" alt="ChoozMo AI人物影片|綠幕主播">
+                      <p class="mb-0">➡️</p>
+                      <img src="/imgs/ai-presenter/綠幕主播.webp" alt="ChoozMo AI人物影片|綠幕主播">
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="faq_heading_3">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#faq_collapse_3" aria-expanded="false" aria-controls="faq_collapse_3">
-                系統是否會自動上字幕?
-              </button>
-            </h2>
-            <div id="faq_collapse_3" class="accordion-collapse collapse" aria-labelledby="faq_heading_3"
-              data-bs-parent="#faq_accordion">
-              <div class="accordion-body">
-                是的,AI 分鏡表具備全自動字幕生成功能,無需手動剪輯字幕,大幅提升製作效率!
+            <h4 class="my-4 title">
+              💡 常見問題
+            </h4>
+
+            <div class="accordion my-4" id="faq_accordion">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="faq_heading_1">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#faq_collapse_1" aria-expanded="true" aria-controls="faq_collapse_1">
+                    如何修改 AI 分鏡表內容?
+                  </button>
+                </h2>
+                <div id="faq_collapse_1" class="accordion-collapse collapse" aria-labelledby="faq_heading_1"
+                  data-bs-parent="#faq_accordion">
+                  <div class="accordion-body">
+                    AI 分鏡表提供了直觀的編輯功能,您可以輕鬆進入編輯頁面,自行設定大標題、字幕和素材文字內容。此外,素材圖片也可以自由更換,讓您的創作更加靈活。
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
 
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="faq_heading_4">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#faq_collapse_4" aria-expanded="false" aria-controls="faq_collapse_4">
-                如何更換影片背景和主播?
-              </button>
-            </h2>
-            <div id="faq_collapse_4" class="accordion-collapse collapse" aria-labelledby="faq_heading_4"
-              data-bs-parent="#faq_accordion">
-              <div class="accordion-body">
-                完成分鏡表後,您只需將內容上傳至 SaaS 的<a href="https://cloud.choozmo.com/main/make-video"
-                  target="_blank">製作影片頁面</a>,即可挑選喜愛的「主播」與「模板」,讓影片風格更加符合需求。
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="faq_heading_2">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#faq_collapse_2" aria-expanded="false" aria-controls="faq_collapse_2">
+                    是否可以上傳自己的圖片或影片素材?
+                  </button>
+                </h2>
+                <div id="faq_collapse_2" class="accordion-collapse collapse" aria-labelledby="faq_heading_2"
+                  data-bs-parent="#faq_accordion">
+                  <div class="accordion-body">
+                    當然可以!下載 AI 分鏡表後,所有內容皆可隨意編輯,您還能輕鬆上傳個人圖片或影片素材,讓影片更加個性化。
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
 
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="faq_heading_5">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#faq_collapse_5" aria-expanded="false" aria-controls="faq_collapse_5">
-                製作影片需要多長時間?
-              </button>
-            </h2>
-            <div id="faq_collapse_5" class="accordion-collapse collapse" aria-labelledby="faq_heading_5"
-              data-bs-parent="#faq_accordion">
-              <div class="accordion-body">
-                影片製作的時間取決於影片長度。舉例來說,一支 30 秒的影片,製作時間約為 10 分鐘,快速又高效!
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="faq_heading_3">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#faq_collapse_3" aria-expanded="false" aria-controls="faq_collapse_3">
+                    系統是否會自動上字幕?
+                  </button>
+                </h2>
+                <div id="faq_collapse_3" class="accordion-collapse collapse" aria-labelledby="faq_heading_3"
+                  data-bs-parent="#faq_accordion">
+                  <div class="accordion-body">
+                    是的,AI 分鏡表具備全自動字幕生成功能,無需手動剪輯字幕,大幅提升製作效率!
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
 
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="faq_heading_6">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#faq_collapse_6" aria-expanded="false" aria-controls="faq_collapse_6">
-                如何查看完成的影片?
-              </button>
-            </h2>
-            <div id="faq_collapse_6" class="accordion-collapse collapse" aria-labelledby="faq_heading_6"
-              data-bs-parent="#faq_accordion">
-              <div class="accordion-body">
-                透過<a href="https://cloud.choozmo.com/main/progress"
-                  target="_blank">影片清單</a>,您可以即時查看所有正在製作中的影片以及已完成的影片,並可直接下載成品。
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="faq_heading_4">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#faq_collapse_4" aria-expanded="false" aria-controls="faq_collapse_4">
+                    如何更換影片背景和主播?
+                  </button>
+                </h2>
+                <div id="faq_collapse_4" class="accordion-collapse collapse" aria-labelledby="faq_heading_4"
+                  data-bs-parent="#faq_accordion">
+                  <div class="accordion-body">
+                    完成分鏡表後,您只需將內容上傳至 SaaS 的<a href="https://cloud.choozmo.com/main/make-video"
+                      target="_blank">製作影片頁面</a>,即可挑選喜愛的「主播」與「模板」,讓影片風格更加符合需求。
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
 
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="faq_heading_7">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#faq_collapse_7" aria-expanded="false" aria-controls="faq_collapse_7">
-                如何付款?是否提供免費試用?
-              </button>
-            </h2>
-            <div id="faq_collapse_7" class="accordion-collapse collapse" aria-labelledby="faq_heading_7"
-              data-bs-parent="#faq_accordion">
-              <div class="accordion-body">
-                AI 分鏡表提供免費試用版,您只需連結 Google 帳號,即可立即體驗!若需正式版功能,可直接在<a href="https://cloud.choozmo.com/main/dashboard"
-                  target="_blank">首頁</a>線上儲值製作秒數,輕鬆升級使用完整功能。
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="faq_heading_5">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#faq_collapse_5" aria-expanded="false" aria-controls="faq_collapse_5">
+                    製作影片需要多長時間?
+                  </button>
+                </h2>
+                <div id="faq_collapse_5" class="accordion-collapse collapse" aria-labelledby="faq_heading_5"
+                  data-bs-parent="#faq_accordion">
+                  <div class="accordion-body">
+                    影片製作的時間取決於影片長度。舉例來說,一支 30 秒的影片,製作時間約為 10 分鐘,快速又高效!
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </div>
 
-        <h4 class="my-4 pb-3 title">
-          💡 應用實例
-        </h4>
-
-        <div class="row align-items-center flex-md-row flex-column-reverse">
-          <div class="col-md-6">
-            <p>
-              客家電視台推出每週一部 <a href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
-                target="_blank">【AI主播講天時】</a> 節目,由兩位專業的客語 AI 主播輪流主持!
-            </p>
-
-            <ul>
-              <li>用流利的客語帶來最精準的天氣資訊</li>
-              <li>每週定期更新,讓您隨時掌握最新天氣動態</li>
-            </ul>
-          </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="faq_heading_6">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#faq_collapse_6" aria-expanded="false" aria-controls="faq_collapse_6">
+                    如何查看完成的影片?
+                  </button>
+                </h2>
+                <div id="faq_collapse_6" class="accordion-collapse collapse" aria-labelledby="faq_heading_6"
+                  data-bs-parent="#faq_accordion">
+                  <div class="accordion-body">
+                    透過<a href="https://cloud.choozmo.com/main/progress"
+                      target="_blank">影片清單</a>,您可以即時查看所有正在製作中的影片以及已完成的影片,並可直接下載成品。
+                  </div>
+                </div>
+              </div>
 
-          <div class="col-md-6 mb-4 mb-md-0">
-            <div class="d-flex flex-column align-items-center">
-              <img width="450" src="/imgs/ai-presenter/客家2.webp" alt="ChoozMo AI人物影片|AI主播講天時">
-              <img width="450" src="/imgs/ai-presenter/客家4.webp" alt="ChoozMo AI人物影片|AI主播講天時" class="mt-4">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="faq_heading_7">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#faq_collapse_7" aria-expanded="false" aria-controls="faq_collapse_7">
+                    如何付款?是否提供免費試用?
+                  </button>
+                </h2>
+                <div id="faq_collapse_7" class="accordion-collapse collapse" aria-labelledby="faq_heading_7"
+                  data-bs-parent="#faq_accordion">
+                  <div class="accordion-body">
+                    AI 分鏡表提供免費試用版,您只需連結 Google 帳號,即可立即體驗!若需正式版功能,可直接在<a href="https://cloud.choozmo.com/main/dashboard"
+                      target="_blank">首頁</a>線上儲值製作秒數,輕鬆升級使用完整功能。
+                  </div>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
 
-        <div class="row align-items-center">
-          <div class="col-md-6">
-            <div class="d-flex flex-column">
-              <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="ChoozMo AI人物影片|陳斐娟|應用實例" class="img-fluid">
+            <h4 class="my-4 pb-3 title">
+              💡 應用實例
+            </h4>
 
-            </div>
-          </div>
+            <div class="row align-items-center flex-md-row flex-column-reverse">
+              <div class="col-md-6">
+                <p>
+                  客家電視台推出每週一部 <a
+                    href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
+                    target="_blank">【AI主播講天時】</a> 節目,由兩位專業的客語 AI 主播輪流主持!
+                </p>
 
-          <div class="col-md-6 mb-4 mb-md-0">
-            <p>
-              三立新聞【克隆娟】每週一更,為知名主播<strong>陳斐娟</strong>量身打造獨特的 AI 造型!
-            </p>
+                <ul>
+                  <li>用流利的客語帶來最精準的天氣資訊</li>
+                  <li>每週定期更新,讓您隨時掌握最新天氣動態</li>
+                </ul>
+              </div>
 
-            <p>
-              <strong>AI 與真人連線互動</strong>:克隆娟與陳斐娟遠端連線,一同播報新聞,創造別具一格的播報體驗。
-            </p>
-          </div>
-        </div>
+              <div class="col-md-6 mb-4 mb-md-0">
+                <div class="d-flex flex-column align-items-center">
+                  <img width="450" src="/imgs/ai-presenter/客家2.webp" alt="ChoozMo AI人物影片|AI主播講天時">
+                  <img width="450" src="/imgs/ai-presenter/客家4.webp" alt="ChoozMo AI人物影片|AI主播講天時" class="mt-4">
+                </div>
+              </div>
+            </div>
 
-        <div class="row align-items-center flex-md-row flex-column-reverse">
-          <div class="col-md-6">
-            <p>
-              新媒體<a href="https://news.aimedium.org/" target="_blank">【算力傳媒】</a>誕生!<br>
-              AI品牌助理線上採訪
-            </p>
+            <div class="row align-items-center">
+              <div class="col-md-6">
+                <div class="d-flex flex-column">
+                  <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="ChoozMo AI人物影片|陳斐娟|應用實例" class="img-fluid">
 
-            <ul>
-              <li><strong>音檔自動彙整重點</strong>:AI能自動提取採訪音檔中的關鍵信息,快速整理出重要內容。</li>
-              <li><strong>專業級AI主播訪談影片</strong>:透過AI技術生成高品質的訪談影片,讓您的品牌形象更具專業感。
-              </li>
-              <li><strong>即時新聞稿生成</strong>:採訪後可立即轉換為新聞稿,方便快速發布,提升工作效率。</li>
-            </ul>
-          </div>
+                </div>
+              </div>
+
+              <div class="col-md-6 mb-4 mb-md-0">
+                <p>
+                  三立新聞【克隆娟】每週一更,為知名主播<strong>陳斐娟</strong>量身打造獨特的 AI 造型!
+                </p>
 
-          <div class="col-md-6 mb-4 mb-md-0">
-            <div class="d-flex flex-column align-items-center">
-              <img width="450" src="/imgs/ai-presenter/YT1.webp" alt="ChoozMo AI人物影片|算力傳媒">
-              <img width="450" src="/imgs/ai-presenter/算力首頁.webp" alt="ChoozMo AI人物影片|算力傳媒首頁" class="mt-4">
+                <p>
+                  <strong>AI 與真人連線互動</strong>:克隆娟與陳斐娟遠端連線,一同播報新聞,創造別具一格的播報體驗。
+                </p>
+              </div>
             </div>
-          </div>
-        </div>
 
-        <a href="https://cloud.choozmo.com/main/make-video" class="my-5 link-btn" target="_blank">免費開始體驗</a>
+            <div class="row align-items-center flex-md-row flex-column-reverse">
+              <div class="col-md-6">
+                <p>
+                  新媒體<a href="https://news.aimedium.org/" target="_blank">【算力傳媒】</a>誕生!<br>
+                  AI品牌助理線上採訪
+                </p>
 
-        <div class="accordion my-5 pb-5" id="disclaimer">
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="disclaimerHeading_1">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#disclaimerCollapse_1" aria-expanded="false" aria-controls="disclaimerCollapse_1">
-                <p>使用者的守法義務</p>
-              </button>
-            </h2>
-            <div id="disclaimerCollapse_1" class="accordion-collapse collapse" aria-labelledby="disclaimerHeading_1"
-              data-bs-parent="#disclaimer">
-              <div class="accordion-body">
-                <section class="terms-content">
-                  <p>
-                    您承諾絕不為任何非法目的或以任何非法方式使用本服務,並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者,並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為,包括但不限於:
-                  </p>
-                  <ul>
-                    <li>上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上</li>
-                    <li>侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利</li>
-                    <li>違反依法律或契約所應負之保密義務</li>
-                    <li>冒用他人名義使用本服務</li>
-                  </ul>
-                </section>
+                <ul>
+                  <li><strong>音檔自動彙整重點</strong>:AI能自動提取採訪音檔中的關鍵信息,快速整理出重要內容。</li>
+                  <li><strong>專業級AI主播訪談影片</strong>:透過AI技術生成高品質的訪談影片,讓您的品牌形象更具專業感。
+                  </li>
+                  <li><strong>即時新聞稿生成</strong>:採訪後可立即轉換為新聞稿,方便快速發布,提升工作效率。</li>
+                </ul>
+              </div>
+
+              <div class="col-md-6 mb-4 mb-md-0">
+                <div class="d-flex flex-column align-items-center">
+                  <img width="450" src="/imgs/ai-presenter/YT1.webp" alt="ChoozMo AI人物影片|算力傳媒">
+                  <img width="450" src="/imgs/ai-presenter/算力首頁.webp" alt="ChoozMo AI人物影片|算力傳媒首頁" class="mt-4">
+                </div>
               </div>
             </div>
-          </div>
 
-          <div class="accordion-item">
-            <h2 class="accordion-header" id="disclaimerheading_2">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                data-bs-target="#disclaimerCollapse_2" aria-expanded="false" aria-controls="disclaimerCollapse_2">
-                <p>免責聲明</p>
-              </button>
-            </h2>
-            <div id="disclaimerCollapse_2" class="accordion-collapse collapse" aria-labelledby="disclaimerheading_2"
-              data-bs-parent="#disclaimer">
-              <div class="accordion-body">
-                <section class="terms-content">
-                  <p>
-                    您明確了解並同意:ChoozMo
-                    對本服務不提供任何明示或默示的擔保,包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供,您使用本服務時,須自行承擔相關風險。ChoozMo
-                    不保證以下事項:
-                  </p>
-                  <ul>
-                    <li>本服務將符合您的需求</li>
-                    <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
-                    <li>由本服務之使用而取得之結果為正確或可靠</li>
-                  </ul>
-                  <p>是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險,並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失,對 ChoozMo
-                    提出任何請求或採取法律行動,您應自負完全責任。</p>
-                </section>
+            <a href="https://cloud.choozmo.com/main/make-video" class="my-5 link-btn" target="_blank">免費開始體驗</a>
+
+            <div class="accordion my-5 pb-5" id="disclaimer">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="disclaimerHeading_1">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#disclaimerCollapse_1" aria-expanded="false" aria-controls="disclaimerCollapse_1">
+                    <p>使用者的守法義務</p>
+                  </button>
+                </h2>
+                <div id="disclaimerCollapse_1" class="accordion-collapse collapse" aria-labelledby="disclaimerHeading_1"
+                  data-bs-parent="#disclaimer">
+                  <div class="accordion-body">
+                    <section class="terms-content">
+                      <p>
+                        您承諾絕不為任何非法目的或以任何非法方式使用本服務,並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者,並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為,包括但不限於:
+                      </p>
+                      <ul>
+                        <li>上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上</li>
+                        <li>侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利</li>
+                        <li>違反依法律或契約所應負之保密義務</li>
+                        <li>冒用他人名義使用本服務</li>
+                      </ul>
+                    </section>
+                  </div>
+                </div>
+              </div>
+
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="disclaimerheading_2">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#disclaimerCollapse_2" aria-expanded="false" aria-controls="disclaimerCollapse_2">
+                    <p>免責聲明</p>
+                  </button>
+                </h2>
+                <div id="disclaimerCollapse_2" class="accordion-collapse collapse" aria-labelledby="disclaimerheading_2"
+                  data-bs-parent="#disclaimer">
+                  <div class="accordion-body">
+                    <section class="terms-content">
+                      <p>
+                        您明確了解並同意:ChoozMo
+                        對本服務不提供任何明示或默示的擔保,包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供,您使用本服務時,須自行承擔相關風險。ChoozMo
+                        不保證以下事項:
+                      </p>
+                      <ul>
+                        <li>本服務將符合您的需求</li>
+                        <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
+                        <li>由本服務之使用而取得之結果為正確或可靠</li>
+                      </ul>
+                      <p>是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險,並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失,對 ChoozMo
+                        提出任何請求或採取法律行動,您應自負完全責任。</p>
+                    </section>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
 
+        <div class="col-lg-4 pe-lg-5">
+          <div id="form" class="mt-0">
+            {{ partial "form-main.html" . }}
+          </div>
+        </div>
+      </div>
     </div>
 
     {{ partial "footer.html" . }}

+ 4 - 4
layouts/partials/form-main.html

@@ -79,7 +79,7 @@
 
     <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>
@@ -94,7 +94,7 @@
 
       <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>
@@ -221,7 +221,7 @@
       success: function (response) {
         if (response == "成功") {
           $('.loading-btn').hide();
-          alert("成功提交!");
+          alert("成功送出!");
         }
       },
     });
@@ -241,7 +241,7 @@
     //   demand = document.querySelector('#otherText').value;
     // }
 
-    // 手動觸發表單提交
+    // 手動觸發表單送出
     let form = $(this).closest('form');
     form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
 

+ 3 - 3
layouts/shortcodes/form-main.html

@@ -94,7 +94,7 @@
 
       <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>
@@ -221,7 +221,7 @@
       success: function (response) {
         if (response == "成功") {
           $('.loading-btn').hide();
-          alert("成功提交!");
+          alert("成功送出!");
         }
       },
     });
@@ -241,7 +241,7 @@
     //   demand = document.querySelector('#otherText').value;
     // }
 
-    // 手動觸發表單提交
+    // 手動觸發表單送出
     let form = $(this).closest('form');
     form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
 

+ 3 - 3
layouts/shortcodes/form.html

@@ -143,7 +143,7 @@
 
       <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>
@@ -269,7 +269,7 @@
       success: function (response) {
         if (response == "成功") {
           $('.loading-btn').hide();
-          alert("成功提交!");
+          alert("成功送出!");
         }
 
       },
@@ -313,7 +313,7 @@
       demand = document.querySelector('#otherText').value;
     }
 
-    // 手動觸發表單提交
+    // 手動觸發表單送出
     let form = $(this).closest('form');
     form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
 

+ 1 - 1
static/css/custom.css

@@ -2629,7 +2629,7 @@
 }
 
 #form .news-form {
-  padding: 25px 50px;
+  padding: 25px 30px;
   margin-top: 0;
 }
 

+ 55 - 44
static/css/style.css

@@ -4269,91 +4269,94 @@
 /* ai-presenter Start */
 .ai-presenter {
   margin-top: 120px;
-  overflow: hidden;
   /* 舊版 */
 }
-.ai-presenter a {
+.ai-presenter .main-content {
+  width: 95%;
+  margin: auto;
+}
+.ai-presenter .main-content a {
   display: inline-block;
   color: #ea5413;
   font-weight: bold;
 }
-.ai-presenter img {
+.ai-presenter .main-content img {
   max-width: 100%;
 }
-.ai-presenter p,
-.ai-presenter li,
-.ai-presenter th {
+.ai-presenter .main-content p,
+.ai-presenter .main-content li,
+.ai-presenter .main-content th {
   font-size: 1.125rem;
   line-height: 2;
 }
-.ai-presenter .title,
-.ai-presenter .accordion-header h4 {
+.ai-presenter .main-content .title,
+.ai-presenter .main-content .accordion-header h4 {
   color: #ea5413;
   font-weight: bold;
   text-align: center;
   line-height: 1.5;
 }
-.ai-presenter .accordion-item {
+.ai-presenter .main-content .accordion-item {
   border: none;
 }
-.ai-presenter .accordion-item .accordion-body {
+.ai-presenter .main-content .accordion-item .accordion-body {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.ai-presenter .accordion-item .accordion-header {
+.ai-presenter .main-content .accordion-item .accordion-header {
   display: flex;
   justify-content: center;
 }
-.ai-presenter .accordion-item .accordion-header button p {
+.ai-presenter .main-content .accordion-item .accordion-header button p {
   color: #000;
 }
-.ai-presenter .accordion-item .accordion-header .accordion-button:focus {
+.ai-presenter .main-content .accordion-item .accordion-header .accordion-button:focus {
   box-shadow: none;
 }
-.ai-presenter .accordion-item .accordion-header .accordion-button:not(.collapsed) {
+.ai-presenter .main-content .accordion-item .accordion-header .accordion-button:not(.collapsed) {
   color: #ea5413;
   background-color: #fff;
   box-shadow: none;
 }
-.ai-presenter .accordion-item .accordion-header .accordion-button::after {
+.ai-presenter .main-content .accordion-item .accordion-header .accordion-button::after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
 }
-.ai-presenter .accordion-item .accordion-header button {
+.ai-presenter .main-content .accordion-item .accordion-header button {
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
 }
-.ai-presenter .accordion-item .accordion-header button h4,
-.ai-presenter .accordion-item .accordion-header button p {
+.ai-presenter .main-content .accordion-item .accordion-header button h4,
+.ai-presenter .main-content .accordion-item .accordion-header button p {
   margin-bottom: 0;
   margin-right: 1rem;
   font-size: 24px;
   font-weight: bold;
 }
-.ai-presenter #faq_accordion {
+.ai-presenter .main-content #faq_accordion {
   width: 100%;
 }
-.ai-presenter #faq_accordion .accordion-header {
+.ai-presenter .main-content #faq_accordion .accordion-header {
   display: block;
 }
-.ai-presenter #faq_accordion .accordion-header button {
+.ai-presenter .main-content #faq_accordion .accordion-header button {
   width: 100%;
   font-weight: bold;
 }
-.ai-presenter #faq_accordion .accordion-item {
+.ai-presenter .main-content #faq_accordion .accordion-item {
   margin-bottom: 20px;
   border: 1px solid rgba(0, 0, 0, 0.125);
 }
-.ai-presenter #faq_accordion .accordion-item .accordion-body {
+.ai-presenter .main-content #faq_accordion .accordion-item .accordion-body {
   display: block;
 }
-.ai-presenter #faq_accordion .accordion-button:not(.collapsed) {
+.ai-presenter .main-content #faq_accordion .accordion-button:not(.collapsed) {
   color: #000;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
 }
-.ai-presenter .link-btn {
+.ai-presenter .main-content .link-btn {
   display: inline-block;
   padding: 16px 60px;
   margin: 2rem auto 3rem;
@@ -4365,72 +4368,72 @@
   background: #ea5413;
   transition: all 0.3s;
 }
-.ai-presenter .link-btn:hover {
+.ai-presenter .main-content .link-btn:hover {
   opacity: 0.8;
 }
-.ai-presenter .demo-img img {
+.ai-presenter .main-content .demo-img img {
   max-width: 30vw;
 }
 @media (max-width: 991px) {
-  .ai-presenter .demo-img img {
+  .ai-presenter .main-content .demo-img img {
     max-width: 100%;
   }
 }
-.ai-presenter .demo-img p {
+.ai-presenter .main-content .demo-img p {
   margin: 0 1rem;
   font-size: 2rem;
 }
 @media (max-width: 991px) {
-  .ai-presenter .demo-img p {
+  .ai-presenter .main-content .demo-img p {
     transform: rotate(90deg);
   }
 }
-.ai-presenter table {
+.ai-presenter .main-content table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #ccc;
   font-size: 1rem;
   letter-spacing: 1px;
 }
-.ai-presenter table tbody {
+.ai-presenter .main-content table tbody {
   vertical-align: top;
 }
-.ai-presenter table th {
+.ai-presenter .main-content table th {
   text-align: center;
 }
-.ai-presenter table th,
-.ai-presenter table td {
+.ai-presenter .main-content table th,
+.ai-presenter .main-content table td {
   border: 1px solid #ccc;
   padding: 20px;
 }
-.ai-presenter table th p,
-.ai-presenter table th ul,
-.ai-presenter table td p,
-.ai-presenter table td ul {
+.ai-presenter .main-content table th p,
+.ai-presenter .main-content table th ul,
+.ai-presenter .main-content table td p,
+.ai-presenter .main-content table td ul {
   margin-bottom: 0;
 }
-.ai-presenter .iframe-box {
+.ai-presenter .main-content .iframe-box {
   width: 100%;
   margin-bottom: 15px;
   padding-top: 5px;
   overflow: hidden;
 }
-.ai-presenter .iframe-box iframe {
+.ai-presenter .main-content .iframe-box iframe {
   width: 100%;
   height: auto;
   aspect-ratio: 16/9;
 }
-.ai-presenter .terms-content {
+.ai-presenter .main-content .terms-content {
   font-weight: bold;
   line-height: 32px;
   color: #6c6d70;
   text-align: justify;
 }
-.ai-presenter .terms-content ul {
+.ai-presenter .main-content .terms-content ul {
   padding: 0;
   list-style: none;
 }
-.ai-presenter .terms-content ul li::before {
+.ai-presenter .main-content .terms-content ul li::before {
   content: "";
   font-weight: bold;
   display: inline-block;
@@ -5172,16 +5175,24 @@
   margin: 50px auto;
   border-radius: 10px;
   box-shadow: 0 2px 10px 2px rgb(222, 220, 220);
+  font-size: 14px;
 }
 @media (max-width: 575px) {
   .news-form {
     padding: 50px 30px;
   }
 }
+.news-form p {
+  font-size: 14px;
+}
 .news-form form {
   margin: auto;
   max-width: 600px;
 }
+.news-form .form-control,
+.news-form .form-select {
+  font-size: 12px;
+}
 .news-form .title {
   margin-bottom: 50px;
 }

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
static/css/style.css.map


+ 166 - 151
static/css/style.scss

@@ -4704,209 +4704,214 @@
 
 .ai-presenter {
   margin-top: 120px;
-  overflow: hidden;
-
-  a {
-    display: inline-block;
-    color: #ea5413;
-    font-weight: bold;
-  }
+  // overflow: hidden;
 
-  img {
-    max-width: 100%;
-  }
+  .main-content {
+    width: 95%;
+    margin: auto;
 
-  p,
-  li,
-  th {
-    font-size: 1.125rem;
-    line-height: 2;
-  }
+    a {
+      display: inline-block;
+      color: #ea5413;
+      font-weight: bold;
+    }
 
-  .title,
-  .accordion-header h4 {
-    color: #ea5413;
-    font-weight: bold;
-    text-align: center;
-    line-height: 1.5;
-  }
+    img {
+      max-width: 100%;
+    }
 
-  .accordion-item {
-    border: none;
+    p,
+    li,
+    th {
+      font-size: 1.125rem;
+      line-height: 2;
+    }
 
-    .accordion-body {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+    .title,
+    .accordion-header h4 {
+      color: #ea5413;
+      font-weight: bold;
+      text-align: center;
+      line-height: 1.5;
     }
 
-    .accordion-header {
-      display: flex;
-      justify-content: center;
+    .accordion-item {
+      border: none;
 
-      button {
-        p {
-          color: #000;
-        }
+      .accordion-body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
 
-      .accordion-button {
-        &:focus {
-          box-shadow: none;
-        }
+      .accordion-header {
+        display: flex;
+        justify-content: center;
 
-        &:not(.collapsed) {
-          color: #ea5413;
-          background-color: #fff;
-          box-shadow: none;
+        button {
+          p {
+            color: #000;
+          }
         }
 
-        &::after {
-          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+        .accordion-button {
+          &:focus {
+            box-shadow: none;
+          }
+
+          &:not(.collapsed) {
+            color: #ea5413;
+            background-color: #fff;
+            box-shadow: none;
+          }
+
+          &::after {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+          }
         }
-      }
 
-      button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: auto;
+        button {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
 
-        h4,
-        p {
-          margin-bottom: 0;
-          margin-right: 1rem;
-          font-size: 24px;
-          font-weight: bold;
+          h4,
+          p {
+            margin-bottom: 0;
+            margin-right: 1rem;
+            font-size: 24px;
+            font-weight: bold;
+          }
         }
       }
     }
-  }
 
-  #faq_accordion {
-    width: 100%;
+    #faq_accordion {
+      width: 100%;
 
-    .accordion-header {
-      display: block;
+      .accordion-header {
+        display: block;
 
-      button {
-        width: 100%;
-        font-weight: bold;
+        button {
+          width: 100%;
+          font-weight: bold;
+        }
       }
-    }
 
-    .accordion-item {
-      margin-bottom: 20px;
-      border: 1px solid rgba(0, 0, 0, 0.125);
+      .accordion-item {
+        margin-bottom: 20px;
+        border: 1px solid rgba(0, 0, 0, 0.125);
 
-      .accordion-body {
-        display: block;
+        .accordion-body {
+          display: block;
+        }
       }
-    }
 
-    .accordion-button {
-      &:not(.collapsed) {
-        color: #000;
-        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
+      .accordion-button {
+        &:not(.collapsed) {
+          color: #000;
+          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
+        }
       }
     }
-  }
 
-  .link-btn {
-    display: inline-block;
-    padding: 16px 60px;
-    margin: 2rem auto 3rem;
-    font-size: 26px;
-    font-weight: bold;
-    border-radius: 100px;
-    text-decoration: none;
-    color: #fff;
-    background: #ea5413;
-    transition: all 0.3s;
+    .link-btn {
+      display: inline-block;
+      padding: 16px 60px;
+      margin: 2rem auto 3rem;
+      font-size: 26px;
+      font-weight: bold;
+      border-radius: 100px;
+      text-decoration: none;
+      color: #fff;
+      background: #ea5413;
+      transition: all 0.3s;
 
-    &:hover {
-      opacity: 0.8;
+      &:hover {
+        opacity: 0.8;
+      }
     }
-  }
 
-  .demo-img {
-    img {
-      max-width: 30vw;
+    .demo-img {
+      img {
+        max-width: 30vw;
 
-      @media (max-width: 991px) {
-        max-width: 100%;
+        @media (max-width: 991px) {
+          max-width: 100%;
+        }
       }
-    }
 
-    p {
-      margin: 0 1rem;
-      font-size: 2rem;
+      p {
+        margin: 0 1rem;
+        font-size: 2rem;
 
-      @media (max-width: 991px) {
-        transform: rotate(90deg);
+        @media (max-width: 991px) {
+          transform: rotate(90deg);
+        }
       }
     }
-  }
 
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    border: 1px solid #ccc;
-    font-size: 1rem;
-    letter-spacing: 1px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      border: 1px solid #ccc;
+      font-size: 1rem;
+      letter-spacing: 1px;
 
-    tbody {
-      vertical-align: top;
-    }
+      tbody {
+        vertical-align: top;
+      }
 
-    th {
-      text-align: center;
-    }
+      th {
+        text-align: center;
+      }
 
-    th,
-    td {
-      border: 1px solid #ccc;
-      padding: 20px;
+      th,
+      td {
+        border: 1px solid #ccc;
+        padding: 20px;
 
-      p,
-      ul {
-        margin-bottom: 0;
+        p,
+        ul {
+          margin-bottom: 0;
+        }
       }
     }
-  }
-
-  .iframe-box {
-    width: 100%;
-    margin-bottom: 15px;
-    padding-top: 5px;
-    overflow: hidden;
 
-    iframe {
+    .iframe-box {
       width: 100%;
-      height: auto;
-      aspect-ratio: 16 / 9;
+      margin-bottom: 15px;
+      padding-top: 5px;
+      overflow: hidden;
+
+      iframe {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 16 / 9;
+      }
     }
-  }
 
-  .terms-content {
-    font-weight: bold;
-    line-height: 32px;
-    color: #6c6d70;
-    text-align: justify;
+    .terms-content {
+      font-weight: bold;
+      line-height: 32px;
+      color: #6c6d70;
+      text-align: justify;
 
-    ul {
-      padding: 0;
-      list-style: none;
+      ul {
+        padding: 0;
+        list-style: none;
 
-      li::before {
-        content: "";
-        font-weight: bold;
-        display: inline-block;
-        border: 3px solid #ea5413;
-        border-radius: 20px;
-        margin-right: 10px;
-        margin-bottom: 2px;
-        line-height: 32px;
+        li::before {
+          content: "";
+          font-weight: bold;
+          display: inline-block;
+          border: 3px solid #ea5413;
+          border-radius: 20px;
+          margin-right: 10px;
+          margin-bottom: 2px;
+          line-height: 32px;
+        }
       }
     }
   }
@@ -6104,16 +6109,26 @@
   margin: 50px auto;
   border-radius: 10px;
   box-shadow: 0 2px 10px 2px rgb(222, 220, 220);
+  font-size: 14px;
 
   @media (max-width: 575px) {
     padding: 50px 30px;
   }
 
+  p {
+    font-size: 14px;
+  }
+
   form {
     margin: auto;
     max-width: 600px;
   }
 
+  .form-control,
+  .form-select {
+    font-size: 12px;
+  }
+
   .title {
     margin-bottom: 50px;
 

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä