1042 lines
17 KiB
JavaScript
1042 lines
17 KiB
JavaScript
|
body {
|
||
|
background: linear-gradient(135deg, #fff333, #ff3377);
|
||
|
}
|
||
|
#outer {
|
||
|
position: absolute;
|
||
|
width: 340px;
|
||
|
height: 240px;
|
||
|
background-color: silver;
|
||
|
top: 110px;
|
||
|
left: 7px;
|
||
|
border-style: double;
|
||
|
border-top-left-radius: 10px;
|
||
|
|
||
|
border-top-right-radius: 10px;
|
||
|
align-content: center;
|
||
|
border-color: black;
|
||
|
border-width: 5px;
|
||
|
border-style: outset;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
}
|
||
|
|
||
|
#acname {
|
||
|
text-transform: uppercase;
|
||
|
font-weight: bold;
|
||
|
color: black;
|
||
|
position: absolute;
|
||
|
|
||
|
align-content: center;
|
||
|
top: 40px;
|
||
|
left: 146px;
|
||
|
font-size: 12.5px;
|
||
|
text-shadow: 1px -1px 1px black;
|
||
|
}
|
||
|
|
||
|
#de {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
text-transform: uppercase;
|
||
|
font-size: 15px;
|
||
|
top: 30px;
|
||
|
left: 5px;
|
||
|
border-color: white;
|
||
|
border-radius: 3px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
#b1 {
|
||
|
height: 14px;
|
||
|
position: absolute;
|
||
|
width: 4.5px;
|
||
|
background-color: white;
|
||
|
border-color: black;
|
||
|
border-width: 2px;
|
||
|
top: 60px;
|
||
|
left: 5px;
|
||
|
align-content: center;
|
||
|
border-style: solid;
|
||
|
}
|
||
|
#b2 {
|
||
|
height: 14px;
|
||
|
position: absolute;
|
||
|
width: 4.5px;
|
||
|
background-color: white;
|
||
|
border-color: black;
|
||
|
border-width: 2px;
|
||
|
top: 120px;
|
||
|
left: 5px;
|
||
|
border-style: solid;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#b3 {
|
||
|
height: 14px;
|
||
|
position: absolute;
|
||
|
width: 4.5px;
|
||
|
background-color: white;
|
||
|
border-color: black;
|
||
|
border-width: 2px;
|
||
|
top: 180px;
|
||
|
left: 5px;
|
||
|
border-style: solid;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#user23 {
|
||
|
font-weight: bold;
|
||
|
color: white;
|
||
|
position: absolute;
|
||
|
left: 78px;
|
||
|
top: 50px;
|
||
|
font-size: 13px;
|
||
|
text-shadow: 0.5px -1px 1px black;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#b4 {
|
||
|
height: 14px;
|
||
|
position: absolute;
|
||
|
width: 4.5px;
|
||
|
background-color: white;
|
||
|
border-color: black;
|
||
|
border-width: 2px;
|
||
|
top: 180px;
|
||
|
right: 5px;
|
||
|
border-style: solid;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#b5 {
|
||
|
height: 14px;
|
||
|
position: absolute;
|
||
|
width: 4.5px;
|
||
|
background-color: white;
|
||
|
border-color: black;
|
||
|
border-width: 2px;
|
||
|
top: 120px;
|
||
|
right: 5px;
|
||
|
border-style: solid;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#b6 {
|
||
|
height: 14px;
|
||
|
position: absolute;
|
||
|
width: 4.5px;
|
||
|
background-color: white;
|
||
|
border-color: black;
|
||
|
border-width: 2px;
|
||
|
top: 60px;
|
||
|
right: 5px;
|
||
|
border-style: solid;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#camera {
|
||
|
width: 15px;
|
||
|
position: absolute;
|
||
|
height: 15px;
|
||
|
background-color: lightgrey;
|
||
|
border-radius: 50%;
|
||
|
left: 150px;
|
||
|
top: 8px;
|
||
|
border-style: double;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
.screen {
|
||
|
width: 260px;
|
||
|
height: 160px;
|
||
|
position: absolute;
|
||
|
background-color: lightblue;
|
||
|
left: 25px;
|
||
|
top: 30px;
|
||
|
bottom: 30px;
|
||
|
right: 30px;
|
||
|
border-width: 15px;
|
||
|
border-top-style: inset;
|
||
|
border-top-color: black;
|
||
|
border-bottom-style: outset;
|
||
|
border-bottom-color: black;
|
||
|
border-left-style: inset;
|
||
|
border-left-color: black;
|
||
|
border-right-style: outset;
|
||
|
border-right-color: black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
.well1 {
|
||
|
font-weight: bold;
|
||
|
color: Black;
|
||
|
position: absolute;
|
||
|
font-family: "Montserrat", serif;
|
||
|
left: 15px;
|
||
|
text-transform: uppercase;
|
||
|
top: 8px;
|
||
|
text-shadow: 0.5px -1px 1px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
.well2 {
|
||
|
font-weight: bold;
|
||
|
color: white;
|
||
|
position: absolute;
|
||
|
font-family: "Montserrat", serif;
|
||
|
left: 29px;
|
||
|
top: 30px;
|
||
|
align-content: center;
|
||
|
text-shadow: 0.5px 0.5px white;
|
||
|
}
|
||
|
.pass,
|
||
|
.pass2 {
|
||
|
height: 10px;
|
||
|
position: absolute;
|
||
|
align-content: center;
|
||
|
width: 80px;
|
||
|
top: 80px;
|
||
|
left: 80px;
|
||
|
border-radius: 5px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
border-style: solid;
|
||
|
border-color: black;
|
||
|
}
|
||
|
#btne1,
|
||
|
#btne2 {
|
||
|
height: 20px;
|
||
|
position: absolute;
|
||
|
width: 40px;
|
||
|
top: 110px;
|
||
|
left: 100px;
|
||
|
font-size: 8px;
|
||
|
text-align: center;
|
||
|
font-weight: bold;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
maxlength: 8;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#com1 {
|
||
|
text-transform: uppercase;
|
||
|
font-weight: bold;
|
||
|
color: black;
|
||
|
position: absolute;
|
||
|
|
||
|
top: 216px;
|
||
|
left: 149px;
|
||
|
font-size: 10px;
|
||
|
text-shadow: 1px -1px 1px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#botto {
|
||
|
position: absolute;
|
||
|
width: 340px;
|
||
|
left: 7px;
|
||
|
background-color: darkgrey;
|
||
|
height: 170px;
|
||
|
top: 410px;
|
||
|
border-style: inset;
|
||
|
border-width: 5px;
|
||
|
|
||
|
align-content: center;
|
||
|
border-color: black;
|
||
|
}
|
||
|
#cash {
|
||
|
position: absolute;
|
||
|
width: 130px;
|
||
|
height: 15px;
|
||
|
background-color: grey;
|
||
|
top: 25px;
|
||
|
left: 101px;
|
||
|
border-color: black;
|
||
|
border-width: 5px;
|
||
|
border-style: outset;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#wdr {
|
||
|
position: absolute;
|
||
|
width: 60px;
|
||
|
height: 17px;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
left: 10px;
|
||
|
top: 15px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#dep {
|
||
|
position: absolute;
|
||
|
width: 60px;
|
||
|
height: 17px;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
left: 10px;
|
||
|
top: 75px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#mst {
|
||
|
position: absolute;
|
||
|
width: 60px;
|
||
|
height: 24px;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
left: 10px;
|
||
|
top: 130px;
|
||
|
align-content: center;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
}
|
||
|
#det {
|
||
|
position: absolute;
|
||
|
width: 60px;
|
||
|
height: 17px;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
right: 10px;
|
||
|
top: 15px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#otr {
|
||
|
position: absolute;
|
||
|
width: 60px;
|
||
|
height: 17px;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
right: 10px;
|
||
|
top: 75px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#cpin {
|
||
|
position: absolute;
|
||
|
width: 60px;
|
||
|
height: 24px;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
right: 10px;
|
||
|
top: 130px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#back,
|
||
|
#back2,
|
||
|
#back3 {
|
||
|
bottom: 5px;
|
||
|
position: absolute;
|
||
|
left: 100px;
|
||
|
height: 20px;
|
||
|
width: 40px;
|
||
|
text-align: center;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#back4,
|
||
|
#back9 {
|
||
|
bottom: 5px;
|
||
|
position: absolute;
|
||
|
left: 100px;
|
||
|
height: 20px;
|
||
|
width: 40px;
|
||
|
text-align: center;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#back6,
|
||
|
#back7,
|
||
|
#back5 {
|
||
|
bottom: 5px;
|
||
|
position: absolute;
|
||
|
left: 100px;
|
||
|
height: 20px;
|
||
|
width: 40px;
|
||
|
text-align: center;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
#witdrw,
|
||
|
#depst {
|
||
|
position: absolute;
|
||
|
top: 42px;
|
||
|
font-size: 14px;
|
||
|
left: 30px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#witdrwno,
|
||
|
#depstno {
|
||
|
position: absolute;
|
||
|
top: 3px;
|
||
|
width: 65px;
|
||
|
height: 8px;
|
||
|
left: 119px;
|
||
|
align-content: center;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
}
|
||
|
#dep10 {
|
||
|
position: absolute;
|
||
|
top: 40px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
left: 5px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
#wdt7 {
|
||
|
position: absolute;
|
||
|
top: 10px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
left: 150px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#wdt5 {
|
||
|
position: absolute;
|
||
|
top: 70px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
left: 150px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#wdt3 {
|
||
|
position: absolute;
|
||
|
top: 40px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
left: 150px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#wdt4,
|
||
|
#dep12 {
|
||
|
align-content: center;
|
||
|
position: absolute;
|
||
|
top: 70px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
left: 13px;
|
||
|
}
|
||
|
|
||
|
#dep8 {
|
||
|
position: absolute;
|
||
|
top: 10px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
left: 42px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
#btns2,
|
||
|
#bt3 {
|
||
|
position: absolute;
|
||
|
top: 30px;
|
||
|
width: 50px;
|
||
|
height: 22px;
|
||
|
font-size: 10px;
|
||
|
text-align: center;
|
||
|
font-weight: bold;
|
||
|
background-color: lightgrey;
|
||
|
left: 65px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#back5,
|
||
|
#back8 {
|
||
|
align-content: center;
|
||
|
position: absolute;
|
||
|
left: 70px;
|
||
|
height: 20px;
|
||
|
width: 40px;
|
||
|
top: 85px;
|
||
|
text-align: center;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
}
|
||
|
|
||
|
#backs {
|
||
|
align-content: center;
|
||
|
bottom: 40px;
|
||
|
position: absolute;
|
||
|
left: 105px;
|
||
|
height: 20px;
|
||
|
width: 40px;
|
||
|
text-align: center;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
}
|
||
|
#pinwrg1 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
left: 80px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#pinwrg6 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
left: 40px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#pinwrg2 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
left: 65px;
|
||
|
top: 30px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#bac3,
|
||
|
#bac4 {
|
||
|
align-content: center;
|
||
|
bottom: 5px;
|
||
|
position: absolute;
|
||
|
left: 100px;
|
||
|
height: 20px;
|
||
|
width: 40px;
|
||
|
text-align: center;
|
||
|
background-color: lightgrey;
|
||
|
font-weight: bold;
|
||
|
font-size: 8px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
}
|
||
|
|
||
|
#card {
|
||
|
align-content: center;
|
||
|
position: absolute;
|
||
|
width: 340px;
|
||
|
height: 40px;
|
||
|
background-color: darkgrey;
|
||
|
top: 360px;
|
||
|
left: 7px;
|
||
|
border-color: black;
|
||
|
border-width: 5px;
|
||
|
border-style: outset;
|
||
|
}
|
||
|
#card2 {
|
||
|
align-content: center;
|
||
|
position: absolute;
|
||
|
width: 70px;
|
||
|
height: 7px;
|
||
|
background-color: grey;
|
||
|
top: 4px;
|
||
|
left: 5px;
|
||
|
border-color: black;
|
||
|
border-width: 5px;
|
||
|
border-style: outset;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.one {
|
||
|
align-content: center;
|
||
|
height: 10px;
|
||
|
position: absolute;
|
||
|
width: 280px;
|
||
|
background-color: white;
|
||
|
top: 78px;
|
||
|
left: 6px;
|
||
|
border-bottom-left-radius: 10px;
|
||
|
border-bottom-right-radius: 10px;
|
||
|
border-style: solid;
|
||
|
border-bottom-color: black;
|
||
|
border-bottom-width: 3px;
|
||
|
}
|
||
|
|
||
|
.one {
|
||
|
align-content: center;
|
||
|
transform: rotateX(40deg);
|
||
|
animation: one 2s infinite;
|
||
|
animation-direction: alternate;
|
||
|
}
|
||
|
@keyframes one {
|
||
|
0% {
|
||
|
transform: rotateX(30deg);
|
||
|
}
|
||
|
50% {
|
||
|
transform: rotateX(50deg);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
transform: rotateX(70deg);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#lens {
|
||
|
width: 8px;
|
||
|
position: absolute;
|
||
|
height: 8px;
|
||
|
background-color: black;
|
||
|
border-radius: 50%;
|
||
|
left: 3.5px;
|
||
|
top: 3.5px;
|
||
|
animation: two 6s infinite;
|
||
|
transform: rotateY (40deg);
|
||
|
align-content: center;
|
||
|
animation-direction: alternate;
|
||
|
}
|
||
|
@keyframes two {
|
||
|
0% {
|
||
|
transform: rotateY (30deg);
|
||
|
}
|
||
|
20% {
|
||
|
transform: rotateX(30deg);
|
||
|
}
|
||
|
|
||
|
40% {
|
||
|
transform: rotateY(50deg);
|
||
|
}
|
||
|
50% {
|
||
|
transform: rotateX(50deg);
|
||
|
}
|
||
|
|
||
|
75% {
|
||
|
transform: rotateX(70deg);
|
||
|
}
|
||
|
100% {
|
||
|
transform: rotateY (30deg);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#indictr {
|
||
|
height: 25px;
|
||
|
width: 90px;
|
||
|
background-color: green;
|
||
|
left: 120px;
|
||
|
position: absolute;
|
||
|
top: 6px;
|
||
|
border-style: solid;
|
||
|
border-width: 2.5px;
|
||
|
animation: clr 0.5s infinite;
|
||
|
align-content: center;
|
||
|
}
|
||
|
@keyframes clr {
|
||
|
0% {
|
||
|
background-color: #7cfc00;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
background-color: grey;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#inf {
|
||
|
position: absolute;
|
||
|
left: 49px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
font-weight: bold;
|
||
|
color: white;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#l4 {
|
||
|
position: absolute;
|
||
|
left: 70px;
|
||
|
bottom: 9px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
font-weight: bold;
|
||
|
color: white;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
#round1 {
|
||
|
width: 10px;
|
||
|
height: 10px;
|
||
|
border-radius: 50%;
|
||
|
background: blue;
|
||
|
animation: ball 0.7s infinite;
|
||
|
|
||
|
position: absolute;
|
||
|
|
||
|
left: 3.1cm;
|
||
|
margin-top: 75px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#round3 {
|
||
|
width: 10px;
|
||
|
height: 10px;
|
||
|
border-radius: 50%;
|
||
|
background: red;
|
||
|
animation: ball 0.6s infinite;
|
||
|
|
||
|
position: absolute;
|
||
|
|
||
|
left: 2.7cm;
|
||
|
margin-top: 75px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
#round2 {
|
||
|
width: 10px;
|
||
|
height: 10px;
|
||
|
border-radius: 50%;
|
||
|
background: green;
|
||
|
animation: ball 0.9s infinite;
|
||
|
|
||
|
position: absolute;
|
||
|
|
||
|
left: 3.9cm;
|
||
|
margin-top: 75px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#round4 {
|
||
|
width: 10px;
|
||
|
height: 10px;
|
||
|
border-radius: 50%;
|
||
|
background: yellow;
|
||
|
animation: ball 0.8s infinite;
|
||
|
|
||
|
position: absolute;
|
||
|
|
||
|
left: 3.5cm;
|
||
|
margin-top: 75px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
@keyframes ball {
|
||
|
0% {
|
||
|
top: 0;
|
||
|
}
|
||
|
10% {
|
||
|
top: 0.1cm;
|
||
|
}
|
||
|
20% {
|
||
|
top: 0.16cm;
|
||
|
}
|
||
|
30% {
|
||
|
top: 0.22cm;
|
||
|
}
|
||
|
40% {
|
||
|
top: 0.28cm;
|
||
|
}
|
||
|
50% {
|
||
|
top: 0.34cm;
|
||
|
}
|
||
|
60% {
|
||
|
top: 0.28cm;
|
||
|
}
|
||
|
70% {
|
||
|
top: 0.22cm;
|
||
|
}
|
||
|
80% {
|
||
|
top: 0.16cm;
|
||
|
}
|
||
|
90% {
|
||
|
top: 0.1cm;
|
||
|
}
|
||
|
100% {
|
||
|
top: 0;
|
||
|
}
|
||
|
}
|
||
|
#loading {
|
||
|
width: 260px;
|
||
|
height: 160px;
|
||
|
position: absolute;
|
||
|
background-color: black;
|
||
|
left: 0.01px;
|
||
|
top: 0.01px;
|
||
|
bottom: 0.01px;
|
||
|
right: 0.01px;
|
||
|
overflow: hidden;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#help1 {
|
||
|
top: 60px;
|
||
|
position: absolute;
|
||
|
left: 159px;
|
||
|
border-radius: 50%;
|
||
|
font-size: 8px;
|
||
|
font-weight: bold;
|
||
|
background-color: grey;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
border-style: solid;
|
||
|
border-width: 3px;
|
||
|
border-color: black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
#err1 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
top: 20px;
|
||
|
left: 79px;
|
||
|
border-color: white;
|
||
|
border-radius: 3px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
overflow: hidden;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#erp2,
|
||
|
#err4 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
top: 50px;
|
||
|
left: 5px;
|
||
|
border-color: white;
|
||
|
border-radius: 3px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
overflow: hidden;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#err5 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
top: 20px;
|
||
|
left: 20px;
|
||
|
border-color: white;
|
||
|
border-radius: 3px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
overflow: hidden;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#err6 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
top: 70px;
|
||
|
left: 20px;
|
||
|
border-color: white;
|
||
|
border-radius: 3px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
overflow: hidden;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#final1 {
|
||
|
font-family: "Montserrat";
|
||
|
position: absolute;
|
||
|
text-transform: uppercase;
|
||
|
font-weight: bold;
|
||
|
font-size: 25px;
|
||
|
top: 5px;
|
||
|
left: 60px;
|
||
|
text-shadow: 1px -1px 1px black;
|
||
|
color: gold;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#final3 {
|
||
|
font-family: "Montserrat";
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 25px;
|
||
|
top: 45px;
|
||
|
left: 20px;
|
||
|
color: gold;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#final2 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 25px;
|
||
|
font-family: "Montserrat", serif;
|
||
|
top: 80px;
|
||
|
left: 60px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
color: pink;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#final {
|
||
|
width: 260px;
|
||
|
height: 160px;
|
||
|
position: absolute;
|
||
|
background-color: black;
|
||
|
left: 0.01px;
|
||
|
top: 0.01px;
|
||
|
bottom: 0.01px;
|
||
|
right: 0.01px;
|
||
|
overflow: hidden;
|
||
|
align-content: center;
|
||
|
}
|
||
|
|
||
|
#wdt6 {
|
||
|
position: absolute;
|
||
|
top: 10px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
left: 53px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#wdt2 {
|
||
|
position: absolute;
|
||
|
top: 40px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
left: 12px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#dep9 {
|
||
|
position: absolute;
|
||
|
top: 10px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
left: 135px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#dep13 {
|
||
|
align-content: center;
|
||
|
position: absolute;
|
||
|
top: 70px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
left: 135px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
}
|
||
|
#dep11 {
|
||
|
align-content: center;
|
||
|
position: absolute;
|
||
|
top: 40px;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
left: 135px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
}
|
||
|
#err8 {
|
||
|
align-content: center;
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
top: 20px;
|
||
|
left: 40px;
|
||
|
border-color: white;
|
||
|
border-radius: 3px;
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
overflow: hidden;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
#atmmac {
|
||
|
align-content: center;
|
||
|
margin: auto;
|
||
|
height: auto;
|
||
|
width: fit-content;
|
||
|
background-color: #fff;
|
||
|
padding: 10px;
|
||
|
}
|
||
|
.well8 {
|
||
|
align-content: center;
|
||
|
font-weight: bold;
|
||
|
color: Black;
|
||
|
position: absolute;
|
||
|
font-family: "Montserrat", serif;
|
||
|
left: 25px;
|
||
|
text-transform: uppercase;
|
||
|
top: 4px;
|
||
|
text-shadow: 0.5px -1px 1px black;
|
||
|
}
|
||
|
.box1,
|
||
|
.pass {
|
||
|
align-content: center;
|
||
|
border-style: solid;
|
||
|
border-color: black;
|
||
|
}
|
||
|
#cash1 {
|
||
|
position: absolute;
|
||
|
height: 20px;
|
||
|
width: 120px;
|
||
|
background-color: #fafad2;
|
||
|
border-color: black;
|
||
|
border-style: solid;
|
||
|
border-width: 3px;
|
||
|
left: 2.23px;
|
||
|
align-content: center;
|
||
|
}
|
||
|
#bill {
|
||
|
width: 260px;
|
||
|
height: 160px;
|
||
|
position: absolute;
|
||
|
background-color: black;
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
|
||
|
align-content: center;
|
||
|
|
||
|
text-shadow: 0.5px 0.5px black;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
#succ {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 25px;
|
||
|
left: 65px;
|
||
|
color: white;
|
||
|
align-content: center;
|
||
|
text-shadow: 0.5px 0.5px white;
|
||
|
overflow: hidden;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
#succ2 {
|
||
|
position: absolute;
|
||
|
font-weight: bold;
|
||
|
font-size: 15px;
|
||
|
align-content: center;
|
||
|
top: 70px;
|
||
|
left: 10px;
|
||
|
color: white;
|
||
|
text-shadow: 0.5px 0.5px white;
|
||
|
overflow: hidden;
|
||
|
right: 10px;
|
||
|
}
|
||
|
#indicator2 {
|
||
|
height: 38px;
|
||
|
width: 153px;
|
||
|
background-color: grey;
|
||
|
left: 92px;
|
||
|
position: absolute;
|
||
|
top: 16px;
|
||
|
border-style: solid;
|
||
|
border-width: 2.5px;
|
||
|
animation: dlr 0.5s infinite;
|
||
|
align-content: center;
|
||
|
}
|
||
|
@keyframes dlr {
|
||
|
0% {
|
||
|
background-color: red;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
background-color: grey;
|
||
|
}
|
||
|
}
|
||
|
#light {
|
||
|
align-content: center;
|
||
|
height: 3px;
|
||
|
width: 3px;
|
||
|
border-radius: 50%;
|
||
|
border-style: solid;
|
||
|
border-color: black;
|
||
|
border-width: 2px;
|
||
|
position: absolute;
|
||
|
top: 3.5px;
|
||
|
left: 22px;
|
||
|
animation: blr 0.5s infinite;
|
||
|
}
|
||
|
@keyframes blr {
|
||
|
0% {
|
||
|
background-color: #ff0000;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
background-color: green;
|
||
|
}
|
||
|
}
|