Domů Procházet Nápověda
Registrovat se Přihlásit se
choozmo
/
AI_anchor_openshot
2
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

update ana GUI

ming před 3 roky
rodič
9cfba77bcd
revize
37797aaaf2
6 změnil soubory, kde provedl 914 přidání a 96 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 102 52
      index2.html
  2. 124 0
      old_UI/index2.html
  3. 121 0
      old_UI/script_msg.js
  4. 451 0
      old_UI/style.css
  5. 26 33
      script_msg.js
  6. 90 11
      style.css

+ 102 - 52
index2.html
Zobrazit soubor 

@@ -7,6 +7,12 @@
 
   <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="style.css">
 
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
@@ -17,15 +23,15 @@
 
     
     .sidenav {
 
       height: 100%;
 
-      width: 0;
 
+      width: 250px;
 
       position: fixed;
 
       z-index: 1;
 
       top: 0;
 
       left: 0;
 
-      background-color: #111;
 
+      background: linear-gradient(to bottom, #1C7CE0, #150051);
 
       overflow-x: hidden;
 
       transition: 0.5s;
 
-      padding-top: 60px;
 
+      padding-top: 20px;
 
     }
 
     
     .sidenav a {
 
@@ -56,64 +62,108 @@
 
     </style>
 
 </head>
 
 <body>
 
-  <div class="container">
 
+  <div class="container-fluid">
 
     <div id="mySidenav" class="sidenav">
 
-      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
+      <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
 
+      <h2 class="go_title">AI ANCHOR GO</h2>
 
+      <ul class="nav-list">
 
+        <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i class="fas fa-book-open me-2"></i>使用說明</li>
 
+        <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()"><i class="fas fa-history me-2"></i>歷史紀錄</li>
 
+      </ul>
 
+      <p class="right-text text-white d-inline-block">Choozmo All Rights Reserved</p>
 
     </div>
 
-    <form action="/step_questions/submit" method="post" id="msform">
 
-      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span>
 
-      <div>
 
-        
-      
-      </div>
 
-      <!-- fieldsets -->
 
-      <fieldset>
 
-        <h2 class="fs-title">AI ANCHOR</h2>
 
-        <h3  class="fs-subtitle">標題</h3>
 
-        <input id=title type="text" name='t1' class='title_new' value="" placeholder="1" /> <br/>
 
-        <h3  class="fs-subtitle">選擇人物</h3>
 
-        <select id="avatar" class='avatar'>
 
-        <option value="6">Angus</option>
 
-        <option value="7">Peggy</option>
 
-        <option value="8">Nina</option>
 
-        <option value="9">Stacy</option>
 
-      </select>
 
-        <h3 class="fs-subtitle">台詞</h3>
 
-        <input type="text" name='t1' class='txtsrc1' value="" placeholder="1" /> <br/>
 
-        <input type="text" name='t2' class='txtsrc2' value="" placeholder="2" /><br/>
 
-        <input type="text" name='t3' class='txtsrc3' value="" placeholder="3" /><br/>
 
-        <input type="text" name='t4'  class='txtsrc4' value="" placeholder="4" /><br/>
 
-        <input type="text" name='t5' class='txtsrc5' value="" placeholder="5" /><br/>
 
-        <input type="text" name='t6' class='txtsrc6' value="" placeholder="6" /><br/>
 
-        <input type="text" name='t7' class='txtsrc7' value="" placeholder="7" /><br/>
 
-        <input type="text" name='t8' class='txtsrc8' value="" placeholder="8" /><br/>
 
-        <input type="text" name='t9' class='txtsrc9' value="" placeholder="9" /><br/>
 
-        <input type="text" name='t10' class='txtsrc10' value="" placeholder="10" /><br/>
 
-        <h3 class="fs-subtitle">影像連結</h3>
 
-        <input type="text" name='m1' class='imgsrc1' value="" placeholder="1" /> <br/>
 
-        <input type="text" name='m2' class='imgsrc2' value="" placeholder="2" /><br/>
 
-        <input type="text" name='m3' class='imgsrc3' value="" placeholder="3" /><br/>
 
-        <input type="text" name='m4' class='imgsrc4' value="" placeholder="4" /><br/>
 
-        <input type="text" name='m5' class='imgsrc5' value="" placeholder="5" /><br/>
 
-        <input type="text" name='m6' class='imgsrc6' value="" placeholder="6" /><br/>
 
-        <input type="text" name='m7' class='imgsrc7' value="" placeholder="7" /><br/>
 
-        <input type="text" name='m8' class='imgsrc8' value="" placeholder="8" /><br/>
 
-        <input type="text" name='m9' class='imgsrc9' value="" placeholder="9" /><br/>
 
-        <input type="text" name='m10' class='imgsrc10' value="" placeholder="10" /><br/>
 
-        <input id="checker" type="button" name="next" class="next action-button" value="送出" />
 
+    <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span> -->
 
+    <div class="content ms-auto">
 
+      <form action="/step_questions/submit" method="post" id="msform">
 
         <div>
 
-        <h3 class="fs-subtitle">處理進度</h3>
 
-        <div id="myProgress">
 
-          <div id="myBar">0%</div>
 
+          
+        
         </div>
 
-      </fieldset>
 
-    </form>
 
+        <!-- fieldsets -->
 
+        <fieldset>
 
+          <h3 class="fs-subtitle">標題</h3><img class="ms-1" src="img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題">
 
+          <input id=title type="text" name='t1' class='title_new' value="" placeholder="1" /> <br/>
 
+        </fieldset>
 
+        <fieldset>
 
+          <h3  class="fs-subtitle">選擇人物</h3><img class="ms-1" src="img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者">
 
+          <select id="avatar" class='avatar'>
 
+            <option value="6">Angus</option>
 
+            <option value="7">Peggy</option>
 
+          </select>
 
+        </fieldset>
 
+        <fieldset>
 
+          <h3 class="fs-subtitle">台詞</h3>
 
+          <input type="text" name='t1' class='txtsrc1' value="" placeholder="1" /> <br/>
 
+          <input type="text" name='t2' class='txtsrc2' value="" placeholder="2" /><br/>
 
+          <input type="text" name='t3' class='txtsrc3' value="" placeholder="3" /><br/>
 
+          <input type="text" name='t4'  class='txtsrc4' value="" placeholder="4" /><br/>
 
+          <input type="text" name='t5' class='txtsrc5' value="" placeholder="5" /><br/>
 
+          <input type="text" name='t6' class='txtsrc6' value="" placeholder="6" /><br/>
 
+          <input type="text" name='t7' class='txtsrc7' value="" placeholder="7" /><br/>
 
+          <input type="text" name='t8' class='txtsrc8' value="" placeholder="8" /><br/>
 
+          <input type="text" name='t9' class='txtsrc9' value="" placeholder="9" /><br/>
 
+          <input type="text" name='t10' class='txtsrc10' value="" placeholder="10" /><br/>
 
+        </fieldset>
 
+        <fieldset>
 
+          <h3 class="fs-subtitle">影像連結</h3><img class="ms-1" src="img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg格式">
 
+          <input type="text" name='m1' class='imgsrc1' value="" placeholder="1" /><br/>
 
+          <input type="text" name='m2' class='imgsrc2' value="" placeholder="2" /><br/>
 
+          <input type="text" name='m3' class='imgsrc3' value="" placeholder="3" /><br/>
 
+          <input type="text" name='m4' class='imgsrc4' value="" placeholder="4" /><br/>
 
+          <input type="text" name='m5' class='imgsrc5' value="" placeholder="5" /><br/>
 
+          <input type="text" name='m6' class='imgsrc6' value="" placeholder="6" /><br/>
 
+          <input type="text" name='m7' class='imgsrc7' value="" placeholder="7" /><br/>
 
+          <input type="text" name='m8' class='imgsrc8' value="" placeholder="8" /><br/>
 
+          <input type="text" name='m9' class='imgsrc9' value="" placeholder="9" /><br/>
 
+          <input type="text" name='m10' class='imgsrc10' value="" placeholder="10" /><br/>
 
+          <input id="checker" type="button" name="next" class="next action-button" value="送出" />
 
+          
+          <h3 class="fs-subtitle">處理進度</h3>
 
+          <div id="myProgress">
 
+            <div id="myBar">0%</div>
 
+          </div>
 
+        </fieldset>
 
+      </form>
 
+    </div>
 
         
-    
+    <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
 
+      <div class="modal-dialog">
 
+        <div class="modal-content">
 
+          <div type="button" data-bs-dismiss="modal" aria-label="Close" class="modal-closer"><img src="images/Icon ionic-md-close-circle@2x.png" alt=""></div>
 
+          <div class="modal-body">
 
+              <h5 class="modal-title">使用說明</h5>
 
+              <div class="modal-terms">
 
+                  <ol class="ps-0">
 
+                      <li>蒐集、處理及利用您個人資料。</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">歷史紀錄</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="img/bx_loader.gif" alt=""></div>
 
+              <ol class="ps-0 historyList">
 
+              </ol>
 
+            </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+</div>
 
   </div>
 
   
   <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="script_msg.js"></script>
 
 
   <body>

+ 124 - 0
old_UI/index2.html
Zobrazit soubor 

@@ -0,0 +1,124 @@
 
+<!DOCTYPE html>
 
+<html lang="en" >
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>AI ANCHOR GO</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 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="style.css">
 
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
+  <style>
 
+    body {
 
+      font-family: "Lato", sans-serif;
 
+    }
 
+    
+    .sidenav {
 
+      height: 100%;
 
+      width: 0;
 
+      position: fixed;
 
+      z-index: 1;
 
+      top: 0;
 
+      left: 0;
 
+      background-color: #111;
 
+      overflow-x: hidden;
 
+      transition: 0.5s;
 
+      padding-top: 60px;
 
+    }
 
+    
+    .sidenav a {
 
+      padding: 8px 8px 8px 32px;
 
+      text-decoration: none;
 
+      font-size: 25px;
 
+      color: #818181;
 
+      display: block;
 
+      transition: 0.3s;
 
+    }
 
+    
+    .sidenav a:hover {
 
+      color: #f1f1f1;
 
+    }
 
+    
+    .sidenav .closebtn {
 
+      position: absolute;
 
+      top: 0;
 
+      right: 25px;
 
+      font-size: 36px;
 
+      margin-left: 50px;
 
+    }
 
+    
+    @media screen and (max-height: 450px) {
 
+      .sidenav {padding-top: 15px;}
 
+      .sidenav a {font-size: 18px;}
 
+    }
 
+    </style>
 
+</head>
 
+<body>
 
+  <div class="container">
 
+    <div id="mySidenav" class="sidenav">
 
+      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
+    </div>
 
+    <form action="/step_questions/submit" method="post" id="msform">
 
+      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span>
 
+      <div>
 
+        
+      
+      </div>
 
+      <!-- fieldsets -->
 
+      <fieldset>
 
+        <h2 class="fs-title">AI ANCHOR</h2>
 
+        <h3  class="fs-subtitle">標題</h3>
 
+        <input id=title type="text" name='t1' class='title_new' value="" placeholder="1" /> <br/>
 
+        <h3  class="fs-subtitle">選擇人物</h3>
 
+        <select id="avatar" class='avatar'>
 
+        <option value="6">Angus</option>
 
+        <option value="7">Peggy</option>
 
+        <option value="8">Nina</option>
 
+        <option value="9">Stacy</option>
 
+      </select>
 
+        <h3 class="fs-subtitle">台詞</h3>
 
+        <input type="text" name='t1' class='txtsrc1' value="" placeholder="1" /> <br/>
 
+        <input type="text" name='t2' class='txtsrc2' value="" placeholder="2" /><br/>
 
+        <input type="text" name='t3' class='txtsrc3' value="" placeholder="3" /><br/>
 
+        <input type="text" name='t4'  class='txtsrc4' value="" placeholder="4" /><br/>
 
+        <input type="text" name='t5' class='txtsrc5' value="" placeholder="5" /><br/>
 
+        <input type="text" name='t6' class='txtsrc6' value="" placeholder="6" /><br/>
 
+        <input type="text" name='t7' class='txtsrc7' value="" placeholder="7" /><br/>
 
+        <input type="text" name='t8' class='txtsrc8' value="" placeholder="8" /><br/>
 
+        <input type="text" name='t9' class='txtsrc9' value="" placeholder="9" /><br/>
 
+        <input type="text" name='t10' class='txtsrc10' value="" placeholder="10" /><br/>
 
+        <h3 class="fs-subtitle">影像連結</h3>
 
+        <input type="text" name='m1' class='imgsrc1' value="" placeholder="1" /> <br/>
 
+        <input type="text" name='m2' class='imgsrc2' value="" placeholder="2" /><br/>
 
+        <input type="text" name='m3' class='imgsrc3' value="" placeholder="3" /><br/>
 
+        <input type="text" name='m4' class='imgsrc4' value="" placeholder="4" /><br/>
 
+        <input type="text" name='m5' class='imgsrc5' value="" placeholder="5" /><br/>
 
+        <input type="text" name='m6' class='imgsrc6' value="" placeholder="6" /><br/>
 
+        <input type="text" name='m7' class='imgsrc7' value="" placeholder="7" /><br/>
 
+        <input type="text" name='m8' class='imgsrc8' value="" placeholder="8" /><br/>
 
+        <input type="text" name='m9' class='imgsrc9' value="" placeholder="9" /><br/>
 
+        <input type="text" name='m10' class='imgsrc10' value="" placeholder="10" /><br/>
 
+        <input id="checker" type="button" name="next" class="next action-button" value="送出" />
 
+        <div>
 
+        <h3 class="fs-subtitle">處理進度</h3>
 
+        <div id="myProgress">
 
+          <div id="myBar">0%</div>
 
+        </div>
 
+      </fieldset>
 
+    </form>
 
+        
+    
+  </div>
 
+  
+  <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="script_msg.js"></script>
 
+
 
+  <body>
 
+
 
+</div>
 
+
 
+</body>
 
+</html>

+ 121 - 0
old_UI/script_msg.js
Zobrazit soubor 

@@ -0,0 +1,121 @@
 
+//jQuery time
 
+var current_fs, next_fs, previous_fs; //fieldsets
 
+var left, opacity, scale; //fieldset properties which we will animate
 
+var animating; //flag to prevent quick multi-click glitasdaches
 
+
 
+$(".gen_avatar").click(function(){
 
+  imsrc = $('.img_src').val();
 
+  srcObj = {'imgurl':imsrc}
 
+  srcObjstr = JSON.stringify(srcObj);
 
+  alert('生成中，請稍候 按下確認開始生成')
 
+  $.ajax({
 
+    url: 'http://www.choozmo.com:8888/swapFace',
 
+    //url: 'http://www.choozmo.com:8888/qqreq',
 
+    dataType : 'json', // 預期從server接收的資料型態
 
+    contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
 
+    type: 'post',
 
+    data: srcObjstr,
 
+    success: function(suc_data) {
 
+      alert(suc_data.msg)
 
+      },
 
+    //data:JSON.stringify({n1:"12",n2:"22"}),
 
+    error: function (error) {
 
+      alert(error)
 
+    }
 
+  });
 
+});
 
+
 
+$(".next").click(function(){
 
+  avatar = $('.avatar').val();
 
+  name_title = $('.title_new').val();
 
+  txtARR=[];
 
+  imgARR=[];
 
+  var step;
 
+	for (step = 1; step <= 10; step++) {
 
+	  if($(".txtsrc"+step).val()!=""){
 
+		  txtARR.push($(".txtsrc"+step).val())
 
+	  }
 
+	}
 
+	var step2;
 
+	for (step2 = 1; step2 <= 10; step2++) {
 
+	  if($(".imgsrc"+step2).val()!=""){
 
+		  imgARR.push($(".imgsrc"+step2).val())
 
+	  }
 
+	}	
+	dataOBJ = {"name":name_title,"text_content":txtARR,"image_urls":imgARR,"avatar":avatar}
 
+	objstr = JSON.stringify(dataOBJ);
 
+	console.log(dataOBJ)
 
+
 
+  $.ajax({
 
+	url: 'http://www.choozmo.com:8888/make_anchor_video_v2',
 
+	//url: 'http://www.choozmo.com:8888/qqreq',
 
+	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) {
 
+	  alert(error)
 
+	}
 
+});
 
+
 
+});
 
+
 
+
 
+
 
+var loaded_data = ''
 
+function openNav() {
 
+	document.getElementById("mySidenav").style.width = "250px";
 
+  
+    $.get("http://www.choozmo.com:8888/history_input", function(data, status){
 
+        console.log(data)
 
+        loaded_data = data
 
+        for (var obj of data) {
 
+            var sideBAR = document.getElementById('mySidenav')
 
+            var message = document.createElement('a')
 
+            var content = document.createTextNode(obj.name)
 
+            message.id = obj.id
 
+            message.setAttribute('href', "#")
 
+            message.setAttribute('onclick', "load_data()")
 
+            message.appendChild(content)
 
+            sideBAR.appendChild(message)
 
+        }
 
+            
+        });
 
+}
 
+    
+    function closeNav() {
 
+      document.getElementById("mySidenav").style.width = "0";
 
+    }
 
+    function load_data(){
 
+      var title = document.getElementById("title")
 
+      tid = event.srcElement.id
 
+      console.log(tid);
 
+      $(".title_new").val(loaded_data.find(item => item.id == tid).name)
 
+      var step;
 
+      for (step = 1; step <= 10; step++) {
 
+        $(".txtsrc"+step).val(loaded_data.find(item => item.id == tid).text_content[step-1]) 
+      }
 
+      var step2;
 
+      for (step2 = 1; step2 <= 10; step2++) {
 
+        $(".imgsrc"+step2).val(loaded_data.find(item => item.id == tid).image_urls[step2-1]) 
+      }
 
+      
+    }
 
+
 
+	var ws = new WebSocket('ws://www.choozmo.com:8888/progress');
 
+          ws.onmessage = function(event) {
 
+              console.log(event.data);
 
+              var elem = document.getElementById("myBar");
 
+              elem.style.width = event.data + "%";
 
+              elem.innerHTML = event.data  + "%";
 
+          };
 
+          function sendMessage(event) {
 
+              var input = document.getElementById("messageText")
 
+              ws.send(input.value)
 
+              input.value = ''
 
+              event.preventDefault()
 
+          }

+ 451 - 0
old_UI/style.css
Zobrazit soubor 

@@ -0,0 +1,451 @@
 
+/*custom font*/
 
+@import url(https://fonts.googleapis.com/css?family=Montserrat);
 
+
 
+/*basic reset*/
 
+* {margin: 0; padding: 0;}
 
+
 
+html {
 
+	min-height: 100%;
 
+	height: auto;
 
+	/*Image only BG fallback*/
 
+	
+	/*background = gradient + image pattern combo*/
 
+	/* background: 
+		linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
 
+}
 
+
 
+body {
 
+	font-family: montserrat, arial, verdana;
 
+	background-color: white;
 
+	font-size: 1.05rem;
 
+}
 
+
 
+.ml {
 
+	margin-left: 10px;
 
+}
 
+
 
+.mr {
 
+	margin-right: 10px;
 
+}
 
+
 
+.mb {
 
+	margin-bottom: 12px;
 
+}
 
+
 
+.top {
 
+	margin-top: 20px;
 
+	position: sticky;
 
+	top: 0;
 
+	left: 50%;
 
+	z-index: 20;
 
+	background-color: inherit;
 
+}
 
+
 
+.navbar {
 
+	background-color: white;
 
+}
 
+
 
+/* .imf {
 
+	position: fixed;
 
+	top: 0;
 
+	left: 50%;
 
+	transform: translateX(-50%);
 
+	z-index: 3;
 
+} */
 
+
 
+.img_banner {
 
+	background-image: url('images/banner_top1.jpg');
 
+	background-repeat: no-repeat;
 
+	background-size: contain;
 
+	background-position: center;
 
+	width: 100%;
 
+	height: 65px;
 
+}
 
+
 
+/*form styles*/
 
+.img_logo {
 
+	display: inline-block;
 
+	margin: 0 auto;
 
+	margin-bottom: 10px;
 
+}
 
+
 
+.title__block {
 
+	display: flex;
 
+	justify-content: center;
 
+	align-items: center;
 
+	margin: 0px auto;
 
+}
 
+
 
+.sub-logo {
 
+	display: inline-block;
 
+	font-weight: 700;
 
+	font-size: 1.4rem;
 
+	color: white;
 
+}
 
+
 
+.slogan {
 
+	display: block;
 
+	font-weight: 700;
 
+	font-size: 1.2rem;
 
+	color: white;
 
+}
 
+
 
+.notice_card {
 
+	box-sizing: border-box;
 
+	width: 80%;
 
+	margin: 0 10%;
 
+	margin-bottom: 1.5rem;
 
+	background: white;
 
+	border: 0 none;
 
+	border-radius: 3px;
 
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 
+	padding: 10px 20px;
 
+	line-height: 1.5rem;
 
+}
 
+#myProgress {
 
+	width: 100%;
 
+	background-color: #ddd;
 
+  }
 
+  
+  #myBar {
 
+	width: 10%;
 
+	height: 30px;
 
+	background-color: #04AA6D;
 
+	text-align: center;
 
+	line-height: 30px;
 
+	color: white;
 
+  }
 
+/*form styles*/
 
+#msform {
 
+	min-width: 370px;
 
+	max-width: 1000px;
 
+	margin: 50px auto;
 
+	margin-bottom: 20px;
 
+	text-align: center;
 
+	position: relative;
 
+}
 
+#msform fieldset {
 
+	background: white;
 
+	border: 0 none;
 
+	border-radius: 3px;
 
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 
+	padding: 20px 30px;
 
+	box-sizing: border-box;
 
+	width: 80%;
 
+	margin: 0 10%;
 
+	
+	/*stacking fieldsets above each other*/
 
+	position: relative;
 
+}
 
+/*Hide all except first fieldset*/
 
+#msform fieldset:not(:first-of-type) {
 
+	display: none;
 
+}
 
+/*inputs*/
 
+#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;
 
+}
 
+/*buttons*/
 
+#msform .action-button {
 
+	width: 100px;
 
+	background: #27AE60;
 
+	font-weight: bold;
 
+	color: white;
 
+	border: 0 none;
 
+	border-radius: 1px;
 
+	cursor: pointer;
 
+	padding: 10px 5px;
 
+	margin: 10px auto;
 
+	display: inline-block;
 
+}
 
+#msform .action-button:hover, #msform .action-button:focus {
 
+	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
 
+}
 
+/*headings*/
 
+.fs-title {
 
+	font-size: 15px;
 
+	text-transform: uppercase;
 
+	color: #2C3E50;
 
+	margin-bottom: 10px;
 
+}
 
+.fs-subtitle {
 
+	display: inline-block;
 
+	font-weight: normal;
 
+	font-size: 13px;
 
+	color: #666;
 
+	margin-bottom: 20px;
 
+	padding-bottom: 3px;
 
+	border-bottom: 2px solid #27AE60;
 
+}
 
+.fs-label {
 
+	display: block;
 
+	text-align: left;
 
+	margin-bottom: 8px;
 
+}
 
+.fs-label > i {
 
+	margin-right: 3px;
 
+}
 
+
 
+/*progressbar*/
 
+#progressbar {
 
+	margin-bottom: 30px;
 
+	overflow: hidden;
 
+	/*CSS counters to number the steps*/
 
+	counter-reset: step;
 
+}
 
+#progressbar li {
 
+	list-style-type: none;
 
+	color: black;
 
+	text-transform: uppercase;
 
+	font-size: 12px;
 
+	width: 33.33%;
 
+	float: left;
 
+	position: relative;
 
+}
 
+#progressbar li:before {
 
+	content: counter(step);
 
+	counter-increment: step;
 
+	width: 20px;
 
+	line-height: 20px;
 
+	display: block;
 
+	font-size: 12px;
 
+	color: #333;
 
+	background: white;
 
+	border-radius: 3px;
 
+	margin: 0 auto 5px auto;
 
+}
 
+/*progressbar connectors*/
 
+#progressbar li:after {
 
+	content: '';
 
+	width: 100%;
 
+	height: 2px;
 
+	background: white;
 
+	position: absolute;
 
+	left: -50%;
 
+	top: 9px;
 
+	z-index: -1; /*put it behind the numbers*/
 
+}
 
+#progressbar li:first-child:after {
 
+	/*connector not needed before the first step*/
 
+	content: none; 
+}
 
+/*marking active/completed steps green*/
 
+/*The number of the step and the connector before it = green*/
 
+#progressbar li.active:before,  #progressbar li.active:after{
 
+	background: #27AE60;
 
+	color: white;
 
+}
 
+
 
+p.error-text {
 
+	bottom: -23px;
 
+	left: 24px;
 
+	color: rgba(255, 0, 0, .7);
 
+	font-size: .8em;
 
+}
 
+
 
+#term-error {
 
+	color: rgba(255, 0, 0, .7);
 
+	font-size: .8em;
 
+	bottom: -23px;
 
+	left: 24px;
 
+}
 
+
 
+select {
 
+	padding: 15px;
 
+	border: 1px solid #ccc;
 
+	border-radius: 3px;
 
+	margin-bottom: 10px;
 
+	width: 100%;
 
+	box-sizing: border-box;
 
+	font-family: montserrat;
 
+	color: #2C3E50;
 
+	font-size: 13px;
 
+
 
+	background-color: transparent;
 
+}
 
+
 
+.pl-0 {
 
+	padding-left: 0;
 
+}
 
+
 
+.terms {
 
+	font-size: .9rem;
 
+	width: 95%;
 
+	min-width: 250px;
 
+	height: auto;
 
+	overflow: scroll;
 
+	margin-bottom: 1rem;
 
+	margin-left: auto;
 
+	margin-right: auto;
 
+	border: 1px solid rgb(163, 163, 163);
 
+	line-height: 1.5rem;
 
+}
 
+
 
+.term-link a {
 
+	text-decoration: none;
 
+	color: black;
 
+}
 
+
 
+.h2 {
 
+	text-align: center;
 
+	font-size: 1.2rem;
 
+	font-weight: 500;
 
+	margin-top: 2rem;
 
+}
 
+
 
+.left_align {
 
+	font-size: 18px;
 
+	text-align: left;
 
+}
 
+
 
+#overlay {
 
+	position: fixed; /* Sit on top of the page content */
 
+	display: none;
 
+	width: 100%;
 
+	height: 100%;
 
+	top: 0; 
+	left: 0;
 
+	right: 0;
 
+	bottom: 0;
 
+	background-color: rgba(0,0,0,0.5);
 
+	z-index: 2;
 
+	cursor: pointer;
 
+}
 
+
 
+.thankyou {
 
+	margin: auto;
 
+	min-width: 350px;
 
+	height: 250px;
 
+	margin-top: 190px;
 
+	background: #fff;
 
+	padding: 15px 20px;
 
+	line-height: 25px;
 
+	border-radius: 4px;
 
+	text-align: center;
 
+	
+}
 
+.thankyou input {
 
+	margin-top: 40px;
 
+}
 
+.thankyou h3 {
 
+	font-size: 2rem;
 
+	font-weight: 700;
 
+	color: #21ba45;
 
+	line-height: 2.5rem;
 
+	margin-bottom: 1.5rem;
 
+}
 
+
 
+.check_button {
 
+	display: none;
 
+}
 
+
 
+.fs-label-type {
 
+	background: transparent;
 
+	padding: 5px;
 
+	border: 1px solid black;
 
+	border-radius: 5px;
 
+	display: inline-block;
 
+}
 
+
 
+.check_button:checked + .fs-label-type{
 
+	background-color: #27AE60;
 
+	color: white;
 
+	padding: 5px;
 
+	border: 1px solid #27AE60;
 
+	border-radius: 5px;
 
+}
 
+
 
+input[type="checkbox"] {
 
+	display: none;
 
+}
 
+
 
+#checker1, #checker2 {
 
+	display: inline;
 
+}
 
+
 
+.fs-label-info {
 
+	background: transparent;
 
+	padding: 5px;
 
+	border: 1px solid black;
 
+	border-radius: 5px;
 
+	display: inline-block;
 
+	margin-bottom: 8px;
 
+}
 
+
 
+input[type="radio"] {
 
+	display: none;
 
+}
 
+
 
+input[type="radio"]:checked + .fs-label-info {
 
+	background-color: #27AE60;
 
+	color: white;
 
+	padding: 5px;
 
+	border: 1px solid #27AE60;
 
+	border-radius: 5px;
 
+}
 
+
 
+input[type="checkbox"]:checked + .fs-label-info {
 
+	background-color: #27AE60;
 
+	color: white;
 
+	padding: 5px;
 
+	border: 1px solid #27AE60;
 
+	border-radius: 5px;
 
+}
 
+
 
+.btn-exit {
 
+	padding: .5rem .75rem;
 
+	background-color: transparent;
 
+	border: 1px solid black;
 
+	margin-top: .3rem;
 
+}
 
+
 
+.btn-term-exit {
 
+	padding: .5rem .75rem;
 
+	background-color: transparent;
 
+	border: 1px solid black;
 
+	margin-top: .3rem;
 
+	display: block;
 
+	margin-left: auto;
 
+	margin-right: auto;
 
+	margin-bottom: 2rem;
 
+}
 
+
 
+footer {
 
+	padding: 2rem;
 
+	padding-top: .5rem;
 
+}
 
+
 
+.footer {
 
+	display: flex;
 
+	justify-content: center;
 
+}
 
+
 
+.img_fr {
 
+	width: 80%;
 
+	max-width: 850px;
 
+	min-width: 300px;
 
+	height: 60px;
 
+	object-fit: contain;
 
+	object-position: center;
 
+}
 
+
 
+.img_fr img {
 
+	width: 100%;
 
+	height: 90%;
 
+}
 
+
 
+#msform #userid, #msform #area {
 
+	height: 0;
 
+	padding: 0;
 
+	margin: 0;
 
+	border: none;
 
+}
 
+

+ 26 - 33
script_msg.js
Zobrazit soubor 

@@ -3,29 +3,15 @@ var current_fs, next_fs, previous_fs; //fieldsets
 
 var left, opacity, scale; //fieldset properties which we will animate
 
 var animating; //flag to prevent quick multi-click glitasdaches
 
 
-$(".gen_avatar").click(function(){
 
-  imsrc = $('.img_src').val();
 
-  srcObj = {'imgurl':imsrc}
 
-  srcObjstr = JSON.stringify(srcObj);
 
-  alert('生成中，請稍候 按下確認開始生成')
 
-  $.ajax({
 
-    url: 'http://www.choozmo.com:8888/swapFace',
 
-    //url: 'http://www.choozmo.com:8888/qqreq',
 
-    dataType : 'json', // 預期從server接收的資料型態
 
-    contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
 
-    type: 'post',
 
-    data: srcObjstr,
 
-    success: function(suc_data) {
 
-      alert(suc_data.msg)
 
-      },
 
-    //data:JSON.stringify({n1:"12",n2:"22"}),
 
-    error: function (error) {
 
-      alert(error)
 
-    }
 
-  });
 
-});
 
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
 
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 
+  return new bootstrap.Tooltip(tooltipTriggerEl)
 
+})
 
 
 $(".next").click(function(){
 
+  if( !validate() ){
 
+    return false;
 
+  }
 
   avatar = $('.avatar').val();
 
   name_title = $('.title_new').val();
 
   txtARR=[];
 
@@ -45,7 +31,7 @@ $(".next").click(function(){
 
 	dataOBJ = {"name":name_title,"text_content":txtARR,"image_urls":imgARR,"avatar":avatar}
 
 	objstr = JSON.stringify(dataOBJ);
 
 	console.log(dataOBJ)
 
-
 
+  alert('資料已送出! 請耐心等候')
 
   $.ajax({
 
 	url: 'http://www.choozmo.com:8888/make_anchor_video_v2',
 
 	//url: 'http://www.choozmo.com:8888/qqreq',
 
@@ -54,11 +40,11 @@ $(".next").click(function(){
 
 	type: 'post',
 
 	data: objstr,
 
 	success: function(suc_data) {
 
-    alert(suc_data.msg)
 
+        
 	  },
 
 	//data:JSON.stringify({n1:"12",n2:"22"}),
 
 	error: function (error) {
 
-	  alert(error)
 
+		console.error(error)
 
 	}
 
 });
 
 
@@ -69,29 +55,36 @@ $(".next").click(function(){
 
 var loaded_data = ''
 
 function openNav() {
 
 	document.getElementById("mySidenav").style.width = "250px";
 
-  
+  document.querySelector('.loader').style.display = "block";
 
     $.get("http://www.choozmo.com:8888/history_input", function(data, status){
 
         console.log(data)
 
         loaded_data = data
 
-        for (var obj of data) {
 
-            var sideBAR = document.getElementById('mySidenav')
 
+         for (var obj of data) {
 
+            var historyList = document.querySelector('.historyList');
 
+            var list = document.createElement('li')
 
             var message = document.createElement('a')
 
+            list.classList.add("historyList-item");
 
+            message.classList.add("historyList-link");
 
             var content = document.createTextNode(obj.name)
 
             message.id = obj.id
 
             message.setAttribute('href', "#")
 
             message.setAttribute('onclick', "load_data()")
 
             message.appendChild(content)
 
-            sideBAR.appendChild(message)
 
-        }
 
-            
+            list.appendChild(message);
 
+            historyList.appendChild(list);
 
+        } 
+        document.querySelector('.loader').style.display = "none";  
         });
 
 }
 
-    
+var myModal = new bootstrap.Modal(document.getElementById('history'), {
 
+  keyboard: false
 
+})
 
     function closeNav() {
 
-      document.getElementById("mySidenav").style.width = "0";
 
+      document.getElementById("mySidenav").style.width = "250px";
 
     }
 
     function load_data(){
 
-      var title = document.getElementById("title")
 
+      var title = document.getElementById("title");
 
+      myModal.hide()
 
       tid = event.srcElement.id
 
       console.log(tid);
 
       $(".title_new").val(loaded_data.find(item => item.id == tid).name)

+ 90 - 11
style.css
Zobrazit soubor 

@@ -110,15 +110,96 @@ body {
 
   #myBar {
 
 	width: 10%;
 
 	height: 30px;
 
-	background-color: #04AA6D;
 
+	background-color: #1C7CE0;
 
 	text-align: center;
 
 	line-height: 30px;
 
 	color: white;
 
   }
 
+
 
+.go_title {
 
+	color: white;
 
+	font-family: 'Montserrat', sans-serif;
 
+	padding: 1rem;
 
+}
 
+
 
+.nav-list {
 
+	color: white;
 
+	margin-top: 3rem;
 
+}
 
+
 
+.nav-list-item {
 
+	font-size: 1.2rem;
 
+	cursor: pointer;
 
+	position: relative;
 
+
 
+}
 
+
 
+.nav-list-item::after {
 
+	content: " ";
 
+	position: absolute;
 
+	width: 100%;
 
+	height: 100%;
 
+	left: 0;
 
+	top: 0;
 
+	border-bottom: 1px solid white;
 
+	opacity: 0;
 
+	transition: all .4s;
 
+}
 
+
 
+.nav-list-item:hover::after {
 
+
 
+	opacity: 1;
 
+}
 
+
 
+.right-text {
 
+	position: absolute;
 
+	bottom: 0rem;
 
+}
 
+
 
+.loader {
 
+	position: absolute;
 
+	top: 30%;
 
+	left: 45%;
 
+}
 
+
 
+/* .history-modal {
 
+	height: 80vh;
 
+}
 
+.history-modal .modal-content{
 
+	height: 80vh;
 
+	
+}
 
+.history-modal .modal-conten .modal-terms {
 
+	height: 90%;
 
+	overflow: scroll;
 
+} */
 
+
 
+.historyList-item {
 
+	padding: 1rem;
 
+	display: block;
 
+	width: 80%;
 
+	margin: 1rem auto;
 
+	border: 1px solid rgb(177, 177, 177);
 
+	border-radius: 10px;
 
+	text-align: center;
 
+}
 
+
 
+.historyList-link {
 
+	text-decoration: none;
 
+	color: rgb(73, 73, 73);
 
+}
 
+
 
+.historyList-link:hover {
 
+	color: rgb(124, 124, 124);
 
+}
 
+
 
+.content {
 
+	width: calc(100% - 250px);
 
+}
 
 /*form styles*/
 
 #msform {
 
-	min-width: 370px;
 
 	max-width: 1000px;
 
+	min-width: 370px;
 
 	margin: 50px auto;
 
 	margin-bottom: 20px;
 
 	text-align: center;
 
@@ -132,15 +213,13 @@ body {
 
 	padding: 20px 30px;
 
 	box-sizing: border-box;
 
 	width: 80%;
 
-	margin: 0 10%;
 
+	margin: 3rem 10%;
 
 	
 	/*stacking fieldsets above each other*/
 
 	position: relative;
 
 }
 
 /*Hide all except first fieldset*/
 
-#msform fieldset:not(:first-of-type) {
 
-	display: none;
 
-}
 
+
 
 /*inputs*/
 
 #msform input[type="text"], #msform textarea, #msform input[type="email"] {
 
 	padding: 15px;
 
@@ -156,7 +235,7 @@ body {
 
 /*buttons*/
 
 #msform .action-button {
 
 	width: 100px;
 
-	background: #27AE60;
 
+	background: #1C7CE0;
 
 	font-weight: bold;
 
 	color: white;
 
 	border: 0 none;
 
@@ -164,10 +243,10 @@ body {
 
 	cursor: pointer;
 
 	padding: 10px 5px;
 
 	margin: 10px auto;
 
-	display: inline-block;
 
+	display: block;
 
 }
 
 #msform .action-button:hover, #msform .action-button:focus {
 
-	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
 
+	box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
 
 }
 
 /*headings*/
 
 .fs-title {
 
@@ -179,11 +258,11 @@ body {
 
 .fs-subtitle {
 
 	display: inline-block;
 
 	font-weight: normal;
 
-	font-size: 13px;
 
+	font-size: 18px;
 
 	color: #666;
 
 	margin-bottom: 20px;
 
 	padding-bottom: 3px;
 
-	border-bottom: 2px solid #27AE60;
 
+	border-bottom: 2px solid #1C7CE0;
 
 }
 
 .fs-label {
 
 	display: block;