58be33a8d7
* Added pre commit hook * Run pre commit hook on all files --------- Co-authored-by: Horilla <131998600+horilla-opensource@users.noreply.github.com>
203 lines
4.2 KiB
HTML
203 lines
4.2 KiB
HTML
|
|
{% load i18n %} {% load static %}
|
|
<style>
|
|
@keyframes biometricPulse {
|
|
from {
|
|
transform: translateX(-10%);
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
#mask-biometric-animation {
|
|
animation: biometricPulse 2s linear 0.1s infinite;
|
|
}
|
|
.hr-biometric {
|
|
width: 200px;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
.hr-biometric-container {
|
|
position: absolute; /* or position: relative; */
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.hr-biometric-message{
|
|
color: #303030;
|
|
display: block;
|
|
margin-top: 1.25rem;
|
|
}
|
|
</style>
|
|
<div class="hr-biometric-container">
|
|
|
|
<!-- SVG CODE -->
|
|
<svg
|
|
class="hr-biometric"
|
|
width="1102"
|
|
height="339"
|
|
viewBox="0 0 1102 339"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<rect
|
|
x="671.5"
|
|
y="5.5"
|
|
width="425"
|
|
height="328"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="694.5"
|
|
y="28.5"
|
|
width="185"
|
|
height="72"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="693.5"
|
|
y="128.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="694.5"
|
|
y="195.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="694.5"
|
|
y="262.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="765.5"
|
|
y="128.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="766.5"
|
|
y="195.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="766.5"
|
|
y="262.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="839.5"
|
|
y="128.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="840.5"
|
|
y="195.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="840.5"
|
|
y="262.5"
|
|
width="39"
|
|
height="39"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<rect
|
|
x="908.5"
|
|
y="131.5"
|
|
width="155"
|
|
height="170"
|
|
fill="white"
|
|
stroke="#999999"
|
|
stroke-width="11" />
|
|
<line
|
|
x1="936"
|
|
y1="100.5"
|
|
x2="1036"
|
|
y2="100.5"
|
|
stroke="#999999"
|
|
stroke-width="7" />
|
|
<line
|
|
x1="936"
|
|
y1="32.5"
|
|
x2="1036"
|
|
y2="32.5"
|
|
stroke="#999999"
|
|
stroke-width="7" />
|
|
<line
|
|
x1="920"
|
|
y1="83.5"
|
|
x2="1053"
|
|
y2="83.5"
|
|
stroke="#999999"
|
|
stroke-width="7" />
|
|
<line
|
|
x1="919"
|
|
y1="49.5"
|
|
x2="1052"
|
|
y2="49.5"
|
|
stroke="#999999"
|
|
stroke-width="7" />
|
|
<line
|
|
x1="912.023"
|
|
y1="66.5001"
|
|
x2="1061.02"
|
|
y2="67.5001"
|
|
stroke="#999999"
|
|
stroke-width="7" />
|
|
<mask
|
|
id="mask0_703_126"
|
|
style="mask-type: alpha"
|
|
maskUnits="userSpaceOnUse"
|
|
x="0"
|
|
y="42"
|
|
width="606"
|
|
height="262">
|
|
<path
|
|
d="M0.5 221.5H225.5L322 135.5V301.5L407.5 60.5L434.5 221.5H606"
|
|
stroke="white"
|
|
stroke-width="9" />
|
|
</mask>
|
|
<g mask="url(#mask0_703_126)">
|
|
<rect
|
|
x="-561"
|
|
y="-262"
|
|
width="669"
|
|
height="686"
|
|
id="mask-biometric-animation"
|
|
fill="#E54F38" />
|
|
</g>
|
|
</svg>
|
|
<!-- END OF SVG CODE -->
|
|
<span class="hr-biometric-message">{% trans "Trying to connect..." %}</span>
|
|
</div>
|