Admin Login Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Portal | Secure Login</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
 
</head>
<body>
    <div class="login-container">
        
        <div class="left-panel">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="logo-text">
                    <h1>AdminPortal</h1>
                    <p>Secure Access Dashboard</p>
                </div>
            </div>

<div class="welcome-text">
                <h2>Welcome Back</h2>
                <p>Sign in to access the admin dashboard with advanced security features and management tools.</p>
            </div>

<ul class="features">
                <li><i class="fas fa-shield-alt"></i> Advanced Security Protocols</li>
                <li><i class="fas fa-chart-line"></i> Real-time Analytics</li>
                <li><i class="fas fa-database"></i> Secure Data Management</li>
                <li><i class="fas fa-users-cog"></i> User Access Control</li>
            </ul>

<div class="floating-icons">
                
            </div>
        </div>

<div class="right-panel">
            <div class="login-header">
                <h2>Admin Login</h2>
                <p>Enter your credentials to access the dashboard</p>
            </div>

<form id="loginForm">
                <div class="form-group">
                    <label for="username">Username / Email</label>
                    <div class="input-with-icon">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" class="form-control" placeholder="Enter your username or email" required>
                    </div>
                </div>

<div class="form-group">
                    <label for="password">Password</label>
                    <div class="input-with-icon">
                        <i class="fas fa-key"></i>
                        <input type="password" id="password" class="form-control" placeholder="Enter your password" required>
                        <button type="button" class="show-password" id="togglePassword">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>

<div class="remember-forgot">
                    <div class="remember-me">
                        <input type="checkbox" id="remember">
                        <label for="remember">Remember me</label>
                    </div>
                    <a href="#" class="forgot-password">Forgot password?</a>
                </div>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            background: linear-gradient(135deg, #1a237e, #311b92);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }

.login-container {
            display: flex;
            width: 100%;
            max-width: 900px;
            min-height: 550px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            position: relative;
            animation: fadeIn 1s ease-out;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

.left-panel {
            flex: 1;
            background: linear-gradient(135deg, #3949ab, #5c6bc0);
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

.left-panel::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            top: -150px;
            right: -100px;
            animation: float 20s infinite linear;
        }

.left-panel::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            bottom: -80px;
            left: -80px;
            animation: float 15s infinite linear reverse;
        }

@keyframes float {
            0% { transform: rotate(0deg) translateX(10px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
        }

.logo {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
            z-index: 2;
            position: relative;
        }

.logo-icon {
            font-size: 32px;
            margin-right: 15px;
            background: white;
            color: #3949ab;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s infinite;
        }

@keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
        }

.logo-text h1 {
            font-size: 24px;
            font-weight: 600;
        }

.logo-text p {
            font-size: 14px;
            opacity: 0.9;
        }

.welcome-text {
            margin-bottom: 30px;
            z-index: 2;
            position: relative;
        }

.welcome-text h2 {
            font-size: 28px;
            margin-bottom: 10px;
        }

.features {
            list-style: none;
            margin-top: 30px;
            z-index: 2;
            position: relative;
        }

.features li {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            font-size: 15px;
        }

.features i {
            margin-right: 10px;
            background: rgba(255, 255, 255, 0.2);
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.right-panel {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 2;
            position: relative;
        }

.login-header {
            text-align: center;
            margin-bottom: 40px;
        }

.login-header h2 {
            color: #333;
            font-size: 28px;
            margin-bottom: 8px;
        }

.login-header p {
            color: #666;
            font-size: 15px;
        }

.form-group {
            margin-bottom: 25px;
            position: relative;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
            font-size: 14px;
        }

.input-with-icon {
            position: relative;
        }

.input-with-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
            transition: color 0.3s;
        }

.form-control {
            width: 100%;
            padding: 15px 15px 15px 45px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s;
            background: #f9f9f9;
        }

.form-control:focus {
            border-color: #5c6bc0;
            background: white;
            outline: none;
            box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.2);
        }

.form-control:focus + i {
            color: #5c6bc0;
        }

.show-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #777;
            cursor: pointer;
            transition: color 0.3s;
        }

.show-password:hover {
            color: #5c6bc0;
        }

.remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;
        }

.remember-me {
            display: flex;
            align-items: center;
        }

.remember-me input {
            margin-right: 8px;
        }

.forgot-password {
            color: #5c6bc0;
            text-decoration: none;
            transition: color 0.3s;
        }

.forgot-password:hover {
            color: #3949ab;
            text-decoration: underline;
        }

.login-btn {
            background: linear-gradient(135deg, #3949ab, #5c6bc0);
            color: white;
            border: none;
            padding: 16px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            box-shadow: 0 5px 15px rgba(57, 73, 171, 0.3);
        }

.login-btn:hover {
            background: linear-gradient(135deg, #303f9f, #3949ab);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(57, 73, 171, 0.4);
        }

.login-btn:active {
            transform: translateY(-1px);
        }

.floating-icons {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            pointer-events: none;
        }

.floating-icons span {
            position: absolute;
            color: rgba(92, 107, 192, 0.1);
            font-size: 24px;
            animation: floatIcon 15s linear infinite;
        }

@keyframes floatIcon {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.5;
            }
            90% {
                opacity: 0.5;
            }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .login-container {
                flex-direction: column;
                max-width: 500px;
            }

.left-panel {
                padding: 30px;
            }

.right-panel {
                padding: 30px;
            }

.logo-text h1 {
                font-size: 20px;
            }

.welcome-text h2 {
                font-size: 24px;
            }

.login-header h2 {
                font-size: 24px;
            }
        }

@media (max-width: 480px) {
            .login-container {
                min-height: auto;
            }

.left-panel, .right-panel {
                padding: 25px;
            }

.remember-forgot {
                flex-direction: column;
                align-items: flex-start;
            }

.forgot-password {
                margin-top: 10px;
            }
        }

JavaScript

// Add floating icons to background
        document.addEventListener('DOMContentLoaded', function() {
            const floatingIconsContainer = document.querySelector('.floating-icons');
            const icons = ['fa-lock', 'fa-shield-alt', 'fa-user-secret', 'fa-key', 'fa-database', 'fa-chart-bar', 'fa-cogs', 'fa-server'];
            
            for (let i = 0; i < 15; i++) {
                const icon = document.createElement('span');
                icon.className = 'fas ' + icons[Math.floor(Math.random() * icons.length)];
                icon.style.left = Math.random() * 100 + '%';
                icon.style.animationDelay = Math.random() * 15 + 's';
                icon.style.fontSize = (Math.random() * 20 + 15) + 'px';
                floatingIconsContainer.appendChild(icon);
            }
            
            // Toggle password visibility
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            const eyeIcon = togglePassword.querySelector('i');
            
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                eyeIcon.classList.toggle('fa-eye');
                eyeIcon.classList.toggle('fa-eye-slash');
            });
            
            // Form submission
            const loginForm = document.getElementById('loginForm');
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                const remember = document.getElementById('remember').checked;
                
                // Simulate login process
                const loginBtn = document.querySelector('.login-btn');
                const originalText = loginBtn.innerHTML;
                
                loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Authenticating...';
                loginBtn.disabled = true;
                
                // Simulate API call delay
                setTimeout(() => {
                    if (username && password) {
                        // Successful login simulation
                        loginBtn.innerHTML = '<i class="fas fa-check"></i> Login Successful!';
                        loginBtn.style.background = 'linear-gradient(135deg, #2e7d32, #4caf50)';
                        
                        // In a real application, you would redirect to admin dashboard
                        setTimeout(() => {
                            alert(`Login successful! Welcome, ${username}. \nRemember me: ${remember ? 'Yes' : 'No'}`);
                            loginBtn.innerHTML = originalText;
                            loginBtn.disabled = false;
                            loginBtn.style.background = 'linear-gradient(135deg, #3949ab, #5c6bc0)';
                        }, 1000);
                    } else {
                        // Failed login simulation
                        loginBtn.innerHTML = '<i class="fas fa-exclamation-circle"></i> Invalid Credentials';
                        loginBtn.style.background = 'linear-gradient(135deg, #c62828, #d32f2f)';
                        
                        setTimeout(() => {
                            loginBtn.innerHTML = originalText;
                            loginBtn.disabled = false;
                            loginBtn.style.background = 'linear-gradient(135deg, #3949ab, #5c6bc0)';
                        }, 2000);
                    }
                }, 1500);
            });
            
            // Add focus effects to form inputs
            const formInputs = document.querySelectorAll('.form-control');
            formInputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.parentElement.classList.add('focused');
                });
                
                input.addEventListener('blur', function() {
                    if (!this.value) {
                        this.parentElement.parentElement.classList.remove('focused');
                    }
                });
            });
        });

Admin Login Template Preview

Download Options