Update login.html

login.html

@@ -4,6 +4,7 @@
     <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=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
     <style>
         * {
             margin: 0;
@@ -11,126 +12,229 @@
             box-sizing: border-box;
             font-family: 'Tajawal', sans-serif;
         }
+
         body {
-            background: linear-gradient(120deg, #2980b9, #8e44ad);
+            background: linear-gradient(135deg, #00416A 0%, #E4E5E6 100%);
             height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
+            overflow: hidden;
+        }
+
+        .logo {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 150px;
+            height: auto;
         }
+
         .container {
+            position: relative;
+            width: 400px;
+            height: 500px;
+            perspective: 1000px;
+            margin-top: 50px;
+        }
+
+        .forms-container {
+            position: relative;
             width: 100%;
-            max-width: 800px;
-            padding: 20px;
-            display: flex;
-            gap: 20px;
+            height: 100%;
+            transform-style: preserve-3d;
+            transition: transform 0.8s ease-in-out;
+        }
+
+        .forms-container.flipped {
+            transform: rotateY(180deg);
         }
+
         .form-box {
-            background: white;
+            position: absolute;
+            width: 100%;
+            height: 100%;
             padding: 40px;
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            flex: 1;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 20px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+            backface-visibility: hidden;
         }
+
+        .register-form {
+            transform: rotateY(180deg);
+        }
+
         h2 {
             text-align: center;
-            color: #2c3e50;
+            color: #00416A;
             margin-bottom: 30px;
+            font-size: 28px;
+            font-weight: 700;
         }
+
         .input-group {
-            margin-bottom: 20px;
+            margin-bottom: 25px;
+            position: relative;
         }
+
         input {
             width: 100%;
-            padding: 12px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
+            padding: 15px;
+            border: 2px solid #e1e1e1;
+            border-radius: 10px;
             font-size: 16px;
-            transition: border-color 0.3s;
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.9);
         }
+
         input:focus {
-            border-color: #3498db;
+            border-color: #00416A;
+            box-shadow: 0 0 10px rgba(0, 65, 106, 0.2);
             outline: none;
         }
+
         button {
             width: 100%;
-            padding: 12px;
-            background: #3498db;
+            padding: 15px;
+            background: #00416A;
             border: none;
-            border-radius: 5px;
+            border-radius: 10px;
             color: white;
-            font-size: 16px;
+            font-size: 18px;
+            font-weight: 500;
             cursor: pointer;
-            transition: background 0.3s;
+            transition: all 0.3s ease;
+            margin-bottom: 20px;
         }
+
         button:hover {
-            background: #2980b9;
+            background: #005688;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 65, 106, 0.3);
+        }
+
+        .toggle-form {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .toggle-btn {
+            background: transparent;
+            color: #00416A;
+            font-size: 16px;
+            padding: 10px 20px;
+            border: 2px solid #00416A;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .toggle-btn:hover {
+            background: #00416A;
+            color: white;
         }
+
         .message {
             margin-top: 15px;
             text-align: center;
-            padding: 10px;
-            border-radius: 5px;
+            padding: 12px;
+            border-radius: 8px;
+            font-size: 14px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
+
+        .message.show {
+            opacity: 1;
+        }
+
         .error {
             color: #e74c3c;
             background-color: #fde8e8;
         }
+
         .success {
             color: #2ecc71;
             background-color: #e8f8f0;
         }
-        @media (max-width: 768px) {
-            .container {
-                flex-direction: column;
-            }
+
+        /* Animation */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .form-box {
+            animation: fadeIn 0.5s ease-out;
         }
     </style>
 </head>
 <body>
+    <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" class="logo">
+    
     <div class="container">
-        <!-- نموذج تسجيل الدخول -->
-        <div class="form-box">
-            <h2>تسجيل الدخول</h2>
-            <div class="input-group">
-                <input type="text" id="loginUsername" placeholder="اسم المستخدم">
-            </div>
-            <div class="input-group">
-                <input type="password" id="loginPassword" placeholder="كلمة المرور">
+        <div class="forms-container">
+            <!-- نموذج تسجيل الدخول -->
+            <div class="form-box login-form">
+                <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>
-            <button onclick="login()">دخول</button>
-            <div id="loginMessage" class="message"></div>
-        </div>
 
-        <!-- نموذج إنشاء حساب -->
-        <div class="form-box">
-            <h2>إنشاء حساب جديد</h2>
-            <div class="input-group">
-                <input type="text" id="registerUsername" placeholder="اسم المستخدم">
-            </div>
-            <div class="input-group">
-                <input type="password" id="registerPassword" placeholder="كلمة المرور">
+            <!-- نموذج إنشاء حساب -->
+            <div class="form-box register-form">
+                <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>
-            <button onclick="register()">إنشاء حساب</button>
-            <div id="registerMessage" class="message"></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');
+        }
+
         function showMessage(elementId, message, isError = false) {
             const element = document.getElementById(elementId);
             element.textContent = message;
-            element.className = `message ${isError ? 'error' : 'success'}`;
+            element.className = `message ${isError ? 'error' : 'success'} show`;
             setTimeout(() => {
-                element.textContent = '';
                 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;
+            }
+
             try {
                 const response = await fetch(`${API_URL}/login`, {
                     method: 'POST',
@@ -154,10 +258,16 @@
                 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;
+            }
+
             try {
                 const response = await fetch(`${API_URL}/register`, {
                     method: 'POST',
@@ -173,6 +283,9 @@
                     showMessage('registerMessage', data.message);
                     document.getElementById('registerUsername').value = '';
                     document.getElementById('registerPassword').value = '';
+                    setTimeout(() => {
+                        toggleForm();
+                    }, 1500);
                 } else {
                     showMessage('registerMessage', data.detail, true);
                 }
@@ -180,6 +293,20 @@
                 showMessage('registerMessage', 'حدث خطأ في الاتصال', true);
             }
         }
+
+        // إضافة استجابة للضغط على Enter
+        document.querySelectorAll('input').forEach(input => {
+            input.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    const form = input.closest('.form-box');
+                    if (form.classList.contains('login-form')) {
+                        login();
+                    } else {
+                        register();
+                    }
+                }
+            });
+        });
     </script>
 </body>
 </html>