mravi/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

landing payment page layout complete

Browse source
This commit is contained in:
Arvind Tiwari 2017-09-07 02:47:57 +05:30
parent aaf3bc18d8
commit 98e8be1da9
4 changed files with 159 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

211
datacenterlight/templates/datacenterlight/landing_payment.html
View file

@ -13,11 +13,11 @@
<!-- Credit card form --> <!-- Credit card form -->
<div class="dcl-order-container"> <div class="dcl-order-container">
<div class="payment-container"> <div class="payment-container">
<div class="row"> <div class="dcl-payment-grid">
<div class="col-sm-6"> <div class="dcl-payment-box">
<div class="dcl-payment-section"> <div class="dcl-payment-section">
<h3>{%trans "Log in" %}</h3> <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> <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> <form role="form" id="login-form" method="post" action="" novalidate>
{% for field in login_form %} {% for field in login_form %}
@ -28,40 +28,34 @@
<button type="submit" class="btn btn-vm-contact">{% trans "LOGIN" %}</button> <button type="submit" class="btn btn-vm-contact">{% trans "LOGIN" %}</button>
</div> </div>
</form> </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> </div>
<div class="col-sm-6"> <div class="dcl-payment-box">
<div class="dcl-payment-section"> <div class="dcl-payment-section">
<h3>{%trans "Your Order" %}</h3> <h3>{%trans "Your Order" %}</h3>
<hr> <hr class="top-hr">
<div class="content"> <div class="dcl-payment-order">
<p><b>{% trans "Cores"%}</b> <span class="pull-right">{{vm.cores}}</span></p> <p>{% trans "Cores"%} <strong class="pull-right">{{vm.cores}}1</strong></p>
<hr> <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> <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> <hr>
</div> <p>{% trans "Configuration"%} <strong class="pull-right">{{request.session.template.name}}CentOS 7</strong></p>
<br/> <hr>
{% url 'hosting:payment' as payment_url %} <p class="last-p"><strong>{%trans "Total" %}</strong>&nbsp;&nbsp;<small>({%trans "including VAT" %})</small> <strong class="pull-right">{{request.session.specs.price}}15 CHF/{% trans "Month" %}</strong></p>
<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>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="dcl-payment-box">
<div class="row">
<div class="col-sm-6">
<div class="dcl-payment-section"> <div class="dcl-payment-section">
<h3><b>{%trans "Sign up"%}</b></h3> <h3><b>{%trans "Sign up"%}</b></h3>
<hr> <hr class="top-hr">
<form role="form" id="billing-form" method="post" action="" novalidate> <form role="form" id="billing-form" method="post" action="" novalidate>
<div class="form-group"> <div class="form-group">
<label class="sr-only" for="id_signup_name">{% trans "Name" %}</label> <label class="sr-only" for="id_signup_name">{% trans "Name" %}</label>
@ -78,10 +72,10 @@
</form> </form>
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="dcl-payment-box">
<div class="dcl-payment-section"> <div class="dcl-payment-section">
<h3><b>{%trans "Credit Card"%}</b></h3> <h3><b>{%trans "Credit Card"%}</b></h3>
<hr> <hr class="top-hr">
<div> <div>
<div> <div>
<p> <p>
@ -95,107 +89,88 @@
<br> <br>
<div> <div>
{% if credit_card_data.last4 %} {% if credit_card_data.last4 %}
<form role="form" id="payment-form-with-creditcard" novalidate> <form role="form" id="payment-form-with-creditcard" novalidate>
<h5 class="billing-head">Credit Card</h5> <h5 class="billing-head">Credit Card</h5>
<h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5> <h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5> <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
<input type="hidden" name="credit_card_needed" value="false"/> <input type="hidden" name="credit_card_needed" value="false"/>
</form> </form>
<div class="row"> {% if not messages and not form.non_field_errors %}
<div class="col-xs-12"> <p class="card-warning-content card-warning-addtional-margin">
{% if not messages and not form.non_field_errors %} {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
<p class="card-warning-content card-warning-addtional-margin"> </p>
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %} {% endif %}
</p> <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 %} {% endif %}
<div id='payment_error'> {% endfor %}
{% for message in messages %} {% for error in form.non_field_errors %}
{% if 'failed_payment' or 'make_charge_error' in message.tags %} <p class="card-warning-content card-warning-error">
<ul class="list-unstyled"><li> {{ error|escape }}
<p class="card-warning-content card-warning-error">{{ message|safe }}</p> </p>
</li></ul> {% endfor %}
{% endif %} </div>
{% endfor %} <div class="text-right">
{% for error in form.non_field_errors %} <button id="payment_button_with_creditcard" class="btn btn-success btn-vm-contact" type="submit">{%trans "Submit" %}</button>
<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>
</div> </div>
</div>
{% else %} {% else %}
<form action="" id="payment-form-new" method="POST"> <form action="" id="payment-form-new" method="POST">
<input type="hidden" name="token"/> <input type="hidden" name="token"/>
<div class="group"> <div class="group">
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-9 credit-card-goup"> <div class="credit-card-goup">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element card-number-element"> <div class="card-element card-number-element">
<label>{%trans "Card Number" %}</label> <label>{%trans "Card Number" %}</label>
<div id="card-number-element" class="field my-input"></div> <div id="card-number-element" class="field my-input"></div>
</div> </div>
<div class="col-xs-5 col-sm-3 col-md-3 col-lg-3 card-element card-expiry-element"> <div class="row">
<label>{%trans "Expiry Date" %}</label> <div class="col-xs-5 card-element card-expiry-element">
<div id="card-expiry-element" class="field my-input"></div> <label>{%trans "Expiry Date" %}</label>
</div> <div id="card-expiry-element" class="field my-input"></div>
<div class="col-xs-12 col-sm-2 col-md-6 col-lg-7 hide-mobile"></div> </div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2 card-element card-cvc-element"> <div class="col-xs-3 col-xs-offset-4 card-element card-cvc-element">
<label>{%trans "CVC" %}</label> <label>{%trans "CVC" %}</label>
<div id="card-cvc-element" class="field my-input"></div> <div id="card-cvc-element" class="field my-input"></div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element brand"> </div>
<label>{%trans "Card Type" %}</label> <div class="card-element brand">
<i class="pf pf-credit-card" id="brand-icon"></i> <label>{%trans "Card Type" %}</label>
</div> <i class="pf pf-credit-card" id="brand-icon"></i>
</div>
</div>
</div> </div>
</div> <div id="card-errors" role="alert"></div>
<div id="card-errors" role="alert"></div> {% if not messages and not form.non_field_errors %}
<div class="row"> <p class="card-warning-content">
<div class="col-xs-12"> {% trans "You are not making any payment yet. After placing your order, you will be taken to the Submit Payment Page." %}
{% if not messages and not form.non_field_errors %} </p>
<p class="card-warning-content"> {% endif %}
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %} <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> </p>
{% endif %} {% endfor %}
<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>
<div class="col-xs-12"> <div class="text-right">
<div class="col-xs-6 pull-right"> <button class="btn btn-vm-contact btn-wide" type="submit">{%trans "SUBMIT" %}</button>
<button class="btn btn-success stripe-payment-btn" type="submit">{%trans "Submit" %}
</button>
</div>
</div> </div>
</div>
<div class="row" style="display:none;"> <div style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p> <p class="payment-errors"></p>
</div> </div>
</div> </form>
</form>
{% endif %} {% endif %}
</div> </div>
</div> </div>

2
hosting/static/hosting/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

14
hosting/static/hosting/css/landing-page.css
View file

@ -607,7 +607,8 @@ a.unlink:hover {
font-weight: 300; font-weight: 300;
border: 1px solid #a1a1a1; border: 1px solid #a1a1a1;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 8px 10px;
margin-bottom: 20px;
} }
.card-warning-error { .card-warning-error {
border: 1px solid #EB4D5C; border: 1px solid #EB4D5C;
@ -648,7 +649,7 @@ a.unlink:hover {
.card-element { .card-element {
margin-bottom: 10px; margin-bottom: 10px;
padding: 0; /* padding: 0; */
} }
.card-element label{ .card-element label{
@ -671,7 +672,7 @@ a.unlink:hover {
} }
.credit-card-goup{ .credit-card-goup{
padding: 0; padding: 0 5px;
} }
.order-confirm-date{ .order-confirm-date{
@ -859,10 +860,3 @@ a.list-group-item-danger.active:focus {
.panel-danger > .panel-heading .badge { .panel-danger > .panel-heading .badge {
background-color: #eb4d5c; background-color: #eb4d5c;
} }
/* landing page payment new style */
.dcl-payment-section {
max-width: 400px;
margin: auto;
padding: 30px;
}

64
hosting/static/hosting/css/payment.css
View file

@ -22,7 +22,67 @@
} }
.summary-box .content { .summary-box .content {
padding-top: 15px; 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;
}
} }