Scribd
Upload
10 views

New Text Documentlog (1)

The document is an HTML template for a login page of ABC Services, featuring a user-friendly interface with role selection for customers and admins. It includes form validation for user ID and password, ensuring they meet specific criteria before submission. The page also provides a registration link and contact information in the footer.

Uploaded by

Anubhav Paul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

New Text Documentlog (1)

The document is an HTML template for a login page of ABC Services, featuring a user-friendly interface with role selection for customers and admins. It includes form validation for user ID and password, ensuring they meet specific criteria before submission. The page also provides a registration link and contact information in the footer.

Uploaded by

Anubhav Paul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - ABC Services</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #d1f2d1;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

header {
background-color: #c8e6c9;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header h1 {
margin: 0;
font-size: 24px;
color: #2d3748;
}

.main-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.login-box {
background-color: #e6f5e6;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 320px;
}

.login-box h2 {
margin: 0 0 20px 0;
text-align: center;
color: #2d3748;
}

.role-selection {
margin-bottom: 20px;
display: flex;
gap: 20px;
justify-content: center;
}
.role-option {
display: flex;
align-items: center;
}

.role-option input[type="radio"] {
margin-right: 8px;
}

.role-option label {
font-size: 14px;
color: #4a5568;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
color: #4a5568;
font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #d1d5db;
border-radius: 4px;
box-sizing: border-box;
}

.form-group input:focus {
border-color: #3b82f6;
outline: none;
}

.show-password {
display: flex;
align-items: center;
margin-top: 5px;
font-size: 12px;
color: #666;
}

.show-password input[type="checkbox"] {
margin-right: 4px;
transform: scale(0.9);
}

.login-button {
width: 100%;
padding: 10px;
background-color: #3b82f6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-top: 15px;
}

.login-button:hover {
background-color: #2563eb;
}

.register-link {
text-align: center;
margin-top: 15px;
font-size: 14px;
}

.register-link a {
color: #3b82f6;
text-decoration: none;
}

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

footer {
background-color: #c8e6c9;
padding: 15px;
text-align: center;
font-size: 12px;
color: #4a5568;
}

.error-message {
color: #dc2626;
font-size: 12px;
margin-top: 5px;
display: none;
}
</style>
</head>
<body>
<header>
<h1>ABC Services Company</h1>
</header>

<div class="main-content">
<div class="login-box">
<h2>Login</h2>
<form id="loginForm">
<div class="role-selection">
<div class="role-option">
<input type="radio" id="customerRole" name="role"
value="customer" checked>
<label for="customerRole">Customer</label>
</div>
<div class="role-option">
<input type="radio" id="adminRole" name="role"
value="admin">
<label for="adminRole">Admin</label>
</div>
</div>

<div class="form-group">
<label for="userId">User ID</label>
<input type="text" id="userId" required>
<div id="userIdError" class="error-message"></div>
</div>

<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" required>
<div class="show-password">
<input type="checkbox" id="showPassword">
Show password
</div>
<div id="passwordError" class="error-message"></div>
</div>

<button type="submit" class="login-button">Login</button>

<div class="register-link">
<p>Don't have an account? <a href="register.html">Register
here</a></p>
</div>
</form>
</div>
</div>

<footer>
<p>Helpline: +1 123 456 7890 • Address: 123 Green Street, Eco City,
Earth</p>
<p>&copy; 2025 ABC Services. All rights reserved.</p>
</footer>

<script>
// Show/hide password functionality
document.getElementById('showPassword').addEventListener('change',
function() {
const passwordInput = document.getElementById('password');
passwordInput.type = this.checked ? 'text' : 'password';
});

// Form validation and submission


document.getElementById('loginForm').addEventListener('submit', function(e)
{
e.preventDefault();

const userId = document.getElementById('userId').value;


const password = document.getElementById('password').value;
const userIdError = document.getElementById('userIdError');
const passwordError = document.getElementById('passwordError');
const selectedRole =
document.querySelector('input[name="role"]:checked').value;

// Reset error displays


userIdError.style.display = 'none';
passwordError.style.display = 'none';
let hasError = false;

// Validate User ID
if (userId.length < 5 || userId.length > 20 || !/^[a-zA-Z0-9]+
$/.test(userId)) {
userIdError.textContent = 'User ID must be 5-20 characters and
alphanumeric';
userIdError.style.display = 'block';
hasError = true;
}

// Validate Password
const hasUpperCase = /[A-Z]/.test(password);
const hasLowerCase = /[a-z]/.test(password);
const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]
+/.test(password);

if (password.length < 8 || password.length > 30 || !hasUpperCase || !


hasLowerCase || !hasSpecialChar) {
let errorMsg = 'Password must contain: At least one uppercase
letter,one lowercase letter & At least one special character';
passwordError.textContent = errorMsg;
passwordError.style.display = 'block';
passwordError.style.whiteSpace = 'pre-line';
hasError = true;
}

// Only redirect if there are no errors


if (!hasError) {
if (selectedRole === 'admin') {
window.location.href = 'admin-home.html';
} else {
window.location.href = 'customer-home.html';
}
}
});

// Clear error messages when input changes


document.getElementById('userId').addEventListener('input', function() {
document.getElementById('userIdError').style.display = 'none';
});

document.getElementById('password').addEventListener('input', function() {
document.getElementById('passwordError').style.display = 'none';
});
</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy