lan switch

html/index_eng.html

@@ -53,17 +53,29 @@
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0">
               <li class="nav-item">
-                <a class="nav-link active text-white" aria-current="page" href="pricing.html">Pricing</a>
+                <a class="nav-link active text-white" aria-current="page" href="pricing.html" set-lan="html:pricing">Pricing</a>
+              </li>
+              <li class="nav-item dropdown me-3 me-lg-1">
+                <a class="nav-link dropdown-toggle text-white" 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-swtich" aria-current="page" set-lan="html:en"
+                            onclick="changeLan(this);window.location.reload();" value="en">English</button></li>
+                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                            onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+                </ul>
               </li>
               <!-- <li class="nav-item">
                 <a class="nav-link active btn-login text-white" aria-current="page" href="login.html">Login</a>
               </li> -->
               <li class="nav-item">
-                <a class="nav-link btn-userProfile text-white" aria-current="page" href="user_profile2.html">User
+                <a class="nav-link btn-userProfile text-white" aria-current="page" href="user_profile2.html" set-lan="html:user_profile">User
                   Profile</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link btn-logout text-white" aria-current="page">Log Out</a>
+                <a class="nav-link btn-logout text-white" aria-current="page" set-lan="html:logout">Log Out</a>
               </li>
             </ul>
           </div>
@@ -87,44 +99,58 @@
             </div>
             <div class="userName"></div>
             <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">
-            <p class="text-white my-3 text-center">Create something today!</p>
+            <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">Create something today!</p>
+            <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+              <a class="nav-link btn-gocreate text-white col-6 btn-makev" aria-current="page"
+                  href="./make_video2.html" set-lan="html:make_video">影片製作</a>
+              <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                  href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+            </div>
             <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
-              <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html">Make
+              <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">Make
                 English<br>Videos</a>
               <a class="nav-link btn-gocreate text-white col-6" aria-current="page"
-                href="./make_video_slide_eng.html">Make Videos <br>By Slides</a>
+                href="./make_video_slide_eng.html" set-lan="html:make_slides">Make Videos <br>By Slides</a>
             </div>
             <hr>
             <ul class="nav-list ps-0">
               <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal" data-bs-target="#howto"><i
                   class="fas fa-book-open me-2"></i>
-                <lan>Usage Introduction</lan>
+                <lan set-lan="html:usage_intro">Usage Introduction</lan>
               </li>
               <a style="text-decoration: none;color:white;" href="./user_profile2.html">
                 <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal">
                   <i class="fas fa-user me-2"></i>
-                  <lan>User Profile</lan>
+                  <lan set-lan="html:user_profile">User Profile</lan>
                 </li>
               </a>
               <li class="nav-list-item pb-1 text-start ps-3" data-bs-toggle="modal" data-bs-target="#history"
                 onclick="openNav()">
                 <i class="fas fa-history me-2"></i>
-                <lan>History</lan>
+                <lan set-lan="html:history">History</lan>
               </li>
               <div class="Mobile-nav">
                 <hr>
                 <li class="nav-item text-start">
-                  <a style="font-size: 18px;" class="nav-link active text-white" aria-current="page" href="pricing.html"><i class='fas fa-tags me-2'></i>Pricing</a>
+                  <a style="font-size: 18px;" class="nav-link active text-white" aria-current="page" href="pricing.html"><lan set-lan="html:pricing-m">Pricing</lan></a>
                 </li>
                 <li class="nav-item text-start">
-                  <a style="font-size: 18px;" class="nav-link active btn-login text-white" aria-current="page" href="login.html"><i class="fas fa-sign-in-alt text-white me-3"></i>Login</a>
+                  <a style="font-size: 18px;" class="nav-link active btn-login text-white" aria-current="page" href="login.html"><i class="fas fa-sign-in-alt text-white me-3"></i><lan set-lan="html:login">Login</lan></a>
                 </li>
                 <!-- <li class="nav-item text-start">
                   <a style="font-size: 18px;" class="nav-link btn-userProfile text-white" aria-current="page" href="user_profile2.html">User
                     Profile</a>
                 </li> -->
+                <div id="lang-manu">
+                  <li><button class="nav-link lan-swtich bg-transparent text-white border-0 mx-auto" aria-current="page"
+                          set-lan="html:en" onclick="changeLan(this)"
+                          value="en">English</button></li>
+                  <li><button class="nav-link lan-switch bg-transparent text-white border-0 mx-auto" aria-current="page"
+                          set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button>
+                  </li>
+                </div>
                 <li class="nav-item text-start">
-                  <a style="font-size: 18px;" class="nav-link btn-logout text-white" aria-current="page"><i class='fas fa-sign-out-alt text-white me-3'></i>Log Out</a>
+                  <a style="font-size: 18px;" class="nav-link btn-logout text-white" aria-current="page"><i class='fas fa-sign-out-alt text-white me-3'></i><lan set-lan="html:logout">Log Out</lan></a>
                 </li>
                 
             </div>
@@ -153,19 +179,19 @@
             <div class="linker__box">
               <p>Preview video</p>
               <i class="fas fa-link"></i>
-              <a id='linker' style="display: none;" class="ms-2">Video link</a>
+              <a id='linker' style="display: none;" class="ms-2" set-lan="html:preview_videos">Video link</a>
             </div>
             <!-- fieldsets -->
             <fieldset>
-              <h3 class="fs-subtitle">Video Title<img class="ms-1" src="static/img/question.png" alt=""
+              <h3 class="fs-subtitle"><lan set-lan="html:video_title">標題</lan><img class="ms-1" src="static/img/question.png" alt=""
                   data-bs-toggle="tooltip" data-bs-placement="right" title="The title of your video"></h3>
               <input id=title type="text" name='t1' class='title_new' placeholder="Video Title" /> <br />
             </fieldset>
             <fieldset>
-              <h3 class="fs-subtitle">Choose Character<img class="ms-1" src="static/img/question.png" alt=""
+              <h3 class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt=""
                   data-bs-toggle="tooltip" data-bs-placement="right" title="The spokesgirl of your video"></h3>
               <select id="avatar" class='avatar'>
-                <option value="Choose Character" selected="selected" disabled>Choose Character</option>
+                <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option> 
                 <option value="7">Peggy</option>
                 <option value="8">Stacy</option>
                 <option value="11">Summer</option>
@@ -248,14 +274,14 @@
               <span class="add-subline">+</span>
             </fieldset> -->
             <fieldset id='imgSrc' style="box-shadow: none;-webkit-box-shadow: none; padding: 0;">
-              <h3 class="fs-subtitle" style="display: inline-block;">Image Links<img class="ms-1"
+              <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:content">內容素材</lan><img class="ms-1"
                   src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right"
                   title="Supported File Formats: png, jpg, mp4"></h3><br />
               <div class="img-inputTest mt-3 input_eng">
                 
               </div>
               <span class="addsec">+</span>
-              <input id="checker" type="button" name="next" class="next action-button" value="Submit" />
+              <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" />
             </fieldset>
           </form>
           <!-- <div style="width: 80%;margin: 0 auto;"><iframe src="http://www.choozmo.com:8168/ai_anchor_video/16250306886652043.mp4" frameborder="0" style="width: 100%;height: 400px;"></iframe></div> -->
@@ -274,12 +300,9 @@
           <div class="modal-body">
             <div class="modal-terms">
               <ol class="ps-0">
-                <li>1. Please Provide an Image Link Corresponding to a Line as a Collocation</li>
-                <li>2. Supported File Format:<stong class="strong">.png, jpg, .mp4</stong>
-                </li>
-                <li>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.</li>
+                <li set-lan="html:one_line_to_one_img">1. 一句台詞請對應提供一個影像連結做為搭配</li>
+                <li><lang set-lan="html:sup_img_profile">2. 影像連結檔案格式支援：</lang><stong class="strong">.png, jpg, .mp4</stong></li>
+                <li set-lan="html:submit_to_wait">3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看</li>
               </ol>
             </div>
           </div>

html/make_video2.html

@@ -189,7 +189,7 @@
                                         <i class="fas fa-globe text-white me-3"></i>中/En<i id="lang-arrow" class="fas fa-angle-down text-white ms-2"></i>
                                     </a>
                                 </li>
-                                <div id="lang-manu">
+                                <div id="lang-manu" class="d-block">
                                         <li><button class="nav-link lan-swtich bg-transparent text-white border-0 mx-auto" aria-current="page"
                                                 set-lan="html:en" onclick="changeLan(this)"
                                                 value="en">English</button></li>
@@ -290,7 +290,7 @@
                         <fieldset>
                             <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            
                             <select id="avatar" class='avatar'>
-                                <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>              
+                                <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option>              
                                 <option value="7">Peggy</option>
                                 <option value="8">Stacy</option>
                                 <option value="11">Summer韓小夏</option>

html/make_video_slide_eng.html

@@ -108,35 +108,41 @@
                         </div>
                         <div class="userName"></div>
                         <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">
-                        <p class="text-white my-3 text-center">Create something today!</p>
+                        <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">Create something today!</p>
                         <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
-                            <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html">Make
+                          <a class="nav-link btn-gocreate text-white col-6 btn-makev" aria-current="page"
+                              href="./make_video2.html" set-lan="html:make_video">影片製作</a>
+                          <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                              href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                        </div>
+                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                            <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">Make
                                 English<br>Videos</a>
                             <a class="nav-link btn-gocreate text-white col-6" aria-current="page"
-                                href="./make_video_slide_eng.html">Make Videos <br>By Slides</a>
+                                href="./make_video_slide_eng.html" set-lan="html:make_slides">Make Videos <br>By Slides</a>
                         </div>
                         <hr>
                         <ul class="nav-list ps-0">
                             <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal" data-bs-target="#howto"><i
                                 class="fas fa-book-open me-2"></i>
-                              <lan>Usage Introduction</lan>
+                              <lan set-lan="html:usage_intro">Usage Introduction</lan>
                             </li>
                             <a style="text-decoration: none;color:white;" href="./user_profile2.html">
                               <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal">
                                 <i class="fas fa-user me-2"></i>
-                                <lan>User Profile</lan>
+                                <lan set-lan="html:user_profile">User Profile</lan>
                               </li>
                             </a>
                             <li class="nav-list-item pb-1 text-start ps-3" data-bs-toggle="modal" data-bs-target="#history"
                               onclick="openNav()">
                               <i class="fas fa-history me-2"></i>
-                              <lan>History</lan>
+                              <lan set-lan="html:history">History</lan>
                             </li>
                             <div class="Mobile-nav">
                               <hr>
                               <li class="nav-item text-start">
-                                <a style="font-size: 18px;" class="nav-link active text-white" aria-current="page" href="pricing.html"><i class='fas fa-tags me-2'></i>Pricing</a>
-                              </li>
+                                <a style="font-size: 18px;" class="nav-link active text-white" aria-current="page" href="pricing.html">Pricing</lan></a>
+                              </li><lan set-lan="html:pricing-m"
                               <!-- <li class="nav-item text-start">
                                 <a style="font-size: 18px;" class="nav-link active btn-login text-white" aria-current="page" href="login.html"><i class="fas fa-sign-in-alt text-white me-3"></i>Login</a>
                               </li> -->
@@ -145,7 +151,7 @@
                                   Profile</a>
                               </li> -->
                               <li class="nav-item text-start">
-                                <a style="font-size: 18px;" class="nav-link btn-logout text-white" aria-current="page"><i class='fas fa-sign-out-alt text-white me-3'></i>Log Out</a>
+                                <a style="font-size: 18px;" class="nav-link btn-logout text-white" aria-current="page" set-lan="html:logout-m">Log Out</a>
                               </li>
                               
                           </div>
@@ -174,19 +180,19 @@
                 <div>
                     <form id="msform">
                         <div class="linker__box">
-                            <p>Preview Video</p>
+                            <p set-lan="html:preview_videos">Preview Video</p>
                             <i class="fas fa-link"></i>
-                            <a id='linker' style="display: none;" class="ms-2">Video link</a>
+                            <a id='linker' style="display: none;" class="ms-2" set-lan="html:video_link">Video link</a>
                         </div>
                         <!-- fieldsets -->
                         <fieldset>
-                            <h3 class="fs-subtitle"><lan">SLIDE Link</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="請輸入Google Slides連結 Google Slides Link"></h3>
+                            <h3 class="fs-subtitle"><lan set-lan="html:slide_link">SLIDE Link</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="請輸入Google Slides連結 Google Slides Link"></h3>
                             <input id=slide_raw_url type="text" name='t1' class='title_new' value="" placeholder="SLIDE Link (Slides must be Shared With Everyone)"/>
                             <!-- <label for="myCheck">Allow English Lines::</label> 
                             <input type="checkbox" id="multiLang" > <br/> -->
                         </fieldset>
                         <fieldset>
-                            <h3 class="fs-subtitle">Choose Character<img class="ms-1" src="static/img/question.png" alt=""
+                            <h3 class="fs-subtitle" ><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt=""
                                 data-bs-toggle="tooltip" data-bs-placement="right" title="The spokesgirl of your video"></h3>
                             <select id="avatar" class='avatar'>
                               <option value="Choose Character" selected="selected" disabled>Choose Character</option>
@@ -257,7 +263,7 @@
                               </div>
                             </div>
                           </fieldset>
-                        <input id="send_slide" type="button" name="next" class="action-button" value="Submit" />
+                        <input id="send_slide" type="button" name="next" class="action-button" set-lan="value:submit" />
                     </form>
                     <!-- <div style="width: 80%;margin: 0 auto;"><iframe src="http://www.choozmo.com:8168/ai_anchor_video/16250306886652043.mp4" frameborder="0" style="width: 100%;height: 400px;"></iframe></div> -->
                 </div>
@@ -278,15 +284,16 @@
                 <div class="modal-dialog">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <h5 class="modal-title" id="staticBackdropLabel">Usage Introduction</h5>
+                            <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:usage_intro">Usage Introduction</h5>
                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>
                         <div class="modal-body">
                             <div class="modal-terms">
                                 <ol class="ps-0">
-                                    <li>1. Please Provide an Image Link Corresponding to a Line as a Collocation</li>
-                                    <li>2. Supported File Format:<stong class="strong">.png, jpg, .mp4</stong></li>
-                                    <li>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.</li>
+                                  <li set-lan="html:slide_howto_use">1. 投影片將作為背景圖，備註中的文字則為虛擬主播的講稿內容。</li>
+                                  <li><lang set-lan="html:sup_img_profile">2. 影像連結檔案格式支援：</lang><stong class="strong">.png, jpg, .mp4</stong>
+                                  </li>
+                                  <li set-lan="html:submit_to_wait">3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看</li>
                                 </ol>
                             </div>
                         </div>

html/script_eng.js

@@ -46,6 +46,27 @@ function loginControl() {
 
 loginControl();
 
+// Check lan
+let lan = localStorage.getItem('lan');
+
+$('.dropdown-toggle').click(() => {
+  lan = localStorage.getItem('lan');
+  checkLan();
+});
+
+checkLan();
+
+function checkLan() {
+  if(lan == 'en') {
+    $('.btn-makev').css('display', 'none');
+    $('.btn-makelong').css('display', 'none');
+  } else {
+    $('.btn-makev').css('display', 'block');
+    $('.btn-makelong').css('display', 'block');
+    $('.title_new').attr('placeholder', '標題')
+  }
+}
+
 
 var client_id = Date.now();
 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
@@ -440,6 +461,9 @@ function renderInputSec(i) {
   subtitleinput.classList.add('subsrc', `subsrc${i}`);
   subtitleinput.value = "";
   subtitleinput.setAttribute('placeholder', `Subtitle`);
+  if(lan == 'zh') {
+    subtitleinput.setAttribute('placeholder', '副標題');
+  }
   input_sec.appendChild(subtitleinput);
 
   // text input
@@ -449,6 +473,9 @@ function renderInputSec(i) {
   txtinput.classList.add('txtsrc', `txtsrc${i}`);
   txtinput.value = "";
   txtinput.setAttribute('placeholder', `Line`);
+  if(lan == 'zh') {
+    txtinput.setAttribute('placeholder', `台詞`);
+  }
   input_sec.appendChild(txtinput);
 
   // img url input
@@ -457,7 +484,10 @@ function renderInputSec(i) {
   imginput.setAttribute('name', `m${i}`);
   imginput.classList.add('imgsrc', `imgsrc${i}`);
   imginput.value = "";
-  imginput.setAttribute('placeholder', 'https://example.com/4VKBo9w.png');
+  imginput.setAttribute('placeholder', 'Type in image link or upload image');
+  if(lan == 'zh') {
+    imginput.setAttribute('placeholder', '輸入圖片網址或上傳圖片');
+  }
   img_box.appendChild(imginput);
 
   // img upload input

html/static/lan.js

@@ -74,6 +74,7 @@ var zh = {
     "video_title": "標題",
     "p_choose_character": "請選擇人物",
     "lines": "台詞",
+    "content": "內容素材",
     "img_link": "影像連結",
     "processing_progress": "處理進度",
     "usage_intro": "使用說明",
@@ -188,6 +189,7 @@ var en = {
     "video_title": "Video Title",
     "p_choose_character": "Choose Character",
     "lines": "Lines",
+    "content": "Content",
     "img_link": "Image Link",
     "processing_progress": "Processing Progress",
     "usage_intro": "Usage Introduction",