diff --git a/ATM Card Input/Capture.PNG b/ATM Card Input/Capture.PNG new file mode 100644 index 0000000..5214513 Binary files /dev/null and b/ATM Card Input/Capture.PNG differ diff --git a/ATM Card Input/README.md b/ATM Card Input/README.md new file mode 100644 index 0000000..54c02bb --- /dev/null +++ b/ATM Card Input/README.md @@ -0,0 +1,10 @@ +# ATM Card + +![Project Screenshot](https://github.com/Prasadpoojary/Frontend-Animations/blob/ATMcard/ATM%20Card%20Input/Capture.PNG?raw=true) + +[Prasad Poojary](https://github.com/Prasadpoojary) + +[View Project](https://prasadpoojary.github.io/Frontend-Animations/ATM%20Card%20Input/) + + + diff --git a/ATM Card Input/animation.js b/ATM Card Input/animation.js new file mode 100644 index 0000000..f44a196 --- /dev/null +++ b/ATM Card Input/animation.js @@ -0,0 +1,153 @@ +$(document).ready(function () { + + $(".gw-cn-one").focus(); + + + $(".gw-cn-one").on('input',function(e) + { + + + if($(this).val().length==4) + { + $(".gw-cn-two").focus(); + + } + + }); + + $(".gw-cn-two").on('input',function(e) + { + + + if($(this).val().length==4) + { + $(".gw-cn-three").focus(); + + } + + }); + $(".gw-cn-three").on('input',function(e) + { + + + if($(this).val().length==4) + { + $(".gw-cn-four").focus(); + + } + + }); + + $(".gw-cn-four").on('input',function(e) + { + + + if($(this).val().length==4) + { + $(".gw-ce-date").focus(); + + } + + }); + $(".gw-ce-date").on('input',function(e) + { + if($(this).val().length==1) + { + try + { + if(Number($(this).val())>1) + { + + $(".gw-card-expire label").html("invalid thru").css("color","red"); + } + else + { + + $(".gw-card-expire label").html("valid thru").css("color","#aaa9a9"); + } + + } + catch(error) + { + alert(error); + $(".gw-card-expire label").html("invalid thru").css("color","red"); + } + + } + + if($(this).val().length==2) + { + try + { + if(Number($(this).val()>12)) + { + $(".gw-card-expire label").html("invalid thru").css("color","red"); + } + else + { + $(".gw-card-expire label").html("valid thru").css("color","#aaa9a9"); + $(this).val($(this).val()+"/"); + } + + } + + + catch(error) + { + $(".gw-card-expire label").html("invalid thru").css("color","red"); + } + } + + if($(this).val().length==5) + { + if(Number($(this).val().split("/")[1])<22) // {12,22} + { + $(this).val($(this).val().split("/")[0]+"/"); + $(".gw-card-expire label").html("invalid thru").css("color","red"); + } + else if($(".gw-cn-one").val().length!=4 || $(".gw-cn-two").val().length!=4 || $(".gw-cn-three").val().length!=4 || $(".gw-cn-four").val().length!=4) + { + $(".gw-card-expire label").html("valid thru").css("color","#aaa9a9"); + } + else + { + $(".gw-card-expire label").html("valid thru").css("color","#aaa9a9"); + + setTimeout(function() + { + $(".gw-card").css('transform','rotateY(180deg)'); + $(".gw-card-front").css('display','none'); + $(".gw-card-back").css('display','block'); + $(".gw-card-back div").css('visibility','hidden'); + }, + 100); + setTimeout(function() + { + $(".gw-card-back div").css('visibility','visible'); + $(".gw-cvv input").focus(); + + }, + 500); + } + + + + + } + + }); + + $(".gw-cvv input").on("input",function(){ + if($(this).val().length==3) + { + $("#cardPaymentForm").submit(); + $(".gw-cvv input").blur(); + } + }); + + + + + + +}); \ No newline at end of file diff --git a/ATM Card Input/index.html b/ATM Card Input/index.html new file mode 100644 index 0000000..0627bd3 --- /dev/null +++ b/ATM Card Input/index.html @@ -0,0 +1,74 @@ + + + + + + + + Debit Card + + + + + + + + +
+ +
+ +
+
+
+ +
+ + + + +
+
+ + +
+
+
+
+

Please make sure that you are entering valid details, otherwise payment will not get processed. Please cross validate once again.

+
+
+ + + + +
+
+
+ cvv +
+
+ +
+
+
+ + +
+
+
+
+
+ + +
+ + + + diff --git a/ATM Card Input/style.css b/ATM Card Input/style.css new file mode 100644 index 0000000..71e2120 --- /dev/null +++ b/ATM Card Input/style.css @@ -0,0 +1,183 @@ +section +{ + display: flex; + justify-content: center; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +.gw-main +{ + text-align: center; + margin-top: 100px; + transition: .5s ease-in-out; +} + +.gw-main h2 +{ + color:#6147d8; + font-size: 16px; +} + +.gw-card-front, .gw-card-back +{ + position:relative; + width:350px; + margin-top: 20px; + background:linear-gradient(to left bottom, #c70909,#12007a); + border-radius: 9px; + padding:80px 30px; + padding-bottom: 40px; + +} + +.gw-card-back +{ + padding-top: 50px; + padding-bottom: 60px; +} + +.gw-card-logo +{ + position:absolute; + top:10px; + width:85%; + display: flex; + justify-content: space-around; + + font-size: 50px; + color:#fff; +} + +.gw-card-info +{ + + position:absolute; + top:20px; + left:50%; + width:100%; + transform: translateX(-50%); + +} + +.gw-card-info p +{ + font-size: 12px; + padding:5px 20px; + color:#b6c2e9; + + + +} + +.gw-card-number input +{ + + width:80px; + font-size: 24px; + + text-align: center; + letter-spacing: 2px; + background:none; + border:none; + outline:none; + color:white; + font-family: 'Courier New', Courier, monospace; +} + +.gw-main input::-webkit-input-placeholder +{ + color:#ada0f84d; +} + +.gw-card-number input::-webkit-inner-spin-button +{ + display:none; +} + +.gw-card-expire +{ + margin-top: 20px; + color:#fff; + text-align: right; +} + +.gw-card-expire input +{ + width:70px; + background:transparent; + outline:none; + border:none; + color:white; +} + +.gw-card-expire label +{ + font-size: 13px; + text-transform: uppercase; + color:#aaa9a9; +} + + +.gw-card-back .gw-card-number input{ + visibility: hidden; +} + +.gw-card-back .gw-card-expire { + visibility: hidden; +} + +.gw-cvv-cont +{ + display: flex; + +} + +.gw-cvv-before +{ + position:absolute; + left:10px; + width:80%; + background:#ffffff; + height: 33px; + text-align: right; + padding-top: 9px; + padding-right: 10px; + color:#7c7c7c; +} + +.gw-cvv input +{ + width:10%; + background:#eae8fa; + position:absolute; + right:10px; + height:40px; + width:50px; + border: none; + outline:none; + text-align: center; + + +} + +.gw-cvv input::-webkit-inner-spin-button +{ + display: none; +} + +.gw-cvv input::-webkit-input-placeholder +{ + + color:#ac96fd71; +} + +.gw-card-back +{ + + transform:rotateY(180deg); + display: none; +} + +.gw-card +{ + transition: .8s ease-in-out; +} \ No newline at end of file