Skip to content

Commit

Permalink
create login and signup page
Browse files Browse the repository at this point in the history
  • Loading branch information
@poorvikaa08
poorvikaa08 committed Oct 2, 2024
1 parent 287a2f2 commit 6138a3a
Show file tree
Hide file tree
Showing 4 changed files with 278 additions and 1 deletion.
13 changes: 12 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,10 @@ <h1>HARD WORK</h1>
<h2>IS FOR EVERY SUCCESS</h2>
<p>Start by taking inspirations, continue it to give inspirations</p>
<div class="header__btn">
<button class="btn btn__primary">GET STARTED</button>
<a href="login.html">
<button class="btn btn__primary" id="get-started-btn">GET STARTED</button>
</a>

</div>


Expand Down Expand Up @@ -574,6 +577,14 @@ <h4>NEWSLETTER</h4>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="main.js"></script>

<script>
document.getElementById('get-started-btn').addEventListener('click', function() {
window.location.href = 'login.html'; // Redirect to the login page
});
</script>


</body>

</html>
43 changes: 43 additions & 0 deletions login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styles.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="wrapper">
<form action="">
<h1>Login </h1>
<img src="/assets/logo.png" alt="">
<div class="input-box">
<input type="text" placeholder="Username" required>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="password" placeholder="Password" required>
<i class='bx bxs-lock-alt' ></i>
</div>
<div class="remember-forgot">
<label><input type="checkbox">Remember Me</label>
<a href="#">Forgot Password</a>
</div>
<button type="submit" class="btn">Login</button>
<div class="register-link">
<p>Don't have an account? <a href="signup.html" id="register-link">Register</a></p>
</div>
</form>
</div>

<script>
document.getElementById('register-link').addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default anchor behavior
window.location.href = 'signup.html'; // Redirect to the signup page
});
</script>


</body>
</html>
93 changes: 93 additions & 0 deletions signup.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="styles.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="wrapper">
<form id="register-form">
<h2>Create Account</h2>
<img src="/assets/logo.png" alt="">

<div class="input-box">
<input type="text" placeholder="Username" required>
<i class='bx bxs-user'></i>
</div>

<div class="input-box">
<input type="email" placeholder="Email" required>
<i class='bx bxs-envelope'></i>
</div>

<div class="input-box">
<input type="password" id="password" placeholder="Password" required>
<i class='bx bxs-show' id="togglePassword" style="position: absolute; right: 20px; top: 30%; cursor: pointer;"></i>
</div>

<div class="input-box">
<input type="password" id="confirm-password" placeholder="Confirm Password" required>
<i class='bx bxs-show' id="toggleConfirmPassword" style="position: absolute; right: 20px; top: 30%; cursor: pointer;"></i>
</div>

<div id="error-message" style="color: rgb(0, 0, 0);"></div>

<button type="submit" class="btn">Register</button>
<div class="register-link">
<p>Already have an account? <a href="login.html" id="login-link">Login</a></p>
</div>
</form>
</div>

<script>
// Toggle password visibility
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');
togglePassword.addEventListener('click', function () {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.classList.toggle('bx-show');
this.classList.toggle('bx-hide');
});

// Toggle confirm password visibility
const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
const confirmPasswordInput = document.getElementById('confirm-password');
toggleConfirmPassword.addEventListener('click', function () {
const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
confirmPasswordInput.setAttribute('type', type);
this.classList.toggle('bx-show');
this.classList.toggle('bx-hide');
});

// Handle form submission and password confirmation
document.getElementById('register-form').addEventListener('submit', function(event) {
event.preventDefault();

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
const errorMessageDiv = document.getElementById('error-message');

// Clear previous error message
errorMessageDiv.textContent = '';

if (password !== confirmPassword) {
errorMessageDiv.textContent = "Passwords do not match! Please try again.";
return;
}

alert("Passwords match! Registration successful."); // Replace with actual submission logic
// this.submit(); // Uncomment to allow the form to submit if using a real action
});

// Redirect to login page
document.getElementById('login-link').addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default anchor behavior
window.location.href = 'login.html'; // Redirect to the login page
});
</script>
</body>
</html>
130 changes: 130 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url("https://images.pexels.com/photos/841130/pexels-photo-841130.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.wrapper {
width: 420px;
background: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(9px);
color: #000000;
border-radius: 12px;
padding: 30px 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.wrapper h2 {
font-size: 28px;
color: #000000;
text-align: center;
}

.wrapper .input-box {
position: relative;
width: 100%;
height: 50px;
margin: 30px 0;
}

.input-box input {
width: 100%;
height: 100%;
background: #d3d3d3;
outline: none;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 40px;
font-size: 16px;
color: #2e2e2e;
padding: 20px 45px 20px 20px; /* Adjust padding to make space for the eye icon */
}

.input-box input::placeholder {
color: #7c7a7a;
}

.input-box i {
position: absolute;
right: 20px; /* Adjust position as needed */
top: 30%;
transform: translate(-50%);
font-size: 20px;
cursor: pointer; /* Indicate that the icon is clickable */
}
.remember-forgot {
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}

.remember-forgot label input {
accent-color: #000000;
margin-right: 3px;
}

.remember-forgot a {
color: #050505; /* Original link color */
text-decoration: none;
}

.remember-forgot a:hover {
text-decoration: underline; /* Hover effect */
color: #000000; /* Change color on hover if desired */
}

/* Styles for showing and hiding passwords */
.input-box i.bx-show {
color: #007bff; /* Color when the password is visible */
}

.input-box i.bx-hide {
color: #7c7a7a; /* Default color when the password is hidden */
}

.wrapper .btn {
width: 100%;
height: 45px;
background: #dc030a;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
cursor: pointer;
font-size: 16px;
color: #ffffff;
font-weight: 600;
}

.wrapper .btn:hover {
background-color: rgb(135, 6, 12);
}

.wrapper .register-link {
font-size: 14.5px;
text-align: center;
margin: 20px 0 15px;
}

.register-link p a {
color: #000000;
text-decoration: none;
font-weight: 600;
}

.register-link p a:hover {
text-decoration: underline;
}

0 comments on commit 6138a3a

Please sign in to comment.