fix mv, add videos, lan switch

.vscode/settings.json

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

index.html

@@ -8,8 +8,6 @@
     <title>springpoolglass</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" 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="./style.css">
 </head>
 
@@ -35,7 +33,7 @@
                 </ul>
             </div>
             <div class="ai-spokesgril">
-                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-3" style="z-index: 500;">
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                             中/En
@@ -99,7 +97,12 @@
         integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="./goto.js"></script>
+    <!-- <script>
+        document.querySelector('.dropdown-toggle').addEventListener('click', function(){
+            console.log('lan');
+            document.querySelector('.dropdown-menu').style.display="block";
+        });
+    </script> -->
     <script src="js/lan.js"></script>
 </body>
 

make_video.html

@@ -35,8 +35,16 @@
                 <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">
+                <ul class="navbar-nav ms-auto my-2 mb-lg-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>
+                  <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>
+                    <!-- <li class="nav-item">
                         <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
                     </li>
                     <li class="nav-item dropdown">
@@ -56,8 +64,8 @@
                     </li>
                     <li class="nav-item">
                         <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
-                    </li>
-                </ul> -->
+                    </li> -->
+                </ul> 
             </div>
         </div>
     </nav>
@@ -87,7 +95,7 @@
                 <img class="user img-fluid rounded-circle" src="img/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 btn-makev" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
+                    <a class="nav-link btn-gocreate text-white col btn-makev" aria-current="page" href="./make_video.html" >影片製作</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">
@@ -397,8 +405,8 @@
         objstr = JSON.stringify(dataOBJ);
         console.log(dataOBJ);
         var xhr = new XMLHttpRequest();
-        xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_noAuth");
-        xhr.setRequestHeader("accept", "application/json");
+        xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_noAuth2");
+        xhr.setRequestHeader("accept", "text/html");
         xhr.setRequestHeader("Content-Type", "application/json");
         xhr.onreadystatechange = function () {
           if (xhr.readyState === 4) {

make_video_eng.html

@@ -87,7 +87,7 @@
                 <img class="user img-fluid rounded-circle" src="img/userimg.png" alt="">
                 <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">Create something today!</p>
                 <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
-                    <a class="nav-link btn-gocreate text-white col btn-makev" aria-current="page" href="./make_video.html" set-lan="html:make_video">Make Video</a>
+                    <a class="nav-link btn-gocreate text-white col btn-makev" aria-current="page" href="./make_video_eng.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">

styleMV.css

@@ -1039,6 +1039,10 @@ body {
 @media screen and (max-width: 767px) {
   .sidenav {
     display: none;
+    right: 0;
+  }
+  .content {
+    width: 100%;
   }
 }
 

usecases.html

@@ -53,15 +53,85 @@
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/產品介紹.png');" data-bs-toggle="modal" data-bs-target="#usecase-news"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_4">新聞播報</lan></h3>
                 </div>
+                <div class="closeplay modal fade" id="usecase-news" tabindex="-1" aria-labelledby="exampleModalLabel2"
+                aria-hidden="true">
+                <div class="modal-dialog modal-lg">
+                    <div class="modal-content bg-transparent border-0">
+                        <div class="modal-header border-0">
+                            <h5 class="modal-title" id="exampleModalLabel"></h5>
+                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                                aria-label="Close"><img src="./img/close.svg" alt=""></button>
+                        </div>
+                        <div class="modal-body">
+                            <style>
+                                .embed-container {
+                                    position: relative;
+                                    padding-bottom: 56.25%;
+                                    height: 0;
+                                    overflow: hidden;
+                                    max-width: 100%;
+                                }
+
+                                .embed-container iframe,
+                                .embed-container object,
+                                .embed-container embed {
+                                    position: absolute;
+                                    top: 0;
+                                    left: 0;
+                                    width: 100%;
+                                    height: 100%;
+                                }
+                            </style>
+                            <div class='embed-container'><iframe src='https://www.youtube.com/embed//XfTQ2uIWWbA'
+                                    frameborder='0' allowfullscreen></iframe></div>
+                        </div>
+                    </div>
+                </div>
+                </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/內容創作.png');"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/內容創作.png');" data-bs-toggle="modal" data-bs-target="#usecase-personal"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_5">個人內容創作</lan></h3>
                 </div>
+                <div class="closeplay modal fade" id="usecase-personal" tabindex="-1" aria-labelledby="exampleModalLabel2"
+                aria-hidden="true">
+                <div class="modal-dialog modal-lg">
+                    <div class="modal-content bg-transparent border-0">
+                        <div class="modal-header border-0">
+                            <h5 class="modal-title" id="exampleModalLabel"></h5>
+                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                                aria-label="Close"><img src="./img/close.svg" alt=""></button>
+                        </div>
+                        <div class="modal-body">
+                            <style>
+                                .embed-container {
+                                    position: relative;
+                                    padding-bottom: 56.25%;
+                                    height: 0;
+                                    overflow: hidden;
+                                    max-width: 100%;
+                                }
+
+                                .embed-container iframe,
+                                .embed-container object,
+                                .embed-container embed {
+                                    position: absolute;
+                                    top: 0;
+                                    left: 0;
+                                    width: 100%;
+                                    height: 100%;
+                                }
+                            </style>
+                            <div class='embed-container'><iframe src='https://www.youtube.com/embed//Svl4eBYNfxQ'
+                                    frameborder='0' allowfullscreen></iframe></div>
+                        </div>
+                    </div>
+                </div>
+                </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
@@ -77,9 +147,44 @@
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">
-                    <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');"></div>
+                    <div class="usecase-imgfr" style="background-image: url('img/A短影片_1.png');" data-bs-toggle="modal" data-bs-target="#usecase-ad"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_8">廣告行銷</lan></h3>
                 </div>
+                <div class="closeplay modal fade" id="usecase-ad" tabindex="-1" aria-labelledby="exampleModalLabel2"
+                aria-hidden="true">
+                <div class="modal-dialog modal-lg">
+                    <div class="modal-content bg-transparent border-0">
+                        <div class="modal-header border-0">
+                            <h5 class="modal-title" id="exampleModalLabel"></h5>
+                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                                aria-label="Close"><img src="./img/close.svg" alt=""></button>
+                        </div>
+                        <div class="modal-body">
+                            <style>
+                                .embed-container {
+                                    position: relative;
+                                    padding-bottom: 56.25%;
+                                    height: 0;
+                                    overflow: hidden;
+                                    max-width: 100%;
+                                }
+
+                                .embed-container iframe,
+                                .embed-container object,
+                                .embed-container embed {
+                                    position: absolute;
+                                    top: 0;
+                                    left: 0;
+                                    width: 100%;
+                                    height: 100%;
+                                }
+                            </style>
+                            <div class='embed-container'><iframe src='https://www.youtube.com/embed//E4Dt7eU3WCo'
+                                    frameborder='0' allowfullscreen></iframe></div>
+                        </div>
+                    </div>
+                </div>
+                </div>
               </div>
               <div class="col-12 col-md-6 my-4">
                 <div class="usecase-block card text-center">