Update login.html

login.html

@@ -20,22 +20,10 @@
             justify-content: center;
             position: relative;
             padding: 20px;
-            background: url('https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation.png') no-repeat center center fixed;
-            background-size: cover;
+            background: #ffffff;
             color: #333;
         }
 
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.65) 100%);
-            z-index: 0;
-        }
-
         .logo-container {
             position: absolute;
             top: 40px;
@@ -43,7 +31,7 @@
             transform: translateX(-50%);
             width: 160px;
             height: 160px;
-            background: rgba(255, 255, 255, 0.97);
+            background: #ffffff;
             border-radius: 50%;
             padding: 12px;
             box-shadow: 0 4px 35px rgba(218, 165, 32, 0.35);
@@ -51,24 +39,14 @@
             align-items: center;
             justify-content: center;
             z-index: 2;
-            backdrop-filter: blur(8px);
-            border: 2px solid rgba(218, 165, 32, 0.35);
-        }
-
-        .logo {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-            border-radius: 50%;
         }
 
         .container {
             position: relative;
-            width: 420px;
-            min-height: 580px;
-            perspective: 1000px;
+            width: 480px;
             margin-top: 100px;
             z-index: 1;
+            perspective: 1000px;
         }
 
         .forms-container {
@@ -86,14 +64,16 @@
         .form-box {
             position: absolute;
             width: 100%;
-            height: 100%;
-            padding: 45px;
-            background: rgba(255, 255, 255, 0.97);
+            background: #ffffff;
+            padding: 40px;
             border-radius: 24px;
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
-            backface-visibility: hidden;
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
             border: 1px solid rgba(218, 165, 32, 0.35);
-            backdrop-filter: blur(12px);
+            backface-visibility: hidden;
+        }
+
+        .login-form {
+            transform: rotateY(0deg);
         }
 
         .register-form {
@@ -103,11 +83,11 @@
         h2 {
             text-align: center;
             color: #000;
-            margin-bottom: 35px;
+            margin-bottom: 30px;
             font-size: 32px;
             font-weight: 700;
             position: relative;
-            padding-bottom: 18px;
+            padding-bottom: 15px;
         }
 
         h2::after {
@@ -123,27 +103,40 @@
         }
 
         .input-group {
-            margin-bottom: 28px;
+            margin-bottom: 20px;
             position: relative;
         }
 
-        input {
+        .input-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #555;
+            font-weight: 500;
+        }
+
+        input, select {
             width: 100%;
-            padding: 16px 22px;
+            padding: 14px 20px;
             border: 2px solid rgba(218, 165, 32, 0.35);
-            border-radius: 14px;
-            font-size: 16px;
+            border-radius: 12px;
+            font-size: 15px;
             transition: all 0.3s ease;
-            background: rgba(255, 255, 255, 0.95);
+            background: #ffffff;
             color: #333;
         }
 
-        input:focus {
+        input:focus, select:focus {
             border-color: #DAA520;
-            background: white;
-            box-shadow: 0 0 25px rgba(218, 165, 32, 0.25);
+            box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
             outline: none;
-            transform: translateY(-2px);
+        }
+
+        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;
         }
 
         button {
@@ -157,13 +150,11 @@
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
-            margin-bottom: 22px;
-            position: relative;
-            overflow: hidden;
+            margin-top: 10px;
         }
 
         button:hover {
-            transform: translateY(-3px);
+            transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(218, 165, 32, 0.4);
         }
 
@@ -171,188 +162,87 @@
             background: transparent;
             color: #DAA520;
             border: 2px solid #DAA520;
-            font-weight: 500;
-            padding: 14px 28px;
+            margin-top: 20px;
         }
 
         .toggle-btn:hover {
             background: #DAA520;
             color: white;
-            transform: translateY(-2px);
-        }
-
-        .message {
-            margin-top: 15px;
-            text-align: center;
-            padding: 14px;
-            border-radius: 14px;
-            font-size: 14px;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-
-        .message.show {
-            opacity: 1;
-        }
-
-        .error {
-            color: #D32F2F;
-            background-color: rgba(255, 235, 238, 0.95);
-            border: 1px solid #FFCDD2;
-        }
-
-        .success {
-            color: #388E3C;
-            background-color: rgba(232, 245, 233, 0.95);
-            border: 1px solid #C8E6C9;
         }
 
         .form-footer {
             text-align: center;
-            margin-top: 28px;
-            font-size: 15px;
-            color: #333;
-            padding: 18px;
+            margin-top: 25px;
+            padding-top: 20px;
             border-top: 1px solid rgba(218, 165, 32, 0.25);
+            color: #666;
         }
 
-        .terms {
-            font-size: 14px;
-            color: #444;
+        .message {
+            padding: 10px;
+            margin-top: 15px;
+            border-radius: 8px;
             text-align: center;
-            margin-top: 18px;
-            line-height: 1.7;
+            display: none;
         }
 
-        .terms a {
-            color: #DAA520;
-            text-decoration: none;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            border-bottom: 1px solid transparent;
+        .message.show {
+            display: block;
+        }
+
+        .message.error {
+            background-color: #ffebee;
+            color: #d32f2f;
         }
 
-        .terms a:hover {
-            color: #B8860B;
-            border-bottom-color: #B8860B;
+        .message.success {
+            background-color: #e8f5e9;
+            color: #388e3c;
         }
 
-        @media (max-width: 480px) {
+        @media (max-width: 520px) {
             .container {
                 width: 100%;
-                max-width: 380px;
+                padding: 0 15px;
             }
-
+            
             .form-box {
-                padding: 35px 25px;
+                padding: 30px 20px;
             }
 
             h2 {
                 font-size: 26px;
             }
         }
-
-        /* Enhanced Animations */
-        @keyframes float {
-            0% {
-                transform: translateX(-50%) translateY(0px);
-            }
-            50% {
-                transform: translateX(-50%) translateY(-12px);
-            }
-            100% {
-                transform: translateX(-50%) translateY(0px);
-            }
-        }
-
-        .logo-container {
-            animation: float 6s ease-in-out infinite;
-        }
-
-        /* Enhanced decorative elements */
-        .decoration {
-            position: absolute;
-            background: linear-gradient(135deg, #DAA520 0%, #FFD700 100%);
-            opacity: 0.12;
-            border-radius: 50%;
-            filter: blur(4px);
-        }
-
-        .decoration-1 {
-            width: 120px;
-            height: 120px;
-            top: -60px;
-            right: -60px;
-        }
-
-        .decoration-2 {
-            width: 180px;
-            height: 180px;
-            bottom: -90px;
-            left: -90px;
-        }
-
-        /* Enhanced Glowing effect */
-        .form-box::before {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: linear-gradient(45deg, #DAA520, #FFD700, #DAA520);
-            border-radius: 26px;
-            z-index: -1;
-            filter: blur(15px);
-            opacity: 0;
-            transition: opacity 0.4s ease;
-        }
-
-        .form-box:hover::before {
-            opacity: 0.35;
-        }
-
-        /* Input focus animation */
-        .input-group::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            width: 0;
-            height: 2px;
-            background: #DAA520;
-            transition: width 0.3s ease, left 0.3s ease;
-        }
-
-        .input-group.focused::after {
-            width: 100%;
-            left: 0;
-        }
     </style>
 </head>
 <body>
     <div class="logo-container">
-        <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" class="logo">
+        <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" class="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">
-                <div class="decoration decoration-1"></div>
-                <div class="decoration decoration-2"></div>
-                <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>
+                <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">تسجيل الدخول</button>
+                    <div id="loginMessage" class="message"></div>
+                </form>
+                
+                <button class="toggle-btn" onclick="toggleForm()">إنشاء حساب جديد</button>
+                
                 <div class="form-footer">
                     منصة ذكاء اصطناعي قانوني موثوقة ومرخصة
                 </div>
@@ -360,22 +250,46 @@
 
             <!-- نموذج إنشاء حساب -->
             <div class="form-box register-form">
-                <div class="decoration decoration-1"></div>
-                <div class="decoration decoration-2"></div>
-                <h2>حساب جديد</h2>
-                <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>
+                <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="05xxxxxxxx" pattern="[0-9]{10}">
+                    </div>
+
+                    <div class="input-group">
+                        <label>البريد الإلكتروني</label>
+                        <input type="email" id="registerEmail" required placeholder="example@domain.com">
+                    </div>
+
+                    <div class="input-group">
+                        <label>كلمة المرور</label>
+                        <input type="password" id="registerPassword" required placeholder="8 أحرف على الأقل" minlength="8">
+                    </div>
+
+                    <button type="submit">إنشاء الحسا��</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>
                 </div>
             </div>
         </div>
@@ -392,6 +306,7 @@
         function clearMessages() {
             document.querySelectorAll('.message').forEach(msg => {
                 msg.className = 'message';
+                msg.textContent = '';
             });
         }
 
@@ -399,175 +314,68 @@
             const element = document.getElementById(elementId);
             element.textContent = message;
             element.className = `message ${isError ? 'error' : 'success'} show`;
-            setTimeout(() => {
-                element.className = 'message';
-            }, 3000);
         }
 
-        async function login() {
-            const username = document.getElementById('loginUsername').value;
-            const password = document.getElementById('loginPassword').value;
+        function handleLogin(event) {
+            event.preventDefault();
             
-            if (!username || !password) {
+            const email = document.getElementById('loginEmail').value;
+            const password = document.getElementById('loginPassword').value;
+
+            if (!email || !password) {
                 showMessage('loginMessage', 'الرجاء إدخال جميع البيانات المطلوبة', true);
-                return;
+                return false;
             }
 
-            if (!isValidEmail(username)) {
+            if (!isValidEmail(email)) {
                 showMessage('loginMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
-                return;
+                return false;
             }
 
-            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);
-            }
+            // هنا يمكنك إضافة كود الاتصال بالخادم
+            showMessage('loginMessage', 'جاري تسجيل الدخول...', false);
+            
+            return false;
         }
 
-        async function register() {
-            const username = document.getElementById('registerUsername').value;
-            const password = document.getElementById('registerPassword').value;
+        function handleRegister(event) {
+            event.preventDefault();
             
-            if (!username || !password) {
-                showMessage('registerMessage', 'الرجاء إدخال جميع البيانات المطلوبة', true);
-                return;
+            const officeName = document.getElementById('officeName').value;
+            const userRole = document.getElementById('userRole').value;
+            const phone = document.getElementById('phone').value;
+            const email = document.getElementById('registerEmail').value;
+            const password = document.getElementById('registerPassword').value;
+
+            if (!officeName || !userRole || !phone || !email || !password) {
+                showMessage('registerMessage', 'الرجاء إكمال جميع الحقول المطلوبة', true);
+                return false;
             }
 
-            if (!isValidEmail(username)) {
+            if (!isValidEmail(email)) {
                 showMessage('registerMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
-                return;
+                return false;
             }
 
             if (password.length < 8) {
                 showMessage('registerMessage', 'كلمة المرور يجب أن تكون 8 أحرف على الأقل', true);
-                return;
+                return false;
             }
 
-            try {
-                const response = await fetch(`${API_URL}/register`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ username, password })
-                });
-                
-                const data = await response.json();
-                
-                if (response.ok) {
-                    showMessage('registerMessage', 'تم إنشاء الحساب بنجاح');
-                    document.getElementById('registerUsername').value = '';
-                    document.getElementById('registerPassword').value = '';
-                    setTimeout(() => {
-                        toggleForm();
-                    }, 1500);
-                } else {
-                    showMessage('registerMessage', data.detail, true);
-                }
-            } catch (error) {
-                showMessage('registerMessage', 'حدث خطأ في الاتصال', true);
+            if (phone.length !== 10 || !phone.match(/^[0-9]{10}$/)) {
+                showMessage('registerMessage', 'الرجاء إدخال رقم هاتف صحيح', true);
+                return false;
             }
+
+            // هنا يمكنك إضافة كود الاتصال بالخادم
+            showMessage('registerMessage', 'جاري إنشاء الحساب...', false);
+            
+            return false;
         }
 
         function isValidEmail(email) {
             return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
         }
-
-        // تحسين تجربة المستخدم مع استجابة زر 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();
-                    }
-                }
-            });
-        });
-
-        // إضافة تأثيرات التحميل للأزرار
-        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);
-            });
-        });
-
-        // إضافة تأثير ظهور تدريجي عند تحميل الصفحة
-        document.addEventListener('DOMContentLoaded', function() {
-            document.body.style.opacity = '0';
-            requestAnimationFrame(() => {
-                document.body.style.transition = 'opacity 0.8s ease';
-                document.body.style.opacity = '1';
-            });
-        });
-
-        // تحسين تأثيرات التركيز على حقول الإدخال
-        document.querySelectorAll('input').forEach(input => {
-            const inputGroup = input.parentElement;
-            
-            input.addEventListener('focus', () => {
-                inputGroup.classList.add('focused');
-            });
-            
-            input.addEventListener('blur', () => {
-                if (!input.value) {
-                    inputGroup.classList.remove('focused');
-                }
-            });
-
-            // حفظ حالة التركيز إذا كان الحقل يحتوي على قيمة
-            if (input.value) {
-                inputGroup.classList.add('focused');
-            }
-        });
-
-        // تحسين روابط الشروط والأحكام
-        document.querySelectorAll('.terms a').forEach(link => {
-            link.addEventListener('click', function(e) {
-                // يمكنك إضافة منطق خاص هنا للتعامل مع روابط الشروط والأحكام
-                // مثل فتح نافذة منبثقة أو توجيه المستخدم لصفحة جديدة
-                console.log('Opening:', this.href);
-            });
-        });
-
-        // منع تحديد النص في العناصر غير النصية
-        document.querySelectorAll('button, .logo-container').forEach(element => {
-            element.style.userSelect = 'none';
-        });
-
-        // تحسين أداء الرسوم المتحركة
-        document.querySelectorAll('.decoration').forEach(element => {
-            element.style.willChange = 'transform';
-        });
     </script>
 </body>
 </html>