2 gadi atpakaļ · 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