add qr_modal

demo.html

@@ -39,12 +39,34 @@
                 </a>
               </div>
               <div class="col m-2">
-                <a href="#" class="demo-btn">
-                  <h3 class="usecase-sub"><i class="fas fa-circle"></i> 自動影片製作</h3>
+                <a href="" class="demo-btn">
+                  <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:make_video_auto">自動影片製作</lan></h3>
+                </a>
+              </div>
+              <div class="col m-2">
+                <a class="demo-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                  <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:make_video_trial">免費註冊使用</lan></h3>
                 </a>
               </div>
           </div>
       </div>
+      <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel2"
+                aria-hidden="true">
+                <div class="modal-dialog modal-lg">
+                    <div class="modal-content border-0">
+                        <div class="modal-header border-0">
+                            <h5 class="modal-title" id="exampleModalLabel"></h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal"
+                                aria-label="Close"><img src="./img/close.svg" alt=""></button>
+                        </div>
+                        <div class="modal-body text-center">
+                            <h2><i class="far fa-caret-square-right me-2"></i><lan set-lan="html:make_video_trial">免費註冊使用</lan></h2>
+                            <img src="./img/Video_choozmo_qrcode.png" alt="" width="450">
+                            <a href="https://video.choozmo.com" style="text-decoration: none;color: black;"><h2>https://video.choozmo.com</h2></a>
+                        </div>
+                    </div>
+                </div>
+      </div>
 
     </section>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"

js/lan.js

@@ -166,6 +166,8 @@ var zh = {
     "feature_no4_li1": "支援中英文內容",
     "feature_no4_li2": "可加入字幕",
     "make_video_hand": "手動製作影片",
+    "make_video_auto": "自動影片製作",
+    "make_video_trial": "免費註冊使用",
     "5G_network": "5G網路",
     "metaverse": "元宇宙",
     "local_news": "地方日報",
@@ -175,7 +177,7 @@ var zh = {
     "index-steps": "使用流程",
     "index-usecases": "應用情境",
     "index-demo": "即時展示",
-    "time-lapse": "縮時影片"
+    "time-lapse": "縮時影片",
 };
 
 var en = {
@@ -296,6 +298,8 @@ var en = {
     "feature_no4_li1": "Support english & chinese content",
     "feature_no4_li2": "Caption included",
     "make_video_hand": "Make Video",
+    "make_video_auto": "Auto Video Maker",
+    "make_video_trial": "Free Trial",
     "5G_network": "5G Network",
     "metaverse": "Metaverse",
     "local_news": "Local News",

make_video.html

@@ -153,7 +153,7 @@
                     <fieldset>
                         <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            
                         <select id="avatar" class='avatar'>
-                            <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>              
+                            <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option>              
                             <option value="7">Peggy</option>
                             <option value="8">Stacy</option>
                             <option value="11">Summer韓小夏</option>

usecases.html

@@ -123,7 +123,7 @@
                         </div>
                     </div>
                 </div>
-                </div>
+      </div>
     </section>
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"