This login page features a sleek dark theme design with a deep gray/black background (#121212) and a semi-transparent card (#1e1e1e) that includes a blur effect for a modern glass-like appearance. The inputs are styled with neon/glass-style borders, and the entire interface uses the Poppins font for a clean, contemporary look. The animated background brings the page to life with floating colored shapes (circles and blobs) that move smoothly across the screen using CSS @keyframes animations. These elements create a subtle glow effect through careful use of blur and opacity, with additional shapes dynamically generated via JavaScript for added visual interest. The login form itself includes all essential components: email and password fields with proper validation, a "Remember Me" checkbox, and a "Forgot Password" link for user convenience. The login button features an eye-catching hover animation with a gradient and shine effect for enhanced interactivity. JavaScript powers key functionalities, including form validation to ensure fields are not empty, a toggle for password visibility, and console logging upon submission. The background animation is further enriched by dynamically generated floating elements. Designed with responsiveness in mind, the layout is mobile-friendly, using Flexbox for perfect centering and media queries to adapt seamlessly to smaller screens. The full-screen background adjusts effortlessly to different viewport sizes, ensuring a consistent experience across devices. Overall, the design strikes a balance between a futuristic aesthetic with its animated elements and practical usability, making it both visually engaging and user-friendly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #121212;
color: #ffffff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.background-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
.shape {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.2;
}
.shape:nth-child(1) {
background: #ff0055;
width: 300px;
height: 300px;
top: 20%;
left: 10%;
animation: float 15s infinite ease-in-out;
}
.shape:nth-child(2) {
background: #00ffaa;
width: 400px;
height: 400px;
bottom: 15%;
right: 10%;
animation: float 18s infinite ease-in-out reverse;
}
.shape:nth-child(3) {
background: #5500ff;
width: 250px;
height: 250px;
top: 60%;
left: 30%;
animation: float 12s infinite ease-in-out;
}
.shape:nth-child(4) {
background: #ffaa00;
width: 350px;
height: 350px;
top: 30%;
right: 25%;
animation: float 20s infinite ease-in-out reverse;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(10px, 10px) rotate(5deg);
}
50% {
transform: translate(0, 20px) rotate(0deg);
}
75% {
transform: translate(-10px, 10px) rotate(-5deg);
}
}
.login-container {
position: relative;
z-index: 2;
width: 90%;
max-width: 400px;
background: rgba(30, 30, 30, 0.8);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 2.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.login-container h1 {
text-align: center;
margin-bottom: 2rem;
font-weight: 600;
color: #ffffff;
}
.input-group {
margin-bottom: 1.5rem;
position: relative;
}
.input-group label {
display: block;
margin-bottom: 0.5rem;
color: #cccccc;
font-size: 0.9rem;
}
.input-group input {
width: 100%;
padding: 12px 15px;
background: rgba(20, 20, 20, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #ffffff;
font-size: 1rem;
transition: all 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: #00ffaa;
box-shadow: 0 0 0 2px rgba(0, 255, 170, 0.2);
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.remember-me {
display: flex;
align-items: center;
}
.remember-me input {
margin-right: 8px;
}
.forgot-password a {
color: #00ffaa;
text-decoration: none;
transition: color 0.3s ease;
}
.forgot-password a:hover {
color: #ffffff;
text-decoration: underline;
}
.login-btn {
width: 100%;
padding: 12px;
background: linear-gradient(45deg, #00ffaa, #00aaff);
border: none;
border-radius: 8px;
color: #121212;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 255, 170, 0.4);
}
.login-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.login-btn:hover::before {
left: 100%;
}
.password-container {
position: relative;
}
.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #cccccc;
cursor: pointer;
}
@media (max-width: 480px) {
.login-container {
padding: 1.5rem;
}
.options {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.forgot-password {
margin-top: 5px;
}
}
document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('loginForm');
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');
// Toggle password visibility
togglePassword.addEventListener('click', function() {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.textContent = type === 'password' ? '👁️' : '🔒';
});
// Form submission
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
if (!email || !password) {
alert('Please fill in all fields');
return;
}
// Here you would typically send the data to a server
console.log('Login attempt with:', { email, password });
alert('Login submitted! (Check console for details)');
// Reset form
loginForm.reset();
});
// Create additional floating shapes dynamically
const background = document.querySelector('.background-shapes');
const colors = ['#ff0055', '#00ffaa', '#5500ff', '#ffaa00', '#ff5500', '#aa00ff'];
for (let i = 0; i < 4; i++) {
const shape = document.createElement('div');
shape.classList.add('shape');
const size = Math.random() * 200 + 100;
const color = colors[Math.floor(Math.random() * colors.length)];
shape.style.width = `${size}px`;
shape.style.height = `${size}px`;
shape.style.background = color;
shape.style.top = `${Math.random() * 100}%`;
shape.style.left = `${Math.random() * 100}%`;
const duration = Math.random() * 15 + 10;
const delay = Math.random() * 5;
shape.style.animation = `float ${duration}s ${delay}s infinite ease-in-out ${Math.random() > 0.5 ? 'reverse' : ''}`;
background.appendChild(shape);
}
});
إرسال تعليق
Thank you
Learning robo team