प्रमाणीकरण पृष्ठ लॉगिन/साइनअप

530 Yotva

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

22 August 2024

एक सरल लॉगिन पृष्ठ

25 August 2025

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

26 March 2025

साइकिल व्यवसाय के लिए लैंडिंग पृष्ठ

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>

प्रमाणीकरण पृष्ठ लॉगिन/साइनअप

अनुशंसित

एक सरल लॉगिन पृष्ठ

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

साइकिल व्यवसाय के लिए लैंडिंग पृष्ठ

HTML

CSS

JS

अनुशंसित

एक सरल लॉगिन पृष्ठ

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

साइकिल व्यवसाय के लिए लैंडिंग पृष्ठ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS