Warning
```html
/ Set the background image for the entire page /
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url('sample-background.jpg'); / Replace with your actual background image path /
background-size: cover;
background-position: center;
font-family: Arial, sans-serif;
}
/ Container to center the login form and buttons /
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-color: rgba(255, 255, 255, 0.5); / semi-transparent overlay for readability /
}
/ Style for header text /
h1 {
color: #333;
font-size: 36px;
margin-bottom: 30px;
text-align: center;
}
/ Style for the login form /
form {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
max-width: 300px;
width: 100%;
}
/ Style for form inputs /
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-top: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
/ Style for the submit button /
button[type="submit"] {
width: 100%;
padding: 12px;
background-color: #5cb85c;
border: none;
border-radius: 4px;
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #4cae4c;
}
/ Style for the "Join Now" and other links/buttons /
.links {
margin-top: 20px;
display: flex;
gap: 20px;
justify-content: center;
}
/ Active button styles /
.active-btn {
padding: 12px 24px;
background-color: #337ab7;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.active-btn:hover {
background-color: #286090;
}
/ Style for inactive buttons /
.inactive-btn {
padding: 12px 24px;
background-color: #gray;
color: #aaa;
border: none;
border-radius: 4px;
font-size: 16px;
text-decoration: none;
cursor: not-allowed;
opacity: 0.6;
}
/ Warning message styles /
warning {
color: red;
font-weight: bold;
margin-top: 10px;
height: 20px; / prevent layout shift /
}
// Hardcoded credentials for demonstration
const validUsername = 'user123';
const validPassword = 'pass123';
function validateLogin() {
const enteredUsername = document.getElementById('username').value;
const enteredPassword = document.getElementById('password').value;
const warningDiv = document.getElementById('warning');
if (enteredUsername === validUsername && enteredPassword === validPassword) {
warningDiv.textContent = '';
alert('Login successful!'); // Or redirect to another page
// Here you could redirect to a logged-in page
return false; // Prevent form submission for demonstration
} else {
warningDiv.textContent = 'Incorrect username or password!';
return false; // Prevent form submission
}
}
// The "Join Now" button is active but doesn't do anything, can be linked to registration page
document.getElementById('joinBtn').addEventListener('click', function(e) {
e.preventDefault();
alert('Join Now button clicked! (You can link to registration page)');
// window.location.href = 'register.html'; // Uncomment and set your registration page URL
});