index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <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>Simple password generator</title>
        <link
            href="https://fonts.googleapis.com/css2?family=M+PLUS+Code+Latin:wght@400;600&display=swap"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
        <div id="aligner">
            <div>
                <h1>Simple password generator</h1>

                <div id="inputContainer">
                    <input type="text" id="secure-password" />
                    <button id="copy">
                        <svg
                            data-ref="copy"
                            viewBox="0 0 448 512"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"
                            ></path>
                        </svg>
                    </button>

                    <span id="copied-text">Copied!</span>
                </div>

                <div id="controlsContainer">
                    <div class="control sliderContainer">
                        <div id="infoContainer">
                            <label for="length">Character length</label>
                            <span id="characters-length"></span>
                        </div>
                        <input
                            type="range"
                            min="4"
                            max="32"
                            class="slider"
                            id="length"
                        />
                    </div>

                    <div class="control">
                        <input
                            id="uppercase"
                            type="checkbox"
                            class="switch"
                            data-ref="switch"
                            checked
                        />
                        <label for="uppercase">Include uppercase letters</label>
                    </div>

                    <div class="control">
                        <input
                            id="lowercase"
                            type="checkbox"
                            class="switch"
                            data-ref="switch"
                            checked
                        />
                        <label for="lowercase">Include lowercase letters</label>
                    </div>

                    <div class="control">
                        <input
                            id="numbers"
                            type="checkbox"
                            class="switch"
                            data-ref="switch"
                            checked
                        />
                        <label for="numbers">Include numbers</label>
                    </div>

                    <div class="control">
                        <input
                            id="symbols"
                            type="checkbox"
                            class="switch"
                            data-ref="switch"
                            checked
                        />
                        <label for="symbols">Include symbols</label>
                    </div>

                    <button data-ref="regenerate" id="regenerate">
                        Regenerate
                    </button>
                </div>
            </div>
        </div>

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