|
|
@@ -4,250 +4,20 @@ |
|
|
|
<meta charset="utf-8"> |
|
|
|
<title>lesspass</title> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
|
<link rel="stylesheet" href="dist/lesspass-vendors.css"> |
|
|
|
<link rel="stylesheet" href="dist/lesspass-pure.css"> |
|
|
|
<link rel="stylesheet" href="dist/lesspass.css"> |
|
|
|
<style> |
|
|
|
body { |
|
|
|
background-color: #008ed6; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div class="container m-t-2"> |
|
|
|
<div class="container"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-md-6 col-md-offset-3"> |
|
|
|
<div id="passwordGenerator"> |
|
|
|
<div class="card"> |
|
|
|
<div id="password-block" class="card-block"> |
|
|
|
<form id="generatedPasswordForm"> |
|
|
|
<fieldset class="form-group"> |
|
|
|
<label for="login" class="sr-only">Login</label> |
|
|
|
<input id="login" |
|
|
|
name="login" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
placeholder="Login" |
|
|
|
autofocus |
|
|
|
autocomplete="off" |
|
|
|
autocorrect="off" |
|
|
|
autocapitalize="none"> |
|
|
|
<!-- remove autofill for masterPassword --> |
|
|
|
<input type="password" id="password" style="display: none"> |
|
|
|
</fieldset> |
|
|
|
<fieldset class="form-group"> |
|
|
|
<label for="masterPassword" class="sr-only">Password</label> |
|
|
|
<div class="input-group"> |
|
|
|
<input id="masterPassword" |
|
|
|
name="masterPassword" |
|
|
|
type="password" |
|
|
|
class="form-control" |
|
|
|
placeholder="Master password" |
|
|
|
autocomplete="off" |
|
|
|
autocorrect="off" |
|
|
|
autocapitalize="none"> |
|
|
|
<span class="input-group-btn"> |
|
|
|
<a id="displayMasterPasswordButton" class="btn btn-secondary" type="button" |
|
|
|
tabindex="-1"> |
|
|
|
<svg viewBox="0 0 1792 1792" |
|
|
|
xmlns="http://www.w3.org/2000/svg"> |
|
|
|
<path d="M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z"/> |
|
|
|
</svg> |
|
|
|
<small class="hint--top" id="fingerprint" aria-label="fingerprint"></small> |
|
|
|
</a> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
<fieldset class="form-group"> |
|
|
|
<label for="site" class="sr-only">Site</label> |
|
|
|
<input id="site" |
|
|
|
name="site" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
placeholder="Site" |
|
|
|
list="domains" |
|
|
|
autofocus |
|
|
|
autocomplete="off" |
|
|
|
autocorrect="off" |
|
|
|
autocapitalize="none"> |
|
|
|
<datalist id="domains"></datalist> |
|
|
|
</fieldset> |
|
|
|
<fieldset class="form-group"> |
|
|
|
<div class="input-group"> |
|
|
|
<span id="autoLoginButton" class="input-group-btn"> |
|
|
|
<button class="btn btn-secondary"> |
|
|
|
<svg viewBox="0 0 1792 1792" |
|
|
|
xmlns="http://www.w3.org/2000/svg"> |
|
|
|
<path d="M1254 581l293-293-107-107-293 293zm447-293q0 27-18 45l-1286 1286q-18 18-45 18t-45-18l-198-198q-18-18-18-45t18-45l1286-1286q18-18 45-18t45 18l198 198q18 18 18 45zm-1351-190l98 30-98 30-30 98-30-98-98-30 98-30 30-98zm350 162l196 60-196 60-60 196-60-196-196-60 196-60 60-196zm930 478l98 30-98 30-30 98-30-98-98-30 98-30 30-98zm-640-640l98 30-98 30-30 98-30-98-98-30 98-30 30-98z"/> |
|
|
|
</svg> |
|
|
|
</button> |
|
|
|
</span> |
|
|
|
<label for="generatedPassword" class="sr-only">Password Generated</label> |
|
|
|
<input id="generatedPassword" |
|
|
|
name="generatedPassword" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
tabindex="-1" |
|
|
|
readonly> |
|
|
|
<span class="input-group-btn"> |
|
|
|
<button id="copyPasswordButton" class="btn-copy btn btn-primary" type="button" |
|
|
|
data-clipboard-target="#generatedPassword"> |
|
|
|
<svg viewBox="0 0 1792 1792" |
|
|
|
xmlns="http://www.w3.org/2000/svg"> |
|
|
|
<path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z" |
|
|
|
fill="#fff"/> |
|
|
|
</svg> |
|
|
|
</button> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
<fieldset class="form-group m-b-0"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-xs-6"> |
|
|
|
<label id="displayOptionsButton"> |
|
|
|
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/></svg> |
|
|
|
Options |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<!-- |
|
|
|
<div class="col-xs-6 text-xs-right"> |
|
|
|
<label id="displayHelpButton"> |
|
|
|
How it works ? |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
--> |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
<fieldset class="form-group option-block m-t-1"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-sm-6"> |
|
|
|
<label class="c-input c-checkbox"> |
|
|
|
<input type="checkbox" id="lowercase" value="lowercase" name="lowercase" |
|
|
|
checked> |
|
|
|
<span class="c-indicator"></span> Lower letters (a‑z) |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<div class="col-sm-6"> |
|
|
|
<label class="c-input c-checkbox"> |
|
|
|
<input type="checkbox" id="uppercase" value="uppercase" name="uppercase" |
|
|
|
checked> |
|
|
|
<span class="c-indicator"></span> Upper letters (A-Z) |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-sm-6"> |
|
|
|
<label class="c-input c-checkbox"> |
|
|
|
<input type="checkbox" id="numbers" value="numbers" name="numbers" checked> |
|
|
|
<span class="c-indicator"></span> Numbers (0-9) |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
<div class="col-sm-6"> |
|
|
|
<label class="c-input c-checkbox"> |
|
|
|
<input type="checkbox" id="symbols" value="symbols" name="symbols" checked> |
|
|
|
<span class="c-indicator"></span> Special chars (@&%) |
|
|
|
</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
<fieldset class="form-group option-block"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-xs-6"> |
|
|
|
<label for="passwordLength">Length :</label> |
|
|
|
<input id="passwordLength" |
|
|
|
type="number" |
|
|
|
class="form-control" |
|
|
|
value="12" |
|
|
|
min="6" |
|
|
|
max="64"/> |
|
|
|
</div> |
|
|
|
<div class="col-xs-6"> |
|
|
|
<label for="passwordCounter">Counter :</label> |
|
|
|
<input id="passwordCounter" |
|
|
|
type="number" class="form-control" |
|
|
|
value="1" |
|
|
|
min="1" |
|
|
|
max="1000"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card text-xs-center help-block"> |
|
|
|
<button class="btn btn-link btn-close" id="closeHelpButton"> |
|
|
|
CLOSE |
|
|
|
</button> |
|
|
|
<div id="help-block-1" class="help-slide"> |
|
|
|
<img class="card-img-top m-t-1 img-fluid" src="https://cdn-images-1.medium.com/max/800/1*2ttVYuImHj_Rj_nXcDnsRQ.png" |
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="card-block"> |
|
|
|
<form> |
|
|
|
<fieldset class="form-group"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-xs-12"> |
|
|
|
<p> |
|
|
|
LessPass regenerates your passwords when you need them. |
|
|
|
No cloud storage is required. |
|
|
|
Only thing you need to remember is a strong password and that it. |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="help-block-2" class="help-slide"> |
|
|
|
<div class="card-block"> |
|
|
|
<form> |
|
|
|
<fieldset class="form-group"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-xs-12"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus |
|
|
|
accusantium amet cumque debitis eum expedita illum itaque iure minima, |
|
|
|
necessitatibus nesciunt obcaecati, odit perspiciatis quaerat quasi |
|
|
|
quibusdam |
|
|
|
sit sunt velit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. |
|
|
|
Accusamus aliquam aperiam dignissimos fugit, harum illum ipsum libero nemo |
|
|
|
quae, repudiandae sint, veritatis vero voluptatem! Cum dicta earum harum |
|
|
|
labore veniam. |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="help-block-3" class="help-slide"> |
|
|
|
<div class="card-block"> |
|
|
|
<form> |
|
|
|
<fieldset class="form-group"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-xs-12"> |
|
|
|
<p> |
|
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus |
|
|
|
accusantium amet cumque debitis eum expedita illum itaque iure minima, |
|
|
|
necessitatibus nesciunt obcaecati, odit perspiciatis quaerat quasi |
|
|
|
quibusdam |
|
|
|
sit sunt velit! |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</fieldset> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<button class="btn btn-primary btn-block" id="nextHelpButton"> |
|
|
|
NEXT |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div class="col-md-6 offset-md-3"> |
|
|
|
<div id="lesspass"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<script src="dist/lesspass-vendors.js"></script> |
|
|
|
<script src="dist/lesspass-pure.js"></script> |
|
|
|
<script src="dist/lesspass.js"></script> |
|
|
|
</body> |
|
|
|
</html> |