en/ch moda, trial txtl

html/script_profiles.js

@@ -2,6 +2,8 @@ const btnLoginPage = document.querySelector('.btn-login');
 const btnUserProfile = document.querySelector('.btn-userProfile');
 const btnLogout = document.querySelector('.btn-logout');
 
+let lan = localStorage.getItem('lan');
+
 function getCookie(name) {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
@@ -39,19 +41,19 @@ function renderView() {
             let title = "剩餘秒數不足";
             let text = '您的影片額度即將不足，加值以持續使用';
             let confirmButtonText = '加值';
-                    if (lang == 'en') { // 英文版訊息
+                    if (lan == 'en') { // 英文版訊息
                         title = "Insufficient seconds left!";
                         text = 'Your seconds left is less than 20 seconds, refill to continue making videos.';
                         confirmButtonText = 'Refill';
                     }
             Swal.fire({
-                title: title,
-                text: '您的影片額度即將不足，加值以持續使用',
+                title,
+                text,
                 icon: 'warning',
                 showCancelButton: true,
                 cancelButtonText: 'Cancel',
                 confirmButtonColor: '#3085d6',
-                confirmButtonText: '加值'
+                confirmButtonText
             }).then(result => {
               if (result.isConfirmed) {
                 location.href = "pricing.html";
@@ -87,7 +89,7 @@ function renderView() {
             </div>
         </div>`;
         // 使用者名稱
-        const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
+        const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hi ${userInfo.user_info.userName}</h2>`;
         // 已使用
         const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
         // 未使用
@@ -339,32 +341,58 @@ $('.share-email').click(function() {
   &body=${encodeURIComponent('I just created a video in 5 minutes, check out this amazing video making tool. https://video.choozmo.com/')}`;
     
     window.location.href = link;
-})
+});
 
 function trialStart() {
+  let title = "歡迎使用AiSpokesgirl！將你的生活、創作 、宣傳做成影片。";
+  let html = `<p>您有  <b> 2 </b>  分鐘影片製作額度。</p><br>
+              <p>您可以使用：</p>
+              <ul>
+                <li>1. 短影片製作</li>
+                <li>2. 個人歷史紀錄儲存</li>
+                <li>3. 影片下載（Mp4）</li>
+              </ul>
+              <p>欲使用其他功能請升級為Premium方案</p>`;
+  let confirmButtonText = '我知道了！';
+  if (lan == 'en') { 
+    title = "Welcome to AiSpokesgirl! Make your first video for promotion, creation and life today!";
+    html = `<p>You get<b>2</b>minutes of video</p><br>
+            <p>Here are several features you can try,</p>
+            <ul>
+              <li>1. Short video creation</li>
+              <li>2. Personal video history</li>
+              <li>3. Downloadable format (MP4)</li>
+            </ul>
+            <p>Want to access more features? Follow the link below to upgrade to a paid plan today.</p>`;
+    confirmButtonText = 'OK';
+  }
   Swal.fire({
-    title: '歡迎使用AiSpokesgirl！將你的生活、創作 、宣傳做成影片。',
-    html: `<p>您有<b>2</b>分鐘影片製作額度。</p><br>
-    <p>您可以使用：</p>
-    <ul>
-      <li>1. 短影片製作</li>
-      <li>2. 個人歷史紀錄儲存</li>
-      <li>3. 影片下載（Mp4）</li>
-    </ul>
-    <p>欲使用其他功能請升級為Premium方案</p>`,
+    title,
+    html,
     icon: 'success',
     confirmButtonColor: '#3085d6',
-    confirmButtonText: '我知道了！'
+    confirmButtonText
   });
 }
 
 function trialEnd() {
+  let title = "您的試用即將結束！好的idea值得延續，透過影片將你的idea完整呈現。";
+  let html = `<p>前往網站以升級為Premium方案，或是聯絡我們以洽詢細節。</p>`;
+  let confirmButtonText = '立即升級';
+  if (lan == 'en') { 
+    title = "Your trial is gonna over soon. Your idea worth spreading.";
+    html = `<p>All good things don't have to come to an end.</p><br>
+            <h5>Show your idea through video</h5><br>
+            <p>Want to access more features? Follow the link below to upgrade 
+            to a paid plan today or contact us get further details.</p>`;
+    confirmButtonText = 'Upgrade Now';
+  }
   Swal.fire({
-    title: '您的試用即將結束！好的idea值得延續，透過影片將你的idea完整呈現。',
-    html: `<p>前往網站以升級為Premium方案，或是聯絡我們以洽詢細節。</p>`,
+    title,
+    html,
     icon: 'success',
     confirmButtonColor: '#3085d6',
-    confirmButtonText: '立即升級'
+    confirmButtonText
   }).then(result => {
     if (result.isConfirmed) {
       location.href = "pricing.html";

html/static/lan.js

@@ -119,7 +119,10 @@ var zh = {
     "save_draft_btn": "存為草稿",
     "upload_file": "上傳檔案",
     "intro_img": "static/img/intro2.jpg",
-    "no_draft": "目前沒有草稿喔"
+    "no_draft": "目前沒有草稿喔",
+    "trial_title": "想要免費獲得更多時間額度？",
+    "trial_txt": "透過社群分享專屬連結，邀請好友註冊 AI Spokesgirl，凡是好友透過連結註冊成功，您可以免費獲得2分鐘製作額度。",
+    "share": "分享:"
 };
 
 var en = {
@@ -195,7 +198,10 @@ var en = {
     "save_draft_btn": "Save as Draft",
     "upload_file": "Upload",
     "intro_img": "static/img/intro_en.png",
-    "no_draft": "No drafts yet."
+    "no_draft": "No drafts yet.",
+    "trial_title": "Want to get more minutes?",
+    "trial_txt": "Invite your friends to AI Spokesgirl and for each eligible one that signs up from your referral, we'll give you 2 more minutes free!",
+    "share": "Share:"
 };
 
 function switchLanContent(val){

html/static/script_util.js

@@ -23,7 +23,7 @@ function checkRoute() {
       window.location.replace("login.html");
     }
     var userName='';
-    userName+=' <h2 class="user-name text-white mt-4 fw-bold">Hello,'+res.data.user_info.userName+'</h2>';
+    userName+=`<h2 class="user-name text-white mt-4 fw-bold">Hi ${res.data.user_info.userName}</h2>`;
     $('.userName').html(userName);
   }).catch(err => {
     console.log(err);

html/user_profile2.html

@@ -75,7 +75,6 @@
     <div class="container-fluid px-0">
         <div id="mySidenav" class="sidenav">
             <div class="text-start mt-3">
-                <a href="index.html"><img class="img-fluid w-50 ps-1" src="./static/img/contactus/CMM_LOGO.png" alt=""></a>
                 <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> 
@@ -227,11 +226,10 @@
                                 </div>
                                 <div class="share col-lg-12">
                                     <div class="card p-4">
-                                        <h3>Want to get more minutes?</h3>
-                                       <p class="mb-0">Invite your friends to AI Spokesgirl and for each eligible one that </p>
-                                       <p>signs up from your referral, we'll give you 3 more minutes free!</p>
+                                        <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">Share:</p>
+                                           <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>