Skip to content

Commit

Permalink
Merge pull request #397 from tarunkumar2005/main
Browse files Browse the repository at this point in the history 
BUG:Login and Signup pages are not that much looking good and needs ui enhancements. #196
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 9, 2024
2 parents 7cf2483 + 83d814a commit c6af31f
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 293 deletions.
60 changes: 50 additions & 10 deletions login.css → auth.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -102,6 +102,10 @@ form.sign-in-form {
font-weight: 500;
}

.password-toggle {
cursor: pointer;
}

.social-text {
padding: 0.7rem 0;
font-size: 1rem;
Expand All @@ -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;
Expand Down Expand Up @@ -150,6 +154,7 @@ form.sign-in-form {
.btn:hover {
background-color: #161618;
}

.panels-container {
position: absolute;
height: 100%;
Expand Down Expand Up @@ -183,14 +188,15 @@ form.sign-in-form {
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}

.left-panel {
pointer-events: all;
padding: 4rem 17% 2rem 12%;
padding: 3rem 17% 2rem 12%;
}

.right-panel {
Expand All @@ -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;
}
Expand Down Expand Up @@ -230,8 +236,6 @@ form.sign-in-form {
transform: translateX(800px);
}

/* ANIMATION */

.container.sign-up-mode:before {
transform: translate(100%, -50%);
right: 52%;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -372,7 +414,7 @@ form.sign-in-form {
}
}

@media (max-width: 570px) {
@media (max-width: 570px) {
form {
padding: 0 1.5rem;
}
Expand All @@ -398,8 +440,6 @@ form.sign-in-form {
}
}



.homeBtn {
position: absolute;
top: 20px;
Expand Down
69 changes: 28 additions & 41 deletions signUp.html → auth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Register & Login</title>
<link rel="stylesheet" href="login.css" />

<link rel="stylesheet" href="auth.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container">
Expand All @@ -19,20 +19,17 @@ <h2 class="title">Sign in</h2>
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" />
<input type="password" placeholder="Password" id="signin-password" />
<i class="fas fa-eye password-toggle" onclick="togglePassword('signin-password', this)"></i>
</div>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">

<br>
<a href="https://www.google.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png" alt="Google" width="40" height="40" style="margin-left: 5px;">
</a>
<br>

<a href="https://github.com/YourGitHubProfile" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" width="40" height="40" style="margin-left: 5px;">
<a href="https://www.google.com" target="_blank" class="social-icon">
<i class="fab fa-google"></i>
</a>
<a href="https://github.com" target="_blank" class="social-icon">
<i class="fab fa-github"></i>
</a>
</div>
</form>
Expand All @@ -48,19 +45,22 @@ <h2 class="title">Sign up</h2>
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" />
<input type="password" placeholder="Password" id="signup-password" />
<i class="fas fa-eye password-toggle" onclick="togglePassword('signup-password', this)"></i>
</div>
<div class="password-strength">
<div id="strength-weak"></div>
<div id="strength-medium"></div>
<div id="strength-strong"></div>
</div>
<input type="submit" class="btn" value="Sign up" />
<p class="social-text">Or Sign up with social platforms</p>
<div class="social-media">

<a href="https://www.google.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png" alt="Google" width="40" height="40" style="margin-left: 5px;">
</a>
<br>

<a href="https://github.com/YourGitHubProfile" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" width="40" height="40" style="margin-left: 5px;">
<a href="https://www.google.com" target="_blank" class="social-icon">
<i class="fab fa-google"></i>
</a>
<a href="https://github.com" target="_blank" class="social-icon">
<i class="fab fa-github"></i>
</a>
</div>
</form>
Expand All @@ -76,48 +76,35 @@ <h2 class="title">Sign up</h2>
});
</script>
<div class="panels-container">
<a href="index.html" class="homeBtn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="30" height="30">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>
</a>
<div class="panel left-panel">
<div class="content">
<h3>New here ?</h3>
<p>
Discover new experiences with BuddyTrail
! <br> Create your account.
Discover new experiences with BuddyTrail! <br> Create your account.
</p>
<a href="index.html" class="homeBtn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" width="30" height="30">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>
</a>
<button class="btn transparent" id="sign-up-btn">
Sign up
</button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<div class="panel right-panel">

<div class="content">

<h3>One of us ?</h3>
<p>
Welcome to our community
Welcome back to our community
</p>
<button class="btn transparent" id="sign-in-btn">
Sign in
</button>

</div>
<img src="img/register.svg" class="image" alt="" />
</div>

</div>

</div>
<script src="login.js"></script>
<a href="index.html" class="homeBtn">
<i class="fas fa-home"></i>
</a>
<script src="auth.js"></script>
</body>
</html>
</html>
0 login.js → auth.js
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ <h1 id="logo">BuddyTrail</h1>
<li><a href="#reviews" class="navhover">Reviews</a></li>
<li><a href="#benefits" class="navhover">Benefits</a></li>
<li><a href="#contact" class="navhover">Contact</a></li>
<li><a href="signUp.html" class="navhover">Sign In</a></li>
<li><a href="auth.html" class="navhover">Sign In</a></li>
</ul>

<!-- Toggle Button -->
Expand Down
68 changes: 0 additions & 68 deletions login.html
View file

This file was deleted.

Loading

0 comments on commit c6af31f

Please sign in to comment.