Create A Webpage With Login And Join Now Buttons
Create A Webpage With A Login And Join Now Buttons Activewith The Lin
Create a webpage with a login and join now buttons active. With the links in the sample picture ie. Other links don’t have to be active ONLY THE LOGIN and JOIN NOW BUTTON SHOULD BE ACTIVE When you enter a wrong user name or password it should have a warning Background image Sample USE DREAMWEAVER I NEED THE DREAMWEAVER AND THE PAGE THE HTML INDEX FILE
Paper For Above instruction
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-image: url('sample-background.jpg');
background-size: cover;
background-position: center;
}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.header {
margin-bottom: 30px;
}
/ Style for the navigation links (only Login and Join Now are active) /
nav {
margin-bottom: 20px;
}
nav a {
margin: 0 15px;
padding: 10px 20px;
text-decoration: none;
background-color: #007BFF;
color: white;
border-radius: 5px;
font-weight: bold;
}
/ Active links: only "Login" and "Join Now" are active, others are inactive /
.active {
cursor: pointer;
opacity: 1;
}
.inactive {
pointer-events: none;
opacity: 0.5;
}
/ Style for the forms /
.form-container {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
max-width: 300px;
width: 100%;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
warningMessage {
color: red;
margin-top: 10px;
font-weight: bold;
display: none;
}
// JavaScript to handle button clicks and login validation
// Hardcoded credentials for validation
const validUsername = 'user123';
const validPassword = 'pass123';
const loginFormDiv = document.getElementById('loginForm');
const loginForm = document.getElementById('login');
const warningMessage = document.getElementById('warningMessage');
document.getElementById('loginLink').addEventListener('click', function(event) {
event.preventDefault();
// Show login form
loginFormDiv.style.display = 'block';
warningMessage.style.display = 'none';
});
document.getElementById('joinLink').addEventListener('click', function(event) {
event.preventDefault();
// For now, just show the login form as placeholder
loginFormDiv.style.display = 'block';
warningMessage.style.display = 'none';
alert('Join Now clicked! (Implement registration as needed)');
});
// Handle login submission
loginForm.addEventListener('submit', function(event) {
event.preventDefault();
const enteredUsername = document.getElementById('username').value;
const enteredPassword = document.getElementById('password').value;
if (enteredUsername === validUsername && enteredPassword === validPassword) {
// Successful login
warningMessage.style.display = 'none';
alert('Login successful! Welcome ' + enteredUsername);
} else {
// Wrong credentials
warningMessage.textContent = 'Warning: Username orPassword is incorrect!';
warningMessage.style.display = 'block';
}
});