From 980033cb58e742d9521163ae02e758a7960d867f Mon Sep 17 00:00:00 2001 From: fred Date: Fri, 15 Dec 2023 18:33:00 +0100 Subject: [PATCH] ATM for printing and charging AstroID --- earth/scan/FontMonserrat.css | 40 ++ earth/scan/atm.css | 1041 ++++++++++++++++++++++++++++++++++ earth/scan/atm.html | 194 +++++++ earth/scan/atm.js | 1041 ++++++++++++++++++++++++++++++++++ 4 files changed, 2316 insertions(+) create mode 100644 earth/scan/FontMonserrat.css create mode 100644 earth/scan/atm.css create mode 100644 earth/scan/atm.html create mode 100644 earth/scan/atm.js diff --git a/earth/scan/FontMonserrat.css b/earth/scan/FontMonserrat.css new file mode 100644 index 0000000..014fae1 --- /dev/null +++ b/earth/scan/FontMonserrat.css @@ -0,0 +1,40 @@ +/* cyrillic-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw0aXpsog.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw9aXpsog.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* vietnamese */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw2aXpsog.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXpsog.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/earth/scan/atm.css b/earth/scan/atm.css new file mode 100644 index 0000000..c7792eb --- /dev/null +++ b/earth/scan/atm.css @@ -0,0 +1,1041 @@ +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; + } +} diff --git a/earth/scan/atm.html b/earth/scan/atm.html new file mode 100644 index 0000000..f5dfaa5 --- /dev/null +++ b/earth/scan/atm.html @@ -0,0 +1,194 @@ + + + + + + + + +
+
+
+
+
+
+
+ + + + + + + + +

ATM

+
+ +
+ +

Please wait 5 seconds

+
+
+
+
+

Card processing

+
+ +
+ +

Welcome to Our ATM

+

Enter demo acc no.

+ + +
+
+ +
+

Welcome UserName !!

+

Please enter your password

+ + + +
+ + + +
+

!! Invalid Account number !!

+

!! Please try again !!

+
+
+
+

!! Invalid pin !!

+

!! Please try again !!

+
+
+
+
+ + + + + + +
+ +
+ +
+ + + + + + + + + + + + + + + + + +
Account Name:UserName
Account No:12345678
Total Amount:50,000
Account type:Savings
+
+ + +
+
+

ERROR-404

This feature under construction and it will be available soon..

+
+
+ +
+

Permission required!!

Sorry Permission denied,
visit nearest branch

+
+
+
+

Total balance:50,000
Last withdarw:20,000 +
credit interest:400

+
+
+ +
+ Enter the amount: + + +
+ + +
+

!!SUCCESS!!

+

Please collect your cash within 5 seconds
take your card back

+ + +
+ + + +
+

Total amount:

+

+

widthdrawl amount:

+

+

Remaining balance:

+

+ +
+
+
+

Error:Your account contains low balance than you entered


**Please Enter the valid amount**

+
+
+
+ Enter the amount: + + +
+ +
+ +

Total amount:

+

+

Deposited amount:

+

+

previous balance:

+

+
+
+
+

Thank you

.

For visiting ATM

+

Have a nice day

+
+
+
+ + + +
+
+
+
+ +
+ +
+ + +
+
+
+ +
+ + + +
+
+
+ + + diff --git a/earth/scan/atm.js b/earth/scan/atm.js new file mode 100644 index 0000000..c7792eb --- /dev/null +++ b/earth/scan/atm.js @@ -0,0 +1,1041 @@ +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; + } +}