Browse Source

Merge branch 'master' of http://git.choozmo.com:3000/choozmo/AI_Anchor_Demo into master

jeter20131220 3 years ago
parent
commit
f42ef1ff0c
14 changed files with 657 additions and 172 deletions
  1. 3 0
      .vscode/settings.json
  2. 22 14
      about.html
  3. 25 12
      demo.html
  4. 36 39
      features.html
  5. BIN
      img/Spinner-1s-181px.gif
  6. 0 0
      img/nina.webp
  7. 395 0
      js/lan.js
  8. 48 61
      make_video.html
  9. 12 12
      make_video_eng.html
  10. 26 13
      steps.html
  11. 53 0
      style.css
  12. 3 1
      style.scss
  13. 4 4
      styleMV.css
  14. 30 16
      usecases.html

+ 3 - 0
.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

+ 22 - 14
about.html

@@ -20,20 +20,31 @@
         <div class="card border-0">
             <!-- <img src="./img/T1.png" class="card-img img-fluid" alt="..."> -->
             <div class="card-img-overlay pb-0">
-                <div>
+                <div class="ai-spokesgril">
                     <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
                         href="./index.html"><img class="me-3" style="width: 50px;" src="./img/圖片1.png" alt="">AI
                         Spokesgirl</a>
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                    </ul>
                 </div>
                 <section class="sec-hero" style="margin-top: 10px;">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-6">
-                                <h2 class="hero-title mb-5">製作影片 一鍵合成</h2>
-                                <p class="hero-txt">輸入文字素材,即速產生影片<br>
-                                    創作影片,不再需要錄影機、演員、麥克風繁雜器材。<br>
-                                    大幅省下時間、人力、器材成本。</p>
-                                <button class="hero-btn" onclick="window.location.href=`https://video.choozmo.com/register.html`">立即開始</button>
+                                <h2 class="hero-title mb-5" set-lan="html:hero_title">製作影片 一鍵合成</h2>
+                                <p class="hero-txt"><lan set-lan="html:hero_txt1">輸入文字素材,即速產生影片</lan><br>
+                                    <lan set-lan="html:hero_txt2">創作影片,不再需要錄影機、演員、麥克風繁雜器材。</lan><br>
+                                    <lan set-lan="html:hero_txt3">大幅省下時間、人力、器材成本。</lan></p>
+                                <button class="hero-btn" onclick="direct()"><lan set-lan="html:try_it_out">立即開始</lan></button>
                             </div>
                             <div class="col-md-6 col-left" style="position: relative;">
                                 <img src="img/背景紫.png" alt="" class="hero-purple">
@@ -53,17 +64,14 @@
 
 
     </section>
-
-
-
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+    <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.1.1/dist/js/bootstrap.min.js"
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="js/lan.js"></script>
 </body>
 
 </html>

+ 25 - 12
demo.html

@@ -14,15 +14,31 @@
 </head>
 
 <body>
+    <div class="ai-spokesgril">
+      <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
+          href="./index.html"><img class="me-3" style="width: 60px;" src="./img/home-button.png" alt="">AI
+          Spokesgirl</a>
+      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
+          <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  中/En
+              </a>
+              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                  <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+              </ul>
+          </li>
+      </ul>
+    </div>
     <section class="sec-usecase">
       <div class="container">
           <div class="row my-5">
-              <div class="col-12 col-md-6 m-4">
-                <a href="./make_video.html">
-                  <h3 class="usecase-sub"><i class="fas fa-circle"></i> 手動製作影片</h3>
+              <div class="col m-2">
+                <a onclick="direct()">
+                  <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:make_video_hand">手動製作影片</lan></h3>
                 </a>
               </div>
-              <div class="col-12 col-md-6 m-4">
+              <div class="col m-2">
                 <a href="#">
                   <h3 class="usecase-sub"><i class="fas fa-circle"></i> 自動影片製作</h3>
                 </a>
@@ -31,17 +47,14 @@
       </div>
 
     </section>
-
-
-
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+    <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.1.1/dist/js/bootstrap.min.js"
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="js/lan.js"></script>
 </body>
 
 </html>

+ 36 - 39
features.html

@@ -7,9 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ai_anchor_Demo</title>
 
-
-
-
     <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> -->
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@@ -19,23 +16,28 @@
 
 <body>
 <div style="overflow: hidden;">
-    <!-- <section  class="sec01">
-        <div class="card border-0">
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
-            <div class="card-img-overlay pb-0">
-             
-            </div>
-        </div>
-    </section> -->
     <div class="ai-spokesgril"> 
         <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900; margin-top: 100px; margin-left: 15px;" href="./index.html">
             <img class="me-5" style="width: 50px; margin-right: 15px;" src="./img/圖片1.png" alt="">
             AI Spokesgirl
         </a>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        中/En
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
     </div>
     <section class="sec-features" id="sec-features">
         <div class="container text-center">
-            <h2 class="features-title"><strong>4</strong>大特色</h2>
+            <h2 class="features-title"><strong>4</strong><lan set-lan="html:feature">大特色</lan></h2>
             <div class="row" style="position: relative;">
                 <img src="img/背景-橘霧.png" alt="" width="300px" class="features-orangel">
                 <div class="col-xs-12 col-md-6 col-lg-6">
@@ -49,11 +51,11 @@
                     <div class="features-block block-right">
                         <span class="features-num">1</span>
                         <div>
-                            <h3>輸入文字腳本及素材<br>一鍵輸出合成影片</h3>
+                            <h3><lan set-lan="html:feature_no1_title1">輸入文字腳本及素材</lan><br><lan set-lan="html:feature_no1_title2">一鍵輸出合成影片</lan></h3>
                             <ul class="features-list">
-                                <li>只需等待數分鐘即產製完成</li>
-                                <li>可上傳圖片或是影片作為背景</li>
-                                <li>生成MP4檔</li>
+                                <li set-lan="html:feature_no1_li1">只需等待數分鐘即產製完成</li>
+                                <li set-lan="html:feature_no1_li2">可上傳圖片或是影片作為背景</li>
+                                <li set-lan="html:feature_no1_li3">生成MP4檔</li>
                             </ul>
                         </div>
                     </div>
@@ -72,11 +74,11 @@
                     <div class="features-block block-left">
                         <span class="features-num">2</span>
                         <div>
-                            <h3>多位AI虛擬人物選擇</h3>
+                            <h3 set-lan="html:feature_no2_title">多位AI虛擬人物選擇</h3>
                             <ul class="features-list">
-                                <li>無人物肖像權問題</li>
-                                <li>人物表情、動作自然</li>
-                                <li>因應主題,選擇合適人物</li>
+                                <li set-lan="html:feature_no2_li1">無人物肖像權問題</li>
+                                <li set-lan="html:feature_no2_li2">人物表情、動作自然</li>
+                                <li set-lan="html:feature_no2_li3">因應主題,選擇合適人物</li>
                             </ul>
                         </div>
                     </div>
@@ -102,12 +104,12 @@
                     <div class="features-block block-right">
                         <span class="features-num">3</span>
                         <div>
-                            <h3>投影片轉製為影片</h3>
+                            <h3 set-lan="html:feature_no3_title">投影片轉製為影片</h3>
                             <ul class="features-list">
-                                <li>輸入文字腳本及投影片連結
+                                <li set-lan="html:feature_no3_li1">輸入文字腳本及投影片連結
                                     <br>一鍵完成影片
                                 </li>
-                                <li>生成MP4檔</li>
+                                <li set-lan="html:feature_no3_li2">生成MP4檔</li>
                             </ul>
                         </div>
                     </div>
@@ -126,10 +128,10 @@
                     <div class="features-block block-left">
                         <span class="features-num">4</span>
                         <div>
-                            <h3>多語言支援</h3>
+                            <h3 set-lan="html:feature_no4_title">多語言支援</h3>
                             <ul class="features-list">
-                                <li>支援中英文內容</li>
-                                <li>可加入字幕</li>
+                                <li set-lan="html:feature_no4_li1">支援中英文內容</li>
+                                <li set-lan="html:feature_no4_li2">可加入字幕</li>
                             </ul>
                         </div>
                     </div>
@@ -143,23 +145,18 @@
                 </div>
             </div>
             <button class="btn-dark"
-                onclick="window.location.href=`https://video.choozmo.com/register.html`">立即開始</button>
+                onclick="direct()"><lan set-lan="html:try_it_out">立即開始</lan></button>
         </div>
     </section>
 </div>
-
-
-   
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <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.1/dist/js/bootstrap.min.js"
+    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+    crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    
-        <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
-            crossorigin="anonymous"></script>
-        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
-            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
-            crossorigin="anonymous"></script>
-    
-    
+    <script src="js/lan.js"></script>
     <script>
     function debounce(func, wait = 20, immediate = true) {
           var timeout;

BIN
img/Spinner-1s-181px.gif


+ 0 - 0
img/nina黑.webp → img/nina.webp


+ 395 - 0
js/lan.js

@@ -0,0 +1,395 @@
+//設定cookie
+function setCookie(name,value)
+{
+    var Days = 30;
+    var exp = new Date();
+    exp.setTime(exp.getTime() + Days*24*60*60*1000);
+    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
+}
+
+//獲取cookie
+function getCookie(name)
+{
+    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
+    if(arr=document.cookie.match(reg))
+    return unescape(arr[2]);
+    else
+    return null;
+}
+
+// 讀取語系設定
+let lang = localStorage.getItem('lan');
+
+console.log('目前語系設定: ' + lang); // test
+
+if(lang == null) {
+    console.log('未設定語系'); // test
+    
+    // 自動設定語系
+    var userlang = window.navigator.userLanguage || window.navigator.language;
+    userlang = userlang.toLowerCase();
+
+    console.log('userlang: ' + userlang); // test
+
+    if (userlang == 'zh-tw') {
+        console.log('自動設定語系: 繁體中文');
+        lang = 'zh';
+    } else if (userlang == 'en-us') {
+        console.log('自動設定語系: 英文');
+        lang = 'en';
+    } else if (userlang == 'zh-cn') {
+        console.log('自動設定語系: 繁體中文');
+        lang = 'zh';
+    } else {
+        console.log('自動設定語系: 繁體中文');
+        lang = 'zh';
+    }
+}
+
+var zh = {
+    "logleftbox1": "將你的生活、創作 、宣傳做成影片",
+    "logleftbox2": "開始使用 AI Spokesgirl",
+    "make_video" : "影片製作",
+    "make_slides" : "投影影片製作",
+    "make_video_long": "長影片製作",
+    "make_video_eng": "純英文影片製作",
+    "login" : "登入",
+    "login_link" : "立即登入",
+    "user_profile": "會員資料",
+    "logout": "登出",
+    "logout-m": "<i class='fas fa-sign-out-alt text-white me-3'></i>登&emsp;&ensp;出",
+    "en": "English",
+    "zh": "中文",
+    "choose_character": "選擇人物",
+    "usage_intro": "使用說明",
+    "history": "歷史紀錄",
+    "preview_videos": "預覽影片",
+    "video_link":  "影片連結",
+    "video_title": "標題",
+    "p_choose_character": "請選擇人物",
+    "lines": "台詞",
+    "img_link": "影像連結",
+    "processing_progress": "處理進度",
+    "usage_intro": "使用說明",
+    "one_line_to_one_img": "1. 一句台詞請對應提供一個影像連結做為搭配",
+    "sup_img_profile": "2. 影像連結檔案格式支援:",
+    "submit_to_wait": "3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看",
+    "add_eng": "加入英文:",
+    "submit": "送出",
+    "privacy_term": "同意隱私政策及使用條款",
+    "newHere": "還沒有帳號?",
+    "oldHere": "已經有帳號?",
+    "goRegister": "註冊",
+    "goRegister_link": "立即註冊",
+    "pricing" : "早鳥方案",
+    "pricing-m" : "<i class='fas fa-tags me-2'></i>&ensp;早鳥方案",
+    "errorEmail": "請輸入正確E-mail",
+    "errorPsd": "密碼至少為4個字元",
+    "used": "已使用",
+    "left": "未使用",
+    "sec": "秒",
+    "username": "帳號/用戶名稱",
+    "password": "密碼",
+    "resetPsd": "更改密碼",
+    "forgotPsd": "忘記密碼",
+    "details": "查看詳情",
+    "refill": "我要加值",
+    "Createsthtoday": "今天要做甚麼影片呢?",
+    "date": "日期",
+    "video_duration": "影片時間",
+    "slide_link": "SLIDE 連結",
+    "new_pwd": "新密碼",
+    "confirm_pwd": "驗證碼",
+    "pricing_lan": "語言選擇: 中文 | 英文",
+    "pricing_avatars": "多款預設AI代言主播任你選",
+    "pricing_content": "畫面素材支援: 圖檔 | 影檔 | 簡報",
+    "pricing_discount": "限時優惠",
+    "pricing_checkout": "立即查看",
+    "mins": "分鐘",
+    "launch_special": "早鳥方案",
+    "index_li1_1": "支援中英文內容",
+    "index_li1_2": "可加入字幕",
+    "index_li2_1": "無人物肖像權問題",
+    "index_li2_2": "人物表情、動作自然",
+    "index_li2_3": "因應主題,選擇合適人物",
+    "index_li3_1": "可上傳圖片或是影片作為背景",
+    "index_li3_2": "可輸入文字腳本及投影片",
+    "index_action": "想要快速製作影音內容?立即註冊,開始創作!",
+    "follow_us": "關注我們",
+    "contact_name": "集仕多股份有限公司",
+    "address": "新竹縣竹北市復興二路229號9樓之9",
+    "contact_tel": "聯絡電話",
+    "contact_mail": "聯絡信箱",
+    "draft_edit": "編輯",
+    "drafts": "草稿夾",
+    "save_draft_btn": "存為草稿",
+    "upload_file": "上傳檔案",
+    "intro_img": "static/img/intro2.jpg",
+    "no_draft": "目前沒有草稿喔",
+    "trial_title": "想要免費獲得更多時間額度?",
+    "trial_txt": "透過社群分享專屬連結,邀請好友註冊 AI Spokesgirl,凡是好友透過連結註冊成功,您可以免費獲得2分鐘製作額度。",
+    "share": "分享",
+    "close": "關閉",
+    "steps_title": "步驟快速合成影片",
+    "steps_no1": "選擇AI人物",
+    "steps_no2": "輸入腳本文字",
+    "steps_no3": "輸入圖片素材",
+    "try_it_out": "立即開始",
+    "demo_link": "./make_video.html",
+    "usecase_1": "產品介紹",
+    "usecase_2": "教育培訓",
+    "usecase_3": "氣象播報",
+    "usecase_4": "新聞播報",
+    "usecase_5": "個人內容創作",
+    "usecase_6": "觀光導覽",
+    "usecase_7": "展覽導覽",
+    "usecase_8": "廣告行銷",
+    "usecase_9": "機構資訊宣導",
+    "hero_title": "製作影片 一鍵合成",
+    "hero_txt1": "輸入文字素材,即速產生影片",
+    "hero_txt2": "創作影片,不再需要錄影機、演員、麥克風繁雜器材。",
+    "hero_txt3": "大幅省下時間、人力、器材成本。",
+    "feature": "大特色",
+    "feature_no1_title1": "輸入文字腳本及素材",
+    "feature_no1_title2": "一鍵輸出合成影片",
+    "feature_no2_title": "多位AI虛擬人物選擇",
+    "feature_no3_title": "投影片轉製為影片",
+    "feature_no4_title": "多語言支援",
+    "feature_no1_li1": "只需等待數分鐘即產製完成",
+    "feature_no1_li2": "可上傳圖片或是影片作為背景",
+    "feature_no1_li3": "生成MP4檔",
+    "feature_no2_li1": "無人物肖像權問題",
+    "feature_no2_li2": "人物表情、動作自然",
+    "feature_no2_li3": "因應主題,選擇合適人物",
+    "feature_no3_li1": "輸入文字腳本及投影片連結,一鍵完成影片",
+    "feature_no3_li2": "生成MP4檔",
+    "feature_no4_li1": "支援中英文內容",
+    "feature_no4_li2": "可加入字幕",
+    "make_video_hand": "手動製作影片",
+};
+
+var en = {
+    "logleftbox1": "Make your first video for promotion, creation and life today",
+    "logleftbox2": "Let's get started with AI Spokesgirl",
+    "make_video" : "Make Videos",
+    "make_slides" : "Make Videos By Slides",
+    "make_video_long": "Make Long Videos",
+    "make_video_eng": "Make English Video",
+    "login" : "Login",
+    "login_link" : "Login",
+    "user_profile": "User Profile",
+    "logout": "Logout",
+    "en": "English",
+    "zh": "中文",
+    "choose_character": "Choose Character",
+    "usage_intro": "Usage Introduction",
+    "history": "History",
+    "preview_videos": "Preview Videos",
+    "video_link":  "Video Link",
+    "video_title": "Video Title",
+    "p_choose_character": "Choose Character",
+    "lines": "Lines",
+    "img_link": "Image Link",
+    "processing_progress": "Processing Progress",
+    "usage_intro": "Usage Introduction",
+    "one_line_to_one_img": "1. Please Provide an Image Link Corresponding to a Line as a Collocation",
+    "sup_img_profile": "2. Support File Format:",
+    "submit_to_wait": "3. After Clicking Submit, You Will Need To Wait For A Period Of Time For The Production Of The Video. Please Wait Patiently. You Can Check It At The Notification URL When The Production Is Completed.",
+    "add_eng": "Allow English Lines:",
+    "submit": "Submit",
+    "privacy_term": "I Agree to privacy policy and terms of use.",
+    "newHere": "New here?",
+    "oldHere": "Already have an account?",
+    "goRegister": "REGISTER",
+    "goRegister_link": "REGISTER",
+    "pricing" : "Pricing",
+    "errorEmail": "Please enter valid Email format.",
+    "errorPsd": "Passwords must be at least 4 characters long.",
+    "used": "Already Used",
+    "left": "Left",
+    "sec": "Sec",
+    "username": "User Name",
+    "password": "Password",
+    "resetPsd": "Reset Password",
+    "forgotPsd": "Forgot Password",
+    "details": "Details",
+    "refill": "Refill",
+    "Createsthtoday": "Create something today!",
+    "date": "Date",
+    "video_duration": "Duration",
+    "slide_link": "SLIDE Link",
+    "new_pwd": "New Password",
+    "confirm_pwd": "Confirmation Code",
+    "pricing_lan": "Language Options: Ch | Eng",
+    "pricing_avatars": "Over 6 Avatars Available",
+    "pricing_content": "You can upload: images, MP4, slides",
+    "pricing_discount": "Special Discount",
+    "pricing_checkout": "Check it out",
+    "mins": "Minutes",
+    "launch_special": "Launch special",
+    "index_li1_1": "Support english & chinese content",
+    "index_li1_2": "Caption included",
+    "index_li2_1": "Free of portrait rights",
+    "index_li2_2": "Natural facial expression",
+    "index_li2_3": "Choose built-in avatars for your need",
+    "index_li3_1": "Generate videos from text",
+    "index_li3_2": "Upload images, video, slides as backgrounds",
+    "index_action": "Want to make video faster? Sign up to start creating!",
+    "follow_us": "Follow us",
+    "contact_name": "Choozmo Inc.",
+    "address": "Rm. 9, 9F., No. 229, Fuxing 2nd Rd., Zhubei City, Hsinchu County 302052, Taiwan (R.O.C.)",
+    "contact_tel": "Tel",
+    "contact_mail": "Email",
+    "draft_edit": "Edit",
+    "drafts": "Drafts",
+    "save_draft_btn": "Save as Draft",
+    "upload_file": "Upload",
+    "intro_img": "static/img/intro_en.png",
+    "no_draft": "No drafts yet.",
+    "trial_title": "Want to get more minutes?",
+    "trial_txt": "Invite your friends to AI Spokesgirl and for each eligible one that signs up from your referral, we'll give you 2 more minutes free!",
+    "share": "Share:",
+    "close": "Close",
+    "steps_title": "easy steps to create a video",
+    "steps_no1": "Select AI avatar",
+    "steps_no2": "Type in script",
+    "steps_no3": "Upload images or video",
+    "try_it_out": "Try it out",
+    "demo_link": "./make_video_eng.html",
+    "usecase_1": "Product Walkthrough",
+    "usecase_2": "Learning & Development",
+    "usecase_3": "weather report",
+    "usecase_4": "News report",
+    "usecase_5": "Personal Creation",
+    "usecase_6": "Tour",
+    "usecase_7": "Tour",
+    "usecase_8": "Marketing",
+    "usecase_9": "Agencies",
+    "hero_title": "Create AI video at a click!",
+    "hero_txt1": "No more actors, cameras and microphones.",
+    "hero_txt2": "Make a video by typing and clicking in 3 steps.",
+    "hero_txt3": "AI Spokesgirl saves you time and money.",
+    "feature": "Features",
+    "feature_no1_title1": "Type in script",
+    "feature_no1_title2": "Produce video at a click",
+    "feature_no2_title": "Over 6 Avatars Available",
+    "feature_no3_title": "Slides to video",
+    "feature_no4_title": "Language Options: Ch | Eng",
+    "feature_no1_li1": "In minutes, you can get a video.",
+    "feature_no1_li2": "Upload images, video, slides as backgrounds",
+    "feature_no1_li3": "Generate videos from text",
+    "feature_no2_li1": "Free of portrait rights",
+    "feature_no2_li2": "Natural facial expression",
+    "feature_no2_li3": "Choose built-in avatars for your need",
+    "feature_no3_li1": "Type in slide link ",
+    "feature_no3_li2": "Get downloadable MP4 video",
+    "feature_no4_li1": "Support english & chinese content",
+    "feature_no4_li2": "Caption included",
+    "make_video_hand": "Make Video",
+};
+
+function switchLanContent(val){
+    $('[set-lan]').each(function(){
+        var me = $(this);
+        var a = me.attr('set-lan').split(':');
+        var p = a[0];   //文字放置位置
+        var m = a[1];   //文字標示
+        
+        //用虎選擇語言後保存在cookie中,這裡讀取cooikes的語言版本
+        // var lan = getCookie('lan');
+       // console.log(lan);
+        //選取語言文字
+        switch(val){
+            case 'zh':
+                var t = zh[m];  
+                break;
+            case 'en':
+                var t = en[m];
+                break;
+            default:
+                var t = zh[m];
+        }
+    
+        //所選語言沒有就換
+        if(t==undefined) t = en[m];
+        if(t==undefined) t = zh[m];
+    
+        if(t==undefined) return true;   //都沒有就跳出
+    
+        //文字放置位置有(html,val等,可以自己添加)
+        switch(p){
+            case 'html':
+                me.html(t);
+                break;
+            case 'placeholder':
+                me.attr('placeholder', t);
+                console.log("placeholder");
+            case 'val':
+            case 'value':
+                me.val(t);
+                break;
+            case 'img':
+                me.attr('src', t);
+                break;
+            case 'href':
+                me.attr('href', t);
+            default:
+                me.html(t);
+        }
+    
+    });
+}
+
+changeLang(lang);
+function changeLang(val) {
+    localStorage.setItem('lan', `${val}`);
+    // setCookie('lan', val);
+    switchLanContent(val);
+}
+
+// 4. 轉換
+function changeLan(val) {
+    var val = val.value;
+    console.log(`val: ${val}`);
+    localStorage.setItem('lan', `${val}`);
+    // setCookie('lan', val);
+    switchLanContent(val);
+}
+
+
+
+// js裡面的轉換
+function get_lan(m)
+{
+    //獲取文字
+    var lan = getCookie('lan');     //語言版本
+    //選取語言文字
+    switch(lan){
+        case 'zh':
+            var t = zh[m];
+            break;
+        case 'hk':
+            var t = hk[m];
+            break;
+        default:
+            var t = en[m];
+    }
+
+    //如果沒有找到就轉換其他語言
+    if(t==undefined) t = zh[m];
+    if(t==undefined) t = en[m];
+    if(t==undefined) t = hk[m];
+
+    if(t==undefined) t = m; //如果還是沒有就直接用標示
+
+    return t;
+}
+
+function direct() {
+    console.log(lang);
+    if(lang == 'en') {
+        window.location.href = './make_video_eng.html';
+    } else {
+        window.location.href = './make_video.html';
+    }
+}

+ 48 - 61
make_video.html

@@ -148,43 +148,43 @@
                             <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>              
                             <option value="7">Peggy</option>
                             <option value="8">Stacy</option>
-                            <option value="10">Nina</option>
+                            <option value="10">Nina</option>
                             <option value="11">Summer韓小夏</option>
                             <option value="12">Jocelyn</option>
                             <option value="13">Angela</option>
                         </select>
-                        <div class="owl-carousel owl-theme d-flex row">
-                            <div class="card item col" data-avatar="Peggy" data-img="peggy">
+                        <div class="d-flex row">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Peggy" data-img="peggy">
                                 <div class="imgfr"><img src="img/peggy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Peggy</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Stacy" data-img="stacy">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Stacy" data-img="stacy">
                                 <div class="imgfr"><img src="img/stacy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Stacy</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Nina" data-img="nina">
-                                <div class="imgfr"><img src="img/nina.webp" class="card-img-top" alt="..."></div>
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Nina" data-img="nina">
+                                <div class="imgfr"><img src="img/nina.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
-                                    <h5 class="card-title">Nina</h5>
+                                    <h5 class="card-title">Nina</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Summer韓小夏" data-img="summer韓小夏">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Summer韓小夏" data-img="summer韓小夏">
                                 <div class="imgfr"><img src="img/summer韓小夏.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Summer韓小夏</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Jocelyn" data-img="Jocelyn">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Jocelyn" data-img="Jocelyn">
                                 <div class="imgfr"><img src="img/Jocelyn.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Jocelyn</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Angela" data-img="Angela">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Angela" data-img="Angela">
                                 <div class="imgfr"><img src="img/Angela.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Angela</h5>
@@ -342,7 +342,7 @@
         data.append('file', files[0]);
         // append other variables to data if you want: data.append('field_name_x', field_value_x);
         $(this).next().text('');
-        $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+        $(this).next().html('<img src="img/Spinner-1s-181px.gif">');
         $.ajax({
           type: 'POST',
           processData: false, // important
@@ -395,12 +395,10 @@
         if ($('#multiLang').prop("checked")) {multiLang = 1;}
         dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
         objstr = JSON.stringify(dataOBJ);
-        console.log(dataOBJ)
-        jwt_token =  get_jwt_token()
+        console.log(dataOBJ);
         var xhr = new XMLHttpRequest();
-        xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video");
+        xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_noAuth");
         xhr.setRequestHeader("accept", "application/json");
-        xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
         xhr.setRequestHeader("Content-Type", "application/json");
         xhr.onreadystatechange = function () {
           if (xhr.readyState === 4) {
@@ -427,14 +425,13 @@
       function openNav() {
         document.getElementById("mySidenav").style.width = "250px";
         document.querySelector('.loader').style.display = "block";
-        let jwt_token = get_jwt_token();
         axios({
           method: 'post',
-          url: 'https://www.choozmo.com:8887/history_input',
+          url: 'https://www.choozmo.com:8887/history_input_noAuth',
           headers: { 
-              'accept': 'application/json',
-              'Authorization': `Bearer ${jwt_token}`
-          }
+              'accept': 'application/json'
+          },
+          data: ''
         }).then(res => {
           console.log(res.data);
           loaded_data = res.data;
@@ -507,12 +504,6 @@
         return XHRstring
       }
 
-      function get_jwt_token(){
-        jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
-        if(!jwt_raw) {return}
-        return jwt_raw.split('=')[1];
-      }
-
       function direct(id) {
         location.href = `make_video.html?id=${id}`;
       }
@@ -575,15 +566,11 @@
           imguploadlabel.setAttribute('for', `img${i + 1}`);
           imguploadlabel.classList.add('upload-btn');
           imguploadlabel.textContent = '上傳檔案';
-          if(lan == 'en') {
-            imguploadlabel.textContent = 'Upload';
-          }
           imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+          $('input[type=file]').on('change', prepareUpload);
           imgInputs.appendChild(imguploadlabel);
         }
-        setTimeout(() => {
-          JsLoadingOverlay.hide();
-        }, 0);
+
       }
 
       getpathId();
@@ -594,14 +581,13 @@
       }
 
       function getData() {
-        let jwt_token = get_jwt_token();
         axios({
           method: 'post',
-          url: 'https://www.choozmo.com:8887/history_input',
+          url: 'https://www.choozmo.com:8887/history_input_noAuth',
           headers: { 
-              'accept': 'application/json',
-              'Authorization': `Bearer ${jwt_token}`
-          }
+              'accept': 'application/json'
+          },
+          data: ''
         }).then(res => {
           loaded_data = res.data;
           console.log(loaded_data);
@@ -624,6 +610,7 @@
       }
 
       initial();
+      getData();
 
       var addbtn = document.querySelector(".add");
       var addimgbtn = document.querySelector(".addimg");
@@ -652,30 +639,30 @@
       }
 
       function renderimgBlock(i) {
-  var imginput = document.createElement("input");
-  imginput.setAttribute('type', 'text');
-  imginput.setAttribute('name', `m${i}`);
-  imginput.classList.add('imgsrc', `imgsrc${i}`);
-  imginput.value = "";
-  imginput.setAttribute('placeholder', `${i}`);
-  imgInputs.appendChild(imginput);
-
-  var imgupload = document.createElement("input");
-  imgupload.setAttribute('id', `img${i}`);
-  imgupload.setAttribute('type', `file`);
-  imgupload.classList.add('img_uploader', 'img_up');
-  imgInputs.appendChild(imgupload);
-  var imguploadlabel = document.createElement("label");
-  imguploadlabel.setAttribute('for', `img${i}`);
-  imguploadlabel.classList.add('upload-btn');
-  imguploadlabel.textContent = '上傳檔案';
-  // if(lan == 'en') {
-  //   imguploadlabel.textContent = 'Upload';
-  // }
-  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
-  imgInputs.appendChild(imguploadlabel);
-  $('input[type=file]').on('change', prepareUpload);
-}
+        var imginput = document.createElement("input");
+        imginput.setAttribute('type', 'text');
+        imginput.setAttribute('name', `m${i}`);
+        imginput.classList.add('imgsrc', `imgsrc${i}`);
+        imginput.value = "";
+        imginput.setAttribute('placeholder', `${i}`);
+        imgInputs.appendChild(imginput);
+
+        var imgupload = document.createElement("input");
+        imgupload.setAttribute('id', `img${i}`);
+        imgupload.setAttribute('type', `file`);
+        imgupload.classList.add('img_uploader', 'img_up');
+        imgInputs.appendChild(imgupload);
+        var imguploadlabel = document.createElement("label");
+        imguploadlabel.setAttribute('for', `img${i}`);
+        imguploadlabel.classList.add('upload-btn');
+        imguploadlabel.textContent = '上傳檔案';
+        // if(lan == 'en') {
+        //   imguploadlabel.textContent = 'Upload';
+        // }
+        imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+        imgInputs.appendChild(imguploadlabel);
+        $('input[type=file]').on('change', prepareUpload);
+      }
 
     </script>
 </body>

+ 12 - 12
make_video_eng.html

@@ -148,7 +148,7 @@
                             <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>Choose Character</option>              
                             <option value="7">Peggy</option>
                             <option value="8">Stacy</option>
-                            <option value="10">Nina</option>
+                            <option value="10">Nina</option>
                             <option value="11">Summer韓小夏</option>
                             <option value="12">Jocelyn</option>
                             <option value="13">Angela</option>
@@ -166,10 +166,10 @@
                                     <h5 class="card-title">Stacy</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Nina" data-img="nina">
-                                <div class="imgfr"><img src="img/nina.webp" class="card-img-top" alt="..."></div>
+                            <div class="card item col" data-avatar="Nina" data-img="nina">
+                                <div class="imgfr"><img src="img/nina.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
-                                    <h5 class="card-title">Nina</h5>
+                                    <h5 class="card-title">Nina</h5>
                                 </div>
                             </div>
                             <div class="card item col" data-avatar="Summer韓小夏" data-img="summer韓小夏">
@@ -347,7 +347,7 @@
         data.append('file', files[0]);
         // append other variables to data if you want: data.append('field_name_x', field_value_x);
         $(this).next().text('');
-        $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+        $(this).next().html('<img src="img/Spinner-1s-181px.gif">');
         $.ajax({
           type: 'POST',
           processData: false, // important
@@ -360,15 +360,15 @@
             console.log(jsonData.msg);
             $(this).prev().val(jsonData.msg);
             event.target.nextSibling.innerHTML = '';
-            event.target.nextSibling.textContent = '上傳檔案';
+            event.target.nextSibling.textContent = 'Upload';
             //console.log($(this).next());
             //$(this).next().html('上傳檔案');
             //$(this).next().text('上傳檔案');
           },
           error: function (error) {
             event.target.nextSibling.innerHTML = '';
-            event.target.nextSibling.textContent = '上傳檔案';
-            alert('圖片錯誤');
+            event.target.nextSibling.textContent = 'Upload';
+            alert('Error');
           }
         });
       }
@@ -447,14 +447,13 @@
       function openNav() {
         document.getElementById("mySidenav").style.width = "250px";
         document.querySelector('.loader').style.display = "block";
-        let jwt_token = get_jwt_token();
         axios({
           method: 'post',
-          url: 'https://www.choozmo.com:8887/history_input',
+          url: 'https://www.choozmo.com:8887/history_input_noAuth',
           headers: { 
               'accept': 'application/json',
-              'Authorization': `Bearer ${jwt_token}`
-          }
+          },
+          data: ''
         }).then(res => {
           console.log(res.data);
           loaded_data = res.data;
@@ -593,6 +592,7 @@
           imguploadlabel.setAttribute('for', `img${i + 1}`);
           imguploadlabel.classList.add('upload-btn');
           imguploadlabel.textContent = 'Upload';
+          $('input[type=file]').on('change', prepareUpload);
           imgInputs.appendChild(imguploadlabel);
         }
 

+ 26 - 13
steps.html

@@ -14,16 +14,32 @@
 </head>
 
 <body>
+    <div class="ai-spokesgril">
+        <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
+            href="./index.html"><img class="me-3" style="width: 60px;" src="./img/home-button.png" alt="">AI
+            Spokesgirl</a>
+        <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    中/En
+                </a>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                </ul>
+            </li>
+        </ul>
+    </div>
     <section class="sec-steps my-5">
       <div class="container text-center">
-        <h2 class="steps-title mb-5"><strong>3</strong>步驟快速合成影片</h2>
+        <h2 class="steps-title mb-5"><strong>3</strong><lan set-lan="html:steps_title">步驟快速合成影片</lan></h2>
         <div class="row">
             <div class="col-12 col-sm-4 my-4">
                 <div class="steps-block">
                     <div class="steps-imgfr" style="background-image: url('img/aigirls.png');"></div>
                     <div class="steps-txt">
                         <span>1</span>
-                        <h3 class="steps-sub">選擇AI人物</h3>
+                        <h3 class="steps-sub" set-lan="html:steps_no1">選擇AI人物</h3>
                     </div>
                 </div>
             </div>
@@ -32,7 +48,7 @@
                     <div class="steps-imgfr" style="background-image: url('img/textgrp.png');"></div>
                     <div class="steps-txt">
                         <span>2</span>
-                        <h3 class="steps-sub">輸入腳本文字</h3>
+                        <h3 class="steps-sub" set-lan="html:steps_no2">輸入腳本文字</h3>
                     </div>
                 </div>
             </div>
@@ -41,12 +57,12 @@
                     <div class="steps-imgfr" style="background-image: url('img/imagesgrp.png');"></div>
                     <div class="steps-txt">
                         <span>3</span>
-                        <h3 class="steps-sub">輸入圖片素材</h3>
+                        <h3 class="steps-sub" set-lan="html:steps_no3">輸入圖片素材</h3>
                     </div>
                 </div>
             </div>
         </div>
-        <a class="btn-dark" href="./make_video.html">立即開始</a>
+        <a class="btn-dark" onclick="direct()"><lan set-lan="html:try_it_out">立即開始</lan></a>
         <div class="row my-5">
           <div class="col-12">
             <div class="step-videofr">
@@ -59,17 +75,14 @@
       </div>
 
     </section>
-
-
-
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+    <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.1.1/dist/js/bootstrap.min.js"
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="js/lan.js"></script>
 </body>
 
 </html>

+ 53 - 0
style.css

@@ -452,6 +452,15 @@ p {
 /* sec-features */
 .ai-spokesgril {
   margin-top: 50px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
 }
 
 .sec-features {
@@ -674,6 +683,7 @@ p {
   left: 3.5rem;
 }
 
+<<<<<<< HEAD
 .video-int .video-box {
   margin-top: 30px;
 }
@@ -683,5 +693,48 @@ p {
   width: 250px;
   background: #fff;
   font-size: 32px;
+=======
+.lan-switch {
+  outline: none;
+  border: none;
+  background-color: white;
+}
+
+.dropdown-menu[data-bs-popper] {
+  right: unset;
+  left: 0;
+}
+
+.navbar-nav {
+  float: right;
+  list-style: none;
+}
+
+.navbar-nav .nav-link {
+  font-size: 2rem;
+  text-decoration: none;
+  padding: .8rem 0;
+  color: black;
+}
+
+@media (max-width: 992px) {
+  .sec-features .row {
+    margin: 5rem 0;
+  }
+  .sec-features .features-col {
+    position: relative;
+    height: 25vh;
+  }
+  .sec-features .features-col .features-block {
+    left: 2rem;
+    top: 1rem;
+  }
+  .sec-features .row .d-md-block {
+    display: none;
+  }
+  .sec-features .row .d-block {
+    display: block;
+  }
+>>>>>>> 6a150bc6ff0d85926a75f10d7fa988cabf1622d2
 }
 /*# sourceMappingURL=style.css.map */

+ 3 - 1
style.scss

@@ -149,7 +149,6 @@ p{
     
   }
 
-
 }
 
 .bg-active{
@@ -415,6 +414,9 @@ h6,
 /* sec-features */
 .ai-spokesgril{
   margin-top: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .sec-features {

+ 4 - 4
styleMV.css

@@ -179,7 +179,7 @@ body {
 
 .card-title {
   font-family: "Montserrat", sans-serif;
-  font-size: 1rem;
+  font-size: .95em;
 }
 
 .strong {
@@ -286,11 +286,11 @@ body {
   border-radius: 3px;
   -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
           box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
-  padding: 20px 30px;
+  padding: 20px 20px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 80%;
-  margin: 3rem 10%;
+  width: 90%;
+  margin: 3rem 5%;
   /*stacking fieldsets above each other*/
   position: relative;
 }

+ 30 - 16
usecases.html

@@ -14,61 +14,77 @@
 </head>
 
 <body>
+    <div class="ai-spokesgril">
+      <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
+          href="./index.html"><img class="me-3" style="width: 60px;" src="./img/home-button.png" alt="">AI
+          Spokesgirl</a>
+      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
+          <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  中/En
+              </a>
+              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                  <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+              </ul>
+          </li>
+      </ul>
+    </div>
     <section class="sec-usecase">
       <div class="container">
           <div class="row my-5">
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 產品介紹</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_1">產品介紹</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/教育.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 教育培訓</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_2">教育培訓</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 氣象播報</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_3">氣象播報</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 新聞播報</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_4">新聞播報</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/內容創作.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 個人內容創作</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_5">個人內容創作</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 觀光導覽</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_6">觀光導覽</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 展覽導覽</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_7">展覽導覽</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 廣告行銷</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_8">廣告行銷</lan></h3>
                 </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
                     <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');"></div>
-                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> 機構資訊宣導</h3>
+                    <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_9">機構資訊宣導</lan</h3>
                 </div>
               </div>
           </div>
@@ -76,16 +92,14 @@
 
     </section>
 
-
-
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+    <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.1.1/dist/js/bootstrap.min.js"
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="js/lan.js"></script>
 </body>
 
 </html>