Creating an engaging and functional login form is crucial for any website. CSS offers a myriad of ways to design these forms, ensuring they are both visually appealing and user-friendly.
In this article, we will explore 10 CSS login form examples that showcase different styles and functionalities. These examples will inspire you to craft your own unique login forms with ease.
CODE1
Here's the code:
CODETEXT1
The NexusCorp Enterprise Login form is a sleek, professional design tailored for corporate environments. It features a clean layout with a subtle background pattern and floating shapes that add a modern touch without overwhelming the user.
One standout feature is the password visibility toggle, which enhances usability by allowing users to easily switch between masked and visible password input. Additionally, the form is fully responsive, ensuring a seamless experience across devices, from desktops to mobile phones.
Accessibility is also a priority in this design. The form includes focus-visible styles for keyboard navigation and visually hidden text for screen readers, making it inclusive for all users. The use of CSS variables allows for easy customization of colors and styles, enabling you to adapt the form to match your brand's identity effortlessly.
CODE2
Here's the code:
CODETEXT2
The FinShield Neon Login form is a visually striking design that combines modern aesthetics with robust security features. The neon color scheme and animated background grid create a futuristic look, while the responsive layout ensures a seamless experience across all devices.
One practical tip is the use of CSS variables for easy customization. This allows you to quickly adjust colors and styles to match your brand. Additionally, the form includes a password strength meter and real-time validation, enhancing both security and user experience.
CODE3
Here's the code:
CODETEXT3
The Minimal Login Form is a clean, modern design that emphasizes simplicity and user experience. It features a floating label effect for input fields, which enhances usability by clearly indicating the field's purpose even after the user starts typing.
One practical tip is the use of CSS variables for easy customization. This allows you to quickly adjust colors and styles to match your brand. Additionally, the form includes a password visibility toggle and real-time validation, improving both security and user experience.
CODE4
Here's the code:
CODETEXT4
The ConnectSphere Login Form is a visually dynamic design that combines modern aesthetics with practical functionality. The animated bubbles and connection lines create an engaging visual experience, while the responsive layout ensures it looks great on any device.
One practical tip is the use of CSS variables for easy customization. This allows you to quickly adjust colors and styles to match your brand. Additionally, the form includes a password strength meter and a toggle for password visibility, enhancing both security and user experience.
CODE5
Here's the code:
CODETEXT5
The NeonRealm Login form is a vibrant, futuristic design perfect for gaming communities. It features a dynamic grid background and floating particles that create an immersive experience. The form is fully responsive, ensuring it looks great on any device.
One practical tip is the use of CSS variables for easy customization. This allows you to quickly adjust colors and styles to match your brand. Additionally, the form includes a cursor trail effect and animated counters, adding a unique touch to the user experience.
Designers and developers, elevate your CSS login forms with Subframe's drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect UIs effortlessly, loved by professionals across the industry.
Start for free and experience the ease of crafting stunning designs today!
CODE6
Here's the code:
CODETEXT6
The HealthCare Portal Login form is a comprehensive design that balances aesthetics and functionality. It features a soothing color palette and animated background elements, creating a welcoming atmosphere for users.
One practical tip is the use of CSS variables, which makes it easy to customize the form's colors and styles to match your brand. Additionally, the form includes a password visibility toggle and real-time validation, enhancing both security and user experience.
Accessibility is also a key focus, with features like visually hidden text for screen readers and focus-visible styles for keyboard navigation. This ensures that the form is inclusive and user-friendly for all visitors.
CODE7
Here's the code:
CODETEXT7
The LearnSphere Login form is a visually engaging design that combines a modern aesthetic with practical functionality. The animated background particles and gradient overlays create a dynamic visual experience, while the responsive layout ensures it looks great on any device.
One practical tip is the use of CSS variables for easy customization. This allows you to quickly adjust colors and styles to match your brand. Additionally, the form includes a password visibility toggle and real-time validation, enhancing both security and user experience.
CODE8
Here's the code:
CODETEXT8
The Seller Hub Login form is a visually appealing and highly functional design tailored for e-commerce platforms. It features a dual-pane layout with a login form on one side and a promotional visual on the other, creating a balanced and engaging user experience.
One practical tip is the use of CSS variables for easy customization. This allows you to quickly adjust colors and styles to match your brand. Additionally, the form includes a password visibility toggle and real-time validation, enhancing both security and user experience.
Responsiveness is a key feature, with the visual pane hiding on smaller screens to ensure a seamless experience across devices. The form also includes social login options, making it convenient for users to sign in with their preferred social media accounts.
CODE9
Here's the code:
CODETEXT9
The EarthTalk Login Form is a visually appealing design that combines a welcoming aesthetic with practical functionality. The dual-pane layout features a vibrant welcome side with community stats and testimonials, creating an engaging first impression.
One practical tip is the use of CSS variables for easy customization. This allows you to quickly adjust colors and styles to match your brand. Additionally, the form includes a feedback indicator that visually tracks form completion, enhancing user experience.
CODE10
Here's the code:
CODETEXT10
The CloudFlow Enterprise Login form is a sophisticated design tailored for SaaS platforms. It features a dual-pane layout with a visually engaging background and a clean, modern login form. The animated particles and background elements add a dynamic touch, making the form visually appealing without compromising functionality.
One practical tip is the use of CSS variables for easy customization. This allows you to quickly adjust colors and styles to match your brand. Additionally, the form includes a password visibility toggle and real-time validation, enhancing both security and user experience.
Responsiveness is a key feature, with the layout adapting seamlessly to different screen sizes. The form also includes social login options, making it convenient for users to sign in with their preferred social media accounts. The secure login encryption ensures that user data is protected, providing peace of mind for both users and administrators.
Ready to elevate your CSS login forms? With Subframe, you can design pixel-perfect UIs in minutes using our drag-and-drop visual editor and beautifully crafted components.
Experience the efficiency and ease of creating stunning designs immediately. Start for free and bring your vision to life today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexusCorp Enterprise Login</title> <style> :root { --primary-blue: #2c4b7c; --secondary-blue: #3a5e8c; --accent-blue: #1e3a5f; --light-blue: #e6eef7; --gray: #545b67; --light-gray: #e4e6e9; --mid-gray: #a0a5ad; --white: #ffffff; --shadow: rgba(44, 75, 124, 0.15); --error: #d64045; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { height: 100vh; background-color: var(--light-gray); display: flex; align-items: center; justify-content: center; color: var(--gray); overflow: hidden; position: relative; } .background-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.4; z-index: -1; background: linear-gradient(135deg, var(--light-blue) 25%, transparent 25%) -20px 0, linear-gradient(225deg, var(--light-blue) 25%, transparent 25%) -20px 0, linear-gradient(315deg, var(--light-blue) 25%, transparent 25%), linear-gradient(45deg, var(--light-blue) 25%, transparent 25%); background-size: 40px 40px; background-color: var(--light-gray); } .login-container { width: 420px; padding: 40px; background-color: var(--white); border-radius: 10px; box-shadow: 0 10px 25px var(--shadow); position: relative; overflow: hidden; transform: translateY(0); transition: transform 0.5s ease, box-shadow 0.5s ease; } .login-container:hover { box-shadow: 0 14px 30px var(--shadow); transform: translateY(-5px); } .login-header { margin-bottom: 30px; text-align: center; } .login-title { font-size: 24px; font-weight: 600; color: var(--primary-blue); margin-bottom: 8px; } .login-subtitle { font-size: 14px; color: var(--mid-gray); max-width: 320px; margin: 0 auto; line-height: 1.5; } .form-group { margin-bottom: 24px; position: relative; } .form-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--gray); transition: color 0.3s ease; } .form-control { width: 100%; padding: 14px 16px; font-size: 15px; color: var(--gray); background-color: var(--light-gray); border: 2px solid transparent; border-radius: 6px; transition: all 0.3s ease; outline: none; } .form-control:focus { border-color: var(--primary-blue); background-color: var(--white); box-shadow: 0 0 0 4px rgba(44, 75, 124, 0.1); } .form-control.error { border-color: var(--error); } .error-message { display: none; color: var(--error); font-size: 12px; margin-top: 6px; font-weight: 500; } .password-toggle { position: absolute; right: 16px; top: 42px; color: var(--mid-gray); background: none; border: none; cursor: pointer; font-size: 14px; display: flex; align-items: center; } .password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; } .remember-forgot { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 14px; } .checkbox-container { display: flex; align-items: center; } .custom-checkbox { position: relative; display: inline-block; width: 18px; height: 18px; margin-right: 8px; border: 2px solid var(--mid-gray); border-radius: 4px; transition: all 0.2s ease; cursor: pointer; } .custom-checkbox::after { content: ''; position: absolute; display: none; left: 5px; top: 2px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="checkbox"] { display: none; } input[type="checkbox"]:checked + .custom-checkbox { background-color: var(--primary-blue); border-color: var(--primary-blue); } input[type="checkbox"]:checked + .custom-checkbox::after { display: block; } .remember-text { user-select: none; cursor: pointer; } .forgot-password { color: var(--primary-blue); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .forgot-password:hover { color: var(--accent-blue); text-decoration: underline; } .login-button { width: 100%; padding: 14px; background-color: var(--primary-blue); color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; } .login-button::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--accent-blue); transition: width 0.3s ease; z-index: -1; } .login-button:hover::before { width: 100%; } .login-button:active { transform: scale(0.98); } .login-button.loading { color: transparent; } .login-button.loading::after { content: ''; position: absolute; width: 20px; height: 20px; top: calc(50% - 10px); left: calc(50% - 10px); border: 2px solid transparent; border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .divider { display: flex; align-items: center; margin: 24px 0; color: var(--mid-gray); font-size: 14px; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background-color: var(--light-gray); } .divider::before { margin-right: 10px; } .divider::after { margin-left: 10px; } .sso-options { display: flex; justify-content: center; gap: 16px; } .sso-button { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background-color: var(--light-gray); border: none; cursor: pointer; transition: all 0.2s ease; } .sso-button:hover { background-color: var(--light-blue); transform: translateY(-2px); } .sso-button svg { width: 20px; height: 20px; fill: var(--gray); } .footer-text { text-align: center; margin-top: 24px; font-size: 14px; color: var(--mid-gray); } .footer-link { color: var(--primary-blue); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .footer-link:hover { color: var(--accent-blue); text-decoration: underline; } .brand-decoration { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue), var(--accent-blue)); transform-origin: left; } .pulse-animation { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @media (max-width: 480px) { .login-container { width: 100%; max-width: 340px; padding: 30px 20px; margin: 0 20px; } .login-title { font-size: 22px; } .form-control { padding: 12px 14px; } } /* Floaty shapes animation */ .shape { position: absolute; z-index: -2; opacity: 0.1; filter: blur(2px); } .shape-1 { width: 120px; height: 120px; background: var(--primary-blue); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; top: 10%; left: 15%; animation: float1 12s ease-in-out infinite; } .shape-2 { width: 80px; height: 80px; background: var(--secondary-blue); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; bottom: 10%; right: 15%; animation: float2 10s ease-in-out infinite; } .shape-3 { width: 60px; height: 60px; background: var(--accent-blue); border-radius: 59% 41% 31% 69% / 59% 31% 69% 41%; top: 60%; left: 10%; animation: float3 12s ease-in-out infinite; } @keyframes float1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-15px, 15px) rotate(5deg); } 50% { transform: translate(10px, 30px) rotate(-5deg); } 75% { transform: translate(15px, 5px) rotate(3deg); } } @keyframes float2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(15px, -15px) rotate(-5deg); } 50% { transform: translate(-10px, -20px) rotate(10deg); } 75% { transform: translate(-15px, 10px) rotate(-3deg); } } @keyframes float3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(10px, 10px) rotate(-8deg); } 50% { transform: translate(20px, -15px) rotate(8deg); } 75% { transform: translate(-5px, -10px) rotate(-3deg); } } /* Accessibility Focus Styles */ button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--primary-blue); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } </style> </head> <body> <div class="background-pattern"></div> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> <main class="login-container"> <div class="brand-decoration"></div> <div class="login-header"> <h1 class="login-title">Welcome to NexusCorp</h1> <p class="login-subtitle">Access your secure enterprise portal to manage global operations and resources</p> </div> <form id="loginForm" novalidate> <div class="form-group"> <label for="email" class="form-label">Corporate Email</label> <input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" autocomplete="username" required> <div class="error-message" id="emailError">Please enter a valid corporate email address</div> </div> <div class="form-group"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" autocomplete="current-password" required> <button type="button" class="password-toggle" id="passwordToggle" aria-label="Toggle password visibility"> <svg viewBox="0 0 24 24" class="eye-icon"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </button> <div class="error-message" id="passwordError">Password must be at least 8 characters</div> </div> <div class="remember-forgot"> <div class="checkbox-container"> <input type="checkbox" id="remember" name="remember"> <span class="custom-checkbox"></span> <label for="remember" class="remember-text">Remember this device</label> </div> <a href="#" class="forgot-password">Forgot password?</a> </div> <button type="submit" class="login-button" id="loginButton"> Sign In Securely </button> </form> <div class="divider">or sign in with</div> <div class="sso-options"> <button class="sso-button" aria-label="Sign in with Microsoft"> <svg viewBox="0 0 24 24"> <path d="M11.5 2v9.5H2V2h9.5zm10.03 0v9.5h-9.5V2h9.5zm-10.03 10.5v9.5H2v-9.5h9.5zm10.03 0v9.5h-9.5v-9.5h9.5z"/> </svg> </button> <button class="sso-button" aria-label="Sign in with Google"> <svg viewBox="0 0 24 24"> <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/> </svg> </button> <button class="sso-button" aria-label="Sign in with Apple"> <svg viewBox="0 0 24 24"> <path d="M15.5 3H15c.6 2.2-1 4.1-3 5.2.4.6.6 1.2.8 1.8.9-.1 1.7-.5 2.4-1.2s1.1-1.5 1.4-2.5c.3-1 .3-2.3-.1-3.3zm-5 0c-2.2 0-4 1.3-4.8 2.5-.8 1.3-1.7 3.1-.7 5.5.5 1.2 1.1 2.3 1.9 3.3.8 1 1.6 2 2.7 2.7.6-1.3 1.1-3.5 1-4.5-.1-1.6-.3-1.9-2-3.1-.8-.6-1-1.2-1-1.8 0-.9.5-1.6 1.3-2 .8-.4 1.6-.1 2.2.3 0 0 .3-1.1.4-1.2.1-.1.1-.1.1-.2-1.3-1.1-1-1.5-1.1-1.5z"/> </svg> </button> </div> <p class="footer-text"> New to NexusCorp? <a href="#" class="footer-link">Request corporate access</a> </p> </main> <script> document.addEventListener('DOMContentLoaded', function() { const loginForm = document.getElementById('loginForm'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const emailError = document.getElementById('emailError'); const passwordError = document.getElementById('passwordError'); const passwordToggle = document.getElementById('passwordToggle'); const loginButton = document.getElementById('loginButton'); // Password visibility toggle passwordToggle.addEventListener('click', function() { const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; passwordInput.setAttribute('type', type); // Update the icon if (type === 'text') { passwordToggle.innerHTML = ` <svg viewBox="0 0 24 24" class="eye-icon"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> <line x1="1" y1="1" x2="23" y2="23"></line> </svg> `; passwordToggle.setAttribute('aria-label', 'Hide password'); } else { passwordToggle.innerHTML = ` <svg viewBox="0 0 24 24" class="eye-icon"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> `; passwordToggle.setAttribute('aria-label', 'Show password'); } }); // Validate email when the field loses focus emailInput.addEventListener('blur', function() { validateEmail(); }); // Validate password when the field loses focus passwordInput.addEventListener('blur', function() { validatePassword(); }); // Real-time validation as the user types emailInput.addEventListener('input', function() { if (emailInput.classList.contains('error')) { validateEmail(); } }); passwordInput.addEventListener('input', function() { if (passwordInput.classList.contains('error')) { validatePassword(); } }); // Form submission handler loginForm.addEventListener('submit', function(e) { e.preventDefault(); const isEmailValid = validateEmail(); const isPasswordValid = validatePassword(); if (isEmailValid && isPasswordValid) { // Simulate login simulateLogin(); } }); function validateEmail() { const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const corporatePattern = /@nexuscorp\.com$/i; const value = emailInput.value.trim(); if (value === '') { showError(emailInput, emailError, 'Corporate email is required'); return false; } else if (!emailPattern.test(value)) { showError(emailInput, emailError, 'Please enter a valid email address'); return false; } else if (!corporatePattern.test(value)) { showError(emailInput, emailError, 'Please use your NexusCorp email address'); return false; } else { hideError(emailInput, emailError); return true; } } function validatePassword() { const value = passwordInput.value; if (value === '') { showError(passwordInput, passwordError, 'Password is required'); return false; } else if (value.length < 8) { showError(passwordInput, passwordError, 'Password must be at least 8 characters'); return false; } else { hideError(passwordInput, passwordError); return true; } } function showError(input, errorElement, message) { input.classList.add('error'); errorElement.textContent = message; errorElement.style.display = 'block'; } function hideError(input, errorElement) { input.classList.remove('error'); errorElement.style.display = 'none'; } function simulateLogin() { // Show loading state loginButton.classList.add('loading'); loginButton.disabled = true; // Simulate API call setTimeout(function() { loginButton.classList.remove('loading'); loginButton.disabled = false; // Flash effect for brand decoration to indicate successful login const brandDecoration = document.querySelector('.brand-decoration'); brandDecoration.classList.add('pulse-animation'); // Display success state loginButton.textContent = 'Success! Redirecting...'; loginButton.style.backgroundColor = '#2a7d50'; // Redirect would happen here in a real application setTimeout(function() { // Reset form for demo purposes loginForm.reset(); loginButton.textContent = 'Sign In Securely'; loginButton.style.backgroundColor = ''; brandDecoration.classList.remove('pulse-animation'); }, 3000); }, 1500); } // Focus effect on input fields const formControls = document.querySelectorAll('.form-control'); const formLabels = document.querySelectorAll('.form-label'); formControls.forEach(function(control, index) { control.addEventListener('focus', function() { formLabels[index].style.color = 'var(--primary-blue)'; }); control.addEventListener('blur', function() { formLabels[index].style.color = ''; }); }); // Light ripple effect on button click loginButton.addEventListener('mousedown', function(e) { const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(function() { ripple.remove(); }, 600); }); // Simulate network connectivity check function checkConnectivity() { // In a real app, you would actually test the connection return Math.random() > 0.9 ? false : true; } // Periodically check for network connectivity setInterval(function() { if (!checkConnectivity()) { // Flash the brand decoration red to indicate connectivity issues const brandDecoration = document.querySelector('.brand-decoration'); brandDecoration.style.background = 'var(--error)'; setTimeout(function() { brandDecoration.style.background = ''; }, 1000); } }, 30000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FinShield Secure Portal</title> <style> :root { --primary-dark: #0d1117; --secondary-dark: #161b22; --tertiary-dark: #1f2937; --neon-blue: #00f7ff; --neon-purple: #7b2ff7; --error-red: #ff3a5e; --success-green: #00f7a5; --text-light: #f0f6fc; --text-muted: #8b949e; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--primary-dark); color: var(--text-light); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .grid { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: linear-gradient(rgba(11, 19, 30, 0.8) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 19, 30, 0.8) 1px, transparent 1px); background-size: 30px 30px; transform: perspective(500px) rotateX(60deg); animation: grid-animation 25s linear infinite; } @keyframes grid-animation { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(30px); } } .glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(123, 47, 247, 0.2) 0%, rgba(0, 247, 255, 0.1) 40%, rgba(11, 19, 30, 0) 70%); top: -200px; right: -200px; filter: blur(50px); animation: glow-animation 10s ease-in-out infinite alternate; } .glow:nth-child(2) { bottom: -300px; left: -200px; top: auto; right: auto; width: 500px; height: 500px; background: radial-gradient(circle, rgba(0, 247, 255, 0.15) 0%, rgba(123, 47, 247, 0.05) 50%, rgba(11, 19, 30, 0) 70%); animation-delay: -5s; } @keyframes glow-animation { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.2); } } .container { width: 100%; max-width: 450px; margin: auto; padding: 2rem; } .logo-container { margin-bottom: 2.5rem; text-align: center; } .logo { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .logo-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)); position: relative; overflow: hidden; margin-right: 1rem; box-shadow: 0 0 20px rgba(123, 47, 247, 0.5); } .logo-icon::before { content: ""; position: absolute; width: 150%; height: 50%; background: rgba(255, 255, 255, 0.2); transform: rotate(45deg); top: -10%; left: -100%; animation: shine 3s infinite; } .logo-icon::after { content: ""; position: absolute; width: 60%; height: 60%; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 6px; top: 20%; left: 20%; } @keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } } .logo-text { font-weight: 800; font-size: 1.75rem; letter-spacing: -0.5px; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } .card { background-color: var(--secondary-dark); border-radius: 16px; padding: 2.5rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); opacity: 0.8; } .card-security-badge { display: flex; align-items: center; margin-bottom: 2rem; padding: 0.625rem 1rem; background-color: rgba(0, 247, 255, 0.08); border-radius: 8px; border: 1px solid rgba(0, 247, 255, 0.12); } .security-icon { margin-right: 10px; color: var(--neon-blue); } .security-text { font-size: 0.875rem; color: var(--text-light); } h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .caption { color: var(--text-muted); margin-bottom: 2rem; font-size: 0.9375rem; line-height: 1.5; } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); transition: color 0.25s ease; } input { width: 100%; background-color: var(--tertiary-dark); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.875rem 1rem 0.875rem 2.75rem; font-size: 1rem; color: var(--text-light); transition: all 0.3s ease; } input:focus { outline: none; border-color: var(--neon-blue); box-shadow: 0 0 0 3px rgba(0, 247, 255, 0.15); } input:focus + .input-icon { color: var(--neon-blue); } .status-indicator { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: 0; transition: all 0.3s ease; } .status-indicator.valid { color: var(--success-green); } .status-indicator.invalid { color: var(--error-red); } .error-message { font-size: 0.75rem; color: var(--error-red); margin-top: 0.5rem; position: absolute; left: 0; top: 100%; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; } .form-group.error input { border-color: var(--error-red); box-shadow: 0 0 0 3px rgba(255, 58, 94, 0.15); } .form-group.error .input-icon, .form-group.error label { color: var(--error-red); } .form-group.error .status-indicator.invalid, .form-group.success .status-indicator.valid { opacity: 1; } .form-group.error .error-message { opacity: 1; transform: translateY(0); } .remember-forgot { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .remember-me { display: flex; align-items: center; } .checkbox-wrapper { position: relative; margin-right: 0.5rem; } .custom-checkbox { display: inline-block; width: 18px; height: 18px; background-color: var(--tertiary-dark); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; position: relative; cursor: pointer; transition: all 0.2s ease; } .checkbox-input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkbox-input:checked ~ .custom-checkbox { background-color: var(--neon-blue); border-color: var(--neon-blue); } .custom-checkbox::after { content: ""; position: absolute; display: none; left: 6px; top: 2px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox-input:checked ~ .custom-checkbox::after { display: block; } .remember-text { font-size: 0.875rem; color: var(--text-muted); } .forgot-link { font-size: 0.875rem; color: var(--neon-blue); text-decoration: none; transition: color 0.2s ease; } .forgot-link:hover { color: var(--neon-purple); text-decoration: underline; } .button { width: 100%; background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); border: none; border-radius: 8px; padding: 1rem; font-size: 1rem; font-weight: 600; color: white; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(123, 47, 247, 0.25); } .button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(123, 47, 247, 0.3); } .button:active { transform: translateY(1px); } .button .btn-text { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } .button .spinner { display: none; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; margin-right: 0.5rem; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .button.loading .spinner { display: inline-block; } .pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 200%; height: 200%; background: rgba(255, 255, 255, 0.2); border-radius: 50%; opacity: 0; } .register-prompt { margin-top: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--text-muted); } .register-link { color: var(--neon-blue); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .register-link:hover { color: var(--neon-purple); text-decoration: underline; } .footer { margin-top: 2rem; text-align: center; } .biometric-option { display: flex; align-items: center; justify-content: center; margin-top: 1rem; padding: 0.75rem; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .biometric-option:hover { background-color: rgba(255, 255, 255, 0.05); } .biometric-icon { margin-right: 0.5rem; color: var(--neon-blue); } .trust-indicators { display: flex; justify-content: center; gap: 1.5rem; margin-top: 2rem; } .trust-badge { display: flex; align-items: center; font-size: 0.75rem; color: var(--text-muted); } .trust-badge svg { margin-right: 0.375rem; } @media (max-width: 576px) { .container { padding: 1.5rem; } .card { padding: 1.5rem; } h1 { font-size: 1.25rem; } .trust-indicators { flex-direction: column; align-items: center; gap: 0.75rem; } } /* Animation for fingerprint scanner */ .fingerprint-animation { width: 28px; height: 28px; position: relative; } .fingerprint-ring { position: absolute; border-radius: 50%; border: 2px solid var(--neon-blue); top: 0; left: 0; right: 0; bottom: 0; opacity: 0; animation: fingerprint-scan 2s infinite; } .fingerprint-ring:nth-child(2) { animation-delay: 0.4s; } .fingerprint-ring:nth-child(3) { animation-delay: 0.8s; } @keyframes fingerprint-scan { 0% { transform: scale(0.1); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } } /* Tooltip styles */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltip-text { visibility: hidden; width: 200px; background-color: var(--tertiary-dark); color: var(--text-light); text-align: center; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); } .tooltip .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--tertiary-dark) transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* Adaptive security indicator */ .security-meter { margin-top: 0.5rem; height: 4px; background-color: var(--tertiary-dark); border-radius: 2px; overflow: hidden; position: relative; } .security-meter-fill { height: 100%; width: 0; background: linear-gradient(to right, var(--error-red), var(--neon-blue)); border-radius: 2px; transition: width 0.3s ease-out; } .security-meter-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; display: flex; justify-content: space-between; } .security-level { font-weight: 500; } </style> </head> <body> <div class="background"> <div class="grid"></div> <div class="glow"></div> <div class="glow"></div> </div> <div class="container"> <div class="logo-container"> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">FinShield</div> </div> </div> <div class="card"> <div class="card-security-badge"> <svg class="security-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> </svg> <span class="security-text">Secure 256-bit encrypted connection</span> </div> <h1>Welcome back</h1> <p class="caption">Access your accounts with enhanced security protocols</p> <form id="login-form"> <div class="form-group" id="email-group"> <label for="email">Email Address</label> <div class="input-wrapper"> <input type="email" id="email" name="email" autocomplete="email" required> <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> <svg class="status-indicator valid" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> <svg class="status-indicator invalid" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="15" y1="9" x2="9" y2="15"></line> <line x1="9" y1="9" x2="15" y2="15"></line> </svg> </div> <span class="error-message">Please enter a valid email address</span> </div> <div class="form-group" id="password-group"> <label for="password">Password</label> <div class="input-wrapper"> <input type="password" id="password" name="password" autocomplete="current-password" required> <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect> <path d="M7 11V7a5 5 0 0 1 10 0v4"></path> </svg> <svg class="status-indicator valid" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> <svg class="status-indicator invalid" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="15" y1="9" x2="9" y2="15"></line> <line x1="9" y1="9" x2="15" y2="15"></line> </svg> </div> <span class="error-message">Password must be at least 8 characters</span> <div class="security-meter"> <div class="security-meter-fill" id="security-meter-fill"></div> </div> <div class="security-meter-label"> <span>Strength:</span> <span class="security-level" id="security-level">None</span> </div> </div> <div class="remember-forgot"> <div class="remember-me"> <label class="checkbox-wrapper"> <input type="checkbox" class="checkbox-input" id="remember-me"> <span class="custom-checkbox"></span> </label> <span class="remember-text">Remember device</span> </div> <a href="#" class="forgot-link">Forgot password?</a> </div> <button type="submit" class="button" id="login-button"> <span class="btn-text"> <span class="spinner"></span> <span>Sign in securely</span> </span> <span class="pulse"></span> </button> <div class="biometric-option tooltip" id="biometric-login"> <div class="fingerprint-animation"> <div class="fingerprint-ring"></div> <div class="fingerprint-ring"></div> <div class="fingerprint-ring"></div> </div> <span>Use biometric login</span> <div class="tooltip-text">Sign in with your fingerprint or face ID for enhanced security</div> </div> </form> </div> <p class="register-prompt"> Don't have an account? <a href="#" class="register-link">Apply for access</a> </p> <div class="trust-indicators"> <div class="trust-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect> <path d="M7 11V7a5 5 0 0 1 10 0v4"></path> </svg> <span>PCI DSS Compliant</span> </div> <div class="trust-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="16 12 12 8 8 12"></polyline> <line x1="12" y1="16" x2="12" y2="8"></line> </svg> <span>128-bit Encryption</span> </div> <div class="trust-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> </svg> <span>FDIC Insured</span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const loginForm = document.getElementById('login-form'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const emailGroup = document.getElementById('email-group'); const passwordGroup = document.getElementById('password-group'); const loginButton = document.getElementById('login-button'); const securityMeterFill = document.getElementById('security-meter-fill'); const securityLevel = document.getElementById('security-level'); const biometricLogin = document.getElementById('biometric-login'); // Email validation emailInput.addEventListener('blur', function() { validateEmail(); }); emailInput.addEventListener('input', function() { if (emailGroup.classList.contains('error')) { validateEmail(); } }); function validateEmail() { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(emailInput.value)) { emailGroup.classList.add('error'); emailGroup.classList.remove('success'); return false; } else { emailGroup.classList.remove('error'); emailGroup.classList.add('success'); return true; } } // Password strength meter passwordInput.addEventListener('input', function() { const password = passwordInput.value; if (password.length === 0) { securityMeterFill.style.width = '0%'; securityLevel.textContent = 'None'; securityLevel.style.color = 'var(--text-muted)'; return; } let strength = 0; // Length check if (password.length >= 8) { strength += 25; } // Contains lowercase if (/[a-z]/.test(password)) { strength += 15; } // Contains uppercase if (/[A-Z]/.test(password)) { strength += 15; } // Contains number if (/[0-9]/.test(password)) { strength += 15; } // Contains special character if (/[^A-Za-z0-9]/.test(password)) { strength += 30; } securityMeterFill.style.width = `${strength}%`; if (strength < 30) { securityLevel.textContent = 'Weak'; securityLevel.style.color = 'var(--error-red)'; } else if (strength < 70) { securityLevel.textContent = 'Medium'; securityLevel.style.color = 'orange'; } else { securityLevel.textContent = 'Strong'; securityLevel.style.color = 'var(--success-green)'; } if (passwordGroup.classList.contains('error')) { validatePassword(); } }); passwordInput.addEventListener('blur', function() { validatePassword(); }); function validatePassword() { if (passwordInput.value.length < 8) { passwordGroup.classList.add('error'); passwordGroup.classList.remove('success'); return false; } else { passwordGroup.classList.remove('error'); passwordGroup.classList.add('success'); return true; } } // Form submission loginForm.addEventListener('submit', function(e) { e.preventDefault(); const emailValid = validateEmail(); const passwordValid = validatePassword(); if (emailValid && passwordValid) { // Simulate loading state loginButton.classList.add('loading'); loginButton.disabled = true; // Create and animate pulse effect const pulse = loginButton.querySelector('.pulse'); pulse.style.animation = 'none'; setTimeout(() => { pulse.style.animation = 'pulse 0.5s ease-out'; }, 10); // Simulate API call setTimeout(() => { loginButton.classList.remove('loading'); loginButton.disabled = false; // Success notification - could redirect in a real app showToast('Successfully authenticated'); }, 2000); } }); // Simulate biometric login biometricLogin.addEventListener('click', function() { biometricLogin.style.backgroundColor = 'rgba(0, 247, 255, 0.1)'; biometricLogin.style.borderColor = 'var(--neon-blue)'; setTimeout(() => { showToast('Biometric authentication successful'); biometricLogin.style.backgroundColor = ''; biometricLogin.style.borderColor = ''; }, 2000); }); // Toast notification system function showToast(message) { const toast = document.createElement('div'); toast.className = 'toast'; toast.style.position = 'fixed'; toast.style.bottom = '20px'; toast.style.left = '50%'; toast.style.transform = 'translateX(-50%)'; toast.style.backgroundColor = 'var(--tertiary-dark)'; toast.style.color = 'var(--text-light)'; toast.style.padding = '12px 24px'; toast.style.borderRadius = '8px'; toast.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.2)'; toast.style.zIndex = '1000'; toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s, transform 0.3s'; toast.style.transform = 'translateX(-50%) translateY(20px)'; toast.style.borderLeft = '4px solid var(--neon-blue)'; toast.textContent = message; document.body.appendChild(toast); // Animate in setTimeout(() => { toast.style.opacity = '1'; toast.style.transform = 'translateX(-50%) translateY(0)'; }, 10); // Animate out setTimeout(() => { toast.style.opacity = '0'; toast.style.transform = 'translateX(-50%) translateY(-20px)'; setTimeout(() => { document.body.removeChild(toast); }, 300); }, 3000); } // Add button press effect document.querySelectorAll('.button').forEach(button => { button.addEventListener('mousedown', function() { this.style.transform = 'translateY(1px)'; }); button.addEventListener('mouseup', function() { this.style.transform = ''; }); button.addEventListener('mouseleave', function() { this.style.transform = ''; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimal | Your Daily Balance</title> <style> :root { --primary-color: #f5f5f5; --accent-color: #94c2bd; --dark-accent: #3a7c74; --text-color: #333333; --error-color: #e76f51; --success-color: #2a9d8f; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--primary-color); color: var(--text-color); min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; } .container { width: 100%; max-width: 420px; padding: 2.5rem; position: relative; } .brand { margin-bottom: 2.5rem; text-align: center; animation: fadeIn 1s ease; } .logo { position: relative; width: 60px; height: 60px; margin: 0 auto 1rem; } .circle { position: absolute; border-radius: 50%; transition: var(--transition); } .circle-1 { width: 60px; height: 60px; background: linear-gradient(135deg, var(--accent-color) 0%, var(--dark-accent) 100%); animation: pulse 6s infinite alternate; } .circle-2 { width: 40px; height: 40px; background: white; top: 10px; left: 10px; } h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.5px; } p { color: #666; font-size: 0.95rem; line-height: 1.5; margin-bottom: 2rem; } .form-group { position: relative; margin-bottom: 1.5rem; } .form-control { width: 100%; padding: 1.2rem 1rem 0.8rem; border: none; border-radius: 8px; background: white; color: var(--text-color); font-size: 1rem; transition: var(--transition); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); } .form-control:focus { outline: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } .form-label { position: absolute; top: 1rem; left: 1rem; font-size: 1rem; color: #888; pointer-events: none; transition: var(--transition); } .form-control:focus ~ .form-label, .form-control.has-value ~ .form-label { top: 0.5rem; left: 1rem; font-size: 0.7rem; color: var(--accent-color); } .btn { width: 100%; padding: 1rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .btn-primary { background-color: var(--accent-color); color: white; } .btn-primary:hover { background-color: var(--dark-accent); } .btn:focus { outline: none; } .btn .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.5s linear; } .alternative { text-align: center; margin-top: 2rem; font-size: 0.9rem; color: #888; } .alternative a { color: var(--accent-color); text-decoration: none; font-weight: 500; position: relative; margin-left: 0.5rem; } .alternative a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background-color: var(--accent-color); transition: var(--transition); } .alternative a:hover::after { width: 100%; } .background-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.4; overflow: hidden; pointer-events: none; } .dot { position: absolute; border-radius: 50%; background-color: var(--dark-accent); opacity: 0.1; } .error-message { color: var(--error-color); font-size: 0.8rem; margin-top: 0.5rem; visibility: hidden; opacity: 0; transition: var(--transition); height: 0; } .error-message.visible { visibility: visible; opacity: 1; height: auto; } .form-control.error { border: 1px solid var(--error-color); } .toggle-password { position: absolute; right: 1rem; top: 1rem; background: none; border: none; cursor: pointer; color: #888; font-size: 1rem; } .success-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--accent-color); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s; } .success-animation.active { opacity: 1; visibility: visible; } .success-checkmark { width: 80px; height: 80px; position: relative; transform: scale(0); } .success-animation.active .success-checkmark { animation: scale 0.5s ease forwards 0.3s; } .check-icon { width: 80px; height: 80px; position: relative; border-radius: 50%; box-sizing: content-box; border: 4px solid white; } .check-icon::before { content: ""; position: absolute; top: 48%; left: 28%; transform: rotate(45deg); width: 20%; height: 3px; background-color: white; } .check-icon::after { content: ""; position: absolute; top: 42%; left: 35%; transform: rotate(135deg); width: 38%; height: 3px; background-color: white; } .remember-me { display: flex; align-items: center; margin-bottom: 1.5rem; user-select: none; } .remember-me input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkbox { position: relative; height: 20px; width: 20px; background-color: white; border-radius: 4px; margin-right: 10px; cursor: pointer; transition: var(--transition); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .remember-me:hover input ~ .checkbox { background-color: #f9f9f9; } .remember-me input:checked ~ .checkbox { background-color: var(--accent-color); } .checkbox:after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .remember-me input:checked ~ .checkbox:after { display: block; } .remember-me label { font-size: 0.9rem; color: #666; cursor: pointer; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(148, 194, 189, 0.4); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(148, 194, 189, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(148, 194, 189, 0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scale { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @media (max-width: 480px) { .container { padding: 2rem 1.5rem; } } </style> </head> <body> <div class="background-pattern" id="pattern"></div> <div class="container"> <div class="brand"> <div class="logo"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> </div> <h1>minimal.</h1> <p>Welcome back. Begin your mindful journey to a more balanced lifestyle.</p> </div> <form id="login-form"> <div class="form-group"> <input type="email" class="form-control" id="email" required> <label for="email" class="form-label">Email</label> <div class="error-message" id="email-error">Please enter a valid email address</div> </div> <div class="form-group"> <input type="password" class="form-control" id="password" required> <label for="password" class="form-label">Password</label> <button type="button" class="toggle-password" id="toggle-password"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </button> <div class="error-message" id="password-error">Password must be at least 6 characters</div> </div> <div class="remember-me"> <input type="checkbox" id="remember"> <span class="checkbox"></span> <label for="remember">Remember me for 30 days</label> </div> <button type="submit" class="btn btn-primary" id="login-btn">Sign in</button> </form> <div class="alternative"> First time here?<a href="#">Create account</a> </div> </div> <div class="success-animation" id="success-animation"> <div class="success-checkmark"> <div class="check-icon"></div> </div> </div> <script> // Create background pattern const pattern = document.getElementById('pattern'); const patternCount = 20; for (let i = 0; i < patternCount; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); const size = Math.random() * 150 + 50; const posX = Math.random() * 100; const posY = Math.random() * 100; dot.style.width = `${size}px`; dot.style.height = `${size}px`; dot.style.left = `${posX}%`; dot.style.top = `${posY}%`; pattern.appendChild(dot); } // Form validation & animation const form = document.getElementById('login-form'); const email = document.getElementById('email'); const password = document.getElementById('password'); const emailError = document.getElementById('email-error'); const passwordError = document.getElementById('password-error'); const togglePassword = document.getElementById('toggle-password'); const successAnimation = document.getElementById('success-animation'); const inputFields = document.querySelectorAll('.form-control'); // Input animation inputFields.forEach(input => { input.addEventListener('focus', () => { input.parentElement.classList.add('focused'); }); input.addEventListener('blur', () => { input.parentElement.classList.remove('focused'); // Add 'has-value' class if input has a value if (input.value.trim() !== '') { input.classList.add('has-value'); } else { input.classList.remove('has-value'); } }); // Check for pre-filled values (e.g. on page refresh) if (input.value.trim() !== '') { input.classList.add('has-value'); } }); // Show/hide password togglePassword.addEventListener('click', () => { if (password.type === 'password') { password.type = 'text'; togglePassword.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path> <line x1="1" y1="1" x2="23" y2="23"></line> </svg> `; } else { password.type = 'password'; togglePassword.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> `; } }); // Form validation form.addEventListener('submit', (e) => { e.preventDefault(); let isValid = true; // Validate email if (!validateEmail(email.value)) { showError(email, emailError); isValid = false; } else { hideError(email, emailError); } // Validate password if (password.value.length < 6) { showError(password, passwordError); isValid = false; } else { hideError(password, passwordError); } // If form is valid, show success animation if (isValid) { // Add ripple effect to button on submit const btn = document.getElementById('login-btn'); const ripple = document.createElement('span'); ripple.classList.add('ripple'); btn.appendChild(ripple); const btnRect = btn.getBoundingClientRect(); const diameter = Math.max(btnRect.width, btnRect.height); ripple.style.width = ripple.style.height = `${diameter}px`; ripple.style.left = `${e.clientX - btnRect.left - diameter / 2}px`; ripple.style.top = `${e.clientY - btnRect.top - diameter / 2}px`; setTimeout(() => { // Show success animation successAnimation.classList.add('active'); // Redirect or show dashboard after animation setTimeout(() => { // Here you would redirect to dashboard or next page // window.location.href = "/dashboard"; successAnimation.classList.remove('active'); form.reset(); inputFields.forEach(input => { input.classList.remove('has-value'); }); }, 1500); }, 300); } }); // Helper functions function validateEmail(email) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); } function showError(input, errorElement) { input.classList.add('error'); errorElement.classList.add('visible'); } function hideError(input, errorElement) { input.classList.remove('error'); errorElement.classList.remove('visible'); } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ConnectSphere - Connect, Share, Thrive</title> <style> :root { --primary: #7e6af5; --secondary: #61cafc; --accent: #ff7eb3; --dark: #2a2a42; --light: #f9f9ff; --success: #42d6a4; --error: #ff5a5a; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } body { height: 100vh; display: flex; overflow: hidden; background-color: var(--light); } .login-container { display: flex; width: 100%; height: 100%; position: relative; } .visual-side { flex: 1; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } .bubble-animation { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; } .bubble { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); animation: float 8s infinite ease-in-out; } @keyframes float { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } 25% { opacity: 0.8; } 75% { opacity: 0.6; } 100% { transform: translateY(-120vh) translateX(20px) scale(0.3); opacity: 0; } } .visual-content { z-index: 1; color: white; text-align: center; padding: 0 2rem; max-width: 500px; } .visual-content h1 { font-size: 3rem; margin-bottom: 1rem; background: linear-gradient(90deg, #ffffff, #e0e0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .visual-content p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; opacity: 0.9; } .connection-lines { position: absolute; width: 100%; height: 100%; z-index: 0; } .form-side { flex: 1; display: flex; justify-content: center; align-items: center; padding: 2rem; position: relative; overflow: hidden; } .form-side::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, rgba(97, 202, 252, 0.05) 0%, rgba(255, 126, 179, 0.05) 100%); z-index: 0; } .login-form-container { width: 100%; max-width: 400px; z-index: 1; } .login-header { text-align: center; margin-bottom: 2rem; } .login-header h2 { color: var(--dark); font-size: 2rem; margin-bottom: 0.5rem; } .login-header p { color: #6b6b8e; font-size: 0.95rem; } .login-form { background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); position: relative; } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--dark); font-weight: 500; font-size: 0.9rem; transition: all 0.3s; } .form-group input { width: 100%; padding: 0.9rem 1.2rem; border: 2px solid #e1e1f0; border-radius: 12px; font-size: 1rem; color: var(--dark); background: #f7f7ff; transition: all 0.3s; } .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(126, 106, 245, 0.15); background: white; } .form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; font-size: 0.9rem; } .remember-me { display: flex; align-items: center; } .remember-me input { margin-right: 0.5rem; accent-color: var(--primary); } .forgot-password { color: var(--primary); text-decoration: none; font-weight: 500; transition: all 0.3s; } .forgot-password:hover { color: var(--accent); text-decoration: underline; } .login-btn { width: 100%; padding: 1rem; background: var(--primary); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .login-btn:hover { background: #6a56e0; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(126, 106, 245, 0.3); } .login-btn:active { transform: translateY(0); } .login-btn .btn-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .social-login { margin-top: 2rem; text-align: center; } .social-login p { color: #6b6b8e; font-size: 0.9rem; margin-bottom: 1rem; position: relative; } .social-login p::before, .social-login p::after { content: ''; position: absolute; top: 50%; width: 70px; height: 1px; background: #e1e1f0; } .social-login p::before { left: 0; } .social-login p::after { right: 0; } .social-buttons { display: flex; justify-content: center; gap: 1rem; } .social-btn { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: #f7f7ff; border: 2px solid #e1e1f0; color: var(--dark); font-size: 1.2rem; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .social-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); border-color: var(--primary); } .social-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--secondary)); opacity: 0; z-index: -1; transition: opacity 0.3s; border-radius: 10px; } .social-btn:hover::before { opacity: 0.1; } .social-btn:hover svg { transform: scale(1.2); } .social-btn svg { transition: transform 0.3s; } .signup-link { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: #6b6b8e; } .signup-link a { color: var(--primary); font-weight: 600; text-decoration: none; transition: all 0.3s; } .signup-link a:hover { color: var(--accent); text-decoration: underline; } .notification { position: fixed; top: 20px; right: 20px; max-width: 300px; padding: 15px 20px; border-radius: 12px; color: white; transform: translateX(calc(100% + 40px)); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000; display: flex; align-items: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } .notification.success { background: var(--success); } .notification.error { background: var(--error); } .notification.show { transform: translateX(0); } .notification-icon { margin-right: 10px; font-size: 1.2rem; } .input-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #c5c5d5; transition: all 0.3s; } .form-group input:focus + .input-icon { color: var(--primary); } /* Toggle Password Visibility */ .toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #c5c5d5; transition: all 0.3s; } .toggle-password:hover { color: var(--primary); } .login-form::before { content: ''; position: absolute; top: -15px; right: -15px; width: 50px; height: 50px; background: var(--accent); border-radius: 50%; opacity: 0.8; z-index: -1; } .login-form::after { content: ''; position: absolute; bottom: -20px; left: -20px; width: 70px; height: 70px; background: var(--secondary); border-radius: 50%; opacity: 0.5; z-index: -1; } @media (max-width: 900px) { .login-container { flex-direction: column; } .visual-side { max-height: 35vh; } .visual-content h1 { font-size: 2.2rem; } .visual-content p { font-size: 1rem; margin-bottom: 1rem; } .form-side { padding: 1.5rem; } .login-form { padding: 1.8rem; } } @media (max-width: 500px) { .form-options { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .social-login p::before, .social-login p::after { width: 40px; } } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .input-container { position: relative; } .input-label { position: absolute; left: 12px; top: 15px; color: #9292a9; pointer-events: none; transition: all 0.3s; font-size: 1rem; } .form-group input:focus ~ .input-label, .form-group input:not(:placeholder-shown) ~ .input-label { top: -10px; left: 10px; font-size: 0.8rem; color: var(--primary); background: white; padding: 0 5px; } .strength-meter { height: 5px; width: 100%; background: #e1e1f0; border-radius: 3px; margin-top: 5px; position: relative; overflow: hidden; display: none; } .strength-meter .progress { height: 100%; width: 0; background: var(--error); transition: width 0.3s, background 0.3s; } .strength-text { font-size: 0.75rem; margin-top: 5px; color: #9292a9; display: none; } </style> </head> <body> <div class="login-container"> <div class="visual-side"> <div class="bubble-animation" id="bubbleAnimation"></div> <svg class="connection-lines" id="connectionLines" width="100%" height="100%"></svg> <div class="visual-content"> <h1>ConnectSphere</h1> <p>Join over 2 million creators, influencers, and friends in a platform designed to bring meaningful connections to your digital life.</p> <svg width="300" height="60"> <rect width="300" height="60" rx="30" fill="none" stroke="#ffffff" stroke-width="2" /> <text x="150" y="36" fill="#ffffff" text-anchor="middle" font-size="16" font-weight="bold">DISCOVER • CONNECT • SHARE</text> </svg> </div> </div> <div class="form-side"> <div class="login-form-container"> <div class="login-header"> <h2>Welcome Back</h2> <p>Enter your credentials to access your social world</p> </div> <form class="login-form" id="loginForm"> <div class="form-group"> <div class="input-container"> <input type="text" id="username" placeholder=" " autocomplete="username"> <label class="input-label" for="username">Username or Email</label> <svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> </div> <div class="form-group"> <div class="input-container"> <input type="password" id="password" placeholder=" " autocomplete="current-password"> <label class="input-label" for="password">Password</label> <svg class="toggle-password" id="togglePassword" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </div> <div class="strength-meter" id="strengthMeter"> <div class="progress" id="strengthProgress"></div> </div> <div class="strength-text" id="strengthText"></div> </div> <div class="form-options"> <div class="remember-me"> <input type="checkbox" id="remember"> <label for="remember">Remember me</label> </div> <a href="#" class="forgot-password">Forgot Password?</a> </div> <button type="submit" class="login-btn pulse-animation" id="loginBtn"> Sign In </button> <div class="social-login"> <p>Or continue with</p> <div class="social-buttons"> <button type="button" class="social-btn" aria-label="Login with Google"> <svg width="18" height="18" viewBox="0 0 24 24" fill="#DB4437"> <path d="M21.35 11.1h-9.17v2.73h6.51c-.33 3.81-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27 3.09 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10 5.35 0 9.25-3.67 9.25-9.09 0-1.15-.15-1.81-.15-1.81z"/> </svg> </button> <button type="button" class="social-btn" aria-label="Login with Facebook"> <svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2"> <path d="M20.9 2H3.1A1.1 1.1 0 0 0 2 3.1v17.8A1.1 1.1 0 0 0 3.1 22h9.58v-7.75h-2.6v-3h2.6V9a3.64 3.64 0 0 1 3.88-4 20.26 20.26 0 0 1 2.33.12v2.7H17.3c-1.26 0-1.5.6-1.5 1.47v1.93h3l-.39 3H15.8V22h5.1a1.1 1.1 0 0 0 1.1-1.1V3.1A1.1 1.1 0 0 0 20.9 2z"/> </svg> </button> <button type="button" class="social-btn" aria-label="Login with Apple"> <svg width="18" height="18" viewBox="0 0 24 24" fill="#000000"> <path d="M16.3 2c.4 2.2-.8 4.3-2.4 5.4-1.6 1.1-3.5.8-4.7.2-1.2-.6-2.2-1.6-2.1-3.3.1-1.7 1.1-3.5 2.7-4.5s3.7-1 4.7.4c.8 1.1-.3 1.9-.6 2.1-1 .6-1.6-.5-2.7-.5-1.1 0-1.5.6-1.5 1.2 0 .6.5 1.2 1.5 1.2s2.4-1.1 3.4-.5c1 .6 1.1 2.1 1.1 3.4 0 1.3-.2 2.5-1 3.6-.8 1.1-2 1.7-3.4 1.7-1.4 0-2.8-.6-3.4-1.7-.6-1.1-.8-2.3-.8-3.6 0-1.3.1-2.7 1-3.7.9-1 2.2-1.7 3.5-1.7 1.3 0 2.5.7 3.5 1.7M13 17.8c-.7.7-1.6 1.2-2.7 1.2-1.1 0-2-.5-2.7-1.2-.7-.7-1.1-1.7-1.1-2.8s.4-2.1 1.1-2.8c.7-.7 1.6-1.2 2.7-1.2 1.1 0 2 .5 2.7 1.2.7.7 1.1 1.7 1.1 2.8s-.4 2.1-1.1 2.8z"/> </svg> </button> <button type="button" class="social-btn" aria-label="Login with Twitter"> <svg width="18" height="18" viewBox="0 0 24 24" fill="#1DA1F2"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/> </svg> </button> </div> </div> <div class="signup-link"> <p>Don't have an account? <a href="#">Sign up now</a></p> </div> </form> </div> </div> </div> <div class="notification" id="notification"> <div class="notification-icon" id="notificationIcon"></div> <div class="notification-message" id="notificationMessage"></div> </div> <script> // Create bubbles for animation function createBubbles() { const bubbleContainer = document.getElementById('bubbleAnimation'); for (let i = 0; i < 15; i++) { const bubble = document.createElement('div'); bubble.classList.add('bubble'); // Random size between 20px and 100px const size = Math.random() * 80 + 20; bubble.style.width = `${size}px`; bubble.style.height = `${size}px`; // Random position bubble.style.left = `${Math.random() * 100}%`; bubble.style.bottom = `${Math.random() * 50 - 50}px`; // Random animation delay bubble.style.animationDelay = `${Math.random() * 5}s`; // Random animation duration bubble.style.animationDuration = `${Math.random() * 3 + 6}s`; bubbleContainer.appendChild(bubble); } } // Create connection lines function createConnectionLines() { const svg = document.getElementById('connectionLines'); const width = svg.clientWidth; const height = svg.clientHeight; // Create dots const dots = []; for (let i = 0; i < 20; i++) { const dot = { x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5 }; dots.push(dot); // Create SVG circle const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', dot.x); circle.setAttribute('cy', dot.y); circle.setAttribute('r', 1.5); circle.setAttribute('fill', 'rgba(255, 255, 255, 0.5)'); svg.appendChild(circle); dot.element = circle; } // Connect dots with lines for (let i = 0; i < dots.length; i++) { for (let j = i + 1; j < dots.length; j++) { const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.setAttribute('stroke', 'rgba(255, 255, 255, 0.2)'); line.setAttribute('stroke-width', '0.5'); svg.appendChild(line); // Store line reference with connected dots indices dots[i].lines = dots[i].lines || []; dots[j].lines = dots[j].lines || []; const lineInfo = { element: line, dot1: i, dot2: j }; dots[i].lines.push(lineInfo); dots[j].lines.push(lineInfo); } } // Animation function function animate() { // Update dot positions for (let i = 0; i < dots.length; i++) { const dot = dots[i]; dot.x += dot.vx; dot.y += dot.vy; // Bounce off walls if (dot.x < 0 || dot.x > width) dot.vx = -dot.vx; if (dot.y < 0 || dot.y > height) dot.vy = -dot.vy; // Update circle position dot.element.setAttribute('cx', dot.x); dot.element.setAttribute('cy', dot.y); // Update line positions for (const lineInfo of dot.lines) { const dot1 = dots[lineInfo.dot1]; const dot2 = dots[lineInfo.dot2]; lineInfo.element.setAttribute('x1', dot1.x); lineInfo.element.setAttribute('y1', dot1.y); lineInfo.element.setAttribute('x2', dot2.x); lineInfo.element.setAttribute('y2', dot2.y); // Calculate distance between dots const dx = dot1.x - dot2.x; const dy = dot1.y - dot2.y; const distance = Math.sqrt(dx * dx + dy * dy); // Adjust line opacity based on distance const maxDistance = 150; const opacity = distance < maxDistance ? 0.2 * (1 - distance / maxDistance) : 0; lineInfo.element.setAttribute('stroke', `rgba(255, 255, 255, ${opacity})`); } } requestAnimationFrame(animate); } animate(); } // Button ripple effect function createRipple(event) { const button = event.currentTarget; const circle = document.createElement('span'); const diameter = Math.max(button.clientWidth, button.clientHeight); const radius = diameter / 2; circle.style.width = circle.style.height = `${diameter}px`; circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`; circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`; circle.classList.add('btn-ripple'); const ripple = button.getElementsByClassName('btn-ripple')[0]; if (ripple) { ripple.remove(); } button.appendChild(circle); } // Toggle password visibility function togglePasswordVisibility() { const passwordInput = document.getElementById('password'); const icon = document.getElementById('togglePassword'); if (passwordInput.type === 'password') { passwordInput.type = 'text'; icon.innerHTML = ` <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <line x1="1" y1="1" x2="23" y2="23"></line> `; } else { passwordInput.type = 'password'; icon.innerHTML = ` <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> `; } } // Password strength meter function checkPasswordStrength(password) { const strengthMeter = document.getElementById('strengthMeter'); const strengthProgress = document.getElementById('strengthProgress'); const strengthText = document.getElementById('strengthText'); if (!password) { strengthMeter.style.display = 'none'; strengthText.style.display = 'none'; return; } strengthMeter.style.display = 'block'; strengthText.style.display = 'block'; // Basic strength calculation let strength = 0; // Length contribution (up to 40%) const lengthContribution = Math.min(password.length * 4, 40); strength += lengthContribution; // Character variety contribution (up to 60%) if (/[0-9]/.test(password)) strength += 15; // Numbers if (/[a-z]/.test(password)) strength += 15; // Lowercase if (/[A-Z]/.test(password)) strength += 15; // Uppercase if (/[^A-Za-z0-9]/.test(password)) strength += 15; // Special characters // Update the progress bar strengthProgress.style.width = `${strength}%`; // Set color and text based on strength if (strength < 40) { strengthProgress.style.background = 'var(--error)'; strengthText.textContent = 'Weak password'; strengthText.style.color = 'var(--error)'; } else if (strength < 70) { strengthProgress.style.background = '#FFAA00'; strengthText.textContent = 'Moderate password'; strengthText.style.color = '#FFAA00'; } else { strengthProgress.style.background = 'var(--success)'; strengthText.textContent = 'Strong password'; strengthText.style.color = 'var(--success)'; } } // Show notification function showNotification(message, type) { const notification = document.getElementById('notification'); const notificationMessage = document.getElementById('notificationMessage'); const notificationIcon = document.getElementById('notificationIcon'); notification.classList.remove('success', 'error', 'show'); if (type === 'success') { notification.classList.add('success'); notificationIcon.innerHTML = ` <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> `; } else { notification.classList.add('error'); notificationIcon.innerHTML = ` <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> `; } notificationMessage.textContent = message; notification.classList.add('show'); // Hide notification after 5 seconds setTimeout(() => { notification.classList.remove('show'); }, 5000); } // Handle login form submission function handleLogin(event) { event.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (!username) { showNotification('Please enter your username or email', 'error'); return; } if (!password) { showNotification('Please enter your password', 'error'); return; } // Simulate login request const button = document.getElementById('loginBtn'); button.disabled = true; button.textContent = 'Signing in...'; button.classList.remove('pulse-animation'); setTimeout(() => { // For demo purposes - success if username contains 'user', error otherwise if (username.toLowerCase().includes('user')) { showNotification('Login successful! Redirecting...', 'success'); setTimeout(() => { // Redirect or show dashboard in a real application button.textContent = 'Success!'; }, 1500); } else { showNotification('Invalid username or password', 'error'); button.disabled = false; button.textContent = 'Sign In'; button.classList.add('pulse-animation'); } }, 1500); } // Initialize everything when the DOM is loaded document.addEventListener('DOMContentLoaded', function() { createBubbles(); createConnectionLines(); // Add event listeners document.getElementById('loginBtn').addEventListener('click', createRipple); document.getElementById('togglePassword').addEventListener('click', togglePasswordVisibility); document.getElementById('password').addEventListener('input', (e) => checkPasswordStrength(e.target.value)); document.getElementById('loginForm').addEventListener('submit', handleLogin); // Add ripple effect to social buttons const socialButtons = document.querySelectorAll('.social-btn'); socialButtons.forEach(button => { button.addEventListener('click', createRipple); }); // Social login handlers socialButtons.forEach(button => { button.addEventListener('click', function() { const socialName = this.getAttribute('aria-label').replace('Login with ', ''); showNotification(`${socialName} login initiated`, 'success'); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeonRealm | Gaming Community Login</title> <style> :root { --primary-neon: #00ffa3; --secondary-neon: #ff00e6; --accent-neon: #00a2ff; --bg-dark: #080611; --bg-darker: #05030a; --panel-bg: rgba(16, 11, 32, 0.75); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } @font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/rajdhani/v15/LDI2apCSOBg7S-QT7pb0EPOqeef2kg.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/orbitron/v29/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1ny_CmBoWgg.woff2) format('woff2'); font-display: swap; } body { background-color: var(--bg-dark); color: white; height: 100vh; overflow: hidden; position: relative; } /* Grid background */ .grid-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 40px 40px; background-image: linear-gradient(to right, rgba(21, 13, 43, 0.2) 1px, transparent 1px), linear-gradient(to bottom, rgba(21, 13, 43, 0.2) 1px, transparent 1px); transform: perspective(500px) rotateX(30deg); transform-origin: center 70%; animation: grid-animation 20s linear infinite; } @keyframes grid-animation { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } /* Floating particles */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .particle { position: absolute; display: block; background: transparent; border-radius: 50%; box-shadow: 0 0 10px var(--primary-neon), 0 0 20px var(--primary-neon); animation: float 15s linear infinite; } @keyframes float { 0% { transform: translateY(100vh) translateX(0vw); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-20vh) translateX(20vw); opacity: 0; } } /* Main content containers */ .container { display: flex; height: 100vh; position: relative; z-index: 1; } .sidebar { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 3rem; position: relative; } .login-container { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; } /* Logo and branding */ .logo { font-family: 'Orbitron', sans-serif; font-size: 3rem; font-weight: bold; margin-bottom: 1rem; color: white; text-shadow: 0 0 10px var(--primary-neon), 0 0 20px var(--primary-neon); letter-spacing: 2px; } .logo span { color: var(--primary-neon); } .tagline { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.8; max-width: 80%; } .feature-list { list-style-type: none; margin-top: 3rem; } .feature-item { display: flex; align-items: center; margin-bottom: 1.5rem; font-size: 1.1rem; opacity: 0.9; } .feature-icon { width: 30px; height: 30px; margin-right: 15px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 255, 163, 0.1); color: var(--primary-neon); border: 1px solid var(--primary-neon); box-shadow: 0 0 10px rgba(0, 255, 163, 0.3); } /* Login Form */ .login-panel { background: var(--panel-bg); border-radius: 12px; backdrop-filter: blur(10px); padding: 3rem; width: 450px; max-width: 90%; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 30px rgba(0, 255, 163, 0.2); position: relative; overflow: hidden; } .login-panel::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--primary-neon), var(--secondary-neon), var(--accent-neon), var(--primary-neon)); z-index: -1; border-radius: 14px; animation: border-animation 10s linear infinite; background-size: 400%; opacity: 0.5; filter: blur(10px); } @keyframes border-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .panel-header { text-align: center; margin-bottom: 2rem; } .panel-title { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; font-family: 'Orbitron', sans-serif; color: white; text-shadow: 0 0 5px var(--accent-neon); } .panel-subtitle { font-size: 1rem; opacity: 0.7; } .form-group { position: relative; margin-bottom: 1.5rem; } .form-label { position: absolute; left: 15px; top: 15px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); pointer-events: none; transition: all 0.3s ease; } .form-input { width: 100%; padding: 15px; padding-top: 25px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: white; font-size: 1.1rem; transition: all 0.3s ease; outline: none; box-sizing: border-box; } .form-input:focus { border-color: var(--primary-neon); box-shadow: 0 0 15px rgba(0, 255, 163, 0.3); } .form-input:focus + .form-label, .form-input:not(:placeholder-shown) + .form-label { top: 8px; left: 15px; font-size: 0.7rem; color: var(--primary-neon); } .form-input::placeholder { color: transparent; } .form-icon { position: absolute; right: 15px; top: 18px; color: rgba(255, 255, 255, 0.4); } .login-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; font-size: 0.9rem; } .remember-me { display: flex; align-items: center; } .custom-checkbox { position: relative; display: inline-block; width: 18px; height: 18px; margin-right: 8px; cursor: pointer; } .custom-checkbox input { opacity: 0; width: 0; height: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; } .custom-checkbox input:checked ~ .checkmark { background-color: var(--primary-neon); border-color: var(--primary-neon); } .checkmark:after { content: ""; position: absolute; display: none; } .custom-checkbox input:checked ~ .checkmark:after { display: block; } .custom-checkbox .checkmark:after { left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .forgot-password { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: all 0.3s ease; } .forgot-password:hover { color: var(--primary-neon); text-shadow: 0 0 5px var(--primary-neon); } .submit-btn { width: 100%; padding: 15px; background: linear-gradient(90deg, var(--primary-neon), var(--accent-neon)); border: none; border-radius: 8px; color: var(--bg-darker); font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; letter-spacing: 1px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .submit-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: all 0.6s ease; } .submit-btn:hover::before { left: 100%; } .submit-btn:hover { box-shadow: 0 0 20px rgba(0, 255, 163, 0.5); transform: translateY(-2px); } .separator { display: flex; align-items: center; text-align: center; margin: 2rem 0; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; } .separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .separator::before { margin-right: 1rem; } .separator::after { margin-left: 1rem; } .social-login { display: flex; justify-content: center; gap: 1rem; } .social-btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.3s ease; color: white; } .social-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .discord { background: rgba(114, 137, 218, 0.2); border-color: #7289da; } .discord:hover { background: rgba(114, 137, 218, 0.3); box-shadow: 0 0 15px rgba(114, 137, 218, 0.5); } .steam { background: rgba(23, 26, 33, 0.2); border-color: #171a21; } .steam:hover { background: rgba(23, 26, 33, 0.3); box-shadow: 0 0 15px rgba(23, 26, 33, 0.5); } .twitch { background: rgba(145, 70, 255, 0.2); border-color: #9146ff; } .twitch:hover { background: rgba(145, 70, 255, 0.3); box-shadow: 0 0 15px rgba(145, 70, 255, 0.5); } .signup-link { text-align: center; margin-top: 2rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } .signup-link a { color: var(--primary-neon); text-decoration: none; font-weight: bold; transition: all 0.3s ease; } .signup-link a:hover { text-shadow: 0 0 5px var(--primary-neon); } /* Keyboard navigation highlight */ .form-input:focus-visible, .submit-btn:focus-visible, .social-btn:focus-visible { outline: 2px solid var(--secondary-neon); outline-offset: 2px; } /* Stats Counter at Bottom */ .stats-bar { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(8, 6, 17, 0.7); backdrop-filter: blur(10px); display: flex; justify-content: center; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); gap: 3rem; z-index: 10; } .stat-item { display: flex; flex-direction: column; align-items: center; } .stat-value { font-size: 1.5rem; font-weight: bold; color: var(--primary-neon); margin-bottom: 0.2rem; } .stat-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); } /* Responsive styles */ @media (max-width: 992px) { .container { flex-direction: column; overflow-y: auto; overflow-x: hidden; } .sidebar { padding: 2rem; flex: 0 0 auto; } .login-container { padding: 2rem; flex: 0 0 auto; } .logo { font-size: 2.5rem; } .stats-bar { position: relative; margin-top: 2rem; } } @media (max-width: 576px) { .login-panel { padding: 2rem; } .stats-bar { flex-wrap: wrap; gap: 1.5rem; } .logo { font-size: 2rem; } .panel-title { font-size: 1.5rem; } .feature-list { margin-top: 1.5rem; } .feature-item { font-size: 1rem; margin-bottom: 1rem; } } /* Cursor trails */ .cursor-trail { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 0.2s ease; } </style> </head> <body> <div class="grid-background"></div> <div class="particles"></div> <div class="container"> <div class="sidebar"> <div class="logo">Neon<span>Realm</span></div> <p class="tagline">Where elite gamers converge to dominate, strategize, and forge legendary alliances in the digital universe.</p> <ul class="feature-list"> <li class="feature-item"> <div class="feature-icon">✧</div> Access 150+ exclusive tournaments monthly </li> <li class="feature-item"> <div class="feature-icon">✧</div> Connect with 500K+ pro and amateur gamers </li> <li class="feature-item"> <div class="feature-icon">✧</div> Unlock premium strategy guides & coaching </li> <li class="feature-item"> <div class="feature-icon">✧</div> Track stats across all your favorite titles </li> </ul> </div> <div class="login-container"> <div class="login-panel"> <div class="panel-header"> <h1 class="panel-title">Player Login</h1> <p class="panel-subtitle">Access your NeonRealm dashboard</p> </div> <form id="loginForm"> <div class="form-group"> <input type="text" id="username" class="form-input" placeholder="Username"> <label for="username" class="form-label">Username or Email</label> <div class="form-icon">👤</div> </div> <div class="form-group"> <input type="password" id="password" class="form-input" placeholder="Password"> <label for="password" class="form-label">Password</label> <div class="form-icon">🔒</div> </div> <div class="login-options"> <div class="remember-me"> <label class="custom-checkbox"> <input type="checkbox"> <span class="checkmark"></span> </label> Stay logged in </div> <a href="#" class="forgot-password">Forgot Password?</a> </div> <button type="submit" class="submit-btn">ENTER THE REALM</button> <div class="separator">or continue with</div> <div class="social-login"> <div class="social-btn discord" tabindex="0" aria-label="Login with Discord"> <svg width="24" height="24" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#7289da"/> </svg> </div> <div class="social-btn steam" tabindex="0" aria-label="Login with Steam"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM7.8 16.967C7.631 16.94 7.463 16.895 7.301 16.833L5.843 19.169C4.713 18.448 3.783 17.464 3.114 16.304L5.526 14.685C5.508 14.578 5.5 14.467 5.5 14.354C5.5 13.123 6.57 12.125 7.89 12.125C9.21 12.125 10.28 13.123 10.28 14.354C10.28 15.585 9.21 16.583 7.89 16.583C7.859 16.583 7.829 16.577 7.8 16.576V16.967ZM16.59 14.356C16.59 16.099 15.105 17.521 13.286 17.521C11.466 17.521 9.983 16.099 9.983 14.356C9.983 12.612 11.466 11.19 13.286 11.19C15.105 11.19 16.59 12.612 16.59 14.356ZM20.557 13.009C20.557 14.839 19.055 16.324 17.204 16.324C17.189 16.324 17.175 16.321 17.16 16.32L14.921 19.173C13.25 20.328 11.198 20.781 9.252 20.365C9.686 19.712 9.945 18.943 9.972 18.115L7.285 19.477C6.658 19.254 6.083 18.928 5.582 18.519L7.345 15.711C6.394 15.274 5.735 14.37 5.593 13.309L3.251 14.89C3.086 13.961 3 13.001 3 12.018C3 11.175 3.068 10.352 3.186 9.557L5.419 11.075C5.686 10.069 6.451 9.242 7.435 8.85L6.12 6.562C7.178 5.418 8.539 4.542 10.057 4.057L11.942 7.826C12.005 7.823 12.069 7.819 12.133 7.819C14.261 7.819 16 9.528 16 11.617C16 11.821 15.977 12.018 15.942 12.211L19.52 9.895C19.836 10.555 20 11.285 20 12.056C20 12.336 19.977 12.609 19.934 12.878L17.02 14.887C16.621 15.951 15.705 16.767 14.574 17.072L16.69 14.365C16.619 12.629 15.237 11.219 13.493 11.171L16.551 8.968C17.366 8.33 18.422 7.957 19.563 7.957C21.414 7.957 22.914 9.441 22.914 11.271C22.914 13.101 21.412 14.586 19.561 14.586C19.544 14.586 19.527 14.583 19.51 14.583L16.962 16.219C16.851 16.275 16.728 16.318 16.609 16.35C18.392 16.129 19.759 14.908 20.082 13.311L20.557 13.009Z" fill="#fff"/> </svg> </div> <div class="social-btn twitch" tabindex="0" aria-label="Login with Twitch"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11.6468 5.85128H13.9761V12.8342H11.6468V5.85128ZM7.32352 5.85128H9.65287V12.8342H7.32352V5.85128ZM4.16287 2L2 6.42808V20.5715H7.32352V23H10.4842L12.9126 20.5715H16.8056L22.1291 15.2483V2H4.16287ZM19.7998 14.1058L16.8056 17.1H11.6468L9.21846 19.5285V17.1H4.77675V4.32924H19.7998V14.1058Z" fill="#9146ff"/> </svg> </div> </div> <div class="signup-link"> New to NeonRealm? <a href="#">Create an account</a> </div> </form> </div> </div> </div> <div class="stats-bar"> <div class="stat-item"> <div class="stat-value" id="activePlayersCounter">32,491</div> <div class="stat-label">ACTIVE PLAYERS</div> </div> <div class="stat-item"> <div class="stat-value" id="liveMatchesCounter">1,208</div> <div class="stat-label">LIVE MATCHES</div> </div> <div class="stat-item"> <div class="stat-value" id="tournamentsCounter">67</div> <div class="stat-label">TOURNAMENTS TODAY</div> </div> </div> <script> // Generate particles document.addEventListener('DOMContentLoaded', function() { const particlesContainer = document.querySelector('.particles'); const count = window.innerWidth > 768 ? 30 : 15; for (let i = 0; i < count; i++) { const size = Math.random() * 4 + 2; const particle = document.createElement('span'); particle.classList.add('particle'); // Random properties particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${Math.random() * 100}vw`; particle.style.opacity = Math.random() * 0.5 + 0.1; // Random colors const colors = ['var(--primary-neon)', 'var(--secondary-neon)', 'var(--accent-neon)']; const color = colors[Math.floor(Math.random() * colors.length)]; particle.style.boxShadow = `0 0 ${size * 2}px ${color}, 0 0 ${size * 4}px ${color}`; // Random animation duration and delay const duration = Math.random() * 15 + 10; const delay = Math.random() * 20; particle.style.animation = `float ${duration}s linear ${delay}s infinite`; particlesContainer.appendChild(particle); } // Cursor trail effect let trailElements = []; const trailCount = 12; for (let i = 0; i < trailCount; i++) { const trail = document.createElement('div'); trail.classList.add('cursor-trail'); document.body.appendChild(trail); trailElements.push({ element: trail, x: 0, y: 0 }); } document.addEventListener('mousemove', (e) => { const mouseX = e.clientX; const mouseY = e.clientY; // Update first element to current mouse position trailElements[0].x = mouseX; trailElements[0].y = mouseY; // Update trail elements with delay for (let i = 1; i < trailElements.length; i++) { trailElements[i].x = trailElements[i-1].x; trailElements[i].y = trailElements[i-1].y; } // Apply positions and styles trailElements.forEach((trail, index) => { const scale = 1 - (index / trailElements.length) * 0.8; const colors = ['var(--primary-neon)', 'var(--accent-neon)', 'var(--secondary-neon)']; const color = colors[index % colors.length]; trail.element.style.opacity = '1'; trail.element.style.transform = `translate(${trail.x}px, ${trail.y}px) scale(${scale})`; trail.element.style.backgroundColor = color; trail.element.style.boxShadow = `0 0 10px ${color}`; }); }); // Hide cursor trail when mouse leaves window document.addEventListener('mouseout', () => { trailElements.forEach(trail => { trail.element.style.opacity = '0'; }); }); // Add form validation and animation const loginForm = document.getElementById('loginForm'); loginForm.addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; let valid = true; if (!username) { animateError(document.getElementById('username')); valid = false; } if (!password) { animateError(document.getElementById('password')); valid = false; } if (valid) { document.querySelector('.submit-btn').innerHTML = '<span>LOGGING IN...</span>'; // Simulate login process setTimeout(() => { document.querySelector('.submit-btn').innerHTML = 'ACCESS GRANTED'; document.querySelector('.submit-btn').style.background = 'linear-gradient(90deg, #00ff73, #00ffa3)'; }, 1500); } }); function animateError(element) { element.style.borderColor = 'red'; element.style.animation = 'shake 0.5s ease'; // Reset animation setTimeout(() => { element.style.animation = ''; }, 500); element.addEventListener('input', function() { this.style.borderColor = ''; }, { once: true }); } // Create shake animation dynamically const style = document.createElement('style'); style.innerHTML = ` @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } `; document.head.appendChild(style); // Counter animation function animateCounter(element, finalValue) { let currentValue = 0; const increment = Math.ceil(finalValue / 50); const interval = setInterval(() => { currentValue += increment; if (currentValue >= finalValue) { clearInterval(interval); currentValue = finalValue; } element.textContent = currentValue.toLocaleString(); }, 30); } // Start counter animations animateCounter(document.getElementById('activePlayersCounter'), 32491); animateCounter(document.getElementById('liveMatches
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HealthCare Connect Patient Portal</title> <style> :root { --primary-color: #6ec0b6; --secondary-color: #f7cac9; --tertiary-color: #e3f2f9; --accent-color: #92a8d1; --text-color: #444; --text-light: #777; --shadow-color: rgba(110, 192, 182, 0.2); --error-color: #f78c91; --success-color: #7db587; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, var(--tertiary-color) 0%, #fff 100%); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } .background-pattern { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.5; } .circle { position: absolute; border-radius: 50%; background: var(--primary-color); opacity: 0.1; animation: float 15s infinite ease-in-out; } .circle:nth-child(1) { width: 300px; height: 300px; top: -150px; left: -150px; animation-delay: 0s; } .circle:nth-child(2) { width: 200px; height: 200px; top: 60%; right: -100px; background: var(--secondary-color); animation-delay: 2s; } .circle:nth-child(3) { width: 180px; height: 180px; bottom: -90px; left: 25%; background: var(--accent-color); animation-delay: 4s; } @keyframes float { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(20px) scale(1.05); } 100% { transform: translateY(0) scale(1); } } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; display: flex; flex-direction: column; min-height: 100vh; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .logo { display: flex; align-items: center; gap: 1rem; } .logo-icon { color: var(--primary-color); font-size: 2rem; display: flex; align-items: center; justify-content: center; } .logo-text { font-weight: 600; color: var(--primary-color); font-size: 1.5rem; } .help-link { color: var(--primary-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 50px; transition: all 0.3s ease; font-weight: 500; } .help-link:hover { background-color: rgba(110, 192, 182, 0.1); } main { display: flex; flex: 1; align-items: center; justify-content: center; } .login-container { display: flex; width: 100%; max-width: 900px; background: white; border-radius: 20px; box-shadow: 0 15px 35px var(--shadow-color); overflow: hidden; transform: translateY(20px); opacity: 0; animation: fadeIn 0.8s ease forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .login-info { flex: 1; padding: 3rem; background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); color: white; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .login-info-content { position: relative; z-index: 1; } .login-info h2 { font-size: 1.8rem; margin-bottom: 1.5rem; font-weight: 600; } .login-info p { margin-bottom: 1.5rem; line-height: 1.6; font-weight: 300; } .feature-list { list-style: none; margin-top: 2rem; } .feature-list li { margin-bottom: 1rem; display: flex; align-items: flex-start; gap: 0.75rem; } .feature-icon { color: white; margin-top: 0.2rem; } .pattern-dots { position: absolute; width: 200px; height: 200px; bottom: -50px; right: -50px; opacity: 0.1; } .login-form-container { flex: 1; padding: 3rem; display: flex; flex-direction: column; justify-content: center; } .login-form-header { margin-bottom: 2rem; } .login-form-header h1 { font-size: 2rem; color: var(--primary-color); margin-bottom: 0.75rem; font-weight: 600; } .login-form-header p { color: var(--text-light); line-height: 1.6; } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-color); font-weight: 500; font-size: 0.95rem; } .input-with-icon { position: relative; } .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-light); } .form-control { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease; background-color: #f9f9f9; } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--shadow-color); background-color: white; } .password-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-light); cursor: pointer; background: none; border: none; } .form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; font-size: 0.9rem; } .remember-me { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .custom-checkbox { width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .custom-checkbox.checked { background-color: var(--primary-color); border-color: var(--primary-color); } .custom-checkbox.checked:after { content: '✓'; color: white; font-size: 0.75rem; } #rememberMe { position: absolute; opacity: 0; } .forgot-password { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; } .forgot-password:hover { color: var(--accent-color); text-decoration: underline; } .btn { width: 100%; padding: 0.85rem 1rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .btn-primary { background-color: var(--primary-color); color: white; box-shadow: 0 4px 12px var(--shadow-color); } .btn-primary:hover { background-color: #5eafa5; transform: translateY(-2px); box-shadow: 0 6px 15px var(--shadow-color); } .btn-primary:active { transform: translateY(0); } .other-options { margin-top: 2rem; text-align: center; } .signup-text { color: var(--text-light); margin-bottom: 1rem; } .signup-link { color: var(--primary-color); text-decoration: none; font-weight: 500; } .signup-link:hover { text-decoration: underline; } .divider { display: flex; align-items: center; margin: 1.5rem 0; color: var(--text-light); font-size: 0.9rem; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background-color: #e0e0e0; } .divider::before { margin-right: 1rem; } .divider::after { margin-left: 1rem; } .btn-secondary { background-color: white; color: var(--text-color); border: 1px solid #e0e0e0; } .btn-secondary:hover { background-color: #f5f5f5; } footer { text-align: center; padding: 2rem 0; color: var(--text-light); font-size: 0.9rem; } .error-message { color: var(--error-color); font-size: 0.85rem; margin-top: 0.5rem; display: none; } .form-group.error .form-control { border-color: var(--error-color); } .form-group.error .error-message { display: block; } .btn-loading { position: relative; pointer-events: none; } .btn-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .form-feedback { text-align: center; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; display: none; } .form-feedback.success { background-color: rgba(125, 181, 135, 0.2); color: var(--success-color); display: block; } .form-feedback.error { background-color: rgba(247, 140, 145, 0.2); color: var(--error-color); display: block; } .pulse-animation { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Tooltip styles */ .tooltip { position: relative; display: inline-block; margin-left: 0.5rem; color: var(--text-light); cursor: help; } .tooltip-text { visibility: hidden; width: 250px; background-color: #444; color: white; text-align: center; border-radius: 8px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s, transform 0.3s; font-size: 0.85rem; line-height: 1.4; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #444 transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-5px); } .float-message { position: fixed; top: 20px; right: 20px; background-color: white; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 15px 20px; max-width: 300px; transform: translateY(-100px); opacity: 0; transition: all 0.5s ease; z-index: 100; display: flex; align-items: center; gap: 10px; } .float-message.show { transform: translateY(0); opacity: 1; } .float-message.success { border-left: 4px solid var(--success-color); } .float-message.error { border-left: 4px solid var(--error-color); } .message-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .message-icon.success { color: var(--success-color); } .message-icon.error { color: var(--error-color); } /* Responsive styles */ @media (max-width: 768px) { .login-container { flex-direction: column; max-width: 100%; } .login-info, .login-form-container { padding: 2rem; } header, .form-options { flex-direction: column; gap: 1rem; align-items: flex-start; } .help-link { margin-top: 1rem; } } /* Accessibility Styles */ .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* SVG Animation */ .heart-rate { stroke: white; stroke-width: 2; fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; animation: heartbeat 4s linear forwards infinite; } @keyframes heartbeat { 0% { stroke-dashoffset: 400; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 400; } } </style> </head> <body> <div class="background-pattern"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> <div class="container"> <header> <div class="logo"> <div class="logo-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <span class="logo-text">HealthCare Connect</span> </div> <a href="#" class="help-link"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9.09 9.00001C9.3251 8.33167 9.78915 7.76811 10.4 7.40914C11.0108 7.05016 11.729 6.91894 12.4272 7.03871C13.1254 7.15849 13.7588 7.52153 14.2151 8.06353C14.6713 8.60553 14.9211 9.29153 14.92 10C14.92 12 11.92 13 11.92 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> Help Center </a> </header> <main> <div class="login-container"> <div class="login-info"> <div class="login-info-content"> <h2>Welcome to Your Health Journey</h2> <p>Access your personal healthcare dashboard to schedule appointments, view test results, and connect with your care team securely.</p> <svg width="150" height="50" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg"> <path class="heart-rate" d="M0,25 L20,25 L25,10 L35,40 L45,10 L55,40 L65,10 L75,40 L85,10 L95,40 L105,25 L200,25"></path> </svg> <ul class="feature-list"> <li> <span class="feature-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </span> <span>Schedule appointments with your providers easily</span> </li> <li> <span class="feature-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </span> <span>Access your lab results and health records</span> </li> <li> <span class="feature-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </span> <span>Message your care team securely and privately</span> </li> </ul> </div> <svg class="pattern-dots" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <pattern id="dots" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse"> <circle cx="2" cy="2" r="1" fill="white" /> </pattern> <rect x="0" y="0" width="100" height="100" fill="url(#dots)" /> </svg> </div> <div class="login-form-container"> <div class="login-form-header"> <h1>Sign In</h1> <p>Please enter your credentials to access your personal health portal.</p> </div> <div id="formFeedback" class="form-feedback"></div> <form id="loginForm"> <div class="form-group"> <label for="email">Email Address</label> <div class="input-with-icon"> <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <input type="email" class="form-control" id="email" placeholder="[email protected]" autocomplete="email" required> </div> <div class="error-message" id="emailError">Please enter a valid email address</div> </div> <div class="form-group"> <label for="password"> Password <span class="tooltip"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 16V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 8H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span class="tooltip-text"> For security, your password should include at least 8 characters with a mix of letters, numbers, and symbols. </span> </span> </label> <div class="input-with-icon"> <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <input type="password" class="form-control" id="password" placeholder="••••••••" autocomplete="current-password" required> <button type="button" class="password-toggle" id="togglePassword"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.4811 9.80385 14.1962C9.51897 13.9113 9.29439 13.572 9.14351 13.1984C8.99262 12.8249 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2219 9.18488 10.8539C9.34884 10.4859 9.58525 10.1547 9.88 9.88003M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.68192 3.96914 7.65663 6.06 6.06003L17.94 17.94ZM9.9 4.24002C10.5883 4.0789 11.2931 3.99836 12 4.00003C19 4.00003 23 12 23 12C22.393 13.1356 21.6691 14.2048 20.84 15.19L9.9 4.24002Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M1 1L23 23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> </div> <div class="error-message" id="passwordError">Password must be at least 8 characters</div> </div> <div class="form-options"> <label class="remember-me" for="rememberMe"> <div class="custom-checkbox" id="rememberMeCheckbox"></div> <input type="checkbox" id="rememberMe"> <span>Remember me for 30 days</span> </label> <a href="#" class="forgot-password">Forgot Password?</a> </div> <button type="submit" class="btn btn-primary" id="loginButton"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M10 17L15 12L10 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> Sign In </button> <div class="divider">or continue with</div> <button type="button" class="btn btn-secondary"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 0 1-5.279-5.28 5.27 5.27 0 0 1 5.279-5.279c1.259 0 2.397.447 3.29 1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233a8.908 8.908 0 0 0-8.934 8.934 8.907 8.907 0 0 0 8.934 8.934c4.467 0 8.529-3.249 8.529-8.934 0-.528-.081-1.097-.202-1.625z" stroke="currentColor" stroke-width="1" /> </svg> Sign in with Google </button> <div class="other-options"> <p class="signup-text"> Don't have an account yet? <a href="#" class="signup-link">Register now</a> </p> </div> </form> </div> </div> </main> <footer> <p>© 2023 HealthCare Connect. All rights reserved. <a href="#" style="color: inherit;">Privacy Policy</a> | <a href="#" style="color: inherit;">Terms of Service</a></p> </footer> </div> <div id="floatMessage" class="float-message"> <div class="message-icon"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <div id="floatMessageText"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Password visibility toggle const togglePassword = document.getElementById('togglePassword'); const password = document.getElementById('password'); togglePassword.addEventListener('click', function() { const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); // Change the eye icon if (type === 'password') { this.innerHTML = ` <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.12 14.12C13.8454 14.4148 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LearnSphere - Where Curiosity Thrives</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary: #4776E6; --secondary: #8E54E9; --accent: #FF7676; --light: #f8f9fa; --dark: #343a40; --success: #28a745; --error: #dc3545; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #fff 25%, transparent 25%) -20px 0, linear-gradient(225deg, #fff 25%, transparent 25%) -20px 0, linear-gradient(315deg, #fff 25%, transparent 25%), linear-gradient(45deg, #fff 25%, transparent 25%); background-size: 40px 40px; background-color: #f0f3f9; position: relative; overflow: hidden; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(to right, var(--primary), var(--secondary)); opacity: 0.05; } .particle { position: absolute; border-radius: 50%; background-color: rgba(71, 118, 230, 0.2); pointer-events: none; animation: float 15s infinite linear; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-100vh) rotate(360deg); } } .container { width: 100%; max-width: 850px; min-height: 550px; display: flex; border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; z-index: 1; backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.9); } .left-panel { flex: 1; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .left-panel-content { position: relative; z-index: 2; } .decorative-circles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } .circle:nth-child(1) { width: 150px; height: 150px; top: -75px; left: -75px; } .circle:nth-child(2) { width: 200px; height: 200px; top: 50%; right: -100px; } .circle:nth-child(3) { width: 100px; height: 100px; bottom: 10%; left: 20%; } .app-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.5rem; } .app-slogan { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2rem; line-height: 1.6; } .feature-list { margin-top: 2rem; } .feature-item { display: flex; align-items: center; margin-bottom: 1rem; } .feature-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); margin-right: 1rem; } .feature-text { font-size: 0.95rem; opacity: 0.9; } .login-panel { flex: 1; padding: 3rem; display: flex; flex-direction: column; justify-content: center; } .login-title { font-size: 1.8rem; color: var(--dark); margin-bottom: 1.5rem; position: relative; } .login-title::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 40px; height: 4px; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 2px; } .login-subtitle { color: #6c757d; margin-bottom: 2rem; } .social-login { display: flex; gap: 1rem; margin-bottom: 2rem; } .social-btn { flex: 1; padding: 0.75rem 1rem; border: none; border-radius: 8px; background-color: #f8f9fa; color: #495057; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .social-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .social-btn.google:hover { background-color: #f8f9fa; color: #ea4335; } .social-btn.microsoft:hover { background-color: #f8f9fa; color: #0078d4; } .divider { display: flex; align-items: center; margin: 1.5rem 0; color: #6c757d; font-size: 0.9rem; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background-color: #dee2e6; } .divider::before { margin-right: 1rem; } .divider::after { margin-left: 1rem; } .form-group { margin-bottom: 1.5rem; position: relative; } .form-control { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 2px solid #dee2e6; border-radius: 8px; transition: all 0.3s ease; background-color: #f8f9fa; } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(71, 118, 230, 0.1); background-color: #fff; } .form-label { position: absolute; top: 0.75rem; left: 1rem; font-size: 1rem; color: #6c757d; transition: all 0.3s ease; pointer-events: none; } .form-control:focus + .form-label, .form-control:not(:placeholder-shown) + .form-label { top: -0.5rem; left: 0.8rem; font-size: 0.75rem; background-color: #fff; padding: 0 0.3rem; color: var(--primary); } .password-toggle { position: absolute; right: 1rem; top: 0.75rem; cursor: pointer; color: #6c757d; z-index: 10; } .form-check { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .check-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #6c757d; cursor: pointer; } .forgot-link { color: var(--primary); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: color 0.3s ease; } .forgot-link:hover { color: var(--secondary); text-decoration: underline; } .custom-checkbox { position: relative; width: 18px; height: 18px; border-radius: 4px; border: 2px solid #dee2e6; display: inline-block; vertical-align: middle; transition: all 0.3s ease; background-color: white; } .custom-checkbox::after { content: ""; position: absolute; width: 10px; height: 10px; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.2s ease; } #remember:checked + .check-label .custom-checkbox { border-color: var(--primary); } #remember:checked + .check-label .custom-checkbox::after { transform: translate(-50%, -50%) scale(1); } .btn-login { width: 100%; padding: 0.85rem; border: none; border-radius: 8px; background: linear-gradient(to right, var(--primary), var(--secondary)); color: white; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-login:hover { box-shadow: 0 5px 15px rgba(71, 118, 230, 0.4); } .btn-login .ripple { position: absolute; width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; transform: scale(0); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(20); opacity: 0; } } .register-link { text-align: center; margin-top: 1.5rem; color: #6c757d; font-size: 0.95rem; } .register-link a { color: var(--primary); text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .register-link a:hover { color: var(--secondary); text-decoration: underline; } .error-message { color: var(--error); font-size: 0.9rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; } .error-message.show { opacity: 1; transform: translateY(0); } .error-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--error); color: white; font-size: 0.7rem; font-weight: bold; } @media (max-width: 768px) { .container { flex-direction: column; max-width: 95%; } .left-panel { padding: 2rem; } .login-panel { padding: 2rem; } } /* Success state animation */ @keyframes checkmark { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } .success-checkmark { display: none; margin: 0 auto; } .success-checkmark.show { display: block; } .success-checkmark .check-icon { width: 80px; height: 80px; position: relative; border-radius: 50%; box-sizing: content-box; border: 4px solid var(--success); } .success-checkmark .check-icon::before { top: 3px; left: -2px; width: 30px; transform-origin: 100% 50%; border-radius: 100px 0 0 100px; } .success-checkmark .check-icon::after { top: 0; left: 30px; width: 60px; transform-origin: 0 50%; border-radius: 0 100px 100px 0; animation: rotate-circle 4.25s ease-in; } .success-checkmark .check-icon::before, .success-checkmark .check-icon::after { content: ''; height: 100px; position: absolute; background: #FFFFFF; transform: rotate(-45deg); } .success-checkmark .check-icon .icon-line { height: 5px; background-color: var(--success); display: block; border-radius: 2px; position: absolute; z-index: 10; } .success-checkmark .check-icon .icon-line.line-tip { top: 46px; left: 14px; width: 25px; transform: rotate(45deg); animation: icon-line-tip 0.75s; } .success-checkmark .check-icon .icon-line.line-long { top: 38px; right: 8px; width: 47px; transform: rotate(-45deg); animation: icon-line-long 0.75s; } @keyframes icon-line-tip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 46px; } } @keyframes icon-line-long { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } </style> </head> <body> <div class="container"> <div class="left-panel"> <div class="decorative-circles"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> <div class="left-panel-content"> <div> <h1 class="app-title">LearnSphere</h1> <p class="app-slogan">Where curiosity meets knowledge and transforms into skills that last a lifetime.</p> </div> <div class="feature-list"> <div class="feature-item"> <div class="feature-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> </svg> </div> <div class="feature-text">Industry-leading security for your educational journey</div> </div> <div class="feature-item"> <div class="feature-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> </div> <div class="feature-text">24/7 expert support for uninterrupted learning</div> </div> <div class="feature-item"> <div class="feature-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> </div> <div class="feature-text">Personalized learning paths tailored to your goals</div> </div> </div> </div> <div> <p style="opacity: 0.8; font-size: 0.9rem;">© 2023 LearnSphere. All rights reserved.</p> </div> </div> <div class="login-panel"> <div id="login-form"> <h2 class="login-title">Welcome back</h2> <p class="login-subtitle">Resume your learning journey where you left off</p> <div class="social-login"> <button class="social-btn google"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/> </svg> Google </button> <button class="social-btn microsoft"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zM24 11.4H12.6V0H24v11.4z"/> </svg> Microsoft </button> </div> <div class="divider">or continue with email</div> <form id="form"> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder=" " required> <label for="email" class="form-label">Email address</label> <div class="error-message" id="email-error"> <span class="error-icon">!</span> <span class="error-text">Please enter a valid email address</span> </div> </div> <div class="form-group"> <input type="password" class="form-control" id="password" placeholder=" " required> <label for="password" class="form-label">Password</label> <span class="password-toggle" id="password-toggle"> <svg id="show-password" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> <svg id="hide-password" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;"> <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path> <line x1="1" y1="1" x2="23" y2="23"></line> </svg> </span> <div class="error-message" id="password-error"> <span class="error-icon">!</span> <span class="error-text">Password must be at least 6 characters</span> </div> </div> <div class="form-check"> <div> <input type="checkbox" id="remember" class="visually-hidden"> <label for="remember" class="check-label"> <span class="custom-checkbox"></span> Remember me </label> </div> <a href="#" class="forgot-link">Forgot password?</a> </div> <button type="submit" class="btn-login" id="login-btn"> Sign in to continue </button> <div class="register-link"> Don't have an account? <a href="#">Create one now</a> </div> </form> </div> <div class="success-checkmark" id="success-animation"> <div class="check-icon"> <span class="icon-line line-tip"></span> <span class="icon-line line-long"></span> </div> <p style="text-align: center; margin-top: 1rem; color: var(--success); font-weight: 600;">Login successful!</p> <p style="text-align: center; color: #6c757d; margin-top: 0.5rem; font-size: 0.9rem;">Redirecting you to your dashboard...</p> </div> </div> </div> <script> // Create floating particles in background function createParticles() { const body = document.querySelector('body'); const particleCount = 20; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random size between 5px and 30px const size = Math.random() * 25 + 5; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random position const posX = Math.random() * 100; const posY = Math.random() * 100 + 100; // Start below the viewport particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; // Random opacity and duration particle.style.opacity = Math.random() * 0.5 + 0.1; const duration = Math.random() * 20 + 10; particle.style.animationDuration = `${duration}s`; // Random delay const delay = Math.random() * 10; particle.style.animationDelay = `${delay}s`; body.appendChild(particle); } } // Execute particle creation createParticles(); // Password toggle functionality const passwordToggle = document.getElementById('password-toggle'); const passwordInput = document.getElementById('password'); const showPasswordIcon = document.getElementById('show-password'); const hidePasswordIcon = document.getElementById('hide-password'); passwordToggle.addEventListener('click', function() { if (passwordInput.type === 'password') { passwordInput.type = 'text'; showPasswordIcon.style.display = 'none'; hidePasswordIcon.style.display = 'block'; } else { passwordInput.type = 'password'; showPasswordIcon.style.display = 'block'; hidePasswordIcon.style.display = 'none'; } }); // Form validation const form = document.getElementById('form'); const emailInput = document.getElementById('email'); const loginBtn = document.getElementById('login-btn'); const emailError = document.getElementById('email-error'); const passwordError = document.getElementById('password-error'); const loginForm = document.getElementById('login-form'); const successAnimation = document.getElementById('success-animation'); // Email validation emailInput.addEventListener('blur', function() { validateEmail(); }); // Password validation passwordInput.addEventListener('blur', function() { validatePassword(); }); function validateEmail() { const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(emailInput.value)) { emailError.classList.add('show'); emailInput.style.borderColor = 'var(--error)'; return false; } else { emailError.classList.remove('show'); emailInput.style.borderColor = '#dee2e6'; return true; } } function validatePassword() { if (passwordInput.value.length < 6) { passwordError.classList.add('show'); passwordInput.style.borderColor = 'var(--error)'; return false; } else { passwordError.classList.remove('show'); passwordInput.style.borderColor = '#dee2e6'; return true; } } // Button ripple effect loginBtn.addEventListener('click', function(e) { const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); // Form submission form.addEventListener('submit', function(e) { e.preventDefault(); const isEmailValid = validateEmail(); const isPasswordValid = validatePassword(); if (isEmailValid && isPasswordValid) { // Simulate successful login loginBtn.innerHTML = '<div class="loader"></div>'; loginBtn.disabled = true; setTimeout(() => { loginForm.style.display = 'none'; successAnimation.classList.add('show'); // Redirect after 3 seconds (in a real app) setTimeout(() => { // window.location.href = '/dashboard'; // For demo purposes, just refresh the page // window.location.reload(); }, 3000); }, 1500); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Seller Hub - Login</title> <style> :root { --primary: #2563eb; --primary-dark: #1d4ed8; --secondary: #f97316; --text: #0f172a; --text-light: #64748b; --bg: #f8fafc; --white: #ffffff; --error: #ef4444; --success: #10b981; --border: #e2e8f0; --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: var(--bg); color: var(--text); min-height: 100vh; display: flex; overflow-x: hidden; } .login-container { display: flex; width: 100%; min-height: 100vh; } .login-form-container { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem; z-index: 1; transition: all 0.3s ease; } .login-visual { flex: 1; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } @media (max-width: 768px) { .login-visual { display: none; } } .login-form { max-width: 400px; width: 100%; margin: 0 auto; transition: transform 0.3s ease, opacity 0.3s ease; } .logo { margin-bottom: 2.5rem; display: flex; align-items: center; } .logo-icon { width: 40px; height: 40px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; position: relative; overflow: hidden; } .logo-icon:before { content: ''; position: absolute; width: 20px; height: 20px; background: var(--white); border-radius: 4px; transform: rotate(45deg); animation: logoAnim 4s infinite ease-in-out; } @keyframes logoAnim { 0%, 100% { transform: rotate(45deg) translate(-15px, -15px); } 50% { transform: rotate(45deg) translate(5px, 5px); } } .logo-text { font-size: 1.5rem; font-weight: 700; color: var(--text); } .login-header { margin-bottom: 2rem; } .login-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .login-header p { color: var(--text-light); line-height: 1.5; } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; color: var(--text); } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-light); transition: all 0.2s ease; } .form-control { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 1rem; transition: all 0.2s ease; background-color: var(--white); color: var(--text); } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); } .form-control:focus + .input-icon { color: var(--primary); } .forgot-password { text-align: right; margin-bottom: 1.5rem; } .forgot-password a { color: var(--primary); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; font-weight: 500; } .forgot-password a:hover { color: var(--primary-dark); text-decoration: underline; } .btn { display: block; width: 100%; padding: 0.75rem 1.5rem; background-color: var(--primary); color: white; border: none; border-radius: 0.5rem; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .btn:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow); } .btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4); } .btn:active { transform: translateY(0); } .btn-ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); transform: scale(0); animation: ripple 0.6s linear; transform-origin: center; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .login-separator { display: flex; align-items: center; margin: 1.5rem 0; color: var(--text-light); font-size: 0.875rem; } .login-separator::before, .login-separator::after { content: ''; flex: 1; height: 1px; background-color: var(--border); } .login-separator::before { margin-right: 1rem; } .login-separator::after { margin-left: 1rem; } .social-login { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .social-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; background-color: var(--white); transition: all 0.2s ease; cursor: pointer; } .social-btn:hover { background-color: #f1f5f9; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .social-btn svg { height: 24px; width: 24px; } .login-footer { text-align: center; margin-top: 2rem; color: var(--text-light); font-size: 0.875rem; } .login-footer a { color: var(--primary); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .login-footer a:hover { color: var(--primary-dark); text-decoration: underline; } .visual-content { color: white; text-align: center; max-width: 440px; padding: 2rem; z-index: 1; } .visual-content h2 { font-size: 2.25rem; margin-bottom: 1.5rem; line-height: 1.2; } .visual-content p { font-size: 1.125rem; margin-bottom: 2rem; opacity: 0.9; line-height: 1.6; } .stats-container { display: flex; justify-content: space-between; margin-top: 3rem; } .stat-item { text-align: center; } .stat-value { font-size: 2.25rem; font-weight: 700; margin-bottom: 0.5rem; } .stat-label { font-size: 0.875rem; opacity: 0.8; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .particle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } .show-password { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-light); cursor: pointer; transition: color 0.2s ease; } .show-password:hover { color: var(--primary); } .form-check { display: flex; align-items: center; margin-bottom: 1.5rem; } .form-check-input { width: 18px; height: 18px; margin-right: 0.5rem; accent-color: var(--primary); cursor: pointer; } .form-check-label { font-size: 0.875rem; color: var(--text-light); cursor: pointer; } .login-alert { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; font-size: 0.875rem; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; max-height: 0; overflow: hidden; } .login-alert.show { opacity: 1; transform: translateY(0); max-height: 60px; } .login-alert.error { background-color: rgba(239, 68, 68, 0.1); color: var(--error); border-left: 3px solid var(--error); } .login-alert.success { background-color: rgba(16, 185, 129, 0.1); color: var(--success); border-left: 3px solid var(--success); } .login-alert svg { margin-right: 0.5rem; flex-shrink: 0; } .loading-spinner { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .btn.loading .loading-spinner { display: block; } .btn.loading span { visibility: hidden; } .pulse-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: var(--success); bottom: 10px; right: 10px; } .pulse-dot:before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: var(--success); opacity: 0.7; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } /* Animation for form elements */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-group, .login-header, .logo, .forgot-password, .btn, .login-separator, .social-login, .login-footer, .form-check { animation: fadeInUp 0.5s forwards; opacity: 0; } .logo { animation-delay: 0.1s; } .login-header { animation-delay: 0.2s; } .form-group:nth-child(1) { animation-delay: 0.3s; } .form-group:nth-child(2) { animation-delay: 0.4s; } .form-check { animation-delay: 0.5s; } .forgot-password { animation-delay: 0.6s; } .btn { animation-delay: 0.7s; } .login-separator { animation-delay: 0.8s; } .social-login { animation-delay: 0.9s; } .login-footer { animation-delay: 1s; } </style> </head> <body> <div class="login-container"> <div class="login-form-container"> <div class="login-form"> <div class="logo"> <div class="logo-icon"> </div> <div class="logo-text">Seller Hub</div> </div> <div class="login-header"> <h1>Welcome back!</h1> <p>Log in to access your seller dashboard, manage inventory, and track your sales performance.</p> </div> <div class="login-alert" id="loginAlert"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> <span id="alertMessage"></span> </div> <form id="loginForm"> <div class="form-group"> <label for="email">Email</label> <div class="input-wrapper"> <input type="email" class="form-control" id="email" placeholder="[email protected]" required> <span class="input-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> </span> </div> </div> <div class="form-group"> <label for="password">Password</label> <div class="input-wrapper"> <input type="password" class="form-control" id="password" placeholder="••••••••" required> <span class="input-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect> <path d="M7 11V7a5 5 0 0 1 10 0v4"></path> </svg> </span> <button type="button" class="show-password" id="showPassword"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> </button> </div> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" id="rememberMe"> <label class="form-check-label" for="rememberMe">Remember me for 30 days</label> </div> <div class="forgot-password"> <a href="#">Forgot password?</a> </div> <button type="submit" class="btn" id="loginBtn"> <span>Log In to Dashboard</span> <div class="loading-spinner"></div> </button> </form> <div class="login-separator">or continue with</div> <div class="social-login"> <button class="social-btn" type="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"> <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path> <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path> <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path> <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path> </svg> </button> <button class="social-btn" type="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"> <path fill="#039be5" d="M24 5A19 19 0 1 0 24 43A19 19 0 1 0 24 5Z"></path> <path fill="#fff" d="M26.572,29.036h4.917l0.772-4.995h-5.69v-2.73c0-2.075,0.678-3.915,2.619-3.915h3.119v-4.359c-0.548-0.074-1.707-0.236-3.897-0.236c-4.573,0-7.254,2.415-7.254,7.917v3.323h-4.701v4.995h4.701v13.729C22.089,42.905,23.032,43,24,43c0.875,0,1.729-0.08,2.572-0.194V29.036z"></path> </svg> </button> <button class="social-btn" type="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"> <path fill="#212121" d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"></path> <path fill="#fff" d="M26.707,29.301h5.176l0.813-5.258h-5.989v-2.874c0-2.184,0.714-4.121,2.757-4.121h3.283V12.46 c-0.577-0.078-1.797-0.248-4.102-0.248c-4.814,0-7.636,2.542-7.636,8.334v3.498H16.06v5.258h4.948v14.452 C21.988,43.9,22.981,44,24,44c0.921,0,1.82-0.084,2.707-0.204V29.301z"></path> </svg> </button> </div> <div class="login-footer"> Don't have an account? <a href="#">Apply for seller account</a> </div> </div> </div> <div class="login-visual"> <div class="visual-content"> <h2>Grow your business with our seller platform</h2> <p>Join thousands of successful sellers using our platform to reach millions of customers worldwide.</p> <div class="stats-container"> <div class="stat-item"> <div class="stat-value">2.4M+</div> <div class="stat-label">Active Sellers</div> </div> <div class="stat-item"> <div class="stat-value">98%</div> <div class="stat-label">Satisfaction</div> </div> <div class="stat-item"> <div class="stat-value">$2.8B</div> <div class="stat-label">Monthly Sales</div> </div> </div> </div> <div class="particles" id="particles"></div> <div class="pulse-dot"></div> </div> </div> <script> // Show/Hide Password Toggle document.getElementById('showPassword').addEventListener('mousedown', function() { document.getElementById('password').type = 'text'; this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path> <line x1="1" y1="1" x2="23" y2="23"></line> </svg>`; }); document.getElementById('showPassword').addEventListener('mouseup', function() { document.getElementById('password').type = 'password'; this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> <circle cx="12" cy="12" r="3"></circle> </svg>`; }); // Handle form submission document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); const email = document.getElementById('email').value; const password = document.getElementById('password').value; const loginBtn = document.getElementById('loginBtn'); const alertEl = document.getElementById('loginAlert'); const alertMsg = document.getElementById('alertMessage'); // Clear previous alerts alertEl.classList.remove('show', 'error', 'success'); // Validate email and password if (!email || !password) { alertEl.classList.add('show', 'error'); alertMsg.textContent = 'Please enter both email and password.'; return; } // Show loading state loginBtn.classList.add('loading'); // Simulate API call setTimeout(() => { loginBtn.classList.remove('loading'); // Simulate successful login if (email.includes('@') && password.length >= 6) { // Success alertEl.classList.add('show', 'success'); alertMsg.textContent = 'Login successful! Redirecting to dashboard...'; // Create ripple effect on button createRipple(e, loginBtn); // Redirect after a delay (in a real app) setTimeout(() => { document.querySelector('.login-form').style.opacity = '0'; document.querySelector('.login-form').style.transform = 'translateY(-20px)'; }, 1000); } else { // Error alertEl.classList.add('show', 'error'); alertMsg.textContent = 'Invalid email or password. Please try again.'; // Shake the form on error const form = document.querySelector('.login-form'); form.style.animation = 'none'; void form.offsetWidth; // Trigger reflow form.style.animation = 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both'; } }, 1500); }); // Button ripple effect function createRipple(e, button) { const circle = document.createElement('span'); const diameter = Math.max(button.clientWidth, button.clientHeight); circle.style.width = circle.style.height = `${diameter}px`; const rect = button.getBoundingClientRect(); circle.style.left = `${e.clientX - rect.left - diameter / 2}px`; circle.style.top = `${e.clientY - rect.top - diameter / 2}px`; circle.classList.add('btn-ripple'); const ripple = button.getElementsByClassName('btn-ripple')[0]; if (ripple) { ripple.remove(); } button.appendChild(circle); } // Generate particles for the visual side function generateParticles() { const particlesContainer = document.getElementById('particles'); const particleCount = 30; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random size const size = Math.random() * 8 + 2; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random position const posX = Math.random() * 100; const posY = Math.random() * 100; particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; // Random opacity particle.style.opacity = Math.random() * 0.5 + 0.1; // Random animation const duration = Math.random() * 20 + 10; const delay = Math.random() * 10; particle.style.animation = `float ${duration}s ${delay}s infinite ease-in-out`; particlesContainer.appendChild(particle); } } // Create floating animation const style = document.createElement('style'); style.textContent = ` @keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-30px) translateX(15px); } 50% { transform: translateY(-15px) translateX(-15px); } 75% { transform: translateY(30px) translateX(15px); } } @keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } `; document.head.appendChild(style); // Initialize particles document.addEventListener('DOMContentLoaded', generateParticles); // Add button click effect to social buttons document.querySelectorAll('.social-btn').forEach(btn => { btn.addEventListener('click', function(e) { createRipple(e, this); }); }); </script> </body> </html>
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EarthTalk Community Forum</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary-color: #5a7d2a; --secondary-color: #8fb339; --accent-color: #edd170; --dark-color: #34421e; --light-color: #f5f1e6; --error-color: #c44536; --success-color: #3c896d; } body { background: var(--light-color); min-height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; overflow-x: hidden; } .background-pattern { position: absolute; width: 100%; height: 100%; z-index: -1; opacity: 0.2; overflow: hidden; } .leaf { position: absolute; width: 40px; height: 40px; background: var(--primary-color); border-radius: 50% 0; transform: rotate(45deg); opacity: 0.1; } .container { width: 90%; max-width: 900px; display: flex; flex-direction: row; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); border-radius: 16px; overflow: hidden; background: white; height: 600px; } .welcome-side { flex: 1; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .welcome-side h1 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 20px; position: relative; z-index: 2; } .welcome-side p { font-size: 1rem; line-height: 1.6; margin-bottom: 15px; opacity: 0.9; position: relative; z-index: 2; } .welcome-pattern { position: absolute; bottom: -50px; right: -50px; width: 300px; height: 300px; opacity: 0.15; } .login-side { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; } .login-title { margin-bottom: 40px; color: var(--dark-color); } .login-title h2 { font-size: 1.8rem; margin-bottom: 10px; } .login-title p { color: #666; font-size: 0.95rem; } .form-group { margin-bottom: 25px; position: relative; } .form-group label { display: block; margin-bottom: 8px; color: var(--dark-color); font-weight: 500; font-size: 0.9rem; transition: all 0.3s ease; } .form-group input { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease; background-color: #f8f8f8; } .form-group input:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 4px rgba(143, 179, 57, 0.1); outline: none; background-color: white; } .form-group .input-icon { position: absolute; right: 15px; top: 38px; color: #999; } .remember-forgot { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 0.9rem; } .remember-me { display: flex; align-items: center; } .remember-me input { margin-right: 8px; accent-color: var(--primary-color); } .forgot-password { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .forgot-password:hover { color: var(--secondary-color); text-decoration: underline; } .login-button { background: var(--primary-color); color: white; border: none; padding: 14px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; margin-bottom: 20px; position: relative; overflow: hidden; } .login-button:hover { background: var(--secondary-color); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(90, 125, 42, 0.2); } .login-button .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .sign-up { text-align: center; margin-top: 20px; color: #666; font-size: 0.9rem; } .sign-up a { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: all 0.3s ease; } .sign-up a:hover { color: var(--secondary-color); text-decoration: underline; } .community-stats { display: flex; margin-top: 40px; gap: 15px; } .stat { flex: 1; padding: 15px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; backdrop-filter: blur(5px); text-align: center; transition: transform 0.3s ease; cursor: default; } .stat:hover { transform: translateY(-5px); } .stat h3 { font-size: 1.8rem; margin-bottom: 5px; } .stat p { font-size: 0.8rem; opacity: 0.8; margin: 0; } .social-proof { margin-top: 30px; position: relative; z-index: 2; } .social-proof p { font-style: italic; margin-bottom: 10px; } .member-info { display: flex; align-items: center; } .member-avatar { width: 35px; height: 35px; border-radius: 50%; background: var(--accent-color); margin-right: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--dark-color); } .feedback-indicator { height: 4px; width: 0; background: var(--secondary-color); border-radius: 2px; margin-bottom: 10px; transition: width 0.3s ease; } .error-message { color: var(--error-color); font-size: 0.8rem; margin-top: 5px; display: none; } @media (max-width: 768px) { .container { flex-direction: column; height: auto; } .welcome-side { padding: 30px; min-height: 300px; } .login-side { padding: 30px; } .community-stats { flex-direction: column; gap: 10px; } } /* Animation for leaf pattern */ @keyframes float { 0% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(48deg) translate(15px, 15px); } 100% { transform: rotate(45deg) translate(0, 0); } } /* Interactive checkmark for the submit button */ .checkmark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; margin-left: 10px; position: relative; opacity: 0; transform: scale(0); transition: all 0.3s ease; } .checkmark:before { content: ''; width: 10px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; position: absolute; top: 5px; left: 4px; transform: rotate(-45deg); } .show-checkmark .checkmark { opacity: 1; transform: scale(1); } </style> </head> <body> <div class="background-pattern" id="pattern"></div> <div class="container"> <div class="welcome-side"> <div> <h1>Welcome to EarthTalk</h1> <p>Join our growing community of environmental enthusiasts, gardeners, and sustainability advocates sharing knowledge and fostering positive change.</p> </div> <div class="community-stats"> <div class="stat"> <h3>12K+</h3> <p>Active Members</p> </div> <div class="stat"> <h3>500+</h3> <p>Daily Discussions</p> </div> </div> <div class="social-proof"> <p>"This community helped me transform my garden into a thriving ecosystem while connecting with like-minded people."</p> <div class="member-info"> <div class="member-avatar">LG</div> <div> <strong>Lisa Green</strong> <div>Member since 2021</div> </div> </div> </div> <svg class="welcome-pattern" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <path fill="#FFFFFF" d="M41.9,-71.3C53.4,-64.7,61.1,-51.6,68.2,-38.2C75.2,-24.7,81.7,-10.9,81.2,2.9C80.8,16.7,73.5,30.5,64.3,41.9C55.1,53.2,44.1,62.2,31.6,67.3C19,72.4,5,73.7,-8.6,71.4C-22.3,69.1,-35.6,63.3,-46.7,54.4C-57.8,45.5,-66.6,33.5,-70.1,19.9C-73.6,6.3,-71.7,-8.9,-67.6,-23.5C-63.6,-38.1,-57.3,-52.2,-46.3,-59.2C-35.3,-66.3,-19.7,-66.3,-3.7,-60.4C12.3,-54.5,30.5,-77.9,41.9,-71.3Z" transform="translate(100 100)" /> </svg> </div> <div class="login-side"> <div class="login-title"> <h2>Sign in to EarthTalk</h2> <p>Continue your journey with our community</p> </div> <div class="feedback-indicator" id="feedback-bar"></div> <form id="login-form"> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" name="email" placeholder="[email protected]" required> <div class="error-message" id="email-error">Please enter a valid email address</div> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Your password" required> <div class="error-message" id="password-error">Password must be at least 6 characters</div> </div> <div class="remember-forgot"> <label class="remember-me"> <input type="checkbox" name="remember" id="remember"> Remember me </label> <a href="#" class="forgot-password">Forgot Password?</a> </div> <button type="submit" class="login-button" id="login-button"> Sign In <span class="checkmark"></span> </button> <div class="sign-up"> Don't have an account? <a href="#">Join EarthTalk</a> </div> </form> </div> </div> <script> // Generate leaf background pattern document.addEventListener('DOMContentLoaded', function() { const pattern = document.getElementById('pattern'); const leafCount = 30; for (let i = 0; i < leafCount; i++) { const leaf = document.createElement('div'); leaf.classList.add('leaf'); // Random position const posX = Math.random() * 100; const posY = Math.random() * 100; // Random size const size = Math.random() * 30 + 20; // Random animation duration and delay const animDuration = Math.random() * 10 + 10; const animDelay = Math.random() * 5; leaf.style.left = `${posX}%`; leaf.style.top = `${posY}%`; leaf.style.width = `${size}px`; leaf.style.height = `${size}px`; leaf.style.animation = `float ${animDuration}s ease-in-out ${animDelay}s infinite`; pattern.appendChild(leaf); } // Form validation and interaction const form = document.getElementById('login-form'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const feedbackBar = document.getElementById('feedback-bar'); const emailError = document.getElementById('email-error'); const passwordError = document.getElementById('password-error'); const loginButton = document.getElementById('login-button'); // Input validation feedback emailInput.addEventListener('input', function() { const isValid = emailInput.checkValidity(); updateFeedback(); if (!isValid && emailInput.value) { emailError.style.display = 'block'; } else { emailError.style.display = 'none'; } }); passwordInput.addEventListener('input', function() { updateFeedback(); if (passwordInput.value.length > 0 && passwordInput.value.length < 6) { passwordError.style.display = 'block'; } else { passwordError.style.display = 'none'; } }); // Update the feedback indicator based on form completion function updateFeedback() { const emailFilled = emailInput.value.length > 0; const passwordFilled = passwordInput.value.length > 0; let progress = 0; if (emailFilled) progress += 50; if (passwordFilled) progress += 50; feedbackBar.style.width = `${progress}%`; if (progress === 100) { feedbackBar.style.background = 'var(--success-color)'; } else { feedbackBar.style.background = 'var(--secondary-color)'; } } // Ripple effect on button click loginButton.addEventListener('click', function(e) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; setTimeout(() => { ripple.remove(); }, 600); }); // Form submission form.addEventListener('submit', function(e) { e.preventDefault(); const isEmailValid = emailInput.checkValidity() && emailInput.value; const isPasswordValid = passwordInput.value.length >= 6; if (isEmailValid && isPasswordValid) { // Show success animation loginButton.classList.add('show-checkmark'); loginButton.innerHTML = 'Signing In <span class="checkmark"></span>'; // Simulate login process setTimeout(() => { // Normally this would be where you'd redirect after successful login window.location.href = '#dashboard'; }, 1500); } else { feedbackBar.style.background = 'var(--error-color)'; if (!isEmailValid) { emailError.style.display = 'block'; } if (!isPasswordValid) { passwordError.style.display = 'block'; } } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CloudFlow - Enterprise SaaS Login</title> <style> :root { --primary: #3a75c4; --primary-dark: #2c5a9e; --secondary: #6e42c1; --accent: #42c1a6; --light: #f7f9fc; --dark: #1a2237; --error: #e74c3c; --success: #2ecc71; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); } body { background-color: var(--light); min-height: 100vh; display: flex; overflow-x: hidden; } .login-container { display: flex; width: 100%; height: 100vh; } .login-visual { flex: 1; background: linear-gradient(135deg, var(--primary-dark), var(--secondary)); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } .login-visual::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 20%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 20%); opacity: 0.8; } .login-visual-content { z-index: 1; color: white; text-align: center; padding: 2rem; max-width: 80%; } .particles { position: absolute; width: 100%; height: 100%; z-index: 0; } .particle { position: absolute; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; } .login-form-container { flex: 1; display: flex; justify-content: center; align-items: center; padding: 2rem; } .login-form-wrapper { width: 100%; max-width: 420px; padding: 3rem; background-color: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .login-form-wrapper:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } .login-logo { margin-bottom: 1.5rem; text-align: center; } .logo-text { font-size: 1.8rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; justify-content: center; } .logo-icon { display: inline-block; width: 30px; height: 30px; border: 3px solid var(--primary); border-radius: 50%; margin-right: 8px; position: relative; overflow: hidden; } .logo-icon::before { content: ""; position: absolute; width: 12px; height: 12px; background-color: var(--accent); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } } .login-title { text-align: center; margin-bottom: 2rem; } .login-title h1 { font-size: 1.8rem; color: var(--dark); margin-bottom: 0.5rem; font-weight: 700; } .login-title p { color: #6c7989; font-size: 0.95rem; } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.95rem; font-weight: 500; color: var(--dark); } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6c7989; transition: color 0.3s ease; } .form-control { width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; border: 2px solid #e1e8f0; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease; background-color: #f9fafc; color: var(--dark); } .form-control:focus { outline: none; border-color: var(--primary); background-color: white; box-shadow: 0 0 0 4px rgba(58, 117, 196, 0.15); } .form-control:focus + .input-icon { color: var(--primary); } .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #6c7989; cursor: pointer; transition: color 0.3s ease; } .password-toggle:hover { color: var(--primary); } .form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; font-size: 0.9rem; } .checkbox-container { display: flex; align-items: center; } .custom-checkbox { width: 18px; height: 18px; border: 2px solid #e1e8f0; border-radius: 4px; margin-right: 0.5rem; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s ease; position: relative; } .custom-checkbox.checked { background-color: var(--primary); border-color: var(--primary); } .custom-checkbox.checked::after { content: ""; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; } .remember-text { color: #6c7989; user-select: none; } .forgot-password { color: var(--primary); text-decoration: none; transition: color 0.2s ease; } .forgot-password:hover { color: var(--primary-dark); text-decoration: underline; } .btn { display: block; width: 100%; padding: 0.85rem 1.5rem; background-color: var(--primary); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.7s ease; } .btn:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(58, 117, 196, 0.3); } .btn:hover::before { left: 100%; } .btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(58, 117, 196, 0.2); } .login-footer { margin-top: 2rem; text-align: center; font-size: 0.9rem; color: #6c7989; } .login-footer a { color: var(--primary); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } .login-footer a:hover { color: var(--primary-dark); text-decoration: underline; } .divider { display: flex; align-items: center; margin: 1.5rem 0; color: #a3aebf; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background-color: #e1e8f0; } .divider-text { padding: 0 0.75rem; font-size: 0.85rem; color: #6c7989; } .social-login { display: flex; justify-content: center; gap: 0.75rem; } .social-btn { flex: 1; padding: 0.75rem; border: 1px solid #e1e8f0; border-radius: 8px; background-color: white; color: #4a5568; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .social-btn:hover { background-color: #f8fafc; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .social-icon { margin-right: 0.5rem; font-size: 1.1rem; } .security-badge { display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; color: #6c7989; font-size: 0.85rem; } .security-icon { margin-right: 0.5rem; color: var(--success); } .tooltip { position: relative; cursor: help; } .tooltip-text { visibility: hidden; width: 200px; background-color: var(--dark); color: white; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.8rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* Animation classes */ .fade-in { animation: fadeIn 0.6s ease-out forwards; opacity: 0; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .floating { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /* Notification */ .notification { position: fixed; top: 20px; right: 20px; background-color: white; color: var(--dark); padding: 1rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateX(150%); transition: transform 0.3s ease; z-index: 100; display: flex; align-items: center; } .notification.show { transform: translateX(0); } .notification.success { border-left: 4px solid var(--success); } .notification.error { border-left: 4px solid var(--error); } .notification-icon { margin-right: 0.75rem; font-size: 1.2rem; } .notification-message { font-size: 0.9rem; } /* Responsive design */ @media (max-width: 992px) { .login-container { flex-direction: column; } .login-visual, .login-form-container { flex: none; } .login-visual { height: 200px; } .login-form-container { padding: 2rem 1rem; } .login-form-wrapper { max-width: 100%; padding: 2rem 1.5rem; } } /* SVG Icons */ .svg-icon { display: inline-block; width: 20px; height: 20px; stroke-width: 0; stroke: currentColor; fill: currentColor; } /* Background animated elements */ .background-element { position: absolute; width: 120px; height: 120px; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; background: linear-gradient(45deg, var(--accent), transparent); animation: morphing 15s linear infinite alternate; opacity: 0.2; } .element-1 { top: 15%; left: 10%; animation-delay: 0s; } .element-2 { bottom: 20%; right: 15%; width: 150px; height: 150px; animation-delay: -5s; } .element-3 { top: 50%; left: 50%; width: 80px; height: 80px; animation-delay: -10s; } @keyframes morphing { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; } 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } } </style> </head> <body> <div class="notification" id="notification"> <span class="notification-icon" id="notification-icon"> <svg class="svg-icon" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"></path> </svg> </span> <span class="notification-message" id="notification-message"></span> </div> <div class="login-container"> <div class="login-visual"> <div class="background-element element-1"></div> <div class="background-element element-2"></div> <div class="background-element element-3"></div> <div class="particles" id="particles"></div> <div class="login-visual-content fade-in" style="animation-delay: 0.3s;"> <h2 class="floating" style="font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700;">CloudFlow Analytics</h2> <p style="font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; opacity: 0.9;">Access your enterprise analytics dashboard and unlock real-time insights for your business decisions.</p> <div style="display: flex; justify-content: center; gap: 10px;"> <div style="background: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; flex: 1; max-width: 150px;"> <div style="font-size: 2rem; margin-bottom: 0.5rem;">99.9%</div> <div style="font-size: 0.85rem; opacity: 0.8;">Uptime SLA</div> </div> <div style="background: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; flex: 1; max-width: 150px;"> <div style="font-size: 2rem; margin-bottom: 0.5rem;">10k+</div> <div style="font-size: 0.85rem; opacity: 0.8;">Enterprise Users</div> </div> </div> </div> </div> <div class="login-form-container"> <div class="login-form-wrapper fade-in" style="animation-delay: 0.6s;"> <div class="login-logo"> <div class="logo-text"> <span class="logo-icon"></span> CloudFlow </div> </div> <div class="login-title"> <h1>Welcome back</h1> <p>Sign in to your account to continue</p> </div> <form id="loginForm"> <div class="form-group"> <label for="email">Email address</label> <div class="input-wrapper"> <input type="email" id="email" class="form-control" placeholder="[email protected]" required> <span class="input-icon"> <svg class="svg-icon" viewBox="0 0 24 24"> <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"></path> </svg> </span> </div> </div> <div class="form-group"> <label for="password">Password</label> <div class="input-wrapper"> <input type="password" id="password" class="form-control" placeholder="•••••••••••" required> <span class="input-icon"> <svg class="svg-icon" viewBox="0 0 24 24"> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"></path> </svg> </span> <button type="button" class="password-toggle" id="passwordToggle"> <svg class="svg-icon" id="passwordIcon" viewBox="0 0 24 24"> <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path> </svg> </button> </div> </div> <div class="form-options"> <div class="checkbox-container"> <div class="custom-checkbox" id="rememberCheckbox"></div> <span class="remember-text">Remember me</span> </div> <a href="#" class="forgot-password">Forgot password?</a> </div> <button type="submit" class="btn" id="loginButton"> Sign in </button> <div class="divider"> <span class="divider-text">OR CONTINUE WITH</span> </div> <div class="social-login"> <button type="button" class="social-btn"> <svg class="svg-icon social-icon" viewBox="0 0 24 24"> <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"></path> </svg> Google </button> <button type="button" class="social-btn"> <svg class="svg-icon social-icon" viewBox="0 0 24 24"> <path d="M22,12c0,5.52-4.48,10-10,10S2,17.52,2,12S6.48,2,12,2S22,6.48,22,12z M10,8.54c-0.48,0.23-0.93,0.61-1.19,1.2C8.58,10.2,8.5,10.7,8.5,11.5h2v-0.5c0-0.35,0.05-0.69,0.28-0.93C10.99,9.84,11.25,9.77,12,9.75v-2C11.25,7.77,10.63,8.07,10,8.54z M14,12l1.42,1.37C16.18,12.63,16.9,12,17,12H14z M18.04,12c-0.14,0-0.13-0.04-0.24,0l-2.08,2.02l2.54,2.45c0.11,0.11,0.22,0.17,0.35,0.35c0.15,0.15,0.26,0.36,0.26,0.6c0,0.55-0.45,1-1,1c-0.26,0-0.47-0.16-0.6-0.26c-0.16-0.16-0.31-0.32-0.43-0.44l-2.92-2.89c-0.07-0.03-0.14-0.04-0.23-0.08s-0.21-0.06-0.33-0.06c-0.26,0-0.5,0.08-0.7,0.23l-2.91,2.84c-0.35,0.34-0.7,0.67-1.05,1.01C8.49,18.98,8.25,19,8,19c-0.55,0-1-0.45-1-1c0-0.3,0.12-0.61,0.31-0.8l3.8-3.7C11.38,13.28,11.07,13,11,13H8c-0.55,0-1-0.45-1-1s0.45-1,1-1h3c0.58,0,1-0.15,1-0.76V10c0-0.41-0.06-0.54-0.06-0.71c0-0.56,0.46-1.03,1.03-1.03c0.52,0,0.97,0.4,1,0.92c0.01,0.21,0.03,0.46,0.03,0.74v0.21c0,0.32,0.03,0.51,0.27,0.71c0.19,0.15,0.44,0.16,0.63,0.16h3.1c0.56,0,1,0.45,1,1C19,11.55,18.58,12,18.04,12z"></path> </svg> SSO </button> </div> <div class="security-badge"> <span class="security-icon"> <svg class="svg-icon" viewBox="0 0 24 24"> <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path> </svg> </span> <span class="tooltip"> Secure login encryption <span class="tooltip-text">Your login is secured with advanced TLS encryption and we never store passwords in plaintext</span> </span> </div> <div class="login-footer"> Don't have an account? <a href="#">Start your free trial</a> </div> </form> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create floating particles const particlesContainer = document.getElementById('particles'); const particleCount = 30; for (let i = 0; i < particleCount; i++) { createParticle(particlesContainer); } // Password visibility toggle const passwordField = document.getElementById('password'); const passwordToggle = document.getElementById('passwordToggle'); const passwordIcon = document.getElementById('passwordIcon'); passwordToggle.addEventListener('click', function() { if (passwordField.type === 'password') { passwordField.type = 'text'; passwordIcon.innerHTML = '<path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"></path>'; } else { passwordField.type = 'password'; passwordIcon.innerHTML = '<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path>'; } }); // Remember me checkbox functionality const rememberCheckbox = document.getElementById('rememberCheckbox'); let isRememberChecked = false; rememberCheckbox.addEventListener('click', function() { isRememberChecked = !isRememberChecked; if (isRememberChecked) { rememberCheckbox.classList.add('checked'); } else { rememberCheckbox.classList.remove('checked'); } }); // Form submission const loginForm = document.getElementById('loginForm'); const loginButton = document.getElementById('loginButton'); const notification = document.getElementById('notification'); const notificationIcon = document.getElementById('notification-icon'); const notificationMessage = document.getElementById('notification-message'); loginForm.addEventListener('submit', function(e) { e.preventDefault(); const email = document.getElementById('email').value; const password = document.getElementById('password').value; // Simulate login process loginButton.innerHTML = '<span style="display: inline-block; width: 16px; height: 16px; border: 2px solid white; border-radius: 50%; border-top-color: transparent; animation: rotate 1s linear infinite;"></span> Signing in...'; loginButton.disabled = true; setTimeout(function() { if (email && password) { // Simulate successful login notification.classList.add('success'); notificationIcon.innerHTML = '<svg class="svg-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"></path></svg>'; notificationMessage.textContent = 'Successfully logged in!'; notification.classList.add('show'); setTimeout(function() { window.location.href = '#dashboard'; }, 1500); } else { // Simulate error loginButton.innerHTML = 'Sign in'; loginButton.disabled = false; notification.classList.add('error'); notificationIcon.innerHTML = '<svg class="svg-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"></path></svg>'; notificationMessage.textContent = 'Invalid email or password. Please try again.'; notification.classList.add('show'); setTimeout(function() { notification.classList.remove('show'); setTimeout(function() { notification.classList.remove('error'); }, 300); }, 3000); } }, 1500); }); // Input focus animations const inputs = document.querySelectorAll('.form-control'); inputs.forEach(input => { input.addEventListener('focus', function() { this.parentElement.style.transform = 'scale(1.02)'; this.parentElement.style.transition = 'transform 0.3s ease'; }); input.addEventListener('blur', function() { this.parentElement.style.transform = 'scale(1)'; }); }); // Close notification when clicked notification.addEventListener('click', function() { notification.classList.remove('show'); setTimeout(function() { notification.classList.remove('error'); notification.classList.remove('success'); }, 300); }); // Add keyframe animation to login button document.querySelector('.btn').addEventListener('mouseover', function() { this.style.animationName = 'pulse'; this.style.animationDuration = '2s'; this.style.animationTimingFunction = 'ease-in-out'; this.style.animationIterationCount = 'infinite'; }); document.querySelector('.btn').addEventListener('mouseout', function() { this.style.animationName = ''; }); }); // Helper function to create particles function createParticle(container) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random position const posX = Math.random() * 100; const posY = Math.random() * 100; // Random size const size = Math.random() * 4 + 2;
