Skip to content

Instantly share code, notes, and snippets.

@afitiskin

afitiskin/step2_card-info_base.html

Last active December 29, 2015 15:59
Show Gist options
  • Save afitiskin/7693978 to your computer and use it in GitHub Desktop.
Save afitiskin/7693978 to your computer and use it in GitHub Desktop.
Download ZIP
Webzilla terminal styles
Raw
step2_card-info_base.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<title>ECommPay</title>
<link rel="stylesheet" type="text/css" media="all" href="css/global.css">
<link rel="stylesheet" type="text/css" media="all" href="css/global-override.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.countdown.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="css/global_ie.css" />
<script type="text/javascript" src="/js/fix_ie.js"></script>
<![endif]-->
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" media="all" href="css/global_ie6.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="css/webzilla.css" />
<script type="text/javascript" src="js/webzilla.js"></script>
</head>
<body>
<div id="layout">
<div id="page_body">
<script type="text/javascript" src="js/example.js"></script>
<script type="text/javascript" src="js/date_controller.js"></script>
<script type="text/javascript" src="js/date.format.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript">
var PaymentForm = {
date: new Date(),
UTCDate: function() { return this.date.format('isoUtcDateTime'); },
timezoneOffset: function() { return -(this.date.getTimezoneOffset()/60); },
screenDepth: function() { return screen.colorDepth ? screen.colorDepth : screen.pixelDepth; },
screenWidth: function() { return screen.width; },
screenHeight: function() { return screen.height; },
fill: function (form) {
form.elements['user_screen_resolution[width]'].value= this.screenWidth();
form.elements['user_screen_resolution[height]'].value= this.screenHeight();
form.elements['user_screen_resolution[depth]'].value= this.screenDepth();
form.user_datetime.value = this.UTCDate();
form.user_timezone_offset.value = this.timezoneOffset();
document.getElementById("makePayment").setAttribute("disabled","disabled");
return true;
}
};
</script>
<div id="content">
<div id="main_content">
<div class="card_payment_details">
<h2>card pre-auth by Webzilla</h2>
<div class="order_details">
<ul>
<li>Amount: 1 EUR (Maestro, MasterCard, Visa — 1.36 USD)</li>
<li>Order #1382608447</li>
</ul>
</div>
</div>
<form enctype="application/x-www-form-urlencoded" method="post" onsubmit="return (PaymentForm) ? PaymentForm.fill(this) : true;">
<input type="hidden" name="token" value="afa39eedc7278cdf33dfacdc947cdf55c3985421" autocomplete="off">
<div class="card_details">
<h3>Card data</h3>
<section class="feedback-form">
<form class="validate-form" action="inc/connection.php" method="POST">
<fieldset>
<div class="l">
<ul class="form no-labels">
<li class="for-card_number">
<label class="label" for="card_number">Card number <span class="blue">*</span></label>
<input type="text" placeholder="Card number" name="card" id="card_number" class="card_number js-only-numbers" data-allow-space="true" autocomplete="off" />
<div class="error_message">Card number is required. Please enter the number as it stated on your card.</div>
</li>
<li class="for-card_holder">
<label class="label" for="card_number">Holder name <span class="blue">*</span></label>
<input type="text" placeholder="Cardholder's name" name="holder" id="cardholder" class="cardholder" value="" autocomplete="off" />
<div class="error_message">Cardholder's name is required. Please enter the cardholder name as it stated on your card.</div>
</li>
</ul>
</div>
<div class="r">
<ul class="form">
<li>
<label class="label">Valid thru:</label>
<input placeholder="MM" type="text" name="exp_month" id="month" class="date js-only-numbers js-limits" data-min="1" data-max="12" maxlength="2" autocomplete="off" />
<span class="sep">/</span>
<input placeholder="YY" type="text" name="exp_year" id="year" class="date js-only-numbers js-limits" data-min="13" data-max="27" maxlength="2" autocomplete="off" />
<div class="error_message">Expiry date is required. Please enter the Expiry date as it stated on your card.</div>
</li>
<li class="for-cvv">
<label class="label" for="card_number">CVV2/CVC2:</label>
<input placeholder="***" type="text" name="cvv" id="cvv" class="cvv js-only-numbers" maxlength="3" autocomplete="off" />
<div class="error_message">Security code is required. Please enter the CVV2/CVC2 value as it stated on your card.</div>
</li>
</ul>
</div>
</fieldset>
<div class="submit-block">
<div class="support">
Our customer support is available 24 hours per day, 7 days a week: <a href="#">someemail@webzilla.com</a>
</div>
<div class="submit-button">
<button type="submit" id="makePayment">Make payment</button>
</div>
</div>
</form>
</section>
</div>
<input type="hidden" name="user_screen_resolution[width]" />
<input type="hidden" name="user_screen_resolution[height]" />
<input type="hidden" name="user_screen_resolution[depth]" />
<input type="hidden" name="user_timezone_offset" />
<input type="hidden" name="user_datetime" />
<input type="hidden" name="sid" value="33d66469fbeca8f665dda2120b6c5b1b23e55eac" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
step2_card-info_errors.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<title>ECommPay</title>
<link rel="stylesheet" type="text/css" media="all" href="css/global.css">
<link rel="stylesheet" type="text/css" media="all" href="css/global-override.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.countdown.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="css/global_ie.css" />
<script type="text/javascript" src="/js/fix_ie.js"></script>
<![endif]-->
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" media="all" href="css/global_ie6.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="css/webzilla.css" />
<script type="text/javascript" src="js/webzilla.js"></script>
</head>
<body>
<div id="layout">
<div id="page_body">
<script type="text/javascript" src="js/example.js"></script>
<script type="text/javascript" src="js/date_controller.js"></script>
<script type="text/javascript" src="js/date.format.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript">
var PaymentForm = {
date: new Date(),
UTCDate: function() { return this.date.format('isoUtcDateTime'); },
timezoneOffset: function() { return -(this.date.getTimezoneOffset()/60); },
screenDepth: function() { return screen.colorDepth ? screen.colorDepth : screen.pixelDepth; },
screenWidth: function() { return screen.width; },
screenHeight: function() { return screen.height; },
fill: function (form) {
form.elements['user_screen_resolution[width]'].value= this.screenWidth();
form.elements['user_screen_resolution[height]'].value= this.screenHeight();
form.elements['user_screen_resolution[depth]'].value= this.screenDepth();
form.user_datetime.value = this.UTCDate();
form.user_timezone_offset.value = this.timezoneOffset();
document.getElementById("makePayment").setAttribute("disabled","disabled");
return true;
}
};
</script>
<div id="content">
<div id="main_content">
<div class="card_payment_details">
<h2>card pre-auth by Webzilla</h2>
<div class="order_details">
<ul>
<li>Amount: 1 EUR (Maestro, MasterCard, Visa — 1.36 USD)</li>
<li>Order #1382608447</li>
</ul>
</div>
</div>
<form enctype="application/x-www-form-urlencoded" method="post" onsubmit="return (PaymentForm) ? PaymentForm.fill(this) : true;">
<input type="hidden" name="token" value="afa39eedc7278cdf33dfacdc947cdf55c3985421" autocomplete="off">
<div class="card_details">
<h3>Card data</h3>
<section class="feedback-form">
<form class="validate-form" action="inc/connection.php" method="POST">
<fieldset>
<div class="l">
<ul class="form no-labels">
<li class="field_error for-card_number">
<label class="label" for="card_number">Card number <span class="blue">*</span></label>
<input type="text" placeholder="Card number" name="card" id="card_number" class="card_number js-only-numbers" data-allow-space="true" autocomplete="off" />
<div class="error_message">Card number is required. Please enter the number as it stated on your card.</div>
</li>
<li class="field_error for-card_holder">
<label class="label" for="card_number">Holder name <span class="blue">*</span></label>
<input type="text" placeholder="Cardholder's name" name="holder" id="cardholder" class="cardholder" value="" autocomplete="off" />
<div class="error_message">Cardholder name is required. Please enter the cardholder name as it stated on your card.</div>
</li>
</ul>
</div>
<div class="r">
<ul class="form">
<li class="field_error for-date">
<label class="label">Valid thru:</label>
<input placeholder="MM" type="text" name="exp_month" id="month" class="date js-only-numbers js-limits" data-min="1" data-max="12" maxlength="2" autocomplete="off" />
<span class="sep">/</span>
<input placeholder="YY" type="text" name="exp_year" id="year" class="date js-only-numbers js-limits" data-min="13" data-max="27" maxlength="2" autocomplete="off" />
<div class="error_message">Expiry date is required. Please enter the Expiry date as it stated on your card.</div>
</li>
<li class="field_error for-cvv">
<label class="label" for="card_number">CVV2/CVC2:</label>
<input placeholder="***" type="text" name="cvv" id="cvv" class="cvv" maxlength="3" autocomplete="off" />
<div class="error_message">Security code is required. Please enter the CVV2/CVC2 value as it stated on your card.</div>
</li>
</ul>
</div>
</fieldset>
<div class="submit-block">
<div class="support">
Our customer support is available 24 hours per day, 7 days a week: <a href="#">someemail@webzilla.com</a>
</div>
<div class="submit-button">
<button type="submit" id="makePayment">Make payment</button>
<div class="global-error-message">
The data you have submitted appears to be incorrect. Please check all required fields.
<a class="global-error-message-closer"></a>
</div>
</div>
</div>
</form>
</section>
</div>
<input type="hidden" name="user_screen_resolution[width]" />
<input type="hidden" name="user_screen_resolution[height]" />
<input type="hidden" name="user_screen_resolution[depth]" />
<input type="hidden" name="user_timezone_offset" />
<input type="hidden" name="user_datetime" />
<input type="hidden" name="sid" value="33d66469fbeca8f665dda2120b6c5b1b23e55eac" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
webzilla.css
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans-normal.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(../fonts/opensans-semibold.woff) format('woff');
}
/* Restyle layout */
body {
font: normal 15px/20px "Open Sans", Verdana, Geneva, sans-serif;
color: #5e5e5e;
}
#layout {
min-width: 1000px;
width: 1000px;
margin: 0 auto;
}
#content {
padding: 0;
margin-bottom: 0;
}
/* Restyle typographic */
#content .card_payment_details h2,
#content .payment_types h2,
#content .payment_details h2 {
margin: 0 0 15px 0;
font-size: 25px;
line-height: 30px;
font-weight: 600;
color: #454545;
}
#content .card_payment_details h2:first-letter {
text-transform: capitalize;
}
#content .card_payment_details h2:after {
content: ':';
}
/* order details */
#content .order_details {
font-size:13px;
line-height:20px;
}
#content .order_details:after {
content: ' ';
clear:both;
display: block;
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
}
#content .order_details li {
padding: 0 0 0 15px;
background: url(../img/rarr-grey2.png) no-repeat 5px 50%;
margin:6px 0 0 0;
vertical-align:bottom;
zoom:1;
position:relative;
}
#content .order_details li:first-child {
margin:0;
}
#content .order_details ul {
display: block;
width: 100%;
list-style:none;
margin:0;
padding:0;
}
/* payment type select */
.payment_types {
padding: 0;
margin: 0;
}
.payment_types ul {
margin: 0;
padding: 20px 0 0;
}
.payment_types ul li {
position: relative;
}
.payment_types ul li a {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .7);
color: #fff;
border-radius: 10px;
text-decoration: none;
font-size: 25px;
line-height: 238px;
opacity: 0;
transition: opacity .5s ease;
}
.payment_types ul li:hover a {
opacity: 1;
color: #fff!important;
}
.payment_types ul.two li {
margin: 0 50px 0 0;
padding: 0;
width: 400px;
height: 238px;
}
.payment_types ul.two li:last-child {
margin: 0;
}
.payment_types ul li.card {
background: url(../img/payment_type_card.png) no-repeat 50%;
background-size: cover;
}
.payment_types ul.two li {
width: 40%;
}
.payment_types ul.three li {
width: 30%;
}
/* card details */
#content .card_details {
margin: 30px 0 0;
}
#content .card_details h3 {
margin: 0 0 15px 0;
padding: 0;
font-size: 20px;
line-height: 24px;
font-weight: 600;
color: #454545;
}
/* submit block */
#content .submit-block {
margin: 40px 0 0;
padding: 40px 0;
border-top: 1px solid #d6d6d6;
}
#content .submit-block .support {
position: relative;
padding: 8px 0 0;
margin: 0;
float: left;
font-size: 12px;
line-height: 20px;
color: #909090;
}
#content .submit-block .support a {
color: #e79202;
text-decoration: none;
}
#content .submit-block .support a:hover {
text-decoration: underline;
}
#content .submit-block .submit-button {
float: right;
position: relative;
}
#content .submit-block .submit-button button {
display: inline-block;
min-width: 88px;
height: 33px;
position: relative;
padding: 0 13px 0 0;
margin: 0 0 0 13px;
white-space: nowrap;
text-align: center;
text-decoration: none;
color: #FFF;
font-weight: 600;
font-size: 12px;
line-height: 33px;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0) url(../img/btn.png) no-repeat 100% -118px;
border: none;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
#content .submit-block .submit-button button:hover {
background-position: 100% -158px;
}
#content .submit-block .submit-button button:active {
background-position: 100% -199px;
}
#content .submit-block .submit-button button:disabled {
opacity: .3;
cursor: default!important;
background-position: 100% -118px!important;
}
#content .submit-block .submit-button button:after {
content: "";
display: block;
width: 13px;
height: 100%;
position: absolute;
left: -13px;
top: 0;
background: rgba(0, 0, 0, 0) url(../img/btn.png) no-repeat;
}
#content .submit-block .submit-button button:hover:after {
background-position: 0 -40px;
}
#content .submit-block .submit-button button:active:after {
background-position: 0 -81px;
}
#content .submit-block .submit-button button:disabled:after {
background-position: 0 0!important;
}
/* form markup */
#content .feedback-form {
zoom: 1;
}
#content .feedback-form:after {
content: '';
display: block;
width: 0;
height: 0;
clear: both;
overflow: hidden;
font-size: 0;
}
#content .feedback-form .l {
float: left;
width: 319px;
padding: 0 50px 0 0;
border-right: 1px solid #d6d6d6;
}
#content .feedback-form .r {
float: left;
width: 580px;
padding: 0 0 0 50px;
margin: 0 0 0 -1px;
border-left: 1px solid #d6d6d6;
}
/* form elements */
#content form, #content fieldset {
margin:0;
padding:0;
border:0;
}
#content .feedback-form .form {
list-style:none;
margin:0;
padding:0;
}
#content .feedback-form .form li {
position: relative;
margin: 10px 0 0;
padding: 0 11px;
vertical-align: bottom;
background: none;
}
#content .feedback-form .form li:first-child {
margin: 0;
}
#content .feedback-form .form .label {
display: inline-block;
width: 100px;
position: relative;
left: -11px;
text-transform: none;
}
#content .feedback-form .form.no-labels .label {
display: none;
}
#content .feedback-form .form .sep {
display: inline-block;
position: relative;
left: -11px;
margin: 0 5px;
}
#content .feedback-form input {
display: inline-block;
width: 100%;
position: relative;
left: -11px;
margin: 0;
padding: 8px 10px;
background: #fff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05);
font: normal 13px "Open Sans", Verdana, Geneva, sans-serif;
color: #5e5e5e;
outline: none;
border: 1px solid #d5d5d5;
}
#content .feedback-form input::-webkit-input-placeholder {
color: #aeaeae;
}
#content .feedback-form input:-moz-placeholder {
color: #aeaeae;
}
#content .feedback-form input::-moz-placeholder {
color: #aeaeae;
}
#content .feedback-form input:-ms-input-placeholder {
color: #aeaeae;
}
#content .feedback-form input:focus {
border-color:#919191;
}
#content .feedback-form input.cvv, #content .feedback-form input.date {
width: 30px;
text-align: center;
}
/* errors */
#content .field_error input {
border-color: #e79202!important;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), 0 0 0 1px #e79202!important;
-moz-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), 0 0 0 1px #e79202!important;
-webkit-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), 0 0 0 1px #e79202!important;
}
#content .field_error .label, #content .field_error .sep {
color: #e79202!important;
}
#content .error_message {
display: none;
}
#content .field_error .error_message {
display: block;
width: 205px;
position: absolute;
top: 0px;
left: 100%;
margin: 0 0 0 15px;
color: #fff;
font-size: 9px;
line-height: 13px;
background: #e79202;
padding: 5px 10px;
border-radius: 3px;
z-index: 10;
}
#content .field_error .error_message:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 50%;
left: -8px;
margin: -8px 0 0;
border-right: 8px solid #e79202;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
#content .field_error.for-cvv .error_message {
left: 155px;
}
#content .field_error.for-date .error_message {
left: 230px;
}
#content .field_error.for-card_number .error_message {
top: auto;
bottom: 100%;
margin: 0 0 15px -70px;
width: 250px;
}
#content .field_error.for-card_number .error_message:before {
border-top: 8px solid #e79202;
border-right: 8px solid transparent;
border-bottom: none;
border-left: 8px solid transparent;
top: 100%;
bottom: auto;
left: 20px;
right: auto;
margin: 0;
}
#content .field_error.for-card_holder .error_message {
top: 100%;
bottom: auto;
margin: 15px 0 0 -70px;
width: 250px;
}
#content .field_error.for-card_holder .error_message:before {
border-bottom: 8px solid #e79202;
border-right: 8px solid transparent;
border-top: none;
border-left: 8px solid transparent;
top: auto;
bottom: 100%;
left: 20px;
right: auto;
margin: 0;
}
#content .global-error-message {
display: inline-block;
position: absolute;
right: 0;
top: 100%;
margin: 12px 0 0 ;
padding: 7px 20px;
color: #FFF;
background: #E79202;
border-radius: 3px;
z-index: 10;
white-space: nowrap;
font-size: 14px;
line-height: 25px;
}
#content .global-error-message:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 40px;
border-bottom: 8px solid #E79202;
border-right: 8px solid rgba(0, 0, 0, 0);
border-left: 8px solid rgba(0, 0, 0, 0);
}
#content .global-error-message-closer {
display: none;
width: 10px;
height: 10px;
position: absolute;
right: -12px;
top: -12px;
cursor: pointer;
background: url(../img/close.png);
}
/* messages */
#content.success, #content.fail {
border: none;
}
.system_message {
margin: 30px 0 20px;
padding: 20px 60px;
color: #454545;
border-radius: 7px;
border: 5px solid transparent;
}
.system_message.success {
background: #fff url(../img/check.png) no-repeat 20px 25px;
border-color: #58ac00;
}
.system_message.fail {
background: #fff url(../img/fail.png) no-repeat 20px 29px;
border-color: #e79202;
}
.system_message h1 {
color: #454545;
}
Raw
webzilla.js
(function () {
$(document).ready(function () {
$('.js-only-numbers').keydown(function (event) {
var code = event.which;
console.log(code);
if ((code >= 96 && code <= 105) || (code >= 48 && code <= 57) || (code >= 37 && code <= 40) || [8, 9, 13, 27].indexOf(code) >= 0) {
return true;
}
if ($(this).data('allow-space') && code == 32) {
return true
}
return false;
});
$('.js-limits').keyup(function () {
var code = event.which,
$el = $(this),
min = $el.data('min'),
max = $el.data('max'),
value = $el.val() || null;
if (value === null) {
return false;
}
if (code == 37 || code == 40) {
value--;
}
if (code == 38 || code == 39) {
value++
}
if (value < min) {
console.log(min.toString().length);
if (value.toString().length > 1 || min.toString().length == 1) {
$el.val(min);
} else {
$el.val(value);
}
} else if (value > max) {
$el.val(max);
} else {
$el.val(value);
}
});
});
}())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment