I've created a sleek, minimalist dark-themed login page with subtle decorative elements and smooth interactions. The design features a fullscreen dark gradient background with SVG decorative shapes, a centered login card with rounded corners, and elegant form elements with smooth hover effects.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #0f172a, #1e293b);
padding: 20px;
position: relative;
overflow: hidden;
}
/* Decorative shapes */
.shape {
position: absolute;
border-radius: 50%;
opacity: 0.1;
z-index: -1;
}
.shape-1 {
width: 300px;
height: 300px;
background: linear-gradient(45deg, #6366f1, #8b5cf6);
top: -100px;
left: -100px;
}
.shape-2 {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #ec4899, #8b5cf6);
bottom: -50px;
right: -50px;
}
.shape-3 {
width: 150px;
height: 150px;
background: linear-gradient(45deg, #3b82f6, #10b981);
top: 50%;
right: 20%;
}
/* Login card */
.login-card {
background: #1e293b;
padding: 40px;
border-radius: 16px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 420px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.login-header {
margin-bottom: 30px;
text-align: center;
}
.login-header h1 {
color: #f8fafc;
font-size: 28px;
font-weight: 600;
margin-bottom: 10px;
}
.login-header p {
color: #94a3b8;
font-size: 16px;
}
/* Form elements */
.form-group {
margin-bottom: 20px;
}
label {
display: block;
color: #cbd5e1;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
}
input[type="email"],
input[type="password"] {
width: 100%;
padding: 14px;
background: #2d3748;
border: 1px solid #3f4a5f;
border-radius: 8px;
color: #f1f5f9;
font-size: 16px;
transition: all 0.3s ease;
}
input[type="email"]:focus,
input[type="password"]:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}
input[type="email"]:hover,
input[type="password"]:hover {
border-color: #6366f1;
}
/* Checkbox */
.remember {
display: flex;
align-items: center;
margin-bottom: 25px;
}
.remember input {
margin-right: 10px;
accent-color: #6366f1;
}
.remember label {
margin: 0;
color: #cbd5e1;
}
/* Button */
.sign-in-btn {
width: 100%;
padding: 14px;
background: #6366f1;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.sign-in-btn:hover {
background: #4f46e5;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4);
}
.sign-in-btn:active {
transform: translateY(0);
}
/* Forgot password */
.forgot-password {
text-align: center;
margin-top: 20px;
}
.forgot-password a {
color: #94a3b8;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.forgot-password a:hover {
color: #6366f1;
}
/* Responsive design */
@media (max-width: 480px) {
.login-card {
padding: 30px 20px;
}
.login-header h1 {
font-size: 24px;
}
input[type="email"],
input[type="password"],
.sign-in-btn {
padding: 12px;
}
}
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Simple validation
if(email && password) {
// In a real application, you would send this data to a server
alert('Login successful! (This is a demo)');
// Reset form
document.getElementById('loginForm').reset();
} else {
alert('Please fill in all fields');
}
});
// Add some interactive effects
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.querySelector('i').style.color = '#7e67e5';
});
input.addEventListener('blur', function() {
this.parentElement.querySelector('i').style.color = '#a0a0a0';
});
});
إرسال تعليق
Thank you
Learning robo team