Update login.html

login.html

@@ -14,13 +14,13 @@
         }
 
         body {
-            background: linear-gradient(135deg, #1a237e 0%, #121858 100%);
-            height: 100vh;
+            background: #fff;
+            min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
-            overflow: hidden;
             position: relative;
+            padding: 20px;
         }
 
         body::before {
@@ -29,28 +29,43 @@
             top: 0;
             left: 0;
             right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="%23ffffff" fill-opacity="0.03" width="100" height="100"/><path d="M0 0h100v100H0z" fill="none" stroke="%23ffffff" stroke-opacity="0.05"/></svg>') repeat;
-            background-size: 50px 50px;
-            pointer-events: none;
+            height: 40vh;
+            background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
+            clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
+            z-index: 0;
         }
 
-        .logo {
+        .logo-container {
             position: absolute;
-            top: 20px;
+            top: 40px;
             left: 50%;
             transform: translateX(-50%);
-            width: 180px;
-            height: auto;
-            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+            width: 150px;
+            height: 150px;
+            background: white;
+            border-radius: 50%;
+            padding: 10px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 2;
+        }
+
+        .logo {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            border-radius: 50%;
         }
 
         .container {
             position: relative;
             width: 400px;
-            height: 550px;
+            min-height: 580px;
             perspective: 1000px;
-            margin-top: 50px;
+            margin-top: 100px;
+            z-index: 1;
         }
 
         .forms-container {
@@ -70,11 +85,11 @@
             width: 100%;
             height: 100%;
             padding: 40px;
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 15px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
             backface-visibility: hidden;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(139, 69, 19, 0.1);
         }
 
         .register-form {
@@ -83,7 +98,7 @@
 
         h2 {
             text-align: center;
-            color: #1a237e;
+            color: #8B4513;
             margin-bottom: 30px;
             font-size: 28px;
             font-weight: 700;
@@ -99,7 +114,7 @@
             transform: translateX(-50%);
             width: 60px;
             height: 3px;
-            background: linear-gradient(90deg, #1a237e, #3949ab);
+            background: linear-gradient(90deg, #8B4513, #D2691E);
             border-radius: 2px;
         }
 
@@ -110,30 +125,31 @@
 
         input {
             width: 100%;
-            padding: 15px;
-            border: 2px solid #e1e1e1;
-            border-radius: 8px;
+            padding: 15px 20px;
+            border: 2px solid #E8E8E8;
+            border-radius: 12px;
             font-size: 16px;
             transition: all 0.3s ease;
-            background: rgba(255, 255, 255, 0.9);
-            color: #1a237e;
+            background: #F8F8F8;
+            color: #333;
         }
 
         input:focus {
-            border-color: #1a237e;
-            box-shadow: 0 0 15px rgba(26, 35, 126, 0.1);
+            border-color: #8B4513;
+            background: white;
+            box-shadow: 0 0 15px rgba(139, 69, 19, 0.1);
             outline: none;
         }
 
         button {
             width: 100%;
             padding: 15px;
-            background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
+            background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
             border: none;
-            border-radius: 8px;
+            border-radius: 12px;
             color: white;
             font-size: 18px;
-            font-weight: 500;
+            font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
             margin-bottom: 20px;
@@ -141,46 +157,21 @@
             overflow: hidden;
         }
 
-        button::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: 0.5s;
-        }
-
-        button:hover::before {
-            left: 100%;
-        }
-
         button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(26, 35, 126, 0.3);
-        }
-
-        .toggle-form {
-            text-align: center;
-            margin-top: 20px;
+            box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3);
         }
 
         .toggle-btn {
             background: transparent;
-            color: #1a237e;
-            font-size: 16px;
-            padding: 10px 20px;
-            border: 2px solid #1a237e;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
+            color: #8B4513;
+            border: 2px solid #8B4513;
+            font-weight: 500;
+            padding: 12px 25px;
         }
 
         .toggle-btn:hover {
-            background: #1a237e;
+            background: #8B4513;
             color: white;
         }
 
@@ -188,7 +179,7 @@
             margin-top: 15px;
             text-align: center;
             padding: 12px;
-            border-radius: 8px;
+            border-radius: 12px;
             font-size: 14px;
             opacity: 0;
             transition: opacity 0.3s ease;
@@ -199,70 +190,107 @@
         }
 
         .error {
-            color: #c62828;
-            background-color: #ffebee;
-            border: 1px solid #ffcdd2;
+            color: #D32F2F;
+            background-color: #FFEBEE;
+            border: 1px solid #FFCDD2;
         }
 
         .success {
-            color: #2e7d32;
-            background-color: #e8f5e9;
-            border: 1px solid #c8e6c9;
+            color: #388E3C;
+            background-color: #E8F5E9;
+            border: 1px solid #C8E6C9;
         }
 
         .form-footer {
             text-align: center;
-            margin-top: 20px;
+            margin-top: 25px;
             font-size: 14px;
             color: #666;
+            padding: 15px;
+            border-top: 1px solid #eee;
         }
 
-        /* Decorative elements */
-        .form-box::before {
-            content: '';
+        .terms {
+            font-size: 13px;
+            color: #888;
+            text-align: center;
+            margin-top: 15px;
+            line-height: 1.6;
+        }
+
+        .decoration {
             position: absolute;
-            top: -5px;
-            left: -5px;
-            right: -5px;
-            bottom: -5px;
-            background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
-            z-index: -1;
-            border-radius: 17px;
+            background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
             opacity: 0.1;
+            border-radius: 50%;
+        }
+
+        .decoration-1 {
+            width: 100px;
+            height: 100px;
+            top: -50px;
+            right: -50px;
+        }
+
+        .decoration-2 {
+            width: 150px;
+            height: 150px;
+            bottom: -75px;
+            left: -75px;
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                width: 100%;
+                max-width: 380px;
+            }
+
+            .form-box {
+                padding: 30px 20px;
+            }
+
+            h2 {
+                font-size: 24px;
+            }
         }
 
         /* Animation */
-        @keyframes fadeIn {
-            from { 
-                opacity: 0; 
-                transform: translateY(-20px); 
+        @keyframes float {
+            0% {
+                transform: translateY(0px);
+            }
+            50% {
+                transform: translateY(-10px);
             }
-            to { 
-                opacity: 1; 
-                transform: translateY(0); 
+            100% {
+                transform: translateY(0px);
             }
         }
 
-        .form-box {
-            animation: fadeIn 0.5s ease-out;
+        .logo-container {
+            animation: float 6s ease-in-out infinite;
         }
     </style>
 </head>
 <body>
-    <img src="https://ufastpro.com/wp-content/uploads/2024/11/تصميم-بدون-عنوان-3.png" alt="Logo" class="logo">
+    <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">
             <!-- نموذج تسجيل الدخول -->
             <div class="form-box login-form">
-                <h2>تسجيل الدخول</h2>
+                <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>
+                <button onclick="login()">تسجيل الدخول</button>
                 <div id="loginMessage" class="message"></div>
                 <div class="toggle-form">
                     <button class="toggle-btn" onclick="toggleForm()">إنشاء حساب جديد</button>
@@ -274,19 +302,21 @@
 
             <!-- نموذج إنشاء حساب -->
             <div class="form-box register-form">
-                <h2>إنشاء حساب جديد</h2>
+                <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>
+                <button onclick="register()">إنشاء الحساب</button>
                 <div id="registerMessage" class="message"></div>
                 <div class="toggle-form">
                     <button class="toggle-btn" onclick="toggleForm()">العودة لتسجيل الدخول</button>
                 </div>
-                <div class="form-footer">
+                <div class="terms">
                     بالتسجيل، أنت توافق على الشروط والأحكام وسياسة الخصوصية
                 </div>
             </div>
@@ -335,7 +365,7 @@
                 const data = await response.json();
                 
                 if (response.ok) {
-                    showMessage('loginMessage', data.message);
+                    showMessage('loginMessage', 'تم تسجيل الدخول بنجاح');
                     setTimeout(() => {
                         window.location.href = data.redirect_url;
                     }, 1000);
@@ -378,7 +408,7 @@
                 const data = await response.json();
                 
                 if (response.ok) {
-                    showMessage('registerMessage', data.message);
+                    showMessage('registerMessage', 'تم إنشاء الحساب بنجاح');
                     document.getElementById('registerUsername').value = '';
                     document.getElementById('registerPassword').value = '';
                     setTimeout(() => {