MyBox/password_generator.html at main · skkdev0/MyBox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pro Password Generator</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        body { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 15px; }
        .container { width: 100%; max-width: 400px; background: rgba(25, 25, 35, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); padding: 25px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
        .header { text-align: center; margin-bottom: 20px; font-size: 22px; font-weight: 700; color: #00f2fe; }

        .result-box { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 12px; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.1); word-break: break-all; font-size: 18px; letter-spacing: 1px; min-height: 60px;}
        .copy-btn { background: none; border: none; color: #4facfe; cursor: pointer; padding: 5px; transition: 0.3s; }
        .copy-btn:hover { color: #00f2fe; transform: scale(1.1); }
        .copy-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

        .strength-bar { height: 4px; border-radius: 2px; background: #333; margin-bottom: 20px; overflow: hidden; }
        .strength-fill { height: 100%; width: 0%; transition: 0.3s; }

        .length-box { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: #b5b5c5; }
        input[type="range"] { width: 100%; margin-bottom: 20px; accent-color: #4facfe; cursor: pointer; }

        .setting { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
        .setting input { width: 18px; height: 18px; accent-color: #4facfe; cursor: pointer; }

        .btn-gen { width: 100%; padding: 14px; background: linear-gradient(135deg, #00f2fe, #4facfe); border: none; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 10px; transition: 0.3s; }
        .btn-gen:active { transform: scale(0.98); }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Pro Password Gen</div>

        <div class="result-box">
            <span id="result">P@ssw0rd!</span>
            <button class="copy-btn" onclick="copyPassword()" title="Copy"><svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button>
        </div>
        <div class="strength-bar"><div class="strength-fill" id="strength"></div></div>

        <div class="length-box">
            <span>Password Length</span>
            <span id="length-val" style="color:#00f2fe; font-weight:bold;">12</span>
        </div>
        <input type="range" id="length" min="8" max="50" value="12" oninput="updateLength()">

        <div class="setting"><label>Include Uppercase</label><input type="checkbox" id="uppercase" checked></div>
        <div class="setting"><label>Include Lowercase</label><input type="checkbox" id="lowercase" checked></div>
        <div class="setting"><label>Include Numbers</label><input type="checkbox" id="numbers" checked></div>
        <div class="setting"><label>Include Symbols</label><input type="checkbox" id="symbols" checked></div>

        <button class="btn-gen" onclick="generatePassword()">Generate Password</button>
    </div>

    <script>
        const resultEl = document.getElementById('result');
        const lengthEl = document.getElementById('length');
        const lengthVal = document.getElementById('length-val');
        const upperEl = document.getElementById('uppercase');
        const lowerEl = document.getElementById('lowercase');
        const numEl = document.getElementById('numbers');
        const symEl = document.getElementById('symbols');
        const strengthEl = document.getElementById('strength');

        const chars = {
            upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
            lower: 'abcdefghijklmnopqrstuvwxyz',
            num: '0123456789',
            sym: '!@#$%^&*()_+~`|}{[]:;?><,./-='
        };

        function updateLength() { lengthVal.innerText = lengthEl.value; }

        function generatePassword() {
            let len = +lengthEl.value;
            let availableChars = "";
            let password = "";

            if (upperEl.checked) availableChars += chars.upper;
            if (lowerEl.checked) availableChars += chars.lower;
            if (numEl.checked) availableChars += chars.num;
            if (symEl.checked) availableChars += chars.sym;

            if (availableChars === "") return resultEl.innerText = "Select an option!";

            for (let i = 0; i < len; i++) {
                password += availableChars[Math.floor(Math.random() * availableChars.length)];
            }
            resultEl.innerText = password;
            updateStrength(len, availableChars.length);
        }

        function updateStrength(len, charVariety) {
            let score = (len * 2) + (charVariety > 30 ? 20 : 0) + (charVariety > 60 ? 30 : 0);
            if(score > 100) score = 100;
            strengthEl.style.width = score + "%";

            if(score < 40) strengthEl.style.background = "#ff4b4b";
            else if(score < 70) strengthEl.style.background = "#fca130";
            else strengthEl.style.background = "#00f2fe";
        }

        function copyPassword() {
            navigator.clipboard.writeText(resultEl.innerText);
            let btn = document.querySelector('.copy-btn');
            btn.style.color = "#4ade80"; // green
            setTimeout(() => btn.style.color = "#4facfe", 1500);
        }

        // Auto generate on load
        generatePassword();
    </script>
</body>
</html>