WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modelo HTML da página de login do Nexus AI
104
codex
Abrir no Editor
Publique Seu Código
Recomendado
12 July 2025
Aplicativo TheDoc Notes
2 November 2025
Botão animado em CSS com efeito de ondulação
29 September 2024
efeito de revelação
HTML
Copy
Nexus AI - Secure Login
Nexus AI
Welcome back to the future
Email address
Password
Remember me
Forgot password?
Sign In
or continue with
Google
GitHub
Don't have an account?
Request access
CSS
Copy
:root { --bg-color: #050507; --card-bg: rgba(20, 20, 25, 0.6); --primary: #6366f1; --primary-glow: #818cf8; --accent: #d946ef; --text-primary: #f8fafc; --text-secondary: #94a3b8; --border: rgba(255, 255, 255, 0.08); --input-bg: rgba(255, 255, 255, 0.03); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, sans-serif; } body { background-color: var(--bg-color); color: var(--text-primary); min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } /* Background Effects */ .background-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(circle at center, black 40%, transparent 100%); pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: float 20s infinite ease-in-out; } .blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: var(--primary); animation-delay: 0s; } .blob-2 { bottom: -10%; right: -10%; width: 400px; height: 400px; background: var(--accent); animation-delay: -10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.95); } } /* Login Container */ .login-container { position: relative; z-index: 10; width: 100%; max-width: 420px; padding: 2.5rem; margin: 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); animation: slideUp 0.6s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Typography & Brand */ .brand-section { text-align: center; margin-bottom: 2.5rem; } .logo-icon { width: 48px; height: 48px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); } h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(to right, white, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { color: var(--text-secondary); font-size: 0.95rem; } /* Form Elements */ .input-group { margin-bottom: 1.5rem; } .input-group label { display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem; font-weight: 500; } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); transition: var(--transition); } input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-primary); padding: 0.75rem 1rem 0.75rem 2.75rem; border-radius: 12px; font-size: 0.95rem; transition: var(--transition); } input:focus { outline: none; border-color: var(--primary); background: rgba(99, 102, 241, 0.05); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); } input:focus+.input-icon, .input-wrapper:focus-within .input-icon { color: var(--primary-glow); } /* Actions */ .form-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; font-size: 0.875rem; } .checkbox-container { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); cursor: pointer; user-select: none; } .checkbox-container input { display: none; } .checkmark { width: 18px; height: 18px; border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg); position: relative; transition: var(--transition); } .checkbox-container input:checked~.checkmark { background: var(--primary); border-color: var(--primary); } .checkbox-container input:checked~.checkmark::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .forgot-password { color: var(--primary-glow); text-decoration: none; transition: var(--transition); } .forgot-password:hover { color: var(--accent); text-decoration: underline; } /* Buttons */ .submit-btn { width: 100%; padding: 0.875rem; background: linear-gradient(135deg, var(--primary), #4f46e5); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: var(--transition); position: relative; overflow: hidden; } .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4); } .submit-btn:active { transform: translateY(0); } /* Divider & Social */ .divider { display: flex; align-items: center; text-align: center; margin: 2rem 0; color: var(--text-secondary); font-size: 0.875rem; } .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); } .divider span { padding: 0 1rem; } .social-login { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .social-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem; background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: var(--transition); } .social-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--text-secondary); } .signup-link { text-align: center; margin-top: 2rem; font-size: 0.9rem; color: var(--text-secondary); } .signup-link a { color: var(--primary-glow); text-decoration: none; font-weight: 500; } .signup-link a:hover { text-decoration: underline; } /* Responsiveness */ @media (max-width: 480px) { .login-container { padding: 2rem 1.5rem; margin: 0; border: none; height: 100vh; border-radius: 0; display: flex; flex-direction: column; justify-content: center; } .blob { opacity: 0.6; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */