<html>
<head>
<link rel="stylesheet" href="pwdGenerator.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Inter&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-container">
<h1> Generate a <br/><span id = "different-color">random password</span></h1>
<p>Never use an insecure password again.</p>
<div class = "user-options">
<label for="num-switch">Numbers</label>
<label class="switch">
<input type="checkbox" id = "num-switch"/>
<span class="slider"></span>
</label>
<label for="sym-switch">Symbols</label>
<label class="switch">
<input type="checkbox" id = "sym-switch"/>
<span class="slider"></span>
</label>
<input
type="number"
id="pwd-length"
name="password-length"
placeholder="Password length: 15"
/>
</div>
<br /><br /><br /><br />
<button id="pwd-btn">Generate passwords</button>
</div>
<br />
<br />
<hr />
<div class="pwd-container">
<p id="pwd-one"></p>
<p id="pwd-two"></p>
</div>
<p id="msg"></p>
<script src="pwdGenerator.js"></script>
</body>
</html>
