新增閒置狀態撥放功能

index.html

@@ -6,13 +6,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ai_Anchor_Demo</title>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
-    crossorigin="anonymous">
-  <link rel="stylesheet"
-    href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
-    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="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+        integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
     <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://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
     <link rel="stylesheet" href="./style.css">
 </head>
 
@@ -22,7 +22,6 @@
             <div class="bgslider">
                 <!-- <img class="img-fluid" src="./img/BG_3png.png" alt=""> -->
             </div>
-
             <div class="p-0">
                 <!-- <div class="ai-spokesgril">
                     <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-3" style="z-index: 500;">
@@ -43,53 +42,59 @@
                 <div class="homebutton-box row px-0 mx-0">
                     <div class="col-lg-7 ps-0">
                         <div class="row px-0 mx-0">
-                            <div style="background:rgba(2,15,51,0.8)" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
+                            <div style="background:rgba(2,15,51,0.8)"
+                                class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
                                     <a style="text-decoration: none;" class="homebtn-icon" href="./about.html">
-                                        <img  src="./img/ICON_簡介.png" alt="">
+                                        <img src="./img/ICON_簡介.png" alt="">
                                         <h1 class="text-white" set-lan="html:index-about">簡介</h1>
                                     </a>
                                 </div>
                             </div>
-                            <div style="background: rgba(4,25,89,0.8);" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
+                            <div style="background: rgba(4,25,89,0.8);"
+                                class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
                                     <a style="text-decoration: none;" class="homebtn-icon" href="./features.html">
-                                        <img  src="./img/ICON_特色.png" alt="">
+                                        <img src="./img/ICON_特色.png" alt="">
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-features">特色</h1>
                                     </a>
                                 </div>
                             </div>
-                            <div style="background:rgba(2,15,51,0.8)" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
+                            <div style="background:rgba(2,15,51,0.8)"
+                                class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
                                     <a style="text-decoration: none;" class="homebtn-icon" href="./video.html">
-                                        <img  src="./img/ICON_影片導覽.png" alt="">
+                                        <img src="./img/ICON_影片導覽.png" alt="">
 
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-videos">影片導覽</h1>
                                     </a>
                                 </div>
                             </div>
-                            <div style="background: rgba(4,25,89,0.8);" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
+                            <div style="background: rgba(4,25,89,0.8);"
+                                class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
                                     <a style="text-decoration: none;" class="homebtn-icon" href="./steps.html">
-                                        <img  src="./img/ICON_使用流程.png" alt="">
+                                        <img src="./img/ICON_使用流程.png" alt="">
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-steps">使用流程</h1>
                                     </a>
                                 </div>
 
                             </div>
-                            <div style="background:rgba(2,15,51,0.8)" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
+                            <div style="background:rgba(2,15,51,0.8)"
+                                class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
                                     <a style="text-decoration: none;" class="homebtn-icon" href="./usecases.html">
-                                        <img  src="./img/ICON_應用情境.png" alt="">
+                                        <img src="./img/ICON_應用情境.png" alt="">
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-usecases">應用情境</h1>
                                     </a>
                                 </div>
 
                             </div>
-                            <div style="background: rgba(4,25,89,0.8);" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
+                            <div style="background: rgba(4,25,89,0.8);"
+                                class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
                                     <a style="text-decoration: none;" class="homebtn-icon" href="./demo.html">
-                                        <img  src="./img/ICON_即時展示.png" alt="">
+                                        <img src="./img/ICON_即時展示.png" alt="">
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-demo">即時展示</h1>
                                     </a>
                                 </div>
@@ -99,10 +104,10 @@
                     </div>
                     <div class="col-lg-5">
                         <div class="ai-spokesgril">
-                           
+
                             <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 text-white" href="#" id="navbarDropdown"
                                         role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                         中/En
@@ -115,8 +120,10 @@
                                     </ul>
                                 </li>
                             </ul>
-                            <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i class="fas fa-expand text-white"></i></a>
-                            <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;" class="border-0"><i class="fas fa-compress text-white"></i></a>
+                            <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
+                                    class="fas fa-expand text-white"></i></a>
+                            <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;"
+                                class="border-0"><i class="fas fa-compress text-white"></i></a>
                         </div>
                         <div class="text-center">
                             <img style="filter: none; margin-top: 80px;" src="./img/AISpokesgirl.png" alt="">
@@ -142,7 +149,19 @@
         <img class="homepage-line" src="/img/titleline.png" alt="">
 
         <!-- <img class="homepage-line" src="/img/" alt=""> -->
+        <div class="my-element" id="ad_dialog">
+            <div class="wrap container-fluid px-0 mx-0">
+                <div class="adv-banner">
 
+                    <video id="MovieShow" loop>
+                        <!-- <source src="video/test.ogg" type="video/ogg"> -->
+                        <source src="./img/應用案例 -- 氣象報導.mp4" type="video/mp4">
+                        您的瀏覽器不支援此 HTML5 影片標籤
+                    </video>
+                    <br><br>
+                </div>
+            </div>
+        </div>
     </section>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -159,15 +178,15 @@
     </script> -->
     <script src="js/lan.js"></script>
     <script>
-       var expandbtn = document.getElementById("expand");
-       var compressionbtn = document.getElementById("compression");
+        var expandbtn = document.getElementById("expand");
+        var compressionbtn = document.getElementById("compression");
 
         // Using JavaScript to open the page in fullscreen mode
         var elem = document.documentElement;
         function openFullscreen() {
             if (elem.requestFullscreen) {
                 elem.requestFullscreen();
-                compressionbtn.style.display='inline';
+                compressionbtn.style.display = 'inline';
             } else if (elem.webkitRequestFullscreen) { /* Safari */
                 elem.webkitRequestFullscreen();
             } else if (elem.msRequestFullscreen) { /* IE11 */
@@ -178,7 +197,7 @@
         function closeFullscreen() {
             if (document.exitFullscreen) {
                 document.exitFullscreen();
-                compressionbtn.style.display='none';
+                compressionbtn.style.display = 'none';
 
             } else if (document.webkitExitFullscreen) { /* Safari */
                 document.webkitExitFullscreen();
@@ -187,6 +206,54 @@
             }
         }
     </script>
+
+    <script>
+        $("#ad_dialog").hide();
+
+        // var showSecondsNum = document.getElementById('seconds-number');
+        // var showDialogTimeNum = document.getElementById('dialog-time');
+        var defaultNum = 10;
+        var maxTime = defaultNum;
+        var intervalId;
+
+        // showSecondsNum.innerHTML = maxTime;
+
+        var time = maxTime;
+
+        $('body').on('keydown mousemove mousedown', function (e) {
+            time = maxTime; // Reset
+        });
+        runSetInterval();
+
+        function runSetInterval() {
+            intervalId = setInterval(function () {
+                time--;
+                // showSecondsNum.innerHTML = time;
+                if (time <= 0) {
+                    ShowInvalidLoginMessage();
+                    clearInterval(intervalId);
+                }
+            }, 1000)
+        }
+
+        function ShowInvalidLoginMessage() {
+            $('#ad_dialog').show();
+            playvideo();
+        }
+
+        function playvideo() {
+            document.getElementById("MovieShow").play();
+
+        }
+
+        $("#MovieShow").click(function () {
+            // alert( "Handler for .click() called." );
+            document.getElementById("MovieShow").pause();
+
+            $('#ad_dialog').hide();
+            location.reload()
+        });
+    </script>
 </body>
 
 </html>

style.css

@@ -893,6 +893,69 @@ p {
   }
 }
 
+.home-page #ad_dialog {
+  position: absolute;
+  top: 0px;
+  height: 100vh;
+  background: #000;
+  z-index: 10000;
+}
+
+.home-page .my-element {
+  -webkit-animation: fadeIn;
+          animation: fadeIn;
+  /* referring directly to the animation's @keyframe declaration */
+  -webkit-animation-duration: 1.5s;
+          animation-duration: 1.5s;
+  /* don't forget to set a duration! */
+  -webkit-animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
+}
+
+.home-page #video {
+  width: 100vw;
+  text-align: center;
+  background-position: center center;
+  background-size: cover;
+}
+
+.home-page #video video {
+  width: 80vw;
+  margin: 0 auto;
+}
+
+.home-page .wrap {
+  text-align: center;
+  width: 100vw;
+  margin-top: 3%;
+}
+
+.home-page .wrap .adv-banner {
+  width: 100%;
+  height: 55vw;
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.home-page .wrap .adv-banner video {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .home-btn {
   -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
           filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
@@ -968,8 +1031,8 @@ p {
 
 .about-service {
   margin-top: 100px;
-  background: transparent -webkit-gradient(linear, right top, left top, color-stop(80%, #FFFFFF), to(#D4DAEC)) 0% 0% no-repeat padding-box;
-  background: transparent linear-gradient(270deg, #FFFFFF 80%, #D4DAEC 100%) 0% 0% no-repeat padding-box;
+  background: transparent -webkit-gradient(linear, right top, left top, color-stop(80%, #ffffff), to(#d4daec)) 0% 0% no-repeat padding-box;
+  background: transparent linear-gradient(270deg, #ffffff 80%, #d4daec 100%) 0% 0% no-repeat padding-box;
 }
 
 .about-service .service-content {

style.scss

@@ -783,7 +783,56 @@ p {
   //   animation-name: wheel;
   //   animation-duration: 10s;
   // }
+
+  #ad_dialog{
+    position: absolute;
+    top:0px;
+    height: 100vh;
+    background: #000;
+    z-index: 10000;
+  }
+  .my-element {
+    // display: inline-block;
+    // margin: 0 0.5rem;
+    animation:fadeIn; /* referring directly to the animation's @keyframe declaration */
+    animation-duration: 1.5s; /* don't forget to set a duration! */
+    animation-fill-mode: backwards;
+}
+  #video {
+    width: 100vw;
+    text-align: center;
+    // background: url(./img/sec04banner.jpg);
+    background-position: center center;
+    background-size: cover;
+    video {
+      width: 80vw;
+      margin: 0 auto;
+    }
+  }
+  .wrap {
+    text-align: center;
+    width: 100vw;
+    margin-top: 3%;
+    .adv-banner {
+      width: 100%;
+      height: 55vw;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .adv-banner video {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      object-fit: cover;
+    }
+  }
 }
+
 .home-btn {
   filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
 }
@@ -871,7 +920,7 @@ p {
 // }
 .about-service {
   margin-top: 100px;
-    background: transparent linear-gradient(270deg, #FFFFFF 80%, #D4DAEC 100%) 0% 0% no-repeat padding-box;
+  background: transparent linear-gradient(270deg, #ffffff 80%, #d4daec 100%) 0% 0% no-repeat padding-box;
   .service-content {
     width: 85vw;
     margin: 0 auto;