Jared 2 роки тому
коміт
8bda266eaa
100 змінених файлів з 9160 додано та 0 видалено
  1. 547 0
      html/index.html
  2. 196 0
      html/indexB.html
  3. 418 0
      html/index_eng.html
  4. 289 0
      html/invite.html
  5. 201 0
      html/invite.js
  6. 184 0
      html/login.html
  7. 237 0
      html/login.js
  8. 174 0
      html/login.js_bak
  9. 283 0
      html/loginB.html
  10. 509 0
      html/make_video.html
  11. 645 0
      html/make_video2.html
  12. 531 0
      html/make_video_long.html
  13. 478 0
      html/make_video_slide.html
  14. 376 0
      html/make_video_slide_eng.html
  15. 339 0
      html/pricing.html
  16. 218 0
      html/pricingB.html
  17. 73 0
      html/privacy.html
  18. 325 0
      html/register.html
  19. 205 0
      html/register.js
  20. 187 0
      html/reset_pwd.html
  21. 137 0
      html/reset_pwd.js
  22. 185 0
      html/reset_pwd_email.html
  23. 149 0
      html/reset_pwd_email.js
  24. 655 0
      html/script_eng.js
  25. 14 0
      html/script_index.js
  26. 758 0
      html/script_long.js
  27. 517 0
      html/script_profile.js
  28. BIN
      html/static/.DS_Store
  29. 30 0
      html/static/common.js
  30. 110 0
      html/static/gen_avatar.html
  31. 189 0
      html/static/gen_avatar.js
  32. BIN
      html/static/img/Amelia.webp
  33. BIN
      html/static/img/Angela.webp
  34. BIN
      html/static/img/Cube-0.9s-197px.gif
  35. BIN
      html/static/img/Isabela.webp
  36. BIN
      html/static/img/Jocelyn.webp
  37. BIN
      html/static/img/Kristina.webp
  38. BIN
      html/static/img/Paula.webp
  39. BIN
      html/static/img/Sofia.webp
  40. BIN
      html/static/img/Spinner-1s-181px.gif
  41. BIN
      html/static/img/Usecases/示意_內容創作.webp
  42. BIN
      html/static/img/Usecases/示意_商家報導.webp
  43. BIN
      html/static/img/Usecases/示意_展覽.webp
  44. BIN
      html/static/img/Usecases/示意_教育培訓.webp
  45. BIN
      html/static/img/Usecases/示意_新聞.webp
  46. BIN
      html/static/img/Usecases/示意_機構.webp
  47. BIN
      html/static/img/Usecases/示意_氣象.webp
  48. BIN
      html/static/img/Usecases/示意_產品介紹.webp
  49. BIN
      html/static/img/Usecases/示意_觀光導覽.webp
  50. BIN
      html/static/img/angus.webp
  51. BIN
      html/static/img/book.png
  52. BIN
      html/static/img/bx_loader.gif
  53. BIN
      html/static/img/checked (2).png
  54. 1 0
      html/static/img/close.svg
  55. BIN
      html/static/img/contactus/CMM_LOGO.png
  56. BIN
      html/static/img/contactus/IG.png
  57. BIN
      html/static/img/contactus/LINE_logo.svg.png
  58. BIN
      html/static/img/contactus/choozmo (2).png
  59. BIN
      html/static/img/contactus/choozmo-nav.png
  60. BIN
      html/static/img/contactus/facebook_logos_PNG19753.png
  61. BIN
      html/static/img/contactus/linkedin-logo-copy.png
  62. BIN
      html/static/img/contactus/man.jpg
  63. BIN
      html/static/img/contactus/twitter.png
  64. BIN
      html/static/img/contactus/woman.png
  65. BIN
      html/static/img/contactus/youtube.png
  66. BIN
      html/static/img/draft-button.png
  67. BIN
      html/static/img/girl2.png
  68. BIN
      html/static/img/index/BG.webp
  69. BIN
      html/static/img/index/BG_phone.webp
  70. BIN
      html/static/img/index/CMM_LOGO_白.png
  71. BIN
      html/static/img/index/Group 29.webp
  72. BIN
      html/static/img/index/Group 30.webp
  73. BIN
      html/static/img/index/PC.webp
  74. BIN
      html/static/img/index/组 29-m.webp
  75. BIN
      html/static/img/index/组 29.webp
  76. BIN
      html/static/img/intro.png
  77. BIN
      html/static/img/intro2.jpg
  78. BIN
      html/static/img/intro_en.png
  79. BIN
      html/static/img/nav-bg.png
  80. BIN
      html/static/img/news-anchor (1).png
  81. BIN
      html/static/img/ninablack.webp
  82. BIN
      html/static/img/ninawhite.webp
  83. BIN
      html/static/img/nina灰.webp
  84. BIN
      html/static/img/nina黑.webp
  85. BIN
      html/static/img/peggy.webp
  86. BIN
      html/static/img/question.png
  87. BIN
      html/static/img/sideImg.png
  88. BIN
      html/static/img/stacy.webp
  89. BIN
      html/static/img/summer.webp
  90. BIN
      html/static/img/summer韓小夏.webp
  91. BIN
      html/static/img/transfer.png
  92. 0 0
      html/static/img/undraw_male_avatar_323b.svg
  93. 0 0
      html/static/img/undraw_mobile_user_7oqo.svg
  94. 0 0
      html/static/img/undraw_video_upload_3d4u.svg
  95. 0 0
      html/static/img/undraw_void_3ggu.svg
  96. BIN
      html/static/img/undraw_well_done_i2wr.png
  97. BIN
      html/static/img/upload_img.png
  98. BIN
      html/static/img/userprofile/Icon awesome-facebook-square.png
  99. BIN
      html/static/img/userprofile/Icon awesome-twitter-square.png
  100. BIN
      html/static/img/userprofile/Icon ionic-md-add-circle.png

+ 547 - 0
html/index.html

@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <div id="fb-root"></div>
+    <!-- Google Tag Manager -->
+    <script>(function (w, d, s, l, i) {
+            w[l] = w[l] || []; w[l].push({
+                'gtm.start':
+                    new Date().getTime(), event: 'gtm.js'
+            }); var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', 'GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH" height="0" width="0"
+            style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <div style="margin-bottom:100px" class="card">
+        <img class="profile-bgimg card-img img-fluid" src="./static/img/index/BG.webp"></img>
+        <img class="profile-bgimg-m card-img img-fluid" src="./static/img/index/BG_phone.webp"></img>
+        <!-- 行動版選單 -->
+        <div class="menu-box">
+            <div class="menu-box2">
+                <div style="font-size: 28px;" class="close_btn text-end">
+                    <i class="fas fa-times text-white me-3 mt-3"></i>
+                </div>
+                <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"
+                            set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li id="changeLanguage" class="nav-item me-lg-1">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                            data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <!-- <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                    onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                    onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul> <div></div>-->
+                    </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">
+                        <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                            set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                            set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="card-img-overlay pt-0 mt-3 px-0">
+            <nav class="navbar navbar-expand-lg navbar-light px-3 pt-0">
+                <div class="container-fluid">
+                    <!-- <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 d-flex" id="navbarSupportedContent">
+                        <a class="navbar-brand" href="index.html"><img class="img-fluid" style="width: 150px;"
+                                src="./static/img/index/CMM_LOGO_白.png" alt=""></a>
+
+                        <ul class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0">
+                            <li class="nav-item"> 
+                                <a class="nav-link text-white  btn-makev" aria-current="page"
+                                href="./make_video2.html" set-lan="html:make_video">影片製作</a>
+                            </li>
+
+                            <li class="nav-item">
+                                <a class="nav-link active text-white" aria-current="page" href="pricing.html"
+                                    set-lan="html:pricing">早鳥方案</a>
+                                   
+                            </li>
+                            
+                          
+                            <li class="nav-item dropdown">
+                                <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)" value="en">English</button></li>
+                                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                            onclick="changeLan(this)" value="zh">中文</button></li>
+                                </ul>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link active btn-login text-white" aria-current="page" href="loginB.html"
+                                    set-lan="html:login">登入</a>
+                            </li>
+                            <li class="nav-item">
+                                <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">
+                                <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>
+                </div>
+            </nav>
+
+            <div class="index-banner">
+                <div class="row px-0 mx-0">
+                    <div class="col-lg-6 px-0">
+                        <div class="text-white">
+                            <h1 set-lan="html:Virtual_Anchor" class="fw-bold">虛擬AI擬真主播</h1>
+                            <p set-lan="html:Virtual_Anchor_text">匯集多種AI智能技術、能說各種國外語言
+                                技術強大快速部屬、影片經濟效益大
+                                無論內銷外銷、嘴型真實感。</p>
+                            <div class="index-CTA">
+                                <a href="./register.html"><button set-lan="html:pricing_checkout" class="CTA-btnA fw-bold">立即註冊</button></a>
+                                <a href="./pricingB.html"><button  set-lan="html:launch_special" class="CTA-btnB fw-bold">早鳥方案</button></a>
+
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-6 px-0">
+                        <img class="PC-img" src="./static/img/index/PC.webp" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- ================================================================= -->
+    <!-- 製作影片一鍵合成 -->
+    <div class="index-sec02">
+        <div class="make-video">
+            <div class="row mx-0 px-0">
+                <div class="col-lg-6 order-lg-1 order-2">
+                    <img class="img-fluid" src="./static/img/index/组 29.webp" alt="" set-lan="img:index-sec02" ></img>
+                    <!-- <img class="profile-bgimg-m img-fluid" src="./static/img/index/组 29.webp" alt="" set-lan="img:index-sec02-m" ></img> -->
+
+                </div>
+                <div class="col-lg-6 d-flex align-items-center order-lg-1 order-1 px-0">
+                    <div class="makeVideo-text">
+                        <h1 class="fw-bold" set-lan="html:hero_title">製作影片 一鍵合成</h1>
+                        <p set-lan="html:hero_txt1">輸入文字素材,即速產生影片
+                            創作影片,不再需要錄影機、演員、麥克風繁雜器材。
+                            大幅省下時間、人力、器材成本。</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+    <section class="sec-usecase">
+        <h1 set-lan="html:index-usecases">使用情境</h1>
+        <hr>
+        <div class="container">
+            <div class="row">
+                <div class="col-6 col-md-3 px-0">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr"
+                            style="background-image: url('./static/img/Usecases/示意_產品介紹.webp');"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="MplGQ5JUmnY"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i>
+                            <lan set-lan="html:usecase_1">產品介紹</lan>
+                        </h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3 px-0">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr"
+                            style="background-image: url('./static/img/Usecases/示意_教育培訓.webp');"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="gFjSwMEoXNg"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i>
+                            <lan set-lan="html:usecase_2">教育培訓</lan>
+                        </h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3 px-0">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr"
+                            style="background-image: url('./static/img/Usecases/示意_氣象.webp');"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="83uE8kVIWsM"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i>
+                            <lan set-lan="html:usecase_3">氣象播報</lan>
+                        </h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3 px-0">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr"
+                            style="background-image: url('./static/img/Usecases/示意_新聞.webp');"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="XfTQ2uIWWbA"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i>
+                            <lan set-lan="html:usecase_4">新聞播報</lan>
+                        </h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3 px-0">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr"
+                            style="background-image: url('./static/img/Usecases/示意_內容創作.webp');"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="6JVBDIM7zac"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i>
+                            <lan set-lan="html:usecase_5">個人內容創作</lan>
+                        </h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3 px-0">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr"
+                            style="background-image: url('./static/img/Usecases/示意_觀光導覽.webp');"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="nTbMKWMYvnc"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i>
+                            <lan set-lan="html:usecase_6">觀光導覽</lan>
+                        </h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3 px-0">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr"
+                            style="background-image: url('./static/img/Usecases/示意_展覽.webp');"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="y0dgW_dcgDE"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i>
+                            <lan set-lan="html:usecase_7">展覽導覽</lan>
+                        </h3>
+                    </div>
+                </div>
+                <div class="col-6 col-md-3 px-0">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr"
+                            style="background-image: url('./static/img/Usecases/示意_商家報導.webp');"
+                            data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="E4Dt7eU3WCo"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i>
+                            <lan set-lan="html:usecase_8">廣告行銷</lan>
+                        </h3>
+                    </div>
+                </div>
+                <!-- <div class="col-12 col-md-3 my-5">
+                    <div class="usecase-block card text-center">
+                        <div class="usecase-imgfr" style="background-image: url('/html/static/img/Usecases/示意_機構.webp');" data-bs-toggle="modal" data-bs-target="#exampleModal" data-ytid="6JvZtbv6vNs"></div>
+                        <h3 class="usecase-sub"><i class="fas fa-caret-right"></i> <lan set-lan="html:usecase_9">機構資訊宣導</lan</h3>
+                    </div>
+                </div> -->
+            </div>
+        </div>
+        <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel2"
+            aria-hidden="true">
+            <div class="modal-dialog modal-fullscreen">
+                <div class="modal-content bg-transparent border-0">
+                    <div class="modal-header border-0">
+                        <h5 class="modal-title" id="exampleModalLabel"></h5>
+                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                            aria-label="Close"><img src="./img/close.svg" alt=""></button>
+                    </div>
+                    <div class="modal-body">
+                        <style>
+                            .embed-container {
+                                position: relative;
+                                padding-bottom: 56.25%;
+                                height: 0;
+                                overflow: hidden;
+                                max-width: 100%;
+                            }
+
+                            .embed-container iframe,
+                            .embed-container object,
+                            .embed-container embed {
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                            }
+                        </style>
+                        <div class='embed-container'><iframe class='youtube-video'
+                                src='https://www.youtube.com/embed//XfTQ2uIWWbA' frameborder='0' allowfullscreen
+                                height="394" allow="autoplay;"></iframe></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- ================================================================= -->
+    <!-- registerbtn -->
+    <div class="indxe-CTA text-center py-5">
+        <h2 class="mt-5 fw-bold" set-lan="html:index_action">想要快速製作影音內容?立即註冊,開始創作!</h2>
+        <a href="./register.html"><button class="CTA-btnB my-3 fw-bold"
+                set-lan="html:pricing_checkout">立即註冊</button></a>
+    </div>
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="price-int">
+        <div class="price-content m-auto">
+            <!-- <div class="register_btn">
+                <p class="mt-5" set-lan="html:index_action">想要快速製作影音內容?立即註冊,開始創作!</p>
+                <div class="text-center">
+                    <a href="./register.html"><button class="get-started my-3"
+                            set-lan="html:pricing_checkout">立即註冊</button></a>
+                </div>
+            </div> -->
+            <div class="price-content-1 text-center">
+                <h1>
+                    <lan set-lan="html:launch_special">早鳥方案</lan>
+                </h1>
+                <hr class="mt-3">
+                <div class="row">
+                    <div class="price-item col-12 col-lg-4">
+                        <div class="row px-0 mx-0">
+                            <div class="col-lg-12 col-4 ps-0">
+                                <a href="./pricing.html"><img src="./static/img/book.png" alt=""></a>
+                            </div>
+                            <div class="col-lg-12 col-8 pe-0">
+                                <h2 set-lan="html:pricing_lan">語言選擇: 中文 | 英文</h2>
+                                <ul class="price-text ms-lg-5 ms-3">
+                                    <li set-lan="html:index_li1_1">支援中英文內容</li>
+                                    <li set-lan="html:index_li1_2">可加入字幕</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="price-item col-12 col-lg-4">
+                        <div class="row px-0 mx-0">
+                            <div class="col-lg-12 col-4 ps-0">
+                                <a href="./pricing.html"><img src="./static/img/news-anchor (1).png" alt=""></a>
+                            </div>
+                            <div class="col-lg-12 col-8 pe-0">
+                                <h2 set-lan="html:pricing_avatars">多款預設AI代言主播任你選</h2>
+                                <ul class="price-text ms-3">
+                                    <li set-lan="html:index_li2_1">無人物肖像權問題</li>
+                                    <li set-lan="html:index_li2_2">人物表情、動作自然</li>
+                                    <li set-lan="html:index_li2_3">因應主題,選擇合適人物</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="price-item col-12 col-lg-4">
+                        <div class="row px-0 mx-0">
+                            <div class="col-lg-12 col-4 ps-0">
+                                <a href="./pricing.html"><img src="./static/img/transfer.png" alt=""></a>
+                            </div>
+                            <div class="col-lg-12 col-8 pe-0">
+                                <h2 set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</h2>
+                                <ul class="price-text ms-1">
+                                    <li set-lan="html:index_li3_1">可上傳圖片或是影片作為背景</li>
+                                    <li set-lan="html:index_li3_2">可輸入文字腳本及投影片</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- <h1 class="mt-5 d-inline pe-5">$1200/7min</h1> -->
+                <!-- <p class="register_text mt-5" set-lan="html:index_action">想要快速製作影音內容?立即註冊,開始創作!</p>
+                <a href="./register.html"><button class="get-started my-3"
+                        set-lan="html:pricing_checkout">立即註冊</button></a> -->
+                <div class="text-center mt-5">
+                    <a href="./pricing.html"><button set-lan="html:launch_special" class="CTA-btnB fw-bold">早鳥方案</button></a>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <!-- <footer class="fixed-bottom text-center py-2">
+
+    </footer> -->
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12 col-sm-6">
+                    <img src="./static/img/contactus/choozmo (2).png" alt="" width="250">
+                    <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
+                    <div class="footer-follow" set-lan="html:follow_us">關注我們</div>
+                    <div class="footer-socials">
+                        <a href="https://www.linkedin.com/company/choozmo/"><img
+                                src="./static/img/contactus/linkedin-logo-copy.png" alt="" width="32px"
+                                height="32px"></a>
+                        <a href="https://www.facebook.com/choozmo/"><img
+                                src="./static/img/contactus/facebook_logos_PNG19753.png" alt="" width="32px"
+                                height="32px"></a>
+                        <a href="https://line.me/R/ti/p/@choozmo?from=page"><img
+                                src="./static/img/contactus/LINE_logo.svg.png" alt="" width="32px" height="32px"></a>
+                        <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
+                                src="./static/img/contactus/youtube.png" alt="" width="32px" height="32px"></a>
+                        <a href="https://www.instagram.com/choozmo_cmm/"><img src="./static/img/contactus/IG.png" alt=""
+                                width="32px" height="32px"></a>
+                        <a href="https://twitter.com/ai_cmm"><img src="./static/img/contactus/twitter.png" alt=""
+                                width="32px" height="32px"></a>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6">
+                    <div class="footer-contacts">
+                        <h5>CONTACT</h5>
+                        <div>
+                            <lan set-lan="html:contact_name">集仕多股份有限公司</lan><br>
+                            <lan set-lan="html:address">新竹縣竹北市復興二路229號9樓之9</lan><br>
+                            <lan set-lan="html:contact_tel">聯絡電話</lan>:036670804<br>
+                            <lan set-lan="html:contact_mail">聯絡信箱</lan>:SERVICE@CHOOZMO.COM
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+    <script>
+        $('.btn-login').hide();
+        $('.btn-userProfile').hide();
+        $('.btn-logout').hide();
+        function get_jwt_token() {
+            console.log(document.cookie);
+            if (!document.cookie) {
+                return
+            }
+            try {
+                jwt_raw = document.cookie.split(';').filter(s => s.includes('jwt_token'))[0];
+                return jwt_raw.split('=')[1];
+
+            } catch (e) {
+                return undefined;
+            }
+        }
+
+        function checkRoute() {
+            let jwt_token = get_jwt_token();
+            if (jwt_token == undefined) {
+                console.log(jwt_token); // test
+                $('.btn-login').show();
+                $('.btn-userProfile').hide();
+                $('.btn-logout').hide();
+                return;
+            }
+            axios({
+                method: 'post',
+                url: 'https://www.choozmo.com:8887/user_profile',
+                headers: {
+                    'accept': 'text/html',
+                    'Authorization': `Bearer ${jwt_token}`
+                }
+            }).then(res => {
+                console.log(res.data);
+                if (res.status !== 200) {
+                    $('.btn-login').show();
+                    $('.btn-userProfile').hide();
+                    $('.btn-logout').hide();
+                }
+                $('.btn-login').hide();
+                $('.btn-userProfile').show();
+                $('.btn-logout').show();
+            }).catch(err => {
+                console.log(err);
+            });
+        }
+        checkRoute();
+    </script>
+    <script>
+
+
+        $(".usecase-imgfr").click(function () {
+            let ytid = $(this).data('ytid');
+            $('.youtube-video').attr('src', `https://www.youtube.com/embed//${ytid}?autoplay=1`);
+        });
+        $(".btn-close").click(function () {
+            $('.youtube-video').attr('src', ``);
+        });
+        $('#exampleModal').on('hidden.bs.modal', function () {
+            $('.youtube-video').attr('src', ``);
+        });
+
+        $(".menu-bar").click(function () {
+            $(".menu-box").fadeIn();
+            $(".menu-box2").fadeIn();
+
+        });
+
+        $(".close_btn").click(function () {
+            $(".menu-box").fadeOut();
+            $(".menu-box2").fadeOut();
+
+        });
+        $("#lang-manu").hide();
+
+        $("#changeLanguage").click(function () {
+            $("#lang-manu").slideToggle();
+            $("#lang-arrow").toggleClass("arrowdoup");
+        });
+    </script>
+</body>
+
+</html>

+ 196 - 0
html/indexB.html

@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <div id="fb-root"></div>
+
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+         
+            <a class="navbar-brand" href="index.html"><img class="img-fluid" style="width: 150px;" src="./static/img/contactus/choozmo-nav.png" alt=""></a>
+            <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" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="loginB.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="px-0">
+        <div class="text-center">
+            <a href="login.html">
+                <img class="img-fluid" src="static/img/intro2.jpg" set-lan="img:intro_img"></img>
+            </a>
+        </div>
+    </div>
+    <div class="price-int mt-5">
+        <div class="price-content m-auto">
+            <div class="register_btn">
+                <p class="mt-5" set-lan="html:index_action">想要快速製作影音內容?立即註冊,開始創作!</p>
+                <div class="text-center">
+                    <a href="./register.html"><button class="get-started my-3" set-lan="html:pricing_checkout">立即註冊</button></a>
+                </div>
+            </div>
+            <div class="price-content-1 text-center">
+                <h1 class="pb-5 pe-3"><i style="color:#EA5413" class="fas fa-tags pe-2"></i><lan set-lan="html:launch_special">限時早鳥方案</lan></h1>
+                <div class="row">
+                    <div class="col-12 col-lg-4">
+                        <a href="./pricing.html"><img style="width: 128px;" src="./static/img/book.png" alt=""></a>                     
+                        <h2 set-lan="html:pricing_lan">語言選擇: 中文 | 英文</h2>
+                        <ul class="price-text ms-lg-5 ms-3">
+                            <li set-lan="html:index_li1_1">支援中英文內容</li>
+                            <li set-lan="html:index_li1_2">可加入字幕</li>
+                        </ul>
+                    </div>
+                    <div class="col-12 col-lg-4">
+                        <a href="./pricing.html"><img style="width: 128px;" src="./static/img/news-anchor (1).png" alt=""></a>
+                        <h2 set-lan="html:pricing_avatars">多款預設AI代言主播任你選</h2>
+                            <ul class="price-text ms-3">
+                                <li set-lan="html:index_li2_1">無人物肖像權問題</li>
+                                <li set-lan="html:index_li2_2">人物表情、動作自然</li>
+                                <li set-lan="html:index_li2_3">因應主題,選擇合適人物</li>
+                            </ul>
+                    </div>
+                    <div class="col-12 col-lg-4">
+                        <a href="./pricing.html"><img style="width: 128px;" src="./static/img/transfer.png" alt=""></a>                    
+                        <h2 set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</h2>
+                        <ul class="price-text ms-1">
+                            <li set-lan="html:index_li3_1">可上傳圖片或是影片作為背景</li>
+                            <li set-lan="html:index_li3_2">可輸入文字腳本及投影片</li>
+                        </ul>
+                    </div>
+                </div>
+             
+                <!-- <h1 class="mt-5 d-inline pe-5">$1200/7min</h1> -->
+                <p class="register_text mt-5" set-lan="html:index_action">想要快速製作影音內容?立即註冊,開始創作!</p>
+                <a href="./register.html"><button class="get-started my-3" set-lan="html:pricing_checkout">立即註冊</button></a>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <!-- <footer class="fixed-bottom text-center py-2">
+
+    </footer> -->
+    <footer class="footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12 col-sm-6">
+                    <img src="./static/img/contactus/choozmo (2).png" alt="" width="250">
+                    <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
+                    <div class="footer-follow" set-lan="html:follow_us">關注我們</div>
+                    <div class="footer-socials">
+                        <a href="https://www.linkedin.com/company/choozmo/"><img src="./static/img/contactus/linkedin-logo-copy.png" alt="" width="32px" height="32px"></a>
+                        <a href="https://www.facebook.com/choozmo/"><img src="./static/img/contactus/facebook_logos_PNG19753.png" alt="" width="32px" height="32px"></a>
+                        <a href="https://line.me/R/ti/p/@choozmo?from=page"><img src="./static/img/contactus/LINE_logo.svg.png" alt="" width="32px" height="32px"></a>
+                        <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img src="./static/img/contactus/youtube.png" alt="" width="32px" height="32px"></a>
+                        <a href="https://www.instagram.com/choozmo_cmm/"><img src="./static/img/contactus/IG.png" alt="" width="32px" height="32px"></a>
+                        <a href="https://twitter.com/ai_cmm"><img src="./static/img/contactus/twitter.png" alt="" width="32px" height="32px"></a>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6">
+                    <div class="footer-contacts">
+                        <h5>CONTACT</h5>
+                        <div>
+                            <lan set-lan="html:contact_name">集仕多股份有限公司</lan><br><lan set-lan="html:address">新竹縣竹北市復興二路229號9樓之9</lan><br><lan set-lan="html:contact_tel">聯絡電話</lan>:036670804<br><lan set-lan="html:contact_mail">聯絡信箱</lan>:SERVICE@CHOOZMO.COM
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+    <script>
+        const btnLoginPage = document.querySelector('.btn-login');
+        const btnUserProfile = document.querySelector('.btn-userProfile');
+        const btnLogout = document.querySelector('.btn-logout');
+        function loginControl() {
+            btnLoginPage.style.display = 'block';
+            btnLogout.style.display = 'none';
+            btnUserProfile.style.display = 'none';
+        }
+
+        loginControl();
+    </script>
+</body>
+
+</html>

+ 418 - 0
html/index_eng.html

@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<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">
+  <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="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>
+
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+  <!-- End Google Tag Manager -->
+</head>
+
+<body>
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+  <div class="loading"></div>
+  <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> -->
+          <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" set-lan="html:pricing">Pricing</a>
+              </li>
+              <li class="nav-item dropdown me-3 me-lg-1">
+                <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown"
+                    role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    中/En
+                </a>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                    <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                            onclick="changeLan(this);window.location.reload();" value="en">English</button></li>
+                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                            onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+                </ul>
+              </li>
+              <!-- <li class="nav-item">
+                <a class="nav-link active btn-login text-white" aria-current="page" href="login.html">Login</a>
+              </li> -->
+              <li class="nav-item">
+                <a class="nav-link btn-userProfile text-white" aria-current="page" href="user_profile2.html" set-lan="html:user_profile">User
+                  Profile</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-logout text-white" aria-current="page" set-lan="html:logout">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>
+  </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 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="./user_profile2.html"><a class="nav-link active ps-3 pt-0" aria-current="page"
+                  href="./user_profile2.html">AI Spokesgirl</a></h2>
+            </div>
+            <div class="userName"></div>
+            <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">
+            <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">Create something today!</p>
+            <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+              <a class="nav-link btn-gocreate text-white col-6 btn-makev" aria-current="page"
+                  href="./make_video2.html" set-lan="html:make_video">影片製作</a>
+              <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                  href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+            </div>
+            <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+              <a class="nav-link btn-gocreate text-white col-6" aria-current="page"
+                href="./make_video_slide_eng.html" set-lan="html:make_slides">Make Videos <br>By Slides</a>
+              <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">Make
+                English<br>Videos</a>
+            </div>
+            <hr>
+            <ul class="nav-list ps-0">
+              <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal" data-bs-target="#howto"><i
+                  class="fas fa-book-open me-2"></i>
+                <lan set-lan="html:usage_intro">Usage Introduction</lan>
+              </li>
+              <a style="text-decoration: none;color:white;" href="./user_profile2.html">
+                <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal">
+                  <i class="fas fa-user me-2"></i>
+                  <lan set-lan="html:user_profile">User Profile</lan>
+                </li>
+              </a>
+              <li class="nav-list-item pb-1 text-start ps-3 mb-3" data-bs-toggle="modal" data-bs-target="#history"
+                onclick="openNav()">
+                <i class="fas fa-history me-2"></i>
+                <lan set-lan="html:history">History</lan>
+              </li>
+              <li class="nav-list-item pb-1 ps-3 text-start" data-bs-toggle="modal" data-bs-target="#draftModal"
+                onclick="openDrafts()">
+                <i class="fas fa-pencil-ruler me-2"></i>
+                <lan set-lan="html:drafts"></lan>
+              </li>
+              <div class="Mobile-nav">
+                <hr>
+                <li class="nav-item text-start">
+                  <a style="font-size: 18px;" class="nav-link active text-white" aria-current="page" href="pricing.html"><lan set-lan="html:pricing-m">Pricing</lan></a>
+                </li>
+                <li class="nav-item text-start">
+                  <a style="font-size: 18px;" class="nav-link active btn-login text-white" aria-current="page" href="login.html"><i class="fas fa-sign-in-alt text-white me-3"></i><lan set-lan="html:login">Login</lan></a>
+                </li>
+                <!-- <li class="nav-item text-start">
+                  <a style="font-size: 18px;" class="nav-link btn-userProfile text-white" aria-current="page" href="user_profile2.html">User
+                    Profile</a>
+                </li> -->
+                <div id="lang-manu">
+                  <li><button class="nav-link lan-swtich bg-transparent text-white border-0 mx-auto" aria-current="page"
+                          set-lan="html:en" onclick="changeLan(this)"
+                          value="en">English</button></li>
+                  <li><button class="nav-link lan-switch bg-transparent text-white border-0 mx-auto" aria-current="page"
+                          set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button>
+                  </li>
+                </div>
+                <li class="nav-item text-start">
+                  <a style="font-size: 18px;" class="nav-link btn-logout text-white" aria-current="page"><i class='fas fa-sign-out-alt text-white me-3'></i><lan set-lan="html:logout">Log Out</lan></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-3 ps-lg-3">Choozmo All Rights Reserved</p>
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-10 px-0">
+        <div>
+          <form id="msform">
+            <div class="linker__box">
+              <p>Preview video</p>
+              <i class="fas fa-link"></i>
+              <a id='linker' style="display: none;" class="ms-2" set-lan="html:preview_videos">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="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"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt=""
+                  data-bs-toggle="tooltip" data-bs-placement="right" title="The spokesgirl of your video"></h3>
+              <select id="avatar" class='avatar'>
+                <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option> 
+                <option value="7">Peggy</option>
+                <option value="8">Stacy</option>
+                <option value="11">Summer</option>
+                <option value="12">Jocelyn</option>
+                <option value="13">Angela</option>
+                <option value="15">Isabela</option>
+                <option value="16">Sofia</option>
+                <option value="17">Kristina</option>
+                <option value="18">Paula</option>
+                <option value="19">Amelia</option>
+              </select>
+              <div class="d-flex row row-cols-2 row-cols-lg-6">
+                <div class="card col" data-avatar="Peggy" data-img="peggy">
+                  <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
+                  <div class="card-body">
+                    <h5 class="card-title">Peggy</h5>
+                  </div>
+                </div>
+                <div class="card 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 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 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 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 class="card col" data-avatar="Isabela" data-img="Isabela">
+                  <div class="imgfr"><img src="static/img/Isabela.webp" class="card-img-top" alt="..."></div>
+                  <div class="card-body">
+                    <h5 class="card-title">Isabela</h5>
+                  </div>
+                </div>
+                <div class="card col" data-avatar="Sofia" data-img="Sofia">
+                  <div class="imgfr"><img src="static/img/Sofia.webp" class="card-img-top" alt="..."></div>
+                  <div class="card-body">
+                    <h5 class="card-title">Sofia</h5>
+                  </div>
+                </div>
+                <div class="card col" data-avatar="Kristina" data-img="Kristina">
+                  <div class="imgfr"><img src="static/img/Kristina.webp" class="card-img-top" alt="..."></div>
+                  <div class="card-body">
+                    <h5 class="card-title">Kristina</h5>
+                  </div>
+                </div>
+                <div class="card col" data-avatar="Paula" data-img="Paula">
+                  <div class="imgfr"><img src="static/img/Paula.webp" class="card-img-top" alt="..."></div>
+                  <div class="card-body">
+                    <h5 class="card-title">Paula</h5>
+                  </div>
+                </div>
+                <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                  <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="..."></div>
+                  <div class="card-body">
+                    <h5 class="card-title">Amelia</h5>
+                  </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' style="box-shadow: none;-webkit-box-shadow: none; padding: 0;">
+              <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:content">內容素材</lan><img class="ms-1"
+                  src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right"
+                  title="Supported File Formats: png, jpg, mp4"></h3><br />
+              <div class="img-inputTest mt-3 input_eng">
+                
+              </div>
+              <span class="addsec">+</span>
+              <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" />
+            </fieldset>
+          </form>
+          <!-- <div style="width: 80%;margin: 0 auto;"><iframe src="http://www.choozmo.com:8168/ai_anchor_video/16250306886652043.mp4" frameborder="0" style="width: 100%;height: 400px;"></iframe></div> -->
+        </div>
+
+      </div>
+    </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">Usage Introduction</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <div class="modal-terms">
+              <ol class="ps-0">
+                <li 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 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 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 class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" 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-lan="html:drafts">草稿夾</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>
+                      <div class="draft-table col-12 d-block" id="draft-table">
+                          <div class="card p-3 text-center">
+                              <table class="table text-center">
+                                  <thead>
+                                      <tr>
+                                      <th scope="col" set-lan="html:video_title">標題</th>
+                                      <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                      </tr>
+                                  </thead>
+                                  <tbody class="draft-content">
+
+                                  </tbody>
+                              </table>
+                          </div>
+                      </div>
+                  </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+  <script src="static/loading-overlay.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>
+
+  </body>
+
+</html>

+ 289 - 0
html/invite.html

@@ -0,0 +1,289 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <div class="card">
+        <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+        <!-- 行動版選單 -->
+        <div class="menu-box">
+            <div class="menu-box2">
+                <div style="font-size: 28px;" class="close_btn text-end">
+                    <i class="fas fa-times text-white me-3 mt-3"></i>
+                </div>
+                <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"
+                            set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li id="changeLanguage" class="nav-item me-lg-1">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                            data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <!-- <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul> -->
+                    </li>
+                    <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">
+                        <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                            set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                            set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="card-img-overlay pt-2 py-lg-3">
+            <nav class="navbar navbar-expand-lg navbar-light d-block d-md-none pt-0">
+
+                <!-- <a class="navbar-brand d-block d-md-none" href="index.html">AI Spokesgirl</a> -->
+
+                <!-- <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 d-flex" id="navbarSupportedContent">
+                    <a href="./index.html">
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    </a>
+                    <ul class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="pricing.html"
+                                set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                                set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                                set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </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>    
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="container-fluid px-0">
+        <div class="container-login">
+            <div class="row-img">
+                <video autoplay loop class="video">
+                    <source src="static/img/登入影片.mp4" type="video/mp4">
+                </video>
+                <div class="row-img-box text-center">
+                    <h2 set-lan="html:logleftbox1">將你的生活、創作 、宣傳做成影片</h2>
+                    <h4 set-lan="html:logleftbox2">開始使用 AI Spokesgirl</h4>
+                </div>
+                <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
+            </div>
+            <div class="row-login">
+                <div class="login-top d-none d-md-block">
+                    <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" set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html" set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="login-content">
+                    <!-- 已登入 {% if success %} -->
+                  <!-- 未登入 {% endif %} -->
+                    <h2 class="my-3 title" set-lan="html:goRegister">REGISTER</h2>
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade p-lg-3 show active" id="register" role="tabpanel" aria-labelledby="register-tab">
+                            <form>
+                                <div class="form-floating mb-3">
+                                    <input type="text" class="form-control" id="username" name="username" placeholder="User Name" required>
+                                    <label for="username"><i class="fas fa-user me-2"></i><lan set-lan="html:userName">User Name</lan></label>
+                                </div>
+                                <div class="form-floating mb-3">
+                                    <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
+                                    <label for="email"><i class="fas fa-envelope me-2"></i><lan set-lan="html:emailAddress">Email address</lan></label>
+                                </div>
+                                <div class="form-floating mb-3 position-relative">
+                                    <input type="password" class="form-control" id="password" name="password"  placeholder="Password" required>
+                                    <label for="password">
+                                        <i class="fas fa-lock me-2"></i>
+                                        <lan set-lan="html:register_password">Password</lan>
+                                        <lan style="font-size: 12px;" set-lan="html:password_length">(4-12位數密碼)</lan>
+                                    </label>
+                                    <i class="fas fa-eye psd_visible position-absolute"></i>
+                                    <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
+                                </div>
+                                <div class="form-floating mb-3 position-relative">
+                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password"  placeholder="Password" required>
+                                    <label for="confirm_password">
+                                        <i class="fas fa-lock me-2"></i>
+                                        <lan set-lan="html:confirm_password">Password</lan>
+                                        <lan style="font-size: 12px;" set-lan="html:password_confirm_txt">(再次輸入您的密碼)</lan>
+                                    </label>
+                                    <i class="fas fa-eye psd_visible position-absolute"></i>
+                                    <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
+                                </div>
+                                <!-- <div class="mb-3">
+                                    <input type="checkbox" id="privacy" name="privacy" checked required>
+                                    <label for="privacy"><a href="privacy.html" class="link_privacy" target="_blank" set-lan="html:privacy_term">同意隱私政策及使用條款</a></label>
+                                </div> -->
+                                <div class="d-flex justify-content-center">
+                                    <p set-lan="html:oldHere">已經有帳號?</p>
+                                    <a class="ms-1" href="loginB.html" set-lan="html:login">登入</a>
+                                </div>
+                                <div class="mb-3 d-flex justify-content-center">
+                                    <button type="button" class="btn btn-primary align-items-center btn-register" set-lan="html:goRegister_link">立即註冊</button>
+                                </div>
+                                <small class="register__policies">
+                                    <lan set-lan="html:privacy_term_1">註冊即表示您已閱讀並同意</lan><a href="" onclick="window.open('./privacy.html')"><lan set-lan="html:privacy_term_2">服務條款</lan></a>
+                                    <lan set-lan="html:privacy_term_3">及</lan>
+                                    <a href="" onclick="window.open('./privacy.html')"><lan set-lan="html:privacy_term_4">隱私權政策</lan></a>
+                                </small>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validatorjs/2.0.0/validator.min.js" 
+        integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
+    <script src="invite.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+    <script>
+        $(".menu-bar").click(function () {
+            $(".menu-box").fadeIn();
+            $(".menu-box2").fadeIn();
+
+        });
+
+        $(".close_btn").click(function () {
+            $(".menu-box").fadeOut();
+            $(".menu-box2").fadeOut();
+
+        });
+        $("#lang-manu").hide();
+
+        $("#changeLanguage").click(function () {
+            $("#lang-manu").slideToggle();
+            $("#lang-arrow").toggleClass("arrowdoup");
+        });
+    </script>
+</body>
+
+</html>

+ 201 - 0
html/invite.js

@@ -0,0 +1,201 @@
+const btnRegister = document.querySelector('.btn-register');
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+const registerPassword = document.querySelector('#register #password');
+const btnLoginPage_d = document.querySelector('.login-top .btn-login');
+const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
+const btnLogout_d= document.querySelector('.login-top .btn-logout');
+$('.psd_visible').hide();
+
+$('.psd_invisible').click(function(){
+    $(this).prev().toggle();
+    $(this).toggle();
+    $(this).parent().children(':first').attr('type', 'text');
+})
+
+$('.psd_visible').click(function(){
+    $(this).toggle();
+    $(this).next().toggle();
+    $(this).parent().children(':first').attr('type', 'password');
+})
+
+registerPassword.addEventListener('keyup', registerByEnter);
+btnRegister.addEventListener('click', register);
+
+function registerByEnter(e) {
+    if (e.keyCode === 13) {
+        e.preventDefault();
+        console.log('login!');
+        register();
+    }
+};
+
+function validateEmail(email) {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if(re.test(String(email).toLowerCase()) === false) {
+        $('#register [name = "email"]').addClass('error');
+        if( !$('.error-text').length ) {
+            let msg = '請輸入正確E-mail';
+
+            if (lang == 'en') { 
+                msg = 'Please enter valid Email format.';
+            }
+
+            $('input.error').after('<p class="error-text" set-lan="html:errorEmail">' + msg + '</p>');
+        } 
+    } else {
+        $('#register [name = "email"]').removeClass('error');
+        $('.error-text').remove();
+    }
+    
+    return re.test(String(email).toLowerCase());
+}
+
+function validatePassword(psd) {
+    if(psd.length >=4) {
+        $('#register [name = "password"]').removeClass('error');
+        $('.error-text').remove();
+        return true;
+    } else {
+        $('#register [name = "password"]').addClass('error');
+        if( !$('.error-text').length ) {
+            $('input.error').after('<p class="error-text" set-lan="html:errorPsd">密碼至少為4個字元</p>');
+        } 
+        return false;
+    }
+}
+
+function validateConfirmPsd(psd1, psd2) {
+    if(psd1 == psd2) {
+        $('#register #confirm_password').removeClass('error');
+        $('.error-text').remove();
+        return true;
+    } else {
+        $('#register #confirm_password').addClass('error');
+        if( !$('.error-text').length ) {
+            $('input.error').after('<p class="error-text" set-lan="html:errorConsistentPsd">密碼輸入需一致</p>');
+        } 
+        return false;
+    }
+}
+
+function getpathId() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get('code');
+    return id;
+}
+
+console.log(getpathId());
+
+function register() {
+    let url = 'https://www.choozmo.com:8887/register';
+    let userName = $('#register [name = "username"]').val();
+    let email = $('#register [name = "email"]').val();
+    let password = $('#register [name = "password"]').val();
+    let confirm_psd = $('#register #confirm_password').val();
+    let code = getpathId();
+
+    let userObj = {
+      username: userName,
+      email,
+      password
+    }
+
+    if(code) {
+      url = 'https://www.choozmo.com:8887/register_by_invite';
+      userObj = {
+        username: userName,
+        email,
+        password,
+        code: code
+      }
+    }
+
+    // 註冊資料檢查
+    if (username == '' || password == '') {
+        let title = "註冊失敗";
+        let text = "請先輸入您的帳號/密碼";
+
+        if (lang == 'en') { 
+            title = "Login Failed!";
+            text = "Please enter your username and password";
+        }
+
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            text: text,
+            confirmButtonColor: '#3085d6',
+        });
+
+        return;
+    }
+
+    if(userName && validateEmail(email) && validatePassword(password) && validateConfirmPsd(password, confirm_psd)) {
+        JsLoadingOverlay.show({
+            "overlayBackgroundColor": "#666666",
+            "overlayOpacity": 0.6,
+            "spinnerIcon": "ball-circus",
+            "spinnerColor": "#000",
+            "spinnerSize": "3x",
+            "overlayIDName": "overlay",
+            "spinnerIDName": "spinner",
+            "offsetX": 0,
+            "offsetY": 0,
+            "containerID": null,
+            "lockScroll": false,
+            "overlayZIndex": 10,
+            "spinnerZIndex": 11
+        });
+        console.log(userObj);
+        const headers = {
+            "accept": "application/json",
+            "Content-Type": "application/json"
+        }
+        axios({
+            method: 'post',
+            url: 'https://www.choozmo.com:8887/register',
+            headers: headers,
+            data: userObj
+        }).then(res => {
+            console.log(res.data.msg);
+            JsLoadingOverlay.hide();
+            let text;
+            if (lang == 'en') { 
+                text = res.data.msg.eng;
+            } else {
+                text = res.data.msg.zh;
+            }
+            Swal.fire({
+                icon: 'info',
+                text: text,
+                confirmButtonColor: '#3085d6',
+            });
+        }).catch(err => {
+            console.log(err);
+            var title = "錯誤處理中,請稍後再試";
+
+            if (lang == 'en') { // 英文版訊息
+                title = "Oops! Errors occurred. Please try it later!"
+            }
+            Swal.fire({
+                title: title,
+                icon: 'error',
+                confirmButtonColor: '#3085d6',
+            });
+        })
+    }
+}
+
+
+function loginControl() {
+    btnLoginPage.style.display = 'block';
+    btnLogout.style.display = 'none';
+    btnUserProfile.style.display = 'none';
+    btnLoginPage_d.style.display = 'block';
+    btnLogout_d.style.display = 'none';
+    btnUserProfile_d.style.display = 'none';
+}
+
+loginControl();

+ 184 - 0
html/login.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+  
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <div class="loading"></div>
+    <nav class="navbar navbar-expand-lg navbar-light d-block d-md-none">
+        <div class="container-fluid">
+            <!-- <a class="navbar-brand d-block d-md-none" href="index.html">AI Spokesgirl</a> -->
+            <a class="navbar-brand" href="index.html"><img class="img-fluid" style="width: 150px;" src="./static/img/contactus/choozmo-nav.png" alt=""></a>
+            <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" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+  
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="container-fluid px-0">
+        <div class="container-login">
+            <div class="row-img">
+                <video autoplay loop class="video">
+                    <source src="static/img/登入影片.mp4" type="video/mp4">
+                </video>
+                <div class="row-img-box text-center">
+                    <h2 set-lan="html:logleftbox1">將你的生活、創作 、宣傳做成影片</h2>
+                    <h4 set-lan="html:logleftbox2">開始使用 AI Spokesgirl</h4>
+                </div>
+                <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
+            </div>
+            <div class="row-login">
+                <div class="login-top d-none d-md-block">
+                    <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" set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html" set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="login-content">
+                    <!-- 已登入 {% if success %} -->
+                  <!-- 未登入 {% endif %} -->
+                    <h2 class="my-3 title" set-lan="html:login">LOGIN</h2>
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade p-lg-3 show active" id="login" role="tabpanel" aria-labelledby="login-tab">
+                            
+                                <div class="form-floating mb-3">
+                                    <input type="text" class="form-control" id="username" name="username" placeholder="User name">
+                                    <label for="username"><i class="fas fa-user me-2"></i>User name</label>
+                                </div>
+                                <div class="form-floating mb-3">
+                                    <input type="password" class="form-control" id="password" name="password" placeholder="Password">
+                                    <label for="password"><i class="fas fa-lock me-2"></i>Password</label>
+                                </div>
+                                <div class="d-flex justify-content-center">
+                                    <p set-lan="html:newHere">還沒有帳號?</p>
+                                    <a class="ms-2" set-lan="html:goRegister" href="register.html">註冊</a> 
+                                    <p class="mx-2"> / </p>
+                                    <a set-lan="html:forgotPsd" href="reset_pwd_email.html">忘記密碼</a>
+                                </div>
+                                <div class="d-flex justify-content-center">
+                                    <button id="btn_login" set-lan="html:login_link">立即登入</button>
+                                </div>
+                                <div class="mt-3 d-flex justify-content-center">
+                                    
+                                </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validatorjs/2.0.0/validator.min.js" 
+        integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
+    <script src="login.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+</body>
+
+</html>

+ 237 - 0
html/login.js

@@ -0,0 +1,237 @@
+const btnLogin = document.querySelector('#btn_login');
+const inputPassword = document.querySelector('#login #password');
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+const btnLoginPage_d = document.querySelector('.login-top .btn-login');
+const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
+const btnLogout_d= document.querySelector('.login-top .btn-logout');
+
+$('.psd_visible').hide();
+$('.loading').hide();
+
+$('.psd_invisible').click(function(){
+    $(this).prev().toggle();
+    $(this).toggle();
+    $(this).parent().children(':first').attr('type', 'text');
+})
+
+$('.psd_visible').click(function(){
+    $(this).toggle();
+    $(this).next().toggle();
+    $(this).parent().children(':first').attr('type', 'password');
+})
+
+inputPassword.addEventListener('keyup', loginByEnter);
+btnLogin.addEventListener('click', login);
+
+function loginByEnter(e) {
+    if (e.keyCode === 13) {
+        e.preventDefault();
+        console.log('login!');
+        login();
+    }
+};
+
+function login(){
+    console.log('login!');
+    var url = "https://www.choozmo.com:8887/login";
+    var username = $('#username').val();
+    var password = $('#password').val();
+    var regex = new RegExp("^[a-zA-Z0-9 ]+$");
+
+    if (username == '' || password == '') {
+        let title = "登入失敗";
+        let text = "請先輸入您的帳號/密碼";
+
+        if (lang == 'en') { 
+            title = "Login Failed!";
+            text = "Please enter your username and password";
+        }
+
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            text: text,
+            confirmButtonColor: '#3085d6',
+        });
+
+        return;
+    }
+
+    if (!regex.test(username)) {
+        let title = "字元有誤";
+        let text = "名稱僅得包含英文及數字";
+        if (lang == 'en') { 
+            title = "Invalid username!";
+            text = "Please enter valid username";
+        }
+
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            text: text,
+            confirmButtonColor: '#3085d6',
+        });
+
+        return;
+    }
+
+    
+    var data = "grant_type=&username=" + username + "&password="+password+"&scope=&client_id=&client_secret=";
+    const headers = {
+        "accept": "application/json",
+        "Content-Type": "application/x-www-form-urlencoded"
+    }
+    $('.loading').show();
+    console.log(data);
+    axios({
+        method: 'post',
+        url: url,
+        headers: headers,
+        data: data
+    }).then(res => {
+        console.log(res.data);
+        document.cookie = 'jwt_token='+res.data.access_token;
+        if(res.data.access_token!=null && res.data.veri == 'ok') {
+            var title = "登入成功";
+            if (lang == 'en') { // 英文版訊息
+                title = "Login Successfully!"
+            }
+
+            Swal.fire({
+                title: title,
+                icon: 'success',
+                confirmButtonColor: '#3085d6',
+            });
+            $('.loading').hide();
+            window.setTimeout(() => {
+                window.location.href = 'user_profile2.html';
+            }, 2000);
+            btnLoginPage.style.display = 'none';
+            
+        } else if (res.data.access_token!=null && res.data.veri != 'ok') {
+            var title = "請前往信箱完成驗證";
+            $('.loading').hide();
+            if (lang == 'en') { // 英文版訊息
+                title = "Please check your email box to get validated!"
+            }
+
+            Swal.fire({
+                title: title,
+                icon: 'error',
+                text: responseOBJ.detail,
+                confirmButtonColor: '#3085d6',
+            });
+        } else {
+            var title = "登入失敗";
+            $('.loading').hide();
+            if (lang == 'en') { // 英文版訊息
+                title = "Login Failed!"
+            }
+            Swal.fire({
+                title: title,
+                icon: 'error',
+                text: responseOBJ.detail,
+                confirmButtonColor: '#3085d6',
+            });
+            
+        }
+        
+    }).catch(err => {
+        console.log(err);
+        var title = "錯誤處理中,請稍後再試";
+
+        if (lang == 'en') { // 英文版訊息
+            title = "Oops! Errors occurred. Please try it later!"
+        }
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            confirmButtonColor: '#3085d6',
+        });
+        $('.loading').hide();
+    })
+}
+/*     var xhr = new XMLHttpRequest();
+    xhr.open("POST", url);
+    xhr.setRequestHeader("accept", "application/json");
+    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+            console.log(xhr.responseText); // test
+            responseOBJ = JSON.parse(xhr.responseText);
+            // document.cookie = 'jwt_token='+responseOBJ.jwt_token    // access_token -> jwt_token
+            document.cookie = 'jwt_token='+responseOBJ.access_token;
+            console.log(responseOBJ);
+            if (responseOBJ.access_token!=null)
+                {
+                    var title = "登入成功";
+
+                    if (lang == 'en') { // 英文版訊息
+                        title = "Login Successfully!"
+                    }
+
+                    Swal.fire({
+                        title: title,
+                        icon: 'success',
+                        confirmButtonColor: '#3085d6',
+                    });
+                    window.setTimeout(() => {
+                        window.location.href = 'user_profile2.html';
+                    }, 2000);
+                    btnLoginPage.style.display = 'none';
+                }
+            else{
+                var title = "登入失敗";
+
+                if (lang == 'en') { // 英文版訊息
+                    title = "Login Failed!"
+                }
+
+                Swal.fire({
+                    title: title,
+                    icon: 'error',
+                    text: responseOBJ.detail,
+                    confirmButtonColor: '#3085d6',
+                });
+            }          
+        }
+    };
+    
+
+    // 登入資料檢查
+    if (username == '' || password == '') {
+        let title = "登入失敗";
+        let text = "請先輸入您的帳號/密碼";
+
+        if (lang == 'en') { 
+            title = "Login Failed!";
+            text = "Please enter your username and password";
+        }
+
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            text: text,
+            confirmButtonColor: '#3085d6',
+        });
+
+        return;
+    }
+
+    
+    result = xhr.send(data);
+    console.log(result);
+} */
+
+function loginControl() {
+    btnLoginPage.style.display = 'block';
+    btnLogout.style.display = 'none';
+    btnUserProfile.style.display = 'none';
+    btnLoginPage_d.style.display = 'block';
+    btnLogout_d.style.display = 'none';
+    btnUserProfile_d.style.display = 'none';
+}
+
+loginControl();

+ 174 - 0
html/login.js_bak

@@ -0,0 +1,174 @@
+const btnLogin = document.querySelector('#btn_login');
+const inputPassword = document.querySelector('#login #password');
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+const btnLoginPage_d = document.querySelector('.login-top .btn-login');
+const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
+const btnLogout_d= document.querySelector('.login-top .btn-logout');
+
+inputPassword.addEventListener('keyup', loginByEnter);
+btnLogin.addEventListener('click', login);
+
+function loginByEnter(e) {
+    if (e.keyCode === 13) {
+        e.preventDefault();
+        console.log('login!');
+        login();
+    }
+};
+
+function login(){
+    console.log('login!');
+    var url = "https://www.choozmo.com:8887/login";
+    var username = $('#username').val();
+    var password = $('#password').val();
+
+    if (username == '' || password == '') {
+        let title = "登入失敗";
+        let text = "請先輸入您的帳號/密碼";
+
+        if (lang == 'en') { 
+            title = "Login Failed!";
+            text = "Please enter your username and password";
+        }
+
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            text: text,
+            confirmButtonColor: '#3085d6',
+        });
+
+        return;
+    }
+    
+    var data = "grant_type=&username=" + username + "&password="+password+"&scope=&client_id=&client_secret=";
+    const headers = {
+        "accept": "application/json",
+        "Content-Type": "application/x-www-form-urlencoded"
+    }
+    axios({
+        method: 'post',
+        url: url,
+        headers: headers,
+        data: data
+    }).then(res => {
+        console.log(res.data);
+        document.cookie = 'jwt_token='+res.data.access_token;
+        if(res.data.access_token!=null) {
+            var title = "登入成功";
+            if (lang == 'en') { // 英文版訊息
+                title = "Login Successfully!"
+            }
+
+            Swal.fire({
+                title: title,
+                icon: 'success',
+                confirmButtonColor: '#3085d6',
+            });
+            window.setTimeout(() => {
+                window.location.href = 'user_profile2.html';
+            }, 2000);
+            btnLoginPage.style.display = 'none';
+        } else {
+            var title = "登入失敗";
+
+            if (lang == 'en') { // 英文版訊息
+                title = "Login Failed!"
+            }
+
+            Swal.fire({
+                title: title,
+                icon: 'error',
+                text: responseOBJ.detail,
+                confirmButtonColor: '#3085d6',
+            });
+        }
+        
+    }).catch(err => {
+        console.log(err);
+    })
+}
+/*     var xhr = new XMLHttpRequest();
+    xhr.open("POST", url);
+    xhr.setRequestHeader("accept", "application/json");
+    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+            console.log(xhr.responseText); // test
+            responseOBJ = JSON.parse(xhr.responseText);
+            // document.cookie = 'jwt_token='+responseOBJ.jwt_token    // access_token -> jwt_token
+            document.cookie = 'jwt_token='+responseOBJ.access_token;
+            console.log(responseOBJ);
+            if (responseOBJ.access_token!=null)
+                {
+                    var title = "登入成功";
+
+                    if (lang == 'en') { // 英文版訊息
+                        title = "Login Successfully!"
+                    }
+
+                    Swal.fire({
+                        title: title,
+                        icon: 'success',
+                        confirmButtonColor: '#3085d6',
+                    });
+                    window.setTimeout(() => {
+                        window.location.href = 'user_profile2.html';
+                    }, 2000);
+                    btnLoginPage.style.display = 'none';
+                }
+            else{
+                var title = "登入失敗";
+
+                if (lang == 'en') { // 英文版訊息
+                    title = "Login Failed!"
+                }
+
+                Swal.fire({
+                    title: title,
+                    icon: 'error',
+                    text: responseOBJ.detail,
+                    confirmButtonColor: '#3085d6',
+                });
+            }          
+        }
+    };
+    
+
+    // 登入資料檢查
+    if (username == '' || password == '') {
+        let title = "登入失敗";
+        let text = "請先輸入您的帳號/密碼";
+
+        if (lang == 'en') { 
+            title = "Login Failed!";
+            text = "Please enter your username and password";
+        }
+
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            text: text,
+            confirmButtonColor: '#3085d6',
+        });
+
+        return;
+    }
+
+    
+    result = xhr.send(data);
+    console.log(result);
+} */
+
+function loginControl() {
+    btnLoginPage.style.display = 'block';
+    btnLogout.style.display = 'none';
+    btnUserProfile.style.display = 'none';
+    btnLoginPage_d.style.display = 'block';
+    btnLogout_d.style.display = 'none';
+    btnUserProfile_d.style.display = 'none';
+}
+
+loginControl();

+ 283 - 0
html/loginB.html

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    <div class="loading"></div>
+    <!-- ================================================================= -->
+    <div class="card">
+        <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+        <!-- 行動版選單 -->
+        <div class="menu-box">
+            <div class="menu-box2">
+                <div style="font-size: 28px;" class="close_btn text-end">
+                    <i class="fas fa-times text-white me-3 mt-3"></i>
+                </div>
+                <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"
+                            set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li id="changeLanguage" class="nav-item me-lg-1">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                            data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <!-- <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul> -->
+                    </li>
+                    <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">
+                        <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                            set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                            set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="card-img-overlay pt-2 py-lg-3">
+            <nav class="navbar navbar-expand-lg navbar-light d-block d-md-none pt-0">
+
+                <!-- <a class="navbar-brand d-block d-md-none" href="index.html">AI Spokesgirl</a> -->
+
+                <!-- <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 d-flex" id="navbarSupportedContent">
+                    <a href="./index.html">
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    </a>
+                    <ul class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="pricing.html"
+                                set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                                set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                                set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </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>
+
+    <!-- navbar -->
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="container-fluid px-0">
+        <div class="container-login">
+            <div class="row-img">
+                <video autoplay loop class="video">
+                    <source src="static/img/登入影片.mp4" type="video/mp4">
+                </video>
+                <div class="row-img-box text-center">
+                    <h2 set-lan="html:logleftbox1">將你的生活、創作 、宣傳做成影片</h2>
+                    <h4 set-lan="html:logleftbox2">開始使用 AI Spokesgirl</h4>
+                </div>
+                <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
+            </div>
+            <div class="row-login">
+                <div class="login-top d-none d-md-block">
+                    <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"
+                                set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                                set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                                set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="login-content">
+                    <!-- 已登入 {% if success %} -->
+                    <!-- 未登入 {% endif %} -->
+                    <h2 class="my-3 title" set-lan="html:login">LOGIN</h2>
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade p-lg-3 show active" id="login" role="tabpanel"
+                            aria-labelledby="login-tab">
+
+                            <div class="form-floating mb-3">
+                                <input type="text" class="form-control" id="username" name="username"
+                                    placeholder="User name">
+                                <label for="username">
+                                    <i class="fas fa-user me-2"></i>
+                                    <lan set-lan="html:userName">User Name</lan>
+                                </label>
+                            </div>
+                            <div class="form-floating mb-3 position-relative">
+                                <input type="password" class="form-control" id="password" name="password"
+                                    placeholder="Password">
+                                <label for="password">
+                                    <i class="fas fa-lock me-2"></i>
+                                    <lan set-lan="html:password">Password</lan>
+                                </label>
+                                <i class="fas fa-eye psd_visible position-absolute"></i>
+                                <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
+                            </div>
+                            <div class="d-flex justify-content-center">
+                                <p set-lan="html:newHere">還沒有帳號?</p>
+                                <a class="ms-2" set-lan="html:goRegister" href="register.html">註冊</a>
+                                <p class="mx-2"> / </p>
+                                <a set-lan="html:forgotPsd" href="reset_pwd_email.html">忘記密碼</a>
+                            </div>
+                            <div class="d-flex justify-content-center">
+                                <button id="btn_login" set-lan="html:login_link">立即登入</button>
+                            </div>
+                            <div class="mt-3 d-flex justify-content-center">
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validatorjs/2.0.0/validator.min.js"
+        integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
+    <script src="login.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+    <script>
+        $(".menu-bar").click(function () {
+            $(".menu-box").fadeIn();
+            $(".menu-box2").fadeIn();
+
+        });
+
+        $(".close_btn").click(function () {
+            $(".menu-box").fadeOut();
+            $(".menu-box2").fadeOut();
+
+        });
+        $("#lang-manu").hide();
+
+        $("#changeLanguage").click(function () {
+            $("#lang-manu").slideToggle();
+            $("#lang-arrow").toggleClass("arrowdoup");
+        });
+    </script>
+</body>
+
+</html>

+ 509 - 0
html/make_video.html

@@ -0,0 +1,509 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <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"
+                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" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="./user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav> -->
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="container-fluid px-0 mx-0">
+        <div class="row px-0 mx-0">
+            <div class="sidenav-box col-lg-2">
+                <div id="mySidenav" class="sidenav container-fluid px-0">
+                    <div class="sidenav-content">
+                        <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="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
+                        </div>
+                        <div class="choozmologo text-start">
+                            <!-- <a class="navbar-brand pb-0 d-inline" href="index.html"><img class="img-fluid" style="width: 120px;" src="./static/img//contactus/CMM_LOGO.png" alt=""></a> -->
+                        </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_video2.html" set-lan="html:make_video">影片製作</a>
+                            <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                                href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                        </div>
+                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                            <a class="nav-link btn-gocreate text-white col-6 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="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>
+                </div>             
+                <!-- <div id="mySidenav" class="sidenav">
+                    <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>
+                            </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 copy"></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="將作為影片的內嵌標題 The title of your video"></h3>            
+                            <input id=title type="text" name='t1' class='title_new' value="" placeholder="標題"/> <br/>
+                        </fieldset>
+                        <fieldset>
+                            <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            
+                            <select id="avatar" class='avatar'>
+                                <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>              
+                                <option value="7">Peggy</option>
+                                <option value="8">Stacy</option>
+                                <option value="11">Summer韓小夏</option>
+                                <option value="12">Jocelyn</option>
+                                <option value="13">Angela</option>
+                                <option value="15">Isabela</option>
+                                <option value="16">Sofia</option>
+                                <option value="17">Kristina</option>
+                                <option value="18">Paula</option>
+                            </select>
+                            <div class="d-flex row row-cols-2 row-cols-lg-6">
+                                <div class="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="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 class="card col" data-avatar="Isabela" data-img="Isabela">
+                                    <div class="imgfr"><img src="static/img/Isabela.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Isabela</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Sofia" data-img="Sofia">
+                                    <div class="imgfr"><img src="static/img/Sofia.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Sofia</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Kristina" data-img="Kristina">
+                                    <div class="imgfr"><img src="static/img/Kristina.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Kristina</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Paula" data-img="Paula">
+                                    <div class="imgfr"><img src="static/img/Paula.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Paula</h5>
+                                    </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/>
+                            <div class="subtitle-inputs">
+                            
+                            </div>
+                            <span class="add">+</span>
+                        </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格式 Supported File Formats: png, jpg, mp4"></h3><br/>
+                            <div class="img-inputs">
+                                <!-- <div>
+                                    <input type="text" name="t1" placeholder="1" class="txtsrc txtsrc1" style="width:calc(100% - 7rem);">
+                                    <span class="img-toggle" style="width:6rem"><i class="fas fa-images"></i></span>
+                                    <div class="img-box">
+                                        <input type="text" name="m1" class="imgsrc imgsrc1" placeholder="1">
+                                        <input id="img1" type="file" class="img_uploader img_up" style="display: none;">
+                                        <label for="img1" class="upload-btn" set-lan="html:upload_file">上傳檔案</label>
+                                    </div>
+                                </div> -->
+                            </div>
+                            <span class="addimg">+</span>
+                            <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" value="送出" />
+                            <span class="draft-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="儲存為草稿 Save as draft" set-lan="html:save_draft_btn">存為草稿</span>
+                            <h3 style="display: none;" class="fs-subtitle"><lan set-lan="html:processing_progress">處理進度</lan></h3>
+                            <div style="display: none;" id="myProgress">
+                                <div style="display: none;" id="myBar">0%</div>
+                            </div>
+                        </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>
+
+            </div>
+            <!-- <div id="mySidenav" class="sidenav">
+                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+                <h2 class="go_title" href="index.html"><a class="nav-link active" aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                <ul class="nav-list">
+                    <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>
+                    <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>
+                <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>
+                    </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>
+                        </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>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/script_util.js"></script>
+    <script src="static/common.js"></script>
+<script>
+$('.owl-carousel').owlCarousel({
+  loop: true,
+  margin: 10,
+  nav: false,
+  mouseDrag: true,
+  touchDrag: true,
+  smartSpeed: 1000,
+  autoplay: true,
+  autoplayTimeout: 8000,
+  autoplayHoverPause: false,
+  responsive: {
+    0: {
+      items: 1
+    },
+    600: {
+      items: 2
+    },
+    1000: {
+      items: 4
+    }
+  }
+});
+$( ".menu-bar" ).click(function() {
+  $(".sidenav").show();
+});
+
+$( ".close-btn" ).click(function() {
+  $(".sidenav").hide();
+});
+</script>
+</body>
+
+</html>

+ 645 - 0
html/make_video2.html

@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <title>AI Spokesgirl v1.0</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://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">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <div class="loading"></div>
+    <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"
+                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" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="./user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav> -->
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="container-fluid px-0 mx-0">
+        <div class="row px-0 mx-0">
+            <div class="sidenav-box col-lg-2">
+                <div id="mySidenav" class="sidenav container-fluid px-0">
+                    <div class="sidenav-content">
+                        <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="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
+                        </div>
+                        <div class="choozmologo text-start">
+                            <!-- <a class="navbar-brand pb-0 d-inline" href="index.html"><img class="img-fluid" style="width: 120px;" src="./static/img//contactus/CMM_LOGO.png" alt=""></a> -->
+                        </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_video2.html" set-lan="html:make_video">影片製作</a>
+                            <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                                href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                        </div>
+                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                            <a class="nav-link btn-gocreate text-white col-6 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 mb-3" 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>
+                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#draftModal"
+                                    onclick="openDrafts()">
+                                    <i class="fas fa-pencil-ruler me-2"></i>
+                                    <lan set-lan="html:drafts"></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" class="d-block">
+                                        <li><button class="nav-link lan-swtich bg-transparent text-white border-0 mx-auto" aria-current="page"
+                                                set-lan="html:en" onclick="changeLan(this)"
+                                                value="en">English</button></li>
+                                        <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>
+                        <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 id="mySidenav" class="sidenav">
+                    <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>
+                            </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 copy"></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="將作為影片的內嵌標題 The title of your video"></h3>            
+                            <input id=title type="text" name='t1' class='title_new' value="" placeholder="標題" /> <br/>
+                        </fieldset>
+                        <fieldset>
+                            <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            
+                            <!-- <select id="avatar" class='avatar'>
+                                <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option>              
+                                <option value="7">Peggy</option>
+                                <option value="8">Stacy</option>
+                                <option value="11">Summer韓小夏</option>
+                                <option value="12">Jocelyn</option>
+                                <option value="13">Angela</option>
+                                <option value="15">Isabela</option>
+                                <option value="16">Sofia</option>
+                                <option value="17">Kristina</option>
+                                <option value="18">Paula</option>
+                                <option value="19">Amelia</option>
+                            </select> -->
+                            <!-- <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
+                                <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="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 class="card col" data-avatar="Isabela" data-img="Isabela">
+                                    <div class="imgfr"><img src="static/img/Isabela.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Isabela</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Sofia" data-img="Sofia">
+                                    <div class="imgfr"><img src="static/img/Sofia.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Sofia</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Kristina" data-img="Kristina">
+                                    <div class="imgfr"><img src="static/img/Kristina.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Kristina</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Paula" data-img="Paula">
+                                    <div class="imgfr"><img src="static/img/Paula.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Paula</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                                    <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Amelia</h5>
+                                    </div>
+                                </div>
+                            </div> -->
+                            <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
+                                <div class="card item col avatar-img" data-avatar="Peggy" data-img="peggy">
+                                    <input class="avatar-checkbox" type="checkbox" id="peggy" name="AvatarVal" value="7">
+                                    <label for="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>
+                                    </label>
+                                </div>
+                                <div class="card item col avatar-img" data-avatar="Stacy" data-img="stacy">
+                                    <input class="avatar-checkbox" type="checkbox" id="Stacy" name="AvatarVal" value="8">
+                                    <label for="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>
+                                    </label>
+                                </div>
+                                <div class="card item col" data-avatar="Summer韓小夏" data-img="summer">
+                                    <input class="avatar-checkbox" type="checkbox" id="Summer韓小夏" name="AvatarVal" value="11">
+                                    <label for="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>
+                                    </label>
+                                </div>
+
+                                <div class="card item col" data-avatar="Jocelyn" data-img="Jocelyn">
+                                    <input class="avatar-checkbox" type="checkbox" id="Jocelyn" name="AvatarVal" value="12">
+                                   <label for="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>
+                                   </label>
+                                </div>
+                                <div class="card item col" data-avatar="Angela" data-img="Angela">
+                                    <input class="avatar-checkbox" type="checkbox" id="Angela" name="AvatarVal" value="13">
+                                    <label for="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>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Isabela" data-img="Isabela">
+                                    <input class="avatar-checkbox" type="checkbox" id="Isabela" name="AvatarVal" value="15">
+                                    <label for="Isabela">
+                                        <div class="imgfr"><img src="static/img/Isabela.webp" class="card-img-top"
+                                                alt="..."></div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Isabela</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Sofia" data-img="Sofia">
+                                    <input class="avatar-checkbox" type="checkbox" id="Sofia" name="AvatarVal" value="16">
+                                    <label for="Sofia">
+                                        <div class="imgfr"><img src="static/img/Sofia.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Sofia</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Kristina" data-img="Kristina">
+                                    <input class="avatar-checkbox" type="checkbox" id="Kristina" name="AvatarVal" value="17">
+                                    <label for="Kristina">
+                                        <div class="imgfr"><img src="static/img/Kristina.webp" class="card-img-top"
+                                                alt="..."></div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Kristina</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Paula" data-img="Paula">
+                                    <input class="avatar-checkbox" type="checkbox" id="Paula" name="AvatarVal" value="18">
+                                    <label for="Paula">
+                                        <div class="imgfr"><img src="static/img/Paula.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Paula</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                                    <input class="avatar-checkbox" type="checkbox" id="Amelia" name="AvatarVal" value="19">
+                                    <label for="Amelia">
+                                        <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Amelia</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                            </div>
+                        </fieldset>
+                        <fieldset id='imgSrc' style="box-shadow: none;-webkit-box-shadow: none; padding: 0;">
+                            <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:content">內容素材</lan>
+                              <img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" 
+                                title="放入您的台詞及圖片,圖片僅接受png, jpg, mp4格式 Type in your content and images. Supported File Formats: png, jpg, mp4.">
+                            </h3><br/>
+                           
+                            <div class="img-inputTest mt-3">
+                                
+                            </div>
+                            <div>
+                                <span class="addsec">+</span>
+                            </div>
+
+                            <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
+                            <input type="checkbox" id="multiLang" > <br/>
+
+                            <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" value="送出" />
+                            <span class="draft-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="儲存為草稿 Save as draft" set-lan="html:save_draft_btn">存為草稿</span>
+                      
+                            <h3 style="display: none;" class="fs-subtitle"><lan set-lan="html:processing_progress">處理進度</lan></h3>
+                            <div style="display: none;" id="myProgress">
+                                <div style="display: none;" id="myBar">0%</div>
+                            </div>
+                        </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>
+
+            </div>
+            <!-- <div id="mySidenav" class="sidenav">
+                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+                <h2 class="go_title" href="index.html"><a class="nav-link active" aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                <ul class="nav-list">
+                    <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>
+                    <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>
+                <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>
+                    </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>
+                        </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>
+                    </div>
+                </div>
+            </div>
+            <div class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" 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-lan="html:drafts">草稿夾</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>
+                                <div class="draft-table col-12 d-block" id="draft-table">
+                                    <div class="card p-3 text-center">
+                                        <table class="table text-center">
+                                            <thead>
+                                                <tr>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="draft-content">
+    
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal fade" id="deleteSecModal" tabindex="-1" aria-labelledby="deleteSecModal" aria-hidden="true">
+                <div class="modal-dialog">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="modal-title" id="exampleModalLabel">刪除提醒</h5>
+                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                      確定刪除此內容區塊?
+                    </div>
+                    <div class="modal-footer">
+                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                      <button type="button" class="btn deleteSec btn-deleteSec" data-bs-dismiss="modal">刪除</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/script_util2.js"></script>
+    <script src="static/common.js"></script>
+<script>
+
+$( ".menu-bar" ).click(function() {
+  $(".sidenav").show();
+});
+
+$( ".close-btn" ).click(function() {
+  $(".sidenav").hide();
+});
+</script>
+</body>
+
+</html>

+ 531 - 0
html/make_video_long.html

@@ -0,0 +1,531 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <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"
+                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 mb-2 ms-auto mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this);window.location.reload();" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav> -->
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="container-fluid px-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 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="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
+                        </div>
+                        <div class="userName"></div>
+                        <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">
+                        <p class="text-white my-3 text-center" 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_video2.html" set-lan="html:make_video">影片製作</a>
+                            <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                                href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                        </div>
+                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                            <a class="nav-link btn-gocreate text-white col-6 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 mb-3" 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>
+                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#draftModal"
+                                    onclick="openDrafts()">
+                                    <i class="fas fa-pencil-ruler me-2"></i>
+                                    <lan set-lan="html:drafts"></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>
+                        <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>
+            <div class="col-lg-10 px-0">
+                <div>
+                    <form id="msform">
+                        <fieldset>
+                            <h3 class="fs-subtitle">
+                                <lan set-lan="html:video_long_title">標題</lan>
+                            </h3>
+                            <style>
+                                .embed-container {
+                                    position: relative;
+                                    padding-bottom: 56.25%;
+                                    height: 0;
+                                    overflow: hidden;
+                                    max-width: 100%;
+                                }
+    
+                                .embed-container iframe,
+                                .embed-container object,
+                                .embed-container embed {
+                                    position: absolute;
+                                    top: 0;
+                                    left: 0;
+                                    width: 100%;
+                                    height: 100%;
+                                }
+                            </style>
+                            <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//bowrtLQ6mg4'
+                                    frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
+                        </fieldset>
+                        <!--<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="11">Summer韓小夏</option>
+                                <option value="12">Jocelyn</option>
+                                <option value="13">Angela</option>
+                                <option value="15">Isabela</option>
+                                <option value="16">Sofia</option>
+                                <option value="17">Kristina</option>
+                                <option value="18">Paula</option>
+                            </select>
+                            <div class="d-flex row row-cols-2 row-cols-lg-6">
+                                <div class="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="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 class="card col" data-avatar="Isabela" data-img="Isabela">
+                                    <div class="imgfr"><img src="static/img/Isabela.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Isabela</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Sofia" data-img="Sofia">
+                                    <div class="imgfr"><img src="static/img/Sofia.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Sofia</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Kristina" data-img="Kristina">
+                                    <div class="imgfr"><img src="static/img/Kristina.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Kristina</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Paula" data-img="Paula">
+                                    <div class="imgfr"><img src="static/img/Paula.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Paula</h5>
+                                    </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> -->
+                    </form>
+                </div>
+            </div>
+            <!-- <div id="mySidenav" class="sidenav">
+                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+                <h2 class="go_title" href="index.html"><a class="nav-link active" aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                <ul class="nav-list">
+                    <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>
+                    <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>
+                <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>
+                        </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>
+                        </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>
+                    </div>
+                </div>
+            </div>
+            <div class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" 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-lan="html:drafts">草稿夾</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>
+                                <div class="draft-table col-12 d-block" id="draft-table">
+                                    <div class="card p-3 text-center">
+                                        <table class="table text-center">
+                                            <thead>
+                                                <tr>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="draft-content">
+    
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.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
+                }
+            }
+        });
+        $(".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>

+ 478 - 0
html/make_video_slide.html

@@ -0,0 +1,478 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <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"
+                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 mb-2 ms-auto mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this);window.location.reload();" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav> -->
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <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 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="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
+                        </div>
+                        <div class="userName"></div>
+                        <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">
+                        <p class="text-white my-3 text-center" 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_video2.html" set-lan="html:make_video">影片製作</a>
+                            <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                                href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                        </div>
+                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                            <a class="nav-link btn-gocreate text-white col-6 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 mb-3" 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>
+                            <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#draftModal"
+                                    onclick="openDrafts()">
+                                    <i class="fas fa-pencil-ruler me-2"></i>
+                                    <lan set-lan="html:drafts"></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>
+                        <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>
+            <div class="col-lg-10 px-0">
+                <div>
+                    <form id="msform">
+                        <div class="linker__box">
+                            <p>預覽影片</p>
+                            <i class="fas fa-link"></i>
+                            <a id='linker' style="display: none;" class="ms-2">影片連結</a>
+                        </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=""
+                                placeholder="SLIDE連結(連結須為公開共用)" /><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>
+                            <select id="avatar" class='avatar'>
+                                <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>
+                                <option value="7">Peggy</option>
+                                <option value="8">Stacy</option>
+                                <option value="11">Summer韓小夏</option>
+                                <option value="12">Jocelyn</option>
+                                <option value="13">Angela</option>
+                                <option value="15">Isabela</option>
+                                <option value="16">Sofia</option>
+                                <option value="17">Kristina</option>
+                                <option value="18">Paula</option>
+                                <option value="19">Amelia</option>
+                            </select>
+                            <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
+                                <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="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 class="card col" data-avatar="Isabela" data-img="Isabela">
+                                    <div class="imgfr"><img src="static/img/Isabela.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Isabela</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Sofia" data-img="Sofia">
+                                    <div class="imgfr"><img src="static/img/Sofia.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Sofia</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Kristina" data-img="Kristina">
+                                    <div class="imgfr"><img src="static/img/Kristina.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Kristina</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Paula" data-img="Paula">
+                                    <div class="imgfr"><img src="static/img/Paula.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Paula</h5>
+                                    </div>
+                                </div>
+                                <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                                    <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="..."></div>
+                                    <div class="card-body">
+                                      <h5 class="card-title">Amelia</h5>
+                                    </div>
+                                </div>
+                            </div>
+                        </fieldset>
+                        <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>
+
+            </div>
+            <!-- <div id="mySidenav" class="sidenav">
+                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+                <h2 class="go_title" href="index.html"><a class="nav-link active" aria-current="page" href="index.html">AI Spokes Girl</a></h2>
+                <ul class="nav-list">
+                    <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>使用說明</li>
+                    <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>歷史紀錄</li>
+                </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">
+                        <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:slide_howto_use">1. 投影片將作為背景圖,備註中的文字則為虛擬主播的講稿內容。</li>
+                                    <li><lang set-lan="html:sup_img_profile">2. 影像連結檔案格式支援:</lang><stong class="strong">.png, jpg, .mp4</stong>
+                                    </li>
+                                    <li set-lan="html:submit_to_wait">3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看</li>
+                                </ol>
+                            </div>
+                        </div>
+                    </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">歷史紀錄</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 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 class="modal" tabindex="-1" id="draftModal" aria-labelledby="draftModal" 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-lan="html:drafts">草稿夾</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>
+                                <div class="draft-table col-12 d-block" id="draft-table">
+                                    <div class="card p-3 text-center">
+                                        <table class="table text-center">
+                                            <thead>
+                                                <tr>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="draft-content">
+    
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.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>
+        $(".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>

+ 376 - 0
html/make_video_slide_eng.html

@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    
+    <!-- ================================================================= -->
+    <!-- navbar -->
+   
+    <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>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <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 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="./user_profile2.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="./user_profile2.html">AI Spokesgirl</a></h2>
+                        </div>
+                        <div class="userName"></div>
+                        <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">
+                        <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">Create something today!</p>
+                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                          <a class="nav-link btn-gocreate text-white col-6 btn-makev" aria-current="page"
+                              href="./make_video2.html" set-lan="html:make_video">影片製作</a>
+                          <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                              href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                        </div>
+                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                            <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">Make
+                                English<br>Videos</a>
+                            <a class="nav-link btn-gocreate text-white col-6" aria-current="page"
+                                href="./make_video_slide_eng.html" set-lan="html:make_slides">Make Videos <br>By Slides</a>
+                        </div>
+                        <hr>
+                        <ul class="nav-list ps-0">
+                            <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal" data-bs-target="#howto"><i
+                                class="fas fa-book-open me-2"></i>
+                              <lan set-lan="html:usage_intro">Usage Introduction</lan>
+                            </li>
+                            <a style="text-decoration: none;color:white;" href="./user_profile2.html">
+                              <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal">
+                                <i class="fas fa-user me-2"></i>
+                                <lan set-lan="html:user_profile">User Profile</lan>
+                              </li>
+                            </a>
+                            <li class="nav-list-item pb-1 text-start ps-3" data-bs-toggle="modal" data-bs-target="#history"
+                              onclick="openNav()">
+                              <i class="fas fa-history me-2"></i>
+                              <lan set-lan="html:history">History</lan>
+                            </li>
+                            <div class="Mobile-nav">
+                              <hr>
+                              <li class="nav-item text-start">
+                                <a style="font-size: 18px;" class="nav-link active text-white" aria-current="page" href="pricing.html">Pricing</lan></a>
+                              </li><lan set-lan="html:pricing-m"
+                              <!-- <li class="nav-item text-start">
+                                <a style="font-size: 18px;" class="nav-link active btn-login text-white" aria-current="page" href="login.html"><i class="fas fa-sign-in-alt text-white me-3"></i>Login</a>
+                              </li> -->
+                              <!-- <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" set-lan="html:logout-m">Log Out</a>
+                              </li>
+                              
+                          </div>
+                          </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-3 ps-lg-3">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">Preview Video</p>
+                            <i class="fas fa-link"></i>
+                            <a id='linker' style="display: none;" class="ms-2" set-lan="html:video_link">Video link</a>
+                        </div>
+                        <!-- fieldsets -->
+                        <fieldset>
+                            <h3 class="fs-subtitle"><lan set-lan="html:slide_link">SLIDE Link</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="請輸入Google Slides連結 Google Slides Link"></h3>
+                            <input id=slide_raw_url type="text" name='t1' class='title_new' value="" placeholder="SLIDE Link (Slides must be Shared With Everyone)"/>
+                            <!-- <label for="myCheck">Allow English Lines::</label> 
+                            <input type="checkbox" id="multiLang" > <br/> -->
+                        </fieldset>
+                        <fieldset>
+                            <h3 class="fs-subtitle" ><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt=""
+                                data-bs-toggle="tooltip" data-bs-placement="right" title="The spokesgirl of your video"></h3>
+                            <select id="avatar" class='avatar'>
+                              <option value="Choose Character" selected="selected" disabled>Choose Character</option>
+                              <option value="7">Peggy</option>
+                              <option value="8">Stacy</option>
+                              <option value="11">Summer</option>
+                              <option value="12">Jocelyn</option>
+                              <option value="13">Angela</option>
+                              <option value="15">Isabela</option>
+                              <option value="16">Sofia</option>
+                              <option value="17">Kristina</option>
+                              <option value="18">Paula</option>
+                              <option value="19">Amelia</option>
+                            </select>
+                            <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
+                              <div class="card col" data-avatar="Peggy" data-img="peggy">
+                                <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
+                                <div class="card-body">
+                                  <h5 class="card-title">Peggy</h5>
+                                </div>
+                              </div>
+                              <div class="card 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 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 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 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 class="card col" data-avatar="Isabela" data-img="Isabela">
+                                <div class="imgfr"><img src="static/img/Isabela.webp" class="card-img-top" alt="..."></div>
+                                <div class="card-body">
+                                  <h5 class="card-title">Isabela</h5>
+                                </div>
+                              </div>
+                              <div class="card col" data-avatar="Sofia" data-img="Sofia">
+                                <div class="imgfr"><img src="static/img/Sofia.webp" class="card-img-top" alt="..."></div>
+                                <div class="card-body">
+                                  <h5 class="card-title">Sofia</h5>
+                                </div>
+                              </div>
+                              <div class="card col" data-avatar="Kristina" data-img="Kristina">
+                                <div class="imgfr"><img src="static/img/Kristina.webp" class="card-img-top" alt="..."></div>
+                                <div class="card-body">
+                                  <h5 class="card-title">Kristina</h5>
+                                </div>
+                              </div>
+                              <div class="card col" data-avatar="Paula" data-img="Paula">
+                                <div class="imgfr"><img src="static/img/Paula.webp" class="card-img-top" alt="..."></div>
+                                <div class="card-body">
+                                  <h5 class="card-title">Paula</h5>
+                                </div>
+                              </div>
+                              <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                                <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="..."></div>
+                                <div class="card-body">
+                                  <h5 class="card-title">Amelia</h5>
+                                </div>
+                              </div>
+                            </div>
+                          </fieldset>
+                        <input id="send_slide" type="button" name="next" class="action-button" set-lan="value:submit" />
+                    </form>
+                    <!-- <div style="width: 80%;margin: 0 auto;"><iframe src="http://www.choozmo.com:8168/ai_anchor_video/16250306886652043.mp4" frameborder="0" style="width: 100%;height: 400px;"></iframe></div> -->
+                </div>
+            </div>
+            <!-- <div id="mySidenav" class="sidenav">
+                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+                <h2 class="go_title" href="index.html"><a class="nav-link active" aria-current="page" href="index.html">AI Spokes Girl</a></h2>
+                <ul class="nav-list">
+                    <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>使用說明</li>
+                    <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>歷史紀錄</li>
+                </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">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:usage_intro">Usage Introduction</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <div class="modal-terms">
+                                <ol class="ps-0">
+                                  <li set-lan="html:slide_howto_use">1. 投影片將作為背景圖,備註中的文字則為虛擬主播的講稿內容。</li>
+                                  <li><lang set-lan="html:sup_img_profile">2. 影像連結檔案格式支援:</lang><stong class="strong">.png, jpg, .mp4</stong>
+                                  </li>
+                                  <li set-lan="html:submit_to_wait">3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看</li>
+                                </ol>
+                            </div>
+                        </div>
+                    </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 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 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">Close</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/loading-overlay.js"></script>
+    <script src="static/script_slides_eng.js"></script>
+    <script src="static/common.js"></script>
+<script>
+    $(".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>

+ 339 - 0
html/pricing.html

@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <div class="card">
+        <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+        <!-- 行動版選單 -->
+        <div class="menu-box">
+            <div class="menu-box2">
+                <div style="font-size: 28px;" class="close_btn text-end">
+                    <i class="fas fa-times text-white me-3 mt-3"></i>
+                </div>
+                <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"
+                            set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li id="changeLanguage" class="nav-item me-lg-1">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                            data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <!-- <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul> -->
+                    </li>
+                    <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">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html"
+                            set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile2.html"
+                            set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="card-img-overlay pt-2 py-lg-3">
+            <nav class="navbar navbar-expand-lg navbar-light d-block d-md-none pt-0">
+
+                <!-- <a class="navbar-brand d-block d-md-none" href="index.html">AI Spokesgirl</a> -->
+
+                <!-- <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 d-flex" id="navbarSupportedContent">
+                    <a href="./index.html">
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    </a>
+                    <ul class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="pricing.html"
+                                set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                                set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile2.html"
+                                set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </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>
+    <!-- navbar -->
+
+    <nav id="pricing-nav" class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.html"><img class="img-fluid" style="width: 150px;" src="./static/img/contactus/choozmo-nav.png" alt=""></a>
+            <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 mb-2 ms-auto mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <!-- 手機版 -->
+    <div class="d-block d-md-none mt-5">
+        <div class="container text-center">
+            <div class="row">
+                <div class="col-md-4 col-sm-6">
+                    <div class="pricingTable">
+                        <div class="pricingTable-header">
+                            <h3 class="title" set-lan="html:launch_special">早鳥方案</h3>
+                        </div>
+                        <ul class="pricing-content">
+                            <li set-lan="html:pricing_lan">語言選擇: 中文 | 英文</li>
+                            <li set-lan="html:pricing_avatars">多款預設AI代言主播任你選</li>
+                            <li set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</li>
+                            <!-- <li class="disable">Maintenance</li>
+                            <li class="disable">15 Subdomains</li> -->
+                        </ul>
+                        <div class="price-value">
+                            <span class="price-title" set-lan="html:pricing_discount">限時優惠</span>
+                            <span class="price-amount">$1200 <span class="duration">7<lan set-lan="html:mins">分鐘</lan></span></span>
+                        </div>
+                        <div class="pricingTable-signup">
+                            <a href="https://p.ecpay.com.tw/2600546" target="_blank" set-lan="html:pricing_checkout">立即註冊</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 電腦版 -->
+    <div class="d-none d-md-block">
+        <div class="container-fluid text-center">
+            <div class="row">
+                <div class="col-4">
+                    <div class="pricingTable">
+                        <div class="pricingTable-header">
+                            <div class="title" set-lan="html:launch_special" style="font-size:2rem;">早鳥方案</div>
+                        </div>
+                        <ul class="pricing-content">
+                            <li set-lan="html:pricing_lan">語言選擇: 中文 | 英文</li>
+                            <li set-lan="html:pricing_avatars">多款預設AI代言主播任你選</li>
+                            <li set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</li>
+                            <!-- <li class="disable">Maintenance</li>
+                            <li class="disable">15 Subdomains</li> -->
+                        </ul>
+                        <div class="price-value">
+                            <span class="price-title" set-lan="html:pricing_discount">限時優惠</span>
+                            <span class="price-amount">$1200 <span class="duration">7<lan set-lan="html:mins">分鐘</lan></span></span>
+                        </div>
+                        <div class="pricingTable-signup">
+                            <a href="https://p.ecpay.com.tw/2600546" target="_blank" set-lan="html:pricing_checkout">立即查看</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-8">
+                    <a href="https://p.ecpay.com.tw/2600546" target="_blank">
+                        <img class="img-fluid" src="static/img/intro2.jpg" set-lan="img:intro_img"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    
+    
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validatorjs/2.0.0/validator.min.js" 
+        integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+    <script>
+        $('.btn-login').hide();
+        $('.btn-userProfile').hide();
+        $('.btn-logout').hide();
+        function get_jwt_token(){
+            if(!document.cookie) {
+                return
+            }
+            try {
+                jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+                return jwt_raw.split('=')[1];
+            } catch (e) {
+                return undefined;
+            }
+        }
+        function checkRoute() {
+            let jwt_token = get_jwt_token();
+            if(jwt_token == undefined) {
+                console.log(jwt_token); // test
+                $('.btn-login').show();
+                $('.btn-userProfile').hide();
+                $('.btn-logout').hide();
+                return;
+            }
+            axios({
+                method: 'post',
+                url: 'https://www.choozmo.com:8887/user_profile',
+                headers: { 
+                    'accept': 'text/html',
+                    'Authorization': `Bearer ${jwt_token}`
+                }
+            }).then(res => {
+                console.log(res.data);
+                if(res.status !== 200) {
+                    $('.btn-login').show();
+                    $('.btn-userProfile').hide();
+                    $('.btn-logout').hide();
+                }
+                $('.btn-login').hide();
+                $('.btn-userProfile').show();
+                $('.btn-logout').show();
+            }).catch(err => {
+                console.log(err);
+            });
+        }
+        checkRoute();
+    </script>
+     <script>
+        $(".menu-bar").click(function () {
+            $(".menu-box").fadeIn();
+            $(".menu-box2").fadeIn();
+
+        });
+
+        $(".close_btn").click(function () {
+            $(".menu-box").fadeOut();
+            $(".menu-box2").fadeOut();
+
+        });
+        $("#lang-manu").hide();
+
+        $("#changeLanguage").click(function () {
+            $("#lang-manu").slideToggle();
+            $("#lang-arrow").toggleClass("arrowdoup");
+        });
+    </script>
+</body>
+
+</html>

+ 218 - 0
html/pricingB.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<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">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.html"><img class="img-fluid" style="width: 150px;" src="./static/img/contactus/choozmo-nav.png" alt=""></a>
+            <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 mb-2 ms-auto mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <!-- 手機版 -->
+    <div class="d-block d-md-none">
+        <div class="container text-center">
+            <div class="row">
+                <div class="col-md-4 col-sm-6">
+                    <div class="pricingTable">
+                        <div class="pricingTable-header">
+                            <h3 class="title" set-lan="html:launch_special">早鳥方案</h3>
+                        </div>
+                        <ul class="pricing-content">
+                            <li set-lan="html:pricing_lan">語言選擇: 中文 | 英文</li>
+                            <li set-lan="html:pricing_avatars">多款預設AI代言主播任你選</li>
+                            <li set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</li>
+                            <!-- <li class="disable">Maintenance</li>
+                            <li class="disable">15 Subdomains</li> -->
+                        </ul>
+                        <div class="price-value">
+                            <span class="price-title" set-lan="html:pricing_discount">限時優惠</span>
+                            <span class="price-amount">$1200 <span class="duration">7<lan set-lan="html:mins">分鐘</lan></span></span>
+                        </div>
+                        <div class="pricingTable-signup">
+                            <a href="https://p.ecpay.com.tw/2600546" target="_blank" set-lan="html:pricing_checkout">立即註冊</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 電腦版 -->
+    <div class="d-none d-md-block">
+        <div class="container-fluid text-center">
+            <div class="row">
+                <div class="col-4">
+                    <div class="pricingTable">
+                        <div class="pricingTable-header">
+                            <div class="title" set-lan="html:launch_special" style="font-size:2rem;">早鳥方案</div>
+                        </div>
+                        <ul class="pricing-content">
+                            <li set-lan="html:pricing_lan">語言選擇: 中文 | 英文</li>
+                            <li set-lan="html:pricing_avatars">多款預設AI代言主播任你選</li>
+                            <li set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</li>
+                            <!-- <li class="disable">Maintenance</li>
+                            <li class="disable">15 Subdomains</li> -->
+                        </ul>
+                        <div class="price-value">
+                            <span class="price-title" set-lan="html:pricing_discount">限時優惠</span>
+                            <span class="price-amount">$1200 <span class="duration">7<lan set-lan="html:mins">分鐘</lan></span></span>
+                        </div>
+                        <div class="pricingTable-signup">
+                            <a href="https://p.ecpay.com.tw/2600546" target="_blank" set-lan="html:pricing_checkout">立即查看</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-8">
+                    <a href="https://p.ecpay.com.tw/2600546" target="_blank">
+                        <img class="img-fluid" src="static/img/intro2.jpg" set-lan="img:intro_img"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    
+    
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validatorjs/2.0.0/validator.min.js" 
+        integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+    <script>
+        const btnLoginPage = document.querySelector('.btn-login');
+        const btnUserProfile = document.querySelector('.btn-userProfile');
+        const btnLogout = document.querySelector('.btn-logout');
+        btnLoginPage.style.display = 'none';
+        btnLogout.style.display = 'none';
+        btnUserProfile.style.display = 'none';
+        function get_jwt_token(){
+            if(!document.cookie) {
+                return
+            }
+            jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0]
+            return jwt_raw.split('=')[1]
+        }
+        function checkRoute() {
+            let jwt_token = get_jwt_token();
+            if(jwt_token == undefined) {
+                btnLoginPage.style.display = 'block';
+                btnLogout.style.display = 'none';
+                btnUserProfile.style.display = 'none';
+                return;
+            }
+            axios({
+                method: 'post',
+                url: 'https://www.choozmo.com:8887/user_profile',
+                headers: { 
+                    'accept': 'text/html',
+                    'Authorization': `Bearer ${jwt_token}`
+                }
+            }).then(res => {
+                console.log(res.data);
+                if(res.status !== 200) {
+                    btnLoginPage.style.display = 'block';
+                    btnLogout.style.display = 'none';
+                    btnUserProfile.style.display = 'none';
+                }
+                btnLoginPage.style.display = 'none';
+                btnLogout.style.display = 'block';
+                btnUserProfile.style.display = 'block';
+            }).catch(err => {
+                console.log(err);
+            });
+        }
+        checkRoute();
+    </script>
+</body>
+
+</html>

+ 73 - 0
html/privacy.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+
+    <style>
+    .h2 {
+        text-align: center;
+        font-size: 1.2rem;
+        font-weight: 500;
+        margin-top: 2rem;
+    }
+    .terms {
+        font-size: .9rem;
+        width: 95%;
+        min-width: 250px;
+        height: auto;
+        overflow: scroll;
+        margin-bottom: 1rem;
+        margin-left: auto;
+        margin-right: auto;
+        border: 1px solid rgb(163, 163, 163);
+        line-height: 1.5rem;
+    }
+    .pl-0 {
+        padding-left: 0;
+    }
+    </style>
+</head>
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <div class="container">
+    
+        <main>
+            <h2 class="h2">隱私政策及使用條款</h2>
+            <div class="terms">
+            <ol class="pl-0">
+                <li>1. 集仕多股份有限公司(以下簡稱本公司),依需要取得您個人資料,並依個人資料保護法及相關法令規定,蒐集、處理及利用您個人資料。</li>
+            </ol>
+            </div>
+            
+            <!-- <button class="btn-term-exit" onclick="window.history.back();">回上一頁</button> -->
+        </main>
+        <div class="text-center">
+    <!--
+        <img class="img-fluid mb-3" src="images/banner-bottom.jpg" alt="幸福空間 - 裝修市場問卷調查">
+    -->
+
+        </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>
+</body>
+</html>

+ 325 - 0
html/register.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="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/owl.carousel.min.css">
+    <link rel="stylesheet" href="static/owl.theme.default.min.css">
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <!-- ================================================================= -->
+    <!-- navbar -->
+    <div class="loading"></div>
+    <div class="card">
+        <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+        <!-- 行動版選單 -->
+        <div class="menu-box">
+            <div class="menu-box2">
+                <div style="font-size: 28px;" class="close_btn text-end">
+                    <i class="fas fa-times text-white me-3 mt-3"></i>
+                </div>
+                <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"
+                            set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li id="changeLanguage" class="nav-item me-lg-1">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                            data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <!-- <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul> -->
+                    </li>
+                    <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">
+                        <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                            set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                            set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+
+            </div>
+        </div>
+        <div class="card-img-overlay pt-2 py-lg-3">
+            <nav class="navbar navbar-expand-lg navbar-light d-block d-md-none pt-0">
+
+                <!-- <a class="navbar-brand d-block d-md-none" href="index.html">AI Spokesgirl</a> -->
+
+                <!-- <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 d-flex" id="navbarSupportedContent">
+                    <a href="./index.html">
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                    </a>
+                    <ul class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="pricing.html"
+                                set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                        onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                        onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="loginB.html"
+                                set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html"
+                                set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </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 d-block d-md-none">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.html">AI Spokesgirl</a>
+            <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" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="loginB.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav> -->
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- content -->
+    <div class="container-fluid px-0">
+        <div class="container-login">
+            <div class="row-img">
+                <video autoplay loop class="video">
+                    <source src="static/img/登入影片.mp4" type="video/mp4">
+                </video>
+                <div class="row-img-box text-center">
+                    <h2 set-lan="html:logleftbox1">將你的生活、創作 、宣傳做成影片</h2>
+                    <h4 set-lan="html:logleftbox2">開始使用 AI Spokesgirl</h4>
+                </div>
+                <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
+            </div>
+            <div class="row-login">
+                <div class="login-top d-none d-md-block">
+                    <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" set-lan="html:pricing">早鳥方案</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                中/En
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link active btn-login" aria-current="page" href="loginB.html" set-lan="html:login">登入</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-userProfile" aria-current="page" href="user_profile.html" set-lan="html:user_profile">會員資料</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="login-content">
+                    <!-- 已登入 {% if success %} -->
+                  <!-- 未登入 {% endif %} -->
+                    <h2 class="my-3 title" set-lan="html:goRegister">REGISTER</h2>
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade p-lg-3 show active" id="register" role="tabpanel" aria-labelledby="register-tab">
+                            <form>
+                                <div class="form-floating mb-3">
+                                    <input type="text" class="form-control" id="username" name="username" placeholder="User Name" required>
+                                    <label for="username"><i class="fas fa-user me-2"></i><lan set-lan="html:userName">User Name</lan></label>
+                                </div>
+                                <div class="form-floating mb-3">
+                                    <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
+                                    <label for="email"><i class="fas fa-envelope me-2"></i><lan set-lan="html:emailAddress">Email address</lan></label>
+                                </div>
+                                <div class="form-floating mb-3 position-relative">
+                                    <input type="password" class="form-control" id="password" name="password"  placeholder="Password" required>
+                                    <label for="password">
+                                        <i class="fas fa-lock me-2"></i>
+                                        <lan set-lan="html:register_password">Password</lan>
+                                        <lan style="font-size: 12px;" set-lan="html:password_length">(4-12位數密碼)</lan>
+                                    </label>
+                                    <i class="fas fa-eye psd_visible position-absolute"></i>
+                                    <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
+                                </div>
+                                <div class="form-floating mb-3 position-relative">
+                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password"  placeholder="Password" required>
+                                    <label for="confirm_password">
+                                        <i class="fas fa-lock me-2"></i>
+                                        <lan set-lan="html:confirm_password">Password</lan>
+                                        <lan style="font-size: 12px;" set-lan="html:password_confirm_txt">(再次輸入您的密碼)</lan>
+                                    </label>
+                                    <i class="fas fa-eye psd_visible position-absolute"></i>
+                                    <i class="fas fa-eye-slash psd_invisible position-absolute"></i>
+                                </div>
+                                <!-- <div class="mb-3">
+                                    <input type="checkbox" id="privacy" name="privacy" checked required>
+                                    <label for="privacy"><a href="privacy.html" class="link_privacy" target="_blank" set-lan="html:privacy_term">同意隱私政策及使用條款</a></label>
+                                </div> -->
+                                <div class="d-flex justify-content-center">
+                                    <p set-lan="html:oldHere">已經有帳號?</p>
+                                    <a class="ms-1" href="loginB.html" set-lan="html:login">登入</a>
+                                </div>
+                                <div class="mb-3 d-flex justify-content-center">
+                                    <button type="button" class="btn btn-primary align-items-center btn-register" set-lan="html:goRegister_link">立即註冊</button>
+                                </div>
+                                <small class="register__policies">
+                                    <lan set-lan="html:privacy_term_1">註冊即表示您已閱讀並同意</lan><a href="" onclick="window.open('./privacy.html')"><lan set-lan="html:privacy_term_2">服務條款</lan></a>
+                                    <lan set-lan="html:privacy_term_3">及</lan>
+                                    <a href="" onclick="window.open('./privacy.html')"><lan set-lan="html:privacy_term_4">隱私權政策</lan></a>
+                                </small>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ================================================================= -->
+
+
+    <!-- ================================================================= -->
+    <!-- footer -->
+    <footer class="fixed-bottom text-center py-2">
+
+    </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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/validatorjs/2.0.0/validator.min.js" 
+        integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="register.js"></script>
+    <script src="static/common.js"></script>
+    <script>
+        $(".menu-bar").click(function () {
+            $(".menu-box").fadeIn();
+            $(".menu-box2").fadeIn();
+
+        });
+
+        $(".close_btn").click(function () {
+            $(".menu-box").fadeOut();
+            $(".menu-box2").fadeOut();
+
+        });
+        $("#lang-manu").hide();
+
+        $("#changeLanguage").click(function () {
+            $("#lang-manu").slideToggle();
+            $("#lang-arrow").toggleClass("arrowdoup");
+        });
+    </script>
+</body>
+
+</html>

+ 205 - 0
html/register.js

@@ -0,0 +1,205 @@
+const btnRegister = document.querySelector('.btn-register');
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+const registerPassword = document.querySelector('#register #password');
+const btnLoginPage_d = document.querySelector('.login-top .btn-login');
+const btnUserProfile_d = document.querySelector('.login-top .btn-userProfile');
+const btnLogout_d= document.querySelector('.login-top .btn-logout');
+$('.psd_visible').hide();
+
+$('.loading').hide();
+
+$('.psd_invisible').click(function(){
+    $(this).prev().toggle();
+    $(this).toggle();
+    $(this).parent().children(':first').attr('type', 'text');
+})
+
+$('.psd_visible').click(function(){
+    $(this).toggle();
+    $(this).next().toggle();
+    $(this).parent().children(':first').attr('type', 'password');
+})
+
+registerPassword.addEventListener('keyup', registerByEnter);
+btnRegister.addEventListener('click', register);
+
+function registerByEnter(e) {
+    if (e.keyCode === 13) {
+        e.preventDefault();
+        console.log('login!');
+        register();
+    }
+};
+
+function validateEmail(email) {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    if(re.test(String(email).toLowerCase()) === false) {
+        $('#register [name = "email"]').addClass('error');
+        if( !$('.error-text').length ) {
+            let msg = '請輸入正確E-mail';
+
+            if (lang == 'en') { 
+                msg = 'Please enter valid Email format.';
+            }
+
+            $('input.error').after('<p class="error-text" set-lan="html:errorEmail">' + msg + '</p>');
+        } 
+    } else {
+        $('#register [name = "email"]').removeClass('error');
+        $('.error-text').remove();
+    }
+    
+    return re.test(String(email).toLowerCase());
+}
+
+function validatePassword(psd) {
+    if(psd.length >=4) {
+        $('#register [name = "password"]').removeClass('error');
+        $('.error-text').remove();
+        return true;
+    } else {
+        $('#register [name = "password"]').addClass('error');
+        if( !$('.error-text').length ) {
+            $('input.error').after('<p class="error-text" set-lan="html:errorPsd">密碼至少為4個字元</p>');
+        } 
+        return false;
+    }
+}
+
+function validateConfirmPsd(psd1, psd2) {
+    if(psd1 == psd2) {
+        $('#register #confirm_password').removeClass('error');
+        $('.error-text').remove();
+        return true;
+    } else {
+        $('#register #confirm_password').addClass('error');
+        if( !$('.error-text').length ) {
+            $('input.error').after('<p class="error-text" set-lan="html:errorConsistentPsd">密碼輸入需一致</p>');
+        } 
+        return false;
+    }
+}
+
+function validateConfirmName() {
+    let username = $('#register [name = "username"]').val();
+    var regex = new RegExp("^[a-zA-Z0-9 ]+$");
+    if(regex.test(username)) {
+        $('#register [name = "username"]').removeClass('error');
+        $('.error-text').remove();
+        return true;
+    } else {
+        $('#register [name = "username"]').addClass('error');
+        if( !$('.error-text').length ) {
+            $('input.error').after('<p class="error-text" set-lan="html:errorUsername">請輸入英文字元或數字</p>');
+        } 
+        return false;
+    }
+}
+
+function register() {
+    let userName = $('#register [name = "username"]').val();
+    let email = $('#register [name = "email"]').val();
+    let password = $('#register [name = "password"]').val();
+    let confirm_psd = $('#register #confirm_password').val();
+    var regex = new RegExp("^[a-zA-Z0-9 ]+$");
+    // 註冊資料檢查
+    if (userName == '' || password == '') {
+        let title = "註冊失敗";
+        let text = "請先輸入您的帳號/密碼";
+
+        if (lang == 'en') { 
+            title = "Login Failed!";
+            text = "Please enter your username and password";
+        }
+
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            text: text,
+            confirmButtonColor: '#3085d6',
+        });
+
+        return;
+    }
+
+    if (!regex.test(userName)) {
+        let title = "字元有誤";
+        let text = "名稱僅得包含英文及數字";
+
+        if (lang == 'en') { 
+            title = "Invalid username!";
+            text = "Please enter valid username";
+        }
+
+        Swal.fire({
+            title: title,
+            icon: 'error',
+            text: text,
+            confirmButtonColor: '#3085d6',
+        });
+
+        return;
+    }
+
+    if(userName && validateConfirmName() && validateEmail(email) && validatePassword(password) && validateConfirmPsd(password, confirm_psd)) {
+        $('.loading').show();
+        let userObj = {
+            username: userName,
+            email,
+            password
+        }
+        console.log(userObj);
+        const headers = {
+            "accept": "application/json",
+            "Content-Type": "application/json"
+        }
+        axios({
+            method: 'post',
+            url: 'https://www.choozmo.com:8887/register',
+            headers: headers,
+            data: userObj
+        }).then(res => {
+            console.log(res.data.msg);
+            $('.loading').hide();
+            let text;
+            if (lang == 'en') { 
+                text = res.data.msg.eng;
+            } else {
+                text = res.data.msg.zh;
+            }
+            Swal.fire({
+                icon: 'info',
+                text: text,
+                confirmButtonColor: '#3085d6',
+            });
+        }).catch(err => {
+            console.log(err);
+            $('.loading').hide();
+            var title = "錯誤處理中,請稍後再試";
+
+            if (lang == 'en') { // 英文版訊息
+                title = "Oops! Errors occurred. Please try it later!"
+            }
+            Swal.fire({
+                title: title,
+                icon: 'error',
+                confirmButtonColor: '#3085d6',
+            });
+            $('.loading').hide();
+        })
+    }
+}
+
+
+function loginControl() {
+    btnLoginPage.style.display = 'block';
+    btnLogout.style.display = 'none';
+    btnUserProfile.style.display = 'none';
+    btnLoginPage_d.style.display = 'block';
+    btnLogout_d.style.display = 'none';
+    btnUserProfile_d.style.display = 'none';
+}
+
+loginControl();

+ 187 - 0
html/reset_pwd.html

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<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">
+    <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="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>
+  
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+  
+    <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"
+                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" set-lan="html:pricing">早鳥方案</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            中/En
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this);window.location.reload();" value="en">English</button></li>
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-userProfile" aria-current="page" href="./user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container-fluid">
+        <div id="mySidenav" class="sidenav">
+            <div class="text-start mt-3">
+                <a href="index.html"><img class="img-fluid w-50 ps-1" src="./static/img/contactus/CMM_LOGO.png" alt=""></a>
+                <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_video2.html" set-lan="html:make_video">影片製作</a>
+                <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+            </div>
+            <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                <a class="nav-link btn-gocreate text-white col-6 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>
+            </ul>
+            <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>
+        <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span> -->
+        <div class="content ms-auto">
+            <form id="msform">
+                <fieldset id='imgSrc'>
+                <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:new_pwd">新密碼</lan></h3><br/>
+                <input type="text" id='in_pwd' name='m1' class='imgsrc imgsrc1' value="" placeholder="" /><br/>
+                <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:confirm_pwd">驗證碼</lan></h3><br/>
+                <input type="text" id='code' name='m1' class='imgsrc imgsrc1' value="" placeholder="" /><br/>
+                
+                <input id="checker" type="button" class="sender action-button" set-lan="value:submit" value="" />
+
+                </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>
+        <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">使用說明</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="modal-terms">
+                            <ol class="ps-0">
+                                <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
+                                <li>2. 影像連結檔案格式支援:<stong class="strong">.png, jpg, .mp4</stong></li>
+                                <li>3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看</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">歷史紀錄</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>
+  
+    <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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
+    <script src="./reset_pwd.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+</body>
+</html>

+ 137 - 0
html/reset_pwd.js

@@ -0,0 +1,137 @@
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+function loginControl() {
+  btnLoginPage.style.display = 'none';
+  btnLogout.style.display = 'block';
+  btnUserProfile.style.display = 'block';
+}
+
+loginControl();
+function renderXHR_data(jsonObj) {
+   XHRstring = ''
+   for (const [key, value] of Object.entries(jsonObj)) {
+     console.log(value)
+     if (typeof (value) == "object") {
+       XHRstring += (key+'=['+value.join(',')+']&')
+     }
+     else {
+       XHRstring += (key + '=' + value + '&')
+     }
+   }
+   XHRstring = XHRstring.substring(0, XHRstring.length - 1);
+   return XHRstring
+ }
+
+ let lan = localStorage.getItem('lan');
+
+$('.dropdown-toggle').click(() => {
+  lan = localStorage.getItem('lan');
+  checkLan();
+});
+
+checkLan();
+
+function checkLan() {
+  if(lan == 'en') {
+    $('.btn-makev').css('display', 'none');
+    $('.btn-makelong').css('display', 'none');
+  } else {
+    $('.btn-makev').css('display', 'block');
+    $('.btn-makelong').css('display', 'block');
+  }
+}
+
+$(".sender").click(function () {
+
+  var pwd = $("#in_pwd").val();
+  var code = $("#code").val();
+  
+  var url = "https://www.choozmo.com:8887/reset_pwd";
+
+var xhr = new XMLHttpRequest();
+xhr.open("POST", url);
+
+xhr.setRequestHeader("accept", "application/json");
+xhr.setRequestHeader("Content-Type", "application/json");
+
+xhr.onreadystatechange = function () {
+   if (xhr.readyState === 4) {
+      alert('重設成功')
+   }};
+
+
+var data = `{"code":"`+ code+`","password":"`+pwd+`"}`
+
+xhr.send(data);
+});
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    var historyList = document.querySelector('.historyList');
+    historyList.innerHTML = '';
+    for (var obj of loaded_data) {
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+function direct(id) {
+    location.href = `make_video2.html?id=${id}`;
+}
+
+function view() {
+    event.stopPropagation();
+    console.log(event.target);
+    if (event.target.nodeName === 'I') {
+      return;
+    } else {
+      window.open(`http://${event.target.dataset.url}`, '_blank');
+    }
+  }
+

+ 185 - 0
html/reset_pwd_email.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<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">
+    <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="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>
+      
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+<body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+  <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"
+            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" set-lan="html:pricing">早鳥方案</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        中/En
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this);window.location.reload();" value="en">English</button></li>
+                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                </li>
+               <!--  <li class="nav-item">
+                    <a class="nav-link btn-userProfile" aria-current="page" href="./user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                </li> -->
+            </ul>
+        </div>
+    </div>
+</nav>
+    <div class="container-fluid">
+        <div id="mySidenav" class="sidenav">
+            <div class="text-start mt-3">
+                <a href="index.html"><img class="img-fluid w-50 ps-1" src="./static/img/contactus/CMM_LOGO.png" alt=""></a>
+                <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>
+                    </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 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>
+        <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span> -->
+        <div class="content ms-auto">
+            <form id="msform">
+                <fieldset id='imgSrc'>
+                <h3 class="fs-subtitle" style="display: inline-block;">Email</h3><br/>
+                <input type="text" id='in_email' name='m1' class='imgsrc imgsrc1' value="" placeholder="" /><br/>
+                
+                <input id="checker" type="button" class="sender action-button" value="送出" set-lan="value:submit" />
+
+                </fieldset>
+            </form>
+            <!-- <div style="width: 80%;margin: 0 auto;"><iframe src="http://www.choozmo.com:8168/ai_anchor_video/16250306886652043.mp4" frameborder="0" style="width: 100%;height: 400px;"></iframe></div> -->
+        </div>
+        <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">使用說明</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="modal-terms">
+                            <ol class="ps-0">
+                                <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
+                                <li>2. 影像連結檔案格式支援:<stong class="strong">.png, jpg, .mp4</stong></li>
+                                <li>3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看</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">歷史紀錄</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>
+  
+    <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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
+    <script src="./reset_pwd_email.js"></script>
+    <script type="text/javascript" src="static/lan.js"></script>
+    <script src="static/common.js"></script>
+</body>
+</html>

+ 149 - 0
html/reset_pwd_email.js

@@ -0,0 +1,149 @@
+const btnLoginPage = document.querySelector('.btn-login');
+const sender = document.querySelector('.sender');
+let language = localStorage.getItem('lan');
+
+function loginControl() {
+  btnLoginPage.style.display = 'block';
+}
+
+loginControl();
+
+function get_jwt_token(){
+  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+  if(!jwt_raw) {return}
+  return jwt_raw.split('=')[1];
+}
+
+function checkToken() {
+  let jwt_token = get_jwt_token();
+}
+
+checkToken();
+
+
+$(".sender").click(function () {
+  sender.setAttribute('disabled', '');
+  sender.value = '處理中';
+  if(language == 'en') {
+    sender.value = 'Processing';
+  }
+  setTimeout(function () {
+    sender.removeAttribute('disabled')
+    sender.value = '送出';
+    if(language == 'en') {
+      sender.value = 'Submit';
+    }
+  }, 10000);
+  console.log('clicked')
+  var email = $("#in_email").val()
+  var url = "https://www.choozmo.com:8887/send_reset_pwd?user_id=-1&email="+email;
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", url);
+
+  xhr.setRequestHeader("accept", "application/json");
+
+  xhr.onreadystatechange = function () {
+   if (xhr.readyState === 4) {
+    let title = '請查看信箱';
+    if(language == 'en') {
+      title = 'Please chek your email box';
+    }
+    Swal.fire({
+      title: title,
+      icon: 'info',
+      confirmButtonColor: '#3085d6',
+    });
+   }};
+
+xhr.send();
+
+});
+
+let lan = localStorage.getItem('lan');
+
+$('.dropdown-toggle').click(() => {
+  lan = localStorage.getItem('lan');
+  checkLan();
+});
+
+checkLan();
+
+function checkLan() {
+  if(lan == 'en') {
+    $('.btn-makev').css('display', 'none');
+    $('.btn-makelong').css('display', 'none');
+  } else {
+    $('.btn-makev').css('display', 'block');
+    $('.btn-makelong').css('display', 'block');
+  }
+}
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    var historyList = document.querySelector('.historyList');
+    historyList.innerHTML = '';
+    for (var obj of loaded_data) {
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+function direct(id) {
+    location.href = `make_video2.html?id=${id}`;
+}
+
+function view() {
+    event.stopPropagation();
+    console.log(event.target);
+    if (event.target.nodeName === 'I') {
+      return;
+    } else {
+      window.open(`http://${event.target.dataset.url}`, '_blank');
+    }
+}

+ 655 - 0
html/script_eng.js

@@ -0,0 +1,655 @@
+checkRoute();
+
+let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
+
+$('.loading').hide();
+
+  //userBasics = JSON.parse(userBasics);
+if(userBasics.length > 0 || typeof(userBasics) !== 'string'){
+  $('.userName').html(`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
+}
+
+function checkRoute() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    // if(res.status !== 200) {
+    //   window.location.replace("login.html");
+    // }
+    var userName='';
+    userName+=' <h2 class="user-name text-white mt-4 fw-bold">Hi '+res.data.user_info.userName+'</h2>';
+    $('.userName').html(userName);
+  }).catch(err => {
+    console.log(err);
+    window.location.replace("login.html");
+  });
+}
+
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+
+function loginControl() {
+    btnLoginPage.style.display = 'none';
+    btnLogout.style.display = 'block';
+    btnUserProfile.style.display = 'block';
+}
+
+loginControl();
+
+// Check lan
+let lan = localStorage.getItem('lan');
+
+$('.dropdown-toggle').click(() => {
+  lan = localStorage.getItem('lan');
+  checkLan();
+});
+
+checkLan();
+
+function checkLan() {
+  if(lan == 'en') {
+    $('.btn-makev').css('display', 'none');
+    $('.btn-makelong').css('display', 'none');
+  } else {
+    $('.btn-makev').css('display', 'block');
+    $('.btn-makelong').css('display', 'block');
+    $('.title_new').attr('placeholder', '標題')
+  }
+}
+
+
+var client_id = Date.now();
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
+});
+var myModal = new bootstrap.Modal(document.getElementById('history'), {
+  keyboard: false
+})
+var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
+  keyboard: false
+})
+var modalImg = document.querySelector("#avatarmega .modal-img");
+var modalTitle = document.querySelector("#avatarmega .modal-title");
+var avatarSelector = document.getElementById("avatar");
+var card = document.querySelectorAll('.avatar-cards .card');
+
+var draftsModal = new bootstrap.Modal(document.getElementById('draftModal'), {
+  keyboard: false
+})
+
+card = [...card];
+avatarSelector.addEventListener('change', avatarChange);
+avatarChange();
+
+function addCardListener() {
+  for (let i = 0; i < card.length; i++) {
+    card[i].addEventListener('click', openavatarModel);
+  }
+}
+
+addCardListener();
+
+function avatarChange() {
+  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
+  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
+  for (let i = 0; i < card.length; i++) {
+    card[i].classList.remove('active');
+    if (card[i].dataset.avatar == value) {
+      card[i].classList.add('active');
+    }
+  }
+}
+
+function openavatarModel() {
+  console.log(this.dataset.img);
+  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
+  modalTitle.textContent = `${this.dataset.avatar}`;
+  avatarModal.show();
+}
+
+$('input[type=file]').on('change', prepareUpload);
+function prepareUpload(event) {
+  files = event.target.files;
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'https://www.choozmo.com:8887/uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value = jsonData.msg;
+      $(this).prev().val(jsonData.msg);
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = 'Upload';
+      //console.log($(this).next());
+      //$(this).next().html('上傳檔案');
+      //$(this).next().text('上傳檔案');
+    },
+    error: function (error) {
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      alert('圖片錯誤');
+    }
+  });
+}
+const button = document.querySelector('.next');
+
+
+// Drafts
+function getDraft() {
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let draftStr = '';
+    let nodraftTxt = '目前沒有草稿喔';
+      if(lan == 'en') {
+        titleTxt = 'Video Title';
+        editTxt = 'Edit';
+        nodraftTxt = 'no_draft';
+      }
+    if(result.length > 0){
+      for(let i = 0;i < result.length; i++) {
+        draftStr += `<tr>
+                  <td>${result[i].title}</td>
+                  <td>
+                  <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
+                    <i class="fas fa-edit"></i>
+                    </span>
+                    <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
+                    <i class="fas fa-trash-alt"></i>
+                    </span>
+                    </td>
+                </tr>`
+      }
+      let titleTxt = '標題';
+      let editTxt = '編輯';
+      str = `<table class="table text-center">
+      <thead>
+        <tr>
+          <th scope="col" set-lan="html:video_title">${titleTxt}</th>
+          <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
+        </tr>
+      </thead>
+      <tbody class="draft-content">${draftStr}</tbody>
+      </table>`
+      $('.draft-table .card').html(str);
+      JsLoadingOverlay.hide();
+    } else {
+      str = `<div>
+              <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
+              <img src="static/img/undraw_void_3ggu.svg" width="80">
+            </div>`;
+      $('.draft-table .card').html(str); 
+      JsLoadingOverlay.hide();
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+getDraft();
+function openDrafts() {
+  draftsModal.show()
+  document.querySelector('#draftModal .loader').style.display = "block";
+  $('#draftModal #draft-table').show();
+  getDraft();
+  document.querySelector('#draftModal .loader').style.display = "none";
+}
+
+function gotoDraft (id) {
+  location.href = `make_video2.html?draftid=${id}`;
+}
+
+function deleteDraft(id) {
+  let token = get_jwt_token();
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/del_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+    },
+    data: { "id": id }
+  }).then(res => {
+    console.log(res.data);
+    //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
+    JsLoadingOverlay.hide();
+    getDraft();
+    draftsModal.show();
+    avatarModal.hide();
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+// Make eng video
+$(".next").click(function () {
+  $('.loading').show();
+  button.setAttribute('disabled', '');
+  setTimeout(function () {
+    button.removeAttribute('disabled')
+  }, 15000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  txtARR = [];
+  imgARR = [];
+  sublineARR = [];
+  var step;
+  let contentIdx = document.querySelectorAll(".txtsrc").length;
+  for (let i = 1; i < (contentIdx + 1); i++) {
+    if ($(`.txtsrc${i}`).val() != "") {
+      txtARR.push($(`.txtsrc${i}`).val())
+    }
+  }
+  let sublineIdx = document.querySelectorAll(".subsrc").length;
+  for (let i = 1; i < (sublineIdx + 1); i++) {
+    if ($(`.subsrc${i}`).val() != "") {
+        sublineARR.push($(`.subsrc${i}`).val())
+    }
+  }
+  let imgIdx = document.querySelectorAll(".imgsrc").length;
+  for (let i = 1; i < (imgIdx + 1); i++) {
+    if ($(`.imgsrc${i}`).val() != "") {
+      imgARR.push($(`.imgsrc${i}`).val())
+    }
+  }
+  dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "sub_titles": sublineARR, "avatar": avatar };
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ);
+  jwt_token =  get_jwt_token();
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_eng");
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
+  xhr.setRequestHeader("Content-Type", "application/json");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      $('.loading').hide();
+      responseOBJ = JSON.parse(xhr.responseText);
+      console.log(responseOBJ);
+        Swal.fire({
+          icon: 'info',
+          text: responseOBJ.msg.eng,
+          confirmButtonColor: '#3085d6',
+      });
+    } else {
+      $('.loading').hide();
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  console.log(data)
+  result = xhr.send(objstr);
+});
+
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    var historyList = document.querySelector('.historyList');
+    historyList.innerHTML = '';
+    for (var obj of loaded_data) {
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      boxTitle.setAttribute('onclick', 'load_data()');
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', 'load_data()');
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function view() {
+  event.stopPropagation();
+  console.log(event.target);
+  if (event.target.nodeName === 'I') {
+    return;
+  } else {
+    window.open(`http://${event.target.dataset.url}`, '_blank');
+  }
+}
+
+function renderXHR_data(jsonObj) {
+  XHRstring = ''
+  for (const [key, value] of Object.entries(jsonObj)) {
+    console.log(value)
+    if (typeof (value) == "object") {
+      XHRstring += (key+'=['+value.join(',')+']&')
+    }
+    else {
+      XHRstring += (key + '=' + value + '&')
+    }
+  }
+  XHRstring = XHRstring.substring(0, XHRstring.length - 1);
+  return XHRstring
+}
+
+function get_jwt_token(){
+  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+  if(!jwt_raw) {return}
+  return jwt_raw.split('=')[1];
+}
+
+function load_data() {
+  var title = document.getElementById("title");
+  var linker = document.getElementById("linker");
+
+  myModal.hide()
+  tid = event.srcElement.id
+  console.log(tid);
+  linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
+  linker.setAttribute('target', '_blank')
+  $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
+  $("#linker").show();
+  $(".linker__box").show();
+
+  let historyItem = loaded_data.filter(item => item.id == tid)[0];
+  console.log(historyItem);
+  $(".title_new").val(loaded_data.find(item => item.id == tid).name);
+
+  let txtlength = historyItem.text_content.length;
+  let imglength = historyItem.image_urls.length;
+  let sublinelength = historyItem.sub_titles.length;
+
+  subtitleInputs.innerHTML = '';
+  imgInputs.innerHTML = '';
+  sublineInputs.innerHTML = '';
+
+  for (let i = 0; i < txtlength; i++) {
+    var txtinput = document.createElement("input");
+    txtinput.setAttribute('type', 'text');
+    txtinput.setAttribute('name', `t${i + 1}`);
+    txtinput.value = historyItem.text_content[i];
+    txtinput.setAttribute('placeholder', `${i + 1}`);
+    txtinput.classList.add('txtsrc', `txtsrc${i + 1}`)
+    subtitleInputs.appendChild(txtinput);
+  }
+  for (let i = 0; i < sublinelength; i++) {
+    var txtinput = document.createElement("input");
+    txtinput.setAttribute('type', 'text');
+    txtinput.setAttribute('name', `s${i + 1}`);
+    txtinput.value = historyItem.sub_titles[i];
+    txtinput.setAttribute('placeholder', `${i + 1}`);
+    txtinput.classList.add('subsrc', `subsrc${i + 1}`)
+    sublineInputs.appendChild(txtinput);
+  }
+  for (let i = 0; i < imglength; i++) {
+    var imginput = document.createElement("input");
+    imginput.setAttribute('type', 'text');
+    imginput.setAttribute('name', `m${i + 1}`);
+    imginput.classList.add('imgsrc', `imgsrc${i + 1}`);
+    imginput.value = historyItem.image_urls[i];
+    imginput.setAttribute('placeholder', `${i + 1}`);
+    imgInputs.appendChild(imginput);
+
+    var imgupload = document.createElement("input");
+    imgupload.setAttribute('id', `img${i + 1}`);
+    imgupload.setAttribute('type', `file`);
+    imgupload.classList.add('img_uploader', 'img_up');
+    imgInputs.appendChild(imgupload);
+    var imguploadlabel = document.createElement("label");
+    imguploadlabel.setAttribute('for', `img${i + 1}`);
+    imguploadlabel.classList.add('upload-btn');
+    imguploadlabel.textContent = 'Upload';
+    imgInputs.appendChild(imguploadlabel);
+  }
+
+}
+
+// var subtitleInputs = document.querySelector(".subtitle-inputs");
+// var sublineInputs = document.querySelector(".subline-inputs");
+// var imgInputs = document.querySelector(".img-inputs");
+
+let length = 5;
+function initial() {
+  for (let i = 0; i < length; i++) {
+    // rendertxtBlock(i + 1);
+    // renderimgBlock(i + 1);
+    // renderSublineBlock(i +1);
+    renderInputSec(i+1);
+  }
+  console.log(document.querySelectorAll(".txtsrc").length + 1);
+}
+
+initial();
+
+/* var addbtn = document.querySelector(".add");
+var addimgbtn = document.querySelector(".addimg");
+var addSubline = document.querySelector('.add-subline');
+
+addbtn.addEventListener('click', addtxtBlock);
+addimgbtn.addEventListener('click', addimgBlock);
+addSubline.addEventListener('click', addsubBlock); */
+
+var addsecbtn = document.querySelector(".addsec");
+addsecbtn.addEventListener('click', addsecBlock);
+
+function addsecBlock() {
+  let newsecIdx = document.querySelectorAll(".input-sec").length + 1;
+  renderInputSec(newsecIdx);
+}
+
+/* function addtxtBlock() {
+  let newIdx = document.querySelectorAll(".txtsrc").length + 1;
+  rendertxtBlock(newIdx);
+}
+
+function addsubBlock() {
+    let newIdx = document.querySelectorAll(".subsrc").length + 1;
+    renderSublineBlock(newIdx);
+  }
+
+function addimgBlock() {
+  let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
+  renderimgBlock(newimgIdx);
+} */
+
+function rendertxtBlock(i) {
+  var txtinput = document.createElement("input");
+  txtinput.setAttribute('type', 'text');
+  txtinput.setAttribute('name', `t${i}`);
+  txtinput.value = "";
+  txtinput.setAttribute('placeholder', `${i}`);
+  txtinput.classList.add('txtsrc', `txtsrc${i}`)
+  subtitleInputs.appendChild(txtinput);
+}
+
+function renderSublineBlock(i) {
+    var txtinput = document.createElement("input");
+  txtinput.setAttribute('type', 'text');
+  txtinput.setAttribute('name', `s${i}`);
+  txtinput.value = "";
+  txtinput.setAttribute('placeholder', `${i}`);
+  txtinput.classList.add('subsrc', `subsrc${i}`)
+  sublineInputs.appendChild(txtinput);
+}
+
+function renderimgBlock(i) {
+  var imginput = document.createElement("input");
+  imginput.setAttribute('type', 'text');
+  imginput.setAttribute('name', `m${i}`);
+  imginput.classList.add('imgsrc', `imgsrc${i}`);
+  imginput.value = "";
+  imginput.setAttribute('placeholder', `${i}`);
+  imgInputs.appendChild(imginput);
+
+  var imgupload = document.createElement("input");
+  imgupload.setAttribute('id', `img${i}`);
+  imgupload.setAttribute('type', `file`);
+  imgupload.classList.add('img_uploader', 'img_up');
+  imgInputs.appendChild(imgupload);
+  var imguploadlabel = document.createElement("label");
+  imguploadlabel.setAttribute('for', `img${i}`);
+  imguploadlabel.classList.add('upload-btn');
+  imguploadlabel.textContent = 'Upload';
+  imgInputs.appendChild(imguploadlabel);
+  $('input[type=file]').on('change', prepareUpload);
+}
+
+function renderInputSec(i) {
+  var input_sec = document.createElement('div');
+  var img_box = document.createElement('div');
+
+  input_sec.classList.add('input-sec', `input-sec${i}`, 'p-3', 'mb-3', 'text-end');
+  img_box.classList.add('img-box');
+
+  // subtitle input
+  var subtitleinput = document.createElement("input");
+  subtitleinput.setAttribute('type', 'text');
+  subtitleinput.setAttribute('name', `s${i}`);
+  subtitleinput.classList.add('subsrc', `subsrc${i}`);
+  subtitleinput.value = "";
+  subtitleinput.setAttribute('placeholder', `Subtitle`);
+  if(lan == 'zh') {
+    subtitleinput.setAttribute('placeholder', '副標題');
+  }
+  input_sec.appendChild(subtitleinput);
+
+  // text input
+  var txtinput = document.createElement("input");
+  txtinput.setAttribute('type', 'text');
+  txtinput.setAttribute('name', `t${i}`);
+  txtinput.classList.add('txtsrc', `txtsrc${i}`);
+  txtinput.value = "";
+  txtinput.setAttribute('placeholder', `Line`);
+  if(lan == 'zh') {
+    txtinput.setAttribute('placeholder', `台詞`);
+  }
+  input_sec.appendChild(txtinput);
+
+  // img url input
+  var imginput = document.createElement("input");
+  imginput.setAttribute('type', 'text');
+  imginput.setAttribute('name', `m${i}`);
+  imginput.classList.add('imgsrc', `imgsrc${i}`);
+  imginput.value = "";
+  imginput.setAttribute('placeholder', 'Type in image link or upload image');
+  if(lan == 'zh') {
+    imginput.setAttribute('placeholder', '輸入圖片網址或上傳圖片');
+  }
+  img_box.appendChild(imginput);
+
+  // img upload input
+  var imgupload = document.createElement("input");
+  imgupload.setAttribute('id', `img${i}`);
+  imgupload.setAttribute('type', `file`);
+  imgupload.classList.add('img_uploader', 'img_up');
+  imgupload.style.display = "none";
+  img_box.appendChild(imgupload);
+
+  // img upload label
+  var imguploadlabel = document.createElement("label");
+  imguploadlabel.setAttribute('for', `img${i}`);
+  imguploadlabel.classList.add('upload-btn');
+  // imguploadlabel.textContent = 'Upload';
+  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+  img_box.appendChild(imguploadlabel);
+  imgupload.addEventListener('change', prepareUpload);
+
+  // preview image
+  // var imgPreBox = document.createElement("div");
+  // imgPreBox.classList.add('upload-cta');
+  // img_box.appendChild(imgPreBox);
+
+  input_sec.appendChild(img_box);
+  document.querySelector('.img-inputTest').append(input_sec);
+}

+ 14 - 0
html/script_index.js

@@ -0,0 +1,14 @@
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+
+
+
+function loginControl() {
+    btnLoginPage.style.display = 'block';
+    btnLogout.style.display = 'none';
+    btnUserProfile.style.display = 'none';
+}
+
+loginControl();
+

+ 758 - 0
html/script_long.js

@@ -0,0 +1,758 @@
+ checkRoute();
+
+let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
+
+
+  //userBasics = JSON.parse(userBasics);
+if(userBasics !== [] || typeOf(userBasics) !== 'string'){
+  $('.userName').html(`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
+}
+
+function checkRoute() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    if(res.status !== 200) {
+      window.location.replace("login.html");
+    }
+    var userName='';
+    userName+=`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${res.data.user_info.userName}</h2>`;
+    $('.userName').html(userName);
+  }).catch(err => {
+    console.log(err);
+    window.location.replace("login.html");
+  });
+}
+
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+function loginControl() {
+  btnLoginPage.style.display = 'none';
+  btnLogout.style.display = 'block';
+  btnUserProfile.style.display = 'block';
+}
+
+loginControl();
+
+let lan = localStorage.getItem('lan');
+
+$('.dropdown-toggle').click(() => {
+  lan = localStorage.getItem('lan');
+  checkLan();
+});
+
+checkLan();
+
+function checkLan() {
+  if(lan == 'en') {
+    $('.btn-makev').css('display', 'none');
+    $('.btn-makelong').css('display', 'none');
+  } else {
+    $('.btn-makev').css('display', 'block');
+    $('.btn-makelong').css('display', 'block');
+  }
+}
+
+var client_id = Date.now()
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
+});
+var myModal = new bootstrap.Modal(document.getElementById('history'), {
+  keyboard: false
+})
+var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
+  keyboard: false
+})
+var modalImg = document.querySelector("#avatarmega .modal-img");
+var modalTitle = document.querySelector("#avatarmega .modal-title");
+var avatarSelector = document.getElementById("avatar");
+var card = document.querySelectorAll('.avatar-cards .card');
+
+var draftsModal = new bootstrap.Modal(document.getElementById('draftModal'), {
+  keyboard: false
+})
+
+card = [...card];
+// avatarSelector.addEventListener('change', avatarChange);
+// avatarChange();
+
+function addCardListener() {
+  for (let i = 0; i < card.length; i++) {
+    card[i].addEventListener('click', openavatarModel);
+  }
+}
+
+// addCardListener();
+
+function avatarChange() {
+  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
+  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
+  for (let i = 0; i < card.length; i++) {
+    card[i].classList.remove('active');
+    if (card[i].dataset.avatar == value) {
+      card[i].classList.add('active');
+    }
+  }
+}
+
+function openavatarModel() {
+  console.log(this.dataset.img);
+  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
+  modalTitle.textContent = `${this.dataset.avatar}`;
+  avatarModal.show();
+}
+
+// Drafts
+function getDraft() {
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let draftStr = '';
+    let nodraftTxt = '目前沒有草稿喔';
+      if(lan == 'en') {
+        titleTxt = 'Video Title';
+        editTxt = 'Edit';
+        nodraftTxt = 'no_draft';
+      }
+    if(result.length > 0){
+      for(let i = 0;i < result.length; i++) {
+        draftStr += `<tr>
+                  <td>${result[i].title}</td>
+                  <td>
+                  <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
+                    <i class="fas fa-edit"></i>
+                    </span>
+                    <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
+                    <i class="fas fa-trash-alt"></i>
+                    </span>
+                    </td>
+                </tr>`
+      }
+      let titleTxt = '標題';
+      let editTxt = '編輯';
+      str = `<table class="table text-center">
+      <thead>
+        <tr>
+          <th scope="col" set-lan="html:video_title">${titleTxt}</th>
+          <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
+        </tr>
+      </thead>
+      <tbody class="draft-content">${draftStr}</tbody>
+      </table>`
+      $('.draft-table .card').html(str);
+      JsLoadingOverlay.hide();
+    } else {
+      str = `<div>
+              <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
+              <img src="static/img/undraw_void_3ggu.svg" width="80">
+            </div>`;
+      $('.draft-table .card').html(str); 
+      JsLoadingOverlay.hide();
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+getDraft();
+function openDrafts() {
+  draftsModal.show()
+  document.querySelector('#draftModal .loader').style.display = "block";
+  $('#draftModal #draft-table').show();
+  getDraft();
+  document.querySelector('#draftModal .loader').style.display = "none";
+}
+
+function gotoDraft (id) {
+  location.href = `make_video2.html?draftid=${id}`;
+}
+
+function deleteDraft(id) {
+  let token = get_jwt_token();
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/del_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+    },
+    data: { "id": id }
+  }).then(res => {
+    console.log(res.data);
+    //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
+    JsLoadingOverlay.hide();
+    getDraft();
+    draftsModal.show();
+    avatarModal.hide();
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+// Upload
+$('input[type=file]').on('change', prepareUpload);
+function prepareUpload(event) {
+  files = event.target.files;
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'https://www.choozmo.com:8887/uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value = jsonData.msg;
+      $(this).prev().val(jsonData.msg);
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      //console.log($(this).next());
+      //$(this).next().html('上傳檔案');
+      //$(this).next().text('上傳檔案');
+    },
+    error: function (error) {
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      alert('圖片錯誤');
+    }
+  });
+}
+const button = document.querySelector('.next');
+
+const buttonSend = document.querySelector('#sendBTN');
+$("#sendBTN").click(function () {
+  buttonSend.setAttribute('disabled', '');
+  setTimeout(function () {
+    buttonSend.removeAttribute('disabled')
+  }, 15000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  imgARR = [];
+  txtARR = [];
+  var step;
+  txtARR.push($('.fs-txtarea').val());
+  let imgIdx = document.querySelectorAll(".imgsrc").length;
+  for (let i = 1; i < (imgIdx + 1); i++) {
+    if ($(`.imgsrc${i}`).val() != "") {
+      imgARR.push($(`.imgsrc${i}`).val())
+    }
+  }
+  multiLang = 0
+  if ($('#multiLang').prop("checked")) {multiLang = 1;}
+  dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  jwt_token =  get_jwt_token()
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_long");
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
+  xhr.setRequestHeader("Content-Type", "application/json");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      responseOBJ = JSON.parse(xhr.responseText)
+      if (responseOBJ.msg=='ok'){
+        let title = "資料已送出";
+        let text = '資料已傳送,請耐心等候';
+        if (lan == 'en') { // 英文版訊息
+          title = "Submitted Successfully!";
+          text = 'We are working on your video. You will get notfication in line group when your video is done.';
+        }
+        Swal.fire({
+          title: title,
+          icon: 'success',
+          text: text,
+          confirmButtonColor: '#3085d6',
+        });
+      } else {
+        let title = '發生錯誤';
+        let text;
+        if(lan == 'en') {
+          title = 'Error';
+          text = responseOBJ.msg.eng;
+        } else {
+          text = responseOBJ.msg.zh;
+        }
+        Swal.fire({
+          title: title,
+          icon: 'error',
+          text: text,
+          confirmButtonColor: '#3085d6',
+        });
+      }
+      
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  console.log(data)
+  result = xhr.send(objstr);
+});
+
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    var historyList = document.querySelector('.historyList');
+    historyList.innerHTML = '';
+    for (var obj of loaded_data) {
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      console.log(loaded_data);
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function view() {
+  event.stopPropagation();
+  console.log(event.target);
+  if (event.target.nodeName === 'I') {
+    return;
+  } else {
+    window.open(`http://${event.target.dataset.url}`, '_blank');
+  }
+}
+
+function renderXHR_data(jsonObj) {
+  XHRstring = ''
+  for (const [key, value] of Object.entries(jsonObj)) {
+    console.log(value)
+    if (typeof (value) == "object") {
+      XHRstring += (key+'=['+value.join(',')+']&')
+    }
+    else {
+      XHRstring += (key + '=' + value + '&')
+    }
+  }
+  XHRstring = XHRstring.substring(0, XHRstring.length - 1);
+  return XHRstring
+}
+
+function get_jwt_token(){
+  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+  if(!jwt_raw) {return}
+  return jwt_raw.split('=')[1];
+}
+
+function direct(id) {
+  location.href = `make_video2.html?id=${id}`;
+}
+
+
+function load_data(tid, loaded_data, draft = false) {
+  if(!tid) {
+    return;
+  }
+  var title = document.getElementById("title");
+  var linker = document.getElementById("linker");
+  myModal.hide();
+  if(!draft) {
+    linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
+    linker.setAttribute('target', '_blank')
+    $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
+    $("#linker").show();
+    $(".linker__box").show();
+  }
+  console.log(loaded_data);
+  let historyItem = loaded_data.filter(item => item.id == tid)[0];
+  console.log(historyItem.title);
+  if(draft) {
+    $(".title_new").val(historyItem.title);
+    $("#avatar").val(historyItem.avatar);
+  } else {
+    $(".title_new").val(loaded_data.find(item => item.id == tid).name);
+    $("#avatar").val(historyItem.avatar);
+  }
+
+  let txtlength = historyItem.text_content.length;
+  let imglength = historyItem.image_urls.length;
+
+  //subtitleInputs.innerHTML = '';
+  imgInputs.innerHTML = '';
+  
+  for (let i = 0; i < imglength; i++) {
+    var imginput = document.createElement("input");
+    imginput.setAttribute('type', 'text');
+    imginput.setAttribute('name', `m${i + 1}`);
+    imginput.classList.add('imgsrc', `imgsrc${i + 1}`);
+    imginput.value = historyItem.image_urls[i];
+    imginput.setAttribute('placeholder', `${i + 1}`);
+    imgInputs.appendChild(imginput);
+
+    var imgupload = document.createElement("input");
+    imgupload.setAttribute('id', `img${i + 1}`);
+    imgupload.setAttribute('type', `file`);
+    imgupload.classList.add('img_uploader', 'img_up');
+    imgInputs.appendChild(imgupload);
+    var imguploadlabel = document.createElement("label");
+    imguploadlabel.setAttribute('for', `img${i + 1}`);
+    imguploadlabel.classList.add('upload-btn');
+    imguploadlabel.textContent = '上傳檔案';
+    if(lan == 'en') {
+      imguploadlabel.textContent = 'Upload';
+    }
+    imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+    imgInputs.appendChild(imguploadlabel);
+  }
+   setTimeout(() => {
+    JsLoadingOverlay.hide();
+  }, 0);
+}
+
+getpathId();
+
+function getMode() {
+  let id = window.location.search.split('?').pop();
+  let mode = id.split('=')[0];
+  if(mode == 'draftid') {
+    /* JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#FFFFFF",
+      "overlayOpacity": "0.9",
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#B9DDF3",
+      "spinnerSize": "2x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 9998,
+      "spinnerZIndex": 9999
+    }); */
+    getDraftData();
+  } else if(mode == 'id') {
+    /* JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#FFFFFF",
+      "overlayOpacity": "0.9",
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#B9DDF3",
+      "spinnerSize": "2x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 9998,
+      "spinnerZIndex": 9999
+    }); */
+    getData();
+  }
+  return id.split('=')[1];
+  //load_data(id);
+}
+
+getMode();
+
+function getpathId(){
+  let id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+}
+
+function getData() {
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    loaded_data = res.data;
+    console.log(loaded_data);
+    const id = getpathId();
+    load_data(id, loaded_data);
+  }).catch(err => {
+    console.log(err);
+  });
+} 
+
+//var subtitleInputs = document.querySelector(".subtitle-inputs");
+var imgInputs = document.querySelector(".img-inputs");
+let length = 5;
+function initial() {
+  for (let i = 0; i < length; i++) {
+    //rendertxtBlock(i + 1);
+    renderimgBlock(i + 1);
+  }
+}
+
+//initial();
+
+
+var addimgbtn = document.querySelector(".addimg");
+
+
+//addimgbtn.addEventListener('click', addimgBlock);
+
+
+function addimgBlock() {
+  let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
+  renderimgBlock(newimgIdx);
+}
+
+function renderimgBlock(i) {
+  var imginput = document.createElement("input");
+  imginput.setAttribute('type', 'text');
+  imginput.setAttribute('name', `m${i}`);
+  imginput.classList.add('imgsrc', `imgsrc${i}`);
+  imginput.value = "";
+  imginput.setAttribute('placeholder', `${i}`);
+  imgInputs.appendChild(imginput);
+
+  var imgupload = document.createElement("input");
+  imgupload.setAttribute('id', `img${i}`);
+  imgupload.setAttribute('type', `file`);
+  imgupload.classList.add('img_uploader', 'img_up');
+  imgInputs.appendChild(imgupload);
+  var imguploadlabel = document.createElement("label");
+  imguploadlabel.setAttribute('for', `img${i}`);
+  imguploadlabel.classList.add('upload-btn');
+  imguploadlabel.textContent = '上傳檔案';
+  if(lan == 'en') {
+    imguploadlabel.textContent = 'Upload';
+  }
+  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+  imgInputs.appendChild(imguploadlabel);
+  $('input[type=file]').on('change', prepareUpload);
+}
+
+
+$('.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
+    }
+  }
+});
+
+$('.draft-btn').click(() => {
+  let text = '儲存中...';
+
+  if (lan == 'en') {
+    text = 'Saving...';
+  }
+
+  $('.draft-btn').text(text);
+
+  let jwt_token = get_jwt_token();
+  let avatar = $('.avatar').val();
+  let name_title = $('.title_new').val();
+  let txtARR = [];
+  let imgARR = [];
+  var step;
+  let contentIdx = document.querySelectorAll(".txtsrc").length;
+  for (let i = 1; i < (contentIdx + 1); i++) {
+    if ($(`.txtsrc${i}`).val() != "") {
+      txtARR.push($(`.txtsrc${i}`).val())
+    }
+  }
+  let imgIdx = document.querySelectorAll(".imgsrc").length;
+  for (let i = 1; i < (imgIdx + 1); i++) {
+    if ($(`.imgsrc${i}`).val() != "") {
+      imgARR.push($(`.imgsrc${i}`).val())
+    }
+  }
+  let multiLang = 0
+  if ($('#multiLang').prop("checked")) {multiLang = 1;}
+  let id = window.location.search.split('?').pop();
+  let mode = id.split('=')[0];
+  if(mode == 'draftid') {
+    id = Number(id.split('=')[1]);
+  } else {
+    id = -1;
+  }
+  let dataOBJ = { "id": id, "title": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang }
+  console.log(dataOBJ);
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/save_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`,
+        'Content-Type': 'application/json',
+     },
+    data: dataOBJ
+  }).then(res => {
+    console.log(res.data);
+    $('.draft-btn').text('存為草稿');
+    let title = "儲存完成";
+    if(lan == 'en') {
+      title = 'Saved!'
+      $('.draft-btn').text('Save as Draft');
+    }
+    Swal.fire({
+      title: title,
+      icon: 'success',
+      confirmButtonColor: '#3085d6',
+    }); 
+  }).catch(err => {
+    console.log(err);
+  });
+});
+
+function getDraftData() {
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let id = getpathId();
+    load_data(id, result, true);
+  }).catch(err => {
+    console.log(err);
+  });
+
+}
+
+$(".copy").click(function(){
+  const copyStr = $(this).next().text();
+  copyToClipboard(copyStr);
+});
+
+const copyToClipboard = str => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+  Swal.fire({
+    toast: true,
+    icon: 'success',
+    position: 'top-end',
+    title: 'Link copied!',
+    timerProgressBar: true,
+    showConfirmButton: false,
+    timer: 1000,
+    backdrop: false
+  })
+};
+

+ 517 - 0
html/script_profile.js

@@ -0,0 +1,517 @@
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+
+let lan = localStorage.getItem('lan');
+let defaultLength = 5;
+let historyData;
+
+$('.loading').hide();
+
+function getCookie(name) {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+}
+
+let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
+let inviteCode;
+
+function checkLocal() {
+  if(userBasics.length == 0){ return };
+  //userBasics = JSON.parse(userBasics);
+  if(userBasics !== [] && typeof(userBasics) !== 'string') {
+    console.log(typeof(userBasics));
+    $('.userName').html(`<h2 class="user-name text-white mt-4 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
+  }
+}
+
+$('.dropdown-toggle').click(() => {
+  lan = localStorage.getItem('lan');
+  checkLan();
+});
+
+checkLocal();
+
+function checkLan() {
+  if(lan == 'en') {
+    $('.btn-makev').css('display', 'none');
+    $('.btn-makelong').css('display', 'none');
+  } else {
+    $('.btn-makev').css('display', 'block');
+    $('.btn-makelong').css('display', 'block');
+  }
+}
+
+checkLan();
+
+
+function renderView() {
+  $('.loading').show();
+    let token = getCookie('jwt_token');
+    if(!token) {
+        window.location.replace("login.html");
+    }
+    axios({
+        method: 'post',
+        url: 'https://www.choozmo.com:8887/user_profile',
+        headers: { 
+            'accept': 'text/html',
+            'Authorization': `Bearer ${token}`
+         }
+    }).then(res => {
+        console.log(res.data);
+        let userInfo = res.data;
+        // if(!userInfo.user_info) {
+        //    window.location.replace("login.html");
+        // }
+        localStorage.setItem('user_profile', JSON.stringify(res.data));
+          if(userInfo.user_info.left_sec < 20){
+            let title = "剩餘秒數不足";
+            let text = '您的影片額度即將不足,加值以持續使用';
+            let confirmButtonText = '加值';
+                    if (lan == 'en') { 
+                        title = "Insufficient seconds left!";
+                        text = 'Your seconds left is less than 20 seconds, refill to continue making videos.';
+                        confirmButtonText = 'Refill';
+                    }
+            Swal.fire({
+                title,
+                text,
+                icon: 'warning',
+                showCancelButton: true,
+                cancelButtonText: 'Cancel',
+                confirmButtonColor: '#3085d6',
+                confirmButtonText
+            }).then(result => {
+              if (result.isConfirmed) {
+                window.open('pricing.html');
+              }
+            });
+          }
+        $('.share-fb').attr('href', `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fvideo.choozmo.com/invite.html?code=${userInfo.user_info.invite_code}`);
+        $('.share-twitter').attr('href',
+        `https://twitter.com/intent/tweet?text=I%20just%20created%20a%20video%20in%205%20minutes.%20Check%20it%20out%20%F0%9F%91%89%20https%3A%2F%2Fvideo.choozmo.com/invite.html?code=${userInfo.user_info.invite_code}&related=ai_cmm`)
+        
+        inviteCode = userInfo.user_info.invite_code;
+        invitelink=`https://video.choozmo.com/invite.html?code=${userInfo.user_info.invite_code}`
+        $('.invite-link').val(invitelink)
+        const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
+        <p class="card-profile-txt">User Profile</p>
+        <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
+        <p class="card-profile-cnt">${userInfo.user_info.email}</p>
+        <div class="d-flex justify-content-around">
+            <div>
+                <p set-lan="html:used">已使用</p>
+                <p><strong>${userInfo.user_info.total_sec}</strong><span set-lan="html:sec">秒</span></p>
+            </div>
+            <div>
+                <p set-lan="html:left">未使用</p>
+                <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
+            </div>
+        </div>`;
+        let totalSec = (userInfo.user_info.total_sec == "None") ? 0 : userInfo.user_info.total_sec;
+        let leftSec = (userInfo.user_info.left_sec == null)? 0 : userInfo.user_info.left_sec;
+        // 使用者名稱
+        let userName = `<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userInfo.user_info.userName}</h2>`;
+        // 已使用
+        let usedtime=`<h1 class="text-center">${totalSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
+        if(lang == 'en') {
+          usedtime=`<h1 class="text-center">${totalSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">Sec</span></h1>`;
+        }
+        // 未使用
+        let NotUsedTime=`<h1  class="text-center">${leftSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
+        if(lang == 'en') {
+          NotUsedTime=`<h1  class="text-center">${leftSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">Sec</span></h1>`;
+        }
+        // user資訊
+        let infContent=`
+        <div class="inf-content">
+            <p>${userInfo.user_info.userName}</p>
+            <p>************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
+            <p>${userInfo.user_info.email}</p>
+        </div>`;
+        if(lang == 'en') {
+          infContent=`
+            <div class="inf-content">
+                <p>${userInfo.user_info.userName}</p>
+                <p>***************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">Reset Password</a></p>
+                <p>${userInfo.user_info.email}</p>
+            </div>`;
+        }
+        // 歷史紀錄
+        // const historicalrecord 
+        historyData = {...userInfo};
+        var  historicalrecord='';
+        var length = userInfo.video_info.length > defaultLength ? defaultLength : userInfo.video_info.length;
+        for (var i = 0; i < length; i++) {
+          let formatted = userInfo.video_info[i].time_stamp;
+          if (lan == 'zh') {
+            const timeStamp = userInfo.video_info[i].time_stamp;
+            const year = timeStamp.split(',')[0].split('/')[2];
+            const arr = timeStamp.split(',')[0].split('/');
+            arr.pop();
+            arr.unshift(year);
+            const fomatDate = [arr.join('/')];
+            formatted = fomatDate.concat(timeStamp.split(',')[1]).join('');
+          }
+            historicalrecord+='\
+            <tr>\
+            <td class="px-0">'+formatted+'</td>\
+            <td class="px-0">'+userInfo.video_info[i].title+'</td>\
+            <td class="px-0 w-25">'+userInfo.video_info[i].duration+'</td>\
+          </tr>`\
+            ';
+         
+        }
+
+        $('.historical-content').html(historicalrecord); 
+        $('.userinf').html(infContent);
+        $('.userName').html(userName);
+        $('.used-time').html(usedtime);
+        $('.not-used-time').html(NotUsedTime);
+        $('.card-profile').html(str);
+        $('.card-profile').html(str);
+
+        $('.loading').hide();
+    }).catch(err => {
+      $('.loading').hide();
+        console.log(err);
+        //window.location.replace("login.html");
+    })
+}
+
+renderView();
+
+
+function getDraft() {
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let draftStr = '';
+    let nodraftTxt = '目前沒有草稿喔';
+      if(lan == 'en') {
+        titleTxt = 'Video Title';
+        editTxt = 'Edit';
+        nodraftTxt = 'no_draft';
+      }
+    if(result.length > 0){
+      for(let i = 0;i < result.length; i++) {
+        draftStr += `<tr>
+                  <td>${result[i].title}</td>
+                  <td>
+                  <span class="me-md-3 draft-content-icon" id="${result[i].id}" onclick="gotoDraft(${result[i].id})">
+                    <i class="fas fa-edit"></i>
+                    </span>
+                    <span class="ms-md-3 draft-content-icon draft-content-delete" id="${result[i].id}" onclick="deleteDraft(${result[i].id})">
+                    <i class="fas fa-trash-alt"></i>
+                    </span>
+                    </td>
+                </tr>`
+      }
+      let titleTxt = '標題';
+      let editTxt = '編輯';
+      
+      str = `<table class="table text-center">
+      <thead>
+        <tr>
+          <th scope="col" set-lan="html:video_title">${titleTxt}</th>
+          <th class="px-0" scope="col" set-lan="html:draft_edit">${editTxt}</th>
+        </tr>
+      </thead>
+      <tbody class="draft-content">${draftStr}</tbody>
+      </table>`
+      $('.draft-table .card').html(str);
+      JsLoadingOverlay.hide();
+    } else {
+      str = `<div>
+              <h5 set-lan="html:no_draft">${nodraftTxt}</h5>
+              <img src="static/img/undraw_void_3ggu.svg" width="80">
+            </div>`;
+      $('.draft-table .card').html(str); 
+      JsLoadingOverlay.hide();
+    }
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+getDraft();
+
+function checkLogin() {
+    let token = getCookie('jwt_token');
+    if(token) {
+        btnLoginPage.style.display = 'none';
+        btnLogout.style.display = 'block';
+        btnUserProfile.style.display = 'block';
+    } else {
+        window.location.href = 'login.html';
+        btnLoginPage.style.display = 'block';
+        btnLogout.style.display = 'none';
+        btnUserProfile.style.display = 'none';
+    }
+}
+
+
+checkLogin();
+$(".historical-record").hide();
+
+$( ".check-history" ).click(function() {
+  $(".historical-record").slideToggle(150);
+  $(".arrowdown").toggleClass("arrowdoup");
+  });
+
+$('.draft-table').hide();
+$('.draft .arrowdown').click(function() {
+    $(".draft-table").slideToggle(150);
+    $(".draft .arrowdown").toggleClass("arrowdoup");
+});
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    var historyList = document.querySelector('.historyList');
+    historyList.innerHTML = '';
+    for (var obj of loaded_data) {
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+function openDrafts() {
+  document.querySelector('#draftModal .loader').style.display = "block";
+  $('#draftModal #draft-table').show();
+  getDraft();
+  document.querySelector('#draftModal .loader').style.display = "none";
+}
+
+function direct(id) {
+    location.href = `make_video2.html?id=${id}`;
+}
+
+function view() {
+    event.stopPropagation();
+    console.log(event.target);
+    if (event.target.nodeName === 'I') {
+      return;
+    } else {
+      window.open(`http://${event.target.dataset.url}`, '_blank');
+    }
+  }
+
+function gotoDraft (id) {
+  location.href = `make_video2.html?draftid=${id}`;
+}
+function deleteDraft(id) {
+  let token = getCookie('jwt_token');
+  JsLoadingOverlay.show({
+    "overlayBackgroundColor": "#FFFFFF",
+    "overlayOpacity": "1",
+    "spinnerIcon": "ball-circus",
+    "spinnerColor": "#B9DDF3",
+    "spinnerSize": "1x",
+    "overlayIDName": "overlay",
+    "spinnerIDName": "spinner",
+    "offsetX": 0,
+    "offsetY": 0,
+    "containerID": "draft-table",
+    "lockScroll": false,
+    "overlayZIndex": 9998,
+    "spinnerZIndex": 9999
+  });
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/del_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+    },
+    data: { "id": id }
+  }).then(res => {
+    console.log(res.data);
+    //$('.draft-content-delete').html('<i class="fas fa-trash-alt"></i>');
+    JsLoadingOverlay.hide();
+    getDraft();
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+$('.share-email').click(function() {
+  var link = `mailto:me@example.com?subject=
+  ${encodeURIComponent("Check out AI Spokesgirl")}
+  &body=${encodeURIComponent(`I just created a video in 5 minutes, check out this amazing video making tool. https://video.choozmo.com/invite.html?code=${inviteCode}`)}`;
+    window.location.href = link;
+});
+
+function trialStart() {
+  let title = "歡迎使用AiSpokesgirl!將你的生活、創作 、宣傳做成影片。";
+  let html = `<p>您有  <b> 2 </b>  分鐘影片製作額度。</p><br>
+              <p>您可以使用:</p>
+              <ul>
+                <li>1. 短影片製作</li>
+                <li>2. 個人歷史紀錄儲存</li>
+                <li>3. 影片下載(Mp4)</li>
+              </ul>
+              <p>欲使用其他功能請升級為Premium方案</p>`;
+  let confirmButtonText = '我知道了!';
+  if (lan == 'en') { 
+    title = "Welcome to AiSpokesgirl! Make your first video for promotion, creation and life today!";
+    html = `<p>You get<b>2</b>minutes of video</p><br>
+            <p>Here are several features you can try,</p>
+            <ul>
+              <li>1. Short video creation</li>
+              <li>2. Personal video history</li>
+              <li>3. Downloadable format (MP4)</li>
+            </ul>
+            <p>Want to access more features? Follow the link below to upgrade to a paid plan today.</p>`;
+    confirmButtonText = 'OK';
+  }
+  Swal.fire({
+    title,
+    html,
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText
+  });
+}
+
+function trialEnd() {
+  let title = "您的試用即將結束!好的idea值得延續,透過影片將你的idea完整呈現。";
+  let html = `<p>前往網站以升級為Premium方案,或是聯絡我們以洽詢細節。</p>`;
+  let confirmButtonText = '立即升級';
+  if (lan == 'en') { 
+    title = "Your trial is gonna over soon. Your idea worth spreading.";
+    html = `<p>All good things don't have to come to an end.</p><br>
+            <h5>Show your idea through video</h5><br>
+            <p>Want to access more features? Follow the link below to upgrade 
+            to a paid plan today or contact us get further details.</p>`;
+    confirmButtonText = 'Upgrade Now';
+  }
+  Swal.fire({
+    title,
+    html,
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText
+  }).then(result => {
+    if (result.isConfirmed) {
+      location.href = "pricing.html";
+    }
+  });;
+}
+
+
+var screenWidth = screen.width;
+console.log(screenWidth)
+
+
+$( ".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");
+});
+
+function copyEvent(id) {
+  var Url = document.getElementById("invite-link");
+  Url.select();
+  // window.getSelection().selectAllChildren(str);
+  document.execCommand("Copy");
+  toastr.options = {
+    // 參數設定[註1]
+    "closeButton": false, // 顯示關閉按鈕
+    "debug": false, // 除錯
+    "newestOnTop": false,  // 最新一筆顯示在最上面
+    "progressBar": false, // 顯示隱藏時間進度條
+    "positionClass": "toast-top-center", // 位置的類別
+    "preventDuplicates": false, // 隱藏重覆訊息
+    "onclick": null, // 當點選提示訊息時,則執行此函式
+    "showDuration": "300", // 顯示時間(單位: 毫秒)
+    "hideDuration": "1000", // 隱藏時間(單位: 毫秒)
+    "timeOut": "1000", // 當超過此設定時間時,則隱藏提示訊息(單位: 毫秒)
+    "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時,離開後超過此設定時間則隱藏提示訊息(單位: 毫秒)
+    "showEasing": "swing", // 顯示動畫時間曲線
+    "hideEasing": "linear", // 隱藏動畫時間曲線
+    "showMethod": "fadeIn", // 顯示動畫效果
+    "hideMethod": "fadeOut" // 隱藏動畫效果
+  }
+  toastr.success("複製成功");
+}

BIN
html/static/.DS_Store


+ 30 - 0
html/static/common.js

@@ -0,0 +1,30 @@
+$(".btn-logout").click(function() { 
+  let token = getCookie('jwt_token');
+  if(!token) {
+    return
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/logout_jwt',
+    headers: { 
+      'accept': 'application/json',
+      'Authorization': `Bearer ${token}`
+    },
+    data: ''
+    }).then(res => {
+      console.log(res.data);
+      if(res.data.msg == 'ok'){
+        document.cookie = 'jwt_token=null';
+      }
+      window.location.href = 'index.html';
+    }).catch(err => {
+      console.log(err);
+    });
+});
+
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+}
+

+ 110 - 0
html/static/gen_avatar.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
+  <link rel="stylesheet" href="static/style.css">
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <style>
+    body {
+      font-family: "Lato", sans-serif;
+    }
+    .sidenav {
+      height: 100%;
+      width: 250px;
+      position: fixed;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      background: linear-gradient(to bottom, #1C7CE0, #150051);
+      overflow-x: hidden;
+      transition: 0.5s;
+      padding-top: 20px;
+    }
+    
+    .sidenav a {
+      padding: 8px 8px 8px 32px;
+      text-decoration: none;
+      font-size: 25px;
+      color: #818181;
+      display: block;
+      transition: 0.3s;
+    }
+    
+    .sidenav a:hover {
+      color: #f1f1f1;
+    }
+    
+    .sidenav .closebtn {
+      position: absolute;
+      top: 0;
+      right: 25px;
+      font-size: 36px;
+      margin-left: 50px;
+    }
+    
+    @media screen and (max-height: 450px) {
+      .sidenav {padding-top: 15px;}
+      .sidenav a {font-size: 18px;}
+    }
+    </style>
+</head>
+<body>
+  <div class="container-fluid">
+    <div id="mySidenav" class="sidenav">
+      <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
+      <h2 class="go_title">AI ANCHOR GO</h2>
+      <ul class="nav-list">
+        <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>使用說明</li>
+        <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>歷史紀錄</li>
+      </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="content ms-auto">
+      <form id="msform">
+        <fieldset id='imgSrc'>
+          <h3 class="fs-subtitle" style="display: inline-block;">影像連結<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
+          <input type="text" name='m1' class='imgsrc imgsrc1' value="" placeholder="1" /><input id="img1" type="file" class="img_uploader img_up"><label for="img1" class="upload-btn">上傳檔案</label><br/>
+        
+          <input id="checker" type="button" class="gen_avatar action-button" value="送出" />
+
+        </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>
+    
+
+
+  </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="static/gen_avatar.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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
+  <script src="static/gen_avatar.js"></script>
+
+
+  <body>
+
+</div>
+
+</body>
+</html>

+ 189 - 0
html/static/gen_avatar.js

@@ -0,0 +1,189 @@
+
+$('input[type=file]').on('change', prepareUpload);
+
+// Grab the files and set them to our variable
+function prepareUpload(event) {
+  files = event.target.files;
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value =jsonData.msg;
+      $(this).prev().val(jsonData.msg);
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      //console.log($(this).next());
+      //$(this).next().html('上傳檔案');
+      //$(this).next().text('上傳檔案');
+    },
+    error: function (error) {
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      alert('圖片錯誤');
+    }
+  });
+}
+const button = document.querySelector('.next');
+
+$(".next").click(function () {
+  button.setAttribute('disabled', '');
+  setTimeout(function () {
+    button.removeAttribute('disabled')
+  }, 4000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  txtARR = [];
+  imgARR = [];
+  var step;
+  for (step = 1; step <= 10; step++) {
+    if ($(".txtsrc" + step).val() != "") {
+      txtARR.push($(".txtsrc" + step).val())
+    }
+  }
+  var step2;
+  for (step2 = 1; step2 <= 10; step2++) {
+    if ($(".imgsrc" + step2).val() != "") {
+      imgARR.push($(".imgsrc" + step2).val())
+    }
+  }
+  dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  //alert('資料已送出! 請耐心等候')
+  $.ajax({
+    url: '192.168.1.106:8887/make_anchor_video_v2',
+    //url: 'http://www.choozmo.com:8888/qqreq',
+    dataType : 'json', // 預期從server接收的資料型態
+    contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
+    type: 'post',
+    data: objstr,
+    success: function(suc_data) {
+      Swal.fire({
+        title: "資料已送出",
+        icon: 'success',
+        text: `${suc_data.msg}`,
+        confirmButtonColor: '#3085d6',
+      });  
+      },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
+  
+  });
+
+$(".gen_avatar").click(function () {
+
+  dataOBJ = { "imgurl": $('.imgsrc').val() }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  //alert('資料已送出! 請耐心等候')
+  $.ajax({
+    url: '192.168.1.106:8887/swapFace',
+    dataType: 'json', // 預期從server接收的資料型態
+    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
+    type: 'post',
+    data: objstr,
+    success: function (suc_data) {
+      alert(suc_data.msg)
+    },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
+
+});
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  $.get("192.168.1.106:8887/history_input", function (data, status) {
+    console.log(data)
+    loaded_data = data
+    for (var obj of data) {
+      var historyList = document.querySelector('.historyList');
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      boxTitle.setAttribute('onclick', 'load_data()');
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', 'load_data()');
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  });
+}
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function view() {
+  event.stopPropagation();
+  console.log(event.target);
+  if(event.target.nodeName === 'I') {
+    return;
+  } else {
+    window.open(`http://${event.target.dataset.url}`, '_blank');
+  }
+}
+
+
+function load_data() {
+  var title = document.getElementById("title");
+  var linker = document.getElementById("linker");
+
+  myModal.hide()
+  tid = event.srcElement.id
+  console.log(tid);
+  linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
+  linker.setAttribute('target', '_blank')
+  $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
+  $("#linker").show();
+  $(".linker__box").show();
+
+  $(".title_new").val(loaded_data.find(item => item.id == tid).name)
+  var step;
+  for (step = 1; step <= 10; step++) {
+    $(".txtsrc" + step).val(loaded_data.find(item => item.id == tid).text_content[step - 1])
+  }
+  var step2;
+  for (step2 = 1; step2 <= 10; step2++) {
+    $(".imgsrc" + step2).val(loaded_data.find(item => item.id == tid).image_urls[step2 - 1])
+  }
+
+}

BIN
html/static/img/Amelia.webp


BIN
html/static/img/Angela.webp


BIN
html/static/img/Cube-0.9s-197px.gif


BIN
html/static/img/Isabela.webp


BIN
html/static/img/Jocelyn.webp


BIN
html/static/img/Kristina.webp


BIN
html/static/img/Paula.webp


BIN
html/static/img/Sofia.webp


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


BIN
html/static/img/Usecases/示意_內容創作.webp


BIN
html/static/img/Usecases/示意_商家報導.webp


BIN
html/static/img/Usecases/示意_展覽.webp


BIN
html/static/img/Usecases/示意_教育培訓.webp


BIN
html/static/img/Usecases/示意_新聞.webp


BIN
html/static/img/Usecases/示意_機構.webp


BIN
html/static/img/Usecases/示意_氣象.webp


BIN
html/static/img/Usecases/示意_產品介紹.webp


BIN
html/static/img/Usecases/示意_觀光導覽.webp


BIN
html/static/img/angus.webp


BIN
html/static/img/book.png


BIN
html/static/img/bx_loader.gif


BIN
html/static/img/checked (2).png


+ 1 - 0
html/static/img/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.229" height="22.229" viewBox="0 0 22.229 22.229"><path d="M29.729,9.739,27.49,7.5l-8.876,8.876L9.739,7.5,7.5,9.739l8.876,8.876L7.5,27.49l2.239,2.239,8.876-8.876,8.876,8.876,2.239-2.239-8.876-8.876Z" transform="translate(-7.5 -7.5)" fill="#fff"/></svg>

BIN
html/static/img/contactus/CMM_LOGO.png


BIN
html/static/img/contactus/IG.png


BIN
html/static/img/contactus/LINE_logo.svg.png


BIN
html/static/img/contactus/choozmo (2).png


BIN
html/static/img/contactus/choozmo-nav.png


BIN
html/static/img/contactus/facebook_logos_PNG19753.png


BIN
html/static/img/contactus/linkedin-logo-copy.png


BIN
html/static/img/contactus/man.jpg


BIN
html/static/img/contactus/twitter.png


BIN
html/static/img/contactus/woman.png


BIN
html/static/img/contactus/youtube.png


BIN
html/static/img/draft-button.png


BIN
html/static/img/girl2.png


BIN
html/static/img/index/BG.webp


BIN
html/static/img/index/BG_phone.webp


BIN
html/static/img/index/CMM_LOGO_白.png


BIN
html/static/img/index/Group 29.webp


BIN
html/static/img/index/Group 30.webp


BIN
html/static/img/index/PC.webp


BIN
html/static/img/index/组 29-m.webp


BIN
html/static/img/index/组 29.webp


BIN
html/static/img/intro.png


BIN
html/static/img/intro2.jpg


BIN
html/static/img/intro_en.png


BIN
html/static/img/nav-bg.png


BIN
html/static/img/news-anchor (1).png


BIN
html/static/img/ninablack.webp


BIN
html/static/img/ninawhite.webp


BIN
html/static/img/nina灰.webp


BIN
html/static/img/nina黑.webp


BIN
html/static/img/peggy.webp


BIN
html/static/img/question.png


BIN
html/static/img/sideImg.png


BIN
html/static/img/stacy.webp


BIN
html/static/img/summer.webp


BIN
html/static/img/summer韓小夏.webp


BIN
html/static/img/transfer.png


Різницю між файлами не показано, бо вона завелика
+ 0 - 0
html/static/img/undraw_male_avatar_323b.svg


Різницю між файлами не показано, бо вона завелика
+ 0 - 0
html/static/img/undraw_mobile_user_7oqo.svg


Різницю між файлами не показано, бо вона завелика
+ 0 - 0
html/static/img/undraw_video_upload_3d4u.svg


Різницю між файлами не показано, бо вона завелика
+ 0 - 0
html/static/img/undraw_void_3ggu.svg


BIN
html/static/img/undraw_well_done_i2wr.png


BIN
html/static/img/upload_img.png


BIN
html/static/img/userprofile/Icon awesome-facebook-square.png


BIN
html/static/img/userprofile/Icon awesome-twitter-square.png


BIN
html/static/img/userprofile/Icon ionic-md-add-circle.png


Деякі файли не було показано, через те що забагато файлів було змінено