表單功能

goto.js

@@ -124,4 +124,143 @@ $("*").each(function (index, element) {
   // html 在滾動滾輪時 停止 html 所有效果
   $("html").on("mousewheel", function () {
     $("html").stop();
-  });
+  });
+
+  $(".sec03-table-title").addClass("contant-toggle");
+
+$("#sec03-slider").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+  console.log('beforeChangeEvent: currenSlide=' + currentSlide + ', nextSlide= ' + nextSlide);
+  if (nextSlide == 1) {
+    $(".sec03-table-title").removeClass("contant-toggle");
+    $(".sec03-table-title2").addClass("contant-toggle");
+  }
+
+   else if (nextSlide == 0) {
+    $(".sec03-table-title2").removeClass("contant-toggle");
+    $(".sec03-table-title").addClass("contant-toggle");
+  }
+
+});
+
+// 電腦版email
+$.fn.serializeObject = function () {
+  var o = {};
+  var a = this.serializeArray();
+  // o["id"] = 0;
+  // o["time_stamp"] = "";
+  $.each(a, function () {
+    if (o[this.name]) {
+      if (!o[this.name].push) {
+        o[this.name] = [o[this.name]];
+      }
+      o[this.name].push(this.value || '');
+    } else {
+      o[this.name] = this.value || '';
+    }
+  });
+
+  return o;
+};
+
+$(".contact-form-destop").submit(function (e) {
+  /*	var formRef = $('#form1').serializeArray();
+    var jsonString = JSON.stringify(formRef);*/
+  var jsonInfo = $('.contact-form-destop').serializeObject();
+  var jsonString = JSON.stringify(jsonInfo);
+  console.log(jsonString),
+    $.ajax({
+      type: 'GET',
+      url: 'http://172.105.205.52:8003/get_sub_list',
+      data: jsonString,
+      dataType: 'json',
+
+      success: function (data) {
+        console.log('送出成功: ' + data);
+        alert("送出成功");
+        // if (data == 0) {
+        //   alert("送出成功");
+        // } else if (data == 1) {
+        //   alert("此email已填過表單");
+        // } else if (data == 2) {
+        //   alert("此phone已填過表單");
+        // } else if (data == 3) {
+        //   alert("此email、phone已填過表單");
+        // }
+        // location.reload();
+      },
+      beforeSend: function () {
+        console.log('beforeSend');
+      },
+      complete: function () {
+        console.log('complete');
+      },
+      error: function (jqXHR, textStatus, errorThrown) {
+        console.log(JSON.stringify(jqXHR));
+        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+        console.log('送出失敗: ' + jqXHR.responseText);
+      }
+    });
+  return false;
+});
+
+// 手機板 email
+$.fn.serializeObject = function () {
+  var o = {};
+  var a = this.serializeArray();
+
+  $.each(a, function () {
+    if (o[this.name]) {
+      if (!o[this.name].push) {
+        o[this.name] = [o[this.name]];
+      }
+      o[this.name].push(this.value || '');
+    } else {
+      o[this.name] = this.value || '';
+    }
+  });
+
+  return o;
+};
+
+$(".contact-form-mobile").submit(function (e) {
+  /*	var formRef = $('#form1').serializeArray();
+    var jsonString = JSON.stringify(formRef);*/
+  var jsonInfo = $('.contact-form-mobile').serializeObject();
+  var jsonString = JSON.stringify(jsonInfo);
+  console.log(jsonString),
+    $.ajax({
+      type: 'GET',
+      url: 'http://172.105.205.52:8003/get_sub_list',
+      data: jsonString,
+      dataType: 'json',
+
+
+
+      success: function (data) {
+        console.log('送出成功: ' + data);
+        alert("送出成功");
+        // if (data == 0) {
+        //   alert("送出成功");
+        // } else if (data == 1) {
+        //   alert("此email已填過表單");
+        // } else if (data == 2) {
+        //   alert("此phone已填過表單");
+        // } else if (data == 3) {
+        //   alert("此email、phone已填過表單");
+        // }
+        location.reload();
+      },
+      beforeSend: function () {
+        console.log('beforeSend');
+      },
+      complete: function () {
+        console.log('complete');
+      },
+      error: function (jqXHR, textStatus, errorThrown) {
+        console.log(JSON.stringify(jqXHR));
+        console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+        console.log('送出失敗: ' + jqXHR.responseText);
+      }
+    });
+  return false;
+});

index.html

@@ -18,9 +18,6 @@
 </head>
 
 <body id="top">
-    <script async defer crossorigin="anonymous"
-        src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v11.0&appId=111118874418490&autoLogAppEvents=1"
-        nonce="HfYf9wQz"></script>
 
     <!-- 主選單 -->
     <section id="Navigation" class="container-fluid">
@@ -31,7 +28,7 @@
             <div id="link" class="col-md-10 col-lg-10">
                 <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="">相關新聞</a>
                 <a  data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="60">TOP NFT ARTIST</a>
-                <a   data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="60">洞察報告</a>
+                <a  data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="60">洞察報告</a>
                 <a  data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="60">熱門作品</a>
                 <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60" >NFT資訊</a>
                 <a data-gt-target="#sec07" data-gt-duration="500" data-gt-offset="50" >NFT趨勢數據</a>
@@ -46,19 +43,19 @@
         <div style="text-align: right;">
             <img class="close" src="./img/close.png" alt="">
         </div>
-           <a class="link" data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="" style="padding-top: 3vw;">相關新聞</a>
+           <a class="link" data-gt-target="#sec01" data-gt-duration="500" data-gt-offset="0" style="padding-top: 3vw;">相關新聞</a>
             <hr>
            <a class="link" data-gt-target="#sec02-moblie" data-gt-duration="800" data-gt-offset="60">TOP NFT ARTIST</a>
             <hr>
             <a class="link" data-gt-target="#sec04-moblie" data-gt-duration="500" data-gt-offset="60">洞察報告</a>
             <hr>
-          <a class="link" data-gt-target="#sec05-moblie " data-gt-duration="500" data-gt-offset="60">熱門作品</a>
+          <a class="link" data-gt-target="#sec05-moblie" data-gt-duration="500" data-gt-offset="60">熱門作品</a>
             <hr>
             <a class="link" data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">NFT資訊</a>
             <hr>
            <a class="link" data-gt-target="#sec07-moblir-title" data-gt-duration="500" data-gt-offset="50">NFT趨勢數據</a>
             <hr>
-            <a class="link" data-gt-target="" data-gt-duration="500" data-gt-offset="">聯絡我們</a>
+            <a class="link" data-gt-target="#footer" data-gt-duration="500" data-gt-offset="">聯絡我們</a>
             <hr>
 
         </div>
@@ -441,7 +438,7 @@
                     <h1 class="sec03-table-title">COMMUNITY PICKS</h1>
                 </div>
                 <div class="col-6">
-                    <h1 class="sec03-table-title" style="color:#9B9B9B;">PROMOTED CREATIONS</h1>
+                    <h1 class="sec03-table-title2">PROMOTED CREATIONS</h1>
                 </div>
             </div>
             <img style="position: absolute;" class="arrow-table" src="./img/arrow-table.png" alt="">
@@ -700,7 +697,7 @@
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
                             <p class="card-text">【林之晨專欄】特斯拉2月原本要接受比特幣購車，5月卻改口說太耗能而喊停。背後的真相為何？這樣的耗能值得嗎？近期北美科技圈的熱門議題......
                             </p>
-                            <a href="https://www.cw.com.tw/article/5115048?from=search">查看更多</a>
+                            <a target="https://www.cw.com.tw/article/5115048?from=search" href="https://www.cw.com.tw/article/5115048?from=search"><button class="learn-more">LearnMore</button></a>
 
                         </div>
                     </div>
@@ -714,7 +711,8 @@
                             <p class="card-text">這類藝術品的規模有多大，大多數NFT都可以當成藝術品，比如卡牌，比如NBA TOP SHOT,那麼這個數據劃分其實有很大不一樣.......
                             </p>
 
-                            <a href="https://weibo.com/ttarticle/p/show?id=2309404643700557873571">查看更多</a>
+                            <a target="https://weibo.com/ttarticle/p/show?id=2309404643700557873571" href="https://weibo.com/ttarticle/p/show?id=2309404643700557873571"><button class="learn-more">LearnMore</button></a>
+
                         </div>
                     </div>
                 </div>
@@ -726,7 +724,8 @@
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
                             <p class="card-text">【林之晨專欄】特斯拉2月原本要接受比特幣購車，5月卻改口說太耗能而喊停。背後的真相為何？這樣的耗能值得嗎？近期北美科技圈的熱門議題......
                             </p>
-                            <a href="https://www.cw.com.tw/article/5115048?from=search">查看更多</a>
+                            <a href="https://www.cw.com.tw/article/5115048?from=search"><button class="learn-more">LearnMore</button></a>
+
 
                         </div>
                     </div>
@@ -740,7 +739,8 @@
                             <p class="card-text">這類藝術品的規模有多大，大多數NFT都可以當成藝術品，比如卡牌，比如NBA TOP SHOT,那麼這個數據劃分其實有很大不一樣.......
                             </p>
 
-                            <a href="https://weibo.com/ttarticle/p/show?id=2309404643700557873571">查看更多</a>
+                            <a href="https://weibo.com/ttarticle/p/show?id=2309404643700557873571"><button class="learn-more">LearnMore</button></a>
+
                         </div>
                     </div>
                 </div>

style.css

@@ -640,12 +640,17 @@ body .learn-more:hover {
   }
 }
 
-#sec03-moblie .sec03-table-title {
+#sec03-moblie .sec03-table-title, #sec03-moblie .sec03-table-title2 {
   font-family: 微軟正黑體;
   font-weight: 900;
   font-size: 15px;
   padding: 0 !important;
   margin-bottom: 20px;
+  color: #9B9B9B;
+}
+
+#sec03-moblie .contant-toggle {
+  color: #000;
 }
 
 #sec03-moblie #sec03-slider .slick-slide img {
@@ -853,6 +858,14 @@ body .learn-more:hover {
      object-fit: cover;
 }
 
+#sec04-moblie #sec04-moblie-container .col .card .card-title {
+  font-weight: 900;
+}
+
+#sec04-moblie #sec04-moblie-container .col .card .learn-more {
+  width: 120px;
+}
+
 #sec05 {
   width: 85vw;
   margin: 0 auto;

style.scss

@@ -531,13 +531,19 @@ body {
             bottom: 200px;
         }
     }
-    .sec03-table-title {
+    .sec03-table-title,.sec03-table-title2 {
         font-family: 微軟正黑體;
         font-weight: 900;
         font-size: 15px;
         padding: 0 !important;
         margin-bottom: 20px;
+        color:#9B9B9B;
     }
+    .contant-toggle{
+        color:#000;
+    
+    }
+    
     #sec03-slider {
         .slick-slide img {
             display: inline;
@@ -644,6 +650,7 @@ body {
         }
     }
 }
+// sec04洞察報告 手機板
 #sec04-moblie {
     padding-top: 5vw;
     padding-bottom: 5vw;
@@ -692,6 +699,13 @@ body {
                 }
                 border-radius: 0%;
                 box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
+                .card-title{
+                    font-weight: 900;
+                }
+
+                .learn-more{
+                    width: 120px;
+                }
             }
         }
     }
@@ -1023,3 +1037,4 @@ body {
         }
     }
 }
+