update index

layouts/index.html

@@ -18,6 +18,7 @@
       {{ partial "components/serve.html" . }}
       {{ partial "components/progress.html" . }}
       {{ partial "LP_components/blogs_tab.html" . }}
+      {{ partial "LP_components/action.html" . }}
       {{ partial "footer.html" . }}
     </div>
 

layouts/partials/components/progress.html

@@ -23,6 +23,6 @@
         <span class="ai-ad"></span>
         <span class="seo"></span>
         <span class="ai-video"></span>
-        <span class="blog"></span>
+        <!-- <span class="blog"></span> -->
     </div>
 </div>

layouts/partials/components/serve.html

@@ -42,7 +42,7 @@
     </div>
   </div>
   <div class="d-flex justify-content-center mb-5">
-    <a href="" class="more-btn">
+    <a href="/ad-operation/dm/" class="more-btn">
       點我了解更多
     </a>
   </div>
@@ -120,7 +120,7 @@
         allowfullscreen></iframe>
     </div>
     <div class="d-flex justify-content-center">
-      <a href="" class="more-btn">
+      <a href="/seo/dm/" class="more-btn">
         點我了解更多
       </a>
     </div>

layouts/partials/navbar.html

@@ -11,7 +11,7 @@
     <div class="collapse navbar-collapse ms-auto" id="navbarNav">
       <ul class="navbar-nav">
         <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="/">首頁</a>
+          <a class="nav-link active" aria-current="page" href="/">Home</a>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"

layouts/youtube-views/single.html

@@ -547,39 +547,9 @@
       </div>
     </div> -->
   </main>
-  <footer class="footer">
-    <div class="container">
-      <div class="row">
-        <div class="col-xs-12 col-sm-6">
-          <img src="https://i.imgur.com/P1gNopa.png" alt="" width="250">
-          <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
-          <div class="footer-follow">關注我們</div>
-          <div class="footer-socials">
-            <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/qnd9QrT.png" alt=""
-                width="32px" height="32px"></a>
-            <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/WdCAhSo.png" alt="" width="48px"
-                height="48px"></a>
-            <a href="https://line.me/R/ti/p/@choozmo?from=page"><img src="https://i.imgur.com/dNZ2aGW.png" alt=""
-                width="32px" height="32px"></a>
-            <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
-                src="https://i.imgur.com/zn6DUY8.png" alt="" width="32px" height="32px"></a>
-            <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/pdJPY7m.png" alt=""
-                width="48px" height="48px"></a>
-            <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/qGBzq4J.png" alt="" width="32px"
-                height="32px"></a>
-          </div>
-        </div>
-        <div class="col-xs-12 col-sm-6">
-          <div class="footer-contacts" style="margin-top: 2rem;">
-            <h5>CONTACT</h5>
-            <div>
-              集仕多股份有限公司<br>新竹縣竹北市復興二路229號9樓之9<br>聯絡電話：036670804<br>聯絡信箱：SERVICE@CHOOZMO.COM
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </footer>
+  
+  {{ partial "footer.html" . }}
+  
   <script type="application/javascript">
     var doNotTrack = false;
     if (!doNotTrack) {

static/css/custom.css

@@ -623,7 +623,7 @@
 /* sec-action */
 
 .sec-action {
-  padding-bottom: 7rem;
+  /* padding-bottom: 7rem; */
   background-color: #ffebe2;
   margin-bottom: 0 !important;
 }
@@ -689,7 +689,7 @@
   font-size: 2rem;
   background-color: white;
   color: #ea5413;
-  margin-top: 3rem;
+  margin-bottom: 3rem;
   letter-spacing: 1px;
 }
 

static/css/style.css

@@ -459,7 +459,12 @@
   }
 }
 #home .swiper .swiper-pagination {
-  bottom: -15px;
+  bottom: -10px;
+}
+@media (max-width: 991px) {
+  #home .swiper .swiper-pagination {
+    bottom: -15px;
+  }
 }
 #home .swiper .swiper-pagination-bullet-active {
   background-color: #000 !important;
@@ -964,43 +969,71 @@
 #home .sec-blogtab .blog-tabs-nav a:hover {
   opacity: 0.8;
 }
+#home .sec-action .action-btn {
+  padding: 0.8rem 3.5rem;
+  font-size: 20px;
+  font-weight: bold;
+}
 #home .progress-item {
+  opacity: 0;
   height: 100%;
-  width: 200px;
   position: fixed;
   z-index: 100;
-  left: -325px;
   top: 0;
+  transition: all 0.3s;
+}
+@media (max-width: 767px) {
+  #home .progress-item {
+    display: none;
+  }
 }
 #home .progress-item .cont {
-  height: 100%;
-  width: 420px;
-  left: calc(50% - 288px);
-  padding: 0;
-  margin: 0 auto;
+  top: 50%;
+  left: -135px;
   position: absolute;
   transform: rotate(90deg);
 }
+@media (max-width: 1200px) {
+  #home .progress-item .cont {
+    left: -145px;
+  }
+}
+@media (max-width: 991px) {
+  #home .progress-item .cont {
+    left: -150px;
+  }
+}
 #home .progress-item .cont #progress-bar {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  width: 420px;
+  width: 360px;
   color: #000;
   height: 2px;
-  margin: 0 auto;
+  margin: -2px auto;
+}
+@media (max-width: 991px) {
+  #home .progress-item .cont #progress-bar {
+    margin: -1px auto;
+  }
 }
 #home .progress-item .cont span {
-  height: 10px;
-  width: 10px;
+  height: 15px;
+  width: 15px;
   border-radius: 100%;
-  border: 3px solid #137cc0;
-  background: #137cc0;
+  border: 3px solid #a5a7a9;
+  background: #a5a7a9;
   position: absolute;
   left: 0;
   top: 12px;
   cursor: pointer;
-  transition: all 0.4s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+@media (max-width: 991px) {
+  #home .progress-item .cont span {
+    height: 12px;
+    width: 12px;
+  }
 }
 #home .progress-item .cont .journey {
   left: 70px;
@@ -1023,16 +1056,17 @@
 #home .progress-item .cont #progress-bar::-webkit-progress-value {
   /* Changes line color */
   background: #ea5413;
-  -webkit-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 #home .progress-item .cont #progress-bar::-webkit-progress-bar {
   /* Changes background color */
-  background: #137cc0;
+  background: #a5a7a9;
 }
 #home .progress-item .cont .border-change {
+  background: #ea5413;
   border-color: #ea5413;
-  transition: all 0.4s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 /* content page */
@@ -2855,7 +2889,7 @@
 }
 #youtube-views-zh .header .banner {
   width: 100vw;
-  height: 1420px;
+  height: 1360px;
   position: absolute;
   top: 0;
   right: -16vw;

static/css/style.scss

@@ -479,7 +479,10 @@
       }
     }
     .swiper-pagination {
-      bottom: -15px;
+      bottom: -10px;
+      @media (max-width: 991px) {
+        bottom: -15px;
+      }
     }
     .swiper-pagination-bullet-active {
       background-color: #000 !important;
@@ -937,39 +940,59 @@
       }
     }
   }
+  .sec-action {
+    .action-btn {
+      padding: 0.8rem 3.5rem;
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
   .progress-item {
+    opacity: 0; // 動態顯示
     height: 100%;
-    width: 200px;
     position: fixed;
     z-index: 100;
-    left: -325px;
     top: 0;
+    transition: all .3s;
+    @media (max-width: 767px) {
+      display: none;
+    }
     .cont {
-      height: 100%;
-      width: 420px;
-      left: calc(50% - 288px);
-      padding: 0;
-      margin: 0 auto;
+      top: 50%;
+      left: -135px;
       position: absolute;
       transform: rotate(90deg);
+      @media (max-width: 1200px) {
+        left: -145px;
+      }
+      @media (max-width: 991px) {
+        left: -150px;
+      }
       #progress-bar {
         appearance: none;
-        width: 420px;
+        width: 360px;
         color: #000;
         height: 2px;
-        margin: 0 auto;
+        margin: -2px auto;
+        @media (max-width: 991px) {
+          margin: -1px auto;
+        }
       }
       span {
-        height: 10px;
-        width: 10px;
+        height: 15px;
+        width: 15px;
         border-radius: 100%;
-        border: 3px solid #137cc0;
-        background: #137cc0;
+        border: 3px solid #a5a7a9;
+        background: #a5a7a9;
         position: absolute;
         left: 0;
         top: 12px;
         cursor: pointer;
-        transition: all 0.4s ease-in-out;
+        transition: all 0.3s ease-in-out;
+        @media (max-width: 991px) {
+          height: 12px;
+        width: 12px;
+        }
       }
       .journey {
         left: calc(420 / 6) + px;
@@ -992,15 +1015,16 @@
       #progress-bar::-webkit-progress-value {
         /* Changes line color */
         background: #ea5413;
-        transition: all 0.4s ease-in-out;
+        transition: all 0.3s ease-in-out;
       }
       #progress-bar::-webkit-progress-bar {
         /* Changes background color */
-        background: #137cc0;
+        background: #a5a7a9;
       }
       .border-change {
+        background: #ea5413;
         border-color: #ea5413;
-        transition: all 0.4s ease-in-out;
+        transition: all 0.3s ease-in-out;
       }
     }
   }
@@ -2664,7 +2688,7 @@
     }
     .banner {
       width: 100vw;
-      height: 1420px;
+      height: 1360px;
       position: absolute;
       top: 0;
       right: -16vw;

static/js/progress.js

@@ -1,39 +1,98 @@
 $(document).ready(function () {
-  $('.progress-item span').click(function (e) {
+  $('.progress-item span').click(function () {
     let className = $(this).attr("class").split(' ')[0];
-
-    console.log('animate');
-    console.log('className', className);
-
     // 錨點
     $('html,body').animate({ scrollTop: $(`#${className}`).offset().top }, 300);
 
     let percent = '';
 
     if (className === "journey") {
-      percent = '17'
+      percent = '20'
     } else if (className === "team") {
-      percent = '34'
+      percent = '40'
     } else if (className === "ai-ad") {
-      percent = '51'
+      percent = '60'
     } else if (className === "seo") {
-      percent = '68'
+      percent = '80'
     } else if (className === "ai-video") {
-      percent = '85'
-    } else if (className === "blog") {
       percent = '100'
     }
 
-    console.log('click', e);
+    // if (className === "journey") {
+    //   percent = '17'
+    // } else if (className === "team") {
+    //   percent = '34'
+    // } else if (className === "ai-ad") {
+    //   percent = '51'
+    // } else if (className === "seo") {
+    //   percent = '68'
+    // } else if (className === "ai-video") {
+    //   percent = '85'
+    // } else if (className === "blog") {
+    //   percent = '100'
+    // }
 
     if ($(this).hasClass('info')) {
       $('#progress-bar').val('0');
       $(this).nextAll().removeClass('border-change');
     } else if ($(this).hasClass(className)) {
-      $(this).nextAll().removeClass('border-change');
+      // $(this).nextAll().removeClass('border-change');
       $('#progress-bar').val(percent);
       $(this).prevAll().addClass('border-change');
       $(this).addClass('border-change');
     }
   });
-});// complete click 
+});
+
+var scroll = 0;
+let scrollVal = '';
+
+$(window).scroll(function () {
+  console.log($('#info').offset().top);
+  // 於特定區塊顯示進度條
+  if ($(this).scrollTop() > $('#info').offset().top - 200) {
+    $(".progress-item").css("opacity", "1");
+  } else if ($(this).scrollTop() < $('#info').offset().top) {
+    $(".progress-item").css("opacity", "0");
+  }
+  if ($(this).scrollTop() > $('#blog').offset().top - 700) {
+    $(".progress-item").css("opacity", "0");
+  }
+
+  // 依捲軸高度調整 progress-bar value
+  if ($(this).scrollTop() > $('#info').offset().top - 100 && $(this).scrollTop() < $('#info').offset().top + 50) {
+    scrollVal = '0';
+    $('.info').nextAll().removeClass('border-change');
+  } else if ($(this).scrollTop() > $('#journey').offset().top - 100 && $(this).scrollTop() < $('#journey').offset().top + 50) {
+    scrollVal = '20';
+    $('.journey').nextAll().removeClass('border-change');
+    $('.journey').prevAll().addClass('border-change');
+    $('.journey').addClass('border-change');
+  } else if ($(this).scrollTop() > $('#team').offset().top - 100 && $(this).scrollTop() < $('#team').offset().top + 50) {
+    scrollVal = '40';
+    $('.team').nextAll().removeClass('border-change');
+    $('.team').prevAll().addClass('border-change');
+    $('.team').addClass('border-change');
+  } else if ($(this).scrollTop() > $('#ai-ad').offset().top - 100 && $(this).scrollTop() < $('#ai-ad').offset().top + 50) {
+    scrollVal = '60';
+    $('.ai-ad').nextAll().removeClass('border-change');
+    $('.ai-ad').prevAll().addClass('border-change');
+    $('.ai-ad').addClass('border-change');
+  } else if ($(this).scrollTop() > $('#seo').offset().top - 100 && $(this).scrollTop() < $('#seo').offset().top + 50) {
+    scrollVal = '80';
+    $('.seo').nextAll().removeClass('border-change');
+    $('.seo').prevAll().addClass('border-change');
+    $('.seo').addClass('border-change');
+  } else if ($(this).scrollTop() > $('#ai-video').offset().top - 100 && $(this).scrollTop() < $('#ai-video').offset().top + 500) {
+    scrollVal = '100';
+    $('.ai-video').nextAll().removeClass('border-change');
+    $('.ai-video').prevAll().addClass('border-change');
+    $('.ai-video').addClass('border-change');
+  }
+  // else if ($(this).scrollTop() > $('#blog').offset().top - 100 && $(this).scrollTop() < $('#blog').offset().top + 50) {
+  //   scrollVal = '100';
+  //   $('.blog').addClass('border-change');
+  // }
+
+  $('#progress-bar').val(scrollVal);
+})