update

html/index_eng.html

@@ -124,7 +124,7 @@
                 <option value="12">Jocelyn</option>
                 <option value="13">Angela</option>
               </select>
-              <div class="d-flex">
+              <div class="d-flex row row-cols-2 row-cols-lg-6">
                 <div class="card col" data-avatar="Peggy" data-img="peggy">
                   <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
                   <div class="card-body">

html/make_video.html

@@ -148,7 +148,7 @@
                                 <option value="12">Jocelyn</option>
                                 <option value="13">Angela</option>
                             </select>
-                            <div class="d-flex row">
+                            <div class="d-flex row row-cols-2 row-cols-lg-6">
                                 <div class="card item col" data-avatar="Peggy" data-img="peggy">
                                     <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
                                     <div class="card-body">

html/script_profile.js

@@ -454,6 +454,6 @@ $( ".menu-bar" ).click(function() {
   $(".sidenav").show();
 });
 
-$( ".reply" ).click(function() {
+$( ".close-btn" ).click(function() {
   $(".sidenav").hide();
 });

html/static/lan.js

@@ -57,6 +57,7 @@ var zh = {
     "login_link" : "立即登入",
     "user_profile": "會員資料",
     "logout": "登出",
+    "logout-m": "<i class='fas fa-sign-out-alt text-white me-3'></i>登&emsp;&ensp;出",
     "en": "English",
     "zh": "中文",
     "choose_character": "選擇人物",
@@ -81,6 +82,7 @@ var zh = {
     "goRegister": "註冊",
     "goRegister_link": "立即註冊",
     "pricing" : "早鳥方案",
+    "pricing-m" : "<i class='fas fa-tags me-2'></i>&ensp;早鳥方案",
     "errorEmail": "請輸入正確E-mail",
     "errorPsd": "密碼至少為4個字元",
     "used": "已使用",

html/static/scss/style.css

@@ -53,6 +53,18 @@ body {
   background-color: white;
 }
 
+@media screen and (min-width: 1025px) {
+  .navbar .menu-bar {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .navbar-des {
+    display: none;
+  }
+}
+
 /* .imf {
 	position: fixed;
 	top: 0;
@@ -261,7 +273,7 @@ body {
   height: 50px;
   border-radius: 50%;
   overflow: hidden;
-  margin: auto .5rem;
+  margin: auto 0.5rem;
 }
 
 .listimg__fr img {
@@ -355,8 +367,8 @@ body {
   left: 1rem;
   bottom: 1rem;
   font-size: 1rem;
-  -webkit-transition: all .3s;
-  transition: all .3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
   cursor: pointer;
 }
 
@@ -824,18 +836,26 @@ 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;
+#mySidenav::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #F5F5F5;
+}
+
+#mySidenav::-webkit-scrollbar {
+  width: 12px;
+  background-color: #F5F5F5;
+  display: none;
+}
+
+#mySidenav::-webkit-scrollbar:hover {
+  display: block;
+}
+
+#mySidenav::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #AAA;
 }
 
 .sidenav a {
@@ -1467,34 +1487,40 @@ body {
 
 .sidenav {
   width: 250px;
+  position: fixed;
   height: 100%;
   z-index: 50;
   top: 0;
-  left: 0;
   overflow-x: hidden;
   -webkit-transition: 0.5s;
   transition: 0.5s;
   text-align: center;
+  background: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051));
+  background: linear-gradient(to bottom, #1c7ce0, #150051);
+}
+
+@media screen and (min-width: 1025px) {
+  .sidenav {
+    left: 0;
+  }
 }
 
 @media screen and (max-width: 767px) {
   .sidenav {
     display: none;
+    right: 0px;
   }
 }
 
-@media only screen and (min-width: 1439px) {
-  .sidenav .sidenav-content {
-    -webkit-transform: scale(1);
-            transform: scale(1);
+@media screen and (min-width: 1025px) {
+  .sidenav .sidenav-content .close-btn {
+    opacity: 0;
   }
 }
 
-@media only screen and (max-width: 1280px) {
-  .sidenav .sidenav-content {
-    margin-top: -50px;
-    -webkit-transform: scale(0.85);
-            transform: scale(0.85);
+@media screen and (min-width: 1025px) {
+  .sidenav .sidenav-content .Mobile-nav {
+    display: none;
   }
 }
 
@@ -1624,18 +1650,10 @@ body {
 }
 
 .sidenav .right-text {
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  padding-top: 150px;
   color: #fff;
 }
 
-@media only screen and (max-width: 1280px) {
-  .sidenav .right-text {
-    left: 10px;
-  }
-}
-
 .sidenav .right-text a {
   font-size: 16px;
   display: inline;
@@ -1711,7 +1729,7 @@ body {
   border: none;
   border-radius: 3rem;
   padding: 1rem 2.5rem;
-  background: linear-gradient(20deg, #EA5413, #920783);
+  background: linear-gradient(20deg, #ea5413, #920783);
   color: #fff;
   font-size: 1.2rem;
   font-weight: 900;
@@ -1722,7 +1740,7 @@ body {
 }
 
 .footer {
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
   padding: 3rem;
   padding-left: 13rem;
 }

html/static/scss/style.scss

@@ -54,8 +54,18 @@ body {
 
 .navbar {
 	background-color: white;
+	.menu-bar{
+		@media screen and(min-width:$desktop) {
+			display: none;
+		}
+	}
 }
 
+.navbar-des{
+	@media screen and(max-width:$moblie) {
+		display: none;
+	}
+}
 /* .imf {
 	position: fixed;
 	top: 0;
@@ -252,7 +262,7 @@ body {
 	height: 50px;
 	border-radius: 50%;
 	overflow: hidden;
-	margin: auto .5rem;
+	margin: auto 0.5rem;
 }
 
 .listimg__fr img {
@@ -288,7 +298,6 @@ body {
 		width: 90%;
 		margin: 3rem auto;
 		padding: 10px 15px;
-		
 	}
 }
 /*Hide all except first fieldset*/
@@ -336,7 +345,7 @@ body {
 	left: 1rem;
 	bottom: 1rem;
 	font-size: 1rem;
-	transition: all .3s;
+	transition: all 0.3s;
 	cursor: pointer;
 	&:hover {
 		background-color: rgb(170, 170, 170);
@@ -727,7 +736,6 @@ footer {
 	margin-right: 5px;
 	@media screen and(max-width:$moblie) {
 		margin-right: 15px;
-		
 	}
 }
 
@@ -774,17 +782,42 @@ footer {
 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;
+
+
+#mySidenav::-webkit-scrollbar-track{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 10px;
+	background-color: #F5F5F5;
+}
+
+#mySidenav::-webkit-scrollbar{
+	width: 12px;
+	background-color: #F5F5F5;
+	display: none;
+
+}
+
+#mySidenav::-webkit-scrollbar:hover{
+	display: block;
 }
+#mySidenav::-webkit-scrollbar-thumb{
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #AAA;
+}
+
+// .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;
@@ -986,7 +1019,6 @@ body {
 	padding: 10px 50px;
 }
 
-
 .container-bg {
 	position: absolute;
 	width: 600px;
@@ -1224,15 +1256,15 @@ body {
 }
 // new user_profile
 
-.profile-bgimg{
+.profile-bgimg {
 	@media screen and(max-width:$moblie) {
 		width: 100%;
 		height: 300px;
 		object-fit: cover;
 		display: none;
-	 }
+	}
 }
-.profile-bgimg-m{
+.profile-bgimg-m {
 	@media screen and(min-width:$desktop) {
 		display: none;
 	}
@@ -1240,7 +1272,7 @@ body {
 .navbar {
 	background: none !important;
 }
-.arrowdoup{
+.arrowdoup {
 	transform: rotate(180deg);
 }
 .arrowdown {
@@ -1251,66 +1283,64 @@ body {
 	top: -80px;
 	z-index: 20;
 	@media screen and(max-width:$moblie) {
-       top:10px;
-	  z-index: 0;
-    }
+		top: 10px;
+		z-index: 0;
+	}
 	.userprofile-content {
 		width: 83vw;
 		@media screen and(max-width:$moblie) {
 			width: 95vw;
-		 }
+		}
 		.user-information {
-		
 			.information {
 				width: 50%;
 				margin: 0 auto;
 				@media screen and(max-width:$moblie) {
 					width: 100%;
-				 }
-				h1{
-					color:#707070;
+				}
+				h1 {
+					color: #707070;
 					font-size: 56px;
 				}
-				.share{
+				.share {
 					font-size: 16px;
-					.facebook{
+					.facebook {
 						@media screen and(max-width:$moblie) {
-							left:15px;
-							top:1px;
-						 }
+							left: 15px;
+							top: 1px;
+						}
 					}
-					a{
+					a {
 						text-decoration: none;
-						color:#183790;
-
+						color: #183790;
 					}
 				}
 			}
-			.card{
+			.card {
 				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 				border-radius: 15px;
 			}
-			.check-history{
+			.check-history {
 				cursor: pointer;
 			}
-			.historical-record{
-				th{
+			.historical-record {
+				th {
 					border-bottom: none !important;
-					color:#183790;
+					color: #183790;
 					font-weight: 900;
 				}
-				td{
+				td {
 					font-size: 15px;
 				}
 			}
 			.draft {
-				color:#183790;
+				color: #183790;
 				font-weight: 900;
 			}
 			.draft-table {
 				th {
 					border-bottom: none !important;
-					color:#183790;
+					color: #183790;
 					font-weight: 900;
 				}
 				.draft-content {
@@ -1326,31 +1356,46 @@ body {
 // 側邊欄選單
 .sidenav {
 	width: 250px;
-	// position: fixed;
+	position: fixed;
 	height: 100%;
 	z-index: 50;
 	top: 0;
-	left: 0;	
 	overflow-x: hidden;
 	transition: 0.5s;
 	text-align: center;
+	background: linear-gradient(to bottom, #1c7ce0, #150051);
+	
+	@media screen and(min-width:$desktop) {
+		left: 0;
+	}
 	@media screen and(max-width:767px) {
-        display: none;
-    }
-	.sidenav-content{
-		@media only screen and (min-width: 1439px) {
-			transform: scale(1);
+		display: none;
+		right: 0px;
+	}
+	.sidenav-content {
+		// @media only screen and (min-width: 1439px) {
+		// 	transform: scale(1);
+		// }
+		// @media only screen and (max-width: 1280px) {
+		// 	margin-top: -50px;
+		// 	transform: scale(0.85);
+		// }
+		.close-btn{
+			@media screen and(min-width:$desktop) {
+				opacity: 0;
+			}
 		}
-		@media only screen and (max-width: 1280px) {
-			margin-top: -50px;
-			transform: scale(0.85);
+		.Mobile-nav{
+			@media screen and(min-width:$desktop) {
+				display: none;
+			}
 		}
-	.choozmologo{
-		@media screen and(max-width:$moblie) {
-			margin-top: 10px;
-		 }
-	}
-		.reply{
+		.choozmologo {
+			@media screen and(max-width:$moblie) {
+				margin-top: 10px;
+			}
+		}
+		.reply {
 			margin-left: 70px;
 			@media screen and(min-width:$desktop) {
 				display: none;
@@ -1420,12 +1465,11 @@ body {
 		color: white;
 		list-style: none;
 		text-align: center;
-	
+
 		.nav-list-item {
 			font-size: 18px;
 			cursor: pointer;
 			position: relative;
-		
 		}
 
 		.nav-list-item::after {
@@ -1445,23 +1489,24 @@ body {
 		}
 	}
 	.right-text {
-		position: absolute;
-		bottom: 0;
-		left: 0;
+		padding-top: 150px;
+		// position: absolute;
+		// bottom: 0;
+		// left: 0;
 		color: #fff;
 		@media only screen and (max-width: 1280px) {
-			left: 10px;
+			// left: 10px;
 		}
 		a {
 			font-size: 16px;
 			display: inline;
 			margin: 2px;
-			
+
 			img {
 				filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
 			}
 		}
-		p{
+		p {
 			@media only screen and (max-width: 1280px) {
 				font-size: 16px;
 			}
@@ -1501,76 +1546,76 @@ body {
 					}
 				}
 			}
-			.price-text{
+			.price-text {
 				padding-left: 80px;
 			}
 		}
-		.get-started{
-			border:none;
+		.get-started {
+			border: none;
 			border-radius: 3rem;
 			padding: 1rem 2.5rem;
-			background: linear-gradient(20deg, #EA5413, #920783);
-			color:#fff;
+			background: linear-gradient(20deg, #ea5413, #920783);
+			color: #fff;
 			font-size: 1.2rem;
 			font-weight: 900;
 		}
-		p{
+		p {
 			font-size: 24px;
 		}
 	}
 }
 // 頁尾
 .footer {
-	background-color: #F0F0F0;
-	padding:3rem;
+	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;
+		padding-left: 0;
 	}
-	h5{
+	h5 {
 		font-size: 16px;
 		font-weight: 700;
-		color:#555555;
+		color: #555555;
 	}
-  }
-  
-  .footer .row{
+}
+
+.footer .row {
 	display: flex;
 	align-items: center;
-  }
-  
-  .footer .footer-aigirl {
+}
+
+.footer .footer-aigirl {
 	font-weight: 600;
 	font-size: 1.5rem;
 	margin-top: 1rem;
 	margin-bottom: 2.5rem;
-	color:#555555;
+	color: #555555;
 	@media screen and(max-width:767px) {
 		font-size: 1.3rem;
 		margin-bottom: 2rem;
 	}
-  }
-  
-  .footer .footer-follow {
+}
+
+.footer .footer-follow {
 	font-size: 1rem;
 	margin-bottom: 1rem;
-  }
-  .footer-socials{
+}
+.footer-socials {
 	@media screen and(max-width:767px) {
 		margin-bottom: 2rem;
 	}
-  }
-  .footer .footer-socials a{
+}
+.footer .footer-socials a {
 	margin-right: 5px;
 	@media screen and(max-width:767px) {
 		margin-right: 10px;
 	}
-  }
-  .footer-contacts{
+}
+.footer-contacts {
 	@media screen and(max-width:767px) {
 		font-size: 14px;
 	}
-  }
+}

html/user_profile2.html

@@ -29,47 +29,50 @@
 </head>
 
 <body>
-    <div style="overflow-x: hidden;">
+    <div class="body-content" style="overflow-x: hidden;">
         <div class="card">
             <img class="profile-bgimg img-fluid" src="./static/img/nav-bg.png" class="card-img" alt="...">
-            <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img" alt="...">
+            <img class="profile-bgimg-m img-fluid" src="./static/img/userprofile/banner-m.png" class="card-img"
+                alt="...">
 
             <div class="card-img-overlay pt-2 py-lg-3">
                 <nav class="navbar navbar-expand-lg navbar-light pt-0">
                     <div class="navbar-collapse d-flex" id="navbarSupportedContent">
-                            <span class="menu-bar" style="font-size: 32px;"><i class="fas fa-bars text-white"></i></span>
-                            <ul style="flex-direction: row" class="navbar-nav ms-auto mb-2 mb-lg-0 mt-2">
-                                <li class="nav-item me-3">
-                                    <a class="nav-link active text-white" aria-current="page" href="pricing.html"
-                                        set-lan="html:pricing">早鳥方案</a>
-                                </li>
-                                <li class="nav-item dropdown me-3 me-lg-1">
-                                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown"
-                                        role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                        中/En
-                                    </a>
-                                    <ul class="dropdown-menu text-white" aria-labelledby="navbarDropdown">
-                                        <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
-                                                onclick="changeLan(this)" value="en">English</button></li>
-                                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
-                                                onclick="changeLan(this)" value="zh">中文</button></li>
-                                    </ul>
-                                </li>
-                                <li class="nav-item me-2 me-lg-1">
-                                    <a class="nav-link btn-userProfile text-white" aria-current="page"
-                                        href="user_profile2.html" set-lan="html:user_profile">會員資料</a>
-                                </li>
-                                <li class="nav-item me-2 me-lg-1">
-                                    <a class="nav-link active btn-login text-white" aria-current="page"
-                                        href="login.html" set-lan="html:login">登入</a>
-                                </li>
-                                <li class="nav-item text-white me-2 me-lg-1">
-                                    <a class="nav-link btn-logout text-white" aria-current="page"
-                                        set-lan="html:logout">登出</a>
-                                </li>
-                            </ul>
-                        </div>
-                    
+                        <img width="150" src="./static/img/contactus/CMM_LOGO.png" alt="">
+                        <ul style="flex-direction: row" class="navbar-des navbar-nav ms-auto mb-2 mb-lg-0 mt-2">
+                            <li class="nav-item me-3">
+                                <a class="nav-link active text-white" aria-current="page" href="pricing.html"
+                                    set-lan="html:pricing">早鳥方案</a>
+                            </li>
+                            <li class="nav-item dropdown me-3 me-lg-1">
+                                <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown"
+                                    role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                    中/En
+                                </a>
+                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                    <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en"
+                                            onclick="changeLan(this)" value="en">English</button></li>
+                                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
+                                            onclick="changeLan(this)" value="zh">中文</button></li>
+                                </ul>
+                            </li>
+                            <li class="nav-item me-2 me-lg-1">
+                                <a class="nav-link btn-userProfile text-white" aria-current="page"
+                                    href="user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                            </li>
+                            <li class="nav-item me-2 me-lg-1">
+                                <a class="nav-link active btn-login text-white" aria-current="page" href="login.html"
+                                    set-lan="html:login">登入</a>
+                            </li>
+                            <li class="nav-item text-white me-2 me-lg-1">
+                                <a class="nav-link btn-logout text-white" aria-current="page"
+                                    set-lan="html:logout">登出</a>
+                            </li>
+                        </ul>
+                        <span class="menu-bar ms-auto" style="font-size: 32px;"><i
+                                class="fas fa-bars text-white"></i></span>
+                    </div>
+
                 </nav>
             </div>
         </div>
@@ -78,19 +81,20 @@
 
         <!-- ================================================================= -->
         <!-- content -->
-        <div class="container-fluid px-0">
+        <div id="content-box" class="container-fluid px-0">
             <div class="row px-0 mx-0">
-                <div class="col-lg-2">
+                <div class="sidenav-box col-lg-2">
                     <div id="mySidenav" class="sidenav container-fluid px-0">
                         <div class="sidenav-content">
-                            <div class="text-start mt-3">
-                                <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-1" aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                            <div style="font-size: 20px;" class="close-btn text-end">
+                                <i class="fas fa-times text-white me-3 mt-3"></i>
+                            </div>
+                            <div class="text-start">
+                                <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-3 pt-0"
+                                        aria-current="page" href="index.html">AI Spokesgirl</a></h2>
                             </div>
                             <div class="choozmologo text-start">
                                 <!-- <a class="navbar-brand pb-0 d-inline" href="index.html"><img class="img-fluid" style="width: 120px;" src="./static/img//contactus/CMM_LOGO.png" alt=""></a> -->
-                                <span class="reply ms-5" style="font-size: 32px;">
-                                    <i class="fas fa-reply text-white"></i>
-                                </span>
                             </div>
                             <div class="userName"></div>
                             <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png"
@@ -108,7 +112,6 @@
                                 <a class="nav-link btn-gocreate text-white col-6 btn-makeen" aria-current="page"
                                     href="./index_eng.html" set-lan="html:make_video_eng">純英文影片製作</a>
                             </div>
-
                             <hr>
                             <ul class="nav-list ps-0">
                                 <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
@@ -126,6 +129,32 @@
                                     <i class="fas fa-history me-2"></i>
                                     <lan set-lan="html:history">歷史紀錄</lan>
                                 </li>
+                                <div class="Mobile-nav">
+                                    <hr>
+                                  
+                                    <a style="font-size: 18px;" class="text-white"
+                                    aria-current="page" href="pricing.html" set-lan="html:pricing-m">早鳥方案</a>
+
+                                    <li class="nav-list-item dropdown me-lg-1">
+                                        <a style="font-size: 18px;" class="nav-link dropdown-toggle text-white" href="#"
+                                            id="navbarDropdownM" role="button" data-bs-toggle="dropdown"
+                                            aria-expanded="false">
+                                            <i class="fas fa-globe text-white me-3"></i>中/En
+                                        </a>
+                                        <ul class="dropdown-menu bg-transparent" aria-labelledby="navbarDropdownM">
+                                            <li><button class="nav-link lan-swtich" aria-current="page"
+                                                    set-lan="html:en" onclick="changeLan(this)"
+                                                    value="en">English</button></li>
+                                            <li><button class="nav-link lan-switch" aria-current="page"
+                                                    set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li class="nav-item text-white  me-lg-1">
+                                        <a style="font-size: 18px;" class="nav-link btn-logout text-white"
+                                            aria-current="page" set-lan="html:logout-m">登出</a>
+                                    </li>
+                                </div>
                             </ul>
                         </div>
                         <div class="right-text">