86 lines
No EOL
3.5 KiB
HTML
86 lines
No EOL
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<!-- Header -->
|
|
|
|
<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="stylesheet"
|
|
href="styles.css"
|
|
/>
|
|
|
|
<!-- Header -->
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Body -->
|
|
|
|
<h1 id="title">Random Password Generator | Made by: <a href="https://divisionsolar.xyz">Josh S.</a> | <a href="https://github.com/DIVISIONSolar/Password-Generator"> Source Code:</a></h1>
|
|
<div id="wrapper">
|
|
<aside id="sidebar">
|
|
<div id="instructions">
|
|
<div id="instructions__header">
|
|
<h4 id="how">How To Use: (Click me)</h4>
|
|
<i class="fas fa-angle-down"></i>
|
|
</div>
|
|
<div id="instructions__content">
|
|
<ul>
|
|
<li>Type in password length.</li>
|
|
<li>Select type of password required by checking the appropriate boxes.<br>(Only select 'Include numbers' to generate a PIN number)</li>
|
|
<li>Click 'Generate password'</li>
|
|
</ul>
|
|
<p>All passwords are generated on your browser, so nothing is stored online.</p>
|
|
<p>You're the only one who has knowledge of the generated password.</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<main>
|
|
<div id="random-password-container">
|
|
<div id="error-message"></div>
|
|
<div class="input-container">
|
|
<label for="password-length">Length of password: </label>
|
|
<input type="number" value="8" min="4" max="256" maxlength="3" id="password-length" step="1" onkeyup="this.value = minmax(this.value, getMin(), getMax())">
|
|
</div>
|
|
<div class="input-container">
|
|
<label for="repeat-characters">Repeat characters</label>
|
|
<input type="checkbox" checked id="repeat-characters">
|
|
</div>
|
|
<div class="input-container">
|
|
<label for="special-characters">Use special characters</label>
|
|
<input type="checkbox" checked id="special-characters">
|
|
</div>
|
|
<div class="input-container">
|
|
<label for="ambiguous-characters">Include ambiguous characters</label>
|
|
<input type="checkbox" checked id="ambiguous-characters">
|
|
</div>
|
|
<div class="input-container">
|
|
<label for="include-numbers">Include numbers</label>
|
|
<input type="checkbox" checked id="include-numbers">
|
|
</div>
|
|
<div class="input-container">
|
|
<label for="include-letters">Include letters</label>
|
|
<input type="checkbox" checked id="include-letters">
|
|
</div>
|
|
<button class="generate button" type="button" onclick="generatePassword()">Generate password</button>
|
|
<div class="input-container">
|
|
Random password:
|
|
<div id="random-password"></div>
|
|
</div>
|
|
<button class="copy button" type ="button" onClick="copyToClip()"> Copy to Clipboard </button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
|
|
<!-- Scripts -->
|
|
<script src="app.js"></script>
|
|
<!-- Scripts -->
|
|
|
|
</body>
|
|
</html> |