Skip to content

Commit

Permalink
Merge pull request #723 from PATILYASHH/main
Browse files Browse the repository at this point in the history 
eye icon added
  • Loading branch information
@swaraj-das
swaraj-das authored Nov 6, 2024
2 parents f4b2f3c + dedf6d3 commit fd2ac2c
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 113 deletions.
189 changes: 91 additions & 98 deletions SignUp/signup.css
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,56 @@
* {

box-sizing: border-box;
margin: 0;
padding:0;
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
background-size: cover;
font-family: 'Trebuchet MS', Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
height: 100vh;
color: white;
text-shadow: 1px 1px 2px #000;
background: url('https://images.pexels.com/photos/7135057/pexels-photo-7135057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center fixed;
background-size: cover;
font-family: 'Trebuchet MS', Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
height: 100vh;
color: white;
text-shadow: 1px 1px 2px #000;
}


.error-message {
color: red;
font-size: 0.85em;
margin-top: 5px;
}

.signup-container {

opacity: 0.75;
background-color: rgba(0, 0, 0, 0);
padding:3rem 5rem;
border-radius: 20px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
text-align: center;
max-width: 500px;
width: 100%;
animation: fadeIn 2s ease-in-out;
background-color: black;
margin: auto;
opacity: 0.75;
background-color: black;
padding: 3rem 5rem;
border-radius: 20px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
text-align: center;
max-width: 500px;
width: 100%;
animation: fadeIn 2s ease-in-out;
margin: auto;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 0.75;
transform: scale(1);
opacity: 0.75;
transform: scale(1);
}
}

h1 {
margin-bottom: 1.5rem;
font-size: 1.5rem;
color: #fb5283;
margin-bottom: 1.5rem;
font-size: 1.5rem;
color: #fb5283;
}

.input-group {
Expand Down Expand Up @@ -100,31 +96,20 @@ input[type="password"]:focus {
position: relative;
padding: 15px 60px;
margin: auto;

cursor: pointer;
transition: background-color 0.2s, color 0.2s;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: 0px 1px 0px #000;
filter: dropshadow(color=#000, offx=0px, offy=1px);

-webkit-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
-moz-box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.signup-button:active {
top: 10px;
background-color: #f78900;

-webkit-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
-moz-box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3pxpx 0 #915100;
box-shadow: inset 0 1px 0 #ffe5c4, inset 0 -3px 0 #915100;
}

.signup-button:after {
content: "";
height: 100%;
Expand All @@ -135,10 +120,9 @@ input[type="password"]:focus {
left: -4px;
z-index: -1;
background-color: #2b1800;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.signup-button:hover {
background-color: #ffd198;
color: #f78900;
Expand Down Expand Up @@ -170,22 +154,14 @@ input[type="password"]:focus {
text-decoration: none;
border-radius: 15px;
border: none;
background: linear-gradient(
0deg,
rgba(255, 193, 219, 1) 0%,
rgba(245, 131, 202, 1) 100%
);
background: linear-gradient(0deg, rgba(255, 193, 219, 1) 0%, rgba(245, 131, 202, 1) 100%);
color: #fff;
overflow: hidden;
}

.linksHome:hover {
text-decoration: none;
background: linear-gradient(
0deg,
rgba(245, 131, 202, 1) 0%,
rgba(255, 193, 219, 1) 100%
);
background: linear-gradient(0deg, rgba(245, 131, 202, 1) 0%, rgba(255, 193, 219, 1) 100%);
color: #fff;
}

Expand All @@ -203,27 +179,27 @@ input[type="password"]:focus {

.linksHome:active {
box-shadow: 4px 4px 6px 0 rgba(255, 193, 219, 0.3),
-4px -4px 6px 0 rgba(245, 131, 202, 0.3),
inset -4px -4px 6px 0 rgba(255, 193, 219, 0.3),
inset 4px 4px 6px 0 rgba(245, 131, 202, 0.3);
-4px -4px 6px 0 rgba(245, 131, 202, 0.3),
inset -4px -4px 6px 0 rgba(255, 193, 219, 0.3),
inset 4px 4px 6px 0 rgba(245, 131, 202, 0.3);
}

@keyframes shiny-btn1 {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
transform: scale(50) rotate(45deg);
opacity: 0;
}
}

Expand All @@ -235,39 +211,31 @@ a {
text-decoration: none;
}

#link-home{
border: 1px solid rgb(255, 255, 255);
box-shadow: 0 0 5px white;
border-radius: 15px;
padding: 8px 15px;

margin-left: 1rem;
margin-top: 1rem;

#link-home {
border: 1px solid rgb(255, 255, 255);
box-shadow: 0 0 5px white;
border-radius: 15px;
padding: 8px 15px;
margin-left: 1rem;
margin-top: 1rem;
}

#link-home:hover{
border: 1px solid rgb(202, 202, 202);
box-shadow: 0 0 5px #424242;
background-color: #42424222;
border-radius: 15px;
padding: 8px 15px;

margin-left: 1rem;
margin-top: 1rem;
#link-home:hover {
border: 1px solid rgb(202, 202, 202);
box-shadow: 0 0 5px #424242;
background-color: #42424222;
border-radius: 15px;
padding: 8px 15px;
}

#link-home a{
text-decoration: none;
color: #fff;
font-size: 1.4rem;
text-shadow: none;
font-family: 'Trebuchet MS', Arial, sans-serif;

#link-home a {
text-decoration: none;
color: #fff;
font-size: 1.4rem;
text-shadow: none;
font-family: 'Trebuchet MS', Arial, sans-serif;
}

/* ... existing styles ... */

.signup-button, .google-signup-button {
width: 100%;
padding: 10px;
Expand Down Expand Up @@ -353,6 +321,31 @@ a {
.links a:hover {
text-decoration: underline;
}
::placeholder {
color: white;

.footer {
text-align: center;
margin-top: auto;
padding: 20px 0;
font-size: 0.8rem;
}

.icons {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px; /* Margin added for spacing above icons */
}

.icons a {
margin: 0 10px; /* Spacing between icons */
transition: transform 0.2s;
}

.icons a:hover {
transform: scale(1.1); /* Slight scaling effect on hover */
}

.icons img {
width: 30px; /* Consistent size for icons */
height: 30px; /* Consistent size for icons */
}
67 changes: 60 additions & 7 deletions SignUp/signup.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up for GamingTools</title>
<link rel="stylesheet" href="signup.css">
<link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up for GamingTools</title>
<link rel="stylesheet" href="signup.css">
<link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
.condition {
color: gray;
Expand All @@ -19,7 +20,38 @@
font-size: 0.85em;
margin-top: 5px;
}
.input-group {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 1rem; /* Add some spacing between input fields */
}
#togglePassword, #toggleConfirmPassword {
cursor: pointer;
position: absolute;
right: 10px;
top: 35%; /* Adjust the vertical alignment */
transform: translateY(-50%);
}

/* Bootrap costome code */

.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -3em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

</style>

<!-- Bootstrap Icons -->
</head>
<body>

Expand All @@ -42,6 +74,7 @@ <h1>Create Your Account</h1>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Create password" required>
<i class="bi bi-eye" id="togglePassword" aria-label="Toggle password visibility"></i>
</div>
<div class="password-recommendations">
<p id="length" class="condition">At least 8 characters</p>
Expand All @@ -53,6 +86,7 @@ <h1>Create Your Account</h1>
<div class="input-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password" required>
<i class="bi bi-eye" id="toggleConfirmPassword" aria-label="Toggle confirm password visibility"></i>
</div>
<div id="password-error" class="error-message"></div>
<button type="submit" class="signup-button">Sign Up</button>
Expand All @@ -70,6 +104,25 @@ <h1>Create Your Account</h1>
</div>

<script src="signup.js"></script>
<script>
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');
const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
const confirmPasswordInput = document.getElementById('confirm-password');

togglePassword.addEventListener('click', () => {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
togglePassword.classList.toggle('bi-eye');
togglePassword.classList.toggle('bi-eye-slash');
});

toggleConfirmPassword.addEventListener('click', () => {
const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
confirmPasswordInput.setAttribute('type', type);
toggleConfirmPassword.classList.toggle('bi-eye');
toggleConfirmPassword.classList.toggle('bi-eye-slash');
});
</script>
</body>
</html>

Loading

0 comments on commit fd2ac2c

Please sign in to comment.