Password-Verify-JS/index.html at master · shenaldev/Password-Verify-JS · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Verify</title>
    <link rel="stylesheet" href="styles.css">

    <!---- Import Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">

    <!---- Import Javascript Libraries-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

    <div class="form-container">
        <div class="inner-wrapper">
            <form action="#" method="POST" id="password-form">
                <div class="form-row">
                    <label for="name">Name</label>
                    <input type="text" id="name" class="form-input" placeholder="Enter Your Name" required>
                </div>
                <div class="form-row">
                    <label for="username">Username</label>
                    <input type="username" id="username" class="form-input" placeholder="Your Username" required>
                </div>
                <div class="form-row">
                    <label for="email">Email</label>
                    <input type="email" id="email" class="form-input" placeholder="Your Email Address" required>
                </div>
                <!--  Password Verification Element  -->
                <div class="form-row" id="password-field">
                    <label for="password-input">Password</label>
                        <input type="password" id="password-input" class="form-input">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="eye-show"><path fill="#673ab7" d="M21.92,11.6C19.9,6.91,16.1,4,12,4S4.1,6.91,2.08,11.6a1,1,0,0,0,0,.8C4.1,17.09,7.9,20,12,20s7.9-2.91,9.92-7.6A1,1,0,0,0,21.92,11.6ZM12,18c-3.17,0-6.17-2.29-7.9-6C5.83,8.29,8.83,6,12,6s6.17,2.29,7.9,6C18.17,15.71,15.17,18,12,18ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" id="eye-hide"><path fill="#673ab7" d="M10.94,6.08A6.93,6.93,0,0,1,12,6c3.18,0,6.17,2.29,7.91,6a15.23,15.23,0,0,1-.9,1.64,1,1,0,0,0-.16.55,1,1,0,0,0,1.86.5,15.77,15.77,0,0,0,1.21-2.3,1,1,0,0,0,0-.79C19.9,6.91,16.1,4,12,4a7.77,7.77,0,0,0-1.4.12,1,1,0,1,0,.34,2ZM3.71,2.29A1,1,0,0,0,2.29,3.71L5.39,6.8a14.62,14.62,0,0,0-3.31,4.8,1,1,0,0,0,0,.8C4.1,17.09,7.9,20,12,20a9.26,9.26,0,0,0,5.05-1.54l3.24,3.25a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Zm6.36,9.19,2.45,2.45A1.81,1.81,0,0,1,12,14a2,2,0,0,1-2-2A1.81,1.81,0,0,1,10.07,11.48ZM12,18c-3.18,0-6.17-2.29-7.9-6A12.09,12.09,0,0,1,6.8,8.21L8.57,10A4,4,0,0,0,14,15.43L15.59,17A7.24,7.24,0,0,1,12,18Z"/></svg>
                    <div class="validate">
                        <div>
                            <span class="va-required" id="va-uppercase"></span><p>Capital Letter</p>
                        </div>
                        <div>
                            <span class="va-required" id="va-lowercase"></span><p>Simple Letter</p>
                        </div>
                        <div>
                            <span class="va-required" id="va-number"></span><p>Number</p>
                        </div>
                        <div>
                            <span class="va-required" id="va-special-char"></span><p>Special Characters</p>
                        </div>
                        <div>
                            <span class="va-required" id="va-minlength"></span><p>Min 8 Characters</p>
                        </div>
                    </div>
                </div>
                <!--  Password Verification Element End -->
                <div class="btn-div">
                    <button class="btn" id="form-submit-btn">Register</button>
                </div>
            </form>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>