side video

html/login.html

@@ -69,6 +69,9 @@
     <div class="container-fluid px-0">
         <div class="container-login">
             <div class="row-img">
+                <video autoplay loop class="video">
+                    <source src="static/img/登入影片.mp4" type="video/mp4">
+                </video>
                 <div class="row-img-box text-center">
                     <h2>將你的生活、創作 、宣傳做成影片</h2>
                     <h4>開始使用 AI Spokesgirl</h4>

html/static/script_util.js

@@ -1,22 +1,4 @@
-$(document).ready(function () {
-  let token = getCookie('jwt_token');
-  if(!token) {
-      return;
-  }
-  axios({
-    method: 'post',
-    url: 'http://www.choozmo.com:8887/user_profile',
-    headers: { 
-        'accept': 'text/html',
-        'Authorization': `Bearer ${token}`
-     }
-}).then(res => {
-  var userName='';
-  console.log(res.data.user_info.userName);
-  userName+=' <h2 class="user-name text-white mt-4 fw-bold">Hello,'+res.data.user_info.userName+'</h2>';
-  $('.userName').html(userName);
-  })
-});
+checkRoute();
 
 function checkRoute() {
   jwt_token = get_jwt_token();
@@ -35,13 +17,14 @@ function checkRoute() {
     if(res.status !== 200) {
       window.location.replace("login.html");
     }
+    var userName='';
+    userName+=' <h2 class="user-name text-white mt-4 fw-bold">Hello,'+res.data.user_info.userName+'</h2>';
+    $('.userName').html(userName);
   }).catch(err => {
     console.log(err);
   });
 }
 
-checkRoute();
-
 const btnLoginPage = document.querySelector('.btn-login');
 const btnUserProfile = document.querySelector('.btn-userProfile');
 const btnLogout = document.querySelector('.btn-logout');
@@ -312,7 +295,7 @@ var loaded_data = ''
 function openNav() {
   document.getElementById("mySidenav").style.width = "250px";
   document.querySelector('.loader').style.display = "block";
-  $.get("/history_input", function (data, status) {
+  $.get("http://www.choozmo.com:8887/history_input", function (data, status) {
     console.log(data)
     loaded_data = data
     for (var obj of data) {

html/static/scss/style.css

@@ -823,10 +823,19 @@ body {
   -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))), url("../img/sideImg.png");
-  background-image: linear-gradient(to right bottom, rgba(16, 68, 142, 0.7), rgba(16, 68, 142, 0.7)), url("../img/sideImg.png");
+  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 {

html/static/scss/style.scss

@@ -774,9 +774,17 @@ body {
 	background-image: linear-gradient(to right bottom,
     rgba(#10448E, 0.7),
     rgba(#10448E, 0.7)
-	), url('../img/sideImg.png');
+	);
 	background-size: cover;
-    background-position: center;
+	background-position: center;
+	overflow: hidden;
+	.video {
+		height: 100%;
+		z-index: -1;
+		position: absolute;
+		left: -10%;
+		top: 0;
+	}
 	.row-img-box {
 		color: white;
 	}