jeter20131220 пре 3 година
родитељ
комит
55625fe0dc

+ 11 - 2
html/script_profiles.js

@@ -108,7 +108,7 @@ function renderView() {
         let infContent=`
         <div class="inf-content">
             <p>${userInfo.user_info.userName}</p>
-            <p>***************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
+            <p>************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
             <p>${userInfo.user_info.email}</p>
         </div>`;
         if(lang == 'en') {
@@ -439,4 +439,13 @@ function trialEnd() {
 
 
 var screenWidth = screen.width;
-console.log(screenWidth)
+console.log(screenWidth)
+
+
+$( ".menu-bar" ).click(function() {
+  $(".sidenav").show();
+});
+
+$( ".reply" ).click(function() {
+  $(".sidenav").hide();
+});

BIN
html/static/img/userprofile/banner-m.png


+ 1 - 1
html/static/lan.js

@@ -126,7 +126,7 @@ var zh = {
     "no_draft": "目前沒有草稿喔",
     "trial_title": "想要免費獲得更多時間額度?",
     "trial_txt": "透過社群分享專屬連結,邀請好友註冊 AI Spokesgirl,凡是好友透過連結註冊成功,您可以免費獲得2分鐘製作額度。",
-    "share": "分享:",
+    "share": "分享",
     "close": "關閉"
 };
 

+ 73 - 3
html/static/scss/style.css

@@ -1332,6 +1332,22 @@ body {
   }
 }
 
+@media screen and (max-width: 767px) {
+  .profile-bgimg {
+    width: 100%;
+    height: 300px;
+    -o-object-fit: cover;
+       object-fit: cover;
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  .profile-bgimg-m {
+    display: none;
+  }
+}
+
 .navbar {
   background: none !important;
 }
@@ -1351,15 +1367,34 @@ body {
   z-index: 20;
 }
 
+@media screen and (max-width: 767px) {
+  .userprofile {
+    top: 10px;
+    z-index: 0;
+  }
+}
+
 .userprofile .userprofile-content {
   width: 83vw;
 }
 
+@media screen and (max-width: 767px) {
+  .userprofile .userprofile-content {
+    width: 95vw;
+  }
+}
+
 .userprofile .userprofile-content .user-information .information {
   width: 50%;
   margin: 0 auto;
 }
 
+@media screen and (max-width: 767px) {
+  .userprofile .userprofile-content .user-information .information {
+    width: 100%;
+  }
+}
+
 .userprofile .userprofile-content .user-information .information h1 {
   color: #707070;
   font-size: 56px;
@@ -1369,6 +1404,13 @@ body {
   font-size: 16px;
 }
 
+@media screen and (max-width: 767px) {
+  .userprofile .userprofile-content .user-information .information .share .facebook {
+    left: 15px;
+    top: 1px;
+  }
+}
+
 .userprofile .userprofile-content .user-information .information .share a {
   text-decoration: none;
   color: #183790;
@@ -1421,6 +1463,12 @@ body {
   text-align: center;
 }
 
+@media screen and (max-width: 767px) {
+  .sidenav {
+    display: none;
+  }
+}
+
 @media only screen and (min-width: 1439px) {
   .sidenav .sidenav-content {
     -webkit-transform: scale(1);
@@ -1430,9 +1478,25 @@ body {
 
 @media only screen and (max-width: 1280px) {
   .sidenav .sidenav-content {
-    margin-top: -40px;
-    -webkit-transform: scale(0.9);
-            transform: scale(0.9);
+    margin-top: -50px;
+    -webkit-transform: scale(0.85);
+            transform: scale(0.85);
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .sidenav .sidenav-content .choozmologo {
+    margin-top: 10px;
+  }
+}
+
+.sidenav .sidenav-content .reply {
+  margin-left: 70px;
+}
+
+@media screen and (min-width: 1025px) {
+  .sidenav .sidenav-content .reply {
+    display: none;
   }
 }
 
@@ -1455,6 +1519,12 @@ body {
   width: 8vw;
 }
 
+@media screen and (max-width: 767px) {
+  .sidenav .user {
+    width: 30vw;
+  }
+}
+
 .sidenav .user-name {
   font-size: 1.5rem;
 }

Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
html/static/scss/style.css.map


+ 51 - 4
html/static/scss/style.scss

@@ -8,6 +8,8 @@
 	margin: 0;
 	padding: 0;
 }
+$moblie: 767px;
+$desktop: 1025px;
 
 html {
 	min-height: 100%;
@@ -1211,6 +1213,20 @@ body {
 	}
 }
 // new user_profile
+
+.profile-bgimg{
+	@media screen and(max-width:$moblie) {
+		width: 100%;
+		height: 300px;
+		object-fit: cover;
+		display: none;
+	 }
+}
+.profile-bgimg-m{
+	@media screen and(min-width:$desktop) {
+		display: none;
+	}
+}
 .navbar {
 	background: none !important;
 }
@@ -1224,19 +1240,35 @@ body {
 	position: relative;
 	top: -80px;
 	z-index: 20;
+	@media screen and(max-width:$moblie) {
+       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;
 					font-size: 56px;
 				}
 				.share{
 					font-size: 16px;
+					.facebook{
+						@media screen and(max-width:$moblie) {
+							left:15px;
+							top:1px;
+						 }
+					}
 					a{
 						text-decoration: none;
 						color:#183790;
@@ -1292,16 +1324,28 @@ body {
 	overflow-x: hidden;
 	transition: 0.5s;
 	text-align: center;
+	@media screen and(max-width:767px) {
+        display: none;
+    }
 	.sidenav-content{
 		@media only screen and (min-width: 1439px) {
 			transform: scale(1);
 		}
 		@media only screen and (max-width: 1280px) {
-			margin-top: -40px;
-			transform: scale(0.9);
+			margin-top: -50px;
+			transform: scale(0.85);
+		}
+	.choozmologo{
+		@media screen and(max-width:$moblie) {
+			margin-top: 10px;
+		 }
+	}
+		.reply{
+			margin-left: 70px;
+			@media screen and(min-width:$desktop) {
+				display: none;
+			}
 		}
-	
-
 	}
 	hr {
 		background: #fff;
@@ -1317,6 +1361,9 @@ body {
 	.user {
 		object-fit: cover;
 		width: 8vw;
+		@media screen and(max-width:767px) {
+			width: 30vw;
+		}
 	}
 	.user-name {
 		font-size: 1.5rem;

+ 320 - 255
html/user_profile2.html

@@ -6,309 +6,374 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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="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 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/owl.carousel.min.css">
     <link rel="stylesheet" href="static/owl.theme.default.min.css">
     <link rel="stylesheet" href="static/scss/style.css">
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v12.0&appId=831591714123614&autoLogAppEvents=1" nonce="lDAd6vGz"></script>
+    <script async defer crossorigin="anonymous"
+        src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v12.0&appId=831591714123614&autoLogAppEvents=1"
+        nonce="lDAd6vGz"></script>
     <title>AI Spokesgirl</title>
 </head>
 
 <body>
-    <!-- ================================================================= -->
-    <!-- navbar -->
-    <div class="card">
-        <img class="img-fluid" src="./static/img/nav-bg.png" class="card-img" alt="...">
-        <div class="card-img-overlay">
-            <nav class="navbar navbar-expand-lg navbar-light pt-0">
-                <div class="container-fluid px-0 pt-2">
-                    <a class="navbar-brand" href="index.html">AI Spokesgirl</a>
-                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
-                        aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
-                    <div class="collapse navbar-collapse" id="navbarSupportedContent">  
-                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                            <li class="nav-item">
-                                <a class="nav-link active text-white" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
-                            </li>
-                            <li class="nav-item dropdown">
-                                <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">
-                                <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">
-                                <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">
-                                <a class="nav-link btn-logout text-white" aria-current="page" set-lan="html:logout">登出</a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </nav>
+    <div 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="...">
+
+            <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>
+                    
+                </nav>
+            </div>
         </div>
-      </div>
-    <!-- ================================================================= -->
+        <!-- ================================================================= -->
 
 
-    <!-- ================================================================= -->
-    <!-- content -->
-    <div class="container-fluid px-0">
-        <div class="row px-0 mx-0">
-            <div class="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>
-                        <div class="userName"></div> 
-                        <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png" alt="">
-                        <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</p>
-                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
-                            <a class="nav-link btn-gocreate text-white col-6 btn-makev" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
-                            <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+        <!-- ================================================================= -->
+        <!-- content -->
+        <div class="container-fluid px-0">
+            <div class="row px-0 mx-0">
+                <div class="col-lg-2">
+                    <div id="mySidenav" class="sidenav container-fluid px-0">
+                        <div class="sidenav-content">
+                            <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>
+
+                                <h2 class="fw-bold ps-0 mt-0" href="index.html"><a class="nav-link active ps-1"
+                                        aria-current="page" href="index.html">AI Spokesgirl</a></h2>
+                            </div>
+                            <div class="userName"></div>
+                            <img class="user img-fluid rounded-circle" src="./static/img/userprofile/userimg.png"
+                                alt="">
+                            <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</p>
+                            <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                                <a class="nav-link btn-gocreate text-white col-6 btn-makev" aria-current="page"
+                                    href="./make_video.html" set-lan="html:make_video">影片製作</a>
+                                <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page"
+                                    href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                            </div>
+                            <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                                <a class="nav-link btn-gocreate text-white col-6 btn-makeppt" aria-current="page"
+                                    href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
+                                <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
+                                        class="fas fa-book-open me-2"></i>
+                                    <lan set-lan="html:usage_intro">使用說明</lan>
+                                </li>
+                                <a style="text-decoration: none;color:white;" href="./user_profile2.html">
+                                    <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
+                                        <i class="fas fa-user me-2"></i>
+                                        <lan set-lan="html:user_profile">會員資料</lan>
+                                    </li>
+                                </a>
+                                <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>
+                                    <lan set-lan="html:history">歷史紀錄</lan>
+                                </li>
+                            </ul>
                         </div>
-                        <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
-                            <a class="nav-link btn-gocreate text-white col-6 btn-makeppt" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
-                            <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 class="right-text">
+                            <a target="_blank" href="http://www.choozmo.com/">| 官網 |</a>
+                            <a target="_blank" href="https://www.linkedin.com/company/choozmo/mycompany/"><img
+                                    style="width: 20px;" src="./static/img/contactus/linkedin-logo-copy.png" alt=""></a>
+                            <a target="_blank" href="https://www.facebook.com/choozmo/"><img style="width: 20px;"
+                                    src="./static/img/contactus/facebook_logos_PNG19753.png" alt=""></a>
+                            <a target="_blank" href="https://www.instagram.com/choozmo_cmm/"><img style="width: 20px;"
+                                    src="./static/img/contactus/IG.png" alt=""></a>
+                            <a target="_blank" href="https://line.me/R/ti/p/@choozmo?from=page"><img
+                                    style="width: 20px;" src="./static/img/contactus/LINE_logo.svg.png" alt=""></a>
+                            <a target="_blank" href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
+                                    style="width: 20px;" src="./static/img/contactus/youtube.png" alt=""></a>
+                            <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
+                                    src="./static/img/contactus/twitter.png" alt=""></a>
+                            <p class="Reserved text-white text-start mt-3 ps-2">Choozmo All Rights Reserved</p>
                         </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
-                                    class="fas fa-book-open me-2"></i>
-                                <lan set-lan="html:usage_intro">使用說明</lan>
-                            </li>
-                            <a style="text-decoration: none;color:white;" href="./user_profile2.html">
-                                <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
-                                    <i class="fas fa-user me-2"></i>
-                                   <lan set-lan="html:user_profile">會員資料</lan>
-                                </li>
-                            </a>
-                            <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>
-                                <lan set-lan="html:history">歷史紀錄</lan>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="right-text">
-                    <a target="_blank" href="http://www.choozmo.com/">| 官網 |</a>
-                        <a target="_blank" href="https://www.linkedin.com/company/choozmo/mycompany/"><img
-                                style="width: 20px;" src="./static/img/contactus/linkedin-logo-copy.png" alt=""></a>
-                        <a target="_blank" href="https://www.facebook.com/choozmo/"><img style="width: 20px;"
-                                src="./static/img/contactus/facebook_logos_PNG19753.png" alt=""></a>
-                        <a target="_blank" href="https://www.instagram.com/choozmo_cmm/"><img style="width: 20px;"
-                                src="./static/img/contactus/IG.png" alt=""></a>
-                        <a target="_blank" href="https://line.me/R/ti/p/@choozmo?from=page"><img style="width: 20px;"
-                                src="./static/img/contactus/LINE_logo.svg.png" alt=""></a>
-                        <a target="_blank" href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
-                                style="width: 20px;" src="./static/img/contactus/youtube.png" alt=""></a>
-                        <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
-                                src="./static/img/contactus/twitter.png" alt=""></a>
-                        <p class="Reserved text-white text-start mt-3 ps-2">Choozmo All Rights Reserved</p>
                     </div>
                 </div>
-            </div>
-            <div class="col-lg-10">
-                <div class="userprofile d-flex justify-content-end">
-                    <div class="userprofile-content">
-                        <div class="user-information">
-                            <div class="user-img text-center">
-                                <img style="width: 160px;" src="./static/img/userprofile/userimg.png" alt="">
-                            </div>
-                            <div class="information">
-                                <div class="row px-0 mx-0 mt-4">
-                                    <div style="letter-spacing: 3px;" class="col-lg-4">
-                                        <p class="text-end"><span set-lan="html:username">帳號/用戶名稱</span> : </p>
-                                        <P class="text-end"><span set-lan="html:password">密碼</span> : </P>
-                                        <p class="text-end">Email:</p>
-                                    </div>
-                                    <div class="userinf col-lg-8">
-                                        <!-- <div class="inf-content">
-                                            <p>Hana</p>
-                                            <p>abc***************0&nbsp;<a href="">更改密碼</a></p>
-                                            <p>Hana@choozmo.com</p>
-                                        </div> -->
-                                    </div>
-                                    <div class="row px-0 mx-0 g-4">
-                                        <div class="Used col-lg-6">
-                                            <div class="card py-4 ps-4">
-                                                <p class="fw-bold" set-lan="html:used">已使用</p>
-                                                <div class="used-time">
-                                                    <!-- <h1 class="text-center">324&ensp;<span style="font-size:15px;">秒</span></h1> -->
+                <div class="col-12 col-lg-10 px-2">
+                    <div class="userprofile">
+                        <div class="userprofile-content">
+                            <div class="user-information">
+                                <div class="user-img text-center">
+                                    <img style="width: 160px;" src="./static/img/userprofile/userimg.png" alt="">
+                                </div>
+                                <div class="information">
+                                    <div class="row px-0 mx-0 mt-4">
+                                        <div style="letter-spacing: 3px;" class="px-0 col-5 col-lg-4 px-lg-3">
+                                            <p class="text-end"><span set-lan="html:username">帳號/用戶名稱</span> : </p>
+                                            <P class="text-end"><span set-lan="html:password">密碼</span> : </P>
+                                            <p class="text-end">Email:</p>
+                                        </div>
+                                        <div class="userinf col-7 col-lg-8">
+                                            <!-- <div class="inf-content">
+                                                <p>Hana</p>
+                                                <p>abc***************0&nbsp;<a href="">更改密碼</a></p>
+                                                <p>Hana@choozmo.com</p>
+                                            </div> -->
+                                        </div>
+                                        <div class="row px-0 mx-0 g-4">
+                                            <div class="Used col-12 order-2 col-lg-6 order-lg-1">
+                                                <div class="card py-4 ps-4">
+                                                    <p class="fw-bold" set-lan="html:used">已使用</p>
+                                                    <div class="used-time">
+                                                        <!-- <h1 class="text-center">324&ensp;<span style="font-size:15px;">秒</span></h1> -->
+                                                    </div>
+                                                    <p style="color:#183790;" class="check-history mb-0 text-center">
+                                                        <img width="20" class="arrowdown me-2 mb-1"
+                                                            src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png"
+                                                            alt="">
+                                                        <lan set-lan="html:details"></lan>
+                                                    </p>
                                                 </div>
-                                                <p style="color:#183790;" class="check-history mb-0 text-center"><img width="20" class="arrowdown me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png" alt=""><lan set-lan="html:details"></lan></p>
                                             </div>
-                                        </div>
-                                        <div class="not-used col-lg-6">
-                                            <div class="card py-4 ps-4">
-                                                <p class="fw-bold" set-lan="html:left">未使用</p>
-                                                <div class="not-used-time">
-                                                    <!-- <h1  class="text-center">144&ensp;<span style="font-size:15px;">秒</span></h1> -->
+                                            <div class="not-used col-12 order-1 col-lg-6 order-lg-2">
+                                                <div class="card py-4 ps-4">
+                                                    <p class="fw-bold" set-lan="html:left">未使用</p>
+                                                    <div class="not-used-time">
+                                                        <!-- <h1  class="text-center">144&ensp;<span style="font-size:15px;">秒</span></h1> -->
+                                                    </div>
+                                                    <a style="text-decoration: none;" href="./pricing.html">
+                                                        <p style="color:#183790;" class="mb-0 text-center"><img
+                                                                width="20" class="me-2 mb-1"
+                                                                src="./static/img/userprofile/Icon ionic-md-add-circle.png"
+                                                                alt="">
+                                                            <lan set-lan="html:refill"></lan>
+                                                        </p>
+                                                    </a>
                                                 </div>
-                                               <a style="text-decoration: none;" href="./pricing.html"><p style="color:#183790;" class="mb-0 text-center"><img width="20" class="me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-add-circle.png" alt=""><lan set-lan="html:refill"></lan></p></a>
                                             </div>
-                                        </div>
-                                        <div class="historical-record col-lg-12">
-                                            <div class="card p-3 text-center">
-                                                <table class="table text-center">
-                                                    <thead>
-                                                      <tr>
-                                                        <th scope="col" set-lan="html:date">日期</th>
-                                                        <th scope="col" set-lan="html:video_title">標題</th>
-                                                        <th class="px-0" scope="col" set-lan="html:video_duration">影片時間</th>
-                                                      </tr>
-                                                    </thead>
-                                                    <tbody class="historical-content">
-                                                      <!-- <tr>
-                                                        <td>21/09/01</td>
-                                                        <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
-                                                        <td>0:36</td>
-                                                      </tr>
-                                                      <tr>
-                                                        <td>21/09/01</td>
-                                                        <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
-                                                        <td>0:36</td>
-                                                      </tr>
-                                                      <tr>
-                                                        <td>21/09/01</td>
-                                                        <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
-                                                        <td>0:36</td>
-                                                      </tr>
-                                                      <tr>
-                                                        <td>21/09/01</td>
-                                                        <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
-                                                        <td>0:36</td>
-                                                      </tr>
-                                                      <tr>
-                                                        <td>21/09/01</td>
-                                                        <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
-                                                        <td>0:36</td>
-                                                      </tr> -->
-                                                    </tbody>
-                                                  </table>
+                                            <div class="historical-record col-12 order-3 col-lg-12 order-lg-3">
+                                                <div class="card p-3 text-center">
+                                                    <table class="table text-center">
+                                                        <thead>
+                                                            <tr>
+                                                                <th scope="col" set-lan="html:date">日期</th>
+                                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                                <th class="px-0" scope="col"
+                                                                    set-lan="html:video_duration">影片時間</th>
+                                                            </tr>
+                                                        </thead>
+                                                        <tbody class="historical-content">
+                                                            <!-- <tr>
+                                                            <td>21/09/01</td>
+                                                            <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
+                                                            <td>0:36</td>
+                                                          </tr>
+                                                          <tr>
+                                                            <td>21/09/01</td>
+                                                            <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
+                                                            <td>0:36</td>
+                                                          </tr>
+                                                          <tr>
+                                                            <td>21/09/01</td>
+                                                            <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
+                                                            <td>0:36</td>
+                                                          </tr>
+                                                          <tr>
+                                                            <td>21/09/01</td>
+                                                            <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
+                                                            <td>0:36</td>
+                                                          </tr>
+                                                          <tr>
+                                                            <td>21/09/01</td>
+                                                            <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
+                                                            <td>0:36</td>
+                                                          </tr> -->
+                                                        </tbody>
+                                                    </table>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="draft col-lg-12">
-                                            <div class="card p-4">
-                                                <div class="d-flex justify-content-between">
-                                                    <span set-lan="html:drafts">草稿夾</span>
-                                                    <span><img width="20" class="arrowdown me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png" alt=""></span>
+                                            <div class="draft col-12 order-4 col-lg-12 order-lg-4">
+                                                <div class="card p-4">
+                                                    <div class="d-flex justify-content-between">
+                                                        <span set-lan="html:drafts">草稿夾</span>
+                                                        <span><img width="20" class="arrowdown me-2 mb-1"
+                                                                src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png"
+                                                                alt=""></span>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div class="draft-table col-lg-12" id="draft-table">
-                                            <div class="card p-3 text-center">
-                                                <table class="table text-center">
-                                                    <thead>
-                                                     <!--  <tr>
-                                                        <th scope="col" set-lan="html:video_title">標題</th>
-                                                        <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
-                                                      </tr> -->
-                                                    </thead>
-                                                    <tbody class="draft-content">
-                                                      
-                                                    </tbody>
-                                                  </table>
+                                            <div class="draft-table col-12 order-5 col-lg-12 order-lg-5"
+                                                id="draft-table">
+                                                <div class="card p-3 text-center">
+                                                    <table class="table text-center">
+                                                        <thead>
+                                                            <!--  <tr>
+                                                            <th scope="col" set-lan="html:video_title">標題</th>
+                                                            <th class="px-0" scope="col" set-lan="html:draft_edit">編輯</th>
+                                                          </tr> -->
+                                                        </thead>
+                                                        <tbody class="draft-content">
+
+                                                        </tbody>
+                                                    </table>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="share col-lg-12">
-                                            <div class="card p-4">
-                                                <h3 set-lan="html:trial_title">Want to get more minutes?</h3>
-                                               <p class="mb-2" set-lan="html:trial_txt">Invite your friends to AI Spokesgirl and for each eligible one that signs up from your referral, we'll give you 3 more minutes free!</p>
-                                               <div class="d-flex">
-                                                   <p style="color:#183790; font-size: 20px;" class="d-inline fw-bold" set-lan="html:share" >Share:</p>
-                                                   <div class="fb-share-button mx-4" data-href="https://video.choozmo.com/" data-layout="button" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8080%2Fhtml%2Findex.html&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Facebook</a></div>
-                                                    <a class="mx-4" href="https://twitter.com/intent/tweet?text=I%20just%20created%20a%20video%20in%205%20minutes.%20Check%20it%20out%20%F0%9F%91%89%20https%3A%2F%2Fvideo.choozmo.com/&related=ai_cmm" target="_blank"><img width="28" class="me-2" src="./static/img/userprofile/Icon awesome-twitter-square.png" alt="">Twitter</a>
-                                                    <a class="mx-4 share-email"><img width="28" class="me-2" src="./static/img/userprofile/Icon material-email.png" alt="">Email</a>                                         
-                                               </div>
-                                             
+                                            <div class="share col-12 order-5 col-lg-12 order-lg-5">
+                                                <div class="card mt-3 p-3 p-lg-4">
+                                                    <h3 set-lan="html:trial_title">Want to get more minutes?</h3>
+                                                    <p class="mb-4" set-lan="html:trial_txt">Invite your friends to AI
+                                                        Spokesgirl and for each eligible one that signs up from your
+                                                        referral, we'll give you 3 more minutes free!</p>
+                                                    <div class="d-flex">
+                                                        <p style="color:#183790; font-size: 20px;"
+                                                            class="d-inline fw-bold" set-lan="html:share">Share:</p>
+                                                        <div style="color:#183790">
+                                                            <div class="fb-share-button mx-2 ms-3"
+                                                                data-href="https://video.choozmo.com/"
+                                                                data-layout="button" data-size="large"><a
+                                                                    target="_blank"
+                                                                    href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8080%2Fhtml%2Findex.html&amp;src=sdkpreparse"
+                                                                    class="fb-xfbml-parse-ignore"></a></div>
+                                                            <span class="facebook"
+                                                                style="position: relative; bottom:2px;">Facebook</span>
+                                                        </div>
+                                                        <a class="mx-2 mx-lg-4 text-center"
+                                                            href="https://twitter.com/intent/tweet?text=I%20just%20created%20a%20video%20in%205%20minutes.%20Check%20it%20out%20%F0%9F%91%89%20https%3A%2F%2Fvideo.choozmo.com/&related=ai_cmm"
+                                                            target="_blank">
+                                                            <img width="28" class="me-2"
+                                                                src="./static/img/userprofile/Icon awesome-twitter-square.png"
+                                                                alt="">
+                                                            Twitter
+                                                        </a>
+                                                        <a class="mx-2 mx-lg-4 share-email text-center">
+                                                            <img width="28" class="me-2"
+                                                                src="./static/img/userprofile/Icon material-email.png"
+                                                                alt="">
+                                                            Email
+                                                        </a>
+                                                    </div>
+
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
+
                             </div>
-                            
                         </div>
+
                     </div>
-        
                 </div>
             </div>
-        </div>
-        <!-- <div class="container-profile">         
-            <div class="card card-profile">
-               
-            </div>
-        </div>         -->
-    </div>
-    <!-- ================================================================= -->
-    <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="staticBackdropLabel">使用說明</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <!-- <div class="container-profile">         
+                <div class="card card-profile">
+                   
                 </div>
-                <div class="modal-body">
-                    <div class="modal-terms">
-                        <ol class="ps-0">
-                            <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
-                            <li>2. 影像連結檔案格式支援:<stong class="strong">.png, jpg, .mp4</stong></li>
-                            <li>3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看</li>
-                        </ol>
+            </div>         -->
+        </div>
+        <!-- ================================================================= -->
+        <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="staticBackdropLabel">使用說明</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="modal-terms">
+                            <ol class="ps-0">
+                                <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
+                                <li>2. 影像連結檔案格式支援:<stong class="strong">.png, jpg, .mp4</stong>
+                                </li>
+                                <li>3. 點選“送出”之後需等待一段影片製作的時間,請您耐心等候,待製作完畢可於通知網址查看</li>
+                            </ol>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div> 
-    <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-scrollable">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="staticBackdropLabel">歷史紀錄</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div class="modal-terms">
-                        <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
-                        <ol class="ps-0 historyList">
-                        </ol>
+        <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-scrollable">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="staticBackdropLabel">歷史紀錄</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="modal-terms">
+                            <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
+                            <ol class="ps-0 historyList">
+                            </ol>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <!-- ================================================================= -->
-    <!-- footer -->
-    <footer class="fixed-bottom text-center py-2">
+        <!-- ================================================================= -->
+        <!-- footer -->
+        <footer class="fixed-bottom text-center py-2">
 
-    </footer>
+        </footer>
+
+    </div>
     <!-- ================================================================= -->
-  
+    <!-- navbar -->
+    <!-- ================================================================= -->
+
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+        crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
     <script src="static/owl.carousel.min.js"></script>
     <script src="static/loading-overlay.js"></script>
@@ -317,4 +382,4 @@
     <script src="static/common.js"></script>
 </body>
 
-</html>
+</html>

Неке датотеке нису приказане због велике количине промена