Nathan Woodburn
966e7efe5d
Added on click to generated password text box if empty generate password. Added link to my website Added favicon
68 lines
3.7 KiB
HTML
68 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Password Generator | Nathan.Woodburn/</title>
|
|
<meta name="theme-color" content="#97009a">
|
|
<meta name="description" content="G'day, this is my personal website. You can find out who I am or check out some of my projects.">
|
|
<meta name="twitter:title" content="Nathan.Woodburn/">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://nathan.woodburn.au/assets/img/profile.jpg">
|
|
<meta name="twitter:image" content="https://nathan.woodburn.au/assets/img/profile.jpg">
|
|
<meta name="twitter:description" content="G'day, this is my personal website. You can find out who I am or check some of my projects.">
|
|
<meta name="twitter:card" content="summary">
|
|
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../assets/img/NJW%20Icon%20180.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../assets/img/NJW%20Icon%2016.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../assets/img/NJW%20Icon%2032.png">
|
|
<link rel="icon" type="image/png" sizes="180x180" href="../assets/img/NJW%20Icon%20180.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="../assets/img/NJW%20Icon%20192.png">
|
|
<link rel="icon" type="image/png" sizes="512x512" href="../assets/img/NJW%20Icon%20512.png">
|
|
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
|
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap'>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="container">
|
|
<h2 class="title">Password Generator</h2>
|
|
<div class="result">
|
|
<div class="result__title field-title">Generated Password</div>
|
|
<div class="result__info right">click to copy</div>
|
|
<div class="result__info left">copied</div>
|
|
<div class="result__viewbox" id="result"><button class="textgenerate" id="textgenerate">GENERATE PASSWORD</button></div>
|
|
<button id="copy-btn" style="--x: 0; --y: 0"><i class="far fa-copy"></i></button>
|
|
</div>
|
|
<div class="length range__slider" data-min="4" data-max="32">
|
|
<div class="length__title field-title" data-length='0'>length:</div>
|
|
<input id="slider" type="range" min="4" max="32" value="16" />
|
|
</div>
|
|
|
|
<div class="settings">
|
|
<span class="settings__title field-title">settings</span>
|
|
<div class="setting">
|
|
<input type="checkbox" id="uppercase" checked />
|
|
<label for="uppercase">Include Uppercase</label>
|
|
</div>
|
|
<div class="setting">
|
|
<input type="checkbox" id="lowercase" checked />
|
|
<label for="lowercase">Include Lowercase</label>
|
|
</div>
|
|
<div class="setting">
|
|
<input type="checkbox" id="number" checked />
|
|
<label for="number">Include Numbers</label>
|
|
</div>
|
|
<div class="setting">
|
|
<input type="checkbox" id="symbol" />
|
|
<label for="symbol">Include Symbols</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn generate" id="generate">Generate Password</button>
|
|
<a href="https://nathan.woodburn.au/" target="_blank">Nathan.Woodburn/</a>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |