new structure

Dockerfile

@@ -1,16 +0,0 @@
-FROM ubuntu:20.04
-
-RUN apt update
-RUN apt install -y software-properties-common
-RUN add-apt-repository -y ppa:openshot.developers/ppa
-RUN apt update
-RUN DEBIAN_FRONTEND=noninteractive apt-get install keyboard-configuration -y
-RUN apt-get update && apt-get install -y apt-transport-https
-RUN apt-get install python3-pip -y
-RUN apt-get install vim -y
-
-RUN apt-get install python3-openshot -y
-RUN apt-get install openshot-qt -y
-RUN apt install -y xvfb
-RUN pip3 install ffmpy
-

api/main.py

@@ -1,11 +1,30 @@
 from typing import Optional
 from fastapi.staticfiles import StaticFiles
 from fastapi import FastAPI,File, UploadFile,Request,Response
-import util,os, math, time
+import util,os, math, time,queue,threading
 import openshot
 from pydantic import BaseModel
 from fastapi.templating import Jinja2Templates
 
+class Item:
+    name ='str'
+    price = 90
+
+def tEntry():
+    while q.qsize!=0:
+        it = q.get()
+        print(it.price)
+        for i in range(10):
+            print(i)
+            time.sleep(1)
+
+
+q = queue.Queue()
+t1 = threading.Thread(target=tEntry)
+t1.start()
+
+
+
 templates = Jinja2Templates(directory="static")
 app = FastAPI()
 
@@ -25,7 +44,6 @@ def read_root(request: Request, response: Response):
 def read_item(item_id: int, q: Optional[str] = None):
     return {"item_id": item_id, "q": q}
 
-
 class updateScriptModel(BaseModel):
     name_hash:str
     scriptStr:str
@@ -39,7 +57,7 @@ def read_item(info : updateScriptModel):
 
     sub_dict,img_dict=filePrepare(info.name_hash)
     genVideo(info.name_hash,sub_dict,img_dict)
-
+    
     return 'ok'
 
 @app.post("/uploadmp3/")
@@ -58,92 +76,3 @@ async def uploadmp3(file: UploadFile = File(...)):
     scripts = util.get_script(cPath)
    
     return name_hash, scripts
-
-
-def filePrepare(name_hash):
-    cPath = rootPath+name_hash+'/'
-    try:
-        os.mkdir(cPath)
-    except FileExistsError:
-        pass
-    sub_dict,img_dict = util.parse_script("script.txt")
-    util.generate_subtitle_image_from_dict(cPath, sub_dict)
-
-    for imgd in img_dict:
-        print(imgd)
-        util.downloadFromDrive(cPath,imgd['imgid'],imgd['index'])
-    
-    util.call_anchor(cPath+'speech.mp3',7)
-    return sub_dict,img_dict
-
-def genVideo(name_hash,sub_dict,img_dict):
-    basicPath = rootPath+'basic/'
-    cPath = rootPath+name_hash+'/'
-    ck=util.cKey(0,254,0,270)
-    ck_anchor=util.cKey(0,255,1,320)
-    t = openshot.Timeline(1280, 720, openshot.Fraction(30000, 1000), 44100, 2, openshot.LAYOUT_STEREO)
-    t.Open()
-
-    main_timer = 0
-    LOGO_OP = openshot.FFmpegReader(basicPath+"LOGO_OP_4.mp4")
-    LOGO_OP.Open()         # Open the reader
-    head_duration = LOGO_OP.info.duration
-    LOGO_OP_clip = util.video_photo_clip(vid=LOGO_OP,layer=4,position=0,end=head_duration)
-    t.AddClip(LOGO_OP_clip)
-    main_timer+=head_duration
-
-    anchor = openshot.FFmpegReader(cPath+"/speaker.mp4")
-    anchor.Open()
-    anchor_clip = util.video_photo_clip(vid=anchor,layer=4,scale_x=0.65,scale_y=0.65,
-            location_x=0.35,location_y=0.25,position=main_timer, end=anchor.info.duration,ck=ck_anchor,audio=False)
-    t.AddClip(anchor_clip)
-
-    speech = openshot.FFmpegReader(cPath+"/speech.mp3")
-    speech.Open()
-    speech_clip = openshot.Clip(speech)
-    speech_clip.Position(main_timer)
-    speech_clip.End(anchor.info.duration)
-    t.AddClip(speech_clip)
-    main_timer += anchor.info.duration
-    anchor.Close()
-    speech.Close()
-
-
-    sub_img_list = [None] * len(sub_dict)
-    sub_clip_list = [None] * len(sub_dict)
-    for sub_obj in sub_dict:
-        idx = int(sub_obj['index'])
-        sub_img_list[idx] = openshot.QtImageReader(cPath +str(idx)+'.png')
-        sub_img_list[idx].Open()
-
-        sub_clip_list[idx] = util.video_photo_clip(vid=sub_img_list[idx], layer=5,location_x=0.069, location_y=0.89
-        ,position=head_duration+sub_obj['start'],end=sub_obj['duration'])
-        t.AddClip(sub_clip_list[idx])
-        sub_img_list[idx].Close()
-    
-    img_list = [None] * len(img_dict)
-    img_clip_list = [None] * len(img_dict)
-    for img_d in img_dict:
-        idx = int(img_d['index'])
-        print(cPath +str(idx) +'img.jpg')
-        try:
-            img_list[idx] = openshot.QtImageReader(cPath +str(idx) +'img.jpg')
-            img_list[idx].Open()
-        except:
-            img_list[idx] = openshot.QtImageReader(cPath +str(idx) +'img.png')
-            img_list[idx].Open()
-
-        img_clip_list[idx] = util.video_photo_clip(vid=img_list[idx], layer=3
-        ,position=head_duration+img_d['start'],end=img_d['duration'])
-        t.AddClip(img_clip_list[idx])
-        img_list[idx].Close()
-
-
-    w = util.video_writer_init("myraw.mp4")
-    w.Open()
-    frames = int(t.info.fps)*int(main_timer)
-    for n in range(frames):
-        f=t.GetFrame(n)
-        w.WriteFrame(f)
-    t.Close()
-    w.Close()

static/common.js → api/static/common.js

@@ -1,30 +1,30 @@
-$(".btn-logout").click(function() { 
-  let token = getCookie('jwt_token');
-  if(!token) {
-    return
-  }
-  axios({
-    method: 'post',
-    url: 'https://www.choozmo.com:8887/logout_jwt',
-    headers: { 
-      'accept': 'application/json',
-      'Authorization': `Bearer ${token}`
-    },
-    data: ''
-    }).then(res => {
-      console.log(res.data);
-      if(res.data.msg == 'ok'){
-        document.cookie = 'jwt_token=null';
-      }
-      window.location.href = 'index.html';
-    }).catch(err => {
-      console.log(err);
-    });
-});
-
-function getCookie(name) {
-  const value = `; ${document.cookie}`;
-  const parts = value.split(`; ${name}=`);
-  if (parts.length === 2) return parts.pop().split(';').shift();
-}
-
+$(".btn-logout").click(function() { 
+  let token = getCookie('jwt_token');
+  if(!token) {
+    return
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/logout_jwt',
+    headers: { 
+      'accept': 'application/json',
+      'Authorization': `Bearer ${token}`
+    },
+    data: ''
+    }).then(res => {
+      console.log(res.data);
+      if(res.data.msg == 'ok'){
+        document.cookie = 'jwt_token=null';
+      }
+      window.location.href = 'index.html';
+    }).catch(err => {
+      console.log(err);
+    });
+});
+
+function getCookie(name) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+}
+

static/gen_avatar.html → api/static/gen_avatar.html

@@ -1,110 +1,110 @@
-<!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 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>
-      </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 id="msform">
-        <fieldset id='imgSrc'>
-          <h3 class="fs-subtitle" style="display: inline-block;">影像連結<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
-          <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 id="checker" type="button" class="gen_avatar action-button" value="送出" />
-
-        </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>
-  
-  <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="static/gen_avatar.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/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/gen_avatar.js"></script>
-
-
-  <body>
-
-</div>
-
-</body>
-</html>
+<!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 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>
+      </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 id="msform">
+        <fieldset id='imgSrc'>
+          <h3 class="fs-subtitle" style="display: inline-block;">影像連結<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
+          <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 id="checker" type="button" class="gen_avatar action-button" value="送出" />
+
+        </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>
+  
+  <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="static/gen_avatar.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/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/gen_avatar.js"></script>
+
+
+  <body>
+
+</div>
+
+</body>
+</html>

static/gen_avatar.js → api/static/gen_avatar.js

@@ -1,136 +1,136 @@
-
-$('input[type=file]').on('change', prepareUpload);
-
-// Grab the files and set them to our variable
-function prepareUpload(event) {
-  files = event.target.files;
-  var data = new FormData();
-  //data.append('file', $('.img_up1').prop('files')[0]);
-  data.append('file', files[0]);
-  // append other variables to data if you want: data.append('field_name_x', field_value_x);
-  $(this).next().text('');
-  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
-  $.ajax({
-    type: 'POST',
-    processData: false, // important
-    contentType: false, // important
-    data: data,
-    url: 'uploadfile',
-    dataType: 'json',
-    success: function (jsonData) {
-      alert('yes');
-    },
-    error: function (error) {
-      alert('圖片錯誤');
-    }
-  });
-}
-const button = document.querySelector('.next');
-
-$(".next").click(function () {
-  button.setAttribute('disabled', '');
-  setTimeout(function () {
-    button.removeAttribute('disabled')
-  }, 4000);
-  avatar = $('.avatar').val();
-  name_title = $('.title_new').val();
-  txtARR = [];
-  imgARR = [];
-  var step;
-  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, "client_id": client_id }
-  objstr = JSON.stringify(dataOBJ);
-  console.log(dataOBJ)
-  //alert('資料已送出! 請耐心等候')
-  $.ajax({
-    url: '/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) {
-      Swal.fire({
-        title: "資料已送出",
-        icon: 'success',
-        text: `${suc_data.msg}`,
-        confirmButtonColor: '#3085d6',
-      });  
-      },
-    //data:JSON.stringify({n1:"12",n2:"22"}),
-    error: function (error) {
-      console.error(error)
-    }
-  });
-  
-  });
-
-$(".gen_avatar").click(function () {
-
-  dataOBJ = { "imgurl": $('.imgsrc').val() }
-  objstr = JSON.stringify(dataOBJ);
-  console.log(dataOBJ)
-  //alert('資料已送出! 請耐心等候')
-  $.ajax({
-    url: '/swapFace',
-    dataType: 'json', // 預期從server接收的資料型態
-    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
-    type: 'post',
-    data: objstr,
-    success: function (suc_data) {
-      alert(suc_data.msg)
-    },
-    //data:JSON.stringify({n1:"12",n2:"22"}),
-    error: function (error) {
-      console.error(error)
-    }
-  });
-
-});
-
-
-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");
-
-  myModal.hide()
-  tid = event.srcElement.id
-  console.log(tid);
-  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;
-  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])
-  }
-
-}
+
+$('input[type=file]').on('change', prepareUpload);
+
+// Grab the files and set them to our variable
+function prepareUpload(event) {
+  files = event.target.files;
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      alert('yes');
+    },
+    error: function (error) {
+      alert('圖片錯誤');
+    }
+  });
+}
+const button = document.querySelector('.next');
+
+$(".next").click(function () {
+  button.setAttribute('disabled', '');
+  setTimeout(function () {
+    button.removeAttribute('disabled')
+  }, 4000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  txtARR = [];
+  imgARR = [];
+  var step;
+  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, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  //alert('資料已送出! 請耐心等候')
+  $.ajax({
+    url: '/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) {
+      Swal.fire({
+        title: "資料已送出",
+        icon: 'success',
+        text: `${suc_data.msg}`,
+        confirmButtonColor: '#3085d6',
+      });  
+      },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
+  
+  });
+
+$(".gen_avatar").click(function () {
+
+  dataOBJ = { "imgurl": $('.imgsrc').val() }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  //alert('資料已送出! 請耐心等候')
+  $.ajax({
+    url: '/swapFace',
+    dataType: 'json', // 預期從server接收的資料型態
+    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
+    type: 'post',
+    data: objstr,
+    success: function (suc_data) {
+      alert(suc_data.msg)
+    },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
+
+});
+
+
+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");
+
+  myModal.hide()
+  tid = event.srcElement.id
+  console.log(tid);
+  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;
+  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])
+  }
+
+}

static/modifyScript.html → api/static/modifyScript.html

@@ -1,93 +1,93 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
-    <meta http-equiv="Cache-Control" content="no-cache">
-    <title>AI Spokesgirl</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="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
-
-
-    <link rel="stylesheet" href="static/scss/style.css">
-    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-    
-    <!-- Google Tag Manager -->
-    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
-    <!-- End Google Tag Manager -->
-</head>
-
-<body>
-
-
-    <div class="container-fluid px-0 mx-0">
-        <div class="row px-0 mx-0">
-            
-            <div class="col-lg-12 px-0">
-                <div>
-                    <form id="msform">
-                       
-                        <!-- fieldsets -->
-                  
-                        
-                        <fieldset class='msrcParent'>
-                            <h3 class="fs-subtitle" set-lan="html:lines">台詞</h3>
-
-                         
-                            <!--
-                                <div class="subtitle-inputs">
-                                <input type="text" name="t1" placeholder="1"  style="width:calc(50% - 2rem);">
-                                <input type="text" name="t1"   style="width:calc(50% - 2rem);">
-                            </div>
-
-
-                            -->
-                      
-                           
-                        </fieldset>
-                     
-                    </form>
-                    
-                </div>
-
-            </div>
-
-   
-            <input type='button' class='confirmbtn' value='確認'>
-        
-        </div>
-        
-    </div>
-
-    <footer class="fixed-bottom text-center py-2">
-
-    </footer> 
-    <!-- =====================================<script src="static/common.js"></script>============================ -->
-  
-    <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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
-
-    <script src="static/script_util.js"></script>
-    
-
-</body>
-
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
+    <meta http-equiv="Cache-Control" content="no-cache">
+    <title>AI Spokesgirl</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="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
+
+
+    <link rel="stylesheet" href="static/scss/style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <!-- End Google Tag Manager -->
+</head>
+
+<body>
+
+
+    <div class="container-fluid px-0 mx-0">
+        <div class="row px-0 mx-0">
+            
+            <div class="col-lg-12 px-0">
+                <div>
+                    <form id="msform">
+                       
+                        <!-- fieldsets -->
+                  
+                        
+                        <fieldset class='msrcParent'>
+                            <h3 class="fs-subtitle" set-lan="html:lines">台詞</h3>
+
+                         
+                            <!--
+                                <div class="subtitle-inputs">
+                                <input type="text" name="t1" placeholder="1"  style="width:calc(50% - 2rem);">
+                                <input type="text" name="t1"   style="width:calc(50% - 2rem);">
+                            </div>
+
+
+                            -->
+                      
+                           
+                        </fieldset>
+                     
+                    </form>
+                    
+                </div>
+
+            </div>
+
+   
+            <input type='button' class='confirmbtn' value='確認'>
+        
+        </div>
+        
+    </div>
+
+    <footer class="fixed-bottom text-center py-2">
+
+    </footer> 
+    <!-- =====================================<script src="static/common.js"></script>============================ -->
+  
+    <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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+
+    <script src="static/script_util.js"></script>
+    
+
+</body>
+
 </html>

static/script_util - 複製.js → api/static/script_util - 複製.js

@@ -1,714 +1,714 @@
-//checkRoute();
-
-let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
-
-
-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>`);
-} 
-
-
-function checkRoute() {
-  let jwt_token = get_jwt_token();
-  /* if(jwt_token == undefined) {
-    window.location.replace("login.html");
-  } */
-  axios({
-    method: 'post',
-    url: 'https://www.choozmo.com:8887/user_profile',
-    headers: { 
-        'accept': 'text/html',
-        'Authorization': `Bearer ${jwt_token}`
-     }
-  }).then(res => {
-    console.log(res.data);
-    if(res.status !== 200) {
-      window.location.replace("login.html");
-    }
-    var userName='';
-    userName+=`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${res.data.user_info.userName}</h2>`;
-    $('.userName').html(userName);
-  }).catch(err => {
-    console.log(err);
-    window.location.replace("login.html");
-  }); 
-}
-
-const btnLoginPage = document.querySelector('.btn-login');
-const btnUserProfile = document.querySelector('.btn-userProfile');
-const btnLogout = document.querySelector('.btn-logout');
-function loginControl() {
-  btnLoginPage.style.display = 'none';
-  btnLogout.style.display = 'block';
-  btnUserProfile.style.display = 'block';
-}
-
-loginControl();
-
-let lan = localStorage.getItem('lan');
-
-$('.dropdown-toggle').click(() => {
-  lan = localStorage.getItem('lan');
-  checkLan();
-});
-
-checkLan();
-
-function checkLan() {
-  if(lan == 'en') {
-    $('.btn-makev').css('display', 'none');
-    $('.btn-makelong').css('display', 'none');
-  } else {
-    $('.btn-makev').css('display', 'block');
-    $('.btn-makelong').css('display', 'block');
-  }
-}
-
-function getAvatar() {
-  let jwt_token = get_jwt_token();
-  if(jwt_token == undefined) {
-    window.location.replace("login.html");
-  }
-  axios({
-    method: 'post',
-    url: 'https://www.choozmo.com:8887/get_avatar_by_role',
-    headers: { 
-        'accept': 'text/html',
-        'Authorization': `Bearer ${jwt_token}`
-     }
-  }).then(res => {
-    console.log(res.data);
-    let result = [...res.data];
-    let str = '';
-    let carStr = '';
-    for(let i = 0; i < result.length; i++) {
-      str += `<option value="${result[i].num}">${result[i].name}</option>`
-    }
-    for(let i = 0; i < result.length; i++) {
-      carStr += `<div class="card item col" data-avatar="${result[i].name}" data-img="${result[i].name.toLowerCase()}">
-                    <div class="imgfr"><img src="static/img/${result[i].name.toLowerCase()}.webp" class="card-img-top" alt="..."></div>
-                    <div class="card-body">
-                        <h5 class="card-title">${result[i].name.toLowerCase()}</h5>
-                    </div>
-                </div>`;
-    }
-    $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>${str}`);
-    $('.owl-carousel').html(carStr);
-   // card = document.getElementsByClassName('card');
-    console.log(card);
-    addCardListener(card);
-  }).catch(err => {
-    console.log(err);
-  });
-}
-
-//getAvatar();
-
-const card = document.getElementsByClassName('card');
-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");
-
-
-avatarSelector.addEventListener('change', avatarChange);
-avatarChange();
-
-function addCardListener() {
-  for (let i = 0; i < card.length; i++) {
-    card[i].addEventListener('click', openavatarModel);
-  }
-}
-
-addCardListener();
-function avatarChange() {
-  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
-  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
-  for (let i = 0; i < card.length; i++) {
-    card[i].classList.remove('active');
-    if (card[i].dataset.avatar == value) {
-      card[i].classList.add('active');
-    }
-  }
-}
-
-function openavatarModel() {
-  console.log(this.dataset.img);
-  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
-  modalTitle.textContent = `${this.dataset.avatar}`;
-  avatarModal.show();
-}
-
-
-$('input[type=file]').on('change', prepareUpload);
-$('.upload-btn').change(prepareUpload);
-function prepareUpload(event) {
-  files = event.target.files;
-  $(this).prev().val('');
-  var data = new FormData();
-  //data.append('file', $('.img_up1').prop('files')[0]);
-  data.append('file', files[0]);
-  // append other variables to data if you want: data.append('field_name_x', field_value_x);
-  $(this).next().text('');
-  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
-  $.ajax({
-    type: 'POST',
-    processData: false, // important
-    contentType: false, // important
-    data: data,
-    url: 'https://www.choozmo.com:8887/uploadfile',
-    dataType: 'json',
-    success: function (jsonData) {
-      event.target.previousSibling.value = jsonData.msg;
-      console.log(jsonData.msg);
-      $(this).prev().val(jsonData.msg);
-      if(jsonData.msg.zh) {
-        $(this).prev().val(jsonData.msg.zh);
-        event.target.previousSibling.value = jsonData.msg.zh;
-      }
-      event.target.nextSibling.innerHTML = '';
-      event.target.nextSibling.textContent = '上傳檔案';
-      //console.log($(this).next());
-      //$(this).next().html('上傳檔案');
-      //$(this).next().text('上傳檔案');
-    },
-    error: function (error) {
-      event.target.nextSibling.innerHTML = '';
-      event.target.nextSibling.textContent = '上傳檔案';
-      alert('圖片錯誤');
-    }
-  });
-}
-const button = document.querySelector('.next');
-
-$(".next").click(function () {
-  button.setAttribute('disabled', '');
-  setTimeout(function () {
-    button.removeAttribute('disabled')
-  }, 10000);
-  avatar = $('.avatar').val();
-  name_title = $('.title_new').val();
-  txtARR = [];
-  imgARR = [];
-  var step;
-  let contentIdx = document.querySelectorAll(".txtsrc").length;
-  for (let i = 1; i < (contentIdx + 1); i++) {
-    if ($(`.txtsrc${i}`).val() != "") {
-      txtARR.push($(`.txtsrc${i}`).val())
-    }
-  }
-  let imgIdx = document.querySelectorAll(".imgsrc").length;
-  for (let i = 1; i < (imgIdx + 1); i++) {
-    if ($(`.imgsrc${i}`).val() != "") {
-      imgARR.push($(`.imgsrc${i}`).val())
-    }
-  }
-  multiLang = 0;
-  if ($('#multiLang').prop("checked")) {multiLang = 1;}
-  dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
-  objstr = JSON.stringify(dataOBJ);
-  console.log(dataOBJ)
-  jwt_token =  get_jwt_token()
-  var xhr = new XMLHttpRequest();
-  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video");
-  xhr.setRequestHeader("accept", "application/json");
-  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
-  xhr.setRequestHeader("Content-Type", "application/json");
-  xhr.onreadystatechange = function () {
-    if (xhr.readyState === 4) {
-      responseOBJ = JSON.parse(xhr.responseText)
-      console.log(responseOBJ.msg);
-        //let title = "資料已送出";
-        let text;
-        if(lan == 'en') {
-          //title = 'Submitted Successfully!';
-          text = responseOBJ.msg.eng;
-        } else {
-          text = responseOBJ.msg.zh;
-        }
-        Swal.fire({
-         // title: title,
-          icon: 'info',
-          text: text,
-          confirmButtonColor: '#3085d6',
-        });
-      
-    }
-  };
-  var data = renderXHR_data(dataOBJ)
-  console.log(data)
-  result = xhr.send(objstr);
-});
-
-$(".gen_avatar").click(function () {
-  dataOBJ = { "imgurl": $('.img_src').val() }
-  objstr = JSON.stringify(dataOBJ);
-  console.log(dataOBJ)
-  //alert('資料已送出! 請耐心等候')
-  $.ajax({
-    url: 'https://www.choozmo.com:8887/swapFace',
-    dataType: 'json', // 預期從server接收的資料型態
-    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
-    type: 'post',
-    data: objstr,
-    success: function (suc_data) {
-      alert(suc_data.msg)
-    },
-    //data:JSON.stringify({n1:"12",n2:"22"}),
-    error: function (error) {
-      console.error(error)
-    }
-  });
-});
-
-var loaded_data = ''
-function openNav() {
-  document.getElementById("mySidenav").style.width = "250px";
-  document.querySelector('.loader').style.display = "block";
-  let jwt_token = get_jwt_token();
-  axios({
-    method: 'post',
-    url: 'https://www.choozmo.com:8887/history_input',
-    headers: { 
-        'accept': 'application/json',
-        'Authorization': `Bearer ${jwt_token}`
-     }
-  }).then(res => {
-    console.log(res.data);
-    loaded_data = res.data;
-    var historyList = document.querySelector('.historyList');
-    historyList.innerHTML = '';
-    for (var obj of loaded_data) {
-      var list = document.createElement('li');
-      list.id = obj.id;
-      // div-imgfr
-      var divImgfr = document.createElement('div');
-      divImgfr.classList.add('item_imgfr');
-      var img = document.createElement('img');
-      img.setAttribute('src', obj['image_urls'][0]);
-      divImgfr.appendChild(img);
-      // div-content
-      var contentBox = document.createElement('div');
-      contentBox.classList.add('content-box');
-      var boxTitle = document.createElement('p');
-      boxTitle.classList.add('box-title');
-      boxTitle.textContent = obj.name;
-      boxTitle.id = obj.id;
-      console.log(loaded_data);
-      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
-
-      var boxLink = document.createElement('span');
-      boxLink.classList.add('box-link');
-      boxLink.setAttribute("data-url", obj.link);
-      boxLink.setAttribute('onclick', 'view()');
-      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
-      contentBox.appendChild(boxTitle);
-      contentBox.appendChild(boxLink);
-      list.classList.add("historyList-item");
-      list.setAttribute('onclick', `direct(${obj.id})`);
-      list.appendChild(divImgfr);
-      list.appendChild(contentBox);
-      historyList.appendChild(list);
-    }
-    document.querySelector('.loader').style.display = "none";
-  
-  }).catch(err => {
-    console.log(err);
-  });
-}
-function closeNav() {
-  document.getElementById("mySidenav").style.width = "250px";
-}
-
-function view() {
-  event.stopPropagation();
-  console.log(event.target);
-  if (event.target.nodeName === 'I') {
-    return;
-  } else {
-    window.open(`http://${event.target.dataset.url}`, '_blank');
-  }
-}
-
-function renderXHR_data(jsonObj) {
-  XHRstring = ''
-  for (const [key, value] of Object.entries(jsonObj)) {
-    console.log(value)
-    if (typeof (value) == "object") {
-      XHRstring += (key+'=['+value.join(',')+']&')
-    }
-    else {
-      XHRstring += (key + '=' + value + '&')
-    }
-  }
-  XHRstring = XHRstring.substring(0, XHRstring.length - 1);
-  return XHRstring
-}
-
-function get_jwt_token(){
-  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
-  if(!jwt_raw) {return}
-  return jwt_raw.split('=')[1];
-}
-
-function direct(id) {
-  location.href = `make_video2.html?id=${id}`;
-}
-
-
-function load_data(tid, loaded_data, draft = false) {
-  if(!tid) {
-    return;
-  }
-  var title = document.getElementById("title");
-  var linker = document.getElementById("linker");
-  myModal.hide();
-  if(!draft) {
-    linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
-    linker.setAttribute('target', '_blank')
-    $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
-    $("#linker").show();
-    $(".linker__box").show();
-  }
-  console.log(loaded_data);
-  let historyItem = loaded_data.filter(item => item.id == tid)[0];
-  console.log(historyItem.title);
-  if(draft) {
-    $(".title_new").val(historyItem.title);
-    $("#avatar").val(historyItem.avatar);
-  } else {
-    $(".title_new").val(loaded_data.find(item => item.id == tid).name);
-    $("#avatar").val(historyItem.avatar);
-  }
-
-  let txtlength = historyItem.text_content.length;
-  let imglength = historyItem.image_urls.length;
-
-  subtitleInputs.innerHTML = '';
-  imgInputs.innerHTML = '';
-  for (let i = 0; i < txtlength; i++) {
-    var txtinput = document.createElement("input");
-    txtinput.setAttribute('type', 'text');
-    txtinput.setAttribute('name', `t${i + 1}`);
-    txtinput.value = historyItem.text_content[i];
-    txtinput.setAttribute('placeholder', `${i + 1}`);
-    txtinput.classList.add('txtsrc', `txtsrc${i + 1}`)
-    subtitleInputs.appendChild(txtinput);
-  }
-  for (let i = 0; i < imglength; i++) {
-    var imginput = document.createElement("input");
-    imginput.setAttribute('type', 'text');
-    imginput.setAttribute('name', `m${i + 1}`);
-    imginput.classList.add('imgsrc', `imgsrc${i + 1}`);
-    imginput.value = historyItem.image_urls[i];
-    imginput.setAttribute('placeholder', `${i + 1}`);
-    imgInputs.appendChild(imginput);
-
-    var imgupload = document.createElement("input");
-    imgupload.setAttribute('id', `img${i + 1}`);
-    imgupload.setAttribute('type', `file`);
-    imgupload.classList.add('img_uploader', 'img_up');
-    imgInputs.appendChild(imgupload);
-    var imguploadlabel = document.createElement("label");
-    imguploadlabel.setAttribute('for', `img${i + 1}`);
-    imguploadlabel.classList.add('upload-btn');
-    imguploadlabel.textContent = '上傳檔案';
-    if(lan == 'en') {
-      imguploadlabel.textContent = 'Upload';
-    }
-    imguploadlabel.setAttribute('set-lan', `html:upload_file`);
-    $('input[type=file]').on('change', prepareUpload);
-    imgInputs.appendChild(imguploadlabel);
-  }
-   setTimeout(() => {
-    JsLoadingOverlay.hide();
-  }, 0);
-}
-
-getpathId();
-
-function getMode() {
-  let id = window.location.search.split('?').pop();
-  let mode = id.split('=')[0];
-  if(mode == 'draftid') {
-    /* JsLoadingOverlay.show({
-      "overlayBackgroundColor": "#FFFFFF",
-      "overlayOpacity": "0.9",
-      "spinnerIcon": "ball-circus",
-      "spinnerColor": "#B9DDF3",
-      "spinnerSize": "2x",
-      "overlayIDName": "overlay",
-      "spinnerIDName": "spinner",
-      "offsetX": 0,
-      "offsetY": 0,
-      "containerID": null,
-      "lockScroll": false,
-      "overlayZIndex": 9998,
-      "spinnerZIndex": 9999
-    }); */
-    getDraftData();
-  } else if(mode == 'id') {
-    /* JsLoadingOverlay.show({
-      "overlayBackgroundColor": "#FFFFFF",
-      "overlayOpacity": "0.9",
-      "spinnerIcon": "ball-circus",
-      "spinnerColor": "#B9DDF3",
-      "spinnerSize": "2x",
-      "overlayIDName": "overlay",
-      "spinnerIDName": "spinner",
-      "offsetX": 0,
-      "offsetY": 0,
-      "containerID": null,
-      "lockScroll": false,
-      "overlayZIndex": 9998,
-      "spinnerZIndex": 9999
-    }); */
-    getData();
-  }
-  return id.split('=')[1];
-  //load_data(id);
-}
-
-getMode();
-
-function getpathId(){
-  let id = window.location.search.split('?').pop();
-  return id.split('=')[1];
-}
-
-function getData() {
-  let jwt_token = get_jwt_token();
-  axios({
-    method: 'post',
-    url: 'https://www.choozmo.com:8887/history_input',
-    headers: { 
-        'accept': 'application/json',
-        'Authorization': `Bearer ${jwt_token}`
-     }
-  }).then(res => {
-    loaded_data = res.data;
-    console.log(loaded_data);
-    const id = getpathId();
-    load_data(id, loaded_data);
-  }).catch(err => {
-    console.log(err);
-  });
-} 
-
-var subtitleInputs = document.querySelector(".subtitle-inputs");
-var imgInputs = document.querySelector(".img-inputs");
-let length = 5;
-function initial() {
-  for (let i = 0; i < length; i++) {
-    rendertxtBlock(i + 1);
-    renderimgBlock(i + 1);
-  }
-  console.log(document.querySelectorAll(".txtsrc").length + 1);
-}
-
-initial();
-
-var addbtn = document.querySelector(".add");
-var addimgbtn = document.querySelector(".addimg");
-
-addbtn.addEventListener('click', addtxtBlock);
-addimgbtn.addEventListener('click', addimgBlock);
-
-function addtxtBlock() {
-  let newIdx = document.querySelectorAll(".txtsrc").length + 1;
-  rendertxtBlock(newIdx);
-}
-
-function addimgBlock() {
-  let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
-  renderimgBlock(newimgIdx);
-}
-
-function rendertxtBlock(i) {
-  var txtinput = document.createElement("input");
-  txtinput.setAttribute('type', 'text');
-  txtinput.setAttribute('name', `t${i}`);
-  txtinput.value = "";
-  txtinput.setAttribute('placeholder', `${i}`);
-  txtinput.classList.add('txtsrc', `txtsrc${i}`)
-  subtitleInputs.appendChild(txtinput);
-}
-
-function renderimgBlock(i) {
-  var imginput = document.createElement("input");
-  imginput.setAttribute('type', 'text');
-  imginput.setAttribute('name', `m${i}`);
-  imginput.classList.add('imgsrc', `imgsrc${i}`);
-  imginput.value = "";
-  imginput.setAttribute('placeholder', `${i}`);
-  imgInputs.appendChild(imginput);
-
-  var imgupload = document.createElement("input");
-  imgupload.setAttribute('id', `img${i}`);
-  imgupload.setAttribute('type', `file`);
-  imgupload.classList.add('img_uploader', 'img_up');
-  imgInputs.appendChild(imgupload);
-  var imguploadlabel = document.createElement("label");
-  imguploadlabel.setAttribute('for', `img${i}`);
-  imguploadlabel.classList.add('upload-btn');
-  imguploadlabel.textContent = '上傳檔案';
-  if(lan == 'en') {
-    imguploadlabel.textContent = 'Upload';
-  }
-  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
-  imgInputs.appendChild(imguploadlabel);
-  $('input[type=file]').on('change', prepareUpload);
-}
-
-
-$('.owl-carousel').owlCarousel({
-  loop: true,
-  margin: 10,
-  nav: false,
-  mouseDrag: true,
-  touchDrag: true,
-  smartSpeed: 1000,
-  autoplay: true,
-  autoplayTimeout: 8000,
-  autoplayHoverPause: false,
-  responsive: {
-    0: {
-      items: 1
-    },
-    600: {
-      items: 2
-    },
-    1000: {
-      items: 4
-    }
-  }
-});
-
-$('.draft-btn').click(() => {
-  let text = '儲存中...';
-
-  if (lan == 'en') {
-    text = 'Saving...';
-  }
-
-  $('.draft-btn').text(text);
-
-  let jwt_token = get_jwt_token();
-  let avatar = $('.avatar').val();
-  let name_title = $('.title_new').val();
-  let txtARR = [];
-  let imgARR = [];
-  var step;
-  let contentIdx = document.querySelectorAll(".txtsrc").length;
-  for (let i = 1; i < (contentIdx + 1); i++) {
-    if ($(`.txtsrc${i}`).val() != "") {
-      txtARR.push($(`.txtsrc${i}`).val())
-    }
-  }
-  let imgIdx = document.querySelectorAll(".imgsrc").length;
-  for (let i = 1; i < (imgIdx + 1); i++) {
-    if ($(`.imgsrc${i}`).val() != "") {
-      imgARR.push($(`.imgsrc${i}`).val())
-    }
-  }
-  let multiLang = 0
-  if ($('#multiLang').prop("checked")) {multiLang = 1;}
-  let id = window.location.search.split('?').pop();
-  let mode = id.split('=')[0];
-  if(mode == 'draftid') {
-    id = Number(id.split('=')[1]);
-  } else {
-    id = -1;
-  }
-  let dataOBJ = { "id": id, "title": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang }
-  console.log(dataOBJ);
-  axios({
-    method: 'post',
-    url: 'https://www.choozmo.com:8887/save_draft',
-    headers: { 
-        'accept': 'application/json',
-        'Authorization': `Bearer ${jwt_token}`,
-        'Content-Type': 'application/json',
-     },
-    data: dataOBJ
-  }).then(res => {
-    console.log(res.data);
-    $('.draft-btn').text('存為草稿');
-    let title = "儲存完成";
-    if(lan == 'en') {
-      title = 'Saved!'
-      $('.draft-btn').text('Save as Draft');
-    }
-    Swal.fire({
-      title: title,
-      icon: 'success',
-      confirmButtonColor: '#3085d6',
-    }); 
-  }).catch(err => {
-    console.log(err);
-  });
-});
-
-function getDraftData() {
-  let token = get_jwt_token();
-  axios({
-    method: 'post',
-    url: 'https://www.choozmo.com:8887/draft_list',
-    headers: { 
-        'accept': 'application/json',
-        'Authorization': `Bearer ${token}`
-     }
-  }).then(res => {
-    console.log(res.data);
-    let result = [...res.data];
-    let id = getpathId();
-    load_data(id, result, true);
-  }).catch(err => {
-    console.log(err);
-  });
-
-}
-
-$(".copy").click(function(){
-  const copyStr = $(this).next().text();
-  copyToClipboard(copyStr);
-});
-
-const copyToClipboard = str => {
-  const el = document.createElement('textarea');
-  el.value = str;
-  el.setAttribute('readonly', '');
-  el.style.position = 'absolute';
-  el.style.left = '-9999px';
-  document.body.appendChild(el);
-  el.select();
-  document.execCommand('copy');
-  document.body.removeChild(el);
-  Swal.fire({
-    toast: true,
-    icon: 'success',
-    position: 'top-end',
-    title: 'Link copied!',
-    timerProgressBar: true,
-    showConfirmButton: false,
-    timer: 1000,
-    backdrop: false
-  })
-};
-
-$("#lang-manu").hide();
-
-$( "#changeLanguage" ).click(function() {
-  $("#lang-manu").slideToggle();
-  $("#lang-arrow").toggleClass("arrowdoup");
+//checkRoute();
+
+let userBasics = JSON.parse(localStorage.getItem('user_profile')) || [];
+
+
+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>`);
+} 
+
+
+function checkRoute() {
+  let jwt_token = get_jwt_token();
+  /* if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  } */
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    if(res.status !== 200) {
+      window.location.replace("login.html");
+    }
+    var userName='';
+    userName+=`<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${res.data.user_info.userName}</h2>`;
+    $('.userName').html(userName);
+  }).catch(err => {
+    console.log(err);
+    window.location.replace("login.html");
+  }); 
+}
+
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+function loginControl() {
+  btnLoginPage.style.display = 'none';
+  btnLogout.style.display = 'block';
+  btnUserProfile.style.display = 'block';
+}
+
+loginControl();
+
+let lan = localStorage.getItem('lan');
+
+$('.dropdown-toggle').click(() => {
+  lan = localStorage.getItem('lan');
+  checkLan();
+});
+
+checkLan();
+
+function checkLan() {
+  if(lan == 'en') {
+    $('.btn-makev').css('display', 'none');
+    $('.btn-makelong').css('display', 'none');
+  } else {
+    $('.btn-makev').css('display', 'block');
+    $('.btn-makelong').css('display', 'block');
+  }
+}
+
+function getAvatar() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/get_avatar_by_role',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let str = '';
+    let carStr = '';
+    for(let i = 0; i < result.length; i++) {
+      str += `<option value="${result[i].num}">${result[i].name}</option>`
+    }
+    for(let i = 0; i < result.length; i++) {
+      carStr += `<div class="card item col" data-avatar="${result[i].name}" data-img="${result[i].name.toLowerCase()}">
+                    <div class="imgfr"><img src="static/img/${result[i].name.toLowerCase()}.webp" class="card-img-top" alt="..."></div>
+                    <div class="card-body">
+                        <h5 class="card-title">${result[i].name.toLowerCase()}</h5>
+                    </div>
+                </div>`;
+    }
+    $('#avatar').html(`<option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>${str}`);
+    $('.owl-carousel').html(carStr);
+   // card = document.getElementsByClassName('card');
+    console.log(card);
+    addCardListener(card);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+//getAvatar();
+
+const card = document.getElementsByClassName('card');
+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");
+
+
+avatarSelector.addEventListener('change', avatarChange);
+avatarChange();
+
+function addCardListener() {
+  for (let i = 0; i < card.length; i++) {
+    card[i].addEventListener('click', openavatarModel);
+  }
+}
+
+addCardListener();
+function avatarChange() {
+  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
+  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
+  for (let i = 0; i < card.length; i++) {
+    card[i].classList.remove('active');
+    if (card[i].dataset.avatar == value) {
+      card[i].classList.add('active');
+    }
+  }
+}
+
+function openavatarModel() {
+  console.log(this.dataset.img);
+  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
+  modalTitle.textContent = `${this.dataset.avatar}`;
+  avatarModal.show();
+}
+
+
+$('input[type=file]').on('change', prepareUpload);
+$('.upload-btn').change(prepareUpload);
+function prepareUpload(event) {
+  files = event.target.files;
+  $(this).prev().val('');
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'https://www.choozmo.com:8887/uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value = jsonData.msg;
+      console.log(jsonData.msg);
+      $(this).prev().val(jsonData.msg);
+      if(jsonData.msg.zh) {
+        $(this).prev().val(jsonData.msg.zh);
+        event.target.previousSibling.value = jsonData.msg.zh;
+      }
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      //console.log($(this).next());
+      //$(this).next().html('上傳檔案');
+      //$(this).next().text('上傳檔案');
+    },
+    error: function (error) {
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      alert('圖片錯誤');
+    }
+  });
+}
+const button = document.querySelector('.next');
+
+$(".next").click(function () {
+  button.setAttribute('disabled', '');
+  setTimeout(function () {
+    button.removeAttribute('disabled')
+  }, 10000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  txtARR = [];
+  imgARR = [];
+  var step;
+  let contentIdx = document.querySelectorAll(".txtsrc").length;
+  for (let i = 1; i < (contentIdx + 1); i++) {
+    if ($(`.txtsrc${i}`).val() != "") {
+      txtARR.push($(`.txtsrc${i}`).val())
+    }
+  }
+  let imgIdx = document.querySelectorAll(".imgsrc").length;
+  for (let i = 1; i < (imgIdx + 1); i++) {
+    if ($(`.imgsrc${i}`).val() != "") {
+      imgARR.push($(`.imgsrc${i}`).val())
+    }
+  }
+  multiLang = 0;
+  if ($('#multiLang').prop("checked")) {multiLang = 1;}
+  dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  jwt_token =  get_jwt_token()
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video");
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
+  xhr.setRequestHeader("Content-Type", "application/json");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      responseOBJ = JSON.parse(xhr.responseText)
+      console.log(responseOBJ.msg);
+        //let title = "資料已送出";
+        let text;
+        if(lan == 'en') {
+          //title = 'Submitted Successfully!';
+          text = responseOBJ.msg.eng;
+        } else {
+          text = responseOBJ.msg.zh;
+        }
+        Swal.fire({
+         // title: title,
+          icon: 'info',
+          text: text,
+          confirmButtonColor: '#3085d6',
+        });
+      
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  console.log(data)
+  result = xhr.send(objstr);
+});
+
+$(".gen_avatar").click(function () {
+  dataOBJ = { "imgurl": $('.img_src').val() }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  //alert('資料已送出! 請耐心等候')
+  $.ajax({
+    url: 'https://www.choozmo.com:8887/swapFace',
+    dataType: 'json', // 預期從server接收的資料型態
+    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
+    type: 'post',
+    data: objstr,
+    success: function (suc_data) {
+      alert(suc_data.msg)
+    },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
+});
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    var historyList = document.querySelector('.historyList');
+    historyList.innerHTML = '';
+    for (var obj of loaded_data) {
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      console.log(loaded_data);
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function view() {
+  event.stopPropagation();
+  console.log(event.target);
+  if (event.target.nodeName === 'I') {
+    return;
+  } else {
+    window.open(`http://${event.target.dataset.url}`, '_blank');
+  }
+}
+
+function renderXHR_data(jsonObj) {
+  XHRstring = ''
+  for (const [key, value] of Object.entries(jsonObj)) {
+    console.log(value)
+    if (typeof (value) == "object") {
+      XHRstring += (key+'=['+value.join(',')+']&')
+    }
+    else {
+      XHRstring += (key + '=' + value + '&')
+    }
+  }
+  XHRstring = XHRstring.substring(0, XHRstring.length - 1);
+  return XHRstring
+}
+
+function get_jwt_token(){
+  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+  if(!jwt_raw) {return}
+  return jwt_raw.split('=')[1];
+}
+
+function direct(id) {
+  location.href = `make_video2.html?id=${id}`;
+}
+
+
+function load_data(tid, loaded_data, draft = false) {
+  if(!tid) {
+    return;
+  }
+  var title = document.getElementById("title");
+  var linker = document.getElementById("linker");
+  myModal.hide();
+  if(!draft) {
+    linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
+    linker.setAttribute('target', '_blank')
+    $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
+    $("#linker").show();
+    $(".linker__box").show();
+  }
+  console.log(loaded_data);
+  let historyItem = loaded_data.filter(item => item.id == tid)[0];
+  console.log(historyItem.title);
+  if(draft) {
+    $(".title_new").val(historyItem.title);
+    $("#avatar").val(historyItem.avatar);
+  } else {
+    $(".title_new").val(loaded_data.find(item => item.id == tid).name);
+    $("#avatar").val(historyItem.avatar);
+  }
+
+  let txtlength = historyItem.text_content.length;
+  let imglength = historyItem.image_urls.length;
+
+  subtitleInputs.innerHTML = '';
+  imgInputs.innerHTML = '';
+  for (let i = 0; i < txtlength; i++) {
+    var txtinput = document.createElement("input");
+    txtinput.setAttribute('type', 'text');
+    txtinput.setAttribute('name', `t${i + 1}`);
+    txtinput.value = historyItem.text_content[i];
+    txtinput.setAttribute('placeholder', `${i + 1}`);
+    txtinput.classList.add('txtsrc', `txtsrc${i + 1}`)
+    subtitleInputs.appendChild(txtinput);
+  }
+  for (let i = 0; i < imglength; i++) {
+    var imginput = document.createElement("input");
+    imginput.setAttribute('type', 'text');
+    imginput.setAttribute('name', `m${i + 1}`);
+    imginput.classList.add('imgsrc', `imgsrc${i + 1}`);
+    imginput.value = historyItem.image_urls[i];
+    imginput.setAttribute('placeholder', `${i + 1}`);
+    imgInputs.appendChild(imginput);
+
+    var imgupload = document.createElement("input");
+    imgupload.setAttribute('id', `img${i + 1}`);
+    imgupload.setAttribute('type', `file`);
+    imgupload.classList.add('img_uploader', 'img_up');
+    imgInputs.appendChild(imgupload);
+    var imguploadlabel = document.createElement("label");
+    imguploadlabel.setAttribute('for', `img${i + 1}`);
+    imguploadlabel.classList.add('upload-btn');
+    imguploadlabel.textContent = '上傳檔案';
+    if(lan == 'en') {
+      imguploadlabel.textContent = 'Upload';
+    }
+    imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+    $('input[type=file]').on('change', prepareUpload);
+    imgInputs.appendChild(imguploadlabel);
+  }
+   setTimeout(() => {
+    JsLoadingOverlay.hide();
+  }, 0);
+}
+
+getpathId();
+
+function getMode() {
+  let id = window.location.search.split('?').pop();
+  let mode = id.split('=')[0];
+  if(mode == 'draftid') {
+    /* JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#FFFFFF",
+      "overlayOpacity": "0.9",
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#B9DDF3",
+      "spinnerSize": "2x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 9998,
+      "spinnerZIndex": 9999
+    }); */
+    getDraftData();
+  } else if(mode == 'id') {
+    /* JsLoadingOverlay.show({
+      "overlayBackgroundColor": "#FFFFFF",
+      "overlayOpacity": "0.9",
+      "spinnerIcon": "ball-circus",
+      "spinnerColor": "#B9DDF3",
+      "spinnerSize": "2x",
+      "overlayIDName": "overlay",
+      "spinnerIDName": "spinner",
+      "offsetX": 0,
+      "offsetY": 0,
+      "containerID": null,
+      "lockScroll": false,
+      "overlayZIndex": 9998,
+      "spinnerZIndex": 9999
+    }); */
+    getData();
+  }
+  return id.split('=')[1];
+  //load_data(id);
+}
+
+getMode();
+
+function getpathId(){
+  let id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+}
+
+function getData() {
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    loaded_data = res.data;
+    console.log(loaded_data);
+    const id = getpathId();
+    load_data(id, loaded_data);
+  }).catch(err => {
+    console.log(err);
+  });
+} 
+
+var subtitleInputs = document.querySelector(".subtitle-inputs");
+var imgInputs = document.querySelector(".img-inputs");
+let length = 5;
+function initial() {
+  for (let i = 0; i < length; i++) {
+    rendertxtBlock(i + 1);
+    renderimgBlock(i + 1);
+  }
+  console.log(document.querySelectorAll(".txtsrc").length + 1);
+}
+
+initial();
+
+var addbtn = document.querySelector(".add");
+var addimgbtn = document.querySelector(".addimg");
+
+addbtn.addEventListener('click', addtxtBlock);
+addimgbtn.addEventListener('click', addimgBlock);
+
+function addtxtBlock() {
+  let newIdx = document.querySelectorAll(".txtsrc").length + 1;
+  rendertxtBlock(newIdx);
+}
+
+function addimgBlock() {
+  let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
+  renderimgBlock(newimgIdx);
+}
+
+function rendertxtBlock(i) {
+  var txtinput = document.createElement("input");
+  txtinput.setAttribute('type', 'text');
+  txtinput.setAttribute('name', `t${i}`);
+  txtinput.value = "";
+  txtinput.setAttribute('placeholder', `${i}`);
+  txtinput.classList.add('txtsrc', `txtsrc${i}`)
+  subtitleInputs.appendChild(txtinput);
+}
+
+function renderimgBlock(i) {
+  var imginput = document.createElement("input");
+  imginput.setAttribute('type', 'text');
+  imginput.setAttribute('name', `m${i}`);
+  imginput.classList.add('imgsrc', `imgsrc${i}`);
+  imginput.value = "";
+  imginput.setAttribute('placeholder', `${i}`);
+  imgInputs.appendChild(imginput);
+
+  var imgupload = document.createElement("input");
+  imgupload.setAttribute('id', `img${i}`);
+  imgupload.setAttribute('type', `file`);
+  imgupload.classList.add('img_uploader', 'img_up');
+  imgInputs.appendChild(imgupload);
+  var imguploadlabel = document.createElement("label");
+  imguploadlabel.setAttribute('for', `img${i}`);
+  imguploadlabel.classList.add('upload-btn');
+  imguploadlabel.textContent = '上傳檔案';
+  if(lan == 'en') {
+    imguploadlabel.textContent = 'Upload';
+  }
+  imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+  imgInputs.appendChild(imguploadlabel);
+  $('input[type=file]').on('change', prepareUpload);
+}
+
+
+$('.owl-carousel').owlCarousel({
+  loop: true,
+  margin: 10,
+  nav: false,
+  mouseDrag: true,
+  touchDrag: true,
+  smartSpeed: 1000,
+  autoplay: true,
+  autoplayTimeout: 8000,
+  autoplayHoverPause: false,
+  responsive: {
+    0: {
+      items: 1
+    },
+    600: {
+      items: 2
+    },
+    1000: {
+      items: 4
+    }
+  }
+});
+
+$('.draft-btn').click(() => {
+  let text = '儲存中...';
+
+  if (lan == 'en') {
+    text = 'Saving...';
+  }
+
+  $('.draft-btn').text(text);
+
+  let jwt_token = get_jwt_token();
+  let avatar = $('.avatar').val();
+  let name_title = $('.title_new').val();
+  let txtARR = [];
+  let imgARR = [];
+  var step;
+  let contentIdx = document.querySelectorAll(".txtsrc").length;
+  for (let i = 1; i < (contentIdx + 1); i++) {
+    if ($(`.txtsrc${i}`).val() != "") {
+      txtARR.push($(`.txtsrc${i}`).val())
+    }
+  }
+  let imgIdx = document.querySelectorAll(".imgsrc").length;
+  for (let i = 1; i < (imgIdx + 1); i++) {
+    if ($(`.imgsrc${i}`).val() != "") {
+      imgARR.push($(`.imgsrc${i}`).val())
+    }
+  }
+  let multiLang = 0
+  if ($('#multiLang').prop("checked")) {multiLang = 1;}
+  let id = window.location.search.split('?').pop();
+  let mode = id.split('=')[0];
+  if(mode == 'draftid') {
+    id = Number(id.split('=')[1]);
+  } else {
+    id = -1;
+  }
+  let dataOBJ = { "id": id, "title": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar,"multiLang":multiLang }
+  console.log(dataOBJ);
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/save_draft',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`,
+        'Content-Type': 'application/json',
+     },
+    data: dataOBJ
+  }).then(res => {
+    console.log(res.data);
+    $('.draft-btn').text('存為草稿');
+    let title = "儲存完成";
+    if(lan == 'en') {
+      title = 'Saved!'
+      $('.draft-btn').text('Save as Draft');
+    }
+    Swal.fire({
+      title: title,
+      icon: 'success',
+      confirmButtonColor: '#3085d6',
+    }); 
+  }).catch(err => {
+    console.log(err);
+  });
+});
+
+function getDraftData() {
+  let token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/draft_list',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    let result = [...res.data];
+    let id = getpathId();
+    load_data(id, result, true);
+  }).catch(err => {
+    console.log(err);
+  });
+
+}
+
+$(".copy").click(function(){
+  const copyStr = $(this).next().text();
+  copyToClipboard(copyStr);
+});
+
+const copyToClipboard = str => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+  Swal.fire({
+    toast: true,
+    icon: 'success',
+    position: 'top-end',
+    title: 'Link copied!',
+    timerProgressBar: true,
+    showConfirmButton: false,
+    timer: 1000,
+    backdrop: false
+  })
+};
+
+$("#lang-manu").hide();
+
+$( "#changeLanguage" ).click(function() {
+  $("#lang-manu").slideToggle();
+  $("#lang-arrow").toggleClass("arrowdoup");
 });

static/script_util.js → api/static/script_util.js

@@ -1,62 +1,62 @@
-const urlSearchParams = new URLSearchParams(window.location.search);
-const params = Object.fromEntries(urlSearchParams.entries());
-
-dataString = params['p']
-dataArr = dataString.split(',')
-name_hash = dataString.split(',')[0]
-dataArr.splice(0,1)
-
-var srcInput = document.querySelector(".msrcParent");
-for (step = 0; step < dataArr.length; step++) {
-  console.log(dataArr[step])
-  var pdiv = document.createElement('div');
-  pdiv.classList.add('subtitle-inputs')
-  
-
-  var rawSrc = document.createElement("input");
-  rawSrc.setAttribute('type', 'text');
-  rawSrc.value = dataArr[step];
-  rawSrc.style.width = "47%";
-
-  var mSrc = document.createElement("input");
-  mSrc.setAttribute('type', 'text');
-  mSrc.setAttribute('id', `s${step }`);
-  mSrc.style.width = "47%";
-  pdiv.appendChild(rawSrc)
-  pdiv.appendChild(mSrc)
-
-  srcInput.appendChild(pdiv)
-    
-}
-
-
-$(".confirmbtn" ).click(function() {
-  for (i = 0; i < dataArr.length; i++) {
-    if ($(`#s${i }`).val()!=''){
-      dataArr[i]=$(`#s${i }`).val();
-    }
-  }
-  sendString = dataArr.join(',');
-
-  var url = "http://www.choozmo.com:8889/updateScript";
-
-  var xhr = new XMLHttpRequest();
-  xhr.open("POST", url);
-  
-  xhr.setRequestHeader("accept", "application/json");
-  xhr.setRequestHeader("Content-Type", "application/json");
-  
-  xhr.onreadystatechange = function () {
-     if (xhr.readyState === 4) {
-        console.log(xhr.status);
-        console.log(xhr.responseText);
-        alert('請等待line通知');
-     }};
-  
-  var data = `{"name_hash":`+name_hash+ `,"scriptStr": `+sendString+`}`;
-  
-  xhr.send(data);
-  
-
-
+const urlSearchParams = new URLSearchParams(window.location.search);
+const params = Object.fromEntries(urlSearchParams.entries());
+
+dataString = params['p']
+dataArr = dataString.split(',')
+name_hash = dataString.split(',')[0]
+dataArr.splice(0,1)
+
+var srcInput = document.querySelector(".msrcParent");
+for (step = 0; step < dataArr.length; step++) {
+  console.log(dataArr[step])
+  var pdiv = document.createElement('div');
+  pdiv.classList.add('subtitle-inputs')
+  
+
+  var rawSrc = document.createElement("input");
+  rawSrc.setAttribute('type', 'text');
+  rawSrc.value = dataArr[step];
+  rawSrc.style.width = "47%";
+
+  var mSrc = document.createElement("input");
+  mSrc.setAttribute('type', 'text');
+  mSrc.setAttribute('id', `s${step }`);
+  mSrc.style.width = "47%";
+  pdiv.appendChild(rawSrc)
+  pdiv.appendChild(mSrc)
+
+  srcInput.appendChild(pdiv)
+    
+}
+
+
+$(".confirmbtn" ).click(function() {
+  for (i = 0; i < dataArr.length; i++) {
+    if ($(`#s${i }`).val()!=''){
+      dataArr[i]=$(`#s${i }`).val();
+    }
+  }
+  sendString = dataArr.join(',');
+
+  var url = "http://www.choozmo.com:8889/updateScript";
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", url);
+  
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Content-Type", "application/json");
+  
+  xhr.onreadystatechange = function () {
+     if (xhr.readyState === 4) {
+        console.log(xhr.status);
+        console.log(xhr.responseText);
+        alert('請等待line通知');
+     }};
+  
+  var data = `{"name_hash":`+name_hash+ `,"scriptStr": `+sendString+`}`;
+  
+  xhr.send(data);
+  
+
+
 });

static/scss/style.css → api/static/scss/style.css

@@ -1,1630 +1,1630 @@
-@charset "UTF-8";
-/*custom font*/
-@import url(https://fonts.googleapis.com/css?family=Montserrat);
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-/*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", sans-serif;
-  background-color: white;
-  font-size: 1.05rem;
-}
-
-.ml {
-  margin-left: 10px;
-}
-
-.mr {
-  margin-right: 10px;
-}
-
-.mb {
-  margin-bottom: 12px;
-}
-
-.top {
-  margin-top: 20px;
-  position: -webkit-sticky;
-  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: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: 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 {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  width: 80%;
-  margin: 0 10%;
-  margin-bottom: 1.5rem;
-  background: white;
-  border: 0 none;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
-          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: #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;
-  -webkit-transition: all 0.4s;
-  transition: all 0.4s;
-}
-
-.nav-list-item:hover::after {
-  opacity: 1;
-}
-
-.loader {
-  position: absolute;
-  top: 30%;
-  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;
-}
-.history-modal .modal-content{
-	height: 80vh;
-	
-}
-.history-modal .modal-conten .modal-terms {
-	height: 90%;
-	overflow: scroll;
-} */
-.history {
-  height: 75vh;
-  overflow: scroll;
-}
-
-.historyList-item {
-  padding: 1rem;
-  display: block;
-  width: 80%;
-  margin: 1rem auto;
-  border-radius: 10px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.9rem;
-  -webkit-box-shadow: 1px 1px 4px 1px #cfcfcf;
-          box-shadow: 1px 1px 4px 1px #cfcfcf;
-  background-color: white;
-}
-
-.historyList-link {
-  text-decoration: none;
-  color: #494949;
-}
-
-.historyList-link:hover {
-  color: #7c7c7c;
-}
-
-.listimg__fr {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  overflow: hidden;
-  margin: auto .5rem;
-}
-
-.listimg__fr img {
-  width: 100%;
-  height: 100%;
-}
-
-.content {
-  width: calc(100% - 250px);
-}
-
-/*form styles*/
-#msform {
-  max-width: 1000px;
-  min-width: 370px;
-  margin: 50px auto;
-  margin-bottom: 20px;
-  text-align: center;
-  position: relative;
-}
-
-#msform fieldset {
-  background: white;
-  border: 0 none;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
-          box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
-  padding: 20px 30px;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  width: 80%;
-  margin: 3rem 10%;
-  /*stacking fieldsets above each other*/
-  position: relative;
-}
-
-/*Hide all except first fieldset*/
-/*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%;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-family: montserrat;
-  color: #2c3e50;
-  font-size: 14px;
-}
-
-/*buttons*/
-#msform .action-button {
-  width: 100px;
-  background: #1c7ce0;
-  font-weight: bold;
-  color: white;
-  border: 0 none;
-  border-radius: 1px;
-  cursor: pointer;
-  padding: 10px 5px;
-  margin: 10px auto;
-  display: block;
-}
-
-#msform .action-button:hover,
-#msform .action-button:focus {
-  -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
-          box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
-}
-
-#msform .next[disabled] {
-  background-color: grey;
-}
-
-.draft-btn {
-  position: absolute;
-  left: 1rem;
-  bottom: 1rem;
-  cursor: pointer;
-}
-
-/*headings*/
-.fs-title {
-  font-size: 15px;
-  text-transform: uppercase;
-  color: #2c3e50;
-  margin-bottom: 10px;
-}
-
-.fs-subtitle {
-  display: inline-block;
-  font-weight: normal;
-  font-size: 18px;
-  color: #666;
-  margin-bottom: 20px;
-  padding-bottom: 3px;
-  border-bottom: 2px solid #1c7ce0;
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-.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, 0.7);
-  font-size: 0.8em;
-  margin-bottom: 0;
-}
-
-#term-error {
-  color: rgba(255, 0, 0, 0.7);
-  font-size: 0.8em;
-  bottom: -23px;
-  left: 24px;
-}
-
-select {
-  padding: 15px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  margin-bottom: 10px;
-  width: 100%;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-family: montserrat;
-  color: #2c3e50;
-  font-size: 13px;
-  background-color: transparent;
-}
-
-.pl-0 {
-  padding-left: 0;
-}
-
-.terms {
-  font-size: 0.9rem;
-  width: 95%;
-  min-width: 250px;
-  height: auto;
-  overflow: scroll;
-  margin-bottom: 1rem;
-  margin-left: auto;
-  margin-right: auto;
-  border: 1px solid #a3a3a3;
-  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;
-}
-
-#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: 0.5rem 0.75rem;
-  background-color: transparent;
-  border: 1px solid black;
-  margin-top: 0.3rem;
-}
-
-.btn-term-exit {
-  padding: 0.5rem 0.75rem;
-  background-color: transparent;
-  border: 1px solid black;
-  margin-top: 0.3rem;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 2rem;
-}
-
-footer {
-  padding: 2rem;
-  padding-top: 0.5rem;
-}
-
-.footer {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-
-.img_fr {
-  width: 80%;
-  max-width: 850px;
-  min-width: 300px;
-  height: 60px;
-  -o-object-fit: contain;
-     object-fit: contain;
-  -o-object-position: center;
-     object-position: center;
-}
-
-.img_fr img {
-  width: 100%;
-  height: 90%;
-}
-
-#msform #userid,
-#msform #area {
-  height: 0;
-  padding: 0;
-  margin: 0;
-  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: -0.5rem;
-  right: 1.5rem;
-}
-
-.linker__box {
-  padding: 0.5rem 1rem;
-  border-radius: 1rem;
-  -webkit-box-shadow: 1px 1px 5px 1px #c9c9c9;
-          box-shadow: 1px 1px 5px 1px #c9c9c9;
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  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 #a3a3a3;
-  width: 1px;
-  height: 120%;
-}
-
-.item_imgfr {
-  width: 15%;
-  height: 50px;
-  border-radius: 50%;
-  overflow: hidden;
-  margin: auto 0.5rem;
-}
-
-.item_imgfr img {
-  height: 100%;
-  width: 100%;
-}
-
-.content-box {
-  width: 75%;
-}
-
-.box-title {
-  margin-bottom: 0.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: 0.4rem 0.5rem;
-  font-size: 0.9rem;
-  border-radius: 3px;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  cursor: pointer;
-}
-
-.upload-btn img {
-  width: 30px;
-  height: 30px;
-}
-
-.upload-btn:hover {
-  background-color: #3b86d6;
-}
-
-.add,
-.add-subline,
-.addimg {
-  cursor: pointer;
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  background-color: #67abf3;
-  font-size: 1.2rem;
-  color: white;
-  border-radius: 50%;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
-
-.add:hover,
-.add-subline:hover,
-.addimg:hover {
-  background-color: #398ee9;
-}
-
-body {
-  font-family: "Lato", sans-serif;
-}
-
-.sidenav {
-  height: 100%;
-  width: 250px;
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051));
-  background: linear-gradient(to bottom, #1c7ce0, #150051);
-  overflow-x: hidden;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-}
-
-.sidenav a {
-  text-decoration: none;
-  font-size: 25px;
-  color: #818181;
-  display: block;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-
-.sidenav a:hover {
-  color: #f1f1f1;
-}
-
-.sidenav .closebtn {
-  position: absolute;
-  top: 0;
-  right: 25px;
-  font-size: 36px;
-  margin-left: 50px;
-}
-
-.container-login {
-  width: 100vw;
-  height: 100vh;
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: (1fr)[2];
-      grid-template-columns: repeat(2, 1fr);
-  grid-gap: 7rem;
-  padding: 0rem;
-}
-
-.navbar-nav button {
-  background: white;
-  border: none;
-  outline: none;
-}
-
-.img-wave {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  z-index: -1;
-}
-
-.img-wave-profile {
-  height: 80%;
-}
-
-.row-img {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(16, 68, 142, 0.7)), to(rgba(16, 68, 142, 0.7)));
-  background-image: linear-gradient(to right bottom, rgba(16, 68, 142, 0.7), rgba(16, 68, 142, 0.7));
-  background-size: cover;
-  background-position: center;
-  overflow: hidden;
-}
-
-.row-img .video {
-  height: 100%;
-  z-index: -1;
-  position: absolute;
-  left: -10%;
-  top: 0;
-}
-
-.row-img .row-img-box {
-  color: white;
-}
-
-.row-img .row-img-txt {
-  position: absolute;
-  bottom: 2rem;
-  color: white;
-  left: 2rem;
-  font-size: 1.3rem;
-}
-
-.row-login {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  text-align: center;
-  position: relative;
-}
-
-.row-login .title {
-  position: relative;
-  color: #052859;
-}
-
-.row-login .title::after {
-  position: absolute;
-  content: "";
-  left: 45%;
-  top: 20%;
-  width: 10%;
-  height: 100%;
-  border-bottom: 4px solid #052859;
-}
-
-.row-login .login-top {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-}
-
-.row-login .login-top .navbar-nav {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-
-.row-login .login-top .navbar-nav .nav-item {
-  margin: 0 0.5rem;
-}
-
-.row-login .login-top .navbar-nav .nav-item a {
-  color: black;
-}
-
-.login-content {
-  width: 80%;
-  min-width: 350px;
-  -webkit-box-shadow: 0 0 12px 5px #dddddd;
-          box-shadow: 0 0 12px 5px #dddddd;
-  padding: 1.5rem;
-  border-radius: 2rem;
-}
-
-.link_privacy {
-  color: black;
-}
-
-.login-content img {
-  height: 80px;
-}
-
-.row-img img {
-  width: 450px;
-}
-
-.login-content .form-floating input {
-  border: none;
-  border-bottom: 2px solid #d9d9d9;
-  border-radius: 0;
-}
-
-.login-content .form-floating input:focus {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-
-.login-content #btn_login {
-  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
-  background: linear-gradient(90deg, #0162c8, #55e7fc);
-  font-weight: bold;
-  color: white;
-  border: 0 none;
-  border-radius: 40px;
-  cursor: pointer;
-  padding: 10px 50px;
-  margin: 10px auto;
-  display: block;
-}
-
-.login-content #btn_login:hover {
-  -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
-          box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
-}
-
-.login-content .btn-register {
-  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
-  background: linear-gradient(90deg, #0162c8, #55e7fc);
-  font-weight: bold;
-  color: white;
-  border: 0 none;
-  border-radius: 40px;
-  cursor: pointer;
-  padding: 10px 50px;
-  margin: 10px auto;
-  display: block;
-}
-
-.login-content .btn-register:hover {
-  -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
-          box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
-}
-
-.login-content .nav-tabs {
-  border-bottom: none;
-}
-
-.login-content .nav {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.login-content .nav-tabs .nav-link {
-  color: grey;
-}
-
-.login-content .nav-tabs .nav-link.active {
-  border-color: #fff;
-  text-transform: uppercase;
-  color: black;
-}
-
-.navbar .btn-gocreate {
-  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
-  background: linear-gradient(90deg, #0162c8, #55e7fc);
-  color: white;
-  border: 0 none;
-  border-radius: 40px;
-  cursor: pointer;
-  padding: 10px 50px;
-}
-
-.container-bg {
-  position: absolute;
-  width: 600px;
-  height: 400px;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-}
-
-.container-profile .card-profile {
-  margin-top: 4rem;
-  border-radius: 10px;
-  padding: 2rem;
-  text-align: center;
-  -webkit-box-shadow: 0px 0px 20px 1px #b4b4b4;
-          box-shadow: 0px 0px 20px 1px #b4b4b4;
-}
-
-.container-profile .card-profile img {
-  width: 120px;
-  margin: 1rem auto;
-}
-
-.card-profile-txt {
-  color: #6d6d6d;
-  font-size: 1.2rem;
-  font-weight: 500;
-}
-
-.card-profile-cnt {
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-@media screen and (max-width: 900px) {
-  .container-login {
-    -ms-grid-columns: 1fr;
-        grid-template-columns: 1fr;
-  }
-  .row-img {
-    display: none;
-  }
-  .img-wave {
-    display: none;
-  }
-  .row-login {
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-  }
-  .container-bg {
-    width: 400px;
-    height: 300px;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-@media screen and (max-height: 450px) {
-  .sidenav {
-    padding-top: 15px;
-  }
-  .sidenav a {
-    font-size: 18px;
-  }
-}
-
-/* Pricing */
-.pricingTable {
-  background: #fff;
-  font-family: "Open Sans", sans-serif;
-  text-align: center;
-  padding: 30px 15px 15px;
-  border-radius: 25px;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-}
-
-.pricingTable:before,
-.pricingTable:after {
-  content: "";
-  background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
-  height: 170px;
-  width: 150%;
-  outline: 5px solid #fff;
-  outline-offset: -10px;
-  opacity: 0.9;
-  -webkit-transform: translateX(-50%) rotate(7deg);
-          transform: translateX(-50%) rotate(7deg);
-  position: absolute;
-  left: 50%;
-  top: -65px;
-  z-index: -1;
-}
-
-.pricingTable:after {
-  height: 250px;
-  -webkit-transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
-          transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
-  top: auto;
-  bottom: -150px;
-}
-
-.pricingTable .pricingTable-header {
-  color: #fff;
-  margin: 0 0 75px;
-}
-
-.pricingTable .title {
-  font-size: 40px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  margin: 0;
-}
-
-.pricingTable .pricing-content {
-  text-align: left;
-  padding: 0;
-  margin: 0 0 10px;
-  display: inline-block;
-}
-
-.pricingTable .pricing-content li {
-  color: #333;
-  font-size: 17px;
-  font-weight: 500;
-  line-height: 22px;
-  text-transform: uppercase;
-  padding: 0 40px 0 0;
-  margin: 0 0 15px;
-  list-style-position: inside;
-  position: relative;
-}
-
-.pricingTable .pricing-content li:after {
-  content: "\f00c";
-  color: #e58e26;
-  font-family: "Font Awesome 5 Free";
-  font-size: 18px;
-  font-weight: 900;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.pricingTable .pricing-content li.disable:after {
-  content: "\f00d";
-}
-
-.pricingTable .price-value {
-  margin: 0 0 15px;
-}
-
-.pricingTable .price-title {
-  color: #c70039;
-  font-size: 30px;
-  text-align: left;
-  text-transform: uppercase;
-  line-height: 30px;
-  width: calc(100% - 130px);
-  padding: 15px 0 0;
-  display: inline-block;
-}
-
-.pricingTable .price-title b {
-  display: block;
-}
-
-.pricingTable .price-amount {
-  color: #3f64fa;
-  background: #fff;
-  font-size: 30px;
-  font-weight: 700;
-  line-height: 30px;
-  width: 120px;
-  height: 120px;
-  padding: 33px 10px 10px;
-  display: inline-block;
-  vertical-align: top;
-  -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
-          clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
-  position: relative;
-  z-index: 1;
-}
-
-.pricingTable .price-amount:before,
-.pricingTable .price-amount:after {
-  content: "";
-  background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
-  width: calc(100% - 12px);
-  height: calc(100% - 12px);
-  -webkit-transform: translateX(-50%) translateY(-50%);
-          transform: translateX(-50%) translateY(-50%);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: -1;
-  -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
-          clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
-}
-
-.pricingTable .price-amount:after {
-  background: #fff;
-  width: calc(100% - 16px);
-  height: calc(100% - 16px);
-}
-
-.pricingTable .price-amount .duration {
-  font-size: 16px;
-  font-weight: 600;
-  text-transform: capitalize;
-  display: block;
-}
-
-.pricingTable .pricingTable-signup a {
-  color: #fff;
-  font-size: 20px;
-  font-weight: 700;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  padding: 10px 20px;
-  border: 2px solid #fff;
-  border-radius: 50px;
-  display: inline-block;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
-
-.pricingTable .pricingTable-signup a:hover {
-  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
-          box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
-}
-
-.pricingTable.green:before,
-.pricingTable.green:after,
-.pricingTable.green .price-amount:before {
-  background: linear-gradient(-45deg, #76d243, #76d243, #109739, #109739);
-}
-
-.pricingTable.green .price-amount {
-  color: #109739;
-}
-
-.pricingTable.pink:before,
-.pricingTable.pink:after,
-.pricingTable.pink .price-amount:before {
-  background: linear-gradient(-45deg, #e969a6, #e969a6, #ed2e96, #ed2e96);
-}
-
-.pricingTable.pink .price-amount {
-  color: #ed2e96;
-}
-
-@media only screen and (max-width: 990px) {
-  .pricingTable {
-    margin: 0 0 40px;
-  }
-}
-
-.navbar {
-  background: none !important;
-}
-
-.arrowdoup {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-}
-
-.userprofile {
-  position: relative;
-  top: -80px;
-  z-index: 20;
-}
-
-.userprofile .userprofile-content {
-  width: 83vw;
-}
-
-.userprofile .userprofile-content .user-information .information {
-  width: 50%;
-  margin: 0 auto;
-}
-
-.userprofile .userprofile-content .user-information .information h1 {
-  color: #707070;
-  font-size: 56px;
-}
-
-.userprofile .userprofile-content .user-information .information .share {
-  font-size: 16px;
-}
-
-.userprofile .userprofile-content .user-information .information .share a {
-  text-decoration: none;
-  color: #183790;
-}
-
-.userprofile .userprofile-content .user-information .card {
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-  border-radius: 15px;
-}
-
-.userprofile .userprofile-content .user-information .check-history {
-  cursor: pointer;
-}
-
-.userprofile .userprofile-content .user-information .historical-record th {
-  border-bottom: none !important;
-  color: #183790;
-  font-weight: 900;
-}
-
-.userprofile .userprofile-content .user-information .historical-record td {
-  font-size: 15px;
-}
-
-.sidenav {
-  height: 100%;
-  width: 250px;
-  position: fixed;
-  z-index: 50;
-  top: 0;
-  left: 0;
-  background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051));
-  background: linear-gradient(to bottom, #1c7ce0, #150051);
-  overflow-x: hidden;
-  -webkit-transition: 0.5s;
-  transition: 0.5s;
-  text-align: center;
-}
-
-.sidenav hr {
-  background: #fff;
-  opacity: 1 !important;
-  height: 1px;
-  width: 85%;
-  margin: 15px auto;
-}
-
-.sidenav .sidebar {
-  width: 80%;
-  margin: 0 auto;
-}
-
-.sidenav .user {
-  -o-object-fit: cover;
-     object-fit: cover;
-  width: 100px;
-}
-
-.sidenav .user-name {
-  font-size: 1.5rem;
-}
-
-.sidenav .navbar-nav {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-
-.sidenav .navbar-nav .btn-gocreate {
-  font-size: 14px;
-  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
-  background: linear-gradient(90deg, #0162c8, #55e7fc);
-  color: white;
-  border: 0 none;
-  border-radius: 10px;
-  cursor: pointer;
-  margin: 10px 3px;
-  display: inline;
-}
-
-.sidenav .navbar-nav .active {
-  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
-  background: linear-gradient(90deg, #0162c8, #55e7fc);
-}
-
-.sidenav a {
-  text-decoration: none;
-  font-size: 32px;
-  color: #f1f1f1;
-  display: block;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
-}
-
-.sidenav a:hover {
-  color: #818181;
-}
-
-.sidenav .sidenav .closebtn {
-  position: absolute;
-  top: 0;
-  right: 25px;
-  font-size: 36px;
-  margin-left: 50px;
-}
-
-.sidenav .nav-list {
-  color: white;
-  list-style: none;
-  text-align: center;
-}
-
-.sidenav .nav-list .nav-list-item {
-  font-size: 1.2rem;
-  cursor: pointer;
-  position: relative;
-}
-
-.sidenav .nav-list .nav-list-item::after {
-  content: " ";
-  position: absolute;
-  width: 50%;
-  height: 100%;
-  left: 25%;
-  top: 5px;
-  border-bottom: 1px solid white;
-  opacity: 0;
-  -webkit-transition: all 0.4s;
-  transition: all 0.4s;
-}
-
-.sidenav .nav-list .nav-list-item:hover::after {
-  opacity: 1;
-}
-
-.sidenav .right-text {
-  padding-top: 9vw;
-  color: #fff;
-}
-
-.sidenav .right-text a {
-  font-size: 18px;
-  display: inline;
-  margin: 2px;
-}
-
-.sidenav .right-text a img {
-  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
-          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
-}
-
-.price-int {
-  padding-bottom: 10vw;
-}
-
-.price-int .price-content {
-  width: 80vw;
-}
-
-@media screen and (max-width: 767px) {
-  .price-int .price-content {
-    width: 90vw;
-  }
-}
-
-.price-int .price-content h1 {
-  text-align: center;
-  font-weight: 900;
-  font-size: 2rem;
-}
-
-.price-int .price-content .price-content-1 {
-  margin-top: 50px;
-}
-
-.price-int .price-content .price-content-1 h2 {
-  margin-top: 15px;
-  font-weight: 600;
-  font-size: 1.3rem;
-}
-
-@media screen and (max-width: 767px) {
-  .price-int .price-content .price-content-1 h2 {
-    font-size: 5.5vmin;
-  }
-}
-
-.price-int .price-content .price-content-1 ul {
-  text-align: left;
-}
-
-.price-int .price-content .price-content-1 ul li {
-  list-style-type: disc;
-}
-
-@media screen and (max-width: 767px) {
-  .price-int .price-content .price-content-1 ul li {
-    font-size: 4.5vmin;
-  }
-}
-
-.price-int .price-content .price-content-1 .price-text {
-  padding-left: 80px;
-}
-
-.price-int .price-content .get-started {
-  border: none;
-  border-radius: 3rem;
-  padding: 1rem 2.5rem;
-  background: linear-gradient(20deg, #EA5413, #920783);
-  color: #fff;
-  font-size: 1.2rem;
-  font-weight: 900;
-}
-
-.price-int .price-content p {
-  font-size: 24px;
-}
-
-.footer {
-  background-color: #F0F0F0;
-  padding: 3rem;
-  padding-left: 13rem;
-}
-
-@media screen and (max-width: 767px) {
-  .footer {
-    padding: 0.5rem;
-    text-align: center;
-    padding-top: 3rem;
-    padding-left: 0;
-  }
-}
-
-.footer h5 {
-  font-size: 16px;
-  font-weight: 700;
-  color: #555555;
-}
-
-.footer .row {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.footer .footer-aigirl {
-  font-weight: 600;
-  font-size: 1.5rem;
-  margin-top: 1rem;
-  margin-bottom: 2.5rem;
-  color: #555555;
-}
-
-@media screen and (max-width: 767px) {
-  .footer .footer-aigirl {
-    font-size: 1.3rem;
-    margin-bottom: 2rem;
-  }
-}
-
-.footer .footer-follow {
-  font-size: 1rem;
-  margin-bottom: 1rem;
-}
-
-@media screen and (max-width: 767px) {
-  .footer-socials {
-    margin-bottom: 2rem;
-  }
-}
-
-.footer .footer-socials a {
-  margin-right: 5px;
-}
-
-@media screen and (max-width: 767px) {
-  .footer .footer-socials a {
-    margin-right: 10px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .footer-contacts {
-    font-size: 14px;
-  }
-}
+@charset "UTF-8";
+/*custom font*/
+@import url(https://fonts.googleapis.com/css?family=Montserrat);
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+/*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", sans-serif;
+  background-color: white;
+  font-size: 1.05rem;
+}
+
+.ml {
+  margin-left: 10px;
+}
+
+.mr {
+  margin-right: 10px;
+}
+
+.mb {
+  margin-bottom: 12px;
+}
+
+.top {
+  margin-top: 20px;
+  position: -webkit-sticky;
+  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: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: 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 {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 80%;
+  margin: 0 10%;
+  margin-bottom: 1.5rem;
+  background: white;
+  border: 0 none;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+          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: #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;
+  -webkit-transition: all 0.4s;
+  transition: all 0.4s;
+}
+
+.nav-list-item:hover::after {
+  opacity: 1;
+}
+
+.loader {
+  position: absolute;
+  top: 30%;
+  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;
+}
+.history-modal .modal-content{
+	height: 80vh;
+	
+}
+.history-modal .modal-conten .modal-terms {
+	height: 90%;
+	overflow: scroll;
+} */
+.history {
+  height: 75vh;
+  overflow: scroll;
+}
+
+.historyList-item {
+  padding: 1rem;
+  display: block;
+  width: 80%;
+  margin: 1rem auto;
+  border-radius: 10px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.9rem;
+  -webkit-box-shadow: 1px 1px 4px 1px #cfcfcf;
+          box-shadow: 1px 1px 4px 1px #cfcfcf;
+  background-color: white;
+}
+
+.historyList-link {
+  text-decoration: none;
+  color: #494949;
+}
+
+.historyList-link:hover {
+  color: #7c7c7c;
+}
+
+.listimg__fr {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: auto .5rem;
+}
+
+.listimg__fr img {
+  width: 100%;
+  height: 100%;
+}
+
+.content {
+  width: calc(100% - 250px);
+}
+
+/*form styles*/
+#msform {
+  max-width: 1000px;
+  min-width: 370px;
+  margin: 50px auto;
+  margin-bottom: 20px;
+  text-align: center;
+  position: relative;
+}
+
+#msform fieldset {
+  background: white;
+  border: 0 none;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+  padding: 20px 30px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 80%;
+  margin: 3rem 10%;
+  /*stacking fieldsets above each other*/
+  position: relative;
+}
+
+/*Hide all except first fieldset*/
+/*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%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: montserrat;
+  color: #2c3e50;
+  font-size: 14px;
+}
+
+/*buttons*/
+#msform .action-button {
+  width: 100px;
+  background: #1c7ce0;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 1px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px auto;
+  display: block;
+}
+
+#msform .action-button:hover,
+#msform .action-button:focus {
+  -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
+          box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
+}
+
+#msform .next[disabled] {
+  background-color: grey;
+}
+
+.draft-btn {
+  position: absolute;
+  left: 1rem;
+  bottom: 1rem;
+  cursor: pointer;
+}
+
+/*headings*/
+.fs-title {
+  font-size: 15px;
+  text-transform: uppercase;
+  color: #2c3e50;
+  margin-bottom: 10px;
+}
+
+.fs-subtitle {
+  display: inline-block;
+  font-weight: normal;
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 20px;
+  padding-bottom: 3px;
+  border-bottom: 2px solid #1c7ce0;
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.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, 0.7);
+  font-size: 0.8em;
+  margin-bottom: 0;
+}
+
+#term-error {
+  color: rgba(255, 0, 0, 0.7);
+  font-size: 0.8em;
+  bottom: -23px;
+  left: 24px;
+}
+
+select {
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-bottom: 10px;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: montserrat;
+  color: #2c3e50;
+  font-size: 13px;
+  background-color: transparent;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.terms {
+  font-size: 0.9rem;
+  width: 95%;
+  min-width: 250px;
+  height: auto;
+  overflow: scroll;
+  margin-bottom: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  border: 1px solid #a3a3a3;
+  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;
+}
+
+#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: 0.5rem 0.75rem;
+  background-color: transparent;
+  border: 1px solid black;
+  margin-top: 0.3rem;
+}
+
+.btn-term-exit {
+  padding: 0.5rem 0.75rem;
+  background-color: transparent;
+  border: 1px solid black;
+  margin-top: 0.3rem;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 2rem;
+}
+
+footer {
+  padding: 2rem;
+  padding-top: 0.5rem;
+}
+
+.footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.img_fr {
+  width: 80%;
+  max-width: 850px;
+  min-width: 300px;
+  height: 60px;
+  -o-object-fit: contain;
+     object-fit: contain;
+  -o-object-position: center;
+     object-position: center;
+}
+
+.img_fr img {
+  width: 100%;
+  height: 90%;
+}
+
+#msform #userid,
+#msform #area {
+  height: 0;
+  padding: 0;
+  margin: 0;
+  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: -0.5rem;
+  right: 1.5rem;
+}
+
+.linker__box {
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  -webkit-box-shadow: 1px 1px 5px 1px #c9c9c9;
+          box-shadow: 1px 1px 5px 1px #c9c9c9;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  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 #a3a3a3;
+  width: 1px;
+  height: 120%;
+}
+
+.item_imgfr {
+  width: 15%;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: auto 0.5rem;
+}
+
+.item_imgfr img {
+  height: 100%;
+  width: 100%;
+}
+
+.content-box {
+  width: 75%;
+}
+
+.box-title {
+  margin-bottom: 0.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: 0.4rem 0.5rem;
+  font-size: 0.9rem;
+  border-radius: 3px;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.upload-btn img {
+  width: 30px;
+  height: 30px;
+}
+
+.upload-btn:hover {
+  background-color: #3b86d6;
+}
+
+.add,
+.add-subline,
+.addimg {
+  cursor: pointer;
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-color: #67abf3;
+  font-size: 1.2rem;
+  color: white;
+  border-radius: 50%;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.add:hover,
+.add-subline:hover,
+.addimg:hover {
+  background-color: #398ee9;
+}
+
+body {
+  font-family: "Lato", sans-serif;
+}
+
+.sidenav {
+  height: 100%;
+  width: 250px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051));
+  background: linear-gradient(to bottom, #1c7ce0, #150051);
+  overflow-x: hidden;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
+.sidenav a {
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+.container-login {
+  width: 100vw;
+  height: 100vh;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: (1fr)[2];
+      grid-template-columns: repeat(2, 1fr);
+  grid-gap: 7rem;
+  padding: 0rem;
+}
+
+.navbar-nav button {
+  background: white;
+  border: none;
+  outline: none;
+}
+
+.img-wave {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  z-index: -1;
+}
+
+.img-wave-profile {
+  height: 80%;
+}
+
+.row-img {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(16, 68, 142, 0.7)), to(rgba(16, 68, 142, 0.7)));
+  background-image: linear-gradient(to right bottom, rgba(16, 68, 142, 0.7), rgba(16, 68, 142, 0.7));
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+}
+
+.row-img .video {
+  height: 100%;
+  z-index: -1;
+  position: absolute;
+  left: -10%;
+  top: 0;
+}
+
+.row-img .row-img-box {
+  color: white;
+}
+
+.row-img .row-img-txt {
+  position: absolute;
+  bottom: 2rem;
+  color: white;
+  left: 2rem;
+  font-size: 1.3rem;
+}
+
+.row-login {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  text-align: center;
+  position: relative;
+}
+
+.row-login .title {
+  position: relative;
+  color: #052859;
+}
+
+.row-login .title::after {
+  position: absolute;
+  content: "";
+  left: 45%;
+  top: 20%;
+  width: 10%;
+  height: 100%;
+  border-bottom: 4px solid #052859;
+}
+
+.row-login .login-top {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
+
+.row-login .login-top .navbar-nav {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.row-login .login-top .navbar-nav .nav-item {
+  margin: 0 0.5rem;
+}
+
+.row-login .login-top .navbar-nav .nav-item a {
+  color: black;
+}
+
+.login-content {
+  width: 80%;
+  min-width: 350px;
+  -webkit-box-shadow: 0 0 12px 5px #dddddd;
+          box-shadow: 0 0 12px 5px #dddddd;
+  padding: 1.5rem;
+  border-radius: 2rem;
+}
+
+.link_privacy {
+  color: black;
+}
+
+.login-content img {
+  height: 80px;
+}
+
+.row-img img {
+  width: 450px;
+}
+
+.login-content .form-floating input {
+  border: none;
+  border-bottom: 2px solid #d9d9d9;
+  border-radius: 0;
+}
+
+.login-content .form-floating input:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.login-content #btn_login {
+  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
+  background: linear-gradient(90deg, #0162c8, #55e7fc);
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 40px;
+  cursor: pointer;
+  padding: 10px 50px;
+  margin: 10px auto;
+  display: block;
+}
+
+.login-content #btn_login:hover {
+  -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
+          box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
+}
+
+.login-content .btn-register {
+  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
+  background: linear-gradient(90deg, #0162c8, #55e7fc);
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 40px;
+  cursor: pointer;
+  padding: 10px 50px;
+  margin: 10px auto;
+  display: block;
+}
+
+.login-content .btn-register:hover {
+  -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
+          box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
+}
+
+.login-content .nav-tabs {
+  border-bottom: none;
+}
+
+.login-content .nav {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.login-content .nav-tabs .nav-link {
+  color: grey;
+}
+
+.login-content .nav-tabs .nav-link.active {
+  border-color: #fff;
+  text-transform: uppercase;
+  color: black;
+}
+
+.navbar .btn-gocreate {
+  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
+  background: linear-gradient(90deg, #0162c8, #55e7fc);
+  color: white;
+  border: 0 none;
+  border-radius: 40px;
+  cursor: pointer;
+  padding: 10px 50px;
+}
+
+.container-bg {
+  position: absolute;
+  width: 600px;
+  height: 400px;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.container-profile .card-profile {
+  margin-top: 4rem;
+  border-radius: 10px;
+  padding: 2rem;
+  text-align: center;
+  -webkit-box-shadow: 0px 0px 20px 1px #b4b4b4;
+          box-shadow: 0px 0px 20px 1px #b4b4b4;
+}
+
+.container-profile .card-profile img {
+  width: 120px;
+  margin: 1rem auto;
+}
+
+.card-profile-txt {
+  color: #6d6d6d;
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.card-profile-cnt {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+@media screen and (max-width: 900px) {
+  .container-login {
+    -ms-grid-columns: 1fr;
+        grid-template-columns: 1fr;
+  }
+  .row-img {
+    display: none;
+  }
+  .img-wave {
+    display: none;
+  }
+  .row-login {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+  .container-bg {
+    width: 400px;
+    height: 300px;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {
+    padding-top: 15px;
+  }
+  .sidenav a {
+    font-size: 18px;
+  }
+}
+
+/* Pricing */
+.pricingTable {
+  background: #fff;
+  font-family: "Open Sans", sans-serif;
+  text-align: center;
+  padding: 30px 15px 15px;
+  border-radius: 25px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.pricingTable:before,
+.pricingTable:after {
+  content: "";
+  background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
+  height: 170px;
+  width: 150%;
+  outline: 5px solid #fff;
+  outline-offset: -10px;
+  opacity: 0.9;
+  -webkit-transform: translateX(-50%) rotate(7deg);
+          transform: translateX(-50%) rotate(7deg);
+  position: absolute;
+  left: 50%;
+  top: -65px;
+  z-index: -1;
+}
+
+.pricingTable:after {
+  height: 250px;
+  -webkit-transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
+          transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
+  top: auto;
+  bottom: -150px;
+}
+
+.pricingTable .pricingTable-header {
+  color: #fff;
+  margin: 0 0 75px;
+}
+
+.pricingTable .title {
+  font-size: 40px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 0;
+}
+
+.pricingTable .pricing-content {
+  text-align: left;
+  padding: 0;
+  margin: 0 0 10px;
+  display: inline-block;
+}
+
+.pricingTable .pricing-content li {
+  color: #333;
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 22px;
+  text-transform: uppercase;
+  padding: 0 40px 0 0;
+  margin: 0 0 15px;
+  list-style-position: inside;
+  position: relative;
+}
+
+.pricingTable .pricing-content li:after {
+  content: "\f00c";
+  color: #e58e26;
+  font-family: "Font Awesome 5 Free";
+  font-size: 18px;
+  font-weight: 900;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.pricingTable .pricing-content li.disable:after {
+  content: "\f00d";
+}
+
+.pricingTable .price-value {
+  margin: 0 0 15px;
+}
+
+.pricingTable .price-title {
+  color: #c70039;
+  font-size: 30px;
+  text-align: left;
+  text-transform: uppercase;
+  line-height: 30px;
+  width: calc(100% - 130px);
+  padding: 15px 0 0;
+  display: inline-block;
+}
+
+.pricingTable .price-title b {
+  display: block;
+}
+
+.pricingTable .price-amount {
+  color: #3f64fa;
+  background: #fff;
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 30px;
+  width: 120px;
+  height: 120px;
+  padding: 33px 10px 10px;
+  display: inline-block;
+  vertical-align: top;
+  -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
+          clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
+  position: relative;
+  z-index: 1;
+}
+
+.pricingTable .price-amount:before,
+.pricingTable .price-amount:after {
+  content: "";
+  background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
+  width: calc(100% - 12px);
+  height: calc(100% - 12px);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+  -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
+          clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
+}
+
+.pricingTable .price-amount:after {
+  background: #fff;
+  width: calc(100% - 16px);
+  height: calc(100% - 16px);
+}
+
+.pricingTable .price-amount .duration {
+  font-size: 16px;
+  font-weight: 600;
+  text-transform: capitalize;
+  display: block;
+}
+
+.pricingTable .pricingTable-signup a {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding: 10px 20px;
+  border: 2px solid #fff;
+  border-radius: 50px;
+  display: inline-block;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.pricingTable .pricingTable-signup a:hover {
+  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
+}
+
+.pricingTable.green:before,
+.pricingTable.green:after,
+.pricingTable.green .price-amount:before {
+  background: linear-gradient(-45deg, #76d243, #76d243, #109739, #109739);
+}
+
+.pricingTable.green .price-amount {
+  color: #109739;
+}
+
+.pricingTable.pink:before,
+.pricingTable.pink:after,
+.pricingTable.pink .price-amount:before {
+  background: linear-gradient(-45deg, #e969a6, #e969a6, #ed2e96, #ed2e96);
+}
+
+.pricingTable.pink .price-amount {
+  color: #ed2e96;
+}
+
+@media only screen and (max-width: 990px) {
+  .pricingTable {
+    margin: 0 0 40px;
+  }
+}
+
+.navbar {
+  background: none !important;
+}
+
+.arrowdoup {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+.userprofile {
+  position: relative;
+  top: -80px;
+  z-index: 20;
+}
+
+.userprofile .userprofile-content {
+  width: 83vw;
+}
+
+.userprofile .userprofile-content .user-information .information {
+  width: 50%;
+  margin: 0 auto;
+}
+
+.userprofile .userprofile-content .user-information .information h1 {
+  color: #707070;
+  font-size: 56px;
+}
+
+.userprofile .userprofile-content .user-information .information .share {
+  font-size: 16px;
+}
+
+.userprofile .userprofile-content .user-information .information .share a {
+  text-decoration: none;
+  color: #183790;
+}
+
+.userprofile .userprofile-content .user-information .card {
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 15px;
+}
+
+.userprofile .userprofile-content .user-information .check-history {
+  cursor: pointer;
+}
+
+.userprofile .userprofile-content .user-information .historical-record th {
+  border-bottom: none !important;
+  color: #183790;
+  font-weight: 900;
+}
+
+.userprofile .userprofile-content .user-information .historical-record td {
+  font-size: 15px;
+}
+
+.sidenav {
+  height: 100%;
+  width: 250px;
+  position: fixed;
+  z-index: 50;
+  top: 0;
+  left: 0;
+  background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051));
+  background: linear-gradient(to bottom, #1c7ce0, #150051);
+  overflow-x: hidden;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  text-align: center;
+}
+
+.sidenav hr {
+  background: #fff;
+  opacity: 1 !important;
+  height: 1px;
+  width: 85%;
+  margin: 15px auto;
+}
+
+.sidenav .sidebar {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.sidenav .user {
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100px;
+}
+
+.sidenav .user-name {
+  font-size: 1.5rem;
+}
+
+.sidenav .navbar-nav {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.sidenav .navbar-nav .btn-gocreate {
+  font-size: 14px;
+  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
+  background: linear-gradient(90deg, #0162c8, #55e7fc);
+  color: white;
+  border: 0 none;
+  border-radius: 10px;
+  cursor: pointer;
+  margin: 10px 3px;
+  display: inline;
+}
+
+.sidenav .navbar-nav .active {
+  background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
+  background: linear-gradient(90deg, #0162c8, #55e7fc);
+}
+
+.sidenav a {
+  text-decoration: none;
+  font-size: 32px;
+  color: #f1f1f1;
+  display: block;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: #818181;
+}
+
+.sidenav .sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+.sidenav .nav-list {
+  color: white;
+  list-style: none;
+  text-align: center;
+}
+
+.sidenav .nav-list .nav-list-item {
+  font-size: 1.2rem;
+  cursor: pointer;
+  position: relative;
+}
+
+.sidenav .nav-list .nav-list-item::after {
+  content: " ";
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  left: 25%;
+  top: 5px;
+  border-bottom: 1px solid white;
+  opacity: 0;
+  -webkit-transition: all 0.4s;
+  transition: all 0.4s;
+}
+
+.sidenav .nav-list .nav-list-item:hover::after {
+  opacity: 1;
+}
+
+.sidenav .right-text {
+  padding-top: 9vw;
+  color: #fff;
+}
+
+.sidenav .right-text a {
+  font-size: 18px;
+  display: inline;
+  margin: 2px;
+}
+
+.sidenav .right-text a img {
+  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
+          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
+}
+
+.price-int {
+  padding-bottom: 10vw;
+}
+
+.price-int .price-content {
+  width: 80vw;
+}
+
+@media screen and (max-width: 767px) {
+  .price-int .price-content {
+    width: 90vw;
+  }
+}
+
+.price-int .price-content h1 {
+  text-align: center;
+  font-weight: 900;
+  font-size: 2rem;
+}
+
+.price-int .price-content .price-content-1 {
+  margin-top: 50px;
+}
+
+.price-int .price-content .price-content-1 h2 {
+  margin-top: 15px;
+  font-weight: 600;
+  font-size: 1.3rem;
+}
+
+@media screen and (max-width: 767px) {
+  .price-int .price-content .price-content-1 h2 {
+    font-size: 5.5vmin;
+  }
+}
+
+.price-int .price-content .price-content-1 ul {
+  text-align: left;
+}
+
+.price-int .price-content .price-content-1 ul li {
+  list-style-type: disc;
+}
+
+@media screen and (max-width: 767px) {
+  .price-int .price-content .price-content-1 ul li {
+    font-size: 4.5vmin;
+  }
+}
+
+.price-int .price-content .price-content-1 .price-text {
+  padding-left: 80px;
+}
+
+.price-int .price-content .get-started {
+  border: none;
+  border-radius: 3rem;
+  padding: 1rem 2.5rem;
+  background: linear-gradient(20deg, #EA5413, #920783);
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: 900;
+}
+
+.price-int .price-content p {
+  font-size: 24px;
+}
+
+.footer {
+  background-color: #F0F0F0;
+  padding: 3rem;
+  padding-left: 13rem;
+}
+
+@media screen and (max-width: 767px) {
+  .footer {
+    padding: 0.5rem;
+    text-align: center;
+    padding-top: 3rem;
+    padding-left: 0;
+  }
+}
+
+.footer h5 {
+  font-size: 16px;
+  font-weight: 700;
+  color: #555555;
+}
+
+.footer .row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.footer .footer-aigirl {
+  font-weight: 600;
+  font-size: 1.5rem;
+  margin-top: 1rem;
+  margin-bottom: 2.5rem;
+  color: #555555;
+}
+
+@media screen and (max-width: 767px) {
+  .footer .footer-aigirl {
+    font-size: 1.3rem;
+    margin-bottom: 2rem;
+  }
+}
+
+.footer .footer-follow {
+  font-size: 1rem;
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 767px) {
+  .footer-socials {
+    margin-bottom: 2rem;
+  }
+}
+
+.footer .footer-socials a {
+  margin-right: 5px;
+}
+
+@media screen and (max-width: 767px) {
+  .footer .footer-socials a {
+    margin-right: 10px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .footer-contacts {
+    font-size: 14px;
+  }
+}
 /*# sourceMappingURL=style.css.map */

static/scss/style.scss → api/static/scss/style.scss

@@ -1,1449 +1,1449 @@
-@charset "UTF-8";
-/*custom font*/
-@import url(https://fonts.googleapis.com/css?family=Montserrat);
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-
-/*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", sans-serif;
-	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: #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 0.4s;
-}
-
-.nav-list-item:hover::after {
-	opacity: 1;
-}
-
-.loader {
-	position: absolute;
-	top: 30%;
-	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;
-}
-.history-modal .modal-content{
-	height: 80vh;
-	
-}
-.history-modal .modal-conten .modal-terms {
-	height: 90%;
-	overflow: scroll;
-} */
-
-.history {
-	height: 75vh;
-	overflow: scroll;
-}
-
-.historyList-item {
-	padding: 1rem;
-	display: block;
-	width: 80%;
-	margin: 1rem auto;
-	border-radius: 10px;
-	display: flex;
-	font-size: 0.9rem;
-	box-shadow: 1px 1px 4px 1px rgb(207, 207, 207);
-	background-color: white;
-}
-
-.historyList-link {
-	text-decoration: none;
-	color: rgb(73, 73, 73);
-}
-
-.historyList-link:hover {
-	color: rgb(124, 124, 124);
-}
-
-.listimg__fr {
-	width: 50px;
-	height: 50px;
-	border-radius: 50%;
-	overflow: hidden;
-	margin: auto .5rem;
-}
-
-.listimg__fr img {
-	width: 100%;
-	height: 100%;
-}
-
-.content {
-	width: calc(100% - 250px);
-}
-/*form styles*/
-#msform {
-	max-width: 1000px;
-	min-width: 370px;
-	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: 3rem 10%;
-
-	/*stacking fieldsets above each other*/
-	position: relative;
-}
-/*Hide all except first fieldset*/
-
-/*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: #1c7ce0;
-	font-weight: bold;
-	color: white;
-	border: 0 none;
-	border-radius: 1px;
-	cursor: pointer;
-	padding: 10px 5px;
-	margin: 10px auto;
-	display: block;
-}
-#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;
-}
-
-.draft-btn {
-	position: absolute;
-	left: 1rem;
-	bottom: 1rem;
-	cursor: pointer;
-}
-/*headings*/
-.fs-title {
-	font-size: 15px;
-	text-transform: uppercase;
-	color: #2c3e50;
-	margin-bottom: 10px;
-}
-.fs-subtitle {
-	display: inline-block;
-	font-weight: normal;
-	font-size: 18px;
-	color: #666;
-	margin-bottom: 20px;
-	padding-bottom: 3px;
-	border-bottom: 2px solid #1c7ce0;
-	margin-left: 2rem;
-	margin-right: 2rem;
-}
-.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, 0.7);
-	font-size: 0.8em;
-	margin-bottom: 0;
-}
-
-#term-error {
-	color: rgba(255, 0, 0, 0.7);
-	font-size: 0.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: 0.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;
-}
-
-#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: 0.5rem 0.75rem;
-	background-color: transparent;
-	border: 1px solid black;
-	margin-top: 0.3rem;
-}
-
-.btn-term-exit {
-	padding: 0.5rem 0.75rem;
-	background-color: transparent;
-	border: 1px solid black;
-	margin-top: 0.3rem;
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 2rem;
-}
-
-footer {
-	padding: 2rem;
-	padding-top: 0.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;
-}
-
-#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: -0.5rem;
-	right: 1.5rem;
-}
-
-.linker__box {
-	padding: 0.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 0.5rem;
-}
-
-.item_imgfr img {
-	height: 100%;
-	width: 100%;
-}
-
-.content-box {
-	width: 75%;
-}
-
-.box-title {
-	margin-bottom: 0.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: 0.4rem 0.5rem;
-	font-size: 0.9rem;
-	border-radius: 3px;
-	transition: all 0.3s;
-	cursor: pointer;
-}
-
-.upload-btn img {
-	width: 30px;
-	height: 30px;
-}
-
-.upload-btn:hover {
-	background-color: #3b86d6;
-}
-
-.add,
-.add-subline,
-.addimg {
-	cursor: pointer;
-	display: inline-block;
-	width: 2rem;
-	height: 2rem;
-	background-color: #67abf3;
-	font-size: 1.2rem;
-	color: white;
-	border-radius: 50%;
-	transition: all 0.3s;
-}
-.add:hover,
-.add-subline:hover,
-.addimg:hover {
-	background-color: #398ee9;
-}
-
-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;
-}
-
-.sidenav a {
-	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;
-}
-
-.container-login {
-	width: 100vw;
-	height: 100vh;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	grid-gap: 7rem;
-	padding: 0rem;
-}
-
-.navbar-nav button {
-	background: white;
-	border: none;
-	outline: none;
-}
-
-.img-wave {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	height: 100%;
-	z-index: -1;
-}
-
-.img-wave-profile {
-	height: 80%;
-}
-
-.row-img {
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-image: linear-gradient(to right bottom, rgba(#10448e, 0.7), rgba(#10448e, 0.7));
-	background-size: cover;
-	background-position: center;
-	overflow: hidden;
-	.video {
-		height: 100%;
-		z-index: -1;
-		position: absolute;
-		left: -10%;
-		top: 0;
-	}
-	.row-img-box {
-		color: white;
-	}
-	.row-img-txt {
-		position: absolute;
-		bottom: 2rem;
-		color: white;
-		left: 2rem;
-		font-size: 1.3rem;
-	}
-}
-
-.row-login {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-	text-align: center;
-	position: relative;
-	.title {
-		position: relative;
-		color: #052859;
-		&::after {
-			position: absolute;
-			content: "";
-			left: 45%;
-			top: 20%;
-			width: 10%;
-			height: 100%;
-			border-bottom: 4px solid #052859;
-		}
-	}
-	.login-top {
-		position: absolute;
-		right: 1rem;
-		top: 1rem;
-		.navbar-nav {
-			flex-direction: row;
-			.nav-item {
-				margin: 0 0.5rem;
-				a {
-					color: black;
-				}
-			}
-		}
-	}
-}
-
-.login-content {
-	width: 80%;
-	min-width: 350px;
-	box-shadow: 0 0 12px 5px rgb(221, 221, 221);
-	padding: 1.5rem;
-	border-radius: 2rem;
-}
-
-.link_privacy {
-	color: black;
-}
-
-.login-content img {
-	height: 80px;
-}
-
-.row-img img {
-	width: 450px;
-}
-
-.login-content .form-floating input {
-	border: none;
-	border-bottom: 2px solid #d9d9d9;
-	border-radius: 0;
-}
-
-.login-content .form-floating input:focus {
-	box-shadow: none;
-}
-
-.login-content #btn_login {
-	background: linear-gradient(90deg, #0162c8, #55e7fc);
-	font-weight: bold;
-	color: white;
-	border: 0 none;
-	border-radius: 40px;
-	cursor: pointer;
-	padding: 10px 50px;
-	margin: 10px auto;
-	display: block;
-}
-
-.login-content #btn_login:hover {
-	box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
-}
-
-.login-content .btn-register {
-	background: linear-gradient(90deg, #0162c8, #55e7fc);
-	font-weight: bold;
-	color: white;
-	border: 0 none;
-	border-radius: 40px;
-	cursor: pointer;
-	padding: 10px 50px;
-	margin: 10px auto;
-	display: block;
-}
-
-.login-content .btn-register:hover {
-	box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
-}
-
-.login-content .nav-tabs {
-	border-bottom: none;
-}
-
-.login-content .nav {
-	flex-direction: column;
-	align-items: center;
-}
-
-.login-content .nav-tabs .nav-link {
-	color: grey;
-}
-
-.login-content .nav-tabs .nav-link.active {
-	border-color: #fff;
-	text-transform: uppercase;
-	color: black;
-}
-
-.navbar .btn-gocreate {
-	background: linear-gradient(90deg, #0162c8, #55e7fc);
-	color: white;
-	border: 0 none;
-	border-radius: 40px;
-	cursor: pointer;
-	padding: 10px 50px;
-}
-
-
-.container-bg {
-	position: absolute;
-	width: 600px;
-	height: 400px;
-	right: 0;
-	bottom: 0;
-	z-index: -1;
-}
-
-.container-profile .card-profile {
-	margin-top: 4rem;
-	border-radius: 10px;
-	padding: 2rem;
-	text-align: center;
-	box-shadow: 0px 0px 20px 1px rgb(180, 180, 180);
-}
-
-.container-profile .card-profile img {
-	width: 120px;
-	margin: 1rem auto;
-}
-
-.card-profile-txt {
-	color: rgb(109, 109, 109);
-	font-size: 1.2rem;
-	font-weight: 500;
-}
-
-.card-profile-cnt {
-	font-size: 1.5rem;
-	font-weight: 700;
-}
-
-@media screen and (max-width: 900px) {
-	.container-login {
-		grid-template-columns: 1fr;
-	}
-
-	.row-img {
-		display: none;
-	}
-
-	.img-wave {
-		display: none;
-	}
-
-	.row-login {
-		justify-content: center;
-	}
-	.container-bg {
-		width: 400px;
-		height: 300px;
-		right: 0;
-		bottom: 0;
-	}
-}
-
-@media screen and (max-height: 450px) {
-	.sidenav {
-		padding-top: 15px;
-	}
-	.sidenav a {
-		font-size: 18px;
-	}
-}
-
-/* Pricing */
-.pricingTable {
-	background: #fff;
-	font-family: "Open Sans", sans-serif;
-	text-align: center;
-	padding: 30px 15px 15px;
-	border-radius: 25px;
-	overflow: hidden;
-	position: relative;
-	z-index: 1;
-}
-.pricingTable:before,
-.pricingTable:after {
-	content: "";
-	background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
-	height: 170px;
-	width: 150%;
-	outline: 5px solid #fff;
-	outline-offset: -10px;
-	opacity: 0.9;
-	transform: translateX(-50%) rotate(7deg);
-	position: absolute;
-	left: 50%;
-	top: -65px;
-	z-index: -1;
-}
-.pricingTable:after {
-	height: 250px;
-	transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
-	top: auto;
-	bottom: -150px;
-}
-.pricingTable .pricingTable-header {
-	color: #fff;
-	margin: 0 0 75px;
-}
-.pricingTable .title {
-	font-size: 40px;
-	font-weight: 700;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	margin: 0;
-}
-.pricingTable .pricing-content {
-	text-align: left;
-	padding: 0;
-	margin: 0 0 10px;
-	display: inline-block;
-}
-.pricingTable .pricing-content li {
-	color: #333;
-	font-size: 17px;
-	font-weight: 500;
-	line-height: 22px;
-	text-transform: uppercase;
-	padding: 0 40px 0 0;
-	margin: 0 0 15px;
-	list-style-position: inside;
-	position: relative;
-}
-.pricingTable .pricing-content li:after {
-	content: "\f00c";
-	color: #e58e26;
-	font-family: "Font Awesome 5 Free";
-	font-size: 18px;
-	font-weight: 900;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-.pricingTable .pricing-content li.disable:after {
-	content: "\f00d";
-}
-.pricingTable .price-value {
-	margin: 0 0 15px;
-}
-.pricingTable .price-title {
-	color: #c70039;
-	font-size: 30px;
-	text-align: left;
-	text-transform: uppercase;
-	line-height: 30px;
-	width: calc(100% - 130px);
-	padding: 15px 0 0;
-	display: inline-block;
-}
-.pricingTable .price-title b {
-	display: block;
-}
-.pricingTable .price-amount {
-	color: #3f64fa;
-	background: #fff;
-	font-size: 30px;
-	font-weight: 700;
-	line-height: 30px;
-	width: 120px;
-	height: 120px;
-	padding: 33px 10px 10px;
-	display: inline-block;
-	vertical-align: top;
-	clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
-	position: relative;
-	z-index: 1;
-}
-.pricingTable .price-amount:before,
-.pricingTable .price-amount:after {
-	content: "";
-	background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
-	width: calc(100% - 12px);
-	height: calc(100% - 12px);
-	transform: translateX(-50%) translateY(-50%);
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	z-index: -1;
-	clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
-}
-.pricingTable .price-amount:after {
-	background: #fff;
-	width: calc(100% - 16px);
-	height: calc(100% - 16px);
-}
-.pricingTable .price-amount .duration {
-	font-size: 16px;
-	font-weight: 600;
-	text-transform: capitalize;
-	display: block;
-}
-.pricingTable .pricingTable-signup a {
-	color: #fff;
-	font-size: 20px;
-	font-weight: 700;
-	letter-spacing: 2px;
-	text-transform: uppercase;
-	padding: 10px 20px;
-	border: 2px solid #fff;
-	border-radius: 50px;
-	display: inline-block;
-	transition: all 0.3s;
-}
-.pricingTable .pricingTable-signup a:hover {
-	text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
-	box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
-}
-.pricingTable.green:before,
-.pricingTable.green:after,
-.pricingTable.green .price-amount:before {
-	background: linear-gradient(-45deg, #76d243, #76d243, #109739, #109739);
-}
-.pricingTable.green .price-amount {
-	color: #109739;
-}
-.pricingTable.pink:before,
-.pricingTable.pink:after,
-.pricingTable.pink .price-amount:before {
-	background: linear-gradient(-45deg, #e969a6, #e969a6, #ed2e96, #ed2e96);
-}
-.pricingTable.pink .price-amount {
-	color: #ed2e96;
-}
-@media only screen and (max-width: 990px) {
-	.pricingTable {
-		margin: 0 0 40px;
-	}
-}
-// new user_profile
-.navbar {
-	background: none !important;
-}
-.arrowdoup{
-	transform: rotate(180deg);
-}
-.userprofile {
-	position: relative;
-	top: -80px;
-	z-index: 20;
-	.userprofile-content {
-		width: 83vw;
-		.user-information {
-		
-			.information {
-				width: 50%;
-				margin: 0 auto;
-				h1{
-					color:#707070;
-					font-size: 56px;
-				}
-				.share{
-					font-size: 16px;
-					a{
-						text-decoration: none;
-						color:#183790;
-
-					}
-				}
-			}
-			.card{
-				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-				border-radius: 15px;
-			}
-			.check-history{
-				cursor: pointer;
-			}
-			.historical-record{
-				th{
-					border-bottom: none !important;
-					color:#183790;
-					font-weight: 900;
-				}
-				td{
-					font-size: 15px;
-				}
-			}
-		}
-	}
-}
-
-// 側邊欄選單
-.sidenav {
-	height: 100%;
-	width: 250px;
-	position: fixed;
-	z-index: 50;
-	top: 0;
-	left: 0;
-	background: linear-gradient(to bottom, #1c7ce0, #150051);
-	overflow-x: hidden;
-	transition: 0.5s;
-	text-align: center;
-	hr {
-		background: #fff;
-		opacity: 1 !important;
-		height: 1px;
-		width: 85%;
-		margin: 15px auto;
-	}
-	.sidebar {
-		width: 80%;
-		margin: 0 auto;
-	}
-	.user {
-		object-fit: cover;
-		width: 100px;
-	}
-	.user-name {
-		font-size: 1.5rem;
-	}
-	.navbar-nav {
-		flex-direction: row;
-		.btn-gocreate {
-			font-size: 14px;
-			background: linear-gradient(90deg, #0162c8, #55e7fc);
-			// background:#31426C;
-			color: white;
-			border: 0 none;
-			border-radius: 10px;
-			cursor: pointer;
-			margin: 10px 3px;
-			display: inline;
-		}
-		.active {
-			background: linear-gradient(90deg, #0162c8, #55e7fc);
-		}
-	}
-	a {
-		text-decoration: none;
-		font-size: 32px;
-		color: #f1f1f1;
-		display: block;
-		transition: 0.3s;
-		&:hover {
-			color: #818181;
-		}
-	}
-
-	.sidenav .closebtn {
-		position: absolute;
-		top: 0;
-		right: 25px;
-		font-size: 36px;
-		margin-left: 50px;
-	}
-	.nav-list {
-		color: white;
-		list-style: none;
-		text-align: center;
-		.nav-list-item {
-			font-size: 1.2rem;
-			cursor: pointer;
-			position: relative;
-		}
-
-		.nav-list-item::after {
-			content: " ";
-			position: absolute;
-			width: 50%;
-			height: 100%;
-			left: 25%;
-			top: 5px;
-			border-bottom: 1px solid white;
-			opacity: 0;
-			transition: all 0.4s;
-		}
-
-		.nav-list-item:hover::after {
-			opacity: 1;
-		}
-	}
-	.right-text {
-		padding-top: 9vw;
-		color: #fff;
-		a {
-			font-size: 18px;
-			display: inline;
-			margin: 2px;
-			img {
-				filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
-			}
-		}
-	}
-}
-// 首頁價格介紹
-.price-int {
-	padding-bottom: 10vw;
-	.price-content {
-		width: 80vw;
-		@media screen and(max-width:767px) {
-			width: 90vw;
-		}
-		h1 {
-			text-align: center;
-			font-weight: 900;
-			font-size: 2rem;
-		}
-		.price-content-1 {
-			margin-top: 50px;
-			h2 {
-				margin-top: 15px;
-				font-weight: 600;
-				font-size: 1.3rem;
-				@media screen and(max-width:767px) {
-					font-size: 5.5vmin;
-				}
-			}
-			ul {
-				text-align: left;
-
-				li {
-					list-style-type: disc;
-					@media screen and(max-width:767px) {
-						font-size: 4.5vmin;
-					}
-				}
-			}
-			.price-text{
-				padding-left: 80px;
-			}
-		}
-		.get-started{
-			border:none;
-			border-radius: 3rem;
-			padding: 1rem 2.5rem;
-			background: linear-gradient(20deg, #EA5413, #920783);
-			color:#fff;
-			font-size: 1.2rem;
-			font-weight: 900;
-		}
-		p{
-			font-size: 24px;
-		}
-	}
-}
-// 頁尾
-.footer {
-	background-color: #F0F0F0;
-	padding:3rem;
-	padding-left: 13rem;
-	@media screen and(max-width:767px) {
-		padding: 0.5rem;
-		text-align: center;
-		padding-top: 3rem;
-		padding-left:0;
-	}
-	h5{
-		font-size: 16px;
-		font-weight: 700;
-		color:#555555;
-	}
-  }
-  
-  .footer .row{
-	display: flex;
-	align-items: center;
-  }
-  
-  .footer .footer-aigirl {
-	font-weight: 600;
-	font-size: 1.5rem;
-	margin-top: 1rem;
-	margin-bottom: 2.5rem;
-	color:#555555;
-	@media screen and(max-width:767px) {
-		font-size: 1.3rem;
-		margin-bottom: 2rem;
-	}
-  }
-  
-  .footer .footer-follow {
-	font-size: 1rem;
-	margin-bottom: 1rem;
-  }
-  .footer-socials{
-	@media screen and(max-width:767px) {
-		margin-bottom: 2rem;
-	}
-  }
-  .footer .footer-socials a{
-	margin-right: 5px;
-	@media screen and(max-width:767px) {
-		margin-right: 10px;
-	}
-  }
-  .footer-contacts{
-	@media screen and(max-width:767px) {
-		font-size: 14px;
-	}
+@charset "UTF-8";
+/*custom font*/
+@import url(https://fonts.googleapis.com/css?family=Montserrat);
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+
+/*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", sans-serif;
+	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: #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 0.4s;
+}
+
+.nav-list-item:hover::after {
+	opacity: 1;
+}
+
+.loader {
+	position: absolute;
+	top: 30%;
+	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;
+}
+.history-modal .modal-content{
+	height: 80vh;
+	
+}
+.history-modal .modal-conten .modal-terms {
+	height: 90%;
+	overflow: scroll;
+} */
+
+.history {
+	height: 75vh;
+	overflow: scroll;
+}
+
+.historyList-item {
+	padding: 1rem;
+	display: block;
+	width: 80%;
+	margin: 1rem auto;
+	border-radius: 10px;
+	display: flex;
+	font-size: 0.9rem;
+	box-shadow: 1px 1px 4px 1px rgb(207, 207, 207);
+	background-color: white;
+}
+
+.historyList-link {
+	text-decoration: none;
+	color: rgb(73, 73, 73);
+}
+
+.historyList-link:hover {
+	color: rgb(124, 124, 124);
+}
+
+.listimg__fr {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	overflow: hidden;
+	margin: auto .5rem;
+}
+
+.listimg__fr img {
+	width: 100%;
+	height: 100%;
+}
+
+.content {
+	width: calc(100% - 250px);
+}
+/*form styles*/
+#msform {
+	max-width: 1000px;
+	min-width: 370px;
+	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: 3rem 10%;
+
+	/*stacking fieldsets above each other*/
+	position: relative;
+}
+/*Hide all except first fieldset*/
+
+/*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: #1c7ce0;
+	font-weight: bold;
+	color: white;
+	border: 0 none;
+	border-radius: 1px;
+	cursor: pointer;
+	padding: 10px 5px;
+	margin: 10px auto;
+	display: block;
+}
+#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;
+}
+
+.draft-btn {
+	position: absolute;
+	left: 1rem;
+	bottom: 1rem;
+	cursor: pointer;
+}
+/*headings*/
+.fs-title {
+	font-size: 15px;
+	text-transform: uppercase;
+	color: #2c3e50;
+	margin-bottom: 10px;
+}
+.fs-subtitle {
+	display: inline-block;
+	font-weight: normal;
+	font-size: 18px;
+	color: #666;
+	margin-bottom: 20px;
+	padding-bottom: 3px;
+	border-bottom: 2px solid #1c7ce0;
+	margin-left: 2rem;
+	margin-right: 2rem;
+}
+.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, 0.7);
+	font-size: 0.8em;
+	margin-bottom: 0;
+}
+
+#term-error {
+	color: rgba(255, 0, 0, 0.7);
+	font-size: 0.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: 0.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;
+}
+
+#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: 0.5rem 0.75rem;
+	background-color: transparent;
+	border: 1px solid black;
+	margin-top: 0.3rem;
+}
+
+.btn-term-exit {
+	padding: 0.5rem 0.75rem;
+	background-color: transparent;
+	border: 1px solid black;
+	margin-top: 0.3rem;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 2rem;
+}
+
+footer {
+	padding: 2rem;
+	padding-top: 0.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;
+}
+
+#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: -0.5rem;
+	right: 1.5rem;
+}
+
+.linker__box {
+	padding: 0.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 0.5rem;
+}
+
+.item_imgfr img {
+	height: 100%;
+	width: 100%;
+}
+
+.content-box {
+	width: 75%;
+}
+
+.box-title {
+	margin-bottom: 0.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: 0.4rem 0.5rem;
+	font-size: 0.9rem;
+	border-radius: 3px;
+	transition: all 0.3s;
+	cursor: pointer;
+}
+
+.upload-btn img {
+	width: 30px;
+	height: 30px;
+}
+
+.upload-btn:hover {
+	background-color: #3b86d6;
+}
+
+.add,
+.add-subline,
+.addimg {
+	cursor: pointer;
+	display: inline-block;
+	width: 2rem;
+	height: 2rem;
+	background-color: #67abf3;
+	font-size: 1.2rem;
+	color: white;
+	border-radius: 50%;
+	transition: all 0.3s;
+}
+.add:hover,
+.add-subline:hover,
+.addimg:hover {
+	background-color: #398ee9;
+}
+
+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;
+}
+
+.sidenav a {
+	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;
+}
+
+.container-login {
+	width: 100vw;
+	height: 100vh;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 7rem;
+	padding: 0rem;
+}
+
+.navbar-nav button {
+	background: white;
+	border: none;
+	outline: none;
+}
+
+.img-wave {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	height: 100%;
+	z-index: -1;
+}
+
+.img-wave-profile {
+	height: 80%;
+}
+
+.row-img {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-image: linear-gradient(to right bottom, rgba(#10448e, 0.7), rgba(#10448e, 0.7));
+	background-size: cover;
+	background-position: center;
+	overflow: hidden;
+	.video {
+		height: 100%;
+		z-index: -1;
+		position: absolute;
+		left: -10%;
+		top: 0;
+	}
+	.row-img-box {
+		color: white;
+	}
+	.row-img-txt {
+		position: absolute;
+		bottom: 2rem;
+		color: white;
+		left: 2rem;
+		font-size: 1.3rem;
+	}
+}
+
+.row-login {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	text-align: center;
+	position: relative;
+	.title {
+		position: relative;
+		color: #052859;
+		&::after {
+			position: absolute;
+			content: "";
+			left: 45%;
+			top: 20%;
+			width: 10%;
+			height: 100%;
+			border-bottom: 4px solid #052859;
+		}
+	}
+	.login-top {
+		position: absolute;
+		right: 1rem;
+		top: 1rem;
+		.navbar-nav {
+			flex-direction: row;
+			.nav-item {
+				margin: 0 0.5rem;
+				a {
+					color: black;
+				}
+			}
+		}
+	}
+}
+
+.login-content {
+	width: 80%;
+	min-width: 350px;
+	box-shadow: 0 0 12px 5px rgb(221, 221, 221);
+	padding: 1.5rem;
+	border-radius: 2rem;
+}
+
+.link_privacy {
+	color: black;
+}
+
+.login-content img {
+	height: 80px;
+}
+
+.row-img img {
+	width: 450px;
+}
+
+.login-content .form-floating input {
+	border: none;
+	border-bottom: 2px solid #d9d9d9;
+	border-radius: 0;
+}
+
+.login-content .form-floating input:focus {
+	box-shadow: none;
+}
+
+.login-content #btn_login {
+	background: linear-gradient(90deg, #0162c8, #55e7fc);
+	font-weight: bold;
+	color: white;
+	border: 0 none;
+	border-radius: 40px;
+	cursor: pointer;
+	padding: 10px 50px;
+	margin: 10px auto;
+	display: block;
+}
+
+.login-content #btn_login:hover {
+	box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
+}
+
+.login-content .btn-register {
+	background: linear-gradient(90deg, #0162c8, #55e7fc);
+	font-weight: bold;
+	color: white;
+	border: 0 none;
+	border-radius: 40px;
+	cursor: pointer;
+	padding: 10px 50px;
+	margin: 10px auto;
+	display: block;
+}
+
+.login-content .btn-register:hover {
+	box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0;
+}
+
+.login-content .nav-tabs {
+	border-bottom: none;
+}
+
+.login-content .nav {
+	flex-direction: column;
+	align-items: center;
+}
+
+.login-content .nav-tabs .nav-link {
+	color: grey;
+}
+
+.login-content .nav-tabs .nav-link.active {
+	border-color: #fff;
+	text-transform: uppercase;
+	color: black;
+}
+
+.navbar .btn-gocreate {
+	background: linear-gradient(90deg, #0162c8, #55e7fc);
+	color: white;
+	border: 0 none;
+	border-radius: 40px;
+	cursor: pointer;
+	padding: 10px 50px;
+}
+
+
+.container-bg {
+	position: absolute;
+	width: 600px;
+	height: 400px;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+}
+
+.container-profile .card-profile {
+	margin-top: 4rem;
+	border-radius: 10px;
+	padding: 2rem;
+	text-align: center;
+	box-shadow: 0px 0px 20px 1px rgb(180, 180, 180);
+}
+
+.container-profile .card-profile img {
+	width: 120px;
+	margin: 1rem auto;
+}
+
+.card-profile-txt {
+	color: rgb(109, 109, 109);
+	font-size: 1.2rem;
+	font-weight: 500;
+}
+
+.card-profile-cnt {
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+@media screen and (max-width: 900px) {
+	.container-login {
+		grid-template-columns: 1fr;
+	}
+
+	.row-img {
+		display: none;
+	}
+
+	.img-wave {
+		display: none;
+	}
+
+	.row-login {
+		justify-content: center;
+	}
+	.container-bg {
+		width: 400px;
+		height: 300px;
+		right: 0;
+		bottom: 0;
+	}
+}
+
+@media screen and (max-height: 450px) {
+	.sidenav {
+		padding-top: 15px;
+	}
+	.sidenav a {
+		font-size: 18px;
+	}
+}
+
+/* Pricing */
+.pricingTable {
+	background: #fff;
+	font-family: "Open Sans", sans-serif;
+	text-align: center;
+	padding: 30px 15px 15px;
+	border-radius: 25px;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+.pricingTable:before,
+.pricingTable:after {
+	content: "";
+	background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
+	height: 170px;
+	width: 150%;
+	outline: 5px solid #fff;
+	outline-offset: -10px;
+	opacity: 0.9;
+	transform: translateX(-50%) rotate(7deg);
+	position: absolute;
+	left: 50%;
+	top: -65px;
+	z-index: -1;
+}
+.pricingTable:after {
+	height: 250px;
+	transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
+	top: auto;
+	bottom: -150px;
+}
+.pricingTable .pricingTable-header {
+	color: #fff;
+	margin: 0 0 75px;
+}
+.pricingTable .title {
+	font-size: 40px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	margin: 0;
+}
+.pricingTable .pricing-content {
+	text-align: left;
+	padding: 0;
+	margin: 0 0 10px;
+	display: inline-block;
+}
+.pricingTable .pricing-content li {
+	color: #333;
+	font-size: 17px;
+	font-weight: 500;
+	line-height: 22px;
+	text-transform: uppercase;
+	padding: 0 40px 0 0;
+	margin: 0 0 15px;
+	list-style-position: inside;
+	position: relative;
+}
+.pricingTable .pricing-content li:after {
+	content: "\f00c";
+	color: #e58e26;
+	font-family: "Font Awesome 5 Free";
+	font-size: 18px;
+	font-weight: 900;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+.pricingTable .pricing-content li.disable:after {
+	content: "\f00d";
+}
+.pricingTable .price-value {
+	margin: 0 0 15px;
+}
+.pricingTable .price-title {
+	color: #c70039;
+	font-size: 30px;
+	text-align: left;
+	text-transform: uppercase;
+	line-height: 30px;
+	width: calc(100% - 130px);
+	padding: 15px 0 0;
+	display: inline-block;
+}
+.pricingTable .price-title b {
+	display: block;
+}
+.pricingTable .price-amount {
+	color: #3f64fa;
+	background: #fff;
+	font-size: 30px;
+	font-weight: 700;
+	line-height: 30px;
+	width: 120px;
+	height: 120px;
+	padding: 33px 10px 10px;
+	display: inline-block;
+	vertical-align: top;
+	clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
+	position: relative;
+	z-index: 1;
+}
+.pricingTable .price-amount:before,
+.pricingTable .price-amount:after {
+	content: "";
+	background: linear-gradient(-45deg, #5a98fb, #5a98fb, #3f64fa, #3f64fa);
+	width: calc(100% - 12px);
+	height: calc(100% - 12px);
+	transform: translateX(-50%) translateY(-50%);
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	z-index: -1;
+	clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
+}
+.pricingTable .price-amount:after {
+	background: #fff;
+	width: calc(100% - 16px);
+	height: calc(100% - 16px);
+}
+.pricingTable .price-amount .duration {
+	font-size: 16px;
+	font-weight: 600;
+	text-transform: capitalize;
+	display: block;
+}
+.pricingTable .pricingTable-signup a {
+	color: #fff;
+	font-size: 20px;
+	font-weight: 700;
+	letter-spacing: 2px;
+	text-transform: uppercase;
+	padding: 10px 20px;
+	border: 2px solid #fff;
+	border-radius: 50px;
+	display: inline-block;
+	transition: all 0.3s;
+}
+.pricingTable .pricingTable-signup a:hover {
+	text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
+	box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
+}
+.pricingTable.green:before,
+.pricingTable.green:after,
+.pricingTable.green .price-amount:before {
+	background: linear-gradient(-45deg, #76d243, #76d243, #109739, #109739);
+}
+.pricingTable.green .price-amount {
+	color: #109739;
+}
+.pricingTable.pink:before,
+.pricingTable.pink:after,
+.pricingTable.pink .price-amount:before {
+	background: linear-gradient(-45deg, #e969a6, #e969a6, #ed2e96, #ed2e96);
+}
+.pricingTable.pink .price-amount {
+	color: #ed2e96;
+}
+@media only screen and (max-width: 990px) {
+	.pricingTable {
+		margin: 0 0 40px;
+	}
+}
+// new user_profile
+.navbar {
+	background: none !important;
+}
+.arrowdoup{
+	transform: rotate(180deg);
+}
+.userprofile {
+	position: relative;
+	top: -80px;
+	z-index: 20;
+	.userprofile-content {
+		width: 83vw;
+		.user-information {
+		
+			.information {
+				width: 50%;
+				margin: 0 auto;
+				h1{
+					color:#707070;
+					font-size: 56px;
+				}
+				.share{
+					font-size: 16px;
+					a{
+						text-decoration: none;
+						color:#183790;
+
+					}
+				}
+			}
+			.card{
+				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+				border-radius: 15px;
+			}
+			.check-history{
+				cursor: pointer;
+			}
+			.historical-record{
+				th{
+					border-bottom: none !important;
+					color:#183790;
+					font-weight: 900;
+				}
+				td{
+					font-size: 15px;
+				}
+			}
+		}
+	}
+}
+
+// 側邊欄選單
+.sidenav {
+	height: 100%;
+	width: 250px;
+	position: fixed;
+	z-index: 50;
+	top: 0;
+	left: 0;
+	background: linear-gradient(to bottom, #1c7ce0, #150051);
+	overflow-x: hidden;
+	transition: 0.5s;
+	text-align: center;
+	hr {
+		background: #fff;
+		opacity: 1 !important;
+		height: 1px;
+		width: 85%;
+		margin: 15px auto;
+	}
+	.sidebar {
+		width: 80%;
+		margin: 0 auto;
+	}
+	.user {
+		object-fit: cover;
+		width: 100px;
+	}
+	.user-name {
+		font-size: 1.5rem;
+	}
+	.navbar-nav {
+		flex-direction: row;
+		.btn-gocreate {
+			font-size: 14px;
+			background: linear-gradient(90deg, #0162c8, #55e7fc);
+			// background:#31426C;
+			color: white;
+			border: 0 none;
+			border-radius: 10px;
+			cursor: pointer;
+			margin: 10px 3px;
+			display: inline;
+		}
+		.active {
+			background: linear-gradient(90deg, #0162c8, #55e7fc);
+		}
+	}
+	a {
+		text-decoration: none;
+		font-size: 32px;
+		color: #f1f1f1;
+		display: block;
+		transition: 0.3s;
+		&:hover {
+			color: #818181;
+		}
+	}
+
+	.sidenav .closebtn {
+		position: absolute;
+		top: 0;
+		right: 25px;
+		font-size: 36px;
+		margin-left: 50px;
+	}
+	.nav-list {
+		color: white;
+		list-style: none;
+		text-align: center;
+		.nav-list-item {
+			font-size: 1.2rem;
+			cursor: pointer;
+			position: relative;
+		}
+
+		.nav-list-item::after {
+			content: " ";
+			position: absolute;
+			width: 50%;
+			height: 100%;
+			left: 25%;
+			top: 5px;
+			border-bottom: 1px solid white;
+			opacity: 0;
+			transition: all 0.4s;
+		}
+
+		.nav-list-item:hover::after {
+			opacity: 1;
+		}
+	}
+	.right-text {
+		padding-top: 9vw;
+		color: #fff;
+		a {
+			font-size: 18px;
+			display: inline;
+			margin: 2px;
+			img {
+				filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
+			}
+		}
+	}
+}
+// 首頁價格介紹
+.price-int {
+	padding-bottom: 10vw;
+	.price-content {
+		width: 80vw;
+		@media screen and(max-width:767px) {
+			width: 90vw;
+		}
+		h1 {
+			text-align: center;
+			font-weight: 900;
+			font-size: 2rem;
+		}
+		.price-content-1 {
+			margin-top: 50px;
+			h2 {
+				margin-top: 15px;
+				font-weight: 600;
+				font-size: 1.3rem;
+				@media screen and(max-width:767px) {
+					font-size: 5.5vmin;
+				}
+			}
+			ul {
+				text-align: left;
+
+				li {
+					list-style-type: disc;
+					@media screen and(max-width:767px) {
+						font-size: 4.5vmin;
+					}
+				}
+			}
+			.price-text{
+				padding-left: 80px;
+			}
+		}
+		.get-started{
+			border:none;
+			border-radius: 3rem;
+			padding: 1rem 2.5rem;
+			background: linear-gradient(20deg, #EA5413, #920783);
+			color:#fff;
+			font-size: 1.2rem;
+			font-weight: 900;
+		}
+		p{
+			font-size: 24px;
+		}
+	}
+}
+// 頁尾
+.footer {
+	background-color: #F0F0F0;
+	padding:3rem;
+	padding-left: 13rem;
+	@media screen and(max-width:767px) {
+		padding: 0.5rem;
+		text-align: center;
+		padding-top: 3rem;
+		padding-left:0;
+	}
+	h5{
+		font-size: 16px;
+		font-weight: 700;
+		color:#555555;
+	}
+  }
+  
+  .footer .row{
+	display: flex;
+	align-items: center;
+  }
+  
+  .footer .footer-aigirl {
+	font-weight: 600;
+	font-size: 1.5rem;
+	margin-top: 1rem;
+	margin-bottom: 2.5rem;
+	color:#555555;
+	@media screen and(max-width:767px) {
+		font-size: 1.3rem;
+		margin-bottom: 2rem;
+	}
+  }
+  
+  .footer .footer-follow {
+	font-size: 1rem;
+	margin-bottom: 1rem;
+  }
+  .footer-socials{
+	@media screen and(max-width:767px) {
+		margin-bottom: 2rem;
+	}
+  }
+  .footer .footer-socials a{
+	margin-right: 5px;
+	@media screen and(max-width:767px) {
+		margin-right: 10px;
+	}
+  }
+  .footer-contacts{
+	@media screen and(max-width:767px) {
+		font-size: 14px;
+	}
   }

static/style.css → api/static/style.css

@@ -1,925 +1,925 @@
-@charset "UTF-8"; 
-/*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', sans-serif;
-	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: #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%;
-}
-
-.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;
-}
-.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;
-	display: flex;
-	font-size: .9rem;
-}
-
-.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 {
-	max-width: 1000px;
-	min-width: 370px;
-	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: 3rem 10%;
-	
-	/*stacking fieldsets above each other*/
-	position: relative;
-}
-/*Hide all except first fieldset*/
-
-/*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: #1C7CE0;
-	font-weight: bold;
-	color: white;
-	border: 0 none;
-	border-radius: 1px;
-	cursor: pointer;
-	padding: 10px 5px;
-	margin: 10px auto;
-	display: block;
-}
-#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;
-	text-transform: uppercase;
-	color: #2C3E50;
-	margin-bottom: 10px;
-}
-.fs-subtitle {
-	display: inline-block;
-	font-weight: normal;
-	font-size: 18px;
-	color: #666;
-	margin-bottom: 20px;
-	padding-bottom: 3px;
-	border-bottom: 2px solid #1C7CE0;
-	margin-left: 2rem;
-	margin-right: 2rem;
-}
-.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;
-	margin-bottom: 0;
-}
-
-#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;
-}
-
-#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;
-}
-
-#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: -.5rem;
-	right: 1.5rem;
-}
-
-.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;
-}
-
-.add, .addimg {
-	cursor: pointer;
-	display: inline-block;
-	width: 2rem;
-	height: 2rem;
-	background-color: #67abf3;
-	font-size: 1.2rem;
-	color: white;
-	border-radius: 50%;
-	transition: all .3s;
-}
-.add:hover, .addimg:hover {
-	background-color: #398ee9;
-}
-
-
-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;
-}
-
-.sidenav a {
-  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;
-}
-
-.container-login {
-	width: 100vw;
-    height: 100vh;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap :7rem;
-	padding: 0 2rem;
-}
-
-.navbar-nav button {
-	background: white;
-	border: none;
-	outline: none;
-}
-
-.img-wave {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	height: 100%;
-	z-index: -1;
-}
-
-.img-wave-profile {
-	height: 80%;
-}
-
-.row-img {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-}
-
-.row-login {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-	text-align: center;
-}
-
-.login-content {
-	width: 80%;
-	min-width: 350px;
-}
-
-.link_privacy {
-	color: black;
-}
-
-.login-content img {
-	height: 80px;
-}
-
-.row-img img {
-	width: 450px;
-}
-
-.login-content .form-floating input{
-	border: none;
-	border-bottom: 2px solid #d9d9d9;
-	border-radius: 0;
-}
-
-.login-content .form-floating input:focus{
-	box-shadow: none;
-}
-
-.login-content #btn_login {
-	background: linear-gradient(90deg, #0162c8, #55e7fc);
-	font-weight: bold;
-	color: white;
-	border: 0 none;
-	border-radius: 40px;
-	cursor: pointer;
-	padding: 10px 50px;
-	margin: 10px auto;
-	display: block;
-}
-
-.login-content #btn_login:hover {
-	box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
-}
-
-.login-content .nav-tabs {
-	border-bottom: none;
-}
-
-.login-content .nav {
-	flex-direction: column;
-	align-items: center;
-}
-
-.login-content .nav-tabs .nav-link {
-	color: grey;
-}
-
-.login-content .nav-tabs .nav-link.active {
-	border-color: #fff;
-	text-transform: uppercase;
-	color: black;
-}
-
-.navbar .btn-gocreate {
-	background: linear-gradient(90deg, #0162c8, #55e7fc);
-	color: white;
-	border: 0 none;
-	border-radius: 40px;
-	cursor: pointer;
-	padding: 10px 50px;
-}
-
-.container-profile {
-	width: 100vw;
-	height: 100vh;
-	overflow-y: hidden;
-}
-
-.container-bg {
-	position: absolute;
-	width: 600px;
-	height: 400px;
-	right: 0;
-	bottom: 0;
-}
-
-.container-profile .card-profile {
-	width: 25%;
-	min-width: 320px;
-	margin: auto;
-	margin-top: 4rem;
-	border-radius: 10px;
-	padding: 2rem;
-	text-align: center;
-	box-shadow: 0px 0px 20px 1px rgb(180, 180, 180);
-}
-
-.container-profile .card-profile img {
-	width: 120px;
-	margin: 1rem auto;
-}
-
-.card-profile-txt {
-	color: rgb(109, 109, 109);
-	font-size: 1.2rem;
-	font-weight: 500;
-}
-
-.card-profile-cnt {
-	font-size: 1.5rem;
-	font-weight: 700;
-}
-
-@media screen and (max-width: 900px){
-	.container-login{
-		grid-template-columns: 1fr;
-	}
-
-	.row-img{
-		display: none;
-	}
-
-	.img-wave {
-		display: none;
-	}
-
-	.row-login{
-		justify-content: center;
-	}
-	.container-bg {
-		width: 400px;
-		height: 300px;
-		right: 0;
-		bottom: 0;
-	}
-}
-
-@media screen and (max-height: 450px) {
-  .sidenav {padding-top: 15px;}
-  .sidenav a {font-size: 18px;}
-}
+@charset "UTF-8"; 
+/*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', sans-serif;
+	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: #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%;
+}
+
+.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;
+}
+.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;
+	display: flex;
+	font-size: .9rem;
+}
+
+.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 {
+	max-width: 1000px;
+	min-width: 370px;
+	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: 3rem 10%;
+	
+	/*stacking fieldsets above each other*/
+	position: relative;
+}
+/*Hide all except first fieldset*/
+
+/*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: #1C7CE0;
+	font-weight: bold;
+	color: white;
+	border: 0 none;
+	border-radius: 1px;
+	cursor: pointer;
+	padding: 10px 5px;
+	margin: 10px auto;
+	display: block;
+}
+#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;
+	text-transform: uppercase;
+	color: #2C3E50;
+	margin-bottom: 10px;
+}
+.fs-subtitle {
+	display: inline-block;
+	font-weight: normal;
+	font-size: 18px;
+	color: #666;
+	margin-bottom: 20px;
+	padding-bottom: 3px;
+	border-bottom: 2px solid #1C7CE0;
+	margin-left: 2rem;
+	margin-right: 2rem;
+}
+.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;
+	margin-bottom: 0;
+}
+
+#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;
+}
+
+#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;
+}
+
+#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: -.5rem;
+	right: 1.5rem;
+}
+
+.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;
+}
+
+.add, .addimg {
+	cursor: pointer;
+	display: inline-block;
+	width: 2rem;
+	height: 2rem;
+	background-color: #67abf3;
+	font-size: 1.2rem;
+	color: white;
+	border-radius: 50%;
+	transition: all .3s;
+}
+.add:hover, .addimg:hover {
+	background-color: #398ee9;
+}
+
+
+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;
+}
+
+.sidenav a {
+  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;
+}
+
+.container-login {
+	width: 100vw;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap :7rem;
+	padding: 0 2rem;
+}
+
+.navbar-nav button {
+	background: white;
+	border: none;
+	outline: none;
+}
+
+.img-wave {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	height: 100%;
+	z-index: -1;
+}
+
+.img-wave-profile {
+	height: 80%;
+}
+
+.row-img {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.row-login {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	text-align: center;
+}
+
+.login-content {
+	width: 80%;
+	min-width: 350px;
+}
+
+.link_privacy {
+	color: black;
+}
+
+.login-content img {
+	height: 80px;
+}
+
+.row-img img {
+	width: 450px;
+}
+
+.login-content .form-floating input{
+	border: none;
+	border-bottom: 2px solid #d9d9d9;
+	border-radius: 0;
+}
+
+.login-content .form-floating input:focus{
+	box-shadow: none;
+}
+
+.login-content #btn_login {
+	background: linear-gradient(90deg, #0162c8, #55e7fc);
+	font-weight: bold;
+	color: white;
+	border: 0 none;
+	border-radius: 40px;
+	cursor: pointer;
+	padding: 10px 50px;
+	margin: 10px auto;
+	display: block;
+}
+
+.login-content #btn_login:hover {
+	box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
+}
+
+.login-content .nav-tabs {
+	border-bottom: none;
+}
+
+.login-content .nav {
+	flex-direction: column;
+	align-items: center;
+}
+
+.login-content .nav-tabs .nav-link {
+	color: grey;
+}
+
+.login-content .nav-tabs .nav-link.active {
+	border-color: #fff;
+	text-transform: uppercase;
+	color: black;
+}
+
+.navbar .btn-gocreate {
+	background: linear-gradient(90deg, #0162c8, #55e7fc);
+	color: white;
+	border: 0 none;
+	border-radius: 40px;
+	cursor: pointer;
+	padding: 10px 50px;
+}
+
+.container-profile {
+	width: 100vw;
+	height: 100vh;
+	overflow-y: hidden;
+}
+
+.container-bg {
+	position: absolute;
+	width: 600px;
+	height: 400px;
+	right: 0;
+	bottom: 0;
+}
+
+.container-profile .card-profile {
+	width: 25%;
+	min-width: 320px;
+	margin: auto;
+	margin-top: 4rem;
+	border-radius: 10px;
+	padding: 2rem;
+	text-align: center;
+	box-shadow: 0px 0px 20px 1px rgb(180, 180, 180);
+}
+
+.container-profile .card-profile img {
+	width: 120px;
+	margin: 1rem auto;
+}
+
+.card-profile-txt {
+	color: rgb(109, 109, 109);
+	font-size: 1.2rem;
+	font-weight: 500;
+}
+
+.card-profile-cnt {
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+@media screen and (max-width: 900px){
+	.container-login{
+		grid-template-columns: 1fr;
+	}
+
+	.row-img{
+		display: none;
+	}
+
+	.img-wave {
+		display: none;
+	}
+
+	.row-login{
+		justify-content: center;
+	}
+	.container-bg {
+		width: 400px;
+		height: 300px;
+		right: 0;
+		bottom: 0;
+	}
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}

static/upload.js → api/static/upload.js

@@ -1,136 +1,136 @@
-
-$('input[type=file]').on('change', prepareUpload);
-
-// Grab the files and set them to our variable
-function prepareUpload(event) {
-  files = event.target.files;
-  var data = new FormData();
-  //data.append('file', $('.img_up1').prop('files')[0]);
-  data.append('file', files[0]);
-  // append other variables to data if you want: data.append('field_name_x', field_value_x);
-  $(this).next().text('');
-  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
-  $.ajax({
-    type: 'POST',
-    processData: false, // important
-    contentType: false, // important
-    data: data,
-    url: 'uploadmp3',
-    dataType: 'json',
-    success: function (jsonData) {
-      window.location.href = "/modifyScript?p="+jsonData;
-    },
-    error: function (error) {
-      alert('發生錯誤');
-    }
-  });
-}
-const button = document.querySelector('.next');
-
-$(".next").click(function () {
-  button.setAttribute('disabled', '');
-  setTimeout(function () {
-    button.removeAttribute('disabled')
-  }, 4000);
-  avatar = $('.avatar').val();
-  name_title = $('.title_new').val();
-  txtARR = [];
-  imgARR = [];
-  var step;
-  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, "client_id": client_id }
-  objstr = JSON.stringify(dataOBJ);
-  console.log(dataOBJ)
-  //alert('資料已送出! 請耐心等候')
-  $.ajax({
-    url: '/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) {
-      Swal.fire({
-        title: "資料已送出",
-        icon: 'success',
-        text: `${suc_data.msg}`,
-        confirmButtonColor: '#3085d6',
-      });  
-      },
-    //data:JSON.stringify({n1:"12",n2:"22"}),
-    error: function (error) {
-      console.error(error)
-    }
-  });
-  
-  });
-
-$(".gen_avatar").click(function () {
-
-  dataOBJ = { "imgurl": $('.imgsrc').val() }
-  objstr = JSON.stringify(dataOBJ);
-  console.log(dataOBJ)
-  //alert('資料已送出! 請耐心等候')
-  $.ajax({
-    url: '/swapFace',
-    dataType: 'json', // 預期從server接收的資料型態
-    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
-    type: 'post',
-    data: objstr,
-    success: function (suc_data) {
-      alert(suc_data.msg)
-    },
-    //data:JSON.stringify({n1:"12",n2:"22"}),
-    error: function (error) {
-      console.error(error)
-    }
-  });
-
-});
-
-
-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");
-
-  myModal.hide()
-  tid = event.srcElement.id
-  console.log(tid);
-  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;
-  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])
-  }
-
-}
+
+$('input[type=file]').on('change', prepareUpload);
+
+// Grab the files and set them to our variable
+function prepareUpload(event) {
+  files = event.target.files;
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'uploadmp3',
+    dataType: 'json',
+    success: function (jsonData) {
+      window.location.href = "/modifyScript?p="+jsonData;
+    },
+    error: function (error) {
+      alert('發生錯誤');
+    }
+  });
+}
+const button = document.querySelector('.next');
+
+$(".next").click(function () {
+  button.setAttribute('disabled', '');
+  setTimeout(function () {
+    button.removeAttribute('disabled')
+  }, 4000);
+  avatar = $('.avatar').val();
+  name_title = $('.title_new').val();
+  txtARR = [];
+  imgARR = [];
+  var step;
+  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, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  //alert('資料已送出! 請耐心等候')
+  $.ajax({
+    url: '/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) {
+      Swal.fire({
+        title: "資料已送出",
+        icon: 'success',
+        text: `${suc_data.msg}`,
+        confirmButtonColor: '#3085d6',
+      });  
+      },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
+  
+  });
+
+$(".gen_avatar").click(function () {
+
+  dataOBJ = { "imgurl": $('.imgsrc').val() }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
+  //alert('資料已送出! 請耐心等候')
+  $.ajax({
+    url: '/swapFace',
+    dataType: 'json', // 預期從server接收的資料型態
+    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
+    type: 'post',
+    data: objstr,
+    success: function (suc_data) {
+      alert(suc_data.msg)
+    },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
+
+});
+
+
+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");
+
+  myModal.hide()
+  tid = event.srcElement.id
+  console.log(tid);
+  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;
+  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])
+  }
+
+}

static/uploadmp3.html → api/static/uploadmp3.html

@@ -1,107 +1,107 @@
-<!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 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 PODCAST</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>
-      </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 id="msform">
-        <fieldset id='imgSrc'>
-          <h3 class="fs-subtitle" style="display: inline-block;">Podcast音檔上傳</h3><br/>
-          <input id="img1" type="file" class="img_uploader img_up "><label for="img1" class="upload-btn action-button">上傳檔案</label><br/>
-        
-
-        </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>
-  
-  <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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
-  <script src="static/upload.js"></script>
-
-
-  <body>
-
-</div>
-
-</body>
-</html>
+<!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 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 PODCAST</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>
+      </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 id="msform">
+        <fieldset id='imgSrc'>
+          <h3 class="fs-subtitle" style="display: inline-block;">Podcast音檔上傳</h3><br/>
+          <input id="img1" type="file" class="img_uploader img_up "><label for="img1" class="upload-btn action-button">上傳檔案</label><br/>
+        
+
+        </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>
+  
+  <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/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
+  <script src="static/upload.js"></script>
+
+
+  <body>
+
+</div>
+
+</body>
+</html>