密码强度检测器
代码语言：html
所属分类：表单美化
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
body {
font-family: "Playfair Display", serif;
}
h1 {
color: #f7c926;
text-align: center;
font-size: 27px;
}
#wrapper {
width: 100%;
min-height: 100vh;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
background-color: #151414;
}
#box {
max-width: 750px;
width: 100%;
}
.pass-wrapper {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
margin: 0 0 20px 0;
}
#svg {
width: 300px;
height: 300px;
display: block;
padding: 20px;
}
#input-wrapper {
position: relative;
height: 40px;
}
#input-wrapper label {
display: block;
width: 100%;
pointer-events: none;
color: #f7c926;
position: absolute;
bottom: 10px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
font-size: 18px;
opacity: 1;
left: 10px;
}
#input-wrapper #pwd:valid + label, #input-wrapper #pwd:focus + label {
bottom: 35px;
font-size: 14px;
opacity: 0;
}
#pwd {
overflow: hidden;
display: block;
width: 100%;
border: none;
outline: none;
background: rgba(247, 201, 38, 0.2);
caret-color: #FFFFFF;
font-size: 25px;
color: #f7c926;
border-radius: 7px;
padding: 5px 10px;
box-sizing: border-box;
line-height: 40px;
height: 100%;
border: 3px solid #f7c926;
}
.levels-container {
width: 60%;
box-sizing: border-box;
padding: 10px;
margin: 10px 0 0 0;
border-radius: 7px;
pointer-events: none;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
}
.levels-container .level-line {
margin: 15px 0;
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
color: rgba(255, 255, 255, 0);
}
.levels-container .level-line .line-label {
width: 30%;
color: #f7c926;
padding: 0 20px 0 0;
text-align: center;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.levels-container .level-line .line-progression {
width: 50%;
position: relative;
height: 5px;
-webkit-animation: glowBar 0.6s ease-in-out infinite alternate;
animation: glowBar 0.6s ease-in-out infinite alternate;
}
.levels-container .level-line .line-progression:before, .levels-container .level-line .line-progression:after {
content: '';
display: block;
height: 5px;
position: absolute;
border-radius: 2px;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.levels-container .level-line .line-progression:before {
background-color: rgba(247, 201, 38, 0.2);
width: 100%;
}
.levels-container .level-line .line-progression:after {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
background-color: #f7c926;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
border-style: solid;
border-width: 0px;
}
[data-level="0"] .line-progression:after {
width: 2%;
border-width: 0px;
}
[data-level="1"] .line-progression:after {
width: 33%;
-webkit-animation-name: pulse1;
animation-name: pulse1;
border-color: rgba(255, 255, 255, 0.3);
border-width: 1px;
}
[data-level="2"] .line-progression:after {
width: 66%;
-webkit-animation-name: pulse2;
animation-name: pulse2;
border-color: rgba(255, 255, 255, 0.6);
border-width: 1px;
}
[data-level="3"] {
color: #f7c926 !important;
}
[data-level="3"] .line-label {
-webkit-animation: glow 0.6s ease-in-out infinite alternate;
animation: glow 0.6s ease-in-out infinite alternate;
color: #FFFFFF !important;
}
[data-level="3"] .line-progression:after {
width: 100%;
-webkit-animation-name: pulse3;
animation-name: pulse3;
border-color: white;
border-width: 1px !important;
-webkit-animation-duration: 2s !important;
animation-duration: 2s !important;
color: #FFFFFF;
}
@-webkit-keyframes pulse1 {
0% {
box-shadow: 0px 0px 0px 0px white;
}
50% {
box-shadow: 0px 0px 30px 0px white;
}
100% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
}
}
@keyframes pulse1 {
0% {
box-shadow: 0px 0px 0px 0px white;
}
50% {
box-shadow: 0px 0px 30px 0px white;
}
100% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
}
}
@-webkit-keyframes pulse2 {
0% {
box-shadow: 0px 0px 0px 0px white;
}
50% {
box-shadow: 0px 0px 30px 5px white;
}
100% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
}
}
@keyframes pulse2 {
0% {
box-shadow: 0px 0px 0px 0px white;
}
50% {
box-shadow: 0px 0px 30px 5px white;
}
100% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
}
}
@-webkit-keyframes pulse3 {
0% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.8);
}
100% {
box-shadow: 0px 0px 6px 10px rgba(255, 255, 255, 0);
}
}
@keyframes pulse3 {
0% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.8);
}
100% {
box-shadow: 0px 0px 6px 10px rgba(255, 255, 255, 0);
}
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 5px #f7c926, 0 0 10px #f7c926, 0 0 15px #f7c926, 0 0 30px #f7c926, 0 0 45px #f7c926, 0 0 60px #f7c926, 0 0 75px #f7c926;
}
to {
text-shadow: 0 0 10px #f7c926, 0 0 15px #f7c926, 0 0 20px #f7c926, 0 0 25px #f7c926, 0 0 30px #f7c926, 0 0 35px #f7c926, 0 0 40px #f7c926;
}
}
@keyframes glow {
from {
text-shadow: 0 0 5px #f7c926, 0 0 10px #f7c926, 0 0 15px #f7c926, 0 0 30px #f7c926, 0 0 45px #f7c926, 0 0 60px #f7c926, 0 0 75px #f7c926;
}
to {
text-shadow: 0 0 10px #f7c926, 0 0 15px #f7c926, 0 0 20px #f7c926, 0 0 25px #f7c926, 0 0 30px #f7c926, 0 0 35px #f7c926, 0 0 40px #f7c926;
}
}
@-webkit-keyframes glowBar {
from {
box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor, 0 0 60px currentColor, 0 0 75px currentColor;
}
to {
box-shadow: 0 0 10px currentColor, 0 0 15px currentColor, 0 0 20px currentColor, 0 0 25px currentColor, 0 0 30px currentColor, 0 0 35px currentColor, 0 0 40px currentColor;
}
}
@keyframes glowBar {
from {
box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor, 0 0 60px currentColor, 0 0 75px currentColor;
}
to {
box-shadow: 0 0 10px currentColor, 0 0 15px currentColor, 0 0 20px currentColor, 0 0 25px currentColor, 0 0 30px currentColor, 0 0 35px currentColor, 0 0 40px currentColor;
}
}
</style>
</head>
<body translate="no">
<div id="wrapper">
<div id="box">
<div class="side">
<h1>Build your (strong) password here:</h1>
</div>
<div class="pass-wrapper">
<svg id="svg" viewBox="0 0 105.83333 105.83334">
</svg>
<div class="levels-container">
<div data-carac="length" data-level="0" class="level-line">
<div class="line-label">Length</div>
<div class="line-progression"></div>
</div>
<div data-carac="uppercases" data-level="0" class="level-line">
<div class="line-label">Capitals</div>
<div class="line-progression"></div>
</div>
<div data-carac="specials" data-level="0" class="level-line">
<div class="line-label">Specials</div>
<div class="line-progression"></div>
</div>
<div data-carac="numbers" data-level="0" class="level-line">
<div class="line-label">Numbers</div>
<div class="line-progression"></div>
</div>
</div>
</div>
<div class="side">
<div id="input-wrapper">
<input required id="pwd" type="text">
<label>type here...</label>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script>
<script >
console.clear();
var s = Snap("#svg");
const config = {
strokeColor: '#734b00',
fillShield: '#734b00',
strokeDarkColor: '#f7c926',
fillColor: '#f7c926',
shadow: s.filter(Snap.filter.shadow(0, 0, 2, '#ffffff', 0.3)),
strengthSteps: {
length: [0, 6, 10, 16],
specials: [0, 2, 4, 6],
numbers: [0, 2, 4, 6],
uppercases: [0, 2, 4, 6] } };
class Draw {
constructor(strokeColor, fillColor, strokeDarkColor, fillShield, shadow) {
this.fillShield = fillShield;
this.strokeColor = strokeColor;
this.fillColor = fillColor;
this.strokeDarkColor = strokeDarkColor;
this.shadow = shadow;
}
paths() {
return [
{
carac: 'length',
assets: [
{
name: 'bottom',
d: [
'm 72.14003,45.15249 c 0,13.877381 -10.724779,19.316905 -19.223361,19.316905 -8.498581,0 -19.316904,-6.094333 -19.316905,-19.316905 0,-3.234958 1.085259,-6.259258 2.875019,-8.859952 3.636686,-5.284453 10.182098,-8.819929 16.441886,-8.819929 6.570104,0 12.136766,3.260981 15.562475,7.694994 2.322444,3.006021 3.660886,6.551179 3.660886,9.984887 z',
'm 72.14003,45.15249 c 0,13.877381 -10.724779,19.316905 -19.223361,19.316905 -8.498581,0 -19.316904,-6.094333 -19.316905,-19.316905 0,-3.234958 1.085259,-6.259258 2.875019,-8.859952 3.636686,-5.284453 10.182098,-8.819929 16.441886,-8.819929 6.570104,0 12.136766,3.260981 15.562475,7.694994 2.322444,3.006021 3.660886,6.551179 3.660886,9.984887 z',
'M 72.093257,49.268441 C 71.812624,56.363857 59.681098,64.35007 52.91667,69.761061 44.297089,61.521298 33.927171,55.615505 33.92717,49.970024 c 0,-3.234957 -1.259041,-7.455632 -0.1184,-12.92913 3.011528,-4.818689 12.848112,-9.100562 19.1079,-9.100562 6.570103,0 15.619415,4.259014 19.444565,9.612653 0.831729,4.044017 -0.132275,8.284432 -0.267978,11.715456 z',
'M 72.887008,55.188494 C 72.606375,62.28391 57.928234,70.766216 52.916671,81.931895 49.401075,71.821195 33.166494,61.039463 33.166493,55.393983 c 0,-3.234957 -1.993408,-12.66746 -0.852767,-18.140958 8.137831,-1.346033 12.532635,-5.710059 20.602945,-10.800974 4.496523,3.491872 15.555576,9.283791 20.869007,10.668681 0.831729,4.044017 -0.762968,14.636738 -0.89867,18.067762 z'],
attrs: {
'stroke-width': '0px',
'stroke': 'none',
'fill': this.fillColor } },
{
name: 'innerShields',
d: [
'm 52.916667,41.173197 c -2.686481,0 -4.864303,2.177822 -4.864303,4.864304 0,2.686481 2.177822,4.864304 4.864303,4.864304 2.686482,0 4.864304,-2.177823 4.864304,-4.864304 0,-2.686482 -2.177822,-4.864304 -4.864304,-4.864304 z',
'm 52.916668,39.651843 c -3.526703,0 -6.385658,2.858955 -6.385658,6.385658 0,3.526702 2.858955,6.385658 6.385658,6.385658 3.526702,0 6.385658,-2.858956 6.385658,-6.385658 0,-3.526703 -2.858956,-6.385658 -6.385658,-6.385658 z',
'm 52.916668,39.651843 c -1.083123,2.760676 -2.646934,5.230696 -6.385658,6.385658 5.100693,0.732549 5.156739,3.834548 6.385658,6.385658 1.228918,-2.55111 1.284964,-5.653109 6.385658,-6.385658 -3.738724,-1.154962 -5.302536,-3.624982 -6.385658,-6.385658 z',
'm 52.916667,39.651843 c -0.463021,1.543063 -3.492788,2.741715 -8.209835,2.913001 5.100693,0.732549 7.214777,7.205398 8.209835,14.620814 0.995059,-7.415416 3.109143,-13.888265 8.209836,-14.620814 -4.717047,-0.171286 -7.746815,-1.369938 -8.209836,-2.913001 z'],
attrs: {
'stroke-width': '0px',
'stroke': 'none',
'fill': this.fillShield,
'filter': this.shadow } },
{
name: 'borderLeft',
d: [
'm 52.845941,45.373976 c -0.08425,0.0086 -0.167157,0.03229 -0.244375,0.06816 a 0.07596396,0.07596396 0 0 1 0.0043,0.02499 0.07596396,0.07596396 0 0 1 -0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.05711,-0.026 c -0.04931,0.03523 -0.09443,0.07577 -0.133522,0.120834 a 0.07596396,0.07596396 0 0 1 0.02479,0.05602 0.07596396,0.07596396 0 0 1 -0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.03456,-0.0084 c -0.03313,0.06161 -0.05585,0.128247 -0.06552,0.198135 a 0.07596396,0.07596396 0 0 1 0.06904,0.07561 0.07596396,0.07596396 0 0 1 -0.06904,0.0756 c 0.01011,0.0731 0.03455,0.1426 0.0702,0.20656 a 0.07596396,0.07596396 0 0 1 0.02987,-0.0061 0.07596396,0.07596396 0 0 1 0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.01971,0.05094 c 0.03958,0.04467 0.08503,0.08483 0.134675,0.119596 a 0.07596396,0.07596396 0 0 1 0.05087,-0.01968 0.07596396,0.07596396 0 0 1 0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.0017,0.01555 c 0.076,0.03498 0.157456,0.05817 0.240231,0.06675 a 0.07596396,0.07596396 0 0 1 0.07173,-0.05127 v -0.01434 c -0.298777,0 -0.629695,-0.247532 -0.629695,-0.595525 0,-0.347993 0.350177,-0.595458 0.629695,-0.595458 v -0.01866 a 0.07596396,0.07596396 0 0 1 -0.07021,-0.04714 z',
'm 50.74574,25.596372 c -2.604452,0.264479 -5.167111,0.998151 -7.55406,2.106848 a 2.3481772,2.3481772 0 0 1 0.133842,0.772562 2.3481772,2.3481772 0 0 1 -2.348177,2.348177 2.3481772,2.3481772 0 0 1 -1.765269,-0.803568 c -1.524323,1.088911 -2.918851,2.342274 -4.127394,3.735173 a 2.3481772,2.3481772 0 0 1 0.76636,1.731677 2.3481772,2.3481772 0 0 1 -2.348177,2.348177 2.3481772,2.3481772 0 0 1 -1.068152,-0.259416 c -1.024242,1.904569 -1.726533,3.96435 -2.0252,6.124692 a 2.3481772,2.3481772 0 0 1 2.134238,2.337324 2.3481772,2.3481772 0 0 1 -2.134238,2.336808 c 0.312505,2.259494 1.068009,4.408021 2.169895,6.385141 a 2.3481772,2.3481772 0 0 1 0.923457,-0.189653 2.3481772,2.3481772 0 0 1 2.348177,2.348177 2.3481772,2.3481772 0 0 1 -0.609264,1.57458 c 1.223426,1.380911 2.628371,2.622418 4.163052,3.696933 a 2.3481772,2.3481772 0 0 1 1.572515,-0.608232 2.3481772,2.3481772 0 0 1 2.348177,2.348177 2.3481772,2.3481772 0 0 1 -0.05271,0.480592 c 2.349416,1.081149 4.867191,1.79799 7.425905,2.063438 a 2.3481772,2.3481772 0 0 1 2.217436,-1.584915 v -0.443383 c -9.235705,0 -19.464963,-7.651645 -19.464963,-18.408695 0,-10.757062 10.824573,-18.40663 19.464963,-18.40663 V 27.053647 A 2.3481772,2.3481772 0 0 1 50.74574,25.596372 Z',
'm 51.208762,25.563299 v 0 l -9.239229,4.764567 v 0 l -1.732196,-1.795759 v 0 L 33.1556,36.892839 v 0 l -2.473751,-0.09405 v 0 l 1.332736,9.23923 -2.411739,1.412834 v 0 0 0 0 l 10.397298,12.126391 v 0 0 0 0 c -2.531455,-2.97329 -4.969033,-6.002907 -5.770188,-10.014376 v 0 L 33.881139,38.03334 c 0,0 4.314938,-8.522091 19.035015,-10.006109 v 0 z',
'm 53.082716,25.759672 -2.000911,-1.918229 v 0 0 0 c -7.487809,5.898 -15.710544,9.874927 -22.568151,11.070694 v 0 0 0 0 0 0 0 0 0 c 0.06178,11.71776 -0.845587,22.170469 9.455858,30.66696 10.301445,8.496493 12.591226,12.245102 15.062911,17.33419 v 0 0 h 0.0321 v 0 C 51.917597,78.176206 45.894094,70.226966 38.959897,64.478758 34.790734,61.022665 32.285046,55.368508 32.292869,49.924321 l 0.0184,-12.80359 C 42.647761,34.573025 51.598903,27.432706 52.387501,26.737388 l 0.529167,-0.529167 z'],
attrs: {
'stroke-width': '0px',
'stroke': 'none',
'fill': this.strokeColor } },
{
name: 'borderRight',
d: [
'm 52.986366,45.373976 c 0.08426,0.0086 0.167158,0.03229 0.244377,0.06816 a 0.07596396,0.07596396 0 0 0 -0.0043,0.02499 0.07596396,0.07596396 0 0 0 0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.05711,-0.026 c 0.04931,0.03523 0.09443,0.07577 0.133522,0.120834 a 0.07596396,0.07596396 0 0 0 -0.02479,0.05602 0.07596396,0.07596396 0 0 0 0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.03455,-0.0084 c 0.03314,0.06161 0.05585,0.128247 0.06552,0.198135 a 0.07596396,0.07596396 0 0 0 -0.06904,0.07561 0.07596396,0.07596396 0 0 0 0.06904,0.0756 c -0.01011,0.0731 -0.03455,0.1426 -0.0702,0.20656 a 0.07596396,0.07596396 0 0 0 -0.02987,-0.0061 0.07596396,0.07596396 0 0 0 -0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.01971,0.05094 c -0.03958,0.04467 -0.08503,0.08483 -0.134675,0.119596 a 0.07596396,0.07596396 0 0 0 -0.05087,-0.01968 0.07596396,0.07596396 0 0 0 -0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.0017,0.01555 c -0.076,0.03498 -0.157457,0.05817 -0.240232,0.06675 a 0.07596396,0.07596396 0 0 0 -0.07173,-0.05127 v -0.01434 c 0.298777,0 0.629695,-0.247532 0.629695,-0.595525 0,-0.347993 -0.350177,-0.595458 -0.629695,-0.595458 v -0.01866 a 0.07596396,0.07596396 0 0 0 0.07021,-0.04714 z',
'm 55.086566,25.596372 c 2.604452,0.264479 5.167111,0.998151 7.55406,2.106848 a 2.3481772,2.3481772 0 0 0 -0.133842,0.772562 2.3481772,2.3481772 0 0 0 2.348177,2.348177 2.3481772,2.3481772 0 0 0 1.765269,-0.803568 c 1.524323,1.088911 2.918851,2.342274 4.127394,3.735173 a 2.3481772,2.3481772 0 0 0 -0.76636,1.731677 2.3481772,2.3481772 0 0 0 2.348177,2.348177 2.3481772,2.3481772 0 0 0 1.068152,-0.259416 c 1.024242,1.904569 1.726533,3.96435 2.0252,6.124692 a 2.3481772,2.3481772 0 0 0 -2.134238,2.337324 2.3481772,2.3481772 0 0 0 2.134238,2.336808 c -0.312505,2.259494 -1.068009,4.408021 -2.169895,6.385141 a 2.3481772,2.3481772 0 0 0 -0.923457,-0.189653 2.3481772,2.3481772 0 0 0 -2.348177,2.348177 2.3481772,2.3481772 0 0 0 0.609264,1.57458 c -1.223426,1.380911 -2.628371,2.622418 -4.163052,3.696933 a 2.3481772,2.3481772 0 0 0 -1.572515,-0.608232 2.3481772,2.3481772 0 0 0 -2.348177,2.348177 2.3481772,2.3481772 0 0 0 0.05271,0.480592 c -2.349416,1.081149 -4.867191,1.79799 -7.425905,2.063438 a 2.3481772,2.3481772 0 0 0 -2.217436,-1.584915 v -0.443383 c 9.235705,0 19.464963,-7.651645 19.464963,-18.408695 0,-10.757062 -10.824573,-18.40663 -19.464963,-18.40663 v -0.576709 a 2.3481772,2.3481772 0 0 0 2.170413,-1.457275 z',
'm 54.623546,25.563299 v 0 l 9.239229,4.764567 v 0 l 1.732196,-1.79576 v 0 l 7.081737,8.360733 v 0 l 2.473751,-0.09405 v 0 l -1.332736,9.23923 2.411739,1.412834 v 0 0 0 0 L 65.832164,59.577244 v 0 0 0 0 c 2.531455,-2.97329 4.969033,-6.002907 5.770188,-10.014376 v 0 L 71.951169,38.03334 c 0,0 -4.314938,-8.522091 -19.035015,-10.006109 v 0 z',
'm 53.082715,25.759672 2.000911,-1.918229 v 0 0 0 c 7.487809,5.898 15.710544,9.874927 22.568151,11.070694 v 0 0 0 0 0 0 0 0 0 c -0.06178,11.71776 0.845587,22.170469 -9.455858,30.66696 -10.301445,8.496493 -12.591226,12.245102 -15.062911,17.33419 v 0 0 h -0.0321 v 0 c 1.146926,-4.737081 7.170429,-12.686321 14.104626,-18.434529 4.169163,-3.456093 6.674851,-9.11025 6.667028,-14.554437 l -0.0184,-12.80359 C 63.51767,34.573025 54.566528,27.432706 53.77793,26.737388 l -0.529167,-0.529167 z'],
attrs: {
'stroke-width'.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0