-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
68 lines (68 loc) · 10.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Banks DB</title>
<meta name="keywords" content="bankcard, bin, iin, bank, card, color, database, db">
<meta name="description"
content="Banks DB is a tool for getting bank name and brand color by IIN">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:url" content="https://ramoona.github.io/banks-db-demo/" />
<meta property="og:image" content="https://ramoona.github.io/banks-db-demo/demo-example.jpg" />
<meta property="og:description" content="Make your billing form UX better with Banks DB" />
<link rel="stylesheet" href="dist/styles.css">
<link rel="icon" type="image/png" href="favicon.png?v=4">
<link rel="apple-touch-icon" href="apple-touch-icon.png?v=2">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="top">
<h1 class="heading">
<a class="repo-link" href="https://github.com/ramoona/banks-db" target="_blank" rel="noreferrer">
<svg width="228px" height="58px" viewBox="0 0 228 58" xmlns="http://www.w3.org/2000/svg" class="logo">
<rect id="Rectangle" fill="#363636" x="0" y="0" width="228" height="58" rx="5"></rect>
<path d="M201.671875,10.875 L202.127829,10.8782632 C206.043767,10.9348262 209.032407,11.7267072 211.09375,13.2539062 C213.234375,14.8398438 214.304688,17.1640625 214.304688,20.2265625 C214.304688,21.8984375 213.875,23.3710938 213.015625,24.6445312 C212.15625,25.9179688 210.960938,26.8515625 209.429688,27.4453125 C211.179688,27.8828125 212.558594,28.765625 213.566406,30.09375 C214.574219,31.421875 215.078125,33.046875 215.078125,34.96875 C215.078125,38.25 214.03125,40.734375 211.9375,42.421875 C209.84375,44.109375 206.859375,44.96875 202.984375,45 L202.984375,45 L189.71875,45 L189.71875,10.875 L201.671875,10.875 Z M203.195312,30.140625 L196.75,30.140625 L196.75,39.3515625 L202.773438,39.3515625 C204.429688,39.3515625 205.722656,38.9570312 206.652344,38.1679688 C207.582031,37.3789062 208.046875,36.2890625 208.046875,34.8984375 C208.046875,31.7734375 206.429688,30.1875 203.195312,30.140625 L203.195312,30.140625 Z M201.671875,16.5703125 L196.75,16.5703125 L196.75,25.171875 L201.953125,25.171875 C205.5,25.109375 207.273438,23.6953125 207.273438,20.9296875 C207.273438,19.3828125 206.824219,18.2695312 205.925781,17.5898438 C205.027344,16.9101562 203.609375,16.5703125 201.671875,16.5703125 L201.671875,16.5703125 Z" id="Combined-Shape" fill="#8FD1FF" fill-rule="nonzero"></path>
<path d="M169.023438,10.875 L169.520508,10.8812572 C172.320638,10.9521726 174.838542,11.6258681 177.074219,12.9023438 C179.441406,14.2539062 181.289062,16.1757812 182.617188,18.6679688 C183.945312,21.1601562 184.609375,23.9921875 184.609375,27.1640625 L184.609375,27.1640625 L184.609375,28.734375 L184.603335,29.2597656 C184.534879,32.218533 183.884549,34.8637153 182.652344,37.1953125 C181.347656,39.6640625 179.507812,41.578125 177.132812,42.9375 C174.757812,44.296875 172.078125,44.984375 169.09375,45 L169.09375,45 L158.523438,45 L158.523438,10.875 L169.023438,10.875 Z M169.023438,16.5703125 L165.554688,16.5703125 L165.554688,39.3515625 L168.953125,39.3515625 C171.703125,39.3515625 173.804688,38.453125 175.257812,36.65625 C176.710938,34.859375 177.453125,32.2890625 177.484375,28.9453125 L177.484375,28.9453125 L177.484375,27.140625 L177.480632,26.7114054 C177.423231,23.4542575 176.705729,20.9684245 175.328125,19.2539062 C173.890625,17.4648438 171.789062,16.5703125 169.023438,16.5703125 L169.023438,16.5703125 Z" id="Combined-Shape" fill="#8FD1FF" fill-rule="nonzero"></path>
<path class="S"
d="M131.101562,45.46875 C134.242188,45.46875 136.804688,44.7539062 138.789062,43.3242188 C140.773438,41.8945312 141.765625,40.0234375 141.765625,37.7109375 C141.765625,34.4765625 139.976562,32.203125 136.398438,30.890625 C135.242188,30.46875 133.820312,30.0898438 132.132812,29.7539062 C130.445312,29.4179688 129.246094,29.0195312 128.535156,28.5585938 C127.824219,28.0976562 127.46875,27.4921875 127.46875,26.7421875 C127.46875,25.9453125 127.78125,25.2890625 128.40625,24.7734375 C129.03125,24.2578125 129.914062,24 131.054688,24 C132.382812,24 133.359375,24.3164062 133.984375,24.9492188 C134.609375,25.5820312 134.921875,26.3828125 134.921875,27.3515625 L134.921875,27.3515625 L141.695312,27.3515625 C141.695312,24.9296875 140.730469,22.9609375 138.800781,21.4453125 C136.871094,19.9296875 134.296875,19.171875 131.078125,19.171875 C128.0625,19.171875 125.621094,19.9257812 123.753906,21.4335938 C121.886719,22.9414062 120.953125,24.8203125 120.953125,27.0703125 C120.953125,30.9296875 123.96875,33.4921875 130,34.7578125 C131.8125,35.1328125 133.128906,35.5585938 133.949219,36.0351562 C134.769531,36.5117188 135.179688,37.1640625 135.179688,37.9921875 C135.179688,38.7890625 134.847656,39.4335938 134.183594,39.9257812 C133.519531,40.4179688 132.539062,40.6640625 131.242188,40.6640625 C129.851562,40.6640625 128.742188,40.34375 127.914062,39.703125 C127.085938,39.0625 126.640625,38.140625 126.578125,36.9375 L126.578125,36.9375 L120.15625,36.9375 C120.15625,38.46875 120.625,39.8945312 121.5625,41.2148438 C122.5,42.5351562 123.792969,43.5742188 125.441406,44.3320312 C127.089844,45.0898438 128.976562,45.46875 131.101562,45.46875 Z" id="Path" fill="#FF9494" fill-rule="nonzero"></path>
<polygon class="K"
points="102.578125 45 102.578125 37.265625 105.015625 34.828125 111.53125 45 119.3125 45 109.351562 30.2109375 118.515625 19.640625 110.382812 19.640625 103.890625 27.2578125 102.578125 28.9453125 102.578125 9 95.8046875 9 95.8046875 45"></polygon>
<path class="N"
d="M75.5546875,45 L75.5546875,27.1171875 C76.5078125,25.4921875 77.9375,24.6796875 79.84375,24.6796875 C81.296875,24.6796875 82.3359375,25.0039062 82.9609375,25.6523438 C83.5859375,26.3007812 83.8984375,27.34375 83.8984375,28.78125 L83.8984375,28.78125 L83.8984375,45 L90.671875,45 L90.671875,28.6171875 C90.640625,25.4765625 89.96875,23.1171875 88.65625,21.5390625 C87.34375,19.9609375 85.34375,19.171875 82.65625,19.171875 C79.609375,19.171875 77.1796875,20.3046875 75.3671875,22.5703125 L75.3671875,22.5703125 L75.15625,19.640625 L68.78125,19.640625 L68.78125,45 L75.5546875,45 Z" id="Path" fill="#FFF17F" fill-rule="nonzero"></path>
<path class="A"
d="M53.5234375,19.171875 C56.6484375,19.171875 59.1289062,19.9570312 60.9648438,21.5273438 C62.8007812,23.0976562 63.71875,25.3046875 63.71875,28.1484375 L63.71875,28.1484375 L63.71875,39.140625 L63.7248324,39.559175 C63.7750054,41.7590019 64.1089154,43.4397978 64.7265625,44.6015625 L64.7265625,44.6015625 L64.7265625,45 L57.8828125,45 L57.7696533,44.7645264 C57.5150146,44.1988525 57.3261719,43.5195312 57.203125,42.7265625 C55.5625,44.5546875 53.4296875,45.46875 50.8046875,45.46875 C48.3203125,45.46875 46.2617188,44.75 44.6289062,43.3125 C42.9960938,41.875 42.1796875,40.0625 42.1796875,37.875 C42.1796875,35.1875 43.1757812,33.125 45.1679688,31.6875 C47.1601562,30.25 50.0390625,29.5234375 53.8046875,29.5078125 L53.8046875,29.5078125 L56.921875,29.5078125 L56.921875,28.0546875 L56.9165357,27.7884153 C56.8738212,26.7399686 56.5748197,25.891226 56.0195312,25.2421875 C55.4179688,24.5390625 54.46875,24.1875 53.171875,24.1875 C52.03125,24.1875 51.1367188,24.4609375 50.4882812,25.0078125 C49.8398438,25.5546875 49.515625,26.3046875 49.515625,27.2578125 L49.515625,27.2578125 L42.7421875,27.2578125 L42.7491231,26.9447545 C42.8092315,25.5954241 43.2600446,24.3404018 44.1015625,23.1796875 C45.0078125,21.9296875 46.2890625,20.9492188 47.9453125,20.2382812 C49.6015625,19.5273438 51.4609375,19.171875 53.5234375,19.171875 Z M56.921875,33.46875 L54.390625,33.46875 L54.0867553,33.4719783 C50.8920813,33.5408488 49.1886837,34.7116477 48.9765625,36.984375 L48.9765625,36.984375 L48.953125,37.3828125 L48.9593099,37.5906576 C49.0046658,38.3414171 49.2994792,38.9674479 49.84375,39.46875 C50.4375,40.015625 51.25,40.2890625 52.28125,40.2890625 C53.28125,40.2890625 54.203125,40.0664062 55.046875,39.6210938 C55.890625,39.1757812 56.515625,38.578125 56.921875,37.828125 L56.921875,37.828125 L56.921875,33.46875 Z" id="Combined-Shape" fill="#FFB0F6" fill-rule="nonzero"></path>
<path class="B"
d="M26.265625,45 C30.140625,44.96875 33.125,44.109375 35.21875,42.421875 C37.3125,40.734375 38.359375,38.25 38.359375,34.96875 C38.359375,33.046875 37.8554688,31.421875 36.8476562,30.09375 C35.8398438,28.765625 34.4609375,27.8828125 32.7109375,27.4453125 C34.2421875,26.8515625 35.4375,25.9179688 36.296875,24.6445312 C37.15625,23.3710938 37.5859375,21.8984375 37.5859375,20.2265625 C37.5859375,17.1640625 36.515625,14.8398438 34.375,13.2539062 C32.234375,11.6679688 29.09375,10.875 24.953125,10.875 L24.953125,10.875 L13,10.875 L13,45 L26.265625,45 Z M26.0546875,39.3515625 L20.03125,39.3515625 L20.03125,30.140625 L26.4765625,30.140625 C29.7109375,30.1875 31.328125,31.7734375 31.328125,34.8984375 C31.328125,36.2890625 30.8632812,37.3789062 29.9335938,38.1679688 C29.0039062,38.9570312 27.7109375,39.3515625 26.0546875,39.3515625 L26.0546875,39.3515625 Z M25.234375,25.171875 L20.03125,25.171875 L20.03125,16.5703125 L24.953125,16.5703125 C26.890625,16.5703125 28.3085938,16.9101562 29.2070312,17.5898438 C30.1054688,18.2695312 30.5546875,19.3828125 30.5546875,20.9296875 C30.5546875,23.6953125 28.78125,25.109375 25.234375,25.171875 L25.234375,25.171875 Z" id="Combined-Shape" fill="#92F4FF" fill-rule="nonzero"></path>
</svg>
</a>
</h1>
<p class="description">is a tool for getting bank name and brand color by <a
href="https://en.wikipedia.org/wiki/Payment_card_number#Issuer_identification_number_(IIN)" class="link"
target="_blank" rel="noreferrer">issuer
identification number</a></p>
</div>
<p class="suggest">
Try
<span id="suggested-prefix" class="suggested-prefix"></span>
for
<span class="suggested-bank" id="suggested-bank"></span>
</p>
<div class="card" id="card" data-type="" data-bank="">
<span id="bank-name" class="bank-name"></span>
<input class="number" id="number" type="text" maxlength="22" placeholder="0000 0000 0000 0000" autofocus>
<div class="type"></div>
</div>
<p class="notice">Notice that only first 6 digits are required for bank detection.</p>
<div class="hint">
It looks like your bank or it's prefix isn't in Banks DB yet.
<br>
Feel free to
<a class="link" href="https://github.com/ramoona/banks-db/blob/master/CONTRIBUTING.md" target="_blank" rel="noreferrer">contribute</a>
or create an
<a class="link" href="https://github.com/ramoona/banks-db/issues" target="_blank" rel="noreferrer">issue</a> if you'd like to help the project.
</div>
</div>
<script src="dist/index.min.js"></script>
</body>
</html>