Formulário de inscrição/cadastro rotativo em árabe (Glassmorphic)

872 essingagiovany12

Abrir no Editor Video Publique Seu Código

Formulário de inscrição/cadastro rotativo em árabe (Glassmorphic)

Recomendado

19 November 2025

Formulário de cadastro HTML animado com estilização CSS

22 June 2025

Modelo HTML do painel de administração

16 January 2026

Jogue Age of War 2: Flash Game com o emulador Ruffle.

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>envoyer</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

Formulário de cadastro HTML animado com estilização CSS

Modelo HTML do painel de administração

Jogue Age of War 2: Flash Game com o emulador Ruffle.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS