Spaces:

Skydata001
/

Password_AI

Sleeping

App Files Files Community

Skydata001 commited on Nov 16, 2025

Commit

60be266

verified ·

1 Parent(s): 5939ec4

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +172 -24

templates/index.html CHANGED Viewed

@@ -3,48 +3,173 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>مدقق قوة وسلامة كلمة المرور</title>
     <style>
-        body { font-family: Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; direction: rtl; text-align: right; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px;}
-        .container { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); width: 100%; max-width: 500px; }
-        h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; margin-bottom: 25px; text-align: center; }
-        label { font-weight: bold; color: #34495e; display: block; margin-bottom: 8px;}
         /* تنسيق حقل الإدخال مع زر الإظهار/الإخفاء */
-        .password-input-wrapper { position: relative; margin-bottom: 20px; }
         input[type="password"], input[type="text"] {
-            width: 100%; padding: 15px; border: 2px solid #ccc; border-radius: 8px;
-            box-sizing: border-box; font-size: 18px; direction: ltr; text-align: left;
-            padding-left: 50px; /* مسافة للزر */
         }
         .toggle-btn {
-            position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
-            background: none; border: none; cursor: pointer; font-size: 1.2em;
-            color: #7f8c8d;
         }
-        .result { padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 1.1em; font-weight: bold; display: none; }
-        .feedback-list { padding-right: 20px; list-style-type: none; }
-        .red { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
-        .orange { background-color: #ffe8b7; color: #856404; border: 1px solid #ffda90; }
-        .green { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>مدقق قوة وسلامة كلمة المرور 🔒</h1>
         <label for="password_input">أدخل كلمة المرور للفحص (عربي/إنجليزي/رموز):</label>
         <div class="password-input-wrapper">
             <input type="password" id="password_input" onkeyup="checkPassword()">
             <button type="button" class="toggle-btn" onclick="togglePasswordVisibility()" id="toggle_btn">
-                👁️
             </button>
         </div>
         <div id="result_box" class="result">
             <p><strong>حالة كلمة المرور:</strong> <span id="password_status"></span></p>
-            <p><strong>نسبة الحماية:</strong> <span id="protection_percentage"></span></p>
             <ul id="feedback_details" class="feedback-list"></ul>
         </div>
     </div>
@@ -53,23 +178,42 @@
         // دالة تبديل الإظهار/الإخفاء
         function togglePasswordVisibility() {
             const passwordInput = document.getElementById('password_input');
-            const toggleBtn = document.getElementById('toggle_btn');
             if (passwordInput.type === 'password') {
                 passwordInput.type = 'text';
-                toggleBtn.textContent = '🙈'; // أيقونة إخفاء
             } else {
                 passwordInput.type = 'password';
-                toggleBtn.textContent = '👁️'; // أيقونة إظهار
             }
         }
         function checkPassword() {
             const password = document.getElementById('password_input').value;
             const resultBox = document.getElementById('result_box');
             if (password.length === 0) {
                 resultBox.style.display = 'none';
                 return;
             }
@@ -86,7 +230,11 @@
                 document.getElementById('password_status').textContent = data.status;
                 // تحديث النسبة المئوية
-                document.getElementById('protection_percentage').textContent = `${data.percentage}%`;
                 // تحديث النصائح
                 const feedbackDetails = document.getElementById('feedback_details');

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>فحص قوة كلمة السر - SkyData</title>
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* الأنماط الأساسية المأخوذة من body في style.css */
+        body {
+            font-family: 'Cairo', sans-serif;
+            background-color: #0b132b;
+            color: #ffffff;
+            line-height: 1.6;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 50px 20px;
+            direction: rtl;
+        }
+        /* تنسيق الحاوية (مطابق لبطاقات موقعك) */
+        .container {
+            background-color: #111a30; /* لون الخلفية الداخلي */
+            padding: 30px;
+            border-radius: 10px;
+            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;
+            border-bottom: 2px solid #00aaff;
+            padding-bottom: 10px;
+            margin-bottom: 30px;
+            text-align: center;
+            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;
+        }
         input[type="password"], input[type="text"] {
+            width: 100%;
+            padding: 15px;
+            border: 2px solid #2a3a5a;
+            border-radius: 8px;
+            box-sizing: border-box;
+            font-size: 18px;
+            direction: ltr;
+            text-align: left;
+            padding-left: 50px;
+            background-color: #0b132b; /* خلفية داكنة */
+            color: #ffffff; /* نص أبيض */
+            transition: border-color 0.3s ease;
         }
+        input[type="password"]:focus, input[type="text"]:focus {
+            border-color: #00aaff; /* لون أزرق عند التركيز */
+        }
+        /* زر الإظهار/الإخفاء (باستخدام أيقونات Font Awesome) */
         .toggle-btn {
+            position: absolute;
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.2em;
+            color: #c0d0f0; /* لون الأيقونة */
+            transition: color 0.3s ease;
+        }
+        .toggle-btn:hover {
+             color: #00aaff; /* لون أزرق عند التحويم */
+        }
+        /* تنسيق صندوق النتائج */
+        .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%;
+            background-color: #2a3a5a;
+            border-radius: 10px;
+            margin-top: 15px;
+            overflow: hidden;
+            height: 15px;
         }
+        .progress-bar {
+            height: 100%;
+            width: 0%; /* سيبدأ من 0 ويتم تحديثه بـ JS */
+            background-color: #00aaff; /* اللون الأساسي للتقدم */
+            transition: width 0.4s ease-in-out, background-color 0.4s ease;
+            text-align: center;
+            color: #111a30;
+            font-size: 10px;
+            line-height: 15px;
+            font-weight: 700;
+        }
+        .progress-bar.red-bar { background-color: #ff6b6b; }
+        .progress-bar.orange-bar { background-color: #ffc36b; }
+        .progress-bar.green-bar { background-color: #6bff6b; }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1><i class="fas fa-key" style="margin-left: 10px;"></i> فحص قوة كلمة السر</h1>
         <label for="password_input">أدخل كلمة المرور للفحص (عربي/إنجليزي/رموز):</label>
         <div class="password-input-wrapper">
             <input type="password" id="password_input" onkeyup="checkPassword()">
             <button type="button" class="toggle-btn" onclick="togglePasswordVisibility()" id="toggle_btn">
+                <i class="fas fa-eye"></i>
             </button>
         </div>
         <div id="result_box" class="result">
             <p><strong>حالة كلمة المرور:</strong> <span id="password_status"></span></p>
+            <div class="progress-bar-container">
+                <div id="progress_bar" class="progress-bar"></div>
+            </div>
+            <p style="margin-top: 15px;"><strong>نسبة الحماية:</strong> <span id="protection_percentage">0%</span></p>
             <ul id="feedback_details" class="feedback-list"></ul>
         </div>
     </div>
         // دالة تبديل الإظهار/الإخفاء
         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'; // أيقونة إخفاء
             } else {
                 passwordInput.type = 'password';
+                toggleIcon.className = 'fas fa-eye'; // أيقونة إظهار
             }
         }
+        function updateProgressBar(percentage, color) {
+            const progressBar = document.getElementById('progress_bar');
+            progressBar.style.width = `${percentage}%`;
+            // تحديث لون الشريط
+            progressBar.className = 'progress-bar';
+            if (color === 'red') {
+                progressBar.classList.add('red-bar');
+            } else if (color === 'orange') {
+                progressBar.classList.add('orange-bar');
+            } else if (color === 'green') {
+                progressBar.classList.add('green-bar');
+            }
+            // عرض النسبة داخل الشريط إذا كان واسعاً بما يكفي
+            progressBar.textContent = percentage > 20 ? `${percentage}%` : '';
+        }
         function checkPassword() {
             const password = document.getElementById('password_input').value;
             const resultBox = document.getElementById('result_box');
             if (password.length === 0) {
                 resultBox.style.display = 'none';
+                updateProgressBar(0, 'red'); // إعادة تعيين الشريط
                 return;
             }
                 document.getElementById('password_status').textContent = data.status;
                 // تحديث النسبة المئوية
+                const percentage = data.percentage || 0;
+                document.getElementById('protection_percentage').textContent = `${percentage}%`;
+                // تحديث شريط التقدم
+                updateProgressBar(percentage, data.color);
                 // تحديث النصائح
                 const feedbackDetails = document.getElementById('feedback_details');