281 lines
13 KiB
HTML
281 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>WebOasis - Password Generator</title>
|
|||
|
|
<meta name="description" content="Use this tool to generate a random set of strong passwords. You can specify the length of the password, as well as the character set.">
|
|||
|
|
<link rel="icon" href="img/favicon.ico">
|
|||
|
|
<link rel="stylesheet" href="css/icons.css">
|
|||
|
|
<link rel="stylesheet" href="css/style.css">
|
|||
|
|
<script src="js/jquery.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@font-face {
|
|||
|
|
font-family: 'Roboto';
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 300;
|
|||
|
|
src: url('fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
|
|||
|
|
src: local('Roboto Light'), local('Roboto-Light'),
|
|||
|
|
url('fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|||
|
|
url('fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
|
|||
|
|
url('fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
|
|||
|
|
}
|
|||
|
|
@font-face {
|
|||
|
|
font-family: 'Roboto';
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 400;
|
|||
|
|
src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
|
|||
|
|
src: local('Roboto'), local('Roboto-Regular'),
|
|||
|
|
url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|||
|
|
url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
|||
|
|
url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
|
|||
|
|
}
|
|||
|
|
@font-face {
|
|||
|
|
font-family: 'Roboto';
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 500;
|
|||
|
|
src: url('fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
|
|||
|
|
src: local('Roboto Medium'), local('Roboto-Medium'),
|
|||
|
|
url('fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|||
|
|
url('fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
|
|||
|
|
url('fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
|
|||
|
|
url('fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<section class="navbar">
|
|||
|
|
<div class="nav-wrap">
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#" id="app_menu" class="tooltipped tooltipped-s" aria-label="Menu"><i class="i-menu font-24"></i></a></li>
|
|||
|
|
</ul>
|
|||
|
|
<a href="index.html" class="brand"><h1><b>WebOasis Text</b></h1></a>
|
|||
|
|
<ul class="right"><a href="https://weboas.is" class="brand"><h1><b>WebOasis Homepage</b></h1></a></ul>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<div class="mask"></div>
|
|||
|
|
<nav id="nav-menu" class="clear">
|
|||
|
|
<ul class="accordion">
|
|||
|
|
<li class="title">WebOasis</li>
|
|||
|
|
<li><a href="index.html">Home</a></li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Basic Tools</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="sort-text.html"><i class="i-sort"></i>Sort Text</a></li>
|
|||
|
|
<li><a href="convert-case.html"><i class="i-case"></i>Convert Case</a></li>
|
|||
|
|
<li><a href="find-and-replace.html"><i class="i-find_replace"></i>Find & Replace</a></li>
|
|||
|
|
<li><a href="reverse-list.html"><i class="i-reverse_list"></i>Reverse List</a></li>
|
|||
|
|
<li><a href="difference-checker.html"><i class="i-compare"></i>Difference Checker</a></li>
|
|||
|
|
<li><a href="word-count.html"><i class="i-word_count"></i>Word Count</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Text Manipulation</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="add-prefix-suffix.html"><i class="i-prefix"></i>Add Prefix & Suffix</a></li>
|
|||
|
|
<li><a href="add-line-breaks.html"><i class="i-linebreak"></i>Add Line Breaks</a></li>
|
|||
|
|
<li><a href="remove-line-breaks.html"><i class="i-remove"></i>Remove Line Breaks</a></li>
|
|||
|
|
<li><a href="concatenate-text.html"><i class="i-combine"></i>Concatenate Text</a></li>
|
|||
|
|
<li><a href="split-text.html"><i class="i-split i-rotate-90"></i>Split Text</a></li>
|
|||
|
|
<li><a href="extract-column.html"><i class="i-column"></i>Extract Column</a></li>
|
|||
|
|
<li><a href="swap-columns.html"><i class="i-swap"></i>Swap Columns</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Clean Text</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="remove-spaces.html"><i class="i-extra_space"></i>Remove Spaces</a></li>
|
|||
|
|
<li><a href="remove-duplicate-lines.html"><i class="i-format"></i>Remove Duplicate Lines</a></li>
|
|||
|
|
<li><a href="remove-empty-lines.html"><i class="i-line_space"></i>Remove Empty Lines</a></li>
|
|||
|
|
<li><a href="remove-diacritics.html"><i class="i-remove"></i>Remove Diacritics</a></li>
|
|||
|
|
<li><a href="remove-unwanted-characters.html"><i class="i-chars"></i>Remove Unwanted Characters</a></li>
|
|||
|
|
<li><a href="strip-html-tags.html"><i class="i-code"></i>Strip HTML Tags</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Formatting</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="add-line-numbers.html"><i class="i-line_numbers"></i>Add Line Numbers</a></li>
|
|||
|
|
<li><a href="add-commas-to-numbers.html"><i class="i-abc i-commafy">1,234</i>Add Commas to Numbers</a></li>
|
|||
|
|
<li><a href="replace-smart-straight-quotes.html"><i class="i-quote"></i>Replace Smart/Straight Quotes</a></li>
|
|||
|
|
<li><a href="tabs-to-spaces.html"><i class="i-tab"></i>Tabs to Spaces</a></li>
|
|||
|
|
<li><a href="spaces-to-tabs.html"><i class="i-space"></i>Spaces to Tabs</a></li>
|
|||
|
|
<li><a href="pad-text.html"><i class="i-pad"></i>Pad Text</a></li>
|
|||
|
|
<li><a href="word-wrap.html"><i class="i-wrap"></i>Word Wrap</a></li>
|
|||
|
|
<li><a href="justify-text.html"><i class="i-justify"></i>Justify Text</a></li>
|
|||
|
|
<li><a href="center-text.html"><i class="i-center"></i>Center Text</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Transform Text</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="reverse-letters.html"><i class="i-abc i-revtext">cba</i>Reverse Letters</a></li>
|
|||
|
|
<li><a href="reverse-words.html"><i class="i-swap"></i>Reverse Words</a></li>
|
|||
|
|
<li><a href="upside-down-text.html"><i class="i-abc i-flip i-rotate-180">abc</i>Upside Down Text</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">Generators</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="password-generator.html"><i class="i-lock"></i>Password Generator</a></li>
|
|||
|
|
<li><a href="filler-text.html"><i class="i-format"></i>Filler Text</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">More Tools</a>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="notepad"><i class="i-notepad"></i>Online Notepad</a></li>
|
|||
|
|
<li><a href="cleaner"><i class="i-notepad"></i>Text Cleaner</a></li>
|
|||
|
|
<li><a href="base64"><i class="i-notepad"></i>Base64</a></li>
|
|||
|
|
<li><a href="url"><i class="i-notepad"></i>URL</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</nav>
|
|||
|
|
<main class="wrapper padding-y">
|
|||
|
|
<div class="alert"><span class="alert-content"></span><span class="alert-x">×</span></div>
|
|||
|
|
<div class="widget w-100">
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h1>Password Generator</h1>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
<div class="widget-body">
|
|||
|
|
<div class="clear spacer-s xs-spacer-s">
|
|||
|
|
<div class="left hidden-xs-down">
|
|||
|
|
<div class="dropdown">
|
|||
|
|
<button type="button" class="btn btn-sm dropdown-trigger">File</button>
|
|||
|
|
<div class="dropdown-menu">
|
|||
|
|
<a href="#" id="file_new"><i class="i-file"></i> New</a>
|
|||
|
|
<a id="file_download"><i class="i-save"></i> Save As...</a>
|
|||
|
|
<hr>
|
|||
|
|
<a href="#" id="file_print"><i class="i-print"></i> Print</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right xs-left xs-100 xs-spacer-n">
|
|||
|
|
<select id="settings" class="input-sm xs-100">
|
|||
|
|
<option value="0">Custom</option>
|
|||
|
|
<option value="1">Minimum</option>
|
|||
|
|
<option value="2">WEP (256-bit)</option>
|
|||
|
|
<option value="3">WPA-PSK</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="pass_template" class="w-100 clear">
|
|||
|
|
<div class="left form-group xs-spacer-n xs-100">
|
|||
|
|
<label>Length</label>
|
|||
|
|
<input id="passLen" type="number" value="40" class="input-sm xs-right" style="width:60px">
|
|||
|
|
</div>
|
|||
|
|
<div class="right clear xs-100 xs-spacer-n">
|
|||
|
|
<span class="left checkbox xs-50">
|
|||
|
|
<input type="checkbox" id="A-Z" checked>
|
|||
|
|
<label for="A-Z">Uppercase</label>
|
|||
|
|
</span>
|
|||
|
|
<span class="left checkbox spacer-l spacer-r xs-50">
|
|||
|
|
<input type="checkbox" id="a-z" checked>
|
|||
|
|
<label for="a-z">Lowercase</label>
|
|||
|
|
</span>
|
|||
|
|
<span class="left checkbox spacer-l spacer-r xs-50">
|
|||
|
|
<input type="checkbox" id="num_0-9" checked>
|
|||
|
|
<label for="num_0-9">Numbers</label>
|
|||
|
|
</span>
|
|||
|
|
<span class="left checkbox spacer-l xs-50">
|
|||
|
|
<input type="checkbox" id="symbols" checked>
|
|||
|
|
<label for="symbols">Symbols</label>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<style>
|
|||
|
|
.pass-box{margin:.8rem 0}
|
|||
|
|
.strength {height:19px;font-size:80%;color: #aaa;margin: .25rem 0 0;display: block;text-align:right;}
|
|||
|
|
.checkbox:not(:last-of-type) {min-width:100px;}
|
|||
|
|
</style>
|
|||
|
|
<div id="pass_output" class="w-100 clear">
|
|||
|
|
<div class="pass-box">
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<i class="i-lock"></i>
|
|||
|
|
<input class="w-100" id="pass_1" value="" readonly>
|
|||
|
|
</div>
|
|||
|
|
<span class="strength" id="indicator_1"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pass-box">
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<i class="i-lock"></i>
|
|||
|
|
<input class="w-100" id="pass_2" value="" readonly>
|
|||
|
|
</div>
|
|||
|
|
<span class="strength" id="indicator_2"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pass-box">
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<i class="i-lock"></i>
|
|||
|
|
<input class="w-100" id="pass_3" value="" readonly>
|
|||
|
|
</div>
|
|||
|
|
<span class="strength" id="indicator_3"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pass-box">
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<i class="i-lock"></i>
|
|||
|
|
<input class="w-100" id="pass_4" value="" readonly>
|
|||
|
|
</div>
|
|||
|
|
<span class="strength" id="indicator_4"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pass-box">
|
|||
|
|
<div class="input-icon">
|
|||
|
|
<i class="i-lock"></i>
|
|||
|
|
<input class="w-100" id="pass_5" value="" readonly>
|
|||
|
|
</div>
|
|||
|
|
<span class="strength" id="indicator_5"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="clear spacer-n">
|
|||
|
|
<div class="right xs-100 xs-left">
|
|||
|
|
<button id="generatePass" type="button" class="btn btn-sm xs-50 xs-left">Generate</button>
|
|||
|
|
<button id="clearAll" type="button" class="btn btn-sm btn-light xs-50 xs-left">Clear</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="clear w-100 margin-y">
|
|||
|
|
<article class="widget wm-100 center box-content">
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h4>About</h4>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
<p>Use this tool to generate a random set of strong passwords. You can specify the length of the password, as well as the character set. For maximum security, we recommend that you keep uppercase, lowercase, numbers and symbols checked and only use generated passwords with "Strong" label.</p>
|
|||
|
|
<p>You can also directly print the generated passwords by clicking "File" and then "Print". To download a copy to your computer, choose "Save as".</p>
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h3>Password Strength Indicator</h3>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
<p>Generated passwords have indicators below them to indentify how strong it is. It can either be Strong (green), Good (orange), or Weak (red).
|
|||
|
|
</ul>
|
|||
|
|
<header class="widget-header">
|
|||
|
|
<h3>What Makes a Password Strong?</h3>
|
|||
|
|
</header>
|
|||
|
|
<hr>
|
|||
|
|
<p>Complexity is the key. A strong password must be at least 15 characters long and must include at least one letter (uppercase or lowercase), at least one number, at least one special character from the following `~!@#$%^&*()_-+={}[]\|:;"'<>,.?/, and must not consists of repetitive characters.</p>
|
|||
|
|
</article>
|
|||
|
|
</div>
|
|||
|
|
<div class="toast" role="alert"><div class="toast-content"></div></div>
|
|||
|
|
</main>
|
|||
|
|
<br>
|
|||
|
|
<footer class="clear font-14">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<div class="center">© WebOasis - Text</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
<script src="js/site.js"></script>
|
|||
|
|
<script src="js/password-generator.js"></script>
|
|||
|
|
<script>
|
|||
|
|
$('body').ready(function() {
|
|||
|
|
$('.accordion > li:eq(7) > a').addClass('active').next().show();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|