This retro Gumroad-style login form combines both functionality and aesthetics, offering users a smooth and engaging experience. It features a Gumroad-inspired color scheme with vibrant purple and teal accents, paired with a retro design that includes bold borders, chunky buttons, and terminal-style elements. A built-in dark/light mode toggle ensures seamless theme transitions, while the password visibility toggle adds convenience. The form also supports social logins via Google and GitHub, alongside traditional options like "Remember me" and a "Forgot password" link. New users can easily sign up through a dedicated link, and real-time form validation provides clear error messages when needed. Designed to be fully responsive, the form works flawlessly on both mobile and desktop devices, and the login button includes an animated effect during authentication to enhance the user experience.
:root {
--primary: #7E5BEF; /* Gumroad purple */
--primary-dark: #6A48D6;
--secondary: #00C39A; /* Gumroad teal */
--accent: #FF6B6B;
--light: #F7F7F7;
--dark: #2D2D2D;
--text: #333333;
--bg: #FFFFFF;
--card-bg: #FFFFFF;
--border: #E0E0E0;
--shadow: rgba(126, 91, 239, 0.2);
--retro-border: 2px solid #000;
--retro-shadow: 4px 4px 0px #000;
--gumroad-gradient: linear-gradient(135deg, #7E5BEF 0%, #00C39A 100%);
}
.dark-mode {
--primary: #9378FF;
--primary-dark: #7E5BEF;
--secondary: #00D4A7;
--accent: #FF8585;
--light: #1A1A1A;
--dark: #F0F0F0;
--text: #E0E0E0;
--bg: #121212;
--card-bg: #1E1E1E;
--border: #444444;
--shadow: rgba(147, 120, 255, 0.3);
--retro-border: 2px solid #9378FF;
--retro-shadow: 4px 4px 0px #9378FF;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
transition: background-color 0.3s, color 0.3s, border 0.3s;
}
body {
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
background-image:
radial-gradient(circle at 10% 20%, rgba(126, 91, 239, 0.05) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(0, 195, 154, 0.05) 0%, transparent 20%);
}
.container {
max-width: 420px;
width: 100%;
background-color: var(--card-bg);
border: var(--retro-border);
box-shadow: var(--retro-shadow);
padding: 40px 30px;
border-radius: 0;
position: relative;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--gumroad-gradient);
}
header {
text-align: center;
margin-bottom: 30px;
position: relative;
}
.logo {
font-size: 32px;
font-weight: 800;
margin-bottom: 10px;
background: var(--gumroad-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -1px;
}
.tagline {
color: var(--primary);
font-size: 14px;
margin-bottom: 25px;
font-weight: 600;
letter-spacing: 1px;
}
.theme-toggle {
position: absolute;
top: 0;
right: 0;
background: transparent;
color: var(--primary);
border: var(--retro-border);
padding: 6px 12px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
.theme-toggle:hover {
background: var(--primary);
color: white;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: var(--primary);
}
input {
width: 100%;
padding: 14px 15px;
border: var(--retro-border);
background-color: var(--card-bg);
color: var(--text);
font-size: 16px;
transition: all 0.3s;
}
input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--shadow);
}
.password-toggle {
position: absolute;
right: 15px;
top: 40px;
background: none;
border: none;
color: var(--primary);
cursor: pointer;
font-size: 16px;
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
font-size: 14px;
}
.remember {
display: flex;
align-items: center;
gap: 8px;
}
.remember input {
width: auto;
}
.forgot-password {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.forgot-password:hover {
text-decoration: underline;
}
.btn-login {
width: 100%;
padding: 14px;
border: var(--retro-border);
background-color: var(--primary);
color: white;
cursor: pointer;
font-weight: bold;
font-size: 16px;
box-shadow: 3px 3px 0px #000;
margin-bottom: 25px;
transition: all 0.2s;
}
.btn-login:hover {
background-color: var(--primary-dark);
transform: translate(2px, 2px);
box-shadow: 1px 1px 0px #000;
}
.divider {
text-align: center;
position: relative;
margin: 25px 0;
color: var(--text);
font-size: 14px;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 45%;
height: 1px;
background-color: var(--border);
}
.divider::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 45%;
height: 1px;
background-color: var(--border);
}
.social-login {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
}
.social-btn {
width: 45px;
height: 45px;
border: var(--retro-border);
background-color: var(--card-bg);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.2s;
}
.social-btn:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px #000;
}
.google-btn {
color: #DB4437;
}
.github-btn {
color: #333;
}
.dark-mode .github-btn {
color: #f0f0f0;
}
.signup-link {
text-align: center;
font-size: 14px;
margin-top: 20px;
}
.signup-link a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.signup-link a:hover {
text-decoration: underline;
}
.error {
color: var(--accent);
font-size: 12px;
margin-top: 5px;
display: none;
}
@media (max-width: 480px) {
.container {
padding: 30px 20px;
}
.options {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
}
/* Retro terminal effect */
.terminal-line {
position: absolute;
bottom: 10px;
left: 30px;
font-size: 10px;
color: var(--primary);
opacity: 0.7;
}
// DOM Elements
const themeToggle = document.getElementById('themeToggle');
const passwordToggle = document.getElementById('passwordToggle');
const passwordInput = document.getElementById('password');
const loginForm = document.getElementById('loginForm');
// Theme Toggle
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
themeToggle.innerHTML = '';
} else {
themeToggle.innerHTML = '';
}
});
// Password Visibility Toggle
passwordToggle.addEventListener('click', () => {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
passwordToggle.innerHTML = '';
} else {
passwordInput.type = 'password';
passwordToggle.innerHTML = '';
}
});
// Form Validation and Submission
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
let isValid = true;
// Email validation
if (!validateEmail(email)) {
document.getElementById('emailError').style.display = 'block';
isValid = false;
} else {
document.getElementById('emailError').style.display = 'none';
}
// Password validation
if (password.length < 8) {
document.getElementById('passwordError').style.display = 'block';
isValid = false;
} else {
document.getElementById('passwordError').style.display = 'none';
}
if (isValid) {
// Simulate login process
const loginBtn = document.querySelector('.btn-login');
loginBtn.innerHTML = ' AUTHENTICATING...';
loginBtn.disabled = true;
setTimeout(() => {
alert('Login successful! Welcome back.');
loginBtn.innerHTML = 'LOGIN';
loginBtn.disabled = false;
// In a real application, you would redirect or update UI here
}, 1500);
}
});
// Social login buttons
document.querySelector('.google-btn').addEventListener('click', () => {
alert('Google login would be implemented here');
});
document.querySelector('.github-btn').addEventListener('click', () => {
alert('GitHub login would be implemented here');
});
// Helper functions
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}
Post a Comment
Thank you
Learning robo team