Skip to content

Instantly share code, notes, and snippets.

@lmosele

lmosele/Credit Card Form - Daily UI #2.markdown

Created May 27, 2016 15:20
Show Gist options
  • Save lmosele/b8d1d7f1e88d89f9dbc0603df357e64b to your computer and use it in GitHub Desktop.
Save lmosele/b8d1d7f1e88d89f9dbc0603df357e64b to your computer and use it in GitHub Desktop.
Download ZIP
Credit Card Form - Daily UI #2
Raw
index.html
<body>
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="profile">
<img src="https://dl.dropboxusercontent.com/u/99892820/female-users/women32-photo-by-Nathan-O'Nions.jpg" />
</div>
<form>
<input type="text" placeholder="••••-••••-••••-••••" id="cardNumber" />
<input type="text" placeholder="Your Name Here" id="name" />
<input type="text" placeholder="01/16" id="date" />
</form>
<button class="flipButt">Flip Card <i class="fa fa-chevron-right"></i></button>
</div>
<div class="back">
<span class="strip"></span>
<form>
<input type="text" placeholder="000" id="security" />
</form>
<button class="flipButt">Flip Card <i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
</body>
Raw
script.js
/*
jQuery Masked Input Plugin
Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com)
Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
Version: 1.4.1
*/
!function(factory) {
"function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery);
}(function($) {
var caretTimeoutId, ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua);
$.mask = {
definitions: {
"9": "[0-9]",
a: "[A-Za-z]",
"*": "[A-Za-z0-9]"
},
autoclear: !0,
dataName: "rawMaskFn",
placeholder: "_"
}, $.fn.extend({
caret: function(begin, end) {
var range;
if (0 !== this.length && !this.is(":hidden")) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin,
this.each(function() {
this.setSelectionRange ? this.setSelectionRange(begin, end) : this.createTextRange && (range = this.createTextRange(),
range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin),
range.select());
})) : (this[0].setSelectionRange ? (begin = this[0].selectionStart, end = this[0].selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(),
begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length),
{
begin: begin,
end: end
});
},
unmask: function() {
return this.trigger("unmask");
},
mask: function(mask, settings) {
var input, defs, tests, partialPosition, firstNonMaskPos, lastRequiredNonMaskPos, len, oldVal;
if (!mask && this.length > 0) {
input = $(this[0]);
var fn = input.data($.mask.dataName);
return fn ? fn() : void 0;
}
return settings = $.extend({
autoclear: $.mask.autoclear,
placeholder: $.mask.placeholder,
completed: null
}, settings), defs = $.mask.definitions, tests = [], partialPosition = len = mask.length,
firstNonMaskPos = null, $.each(mask.split(""), function(i, c) {
"?" == c ? (len--, partialPosition = i) : defs[c] ? (tests.push(new RegExp(defs[c])),
null === firstNonMaskPos && (firstNonMaskPos = tests.length - 1), partialPosition > i && (lastRequiredNonMaskPos = tests.length - 1)) : tests.push(null);
}), this.trigger("unmask").each(function() {
function tryFireCompleted() {
if (settings.completed) {
for (var i = firstNonMaskPos; lastRequiredNonMaskPos >= i; i++) if (tests[i] && buffer[i] === getPlaceholder(i)) return;
settings.completed.call(input);
}
}
function getPlaceholder(i) {
return settings.placeholder.charAt(i < settings.placeholder.length ? i : 0);
}
function seekNext(pos) {
for (;++pos < len && !tests[pos]; ) ;
return pos;
}
function seekPrev(pos) {
for (;--pos >= 0 && !tests[pos]; ) ;
return pos;
}
function shiftL(begin, end) {
var i, j;
if (!(0 > begin)) {
for (i = begin, j = seekNext(end); len > i; i++) if (tests[i]) {
if (!(len > j && tests[i].test(buffer[j]))) break;
buffer[i] = buffer[j], buffer[j] = getPlaceholder(j), j = seekNext(j);
}
writeBuffer(), input.caret(Math.max(firstNonMaskPos, begin));
}
}
function shiftR(pos) {
var i, c, j, t;
for (i = pos, c = getPlaceholder(pos); len > i; i++) if (tests[i]) {
if (j = seekNext(i), t = buffer[i], buffer[i] = c, !(len > j && tests[j].test(t))) break;
c = t;
}
}
function androidInputEvent() {
var curVal = input.val(), pos = input.caret();
if (oldVal && oldVal.length && oldVal.length > curVal.length) {
for (checkVal(!0); pos.begin > 0 && !tests[pos.begin - 1]; ) pos.begin--;
if (0 === pos.begin) for (;pos.begin < firstNonMaskPos && !tests[pos.begin]; ) pos.begin++;
input.caret(pos.begin, pos.begin);
} else {
for (checkVal(!0); pos.begin < len && !tests[pos.begin]; ) pos.begin++;
input.caret(pos.begin, pos.begin);
}
tryFireCompleted();
}
function blurEvent() {
checkVal(), input.val() != focusText && input.change();
}
function keydownEvent(e) {
if (!input.prop("readonly")) {
var pos, begin, end, k = e.which || e.keyCode;
oldVal = input.val(), 8 === k || 46 === k || iPhone && 127 === k ? (pos = input.caret(),
begin = pos.begin, end = pos.end, end - begin === 0 && (begin = 46 !== k ? seekPrev(begin) : end = seekNext(begin - 1),
end = 46 === k ? seekNext(end) : end), clearBuffer(begin, end), shiftL(begin, end - 1),
e.preventDefault()) : 13 === k ? blurEvent.call(this, e) : 27 === k && (input.val(focusText),
input.caret(0, checkVal()), e.preventDefault());
}
}
function keypressEvent(e) {
if (!input.prop("readonly")) {
var p, c, next, k = e.which || e.keyCode, pos = input.caret();
if (!(e.ctrlKey || e.altKey || e.metaKey || 32 > k) && k && 13 !== k) {
if (pos.end - pos.begin !== 0 && (clearBuffer(pos.begin, pos.end), shiftL(pos.begin, pos.end - 1)),
p = seekNext(pos.begin - 1), len > p && (c = String.fromCharCode(k), tests[p].test(c))) {
if (shiftR(p), buffer[p] = c, writeBuffer(), next = seekNext(p), android) {
var proxy = function() {
$.proxy($.fn.caret, input, next)();
};
setTimeout(proxy, 0);
} else input.caret(next);
pos.begin <= lastRequiredNonMaskPos && tryFireCompleted();
}
e.preventDefault();
}
}
}
function clearBuffer(start, end) {
var i;
for (i = start; end > i && len > i; i++) tests[i] && (buffer[i] = getPlaceholder(i));
}
function writeBuffer() {
input.val(buffer.join(""));
}
function checkVal(allow) {
var i, c, pos, test = input.val(), lastMatch = -1;
for (i = 0, pos = 0; len > i; i++) if (tests[i]) {
for (buffer[i] = getPlaceholder(i); pos++ < test.length; ) if (c = test.charAt(pos - 1),
tests[i].test(c)) {
buffer[i] = c, lastMatch = i;
break;
}
if (pos > test.length) {
clearBuffer(i + 1, len);
break;
}
} else buffer[i] === test.charAt(pos) && pos++, partialPosition > i && (lastMatch = i);
return allow ? writeBuffer() : partialPosition > lastMatch + 1 ? settings.autoclear || buffer.join("") === defaultBuffer ? (input.val() && input.val(""),
clearBuffer(0, len)) : writeBuffer() : (writeBuffer(), input.val(input.val().substring(0, lastMatch + 1))),
partialPosition ? i : firstNonMaskPos;
}
var input = $(this), buffer = $.map(mask.split(""), function(c, i) {
return "?" != c ? defs[c] ? getPlaceholder(i) : c : void 0;
}), defaultBuffer = buffer.join(""), focusText = input.val();
input.data($.mask.dataName, function() {
return $.map(buffer, function(c, i) {
return tests[i] && c != getPlaceholder(i) ? c : null;
}).join("");
}), input.one("unmask", function() {
input.off(".mask").removeData($.mask.dataName);
}).on("focus.mask", function() {
if (!input.prop("readonly")) {
clearTimeout(caretTimeoutId);
var pos;
focusText = input.val(), pos = checkVal(), caretTimeoutId = setTimeout(function() {
input.get(0) === document.activeElement && (writeBuffer(), pos == mask.replace("?", "").length ? input.caret(0, pos) : input.caret(pos));
}, 10);
}
}).on("blur.mask", blurEvent).on("keydown.mask", keydownEvent).on("keypress.mask", keypressEvent).on("input.mask paste.mask", function() {
input.prop("readonly") || setTimeout(function() {
var pos = checkVal(!0);
input.caret(pos), tryFireCompleted();
}, 0);
}), chrome && android && input.off("input.mask").on("input.mask", androidInputEvent),
checkVal();
});
}
});
});
$("button.flipButt").click(function() {
$(".flip-container").toggleClass("hover");
});
// set formatting for forms
jQuery(function($){
$("#cardNumber").mask("9999 9999 9999 9999");
$("#date").mask("99/99");
$("#security").mask("999");
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.scss
/*
FOR SOME REASON THIS WORKS BEST ON FIREFOX, CHROME IS CAUSING SOME BACKFACE VISIBILITY FLICKERING
*/
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700);
$blackish: rgba(0,0,0,.6);
$black: #797979;
$font: 'Titillium Web', sans-serif;
// RESETS
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
a {
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
border-box-sizing: none;
-webkit-appearance: button; /* for input */
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
input::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea,
input { outline: none; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}
.fa {
font-size: 1em;
margin-left: 10px;
}
// Styles
body {
font-family: $font !Important;
font-size: 1.2em;
background: #FFB75E;
background: -webkit-linear-gradient(to left, #FFB75E , #ED8F03);
background: linear-gradient(to left, #FFB75E , #ED8F03);
}
.flipper {
position: relative;
max-width: 40%;
background: #fff;
height: 350px;
margin: 0 auto;
padding: 10px;
margin-top: 100px;
border-radius: 20px;
background: #606c88;
background: -webkit-linear-gradient(60deg, #232526 , #3f4c6b);
background: linear-gradient(60deg, #232526 , #3f4c6b);
box-shadow: 0px 4px 20px $blackish;
}
.profile {
img {
margin: 10px;
max-width: 18%;
height: 100px;
border-radius: 10px;
border: 4px solid white;
}
}
form {
text-align: center;
}
input {
color: white;
height: 40px;
margin: 5px;
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
transition: all .6s ease;
background: transparent;
}
input#cardNumber {
width: 80%;
height: 60px;
font-size: 1.1em;
letter-spacing: .6em;
}
input#name {
position: absolute;
left: 10%;
bottom: 10%;
width: 40%;
height: 40px;
font-size: .9em;
letter-spacing: .3em;
}
input#date {
position: absolute;
left: 55%;
bottom: 20%;
width: 20%;
height: 40px;
font-size: .9em;
letter-spacing: .3em;
}
input#security {
position: absolute;
left: 40%;
bottom: 30%;
width: 15%;
height: 40px;
font-size: .9em;
letter-spacing: .3em;
}
input:focus {
background: white;
transform: scale(1.05,1.05);
transition: all .6s ease;
color: $black;
}
.flipButt {
position: absolute;
right: 10%;
bottom: 10%;
color: white;
border-color: white;
}
.strip {
position: absolute;
background: gray;
z-index: -6;
width: 100%;
height: 50px;
top: 10%;
left: 0;
padding: 0;
margin: 0;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.front, .back {
width: 99%;
margin: 0 auto;
height: 100%;
transform: translateZ(0) ;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 10;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment