add test

html/static/script_test.js

@@ -0,0 +1,804 @@
+// Check Route
+// checkRoute();
+
+let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
+
+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");
+  }); 
+}
+
+// Nav btn control
+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');
+  }
+}
+
+// Get avatars
+function getAvatar() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/get_avatar_by_role',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let carStr = '';
+    for(let i = 0; i < result.length; i++) {
+      str += `<option value="${result[i].num}">${result[i].name}</option>`
+    }
+    for(let i = 0; i < result.length; i++) {
+      carStr += `<div class="card item col" data-avatar="${result[i].name}" data-img="${result[i].name.toLowerCase()}">
+                    <div class="imgfr"><img src="static/img/${result[i].name.toLowerCase()}.webp" class="card-img-top" alt="..."></div>
+                    <div class="card-body">
+                        <h5 class="card-title">${result[i].name.toLowerCase()}</h5>
+                    </div>
+                </div>`;
+    }
+    $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>${str}`);
+    $('.owl-carousel').html(carStr);
+   // card = document.getElementsByClassName('card');
+    console.log(card);
+    addCardListener(card);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+//getAvatar();
+
+
+// Card
+const card = document.getElementsByClassName('card');
+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");
+
+
+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();
+}
+
+// Upload
+$('input[type=file]').on('change', prepareUpload);
+$('.upload-btn').change(prepareUpload);
+function prepareUpload(event) {
+  files = event.target.files;
+  $(this).prev().val('');
+  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;
+      console.log(jsonData.msg);
+      $(this).prev().val(jsonData.msg);
+      if(jsonData.msg.zh) {
+        $(this).prev().val(jsonData.msg.zh);
+        event.target.previousSibling.value = jsonData.msg.zh;
+      }
+      const nextEl = event.target.nextSibling;
+      nextEl.innerHTML = '';
+      nextEl.textContent = '上傳檔案';
+      nextEl.nextSibling.classList.add('box-active');
+      nextEl.nextSibling.style.backgroundImage = `url(http://${jsonData.msg})`;
+
+      //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');
+
+// Submit
+$(".next").click(function () {
+  button.setAttribute('disabled', '');
+  setTimeout(function () {
+    button.removeAttribute('disabled')
+  }, 10000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  txtARR = [];
+  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())
+    }
+  }
+  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");
+  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)
+      console.log(responseOBJ.msg);
+        //let title = "資料已送出";
+        let text;
+        if(lan == 'en') {
+          //title = 'Submitted Successfully!';
+          text = responseOBJ.msg.eng;
+        } else {
+          text = responseOBJ.msg.zh;
+        }
+        Swal.fire({
+         // title: title,
+          icon: 'info',
+          text: text,
+          confirmButtonColor: '#3085d6',
+        });
+      
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  console.log(data)
+  result = xhr.send(objstr);
+});
+
+
+// Gen avatars
+$(".gen_avatar").click(function () {
+  dataOBJ = { "imgurl": $('.img_src').val() }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  //alert('資料已送出! 請耐心等候')
+  $.ajax({
+    url: 'https://www.choozmo.com: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";
+  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_video.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 = '';
+  $('.img-inputTest').html('');
+        for (let i = 0; i < txtlength; i++) {
+          var input_sec = document.createElement('div');
+          var img_box = document.createElement('div');
+
+          input_sec.classList.add('input-sec', `input-sec${i+1}`, 'p-3', 'mb-3');
+          img_box.classList.add('img-box');
+
+          // text input
+          var txtinput = document.createElement("input");
+          txtinput.setAttribute('type', 'text');
+          txtinput.setAttribute('name', `t${i+1}`);
+          txtinput.classList.add('txtsrc', `txtsrc${i+1}`);
+          txtinput.value = historyItem.text_content[i];
+          txtinput.setAttribute('placeholder', `${i+1}`);
+          txtinput.style.width = "100%";
+          input_sec.appendChild(txtinput);
+
+          // img url input
+          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', 'https://example.com/4VKBo9w.png');
+          img_box.appendChild(imginput);
+
+          // img upload input
+          var imgupload = document.createElement("input");
+          imgupload.setAttribute('id', `img${i+1}`);
+          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+1}`);
+          imguploadlabel.classList.add('upload-btn');
+          imguploadlabel.textContent = '上傳圖片';
+          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', 'box-active');
+          imgPreBox.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
+
+          img_box.appendChild(imgPreBox);
+          input_sec.appendChild(img_box);
+          document.querySelector('.img-inputTest').append(input_sec);
+        }
+
+}
+
+
+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);
+  });
+} 
+
+let length = 5;
+function initial() {
+  for (let i = 0; i < length; i++) {
+    renderInputSec(i+1) ;
+  }
+  console.log(document.querySelectorAll(".txtsrc").length + 1);
+}
+
+initial();
+
+// var addbtn = document.querySelector(".add");
+// var addimgbtn = document.querySelector(".addimg");
+
+// addbtn.addEventListener('click', addtxtBlock);
+// addimgbtn.addEventListener('click', addimgBlock);
+
+function addtxtBlock() {
+  let newIdx = document.querySelectorAll(".txtsrc").length + 1;
+  rendertxtBlock(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 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);
+}
+
+var addsecbtn = document.querySelector(".addsec");
+
+addsecbtn.addEventListener('click', addsecBlock);
+
+function addsecBlock() {
+  let newsecIdx = document.querySelectorAll(".input-sec").length + 1;
+  renderInputSec(newsecIdx);
+}
+
+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');
+  img_box.classList.add('img-box');
+
+  // 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', `台詞`);
+  txtinput.style.width = "100%";
+  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', 'https://example.com/4VKBo9w.png');
+  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 = '上傳圖片';
+  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);
+}
+
+
+$('.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
+    }
+  }
+});
+
+
+// Handle draft
+$('.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 to clipboard
+$(".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
+  })
+};
+
+$("#lang-manu").hide();
+
+$( "#changeLanguage" ).click(function() {
+  $("#lang-manu").slideToggle();
+  $("#lang-arrow").toggleClass("arrowdoup");
+});

html/static/script_util.js

@@ -1,4 +1,4 @@
-checkRoute();
+//checkRoute();
 
 let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
 
@@ -249,118 +249,6 @@ $(".next").click(function () {
   console.log(data)
   result = xhr.send(objstr);
 });
-const buttonSend = document.querySelector('#sendBTN');
-$("#sendBTN").click(function () {
-  buttonSend.setAttribute('disabled', '');
-  setTimeout(function () {
-    buttonSend.removeAttribute('disabled')
-  }, 4000);
-  avatar = $('.avatar').val();
-  name_title = $('.title_new').val();
-  txtARR = [];
-  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())
-    }
-  }
-  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);
-});
-
-const slide_button = document.querySelector('#send_slide');
-$("#send_slide").click(function () {
-  slide_button.setAttribute('disabled', '');
-  setTimeout(function () {
-    slide_button.removeAttribute('disabled')
-  }, 4000);
-  avatar = $('.avatar').val();
-  var step;
-  multiLang = 0
-  if ($('#multiLang').prop("checked")) {multiLang = 1;}
-  dataOBJ = {'slide_url':$('#slide_raw_url').val(),"avatar": avatar,"multiLang":multiLang, "client_id": client_id }
-  objstr = JSON.stringify(dataOBJ);
-  jwt_token =  get_jwt_token()
-  var xhr = new XMLHttpRequest();
-  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_gSlide");
-  xhr.setRequestHeader("accept", "application/json");
-  xhr.setRequestHeader("Authorization","Bearer "+jwt_token);
-  xhr.setRequestHeader("Content-Type", "application/json");
-  xhr.onreadystatechange = function () {
-    if (xhr.readyState === 4) {
-      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',
-      });
-    }
-  };
-  var data = renderXHR_data(dataOBJ)
-  console.log(data)
-  result = xhr.send(objstr);
-});
 
 $(".gen_avatar").click(function () {
   dataOBJ = { "imgurl": $('.img_src').val() }

html/static/scss/style.css

@@ -239,6 +239,19 @@ body {
 	height: 90%;
 	overflow: scroll;
 } */
+.input-sec {
+  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+}
+
+.upload-cta.box-active {
+  height: 80px;
+  width: 80px;
+  background-size: cover !important;
+  background-repeat: no-repeat;
+  border-radius: 1rem;
+}
+
 .history {
   height: 75vh;
   overflow: scroll;
@@ -813,7 +826,8 @@ footer {
 
 .add,
 .add-subline,
-.addimg {
+.addimg,
+.addsec {
   cursor: pointer;
   display: inline-block;
   width: 2rem;
@@ -828,7 +842,8 @@ footer {
 
 .add:hover,
 .add-subline:hover,
-.addimg:hover {
+.addimg:hover,
+.addsec:hover {
   background-color: #398ee9;
 }
 

html/static/scss/style.scss

@@ -231,6 +231,18 @@ body {
 	overflow: scroll;
 } */
 
+.input-sec {
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+	-webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+}
+.upload-cta.box-active {
+	height: 80px;
+	width: 80px;
+	background-size: cover !important;
+	background-repeat: no-repeat;
+	border-radius: 1rem;
+}
+
 .history {
 	height: 75vh;
 	overflow: scroll;
@@ -762,7 +774,8 @@ footer {
 
 .add,
 .add-subline,
-.addimg {
+.addimg,
+.addsec {
 	cursor: pointer;
 	display: inline-block;
 	width: 2rem;
@@ -775,7 +788,8 @@ footer {
 }
 .add:hover,
 .add-subline:hover,
-.addimg:hover {
+.addimg:hover,
+.addsec:hover {
 	background-color: #398ee9;
 }
 

html/test.html

@@ -0,0 +1,497 @@
+<!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="index.html"><a class="nav-link active ps-3 pt-0"
+                                    aria-current="page" href="index.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_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>
+                            <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="" 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="將作為影片的講者 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 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="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/>
+                            <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
+                            <input type="checkbox" id="multiLang" > <br/>
+                            <div class="img-inputTest mt-3">
+                                
+                            </div>
+                            <span class="addsec">+</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_test.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>