修正

desktop11/goto.js

@@ -15,15 +15,15 @@ $(".content1-right").slick({
 
 // // gototop 下滑效果
 $(".arrow").hide();
-$(window).scroll(function(){
-   var y = window.scrollY;
-    
-  if(y>10){
+$(window).scroll(function () {
+  var y = window.scrollY;
+
+  if (y > 10) {
     $(".arrow").show();
-  }else{
-     $(".arrow").hide();
+  } else {
+    $(".arrow").hide();
   }
-    
+
 });
 // content輪播圖片偵測效果
 $(".text-1").addClass("contant-toggle");
@@ -234,91 +234,87 @@ $(document).ready(function () {
 // javascript document
 // This is called with the results from from FB.getLoginStatus().
 
-  
-  function statusChangeCallback(response) {
-      console.log('statusChangeCallback');
-      console.log(response);
-      // The response object is returned with a status field that lets the
-      // app know the current login status of the persopren.
-      // Full docs on the response object can be found in the documentation
-      // for FB.getLoginStatus().
-      if (response.status === 'connected') {
-          // Logged into your app and Facebook.
-          login(response.authResponse.accessToken);
-      } else if (response.status === 'not_authorized') {
-          // The person is logged into Facebook, but not your app.
-          console.log('The person is logged into Facebook, but not your app');
-      } else {
-          // The person is not logged into Facebook, so we're not sure if
-          // they are logged into this app or not.
-          console.log("The person is not logged into Facebook");
-      }
-  }
-  // This function is called when someone finishes with the Login
-  // Button.  See the onlogin handler attached to it in the sample
-  // code below.
-  function checkLoginState() {
-      FB.getLoginStatus(function(response) {
-          statusChangeCallback(response);
-      });
+
+function statusChangeCallback(response) {
+  console.log('statusChangeCallback');
+  console.log(response);
+  // The response object is returned with a status field that lets the
+  // app know the current login status of the persopren.
+  // Full docs on the response object can be found in the documentation
+  // for FB.getLoginStatus().
+  if (response.status === 'connected') {
+    // Logged into your app and Facebook.
+    login(response.authResponse.accessToken);
+  } else if (response.status === 'not_authorized') {
+    // The person is logged into Facebook, but not your app.
+    console.log('The person is logged into Facebook, but not your app');
+  } else {
+    // The person is not logged into Facebook, so we're not sure if
+    // they are logged into this app or not.
+    console.log("The person is not logged into Facebook");
   }
-  window.fbAsyncInit = function() {
-      FB.init({
-          appId      : '1388696554848391',
-          cookie     : true,  // enable cookies to allow the server to access 
-                              // the session
-          xfbml      : true,  // parse social plugins on this page
-          version    : 'v11.0' // use version 2.2
-      });
-  };
-  // Now that we've initialized the JavaScript SDK, we call
-  // FB.getLoginStatus().  This function gets the state of the
-  // person visiting this page and can return one of three states to
-  // the callback you provide.  They can be:
-  //
-  // 1. Logged into your app ('connected')
-  // 2. Logged into Facebook, but not your app ('not_authorized')
-  // 3. Not logged into Facebook and can't tell if they are logged into
-  //    your app or not.
-  //
-  // These three cases are handled in the callback function.
-  // Load the SDK asynchronously
-  (function(d, s, id) {
+}
+// This function is called when someone finishes with the Login
+// Button.  See the onlogin handler attached to it in the sample
+// code below.
+function checkLoginState() {
+  FB.getLoginStatus(function (response) {
+    statusChangeCallback(response);
+  });
+}
+window.fbAsyncInit = function () {
+  FB.init({
+    appId: '1388696554848391',
+    cookie: true,  // enable cookies to allow the server to access 
+    // the session
+    xfbml: true,  // parse social plugins on this page
+    version: 'v11.0' // use version 2.2
+  });
+};
+// Now that we've initialized the JavaScript SDK, we call
+// FB.getLoginStatus().  This function gets the state of the
+// person visiting this page and can return one of three states to
+// the callback you provide.  They can be:
+//
+// 1. Logged into your app ('connected')
+// 2. Logged into Facebook, but not your app ('not_authorized')
+// 3. Not logged into Facebook and can't tell if they are logged into
+//    your app or not.
+//
+// These three cases are handled in the callback function.
+// Load the SDK asynchronously
+(function (d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
-  }(document, "script", "facebook-jssdk"));
-  // Here we run a very simple test of the Graph API after login is
-  // successful.  See statusChangeCallback() for when this call is made.
-  function loginNEMI(token) {
-      // 把 access_token 傳至後端再做資料拿取
-      console.log("Welcome!  Fetching your information.... ");
-      var xhr=new XMLHttpRequest();
-      xhr.open("POST", "/login", true);
-      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-      xhr.onreadystatechange=function()
-      {
-        if(xhr.readyState === 4 && xhr.status === 200)
-        {
-            if(JSON.parse(xhr.responseText).status === "ok")
-              location.href="/index";
-            else
-              alert("something wrong!");
-        }  
-      };
-      xhr.send("token="+token);
-  }
-  // custom fb login button
-  function fb_login()
-  {
-      // FB 第三方登入，要求公開資料與email
-      FB.login(function(response)
-      {
-          statusChangeCallback(response);
-          console.log(response);
-      }, {scope: 'public_profile,email'});
-  }
-  
+}(document, "script", "facebook-jssdk"));
+// Here we run a very simple test of the Graph API after login is
+// successful.  See statusChangeCallback() for when this call is made.
+function loginNEMI(token) {
+  // 把 access_token 傳至後端再做資料拿取
+  console.log("Welcome!  Fetching your information.... ");
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/login", true);
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+      if (JSON.parse(xhr.responseText).status === "ok")
+        location.href = "/index";
+      else
+        alert("something wrong!");
+    }
+  };
+  xhr.send("token=" + token);
+}
+// custom fb login button
+function fb_login() {
+  // FB 第三方登入，要求公開資料與email
+  FB.login(function (response) {
+    statusChangeCallback(response);
+    console.log(response);
+  }, { scope: 'public_profile,email' });
+}
+
 

mobile/index.html

@@ -43,7 +43,7 @@
 </head>
 
 <body id="top">
-    <script>
+    <!-- <script>
         function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
             if (response.status === 'connected') {  // 已登入
                 testAPI();
@@ -83,7 +83,7 @@
                 }
             });
         };
-    </script>
+    </script> -->
     <nav class="navigation">
         <div class="logo">
             <a href="https://hhh.com.tw/"><img src="./img/logo/logomain-3.webp" alt=""></a>
@@ -245,7 +245,7 @@
                 <img src="./img/process/box4.webp" alt="">
                 <div style="margin-top: 50px;" class="process-title">
                     <div class="p-text">設計公司會</div>
-                    <div class="p-text">主動與屋主聯繫聯繫</div>
+                    <div class="p-text">主動與屋主聯繫</div>
                     <img src="./img/process/arrowdown.webp" alt="">
                 </div>
             </div>
@@ -424,11 +424,12 @@
                     <option class="option" value="type">異國風</option>
                 </select>
                 <input name="prefer_date" type="text" id="date" placeholder="預選裝修日期" required>
-                <div id="fb_login">
+                <!-- <div id="fb_login">
                     <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
                     </fb:login-button>
                     <div id="status"></div>
-                </div>
+                </div> -->
+                <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span class="sapn-line">｜</span>使用fb填入信箱與姓名</p></button>
                 <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
                 <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
                 <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>

mobile/script/goto.js

@@ -217,3 +217,85 @@ $(window).scroll(function(){
   }
     
 });
+
+function statusChangeCallback(response) {
+  console.log('statusChangeCallback');
+  console.log(response);
+  // The response object is returned with a status field that lets the
+  // app know the current login status of the persopren.
+  // Full docs on the response object can be found in the documentation
+  // for FB.getLoginStatus().
+  if (response.status === 'connected') {
+    // Logged into your app and Facebook.
+    login(response.authResponse.accessToken);
+  } else if (response.status === 'not_authorized') {
+    // The person is logged into Facebook, but not your app.
+    console.log('The person is logged into Facebook, but not your app');
+  } else {
+    // The person is not logged into Facebook, so we're not sure if
+    // they are logged into this app or not.
+    console.log("The person is not logged into Facebook");
+  }
+}
+// This function is called when someone finishes with the Login
+// Button.  See the onlogin handler attached to it in the sample
+// code below.
+function checkLoginState() {
+  FB.getLoginStatus(function (response) {
+    statusChangeCallback(response);
+  });
+}
+window.fbAsyncInit = function () {
+  FB.init({
+    appId: '1388696554848391',
+    cookie: true,  // enable cookies to allow the server to access 
+    // the session
+    xfbml: true,  // parse social plugins on this page
+    version: 'v11.0' // use version 2.2
+  });
+};
+// Now that we've initialized the JavaScript SDK, we call
+// FB.getLoginStatus().  This function gets the state of the
+// person visiting this page and can return one of three states to
+// the callback you provide.  They can be:
+//
+// 1. Logged into your app ('connected')
+// 2. Logged into Facebook, but not your app ('not_authorized')
+// 3. Not logged into Facebook and can't tell if they are logged into
+//    your app or not.
+//
+// These three cases are handled in the callback function.
+// Load the SDK asynchronously
+(function (d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/sdk.js";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, "script", "facebook-jssdk"));
+// Here we run a very simple test of the Graph API after login is
+// successful.  See statusChangeCallback() for when this call is made.
+function loginNEMI(token) {
+  // 把 access_token 傳至後端再做資料拿取
+  console.log("Welcome!  Fetching your information.... ");
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/login", true);
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+      if (JSON.parse(xhr.responseText).status === "ok")
+        location.href = "/index";
+      else
+        alert("something wrong!");
+    }
+  };
+  xhr.send("token=" + token);
+}
+// custom fb login button
+function fb_login() {
+  // FB 第三方登入，要求公開資料與email
+  FB.login(function (response) {
+    statusChangeCallback(response);
+    console.log(response);
+  }, { scope: 'public_profile,email' });
+}

mobile/style.css

@@ -388,13 +388,13 @@ body .arrow:hover {
 
 #service-process {
   margin: 0 auto;
-  width: 60vw;
+  width: 65vw;
   background-color: #f7f7f7;
 }
 
 @media screen and (max-width: 767px) {
   #service-process {
-    width: 80vw;
+    width: 85vw;
   }
 }
 
@@ -412,7 +412,7 @@ body .arrow:hover {
 }
 
 #service-process .process-box {
-  width: 60vw;
+  width: 65vw;
   display: -ms-grid;
   display: grid;
   margin: 0px auto;
@@ -422,7 +422,7 @@ body .arrow:hover {
 
 @media screen and (max-width: 767px) {
   #service-process .process-box {
-    width: 70vw;
+    width: 75vw;
   }
 }
 
@@ -481,6 +481,7 @@ body .arrow:hover {
 @media screen and (max-width: 767px) {
   #service-process .process-title .p-text {
     font-size: 18px;
+    width: 40vw;
   }
 }
 
@@ -559,14 +560,25 @@ body .arrow:hover {
 
 #feedback .box .play {
   position: absolute;
-  left: 40vw;
-  top: 20vw;
-  width: 15vw;
-  height: 15vw;
+  left: 32vw;
+  top: 15vw;
+  width: 10vw;
+  height: 10vw;
   opacity: 0.8;
   z-index: 10;
 }
 
+@media screen and (max-width: 767px) {
+  #feedback .box .play {
+    left: 40vw;
+    top: 20vw;
+    width: 15vw;
+    height: 15vw;
+    opacity: 0.8;
+    z-index: 10;
+  }
+}
+
 #contact-us {
   margin-top: 100px;
 }
@@ -698,7 +710,7 @@ body .arrow:hover {
   margin: 0 auto;
 }
 
-#contact-us #contact-form #000 {
+#contact-us #contact-form #facebook {
   margin: 15px auto;
   width: 85vw;
   height: 60px;
@@ -710,38 +722,53 @@ body .arrow:hover {
   position: relative;
 }
 
-#contact-us #contact-form #000 p {
+#contact-us #contact-form #facebook p {
   position: absolute;
-  right: 30px;
   font-weight: normal;
 }
 
 @media screen and (max-width: 1024px) {
-  #contact-us #contact-form #000 p {
-    top: 10px;
+  #contact-us #contact-form #facebook p {
+    top: 1vw;
+    right: 10vw;
+    font-size: 20px;
   }
 }
 
 @media screen and (max-width: 767px) {
-  #contact-us #contact-form #000 p {
-    top: 15px;
+  #contact-us #contact-form #facebook p {
+    top: 1.8vw;
+    right: 1vw;
+  }
+}
+
+#contact-us #contact-form #facebook p .sapn-line {
+  padding-right: 1vw;
+  font-size: 28px;
+}
+
+@media screen and (max-width: 767px) {
+  #contact-us #contact-form #facebook p .sapn-line {
+    right: 2vw;
   }
 }
 
-#contact-us #contact-form #000 img {
+#contact-us #contact-form #facebook img {
   position: absolute;
   left: 30px;
   top: 15px;
   width: 32px;
   height: 32px;
+  -webkit-filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+          filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 }
 
-#contact-us #contact-form #000:hover {
+#contact-us #contact-form #facebook:hover {
   background-color: #2a4f91;
   color: #fff;
 }
 
-#contact-us #contact-form #000:hover img {
+#contact-us #contact-form #facebook:hover img {
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 }

mobile/style.scss

@@ -294,10 +294,10 @@ body {
 #service-process {
    
     margin: 0 auto;
-    width: 60vw;
+    width: 65vw;
     background-color: #f7f7f7;
     @media screen and(max-width:$moblie) {
-        width: 80vw;
+        width: 85vw;
     }
     h1 {
         
@@ -310,12 +310,12 @@ body {
         }
     }
     .process-box {
-        width: 60vw;
+        width: 65vw;
         display: grid;
         margin: 0px auto;
         grid-template-columns: repeat(2, 1fr);
         @media screen and(max-width:$moblie) {
-            width: 70vw;
+            width: 75vw;
         }
     }
     img {
@@ -353,6 +353,7 @@ body {
             }
             @media screen and(max-width:$moblie) {
                 font-size: 18px;
+                width: 40vw;
             }
         }
         img {
@@ -413,12 +414,20 @@ body {
         }
         .play{
             position: absolute;
+            left:32vw;
+            top:15vw;
+            width: 10vw;
+            height: 10vw;
+            opacity: 0.8;
+            z-index: 10;
+            @media screen and(max-width:$moblie) {
             left:40vw;
             top:20vw;
             width: 15vw;
             height: 15vw;
             opacity: 0.8;
             z-index: 10;
+            }
            
         }
     }
@@ -525,7 +534,7 @@ body {
             display: block;
             margin: 0 auto;
         }
-        #000 {
+        #facebook {
             margin: 15px auto;
             width: 85vw;
             height: 60px;
@@ -538,23 +547,35 @@ body {
             position: relative;
             p {
                 position: absolute;
-                right: 30px;
-
+           
                 font-weight: normal;
                 @media screen and(max-width:$table) {
-                    top: 10px;
+                    top: 1vw;
+                    right: 10vw;
+                    font-size: 20px;
                 }
 
                 @media screen and(max-width:$moblie) {
-                    top: 15px;
+                    top: 1.8vw;
+                    right: 1vw;
+                }
+                .sapn-line{
+                    padding-right: 1vw;
+                    font-size: 28px;
+                    @media screen and(max-width:$moblie) {
+                        
+                        right: 2vw;
+                    }
                 }
             }
+         
             img {
                 position: absolute;
                 left: 30px;
                 top: 15px;
                 width: 32px;
                 height: 32px;
+                filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
             }
             &:hover {
                 background-color: #2a4f91;