Update reg.html

reg.html

@@ -20,9 +20,7 @@
             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;
+            background: #ffffff;
             color: #333;
         }
 
@@ -33,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);
@@ -41,7 +39,6 @@
             align-items: center;
             justify-content: center;
             z-index: 2;
-            animation: float 6s ease-in-out infinite;
         }
 
         .container {
@@ -49,15 +46,38 @@
             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 {
-            background: rgba(255, 255, 255, 0.98);
+            position: absolute;
+            width: 100%;
+            background: #ffffff;
             padding: 40px;
             border-radius: 24px;
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
+            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 {
+            transform: rotateY(180deg);
         }
 
         h2 {
@@ -101,7 +121,7 @@
             border-radius: 12px;
             font-size: 15px;
             transition: all 0.3s ease;
-            background: rgba(255, 255, 255, 0.95);
+            background: #ffffff;
             color: #333;
         }
 
@@ -138,6 +158,18 @@
             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;
@@ -146,9 +178,26 @@
             color: #666;
         }
 
-        @keyframes float {
-            0%, 100% { transform: translateX(-50%) translateY(0px); }
-            50% { transform: translateX(-50%) translateY(-10px); }
+        .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) {
@@ -173,60 +222,131 @@
     </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="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>
                 
-                <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>
+                <button class="toggle-btn" onclick="toggleForm()">إنشاء حساب جديد</button>
+                
+                <div class="form-footer">
+                    منصة ذكاء اصطناعي قانوني موثوقة ومرخصة
                 </div>
+            </div>
 
-                <div class="input-group">
-                    <label>رقم الهاتف</label>
-                    <input type="tel" id="phone" required placeholder="05xxxxxxxx" pattern="[0-9]{10}">
-                </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="email" id="email" required placeholder="example@domain.com">
-                </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="password" id="password" required placeholder="8 أحرف على الأقل" minlength="8">
-                </div>
+                    <div class="input-group">
+                        <label>البريد الإلكتروني</label>
+                        <input type="email" id="registerEmail" required placeholder="example@domain.com">
+                    </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 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('email').value;
-            const password = document.getElementById('password').value;
+            const email = document.getElementById('registerEmail').value;
+            const password = document.getElementById('registerPassword').value;
 
-            // التحقق من صحة البيانات
             if (!officeName || !userRole || !phone || !email || !password) {
                 showMessage('registerMessage', 'الرجاء إكمال جميع الحقول المطلوبة', true);
                 return false;
@@ -247,27 +367,10 @@
                 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);
+            return false;
         }
 
         function isValidEmail(email) {