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

api/static/script_util_copy.js

@@ -386,7 +386,7 @@ function get_jwt_token(){
 }
 
 function direct(id) {
-  location.href = `make_video.html?id=${id}`;
+  location.href = `make_video2.html?id=${id}`;
 }
 
 

api/static/style.css

@@ -673,7 +673,7 @@ footer {
 
 .upload-btn {
 	display: inline-block;
-	width: 6rem;
+	width: calc(100% - 6rem);
 	background-color: #75a7dd;
 	color: white;
 	padding: .4rem .5rem;

html/make_video.html

@@ -149,7 +149,7 @@
                         <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>
+                                href="./make_video2.html" set-lan="html:make_video">影片製作</a>
                             <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
                                 href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
                         </div>

html/test.html → html/make_video2.html

@@ -149,7 +149,7 @@
                         <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>
+                                href="./make_video2.html" set-lan="html:make_video">影片製作</a>
                             <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
                                 href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
                         </div>
@@ -360,7 +360,7 @@
                         </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" 
+                              <img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" 
                                 title="放入您的台詞及圖片，圖片僅接受png, jpg, mp4格式 Type in your content and images. Supported File Formats: png, jpg, mp4.">
                             </h3><br/>
                             <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
@@ -459,7 +459,7 @@
     <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/script_util2.js"></script>
     <script src="static/common.js"></script>
 <script>
 $('.owl-carousel').owlCarousel({

html/make_video_long.html

@@ -145,7 +145,7 @@
                         <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>
+                                href="./make_video2.html" set-lan="html:make_video">影片製作</a>
                             <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
                                 href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
                         </div>

html/make_video_slide.html

@@ -145,7 +145,7 @@
                         <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>
+                                href="./make_video2.html" set-lan="html:make_video">影片製作</a>
                             <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
                                 href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
                         </div>

html/reset_pwd.html

@@ -79,7 +79,7 @@
             <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-makev" aria-current="page" href="./make_video2.html" set-lan="html:make_video">影片製作</a>
                 <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
             </div>
             <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">

html/reset_pwd.js

@@ -122,7 +122,7 @@ function openNav() {
 }
 
 function direct(id) {
-    location.href = `make_video.html?id=${id}`;
+    location.href = `make_video2.html?id=${id}`;
 }
 
 function view() {

html/reset_pwd_email.js

@@ -135,7 +135,7 @@ function openNav() {
 }
 
 function direct(id) {
-    location.href = `make_video.html?id=${id}`;
+    location.href = `make_video2.html?id=${id}`;
 }
 
 function view() {

html/script_long.js

@@ -304,7 +304,7 @@ function get_jwt_token(){
 }
 
 function direct(id) {
-  location.href = `make_video.html?id=${id}`;
+  location.href = `make_video2.html?id=${id}`;
 }
 
 

html/script_profile.js

@@ -338,7 +338,7 @@ function openNav() {
 }
 
 function direct(id) {
-    location.href = `make_video.html?id=${id}`;
+    location.href = `make_video2.html?id=${id}`;
 }
 
 function view() {
@@ -352,7 +352,7 @@ function view() {
   }
 
 function gotoDraft (id) {
-  location.href = `make_video.html?draftid=${id}`;
+  location.href = `make_video2.html?draftid=${id}`;
 }
 function deleteDraft(id) {
   let token = getCookie('jwt_token');

html/static/script_slides.js

@@ -270,7 +270,7 @@ function openNav() {
 }
 
 function direct(id) {
-  location.href = `make_video.html?id=${id}`;
+  location.href = `make_video2.html?id=${id}`;
 }
 
 function closeNav() {

html/static/script_slides_eng.js

@@ -272,7 +272,7 @@ function openNav() {
 }
 
 function direct(id) {
-  location.href = `make_video.html?id=${id}`;
+  location.href = `make_video2.html?id=${id}`;
 }
 
 function closeNav() {

html/static/script_util.js

@@ -3,7 +3,7 @@
 let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
 
 
-if(userBasics !== [] && typeof(userBasics) !== 'string'){
+if(userBasics.length > 0 && typeof(userBasics) !== 'string'){
   $('.userName').html(`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userBasics.user_info.userName}</h2>`);
 } 
 
@@ -362,7 +362,7 @@ function get_jwt_token(){
 }
 
 function direct(id) {
-  location.href = `make_video.html?id=${id}`;
+  location.href = `make_video2.html?id=${id}`;
 }
 
 

html/static/script_test.js → html/static/script_util2.js

@@ -183,17 +183,17 @@ function prepareUpload(event) {
       }
       const nextEl = event.target.nextSibling;
       nextEl.innerHTML = '';
-      nextEl.textContent = '上傳檔案';
-      nextEl.nextSibling.classList.add('box-active');
-      nextEl.nextSibling.style.backgroundImage = `url(http://${jsonData.msg})`;
-
+      // nextEl.textContent = '上傳檔案';
+      nextEl.style.backgroundImage = `url(http://${jsonData.msg})`;
       //console.log($(this).next());
       //$(this).next().html('上傳檔案');
       //$(this).next().text('上傳檔案');
+      $(this).html('');
     },
     error: function (error) {
-      event.target.nextSibling.innerHTML = '';
-      event.target.nextSibling.textContent = '上傳檔案';
+      const nextEl = event.target.nextSibling;
+      nextEl.style.backgroundImage = `url(./img/upload_img.png)`;
+      $(this).html('');
       alert('圖片錯誤');
     }
   });
@@ -374,7 +374,7 @@ function get_jwt_token(){
 }
 
 function direct(id) {
-  location.href = `make_video.html?id=${id}`;
+  location.href = `make_video2.html?id=${id}`;
 }
 
 
@@ -405,15 +405,16 @@ function load_data(tid, loaded_data, draft = false) {
 
   let txtlength = historyItem.text_content.length;
   let imglength = historyItem.image_urls.length;
+  let flag = txtlength >= imglength ? txtlength : imglength;
 
   //subtitleInputs.innerHTML = '';
   // imgInputs.innerHTML = '';
   $('.img-inputTest').html('');
-        for (let i = 0; i < txtlength; i++) {
+        for (let i = 0; i < flag; 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');
+          input_sec.classList.add('input-sec', `input-sec${i+1}`, 'p-3', 'mb-3', 'text-end');
           img_box.classList.add('img-box');
 
           // text input
@@ -423,7 +424,6 @@ function load_data(tid, loaded_data, draft = false) {
           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
@@ -432,6 +432,9 @@ function load_data(tid, loaded_data, draft = false) {
           imginput.setAttribute('name', `m${i+1}`);
           imginput.classList.add('imgsrc', `imgsrc${i+1}`);
           imginput.value = historyItem.image_urls[i];
+          if(!historyItem.image_urls[i]) {
+            imginput.value = "";
+          }
           imginput.setAttribute('placeholder', 'https://example.com/4VKBo9w.png');
           img_box.appendChild(imginput);
 
@@ -447,17 +450,16 @@ function load_data(tid, loaded_data, draft = false) {
           var imguploadlabel = document.createElement("label");
           imguploadlabel.setAttribute('for', `img${i+1}`);
           imguploadlabel.classList.add('upload-btn');
-          imguploadlabel.textContent = '上傳圖片';
+          // imguploadlabel.textContent = '上傳圖片';
           imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+          if(!historyItem.image_urls[i]) {
+            imguploadlabel.style.backgroundImage = `url(static/img/upload_img.png)`;
+          } else {
+            imguploadlabel.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
+          }
           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);
         }
@@ -610,7 +612,7 @@ 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');
+  input_sec.classList.add('input-sec', `input-sec${i}`, 'p-3', 'mb-3', 'text-end');
   img_box.classList.add('img-box');
 
   // text input
@@ -620,7 +622,6 @@ function renderInputSec(i) {
   txtinput.classList.add('txtsrc', `txtsrc${i}`);
   txtinput.value = "";
   txtinput.setAttribute('placeholder', `台詞`);
-  txtinput.style.width = "100%";
   input_sec.appendChild(txtinput);
 
   // img url input
@@ -644,16 +645,11 @@ function renderInputSec(i) {
   var imguploadlabel = document.createElement("label");
   imguploadlabel.setAttribute('for', `img${i}`);
   imguploadlabel.classList.add('upload-btn');
-  imguploadlabel.textContent = '上傳圖片';
+  // 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);
 }

html/static/scss/style.css

@@ -348,6 +348,27 @@ body {
   font-size: 14px;
 }
 
+#msform input[type="text"],
+#msform textarea,
+#msform input[type="email"] {
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-bottom: 16px;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: montserrat;
+  color: #2c3e50;
+  font-size: 14px;
+}
+
+#msform .img-inputTest input[type="text"],
+#msform .img-inputTest textarea,
+#msform .img-inputTest input[type="email"] {
+  width: 80%;
+}
+
 /*buttons*/
 #msform .action-button {
   width: 100px;
@@ -796,14 +817,7 @@ footer {
 }
 
 #msform input[type="text"].imgsrc {
-  width: calc(100% - 8rem);
-  margin-right: 5px;
-}
-
-@media screen and (max-width: 767px) {
-  #msform input[type="text"].imgsrc {
-    margin-right: 15px;
-  }
+  width: 80%;
 }
 
 .upload-btn {
@@ -819,6 +833,30 @@ footer {
   cursor: pointer;
 }
 
+#msform .input-sec {
+  position: relative;
+}
+
+#msform .img-inputTest .upload-btn {
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20%;
+  height: 100%;
+  background-color: #75a7dd;
+  background-position: center;
+  background-size: cover;
+  background-image: url(../img/upload_img.png);
+  color: white;
+  padding: 0.4rem 0.5rem;
+  font-size: 0.9rem;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  cursor: pointer;
+  border-radius: 0;
+}
+
 .upload-btn img {
   width: 30px;
   height: 30px;
@@ -898,6 +936,27 @@ body {
   margin-left: 50px;
 }
 
+@media screen and (max-width: 576px) {
+  #msform input[type="text"].imgsrc,
+  #msform input[type="text"].txtsrc,
+  #msform input[type="text"].subsrc {
+    width: 100%;
+  }
+  #msform .input-sec > input[type="text"]:nth-of-type(1) {
+    margin-top: 77%;
+  }
+  #msform .input_eng .input-sec > input[type="text"]:nth-of-type(1) {
+    margin-top: 90%;
+  }
+  #msform .input-sec .upload-btn {
+    width: 100%;
+    height: 60%;
+  }
+  #msform .input-sec .input_eng .upload-btn {
+    height: 50%;
+  }
+}
+
 .container-login {
   width: 100vw;
   height: 100vh;

html/static/scss/style.scss

@@ -328,6 +328,27 @@ body {
 	color: #2c3e50;
 	font-size: 14px;
 }
+
+#msform input[type="text"],
+#msform textarea,
+#msform input[type="email"] {
+	padding: 15px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	margin-bottom: 16px;
+	width: 100%;
+	box-sizing: border-box;
+	font-family: montserrat;
+	color: #2c3e50;
+	font-size: 14px;
+}
+
+#msform .img-inputTest input[type="text"],
+#msform .img-inputTest textarea,
+#msform .img-inputTest input[type="email"] {
+	width: 80%;
+}
+
 /*buttons*/
 #msform .action-button {
 	width: 100px;
@@ -748,11 +769,7 @@ footer {
 }
 
 #msform input[type="text"].imgsrc {
-	width: calc(100% - 8rem);
-	margin-right: 5px;
-	@media screen and(max-width:$moblie) {
-		margin-right: 15px;
-	}
+	width: 80%;
 }
 
 .upload-btn {
@@ -767,6 +784,30 @@ footer {
 	cursor: pointer;
 }
 
+#msform .input-sec {
+	position: relative;
+}
+
+#msform .img-inputTest .upload-btn {
+	display: inline-block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20%;
+  height: 100%;
+  background-color: #75a7dd;
+  background-position: center;
+  background-size: cover;
+  background-image: url(../img/upload_img.png);
+  color: white;
+  padding: 0.4rem 0.5rem;
+  font-size: 0.9rem;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+	cursor: pointer;
+	border-radius: 0;
+}
+
 .upload-btn img {
 	width: 30px;
 	height: 30px;
@@ -855,6 +896,31 @@ body {
 	margin-left: 50px;
 }
 
+@media screen and(max-width: 576px) {
+	#msform input[type="text"].imgsrc,
+	#msform input[type="text"].txtsrc,
+	#msform input[type="text"].subsrc {
+		width: 100%;
+	}
+
+	#msform .input-sec>input[type="text"]:nth-of-type(1) {
+    margin-top: 77%;
+  }
+
+  #msform .input_eng .input-sec>input[type="text"]:nth-of-type(1) {
+    margin-top: 90%;
+  }
+  
+  #msform .input-sec .upload-btn {
+    width: 100%;
+    height: 60%;
+  }
+
+  #msform .input-sec .input_eng .upload-btn {
+    height: 50%;
+  }
+}
+
 .container-login {
 	width: 100vw;
 	height: 100vh;

html/user_profile2.html

@@ -116,7 +116,7 @@
                             <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>
+                                    href="./make_video2.html" set-lan="html:make_video">影片製作</a>
                                 <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
                                     href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
                             </div>