lans and opennav

html/login.html

@@ -74,8 +74,8 @@
                     <source src="static/img/登入影片.mp4" type="video/mp4">
                 </video>
                 <div class="row-img-box text-center">
-                    <h2>將你的生活、創作 、宣傳做成影片</h2>
-                    <h4>開始使用 AI Spokesgirl</h4>
+                    <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>

html/make_video.html

@@ -99,7 +99,7 @@
                     <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="user_profile">會員資料</lan>
+                           <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()">

html/register.html

@@ -74,8 +74,8 @@
                     <source src="static/img/登入影片.mp4" type="video/mp4">
                 </video>
                 <div class="row-img-box text-center">
-                    <h2>將你的生活、創作 、宣傳做成影片</h2>
-                    <h4>開始使用 AI Spokesgirl</h4>
+                    <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>

html/script_profiles.js

@@ -10,9 +10,9 @@ function getCookie(name) {
 
 function renderView() {
     let token = getCookie('jwt_token');
-    // if(!token) {
-    //     return;
-    // }
+    if(!token) {
+        return;
+     }
     // axios.defaults.withCredentials = false;
     axios({
         method: 'post',
@@ -55,14 +55,14 @@ function renderView() {
         // 使用者名稱
         const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
         // 已使用
-        const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;">秒</span></h1>`;
+        const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
         // 未使用
-        const NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;">秒</span></h1>`;
+        const NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
         // user資訊
         const infContent=`
         <div class="inf-content">
             <p>${userInfo.user_info.userName}</p>
-            <p>***************&nbsp;<a href="./reset_pwd_email.html">更改密碼</a></p>
+            <p>***************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
             <p>${userInfo.user_info.email}</p>
         </div>`;
         // 歷史紀錄
@@ -116,4 +116,72 @@ $(".historical-record").hide();
 $( ".check-history" ).click(function() {
   $(".historical-record").toggle();
   $(".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;
+    for (var obj of loaded_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', `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_video.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');
+    }
+  }

html/static/lan.js

@@ -18,6 +18,8 @@ function getCookie(name)
 }
 
 var zh = {
+    "logleftbox1": "將你的生活、創作 、宣傳做成影片",
+    "logleftbox2": "開始使用 AI Spokesgirl",
     "make_video" : "影片製作",
     "make_slides" : "投影影片製作",
     "make_video_long": "長影片製作",
@@ -50,10 +52,20 @@ var zh = {
     "errorPsd": "密碼至少為4個字元",
     "used": "已使用",
     "left": "未使用",
-    "sec": "秒"
+    "sec": "秒",
+    "username": "帳號/用戶名稱",
+    "password": "密碼",
+    "resetPsd": "更改密碼",
+    "details": "查看詳情",
+    "refill": "我要加值",
+    "Createsthtoday": "今天要做甚麼影片呢?",
+    "date": "日期",
+    "video_duration": "影片時間"
 };
 
 var en = {
+    "logleftbox1": "Make your first video for promotion, creation and life today",
+    "logleftbox2": "Let's get started with AI Spokesgirl",
     "make_video" : "Make Videos",
     "make_slides" : "Make Videos By Slides",
     "make_video_long": "Make Long Videos",
@@ -86,7 +98,15 @@ var en = {
     "errorPsd": "Passwords must be at least 4 characters long.",
     "used": "Already Used",
     "left": "Left",
-    "sec": "Sec"
+    "sec": "Sec",
+    "username": "User Name",
+    "password": "password",
+    "resetPsd": "Reset Password",
+    "details": "Details",
+    "refill": "Refill",
+    "Createsthtoday": "Create something today!",
+    "date": "Date",
+    "video_duration": "Duration"
 };
 
 

html/static/script_util.js

@@ -323,7 +323,7 @@ function openNav() {
       boxTitle.classList.add('box-title');
       boxTitle.textContent = obj.name;
       boxTitle.id = obj.id;
-      boxTitle.setAttribute('onclick', 'load_data()');
+      boxTitle.setAttribute('onclick', `load_data(${obj.id})`);
 
       var boxLink = document.createElement('span');
       boxLink.classList.add('box-link');
@@ -333,7 +333,7 @@ function openNav() {
       contentBox.appendChild(boxTitle);
       contentBox.appendChild(boxLink);
       list.classList.add("historyList-item");
-      list.setAttribute('onclick', 'load_data()');
+      list.setAttribute('onclick', `load_data(${obj.id})`);
       list.appendChild(divImgfr);
       list.appendChild(contentBox);
       historyList.appendChild(list);
@@ -379,13 +379,13 @@ function get_jwt_token(){
   return jwt_raw.split('=')[1];
 }
 
-function load_data() {
+function load_data(tid) {
   var title = document.getElementById("title");
   var linker = document.getElementById("linker");
-
+  //getData();
   myModal.hide()
-  tid = event.srcElement.id
-  console.log(tid);
+  //tid = event.srcElement.id
+  console.log(loaded_data);
   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}`)
@@ -433,6 +433,30 @@ function load_data() {
 
 }
 
+/* getpathId();
+
+function getpathId() {
+  let id = window.location.search.split('?').pop();
+  load_data(id);
+}
+
+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 => {
+    console.log(res.data);
+    loaded_data = res.data;
+  }).catch(err => {
+    console.log(err);
+  });
+} */
+
 var subtitleInputs = document.querySelector(".subtitle-inputs");
 var imgInputs = document.querySelector(".img-inputs");
 let length = 5;

html/user_profile2.html

@@ -79,7 +79,7 @@
             </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>
+            <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" 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>
@@ -93,7 +93,7 @@
                 <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="user_profile">會員資料</lan>
+                       <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()">
@@ -127,8 +127,8 @@
                     <div class="information">
                         <div class="row px-0 mx-0 mt-4">
                             <div style="letter-spacing: 3px;" class="col-lg-4">
-                                <p class="text-end">帳號/用戶名稱:</p>
-                                <P class="text-end">密碼:</P>
+                                <p class="text-end" set-lan="html:username">帳號/用戶名稱:</p>
+                                <P class="text-end" set-lan="html:password">密碼:</P>
                                 <p class="text-end">Email:</p>
                             </div>
                             <div class="userinf col-lg-8">
@@ -141,20 +141,20 @@
                             <div class="row px-0 mx-0 g-4">
                                 <div class="Used col-lg-6">
                                     <div class="card py-4 ps-4">
-                                        <p class="fw-bold">已使用</p>
+                                        <p class="fw-bold" set-lan="html:used">已使用</p>
                                         <div class="used-time">
                                             <!-- <h1 class="text-center">324&ensp;<span style="font-size:15px;">秒</span></h1> -->
                                         </div>
-                                        <p style="color:#183790;" class="check-history mb-0 text-center"><img width="20" class="arrowdown me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png" alt="">查看詳情</p>
+                                        <p style="color:#183790;" class="check-history mb-0 text-center" set-lan="html:details"><img width="20" class="arrowdown me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png" alt=""></p>
                                     </div>
                                 </div>
                                 <div class="not-used col-lg-6">
                                     <div class="card py-4 ps-4">
-                                        <p class="fw-bold">未使用</p>
+                                        <p class="fw-bold" set-lan="html:left">未使用</p>
                                         <div class="not-used-time">
                                             <!-- <h1  class="text-center">144&ensp;<span style="font-size:15px;">秒</span></h1> -->
                                         </div>
-                                       <a style="text-decoration: none;" href="./pricing.html"><p style="color:#183790;" class="mb-0 text-center"><img width="20" class="me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-add-circle.png" alt="">我要加值</p></a>
+                                       <a style="text-decoration: none;" href="./pricing.html"><p style="color:#183790;" class="mb-0 text-center" set-lan="html:refill"><img width="20" class="me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-add-circle.png" alt="">我要加值</p></a>
                                     </div>
                                 </div>
                                 <div class="historical-record col-lg-12">
@@ -162,9 +162,9 @@
                                         <table class="table text-center">
                                             <thead>
                                               <tr>
-                                                <th scope="col">日期</th>
-                                                <th scope="col">標題</th>
-                                                <th class="px-0" scope="col">影片時間</th>
+                                                <th scope="col" set-lan="html:date">日期</th>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="html:video_duration">影片時間</th>
                                               </tr>
                                             </thead>
                                             <tbody class="historical-content">