choozmo
/
AI_anchor_openshot


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<!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>
      </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>
  
  <style>
    #myProgress {
      width: 100%;
      background-color: #ddd;
    }
    
    #myBar {
      width: 10%;
      height: 30px;
      background-color: #04AA6D;
      text-align: center;
      line-height: 30px;
      color: white;
    }
    </style>
  <body>
      
      <ul id='messages'>
      </ul>
      <script>
          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()
          }
      </script>


</div>

</body>
</html>