landing payment page layout complete
This commit is contained in:
Arvind Tiwari
parent
aaf3bc18d8
commit
98e8be1da9
4 changed files with 159 additions and 130 deletions
|
|
@ -13,11 +13,11 @@
|
|||
<!-- Credit card form -->
|
||||
<div class="dcl-order-container">
|
||||
<div class="payment-container">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="dcl-payment-grid">
|
||||
<div class="dcl-payment-box">
|
||||
<div class="dcl-payment-section">
|
||||
<h3>{%trans "Log in" %}</h3>
|
||||
<hr>
|
||||
<hr class="top-hr">
|
||||
<p>{% blocktrans %}Already signed up?<br>By logging in you can retrieve saved billing information.{% endblocktrans %}</p>
|
||||
<form role="form" id="login-form" method="post" action="" novalidate>
|
||||
{% for field in login_form %}
|
||||
|
|
@ -28,40 +28,34 @@
|
|||
<button type="submit" class="btn btn-vm-contact">{% trans "LOGIN" %}</button>
|
||||
</div>
|
||||
</form>
|
||||
<p>
|
||||
{% trans "Don't have an account yet?" %}<br>
|
||||
{% trans "You can sign up by filling in the information below." %}<br>
|
||||
<a href="">{% trans "Forgot password?" %}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="dcl-payment-box">
|
||||
<div class="dcl-payment-section">
|
||||
<h3>{%trans "Your Order" %}</h3>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<p><b>{% trans "Cores"%}</b> <span class="pull-right">{{vm.cores}}</span></p>
|
||||
<hr class="top-hr">
|
||||
<div class="dcl-payment-order">
|
||||
<p>{% trans "Cores"%} <strong class="pull-right">{{vm.cores}}1</strong></p>
|
||||
<hr>
|
||||
<p><b>{% trans "Memory"%}</b> <span class="pull-right">{{vm.memory}} GB</span></p>
|
||||
<p>{% trans "Memory"%} <strong class="pull-right">{{vm.memory}}2 GB</strong></p>
|
||||
<hr>
|
||||
<p><b>{% trans "Disk space"%}</b> <span class="pull-right">{{vm.disk_size}} GB</span></p>
|
||||
<p>{% trans "Disk space"%} <strong class="pull-right">{{vm.disk_size}}2 GB</strong></p>
|
||||
<hr>
|
||||
</div>
|
||||
<br/>
|
||||
{% url 'hosting:payment' as payment_url %}
|
||||
<div class="dcl-order-table-total row">
|
||||
<div class="col-xs-6 tbl-tot tbl-no-padding">
|
||||
{%trans "Total" %} <span>{%trans "including VAT" %}</span>
|
||||
</div>
|
||||
<div class="col-xs-6 tbl-no-padding">
|
||||
<div class="tbl-total">{{request.session.specs.price}}
|
||||
CHF<span class="dcl-price-month">/{% trans "Month" %}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>{% trans "Configuration"%} <strong class="pull-right">{{request.session.template.name}}CentOS 7</strong></p>
|
||||
<hr>
|
||||
<p class="last-p"><strong>{%trans "Total" %}</strong> <small>({%trans "including VAT" %})</small> <strong class="pull-right">{{request.session.specs.price}}15 CHF/{% trans "Month" %}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="dcl-payment-box">
|
||||
<div class="dcl-payment-section">
|
||||
<h3><b>{%trans "Sign up"%}</b></h3>
|
||||
<hr>
|
||||
<hr class="top-hr">
|
||||
<form role="form" id="billing-form" method="post" action="" novalidate>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="id_signup_name">{% trans "Name" %}</label>
|
||||
|
|
@ -78,10 +72,10 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="dcl-payment-box">
|
||||
<div class="dcl-payment-section">
|
||||
<h3><b>{%trans "Credit Card"%}</b></h3>
|
||||
<hr>
|
||||
<hr class="top-hr">
|
||||
<div>
|
||||
<div>
|
||||
<p>
|
||||
|
|
@ -95,107 +89,88 @@
|
|||
<br>
|
||||
<div>
|
||||
{% if credit_card_data.last4 %}
|
||||
<form role="form" id="payment-form-with-creditcard" novalidate>
|
||||
<h5 class="billing-head">Credit Card</h5>
|
||||
<h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
|
||||
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
|
||||
<input type="hidden" name="credit_card_needed" value="false"/>
|
||||
</form>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
{% if not messages and not form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-addtional-margin">
|
||||
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
|
||||
</p>
|
||||
<form role="form" id="payment-form-with-creditcard" novalidate>
|
||||
<h5 class="billing-head">Credit Card</h5>
|
||||
<h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
|
||||
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
|
||||
<input type="hidden" name="credit_card_needed" value="false"/>
|
||||
</form>
|
||||
{% if not messages and not form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-addtional-margin">
|
||||
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
|
||||
</p>
|
||||
{% endif %}
|
||||
<div id='payment_error'>
|
||||
{% for message in messages %}
|
||||
{% if 'failed_payment' or 'make_charge_error' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
<p class="card-warning-content card-warning-error">{{ message|safe }}</p>
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
<div id='payment_error'>
|
||||
{% for message in messages %}
|
||||
{% if 'failed_payment' or 'make_charge_error' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
<p class="card-warning-content card-warning-error">{{ message|safe }}</p>
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for error in form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-error">
|
||||
{{ error|escape }}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="col-xs-6 pull-right">
|
||||
<button id="payment_button_with_creditcard" class="btn btn-success stripe-payment-btn"
|
||||
type="submit">
|
||||
{%trans "Submit" %}
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for error in form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-error">
|
||||
{{ error|escape }}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<button id="payment_button_with_creditcard" class="btn btn-success btn-vm-contact" type="submit">{%trans "Submit" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<form action="" id="payment-form-new" method="POST">
|
||||
<input type="hidden" name="token"/>
|
||||
<div class="group">
|
||||
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-9 credit-card-goup">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element card-number-element">
|
||||
<label>{%trans "Card Number" %}</label>
|
||||
<div id="card-number-element" class="field my-input"></div>
|
||||
</div>
|
||||
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-3 card-element card-expiry-element">
|
||||
<label>{%trans "Expiry Date" %}</label>
|
||||
<div id="card-expiry-element" class="field my-input"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-6 col-lg-7 hide-mobile"></div>
|
||||
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2 card-element card-cvc-element">
|
||||
<label>{%trans "CVC" %}</label>
|
||||
<div id="card-cvc-element" class="field my-input"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element brand">
|
||||
<label>{%trans "Card Type" %}</label>
|
||||
<i class="pf pf-credit-card" id="brand-icon"></i>
|
||||
</div>
|
||||
<form action="" id="payment-form-new" method="POST">
|
||||
<input type="hidden" name="token"/>
|
||||
<div class="group">
|
||||
<div class="credit-card-goup">
|
||||
<div class="card-element card-number-element">
|
||||
<label>{%trans "Card Number" %}</label>
|
||||
<div id="card-number-element" class="field my-input"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-5 card-element card-expiry-element">
|
||||
<label>{%trans "Expiry Date" %}</label>
|
||||
<div id="card-expiry-element" class="field my-input"></div>
|
||||
</div>
|
||||
<div class="col-xs-3 col-xs-offset-4 card-element card-cvc-element">
|
||||
<label>{%trans "CVC" %}</label>
|
||||
<div id="card-cvc-element" class="field my-input"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-element brand">
|
||||
<label>{%trans "Card Type" %}</label>
|
||||
<i class="pf pf-credit-card" id="brand-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="card-errors" role="alert"></div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
{% if not messages and not form.non_field_errors %}
|
||||
<p class="card-warning-content">
|
||||
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
|
||||
<div id="card-errors" role="alert"></div>
|
||||
{% if not messages and not form.non_field_errors %}
|
||||
<p class="card-warning-content">
|
||||
{% trans "You are not making any payment yet. After placing your order, you will be taken to the Submit Payment Page." %}
|
||||
</p>
|
||||
{% endif %}
|
||||
<div id='payment_error'>
|
||||
{% for message in messages %}
|
||||
{% if 'failed_payment' or 'make_charge_error' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
<p class="card-warning-content card-warning-error">{{ message|safe }}</p>
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for error in form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-error">
|
||||
{{ error|escape }}
|
||||
</p>
|
||||
{% endif %}
|
||||
<div id='payment_error'>
|
||||
{% for message in messages %}
|
||||
{% if 'failed_payment' or 'make_charge_error' in message.tags %}
|
||||
<ul class="list-unstyled"><li>
|
||||
<p class="card-warning-content card-warning-error">{{ message|safe }}</p>
|
||||
</li></ul>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for error in form.non_field_errors %}
|
||||
<p class="card-warning-content card-warning-error">
|
||||
{{ error|escape }}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="col-xs-6 pull-right">
|
||||
<button class="btn btn-success stripe-payment-btn" type="submit">{%trans "Submit" %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<button class="btn btn-vm-contact btn-wide" type="submit">{%trans "SUBMIT" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="display:none;">
|
||||
<div class="col-xs-12">
|
||||
<div style="display:none;">
|
||||
<p class="payment-errors"></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
2
hosting/static/hosting/css/bootstrap.min.css
vendored
2
hosting/static/hosting/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -607,7 +607,8 @@ a.unlink:hover {
|
|||
font-weight: 300;
|
||||
border: 1px solid #a1a1a1;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-warning-error {
|
||||
border: 1px solid #EB4D5C;
|
||||
|
|
@ -648,7 +649,7 @@ a.unlink:hover {
|
|||
|
||||
.card-element {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
/* padding: 0; */
|
||||
}
|
||||
|
||||
.card-element label{
|
||||
|
|
@ -671,7 +672,7 @@ a.unlink:hover {
|
|||
}
|
||||
|
||||
.credit-card-goup{
|
||||
padding: 0;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.order-confirm-date{
|
||||
|
|
@ -859,10 +860,3 @@ a.list-group-item-danger.active:focus {
|
|||
.panel-danger > .panel-heading .badge {
|
||||
background-color: #eb4d5c;
|
||||
}
|
||||
|
||||
/* landing page payment new style */
|
||||
.dcl-payment-section {
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
@ -22,7 +22,67 @@
|
|||
}
|
||||
|
||||
.summary-box .content {
|
||||
|
||||
padding-top: 15px;
|
||||
|
||||
}
|
||||
|
||||
/* landing page payment new style */
|
||||
.last-p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.dcl-payment-section {
|
||||
max-width: 391px;
|
||||
margin: 0 auto 30px;
|
||||
padding: 0 10px 30px;
|
||||
border-bottom: 1px solid #edebeb;
|
||||
height: 100%;
|
||||
}
|
||||
.dcl-payment-section hr{
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.dcl-payment-section .top-hr {
|
||||
margin-left: -10px;
|
||||
}
|
||||
.dcl-payment-section h3 {
|
||||
font-weight: 600;
|
||||
}
|
||||
.dcl-payment-section p {
|
||||
padding: 0 5px;
|
||||
}
|
||||
.dcl-payment-section .card-warning-content {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.dcl-payment-order strong{
|
||||
font-size: 17px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.dcl-payment-grid {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.dcl-payment-box {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.dcl-payment-section {
|
||||
padding: 30px 10px;
|
||||
margin-bottom: 0;
|
||||
border-bottom-width: 5px;
|
||||
}
|
||||
.dcl-payment-box:nth-child(n+3) .dcl-payment-section {
|
||||
border-bottom: none;
|
||||
}
|
||||
.dcl-payment-box:nth-child(2n+1):after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
background: #eee;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
top: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue