Spaces:

Skydata001
/

Password_AI

Sleeping

File size: 8,213 Bytes

<!DOCTYPE html>
<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>