Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
choozmo
/
AI_anchor_openshot
2
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

new interface

ming 3 éve
szülő
ef28a0353d
commit
44bd14f818
3 módosított fájl, 390 hozzáadás és 208 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 129 85
      api/static/index2.html
  2. 91 67
      api/static/script_msg.js
  3. 170 56
      api/static/style.css

+ 129 - 85
api/static/index2.html
Fájl Megtekintése 

@@ -1,55 +1,92 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
-
 
+<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 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="static/style.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/style.css">
 
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
-
 
+  <style>
 
+    body {
 
+      font-family: "Lato", sans-serif;
 
+    }
 
+    .sidenav {
 
+      height: 100%;
 
+      width: 250px;
 
+      position: fixed;
 
+      z-index: 1;
 
+      top: 0;
 
+      left: 0;
 
+      background: linear-gradient(to bottom, #1C7CE0, #150051);
 
+      overflow-x: hidden;
 
+      transition: 0.5s;
 
+      padding-top: 20px;
 
+    }
 
+    
+    .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-fluid">
 
     <div id="mySidenav" class="sidenav">
 
       <!-- <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>
 
+        <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>
 
     <!-- <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>
 
-
 
-          <a id='linker' style="display: none;">影片連結</a>
 
+      <form id="msform">
 
+        <div class="linker__box">
 
+          <p>預覽影片</p>
 
+          <i class="fas fa-link"></i>
 
+          <a id='linker' style="display: none;" class="ms-2">影片連結</a>
 
         </div>
 
         <!-- fieldsets -->
 
         <fieldset>
 
-          <h3 class="fs-subtitle">標題</h3><img class="ms-1" src="static/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 />
 
+          <h3 class="fs-subtitle">標題<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題"></h3>
 
+          <input id=title type="text" name='t1' class='title_new' value="" placeholder="標題" /> <br/>
 
         </fieldset>
 
         <fieldset>
 
-          <h3 class="fs-subtitle">選擇人物</h3><img class="ms-1" src="static/img/question.png" alt=""
 
-            data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者">
 
+          <h3  class="fs-subtitle">選擇人物<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者"></h3>
 
           <select id="avatar" class='avatar'>
 
             <option value="6">Angus</option>
 
             <option value="7">Peggy</option>
 
@@ -58,31 +95,31 @@
 
             <option value="9">Nina灰</option>
 
           </select>
 
           <div class="d-flex">
 
-            <div class="card" style="width:25%;">
 
+            <div class="card" style="width:25%;" data-avatar="Angus" data-img="angus">
 
               <div class="imgfr"><img src="static/img/angus.webp" class="card-img-top" alt="..."></div>
 
               <div class="card-body">
 
                 <h5 class="card-title">Angus</h5>
 
               </div>
 
             </div>
 
-            <div class="card" style="width:25%;">
 
+            <div class="card" style="width:25%;" 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" style="width:25%;">
 
+            <div class="card" style="width:25%;" 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" style="width:25%;">
 
+            <div class="card" style="width:25%;" data-avatar="Nina黑" data-img="ninablack">
 
               <div class="imgfr"><img src="static/img/ninablack.webp" class="card-img-top" alt="..."></div>
 
               <div class="card-body">
 
                 <h5 class="card-title">Nina黑</h5>
 
               </div>
 
             </div>
 
-            <div class="card" style="width:25%;">
 
+            <div class="card" style="width:25%;" data-avatar="Nina灰" data-img="ninawhite">
 
               <div class="imgfr"><img src="static/img/ninawhite.webp" class="card-img-top" alt="..."></div>
 
               <div class="card-body">
 
                 <h5 class="card-title">Nina灰</h5>
 
@@ -92,40 +129,39 @@
 
         </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 />
 
+          <input type="text" name='t1' class='txtsrc txtsrc1' value="" placeholder="1"/> <br/>
 
+          <input type="text" name='t2' class='txtsrc txtsrc2' value="" placeholder="2" /><br/>
 
+          <input type="text" name='t3' class='txtsrc txtsrc3' value="" placeholder="3" /><br/>
 
+          <input type="text" name='t4' class='txtsrc txtsrc4' value="" placeholder="4" /><br/>
 
+          <input type="text" name='t5' class='txtsrc txtsrc5' value="" placeholder="5" /><br/>
 
+          <input type="text" name='t6' class='txtsrc txtsrc6' value="" placeholder="6" /><br/>
 
+          <input type="text" name='t7' class='txtsrc txtsrc7' value="" placeholder="7" /><br/>
 
+          <input type="text" name='t8' class='txtsrc txtsrc8' value="" placeholder="8" /><br/>
 
+          <input type="text" name='t9' class='txtsrc txtsrc9' value="" placeholder="9" /><br/>
 
+          <input type="text" name='t10' class='txtsrc txtsrc10' value="" placeholder="10" /><br/>
 
         </fieldset>
 
         <fieldset id='imgSrc'>
 
-          <h3 class="fs-subtitle">影像連結</h3><img class="ms-1" src="static/img/question.png" alt=""
 
-            data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"><br/>
 
-          <input type="text" name='m1' class='imgsrc imgsrc1' value="" placeholder="1" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m2' class='imgsrc imgsrc2' value="" placeholder="2" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m3' class='imgsrc imgsrc3' value="" placeholder="3" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m4' class='imgsrc imgsrc4' value="" placeholder="4" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m5' class='imgsrc imgsrc5' value="" placeholder="5" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m6' class='imgsrc imgsrc6' value="" placeholder="6" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m7' class='imgsrc imgsrc7' value="" placeholder="7" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m8' class='imgsrc imgsrc8' value="" placeholder="8" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m9' class='imgsrc imgsrc9' value="" placeholder="9" /><input type="file" class="img_uploader img_up"> <br />
 
-          <input type="text" name='m10' class='imgsrc imgsrc10' value="" placeholder="10" /><input type="file" class="img_uploader img_up"> <br />
 
+          <h3 class="fs-subtitle">影像連結<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3>
 
+          <input type="text" name='m1' class='imgsrc imgsrc1' value="" placeholder="1" /><input id="img1" type="file" class="img_uploader img_up"><label for="img1" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m2' class='imgsrc imgsrc2' value="" placeholder="2" /><input id="img2" type="file" class="img_uploader img_up"><label for="img2" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m3' class='imgsrc imgsrc3' value="" placeholder="3" /><input id="img3" type="file" class="img_uploader img_up"><label for="img3" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m4' class='imgsrc imgsrc4' value="" placeholder="4" /><input id="img4" type="file" class="img_uploader img_up"><label for="img4" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m5' class='imgsrc imgsrc5' value="" placeholder="5" /><input id="img5" type="file" class="img_uploader img_up"><label for="img5" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m6' class='imgsrc imgsrc6' value="" placeholder="6" /><input id="img6" type="file" class="img_uploader img_up"><label for="img6" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m7' class='imgsrc imgsrc7' value="" placeholder="7" /><input id="img7" type="file" class="img_uploader img_up"><label for="img7" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m8' class='imgsrc imgsrc8' value="" placeholder="8" /><input id="img8" type="file" class="img_uploader img_up"><label for="img8" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m9' class='imgsrc imgsrc9' value="" placeholder="9" /><input id="img9" type="file" class="img_uploader img_up"><label for="img9" class="upload-btn">上傳檔案</label><br/>
 
+          <input type="text" name='m10' class='imgsrc imgsrc10' value="" placeholder="10" /><input id="img10" type="file" class="img_uploader img_up"><label for="img10" class="upload-btn">上傳檔案</label><br/>
 
           <input id="checker" type="button" name="next" class="next action-button" value="送出" />
 
-
 
           <h3 style="display: none;" class="fs-subtitle">處理進度</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 class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
 
       <div class="modal-dialog">
 
         <div class="modal-content">
 
@@ -134,52 +170,60 @@
 
             <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>1. 一句台詞請對應提供一個影像連結做為搭配</li>
 
-                <li>2. 影像連結檔案格式支援：<stong class="strong">.png, jpg, .mp4</stong>
 
-                </li>
 
-                <li>3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看</li>
 
-              </ol>
 
-            </div>
 
+              <div class="modal-terms">
 
+                  <ol class="ps-0">
 
+                      <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
 
+                      <li>2. 影像連結檔案格式支援：<stong class="strong">.png, jpg, .mp4</stong></li>
 
+                      <li>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">歷史紀錄</h5>
 
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 
-          </div>
 
-          <div class="modal-body">
 
+  </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="static/img/bx_loader.gif" alt=""></div>
 
               <ol class="ps-0 historyList">
 
               </ol>
 
             </div>
 
-          </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-header">
 
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><img src="static/img/close.svg" alt=""></button>
 
+        </div>
 
+        <div class="modal-body">
 
+          <img class="modal-img" src="" alt="">
 
+          <h5 class="modal-title mt-2"></h5>
 
+        </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="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="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
 
   <script src="static/script_msg.js"></script>
 
 
   <body>
 
 
-    </div>
 
-
 
-  </body>
 
+</div>
 
 
-</html>
 
+</body>
 
+</html>

+ 91 - 67
api/static/script_msg.js
Fájl Megtekintése 

@@ -1,22 +1,48 @@
 
-//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
 
 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;
 
+  console.log(value);
 
+  for(let i = 0;i < card.length; i++) {
 
+    if(card[i].dataset.avatar == value) {
 
+      card[i].classList.add('active');
 
+    } else {
 
+      card[i].classList.remove('active');
 
+    }
 
+  }
 
+}
 
 
-(function () {
 
-  $('.imgfr').hover(function () {
 
-    $(this).next().css('display', 'block');
 
-  }, function () {
 
-    $(this).next().css('display', 'none');
 
-  })
 
-}());
 
+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);
 
 
@@ -27,6 +53,8 @@ function prepareUpload(event) {
 
   //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
 
@@ -37,8 +65,15 @@ function prepareUpload(event) {
 
     success: function (jsonData) {
 
       event.target.previousSibling.value =jsonData.msg;
 
       $(this).prev().val(jsonData.msg);
 
+      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('圖片錯誤');
 
     }
 
   });
 
@@ -106,12 +141,7 @@ $(".gen_avatar").click(function () {
 
     type: 'post',
 
     data: objstr,
 
     success: function (suc_data) {
 
-      Swal.fire({
 
-        title: "資料已送出",
 
-        icon: 'success',
 
-        text: `${suc_data.msg}`,
 
-        confirmButtonColor: '#3085d6',
 
-      });
 
+      alert(suc_data.msg)
 
     },
 
     //data:JSON.stringify({n1:"12",n2:"22"}),
 
     error: function (error) {
 
@@ -121,7 +151,6 @@ $(".gen_avatar").click(function () {
 
 
 });
 
 
-
 
 var loaded_data = ''
 
 function openNav() {
 
   document.getElementById("mySidenav").style.width = "250px";
 
@@ -131,27 +160,54 @@ function openNav() {
 
     loaded_data = data
 
     for (var obj of data) {
 
       var historyList = document.querySelector('.historyList');
 
-      var list = document.createElement('li')
 
-      var message = document.createElement('a')
 
+      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;
 
+      boxTitle.setAttribute('onclick', 'load_data()');
 
+
 
+      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");
 
-      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)
 
-      list.appendChild(message);
 
+      list.setAttribute('onclick', 'load_data()');
 
+      list.appendChild(divImgfr);
 
+      list.appendChild(contentBox);
 
       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 = "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 load_data() {
 
   var title = document.getElementById("title");
 
   var linker = document.getElementById("linker");
 
@@ -159,10 +215,11 @@ function load_data() {
 
   myModal.hide()
 
   tid = event.srcElement.id
 
   console.log(tid);
 
-  linker.setAttribute('href', loaded_data.find(item => item.id == tid).link)
 
-
 
-  $("#linker").html(loaded_data.find(item => item.id == tid).link)
 
-  $("#linker").show()
 
+  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();
 
 
   $(".title_new").val(loaded_data.find(item => item.id == tid).name)
 
   var step;
 
@@ -175,36 +232,3 @@ function load_data() {
 
   }
 
 
 }
 
-
 
-
 
-var err = [];
 
-function listenToimg() {
 
-}
 
-
 
-validate();
 
-function validate() {
 
-  let imgsrc = document.querySelectorAll('.imgsrc');
 
-  imgsrc = [...imgsrc];
 
-  for (let i = 0; i < 10; i++) {
 
-    imgsrc[i].addEventListener('blur', function () {
 
-      let srcArray = $(this).val().split('.');
 
-      console.log(srcArray);
 
-      if (srcArray.includes('png') || srcArray.includes('jpg')) {
 
-        $(this).removeClass('error');
 
-        $(this).next().remove('p');
 
-        err.pop();
 
-      } else if (srcArray.length <= 1) {
 
-        $(this).removeClass('error');
 
-        $(this).next().remove('p');
 
-        err.pop();
 
-      } else {
 
-        $(this).addClass('error');
 
-        if (this.nextSibling.nodeName !== 'P') {
 
-          $(this).after('<p class="error-text">未支援該格式</p>');
 
-        }
 
-        err.push('svg');
 
-        console.log(err);
 
-      }
 
-    });
 
-  }
 
-}

+ 170 - 56
api/static/style.css
Fájl Megtekintése 

@@ -1,3 +1,4 @@
 
+@charset "UTF-8"; 
 /*custom font*/
 
 @import url(https://fonts.googleapis.com/css?family=Montserrat);
 
 
@@ -15,7 +16,7 @@ html {
 
 }
 
 
 body {
 
-	font-family: montserrat, arial, verdana;
 
+	font-family: 'Montserrat', sans-serif;
 
 	background-color: white;
 
 	font-size: 1.05rem;
 
 }
 
@@ -133,53 +134,7 @@ body {
 
 	position: relative;
 
 
 }
 
-body {
 
-	font-family: "Lato", sans-serif;
 
-  }
 
-
 
-  .sidenav {
 
-	height: 100%;
 
-	width: 250px;
 
-	position: fixed;
 
-	z-index: 1;
 
-	top: 0;
 
-	left: 0;
 
-	background: linear-gradient(to bottom, #1C7CE0, #150051);
 
-	overflow-x: hidden;
 
-	transition: 0.5s;
 
-	padding-top: 20px;
 
-  }
 
-
 
-  .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;
 
-	}
 
-  }
 
 .nav-list-item::after {
 
 	content: " ";
 
 	position: absolute;
 
@@ -208,6 +163,48 @@ body {
 
 	left: 45%;
 
 }
 
 
+.imgfr {
 
+	width:90px;
 
+	height: 90px;
 
+	border-radius: 50%;
 
+	overflow: hidden;
 
+	margin: 1rem auto 0 auto;
 
+}
 
+
 
+.card-title {
 
+	font-family: 'Montserrat', sans-serif;
 
+}
 
+
 
+.strong {
 
+	font-weight: 600;
 
+}
 
+
 
+.card {
 
+	border: none;
 
+	position: relative;
 
+}
 
+
 
+.card.active {
 
+	border: 1px solid gray;
 
+}
 
+
 
+.card.active::before {
 
+	position: absolute;
 
+	content: "✓";
 
+	bottom: 0;
 
+	right: 5px;
 
+}
 
+
 
+.zoomin {
 
+	display: none;
 
+	position: absolute;
 
+	bottom: 0;
 
+	left: 0;
 
+}
 
+
 
+.script_err {
 
+	display: none;
 
+}
 
 /* .history-modal {
 
 	height: 80vh;
 
 }
 
@@ -227,7 +224,8 @@ body {
 
 	margin: 1rem auto;
 
 	border: 1px solid rgb(177, 177, 177);
 
 	border-radius: 10px;
 
-	text-align: center;
 
+	display: flex;
 
+	font-size: .9rem;
 
 }
 
 
 .historyList-link {
 
@@ -291,17 +289,12 @@ body {
 
 	margin: 10px auto;
 
 	display: block;
 
 }
 
-.img_uploader{
 
-	display:inline-block;width:30%
 
-}
 
-#imgSrc input[type="text"]
 
-{
 
-	display: inline-block;
 
-	width:70%
 
-}
 
 #msform .action-button:hover, #msform .action-button:focus {
 
 	box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
 
 }
 
+#msform .next[disabled] {
 
+	background-color: grey;
 
+}
 
 /*headings*/
 
 .fs-title {
 
 	font-size: 15px;
 
@@ -317,6 +310,8 @@ body {
 
 	margin-bottom: 20px;
 
 	padding-bottom: 3px;
 
 	border-bottom: 2px solid #1C7CE0;
 
+	margin-left: 2rem;
 
+	margin-right: 2rem;
 
 }
 
 .fs-label {
 
 	display: block;
 
@@ -382,6 +377,7 @@ p.error-text {
 
 	left: 24px;
 
 	color: rgba(255, 0, 0, .7);
 
 	font-size: .8em;
 
+	margin-bottom: 0;
 
 }
 
 
 #term-error {
 
@@ -582,3 +578,121 @@ footer {
 
 	border: none;
 
 }
 
 
+#msform input[type="text"].error {
 
+	border-color: red;
 
+}
 
+
 
+.modal-header {
 
+	border-bottom: none;
 
+}
 
+
 
+#avatarmega .modal-content {
 
+	background-color: transparent;
 
+	border: none;
 
+}
 
+
 
+#avatarmega .modal-title {
 
+	color: white;
 
+}
 
+
 
+#avatarmega .btn-close {
 
+	background: none;
 
+}
 
+
 
+#avatarmega .modal-header {
 
+	position: absolute;
 
+	top: -1.5rem;
 
+	right: 1rem;
 
+}
 
+
 
+.linker__box {
 
+	padding: .5rem 1rem;
 
+	border-radius: 1rem;
 
+	box-shadow: 1px 1px 5px 1px rgb(201, 201, 201);
 
+	width: max-content;
 
+	margin: 0 auto;
 
+	display: none;
 
+}
 
+
 
+.linker__box p {
 
+	margin-bottom: 0;
 
+	color: gray;
 
+}
 
+
 
+.linker__box i {
 
+	color: gray;
 
+	position: relative;
 
+}
 
+
 
+.linker__box i::after {
 
+	position: absolute;
 
+	content: " ";
 
+	right: -5px;
 
+	top: -10%;
 
+	border-right: 2px solid rgb(163, 163, 163);
 
+	width: 1px;
 
+	height: 120%;
 
+}
 
+
 
+.item_imgfr {
 
+	width: 15%;
 
+	height: 50px;
 
+	border-radius: 50%;
 
+	overflow: hidden;
 
+	margin: auto .5rem;
 
+}
 
+
 
+.item_imgfr img {
 
+	height: 100%;
 
+	width: 100%;
 
+}
 
+
 
+.content-box {
 
+	width: 75%;
 
+}
 
+
 
+.box-title {
 
+	margin-bottom: .2rem;
 
+	cursor: pointer;
 
+}
 
+
 
+.box-title:hover {
 
+	color: grey;
 
+	text-decoration: underline;
 
+
 
+}
 
+
 
+.box-link {
 
+	cursor: pointer;
 
+}
 
+
 
+.img_uploader {
 
+	display: none;
 
+}
 
+
 
+#msform input[type="text"].imgsrc {
 
+	width: calc(100% - 8rem);
 
+	margin-right: 5px;
 
+}
 
+
 
+.upload-btn {
 
+	display: inline-block;
 
+	width: 6rem;
 
+	background-color: #75a7dd;
 
+	color: white;
 
+	padding: .4rem .5rem;
 
+	font-size: .9rem;
 
+	border-radius: 3px;
 
+	transition: all .3s;
 
+	cursor: pointer;
 
+}
 
+
 
+.upload-btn img{
 
+	width: 30px;
 
+	height: 30px;
 
+}
 
+
 
+.upload-btn:hover {
 
+	background-color: #3b86d6;
 
+}
 
+