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

240 essingagiovany12

Abrir no Editor Publique Seu Código

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

Recomendado

11 July 2025

Menu de alternância CSS com ícones de fonte impressionantes

13 June 2025

carregamento de torradas de ovos

18 April 2025

Um código de Metehan

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

Menu de alternância CSS com ícones de fonte impressionantes

carregamento de torradas de ovos

Um código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS