<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Password Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #141E30, #243B55);
            color: #fff;
        }

        .container {
            text-align: center;
            padding: 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
            width: 80%;
            max-width: 500px;
            overflow-y: auto;
            max-height: 600px;
        }

        h1 {
            color: #fff;
            font-size: 2rem;
            margin-bottom: 20px;
        }

        label {
            margin-right: 10px;
            font-size: 16px;
        }

        input[type="number"],
        input[type="checkbox"] {
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            border: none;
            padding: 8px;
            border-radius: 5px;
            margin: 5px;
            outline: none;
        }

        button {
            background-color: #1E90FF;
            color: #fff;
            border: none;
            padding: 12px 24px;
            margin-top: 10px;
            cursor: pointer;
            border-radius: 10px;
            font-size: 14px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        button:hover {
            background-color: #0056b3;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        button.clear-button {
            background-color: #FF6347;
        }

        button.clear-button:hover {
            background-color: #FF4500;
        }

        .password-section {
            margin-top: 20px;
            overflow-y: auto;
            max-height: 300px;
        }

        .password-box {
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            padding: 15px;
            margin-top: 10px;
            background: url('https://source.unsplash.com/random/400x100') no-repeat center;
            background-size: cover;
            animation: slideIn 0.5s ease;
            color: #fff;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.2rem;
            text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
        }

        .password-text {
            flex-grow: 1;
            margin-right: 10px;
            word-break: break-word;
        }

        .copy-button {
            background-color: #32CD32;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }

        .copy-button:hover {
            background-color: #228B22;
        }

        .footer {
            margin-top: 20px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
        }

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateY(-20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Password Generator</h1>
        <label for="length">Password Length:</label>
        <input type="number" id="length" min="4" max="32" value="12">
        <br>
        <label>Include:</label>
        <input type="checkbox" id="uppercase" checked> Uppercase
        <input type="checkbox" id="lowercase" checked> Lowercase
        <input type="checkbox" id="numbers" checked> Numbers
        <input type="checkbox" id="special" checked> Special Characters
        <br>
        <button onclick="generatePassword()">Generate Password</button>
        <button onclick="savePasswords()">Download TXT</button>
        <button onclick="copyPasswords()">Copy All PASSWORD</button>
        <button onclick="clearPasswords()" class="clear-button">Clear Passwords</button>

        <div id="passwordList" class="password-section"></div>
    </div>
    <div class="footer">MADE BY ROMEK-XD</div>

    <script>
        function generatePassword() {
            const length = document.getElementById('length').value;
            const uppercase = document.getElementById('uppercase').checked;
            const lowercase = document.getElementById('lowercase').checked;
            const numbers = document.getElementById('numbers').checked;
            const special = document.getElementById('special').checked;

            const charset = [];
            if (uppercase) charset.push('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
            if (lowercase) charset.push('abcdefghijklmnopqrstuvwxyz');
            if (numbers) charset.push('0123456789');
            if (special) charset.push('!@#$%^&*()_+[]{}|;:,.<>?');

            if (charset.length === 0) return alert('Please select at least one character type.');

            let password = '';
            for (let i = 0; i < length; i++) {
                const randomCharset = charset[Math.floor(Math.random() * charset.length)];
                password += randomCharset.charAt(Math.floor(Math.random() * randomCharset.length));
            }

            const passwordList = document.getElementById('passwordList');
            const passwordBox = document.createElement('div');
            passwordBox.classList.add('password-box');

            const passwordText = document.createElement('span');
            passwordText.classList.add('password-text');
            passwordText.textContent = password;

            const copyButton = document.createElement('button');
            copyButton.classList.add('copy-button');
            copyButton.textContent = 'Copy';
            copyButton.onclick = () => navigator.clipboard.writeText(password).then(() => alert('Password copied!'));

            passwordBox.appendChild(passwordText);
            passwordBox.appendChild(copyButton);

            passwordList.appendChild(passwordBox);

            passwordList.scrollTop = passwordList.scrollHeight;
        }

        function savePasswords() {
            const passwords = Array.from(document.querySelectorAll('.password-text')).map(box => box.textContent).join('\n');
            const blob = new Blob([passwords], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'passwords.txt';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        function copyPasswords() {
            const passwords = Array.from(document.querySelectorAll('.password-text')).map(box => box.textContent).join('\n');
            navigator.clipboard.writeText(passwords)
                .then(() => alert('All passwords copied to clipboard!'))
                .catch(err => console.error('Failed to copy passwords: ', err));
        }

        function clearPasswords() {
            const passwordList = document.getElementById('passwordList');
            passwordList.innerHTML = '';
        }
    </script>
</body>
</html>