Here's a comprehensive login page with dual functionality for both users and admins: Dual Login Portal

Welcome User!

Enter your personal details to access your account

Welcome Admin!

Enter admin credentials to access the dashboard

:root { --primary: #4361ee; --secondary: #3f37c9; --accent: #4895ef; --dark: #1b263b; --light: #f8f9fa; --danger: #ef233c; --success: #4cc9f0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 100vh; display: flex; justify-content: center; align-items: center; } .container { width: 100%; max-width: 900px; padding: 20px; } .login-container { background-color: white; border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); overflow: hidden; position: relative; } .form-container { display: flex; min-height: 500px; } .form-bg { position: absolute; width: 40%; height: 100%; background: linear-gradient(to right, var(--primary), var(--secondary)); transition: all 0.6s ease-in-out; z-index: 1; } .toggle-container { position: absolute; width: 40%; height: 100%; left: 0; top: 0; z-index: 2; transition: all 0.6s ease-in-out; } .toggle { height: 100%; background: linear-gradient(to right, var(--primary), var(--secondary)); color: white; position: relative; left: -100%; width: 200%; transition: all 0.6s ease-in-out; } .toggle-panel { position: absolute; width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; text-align: center; top: 0; transition: all 0.6s ease-in-out; } .toggle-left { left: 0; } .toggle-right { right: 0; opacity: 0; } .toggle h1 { font-size: 28px; margin-bottom: 15px; } .toggle p { font-size: 14px; margin-bottom: 20px; } .toggle button { background-color: transparent; color: white; border: 1px solid white; padding: 10px 30px; border-radius: 30px; font-weight: bold; cursor: pointer; transition: all 0.3s; } .toggle button:hover { background-color: white; color: var(--primary); } .form { position: absolute; width: 60%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 40px; right: 0; transition: all 0.6s ease-in-out; } .form h2 { font-size: 24px; color: var(--dark); margin-bottom: 30px; text-align: center; } .input-group { margin-bottom: 20px; position: relative; } .input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--dark); } .input-group input { width: 100%; padding: 15px 15px 15px 45px; border: 1px solid #ddd; border-radius: 30px; font-size: 14px; transition: all 0.3s; } .input-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); outline: none; } form button { width: 100%; padding: 15px; border: none; border-radius: 30px; background: linear-gradient(to right, var(--primary), var(--secondary)); color: white; font-weight: bold; cursor: pointer; transition: all 0.3s; } form button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3); } .forgot-password { text-align: center; margin-top: 15px; font-size: 13px; color: #666; } .forgot-password a { color: var(--primary); text-decoration: none; } .admin-form { right: -60%; } .active .form-bg { transform: translateX(150%); } .active .toggle-container { transform: translateX(150%); } .active .toggle { transform: translateX(50%); } .active .toggle-left { opacity: 0; } .active .toggle-right { opacity: 1; } .active .user-form { right: 60%; } .active .admin-form { right: 0; } @media (max-width: 768px) { .form-container { flex-direction: column; } .form-bg, .toggle-container { width: 100%; height: 40%; } .form { width: 100%; height: 60%; } .active .form-bg, .active .toggle-container { transform: translateY(150%); } .active .user-form { right: 0; top: -60%; } .active .admin-form { top: 0; } } document.addEventListener('DOMContentLoaded', function() { const container = document.querySelector('.container'); const userLoginForm = document.getElementById('userLoginForm'); const adminLoginForm = document.getElementById('adminLoginForm'); // Toggle between user and admin login document.getElementById('register').addEventListener('click', () => { container.classList.add('active'); }); document.getElementById('login').addEventListener('click', () => { container.classList.remove('active'); }); // User login form handling userLoginForm.addEventListener('submit', function(e) { e.preventDefault(); const username = this.querySelector('input[type="text"]').value; const password = this.querySelector('input[type="password"]').value; // Here you would typically validate and send to server console.log('User login attempt:', { username, password }); // Simulate successful login simulateLogin('user'); }); // Admin login form handling adminLoginForm.addEventListener('submit', function(e) { e.preventDefault(); const adminId = this.querySelectorAll('input[type="text"]')[0].value; const adminPass = this.querySelector('input[type="password"]').value; const securityCode = this.querySelectorAll('input[type="text"]')[1].value; // Here you would typically validate and send to server console.log('Admin login attempt:', { adminId, adminPass, securityCode }); // Simulate successful login simulateLogin('admin'); }); function simulateLogin(type) { const overlay = document.createElement('div'); overlay.style.position = 'fixed'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.backgroundColor = 'rgba(0,0,0,0.7)'; overlay.style.display = 'flex'; overlay.style.justifyContent = 'center'; overlay.style.alignItems = 'center'; overlay.style.zIndex = '1000'; const message = document.createElement('div'); message.style.backgroundColor = 'white'; message.style.padding = '30px'; message.style.borderRadius = '10px'; message.style.textAlign = 'center'; message.style.boxShadow = '0 5px 15px rgba(0,0,0,0.3)'; const heading = document.createElement('h2'); heading.textContent = `Successfully logged in as ${type}!`; heading.style.color = type === 'user' ? 'var(--primary)' : 'var(--secondary)'; heading.style.marginBottom = '20px'; const text = document.createElement('p'); text.textContent = type === 'user' ? 'You are now being redirected to your dashboard...' : 'Admin privileges activated. Redirecting to control panel...'; text.style.color = '#555'; const spinner = document.createElement('div'); spinner.style.border = '4px solid rgba(0,0,0,0.1)'; spinner.style.borderRadius = '50%'; spinner.style.borderTop = `4px solid ${type === 'user' ? 'var(--primary)' : 'var(--secondary)'}`; spinner.style.width = '40px'; spinner.style.height = '40px'; spinner.style.animation = 'spin 1s linear infinite'; spinner.style.margin = '20px auto'; message.appendChild(heading); message.appendChild(text); message.appendChild(spinner); overlay.appendChild(message); document.body.appendChild(overlay); // Add spin animation const style = document.createElement('style'); style.textContent = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; document.head.appendChild(style); // Simulate redirect after 3 seconds setTimeout(() => { overlay.remove(); alert(`This is a demo. In a real app, you would be redirected to the ${type} dashboard.`); }, 3000); } }); This login page features: 1. Smooth animated toggle between user and admin login 2. Responsive design that works on all devices 3. Form validation and simulated login process 4. Attractive gradient background and modern UI elements 5. Different security levels for user vs admin access 6. Loading animations during login simulation

Welcome User!

Welcome Admin!

User Login

Admin Login