jeter20131220 пре 3 година
родитељ
комит
b2dc6ef9e9

+ 173 - 110
html/index_eng.html

@@ -1,102 +1,137 @@
 <!DOCTYPE html>
-<html lang="en" >
+<html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
-    <meta http-equiv="Cache-Control" content="no-cache">
+  <meta http-equiv="Cache-Control" content="no-cache">
   <title>AI ANCHOR GO</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
-    crossorigin="anonymous">
-  <link rel="stylesheet"
-    href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
-    crossorigin="anonymous">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> 
-  <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://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+    integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <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 rel="stylesheet" href="static/scss/style.css">
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-  
+
 </head>
+
 <body>
-  <nav class="navbar navbar-expand-lg navbar-light">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="index.html">AI Spokesgirl</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+  <div class="card2">
+    <img class="profile-bgimg img-fluid" src="./static/img/nav-bg.png" class="card-img" alt="...">
+    <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+    <div class="card-img-overlay pt-2 py-lg-3">
+      <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid ps-0">
+          <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
             data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
             aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                <li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="pricing.html">Pricing</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link active btn-login" aria-current="page" href="login.html">Login</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link btn-userProfile" aria-current="page" href="user_profile2.html">User Profile</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link btn-logout" aria-current="page">Log Out</a>
-                </li>
+          </button> -->
+          <a href="./index.html">
+            <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+          </a>
+          <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>
+              </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
+                  Profile</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-logout text-white" aria-current="page">Log Out</a>
+              </li>
             </ul>
+          </div>
+          <span class="menu-bar ms-auto" style="font-size: 32px;"><i class="fas fa-bars text-white"></i></span>
         </div>
+      </nav>
     </div>
-</nav>
+  </div>
   <div class="container-fluid px-0 mx-0">
     <div class="row px-0 mx-0">
       <div class="col-lg-2">
         <div id="mySidenav" class="sidenav">
           <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
           <div class="sidenav-content">
-    
-          <div class="text-start mt-3">
-              <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-1" aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+            <div style="font-size: 20px;" class="close-btn text-end">
+              <i class="fas fa-times text-white me-3 mt-3"></i>
           </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>
-          <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>
-          </div>
-          <hr>
-          <ul class="nav-list ps-0">
+            <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>
+            </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>
+            <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>
+            </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>
+                  class="fas fa-book-open me-2"></i>
+                <lan>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>
-                  </li>
+                <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>
+                </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>
+              <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>
               </li>
-          </ul>
+              <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>
+                <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>
+                <!-- <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> -->
+                <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>
+                </li>
+                
+            </div>
+            </ul>
           </div>
           <div class="right-text">
-              <a target="_blank" href="https://www.linkedin.com/company/choozmo/mycompany/"><img
-                      style="width: 20px;" src="./static/img/contactus/linkedin-logo-copy.png" alt=""></a>
-              <a target="_blank" href="https://www.facebook.com/choozmo/"><img style="width: 20px;"
-                      src="./static/img/contactus/facebook_logos_PNG19753.png" alt=""></a>
-              <a target="_blank" href="https://www.instagram.com/choozmo_cmm/"><img style="width: 20px;"
-                      src="./static/img/contactus/IG.png" alt=""></a>
-              <a target="_blank" href="https://line.me/R/ti/p/@choozmo?from=page"><img style="width: 20px;"
-                      src="./static/img/contactus/LINE_logo.svg.png" alt=""></a>
-              <a target="_blank" href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
-                      style="width: 20px;" src="./static/img/contactus/youtube.png" alt=""></a>
-              <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
-                      src="./static/img/contactus/twitter.png" alt=""></a>
-              <p class="Reserved text-white text-start mt-3 ps-2">Choozmo All Rights Reserved</p>
+            <a target="_blank" href="https://www.linkedin.com/company/choozmo/mycompany/"><img style="width: 20px;"
+                src="./static/img/contactus/linkedin-logo-copy.png" alt=""></a>
+            <a target="_blank" href="https://www.facebook.com/choozmo/"><img style="width: 20px;"
+                src="./static/img/contactus/facebook_logos_PNG19753.png" alt=""></a>
+            <a target="_blank" href="https://www.instagram.com/choozmo_cmm/"><img style="width: 20px;"
+                src="./static/img/contactus/IG.png" alt=""></a>
+            <a target="_blank" href="https://line.me/R/ti/p/@choozmo?from=page"><img style="width: 20px;"
+                src="./static/img/contactus/LINE_logo.svg.png" alt=""></a>
+            <a target="_blank" href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img style="width: 20px;"
+                src="./static/img/contactus/youtube.png" alt=""></a>
+            <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
+                src="./static/img/contactus/twitter.png" alt=""></a>
+            <p class="Reserved text-white text-start mt-3 ps-3 ps-lg-3">Choozmo All Rights Reserved</p>
           </div>
         </div>
       </div>
@@ -110,11 +145,13 @@
             </div>
             <!-- fieldsets -->
             <fieldset>
-              <h3 class="fs-subtitle">Video Title<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/>
+              <h3 class="fs-subtitle">Video Title<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="" data-bs-toggle="tooltip" data-bs-placement="right" title="The spokesgirl of your video"></h3>
+              <h3 class="fs-subtitle">Choose Character<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 value="7">Peggy</option>
@@ -152,33 +189,35 @@
                 <div class="card col" data-avatar="Jocelyn" data-img="Jocelyn">
                   <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top" alt="..."></div>
                   <div class="card-body">
-                      <h5 class="card-title">Jocelyn</h5>
+                    <h5 class="card-title">Jocelyn</h5>
                   </div>
-              </div>
-              <div class="card col" data-avatar="Angela" data-img="Angela">
+                </div>
+                <div class="card col" data-avatar="Angela" data-img="Angela">
                   <div class="imgfr"><img src="static/img/Angela.webp" class="card-img-top" alt="..."></div>
                   <div class="card-body">
-                      <h5 class="card-title">Angela</h5>
+                    <h5 class="card-title">Angela</h5>
                   </div>
-              </div>
+                </div>
               </div>
             </fieldset>
             <fieldset>
               <h3 class="fs-subtitle">Lines</h3>
               <div class="subtitle-inputs">
-                            
+
               </div>
               <span class="add">+</span>
             </fieldset>
             <fieldset id="Subline">
               <h3 class="fs-subtitle">Subtitles</h3>
               <div class="subline-inputs">
-                            
+
               </div>
               <span class="add-subline">+</span>
             </fieldset>
             <fieldset id='imgSrc'>
-              <h3 class="fs-subtitle" style="display: inline-block;">Image Links<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="Support File Formats: png, jpg, mp4"></h3><br/>
+              <h3 class="fs-subtitle" style="display: inline-block;">Image Links<img class="ms-1"
+                  src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right"
+                  title="Support File Formats: png, jpg, mp4"></h3><br />
               <div class="img-inputs">
               </div>
               <span class="addimg">+</span>
@@ -191,7 +230,7 @@
           </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>
-        
+
       </div>
     </div>
     <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span> -->
@@ -203,57 +242,81 @@
             <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. Support 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>
-                  </ol>
-              </div>
+            <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. Support 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>
+              </ol>
+            </div>
           </div>
         </div>
       </div>
-  </div> 
-  <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-scrollable">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="staticBackdropLabel">History</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
+    </div>
+    <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">History</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
             <div class="modal-terms">
               <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
               <ol class="ps-0 historyList">
               </ol>
             </div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div class="modal" tabindex="-1"  id="avatarmega" aria-labelledby="history" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content text-center">
-        <div class="modal-body">
-          <img class="modal-img" src="" alt="">
-          <h5 class="modal-title mt-2"></h5>
-          <button type="button" class="btn btn-secondary btn-dismiss" data-bs-dismiss="modal" set-lan="html:close">Close</button>
+    <div class="modal" tabindex="-1" id="avatarmega" aria-labelledby="history" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content text-center">
+          <div class="modal-body">
+            <img class="modal-img" src="" alt="">
+            <h5 class="modal-title mt-2"></h5>
+            <button type="button" class="btn btn-secondary btn-dismiss" data-bs-dismiss="modal"
+              set-lan="html:close">Close</button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-  </div>
-  
+
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
+  <script src="https://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 type="text/javascript" src="static/lan.js"></script>
   <script src="static/common.js"></script>
   <script src="script_eng.js"></script>
+<script>
+  $( ".menu-bar" ).click(function() {
+  $(".sidenav").show();
+});
+
+$( ".close-btn" ).click(function() {
+  $(".sidenav").hide();
+});
+$("#lang-manu").hide();
+
+$("#changeLanguage").click(function () {
+    $("#lang-manu").slideToggle();
+    $("#lang-arrow").toggleClass("arrowdoup");
+});
+</script>
   <body>
-</div>
+    </div>
+
+  </body>
 
-</body>
-</html>
+</html>

+ 12 - 9
html/make_video.html

@@ -36,7 +36,9 @@
         <div class="card-img-overlay pt-2 py-lg-3">
             <nav class="navbar navbar-expand-lg navbar-light pt-0">
                 <div class="navbar-collapse d-flex" id="navbarSupportedContent">
-                    <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    <a href="./index.html">
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    </a>
                     <ul style="flex-direction: row" class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0 mt-2">
                         <li class="nav-item me-3">
                             <a class="nav-link active text-white" aria-current="page" href="pricing.html"
@@ -168,21 +170,22 @@
                                 <a style="font-size: 18px;" class="text-white"
                                 aria-current="page" href="pricing.html" set-lan="html:pricing-m">早鳥方案</a>
 
-                                <li class="nav-list-item dropdown me-lg-1">
-                                    <a style="font-size: 18px;" class="nav-link dropdown-toggle text-white" href="#"
+                                <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 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>
-                                    <ul class="dropdown-menu bg-transparent" aria-labelledby="navbarDropdownM">
-                                        <li><button class="nav-link lan-swtich" aria-current="page"
+                                </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" aria-current="page"
+                                        <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>
-                                    </ul>
-                                </li>
+                                </div>
+
                                 <li class="nav-item text-white  me-lg-1">
                                     <a style="font-size: 18px;" class="nav-link btn-logout text-white"
                                         aria-current="page" set-lan="html:logout-m">登出</a>

+ 326 - 198
html/make_video_long.html

@@ -8,15 +8,15 @@
     <meta http-equiv="Cache-Control" content="no-cache">
     <title>AI Spokesgirl</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
-      crossorigin="anonymous">
-    <link rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
-      crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+        integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+        integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> 
-    <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 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <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 rel="stylesheet" href="static/owl.carousel.min.css">
     <link rel="stylesheet" href="static/owl.theme.default.min.css">
@@ -28,7 +28,54 @@
 <body>
     <!-- ================================================================= -->
     <!-- navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light">
+    <div class="card2">
+        <img class="profile-bgimg img-fluid" src="./static/img/nav-bg.png" class="card-img" alt="...">
+        <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+
+        <div class="card-img-overlay pt-2 py-lg-3">
+            <nav class="navbar navbar-expand-lg navbar-light pt-0">
+                <div class="navbar-collapse d-flex" id="navbarSupportedContent">
+                    <a href="./index.html">
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    </a>
+                    <ul style="flex-direction: row" class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0 mt-2">
+                        <li class="nav-item me-3">
+                            <a class="nav-link active text-white" aria-current="page" href="pricing.html"
+                                set-lan="html: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 me-2 me-lg-1">
+                            <a class="nav-link btn-userProfile text-white" aria-current="page" href="user_profile2.html"
+                                set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item me-2 me-lg-1">
+                            <a class="nav-link active btn-login text-white" aria-current="page" href="login.html"
+                                set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item text-white me-2 me-lg-1">
+                            <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
+                            class="fas fa-bars text-white"></i></span>
+                </div>
+
+            </nav>
+        </div>
+    </div>
+    <!-- <nav class="navbar navbar-expand-lg navbar-light">
         <div class="container-fluid">
             <a class="navbar-brand" href="index.html">AI Spokesgirl</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -62,7 +109,7 @@
                 </ul>
             </div>
         </div>
-    </nav>
+    </nav> -->
     <!-- ================================================================= -->
 
 
@@ -74,144 +121,204 @@
                 <div id="mySidenav" class="sidenav">
                     <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
                     <div class="sidenav-content">
-                    <div class="text-start mt-3">
-                        <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-1" aria-current="page" href="index.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" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</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_video.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 style="font-size: 20px;" class="close-btn text-end">
+                            <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>
+                        </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" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</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_video.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 btn-makeppt" aria-current="page"
+                                href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
+                            <a class="nav-link btn-gocreate text-white col-6 btn-makeen" aria-current="page"
+                                href="./index_eng.html" set-lan="html:make_video_eng">純英文影片製作</a>
+                        </div>
+                        <hr>
+                        <ul class="nav-list ps-0">
+                            <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
+                                    class="fas fa-book-open me-2"></i>
+                                <lan set-lan="html:usage_intro">使用說明</lan>
+                            </li>
+                            <a style="text-decoration: none;color:white;" href="./user_profile2.html">
+                                <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
+                                    <i class="fas fa-user me-2"></i>
+                                    <lan set-lan="html:user_profile">會員資料</lan>
+                                </li>
+                            </a>
+                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history"
+                                onclick="openNav()">
+                                <i class="fas fa-history me-2"></i>
+                                <lan set-lan="html:history">歷史紀錄</lan>
+                            </li>
+                            <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>
+
+                                <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>
+                                    </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-white  me-lg-1">
+                                    <a style="font-size: 18px;" class="nav-link btn-logout text-white"
+                                        aria-current="page" set-lan="html:logout-m">登出</a>
+                                </li>
+                            </div>
+                        </ul>
                     </div>
-                    <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
-                        <a class="nav-link btn-gocreate text-white col-6 btn-makeppt" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
-                        <a class="nav-link btn-gocreate text-white col-6 btn-makeen" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">純英文影片製作</a>
+                    <div class="right-text">
+                        <a target="_blank" href="http://www.choozmo.com/">| 官網 |</a>
+                        <a target="_blank" href="https://www.linkedin.com/company/choozmo/mycompany/"><img
+                                style="width: 20px;" src="./static/img/contactus/linkedin-logo-copy.png" alt=""></a>
+                        <a target="_blank" href="https://www.facebook.com/choozmo/"><img style="width: 20px;"
+                                src="./static/img/contactus/facebook_logos_PNG19753.png" alt=""></a>
+                        <a target="_blank" href="https://www.instagram.com/choozmo_cmm/"><img style="width: 20px;"
+                                src="./static/img/contactus/IG.png" alt=""></a>
+                        <a target="_blank" href="https://line.me/R/ti/p/@choozmo?from=page"><img style="width: 20px;"
+                                src="./static/img/contactus/LINE_logo.svg.png" alt=""></a>
+                        <a target="_blank" href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
+                                style="width: 20px;" src="./static/img/contactus/youtube.png" alt=""></a>
+                        <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
+                                src="./static/img/contactus/twitter.png" alt=""></a>
+                        <p class="Reserved text-white text-start mt-3 ps-3 ps-lg-3">Choozmo All Rights Reserved</p>
                     </div>
-                    <hr>
-                    <ul class="nav-list ps-0">
-                        <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
-                                class="fas fa-book-open me-2"></i>
-                            <lan set-lan="html:usage_intro">使用說明</lan>
-                        </li>
-                        <a style="text-decoration: none;color:white;" href="./user_profile2.html">
-                            <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
-                                <i class="fas fa-user me-2"></i>
-                               <lan set-lan="html:user_profile">會員資料</lan>
-                            </li>
-                        </a>
-                        <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
-                            <i class="fas fa-history me-2"></i>
-                            <lan set-lan="html:history">歷史紀錄</lan>
-                        </li>
-                    </ul>
-                </div>
-                <div class="right-text">
-                    <a target="_blank" href="http://www.choozmo.com/">| 官網 |</a>
-                    <a target="_blank" href="https://www.linkedin.com/company/choozmo/mycompany/"><img
-                            style="width: 20px;" src="./static/img/contactus/linkedin-logo-copy.png" alt=""></a>
-                    <a target="_blank" href="https://www.facebook.com/choozmo/"><img style="width: 20px;"
-                            src="./static/img/contactus/facebook_logos_PNG19753.png" alt=""></a>
-                    <a target="_blank" href="https://www.instagram.com/choozmo_cmm/"><img style="width: 20px;"
-                            src="./static/img/contactus/IG.png" alt=""></a>
-                    <a target="_blank" href="https://line.me/R/ti/p/@choozmo?from=page"><img style="width: 20px;"
-                            src="./static/img/contactus/LINE_logo.svg.png" alt=""></a>
-                    <a target="_blank" href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
-                            style="width: 20px;" src="./static/img/contactus/youtube.png" alt=""></a>
-                    <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
-                            src="./static/img/contactus/twitter.png" alt=""></a>
-                    <p class="Reserved text-white text-start mt-3 ps-2">Choozmo All Rights Reserved</p>
-                </div>
                 </div>
             </div>
             <div class="col-lg-10 px-0">
                 <div>
                     <form id="msform">
-                    <div class="linker__box">
-                        <p set-lan="html:preview_videos">預覽影片</p>
-                        <i class="fas fa-link"></i>
-                        <a id='linker' style="display: none;" class="ms-2" set-lan="html:video_link">影片連結</a>
-                    </div>
-                    <!-- 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="將作為影片的內嵌標題"></h3>            
-                        <input id=title type="text" name='t1' class='title_new' value="" set-lan="placeholder:video_title" /> <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="將作為影片的講者"></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="10">Nina黑</option>
-                        <option value="9">Nina灰</option>
-                        <option value="11">Summer韓小夏</option>
-                        <option value="12">Jocelyn</option>
-                        <option value="13">Angela</option>
-                        </select>
-                        <div class="owl-carousel owl-theme">
-                        <div class="card item" 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">
-                            <h5 class="card-title">Peggy</h5>
-                            </div>
-                        </div>
-                        <div class="card item" data-avatar="Stacy" data-img="stacy">
-                            <div class="imgfr"><img src="static/img/stacy.webp" class="card-img-top" alt="..."></div>
-                            <div class="card-body">
-                            <h5 class="card-title">Stacy</h5>
-                            </div>
-                        </div>
-                        <div class="card item" data-avatar="Nina黑" data-img="ninablack">
-                            <div class="imgfr"><img src="static/img/ninablack.webp" class="card-img-top" alt="..."></div>
-                            <div class="card-body">
-                            <h5 class="card-title">Nina黑</h5>
-                            </div>
-                        </div>
-                        <div class="card item" data-avatar="Nina灰" data-img="ninawhite">
-                            <div class="imgfr"><img src="static/img/ninawhite.webp" class="card-img-top" alt="..."></div>
-                            <div class="card-body">
-                            <h5 class="card-title">Nina灰</h5>
-                            </div>
+                        <div class="linker__box">
+                            <p set-lan="html:preview_videos">預覽影片</p>
+                            <i class="fas fa-link"></i>
+                            <a id='linker' style="display: none;" class="ms-2" set-lan="html:video_link">影片連結</a>
                         </div>
-                        <div class="card item" data-avatar="Summer韓小夏" data-img="summer">
-                            <div class="imgfr"><img src="static/img/summer.webp" class="card-img-top" alt="..."></div>
-                            <div class="card-body">
-                            <h5 class="card-title">Summer韓小夏</h5>
+                        <!-- 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="將作為影片的內嵌標題">
+                            </h3>
+                            <input id=title type="text" name='t1' class='title_new' value=""
+                                set-lan="placeholder:video_title" /> <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="將作為影片的講者">
+                            </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="10">Nina黑</option>
+                                <option value="9">Nina灰</option>
+                                <option value="11">Summer韓小夏</option>
+                                <option value="12">Jocelyn</option>
+                                <option value="13">Angela</option>
+                            </select>
+                            <div class="d-flex row row-cols-2 row-cols-lg-6">
+                                <div class="card item 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">
+                                        <h5 class="card-title">Peggy</h5>
+                                    </div>
+                                </div>
+                                <div class="card item col" data-avatar="Stacy" data-img="stacy">
+                                    <div class="imgfr"><img src="static/img/stacy.webp" class="card-img-top" alt="...">
+                                    </div>
+                                    <div class="card-body">
+                                        <h5 class="card-title">Stacy</h5>
+                                    </div>
+                                </div>
+                                <div class="card item col" data-avatar="Nina黑" data-img="ninablack">
+                                    <div class="imgfr"><img src="static/img/ninablack.webp" class="card-img-top"
+                                            alt="..."></div>
+                                    <div class="card-body">
+                                        <h5 class="card-title">Nina黑</h5>
+                                    </div>
+                                </div>
+                                <div class="card item col" data-avatar="Nina灰" data-img="ninawhite">
+                                    <div class="imgfr"><img src="static/img/ninawhite.webp" class="card-img-top"
+                                            alt="..."></div>
+                                    <div class="card-body">
+                                        <h5 class="card-title">Nina灰</h5>
+                                    </div>
+                                </div>
+                                <div class="card item col" data-avatar="Summer韓小夏" data-img="summer">
+                                    <div class="imgfr"><img src="static/img/summer.webp" class="card-img-top" alt="...">
+                                    </div>
+                                    <div class="card-body">
+                                        <h5 class="card-title">Summer韓小夏</h5>
+                                    </div>
+                                </div>
+                                <div class="card item col" data-avatar="Jocelyn" data-img="Jocelyn">
+                                    <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top"
+                                            alt="..."></div>
+                                    <div class="card-body">
+                                        <h5 class="card-title">Jocelyn</h5>
+                                    </div>
+                                </div>
+                                <div class="card item col" data-avatar="Angela" data-img="Angela">
+                                    <div class="imgfr"><img src="static/img/Angela.webp" class="card-img-top" alt="...">
+                                    </div>
+                                    <div class="card-body">
+                                        <h5 class="card-title">Angela</h5>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                        <div class="card item" data-avatar="Jocelyn" data-img="Jocelyn">
-                            <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top" alt="..."></div>
-                            <div class="card-body">
-                            <h5 class="card-title">Jocelyn</h5>
+                        </fieldset>
+                        <fieldset>
+                            <h3 class="fs-subtitle" set-lan="html:lines">台詞</h3>
+                            <label for="myCheck" set-lan="html:add_eng">加入英文:</label>
+                            <input type="checkbox" id="multiLang"> <br />
+                            <textarea name="" id="" cols="100" rows="15" class="fs-txtarea"></textarea>
+
+                        </fieldset>
+                        <fieldset id='imgSrc'>
+                            <h3 class="fs-subtitle" style="display: inline-block;">
+                                <lan set-lan="html:img_link">影像連結</lan><img class="ms-1" src="static/img/question.png"
+                                    alt="" data-bs-toggle="tooltip" data-bs-placement="right"
+                                    title="僅接受png, jpg, mp4格式">
+                            </h3><br />
+                            <div class="img-inputs">
                             </div>
-                        </div>
-                        <div class="card item" data-avatar="Angela" data-img="Angela">
-                            <div class="imgfr"><img src="static/img/Angela.webp" class="card-img-top" alt="..."></div>
-                            <div class="card-body">
-                            <h5 class="card-title">Angela</h5>
+                            <span class="addimg">+</span>
+                            <input id="sendBTN" type="button" class="action-button" set-lan="val:submit" value="送出" />
+                            <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>
                             </div>
-                        </div>
-                        </div>
-                    </fieldset>
-                    <fieldset>
-                        <h3 class="fs-subtitle" set-lan="html:lines">台詞</h3>
-                        <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
-                        <input type="checkbox" id="multiLang" > <br/>
-                        <textarea name="" id="" cols="100" rows="15" class="fs-txtarea"></textarea>
-                        
-                    </fieldset>
-                    <fieldset id='imgSrc'>
-                        <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:img_link">影像連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
-                        <div class="img-inputs">
-                        </div>
-                        <span class="addimg">+</span>
-                        <input id="sendBTN" type="button" class="action-button" set-lan="val:submit" value="送出" />
-                        <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>
-                        </div>
-                    </fieldset>
+                        </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> -->
                 </div>
@@ -226,53 +333,57 @@
                 <p class="right-text text-white d-inline-block">Choozmo All Rights Reserved</p>
             </div> -->
             <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span> -->
-            
+
             <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
                 <div class="modal-dialog">
                     <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:usage_intro">使用說明</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 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 class="modal-header">
+                            <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:usage_intro">使用說明</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 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>
                     </div>
                 </div>
             </div>
-        </div> 
-        <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-scrollable">
-            <div class="modal-content">
-                <div class="modal-header">
-                <h5 class="modal-title" id="staticBackdropLabel" set-lang="html:history">歷史紀錄</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div class="modal-terms">
-                    <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
-                    <ol class="ps-0 historyList">
-                    </ol>
+            <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-scrollable">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="staticBackdropLabel" set-lang="html:history">歷史紀錄</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="modal-terms">
+                                <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                                <ol class="ps-0 historyList">
+                                </ol>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-            </div>
-        </div>
-        <div class="modal" tabindex="-1"  id="avatarmega" aria-labelledby="history" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered">
-                <div class="modal-content text-center">
-                    <div class="modal-body">
-                    <img class="modal-img img-fluid" src="" alt="">
-                    <h5 class="modal-title mt-2"></h5>
-                    <button type="button" class="btn btn-secondary btn-dismiss" data-bs-dismiss="modal" set-lan="html:close">Close</button>
+            <div class="modal" tabindex="-1" id="avatarmega" aria-labelledby="history" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content text-center">
+                        <div class="modal-body">
+                            <img class="modal-img img-fluid" src="" alt="">
+                            <h5 class="modal-title mt-2"></h5>
+                            <button type="button" class="btn btn-secondary btn-dismiss" data-bs-dismiss="modal"
+                                set-lan="html:close">Close</button>
+                        </div>
                     </div>
                 </div>
-                </div>
             </div>
         </div>
     </div>
@@ -285,40 +396,57 @@
 
     </footer>
     <!-- ================================================================= -->
-  
+
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
+    <script src="https://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="./script_long.js"></script>
     <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
-        }
-    }
-});
-</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();
+        });
+
+        $(".close-btn").click(function () {
+            $(".sidenav").hide();
+        });
+        $("#lang-manu").hide();
+
+        $("#changeLanguage").click(function () {
+            $("#lang-manu").slideToggle();
+            $("#lang-arrow").toggleClass("arrowdoup");
+        });
+    </script>
 </body>
 
 </html>

+ 216 - 94
html/make_video_slide.html

@@ -8,15 +8,15 @@
     <meta http-equiv="Cache-Control" content="no-cache">
     <title>AI Spokesgirl</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
-      crossorigin="anonymous">
-    <link rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
-      crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+        integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+        integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> 
-    <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 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <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 rel="stylesheet" href="static/owl.carousel.min.css">
     <link rel="stylesheet" href="static/owl.theme.default.min.css">
@@ -28,7 +28,54 @@
 <body>
     <!-- ================================================================= -->
     <!-- navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light">
+    <div class="card2">
+        <img class="profile-bgimg img-fluid" src="./static/img/nav-bg.png" class="card-img" alt="...">
+        <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+
+        <div class="card-img-overlay pt-2 py-lg-3">
+            <nav class="navbar navbar-expand-lg navbar-light pt-0">
+                <div class="navbar-collapse d-flex" id="navbarSupportedContent">
+                    <a href="./index.html">
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    </a>
+                    <ul style="flex-direction: row" class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0 mt-2">
+                        <li class="nav-item me-3">
+                            <a class="nav-link active text-white" aria-current="page" href="pricing.html"
+                                set-lan="html: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 me-2 me-lg-1">
+                            <a class="nav-link btn-userProfile text-white" aria-current="page" href="user_profile2.html"
+                                set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item me-2 me-lg-1">
+                            <a class="nav-link active btn-login text-white" aria-current="page" href="login.html"
+                                set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item text-white me-2 me-lg-1">
+                            <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
+                            class="fas fa-bars text-white"></i></span>
+                </div>
+
+            </nav>
+        </div>
+    </div>
+    <!-- <nav class="navbar navbar-expand-lg navbar-light">
         <div class="container-fluid">
             <a class="navbar-brand" href="index.html">AI Spokesgirl</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -62,7 +109,7 @@
                 </ul>
             </div>
         </div>
-    </nav>
+    </nav> -->
     <!-- ================================================================= -->
 
 
@@ -74,38 +121,76 @@
                 <div id="mySidenav" class="sidenav">
                     <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
                     <div class="sidenav-content">
-    
-                    <div class="text-start mt-3">
-                        <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-1" aria-current="page" href="index.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" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</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_video.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 btn-makeppt" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
-                        <a class="nav-link btn-gocreate text-white col-6 btn-makeen" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">純英文影片製作</a>
-                    </div>
-                    <hr>
-                    <ul class="nav-list ps-0">
-                        <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
-                                class="fas fa-book-open me-2"></i>
-                            <lan set-lan="html:usage_intro">使用說明</lan>
-                        </li>
-                        <a style="text-decoration: none;color:white;" href="./user_profile2.html">
-                            <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
-                                <i class="fas fa-user me-2"></i>
-                               <lan set-lan="html:user_profile">會員資料</lan>
+                        <div style="font-size: 20px;" class="close-btn text-end">
+                            <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>
+                        </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" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</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_video.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 btn-makeppt" aria-current="page"
+                                href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
+                            <a class="nav-link btn-gocreate text-white col-6 btn-makeen" aria-current="page"
+                                href="./index_eng.html" set-lan="html:make_video_eng">純英文影片製作</a>
+                        </div>
+                        <hr>
+                        <ul class="nav-list ps-0">
+                            <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
+                                    class="fas fa-book-open me-2"></i>
+                                <lan set-lan="html:usage_intro">使用說明</lan>
                             </li>
-                        </a>
-                        <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
-                            <i class="fas fa-history me-2"></i>
-                            <lan set-lan="html:history">歷史紀錄</lan>
-                        </li>
-                    </ul>
+                            <a style="text-decoration: none;color:white;" href="./user_profile2.html">
+                                <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
+                                    <i class="fas fa-user me-2"></i>
+                                    <lan set-lan="html:user_profile">會員資料</lan>
+                                </li>
+                            </a>
+                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history"
+                                onclick="openNav()">
+                                <i class="fas fa-history me-2"></i>
+                                <lan set-lan="html:history">歷史紀錄</lan>
+                            </li>
+                            <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>
+
+                                <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>
+                                    </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-white  me-lg-1">
+                                    <a style="font-size: 18px;" class="nav-link btn-logout text-white"
+                                        aria-current="page" set-lan="html:logout-m">登出</a>
+                                </li>
+                            </div>
+                        </ul>
+
                     </div>
                     <div class="right-text">
                         <a target="_blank" href="http://www.choozmo.com/">| 官網 |</a>
@@ -121,7 +206,7 @@
                                 style="width: 20px;" src="./static/img/contactus/youtube.png" alt=""></a>
                         <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
                                 src="./static/img/contactus/twitter.png" alt=""></a>
-                        <p class="Reserved text-white text-start mt-3 ps-2">Choozmo All Rights Reserved</p>
+                        <p class="Reserved text-white text-start mt-3 ps-3 ps-lg-3">Choozmo All Rights Reserved</p>
                     </div>
                 </div>
             </div>
@@ -135,12 +220,22 @@
                         </div>
                         <!-- fieldsets -->
                         <fieldset>
-                            <h3 class="fs-subtitle"><lan set-lan="html:slide_link">SLIDE 連結</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"/><label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
-                            <input type="checkbox" id="multiLang" > <br/>
+                            <h3 class="fs-subtitle">
+                                <lan set-lan="html:slide_link">SLIDE 連結</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" /><label for="myCheck"
+                                set-lan="html:add_eng">加入英文:</label>
+                            <input type="checkbox" id="multiLang"> <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>
+                            <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="7">Peggy</option>
                                 <option value="8">Stacy</option>
@@ -150,52 +245,60 @@
                                 <option value="12">Jocelyn</option>
                                 <option value="12">Angela</option>
                             </select>
-                            <div class="owl-carousel owl-theme d-flex row">
-                                <div class="card item" data-avatar="Peggy" data-img="peggy">
-                                    <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
+                            <div class="d-flex row row-cols-2 row-cols-lg-6">
+                                <div class="card item 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">
                                         <h5 class="card-title">Peggy</h5>
                                     </div>
                                 </div>
-                                <div class="card item" data-avatar="Stacy" data-img="stacy">
-                                    <div class="imgfr"><img src="static/img/stacy.webp" class="card-img-top" alt="..."></div>
+                                <div class="card item col" data-avatar="Stacy" data-img="stacy">
+                                    <div class="imgfr"><img src="static/img/stacy.webp" class="card-img-top" alt="...">
+                                    </div>
                                     <div class="card-body">
                                         <h5 class="card-title">Stacy</h5>
                                     </div>
                                 </div>
-                                <div class="card item" data-avatar="Nina黑" data-img="ninablack">
-                                    <div class="imgfr"><img src="static/img/ninablack.webp" class="card-img-top" alt="..."></div>
+                                <div class="card item col" data-avatar="Nina黑" data-img="ninablack">
+                                    <div class="imgfr"><img src="static/img/ninablack.webp" class="card-img-top"
+                                            alt="..."></div>
                                     <div class="card-body">
                                         <h5 class="card-title">Nina黑</h5>
                                     </div>
                                 </div>
-                                <div class="card item" data-avatar="Nina灰" data-img="ninawhite">
-                                    <div class="imgfr"><img src="static/img/ninawhite.webp" class="card-img-top" alt="..."></div>
+                                <div class="card item col" data-avatar="Nina灰" data-img="ninawhite">
+                                    <div class="imgfr"><img src="static/img/ninawhite.webp" class="card-img-top"
+                                            alt="..."></div>
                                     <div class="card-body">
                                         <h5 class="card-title">Nina灰</h5>
                                     </div>
                                 </div>
-                                <div class="card item" data-avatar="Summer韓小夏" data-img="summer">
-                                    <div class="imgfr"><img src="static/img/summer.webp" class="card-img-top" alt="..."></div>
+                                <div class="card item col" data-avatar="Summer韓小夏" data-img="summer">
+                                    <div class="imgfr"><img src="static/img/summer.webp" class="card-img-top" alt="...">
+                                    </div>
                                     <div class="card-body">
                                         <h5 class="card-title">Summer韓小夏</h5>
                                     </div>
                                 </div>
-                                <div class="card item" data-avatar="Jocelyn" data-img="Jocelyn">
-                                    <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top" alt="..."></div>
+                                <div class="card item col" data-avatar="Jocelyn" data-img="Jocelyn">
+                                    <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top"
+                                            alt="..."></div>
                                     <div class="card-body">
                                         <h5 class="card-title">Jocelyn</h5>
                                     </div>
                                 </div>
-                                <div class="card item" data-avatar="Angela" data-img="Angela">
-                                    <div class="imgfr"><img src="static/img/Angela.webp" class="card-img-top" alt="..."></div>
+                                <div class="card item col" data-avatar="Angela" data-img="Angela">
+                                    <div class="imgfr"><img src="static/img/Angela.webp" class="card-img-top" alt="...">
+                                    </div>
                                     <div class="card-body">
                                         <h5 class="card-title">Angela</h5>
                                     </div>
                                 </div>
                             </div>
                         </fieldset>
-                        <input id="send_slide" type="button" name="next" class="action-button" set-lan="value:submit" value="" />
+                        <input id="send_slide" type="button" name="next" class="action-button" set-lan="value:submit"
+                            value="" />
                     </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>
@@ -210,9 +313,9 @@
                 </ul>
                 <p class="right-text text-white d-inline-block">Choozmo All Rights Reserved</p>
             </div> -->
-      
+
             <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span> -->
-              
+
             <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
                 <div class="modal-dialog">
                     <div class="modal-content">
@@ -224,14 +327,15 @@
                             <div class="modal-terms">
                                 <ol class="ps-0">
                                     <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
-                                    <li>2. 影像連結檔案格式支援:<stong class="strong">.png, jpg, .mp4</stong></li>
+                                    <li>2. 影像連結檔案格式支援:<stong class="strong">.png, jpg, .mp4</stong>
+                                    </li>
                                     <li>3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看</li>
                                 </ol>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div> 
+            </div>
             <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
                 <div class="modal-dialog modal-dialog-scrollable">
                     <div class="modal-content">
@@ -249,13 +353,14 @@
                     </div>
                 </div>
             </div>
-            <div class="modal" tabindex="-1"  id="avatarmega" aria-labelledby="history" aria-hidden="true">
+            <div class="modal" tabindex="-1" id="avatarmega" aria-labelledby="history" aria-hidden="true">
                 <div class="modal-dialog modal-dialog-centered">
                     <div class="modal-content text-center">
                         <div class="modal-body">
                             <img class="modal-img" src="" alt="">
                             <h5 class="modal-title mt-2"></h5>
-                            <button type="button" class="btn btn-secondary btn-dismiss" data-bs-dismiss="modal" set-lan="html:close">Close</button>
+                            <button type="button" class="btn btn-secondary btn-dismiss" data-bs-dismiss="modal"
+                                set-lan="html:close">Close</button>
                         </div>
                     </div>
                 </div>
@@ -271,40 +376,57 @@
 
     </footer>
     <!-- ================================================================= -->
-  
+
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
+    <script src="https://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.js"></script>
     <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
-        }
-    }
-});
-</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();
+        });
+
+        $(".close-btn").click(function () {
+            $(".sidenav").hide();
+        });
+        $("#lang-manu").hide();
+
+        $("#changeLanguage").click(function () {
+            $("#lang-manu").slideToggle();
+            $("#lang-arrow").toggleClass("arrowdoup");
+        });
+    </script>
 </body>
 
 </html>

+ 1 - 0
html/make_video_slide_eng.html

@@ -28,6 +28,7 @@
 <body>
     <!-- ================================================================= -->
     <!-- navbar -->
+   
     <nav class="navbar navbar-expand-lg navbar-light">
         <div class="container-fluid">
             <a class="navbar-brand" href="index.html">AI Spokesgirl</a>

+ 7 - 0
html/script_profile.js

@@ -456,4 +456,11 @@ $( ".menu-bar" ).click(function() {
 
 $( ".close-btn" ).click(function() {
   $(".sidenav").hide();
+});
+
+$("#lang-manu").hide();
+
+$( "#changeLanguage" ).click(function() {
+  $("#lang-manu").slideToggle();
+  $("#lang-arrow").toggleClass("arrowdoup");
 });

+ 6 - 0
html/static/script_util.js

@@ -814,3 +814,9 @@ const copyToClipboard = str => {
   })
 };
 
+$("#lang-manu").hide();
+
+$( "#changeLanguage" ).click(function() {
+  $("#lang-manu").slideToggle();
+  $("#lang-arrow").toggleClass("arrowdoup");
+});

+ 13 - 11
html/user_profile2.html

@@ -38,7 +38,9 @@
             <div class="card-img-overlay pt-2 py-lg-3">
                 <nav class="navbar navbar-expand-lg navbar-light pt-0">
                     <div class="navbar-collapse d-flex" id="navbarSupportedContent">
-                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                        <a href="./index.html">
+                            <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                        </a>
                         <ul style="flex-direction: row" class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0 mt-2">
                             <li class="nav-item me-3">
                                 <a class="nav-link active text-white" aria-current="page" href="pricing.html"
@@ -129,27 +131,27 @@
                                     <i class="fas fa-history me-2"></i>
                                     <lan set-lan="html:history">歷史紀錄</lan>
                                 </li>
+
                                 <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>
 
-                                    <li class="nav-list-item dropdown me-lg-1">
-                                        <a style="font-size: 18px;" class="nav-link dropdown-toggle text-white" href="#"
+                                    <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 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>
-                                        <ul class="dropdown-menu bg-transparent" aria-labelledby="navbarDropdownM">
-                                            <li><button class="nav-link lan-swtich" aria-current="page"
+                                    </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" aria-current="page"
+                                            <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>
-                                        </ul>
-                                    </li>
+                                    </div>
                                     <li class="nav-item text-white  me-lg-1">
                                         <a style="font-size: 18px;" class="nav-link btn-logout text-white"
                                             aria-current="page" set-lan="html:logout-m">登出</a>
@@ -171,7 +173,7 @@
                                     style="width: 20px;" src="./static/img/contactus/youtube.png" alt=""></a>
                             <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
                                     src="./static/img/contactus/twitter.png" alt=""></a>
-                            <p class="Reserved text-white text-start mt-3 ps-2">Choozmo All Rights Reserved</p>
+                            <p class="Reserved text-white text-start mt-3 ps-3 ps-lg-3">Choozmo All Rights Reserved</p>
                         </div>
                     </div>
                 </div>