usernameInput.addEventListener('input', toggleButtonGlow); passwordInput.addEventListener('input', toggleButtonGlow); )(); </script> </body> </html>
<div class="form-group"> <label>Password</label> <input type="password" class="input-field" id="password" placeholder="••••••••" autocomplete="current-password"> </div>
.demo-cred span font-family: monospace; background: #0b0f1c; padding: 2px 6px; border-radius: 20px; margin: 0 2px; color: #bbcfff;
.input-field:focus border-color: #5f7ef2; box-shadow: 0 0 0 3px rgba(95, 126, 242, 0.2); background: rgba(18, 22, 42, 0.95); Crackday.in Login
// simple demo credential check function validateCredentials(username, password)
.login-btn:hover transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(76, 110, 245, 0.5); background: linear-gradient(95deg, #5c7cff, #8b4eff);
.extra-options display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 1.8rem; font-size: 0.8rem; usernameInput
// small UX: if both fields are filled, enable subtle glow on button (optional) function toggleButtonGlow() if (usernameInput.value.trim() !== "" && passwordInput.value !== "") loginBtn.style.boxShadow = "0 0 8px #7c3aed80"; else loginBtn.style.boxShadow = "0 5px 12px rgba(76, 110, 245, 0.25)";
.form-group margin-bottom: 1.4rem;
<div class="extra-options"> <label class="checkbox"> <input type="checkbox" id="rememberCheck"> Remember me </label> <a href="#" class="forgot-link" id="forgotBtn">Forgot password?</a> </div> .demo-cred span font-family: monospace
.demo-cred margin-top: 1.4rem; background: rgba(44, 52, 84, 0.4); border-radius: 1rem; padding: 0.6rem 1rem; font-size: 0.7rem; text-align: center; color: #8892b0; border: 1px dashed #2f3a5c;
hr border-color: #2a2f45; margin: 0.5rem 0;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Crackday.in · Login</title> <style> * margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, 'Segoe UI', 'Inter', 'Poppins', sans-serif; body min-height: 100vh; background: linear-gradient(145deg, #0b0f1c 0%, #0a0e1a 100%); display: flex; align-items: center; justify-content: center; padding: 1.5rem; position: relative;
// demo prefill if localStorage has remember const storedRemember = localStorage.getItem('crackday_remember'); if (storedRemember === 'true') const savedUser = localStorage.getItem('crackday_user'); if (savedUser) usernameInput.value = savedUser; rememberCheck.checked = true;
.orb-1 width: 50vw; height: 50vw; background: #2a2f6e; top: -20vh; left: -20vw;