Update templates/password-strength.html

templates/password-strength.html

@@ -9,17 +9,22 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     
     <style>
-        /* ========== الأنماط المطابقة لتصميم SkyData الداكن ========== */
+        /* ========== الأنماط المُصححة (تسمح بالتمرير) ========== */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
         body { 
             font-family: 'Cairo', sans-serif;
-            background-color: #0b132b; /* خلفية داكنة */
+            background-color: #0b132b; 
             color: #ffffff;
             line-height: 1.6;
-            display: flex;
-            justify-content: center;
-            align-items: center;
             min-height: 100vh;
-            padding: 50px 20px;
+            /* تم تعديل هذا الجزء للسماح بالتمرير */
+            padding-top: 50px; 
+            padding-bottom: 50px; 
             direction: rtl;
         }
         
@@ -31,16 +36,16 @@
             width: 100%;
             max-width: 500px;
             border: 1px solid #2a3a5a;
+            margin: 0 auto; /* هذا يضمن توسيط الحاوية */
         }
 
         h1 { 
             font-size: 28px;
-            color: #00aaff; /* لون أزرق SkyData */
+            color: #00aaff; 
             border-bottom: 2px solid #00aaff;
             padding-bottom: 10px;
             margin-bottom: 30px;
             text-align: center; 
-            display: block; 
         }
 
         label { 
@@ -50,7 +55,6 @@
             margin-bottom: 8px;
         }
         
-        /* حقل الإدخال وزر الإظهار/الإخفاء */
         .password-input-wrapper { position: relative; margin-bottom: 25px; }
         input[type="password"], input[type="text"] { 
             width: 100%; 
@@ -87,9 +91,9 @@
         .result { padding: 18px; border-radius: 8px; margin-top: 25px; font-size: 1.1em; font-weight: bold; display: none; }
         .result p { margin-bottom: 5px; }
         
-        .red { background-color: #2a0f12; color: #ff6b6b; border: 1px solid #a33232; } /* ضعيفة جداً */
-        .orange { background-color: #3b2a0f; color: #ffc36b; border: 1px solid #a37232; } /* جيدة (متوسطة) */
-        .green { background-color: #122a0f; color: #6bff6b; border: 1px solid #32a332; } /* آمنة */
+        .red { background-color: #2a0f12; color: #ff6b6b; border: 1px solid #a33232; } 
+        .orange { background-color: #3b2a0f; color: #ffc36b; border: 1px solid #a37232; } 
+        .green { background-color: #122a0f; color: #6bff6b; border: 1px solid #32a332; } 
         
         /* شريط التقدم */
         .progress-bar-container {
@@ -150,17 +154,17 @@
     </div>
 
     <script>
-        // دالة تبديل الإظهار/الإخفاء (باستخدام الأيقونات الحقيقية)
+        // ... (باقي كود JavaScript لم يتغير)
         function togglePasswordVisibility() {
             const passwordInput = document.getElementById('password_input');
             const toggleIcon = document.getElementById('toggle_btn').querySelector('i');
             
             if (passwordInput.type === 'password') {
                 passwordInput.type = 'text';
-                toggleIcon.className = 'fas fa-eye-slash'; // إخفاء
+                toggleIcon.className = 'fas fa-eye-slash'; 
             } else {
                 passwordInput.type = 'password';
-                toggleIcon.className = 'fas fa-eye'; // إظهار
+                toggleIcon.className = 'fas fa-eye'; 
             }
         }
 
@@ -168,7 +172,6 @@
             const progressBar = document.getElementById('progress_bar');
             progressBar.style.width = `${percentage}%`;
             
-            // تحديث لون الشريط
             progressBar.className = 'progress-bar';
             if (color === 'red') {
                 progressBar.classList.add('red-bar');
@@ -178,7 +181,6 @@
                 progressBar.classList.add('green-bar');
             }
             
-            // عرض النسبة داخل الشريط
             progressBar.textContent = percentage > 20 ? `${percentage}%` : '';
         }
 
@@ -192,7 +194,6 @@
                 return;
             }
 
-            // إرسال طلب POST إلى الخادم
             fetch('/check', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -204,14 +205,11 @@
                 resultBox.className = `result ${data.color}`;
                 document.getElementById('password_status').textContent = data.status;
                 
-                // تحديث النسبة المئوية
                 const percentage = data.percentage || 0;
                 document.getElementById('protection_percentage').textContent = `${percentage}%`;
                 
-                // تحديث شريط التقدم
                 updateProgressBar(percentage, data.color);
 
-                // تحديث النصائح (باستخدام innerHTML للتعامل مع تنسيقات zxcvbn)
                 const feedbackDetails = document.getElementById('feedback_details');
                 feedbackDetails.innerHTML = '';
                 data.feedback.forEach(item => {