mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
Secure payment design
This commit is contained in:
Hillel Coren
parent
c357f4a278
commit
c6f0d9e71e
@ -19,24 +19,24 @@
|
||||
<script src="{{ asset('js/valign.js') }}" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
.hero {
|
||||
background-image: url({{ asset('/images/hero-bg-1.jpg') }});
|
||||
}
|
||||
.hero-about {
|
||||
}
|
||||
.hero-about {
|
||||
background-image: url({{ asset('/images/hero-bg-3.jpg') }});
|
||||
}
|
||||
.hero-plans {
|
||||
}
|
||||
.hero-plans {
|
||||
background-image: url({{ asset('/images/hero-bg-plans.jpg') }});
|
||||
}
|
||||
.hero-contact {
|
||||
}
|
||||
.hero-contact {
|
||||
background-image: url({{ asset('/images/hero-bg-contact.jpg') }});
|
||||
}
|
||||
.hero-features {
|
||||
}
|
||||
.hero-features {
|
||||
background-image: url({{ asset('/images/hero-bg-3.jpg') }});
|
||||
}
|
||||
.hero-secure {
|
||||
}
|
||||
.hero-secure {
|
||||
background-image: url({{ asset('/images/hero-bg-secure-pay.jpg') }});
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@stop
|
||||
@ -64,7 +64,7 @@
|
||||
}
|
||||
|
||||
@if (isset($invoiceNow) && $invoiceNow)
|
||||
getStarted();
|
||||
getStarted();
|
||||
@endif
|
||||
|
||||
function isStorageSupported() {
|
||||
@ -94,29 +94,29 @@
|
||||
<div class="container">
|
||||
<div class="navbar-inner">
|
||||
<a class="brand" href="{{ URL::to('/') }}"><img src="{{ asset('images/invoiceninja-logo.png') }}"></a>
|
||||
<ul class="navbar-list">
|
||||
<!-- <li>{{ link_to('features', 'Features' ) }}</li> -->
|
||||
<!-- <li>{{ link_to('faq', 'FAQ' ) }}</li> -->
|
||||
<li>{{ link_to('about', 'About Us' ) }}</li>
|
||||
<li>{{ link_to('plans', 'Plans' ) }}</li>
|
||||
<li>{{ link_to('contact', 'Contact Us' ) }}</li>
|
||||
<li>{{ link_to('http://blog.invoiceninja.com', 'Blog' ) }}</li>
|
||||
<li>{{ link_to('login', Auth::check() ? 'My Account' : 'Login' ) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="navbar-list">
|
||||
<!-- <li>{{ link_to('features', 'Features' ) }}</li> -->
|
||||
<!-- <li>{{ link_to('faq', 'FAQ' ) }}</li> -->
|
||||
<li>{{ link_to('about', 'About Us' ) }}</li>
|
||||
<li>{{ link_to('plans', 'Plans' ) }}</li>
|
||||
<li>{{ link_to('contact', 'Contact Us' ) }}</li>
|
||||
<li>{{ link_to('http://blog.invoiceninja.com', 'Blog' ) }}</li>
|
||||
<li>{{ link_to('login', Auth::check() ? 'My Account' : 'Login' ) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@yield('content')
|
||||
@yield('content')
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<!--<div class="fb-follow" data-href="https://www.facebook.com/invoiceninja" data-colorscheme="light" data-layout="button" data-show-faces="false"></div>-->
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<!--<div class="fb-follow" data-href="https://www.facebook.com/invoiceninja" data-colorscheme="light" data-layout="button" data-show-faces="false"></div>-->
|
||||
|
||||
<!--<a href="https://twitter.com/invoiceninja" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @invoiceninja</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>-->
|
||||
<!--<div class="fb-like" data-href="https://www.invoiceninja.com" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div> -->
|
||||
@ -137,64 +137,283 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
-->
|
||||
-->
|
||||
|
||||
<!--
|
||||
<script src="//platform.linkedin.com/in.js" type="text/javascript">
|
||||
lang: en_US
|
||||
</script>
|
||||
<script type="IN/Share" data-url="https://www.invoiceninja.com/"></script>
|
||||
-->
|
||||
|
||||
<!--<iframe src="http://ghbtns.com/github-btn.html?user=hillelcoren&repo=invoice-ninja&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>-->
|
||||
-->
|
||||
|
||||
<img src="{{ asset('images/footer-logo.png') }}">
|
||||
<hr>
|
||||
<ul class="navbar-vertical">
|
||||
<!-- <li>{{ link_to('features', 'Features' ) }}</li> -->
|
||||
<!-- <li>{{ link_to('faq', 'FAQ' ) }}</li> -->
|
||||
<li>{{ link_to('about', 'About Us' ) }}</li>
|
||||
<li>{{ link_to('plans', 'Plans' ) }}</li>
|
||||
<li>{{ link_to('contact', 'Contact Us' ) }}</li>
|
||||
<li>{{ link_to('http://blog.invoiceninja.com', 'Blog' ) }}</li>
|
||||
<li>{{ link_to('login', Auth::check() ? 'My Account' : 'Login' ) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3><span class="glyphicon glyphicon-share-alt"></span>Connect with Us</h3>
|
||||
<div class="social">
|
||||
<div class="row1">
|
||||
<a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-facebook.png') }}"></a>
|
||||
<a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-twitter.png') }}"></a>
|
||||
<a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-linkedin.png') }}"></a>
|
||||
<a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-gplus.png') }}"></a>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-github.png') }}"></a>
|
||||
<a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-pinterest.png') }}"></a>
|
||||
<a href="https://www.facebook.com/invoiceninja"><img src="{{ asset('images/hex-rss.png') }}"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<h3><span class="glyphicon glyphicon-envelope"></span>Join Our Free Newsletter</h3>
|
||||
<form id="newsletter">
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
|
||||
{{ Button::submit('')->append_with_icon('chevron-right') }}
|
||||
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!--<iframe src="http://ghbtns.com/github-btn.html?user=hillelcoren&repo=invoice-ninja&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>-->
|
||||
|
||||
<img src="{{ asset('images/footer-logo.png') }}">
|
||||
<hr>
|
||||
<ul class="navbar-vertical">
|
||||
<!-- <li>{{ link_to('features', 'Features' ) }}</li> -->
|
||||
<!-- <li>{{ link_to('faq', 'FAQ' ) }}</li> -->
|
||||
<li>{{ link_to('about', 'About Us' ) }}</li>
|
||||
<li>{{ link_to('plans', 'Plans' ) }}</li>
|
||||
<li>{{ link_to('contact', 'Contact Us' ) }}</li>
|
||||
<li>{{ link_to('http://blog.invoiceninja.com', 'Blog' ) }}</li>
|
||||
<li>{{ link_to('login', Auth::check() ? 'My Account' : 'Login' ) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3><span class="glyphicon glyphicon-share-alt"></span>Connect with Us</h3>
|
||||
<div class="social">
|
||||
<div class="row1">
|
||||
<a href="https://www.facebook.com/invoiceninja" target="_blank"><img src="{{ asset('images/hex-facebook.png') }}"></a>
|
||||
<a href="https://twitter.com/invoiceninja" target="_blank"><img src="{{ asset('images/hex-twitter.png') }}"></a>
|
||||
<a href="https://www.linkedin.com/company/invoice-ninja" target="_blank"><img src="{{ asset('images/hex-linkedin.png') }}"></a>
|
||||
<a href="https://plus.google.com/104031016152831072143" target="_blank"><img src="{{ asset('images/hex-gplus.png') }}"></a>
|
||||
</div>
|
||||
<div class="row2">
|
||||
<a href="https://github.com/hillelcoren/invoice-ninja" target="_blank"><img src="{{ asset('images/hex-github.png') }}"></a>
|
||||
<a href="https://www.pinterest.com/invoiceninja" target="_blank"><img src="{{ asset('images/hex-pinterest.png') }}"></a>
|
||||
<a href="http://blog.invoiceninja.com/feed/rss2" target="_blank"><img src="{{ asset('images/hex-rss.png') }}"></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--<h3><span class="glyphicon glyphicon-envelope"></span>Join Our Free Newsletter</h3>-->
|
||||
<div class="form-group">
|
||||
|
||||
<!--
|
||||
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
|
||||
{{ Button::submit('')->append_with_icon('chevron-right') }}
|
||||
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<form accept-charset="UTF-8" action="https://madmimi.com/signups/subscribe/107799" id="mad_mimi_signup_form" method="post" target="_blank">
|
||||
<div style="margin:0;padding:0;display:inline">
|
||||
<input name="utf8" type="hidden" value="✓"/>
|
||||
<input name="authenticity_token" type="hidden" value="jLAaWeg+Ew4gkbOUnMq+lv/Lt76bPCI/IGAWVitkFJ0="/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3><img src="{{ asset('images/icon-secure-footer.png') }}" style="margin-right: 8px; margin-top: -5px;"></span>Safe & Secure</h3>
|
||||
<img src="{{ asset('images/ssl-footer.png') }}">
|
||||
<hr>
|
||||
<img src="{{ asset('images/opensource-footer.png') }}">
|
||||
</div>
|
||||
<div class="mimi_field required">
|
||||
<input id="signup_email" placeholder="Email" class="form-control" name="signup[email]" type="text" data-required-field="This field is required" placeholder="you@example.com"/>
|
||||
<br/>
|
||||
</div>
|
||||
<div>
|
||||
<input id="signup_first_name" placeholder="First Name" class="form-control" name="signup[first_name]" type="text" data-required-field="This field is required"/>
|
||||
<br/>
|
||||
</div>
|
||||
<div>
|
||||
<input id="signup_last_name" placeholder="Last Name" class="form-control" name="signup[last_name]" type="text" data-required-field="This field is required"/>
|
||||
<br/>
|
||||
</div>
|
||||
<div>
|
||||
<input type="submit" class="btn-lg btn-block submit" value="Subscribe" id="webform_submit_button" data-default-text="Subscribe" data-submitting-text="Sending…" data-invalid-text="↑ You forgot some required fields" data-choose-list="↑ Choose a list">
|
||||
</input>
|
||||
</div>
|
||||
</form>
|
||||
-->
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var form = document.getElementById('mad_mimi_signup_form'),
|
||||
submit = document.getElementById('webform_submit_button'),
|
||||
validEmail = /.+@.+\..+/,
|
||||
isValid;
|
||||
|
||||
form.onsubmit = function(event) {
|
||||
validate();
|
||||
if(!isValid) {
|
||||
revalidateOnChange();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
function validate() {
|
||||
isValid = true;
|
||||
emailValidation();
|
||||
fieldAndListValidation();
|
||||
updateFormAfterValidation();
|
||||
}
|
||||
|
||||
function emailValidation() {
|
||||
var email = document.getElementById('signup_email');
|
||||
if(!validEmail.test(email.value)) {
|
||||
textFieldError(email);
|
||||
isValid = false;
|
||||
} else {
|
||||
removeTextFieldError(email);
|
||||
}
|
||||
}
|
||||
|
||||
function fieldAndListValidation() {
|
||||
var fields = form.querySelectorAll('.mimi_field.required');
|
||||
for(var i = 0; i < fields.length; ++i) {
|
||||
var field = fields[i],
|
||||
type = fieldType(field);
|
||||
if(type == 'checkboxes' || type == 'radio_buttons') {
|
||||
checkboxAndRadioValidation(field);
|
||||
} else {
|
||||
textAndDropdownValidation(field, type);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fieldType(field) {
|
||||
var type = field.querySelectorAll('.field_type');
|
||||
if(type.length > 0) {
|
||||
return type[0].getAttribute('data-field-type');
|
||||
} else if(field.className.indexOf('checkgroup') >= 0) {
|
||||
return 'checkboxes';
|
||||
} else {
|
||||
return 'text_field';
|
||||
}
|
||||
}
|
||||
|
||||
function checkboxAndRadioValidation(field) {
|
||||
var inputs = field.getElementsByTagName('input'),
|
||||
selected = false;
|
||||
for(var i = 0; i < inputs.length; ++i) {
|
||||
var input = inputs[i];
|
||||
if((input.type == 'checkbox' || input.type == 'radio') && input.checked) selected = true;
|
||||
}
|
||||
if(selected) {
|
||||
field.className = field.className.replace(/ invalid/g, '');
|
||||
} else {
|
||||
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
function textAndDropdownValidation(field, type) {
|
||||
var inputs = field.getElementsByTagName('input');
|
||||
for(var i = 0; i < inputs.length; ++i) {
|
||||
var input = inputs[i];
|
||||
if(input.name.indexOf('signup') >= 0) {
|
||||
if(type == 'text_field') {
|
||||
textValidation(input);
|
||||
} else {
|
||||
dropdownValidation(field, input);
|
||||
}
|
||||
}
|
||||
}
|
||||
htmlEmbedDropdownValidation(field);
|
||||
}
|
||||
|
||||
function textValidation(input) {
|
||||
if(input.id == 'signup_email') return;
|
||||
var val = input.value;
|
||||
if(val == '') {
|
||||
textFieldError(input);
|
||||
isValid = false;
|
||||
return;
|
||||
} else {
|
||||
removeTextFieldError(input)
|
||||
}
|
||||
}
|
||||
|
||||
function dropdownValidation(field, input) {
|
||||
var val = input.value;
|
||||
if(val == '') {
|
||||
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
|
||||
onSelectCallback(input);
|
||||
isValid = false;
|
||||
return;
|
||||
} else {
|
||||
field.className = field.className.replace(/ invalid/g, '');
|
||||
}
|
||||
}
|
||||
|
||||
function htmlEmbedDropdownValidation(field) {
|
||||
var dropdowns = field.querySelectorAll('.mimi_html_dropdown');
|
||||
for(var i = 0; i < dropdowns.length; ++i) {
|
||||
var dropdown = dropdowns[i],
|
||||
val = dropdown.value;
|
||||
if(val == '') {
|
||||
if(field.className.indexOf('invalid') == -1) field.className += ' invalid';
|
||||
isValid = false;
|
||||
dropdown.onchange = validate;
|
||||
return;
|
||||
} else {
|
||||
field.className = field.className.replace(/ invalid/g, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function textFieldError(input) {
|
||||
input.className = 'required invalid';
|
||||
input.placeholder = input.getAttribute('data-required-field');
|
||||
}
|
||||
|
||||
function removeTextFieldError(input) {
|
||||
input.className = 'required';
|
||||
input.placeholder = '';
|
||||
}
|
||||
|
||||
function onSelectCallback(input) {
|
||||
if(typeof Widget != 'undefined' && Widget.BasicDropdown != undefined) {
|
||||
var dropdownEl = input.parentNode,
|
||||
instances = Widget.BasicDropdown.instances;
|
||||
for(var i = 0; i < instances.length; ++i) {
|
||||
var instance = instances[i];
|
||||
if(instance.wrapperEl == dropdownEl) {
|
||||
instance.onSelect = validate;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateFormAfterValidation() {
|
||||
form.className = isValid ? '' : 'mimi_invalid';
|
||||
submit.value = submitButtonText();
|
||||
submit.disabled = !isValid;
|
||||
submit.className = isValid ? 'submit' : 'disabled';
|
||||
}
|
||||
|
||||
function submitButtonText() {
|
||||
var invalidFields = document.querySelectorAll('.invalid'),
|
||||
text;
|
||||
if(isValid || invalidFields == undefined) {
|
||||
text = submit.getAttribute('data-default-text');
|
||||
} else {
|
||||
if(invalidFields.length > 1 || invalidFields[0].className.indexOf('checkgroup') == -1) {
|
||||
text = submit.getAttribute('data-invalid-text');
|
||||
} else {
|
||||
text = submit.getAttribute('data-choose-list');
|
||||
}
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
function revalidateOnChange() {
|
||||
var fields = form.querySelectorAll(".mimi_field.required");
|
||||
for(var i = 0; i < fields.length; ++i) {
|
||||
var inputs = fields[i].getElementsByTagName('input');
|
||||
for(var j = 0; j < inputs.length; ++j) {
|
||||
inputs[j].onchange = validate;
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3><img src="{{ asset('images/icon-secure-footer.png') }}" style="margin-right: 8px; margin-top: -5px;"></span>Safe & Secure</h3>
|
||||
<img src="{{ asset('images/ssl-footer.png') }}">
|
||||
<hr>
|
||||
<img src="{{ asset('images/opensource-footer.png') }}">
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<ul class="navbar-list">
|
||||
@ -212,9 +431,9 @@
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
$('.valign').vAlign();
|
||||
});
|
||||
jQuery(document).ready(function($) {
|
||||
$('.valign').vAlign();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -666,7 +666,7 @@ footer.footer .social .row1 {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
footer.footer form#newsletter button {
|
||||
footer.footer form#mad_mimi_signup_form button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@ -679,20 +679,20 @@ footer.footer form#newsletter button {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
footer.footer form#newsletter button:hover {
|
||||
footer.footer form#mad_mimi_signup_form button:hover {
|
||||
background: #7b7a79;
|
||||
}
|
||||
footer.footer form#newsletter button .glyphicon {
|
||||
footer.footer form#mad_mimi_signup_form button .glyphicon {
|
||||
position: static;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
footer.footer form#newsletter .form-group {
|
||||
footer.footer form#mad_mimi_signup_form .form-group {
|
||||
position: relative;
|
||||
}
|
||||
footer.footer form#newsletter input {
|
||||
footer.footer form#mad_mimi_signup_form input {
|
||||
padding: right: 60px;
|
||||
background: #393636;
|
||||
border: none;
|
||||
|
||||
@ -648,7 +648,7 @@ footer.footer .social .row1 {
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
footer.footer form#newsletter button {
|
||||
footer.footer form#mad_mimi_signup_form button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@ -661,20 +661,20 @@ footer.footer form#newsletter button {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
footer.footer form#newsletter button:hover {
|
||||
footer.footer form#mad_mimi_signup_form button:hover {
|
||||
background: #7b7a79;
|
||||
}
|
||||
footer.footer form#newsletter button .glyphicon {
|
||||
footer.footer form#mad_mimi_signup_form button .glyphicon {
|
||||
position: static;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
footer.footer form#newsletter .form-group {
|
||||
footer.footer form#mad_mimi_signup_form .form-group {
|
||||
position: relative;
|
||||
}
|
||||
footer.footer form#newsletter input {
|
||||
footer.footer form#mad_mimi_signup_form input {
|
||||
padding: right: 60px;
|
||||
background: #393636;
|
||||
border: none;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 16 KiB |
Loading…
x
Reference in New Issue
Block a user