WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML-Vorlage für die Nexus AI-Anmeldeseite
102
codex
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
17 July 2025
Couture Atelier Dashboard HTML-Vorlage
5 September 2025
Code-Snippet für HTML-Anmeldeformular
3 July 2025
Die Syntax-Symphonie
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) */