WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modèle HTML de page de connexion Nexus AI
96
codex
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
18 December 2025
Arène du Roi des Voitures
21 October 2024
Effets du menu déroulant
2 September 2024
Bulles de coeur
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) */