Update templates/password-strength.html

templates/password-strength.html

@@ -9,10 +9,10 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     
     <style>
-        /* الأنماط الأساسية المأخوذة من body في style.css */
+        /* ========== الأنماط المطابقة لتصميم SkyData الداكن ========== */
         body { 
             font-family: 'Cairo', sans-serif;
-            background-color: #0b132b; 
+            background-color: #0b132b; /* خلفية داكنة */
             color: #ffffff;
             line-height: 1.6;
             display: flex;
@@ -23,21 +23,19 @@
             direction: rtl;
         }
         
-        /* تنسيق الحاوية (مطابق لبطاقات موقعك) */
         .container { 
-            background-color: #111a30; /* لون الخلفية الداخلي */
+            background-color: #111a30; 
             padding: 30px;
             border-radius: 10px;
-            box-shadow: 0 5px 20px rgba(0, 170, 255, 0.1); /* ظل أزرق خفيف */
+            box-shadow: 0 5px 20px rgba(0, 170, 255, 0.1); 
             width: 100%;
             max-width: 500px;
             border: 1px solid #2a3a5a;
         }
 
-        /* تنسيق العنوان (مطابق لـ section-title) */
         h1 { 
             font-size: 28px;
-            color: #00aaff; 
+            color: #00aaff; /* لون أزرق SkyData */
             border-bottom: 2px solid #00aaff;
             padding-bottom: 10px;
             margin-bottom: 30px;
@@ -45,20 +43,15 @@
             display: block; 
         }
 
-        /* تنسيق الـ Label */
         label { 
             font-weight: 700;
             color: #e6f7ff;
             display: block; 
             margin-bottom: 8px;
-            font-size: 16px;
         }
         
-        /* تنسيق حقل الإدخال مع زر الإظهار/الإخفاء */
-        .password-input-wrapper { 
-            position: relative; 
-            margin-bottom: 25px; 
-        }
+        /* حقل الإدخال وزر الإظهار/الإخفاء */
+        .password-input-wrapper { position: relative; margin-bottom: 25px; }
         input[type="password"], input[type="text"] { 
             width: 100%; 
             padding: 15px; 
@@ -69,15 +62,13 @@
             direction: ltr; 
             text-align: left; 
             padding-left: 50px; 
-            background-color: #0b132b; /* خلفية داكنة */
-            color: #ffffff; /* نص أبيض */
-            transition: border-color 0.3s ease;
+            background-color: #0b132b; 
+            color: #ffffff; 
         }
         input[type="password"]:focus, input[type="text"]:focus {
-            border-color: #00aaff; /* لون أزرق عند التركيز */
+            border-color: #00aaff; 
         }
         
-        /* زر الإظهار/الإخفاء (باستخدام أيقونات Font Awesome) */
         .toggle-btn {
             position: absolute; 
             left: 10px; 
@@ -87,41 +78,19 @@
             border: none; 
             cursor: pointer; 
             font-size: 1.2em;
-            color: #c0d0f0; /* لون الأيقونة */
-            transition: color 0.3s ease;
-        }
-        .toggle-btn:hover {
-             color: #00aaff; /* لون أزرق عند التحويم */
+            color: #c0d0f0; 
+            padding: 0;
         }
+        .toggle-btn:hover { color: #00aaff; }
 
-        /* تنسيق صندوق النتائج */
-        .result { 
-            padding: 18px; 
-            border-radius: 8px; 
-            margin-top: 25px; 
-            font-size: 1.1em; 
-            font-weight: bold; 
-            display: none; 
-        }
+        /* تنسيق صندوق النتائج والألوان التنبيهية */
+        .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; } /* آمنة */
         
-        /* تنسيق قائمة النصائح */
-        .feedback-list { 
-            padding-right: 20px; 
-            list-style-type: none; 
-            margin-top: 10px;
-            font-weight: normal;
-        }
-        .feedback-list li {
-            margin-bottom: 5px;
-            font-size: 0.95em;
-        }
-
         /* شريط التقدم */
         .progress-bar-container {
             width: 100%;
@@ -134,8 +103,7 @@
 
         .progress-bar {
             height: 100%;
-            width: 0%; /* سيبدأ من 0 ويتم تحديثه بـ JS */
-            background-color: #00aaff; /* اللون الأساسي للتقدم */
+            width: 0%; 
             transition: width 0.4s ease-in-out, background-color 0.4s ease;
             text-align: center;
             color: #111a30;
@@ -146,14 +114,21 @@
         .progress-bar.red-bar { background-color: #ff6b6b; }
         .progress-bar.orange-bar { background-color: #ffc36b; }
         .progress-bar.green-bar { background-color: #6bff6b; }
-
+        
+        /* قائمة النصائح */
+        .feedback-list { 
+            padding-right: 20px; 
+            list-style-type: none; 
+            margin-top: 10px;
+            font-weight: normal;
+        }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1><i class="fas fa-key" style="margin-left: 10px;"></i> فحص قوة كلمة السر</h1>
+        <h1><i class="fas fa-key" style="margin-left: 10px;"></i> فحص قوة كلمة السر الذكي</h1>
         
-        <label for="password_input">أدخل كلمة المرور للفحص (عربي/إنجليزي/رموز):</label>
+        <label for="password_input">أدخل كلمة المرور للفحص:</label>
         
         <div class="password-input-wrapper">
             <input type="password" id="password_input" onkeyup="checkPassword()">
@@ -169,23 +144,23 @@
                 <div id="progress_bar" class="progress-bar"></div>
             </div>
 
-            <p style="margin-top: 15px;"><strong>نسبة الحماية:</strong> <span id="protection_percentage">0%</span></p> 
+            <p style="margin-top: 15px;"><strong>نسبة الحماية المُقدَّرة:</strong> <span id="protection_percentage">0%</span></p> 
             <ul id="feedback_details" class="feedback-list"></ul>
         </div>
     </div>
 
     <script>
-        // دالة تبديل الإظهار/الإخفاء
+        // دالة تبديل الإظهار/الإخفاء (باستخدام الأيقونات الحقيقية)
         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'; // إظهار
             }
         }
 
@@ -203,7 +178,7 @@
                 progressBar.classList.add('green-bar');
             }
             
-            // عرض النسبة داخل الشريط إذا كان واسعاً بما يكفي
+            // عرض النسبة داخل الشريط
             progressBar.textContent = percentage > 20 ? `${percentage}%` : '';
         }
 
@@ -213,7 +188,7 @@
             
             if (password.length === 0) {
                 resultBox.style.display = 'none';
-                updateProgressBar(0, 'red'); // إعادة تعيين الشريط
+                updateProgressBar(0, 'red'); 
                 return;
             }
 
@@ -236,12 +211,12 @@
                 // تحديث شريط التقدم
                 updateProgressBar(percentage, data.color);
 
-                // تحديث النصائح
+                // تحديث النصائح (باستخدام innerHTML للتعامل مع تنسيقات zxcvbn)
                 const feedbackDetails = document.getElementById('feedback_details');
                 feedbackDetails.innerHTML = '';
                 data.feedback.forEach(item => {
                     const li = document.createElement('li');
-                    li.textContent = item;
+                    li.innerHTML = item; 
                     feedbackDetails.appendChild(li);
                 });
             });