Un code par alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 March 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container-fluid min-vh-100 d-flex align-items-center justify-content-center">
        
        <div class="login-container">
            <div class="row g-0 h-100">
                
                <div class="col-lg-6 illustration-section">
                    <div class="illustration">
                        <div class="arch"></div>
                        <div class="illustration-image">
                            <i class="fas fa-user-circle illustration-icon"></i>
                        </div>
                        <div class="floating-elements">
                            <div class="floating-circle circle-1"></div>
                            <div class="floating-circle circle-2"></div>
                            <div class="floating-circle circle-3"></div>
                        </div>
                    </div>
                </div>

<div class="col-lg-6 form-section">
                    <div class="form-container">
                        <div class="form-header">
                            <h2 class="welcome-title">Welcome Back!</h2>
                            <p class="welcome-subtitle">Please sign in to your account</p>
                        </div>

<form class="login-form">
                            
                            <div class="form-group">
                                <label class="form-label">Email Address</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                    <input type="email" class="form-control" placeholder="Enter your email" required>
                                </div>
                            </div>

<div class="form-group">
                                <label class="form-label">Password</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" id="password" placeholder="Enter your password" required>
                                    <span class="input-group-text password-toggle" onclick="togglePassword()">
                                        <i class="fas fa-eye" id="toggleEye"></i>
                                    </span>
                                </div>
                            </div>

<div class="form-options">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="rememberMe">
                                    <label class="form-check-label" for="rememberMe">
                                        Remember me
                                    </label>
                                </div>
                                <a href="#" class="forgot-password">Forgot Password?</a>
                            </div>

<button type="submit" class="login-btn">
                                <span>Sign In</span>
                                <i class="fas fa-arrow-right"></i>
                            </button>

<div class="divider">
                                <span>or continue with</span>
                            </div>

<div class="social-login">
                                <button type="button" class="social-btn google-btn">
                                    <i class="fab fa-google"></i>
                                    <span>Google</span>
                                </button>
                                <button type="button" class="social-btn facebook-btn">
                                    <i class="fab fa-facebook-f"></i>
                                    <span>Facebook</span>
                                </button>
                                <button type="button" class="social-btn apple-btn">
                                    <i class="fab fa-apple"></i>
                                    <span>Apple</span>
                                </button>
                            </div>

<div class="signup-link">
                                Don't have an account? <a href="#" class="signup-text">Sign up here</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script src="script.js"></script>
</body>
</html>

CSS

:root {
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #f8fafc;
    --accent-color: #f59e0b;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --error-color: #ef4444;
    --success-color: #10b981;
    --white: #ffffff;
    --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --border-radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    overflow-x: hidden;
}

.container-fluid {
    padding: 20px;
}

.login-container {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-large);
    overflow: hidden;
    max-width: 1000px;
    width: 100%;
    min-height: 600px;
    position: relative;
    animation: slideUp 0.8s ease-out;
}

/* Illustration Section */
.illustration-section {
    position: relative;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

.illustration {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.arch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 50% 50%;
    backdrop-filter: blur(10px);
    animation: float 6s ease-in-out infinite;
}

.illustration-icon {
    font-size: 120px;
    color: var(--white);
    opacity: 0.9;
    animation: pulse 2s ease-in-out infinite;
    z-index: 2;
}

.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.circle-1 {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 10%;
    animation: float 4s ease-in-out infinite;
}

.circle-2 {
    width: 60px;
    height: 60px;
    top: 60%;
    right: 15%;
    animation: float 5s ease-in-out infinite reverse;
}

.circle-3 {
    width: 40px;
    height: 40px;
    bottom: 20%;
    left: 20%;
    animation: float 3s ease-in-out infinite;
}

/* Form Section */
.form-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    min-height: 600px;
}

.form-container {
    width: 100%;
    max-width: 400px;
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.welcome-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    animation: slideUp 0.8s ease-out 0.2s both;
}

.welcome-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 400;
    animation: slideUp 0.8s ease-out 0.4s both;
}

.login-form {
    animation: slideUp 0.8s ease-out 0.6s both;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.input-group {
    position: relative;
    display: flex;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
}

.input-group:focus-within {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.input-group-text {
    background: var(--secondary-color);
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    font-size: 16px;
    transition: var(--transition);
}

.input-group:focus-within .input-group-text {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

.form-control {
    border: none;
    padding: 16px;
    font-size: 16px;
    background: var(--white);
    color: var(--text-primary);
    transition: var(--transition);
    flex: 1;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
    background: rgba(99, 102, 241, 0.02);
}

.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.password-toggle {
    cursor: pointer;
    background: var(--white);
    transition: var(--transition);
}

.password-toggle:hover {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.form-check {
    display: flex;
    align-items: center;
}

.form-check-input {
    margin-right: 8px;
    accent-color: var(--primary-color);
}

.form-check-label {
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.forgot-password {
    font-size: 14px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.forgot-password:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--border-radius);
    padding: 16px;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-large);
}

.login-btn:active {
    transform: translateY(0);
}

.login-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: var(--transition);
}

.login-btn:hover::before {
    left: 100%;
}

.divider {
    text-align: center;
    margin: 32px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.divider span {
    background: var(--white);
    padding: 0 20px;
    color: var(--text-secondary);
    font-size: 14px;
    position: relative;
}

.social-login {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
}

.social-btn {
    flex: 1;
    border: 2px solid var(--border-color);
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
    font-weight: 500;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.google-btn:hover {
    border-color: #db4437;
    color: #db4437;
}

.facebook-btn:hover {
    border-color: #4267B2;
    color: #4267B2;
}

.apple-btn:hover {
    border-color: #000;
    color: #000;
}

.signup-link {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}

.signup-text {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.signup-text:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Responsive Design */
@media (max-width: 991px) {
    .login-container {
        max-width: 500px;
    }
    
    .illustration-section {
        min-height: 300px;
    }
    
    .form-section {
        padding: 40px 30px;
    }
    
    .welcome-title {
        font-size: 28px;
    }
    
    .social-login {
        flex-direction: column;
    }
    
    .social-btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .container-fluid {
        padding: 15px;
    }
    
    .login-container {
        border-radius: 16px;
        min-height: auto;
    }
    
    .illustration-section {
        min-height: 250px;
    }
    
    .form-section {
        padding: 30px 20px;
    }
    
    .welcome-title {
        font-size: 24px;
    }
    
    .form-container {
        max-width: 100%;
    }
    
    .arch {
        width: 200px;
        height: 100px;
    }
    
    .illustration-icon {
        font-size: 80px;
    }
}

@media (max-width: 480px) {
    .form-header {
        margin-bottom: 30px;
    }
    
    .welcome-title {
        font-size: 22px;
    }
    
    .welcome-subtitle {
        font-size: 14px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-control {
        padding: 14px;
        font-size: 14px;
    }
    
    .login-btn {
        padding: 14px;
        font-size: 14px;
    }
    
    .social-btn {
        padding: 10px;
        font-size: 12px;
    }
    
    .form-options {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

/* Loading States */
.login-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.login-btn.loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid var(--white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Focus and Error States */
.form-control.error {
    border-color: var(--error-color);
    background: rgba(239, 68, 68, 0.05);
}

.form-control.success {
    border-color: var(--success-color);
    background: rgba(16, 185, 129, 0.05);
}

.error-message {
    color: var(--error-color);
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

.form-group.error .error-message {
    display: block;
}

JS

// Password toggle functionality
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const toggleIcon = document.getElementById('toggleEye');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    }
}

// Form validation
class FormValidator {
    constructor() {
        this.form = document.querySelector('.login-form');
        this.emailInput = this.form.querySelector('input[type="email"]');
        this.passwordInput = this.form.querySelector('input[type="password"]');
        this.submitBtn = this.form.querySelector('.login-btn');
        
        this.init();
    }
    
    init() {
        // Add event listeners
        this.form.addEventListener('submit', this.handleSubmit.bind(this));
        this.emailInput.addEventListener('blur', this.validateEmail.bind(this));
        this.passwordInput.addEventListener('blur', this.validatePassword.bind(this));
        this.emailInput.addEventListener('input', this.clearError.bind(this));
        this.passwordInput.addEventListener('input', this.clearError.bind(this));
        
        // Add real-time validation
        this.emailInput.addEventListener('input', this.debounce(this.validateEmail.bind(this), 500));
        this.passwordInput.addEventListener('input', this.debounce(this.validatePassword.bind(this), 500));
    }
    
    validateEmail() {
        const email = this.emailInput.value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        
        if (!email) {
            this.showError(this.emailInput, 'Email is required');
            return false;
        }
        
        if (!emailRegex.test(email)) {
            this.showError(this.emailInput, 'Please enter a valid email address');
            return false;
        }
        
        this.showSuccess(this.emailInput);
        return true;
    }
    
    validatePassword() {
        const password = this.passwordInput.value;
        
        if (!password) {
            this.showError(this.passwordInput, 'Password is required');
            return false;
        }
        
        if (password.length < 6) {
            this.showError(this.passwordInput, 'Password must be at least 6 characters');
            return false;
        }
        
        this.showSuccess(this.passwordInput);
        return true;
    }
    
    showError(input, message) {
        const formGroup = input.closest('.form-group');
        const errorElement = formGroup.querySelector('.error-message') || this.createErrorElement();
        
        input.classList.add('error');
        input.classList.remove('success');
        formGroup.classList.add('error');
        
        errorElement.textContent = message;
        if (!formGroup.querySelector('.error-message')) {
            formGroup.appendChild(errorElement);
        }
    }
    
    showSuccess(input) {
        const formGroup = input.closest('.form-group');
        
        input.classList.remove('error');
        input.classList.add('success');
        formGroup.classList.remove('error');
        
        const errorElement = formGroup.querySelector('.error-message');
        if (errorElement) {
            errorElement.remove();
        }
    }
    
    clearError(e) {
        const input = e.target;
        const formGroup = input.closest('.form-group');
        
        input.classList.remove('error');
        formGroup.classList.remove('error');
        
        const errorElement = formGroup.querySelector('.error-message');
        if (errorElement) {
            errorElement.remove();
        }
    }
    
    createErrorElement() {
        const errorElement = document.createElement('div');
        errorElement.className = 'error-message';
        return errorElement;
    }
    
    handleSubmit(e) {
        e.preventDefault();
        
        const isEmailValid = this.validateEmail();
        const isPasswordValid = this.validatePassword();
        
        if (isEmailValid && isPasswordValid) {
            this.simulateLogin();
        }
    }
    
    simulateLogin() {
        const originalText = this.submitBtn.innerHTML;
        this.submitBtn.classList.add('loading');
        this.submitBtn.innerHTML = '<span>Signing In...</span>';
        
        // Simulate API call
        setTimeout(() => {
            this.submitBtn.classList.remove('loading');
            this.submitBtn.innerHTML = originalText;
            
            // Show success message or redirect
            this.showLoginSuccess();
        }, 2000);
    }
    
    showLoginSuccess() {
        const toast = this.createToast('Login successful! Welcome back.', 'success');
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
    
    createToast(message, type) {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
            <span>${message}</span>
        `;
        
        // Add toast styles
        Object.assign(toast.style, {
            position: 'fixed',
            top: '20px',
            right: '20px',
            background: type === 'success' ? '#10b981' : '#ef4444',
            color: 'white',
            padding: '16px 20px',
            borderRadius: '8px',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
            display: 'flex',
            alignItems: 'center',
            gap: '10px',
            fontSize: '14px',
            fontWeight: '500',
            zIndex: '9999',
            animation: 'slideInRight 0.3s ease-out'
        });
        
        return toast;
    }
    
    debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
}

// Social login handlers
function handleSocialLogin(provider) {
    console.log(`Logging in with ${provider}`);
    
    const toast = document.createElement('div');
    toast.textContent = `${provider} login functionality would be implemented here`;
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #6366f1;
        color: white;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 14px;
        z-index: 9999;
    `;
    
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

// Enhanced animations
function addEnhancedAnimations() {
    // Stagger animation for form elements
    const formElements = document.querySelectorAll('.form-group, .form-options, .login-btn, .divider, .social-login, .signup-link');
    
    formElements.forEach((element, index) => {
        element.style.animationDelay = `${0.1 * index}s`;
        element.style.animation = 'slideUp 0.6s ease-out both';
    });
    
    // Floating animation for social buttons
    const socialBtns = document.querySelectorAll('.social-btn');
    socialBtns.forEach(btn => {
        btn.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-3px) scale(1.02)';
        });
        
        btn.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
}

// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    // Initialize form validator
    new FormValidator();
    
    // Add enhanced animations
    addEnhancedAnimations();
    
    // Add social login event listeners
    document.querySelectorAll('.social-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const provider = this.querySelector('span').textContent;
            handleSocialLogin(provider);
        });
    });
    
    // Add smooth scrolling for mobile
    const container = document.querySelector('.login-container');
    if (window.innerWidth <= 768) {
        container.style.scrollBehavior = 'smooth';
    }
    
    // Add keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && e.target.matches('input')) {
            const form = e.target.closest('form');
            const inputs = Array.from(form.querySelectorAll('input'));
            const currentIndex = inputs.indexOf(e.target);
            
            if (currentIndex < inputs.length - 1) {
                inputs[currentIndex + 1].focus();
            } else {
                form.querySelector('.login-btn').click();
            }
        }
    });
});

// Add toast animation styles
const toastStyles = document.createElement('style');
toastStyles.textContent = `
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity:0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
`;
document.head.appendChild(toastStyles);

// Performance optimization
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

// Lazy load animations
document.querySelectorAll('.floating-circle').forEach(circle => {
    observer.observe(circle);
});

// Add ripple effect to login button
function addRippleEffect() {
    const btn = document.querySelector('.login-btn');
    
    btn.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            left: ${x}px;
            top: ${y}px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s ease-out;
            pointer-events: none;
        `;
        
        this.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 600);
    });
}

// Add ripple animation styles
const rippleStyles = document.createElement('style');
rippleStyles.textContent = `
    @keyframes ripple {
        to {
            transform: scale(2);
            opacity: 0;
        }
    }
`;
document.head.appendChild(rippleStyles);

// Initialize ripple effect
setTimeout(addRippleEffect, 100);

Un code par alejandrokundrah

Recommandé

Code HTML du menu latéral

Un code de Ghost????

Un code par logicalcode2

HTML

CSS

JS

Recommandé

Code HTML du menu latéral

Un code de Ghost????

Un code par logicalcode2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS