diff --git a/login.css b/auth.css similarity index 87% rename from login.css rename to auth.css index fdc5977d..fbe12fb6 100644 --- a/login.css +++ b/auth.css @@ -74,7 +74,7 @@ form.sign-in-form { height: 55px; border-radius: 55px; display: grid; - grid-template-columns: 15% 85%; + grid-template-columns: 15% 70% 15%; padding: 0 0.4rem; position: relative; } @@ -102,6 +102,10 @@ form.sign-in-form { font-weight: 500; } +.password-toggle { + cursor: pointer; +} + .social-text { padding: 0.7rem 0; font-size: 1rem; @@ -120,8 +124,8 @@ form.sign-in-form { align-items: center; margin: 0 0.45rem; color: #333; - /* border-radius: 50%; - border: 1px solid #333; */ + border-radius: 50%; + border: 1px solid #333; text-decoration: none; font-size: 1.1rem; transition: 0.3s; @@ -150,6 +154,7 @@ form.sign-in-form { .btn:hover { background-color: #161618; } + .panels-container { position: absolute; height: 100%; @@ -183,6 +188,7 @@ form.sign-in-form { .panel { display: flex; flex-direction: column; + align-items: flex-end; justify-content: space-around; text-align: center; z-index: 6; @@ -190,7 +196,7 @@ form.sign-in-form { .left-panel { pointer-events: all; - padding: 4rem 17% 2rem 12%; + padding: 3rem 17% 2rem 12%; } .right-panel { @@ -199,7 +205,7 @@ form.sign-in-form { } .panel .content { - color: #ffffff; + color: #fff; transition: transform 0.9s ease-in-out; transition-delay: 0.6s; } @@ -230,8 +236,6 @@ form.sign-in-form { transform: translateX(800px); } -/* ANIMATION */ - .container.sign-up-mode:before { transform: translate(100%, -50%); right: 52%; @@ -269,6 +273,44 @@ form.sign-in-form { pointer-events: all; } +.homeBtn { + position: absolute; + top: 20px; + left: 20px; + background: #ffffff; + color: #000000; + padding: 10px; + border-radius: 50%; + cursor: pointer; + transition: 0.3s; + text-decoration: none; + z-index: 10; +} + +.homeBtn:hover { + background: #000000; + color: #ffffff; +} + +.password-strength { + display: flex; + margin-top: 5px; + height: 5px; + width: 200px; +} + +.password-strength div { + height: 100%; + width: 33.33%; + margin-right: 3px; + background-color: #ddd; + transition: background-color 0.3s; +} + +.password-strength .weak { background-color: #ff4757; } +.password-strength .medium { background-color: #ffa502; } +.password-strength .strong { background-color: #23ad5c; } + @media (max-width: 870px) { .container { min-height: 800px; @@ -372,7 +414,7 @@ form.sign-in-form { } } -@media (max-width: 570px) { +@media (max-width: 570px) { form { padding: 0 1.5rem; } @@ -398,8 +440,6 @@ form.sign-in-form { } } - - .homeBtn { position: absolute; top: 20px; diff --git a/signUp.html b/auth.html similarity index 59% rename from signUp.html rename to auth.html index 9d4cafa8..32cd34c4 100644 --- a/signUp.html +++ b/auth.html @@ -4,8 +4,8 @@ Register & Login - - + +
@@ -19,20 +19,17 @@

Sign in

- + +

Or Sign in with social platforms

- -
- - Google - -
- - - GitHub + + + + +
@@ -48,19 +45,22 @@

Sign up

- + + +
+
+
+
+

Or Sign up with social platforms

- - - Google - -
- - - GitHub + + + + +
@@ -76,23 +76,12 @@

Sign up

});
- - - - -

New here ?

- Discover new experiences with BuddyTrail - !
Create your account. + Discover new experiences with BuddyTrail!
Create your account.

- - - - - @@ -100,24 +89,22 @@

New here ?

-
-

One of us ?

- Welcome to our community + Welcome back to our community

-
-
-
- + + + + - + \ No newline at end of file diff --git a/login.js b/auth.js similarity index 100% rename from login.js rename to auth.js diff --git a/index.html b/index.html index 7cc6135e..42591b38 100644 --- a/index.html +++ b/index.html @@ -245,7 +245,7 @@

BuddyTrail

  • Reviews
  • Benefits
  • Contact
    • -
  • Sign In
    • +
  • Sign In
    • diff --git a/login.html b/login.html deleted file mode 100644 index 3f634020..00000000 --- a/login.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - Login - - - - - - - - -
    -
    -

    Login

    - - - -

    Or login using your email:

    - -
    -
    - - -
    -
    - - - - - - - - - -
    -
    - -
    -
    - - -
    -
    - - - - - - - - - \ No newline at end of file diff --git a/signUp.css b/signUp.css deleted file mode 100644 index 96149b6e..00000000 --- a/signUp.css +++ /dev/null @@ -1,173 +0,0 @@ -/* General Reset */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: Arial, sans-serif; - background-color: #f5f5f5; /* Light background for contrast */ - color: #333; /* Dark text for readability */ -} - -/* Header Styles */ -.main-head { - color: white; - position: sticky; - top: 0; - z-index: 5; -} - - -.container { - display: flex; - justify-content: center; - align-items: center; - min-height: 600px; -} - -.signup-box { - position: relative; - top: 24%; - margin-top: 0px; - background: #fff; /* Clean white background for contrast */ - border-radius: 12px; /* More rounded corners for a modern feel */ - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow for depth */ - padding: 2.5rem; /* Increased padding for better spacing */ - width: 100%; - max-width: 400px; /* Slightly larger width */ - transition: transform 0.3s ease-in-out; /* Smooth transition for hover effects */ -} - - -.signup-box h2 { - margin-bottom: 1.5rem; /* Increased space below the heading */ - font-size: 1.8rem; /* Larger font size for emphasis */ - color: #131c27; /* Consistent with header color */ - text-align: center; -} - -.google-signup { - margin-bottom: 1rem; -} - -.google-btn { - display: flex; - justify-content:space-around; - align-items: center; - background-color: white; - color: rgb(23, 23, 23); - border-radius: 20px; - padding: 5px 5px; - text-decoration: none; - font-weight: 600; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); - transition: transform 0.3s ease; - max-width: 250px; - font-size: 15px; - margin: 0 auto; - margin-bottom: 15px; - border: none; - outline: none; -} -.google-btn img { - width: 30px; - height: 30px; - margin-right: 0px; - background-color: white; -} - -.google-btn:hover { - transform: scale(1.05); -} - -.input-field { - margin-bottom: 1.1rem; -} - -.input-field label { - display: block; - margin-bottom: 0.4rem; - font-weight: 600; - font-size: medium; -} - -.input-field input { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 1rem; -} - -.input-field button { - width: 100%; - margin-top: 4px; - padding: 10px; /* Increased padding for a larger button */ - border: none; - border-radius: 8px; /* More rounded button */ - background-color: #4a8ae4; /* Bright teal background */ - color: white; - font-size: 1.7rem; /* Larger font size */ - cursor: pointer; - transition: background-color 0.3s, transform 0.3s;/* Added smooth transitions */ -} - -.input-field button:hover { - background-color: #012e49; -} - -.signin-link { - text-align: center; /* Center the link */ - margin-top: 1rem; /* Add some space above the link */ - font-size: 5px; -} - -.signin-link a { - color: #3066dc; /* Match the link color with the theme */ - text-decoration: none; /* Remove underline from the link */ - font-weight: 300; /* Make the link text bold */ -} - -.signin-link a:hover { - text-decoration: underline; /* Add underline on hover for better UX */ -} - -.req{ - color: red; -} - -.toggle-password { - cursor: pointer; - position: absolute; - right: 10px; - top: 55%; -} - -.input-field { - position: relative; -} - -.toggle-password svg { - width: 20px; - height: 20px; -} - -#home-btn{ - position: absolute; - top: 10px; - left: 10px; - background-color: #4a8ae4; /* Bright teal background */ - color: white; - font-size: 1.7rem; /* Larger font size */ - cursor: pointer; - transition: background-color 0.3s, transform 0.3s;/* Added smooth transitions */ - padding: 10px; /* Increased padding for a larger button */ - border: none; - border-radius: 8px; /* More rounded button */ -} - -#home-btn:hover { - background-color: #012e49; -} \ No newline at end of file