Un code de Yotva

1,695 Yotva

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 July 2025

Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

18 August 2024

Évaluation des émojis

16 April 2026

Configuration du chargeur HTML5 et de Firebase pour le jeu Escape Road

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Authentification - Vagues Liquides</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

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

.wave-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

.wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 200px;
            background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
            animation: wave-animation 10s ease-in-out infinite;
            opacity: 0.7;
        }

.wave:nth-child(2) {
            height: 150px;
            background: linear-gradient(45deg, rgba(118, 75, 162, 0.6), rgba(240, 147, 251, 0.6));
            animation: wave-animation 8s ease-in-out infinite reverse;
            opacity: 0.5;
        }

.wave:nth-child(3) {
            height: 100px;
            background: linear-gradient(45deg, rgba(240, 147, 251, 0.4), rgba(245, 87, 108, 0.4));
            animation: wave-animation 6s ease-in-out infinite;
            opacity: 0.3;
        }

.wave::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: 50% 50% 0 0;
        }

@keyframes wave-animation {
            0%, 100% {
                transform: translateX(-50%) translateY(0px);
                border-radius: 40% 60% 70% 30%;
            }
            25% {
                transform: translateX(-60%) translateY(-10px);
                border-radius: 30% 70% 50% 50%;
            }
            50% {
                transform: translateX(-70%) translateY(-20px);
                border-radius: 60% 40% 30% 70%;
            }
            75% {
                transform: translateX(-40%) translateY(-10px);
                border-radius: 50% 50% 60% 40%;
            }
        }

.floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

.bubble {
            position: absolute;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
            border-radius: 50%;
            backdrop-filter: blur(5px);
            animation: bubble-float 8s ease-in-out infinite;
        }

.bubble:nth-child(1) {
            width: 60px;
            height: 60px;
            left: 10%;
            animation-delay: 0s;
        }

.bubble:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 30%;
            animation-delay: 2s;
        }

.bubble:nth-child(3) {
            width: 80px;
            height: 80px;
            right: 20%;
            animation-delay: 4s;
        }

.bubble:nth-child(4) {
            width: 30px;
            height: 30px;
            right: 10%;
            animation-delay: 6s;
        }

@keyframes bubble-float {
            0%, 100% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
                transform: scale(1);
            }
            90% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                transform: translateY(-100px) scale(0);
                opacity: 0;
            }
        }

.container {
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 20px;
        }

.auth-box {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(25px);
            border-radius: 30px;
            padding: 50px;
            width: 420px;
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
            animation: float-in 1s ease-out;
        }

@keyframes float-in {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

.auth-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, 
                rgba(255, 255, 255, 0.1) 0%, 
                rgba(255, 255, 255, 0.05) 50%, 
                rgba(255, 255, 255, 0.1) 100%);
            border-radius: 30px;
            animation: shimmer 3s ease-in-out infinite;
            pointer-events: none;
        }

@keyframes shimmer {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

.logo-section {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

.logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            font-weight: bold;
            animation: logo-pulse 2s ease-in-out infinite;
            box-shadow: 0 10px 30px rgba(255, 154, 158, 0.4);
        }

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

.logo-title {
            color: white;
            font-size: 2.2rem;
            font-weight: 300;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

.logo-subtitle {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1rem;
            font-weight: 300;
        }

.tab-switcher {
            display: flex;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 5px;
            margin-bottom: 35px;
            position: relative;
            z-index: 2;
        }

.tab-btn {
            flex: 1;
            padding: 15px 25px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 1rem;
            font-weight: 500;
            position: relative;
            z-index: 3;
        }

.tab-btn.active {
            color: white;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }

.form-wrapper {
            position: relative;
            z-index: 2;
        }

.form-panel {
            display: none;
            animation: slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

.form-panel.active {
            display: block;
        }

@keyframes slide-in {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

.input-group {
            margin-bottom: 25px;
            position: relative;
        }

.input-label {
            display: block;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8px;
            font-size: 0.95rem;
            font-weight: 500;
        }

.input-field {
            width: 100%;
            padding: 18px 22px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
        }

.input-field::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

.input-field:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

.submit-button {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border: none;
            border-radius: 20px;
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 15px 35px rgba(255, 154, 158, 0.4);
            position: relative;
            overflow: hidden;
        }

.submit-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: translate(-50%, -50%);
        }

.submit-button:hover::before {
            width: 300px;
            height: 300px;
        }

.submit-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(255, 154, 158, 0.5);
        }

.submit-button:active {
            transform: translateY(-1px);
        }

.extra-options {
            text-align: center;
            margin-top: 25px;
        }

.extra-link {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }

.extra-link:hover {
            color: white;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

.social-section {
            margin-top: 30px;
            text-align: center;
        }

.social-divider {
            position: relative;
            margin-bottom: 20px;
        }

.social-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        }

.social-divider span {
            background: rgba(255, 255, 255, 0.1);
            padding: 0 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            backdrop-filter: blur(10px);
            border-radius: 15px;
        }

.social-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

.social-btn {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            color: white;
            font-size: 1.2rem;
        }

.social-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="wave-container">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
    </div>

<div class="container">
        <div class="auth-box">
            <div class="logo-section">
                <div class="logo">L</div>
                <h1 class="logo-title">Liquid</h1>
                <p class="logo-subtitle">Expérience fluide</p>
            </div>

<div class="tab-switcher">
                <button class="tab-btn active" onclick="showForm('login')">Connexion</button>
                <button class="tab-btn" onclick="showForm('register')">Inscription</button>
            </div>

<div class="form-wrapper">
                <div class="form-panel active" id="loginPanel">
                    <form>
                        <div class="input-group">
                            <label class="input-label">Adresse email</label>
                            <input type="email" class="input-field" placeholder="exemple@email.com" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Mot de passe</label>
                            <input type="password" class="input-field" placeholder="Votre mot de passe" required>
                        </div>
                        <button type="submit" class="submit-button">Se connecter</button>
                    </form>
                    
                    <div class="extra-options">
                        <a href="#" class="extra-link">Mot de passe oublié ?</a>
                    </div>

<div class="social-section">
                        <div class="social-divider">
                            <span>ou continuez avec</span>
                        </div>
                        <div class="social-buttons">
                            <button class="social-btn">G</button>
                            <button class="social-btn">F</button>
                            <button class="social-btn">T</button>
                        </div>
                    </div>
                </div>

<div class="form-panel" id="registerPanel">
                    <form>
                        <div class="input-group">
                            <label class="input-label">Nom complet</label>
                            <input type="text" class="input-field" placeholder="Votre nom complet" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Adresse email</label>
                            <input type="email" class="input-field" placeholder="exemple@email.com" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Mot de passe</label>
                            <input type="password" class="input-field" placeholder="Créer un mot de passe" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Confirmer le mot de passe</label>
                            <input type="password" class="input-field" placeholder="Répéter le mot de passe" required>
                        </div>
                        <button type="submit" class="submit-button">Créer un compte</button>
                    </form>

<div class="social-section">
                        <div class="social-divider">
                            <span>ou inscrivez-vous avec</span>
                        </div>
                        <div class="social-buttons">
                            <button class="social-btn">G</button>
                            <button class="social-btn">F</button>
                            <button class="social-btn">T</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Reset all tabs
            tabButtons.forEach(btn => btn.classList.remove('active'));
            loginPanel.classList.remove('active');
            registerPanel.classList.remove('active');

if (formType === 'login') {
                loginPanel.classList.add('active');
                tabButtons[0].classList.add('active');
            } else {
                registerPanel.classList.add('active');
                tabButtons[1].classList.add('active');
            }
        }

// Animation des inputs
        document.querySelectorAll('.input-field').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.style.transform = 'translateY(-2px)';
            });
            
            input.addEventListener('blur', function() {
                this.parentElement.style.transform = 'translateY(0)';
            });
        });

// Effet de clic sur les boutons sociaux
        document.querySelectorAll('.social-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 150);
            });
        });
    </script>
</body>
</html>

CSS