img to webp, sec567

index.html

@@ -32,11 +32,11 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
         crossorigin="anonymous">
-        
-    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+
+    <link rel="stylesheet" href="css/jquery-ui.css">
+    <link rel="stylesheet" type="text/css" href="css/slick.css" />
+    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
+
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <link rel="stylesheet" href="sass/main.css">
 </head>
@@ -236,21 +236,21 @@
         <div class="row gx-2 gy-2 mb-2">
           <a href="https://hhh.com.tw/event170427/" class="col card p-2 text-center me-2">
             <h5 class="card-title">老屋翻新<br>住宅改造</h5>
-            <div class="card__imgfr"><img src="images/renovation.png" alt=""></div>
+            <div class="card__imgfr"><img src="images/renovation.webp" alt=""></div>
           </a>
           <a href="https://event.hhh.com.tw/2021-Most-Favorite-Designers/index.php" class="col card p-2 text-center">
             <h5 class="card-title">觀眾最愛<br>設計師</h5>
-            <div class="card__imgfr"><img src="images/designerlink.png" alt=""></div>
+            <div class="card__imgfr"><img src="images/designerlink.webp" alt=""></div>
           </a>
         </div>
         <div class="row gx-2 gy-2">
           <a href="https://event.hhh.com.tw/2021-Top-Brands/" class="col card p-2 text-center me-2">
             <h5 class="card-title">消費者<br>愛用品牌</h5>
-            <div class="card__imgfr"><img src="images/brandlink.png" alt=""></div>
+            <div class="card__imgfr"><img src="images/brandlink.webp" alt=""></div>
           </a>
           <a href="https://event.hhh.com.tw/topglory/" class="col card p-2 text-center">
             <h5 class="card-title">國際大賞<br>GLORY</h5>
-            <div class="card__imgfr"><img src="images/awardlink.png" alt=""></div>
+            <div class="card__imgfr"><img src="images/awardlink.webp" alt=""></div>
           </a>
         </div>
       </div>
@@ -264,7 +264,7 @@
       </div>
       <div class="container-fluid" style="padding:0;margin:0;">
         <div class="sec-05__video mb-2" data-bs-toggle="modal" data-bs-target="#videoModal">
-          <img src="images/Play-Button.png" alt="" class="sec-05__video__play">
+          <img src="images/Play-Button.webp" alt="" class="sec-05__video__play">
           <div class="sec-05__video__imgfr"></div>
         </div>
         <p class="px-2 sec-05__video__txt">EP.2 永久棟距開闊視野生態濕地公園首排連呼吸都療癒</p>
@@ -336,7 +336,7 @@
         </div>
       </div>
     </section>
-    <section class="sec-08 pb-2">
+    <section class="sec-08">
       <div class="container-fluid" style="padding: 0;margin:0;">
         <div class="sec-08__slider mx-0">
           <!-- <div class="sec-08__slider-1 mx-1" style="width: 70vw; background-image: url(https://images.hhh.com.tw/uploads/_had/adlogo_15356_1588832058.jpg);" onclick="window.open(`https://event.hhh.com.tw/2021-Most-Favorite-Designers/?utm_source=INDEX_BANNER&adid=15356`);"></div>
@@ -423,7 +423,7 @@
         <img src="images/gotop.png" width="28" alt="">
       </div> -->
       <div class="btn-gotop">
-        <img src="images/gotop.png" width="28" alt="">
+        <img src="images/gotop.webp" width="28" alt="">
       </div>
     </div>
     <div style="margin-bottom:120px;"></div>

js/index.js

@@ -7,7 +7,7 @@ $(".sec-01__slider").slick({
     let result;
       $.ajax({
           method: "GET",
-          url: "http://127c-2001-b011-a003-3829-9578-a4a5-7554-1502.ngrok.io/genjson",
+          url: "../json/data.json",
           dataType: "json",
       }).done(function (msg) {
           result = [...msg];
@@ -80,7 +80,7 @@ $(".sec-01__slider").slick({
               let sub = temp[i]["data"];
               for(let j = 0; j < sub.length; j++){
                 str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
-                  <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""><img class="tabpar__card__play" src="images/Play-Button.png"></div>
+                  <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""><img class="tabpar__card__play" src="images/Play-Button.webp"></div>
                   <p class="mt-2 pe-2">${sub[j]['description']}</p>
                 </div>`
               }
@@ -160,10 +160,12 @@ $(".sec-01__slider").slick({
           }
           $('.sec-08__slider').html(str);
           $(".sec-08__slider").slick({
+            autoplay: true,
+            autoplaySpeed: 8000,
             arrows: false,
             slidesToShow: 1,
             centerMode: true,
-            infinite: false,
+            infinite: true,
             dots: false,
             centerPadding: '12px'
           });
@@ -178,6 +180,14 @@ $(".sec-01__slider").slick({
                     </div>`
           }
           $('.sec-09__cardgrp').html(str);
+          $(".sec-09__cardgrp").slick({
+            arrows: false,
+            slidesToShow: 2,
+            slidesToScroll: 1,
+            infinite: true,
+            dots: false,
+            centerPadding: '10px'
+          });
       }
       function renderSec10(data) {
           let temp = data[7]['data'];
@@ -193,7 +203,7 @@ $(".sec-01__slider").slick({
           for(let i = 0; i < data.length; i++){
             if(data[i].video == 'true') {
               str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
-                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"><img class="${sec}__card__play" src="images/Play-Button.png"></div>
+                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"><img class="${sec}__card__play" src="images/Play-Button.webp"></div>
                     <p class="${sec}__cardtxt">${data[i]['description']}</p>
                     </div>`;
             } else {
@@ -241,11 +251,15 @@ $(".sec-01__slider").slick({
     $('.navbar-toggler').click(function(){
         $(".sec-menu").css('display', 'block');
         $(".wholeBody").css('overflow-y', 'hidden');
+        $('.sec-menu-block').addClass('slidein');
+        $('.sec-menu-block').removeClass('slideout');
     });
     
     $('.navbar-back').click(function(){
         $(".sec-menu").css('display', 'none');
         $(".wholeBody").css('overflow-y', 'scroll');
+        $('.sec-menu-block').removeClass('slidein');
+        $('.sec-menu-block').addClass('slideout');
     });
     
     $('.subexpand').click(function(){

json/data.json

@@ -70,17 +70,17 @@
                 "tab":"最夯設計",
                 "data": [
                     {
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13680_20210907110118.jpg",
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13732_20210914132752.jpg",
                         "link": "https://m.hhh.com.tw/cases/detail/13680/",
                         "description": "北歐風小確幸｜48坪｜透天"
                     },
                     {
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13680_20210907110118.jpg",
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13731_20210914105623.jpg",
                         "link": "https://m.hhh.com.tw/cases/detail/13680/",
                         "description": "北歐風小確幸｜48坪｜透天"
                     },
                     {
-                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13680_20210907110118.jpg",
+                        "imgUrl": "https://m.hhh.com.tw/upload/_hcase_img_orig/name_13730_20210914101340.jpg",
                         "link": "https://m.hhh.com.tw/cases/detail/13680/",
                         "description": "北歐風小確幸｜48坪｜透天"
                     }

sass/main.css

@@ -266,13 +266,13 @@ body {
 .sec-03 .tabpar__card {
   margin: 3px;
   display: inline-block;
-  min-width: 340px;
+  min-width: 350px;
   font-size: 14px;
 }
 
 .sec-03 .tabpar__card__imgfr {
   width: 100%;
-  height: 28vh;
+  height: 29vh;
   overflow: hidden;
   position: relative;
 }
@@ -391,7 +391,7 @@ body {
 .sec-07 .slick-dots {
   width: 15%;
   margin: 0 auto;
-  margin-top: 1.5rem;
+  margin-top: 1rem;
   height: 5px;
   background-color: #d6d6d6;
   border-radius: 1rem;
@@ -425,12 +425,16 @@ body {
   margin-bottom: 0;
 }
 
+.sec-08 {
+  padding: 1.5rem 0;
+}
+
 .sec-08__slider {
   height: 100%;
 }
 
 .sec-08__slider .slide-item {
-  height: 28vh;
+  height: 24vh;
   background-position: center center;
   background-size: contain;
   background-repeat: no-repeat;
@@ -441,19 +445,11 @@ body {
 }
 
 .sec-09__cardgrp {
-  min-width: 100%;
-  height: 20vh;
-  overflow-x: auto;
-  overflow-y: hidden;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  width: 100%;
+  height: 25vh;
   box-shadow: 0 4px 2px -2px #d8d8d8;
   -webkit-box-shadow: 0 4px 2px -2px #d8d8d8;
   -moz-box-shadow: 0 4px 2px -2px #d8d8d8;
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
 }
 
 .sec-09__cardgrp::-webkit-scrollbar {
@@ -462,8 +458,7 @@ body {
 
 .sec-09__card {
   margin: 5px;
-  display: inline-block;
-  min-width: 35vw;
+  text-align: center;
 }
 
 .sec-09__card__imgfr {
@@ -583,9 +578,13 @@ body {
 .sec-menu-block {
   padding-top: 61px;
   margin: 0;
+  -webkit-transition: -webkit-transform .5s;
+  transition: -webkit-transform .5s;
+  transition: transform .5s;
+  transition: transform .5s, -webkit-transform .5s;
   position: fixed;
   top: 0;
-  left: 0;
+  left: -100%;
   right: 0;
   height: 100%;
   overflow-y: scroll;
@@ -593,6 +592,16 @@ body {
   background-color: white;
 }
 
+.sec-menu-block.slidein {
+  -webkit-animation: slidein 0.3s forwards;
+  animation: slidein 0.3s forwards;
+}
+
+.sec-menu-block.slideout {
+  -webkit-animation: slideout 0.3s forwards;
+  animation: slideout 0.3s forwards;
+}
+
 .sec-menu-list {
   background: white;
   margin-bottom: 0;
@@ -748,6 +757,30 @@ body {
   font-size: 13px;
 }
 
+@-webkit-keyframes slidein {
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes slidein {
+  100% {
+    left: 0;
+  }
+}
+
+@-webkit-keyframes slideout {
+  100% {
+    left: -100%;
+  }
+}
+
+@keyframes slideout {
+  100% {
+    left: -100%;
+  }
+}
+
 .sec-search {
   display: none;
   z-index: 107;

sass/main.scss

@@ -213,11 +213,11 @@ body {
         &__card {
             margin: 3px;
             display: inline-block;
-            min-width: 340px;
+            min-width: 350px;
             font-size: 14px;
             &__imgfr {
                 width: 100%;
-                height: 28vh;
+                height: 29vh;
                 overflow: hidden;
                 position: relative;
             }
@@ -309,8 +309,7 @@ body {
 
 .sec-07 {
     &__slider {
-        width: 100%;
-        
+        width: 100%; 
     }
     &__imgfr {
         width: 100%;
@@ -327,7 +326,7 @@ body {
     .slick-dots {
         width: 15%;
         margin: 0 auto;
-        margin-top: 1.5rem;
+        margin-top: 1rem;
         height: 5px;
         background-color: rgb(214, 214, 214);
         border-radius: 1rem;
@@ -358,10 +357,11 @@ body {
 }
 
 .sec-08 {
+    padding: 1.5rem 0;
     &__slider {
         height: 100%;
         .slide-item {
-            height: 28vh;
+            height: 24vh;
             background-position: center center;
             background-size: contain;
             background-repeat: no-repeat;
@@ -373,24 +373,18 @@ body {
 .sec-09 {
     margin-bottom: 1rem;
     &__cardgrp {
-        min-width: 100%;
-        height: 20vh;
-        overflow-x: auto;
-        overflow-y: hidden;
-        display: flex;
+        width: 100%;
+        height: 25vh;
         box-shadow: 0 4px 2px -2px rgb(216, 216, 216);
         -webkit-box-shadow: 0 4px 2px -2px rgb(216, 216, 216);
         -moz-box-shadow: 0 4px 2px -2px rgb(216, 216, 216);
         &::-webkit-scrollbar {
             display: none;
         }
-        -ms-overflow-style: none;  /* IE and Edge */
-        scrollbar-width: none;
     }
     &__card {
         margin: 5px;
-        display: inline-block;
-        min-width: 35vw;
+        text-align: center;
             &__imgfr {
                 width: 100%;
                 img {
@@ -502,17 +496,28 @@ body {
         padding-top: 61px;
         margin:0;
         // transform: translateX(-500px);
-        //transition: transform 1s;
+        transition: transform .5s;
         position: fixed;
         top: 0;
-        left: 0;
+        left: -100%;
         right: 0;
         height: 100%;
         overflow-y: scroll;
         max-width: 100%;
         background-color: white;
-        &.active {
+        &.slidein {
             //transform: translateX(0px);
+            -webkit-animation: slidein 0.3s forwards;
+            
+            animation: slidein 0.3s forwards;
+            
+        }
+        &.slideout {
+            //transform: translateX(0px);
+            -webkit-animation: slideout 0.3s forwards;
+            
+            animation: slideout 0.3s forwards;
+            
         }
     }
     &-list {
@@ -642,6 +647,23 @@ body {
     }
 }
 
+@-webkit-keyframes slidein {
+    100% { left: 0; }
+}
+
+@keyframes slidein {
+    100% { left: 0; }
+}
+
+@-webkit-keyframes slideout {
+    100% { left: -100%; }
+}
+
+@keyframes slideout {
+    100% { left: -100%; }
+}
+
+
 .sec-search {
     display: none;
     z-index: 107;