update typeset

css/style.css

@@ -111,6 +111,14 @@ body {
   opacity: 0.7;
 }
 
+.main-container .navbar {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+
 .main-container .nav-link {
   cursor: pointer;
 }
@@ -238,6 +246,7 @@ body {
 @media (max-width: 576px) {
   .main-container .banner section img {
     width: 60px;
+    margin-left: -30px;
   }
 }
 
@@ -257,7 +266,7 @@ body {
 @media (max-width: 576px) {
   .main-container .banner section p {
     margin-left: 0px;
-    font-size: 25px;
+    font-size: 22px;
   }
 }
 
@@ -267,19 +276,27 @@ body {
   max-width: 100%;
 }
 
+@media (min-width: 991px) {
+  .main-container .metaverse:hover .bg-img {
+    background-color: rgba(0, 0, 0, 0.6);
+    background-blend-mode: multiply;
+  }
+  .main-container .metaverse:hover .bg-img a {
+    opacity: 1;
+  }
+}
+
 @media (max-width: 991px) {
   .main-container .metaverse {
     padding: 0 5%;
   }
-}
-
-.main-container .metaverse:hover .bg-img {
-  background-color: rgba(0, 0, 0, 0.6);
-  background-blend-mode: multiply;
-}
-
-.main-container .metaverse:hover .bg-img a {
-  opacity: 1;
+  .main-container .metaverse .bg-img {
+    background-color: rgba(0, 0, 0, 0.6);
+    background-blend-mode: multiply;
+  }
+  .main-container .metaverse .bg-img a {
+    opacity: 1 !important;
+  }
 }
 
 .main-container .metaverse .bg-img {
@@ -323,7 +340,7 @@ body {
 }
 
 .main-container .directions {
-  margin: 100px auto 0px;
+  margin: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -345,7 +362,7 @@ body {
 
 @media (max-width: 767px) {
   .main-container .directions {
-    margin: 100px 5% 0px;
+    margin: 0px 5%;
   }
 }
 
@@ -409,7 +426,7 @@ body {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-top: 100px;
+  margin: 100px 0;
 }
 
 .main-container .time-form img {
@@ -481,6 +498,7 @@ body {
 
 @media (max-width: 991px) {
   .main-container .video-content .img-box {
+    width: 100%;
     height: 100%;
     background-image: none;
   }
@@ -496,7 +514,7 @@ body {
 @media (max-width: 991px) {
   .main-container .video-content .video-box {
     width: 100%;
-    padding-bottom: 50%;
+    padding-bottom: 56.5%;
   }
 }
 

css/style.scss

@@ -66,6 +66,12 @@ body {
       }
     }
   }
+  .navbar {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 999;
+  }
   .nav-link {
     cursor: pointer;
   }
@@ -150,6 +156,7 @@ body {
         margin-top: -50px;
         @media (max-width: 576px) {
           width: 60px;
+          margin-left: -30px;
         }
       }
       p {
@@ -162,7 +169,7 @@ body {
         }
         @media (max-width: 576px) {
           margin-left: 0px;
-          font-size: 25px;
+          font-size: 22px;
         }
       }
     }
@@ -171,15 +178,25 @@ body {
     margin: auto;
     width: 1080px;
     max-width: 100%;
+    @media (min-width: 991px) {
+      &:hover {
+        .bg-img {
+          background-color: rgba(0, 0, 0, 0.6);
+          background-blend-mode: multiply;
+          a {
+            opacity: 1;
+          }
+        }
+      }
+    }
     @media (max-width: 991px) {
       padding: 0 5%;
-    }
-    &:hover {
       .bg-img {
         background-color: rgba(0, 0, 0, 0.6);
         background-blend-mode: multiply;
         a {
-          opacity: 1;
+          // 手機版直接顯示
+          opacity: 1 !important;
         }
       }
     }
@@ -216,7 +233,7 @@ body {
     }
   }
   .directions {
-    margin: 100px auto 0px;
+    margin: auto;
     display: flex;
     max-width: 900px;
     font-weight: bold;
@@ -225,7 +242,7 @@ body {
       align-items: center;
     }
     @media (max-width: 767px) {
-      margin: 100px 5% 0px;
+      margin: 0px 5%;
     }
     img {
       width: 50%;
@@ -266,7 +283,7 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin-top: 100px;
+    margin: 100px 0;
     img {
       width: 80%;
       margin-top: 25px;
@@ -304,6 +321,7 @@ body {
       background-repeat: no-repeat;
       background-size: cover;
       @media (max-width: 991px) {
+        width: 100%;
         height: 100%;
         background-image: none;
       }
@@ -315,7 +333,7 @@ body {
       padding-bottom: 33%;
       @media (max-width: 991px) {
         width: 100%;
-        padding-bottom: 50%;
+        padding-bottom: 56.5%;
       }
       iframe {
         position: absolute;

index.html

@@ -5,6 +5,25 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-TXJ9DHB');</script>
+  <!-- End Google Tag Manager -->
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-2W1PM5NQL4"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'G-2W1PM5NQL4');
+  </script>
   <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="/css/style.css">
@@ -13,6 +32,11 @@
 
 <body>
 
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TXJ9DHB" height="0" width="0"
+      style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+
   <div class="main-container">
     <nav class="navbar navbar-expand-xl navbar-light bg-light">
       <div class="container-fluid">
@@ -63,27 +87,19 @@
       </section>
     </div>
 
-    <div class="metaverse" id="container-1">
-      <div class="bg-img">
-        <a href="https://chuzmo.com/HxXfN9r" target="_blank">進入元宇宙</a>
-      </div>
-      <!-- <img src="/img/圖層 2.png" alt=""> -->
-    </div>
-
     <div class="directions">
       <img src="/img/22740453.png" alt="">
       <div>
         <p class="title">【元宇宙觀展操作說明】</p>
         <ul>
-          <li>1. 元宇宙展間 24 小時皆可進入。</li>
+          <li>1. 點擊「進入元宇宙」按鈕即可進入元宇宙展間，24 小時皆可進入，同時間進場上線為 100 人。</li>
           <li>2. 建議使用手機 4G 以上網路及瀏覽器 30mbps 網路在使用上較為順暢；電腦請利用 Chrome 瀏覽器開啟。</li>
-          <li>3. 進入連結後請依序按「Join Room」、「Accept」、「Enter Room」，以進入元宇宙展間。</li>
-          <li>4. 元宇宙展間若畫面無法正常顯示，請檢查網路後再行嘗試。</li>
-          <li>5. 操作以方法為 WASD 控制前進後退，滑鼠可以控制視角方向<br>
-            如果是使用手機的朋友，以兩根手指放大縮小即可移動，動動手指滑螢幕可調整您的視角。<br>
-            在畫面的下方，Voice 可以將麥克風靜音或開啟；Chat 可以打字與其他人聊天。</li>
+          <li>3. 進入後請依序按「Join Room（請勿按 Enter On Device 或 Spectate）」，接著再按「Enter Room」，即可進入元宇宙展間。</li>
+          <li>4. 元宇宙展間若畫面無法正常顯示，請重新整理頁面，或檢查網路後再行嘗試。</li>
+          <li>5. 電腦操作方法以「WASD」按鍵控制前進後退，亦可用「上下左右」按鍵控制。如果是使用手機的朋友，以兩根手指放大縮小即可移動，動動手指滑螢幕可調整您的視角。</li>
+          <li>6. 在畫面的下方，按下 Voice 可以將麥克風靜音或開啟；按下 Chat 可以打字與其他人聊天。</li>
           <li>*如有其他疑問，可轉至 <a style="text-decoration: underline; cursor: pointer;" data-gt-target="#container-5"
-              data-gt-duration="100" data-gt-offset="20">FAQ</a> 或是頁面上右下角的 Chatbot 提問。</li>
+              data-gt-duration="100" data-gt-offset="-50">FAQ</a> 或是頁面上右下角的 Chatbot 提問。</li>
         </ul>
       </div>
     </div>
@@ -93,12 +109,24 @@
       <img src="/img/導覽時刻表.png" alt="">
     </div>
 
+    <div class="metaverse" id="container-1">
+      <div class="bg-img">
+        <a href="https://chuzmo.com/HxXfN9r" target="_blank">進入元宇宙</a>
+      </div>
+      <!-- <img src="/img/圖層 2.png" alt=""> -->
+    </div>
+
     <div class="video-content" id="container-3">
       <div class="img-box">
-        <h3 class="title mb-lg-auto mb-5 mx-auto">【導覽影片】</h3>
+        <h3 class="title mb-lg-auto mb-5 mx-auto">
+          <span class="d-lg-block d-none">【2022 城市博覽會 <br> 元宇宙虛擬展間介紹】</span>
+          <span class="d-lg-none d-block">【2022 城市博覽會元宇宙虛擬展間介紹】</span>
+        </h3>
       </div>
       <div class="video-box">
-        <iframe src="https://www.youtube.com/embed/6HjwVnuOf-Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <iframe src="https://www.youtube.com/embed/6C4uywfEbs0" title="YouTube video player" frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen></iframe>
       </div>
     </div>
 
@@ -110,7 +138,9 @@
 
       <div class="box" id="container-4">
         <section class="video-box">
-          <iframe src="https://www.youtube.com/embed/7io6AGDXs7I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          <iframe src="https://www.youtube.com/embed/g3m_J4vXQK4" title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
         </section>
         <!-- <img src="/img/A.jpg" alt=""> -->
         <div>
@@ -133,13 +163,17 @@
           </p>
         </div>
         <section class="video-box">
-          <iframe src="https://www.youtube.com/embed/l74F9QYyJew" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          <iframe src="https://www.youtube.com/embed/NTj7frF6N7k" title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
         </section>
       </div>
 
       <div class="box">
         <section class="video-box">
-          <iframe src="https://www.youtube.com/embed/5OtNOGvrHsI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          <iframe src="https://www.youtube.com/embed/FJmYQn1jzTw" title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
         </section>
         <div>
           <h4>【C海科展區】</h4>
@@ -161,7 +195,9 @@
           </p>
         </div>
         <section class="video-box">
-          <iframe src="https://www.youtube.com/embed/N1KAqV0OcYc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          <iframe src="https://www.youtube.com/embed/vmHCsKthibY" title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen></iframe>
         </section>
       </div>
     </div>
@@ -201,7 +237,7 @@
                 <li>
                   <span>Q2：元宇宙線上展覽共有幾個展區？</span><br>
                   A：城市博覽會分為 A、B、C 三個主展區及 K 副等四個展區，分別是 A 國門展區、B 正濱展區、C 海科展區及 K 沙灣展區。<br>
-                <img style="width: 100%;" src="/img/平面圖.png" alt="">
+                  <img style="width: 100%;" src="/img/平面圖.png" alt="">
                 </li>
                 <li>
                   <span>Q3：如果登入元宇宙發現看見畫面不完整，如：畫面破圖、圖片顯示不出來，該怎麼做？</span><br>
@@ -259,7 +295,7 @@
           </li>
         </ul>
       </div>
-      <div  class="list">
+      <div class="list">
         <ul>
           <li>
             <a href="https://2022cityexpo.tw/tw/index" target="_blank">2022 城市博覽會</a>