Update login.html

login.html

@@ -20,8 +20,9 @@
             justify-content: center;
             position: relative;
             padding: 20px;
-            background: url('https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation-1.png') no-repeat center center fixed;
+            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;
+            color: #333;
         }
 
         body::before {
@@ -31,7 +32,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 100%);
+            background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.65) 100%);
             z-index: 0;
         }
 
@@ -40,18 +41,18 @@
             top: 40px;
             left: 50%;
             transform: translateX(-50%);
-            width: 150px;
-            height: 150px;
-            background: rgba(255, 255, 255, 0.95);
+            width: 160px;
+            height: 160px;
+            background: rgba(255, 255, 255, 0.97);
             border-radius: 50%;
-            padding: 10px;
-            box-shadow: 0 4px 30px rgba(218, 165, 32, 0.3);
+            padding: 12px;
+            box-shadow: 0 4px 35px rgba(218, 165, 32, 0.35);
             display: flex;
             align-items: center;
             justify-content: center;
             z-index: 2;
-            backdrop-filter: blur(5px);
-            border: 2px solid rgba(218, 165, 32, 0.3);
+            backdrop-filter: blur(8px);
+            border: 2px solid rgba(218, 165, 32, 0.35);
         }
 
         .logo {
@@ -63,7 +64,7 @@
 
         .container {
             position: relative;
-            width: 400px;
+            width: 420px;
             min-height: 580px;
             perspective: 1000px;
             margin-top: 100px;
@@ -75,7 +76,7 @@
             width: 100%;
             height: 100%;
             transform-style: preserve-3d;
-            transition: transform 0.8s ease-in-out;
+            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         .forms-container.flipped {
@@ -86,13 +87,13 @@
             position: absolute;
             width: 100%;
             height: 100%;
-            padding: 40px;
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 20px;
-            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+            padding: 45px;
+            background: rgba(255, 255, 255, 0.97);
+            border-radius: 24px;
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
             backface-visibility: hidden;
-            border: 1px solid rgba(218, 165, 32, 0.3);
-            backdrop-filter: blur(10px);
+            border: 1px solid rgba(218, 165, 32, 0.35);
+            backdrop-filter: blur(12px);
         }
 
         .register-form {
@@ -102,11 +103,11 @@
         h2 {
             text-align: center;
             color: #000;
-            margin-bottom: 30px;
-            font-size: 28px;
+            margin-bottom: 35px;
+            font-size: 32px;
             font-weight: 700;
             position: relative;
-            padding-bottom: 15px;
+            padding-bottom: 18px;
         }
 
         h2::after {
@@ -115,54 +116,55 @@
             bottom: 0;
             left: 50%;
             transform: translateX(-50%);
-            width: 60px;
-            height: 3px;
+            width: 80px;
+            height: 4px;
             background: linear-gradient(90deg, #DAA520, #FFD700);
-            border-radius: 2px;
+            border-radius: 4px;
         }
 
         .input-group {
-            margin-bottom: 25px;
+            margin-bottom: 28px;
             position: relative;
         }
 
         input {
             width: 100%;
-            padding: 15px 20px;
-            border: 2px solid rgba(218, 165, 32, 0.3);
-            border-radius: 12px;
+            padding: 16px 22px;
+            border: 2px solid rgba(218, 165, 32, 0.35);
+            border-radius: 14px;
             font-size: 16px;
             transition: all 0.3s ease;
-            background: rgba(255, 255, 255, 0.9);
+            background: rgba(255, 255, 255, 0.95);
             color: #333;
         }
 
         input:focus {
             border-color: #DAA520;
             background: white;
-            box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
+            box-shadow: 0 0 25px rgba(218, 165, 32, 0.25);
             outline: none;
+            transform: translateY(-2px);
         }
 
         button {
             width: 100%;
-            padding: 15px;
+            padding: 16px;
             background: linear-gradient(135deg, #DAA520 0%, #FFD700 100%);
             border: none;
-            border-radius: 12px;
+            border-radius: 14px;
             color: #000;
             font-size: 18px;
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
-            margin-bottom: 20px;
+            margin-bottom: 22px;
             position: relative;
             overflow: hidden;
         }
 
         button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 20px rgba(218, 165, 32, 0.4);
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(218, 165, 32, 0.4);
         }
 
         .toggle-btn {
@@ -170,19 +172,20 @@
             color: #DAA520;
             border: 2px solid #DAA520;
             font-weight: 500;
-            padding: 12px 25px;
+            padding: 14px 28px;
         }
 
         .toggle-btn:hover {
             background: #DAA520;
             color: white;
+            transform: translateY(-2px);
         }
 
         .message {
             margin-top: 15px;
             text-align: center;
-            padding: 12px;
-            border-radius: 12px;
+            padding: 14px;
+            border-radius: 14px;
             font-size: 14px;
             opacity: 0;
             transition: opacity 0.3s ease;
@@ -194,31 +197,44 @@
 
         .error {
             color: #D32F2F;
-            background-color: rgba(255, 235, 238, 0.9);
+            background-color: rgba(255, 235, 238, 0.95);
             border: 1px solid #FFCDD2;
         }
 
         .success {
             color: #388E3C;
-            background-color: rgba(232, 245, 233, 0.9);
+            background-color: rgba(232, 245, 233, 0.95);
             border: 1px solid #C8E6C9;
         }
 
         .form-footer {
             text-align: center;
-            margin-top: 25px;
-            font-size: 14px;
+            margin-top: 28px;
+            font-size: 15px;
             color: #333;
-            padding: 15px;
-            border-top: 1px solid rgba(218, 165, 32, 0.2);
+            padding: 18px;
+            border-top: 1px solid rgba(218, 165, 32, 0.25);
         }
 
         .terms {
-            font-size: 13px;
-            color: #555;
+            font-size: 14px;
+            color: #444;
             text-align: center;
-            margin-top: 15px;
-            line-height: 1.6;
+            margin-top: 18px;
+            line-height: 1.7;
+        }
+
+        .terms a {
+            color: #DAA520;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            border-bottom: 1px solid transparent;
+        }
+
+        .terms a:hover {
+            color: #B8860B;
+            border-bottom-color: #B8860B;
         }
 
         @media (max-width: 480px) {
@@ -228,21 +244,21 @@
             }
 
             .form-box {
-                padding: 30px 20px;
+                padding: 35px 25px;
             }
 
             h2 {
-                font-size: 24px;
+                font-size: 26px;
             }
         }
 
-        /* Animations */
+        /* Enhanced Animations */
         @keyframes float {
             0% {
                 transform: translateX(-50%) translateY(0px);
             }
             50% {
-                transform: translateX(-50%) translateY(-10px);
+                transform: translateX(-50%) translateY(-12px);
             }
             100% {
                 transform: translateX(-50%) translateY(0px);
@@ -253,30 +269,30 @@
             animation: float 6s ease-in-out infinite;
         }
 
-        /* Additional decorative elements */
+        /* Enhanced decorative elements */
         .decoration {
             position: absolute;
             background: linear-gradient(135deg, #DAA520 0%, #FFD700 100%);
-            opacity: 0.1;
+            opacity: 0.12;
             border-radius: 50%;
-            filter: blur(3px);
+            filter: blur(4px);
         }
 
         .decoration-1 {
-            width: 100px;
-            height: 100px;
-            top: -50px;
-            right: -50px;
+            width: 120px;
+            height: 120px;
+            top: -60px;
+            right: -60px;
         }
 
         .decoration-2 {
-            width: 150px;
-            height: 150px;
-            bottom: -75px;
-            left: -75px;
+            width: 180px;
+            height: 180px;
+            bottom: -90px;
+            left: -90px;
         }
 
-        /* Glowing effect */
+        /* Enhanced Glowing effect */
         .form-box::before {
             content: '';
             position: absolute;
@@ -285,27 +301,43 @@
             right: -2px;
             bottom: -2px;
             background: linear-gradient(45deg, #DAA520, #FFD700, #DAA520);
-            border-radius: 22px;
+            border-radius: 26px;
             z-index: -1;
-            filter: blur(10px);
+            filter: blur(15px);
             opacity: 0;
-            transition: opacity 0.3s ease;
+            transition: opacity 0.4s ease;
         }
 
         .form-box:hover::before {
-            opacity: 0.3;
+            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>
-    <!-- Rest of the HTML remains the same as in the original -->
     <div class="logo-container">
         <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" class="logo">
     </div>
     
     <div class="container">
         <div class="forms-container">
-            <!-- Login Form -->
+            <!-- نموذج تسجيل الدخول -->
             <div class="form-box login-form">
                 <div class="decoration decoration-1"></div>
                 <div class="decoration decoration-2"></div>
@@ -326,7 +358,7 @@
                 </div>
             </div>
 
-            <!-- Register Form -->
+            <!-- نموذج إنشاء حساب -->
             <div class="form-box register-form">
                 <div class="decoration decoration-1"></div>
                 <div class="decoration decoration-2"></div>
@@ -343,18 +375,24 @@
                     <button class="toggle-btn" onclick="toggleForm()">العودة لتسجيل الدخول</button>
                 </div>
                 <div class="terms">
-                    بالتسجيل، أنت توافق على الشروط والأحكام وسياسة الخصوصية
+                    بالتسجيل، أنت توافق على <a href="/terms" target="_blank">الشروط والأحكام</a> و<a href="/privacy" target="_blank">سياسة الخصوصية</a>
                 </div>
             </div>
         </div>
     </div>
 
     <script>
-        // JavaScript remains the same as in the original
         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) {
@@ -441,7 +479,7 @@
                     setTimeout(() => {
                         toggleForm();
                     }, 1500);
-                  } else {
+                } else {
                     showMessage('registerMessage', data.detail, true);
                 }
             } catch (error) {
@@ -453,7 +491,7 @@
             return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
         }
 
-        // Add Enter key response
+        // تحسين تجربة المستخدم مع استجابة زر Enter
         document.querySelectorAll('input').forEach(input => {
             input.addEventListener('keypress', (e) => {
                 if (e.key === 'Enter') {
@@ -467,42 +505,68 @@
             });
         });
 
-        // Add loading state to buttons
-        const buttons = document.querySelectorAll('button:not(.toggle-btn)');
-        buttons.forEach(button => {
+        // إضافة تأثيرات التحميل للأزرار
+        document.querySelectorAll('button:not(.toggle-btn)').forEach(button => {
             button.addEventListener('click', function() {
-                this.style.position = 'relative';
-                this.style.pointerEvents = 'none';
+                if (this.classList.contains('loading')) return;
+                
+                this.classList.add('loading');
                 const originalText = this.textContent;
                 this.textContent = '...جاري التنفيذ';
                 
                 setTimeout(() => {
                     this.textContent = originalText;
-                    this.style.pointerEvents = 'auto';
+                    this.classList.remove('loading');
                 }, 2000);
             });
         });
 
-        // Add smooth fade-in animation on load
+        // إضافة تأثير ظهور تدريجي عند تحميل الصفحة
         document.addEventListener('DOMContentLoaded', function() {
             document.body.style.opacity = '0';
-            setTimeout(() => {
-                document.body.style.transition = 'opacity 0.5s ease';
+            requestAnimationFrame(() => {
+                document.body.style.transition = 'opacity 0.8s ease';
                 document.body.style.opacity = '1';
-            }, 100);
+            });
         });
 
-        // Add input focus effects
+        // تحسين تأثيرات التركيز على حقول الإدخال
         document.querySelectorAll('input').forEach(input => {
-            input.addEventListener('focus', function() {
-                this.parentElement.classList.add('focused');
+            const inputGroup = input.parentElement;
+            
+            input.addEventListener('focus', () => {
+                inputGroup.classList.add('focused');
             });
             
-            input.addEventListener('blur', function() {
-                if (!this.value) {
-                    this.parentElement.classList.remove('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>