georgedavitiani.com.v2/password-modal.html at master · gdmoney/georgedavitiani.com.v2 · 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
<!-- Password Generator Modal -->
<div id="pwgen-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);z-index:10000;">
    <div style="background:#fff;color:#000;border:2px solid #000;border-radius:10px;max-width:350px;width:92vw;padding:20px;box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;">
        <div style="text-align:right;">
            <button onclick="closePwGen()" style="background:#fff;border:1px solid #000;color:#000;font-size:16px;padding:2px 8px;cursor:pointer;" title="Close">&times;</button>
        </div>
        <h3 style="margin-top:0;">Random Password Generator</h3>
        <form id="pwForm" onsubmit="return false;">
            <label>
                Password Length:
                <input type="number" id="length" min="12" max="64" value="32" style="width:50px;">
            </label>
            <br><br>
            <label>
                <input type="checkbox" id="uppercase" checked style="accent-color: black;">
                Include Uppercase Letters
            </label>
            <br>
            <label>
                <input type="checkbox" id="numbers" checked style="accent-color: black;">
                Include Numbers
            </label>
            <br>
            <label>
                <input type="checkbox" id="special" checked style="accent-color: black;">
                Include Special Characters
            </label>
            <br><br>
            <button type="button" onclick="generatePassword()" style="background:#fff;border:1px solid #000;color:#000;padding:2px 12px;cursor:pointer;">Generate Password</button>
        </form>
        <br>
        <label>
            Generated Password:<br>
            <input type="text" id="result" readonly style="width:80%;">
            <button type="button" onclick="copyPassword()" style="background:#fff;border:1px solid #000;color:#000;padding:2px 7px;cursor:pointer;">Copy</button>
        </label>
    </div>
</div>