card-info
Version:
Get bank logo, colors, brand and etc. by card number
245 lines (237 loc) • 6.46 kB
HTML
<html lang="ru">
<head>
<meta charset="utf-8">
<title>CardInfo.js</title>
<style>
@font-face {
font-family: 'Anonymous Pro';
src: url('AnonymousPro-Regular.ttf') format('truetype');
}
body {
padding: 40px;
min-width: 700px;
margin: 0;
font-size: 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}
* {
box-sizing: border-box;
outline: none;
}
#cards {
width: 19.5em;
height: 10em;
position: relative;
margin: 0;
}
#front, #back {
position: absolute;
width: 14.5em;
height: 9em;
border-radius: 0.5em;
}
#front {
top: 0;
left: 0;
background: #ddd;
z-index: 100;
}
#number {
width: 100%;
margin-bottom: 0.3em;
}
#front-fields {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1em;
}
#bank-link {
position: absolute;
top: 1em;
right: 1em;
width: 320px;
height: 60px;
display: block;
position: relative;
left: 1em;
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
}
#brand-logo {
position: absolute;
bottom: 1em;
right: 1em;
text-align: right;
height: 1.6em;
}
#back {
bottom: 0;
right: 0;
background: #bbb;
padding-top: 1em;
padding-right: 1em;
padding-left: 10.5em;
}
#code {
width: 100%;
}
.field {
padding: 0.3em 0.5em;
border: none;
font-family: 'Anonymous Pro', monospace;
font-size: 0.9em;
text-indent: 0.1em;
}
.expired {
float: left;
width: 3em;
margin-right: 0.5em;
margin-top: 0.3em;
}
.label {
font-size: 0.5em;
display: block;
margin-top: 0.5em;
}
#examples {
list-style: none;
padding: 0;
}
.example {
font-size: 0.5em;
white-space: nowrap;
display: inline-block;
margin-right: 1.5em;
margin-top: 0.3em;
}
.example-link {
text-decoration: none;
color: #07c;
border-bottom: 1px dashed #07c;
}
.example-link:hover, .example-link:active {
color: #c00;
border-color: #c00;
}
.block {
margin: 1em 0 0;
}
.block:first-child {
margin: 0;
}
.block h2 {
margin: 0 0 0.3em 0;
font-size: 0.7em;
}
ul {
margin: 0;
}
#validation {
font-size: 0.5em;
}
#validation li {
margin-bottom: 10px;
}
#validation li.valid {
color: green;
}
#validation li.invalid {
color: red;
}
#instance {
font-size: 0.5em;
line-height: 1.5em;
}
</style>
</head>
<body>
<div id="cards">
<div id="front">
<a target="_blank" href="#" id="bank-link"></a>
<img src="" alt="" id="brand-logo">
<div id="front-fields">
<input class="field" id="number" type="text" placeholder="0000 0000 0000 0000">
<label class="label">Valid thru</label>
<input class="field expired" id="mm" type="text" placeholder="MM">
<input class="field expired" id="yy" type="text" placeholder="YY">
</div>
</div>
<div id="back">
<input class="field" id="code" type="password" placeholder="">
<label id="code-label" class="label">Safety code</label>
</div>
</div>
<p id="random-wrap"><a id="random" href="#">Random card number</a></p>
<pre id="instance"></pre>
<script src="../dist/card-info.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.mask.min.js"></script>
<script>
CardInfo.setDefaultOptions({
banksLogosPath: '../dist/banks-logos/',
brandsLogosPath: '../dist/brands-logos/'
})
$(function() {
var $front = $('#front')
var $bankLink = $('#bank-link')
var $brandLogo = $('#brand-logo')
var $number = $('#number')
var $code = $('#code')
var $random = $('#random')
var $instance = $('#instance')
var sendedPrefix = window.location.search.substr(1)
$number.on('keyup change paste', function () {
var cardInfo = new CardInfo($number.val())
if (cardInfo.bankUrl) {
$bankLink
.attr('href', cardInfo.bankUrl)
.css('backgroundImage', 'url("' + cardInfo.bankLogo + '")')
.show()
} else {
$bankLink.hide()
}
$front
.css('background', cardInfo.backgroundGradient)
.css('color', cardInfo.textColor)
$code.attr('placeholder', cardInfo.codeName ? cardInfo.codeName : '')
$number.mask(cardInfo.numberMask)
if (cardInfo.brandLogo) {
$brandLogo
.attr('src', cardInfo.brandLogo)
.attr('alt', cardInfo.brandName)
.show()
} else {
$brandLogo.hide()
}
$instance.html(JSON.stringify(cardInfo, null, 2))
}).trigger('keyup')
$random.on('click', function (e) {
e.preventDefault()
var aliases = Object.keys(CardInfo.banks)
var alias = aliases[Math.floor(Math.random() * aliases.length)];
var prefixes = Object.entries(CardInfo._prefixes)
for (var i = prefixes.length; i; i--) {
var j = Math.floor(Math.random() * i)
var x = prefixes[i - 1]
prefixes[i - 1] = prefixes[j]
prefixes[j] = x
}
var prefix = prefixes.find(function (pair) {
return (pair[1] === alias)
})[0]
$number
.val($number.masked(prefix + '0000000000'))
.trigger('keyup')
})
})
</script>
</body>
</html>