HTML Structure
Our HTML structure lays the foundation for the login and signup page. Here’s the basic outline:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/universal.css">
<link rel="stylesheet" href="assets/css/body.css">
<title>login form </title>
</head>
<body>
<header class="webmenu">
<div class="header-data header-left">WEB DEV
</div>
<div class="header-data header-right">
<div id="signup" class="log-action log-btn">
Sign up
</div>
<div id="menu-line">
<i class="fa fa-bars" alt="line"></i>
<div id="menu-tbar" class="menubox">
<ul>
<li>home</li>
<li>artical</li>
<li>about us </li>
<li> contact us</li>
</ul>
</div>
</div>
</div>
</header>
<div class="log-data">
<div class="signin">
<h1 class="logtext">SIGN IN </h1>
<form class="signin-body">
<input id="login-input" class="userinfo user-inpt" type="text" placeholder="Username or Email" required/>
<input id="login-password" class="log-pass userinfo user-inpt" type="text" placeholder="password" required/>
<input id="log-submit" class="log-btn sub-btn" type="submit" value="login" >
<a class="url-style" href="#">Forget password ?</a>
</form>
</div>
<!-- signup form
-->
<div class="signup-box ">
<h1 class="logtext">SIGN UP</h1>
<form class="signin-body">
<input id="signup-user" class="userinfo user-inpt" type="text" placeholder="Username" required/>
<input id="signup-email" class="userinfo user-inpt" type="text" placeholder="Email" required/>
<input id="pwd" class="log-pass userinfo user-inpt" type="text" placeholder="password" required/>
<input id="vpwd" class="log-pass userinfo user-inpt" type="password" placeholder=" verfiy password" required/>
<input class="log-btn sub-btn" type="submit" value="submit" onclick="passwordjs()">
</div>
</div>
<script src="assets/js/frontend.js"></script>
</body>
</html>
Webmenu: This is the top navigation bar where you might place links to other sections of your website.
- Log Data Container: This container holds both the login (`signin`) and signup (`signup-box`) forms. Users can toggle between these two forms.
CSS Styling
Next, we use CSS to bring the design to life. The focus here is on creating a clean, modern look with glassmorphism—a design trend that involves using a frosted-glass effect. 1. Universal Reset and Variables:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--white: rgba(255, 255, 255, 0.4);
--black: rgba(0, 0, 0, 0.4);
--fontclr: rgba(255, 255, 255, 0.9);
}
CSS Variables: Defining variables for colors makes it easy to maintain and update the color scheme throughout the project.
2. Body and Container Styling:
body {
min-height: 100vh;
min-width: 100vw;
background: linear-gradient(-130deg, blue, hotpink);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.log-data {
background: var(--white);
backdrop-filter: blur(10px);
border-radius: 20px;
height: 75vh;
width: 80vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
Body Styling: The body is styled to take up the full viewport height and width. The background features a gradient that adds visual interest. Log Data Container: This is where the magic of glassmorphism happens. We use a semi-transparent background with `backdrop-filter: blur(10px);` to create a frosted-glass effect. Rounded corners and centered content complete the look.
3. Form Styling:
.user-inpt {
padding: 10px;
border-radius: 20px;
height: 3rem;
width: 100%;
margin: 10px;
background: var(--white);
border: none;
color: white;
}
.log-btn {
height: 3rem;
padding: 8px;
width: 65%;
border-radius: 20px;
border: none;
background: var(--white);
color: var(--fontclr);
margin: 20px;
font-size:
Input Fields: The input fields are styled with rounded corners, padding, and a background that blends with the glassmorphism theme. Buttons: The buttons follow a similar design language, ensuring consistency with the input fields.
JavaScript Interactivity => JavaScript is used to handle the interactive elements of the page, such as form toggling and displaying alert messages.
1. Toggling Between Forms:
let showcreate = document.getElementById("signup");
let signupBox = document.getElementsByClassName("signup-box")[0];
let signinBox = document.getElementsByClassName("signin")[0];
let btntxt = 0;
showcreate.addEventListener("click", () => {
if (btntxt == 0) {
showcreate.textContent = "Sign In";
signinBox.style.display = "none";
signupBox.style.display = "flex";
btntxt = 1;
} else {
showcreate.textContent = "Sign Up";
signinBox.style.display = "flex";
signupBox.style.display = "none";
btntxt = 0;
}
});
Form Toggling: When the user clicks the toggle button, this script switches between the login and signup forms by changing the `display` property of the form containers. 2. Displaying Alert Messages:
function alertbox(msg) {
let box = document.createElement("div");
box.className = "alert-box";
box.innerHTML = `
Message for you
x
${msg}
`;
document.querySelector(".log-data").appendChild(box);
let hidebtn = box.querySelector(".crossbtn");
box.style.display = "flex";
hidebtn.addEventListener("click", () => {
box.style.display = "none";
});
}
Alert Box: This function creates an alert box dynamically and appends it to the DOM. The alert box includes a close button that hides the box when clicked. 3. Login Validation:
let login = document.querySelector("#log-submit");
let loginInpt = document.querySelector("#login-input");
let loginPass = document.querySelector("#login-password");
login.addEventListener("click", () => {
let inputuser = "manoj";
let inputpass = "12345678";
if (inputuser === loginInpt.value && inputpass === loginPass.value) {
alertbox(`Welcome, ${inputuser}!`);
} else {
alertbox("Incorrect username or password. Please try again.");
}
});
Login Validation: This script checks if the user’s input matches a predefined username and password. If the credentials are correct, a welcome message is displayed. Otherwise, an error message prompts the user to try again.
This project showcases the powerful combination of HTML, CSS, and JavaScript in creating a modern, user-friendly login and signup page. The use of glassmorphism adds a stylish touch, while JavaScript ensures a smooth, interactive user experience. Whether you’re building a personal project or working on a professional website, these techniques will help you create a polished and engaging interface.
Feel free to experiment with the code, tweak the design, and add your own custom features to make it truly unique. Happy coding!
0 comments:
Post a Comment