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: #ffffff; | |
| 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; | |
| 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%; | |
| background: #ffffff; | |
| padding: 40px; | |
| border-radius: 24px; | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); | |
| border: 1px solid rgba(218, 165, 32, 0.35); | |
| backface-visibility: hidden; | |
| } | |
| .login-form { | |
| transform: rotateY(0deg); | |
| } | |
| .register-form { | |
| transform: rotateY(180deg); | |
| } | |
| h2 { | |
| text-align: center; | |
| color: #000; | |
| margin-bottom: 30px; | |
| font-size: 32px; | |
| font-weight: 700; | |
| position: relative; | |
| padding-bottom: 15px; | |
| } | |
| 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: 20px; | |
| position: relative; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: #555; | |
| font-weight: 500; | |
| } | |
| input, select { | |
| width: 100%; | |
| padding: 14px 20px; | |
| border: 2px solid rgba(218, 165, 32, 0.35); | |
| border-radius: 12px; | |
| font-size: 15px; | |
| transition: all 0.3s ease; | |
| background: #ffffff; | |
| color: #333; | |
| } | |
| input:focus, select:focus { | |
| border-color: #DAA520; | |
| box-shadow: 0 0 20px 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; | |
| } | |
| button { | |
| width: 100%; | |
| padding: 16px; | |
| background: linear-gradient(135deg, #DAA520 0%, #FFD700 100%); | |
| border: none; | |
| border-radius: 14px; | |
| color: #000; | |
| font-size: 18px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin-top: 10px; | |
| } | |
| button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(218, 165, 32, 0.4); | |
| } | |
| .toggle-btn { | |
| background: transparent; | |
| color: #DAA520; | |
| border: 2px solid #DAA520; | |
| margin-top: 20px; | |
| } | |
| .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; | |
| } | |
| .message { | |
| padding: 10px; | |
| margin-top: 15px; | |
| border-radius: 8px; | |
| text-align: center; | |
| display: none; | |
| } | |
| .message.show { | |
| display: block; | |
| } | |
| .message.error { | |
| background-color: #ffebee; | |
| color: #d32f2f; | |
| } | |
| .message.success { | |
| background-color: #e8f5e9; | |
| color: #388e3c; | |
| } | |
| @media (max-width: 520px) { | |
| .container { | |
| width: 100%; | |
| padding: 0 15px; | |
| } | |
| .form-box { | |
| padding: 30px 20px; | |
| } | |
| h2 { | |
| font-size: 26px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="logo-container"> | |
| <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"> | |
| <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> | |
| </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="05xxxxxxxx" pattern="[0-9]{10}"> | |
| </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">إنشاء الحساب</button> | |
| <div id="registerMessage" class="message"></div> | |
| </form> | |
| <button class="toggle-btn" onclick="toggleForm()">العودة لتسجيل الدخول</button> | |
| <div class="form-footer"> | |
| بالتسجيل، أنت توافق على <a href="#" style="color: #DAA520; text-decoration: none;">الشروط والأحكام</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'; | |
| msg.textContent = ''; | |
| }); | |
| } | |
| function showMessage(elementId, message, isError = false) { | |
| const element = document.getElementById(elementId); | |
| element.textContent = message; | |
| element.className = `message ${isError ? 'error' : 'success'} show`; | |
| } | |
| 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; | |
| } | |
| if (!isValidEmail(email)) { | |
| showMessage('loginMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true); | |
| return false; | |
| } | |
| // هنا يمكنك إضافة كود الاتصال بالخادم | |
| showMessage('loginMessage', 'جاري تسجيل الدخول...', false); | |
| return false; | |
| } | |
| function handleRegister(event) { | |
| event.preventDefault(); | |
| 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(email)) { | |
| showMessage('registerMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true); | |
| return false; | |
| } | |
| if (password.length < 8) { | |
| showMessage('registerMessage', 'كلمة المرور يجب أن تكون 8 أحرف على الأقل', true); | |
| return false; | |
| } | |
| 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); | |
| } | |
| </script> | |
| </body> | |
| </html> |