Update login.html

login.html

@@ -14,24 +14,24 @@
         }
 
         body {
-            background: #f5f5f5;
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
             position: relative;
             padding: 20px;
+            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;
         }
 
         body::before {
             content: '';
-            position: absolute;
+            position: fixed;
             top: 0;
             left: 0;
             right: 0;
-            height: 45vh;
-            background: linear-gradient(135deg, #000 0%, #333 100%);
-            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 100%);
             z-index: 0;
         }
 
@@ -40,29 +40,25 @@
             top: 40px;
             left: 50%;
             transform: translateX(-50%);
-            width: 180px;
-            height: 180px;
-            background: white;
-            border-radius: 20px;
-            padding: 15px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            width: 150px;
+            height: 150px;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 50%;
+            padding: 10px;
+            box-shadow: 0 4px 30px rgba(218, 165, 32, 0.3);
             display: flex;
             align-items: center;
             justify-content: center;
             z-index: 2;
-            overflow: hidden;
+            backdrop-filter: blur(5px);
+            border: 2px solid rgba(218, 165, 32, 0.3);
         }
 
         .logo {
             width: 100%;
             height: 100%;
             object-fit: contain;
-            border-radius: 15px;
-            transition: transform 0.3s ease;
-        }
-
-        .logo:hover {
-            transform: scale(1.05);
+            border-radius: 50%;
         }
 
         .container {
@@ -70,7 +66,7 @@
             width: 400px;
             min-height: 580px;
             perspective: 1000px;
-            margin-top: 120px;
+            margin-top: 100px;
             z-index: 1;
         }
 
@@ -91,11 +87,12 @@
             width: 100%;
             height: 100%;
             padding: 40px;
-            background: white;
+            background: rgba(255, 255, 255, 0.95);
             border-radius: 20px;
-            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
             backface-visibility: hidden;
-            border: 1px solid rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(218, 165, 32, 0.3);
+            backdrop-filter: blur(10px);
         }
 
         .register-form {
@@ -120,7 +117,7 @@
             transform: translateX(-50%);
             width: 60px;
             height: 3px;
-            background: linear-gradient(90deg, #000, #333);
+            background: linear-gradient(90deg, #DAA520, #FFD700);
             border-radius: 2px;
         }
 
@@ -132,28 +129,28 @@
         input {
             width: 100%;
             padding: 15px 20px;
-            border: 2px solid #E8E8E8;
+            border: 2px solid rgba(218, 165, 32, 0.3);
             border-radius: 12px;
             font-size: 16px;
             transition: all 0.3s ease;
-            background: #F8F8F8;
+            background: rgba(255, 255, 255, 0.9);
             color: #333;
         }
 
         input:focus {
-            border-color: #000;
+            border-color: #DAA520;
             background: white;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
             outline: none;
         }
 
         button {
             width: 100%;
             padding: 15px;
-            background: linear-gradient(135deg, #000 0%, #333 100%);
+            background: linear-gradient(135deg, #DAA520 0%, #FFD700 100%);
             border: none;
             border-radius: 12px;
-            color: white;
+            color: #000;
             font-size: 18px;
             font-weight: 600;
             cursor: pointer;
@@ -165,34 +162,90 @@
 
         button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-            background: linear-gradient(135deg, #333 0%, #000 100%);
+            box-shadow: 0 5px 20px rgba(218, 165, 32, 0.4);
         }
 
         .toggle-btn {
             background: transparent;
-            color: #000;
-            border: 2px solid #000;
+            color: #DAA520;
+            border: 2px solid #DAA520;
             font-weight: 500;
             padding: 12px 25px;
         }
 
         .toggle-btn:hover {
-            background: #000;
+            background: #DAA520;
             color: white;
         }
 
-        /* باقي الأنماط تبقى كما هي */
-        
+        .message {
+            margin-top: 15px;
+            text-align: center;
+            padding: 12px;
+            border-radius: 12px;
+            font-size: 14px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .message.show {
+            opacity: 1;
+        }
+
+        .error {
+            color: #D32F2F;
+            background-color: rgba(255, 235, 238, 0.9);
+            border: 1px solid #FFCDD2;
+        }
+
+        .success {
+            color: #388E3C;
+            background-color: rgba(232, 245, 233, 0.9);
+            border: 1px solid #C8E6C9;
+        }
+
+        .form-footer {
+            text-align: center;
+            margin-top: 25px;
+            font-size: 14px;
+            color: #333;
+            padding: 15px;
+            border-top: 1px solid rgba(218, 165, 32, 0.2);
+        }
+
+        .terms {
+            font-size: 13px;
+            color: #555;
+            text-align: center;
+            margin-top: 15px;
+            line-height: 1.6;
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                width: 100%;
+                max-width: 380px;
+            }
+
+            .form-box {
+                padding: 30px 20px;
+            }
+
+            h2 {
+                font-size: 24px;
+            }
+        }
+
+        /* Animations */
         @keyframes float {
             0% {
-                transform: translateY(0px) translateX(-50%);
+                transform: translateX(-50%) translateY(0px);
             }
             50% {
-                transform: translateY(-10px) translateX(-50%);
+                transform: translateX(-50%) translateY(-10px);
             }
             100% {
-                transform: translateY(0px) translateX(-50%);
+                transform: translateX(-50%) translateY(0px);
             }
         }
 
@@ -200,11 +253,13 @@
             animation: float 6s ease-in-out infinite;
         }
 
+        /* Additional decorative elements */
         .decoration {
             position: absolute;
-            background: linear-gradient(135deg, #000 0%, #333 100%);
-            opacity: 0.05;
+            background: linear-gradient(135deg, #DAA520 0%, #FFD700 100%);
+            opacity: 0.1;
             border-radius: 50%;
+            filter: blur(3px);
         }
 
         .decoration-1 {
@@ -220,14 +275,169 @@
             bottom: -75px;
             left: -75px;
         }
+
+        /* Glowing effect */
+        .form-box::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            background: linear-gradient(45deg, #DAA520, #FFD700, #DAA520);
+            border-radius: 22px;
+            z-index: -1;
+            filter: blur(10px);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .form-box:hover::before {
+            opacity: 0.3;
+        }
     </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/2025/01/Black-Gold-Modern-Law-Firm-Presentation.png" alt="Logo" class="logo">
+        <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" class="logo">
     </div>
     
-    <!-- باقي محتوى HTML يبقى كما هو -->
-    <!-- Script يبقى كما هو -->
-</body>
-</html>
+    <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>
+                <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 class="form-footer">
+                    منصة ذكاء اصطناعي قانوني موثوقة ومرخصة
+                </div>
+            </div>
+
+            <!-- Register Form -->
+            <div class="form-box register-form">
+                <div class="decoration decoration-1"></div>
+                <div class="decoration decoration-2"></div>
+                <h2>حساب جديد</h2>
+                <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">
+                    بالتسجيل، أنت توافق على الشروط والأحكام وسياسة الخصوصية
+                </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');
+        }
+
+        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 username = document.getElementById('registerUsername').value;
+            const password = document.getElementById('registerPassword').value;
+            
+            if (!username || !password) {
+                showMessage('registerMessage', 'الرجاء إدخال جميع البيانات المطلوبة', true);
+                return;
+            }
+
+            if (!isValidEmail(username)) {
+                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 })
+                });
+                
+                const data = await response.json();
+                
+                if (response.ok) {
+                    showMessage('registerMessage', 'تم إنشاء الحساب بنجاح');
+                    document.getElementById('registerUsername').value = '';
+                    document.getElementById('registerPassword').value = '';
+                    setTimeout(() => {
+                        toggleForm();
+                    }, 1500);