WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modello HTML della pagina di accesso di Nexus AI
103
codex
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
5 April 2025
un sito web di piattaforma
16 May 2025
Un codice di Maxi-Digital
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) */