Spaces:
Sleeping
Sleeping
| <html lang="ar" dir="rtl"> | |
| <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> | |
| /* ========== الأنماط المُصححة (تسمح بالتمرير) ========== */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Cairo', sans-serif; | |
| background-color: #0b132b; | |
| color: #ffffff; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| /* تم تعديل هذا الجزء للسماح بالتمرير */ | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| 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; | |
| margin: 0 auto; /* هذا يضمن توسيط الحاوية */ | |
| } | |
| h1 { | |
| font-size: 28px; | |
| color: #00aaff; | |
| border-bottom: 2px solid #00aaff; | |
| padding-bottom: 10px; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| label { | |
| font-weight: 700; | |
| color: #e6f7ff; | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| .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; | |
| } | |
| input[type="password"]:focus, input[type="text"]:focus { | |
| border-color: #00aaff; | |
| } | |
| .toggle-btn { | |
| position: absolute; | |
| left: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1.2em; | |
| 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 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; } | |
| /* شريط التقدم */ | |
| .progress-bar-container { | |
| width: 100%; | |
| background-color: #2a3a5a; | |
| border-radius: 10px; | |
| margin-top: 15px; | |
| overflow: hidden; | |
| height: 15px; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| width: 0%; | |
| 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; } | |
| /* قائمة النصائح */ | |
| .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> | |
| <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> | |
| <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'; | |
| } 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; | |
| } | |
| fetch('/check', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ 'password': password }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| resultBox.style.display = 'block'; | |
| 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); | |
| const feedbackDetails = document.getElementById('feedback_details'); | |
| feedbackDetails.innerHTML = ''; | |
| data.feedback.forEach(item => { | |
| const li = document.createElement('li'); | |
| li.innerHTML = item; | |
| feedbackDetails.appendChild(li); | |
| }); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |