diff options
Diffstat (limited to 'text.html')
| -rw-r--r-- | text.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/text.html b/text.html new file mode 100644 index 0000000..c2de9db --- /dev/null +++ b/text.html @@ -0,0 +1,162 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bootstrap Strength Meter</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + + <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> + <link rel="stylesheet" type="text/css" href="css/prettify.css"> + + <script type="text/javascript" src="js/jquery.js"></script> + <script type="text/javascript" src="password-score/js/keyboard.js"></script> + <script type="text/javascript" src="password-score/js/score.js"></script> + <script type="text/javascript" src="js/bootstrap-strength-meter.js"></script> + <script type="text/javascript" src="js/prettify.js"></script> + </head> + <body> + <script type="text/javascript"> + $(document).ready(function() { + window.prettyPrint() && prettyPrint(); + + $.when( + $.getJSON('password-score/data/json/en.json'), + $.getJSON('password-score/data/json/de.json'), + $.getJSON('password-score/data/json/cities.json'), + $.getJSON('password-score/data/json/countries-en.json'), + $.getJSON('password-score/data/json/countries-de.json'), + $.getJSON('password-score/data/json/female.json'), + $.getJSON('password-score/data/json/last.json'), + $.getJSON('password-score/data/json/male.json'), + $.getJSON('password-score/data/json/passwords.json') + ).then(function(dictEN, dictDE, cities, countriesEN, countriesDE, female, last, male, passwords) { + var dictionaries = [ + dictEN[0], + dictDE[0], + last[0], + male[0], + female[0], + cities[0], + passwords[0], + countriesEN[0], + countriesDE[0] + ]; + + var keyboards = [ + QWERTY, + QWERTZ + ]; + + $('#example').strengthMeter('text', { + container: $('#example-container'), + dictionaries: dictionaries, + keyboards: keyboards + }); + + $('.password').on('click', function() { + $('#example') + .val($(this).data('value')) + .keyup(); + }) + }); + }); + </script> + <style type="text/css"> + #example-container { + padding: 3px; + font-weight: bold; + font-size: 16px; + } + </style> + <div class="container"> + <a href="https://github.com/davidstutz/bootstrap-strength-meter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a> + <div class="container"> + <h1>Bootstrap Strength Meter</h1> + </div> + </div> + <hr> + <div class="container"> + <p style="margin-bottom:0;"> + <b>Bootstrap Strength Meter</b> is a simple password strength meter based on <a target="_blank" href="https://github.com/davidstutz/password-score">Password Score</a> for strength estimation. The plugin uses different techniques to visualize the strength of the password which is measured in the means of entropy. You can choose between different visualization options: + </p> + </div> + <hr> + <div class="container"> + <ul class="nav nav-pills"> + <li><a href="index.html">Progress Bar</a></li> + <li class="active"><a href="#">Text</a></li> + <li><a href="tooltip.html">Tooltip</a></li> + </ul> + </div> + <hr> + <div class="container"> + <div class="row"> + <div class="col-md-3"> + <input type="text" class="form-control" id="example" style="width:100%;" /> + </div> + <div class="col-md-9"> + <div id="example-container"> + + </div> + </div> + </div> + </div> + <hr> + <div class="container"> +<pre class="prettyprint linenums"> +// The plugin is initialized if all resources for Password Score are loaded. +$.when( + $.getJSON('password-score/data/json/en.json'), + $.getJSON('password-score/data/json/de.json'), + $.getJSON('password-score/data/json/cities.json'), + $.getJSON('password-score/data/json/countries-en.json'), + $.getJSON('password-score/data/json/countries-de.json'), + $.getJSON('password-score/data/json/female.json'), + $.getJSON('password-score/data/json/last.json'), + $.getJSON('password-score/data/json/male.json'), + $.getJSON('password-score/data/json/passwords.json') +).then(function(dictEN, dictDE, cities, countriesEN, countriesDE, female, last, male, passwords) { + // These are dictionaries: german, english, common passwords, names, cities and countries. + var dictionaries = [ + dictEN[0], + dictDE[0], + last[0], + male[0], + female[0], + cities[0], + passwords[0], + countriesEN[0], + countriesDE[0] + ]; + + // Used keyboard provided by Password Score. + var keyboards = [ + QWERTY, + QWERTZ + ]; + + // Select the progressBar option. + $('#example').strengthMeter('text', { + hierarchy: { // Hierarchy: If the key is exceeded the given text class and text will be displayed. + '0': ['text-danger', 'ridiculus'], + '10': ['text-danger', 'very weak'], + '30': ['text-warning', 'weak'], + '50': ['text-warning', 'good'], + '70': ['text-success', 'string'], + '100': ['text-success', 'very strong'], + }, + container: $('#example-container'), // The container the text is appended to. + dictionaries: dictionaries, // The list of dictionaries to use. + keyboards: keyboards // The list of keyboards to use. + }); +}); +</pre> + </div> + <hr> + <div class="container"> + <p> + © 2013 + <a target="_blank" href="http://davidstutz.de">David Stutz</a> - <a target="_blank" href="http://opensource.org/licenses/BSD-3-Clause">BSD 3-Clause License</a> + </p> + </div> + </body> +</html> |