Webleb - HTML UI Elements - Ein Code von Mete

HTML

CSS

<!DOCTYPE html>

<head>

<title>Modern Multicolor Neon Login</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #1a0a0a;

overflow: hidden;

}

section {

position: relative;

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

/* Animated diagonal color bands - UPDATED with multiple colors */

section span {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

}

section span:nth-child(1) {

clip-path: polygon(0 0, 16% 0, 32% 100%, 0% 100%);

background: #ff0038; /* Red */

opacity: 0.6;

animation: animate 15s linear infinite;

}

section span:nth-child(2) {

clip-path: polygon(16% 0, 32% 0, 48% 100%, 0% 100%);

background: #ffcc00; /* Yellow */

opacity: 0.6;

animation: animate 25s linear infinite;

animation-delay: -5s;

}

section span:nth-child(3) {

clip-path: polygon(32% 0, 48% 0, 64% 100%, 16% 100%);

background: #00cc66; /* Green */

opacity: 0.6;

animation: animate 20s linear infinite;

animation-delay: -10s;

}

section span:nth-child(4) {

clip-path: polygon(48% 0, 64% 0, 80% 100%, 32% 100%);

background: #0099ff; /* Blue */

opacity: 0.6;

animation: animate 30s linear infinite;

animation-delay: -15s;

}

section span:nth-child(5) {

clip-path: polygon(64% 0, 80% 0, 96% 100%, 48% 100%);

background: #ff6600; /* Orange */

opacity: 0.6;

animation: animate 22s linear infinite;

animation-delay: -7s;

}

section span:nth-child(6) {

clip-path: polygon(80% 0, 100% 0, 100% 100%, 64% 100%);

background: #ff0038; /* Red again */

opacity: 0.6;

animation: animate 18s linear infinite;

animation-delay: -12s;

}

@keyframes animate {

0% {

transform: translateY(-100%);

}

100% {

transform: translateY(100%);

}

/* Glass-morphic login card - UPDATED with multicolor effects */

.login-card {

position: relative;

z-index: 10;

width: 380px;

padding: 40px;

background: rgba(26, 10, 10, 0.85);

backdrop-filter: blur(10px);

border-radius: 10px;

box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);

border: 1px solid rgba(255, 0, 56, 0.1);

border-right: 1px solid rgba(255, 0, 56, 0.1);

border-bottom: 1px solid rgba(255, 0, 56, 0.1);

overflow: hidden;

transition: all 0.4s ease;

}

.login-card:hover {

transform: translateY(-10px);

box-shadow: 0 35px 55px rgba(0, 0, 0, 0.3),

0 0 20px rgba(255, 0, 56, 0.2),

0 0 20px rgba(255, 204, 0, 0.2),

0 0 20px rgba(0, 204, 102, 0.2),

0 0 20px rgba(0, 153, 255, 0.2),

0 0 20px rgba(255, 102, 0, 0.2);

}

/* Light refraction animation */

.login-card::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg,

rgba(255, 255, 255, 0) 0%,

rgba(255, 255, 255, 0.05) 25%,

rgba(255, 255, 255, 0.1) 50%,

rgba(255, 255, 255, 0.05) 75%,

rgba(255, 255, 255, 0) 100%);

transform: skewX(-15deg);

transition: 0.7s;

}

.login-card:hover::before {

left: 120%;

}

.login-card .content {

position: relative;

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

}

.login-card .content h2 {

color: #fff;

font-size: 2em;

margin-bottom: 30px;

text-transform: uppercase;

letter-spacing: 3px;

text-shadow: 0 0 10px rgba(255, 0, 56, 0.7),

0 0 15px rgba(255, 204, 0, 0.7),

0 0 20px rgba(0, 204, 102, 0.7);

font-weight: 700;

}

.login-card .content .form {

width: 100%;

}

/* Form inputs with floating labels */

.login-card .content .form .input-box {

position: relative;

width: 100%;

margin-bottom: 35px;

}

.login-card .content .form .input-box input {

width: 100%;

padding: 10px 0;

font-size: 16px;

color: #fff;

border: none;

border-bottom: 2px solid rgba(255, 255, 255, 0.5);

outline: none;

background: transparent;

transition: 0.5s;

}

.login-card .content .form .input-box input:focus,

.login-card .content .form .input-box input:valid {

border-bottom-color: #ff0038;

box-shadow: 0 2px 10px rgba(255, 0, 56, 0.5);

}

.login-card .content .form .input-box:nth-of-type(1) input:focus,

.login-card .content .form .input-box:nth-of-type(1) input:valid {

border-bottom-color: #ff0038; /* Red for username */

}

.login-card .content .form .input-box:nth-of-type(2) input:focus,

.login-card .content .form .input-box:nth-of-type(2) input:valid {

border-bottom-color: #0099ff; /* Blue for password */

box-shadow: 0 2px 10px rgba(0, 153, 255, 0.5);

}

.login-card .content .form .input-box label {

position: absolute;

left: 0;

top: 10px;

padding: 0;

font-size: 16px;

color: rgba(255, 255, 255, 0.7);

pointer-events: none;

transition: 0.5s;

}

.login-card .content .form .input-box:nth-of-type(1) input:focus ~ label,

.login-card .content .form .input-box:nth-of-type(1) input:valid ~ label {

transform: translateY(-25px);

font-size: 12px;

color: #ff0038; /* Red for username */

letter-spacing: 1px;

}

.login-card .content .form .input-box:nth-of-type(2) input:focus ~ label,

.login-card .content .form .input-box:nth-of-type(2) input:valid ~ label {

transform: translateY(-25px);

font-size: 12px;

color: #0099ff; /* Blue for password */

letter-spacing: 1px;

}

/* Remember me checkbox */

.remember-forgot {

display: flex;

justify-content: space-between;

margin-bottom: 25px;

color: #fff;

font-size: 14px;

}

.remember-forgot label {

display: flex;

align-items: center;

}

.remember-forgot label input {

margin-right: 8px;

accent-color: #00cc66; /* Green for checkbox */

}

.remember-forgot a {

color: #fff;

text-decoration: none;

transition: 0.3s;

}

.remember-forgot a:hover {

color: #ffcc00; /* Yellow for forgot password */

text-decoration: underline;

}

/* Submit button with gradient */

.login-card .content .form .input-box button {

width: 100%;

background: linear-gradient(45deg, #ff0038, #0099ff, #00cc66, #ffcc00, #ff6600);

background-size: 500% 500%;

animation: gradientBG 10s ease infinite;

color: #fff;

border: none;

padding: 12px;

cursor: pointer;

border-radius: 5px;

font-weight: 600;

letter-spacing: 1px;

transition: 0.5s;

display: flex;

justify-content: center;

align-items: center;

position: relative;

overflow: hidden;

}

@keyframes gradientBG {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

.login-card .content .form .input-box button:hover {

box-shadow: 0 0 10px #ff0038,

0 0 15px #0099ff,

0 0 20px #00cc66;

transform: scale(1.03);

}

.login-card .content .form .input-box button::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

transition: 0.5s;

}

.login-card .content .form .input-box button:hover::before {

left: 100%;

}

/* Password strength indicator */

.password-strength {

height: 3px;

margin-top: 5px;

width: 100%;

background: rgba(255, 255, 255, 0.1);

position: relative;

border-radius: 5px;

display: none;

}

.password-strength span {

height: 100%;

width: 0%;

position: absolute;

border-radius: 5px;

transition: 0.5s;

}

/* Sign up link */

.signup-link {

color: #fff;

margin-top: 20px;

text-align: center;

font-size: 14px;

}

.signup-link a {

color: #00cc66; /* Green for signup */

text-decoration: none;

font-weight: 500;

transition: 0.3s;

}

.signup-link a:hover {

text-decoration: underline;

}

/* Social icons */

.social-icons {

display: flex;

justify-content: center;

margin-top: 30px;

gap: 15px;

}

.social-icons a {

color: #fff;

font-size: 22px;

height: 40px;

width: 40px;

background: rgba(255, 255, 255, 0.1);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

transition: 0.4s;

}

.social-icons a:hover {

color: #fff;

transform: translateY(-5px);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}

.social-icons a:nth-child(1):hover {

background: #ff0038; /* Red for Google */

}

.social-icons a:nth-child(2):hover {

background: #0099ff; /* Blue for Facebook */

}

.social-icons a:nth-child(3):hover {

background: #00cc66; /* Green for Twitter */

}

.social-icons a:nth-child(4):hover {

background: #ff6600; /* Orange for LinkedIn */

}

/* Password toggle */

.password-toggle {

position: absolute;

right: 0;

top: 10px;

cursor: pointer;

color: rgba(255, 255, 255, 0.7);

transition: 0.3s;

}

.password-toggle:hover {

color: #0099ff; /* Blue for password toggle */

}

/* Loading animation */

.loader {

display: none;

width: 20px;

height: 20px;

border: 3px solid rgba(255, 255, 255, 0.3);

border-radius: 50%;

border-top-color: #ffffff;

animation: spin 1s ease-in-out infinite;

margin-left: 10px;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

/* Error message */

.error-message {

color: #ff3c3c;

font-size: 13px;

font-weight: 500;

margin-top: -25px;

margin-bottom: 20px;

display: none;

opacity: 0;

transition: opacity 0.3s ease;

}

/* Responsive design */

@media (max-width: 480px) {

.login-card {

width: 90%;

padding: 30px 20px;

}

.login-card .content h2 {

font-size: 1.7em;

}

.remember-forgot {

flex-direction: column;

gap: 10px;

}

</style>

</head>

<body>

<h2>Login</h2>

<label>Username</label>

</div>

<label>Password</label>

</span>

</div>

<label><input type="checkbox"> Remember me</label>

<a href="#">Forgot Password?</a>

</div>

</button>

</div>

Don't have an account? <a href="#">Sign Up</a>

</div>

</div>

</section>

document.addEventListener('DOMContentLoaded', function() {

// DOM elements

const togglePassword = document.querySelector('#togglePassword');

const password = document.querySelector('#password');

const passwordStrength = document.querySelector('#passwordStrength');

const passwordStrengthBar = passwordStrength.querySelector('span');

const loginForm = document.querySelector('.form');

const username = document.querySelector('#username');

const errorMessage = document.querySelector('#errorMessage');

const loginBtn = document.querySelector('#loginBtn');

const loader = document.querySelector('#loader');

// Password toggle functionality

togglePassword.addEventListener('click', function() {

const type = password.getAttribute('type') === 'password' ? 'text' : 'password';

password.setAttribute('type', type);

this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';

});

// Password strength indicator

password.addEventListener('focus', function() {

passwordStrength.style.display = 'block';

});

password.addEventListener('input', function() {

const value = this.value;

let strength = 0;

if (value.length >= 6) strength += 20;

if (value.length >= 10) strength += 20;

if (/[A-Z]/.test(value)) strength += 20;

if (/[0-9]/.test(value)) strength += 20;

if (/[^A-Za-z0-9]/.test(value)) strength += 20;

passwordStrengthBar.style.width = strength + '%';

if (strength <= 40) {

passwordStrengthBar.style.backgroundColor = '#ff3c3c'; // Red

} else if (strength <= 70) {

passwordStrengthBar.style.backgroundColor = '#ffcc00'; // Yellow

} else {

passwordStrengthBar.style.backgroundColor = '#00cc66'; // Green

}

});

// Form validation

loginBtn.addEventListener('click', function(e) {

e.preventDefault();

// Show loading animation

loader.style.display = 'inline-block';

loginBtn.textContent = '';

// Simulate API call

setTimeout(function() {

// Hide loading animation

loader.style.display = 'none';

loginBtn.textContent = 'LOGIN';

// Simple validation

if(username.value.trim() === '' || password.value.trim() === '') {

showError('Please fill in all fields');

} else if(password.value.length < 6) {

showError('Password must be at least 6 characters');

} else {

hideError();

// Here you would typically send the data to your server

alert('Login successful! Redirecting...');

// window.location.href = 'dashboard.html';

}

}, 1500);

});

// Show error message with animation

function showError(message) {

errorMessage.textContent = message;

errorMessage.style.display = 'block';

setTimeout(() => {

errorMessage.style.opacity = '1';

}, 10);

}

// Hide error message

function hideError() {

errorMessage.style.opacity = '0';

setTimeout(() => {

errorMessage.style.display = 'none';

}, 300);

}

// Input field animations - when clicked anywhere in the login card

document.querySelectorAll('.input-box input').forEach(input => {

// For initial state check (e.g., autofill)

if (input.value !== '') {

const label = input.nextElementSibling;

if (label && label.tagName.toLowerCase() === 'label') {

label.classList.add('active');

}

});

// Adding ripple effect to button

loginBtn.addEventListener('mousedown', function(e) {

const x = e.clientX - e.target.getBoundingClientRect().left;

const y = e.clientY - e.target.getBoundingClientRect().top;

const ripple = document.createElement('span');

ripple.style.left = `${x}px`;

ripple.style.top = `${y}px`;

ripple.style.position = 'absolute';

ripple.style.width = '0';

ripple.style.height = '0';

ripple.style.background = 'rgba(255, 255, 255, 0.4)';

ripple.style.borderRadius = '50%';

ripple.style.transform = 'translate(-50%, -50%)';

ripple.style.pointerEvents = 'none';

this.appendChild(ripple);

ripple.animate([

{ width: '0', height: '0', opacity: 1 },

{ width: '400px', height: '400px', opacity: 0 }

], {

duration: 600,

easing: 'ease-out'

}).onfinish = function() {

ripple.remove();

};

});

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>Modern Multicolor Neon Login</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #1a0a0a;

overflow: hidden;

}

section {

position: relative;

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

/* Animated diagonal color bands - UPDATED with multiple colors */

section span {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

}

section span:nth-child(1) {

clip-path: polygon(0 0, 16% 0, 32% 100%, 0% 100%);

background: #ff0038; /* Red */

opacity: 0.6;

animation: animate 15s linear infinite;

}

section span:nth-child(2) {

clip-path: polygon(16% 0, 32% 0, 48% 100%, 0% 100%);

background: #ffcc00; /* Yellow */

opacity: 0.6;

animation: animate 25s linear infinite;

animation-delay: -5s;

}

section span:nth-child(3) {

clip-path: polygon(32% 0, 48% 0, 64% 100%, 16% 100%);

background: #00cc66; /* Green */

opacity: 0.6;

animation: animate 20s linear infinite;

animation-delay: -10s;

}

section span:nth-child(4) {

clip-path: polygon(48% 0, 64% 0, 80% 100%, 32% 100%);

background: #0099ff; /* Blue */

opacity: 0.6;

animation: animate 30s linear infinite;

animation-delay: -15s;

}

section span:nth-child(5) {

clip-path: polygon(64% 0, 80% 0, 96% 100%, 48% 100%);

background: #ff6600; /* Orange */

opacity: 0.6;

animation: animate 22s linear infinite;

animation-delay: -7s;

}

section span:nth-child(6) {

clip-path: polygon(80% 0, 100% 0, 100% 100%, 64% 100%);

background: #ff0038; /* Red again */

opacity: 0.6;

animation: animate 18s linear infinite;

animation-delay: -12s;

}

@keyframes animate {

0% {

transform: translateY(-100%);

}

100% {

transform: translateY(100%);

}

/* Glass-morphic login card - UPDATED with multicolor effects */

.login-card {

position: relative;

z-index: 10;

width: 380px;

padding: 40px;

background: rgba(26, 10, 10, 0.85);

backdrop-filter: blur(10px);

border-radius: 10px;

box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);

border: 1px solid rgba(255, 0, 56, 0.1);

border-right: 1px solid rgba(255, 0, 56, 0.1);

border-bottom: 1px solid rgba(255, 0, 56, 0.1);

overflow: hidden;

transition: all 0.4s ease;

}

.login-card:hover {

transform: translateY(-10px);

box-shadow: 0 35px 55px rgba(0, 0, 0, 0.3),

0 0 20px rgba(255, 0, 56, 0.2),

0 0 20px rgba(255, 204, 0, 0.2),

0 0 20px rgba(0, 204, 102, 0.2),

0 0 20px rgba(0, 153, 255, 0.2),

0 0 20px rgba(255, 102, 0, 0.2);

}

/* Light refraction animation */

.login-card::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg,

rgba(255, 255, 255, 0) 0%,

rgba(255, 255, 255, 0.05) 25%,

rgba(255, 255, 255, 0.1) 50%,

rgba(255, 255, 255, 0.05) 75%,

rgba(255, 255, 255, 0) 100%);

transform: skewX(-15deg);

transition: 0.7s;

}

.login-card:hover::before {

left: 120%;

}

.login-card .content {

position: relative;

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

}

.login-card .content h2 {

color: #fff;

font-size: 2em;

margin-bottom: 30px;

text-transform: uppercase;

letter-spacing: 3px;

text-shadow: 0 0 10px rgba(255, 0, 56, 0.7),

0 0 15px rgba(255, 204, 0, 0.7),

0 0 20px rgba(0, 204, 102, 0.7);

font-weight: 700;

}

.login-card .content .form {

width: 100%;

}

/* Form inputs with floating labels */

.login-card .content .form .input-box {

position: relative;

width: 100%;

margin-bottom: 35px;

}

.login-card .content .form .input-box input {

width: 100%;

padding: 10px 0;

font-size: 16px;

color: #fff;

border: none;

border-bottom: 2px solid rgba(255, 255, 255, 0.5);

outline: none;

background: transparent;

transition: 0.5s;

}

.login-card .content .form .input-box input:focus,

.login-card .content .form .input-box input:valid {

border-bottom-color: #ff0038;

box-shadow: 0 2px 10px rgba(255, 0, 56, 0.5);

}

.login-card .content .form .input-box:nth-of-type(1) input:focus,

.login-card .content .form .input-box:nth-of-type(1) input:valid {

border-bottom-color: #ff0038; /* Red for username */

}

.login-card .content .form .input-box:nth-of-type(2) input:focus,

.login-card .content .form .input-box:nth-of-type(2) input:valid {

border-bottom-color: #0099ff; /* Blue for password */

box-shadow: 0 2px 10px rgba(0, 153, 255, 0.5);

}

.login-card .content .form .input-box label {

position: absolute;

left: 0;

top: 10px;

padding: 0;

font-size: 16px;

color: rgba(255, 255, 255, 0.7);

pointer-events: none;

transition: 0.5s;

}

.login-card .content .form .input-box:nth-of-type(1) input:focus ~ label,

.login-card .content .form .input-box:nth-of-type(1) input:valid ~ label {

transform: translateY(-25px);

font-size: 12px;

color: #ff0038; /* Red for username */

letter-spacing: 1px;

}

.login-card .content .form .input-box:nth-of-type(2) input:focus ~ label,

.login-card .content .form .input-box:nth-of-type(2) input:valid ~ label {

transform: translateY(-25px);

font-size: 12px;

color: #0099ff; /* Blue for password */

letter-spacing: 1px;

}

/* Remember me checkbox */

.remember-forgot {

display: flex;

justify-content: space-between;

margin-bottom: 25px;

color: #fff;

font-size: 14px;

}

.remember-forgot label {

display: flex;

align-items: center;

}

.remember-forgot label input {

margin-right: 8px;

accent-color: #00cc66; /* Green for checkbox */

}

.remember-forgot a {

color: #fff;

text-decoration: none;

transition: 0.3s;

}

.remember-forgot a:hover {

color: #ffcc00; /* Yellow for forgot password */

text-decoration: underline;

}

/* Submit button with gradient */

.login-card .content .form .input-box button {

width: 100%;

background: linear-gradient(45deg, #ff0038, #0099ff, #00cc66, #ffcc00, #ff6600);

background-size: 500% 500%;

animation: gradientBG 10s ease infinite;

color: #fff;

border: none;

padding: 12px;

cursor: pointer;

border-radius: 5px;

font-weight: 600;

letter-spacing: 1px;

transition: 0.5s;

display: flex;

justify-content: center;

align-items: center;

position: relative;

overflow: hidden;

}

@keyframes gradientBG {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

.login-card .content .form .input-box button:hover {

box-shadow: 0 0 10px #ff0038,

0 0 15px #0099ff,

0 0 20px #00cc66;

transform: scale(1.03);

}

.login-card .content .form .input-box button::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

transition: 0.5s;

}

.login-card .content .form .input-box button:hover::before {

left: 100%;

}

/* Password strength indicator */

.password-strength {

height: 3px;

margin-top: 5px;

width: 100%;

background: rgba(255, 255, 255, 0.1);

position: relative;

border-radius: 5px;

display: none;

}

.password-strength span {

height: 100%;

width: 0%;

position: absolute;

border-radius: 5px;

transition: 0.5s;

}

/* Sign up link */

.signup-link {

color: #fff;

margin-top: 20px;

text-align: center;

font-size: 14px;

}

.signup-link a {

color: #00cc66; /* Green for signup */

text-decoration: none;

font-weight: 500;

transition: 0.3s;

}

.signup-link a:hover {

text-decoration: underline;

}

/* Social icons */

.social-icons {

display: flex;

justify-content: center;

margin-top: 30px;

gap: 15px;

}

.social-icons a {

color: #fff;

font-size: 22px;

height: 40px;

width: 40px;

background: rgba(255, 255, 255, 0.1);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

transition: 0.4s;

}

.social-icons a:hover {

color: #fff;

transform: translateY(-5px);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}

.social-icons a:nth-child(1):hover {

background: #ff0038; /* Red for Google */

}

.social-icons a:nth-child(2):hover {

background: #0099ff; /* Blue for Facebook */

}

.social-icons a:nth-child(3):hover {

background: #00cc66; /* Green for Twitter */

}

.social-icons a:nth-child(4):hover {

background: #ff6600; /* Orange for LinkedIn */

}

/* Password toggle */

.password-toggle {

position: absolute;

right: 0;

top: 10px;

cursor: pointer;

color: rgba(255, 255, 255, 0.7);

transition: 0.3s;

}

.password-toggle:hover {

color: #0099ff; /* Blue for password toggle */

}

/* Loading animation */

.loader {

display: none;

width: 20px;

height: 20px;

border: 3px solid rgba(255, 255, 255, 0.3);

border-radius: 50%;

border-top-color: #ffffff;

animation: spin 1s ease-in-out infinite;

margin-left: 10px;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

/* Error message */

.error-message {

color: #ff3c3c;

font-size: 13px;

font-weight: 500;

margin-top: -25px;

margin-bottom: 20px;

display: none;

opacity: 0;

transition: opacity 0.3s ease;

}

/* Responsive design */

@media (max-width: 480px) {

.login-card {

width: 90%;

padding: 30px 20px;

}

.login-card .content h2 {

font-size: 1.7em;

}

.remember-forgot {

flex-direction: column;

gap: 10px;

}

</style>

</head>

<body>

<h2>Login</h2>

<label>Username</label>

</div>

<label>Password</label>

</span>

</div>

<label><input type="checkbox"> Remember me</label>

<a href="#">Forgot Password?</a>

</div>

</button>

</div>

Don't have an account? <a href="#">Sign Up</a>

</div>

</div>

</section>

document.addEventListener('DOMContentLoaded', function() {

// DOM elements

const togglePassword = document.querySelector('#togglePassword');

const password = document.querySelector('#password');

const passwordStrength = document.querySelector('#passwordStrength');

const passwordStrengthBar = passwordStrength.querySelector('span');

const loginForm = document.querySelector('.form');

const username = document.querySelector('#username');

const errorMessage = document.querySelector('#errorMessage');

const loginBtn = document.querySelector('#loginBtn');

const loader = document.querySelector('#loader');

// Password toggle functionality

togglePassword.addEventListener('click', function() {

const type = password.getAttribute('type') === 'password' ? 'text' : 'password';

password.setAttribute('type', type);

this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';

});

// Password strength indicator

password.addEventListener('focus', function() {

passwordStrength.style.display = 'block';

});

password.addEventListener('input', function() {

const value = this.value;

let strength = 0;

if (value.length >= 6) strength += 20;

if (value.length >= 10) strength += 20;

if (/[A-Z]/.test(value)) strength += 20;

if (/[0-9]/.test(value)) strength += 20;

if (/[^A-Za-z0-9]/.test(value)) strength += 20;

passwordStrengthBar.style.width = strength + '%';

if (strength <= 40) {

passwordStrengthBar.style.backgroundColor = '#ff3c3c'; // Red

} else if (strength <= 70) {

passwordStrengthBar.style.backgroundColor = '#ffcc00'; // Yellow

} else {

passwordStrengthBar.style.backgroundColor = '#00cc66'; // Green

}

});

// Form validation

loginBtn.addEventListener('click', function(e) {

e.preventDefault();

// Show loading animation

loader.style.display = 'inline-block';

loginBtn.textContent = '';

// Simulate API call

setTimeout(function() {

// Hide loading animation

loader.style.display = 'none';

loginBtn.textContent = 'LOGIN';

// Simple validation

if(username.value.trim() === '' || password.value.trim() === '') {

showError('Please fill in all fields');

} else if(password.value.length < 6) {

showError('Password must be at least 6 characters');

} else {

hideError();

// Here you would typically send the data to your server

alert('Login successful! Redirecting...');

// window.location.href = 'dashboard.html';

}

}, 1500);

});

// Show error message with animation

function showError(message) {

errorMessage.textContent = message;

errorMessage.style.display = 'block';

setTimeout(() => {

errorMessage.style.opacity = '1';

}, 10);

}

// Hide error message

function hideError() {

errorMessage.style.opacity = '0';

setTimeout(() => {

errorMessage.style.display = 'none';

}, 300);

}

// Input field animations - when clicked anywhere in the login card

document.querySelectorAll('.input-box input').forEach(input => {

// For initial state check (e.g., autofill)

if (input.value !== '') {

const label = input.nextElementSibling;

if (label && label.tagName.toLowerCase() === 'label') {

label.classList.add('active');

}

});

// Adding ripple effect to button

loginBtn.addEventListener('mousedown', function(e) {

const x = e.clientX - e.target.getBoundingClientRect().left;

const y = e.clientY - e.target.getBoundingClientRect().top;

const ripple = document.createElement('span');

ripple.style.left = `${x}px`;

ripple.style.top = `${y}px`;

ripple.style.position = 'absolute';

ripple.style.width = '0';

ripple.style.height = '0';

ripple.style.background = 'rgba(255, 255, 255, 0.4)';

ripple.style.borderRadius = '50%';

ripple.style.transform = 'translate(-50%, -50%)';

ripple.style.pointerEvents = 'none';

this.appendChild(ripple);

ripple.animate([

{ width: '0', height: '0', opacity: 1 },

{ width: '400px', height: '400px', opacity: 0 }

], {

duration: 600,

easing: 'ease-out'

}).onfinish = function() {

ripple.remove();

};

});

</script>

</body>

</html>