password-generator/index.html at master · Vanesa-R/password-generator · 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
<!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 Generator App</title>
    <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="css/normalize.min.css">
    <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="css/style.min.css">
    <link rel="shortcut icon" href="images/favicon.png" type="image/png" sizes="32x32">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400&display=swap">
    <meta name="description" content="Password Generator App">
    <meta name="robots" content="index follow">
    <meta name="author" content="Vanesa Rodríguez">
    <meta name="copyright" content="Vanesa Rodríguez">
</head>
<body>
    <header class="header">
        <h1 class="header__title">Password Generator</h1>
    </header>
    <main class="main">
        <!--Password generated-->
        <section class="section generated__password">
            <label for="password">
                <input class="password__text" type="text" name="password" id="password"
                    readonly>
            </label>
            <img class="password__copy" src="images/icon-copy.svg" alt="Copy password"
                aria-label="Copy password">
        </section>

        <!--Password Generator-->
        <form method="post" class="generator__password">

            <section class="section password__character-length">
                <label class="label label--range" for="range">
                    <span class="subtitle">Character Length</span>
                    <span class="characters">12</span>
                </label>
                <input class="range" type="range" name="range" id="range" min="0" max="20" value="12"
                    aria-label="Password Length" aria-valuemin="0" aria-valuemax="20">
            </section>

            <section class="section password__character-includes"
                role="checkbox">
               <div class="include__type">
                <label for="uppercase">Include Uppercase Letters</label>
                <input type="checkbox" name="uppercase" id="uppercase" aria-labelledby="input uppercase" aria-checked="true" checked>
               </div>
               <div class="include__type">
                <label for="lowercase">Include Lowercase Letters</label>
                <input type="checkbox" name="lowercase" id="lowercase" aria-labelledby="input lowercase" aria-checked="true" checked>
               </div>
               <div class="include__type">
                <label for="numbers">Include Numbers</label>
                <input type="checkbox" name="numbers" id="numbers" aria-labelledby="input numbers" aria-checked="true" checked>
               </div>
               <div class="include__type">
                <label for="symbols">Include Symbols</label>
                <input type="checkbox" name="symbols" id="symbols" aria-labelledby="input symbols" aria-checked="true" checked>
               </div>
            </section>

            <section class="section password__strength">
                <div class="container">
                    <p class="subtitle">Strength</p>
                    <div class="strength__levels">
                        <p class="level__text"></p>
                        <span class="level"></span>
                        <span class="level"></span>
                        <span class="level"></span>
                        <span class="level"></span>
                    </div>
                </div>
            </section>

            <section class="section password__generate">
                <button class="btn--primary btn--generate" aria-label="Generate password">
                    Generate
                    <img class="img__btn" src="images/icon-generate.svg" alt="Generate password">
                </button>
            </section>
        </form>
    </main>

    <script src="js/zxcvbn.js"></script>
    <script async src="js/app.js"></script>

</body>
</html>