add videos, usecases

js/lan.js

@@ -270,8 +270,8 @@ var en = {
     "usecase_3": "weather report",
     "usecase_4": "News report",
     "usecase_5": "Personal Creation",
-    "usecase_6": "Tour",
-    "usecase_7": "Tour",
+    "usecase_6": "Sightseeing Tour",
+    "usecase_7": "Museum Tour",
     "usecase_8": "Marketing",
     "usecase_9": "Agencies",
     "hero_title": "Create AI video at a click!",

make_video.html

@@ -34,7 +34,7 @@
                 aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <div class="collapse navbar-collapse" id="navbarSupportedContent" class="d-md-none">
                 <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>

make_video_eng.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 mb-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>
@@ -153,38 +161,38 @@
                             <option value="12">Jocelyn</option>
                             <option value="13">Angela</option>
                         </select>
-                        <div class="owl-carousel owl-theme d-flex row">
-                            <div class="card item col" data-avatar="Peggy" data-img="peggy">
+                        <div class="d-flex row">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Peggy" data-img="peggy">
                                 <div class="imgfr"><img src="img/peggy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Peggy</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Stacy" data-img="stacy">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Stacy" data-img="stacy">
                                 <div class="imgfr"><img src="img/stacy.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Stacy</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Nina" data-img="nina">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Nina" data-img="nina">
                                 <div class="imgfr"><img src="img/nina.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Nina</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Summer韓小夏" data-img="summer韓小夏">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Summer韓小夏" data-img="summer韓小夏">
                                 <div class="imgfr"><img src="img/summer韓小夏.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Summer韓小夏</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Jocelyn" data-img="Jocelyn">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Jocelyn" data-img="Jocelyn">
                                 <div class="imgfr"><img src="img/Jocelyn.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Jocelyn</h5>
                                 </div>
                             </div>
-                            <div class="card item col" data-avatar="Angela" data-img="Angela">
+                            <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Angela" data-img="Angela">
                                 <div class="imgfr"><img src="img/Angela.webp" class="card-img-top" alt="..."></div>
                                 <div class="card-body">
                                     <h5 class="card-title">Angela</h5>

styleMV.css

@@ -1067,6 +1067,13 @@ body {
   }
 }
 
+@media screen and (min-width: 767px) {
+  .navbar-collapse {
+    display: none !important;
+    color: white;
+  }
+}
+
 .sidenav .sidenav-content .reply {
   margin-left: 70px;
 }

usecases.html

@@ -141,9 +141,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-museum"></div>
                     <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:usecase_7">展覽導覽</lan></h3>
                 </div>
+                <div class="closeplay modal fade" id="usecase-museum" 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//F2WkhfddLQY'
+                                    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">