Página de autenticación Iniciar sesión/Registrarse

1,229 Yotva

Abrir en el editor Publica tu código

Página de autenticación Iniciar sesión/Registrarse

Recomendado

27 November 2025

Ejemplo de código de botón HTML

12 August 2025

Animación de la barra de carga CSS

26 September 2025

Fragmento de código de animación de goteo de dopamina CSS

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion - VrcFoss</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0e0e10 100%);
            color: white;
            font-family: 'Poppins', sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

/* Fond étoilé animé */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

.star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: twinkle 4s infinite;
        }

.star:nth-child(odd) {
            background: #00ffff;
            animation-delay: -2s;
        }

.star:nth-child(3n) {
            animation-delay: -1s;
        }

@keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

/* Container principal */
        .auth-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 2rem;
            position: relative;
            z-index: 10;
        }

/* Boîte d'authentification */
        .auth-box {
            background: rgba(15, 15, 20, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 20px;
            padding: 3rem;
            width: 100%;
            max-width: 450px;
            box-shadow: 
                0 0 50px rgba(0, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

.auth-box.active {
            box-shadow: 
                0 0 40px rgba(0, 255, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

/* Titre */
        .auth-box h2 {
            text-align: center;
            margin-bottom: 2rem;
            font-weight: 600;
            font-size: 2rem;
            color: #ffffff;
            position: relative;
        }

.auth-box h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00ffff, transparent);
        }

/* Groupes de formulaire */
        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

label {
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: #ccc;
            transition: color 0.3s ease;
        }

/* Champs de saisie */
        .input-wrapper {
            position: relative;
        }

input[type="email"],
        input[type="password"],
        input[type="text"] {
            width: 100%;
            padding: 1rem;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            color: white;
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

input::placeholder {
            color: #666;
            transition: color 0.3s ease;
        }

input:focus {
            outline: none;
            border-color: #00ffff;
            background: rgba(0, 255, 255, 0.05);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
            transform: translateY(-1px);
        }

input:focus::placeholder {
            color: #999;
        }

input:focus + .input-glow {
            opacity: 1;
        }

.input-glow {
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #00ffff, transparent, #00ffff);
            border-radius: 14px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

/* Bouton principal */
        .cta-button {
            width: 100%;
            margin-top: 1.5rem;
            padding: 1rem;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #00ffff, #00cccc);
            color: #0a0a0a;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

.cta-button::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.6s ease;
        }

.cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
        }

.cta-button:hover::before {
            left: 100%;
        }

.cta-button:active {
            transform: translateY(0);
        }

/* Lien de basculement */
        .switch-link {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.95rem;
            color: #ccc;
        }

.switch-link a {
            color: #00ffff;
            text-decoration: none;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

.switch-link a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #00ffff;
            transition: width 0.3s ease;
        }

.switch-link a:hover {
            color: #ffffff;
        }

.switch-link a:hover::after {
            width: 100%;
        }

/* Animations de transition */
        .auth-box {
            opacity: 1;
            transform: translateX(0);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

.auth-box.hidden {
            display: none !important;
        }

.auth-box.slide-left {
            opacity: 0;
            transform: translateX(-100%);
        }

.auth-box.slide-right {
            opacity: 0;
            transform: translateX(100%);
        }

/* Messages d'erreur */
        .error-message {
            color: #ff4444;
            font-size: 0.85rem;
            margin-top: 0.5rem;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            display: none;
        }

.error-message.show {
            opacity: 1;
            transform: translateY(0);
            display: block;
        }

.form-group.error input {
            border-color: #ff4444 !important;
            box-shadow: 0 0 10px rgba(255, 68, 68, 0.3) !important;
        }

.form-group.error label {
            color: #ff4444;
        }
        @media (max-width: 480px) {
            .auth-container {
                padding: 1rem;
            }
            
            .auth-box {
                padding: 2rem;
            }
            
            .auth-box h2 {
                font-size: 1.5rem;
            }
        }

/* Particules flottantes */
        .floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

.particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(0, 255, 255, 0.3);
            border-radius: 50%;
            animation: float 6s infinite ease-in-out;
        }

@keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }
            50% {
                transform: translateY(-100px) rotate(180deg);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    
    <div class="stars" id="stars"></div>
    
    
    <div class="floating-particles" id="particles"></div>

<main class="auth-container">
        
        <section class="auth-box" id="login-box">
            <h2>Connexion</h2>
            <form id="login-form">
                <div class="form-group">
                    <label for="email">Email</label>
                    <div class="input-wrapper">
                        <input type="email" id="email" name="email" placeholder="exemple@vrcfoss.fr" required autocomplete="username">
                        <div class="input-glow"></div>
                    </div>
                    <div class="error-message" id="email-error"></div>
                </div>
                <div class="form-group">
                    <label for="password">Mot de passe</label>
                    <div class="input-wrapper">
                        <input type="password" id="password" name="password" placeholder="••••••••" required autocomplete="current-password">
                        <div class="input-glow"></div>
                    </div>
                    <div class="error-message" id="password-error"></div>
                </div>
                <button type="submit" class="cta-button">Se connecter</button>
                <p class="switch-link">
                    Pas encore de compte ? <a id="show-signup">S'inscrire</a>
                </p>
            </form>
        </section>

<section class="auth-box hidden" id="signup-box">
            <h2>Inscription</h2>
            <form id="signup-form">
                <div class="form-group">
                    <label for="signup-name">Nom</label>
                    <div class="input-wrapper">
                        <input type="text" id="signup-name" name="signup-name" placeholder="John Doe" required autocomplete="name">
                        <div class="input-glow"></div>
                    </div>
                    <div class="error-message" id="signup-name-error"></div>
                </div>
                <div class="form-group">
                    <label for="signup-email">Email</label>
                    <div class="input-wrapper">
                        <input type="email" id="signup-email" name="signup-email" placeholder="exemple@vrcfoss.fr" required autocomplete="username">
                        <div class="input-glow"></div>
                    </div>
                    <div class="error-message" id="signup-email-error"></div>
                </div>
                <div class="form-group">
                    <label for="signup-password">Mot de passe</label>
                    <div class="input-wrapper">
                        <input type="password" id="signup-password" name="signup-password" placeholder="••••••••" required autocomplete="new-password">
                        <div class="input-glow"></div>
                    </div>
                    <div class="error-message" id="signup-password-error"></div>
                </div>
                <div class="form-group">
                    <label for="signup-confirm">Confirmer le mot de passe</label>
                    <div class="input-wrapper">
                        <input type="password" id="signup-confirm" name="signup-confirm" placeholder="••••••••" required autocomplete="new-password">
                        <div class="input-glow"></div>
                    </div>
                    <div class="error-message" id="signup-confirm-error"></div>
                </div>
                <button type="submit" class="cta-button">Créer un compte</button>
                <p class="switch-link">
                    Déjà inscrit ? <a id="show-login">Se connecter</a>
                </p>
            </form>
        </section>
    </main>

// Fonctions de validation
        function showError(inputId, message) {
            const input = document.getElementById(inputId);
            const formGroup = input.closest('.form-group');
            const errorDiv = document.getElementById(inputId + '-error');
            
            formGroup.classList.add('error');
            errorDiv.textContent = message;
            errorDiv.classList.add('show');
        }

function validateEmail(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }

function validatePassword(password) {
            return password.length >= 6;
        }
        let isTransitioning = false;

// Fonction de transition entre les formulaires
        function switchForms(hideBox, showBox, direction) {
            if (isTransitioning) return; // Empêcher les clics multiples
            
            isTransitioning = true;
            
            // Préparer la nouvelle boîte
            showBox.classList.remove('hidden');
            showBox.style.display = 'block';
            
            if (direction === 'toSignup') {
                showBox.classList.add('slide-right');
            } else {
                showBox.classList.add('slide-left');
            }
            
            // Forcer le reflow pour s'assurer que les styles sont appliqués
            showBox.offsetHeight;
            
            // Démarrer la transition
            setTimeout(() => {
                if (direction === 'toSignup') {
                    hideBox.classList.add('slide-left');
                    showBox.classList.remove('slide-right');
                } else {
                    hideBox.classList.add('slide-right');
                    showBox.classList.remove('slide-left');
                }
            }, 10);
            
            // Nettoyer après la transition
            setTimeout(() => {
                hideBox.classList.add('hidden');
                hideBox.classList.remove('slide-left', 'slide-right');
                showBox.classList.remove('slide-left', 'slide-right');
                isTransitioning = false;
            }, 500);
        }

// Gestionnaires d'événements
        showSignup.addEventListener('click', function(e) {
            e.preventDefault();
            switchForms(loginBox, signupBox, 'toSignup');
        });

showLogin.addEventListener('click', function(e) {
            e.preventDefault();
            switchForms(signupBox, loginBox, 'toLogin');
        });

// Génération des étoiles
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const numberOfStars = 100;

for (let i = 0; i < numberOfStars; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.animationDelay = Math.random() * 4 + 's';
                starsContainer.appendChild(star);
            }
        }

// Génération des particules flottantes
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const numberOfParticles = 20;

for (let i = 0; i < numberOfParticles; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = '100%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 4) + 's';
                particlesContainer.appendChild(particle);
            }
        }

// Effet de focus amélioré pour les champs
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('focus', function() {
                this.closest('.auth-box').classList.add('active');
            });

input.addEventListener('blur', function() {
                // Vérifier si aucun autre input dans la même boîte n'a le focus
                setTimeout(() => {
                    const authBox = this.closest('.auth-box');
                    const focusedInput = authBox.querySelector('input:focus');
                    if (!focusedInput) {
                        authBox.classList.remove('active');
                    }
                }, 10);
            });
        });

// Validation des formulaires avec feedback visuel
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            clearAllErrors('login-form');
            
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            let hasErrors = false;
            
            // Validation email
            if (!email) {
                showError('email', 'L\'email est requis');
                hasErrors = true;
            } else if (!validateEmail(email)) {
                showError('email', 'Format d\'email invalide');
                hasErrors = true;
            }
            
            // Validation mot de passe
            if (!password) {
                showError('password', 'Le mot de passe est requis');
                hasErrors = true;
            } else if (password.length < 6) {
                showError('password', 'Le mot de passe doit contenir au moins 6 caractères');
                hasErrors = true;
            }
            
            if (hasErrors) return;
            
            // Animation de succès
            const button = this.querySelector('.cta-button');
            const originalText = button.textContent;
            button.style.background = 'linear-gradient(135deg, #00ff88, #00cc66)';
            button.textContent = 'Connexion réussie !';
            
            setTimeout(() => {
                button.style.background = '';
                button.textContent = originalText;
            }, 2000);
        });

// Effacement des erreurs en temps réel
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('input', function() {
                if (this.closest('.form-group').classList.contains('error')) {
                    clearError(this.id);
                }
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
            createStars();
            createParticles();
        });

// Effet de parallaxe sur le mouvement de la souris
        document.addEventListener('mousemove', function(e) {
            const mouseX = e.clientX / window.innerWidth;
            const mouseY = e.clientY / window.innerHeight;
            
            const stars = document.querySelectorAll('.star');
            stars.forEach((star, index) => {
                const speed = (index % 3 + 1) * 0.5;
                const x = (mouseX - 0.5) * speed;
                const y = (mouseY - 0.5) * speed;
                star.style.transform = `translate(${x}px, ${y}px)`;
            });
        });
    </script>
</body>
</html>

CSS