Интересная форма ввода пароля. При вводе иконка в виде щита показывает надежность пароля: по мере усложненности пароля появляется сначала один меч, потом второй.
Подключаем JQuery, FontAwesome (иконочный шрифт), GSAP
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://kit.fontawesome.com/56942480bb.js" crossorigin="anonymous"></script>
HTML
<div id="wrapper">
<div id="svgWrapper">
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 305.7 326.9" style="enable-background:new 0 0 305.7 326.9;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: url(#SVGID_1_);
stroke-width: 4;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: url(#SVGID_2_);
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: url(#SVGID_3_);
stroke-width: 4;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: url(#SVGID_4_);
stroke-width: 4;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st4 {
fill: none;
stroke: url(#SVGID_5_);
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st5 {
fill: none;
stroke: url(#SVGID_6_);
stroke-width: 4;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st6 {
fill: none;
stroke: url(#SVGID_7_);
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st7 {
fill: none;
stroke: url(#SVGID_8_);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st8 {
fill: none;
stroke: url(#SVGID_9_);
stroke-width: 3;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st9 {
fill: none;
stroke: url(#SVGID_10_);
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st10 {
fill: none;
stroke: url(#SVGID_11_);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st11 {
fill: none;
stroke: url(#SVGID_12_);
stroke-width: 3;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st12 {
fill: #181523;
stroke: url(#SVGID_13_);
stroke-width: 4;
stroke-miterlimit: 10;
}
.st13 {
fill: none;
stroke: url(#SVGID_14_);
stroke-width: 3;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st14 {
fill: none;
stroke: url(#SVGID_15_);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st15 {
fill: none;
stroke: url(#SVGID_16_);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st16 {
fill: none;
stroke: url(#SVGID_17_);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st17 {
fill: none;
stroke: url(#SVGID_18_);
stroke-width: 3;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st18 {
fill: #181523;
stroke: url(#SVGID_19_);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
</style>
<g id="swords">
<g id="sword-right">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="201.8246" y1="81.0234" x2="201.8246"
y2="105.8914">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<line class="st0" x1="178.6" y1="83" x2="225.1" y2="103.9" />
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="165.5329" y1="51.6546" x2="165.5329"
y2="300.8525">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<polyline class="st1" points="214.5,53.7 108.8,275.7 109.7,298.9 127,284.9 222.3,57.9 " />
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="222.8899" y1="34.1813" x2="222.8899"
y2="58.9361">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<ellipse transform="matrix(0.9345 -0.356 0.356 0.9345 -1.9738 82.3909)" class="st2" cx="222.9" cy="46.6"
rx="10.4" ry="10.4" />
</g>
<g id="sword-left">
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="110.5006" y1="81.0234" x2="110.5006"
y2="105.8914">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<line class="st3" x1="133.8" y1="83" x2="87.2" y2="103.9" />
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="146.7923" y1="51.6546" x2="146.7923"
y2="300.8525">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<polyline class="st4" points="97.8,53.7 203.5,275.7 202.6,298.9 185.3,284.9 90,57.9 " />
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="89.4354" y1="34.1813" x2="89.4354"
y2="58.9361">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<ellipse transform="matrix(0.356 -0.9345 0.9345 0.356 14.0903 113.5626)" class="st5" cx="89.4" cy="46.6"
rx="10.4" ry="10.4" />
</g>
</g>
<g id="wings">
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="89.0083" y1="80.0864" x2="89.0083"
y2="218.2749">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st6" d="M153.8,180.8c0,0-3.6,25-23.8,32.5s-42.4-0.9-50.8-6.3s-18.2-12.5-24-27.1c0,0-19.1-11.8-18.7-41.7
c0,0-18.7-20.7-10-54.6c0,0,2.3-4.4,7.7,1.9c5.4,6.3,47,48.4,89.4,61.5C123.6,147,154.8,155.7,153.8,180.8z" />
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="61.0109" y1="135.4071" x2="61.0109"
y2="164.9678">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st7" d="M86.2,163.5c0,0-25.5-4.7-50.4-26.6" />
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="74.683" y1="178.1688" x2="74.683"
y2="189.2321">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st8" d="M93.9,187.4c-1.1,0.1-14,2-31.3-4.9c-16.2-6.5,0,0,0,0" />
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="217.9578" y1="80.8117" x2="217.9578"
y2="219.0002">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st9"
d="M153.2,181.5c0,0,3.6,25,23.8,32.5c20.2,7.5,42.4-0.9,50.8-6.3c8.4-5.4,18.2-12.5,24-27.1
c0,0,19.1-11.8,18.7-41.7c0,0,18.7-20.7,10-54.6c0,0-2.3-4.4-7.7,1.9s-47,48.4-89.4,61.5C183.4,147.7,152.2,156.4,153.2,181.5z" />
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="245.9552" y1="136.1324" x2="245.9552"
y2="165.6931">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st10" d="M220.8,164.2c0,0,25.5-4.7,50.4-26.6" />
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="232.2831" y1="178.8941" x2="232.2831"
y2="189.9574">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st11" d="M213,188.1c1.1,0.1,14,2,31.3-4.9c16.2-6.5,0,0,0,0" />
</g>
<g id="shield">
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="155.1985" y1="95.6" x2="155.1985" y2="265.28">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st12" d="M155.4,97.6c0,0,2.4-0.4,4.4,2.8s24.9,27.9,69.8,26c0,0-7,89.9-74.2,136.5c0,0-63.1-39.6-74.5-136.1
c0,0,45.6,2.9,70.3-26.7C151.2,100,152.6,97.6,155.4,97.6z" />
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="171.026" y1="120.7933" x2="171.026"
y2="131.8795">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st13" d="M163.6,122.3c0,0,8.6,5.4,14.9,8.1" />
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="201.7623" y1="133.1288" x2="201.7623"
y2="189.382">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st14" d="M188.8,134.6c0,0,13.3,4.6,25.9,6c0,0-5.7,26.8-14.7,47.2" />
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="190.0285" y1="196.0098" x2="190.0285"
y2="213.7522">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st15" d="M194.2,197.5c0,0-4.8,10.5-8.4,14.7" />
<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="130.1562" y1="203.381" x2="130.1562"
y2="230.6007">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st16" d="M121.1,204.9c0,0,11.7,19.7,18.1,24.2" />
</g>
<g id="crown">
<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="155.6981" y1="60.7746" x2="155.6981"
y2="66.5512">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st17" d="M133.2,65.1c0,0,21.9-6.2,44.9,0" />
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="155.2471" y1="26.5662" x2="155.2471"
y2="61.6399">
<stop offset="0" style="stop-color:#FF8901" />
<stop offset="1" style="stop-color:#E52E71" />
</linearGradient>
<path class="st18"
d="M128.9,60.1l-5.8-12.8l8.8-5.5c0,0,1.3,9.8,9.1,9.6c7.8-0.2,9.3-6.5,9.3-6.5s2.6-7.2-4.5-11.4l9.4-5.5
l9.2,5.3c0,0-6.3,4.1-4.6,10.7s8.2,7.2,8.2,7.2s9.5,1.1,10.6-9.6l8.8,5.3l-5.7,13.1C181.7,60.1,155.8,52.4,128.9,60.1z" />
</g>
</svg>
<div id="inputWrapper">
<input oninput="eventFunction()" id="passInput" type="password" class="gradientInput" autofocus>
<button id="showHide" type="button"><i id="hidePass" class="far fa-eye-slash"></i><i id="showPass"
class="far fa-eye"></i></button>
</div>
<div id="instructions">
<p>Combine length, lower and upper cases, numbers and symbols.</p>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #100e17;
}
#wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #181523;
border-radius: 18px;
padding: 0 90px 30px 90px;
width: 380px;
}
#svgWrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
}
svg {
width: 100%;
padding: 30px 30px 0 30px;
}
#sword-left,
#sword-right,
#wings,
#crown {
opacity: 0;
}
#inputWrapper {
display: flex;
justify-content: center;
background: #100e17;
border-radius: 6px;
padding: 6px 18px 9px 18px;
position: relative;
width: 80%;
margin-top: 18px;
}
input {
font-size: 16px;
text-align: center;
font-family: "Open Sans", sans-serif;
letter-spacing: 1px;
color: #e5306d;
background: #100e17;
outline: 0;
border: 0;
background: -webkit-linear-gradient(60deg, #e5316c, #fe8603);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 80%;
position: relative;
left: -20px;
}
button {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border: 0;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
padding: 0 12px;
width: 50px;
font-size: 18px;
color: rgba(255, 255, 255, .8);
background: -webkit-linear-gradient(-60deg, #e5316c 30%, #fe8603);
cursor: pointer;
transition: 150ms ease-in-out;
}
button:hover {
color: rgba(255, 255, 255, 1);
}
#showPass {
display: none;
}
#instructions {
font-family: "Open Sans", sans-serif;
font-style: italic;
color: white;
font-size: 14px;
text-align: center;
color: #e5316c;
margin-top: 30px;
opacity: .5;
}
ul {
padding: 0;
}
li {
padding: 0;
list-style: none;
margin: 3px 0;
background: -webkit-linear-gradient(60deg, #e5316c, #fe8603);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-height: 420px) {
#instructions {
display: none;
}
}
JS
let passStrength = 0;
let password = "";
let length = 0;
function getPass() {
let passInput = document.getElementById("passInput").value;
password = passInput;
return password;
}
function getLength() {
let passLength = password.length;
length = passLength;
return length;
}
function lengthReq() {
if (length > 11 && passStrength == 0) {
passStrength++;
}
if (length < 12 && passStrength >= 1) {
passStrength--;
}
}
function upperReq() {
let chars = password;
if (/[a-z].?[A-Z]/g.test(chars) && passStrength <= 1) {
passStrength++;
}
}
function numReq() {
let chars = password;
if (/[0-9]{1}/.test(chars) && passStrength <= 1) {
passStrength++;
}
}
function specialReq() {
let chars = password;
if (/[!@#\$%\^\&*\)\(+=._-]/g.test(chars) && passStrength <= 3) {
passStrength++;
}
}
function checkStrength() {
switch (passStrength) {
case 0:
swordLeft.reverse();
swordRight.reverse();
wings.reverse();
crown.reverse();
break;
case 1:
swordLeft.play();
swordRight.reverse();
wings.reverse();
crown.reverse();
break;
case 2:
swordLeft.play();
swordRight.play();
wings.reverse();
crown.reverse();
break;
case 3:
swordLeft.play();
swordRight.play();
wings.play();
crown.reverse();
break;
case 4:
swordLeft.play();
swordRight.play();
wings.play();
crown.play();
break;
}
}
function deletePass() {
if (password == "") {
passStrength = 0;
}
}
function eventFunction() {
getPass();
getLength();
lengthReq();
upperReq();
numReq();
specialReq();
deletePass();
checkStrength();
console.log(passStrength);
};
function toggle() {
var x = document.getElementById("passInput");
if (x.type === "password") {
$("#showPass").css({
"display": "block"
});
$("#hidePass").css({
"display": "none"
});
x.type = "text";
} else {
$("#showPass").css({
"display": "none"
});
$("#hidePass").css({
"display": "block"
});
x.type = "password";
}
}
$("#showHide").click(function () {
getPass();
toggle();
});
gsap.set("#swords", {
y: -60
});
gsap.set("#sword-left", {
x: -30,
rotate: -30,
transformOrigin: "center"
});
gsap.set("#sword-right", {
x: 30,
rotate: 30,
transformOrigin: "center"
});
gsap.set("#wings", {
scale: 0,
y: 60,
transformOrigin: "center"
});
gsap.set("#crown", {
rotate: 30,
transformOrigin: "center",
y: 60
});
var swordLeft = gsap.timeline();
swordLeft.to("#sword-left", .5, {
opacity: 1,
rotate: 0,
y: 60,
x: 0,
ease: Back.easeOut
});
swordLeft.pause();
var swordRight = gsap.timeline();
swordRight.to("#sword-right", .5, {
opacity: 1,
rotate: 0,
y: 60,
x: 0,
ease: Power4.easeInOut
});
swordRight.pause();
var wings = gsap.timeline();
wings.to("#wings", .5, {
delay: .5,
opacity: 1,
scale: 1,
y: 0,
ease: Back.easeOut,
transformOrigin: "center"
});
wings.pause();
var crown = gsap.timeline();
crown.to("#crown", .5, {
delay: 1,
opacity: 1,
y: 0,
rotate: 0,
ease: Back.easeOut
});
crown.pause();