Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>منصة الذكاء الاصطناعي القانوني</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Cairo', 'Tajawal', sans-serif; | |
| } | |
| body { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #f6f8fc 0%, #e9ecef 100%); | |
| color: #333; | |
| } | |
| .container { | |
| position: relative; | |
| width: 420px; | |
| min-height: 480px; | |
| perspective: 1000px; | |
| } | |
| .forms-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transform-style: preserve-3d; | |
| transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .forms-container.flipped { | |
| transform: rotateY(180deg); | |
| } | |
| .form-box { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| padding: 40px; | |
| background: rgba(255, 255, 255, 0.98); | |
| border-radius: 24px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| backface-visibility: hidden; | |
| 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: #1a1a1a; | |
| margin-bottom: 35px; | |
| font-size: 32px; | |
| font-weight: 700; | |
| position: relative; | |
| padding-bottom: 18px; | |
| } | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80px; | |
| height: 4px; | |
| background: linear-gradient(90deg, #DAA520, #FFD700); | |
| border-radius: 4px; | |
| } | |
| .input-group { | |
| margin-bottom: 24px; | |
| position: relative; | |
| } | |
| input { | |
| width: 100%; | |
| padding: 16px 22px; | |
| border: 2px solid rgba(218, 165, 32, 0.25); | |
| border-radius: 16px; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| background: rgba(255, 255, 255, 0.9); | |
| color: #333; | |
| } | |
| input:focus { | |
| border-color: #DAA520; | |
| background: white; | |
| box-shadow: 0 0 25px rgba(218, 165, 32, 0.2); | |
| outline: none; | |
| transform: translateY(-2px); | |
| } | |
| button { | |
| width: 100%; | |
| padding: 16px; | |
| background: linear-gradient(135deg, #DAA520 0%, #FFD700 100%); | |
| border: none; | |
| border-radius: 16px; | |
| color: #000; | |
| font-size: 18px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin-bottom: 22px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| 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; | |
| font-weight: 500; | |
| } | |
| .toggle-btn:hover { | |
| background: rgba(218, 165, 32, 0.1); | |
| color: #DAA520; | |
| 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; | |
| } | |
| .terms { | |
| text-align: center; | |
| font-size: 14px; | |
| margin-top: 20px; | |
| color: #666; | |
| line-height: 1.6; | |
| } | |
| .terms a { | |
| color: #DAA520; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| } | |
| .terms a:hover { | |
| color: #FFD700; | |
| } | |
| @media (max-width: 480px) { | |
| .container { | |
| width: 100%; | |
| max-width: 380px; | |
| } | |
| .form-box { | |
| padding: 30px 25px; | |
| } | |
| h2 { | |
| font-size: 28px; | |
| margin-bottom: 25px; | |
| } | |
| input { | |
| padding: 14px 20px; | |
| font-size: 15px; | |
| } | |
| 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="container"> | |
| <div class="forms-container"> | |
| <div class="form-box login-form"> | |
| <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> | |
| <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'; | |
| function toggleForm() { | |
| document.querySelector('.forms-container').classList.toggle('flipped'); | |
| clearMessages(); | |
| } | |
| function clearMessages() { | |
| document.querySelectorAll('.message').forEach(msg => { | |
| msg.className = 'message'; | |
| }); | |
| } | |
| function showMessage(elementId, message, isError = false) { | |
| 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; | |
| 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(); | |
| } | |
| } | |
| }); | |
| }); | |
| // تأثيرات تحميل الأزرار | |
| 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); | |
| } | |
| // تنسيق رقم الهاتف تلقائيًا | |
| document.getElementById('registerPhone').addEventListener('input', function (e) { | |
| let value = e.target.value.replace(/\D/g, ''); // إزالة أي أحرف غير رقمية | |
| if (value.startsWith('20')) { | |
| // إذا بدأ بـ 20، نضيف +20 | |
| value = '+' + value; | |
| } else if (value.startsWith('1')) { | |
| // إذا بدأ بـ 1، نضيف 0 | |
| value = '0' + value; | |
| } | |
| 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> |