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

OpenshotService/openshot_video_generator.py

@@ -793,7 +793,9 @@ def anchor_video_v2(name_hash,name,text_content, image_urls,multiLang,avatar,fre
         anchor_list[idx].Open()
         anchor_clip_list[idx] = video_photo_clip(vid=anchor_list[idx],layer=4,scale_x=0.65,scale_y=0.65,
                 location_x=0.35,location_y=0.25,position=main_timer, end=clip_duration,ck=ck_anchor,audio=False)
-        t.AddClip(anchor_clip_list[idx])
+        if avatar==18:
+            t.AddClip(anchor_clip_list[idx])
+        audio_list[idx].Close()
 
         img_list[idx] = openshot.FFmpegReader(dir_photo+name_hash+'/'+p)
         img_list[idx].Open()
@@ -811,7 +813,7 @@ def anchor_video_v2(name_hash,name,text_content, image_urls,multiLang,avatar,fre
 
         img_list[idx].Close()
         anchor_list[idx].Close()
-        audio_list[idx].Close()
+        
             
         sub_img_list[idx] = [None] * len(sub_list[idx])
         sub_clip_list[idx] = [None] * len(sub_list[idx])

html/index.html

@@ -131,7 +131,7 @@
                                     href="user_profile2.html" set-lan="html:user_profile">會員資料</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                                <a class="nav-link btn-logout text-white" aria-current="page" set-lan="html:logout">登出</a>
                             </li>
                         </ul>
                         <span class="menu-bar ms-auto" style="font-size: 32px;"><i

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>
@@ -82,49 +94,63 @@
               <i class="fas fa-times text-white me-3 mt-3"></i>
           </div>
             <div class="text-start">
-              <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-3 pt-0" aria-current="page"
-                  href="index.html">AI Spokesgirl</a></h2>
+              <h2 class="fw-bold ps-0" href="./user_profile2.html"><a class="nav-link active ps-3 pt-0" aria-current="page"
+                  href="./user_profile2.html">AI Spokesgirl</a></h2>
             </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
-                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>
+              <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>
             </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/invite.html

@@ -189,16 +189,32 @@
                         <div class="tab-pane fade p-lg-3 show active" id="register" role="tabpanel" aria-labelledby="register-tab">
                             <form>
                                 <div class="form-floating mb-3">
-                                    <input type="text" class="form-control" id="username" name="username" placeholder="User name" required>
-                                    <label for="username"><i class="fas fa-user me-2"></i>User name</label>
+                                    <input type="text" class="form-control" id="username" name="username" placeholder="User Name" required>
+                                    <label for="username"><i class="fas fa-user me-2"></i><lan set-lan="html:userName">User Name</lan></label>
                                 </div>
                                 <div class="form-floating mb-3">
                                     <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
-                                    <label for="email"><i class="fas fa-envelope me-2"></i>Email address</label>
+                                    <label for="email"><i class="fas fa-envelope me-2"></i><lan set-lan="html:emailAddress">Email address</lan></label>
                                 </div>
-                                <div class="form-floating mb-3">
+                                <div class="form-floating mb-3 position-relative">
                                     <input type="password" class="form-control" id="password" name="password"  placeholder="Password" required>
-                                    <label for="password"><i class="fas fa-lock me-2"></i>Password</label>
+                                    <label for="password">
+                                        <i class="fas fa-lock me-2"></i>
+                                        <lan set-lan="html:register_password">Password</lan>
+                                        <lan style="font-size: 12px;" set-lan="html:password_length">(4-12位數密碼)</lan>
+                                    </label>
+                                    <i class="fas fa-eye psd_visible position-absolute"></i>
+                                    <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
+                                </div>
+                                <div class="form-floating mb-3 position-relative">
+                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password"  placeholder="Password" required>
+                                    <label for="confirm_password">
+                                        <i class="fas fa-lock me-2"></i>
+                                        <lan set-lan="html:confirm_password">Password</lan>
+                                        <lan style="font-size: 12px;" set-lan="html:password_confirm_txt">(再次輸入您的密碼)</lan>
+                                    </label>
+                                    <i class="fas fa-eye psd_visible position-absolute"></i>
+                                    <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
                                 </div>
                                 <!-- <div class="mb-3">
                                     <input type="checkbox" id="privacy" name="privacy" checked required>
@@ -206,11 +222,16 @@
                                 </div> -->
                                 <div class="d-flex justify-content-center">
                                     <p set-lan="html:oldHere">已經有帳號？</p>
-                                    <a class="ms-1" href="login.html" set-lan="html:login">登入</a>
+                                    <a class="ms-1" href="loginB.html" set-lan="html:login">登入</a>
                                 </div>
                                 <div class="mb-3 d-flex justify-content-center">
                                     <button type="button" class="btn btn-primary align-items-center btn-register" set-lan="html:goRegister_link">立即註冊</button>
                                 </div>
+                                <small class="register__policies">
+                                    <lan set-lan="html:privacy_term_1">註冊即表示您已閱讀並同意</lan><a href="" onclick="window.open('./privacy.html')"><lan set-lan="html:privacy_term_2">服務條款</lan></a>
+                                    <lan set-lan="html:privacy_term_3">及</lan>
+                                    <a href="" onclick="window.open('./privacy.html')"><lan set-lan="html:privacy_term_4">隱私權政策</lan></a>
+                                </small>
                             </form>
                         </div>
                     </div>

html/invite.js

@@ -6,6 +6,19 @@ const registerPassword = document.querySelector('#register #password');
 const btnLoginPage_d = document.querySelector('.login-top .btn-login');
 const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
 const btnLogout_d= document.querySelector('.login-top .btn-logout');
+$('.psd_visible').hide();
+
+$('.psd_invisible').click(function(){
+    $(this).prev().toggle();
+    $(this).toggle();
+    $(this).parent().children(':first').attr('type', 'text');
+})
+
+$('.psd_visible').click(function(){
+    $(this).toggle();
+    $(this).next().toggle();
+    $(this).parent().children(':first').attr('type', 'password');
+})
 
 registerPassword.addEventListener('keyup', registerByEnter);
 btnRegister.addEventListener('click', register);
@@ -53,6 +66,20 @@ function validatePassword(psd) {
     }
 }
 
+function validateConfirmPsd(psd1, psd2) {
+    if(psd1 == psd2) {
+        $('#register #confirm_password').removeClass('error');
+        $('.error-text').remove();
+        return true;
+    } else {
+        $('#register #confirm_password').addClass('error');
+        if( !$('.error-text').length ) {
+            $('input.error').after('<p class="error-text" set-lan="html:errorConsistentPsd">密碼輸入需一致</p>');
+        } 
+        return false;
+    }
+}
+
 function getpathId() {
     const urlParams = new URLSearchParams(window.location.search);
     const id = urlParams.get('code');
@@ -66,6 +93,7 @@ function register() {
     let userName = $('#register [name = "username"]').val();
     let email = $('#register [name = "email"]').val();
     let password = $('#register [name = "password"]').val();
+    let confirm_psd = $('#register #confirm_password').val();
     let code = getpathId();
 
     let userObj = {
@@ -104,7 +132,7 @@ function register() {
         return;
     }
 
-    if(userName && validateEmail(email) && validatePassword(password)) {
+    if(userName && validateEmail(email) && validatePassword(password) && validateConfirmPsd(password, confirm_psd)) {
         JsLoadingOverlay.show({
             "overlayBackgroundColor": "#666666",
             "overlayOpacity": 0.6,

html/make_video.html

@@ -137,8 +137,8 @@
                             <i class="fas fa-times text-white me-3 mt-3"></i>
                         </div>
                         <div class="text-start">
-                            <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-3 pt-0"
-                                    aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                            <h2 class="fw-bold ps-0" href="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
                         </div>
                         <div class="choozmologo text-start">
                             <!-- <a class="navbar-brand pb-0 d-inline" href="index.html"><img class="img-fluid" style="width: 120px;" src="./static/img//contactus/CMM_LOGO.png" alt=""></a> -->
@@ -285,7 +285,7 @@
                         <!-- fieldsets -->
                         <fieldset>
                             <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' set-lan="placeholder:video_title" /> <br/>
+                            <input id=title type="text" name='t1' class='title_new' value="" placeholder="標題"/> <br/>
                         </fieldset>
                         <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>            

html/make_video2.html

@@ -137,8 +137,8 @@
                             <i class="fas fa-times text-white me-3 mt-3"></i>
                         </div>
                         <div class="text-start">
-                            <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-3 pt-0"
-                                    aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                            <h2 class="fw-bold ps-0" href="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
                         </div>
                         <div class="choozmologo text-start">
                             <!-- <a class="navbar-brand pb-0 d-inline" href="index.html"><img class="img-fluid" style="width: 120px;" src="./static/img//contactus/CMM_LOGO.png" alt=""></a> -->
@@ -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>
@@ -285,12 +285,12 @@
                         <!-- fieldsets -->
                         <fieldset>
                             <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' value="" set-lan="placeholder:video_title" /> <br/>
+                            <input id=title type="text" name='t1' class='title_new' value="" placeholder="標題" /> <br/>
                         </fieldset>
                         <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>
@@ -363,14 +363,20 @@
                               <img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" 
                                 title="放入您的台詞及圖片，圖片僅接受png, jpg, mp4格式 Type in your content and images. Supported File Formats: png, jpg, mp4.">
                             </h3><br/>
-                            <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
-                            <input type="checkbox" id="multiLang" > <br/>
+                           
                             <div class="img-inputTest mt-3">
                                 
                             </div>
-                            <span class="addsec">+</span>
+                            <div>
+                                <span class="addsec">+</span>
+                            </div>
+
+                            <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
+                            <input type="checkbox" id="multiLang" > <br/>
+
                             <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" value="送出" />
                             <span class="draft-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="儲存為草稿 Save as draft" set-lan="html:save_draft_btn">存為草稿</span>
+                      
                             <h3 style="display: none;" class="fs-subtitle"><lan set-lan="html:processing_progress">處理進度</lan></h3>
                             <div style="display: none;" id="myProgress">
                                 <div style="display: none;" id="myBar">0%</div>

html/make_video_long.html

@@ -137,8 +137,8 @@
                             <i class="fas fa-times text-white me-3 mt-3"></i>
                         </div>
                         <div class="text-start">
-                            <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-3 pt-0"
-                                    aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                            <h2 class="fw-bold ps-0" href="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
                         </div>
                         <div class="userName"></div>
                         <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">

html/make_video_slide.html

@@ -137,8 +137,8 @@
                             <i class="fas fa-times text-white me-3 mt-3"></i>
                         </div>
                         <div class="text-start">
-                            <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-3 pt-0"
-                                    aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                            <h2 class="fw-bold ps-0" href="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
                         </div>
                         <div class="userName"></div>
                         <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">
@@ -238,7 +238,7 @@
                                     data-bs-placement="right" title="請輸入Google Slides連結 Google Slides Link">
                             </h3>
                             <input id=slide_raw_url type="text" name='t1' class='title_new' value=""
-                                set-lan="placeholder:slide_link" /><label for="myCheck"
+                                placeholder="SLIDE連結（連結須為公開共用）" /><label for="myCheck"
                                 set-lan="html:add_eng">加入英文:</label>
                             <input type="checkbox" id="multiLang"> <br />
                         </fieldset>
@@ -249,6 +249,7 @@
                                     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 value="7">Peggy</option>
                                 <option value="8">Stacy</option>
                                 <option value="11">Summer韓小夏</option>
@@ -416,28 +417,6 @@
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
     <script>
-        $('.owl-carousel').owlCarousel({
-            loop: true,
-            margin: 10,
-            nav: false,
-            mouseDrag: true,
-            touchDrag: true,
-            smartSpeed: 1000,
-            autoplay: true,
-            autoplayTimeout: 8000,
-            autoplayHoverPause: false,
-            responsive: {
-                0: {
-                    items: 1
-                },
-                600: {
-                    items: 2
-                },
-                1000: {
-                    items: 4
-                }
-            }
-        });
         $(".menu-bar").click(function () {
             $(".sidenav").show();
         });

html/make_video_slide_eng.html

@@ -103,40 +103,46 @@
                             <i class="fas fa-times text-white me-3 mt-3"></i>
                         </div>
                         <div class="text-start">
-                            <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-3 pt-0"
-                                    aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                            <h2 class="fw-bold ps-0" href="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
                         </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>
-                            <input id=slide_raw_url type="text" name='t1' class='title_new' value="" set-lan="placeholder:slide_link"/>
+                            <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>
@@ -200,7 +206,7 @@
                               <option value="17">Kristina</option>
                               <option value="18">Paula</option>
                             </select>
-                            <div class="d-flex row row-cols-2 row-cols-lg-6">
+                            <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
                               <div class="card col" data-avatar="Peggy" data-img="peggy">
                                 <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
@@ -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>
@@ -338,33 +345,11 @@
     <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://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
-    <script src="static/owl.carousel.min.js"></script>
-    <script src="static/script_slides_eng.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/loading-overlay.js"></script>
+    <script src="static/script_slides_eng.js"></script>
     <script src="static/common.js"></script>
 <script>
-    $('.owl-carousel').owlCarousel({
-        loop: true,
-        margin: 10,
-        nav: false,
-        mouseDrag: true,
-        touchDrag: true,
-        smartSpeed: 1000,
-        autoplay: true,
-        autoplayTimeout: 8000,
-        autoplayHoverPause: false,
-        responsive: {
-            0: {
-                items: 1
-            },
-            600: {
-                items: 2
-            },
-            1000: {
-                items: 4
-            }
-        }
-    });
     $(".menu-bar").click(function () {
         $(".sidenav").show();
     });

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/script_profile.js

@@ -49,6 +49,24 @@ function renderView() {
     if(!token) {
         window.location.replace("login.html");
     }
+    JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#666666",
+      "overlayOpacity": 1,
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#000",
+      "spinnerSize": "3x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 99,
+      "spinnerZIndex": 100
+    });
+    window.setTimeout(function () {
+      JsLoadingOverlay.hide()
+    }, 2000)
     axios({
         method: 'post',
         url: 'https://www.choozmo.com:8887/user_profile',
@@ -82,7 +100,7 @@ function renderView() {
                 confirmButtonText
             }).then(result => {
               if (result.isConfirmed) {
-                location.href = "pricing.html";
+                window.open('pricing.html');
               }
             });
           }
@@ -91,6 +109,8 @@ function renderView() {
         `https://twitter.com/intent/tweet?text=I%20just%20created%20a%20video%20in%205%20minutes.%20Check%20it%20out%20%F0%9F%91%89%20https%3A%2F%2Fvideo.choozmo.com/invite.html?code=${userInfo.user_info.invite_code}&related=ai_cmm`)
         
         inviteCode = userInfo.user_info.invite_code;
+        invitelink=`https://video.choozmo.com/invite.html?code=${userInfo.user_info.invite_code}`
+        $('.invite-link').val(invitelink)
         const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
         <p class="card-profile-txt">User Profile</p>
         <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
@@ -166,8 +186,11 @@ function renderView() {
         $('.used-time').html(usedtime);
         $('.not-used-time').html(NotUsedTime);
         $('.card-profile').html(str);
-            $('.card-profile').html(str);
+        $('.card-profile').html(str);
+
+        JsLoadingOverlay.hide();
     }).catch(err => {
+        JsLoadingOverlay.hide();
         console.log(err);
         //window.location.replace("login.html");
     })
@@ -472,4 +495,30 @@ $("#lang-manu").hide();
 $( "#changeLanguage" ).click(function() {
   $("#lang-manu").slideToggle();
   $("#lang-arrow").toggleClass("arrowdoup");
-});
+});
+
+function copyEvent(id) {
+  var Url = document.getElementById("invite-link");
+  Url.select();
+  // window.getSelection().selectAllChildren(str);
+  document.execCommand("Copy");
+  toastr.options = {
+    // 參數設定[註1]
+    "closeButton": false, // 顯示關閉按鈕
+    "debug": false, // 除錯
+    "newestOnTop": false,  // 最新一筆顯示在最上面
+    "progressBar": false, // 顯示隱藏時間進度條
+    "positionClass": "toast-top-center", // 位置的類別
+    "preventDuplicates": false, // 隱藏重覆訊息
+    "onclick": null, // 當點選提示訊息時，則執行此函式
+    "showDuration": "300", // 顯示時間(單位: 毫秒)
+    "hideDuration": "1000", // 隱藏時間(單位: 毫秒)
+    "timeOut": "1000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒)
+    "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒)
+    "showEasing": "swing", // 顯示動畫時間曲線
+    "hideEasing": "linear", // 隱藏動畫時間曲線
+    "showMethod": "fadeIn", // 顯示動畫效果
+    "hideMethod": "fadeOut" // 隱藏動畫效果
+  }
+  toastr.success("複製成功");
+}

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",
@@ -198,7 +200,7 @@ var en = {
     "add_eng": "Allow English Lines:",
     "submit": "Submit",
     "privacy_term": "I Agree to privacy policy and terms of use.",
-    "privacy_term_1": "Registeration implies acception of ",
+    "privacy_term_1": "Registeration implies acception of",
     "privacy_term_2": "terms of use",
     "privacy_term_3": "and",
     "privacy_term_4": "privacy policy",

html/static/script_slides.js

@@ -46,6 +46,7 @@ function checkLan() {
   if(lan == 'en') {
     $('.btn-makev').css('display', 'none');
     $('.btn-makelong').css('display', 'none');
+    $('#slide_raw_url').attr('placeholder', 'Slides Link (slides must be public)')
   } else {
     $('.btn-makev').css('display', 'block');
     $('.btn-makelong').css('display', 'block');
@@ -64,6 +65,26 @@ function loginControl() {
 loginControl();
 
 
+JsLoadingOverlay.show({
+  "overlayBackgroundColor": "#FFFFFF",
+  "overlayOpacity": "1",
+  "spinnerIcon": "ball-circus",
+  "spinnerColor": "#B9DDF3",
+  "spinnerSize": "1x",
+  "overlayIDName": "overlay",
+  "spinnerIDName": "spinner",
+  "offsetX": 0,
+  "offsetY": 0,
+  "containerID": "avatar-cards",
+  "lockScroll": false,
+  "overlayZIndex": 9998,
+  "spinnerZIndex": 9999
+});
+
+window.setTimeout(() => {
+  JsLoadingOverlay.hide()
+}, 5000)
+
 function getAvatar() {
   let jwt_token = get_jwt_token();
   if(jwt_token == undefined) {
@@ -95,7 +116,10 @@ function getAvatar() {
     }
     $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option>${str}`);
     $('.avatar-cards').html(carStr);
-    
+    if(lan = 'en') {
+      $('#avatar option:disabled').val('Choose Character')
+      $('#avatar option:disabled').text('Choose Character')
+    }
     card = document.getElementsByClassName('card');
     console.log(card);
     addCardListener(card);

html/static/script_slides_eng.js

@@ -1,4 +1,5 @@
 checkRoute();
+let card;
 
 let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
 
@@ -50,6 +51,7 @@ function checkLan() {
   } else {
     $('.btn-makev').css('display', 'block');
     $('.btn-makelong').css('display', 'block');
+    $('#slide_raw_url').attr('placeholder', 'SLIDE連結（連結須為公開）')
   }
 }
 
@@ -64,6 +66,26 @@ function loginControl() {
 
 loginControl();
 
+JsLoadingOverlay.show({
+  "overlayBackgroundColor": "#FFFFFF",
+  "overlayOpacity": "1",
+  "spinnerIcon": "ball-circus",
+  "spinnerColor": "#B9DDF3",
+  "spinnerSize": "1x",
+  "overlayIDName": "overlay",
+  "spinnerIDName": "spinner",
+  "offsetX": 0,
+  "offsetY": 0,
+  "containerID": "avatar-cards",
+  "lockScroll": false,
+  "overlayZIndex": 9998,
+  "spinnerZIndex": 9999
+});
+
+window.setTimeout(() => {
+  JsLoadingOverlay.hide()
+}, 5000)
+
 
 function getAvatar() {
   let jwt_token = get_jwt_token();
@@ -94,16 +116,21 @@ function getAvatar() {
                 </div>`;
     }
     $('#avatar').html(`<option value="Choose Character" selected="selected" disabled>Choose Character</option>${str}`);
-    $('.owl-carousel').html(carStr);
+    $('.avatar-cards').html(carStr);
+    if(lan = 'en') {
+      $('#avatar option:disabled').val('請選擇人物')
+      $('#avatar option:disabled').text('請選擇人物')
+    }
     card = document.getElementsByClassName('card');
     console.log(card);
     addCardListener(card);
+    avatarChange()
   }).catch(err => {
     console.log(err);
   });
 }
 
-//getAvatar();
+getAvatar();
 
 
 var client_id = Date.now();
@@ -120,22 +147,21 @@ var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
 var modalImg = document.querySelector("#avatarmega .modal-img");
 var modalTitle = document.querySelector("#avatarmega .modal-title");
 var avatarSelector = document.getElementById("avatar");
-var card = document.getElementsByClassName('card');
-card = [...card];
+// var card = document.getElementsByClassName('card');
+// card = [...card];
 avatarSelector.addEventListener('change', avatarChange);
-avatarChange();
+// avatarChange();
 
-function addCardListener() {
+function addCardListener(card) {
   for (let i = 0; i < card.length; i++) {
     card[i].addEventListener('click', openavatarModel);
   }
 }
 
-addCardListener();
+// addCardListener();
 
 function avatarChange() {
   var value = avatarSelector.options[avatarSelector.selectedIndex].text;
-  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
   for (let i = 0; i < card.length; i++) {
     card[i].classList.remove('active');
     if (card[i].dataset.avatar == value) {

html/static/script_util2.js

@@ -61,6 +61,7 @@ function checkLan() {
   if(lan == 'en') {
     $('.btn-makev').css('display', 'none');
     $('.btn-makelong').css('display', 'none');
+    $('.title_new').attr('placeholder', 'Title')
   } else {
     $('.btn-makev').css('display', 'block');
     $('.btn-makelong').css('display', 'block');
@@ -437,7 +438,10 @@ function load_data(tid, loaded_data, draft = false) {
           if(!historyItem.image_urls[i]) {
             imginput.value = "";
           }
-          imginput.setAttribute('placeholder', 'https://example.com/4VKBo9w.png');
+          imginput.setAttribute('placeholder', '輸入圖片網址或上傳圖片');
+          if(lan == 'en') {
+            imginput.setAttribute('placeholder', 'Type in image link or upload image');
+          }
           img_box.appendChild(imginput);
 
           // img upload input
@@ -624,6 +628,9 @@ function renderInputSec(i) {
   txtinput.classList.add('txtsrc', `txtsrc${i}`);
   txtinput.value = "";
   txtinput.setAttribute('placeholder', `台詞`);
+  if(lan == 'en') {
+    txtinput.setAttribute('placeholder', `Line`);
+  }
   input_sec.appendChild(txtinput);
 
   // img url input
@@ -632,7 +639,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', '輸入圖片網址或上傳圖片');
+  if(lan == 'en') {
+    imginput.setAttribute('placeholder', 'Type in image link or upload image');
+  }
   img_box.appendChild(imginput);
 
   // img upload input

html/static/scss/style.css

@@ -190,6 +190,7 @@ body {
   border-radius: 50%;
   overflow: hidden;
   margin: 1rem auto 0 auto;
+  cursor: pointer;
 }
 
 .card-title {
@@ -1245,7 +1246,7 @@ body {
 
 .psd_visible,
 .psd_invisible {
-  right: .5rem;
+  right: 0.5rem;
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
@@ -1591,6 +1592,22 @@ body {
   cursor: pointer;
 }
 
+.userprofile .userprofile-content .user-information .share .form-control:hover,
+.userprofile .userprofile-content .user-information .share .form-control:focus,
+.userprofile .userprofile-content .user-information .share .form-control:active {
+  outline: none !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.userprofile .userprofile-content .user-information .share .btn:hover,
+.userprofile .userprofile-content .user-information .share .btn:focus,
+.userprofile .userprofile-content .user-information .share .btn:active {
+  outline: none !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .sidenav {
   width: 250px;
   position: fixed;

html/static/scss/style.scss

@@ -182,6 +182,7 @@ body {
 	border-radius: 50%;
 	overflow: hidden;
 	margin: 1rem auto 0 auto;
+	cursor: pointer;
 }
 
 .card-title {
@@ -790,20 +791,20 @@ footer {
 
 #msform .img-inputTest .upload-btn {
 	display: inline-block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 20%;
-  height: 100%;
-  background-color: #75a7dd;
-  background-position: center;
-  background-size: cover;
-  background-image: url(../img/upload_img.png);
-  color: white;
-  padding: 0.4rem 0.5rem;
-  font-size: 0.9rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 20%;
+	height: 100%;
+	background-color: #75a7dd;
+	background-position: center;
+	background-size: cover;
+	background-image: url(../img/upload_img.png);
+	color: white;
+	padding: 0.4rem 0.5rem;
+	font-size: 0.9rem;
+	-webkit-transition: all 0.3s;
+	transition: all 0.3s;
 	cursor: pointer;
 	border-radius: 0;
 }
@@ -903,22 +904,22 @@ body {
 		width: 100%;
 	}
 
-	#msform .input-sec>input[type="text"]:nth-of-type(1) {
-    margin-top: 77%;
-  }
+	#msform .input-sec > input[type="text"]:nth-of-type(1) {
+		margin-top: 77%;
+	}
+
+	#msform .input_eng .input-sec > input[type="text"]:nth-of-type(1) {
+		margin-top: 80%;
+	}
 
-  #msform .input_eng .input-sec>input[type="text"]:nth-of-type(1) {
-    margin-top: 80%;
-  }
-  
-  #msform .input-sec .upload-btn {
-    width: 100%;
-    height: 60%;
-  }
+	#msform .input-sec .upload-btn {
+		width: 100%;
+		height: 60%;
+	}
 
-  #msform .input_eng .input-sec .upload-btn {
-    height: 45%;
-  }
+	#msform .input_eng .input-sec .upload-btn {
+		height: 45%;
+	}
 }
 
 .container-login {
@@ -1164,7 +1165,7 @@ body {
 
 .psd_visible,
 .psd_invisible {
-	right: .5rem;
+	right: 0.5rem;
 	top: 50%;
 	transform: translateY(-50%);
 }
@@ -1452,6 +1453,23 @@ body {
 					}
 				}
 			}
+			.share {
+				.form-control{
+
+				}
+				.form-control:hover,
+				.form-control:focus,
+				.form-control:active {
+					outline: none !important;
+					box-shadow:none;
+				}
+				.btn:hover,
+				.btn:focus,
+				.btn:active {
+					outline: none !important;
+					box-shadow:none;
+				}
+			}
 		}
 	}
 }
@@ -1484,7 +1502,6 @@ body {
 		// 	transform: scale(0.85);
 		// }
 		.close-btn {
-
 			@media screen and(min-width:$desktop) {
 				display: none;
 				// opacity: 0;
@@ -1985,7 +2002,7 @@ body {
 	z-index: 20;
 	overflow: hidden;
 	display: none;
-	top:0px;
+	top: 0px;
 	@media screen and(min-width:$desktop) {
 		display: none;
 	}

html/user_profile2.html

@@ -18,6 +18,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet"  />
     <link rel="stylesheet" href="static/owl.carousel.min.css">
     <link rel="stylesheet" href="static/owl.theme.default.min.css">
     <link rel="stylesheet" href="static/scss/style.css">
@@ -25,20 +26,23 @@
     <script async defer crossorigin="anonymous"
         src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v12.0&appId=831591714123614&autoLogAppEvents=1"
         nonce="lDAd6vGz"></script>
-    
+
     <!-- Google Tag Manager -->
-    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <script>(function (w, d, s, l, i) {
+            w[l] = w[l] || []; w[l].push({
+                'gtm.start':
+                    new Date().getTime(), event: 'gtm.js'
+            }); var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', 'GTM-5M8S4GH');</script>
     <!-- End Google Tag Manager -->
 </head>
 
 <body>
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
-    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH" height="0" width="0"
+            style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
     <div class="body-content" style="overflow-x: hidden;">
@@ -65,9 +69,11 @@
                                 </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>
+                                            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>
+                                            onclick="changeLan(this);window.location.reload();" value="zh">中文</button>
+                                    </li>
                                 </ul>
                             </li>
                             <li class="nav-item me-2 me-lg-1">
@@ -104,8 +110,8 @@
                                 <i class="fas fa-times text-white me-3 mt-3"></i>
                             </div>
                             <div class="text-start mt-3">
-                                <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-3 pt-0"
-                                        aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                                <h2 class="fw-bold ps-0" href="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                        aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
                             </div>
                             <div class="choozmologo text-start">
                                 <!-- <a class="navbar-brand pb-0 d-inline" href="index.html"><img class="img-fluid" style="width: 120px;" src="./static/img//contactus/CMM_LOGO.png" alt=""></a> -->
@@ -146,23 +152,29 @@
 
                                 <div class="Mobile-nav">
                                     <hr>
-                                    <a style="font-size: 18px;" class="text-white"
-                                    aria-current="page" href="pricing.html" set-lan="html:pricing-m">早鳥方案</a>
+                                    <a style="font-size: 18px;" class="text-white" aria-current="page"
+                                        href="pricing.html" set-lan="html:pricing-m">早鳥方案</a>
 
                                     <li id="changeLanguage" class="nav-list-item me-lg-1">
                                         <a style="font-size: 18px;" class="nav-link text-white" href="#"
                                             id="navbarDropdownM" role="button" data-bs-toggle="dropdown"
                                             aria-expanded="false">
-                                            <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>
+                                            <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">
-                                            <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);window.location.reload();"
-                                                    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);window.location.reload();" value="zh">中文</button>
-                                            </li>
+                                        <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);window.location.reload();"
+                                                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);window.location.reload();"
+                                                value="zh">中文</button>
+                                        </li>
                                     </div>
                                     <li class="nav-item text-white  me-lg-1">
                                         <a style="font-size: 18px;" class="nav-link btn-logout text-white"
@@ -311,9 +323,16 @@
                                             <div class="share col-12 order-5 col-lg-12 order-lg-5 mb-5">
                                                 <div class="card mt-3 p-3 p-lg-4">
                                                     <h3 set-lan="html:trial_title">Want to get more minutes?</h3>
-                                                    <p class="mb-4" set-lan="html:trial_txt">Invite your friends to AI
+                                                    <p class="mb-4"  set-lan="html:trial_txt">Invite your friends to AI
                                                         Spokesgirl and for each eligible one that signs up from your
                                                         referral, we'll give you 3 more minutes free!</p>
+                                                    <div class="input-group mb-4">
+                                                        <input type="text" id="invite-link" class="invite-link form-control"
+                                                            aria-label="Recipient's username"
+                                                            aria-describedby="button-addon2">
+                                                        <button class="copybutton btn btn-outline-secondary" type="button"
+                                                            id="button-addon2" onclick="copyEvent('copy')"><i class="fas fa-copy"></i></button>
+                                                    </div>
                                                     <div class="d-flex">
                                                         <p style="color:#183790; font-size: 20px;"
                                                             class="d-inline fw-bold" set-lan="html:share">Share:</p>
@@ -328,7 +347,8 @@
                                                                 style="position: relative; bottom:2px;">Facebook</span>
                                                         </div> -->
                                                         <a class="mx-2 mx-lg-4 share-fb text-center"
-                                                            href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fvideo.choozmo.com">
+                                                            href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fvideo.choozmo.com"
+                                                            target="_blank">
                                                             <img width="28" class="me-2"
                                                                 src="./static/img/userprofile/Icon awesome-facebook-square.png"
                                                                 alt="">
@@ -380,7 +400,9 @@
                         <div class="modal-terms">
                             <ol class="ps-0">
                                 <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>
+                                    <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>
@@ -427,6 +449,7 @@
         integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
     <script src="static/owl.carousel.min.js"></script>
     <script src="static/loading-overlay.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>