2015-05-10 14:38:17 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
< title > Secure Password< / title >
<!-- Bootstrap -->
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" >
2015-05-10 15:12:29 +00:00
< link rel = "stylesheet" href = "https://bootswatch.com/paper/bootstrap.min.css" >
2015-05-10 14:38:17 +00:00
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]>
< script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >
< script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js" > < / script >
<![endif]-->
< style >
body { background-color: #e2e2e2; }
.white { background-color: #fff; }
.center { text-align: center; }
.faq { margin-top: 3em; }
.progress { margin-bottom: 0px; }
.jumbotron p { margin-bottom: 0; }
< / style >
< / head >
< body >
< nav class = "navbar navbar-default" >
< div class = "container-fluid" >
<!-- Brand and toggle get grouped for better mobile display -->
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle" data-toggle = "modal" data-target = "#settingsModal" >
< span class = "glyphicon glyphicon-cog" aria-hidden = "true" > < / span >
< / button >
< a class = "navbar-brand" href = "#" > Secure Password< / a >
< / div >
< div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1" >
2015-05-10 16:56:43 +00:00
< ul class = "nav navbar-nav" >
2017-09-22 16:02:40 +00:00
< li > < a href = "https://github.com/Luzifer/password#via-alfred" >
Alfred Extension< / a > < / li >
2015-05-10 16:56:43 +00:00
< li > < a href = "https://github.com/Luzifer/password#via-api" >
API Documentation< / a > < / li >
< / ul >
2015-05-10 14:38:17 +00:00
< ul class = "nav navbar-nav navbar-right" >
< li >
< button type = "button" class = "btn btn-default navbar-btn" data-toggle = "modal" data-target = "#settingsModal" >
< span class = "glyphicon glyphicon-cog" aria-hidden = "true" > < / span > Settings
< / button >
< / li >
< / ul >
< / div >
< / div >
< / nav >
< div class = "container" >
< div class = "row" >
< div class = "col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3" >
< div class = "jumbotron" >
< p class = "center" >
I will generate a new secure password every 30 seconds. Just click the password to keep the current one.
< / p >
< / div >
< div class = "panel panel-default" >
< div class = "panel-heading" >
Your password
< / div >
< div class = "panel-body" >
< div class = "form-group" >
< input class = "form-control center" id = "focusedInput" type = "text" value = "..." >
< / div >
< / div >
< div class = "panel-footer" >
< div class = "progress" >
< div class = "progress-bar" style = "width: 100%;" > < / div >
< / div >
< / div >
< / div >
< div class = "panel panel-default" >
< div class = "panel-heading" >
FAQ
< / div >
< div class = "panel-body" >
< ul >
< li > < strong > Do you store my password?< / strong > < br >
You decide which one to take and we will not store any of the generated passwords. That way you can be sure only you know which password you chose.
< / li >
< li > < strong > How secure are these passwords?< / strong > < br >
All passwords are checked against a set of rules to ensure they does not contain patterns which would make it easy for programs to guess the password.
< / li >
< li > < strong > Can I read the source code?< / strong > < br >
Of course you can. It's published on < a href = "https://github.com/Luzifer/password" > GitHub< / a > together with a test suite to ensure the passwords are safe.
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "modal" id = "settingsModal" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × < / button >
< h4 class = "modal-title" > Settings< / h4 >
< / div >
< div class = "modal-body" >
< div class = "form-group" >
< label for = "passwordLengthOption" class = "control-label" > Password length:< / label >
< input type = "number" class = "form-control" value = "20" id = "passwordLengthOption" >
< / div >
< div class = "form-group" >
< label >
< input type = "checkbox" id = "useSpecialOption" > Use special characters
< / label >
< / div >
2017-10-31 11:12:51 +00:00
< div class = "form-group" >
< label >
< input type = "checkbox" id = "useXKCDOption" > Use < a href = "https://xkcd.com/936/" target = "_blank" > XKCD style passwords< / a >
< / label >
< / div >
2015-05-10 14:38:17 +00:00
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-default" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" id = "optionSave" > Save changes< / button >
< / div >
< / div >
< / div >
< / div >
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" > < / script >
<!-- Include all compiled plugins (below), or include individual files as needed -->
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" > < / script >
< script src = "assets/application.js" > < / script >
< / body >
< / html >
