Formulario de inicio de sesión de Glassmorphic

802 ALIDEV

Abrir en el editor Video Publica tu código

Formulario de inicio de sesión de Glassmorphic

Recomendado

20 January 2026

Generador de contraseñas de Roblox: seguro y aleatorio en línea

23 February 2025

Un código de ha11072004cc

6 August 2025

Partículas de Morphing con Three.js

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);
}

JS

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('تسجيل الدخول (مع أو بدون تذكر المستخدم)');
    });
});

Recomendado

Generador de contraseñas de Roblox: seguro y aleatorio en línea

Un código de ha11072004cc

Partículas de Morphing con Three.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS