Update login.html

login.html

@@ -20,32 +20,14 @@
             justify-content: center;
             position: relative;
             padding: 20px;
-            background: #ffffff;
+            background: linear-gradient(135deg, #f6f8fc 0%, #e9ecef 100%);
             color: #333;
         }
 
-        .logo-container {
-            position: absolute;
-            top: 40px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 160px;
-            height: 160px;
-            background: #ffffff;
-            border-radius: 50%;
-            padding: 12px;
-            box-shadow: 0 4px 35px rgba(218, 165, 32, 0.35);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 2;
-        }
-
         .container {
             position: relative;
-            width: 480px;
-            margin-top: 100px;
-            z-index: 1;
+            width: 420px;
+            min-height: 480px;
             perspective: 1000px;
         }
 
@@ -64,30 +46,29 @@
         .form-box {
             position: absolute;
             width: 100%;
-            background: #ffffff;
+            height: 100%;
             padding: 40px;
+            background: rgba(255, 255, 255, 0.98);
             border-radius: 24px;
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
-            border: 1px solid rgba(218, 165, 32, 0.35);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
             backface-visibility: hidden;
-        }
-
-        .login-form {
-            transform: rotateY(0deg);
+            border: 1px solid rgba(200, 200, 200, 0.3);
+            backdrop-filter: blur(10px);
         }
 
         .register-form {
             transform: rotateY(180deg);
+            height: auto;
         }
 
         h2 {
             text-align: center;
-            color: #000;
-            margin-bottom: 30px;
+            color: #1a1a1a;
+            margin-bottom: 35px;
             font-size: 32px;
             font-weight: 700;
             position: relative;
-            padding-bottom: 15px;
+            padding-bottom: 18px;
         }
 
         h2::after {
@@ -103,40 +84,27 @@
         }
 
         .input-group {
-            margin-bottom: 20px;
+            margin-bottom: 24px;
             position: relative;
         }
 
-        .input-group label {
-            display: block;
-            margin-bottom: 8px;
-            color: #555;
-            font-weight: 500;
-        }
-
-        input, select {
+        input {
             width: 100%;
-            padding: 14px 20px;
-            border: 2px solid rgba(218, 165, 32, 0.35);
-            border-radius: 12px;
-            font-size: 15px;
+            padding: 16px 22px;
+            border: 2px solid rgba(218, 165, 32, 0.25);
+            border-radius: 16px;
+            font-size: 16px;
             transition: all 0.3s ease;
-            background: #ffffff;
+            background: rgba(255, 255, 255, 0.9);
             color: #333;
         }
 
-        input:focus, select:focus {
+        input:focus {
             border-color: #DAA520;
-            box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
+            background: white;
+            box-shadow: 0 0 25px rgba(218, 165, 32, 0.2);
             outline: none;
-        }
-
-        select {
-            appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-6-6h12z'/%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: left 20px center;
-            padding-left: 40px;
+            transform: translateY(-2px);
         }
 
         button {
@@ -144,470 +112,410 @@
             padding: 16px;
             background: linear-gradient(135deg, #DAA520 0%, #FFD700 100%);
             border: none;
-            border-radius: 14px;
+            border-radius: 16px;
             color: #000;
             font-size: 18px;
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
-            margin-top: 10px;
+            margin-bottom: 22px;
             position: relative;
+            overflow: hidden;
         }
 
-        button:disabled {
-            opacity: 0.7;
-            cursor: not-allowed;
-        }
-
-        button:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(218, 165, 32, 0.4);
+        button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(218, 165, 32, 0.3);
         }
 
         .toggle-btn {
             background: transparent;
             color: #DAA520;
             border: 2px solid #DAA520;
-            margin-top: 20px;
+            font-weight: 500;
         }
 
         .toggle-btn:hover {
-            background: #DAA520;
-            color: white;
-        }
-
-        .form-footer {
-            text-align: center;
-            margin-top: 25px;
-            padding-top: 20px;
-            border-top: 1px solid rgba(218, 165, 32, 0.25);
-            color: #666;
+            background: rgba(218, 165, 32, 0.1);
+            color: #DAA520;
+            transform: translateY(-2px);
         }
 
         .message {
-            padding: 12px;
             margin-top: 15px;
-            border-radius: 8px;
             text-align: center;
-            display: none;
+            padding: 14px;
+            border-radius: 14px;
             font-size: 14px;
-            line-height: 1.5;
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
 
         .message.show {
-            display: block;
-            animation: fadeIn 0.3s ease-in;
+            opacity: 1;
         }
 
-        .message.error {
-            background-color: #ffebee;
-            color: #d32f2f;
-            border: 1px solid #ffcdd2;
+        .error {
+            color: #D32F2F;
+            background-color: rgba(255, 235, 238, 0.95);
+            border: 1px solid #FFCDD2;
         }
 
-        .message.success {
-            background-color: #e8f5e9;
-            color: #388e3c;
-            border: 1px solid #c8e6c9;
+        .success {
+            color: #388E3C;
+            background-color: rgba(232, 245, 233, 0.95);
+            border: 1px solid #C8E6C9;
         }
 
-        .loading-spinner {
-            display: none;
-            width: 20px;
-            height: 20px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: #000;
-            animation: spin 1s ease-in-out infinite;
-            position: absolute;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
+        .terms {
+            text-align: center;
+            font-size: 14px;
+            margin-top: 20px;
+            color: #666;
+            line-height: 1.6;
         }
 
-        @keyframes spin {
-            to { transform: translateY(-50%) rotate(360deg); }
+        .terms a {
+            color: #DAA520;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s ease;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(-10px); }
-            to { opacity: 1; transform: translateY(0); }
+        .terms a:hover {
+            color: #FFD700;
         }
 
-        @media (max-width: 520px) {
+        @media (max-width: 480px) {
             .container {
                 width: 100%;
-                padding: 0 15px;
+                max-width: 380px;
             }
-            
+
             .form-box {
-                padding: 30px 20px;
+                padding: 30px 25px;
             }
 
             h2 {
-                font-size: 26px;
+                font-size: 28px;
+                margin-bottom: 25px;
+            }
+
+            input {
+                padding: 14px 20px;
+                font-size: 15px;
             }
 
-            .logo-container {
-                width: 120px;
-                height: 120px;
-                top: 20px;
+            button {
+                padding: 14px;
+                font-size: 16px;
             }
         }
+
+        /* إضافة تأثيرات حركية */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .form-box {
+            animation: fadeIn 0.6s ease-out;
+        }
+
+        input::placeholder {
+            color: #999;
+            transition: color 0.3s ease;
+        }
+
+        input:focus::placeholder {
+            color: #DAA520;
+        }
+
+        /* تحسين تأثيرات التحميل */
+        button.loading {
+            position: relative;
+            pointer-events: none;
+        }
+
+        button.loading::after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            top: 50%;
+            left: 50%;
+            margin: -10px 0 0 -10px;
+            border: 2px solid rgba(0, 0, 0, 0.1);
+            border-left-color: #000;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body>
-    <div class="logo-container">
-        <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" style="width: 100%; height: 100%; object-fit: contain; border-radius: 50%;">
-    </div>
-    
     <div class="container">
         <div class="forms-container">
-            <!-- نموذج تسجيل الدخول -->
             <div class="form-box login-form">
-                <h2>تسجيل الدخول</h2>
-                <form id="loginForm" onsubmit="return handleLogin(event)">
-                    <div class="input-group">
-                        <label>البريد الإلكتروني</label>
-                        <input type="email" id="loginEmail" required placeholder="أدخل بريدك الإلكتروني">
-                    </div>
-
-                    <div class="input-group">
-                        <label>كلمة المرور</label>
-                        <input type="password" id="loginPassword" required placeholder="أدخل كلمة المرور">
-                    </div>
-
-                    <button type="submit">
-                        تسجيل الدخول
-                        <span class="loading-spinner"></span>
-                    </button>
-                    <div id="loginMessage" class="message"></div>
-                </form>
-                
-                <button class="toggle-btn" onclick="toggleForm()">إنشاء حساب جديد</button>
-                
-                <div class="form-footer">
-                    منصة ذكاء اصطناعي قانوني موثوقة ومرخصة
+                <h2>مرحباً بعودتك</h2>
+                <div class="input-group">
+                    <input type="text" id="loginUsername" placeholder="البريد الإلكتروني">
+                </div>
+                <div class="input-group">
+                    <input type="password" id="loginPassword" placeholder="كلمة المرور">
+                </div>
+                <button onclick="login()">تسجيل الدخول</button>
+                <div id="loginMessage" class="message"></div>
+                <div class="toggle-form">
+                    <button class="toggle-btn" onclick="toggleForm()">إنشاء حساب جديد</button>
                 </div>
             </div>
 
-            <!-- نموذج إنشاء حساب -->
             <div class="form-box register-form">
-                <h2>إنشاء حساب جديد</h2>
-                <form id="registerForm" onsubmit="return handleRegister(event)">
-                    <div class="input-group">
-                        <label>اسم المكتب/الشركة</label>
-                        <input type="text" id="officeName" required placeholder="أدخل اسم المكتب أو الشركة">
-                    </div>
-                    
-                    <div class="input-group">
-                        <label>صفة المسجل</label>
-                        <select id="userRole" required>
-                            <option value="">اختر صفتك</option>
-                            <option value="owner">مالك المكتب</option>
-                            <option value="lawyer">محامي</option>
-                            <option value="employee">موظف في المكتب</option>
-                        </select>
-                    </div>
-
-                    <div class="input-group">
-                        <label>رقم الهاتف</label>
-                        <input type="tel" id="phone" required placeholder="01xxxxxxxxx" pattern="((\+201|01)[0-2|5]\d{8})">
-                    </div>
-
-                    <div class="input-group">
-                        <label>البريد الإلكتروني</label>
-                        <input type="email" id="registerEmail" required placeholder="[email protected]">
-                    </div>
-
-                    <div class="input-group">
-                        <label>كلمة المرور</label>
-                        <input type="password" id="registerPassword" required placeholder="8 أحرف على الأقل" minlength="8">
-                    </div>
-
-                    <button type="submit">
-                        إنشاء الحساب
-                        <span class="loading-spinner"></span>
-                    </button>
-                    <div id="registerMessage" class="message"></div>
-                </form>
-                
-                <button class="toggle-btn" onclick="toggleForm()">العودة لتسجيل الدخول</button>
-                
-                <div class="form-footer">
-                    بالتسجيل، أنت توافق على <a href="https://ufastpro.com/%d8%b3%d9%8a%d8%a7%d8%b3%d8%a9-%d8%a7%d9%84%d8%ae%d8%b5%d9%88%d8%b5%d9%8a%d8%a9/" style="color: #DAA520; text-decoration: none;">سياسة الخصوصية</a>
+                <h2>حساب جديد</h2>
+                <div class="input-group">
+                    <input type="text" id="registerLawFirm" placeholder="اسم المكتب">
+                </div>
+                <div class="input-group">
+                    <input type="text" id="registerLawyerName" placeholder="اسم المحامي">
+                </div>
+                <div class="input-group">
+                    <input type="text" id="registerPosition" placeholder="المرتبة في المكتب">
+                </div>
+                <div class="input-group">
+                    <input type="tel" id="registerPhone" placeholder="رقم الهاتف">
+                </div>
+                <div class="input-group">
+                    <input type="text" id="registerUsername" placeholder="البريد الإلكتروني">
+                </div>
+                <div class="input-group">
+                    <input type="password" id="registerPassword" placeholder="كلمة المرور">
+                </div>
+                <button onclick="register()">إنشاء الحساب</button>
+                <div id="registerMessage" class="message"></div>
+                <div class="toggle-form">
+                    <button class="toggle-btn" onclick="toggleForm()">العودة لتسجيل الدخول</button>
+                </div>
+                <div class="terms">
+                    بالتسجيل، أنت توافق على <a href="https://ufastpro.com/%d8%b3%d9%8a%d8%a7%d8%b3%d8%a9-%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85/" target="_blank">سياسة الاستخدام</a> و<a href="https://ufastpro.com/%d8%b3%d9%8a%d8%a7%d8%b3%d8%a9-%d8%a7%d9%84%d8%ae%d8%b5%d9%88%d8%b5%d9%8a%d8%a9/" target="_blank">سياسة الخصوصية</a>
                 </div>
             </div>
         </div>
     </div>
 
     <script>
-         // الثوابت والتكوينات
-const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6500/api';
-const VALIDATION_RULES = {
-    officeName: {
-        minLength: 3,
-        maxLength: 100
-    },
-    password: {
-        minLength: 8,
-        maxLength: 50
-    },
-    phone: {
-        pattern: /^(\+201|01)[0-2|5][0-9]{8}$/,
-        message: 'الرجاء إدخال رقم هاتف مصري صحيح'
-    },
-    email: {
-        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-        message: 'الرجاء إدخال بريد إلكتروني صحيح'
-    }
-};
-
-// وظائف المساعدة
-function validateInput(value, rules) {
-    if (!value || typeof value !== 'string') {
-        return 'هذا الحقل مطلوب';
-    }
-
-    value = value.trim();
-
-    if (rules.minLength && value.length < rules.minLength) {
-        return `يجب أن يكون الحقل ${rules.minLength} أحرف على الأقل`;
-    }
-
-    if (rules.maxLength && value.length > rules.maxLength) {
-        return `يجب أن لا يتجاوز الحقل ${rules.maxLength} حرف`;
-    }
-
-    if (rules.pattern && !rules.pattern.test(value)) {
-        return rules.message;
-    }
-
-    return null;
-}
-
-function formatPhoneNumber(phone) {
-    // تنسيق رقم الهاتف بشكل موحد
-    phone = phone.trim().replace(/\s+/g, '');
-    if (phone.startsWith('01')) {
-        return phone;
-    }
-    if (phone.startsWith('+201')) {
-        return '0' + phone.slice(3);
-    }
-    return phone;
-}
-
-function showMessage(elementId, message, isError = false) {
-    const element = document.getElementById(elementId);
-    if (!element) return;
-    
-    element.textContent = message;
-    element.className = `message ${isError ? 'error' : 'success'} ${message ? 'show' : ''}`;
-}
-
-function toggleLoadingState(formId, isLoading) {
-    const form = document.getElementById(formId);
-    if (!form) return;
-
-    const button = form.querySelector('button[type="submit"]');
-    const spinner = button?.querySelector('.loading-spinner');
-    const inputs = form.querySelectorAll('input, select');
-    
-    if (button) button.disabled = isLoading;
-    if (spinner) spinner.style.display = isLoading ? 'block' : 'none';
-    inputs.forEach(input => input.disabled = isLoading);
-}
-
-// التحقق من صحة نموذج التسجيل
-function validateRegistrationForm(formData) {
-    const errors = [];
-
-    // التحقق من اسم المكتب
-    const officeNameError = validateInput(formData.officeName, VALIDATION_RULES.officeName);
-    if (officeNameError) errors.push(officeNameError);
-
-    // التحقق من الدور
-    if (!formData.userRole) {
-        errors.push('الرجاء اختيار صفة المسجل');
-    }
-
-    // التحقق من رقم الهاتف
-    const phoneError = validateInput(formData.phone, VALIDATION_RULES.phone);
-    if (phoneError) errors.push(phoneError);
-
-    // التحقق من البريد الإلكتروني
-    const emailError = validateInput(formData.email, VALIDATION_RULES.email);
-    if (emailError) errors.push(emailError);
-
-    // التحقق من كلمة المرور
-    const passwordError = validateInput(formData.password, VALIDATION_RULES.password);
-    if (passwordError) errors.push(passwordError);
-
-    return errors.length ? errors.join('\n') : null;
-}
-
-// معالجة التسجيل
-async function handleRegister(event) {
-    event.preventDefault();
-    
-    // جمع البيانات من النموذج
-    const formData = {
-        officeName: document.getElementById('officeName').value,
-        userRole: document.getElementById('userRole').value,
-        phone: document.getElementById('phone').value,
-        email: document.getElementById('registerEmail').value,
-        password: document.getElementById('registerPassword').value
-    };
-
-    // التحقق من صحة البيانات
-    const validationError = validateRegistrationForm(formData);
-    if (validationError) {
-        showMessage('registerMessage', validationError, true);
-        return false;
-    }
-
-    try {
-        toggleLoadingState('registerForm', true);
-        showMessage('registerMessage', 'جاري إنشاء الحساب...', false);
-
-        const response = await fetch(`${API_URL}/register`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json'
-            },
-            body: JSON.stringify({
-                officeName: formData.officeName.trim(),
-                userRole: formData.userRole,
-                phone: formatPhoneNumber(formData.phone),
-                email: formData.email.toLowerCase().trim(),
-                password: formData.password
-            })
-        });
+        const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6500/api';
+        
+        function toggleForm() {
+            document.querySelector('.forms-container').classList.toggle('flipped');
+            clearMessages();
+        }
 
-        const data = await response.json();
+        function clearMessages() {
+            document.querySelectorAll('.message').forEach(msg => {
+                msg.className = 'message';
+            });
+        }
 
-        if (response.ok) {
-            showMessage('registerMessage', 'تم إنشاء الحساب بنجاح! يمكنك الآن تسجيل الدخول', false);
-            
-            // التحويل إلى صفحة تسجيل الدخول
+        function showMessage(elementId, message, isError = false) {
+            const element = document.getElementById(elementId);
+            element.textContent = message;
+            element.className = `message ${isError ? 'error' : 'success'} show`;
             setTimeout(() => {
-                toggleForm();
-                document.getElementById('loginEmail').value = formData.email;
-            }, 2000);
-        } else {
-            // معالجة أخطاء محددة من الخادم
-            const errorMessage = data.message || 'فشل إنشاء الحساب. الرجاء المحاولة مرة أخرى';
-            throw new Error(errorMessage);
-        }
-    } catch (error) {
-        showMessage('registerMessage', error.message, true);
-        console.error('Registration error:', error);
-    } finally {
-        toggleLoadingState('registerForm', false);
-    }
-
-    return false;
-}
-
-// معالجة تسجيل الدخول
-async function handleLogin(event) {
-    event.preventDefault();
-    
-    const email = document.getElementById('loginEmail').value;
-    const password = document.getElementById('loginPassword').value;
-
-    // التحقق الأساسي من البيانات
-    if (!email || !password) {
-        showMessage('loginMessage', 'الرجاء إدخال جميع البيانات المطلوبة', true);
-        return false;
-    }
-
-    const emailError = validateInput(email, VALIDATION_RULES.email);
-    if (emailError) {
-        showMessage('loginMessage', emailError, true);
-        return false;
-    }
-
-    try {
-        toggleLoadingState('loginForm', true);
-        showMessage('loginMessage', 'جاري تسجيل الدخول...', false);
-        
-        const response = await fetch(`${API_URL}/login`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json'
-            },
-            body: JSON.stringify({ 
-                email: email.toLowerCase().trim(), 
-                password 
-            })
+                element.className = 'message';
+            }, 3000);
+        }
+
+        async function login() {
+            const username = document.getElementById('loginUsername').value;
+            const password = document.getElementById('loginPassword').value;
+            
+            if (!username || !password) {
+                showMessage('loginMessage', 'الرجاء إدخال جميع البيانات المطلوبة', true);
+                return;
+            }
+
+            if (!isValidEmail(username)) {
+                showMessage('loginMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
+                return;
+            }
+
+            try {
+                const response = await fetch(`${API_URL}/login`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ username, password })
+                });
+                
+                const data = await response.json();
+                
+                if (response.ok) {
+                    showMessage('loginMessage', 'تم تسجيل الدخول بنجاح');
+                    setTimeout(() => {
+                        window.location.href = data.redirect_url;
+                    }, 1000);
+                } else {
+                    showMessage('loginMessage', data.detail, true);
+                }
+            } catch (error) {
+                showMessage('loginMessage', 'حدث خطأ في الاتصال', true);
+            }
+        }
+
+        async function register() {
+            const lawFirm = document.getElementById('registerLawFirm').value;
+            const lawyerName = document.getElementById('registerLawyerName').value;
+            const position = document.getElementById('registerPosition').value;
+            const phone = document.getElementById('registerPhone').value;
+            const username = document.getElementById('registerUsername').value;
+            const password = document.getElementById('registerPassword').value;
+            
+            if (!lawFirm || !lawyerName || !position || !phone || !username || !password) {
+                showMessage('registerMessage', 'الرجاء إدخال جميع البيانات المطلوبة', true);
+                return;
+            }
+
+            if (!isValidEmail(username)) {
+                showMessage('registerMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
+                return;
+            }
+
+            if (!isValidPhone(phone)) {
+                showMessage('registerMessage', 'الرجاء إدخال رقم هاتف صحيح', true);
+                return;
+            }
+
+            if (password.length < 8) {
+                showMessage('registerMessage', 'كلمة المرور يجب أن تكون 8 أحرف على الأقل', true);
+                return;
+            }
+
+            try {
+                const response = await fetch(`${API_URL}/register`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ 
+                        username, 
+                        password,
+                        law_firm: lawFirm,
+                        lawyer_name: lawyerName,
+                        position: position,
+                        phone: phone
+                    })
+                });
+                
+                const data = await response.json();
+                
+                if (response.ok) {
+                    showMessage('registerMessage', 'تم إنشاء الحساب بنجاح');
+                    document.getElementById('registerLawFirm').value = '';
+                    document.getElementById('registerLawyerName').value = '';
+                    document.getElementById('registerPosition').value = '';
+                    document.getElementById('registerPhone').value = '';
+                    document.getElementById('registerUsername').value = '';
+                    document.getElementById('registerPassword').value = '';
+                    setTimeout(() => {
+                        toggleForm();
+                    }, 1500);
+                } else {
+                    showMessage('registerMessage', data.detail, true);
+                }
+            } catch (error) {
+                showMessage('registerMessage', 'حدث خطأ في الاتصال', true);
+            }
+        }
+
+        function isValidEmail(email) {
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+        }
+
+        function isValidPhone(phone) {
+            return /^(\+966|05)\d{8,9}$/.test(phone);
+        }
+
+        // تحسين تجربة المستخدم مع استجابة زر Enter
+        document.querySelectorAll('input').forEach(input => {
+            input.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    const form = input.closest('.form-box');
+                    if (form.classList.contains('login-form')) {
+                        login();
+                    } else {
+                        register();
+                    }
+                }
+            });
         });
 
-        const data = await response.json();
+        // تأثيرات تحميل الأزرار
+        document.querySelectorAll('button:not(.toggle-btn)').forEach(button => {
+            button.addEventListener('click', function() {
+                if (this.classList.contains('loading')) return;
+                
+                this.classList.add('loading');
+                const originalText = this.textContent;
+                this.textContent = '...جاري التنفيذ';
+                
+                setTimeout(() => {
+                    this.textContent = originalText;
+                    this.classList.remove('loading');
+                }, 2000);
+            });
+        });
+
+        // التحقق من صحة رقم الهاتف المصري
+        function isValidPhone(phone) {
+            const egyptianPattern = /^(010|011|012|015)\d{8}$/;
+            return egyptianPattern.test(phone);
+        }
 
-        if (response.ok) {
-            localStorage.setItem('userToken', data.token);
-            localStorage.setItem('userData', JSON.stringify(data.user));
+        // تنسيق رقم الهاتف تلقائيًا
+        document.getElementById('registerPhone').addEventListener('input', function (e) {
+            let value = e.target.value.replace(/\D/g, ''); // إزالة أي أحرف غير رقمية
             
-            showMessage('loginMessage', 'تم تسجيل الدخول بنجاح! جاري التحويل...', false);
+            if (value.startsWith('20')) {
+                // إذا بدأ بـ 20، نضيف +20
+                value = '+' + value;
+            } else if (value.startsWith('1')) {
+                // إذا بدأ بـ 1، نضيف 0
+                value = '0' + value;
+            }
             
-            setTimeout(() => {
-                window.location.href = '/dashboard';
-            }, 1000);
-        } else {
-            throw new Error(data.message || 'فشل تسجيل الدخول');
-        }
-    } catch (error) {
-        showMessage('loginMessage', error.message, true);
-        console.error('Login error:', error);
-    } finally {
-        toggleLoadingState('loginForm', false);
-    }
-
-    return false;
-}
-
-// إضافة مستمعي الأحداث
-document.addEventListener('DOMContentLoaded', function() {
-    // التحقق من وجود token
-    const token = localStorage.getItem('userToken');
-    if (token) {
-        window.location.href = '/dashboard';
-    }
-
-    // إضافة مستمعي النماذج
-    const loginForm = document.getElementById('loginForm');
-    const registerForm = document.getElementById('registerForm');
-
-    if (loginForm) loginForm.addEventListener('submit', handleLogin);
-    if (registerForm) registerForm.addEventListener('submit', handleRegister);
-});
-
-// معالجة الأخطاء العامة
-window.onerror = function(msg, url, lineNo, columnNo, error) {
-    console.error('Error:', {
-        message: msg,
-        url: url,
-        line: lineNo,
-        column: columnNo,
-        error: error
-    });
-    return false;
-};
-
-// معالجة حالة الاتصال بالإنترنت
-window.addEventListener('offline', function() {
-    showMessage('loginMessage', 'لا يوجد اتصال بالإنترنت', true);
-    showMessage('registerMessage', 'لا يوجد اتصال بالإنترنت', true);
-});
-
-window.addEventListener('online', function() {
-    showMessage('loginMessage', '');
-    showMessage('registerMessage', '');
-});
+            e.target.value = value;
+        });
+
+        // تفعيل تأثيرات الظهور التدريجي
+        document.addEventListener('DOMContentLoaded', function () {
+            document.body.style.opacity = '0';
+            requestAnimationFrame(() => {
+                document.body.style.opacity = '1';
+            });
+        });
+
+        // تحسين تجربة المستخدم في حقول الإدخال
+        document.querySelectorAll('input').forEach(input => {
+            input.addEventListener('focus', () => {
+                input.parentElement.classList.add('focused'); // إضافة تأثير عند التركيز
+            });
+
+            input.addEventListener('blur', () => {
+                if (!input.value) {
+                    input.parentElement.classList.remove('focused'); // إزالة التأثير إذا كان الحقل فارغًا
+                }
+            });
+        });
+
+        // منع الأحداث الافتراضية غير المرغوب فيها على الأزرار
+        document.querySelectorAll('button').forEach(button => {
+            button.addEventListener('mousedown', (e) => e.preventDefault());
+        });
     </script>
 </body>
 </html>