نموذج تسجيل الدخول

أدوات التحكم

تسجيل الدخول

مرحبًا بك مرة أخرى! يرجى تسجيل الدخول للوصول إلى حسابك.

هل نسيت كلمة المرور؟ إنشاء حساب جديد

إنشاء حساب جديد

انضم إلينا! يرجى تعبئة النموذج أدناه لإنشاء حساب جديد.

لديك حساب بالفعل؟ تسجيل الدخول

نسيت كلمة المرور

أدخل بريدك الإلكتروني لإرسال رابط استعادة كلمة المرور.

العودة لتسجيل الدخول

مقتطف الشفرة:


<!-- انسخ هذا الكود وألصقه في ملف 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>نموذج تسجيل الدخول</title>
    <style>
        /* CSS هنا */
    </style>
</head>
<body>
    <div class="container">
        <!-- نموذج تسجيل الدخول -->
        <div class="form-container active" id="login-form">
            <h2>تسجيل الدخول</h2>
            <form>
                <div class="input-group">
                    <label for="email">البريد الإلكتروني</label>
                    <input type="email" id="email" placeholder="أدخل بريدك الإلكتروني" required>
                </div>
                <div class="input-group">
                    <label for="password">كلمة المرور</label>
                    <input type="password" id="password" placeholder="أدخل كلمة المرور" required>
                </div>
                <button type="submit" class="btn-login">تسجيل الدخول</button>
            </form>
            <div class="links">
                <a href="#" id="forgot-password-link">هل نسيت كلمة المرور؟</a>
                <a href="#" id="signup-link">إنشاء حساب جديد</a>
            </div>
        </div>

        <!-- نموذج إنشاء حساب جديد -->
        <div class="form-container" id="signup-form">
            <h2>إنشاء حساب جديد</h2>
            <form>
                <div class="input-group">
                    <label for="fullname">الاسم الكامل</label>
                    <input type="text" id="fullname" placeholder="أدخل اسمك الكامل" required>
                </div>
                <div class="input-group">
                    <label for="new-email">البريد الإلكتروني</label>
                    <input type="email" id="new-email" placeholder="أدخل بريدك الإلكتروني" required>
                </div>
                <div class="input-group">
                    <label for="new-password">كلمة المرور</label>
                    <input type="password" id="new-password" placeholder="أدخل كلمة المرور" required>
                </div>
                <div class="input-group">
                    <label for="confirm-password">تأكيد كلمة المرور</label>
                    <input type="password" id="confirm-password" placeholder="أكد كلمة المرور" required>
                </div>
                <button type="submit" class="btn-login">إنشاء حساب</button>
            </form>
            <div class="links">
                <a href="#" id="login-link">لديك حساب بالفعل؟ تسجيل الدخول</a>
            </div>
        </div>

        <!-- نموذج نسيان كلمة المرور -->
        <div class="form-container" id="forgot-password-form">
            <h2>نسيت كلمة المرور</h2>
            <form>
                <div class="input-group">
                    <label for="forgot-email">البريد الإلكتروني</label>
                    <input type="email" id="forgot-email" placeholder="أدخل بريدك الإلكتروني" required>
                </div>
                <button type="submit" class="btn-login">إرسال الرابط</button>
            </form>
            <div class="links">
                <a href="#" id="back-to-login-link">العودة لتسجيل الدخول</a>
            </div>
        </div>
    </div>

    <script>
        // JavaScript هنا
    </script>
</body>
</html>
تم التطوير بواسطة فريق أرزابريس