浏览代码

fb按鈕 樣式修正

jeter20131220 3 年之前
父节点
当前提交
5132e98766
共有 6 个文件被更改,包括 125 次插入30 次删除
  1. 90 0
      desktop11/goto.js
  2. 二进制
      desktop11/img/logo/facebook.png
  3. 9 6
      desktop11/index.html
  4. 15 13
      desktop11/style.css
  5. 0 0
      desktop11/style.css.map
  6. 11 11
      desktop11/style.scss

+ 90 - 0
desktop11/goto.js

@@ -231,4 +231,94 @@ $(document).ready(function () {
   $("#date").datepicker();
 });
 
+// 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);
+      });
+  }
+  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'});
+  }
+  
 

二进制
desktop11/img/logo/facebook.png


+ 9 - 6
desktop11/index.html

@@ -37,7 +37,7 @@
 
 
 <body id="top">
-    <script>
+    <!-- <script>
         function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
             if (response.status === 'connected') {  // 已登入
                 testAPI();
@@ -81,7 +81,7 @@
 
 
 
-    </script>
+    </script> -->
 
     <div class="container-fluid" style="padding:0;margin:0 ">
         <div class="banner container-fluid" style="padding:0; margin:0 ">
@@ -424,13 +424,15 @@
                         </div>
                         <hr>
 
+                        
                         <div id="form-right">
-                            <div id="fb_login">
+                            <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span  style="padding-right:5vw; font-size: 25px;">|</span>使用fb填入信箱與姓名</p></button>
+                            <!-- <div id="fb_login">
                                 <fb:login-button id="fb-button" scope="public_profile,email"
-                                    onlogin="checkLoginState();" style="padding-right: 20px;" data-size="large">使用FB填入信箱與姓名
+                                    onlogin="checkLoginState();"   data-button-type="continue_with" data-size="large">使用FB填入信箱與姓名
                                 </fb:login-button>
                                 <div id="status"></div>
-                            </div>
+                            </div> -->
 
                             <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
                             <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
@@ -473,11 +475,12 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
         integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
         crossorigin="anonymous"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
     <script src="./goto.js"></script>
+ 
 </body>
 
 </html>

+ 15 - 13
desktop11/style.css

@@ -626,51 +626,53 @@ body .arrow:hover {
   padding: 30px;
 }
 
-#contact-us #contact-form #form-right #fb-button ._4z_6 {
-  font-size: 20px !important;
-}
-
-#contact-us #contact-form #form-right #111 {
+#contact-us #contact-form #facebook {
   margin-top: 12px;
   width: 29vw;
   height: 50px;
   border: 1px solid #3b5998;
   text-align: right;
   padding-right: 50px;
-  line-height: 50px;
+  background-size: 32px 32px;
   background-color: #fff;
   -webkit-transition: 0.3s;
   transition: 0.3s;
   position: relative;
 }
 
-#contact-us #contact-form #form-right #111 img {
+#contact-us #contact-form #facebook p {
+  line-height: 40px;
+}
+
+#contact-us #contact-form #facebook img {
   position: absolute;
   left: 50px;
   top: 7px;
   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 #form-right #111:hover {
+#contact-us #contact-form #facebook:hover {
   background-color: #2a4f91;
   color: #fff;
 }
 
-#contact-us #contact-form #form-right #111: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%);
 }
 
-#contact-us #contact-form #form-right a {
+#contact-us #contact-form a {
   text-decoration: none;
   color: #ee751b;
   font-weight: 900;
 }
 
-#contact-us #contact-form #form-right #email,
-#contact-us #contact-form #form-right #name,
-#contact-us #contact-form #form-right #phone {
+#contact-us #contact-form #email,
+#contact-us #contact-form #name,
+#contact-us #contact-form #phone {
   background: none;
   background-color: #fff;
 }

文件差异内容过多而无法显示
+ 0 - 0
desktop11/style.css.map


+ 11 - 11
desktop11/style.scss

@@ -547,30 +547,31 @@ body {
                     padding: 30px;
                 }
             }
-            #fb-button {
-                ._4z_6 {
-                    font-size: 20px !important;
-                }
+           
             }
-            #111 {
+            #facebook{
                 margin-top: 12px;
                 width: 29vw;
                 height: 50px;
                 border: 1px solid #3b5998;
                 text-align: right;
                 padding-right: 50px;
-                line-height: 50px;
-                // background: url(./img/facebook.png) 10% 50% no-repeat scroll transparent;
-                // background-size: 32px 32px;
+               
+                // background: url(./img/logo/facebook.png) 10% 50% no-repeat scroll transparent;
+                background-size: 32px 32px;
                 background-color: #fff;
                 transition: 0.3s;
                 position: relative;
+               p{
+                line-height: 40px;
+               }
                 img {
                     position: absolute;
                     left: 50px;
                     top: 7px;
                     width: 32px;
                     height: 32px;
+                    filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
                 }
                 &:hover {
                     background-color: #2a4f91;
@@ -586,8 +587,7 @@ body {
                 color: #ee751b;
                 font-weight: 900;
             }
-            #checkbox {
-            }
+    
             #email,
             #name,
             #phone {
@@ -595,7 +595,7 @@ body {
                 background-color: #fff;
             }
         }
-    }
+    
     .btn {
         margin: 50px auto;
         border: none;

部分文件因为文件数量过多而无法显示