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

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

html/make_video.html

@@ -80,14 +80,59 @@
     <!-- content -->
     <div class="container-fluid px-0">
         <div class="container-fluid">
-            <div id="mySidenav" class="sidenav">
-                <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
+            <!-- <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> -->
+            <div id="mySidenav" class="sidenav">
+                <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
+                <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>
+                <h2 class="user-name text-white mt-4 fw-bold">Hello,Hana</h2>
+                <img class="user img-fluid rounded-circle" src="./static/img/contactus/man.jpg" alt="">
+                <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+                <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影影片製作</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>
+                    <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
+                        <i class="fas fa-user me-2"></i>
+                       <lan set-lan="user_profile">會員資料</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>
+                <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">

html/make_video_long.html

@@ -80,14 +80,59 @@
     <!-- content -->
     <div class="container-fluid px-0">
         <div class="container-fluid">
-            <div id="mySidenav" class="sidenav">
-                <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
+            <!-- <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> -->
+            <div id="mySidenav" class="sidenav">
+                <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
+                <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/contactus/man.jpg" alt="">
+                <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+                <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</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>
+                    <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
+                        <i class="fas fa-user me-2"></i>
+                       <lan set-lan="user_profile">會員資料</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>
+                <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">

html/make_video_slide.html

@@ -80,14 +80,59 @@
     <!-- content -->
     <div class="container-fluid px-0">
         <div class="container-fluid">
-            <div id="mySidenav" class="sidenav">
-                <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
+            <!-- <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> -->
+            <div id="mySidenav" class="sidenav">
+                <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
+                <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>
+                <h2 class="user-name text-white mt-4 fw-bold">Hello,Hana</h2>
+                <img class="user img-fluid rounded-circle" src="./static/img/contactus/man.jpg" alt="">
+                <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+                <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</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>
+                    <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
+                        <i class="fas fa-user me-2"></i>
+                       <lan set-lan="user_profile">會員資料</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>
+                <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> -->

html/static/lan.js

@@ -18,8 +18,8 @@ function getCookie(name)
 }
 
 var zh = {
-    "make_video" : "製作影片",
-    "make_slides" : "影片製作(投影片版本)",
+    "make_video" : "影片製作",
+    "make_slides" : "投影影片製作",
     "login" : "登入",
     "user_profile": "會員資料",
     "logout": "登出",

html/static/script_util.js

@@ -1,3 +1,23 @@
+$(document).ready(function () {
+  let token = getCookie('jwt_token');
+  if(!token) {
+      return;
+  }
+  axios({
+    method: 'post',
+    url: 'http://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${token}`
+     }
+}).then(res => {
+  var userName='';
+  console.log(res.data.user_info.userName);
+  userName+=' <h2 class="user-name text-white mt-4 fw-bold">Hello,'+res.data.user_info.userName+'</h2>';
+  $('.userName').html(userName);
+  })
+});
+
 function checkRoute() {
   jwt_token = get_jwt_token();
   if(jwt_token == undefined) {
@@ -504,3 +524,13 @@ $('.owl-carousel').owlCarousel({
   }
 });
 
+// $.ajax({
+//   method: "GET",
+//   url: "http://www.choozmo.com:8887/user_profile",
+//   dataType: "json",
+// })
+// .done(function(msg){
+//     console,log(msg);
+// })
+
+

html/static/scss/style.css

@@ -161,11 +161,6 @@ body {
   opacity: 1;
 }
 
-.right-text {
-  position: absolute;
-  bottom: 0rem;
-}
-
 .loader {
   position: absolute;
   top: 30%;
@@ -1245,4 +1240,132 @@ body {
     margin: 0 0 40px;
   }
 }
+
+.sidenav {
+  height: 100%;
+  width: 250px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051));
+  background: linear-gradient(to bottom, #1c7ce0, #150051);
+  overflow-x: hidden;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  text-align: center;
+}
+
+.sidenav hr {
+  background: #fff;
+  opacity: 1 !important;
+  height: 1px;
+  width: 85%;
+  margin: 15px auto;
+}
+
+.sidenav .sidebar {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.sidenav .user {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100px;
+}
+
+.sidenav .user-name {
+  font-size: 1.5rem;
+}
+
+.sidenav .navbar-nav {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.sidenav .navbar-nav .btn-gocreate {
+  font-size: 14px;
+  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
+  background: linear-gradient(90deg, #0162c8, #55e7fc);
+  color: white;
+  border: 0 none;
+  border-radius: 10px;
+  cursor: pointer;
+  margin: 10px 3px;
+  display: inline;
+}
+
+.sidenav .navbar-nav .active {
+  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
+  background: linear-gradient(90deg, #0162c8, #55e7fc);
+}
+
+.sidenav a {
+  text-decoration: none;
+  font-size: 32px;
+  color: #f1f1f1;
+  display: block;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: #818181;
+}
+
+.sidenav .sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+.sidenav .nav-list {
+  color: white;
+  list-style: none;
+  text-align: center;
+}
+
+.sidenav .nav-list .nav-list-item {
+  font-size: 1.2rem;
+  cursor: pointer;
+  position: relative;
+}
+
+.sidenav .nav-list .nav-list-item::after {
+  content: " ";
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  left: 25%;
+  top: 5px;
+  border-bottom: 1px solid white;
+  opacity: 0;
+  -webkit-transition: all 0.4s;
+  transition: all 0.4s;
+}
+
+.sidenav .nav-list .nav-list-item:hover::after {
+  opacity: 1;
+}
+
+.sidenav .right-text {
+  padding-top: 9vw;
+  color: #fff;
+}
+
+.sidenav .right-text a {
+  font-size: 18px;
+  display: inline;
+  margin: 2px;
+}
+
+.sidenav .right-text a img {
+  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
+          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
+}
 /*# sourceMappingURL=style.css.map */

html/static/scss/style.scss

@@ -152,10 +152,6 @@ body {
 	opacity: 1;
 }
 
-.right-text {
-	position: absolute;
-	bottom: 0rem;
-}
 
 .loader {
 	position: absolute;
@@ -1126,3 +1122,110 @@ body {
 @media only screen and (max-width: 990px){
     .pricingTable{ margin: 0 0 40px; }
 }
+
+// 側邊欄選單
+.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;
+    text-align: center;
+    hr{
+        background: #fff;
+        opacity: 1 !important;
+        height: 1px;
+        width: 85%;
+        margin: 15px auto;
+    }
+    .sidebar{
+        width: 80%;
+        margin:0 auto ;
+    }
+    .user{
+        object-fit: cover;
+        width: 100px;
+    }
+    .user-name{
+        font-size: 1.5rem;
+    }
+    .navbar-nav{
+        flex-direction: row;
+        .btn-gocreate{
+            font-size: 14px;
+            background: linear-gradient(90deg, #0162c8, #55e7fc);
+            // background:#31426C;
+            color: white;
+            border: 0 none;
+            border-radius: 10px;
+            cursor: pointer;
+            margin: 10px 3px;
+            display: inline;
+        }
+        .active{
+              background: linear-gradient(90deg, #0162c8, #55e7fc);
+        }
+    } 
+    a {
+        text-decoration: none;
+        font-size: 32px;
+        color: #f1f1f1;
+        display: block;
+        transition: 0.3s;
+        &:hover{
+            color: #818181;
+           
+        }
+    }
+
+    .sidenav .closebtn {
+        position: absolute;
+        top: 0;
+        right: 25px;
+        font-size: 36px;
+        margin-left: 50px;
+    }
+    .nav-list {
+        color: white;
+        list-style: none;
+        text-align: center;
+        .nav-list-item {
+            font-size: 1.2rem;
+            cursor: pointer;
+            position: relative;
+        }
+    
+        .nav-list-item::after {
+            content: " ";
+            position: absolute;
+            width: 50%;
+            height: 100%;
+            left: 25%;
+            top: 5px;
+            border-bottom: 1px solid white;
+            opacity: 0;
+            transition: all 0.4s;
+        }
+    
+        .nav-list-item:hover::after {
+            opacity: 1;
+        }
+       
+    }
+    .right-text {
+     padding-top: 9vw;
+        color: #fff;
+      a{
+          font-size: 18px;
+          display: inline;
+          margin: 2px;
+          img{
+            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
+          }
+      }
+    }
+}