側邊欄修正

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5503
 }

html/script_profiles.js

@@ -93,7 +93,7 @@ function renderView() {
         let totalSec = (userInfo.user_info.total_sec == "None") ? 0 : userInfo.user_info.total_sec;
         let leftSec = (userInfo.user_info.left_sec == null)? 0 : userInfo.user_info.left_sec;
         // 使用者名稱
-        let userName = `<h2 class="user-name text-white mt-4 fw-bold">Hi ${userInfo.user_info.userName}</h2>`;
+        let userName = `<h2 class="user-name text-white mt-lg-3 mt-xl-1 fw-bold">Hi ${userInfo.user_info.userName}</h2>`;
         // 已使用
         let usedtime=`<h1 class="text-center">${totalSec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
         if(lang == 'en') {
@@ -254,13 +254,13 @@ checkLogin();
 $(".historical-record").hide();
 
 $( ".check-history" ).click(function() {
-  $(".historical-record").toggle(150);
+  $(".historical-record").slideToggle(150);
   $(".arrowdown").toggleClass("arrowdoup");
   });
 
 $('.draft-table').hide();
 $('.draft .arrowdown').click(function() {
-    $(".draft-table").toggle(150);
+    $(".draft-table").slideToggle(150);
     $(".draft .arrowdown").toggleClass("arrowdoup");
 });
 
@@ -438,3 +438,5 @@ function trialEnd() {
 }
 
 
+var screenWidth = screen.width;
+console.log(screenWidth)

html/static/scss/style.css

@@ -1410,20 +1410,32 @@ body {
 }
 
 .sidenav {
-  height: 100%;
   width: 250px;
-  position: fixed;
+  height: 100%;
   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;
 }
 
+@media only screen and (min-width: 1439px) {
+  .sidenav .sidenav-content {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+
+@media only screen and (max-width: 1280px) {
+  .sidenav .sidenav-content {
+    margin-top: -40px;
+    -webkit-transform: scale(0.9);
+            transform: scale(0.9);
+  }
+}
+
 .sidenav hr {
   background: #fff;
   opacity: 1 !important;
@@ -1440,7 +1452,7 @@ body {
 .sidenav .user {
   -o-object-fit: cover;
      object-fit: cover;
-  width: 100px;
+  width: 8vw;
 }
 
 .sidenav .user-name {
@@ -1455,7 +1467,7 @@ body {
 }
 
 .sidenav .navbar-nav .btn-gocreate {
-  font-size: 14px;
+  font-size: 1.7vmin;
   background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc));
   background: linear-gradient(90deg, #0162c8, #55e7fc);
   color: white;
@@ -1473,7 +1485,7 @@ body {
 
 .sidenav a {
   text-decoration: none;
-  font-size: 32px;
+  font-size: 4.3vmin;
   color: #f1f1f1;
   display: block;
   -webkit-transition: 0.3s;
@@ -1499,7 +1511,7 @@ body {
 }
 
 .sidenav .nav-list .nav-list-item {
-  font-size: 1.2rem;
+  font-size: 2.6vmin;
   cursor: pointer;
   position: relative;
 }
@@ -1528,8 +1540,14 @@ body {
   color: #fff;
 }
 
+@media only screen and (max-width: 1280px) {
+  .sidenav .right-text {
+    left: 10px;
+  }
+}
+
 .sidenav .right-text a {
-  font-size: 18px;
+  font-size: 16px;
   display: inline;
   margin: 2px;
 }
@@ -1539,6 +1557,12 @@ body {
           filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
 }
 
+@media only screen and (max-width: 1280px) {
+  .sidenav .right-text p {
+    font-size: 16px;
+  }
+}
+
 .price-int {
   padding-bottom: 10vw;
 }

html/static/scss/style.scss

@@ -1283,15 +1283,26 @@ body {
 
 // 側邊欄選單
 .sidenav {
-	height: 100%;
 	width: 250px;
-	position: fixed;
+	// position: fixed;
+	height: 100%;
 	z-index: 50;
 	top: 0;
 	left: 0;	
 	overflow-x: hidden;
 	transition: 0.5s;
 	text-align: center;
+	.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);
+		}
+	
+
+	}
 	hr {
 		background: #fff;
 		opacity: 1 !important;
@@ -1305,7 +1316,7 @@ body {
 	}
 	.user {
 		object-fit: cover;
-		width: 100px;
+		width: 8vw;
 	}
 	.user-name {
 		font-size: 1.5rem;
@@ -1313,7 +1324,7 @@ body {
 	.navbar-nav {
 		flex-direction: row;
 		.btn-gocreate {
-			font-size: 14px;
+			font-size: 1.7vmin;
 			background: linear-gradient(90deg, #0162c8, #55e7fc);
 			// background:#31426C;
 			color: white;
@@ -1329,7 +1340,7 @@ body {
 	}
 	a {
 		text-decoration: none;
-		font-size: 32px;
+		font-size: 4.3vmin;
 		color: #f1f1f1;
 		display: block;
 		transition: 0.3s;
@@ -1349,8 +1360,9 @@ body {
 		color: white;
 		list-style: none;
 		text-align: center;
+	
 		.nav-list-item {
-			font-size: 1.2rem;
+			font-size: 2.6vmin;
 			cursor: pointer;
 			position: relative;
 		}
@@ -1376,14 +1388,22 @@ body {
 		bottom: 0;
 		left: 0;
 		color: #fff;
+		@media only screen and (max-width: 1280px) {
+			left: 10px;
+		}
 		a {
-			font-size: 18px;
+			font-size: 16px;
 			display: inline;
 			margin: 2px;
 			img {
 				filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
 			}
 		}
+		p{
+			@media only screen and (max-width: 1280px) {
+				font-size: 16px;
+			}
+		}
 	}
 }
 // 首頁價格介紹

html/user_profile2.html

@@ -73,178 +73,186 @@
     <!-- ================================================================= -->
     <!-- content -->
     <div class="container-fluid px-0">
-        <div id="mySidenav" class="sidenav">
-            <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>
-            </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 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 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 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>
+                        </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="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 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="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>
-                                        <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 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>
-                                <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>
-                                       <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="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>
-                                <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="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>
+                                                <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>
+                                               <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>
+                                        </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>
+                                            </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>
+                                        </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>
                                         </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>
-                                </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>
                                 </div>
                             </div>
+                            
                         </div>
                     </div>
-                    
+        
                 </div>
             </div>
-
         </div>
         <!-- <div class="container-profile">         
             <div class="card card-profile">