This design implements a modern, dark-themed login and signup form that features a multi-tab format for seamless switching between functions. The overall aesthetic is built upon a visually striking gradient light background that provides a deep and immersive feel, while the form itself is presented on a sleek grey panel, creating a clear and focused interaction area. Designed with a contemporary sensibility, it includes all essential fields: a username/email input, a login password field, and a dedicated signup tab. The interface is enhanced with modern UI elements such as smooth transitions, subtle animations, and gradient accents for a dynamic look. For user convenience, social login options are integrated with clean, recognizable icons. The experience is further refined with interactive elements, intuitive hover effects, and easy tab switching, all wrapped in a fully mobile-responsive design that ensures a consistent and sleek experience across all devices.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 20px;
}
.container {
width: 100%;
max-width: 440px;
background: #2d2d3a;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.tabs {
display: flex;
background: #252531;
}
.tab {
flex: 1;
padding: 18px;
text-align: center;
background: #252531;
cursor: pointer;
font-weight: 600;
color: #8a8a9a;
transition: all 0.3s ease;
position: relative;
}
.tab.active {
color: #fff;
background: #2d2d3a;
}
.tab.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #6a67ce, #fc5c7d);
}
.form-container {
padding: 30px;
}
.form {
display: none;
}
.form.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
h2 {
color: #fff;
margin-bottom: 25px;
text-align: center;
font-weight: 600;
font-size: 28px;
}
.input-group {
margin-bottom: 20px;
position: relative;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #8a8a9a;
font-size: 18px;
}
input {
width: 100%;
padding: 15px 15px 15px 45px;
background: #3a3949;
border: none;
border-radius: 8px;
color: #fff;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
}
input:focus {
background: #424153;
box-shadow: 0 0 0 2px rgba(106, 103, 206, 0.5);
}
input::placeholder {
color: #8a8a9a;
}
.remember-forgot {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
font-size: 14px;
}
.remember {
display: flex;
align-items: center;
color: #8a8a9a;
}
.remember input {
width: auto;
margin-right: 8px;
}
.forgot {
color: #6a67ce;
text-decoration: none;
transition: color 0.3s ease;
}
.forgot:hover {
color: #fc5c7d;
text-decoration: underline;
}
.btn {
width: 100%;
padding: 15px;
background: linear-gradient(to right, #6a67ce, #fc5c7d);
border: none;
border-radius: 8px;
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background: linear-gradient(to right, #5a57b8, #e44c6d);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(252, 92, 125, 0.3);
}
.social-login {
margin-top: 25px;
text-align: center;
}
.social-text {
color: #8a8a9a;
margin-bottom: 15px;
position: relative;
}
.social-text::before, .social-text::after {
content: '';
position: absolute;
top: 50%;
width: 30%;
height: 1px;
background: #444353;
}
.social-text::before {
left: 0;
}
.social-text::after {
right: 0;
}
.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icon {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: #3a3949;
border-radius: 50%;
color: #fff;
font-size: 20px;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.facebook:hover {
background: #3b5998;
}
.twitter:hover {
background: #1da1f2;
}
.google:hover {
background: #dd4b39;
}
.signup-link {
margin-top: 25px;
text-align: center;
color: #8a8a9a;
font-size: 14px;
}
.signup-link a {
color: #6a67ce;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #fc5c7d;
text-decoration: underline;
}
@media (max-width: 480px) {
.container {
border-radius: 12px;
}
.form-container {
padding: 25px 20px;
}
h2 {
font-size: 24px;
}
input {
padding: 12px 12px 12px 40px;
}
.remember-forgot {
flex-direction: column;
gap: 10px;
}
.social-icons {
gap: 10px;
}
.social-icon {
width: 45px;
height: 45px;
font-size: 18px;
}
}
document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('login-form');
const signupForm = document.getElementById('signup-form');
const loginTab = document.querySelector('[data-tab="login"]');
const signupTab = document.querySelector('[data-tab="signup"]');
const goToSignup = document.getElementById('go-to-signup');
const goToLogin = document.getElementById('go-to-login');
function activateTab(tabName) {
// Deactivate all tabs
loginTab.classList.remove('active');
signupTab.classList.remove('active');
loginForm.classList.remove('active');
signupForm.classList.remove('active');
// Activate the selected tab
if (tabName === 'login') {
loginTab.classList.add('active');
loginForm.classList.add('active');
} else {
signupTab.classList.add('active');
signupForm.classList.add('active');
}
}
// Tab click events
loginTab.addEventListener('click', () => activateTab('login'));
signupTab.addEventListener('click', () => activateTab('signup'));
// Form switch links
goToSignup.addEventListener('click', (e) => {
e.preventDefault();
activateTab('signup');
});
goToLogin.addEventListener('click', (e) => {
e.preventDefault();
activateTab('login');
});
// Form submission
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
alert('Login functionality would be implemented here.');
});
signupForm.addEventListener('submit', (e) => {
e.preventDefault();
alert('Sign up functionality would be implemented here.');
});
});
إرسال تعليق
Thank you
Learning robo team