Added login with google and sign up with google background blur

sau-mili · Jun 11, 2024 · 83ff3f7 · 83ff3f7
1 parent f52caa4
commit 83ff3f7
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 5 deletions.
diff --git a/login.css b/login.css
@@ -16,6 +16,7 @@ body {
   background-position: center;
   background-attachment: fixed;
   padding: 30px;
+  backdrop-filter: blur(5px);
 }
 
 .container {
@@ -24,7 +25,7 @@ body {
   width: 100%;
   background: #fff;
   padding: 40px 30px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(49, 49, 49, 0.2);
   perspective: 2700px;
 }
 .container .cover {
@@ -116,8 +117,8 @@ form .form-content .input-box {
   width: 100%;
   outline: none;
   border: none;
-  padding: 0 30px;
-  font-size: 17px;
+  padding: 0 20px;
+  font-size: 15px;
   font-weight: 500;
   border-bottom: 2px solid rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
@@ -130,7 +131,7 @@ form .form-content .input-box {
 .form-content .input-box i {
   position: absolute;
   color: #ffcc00f1;
-  font-size: 17px;
+  font-size: 14px;
 }
 
 form .form-content .text {
@@ -170,9 +171,61 @@ form .form-content label:hover {
 form .form-content .login-text,
 form .form-content .sign-up-text {
   text-align: center;
-  margin-top: 25px;
+  margin-top: 15px;
 }
 
 .container #flip {
   display: none;
 }
+
+
+.login-with-google-btn {
+  transition: background-color .3s, box-shadow .3s;
+  cursor: pointer;
+  padding: 12px 16px 12px 42px;
+  /* border: none; */
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
+  width:70%;
+  border-width:2px;
+  border-color: #d8aa03;
+  color: #555555;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
+  background-color: rgb(255, 250, 220);
+  background-repeat: no-repeat;
+  background-position: 12px 11px;
+
+  &:hover {
+    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
+  }
+
+  &:active {
+    background-color: #eeeeee;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 
+      0 -1px 0 rgba(0, 0, 0, .04),
+      0 2px 4px rgba(0, 0, 0, .25),
+      0 0 0 3px #c8dafc;
+  }
+
+  &:disabled {
+    filter: grayscale(100%);
+    background-color: #ebebeb;
+    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
+    cursor: not-allowed;
+  }
+}
+
+
+
+
+
+
+
diff --git a/login.html b/login.html
@@ -39,6 +39,12 @@
             <div class="button input-box">
               <input type="button" value="Submit" onclick="authenticate()" />
             </div>
+            <div class="text sign-up-text">or</div>
+            <div class="google text sign-up-text">
+              <button type="button" class="login-with-google-btn" >
+                Log in with Google
+              </button> 
+            </div>
             <div class="text login-text">
               Don't have an account? <a href="signup.html">Sign Up</a>
             </div>

diff --git a/signup.html b/signup.html
@@ -42,6 +42,12 @@
           <div class="button input-box">
             <input type="submit" value="Submit" />
           </div>
+          <div class="text sign-up-text">or</div>
+          <div class="google text sign-up-text">
+            <button type="button" class="login-with-google-btn" >
+              Sign up with Google
+            </button> 
+          </div>
           <div class="text sign-up-text">
             Already have an account? <a href="login.html">Login now</a>
           </div>