modals, loading, eng_modal

api/static/script_util_copy.js

@@ -0,0 +1,718 @@
+checkRoute();
+
+let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
+if(userBasics !== []){
+  $('.userName').html(`<h2 class="user-name text-white mt-4 fw-bold">Hello,${userBasics.user_info.userName}</h2>`);
+}
+
+function checkRoute() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    if(res.status !== 200) {
+      window.location.replace("login.html");
+    }
+    var userName='';
+    userName+=' <h2 class="user-name text-white mt-4 fw-bold">Hello,'+res.data.user_info.userName+'</h2>';
+    $('.userName').html(userName);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+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();
+
+var client_id = Date.now()
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
+});
+var myModal = new bootstrap.Modal(document.getElementById('history'), {
+  keyboard: false
+})
+var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
+  keyboard: false
+})
+var modalImg = document.querySelector("#avatarmega .modal-img");
+var modalTitle = document.querySelector("#avatarmega .modal-title");
+var avatarSelector = document.getElementById("avatar");
+var card = document.getElementsByClassName('card');
+card = [...card];
+avatarSelector.addEventListener('change', avatarChange);
+avatarChange();
+
+function addCardListener() {
+  for (let i = 0; i < card.length; i++) {
+    card[i].addEventListener('click', openavatarModel);
+  }
+}
+
+addCardListener();
+
+function avatarChange() {
+  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
+  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
+  for (let i = 0; i < card.length; i++) {
+    card[i].classList.remove('active');
+    if (card[i].dataset.avatar == value) {
+      card[i].classList.add('active');
+    }
+  }
+}
+
+function openavatarModel() {
+  console.log(this.dataset.img);
+  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
+  modalTitle.textContent = `${this.dataset.avatar}`;
+  avatarModal.show();
+}
+
+$('input[type=file]').on('change', prepareUpload);
+function prepareUpload(event) {
+  files = event.target.files;
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'https://www.choozmo.com:8887/uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value = jsonData.msg;
+      console.log(event.target.previousSibling.value);
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      //console.log($(this).next());
+      //$(this).next().html('上傳檔案');
+      //$(this).next().text('上傳檔案');
+    },
+    error: function (error) {
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      alert('圖片錯誤');
+    }
+  });
+}
+const button = document.querySelector('.next');
+
+$(".next").click(function () {
+  button.setAttribute('disabled', '');
+  setTimeout(function () {
+    button.removeAttribute('disabled')
+  }, 4000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  txtARR = [];
+  imgARR = [];
+  var step;
+  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)
+      if (responseOBJ.msg=='ok')
+      {
+        Swal.fire({
+          title: "資料已送出",
+          icon: 'success',
+          text: '資料已傳送，請耐心等候',
+          confirmButtonColor: '#3085d6',
+        });
+      }
+      else{
+        Swal.fire({
+          title: "發生錯誤",
+          icon: 'error',
+          text: responseOBJ.msg,
+          confirmButtonColor: '#3085d6',
+        });
+      }
+      
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  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')
+      {
+        Swal.fire({
+          title: "資料已送出",
+          icon: 'success',
+          text: '資料已傳送，請耐心等候',
+          confirmButtonColor: '#3085d6',
+        });
+      }
+      else{
+        Swal.fire({
+          title: "發生錯誤",
+          icon: 'error',
+          text: responseOBJ.msg,
+          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) {
+      Swal.fire({
+        title: "資料已送出",
+        icon: 'success',
+        text: '資料已傳送，請耐心等候',
+        confirmButtonColor: '#3085d6',
+      });
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  console.log(data)
+  result = xhr.send(objstr);
+});
+
+$(".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;
+    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;
+      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 = '';
+  for (let i = 0; i < txtlength; i++) {
+    var txtinput = document.createElement("input");
+    txtinput.setAttribute('type', 'text');
+    txtinput.setAttribute('name', `t${i + 1}`);
+    txtinput.value = historyItem.text_content[i];
+    txtinput.setAttribute('placeholder', `${i + 1}`);
+    txtinput.classList.add('txtsrc', `txtsrc${i + 1}`)
+    subtitleInputs.appendChild(txtinput);
+  }
+  for (let i = 0; i < imglength; i++) {
+    var imginput = document.createElement("input");
+    imginput.setAttribute('type', 'text');
+    imginput.setAttribute('name', `m${i + 1}`);
+    imginput.classList.add('imgsrc', `imgsrc${i + 1}`);
+    imginput.value = historyItem.image_urls[i];
+    imginput.setAttribute('placeholder', `${i + 1}`);
+    imgInputs.appendChild(imginput);
+
+    var imgupload = document.createElement("input");
+    imgupload.setAttribute('id', `img${i + 1}`);
+    imgupload.setAttribute('type', `file`);
+    imgupload.classList.add('img_uploader', 'img_up');
+    imgInputs.appendChild(imgupload);
+    var imguploadlabel = document.createElement("label");
+    imguploadlabel.setAttribute('for', `img${i + 1}`);
+    imguploadlabel.classList.add('upload-btn');
+    imguploadlabel.textContent = '上傳檔案';
+    imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+    imgInputs.appendChild(imguploadlabel);
+  }
+   setTimeout(() => {
+    JsLoadingOverlay.hide();
+  }, 0);
+}
+
+getpathId();
+
+function getMode() {
+  let id = window.location.search.split('?').pop();
+  let mode = id.split('=')[0];
+  if(mode == 'draftid') {
+    JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#FFFFFF",
+      "overlayOpacity": "0.9",
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#B9DDF3",
+      "spinnerSize": "2x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 9998,
+      "spinnerZIndex": 9999
+    });
+    getDraftData();
+  } else if(mode == 'id') {
+    JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#FFFFFF",
+      "overlayOpacity": "0.9",
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#B9DDF3",
+      "spinnerSize": "2x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 9998,
+      "spinnerZIndex": 9999
+    });
+    getData();
+  }
+  return id.split('=')[1];
+  //load_data(id);
+}
+
+getMode();
+
+function getpathId(){
+  let id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+}
+
+function getData() {
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    loaded_data = res.data;
+    console.log(loaded_data);
+    const id = getpathId();
+    load_data(id, loaded_data);
+  }).catch(err => {
+    console.log(err);
+  });
+} 
+
+var subtitleInputs = document.querySelector(".subtitle-inputs");
+var imgInputs = document.querySelector(".img-inputs");
+let length = 5;
+function initial() {
+  for (let i = 0; i < length; i++) {
+    rendertxtBlock(i + 1);
+    //renderimgBlock(i + 1);
+  }
+  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 = '上傳檔案';
+  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+  imgInputs.appendChild(imguploadlabel);
+  $('input[type=file]').on('change', prepareUpload);
+}
+
+
+$('.owl-carousel').owlCarousel({
+  loop: true,
+  margin: 10,
+  nav: false,
+  mouseDrag: true,
+  touchDrag: true,
+  smartSpeed: 1000,
+  autoplay: true,
+  autoplayTimeout: 8000,
+  autoplayHoverPause: false,
+  responsive: {
+    0: {
+      items: 1
+    },
+    600: {
+      items: 2
+    },
+    1000: {
+      items: 4
+    }
+  }
+});
+
+$('.draft-btn').click(() => {
+  $('.draft-btn').text('Loading...');
+  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('存為草稿');
+    Swal.fire({
+      title: "儲存完成",
+      icon: 'success',
+      confirmButtonColor: '#3085d6',
+    }); 
+  }).catch(err => {
+    console.log(err);
+  });
+
+});
+
+function getDraftData() {
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let id = getpathId();
+    load_data(id, result, true);
+  }).catch(err => {
+    console.log(err);
+  });
+
+}
+
+$(".copy").click(function(){
+  const copyStr = $(this).next().text();
+  copyToClipboard(copyStr);
+});
+
+const copyToClipboard = str => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+  Swal.fire({
+    toast: true,
+    icon: 'success',
+    position: 'top-end',
+    title: 'Link copied!',
+    timerProgressBar: true,
+    showConfirmButton: false,
+    timer: 1000,
+    backdrop: false
+  })
+};
+
+$('.img-toggle').click(function(){
+  $('.img-box').toggle(100);
+})
+

html/make_video.html

@@ -210,6 +210,15 @@
                     <fieldset id='imgSrc'>
                         <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:img_link">影像連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式 Support File Formats: png, jpg, mp4"></h3><br/>
                         <div class="img-inputs">
+                            <!-- <div>
+                                <input type="text" name="t1" placeholder="1" class="txtsrc txtsrc1" style="width:calc(100% - 7rem);">
+                                <span class="img-toggle" style="width:6rem"><i class="fas fa-images"></i></span>
+                                <div class="img-box">
+                                    <input type="text" name="m1" class="imgsrc imgsrc1" placeholder="1">
+                                    <input id="img1" type="file" class="img_uploader img_up" style="display: none;">
+                                    <label for="img1" class="upload-btn" set-lan="html:upload_file">上傳檔案</label>
+                                </div>
+                            </div> -->
                         </div>
                         <span class="addimg">+</span>
                         <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" value="送出" />
@@ -281,7 +290,7 @@
     <!-- footer -->
     <footer class="fixed-bottom text-center py-2">
 
-    </footer>
+    </footer> 
     <!-- ================================================================= -->
   
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
@@ -290,6 +299,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
     <script src="static/owl.carousel.min.js"></script>
+    <script src="static/loading-overlay.js"></script>
     <script src="static/script_util.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>

html/register.js

@@ -70,8 +70,12 @@ function register() {
         }).then(res => {
             console.log(res.data.msg);
             if(res.data.msg == 'ok') {
+                let title = "註冊成功";
+                    if (lang == 'en') { 
+                        title = "Register Successfully!"
+                    }
                 Swal.fire({
-                    title: "註冊成功",
+                    title: title,
                     icon: 'success',
                     text: res.data.msg,
                     confirmButtonColor: '#3085d6',
@@ -80,8 +84,12 @@ function register() {
                     window.location.href = 'login.html';
                 }, 2000);
             } else {
+                let title = "註冊失敗";
+                    if (lang == 'en') { 
+                        title = "Register failed!"
+                    }
                 Swal.fire({
-                    title: "註冊失敗",
+                    title: title,
                     icon: 'error',
                     text: res.data.msg,
                     confirmButtonColor: '#3085d6',

html/script_profiles.js

@@ -36,8 +36,16 @@ function renderView() {
         const userInfo = res.data;
         localStorage.setItem('user_profile', JSON.stringify(res.data));
           if(userInfo.user_info.left_sec < 20){
+            let title = "剩餘秒數不足";
+            let text = '您的影片額度即將不足，加值以持續使用';
+            let confirmButtonText = '加值';
+                    if (lang == 'en') { // 英文版訊息
+                        title = "Insufficient seconds left!";
+                        text = 'Your seconds left is less than 20 seconds, refill to continue making videos.';
+                        confirmButtonText = 'Refill';
+                    }
             Swal.fire({
-                title: "剩餘秒數不足",
+                title: title,
                 text: '您的影片額度即將不足，加值以持續使用',
                 icon: 'warning',
                 showCancelButton: true,
@@ -314,4 +322,37 @@ $('.share-email').click(function() {
   &body=${encodeURIComponent('I just created a video in 5 minutes, check out this amazing video making tool. https://video.choozmo.com/')}`;
     
     window.location.href = link;
-})
+})
+
+function trialStart() {
+  Swal.fire({
+    title: '歡迎使用AiSpokesgirl！將你的生活、創作 、宣傳做成影片。',
+    html: `<p>您有<b>2</b>分鐘影片製作額度。</p><br>
+    <p>您可以使用：</p>
+    <ul>
+      <li>1. 短影片製作</li>
+      <li>2. 個人歷史紀錄儲存</li>
+      <li>3. 影片下載（Mp4）</li>
+    </ul>
+    <p>欲使用其他功能請升級為Premium方案</p>`,
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '我知道了！'
+  });
+}
+
+function trialEnd() {
+  Swal.fire({
+    title: '您的試用即將結束！好的idea值得延續，透過影片將你的idea完整呈現。',
+    html: `<p>前往網站以升級為Premium方案，或是聯絡我們以洽詢細節。</p>`,
+    icon: 'success',
+    confirmButtonColor: '#3085d6',
+    confirmButtonText: '立即升級'
+  }).then(result => {
+    if (result.isConfirmed) {
+      location.href = "pricing.html";
+    }
+  });;
+}
+
+

html/static/script_util.js

@@ -412,6 +412,7 @@ function load_data(tid, loaded_data, draft = false) {
     $("#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;
@@ -449,18 +450,50 @@ function load_data(tid, loaded_data, draft = false) {
     imguploadlabel.setAttribute('set-lan', `html:upload_file`);
     imgInputs.appendChild(imguploadlabel);
   }
-
+   setTimeout(() => {
+    JsLoadingOverlay.hide();
+  }, 0);
 }
 
- getpathId();
+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') {
-    getData()
+    /* 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);