Add copy-link

html/make_video2.html

@@ -363,14 +363,20 @@
                               <img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" 
                                 title="放入您的台詞及圖片，圖片僅接受png, jpg, mp4格式 Type in your content and images. Supported File Formats: png, jpg, mp4.">
                             </h3><br/>
-                            <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
-                            <input type="checkbox" id="multiLang" > <br/>
+                           
                             <div class="img-inputTest mt-3">
                                 
                             </div>
-                            <span class="addsec">+</span>
+                            <div>
+                                <span class="addsec">+</span>
+                            </div>
+
+                            <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
+                            <input type="checkbox" id="multiLang" > <br/>
+
                             <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" value="送出" />
                             <span class="draft-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="儲存為草稿 Save as draft" set-lan="html:save_draft_btn">存為草稿</span>
+                      
                             <h3 style="display: none;" class="fs-subtitle"><lan set-lan="html:processing_progress">處理進度</lan></h3>
                             <div style="display: none;" id="myProgress">
                                 <div style="display: none;" id="myBar">0%</div>

html/script_profile.js

@@ -49,21 +49,21 @@ function renderView() {
     if(!token) {
         window.location.replace("login.html");
     }
-    JsLoadingOverlay.show({
-      "overlayBackgroundColor": "#666666",
-      "overlayOpacity": 0.9,
-      "spinnerIcon": "ball-circus",
-      "spinnerColor": "#000",
-      "spinnerSize": "3x",
-      "overlayIDName": "overlay",
-      "spinnerIDName": "spinner",
-      "offsetX": 0,
-      "offsetY": 0,
-      "containerID": null,
-      "lockScroll": false,
-      "overlayZIndex": 99,
-      "spinnerZIndex": 100
-    });
+    // JsLoadingOverlay.show({
+    //   "overlayBackgroundColor": "#666666",
+    //   "overlayOpacity": 0.9,
+    //   "spinnerIcon": "ball-circus",
+    //   "spinnerColor": "#000",
+    //   "spinnerSize": "3x",
+    //   "overlayIDName": "overlay",
+    //   "spinnerIDName": "spinner",
+    //   "offsetX": 0,
+    //   "offsetY": 0,
+    //   "containerID": null,
+    //   "lockScroll": false,
+    //   "overlayZIndex": 99,
+    //   "spinnerZIndex": 100
+    // });
     axios({
         method: 'post',
         url: 'https://www.choozmo.com:8887/user_profile',
@@ -106,6 +106,8 @@ function renderView() {
         `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/invite.html?code=${userInfo.user_info.invite_code}&related=ai_cmm`)
         
         inviteCode = userInfo.user_info.invite_code;
+        invitelink=`https://video.choozmo.com/invite.html?code=${userInfo.user_info.invite_code}`
+        $('.invite-link').val(invitelink)
         const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
         <p class="card-profile-txt">User Profile</p>
         <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
@@ -490,4 +492,30 @@ $("#lang-manu").hide();
 $( "#changeLanguage" ).click(function() {
   $("#lang-manu").slideToggle();
   $("#lang-arrow").toggleClass("arrowdoup");
-});
+});
+
+function copyEvent(id) {
+  var Url = document.getElementById("invite-link");
+  Url.select();
+  // window.getSelection().selectAllChildren(str);
+  document.execCommand("Copy");
+  toastr.options = {
+    // 參數設定[註1]
+    "closeButton": false, // 顯示關閉按鈕
+    "debug": false, // 除錯
+    "newestOnTop": false,  // 最新一筆顯示在最上面
+    "progressBar": false, // 顯示隱藏時間進度條
+    "positionClass": "toast-top-center", // 位置的類別
+    "preventDuplicates": false, // 隱藏重覆訊息
+    "onclick": null, // 當點選提示訊息時，則執行此函式
+    "showDuration": "300", // 顯示時間(單位: 毫秒)
+    "hideDuration": "1000", // 隱藏時間(單位: 毫秒)
+    "timeOut": "1000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒)
+    "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒)
+    "showEasing": "swing", // 顯示動畫時間曲線
+    "hideEasing": "linear", // 隱藏動畫時間曲線
+    "showMethod": "fadeIn", // 顯示動畫效果
+    "hideMethod": "fadeOut" // 隱藏動畫效果
+  }
+  toastr.success("複製成功");
+}

html/static/scss/style.css

@@ -190,6 +190,7 @@ body {
   border-radius: 50%;
   overflow: hidden;
   margin: 1rem auto 0 auto;
+  cursor: pointer;
 }
 
 .card-title {
@@ -1245,7 +1246,7 @@ body {
 
 .psd_visible,
 .psd_invisible {
-  right: .5rem;
+  right: 0.5rem;
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
@@ -1591,6 +1592,22 @@ body {
   cursor: pointer;
 }
 
+.userprofile .userprofile-content .user-information .share .form-control:hover,
+.userprofile .userprofile-content .user-information .share .form-control:focus,
+.userprofile .userprofile-content .user-information .share .form-control:active {
+  outline: none !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.userprofile .userprofile-content .user-information .share .btn:hover,
+.userprofile .userprofile-content .user-information .share .btn:focus,
+.userprofile .userprofile-content .user-information .share .btn:active {
+  outline: none !important;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .sidenav {
   width: 250px;
   position: fixed;

html/static/scss/style.scss

@@ -182,6 +182,7 @@ body {
 	border-radius: 50%;
 	overflow: hidden;
 	margin: 1rem auto 0 auto;
+	cursor: pointer;
 }
 
 .card-title {
@@ -790,20 +791,20 @@ footer {
 
 #msform .img-inputTest .upload-btn {
 	display: inline-block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 20%;
-  height: 100%;
-  background-color: #75a7dd;
-  background-position: center;
-  background-size: cover;
-  background-image: url(../img/upload_img.png);
-  color: white;
-  padding: 0.4rem 0.5rem;
-  font-size: 0.9rem;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 20%;
+	height: 100%;
+	background-color: #75a7dd;
+	background-position: center;
+	background-size: cover;
+	background-image: url(../img/upload_img.png);
+	color: white;
+	padding: 0.4rem 0.5rem;
+	font-size: 0.9rem;
+	-webkit-transition: all 0.3s;
+	transition: all 0.3s;
 	cursor: pointer;
 	border-radius: 0;
 }
@@ -903,22 +904,22 @@ body {
 		width: 100%;
 	}
 
-	#msform .input-sec>input[type="text"]:nth-of-type(1) {
-    margin-top: 77%;
-  }
+	#msform .input-sec > input[type="text"]:nth-of-type(1) {
+		margin-top: 77%;
+	}
+
+	#msform .input_eng .input-sec > input[type="text"]:nth-of-type(1) {
+		margin-top: 80%;
+	}
 
-  #msform .input_eng .input-sec>input[type="text"]:nth-of-type(1) {
-    margin-top: 80%;
-  }
-  
-  #msform .input-sec .upload-btn {
-    width: 100%;
-    height: 60%;
-  }
+	#msform .input-sec .upload-btn {
+		width: 100%;
+		height: 60%;
+	}
 
-  #msform .input_eng .input-sec .upload-btn {
-    height: 45%;
-  }
+	#msform .input_eng .input-sec .upload-btn {
+		height: 45%;
+	}
 }
 
 .container-login {
@@ -1164,7 +1165,7 @@ body {
 
 .psd_visible,
 .psd_invisible {
-	right: .5rem;
+	right: 0.5rem;
 	top: 50%;
 	transform: translateY(-50%);
 }
@@ -1452,6 +1453,23 @@ body {
 					}
 				}
 			}
+			.share {
+				.form-control{
+
+				}
+				.form-control:hover,
+				.form-control:focus,
+				.form-control:active {
+					outline: none !important;
+					box-shadow:none;
+				}
+				.btn:hover,
+				.btn:focus,
+				.btn:active {
+					outline: none !important;
+					box-shadow:none;
+				}
+			}
 		}
 	}
 }
@@ -1484,7 +1502,6 @@ body {
 		// 	transform: scale(0.85);
 		// }
 		.close-btn {
-
 			@media screen and(min-width:$desktop) {
 				display: none;
 				// opacity: 0;
@@ -1985,7 +2002,7 @@ body {
 	z-index: 20;
 	overflow: hidden;
 	display: none;
-	top:0px;
+	top: 0px;
 	@media screen and(min-width:$desktop) {
 		display: none;
 	}

html/user_profile2.html

@@ -18,6 +18,7 @@
     <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 href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet"  />
     <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">
@@ -25,20 +26,23 @@
     <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>
-    
+
     <!-- Google Tag Manager -->
-    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-5M8S4GH');</script>
+    <script>(function (w, d, s, l, i) {
+            w[l] = w[l] || []; w[l].push({
+                'gtm.start':
+                    new Date().getTime(), event: 'gtm.js'
+            }); var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', 'GTM-5M8S4GH');</script>
     <!-- End Google Tag Manager -->
 </head>
 
 <body>
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH"
-    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5M8S4GH" height="0" width="0"
+            style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
     <div class="body-content" style="overflow-x: hidden;">
@@ -65,9 +69,11 @@
                                 </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);window.location.reload();" value="en">English</button></li>
+                                            onclick="changeLan(this);window.location.reload();"
+                                            value="en">English</button></li>
                                     <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
-                                            onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
+                                            onclick="changeLan(this);window.location.reload();" value="zh">中文</button>
+                                    </li>
                                 </ul>
                             </li>
                             <li class="nav-item me-2 me-lg-1">
@@ -146,23 +152,29 @@
 
                                 <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>
+                                    <a style="font-size: 18px;" class="text-white" aria-current="page"
+                                        href="pricing.html" set-lan="html:pricing-m">早鳥方案</a>
 
                                     <li id="changeLanguage" class="nav-list-item me-lg-1">
                                         <a style="font-size: 18px;" class="nav-link 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<i id="lang-arrow" class="fas fa-angle-down text-white ms-2"></i>
+                                            <i class="fas fa-globe text-white me-3"></i>中/En<i id="lang-arrow"
+                                                class="fas fa-angle-down text-white ms-2"></i>
                                         </a>
                                     </li>
                                     <div id="lang-manu">
-                                            <li><button class="nav-link lan-swtich bg-transparent text-white border-0 mx-auto" aria-current="page"
-                                                    set-lan="html:en" onclick="changeLan(this);window.location.reload();"
-                                                    value="en">English</button></li>
-                                            <li><button class="nav-link lan-switch bg-transparent text-white border-0 mx-auto" aria-current="page"
-                                                    set-lan="html:zh" onclick="changeLan(this);window.location.reload();" value="zh">中文</button>
-                                            </li>
+                                        <li><button
+                                                class="nav-link lan-swtich bg-transparent text-white border-0 mx-auto"
+                                                aria-current="page" set-lan="html:en"
+                                                onclick="changeLan(this);window.location.reload();"
+                                                value="en">English</button></li>
+                                        <li><button
+                                                class="nav-link lan-switch bg-transparent text-white border-0 mx-auto"
+                                                aria-current="page" set-lan="html:zh"
+                                                onclick="changeLan(this);window.location.reload();"
+                                                value="zh">中文</button>
+                                        </li>
                                     </div>
                                     <li class="nav-item text-white  me-lg-1">
                                         <a style="font-size: 18px;" class="nav-link btn-logout text-white"
@@ -311,9 +323,16 @@
                                             <div class="share col-12 order-5 col-lg-12 order-lg-5 mb-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
+                                                    <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="input-group mb-4">
+                                                        <input type="text" id="invite-link" class="invite-link form-control"
+                                                            aria-label="Recipient's username"
+                                                            aria-describedby="button-addon2">
+                                                        <button class="copybutton btn btn-outline-secondary" type="button"
+                                                            id="button-addon2" onclick="copyEvent('copy')"><i class="fas fa-copy"></i></button>
+                                                    </div>
                                                     <div class="d-flex">
                                                         <p style="color:#183790; font-size: 20px;"
                                                             class="d-inline fw-bold" set-lan="html:share">Share:</p>
@@ -381,7 +400,9 @@
                         <div class="modal-terms">
                             <ol class="ps-0">
                                 <li set-lan="html:one_line_to_one_img">1. 一句台詞請對應提供一個影像連結做為搭配</li>
-                                <li><lang set-lan="html:sup_img_profile">2. 影像連結檔案格式支援：</lang><stong class="strong">.png, jpg, .mp4</stong>
+                                <li>
+                                    <lang set-lan="html:sup_img_profile">2. 影像連結檔案格式支援：</lang>
+                                    <stong class="strong">.png, jpg, .mp4</stong>
                                 </li>
                                 <li set-lan="html:submit_to_wait">3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看</li>
                             </ol>
@@ -428,6 +449,7 @@
         integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
     <script src="static/owl.carousel.min.js"></script>
     <script src="static/loading-overlay.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>