Formulaire de connexion Glassmorphic

1,295 ALIDEV

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 April 2025

un code de metehan

14 September 2024

Formulaire de connexion moderne

28 August 2025

Archinova : Atelier d'architecture et de design | Turquie

HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphic Sign In/Sign Up Form - Rotating</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>

<div class="flip-container">
        <div class="flipper">
            <div class="front glass-form">
                <h2>تسجيل الدخول</h2>
                <input type="text" placeholder="اسم المستخدم">
                <input type="password" placeholder="كلمة المرور">
                <div class="remember-me">
                    <input type="checkbox" id="rememberMe">
                    <label for="rememberMe">تذكرني </label>
                </div>
                <button>تسجيل الدخول</button>
                <p>ليس لديك حساب؟ <span id="signUpToggle">سجل الآن</span></p>
            <div class="social-icons">
                    <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-google"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            
            <div class="back glass-form">
                <h2>إنشاء حساب</h2>
                <input type="text" placeholder="اسم المستخدم">
                <input type="email" placeholder="البريد الإلكتروني">
                <input type="password" placeholder="كلمة المرور">
                <input type="password" placeholder="تأكيد كلمة المرور">
                <button>إنشاء حساب</button>
                <p>لديك حساب بالفعل؟ <span id="signInToggle">تسجيل الدخول</span></p>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* --- التعديل هنا لإضافة خلفية --- */
    background: linear-gradient(135deg, #0d0e0f, #9bfefe); /* تدرج لوني من الأزرق الفاتح إلى البنفسجي الفاتح */
    /* يمكنك استبدال السطر أعلاه بخلفية صورة إذا أردت: */
    /* background: url('your-image.jpg') no-repeat center center fixed; */
    /* background-size: cover; */
    /* ---------------------------------- */
    overflow: hidden; /* لمنع ظهور أشرطة التمرير أثناء الحركة */
}

/* Container for 3D perspective */
.flip-container {
    perspective: 1000px; /* Important for 3D effect */
    width: 380px; /* Must match form width */
    height: 520px; /* Must match form height */
}

/* The flipper element that will actually rotate */
.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s; /* Longer transition for rotation */
    transform-style: preserve-3d; /* Key for preserving 3D space */
}

/* Rotated state */
.flip-container.flipped .flipper {
    transform: rotateY(180deg);
}

/* Common glassmorphic style for front and back of the form */
.glass-form {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Hide the back side when facing away */
    backface-visibility: hidden; /* Hide the back side when facing away */
    
    background: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}

/* Styling for the back side (Sign Up) */
.back {
    transform: rotateY(180deg); /* Initial rotation for the back side */
}

h2 {
    margin-bottom: 25px;
    font-size: 2.2em;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

input {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 80%;
    border-radius: 25px;
    box-sizing: border-box;
    color: #fff;
    outline: none;
    transition: background-color 0.3s ease;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

input:focus {
    background-color: rgba(255, 255, 255, 0.5);
}

button {
    background-color: #28a745;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    padding: 12px 45px;
    border-radius: 25px;
    border: 1px solid #28a745;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

p {
    margin-top: 20px;
    font-size: 0.9em;
}

span {
    color: #ffd700;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s ease;
}

span:hover {
    color: #ffc107;
    text-decoration: underline;
}

.remember-me {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 80%;
    justify-content: flex-start;
    color: #fff;
}

.remember-me input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    accent-color: #28a745;
}

.social-icons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    color: #e0f021;
    text-decoration: none;
    font-size: 1.4em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px hsla(60, 7%, 39%, 0.2);
}

.social-icon:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

document.addEventListener('DOMContentLoaded', () => {
    const flipContainer = document.querySelector('.flip-container');
    const signUpToggle = document.getElementById('signUpToggle');
    const signInToggle = document.getElementById('signInToggle');
    const rememberMeCheckbox = document.getElementById('rememberMe');
    const signInUsernameInput = document.querySelector('.front input[type="text"]');

// Function to flip to the sign-up panel
    signUpToggle.addEventListener('click', () => {
        flipContainer.classList.add('flipped');
    });

// Function to flip back to the sign-in panel
    signInToggle.addEventListener('click', () => {
        flipContainer.classList.remove('flipped');
    });

// "Remember Me" functionality using Local Storage
    // Load remembered username on page load
    const rememberedUsername = localStorage.getItem('rememberedUsername');
    if (rememberedUsername) {
        signInUsernameInput.value = rememberedUsername;
        rememberMeCheckbox.checked = true;
    }

// Example of saving "remember me" preference on sign-in (you'd integrate this with your actual sign-in logic)
    document.querySelector('.front button').addEventListener('click', () => {
        if (rememberMeCheckbox.checked) {
            localStorage.setItem('rememberedUsername', signInUsernameInput.value);
            // In a real app, you'd also save a token or session info securely
        } else {
            localStorage.removeItem('rememberedUsername');
        }
        // Add your actual sign-in form submission logic here
        alert('تسجيل الدخول (مع أو بدون تذكر المستخدم)');
    });
});