Spaces:

joermd
/

mostasharak

Running

App Files Files Community

joermd commited on Jan 11, 2025

Commit

8cfb97d

verified ·

1 Parent(s): d939025

Update reg.html

Browse files

Files changed (1) hide show

reg.html +183 -248

reg.html CHANGED Viewed

@@ -3,341 +3,276 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>إنشاء حساب جديد | نظام الذكاء الاصطناعي</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Tajawal', sans-serif;
         }
         body {
             min-height: 100vh;
             display: flex;
-            justify-content: center;
             align-items: center;
-            background: #0f172a;
             position: relative;
-            overflow: hidden;
         }
-        .background-animation {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 0;
-        }
-        .circle {
             position: absolute;
             border-radius: 50%;
-            background: linear-gradient(45deg, #3b82f6, #6366f1);
-            animation: float 15s infinite;
-            opacity: 0.1;
-        }
-        .circle:nth-child(1) {
-            width: 300px;
-            height: 300px;
-            top: -150px;
-            left: -150px;
-            animation-delay: 0s;
-        }
-        .circle:nth-child(2) {
-            width: 400px;
-            height: 400px;
-            bottom: -200px;
-            right: -200px;
-            animation-delay: -5s;
-            background: linear-gradient(45deg, #6366f1, #8b5cf6);
-        }
-        @keyframes float {
-            0%, 100% {
-                transform: translateY(0) scale(1);
-            }
-            50% {
-                transform: translateY(-20px) scale(1.1);
-            }
         }
         .container {
             position: relative;
-            width: 100%;
-            max-width: 450px;
-            padding: 2rem;
             z-index: 1;
         }
-        .signup-card {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 24px;
-            padding: 2.5rem;
         }
-        .logo {
             text-align: center;
-            margin-bottom: 2rem;
-        }
-        .logo h1 {
-            color: white;
-            font-size: 2rem;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(45deg, #3b82f6, #6366f1);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .logo p {
-            color: #94a3b8;
-            font-size: 1.1rem;
         }
-        .form-group {
-            margin-bottom: 1.5rem;
         }
-        .form-label {
             display: block;
-            color: #e2e8f0;
-            margin-bottom: 0.5rem;
-            font-size: 0.95rem;
         }
-        .form-input {
             width: 100%;
-            padding: 1rem;
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 12px;
-            color: white;
-            font-size: 1rem;
             transition: all 0.3s ease;
         }
-        .form-input:focus {
             outline: none;
-            border-color: #3b82f6;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
         }
-        .form-input::placeholder {
-            color: #64748b;
         }
-        .submit-btn {
             width: 100%;
-            padding: 1rem;
-            background: linear-gradient(45deg, #3b82f6, #6366f1);
             border: none;
-            border-radius: 12px;
-            color: white;
-            font-size: 1.1rem;
-            font-weight: 500;
             cursor: pointer;
             transition: all 0.3s ease;
-            margin-top: 1rem;
         }
-        .submit-btn:hover {
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
         }
-        .login-link {
             text-align: center;
-            margin-top: 1.5rem;
-            color: #94a3b8;
-        }
-        .login-link a {
-            color: #3b82f6;
-            text-decoration: none;
-            margin-right: 0.25rem;
-        }
-        .login-link a:hover {
-            text-decoration: underline;
-        }
-        .message {
-            padding: 1rem;
-            border-radius: 8px;
-            margin-bottom: 1rem;
-            display: none;
-        }
-        .success {
-            background: rgba(52, 211, 153, 0.1);
-            border: 1px solid rgba(52, 211, 153, 0.2);
-            color: #34d399;
-        }
-        .error {
-            background: rgba(239, 68, 68, 0.1);
-            border: 1px solid rgba(239, 68, 68, 0.2);
-            color: #ef4444;
-        }
-        .loading {
-            pointer-events: none;
-            opacity: 0.7;
         }
-        .loading .submit-btn {
-            position: relative;
-            color: transparent;
         }
-        .loading .submit-btn::after {
-            content: "";
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width: 20px;
-            height: 20px;
-            border: 2px solid white;
-            border-radius: 50%;
-            border-top-color: transparent;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            to {
-                transform: translate(-50%, -50%) rotate(360deg);
             }
         }
     </style>
 </head>
 <body>
-    <div class="background-animation">
-        <div class="circle"></div>
-        <div class="circle"></div>
     </div>
     <div class="container">
-        <div class="signup-card">
-            <div class="logo">
-                <h1>إنشاء حساب جديد</h1>
-                <p>انضم إلى نظام الذكاء الاصطناعي</p>
-            </div>
-            <div id="message" class="message"></div>
-            <form id="signupForm">
-                <div class="form-group">
-                    <label class="form-label">الاسم الكامل</label>
-                    <input
-                        type="text"
-                        class="form-input"
-                        name="full_name"
-                        placeholder="أدخل اسمك الكامل"
-                        required
-                    >
                 </div>
-                <div class="form-group">
-                    <label class="form-label">البريد الإلكتروني</label>
-                    <input
-                        type="email"
-                        class="form-input"
-                        name="email"
-                        placeholder="أدخل بريدك الإلكتروني"
-                        required
-                    >
                 </div>
-                <div class="form-group">
-                    <label class="form-label">اسم المستخدم</label>
-                    <input
-                        type="text"
-                        class="form-input"
-                        name="username"
-                        placeholder="اختر اسم مستخدم"
-                        required
-                    >
                 </div>
-                <div class="form-group">
-                    <label class="form-label">كلمة المرور</label>
-                    <input
-                        type="password"
-                        class="form-input"
-                        name="password"
-                        placeholder="اختر كلمة مرور قوية"
-                        required
-                    >
                 </div>
-                <button type="submit" class="submit-btn">إنشاء حساب</button>
             </form>
-            <div class="login-link">
-                <p>لديك حساب بالفعل؟ <a href="login.html">تسجيل الدخول</a></p>
             </div>
         </div>
     </div>
     <script>
-        const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6000';
-        const form = document.getElementById('signupForm');
-        const messageDiv = document.getElementById('message');
-        function showMessage(type, text) {
-            messageDiv.className = `message ${type}`;
-            messageDiv.textContent = text;
-            messageDiv.style.display = 'block';
-        }
-        form.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            // تفعيل حالة التحميل
-            form.classList.add('loading');
-            const formData = {
-                full_name: form.full_name.value,
-                email: form.email.value,
-                username: form.username.value,
-                password: form.password.value
-            };
-            try {
-                const response = await fetch(`${API_URL}/register`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(formData)
-                });
-                const data = await response.json();
-                if (response.ok) {
-                    showMessage('success', 'تم إنشاء الحساب بنجاح! جاري تحويلك لصفحة تسجيل الدخول...');
-                    setTimeout(() => {
-                        window.location.href = 'login.html';
-                    }, 2000);
-                } else {
-                    showMessage('error', data.detail || 'حدث خطأ أثناء إنشاء الحساب');
-                }
-            } catch (error) {
-                showMessage('error', 'حدث خطأ في الاتصال بالخادم');
-            } finally {
-                // إلغاء حالة التحميل
-                form.classList.remove('loading');
             }
-        });
     </script>
 </body>
 </html>

 <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, rgba(0,0,0,0.8), rgba(0,0,0,0.6)),
+                        url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') no-repeat center center fixed;
+            background-size: cover;
+            color: #333;
         }
+        .logo-container {
             position: absolute;
+            top: 40px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 160px;
+            height: 160px;
+            background: rgba(255, 255, 255, 0.97);
             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;
+            animation: float 6s ease-in-out infinite;
         }
         .container {
             position: relative;
+            width: 480px;
+            margin-top: 100px;
             z-index: 1;
         }
+        .form-box {
+            background: rgba(255, 255, 255, 0.98);
+            padding: 40px;
             border-radius: 24px;
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
+            border: 1px solid rgba(218, 165, 32, 0.35);
+            backdrop-filter: blur(12px);
         }
+        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: rgba(255, 255, 255, 0.95);
+            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);
         }
+        .form-footer {
             text-align: center;
+            margin-top: 25px;
+            padding-top: 20px;
+            border-top: 1px solid rgba(218, 165, 32, 0.25);
+            color: #666;
         }
+        @keyframes float {
+            0%, 100% { transform: translateX(-50%) translateY(0px); }
+            50% { transform: translateX(-50%) translateY(-10px); }
         }
+        @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="form-box">
+            <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="email" required placeholder="example@domain.com">
                 </div>
+                <div class="input-group">
+                    <label>كلمة المرور</label>
+                    <input type="password" id="password" required placeholder="8 أحرف على الأقل" minlength="8">
                 </div>
+                <button type="submit">إنشاء الحساب</button>
+                <div id="registerMessage" class="message"></div>
             </form>
+            <div class="form-footer">
+                لديك حساب بالفعل؟ <a href="#" onclick="window.location.reload()" style="color: #DAA520; text-decoration: none;">تسجيل الدخول</a>
             </div>
         </div>
     </div>
     <script>
+        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('email').value;
+            const password = document.getElementById('password').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 showMessage(elementId, message, isError = false) {
+            const element = document.getElementById(elementId);
+            element.textContent = message;
+            element.style.padding = '10px';
+            element.style.marginTop = '15px';
+            element.style.borderRadius = '8px';
+            element.style.backgroundColor = isError ? '#ffebee' : '#e8f5e9';
+            element.style.color = isError ? '#d32f2f' : '#388e3c';
+            element.style.textAlign = 'center';
+            setTimeout(() => {
+                element.textContent = '';
+                element.style.padding = '0';
+                element.style.backgroundColor = 'transparent';
+            }, 3000);
+        }
+        function isValidEmail(email) {
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+        }
     </script>
 </body>
 </html>