2 роки тому · 8bda266eaa
--- a/html/index.html
+++ b/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>
			
--- a/html/indexB.html
+++ b/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>
			
--- a/html/index_eng.html
+++ b/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>
			
--- a/html/invite.html
+++ b/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>
			
--- a/html/invite.js
+++ b/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();
			
--- a/html/login.html
+++ b/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>
			
--- a/html/login.js
+++ b/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();
			
--- a/html/login.js_bak
+++ b/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();
			
--- a/html/loginB.html
+++ b/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>
			
--- a/html/make_video.html
+++ b/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>
			
--- a/html/make_video2.html
+++ b/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>
			
--- a/html/make_video_long.html
+++ b/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>
			
--- a/html/make_video_slide.html
+++ b/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>
			
--- a/html/make_video_slide_eng.html
+++ b/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>
			
--- a/html/pricing.html
+++ b/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>
			
--- a/html/pricingB.html
+++ b/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>
			
--- a/html/privacy.html
+++ b/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>
			
--- a/html/register.html
+++ b/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>
			
--- a/html/register.js
+++ b/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();
			
--- a/html/reset_pwd.html
+++ b/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>
			
--- a/html/reset_pwd.js
+++ b/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');
			
 
				+    }
			
 
				+  }
			
 
				+
			
--- a/html/reset_pwd_email.html
+++ b/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>
			
--- a/html/reset_pwd_email.js
+++ b/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');
			
 
				+    }
			
 
				+}
			
--- a/html/script_eng.js
+++ b/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);
			
 
				+}
			
--- a/html/script_index.js
+++ b/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();
			
 
				+
			
--- a/html/script_long.js
+++ b/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
			
 
				+  })
			
 
				+};
			
 
				+
			
--- a/html/script_profile.js
+++ b/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("複製成功");
			
 
				+}
			
--- a/html/static/.DS_Store
+++ b/html/static/.DS_Store
--- a/html/static/common.js
+++ b/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();
			
 
				+}
			
 
				+
			
--- a/html/static/gen_avatar.html
+++ b/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>
			
--- a/html/static/gen_avatar.js
+++ b/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])
			
 
				+  }
			
 
				+
			
 
				+}
			
--- a/html/static/img/Amelia.webp
+++ b/html/static/img/Amelia.webp
--- a/html/static/img/Angela.webp
+++ b/html/static/img/Angela.webp
--- a/html/static/img/Cube-0.9s-197px.gif
+++ b/html/static/img/Cube-0.9s-197px.gif
--- a/html/static/img/Isabela.webp
+++ b/html/static/img/Isabela.webp
--- a/html/static/img/Jocelyn.webp
+++ b/html/static/img/Jocelyn.webp
--- a/html/static/img/Kristina.webp
+++ b/html/static/img/Kristina.webp
--- a/html/static/img/Paula.webp
+++ b/html/static/img/Paula.webp
--- a/html/static/img/Sofia.webp
+++ b/html/static/img/Sofia.webp
--- a/html/static/img/Spinner-1s-181px.gif
+++ b/html/static/img/Spinner-1s-181px.gif
--- a/html/static/img/Usecases/示意_內容創作.webp
+++ b/html/static/img/Usecases/示意_內容創作.webp
--- a/html/static/img/Usecases/示意_商家報導.webp
+++ b/html/static/img/Usecases/示意_商家報導.webp
--- a/html/static/img/Usecases/示意_展覽.webp
+++ b/html/static/img/Usecases/示意_展覽.webp
--- a/html/static/img/Usecases/示意_教育培訓.webp
+++ b/html/static/img/Usecases/示意_教育培訓.webp
--- a/html/static/img/Usecases/示意_新聞.webp
+++ b/html/static/img/Usecases/示意_新聞.webp
--- a/html/static/img/Usecases/示意_機構.webp
+++ b/html/static/img/Usecases/示意_機構.webp
--- a/html/static/img/Usecases/示意_氣象.webp
+++ b/html/static/img/Usecases/示意_氣象.webp
--- a/html/static/img/Usecases/示意_產品介紹.webp
+++ b/html/static/img/Usecases/示意_產品介紹.webp
--- a/html/static/img/Usecases/示意_觀光導覽.webp
+++ b/html/static/img/Usecases/示意_觀光導覽.webp
--- a/html/static/img/angus.webp
+++ b/html/static/img/angus.webp
--- a/html/static/img/book.png
+++ b/html/static/img/book.png
--- a/html/static/img/bx_loader.gif
+++ b/html/static/img/bx_loader.gif
--- a/html/static/img/checked
+++ b/html/static/img/checked
--- a/html/static/img/close.svg
+++ b/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>
			
--- a/html/static/img/contactus/CMM_LOGO.png
+++ b/html/static/img/contactus/CMM_LOGO.png
--- a/html/static/img/contactus/IG.png
+++ b/html/static/img/contactus/IG.png
--- a/html/static/img/contactus/LINE_logo.svg.png
+++ b/html/static/img/contactus/LINE_logo.svg.png
--- a/html/static/img/contactus/choozmo
+++ b/html/static/img/contactus/choozmo
--- a/html/static/img/contactus/choozmo-nav.png
+++ b/html/static/img/contactus/choozmo-nav.png
--- a/html/static/img/contactus/facebook_logos_PNG19753.png
+++ b/html/static/img/contactus/facebook_logos_PNG19753.png
--- a/html/static/img/contactus/linkedin-logo-copy.png
+++ b/html/static/img/contactus/linkedin-logo-copy.png
--- a/html/static/img/contactus/man.jpg
+++ b/html/static/img/contactus/man.jpg
--- a/html/static/img/contactus/twitter.png
+++ b/html/static/img/contactus/twitter.png
--- a/html/static/img/contactus/woman.png
+++ b/html/static/img/contactus/woman.png
--- a/html/static/img/contactus/youtube.png
+++ b/html/static/img/contactus/youtube.png
--- a/html/static/img/draft-button.png
+++ b/html/static/img/draft-button.png
--- a/html/static/img/girl2.png
+++ b/html/static/img/girl2.png
--- a/html/static/img/index/BG.webp
+++ b/html/static/img/index/BG.webp
--- a/html/static/img/index/BG_phone.webp
+++ b/html/static/img/index/BG_phone.webp
--- a/html/static/img/index/CMM_LOGO_白.png
+++ b/html/static/img/index/CMM_LOGO_白.png
--- a/html/static/img/index/Group
+++ b/html/static/img/index/Group
--- a/html/static/img/index/Group
+++ b/html/static/img/index/Group
--- a/html/static/img/index/PC.webp
+++ b/html/static/img/index/PC.webp
--- a/html/static/img/index/组
+++ b/html/static/img/index/组
--- a/html/static/img/index/组
+++ b/html/static/img/index/组
--- a/html/static/img/intro.png
+++ b/html/static/img/intro.png
--- a/html/static/img/intro2.jpg
+++ b/html/static/img/intro2.jpg
--- a/html/static/img/intro_en.png
+++ b/html/static/img/intro_en.png
--- a/html/static/img/nav-bg.png
+++ b/html/static/img/nav-bg.png
--- a/html/static/img/news-anchor
+++ b/html/static/img/news-anchor
--- a/html/static/img/ninablack.webp
+++ b/html/static/img/ninablack.webp
--- a/html/static/img/ninawhite.webp
+++ b/html/static/img/ninawhite.webp
--- a/html/static/img/nina灰.webp
+++ b/html/static/img/nina灰.webp
--- a/html/static/img/nina黑.webp
+++ b/html/static/img/nina黑.webp
--- a/html/static/img/peggy.webp
+++ b/html/static/img/peggy.webp
--- a/html/static/img/question.png
+++ b/html/static/img/question.png
--- a/html/static/img/sideImg.png
+++ b/html/static/img/sideImg.png
--- a/html/static/img/stacy.webp
+++ b/html/static/img/stacy.webp
--- a/html/static/img/summer.webp
+++ b/html/static/img/summer.webp
--- a/html/static/img/summer韓小夏.webp
+++ b/html/static/img/summer韓小夏.webp
--- a/html/static/img/transfer.png
+++ b/html/static/img/transfer.png
--- a/html/static/img/undraw_male_avatar_323b.svg
+++ b/html/static/img/undraw_male_avatar_323b.svg
--- a/html/static/img/undraw_mobile_user_7oqo.svg
+++ b/html/static/img/undraw_mobile_user_7oqo.svg
--- a/html/static/img/undraw_video_upload_3d4u.svg
+++ b/html/static/img/undraw_video_upload_3d4u.svg
--- a/html/static/img/undraw_void_3ggu.svg
+++ b/html/static/img/undraw_void_3ggu.svg
--- a/html/static/img/undraw_well_done_i2wr.png
+++ b/html/static/img/undraw_well_done_i2wr.png
--- a/html/static/img/upload_img.png
+++ b/html/static/img/upload_img.png
--- a/html/static/img/userprofile/Icon
+++ b/html/static/img/userprofile/Icon
--- a/html/static/img/userprofile/Icon
+++ b/html/static/img/userprofile/Icon
--- a/html/static/img/userprofile/Icon
+++ b/html/static/img/userprofile/Icon