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

New layout for payment page

Browse source
This commit is contained in:
PCoder 2017-07-15 19:39:51 +05:30
parent 05db0517bb
commit d711b524e1
2 changed files with 343 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,14 +4,15 @@
* For details, see http://www.apache.org/licenses/LICENSE-2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/ */
@font-face { @font-face {
font-family: 'Lato-Regular'; font-family: 'Lato-Regular';
src: url('../fonts/Lato/Lato-Regular.ttf'); src: url('../fonts/Lato/Lato-Regular.ttf');
} }
@font-face { @font-face {
src: url('../fonts/Lato/Lato-Black.ttf'); src: url('../fonts/Lato/Lato-Black.ttf');
} }
@font-face { @font-face {
font-family: 'Lato-Light'; font-family: 'Lato-Light';
src: url('../fonts/Lato/Lato-Light.ttf'); src: url('../fonts/Lato/Lato-Light.ttf');
@ -33,6 +34,7 @@ h6 {
font-family: 'Lato-Regular', sans-serif; font-family: 'Lato-Regular', sans-serif;
font-weight: 300; font-weight: 300;
} }
.topnav { .topnav {
font-size: 14px; font-size: 14px;
} }
@ -191,17 +193,19 @@ h6 {
float: right; float: right;
margin-top: 0; margin-top: 0;
} }
/*------Auth section---------*/ /*------Auth section---------*/
.auth-container{ .auth-container {
height: 100vh; height: 100vh;
position: relative; position: relative;
} }
.auth-bg{
.auth-bg {
background: url(../img/auth-bg.jpg); background: url(../img/auth-bg.jpg);
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
@ -209,7 +213,8 @@ h6 {
background-attachment: fixed; background-attachment: fixed;
} }
.auth-bg::before{
.auth-bg::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
@ -219,26 +224,30 @@ h6 {
background: rgba(75, 75, 101, 0.55); background: rgba(75, 75, 101, 0.55);
z-index: 1; z-index: 1;
} }
.auth-container .container{
.auth-container .container {
z-index: 1000; z-index: 1000;
} }
.auth-container .auth-content{
.auth-container .auth-content {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
max-width: 390px; max-width: 390px;
} }
.auth-container .auth-center{
.auth-container .auth-center {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
width: 100%; width: 100%;
} }
.auth-container .auth-title{ .auth-container .auth-title {
margin-bottom: 50px; margin-bottom: 50px;
} }
.auth-container .auth-title h2{
.auth-container .auth-title h2 {
color: #fff; color: #fff;
font-size: 44px; font-size: 44px;
text-align: center; text-align: center;
@ -247,7 +256,8 @@ h6 {
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
} }
.auth-container .auth-title h2::after{
.auth-container .auth-title h2::after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -20px; bottom: -20px;
@ -258,17 +268,17 @@ h6 {
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
.auth-box{ .auth-box {
background: #fff; background: #fff;
padding: 0; padding: 0;
padding-bottom: 30px; padding-bottom: 30px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
border-radius: 4px; border-radius: 4px;
z-index: 10; z-index: 10;
} }
.auth-box .section-heading{ .auth-box .section-heading {
color: #5a5a5a; color: #5a5a5a;
padding-top: 30px; padding-top: 30px;
padding-bottom: 5px; padding-bottom: 5px;
@ -279,42 +289,51 @@ h6 {
border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;
margin: 0 auto; margin: 0 auto;
} }
.auth-box .form{
.auth-box .form {
padding: 20px; padding: 20px;
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
.auth-box .form .red{
.auth-box .form .red {
color: #ea3a3a; color: #ea3a3a;
} }
.auth-box .form .btn{
box-shadow: 0 0px 9px rgba(0,0,0,0.19), 0 3px 5px rgba(0,0,0,0.23); .auth-box .form .btn {
box-shadow: 0 0px 9px rgba(0, 0, 0, 0.19), 0 3px 5px rgba(0, 0, 0, 0.23);
letter-spacing: 3px; letter-spacing: 3px;
font-size: 17px; font-size: 17px;
text-transform: uppercase; text-transform: uppercase;
} }
.auth-box .form .form-control{
.auth-box .form .form-control {
height: 44px; height: 44px;
font-size: 16px; font-size: 16px;
} }
.auth-box .auth-footer { .auth-box .auth-footer {
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
.auth-box .auth-footer .text{
.auth-box .auth-footer .text {
color: #777; color: #777;
} }
.auth-box .auth-footer .links a{
color: #1e94cc; .auth-box .auth-footer .links a {
}
.auth-box .auth-footer .links a:hover{
color: #1e94cc; color: #1e94cc;
} }
.auth-box.sign-up{ .auth-box .auth-footer .links a:hover {
color: #1e94cc;
}
.auth-box.sign-up {
padding-bottom: 5px; padding-bottom: 5px;
} }
.auth-box.sign-up .form{
.auth-box.sign-up .form {
padding: 15px 20px 0 20px; padding: 15px 20px 0 20px;
} }
@ -325,6 +344,7 @@ h6 {
line-height: 30px; line-height: 30px;
font-family: 'Lato' !important; font-family: 'Lato' !important;
} }
.sign-up-message a { .sign-up-message a {
font-size: 18px; font-size: 18px;
color: #1e94cc !important; color: #1e94cc !important;
@ -353,38 +373,47 @@ h6 {
ul.banner-social-buttons > li:last-child { ul.banner-social-buttons > li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.auth-box .form { .auth-box .form {
padding: 15px 0px 0 0; padding: 15px 0px 0 0;
} }
.auth-box.sign-up .form { .auth-box.sign-up .form {
padding: 15px 0px 0 0; padding: 15px 0px 0 0;
} }
.auth-box .form .form-control { .auth-box .form .form-control {
height: 44px; height: 44px;
font-size: 13px; font-size: 13px;
} }
.auth-container .auth-title { .auth-container .auth-title {
display: none; display: none;
} }
} }
@media (max-width: 540px) { @media (max-width: 540px) {
.auth-container .auth-title h2{ .auth-container .auth-title h2 {
font-size: 32px; font-size: 32px;
width: 90%; width: 90%;
margin-bottom: 50px; margin-bottom: 50px;
} }
.auth-container.auth-signup .auth-title h2{
.auth-container.auth-signup .auth-title h2 {
font-size: 20px; font-size: 20px;
width: 90%; width: 90%;
margin-bottom: 50px; margin-bottom: 50px;
} }
.auth-box .form { .auth-box .form {
width: 90%; width: 90%;
} }
.auth-box .section-heading { .auth-box .section-heading {
font-size: 15px; font-size: 15px;
} }
} }
footer { footer {
padding: 2%; padding: 2%;
background-color: #f8f8f8; background-color: #f8f8f8;
@ -418,3 +447,138 @@ a.unlink:hover {
color: inherit; color: inherit;
} }
/***** DCL payment page **********/
.dcl-order-container {
font-family: Lato;
}
.dcl-order-table-header {
border-bottom: 1px solid #eee;
padding-top: 15px;
padding-bottom: 15px;
font-size: 18px;
color: #999;
text-align: center;
font-weight: 400;
}
.dcl-order-table-content {
border-bottom: 1px solid #eee;
padding-top: 15px;
padding-bottom: 15px;
font-size: 18px;
font-weight: 600;
text-align: center;
}
.tbl-content {
}
.dcl-order-table-total {
border-bottom: 4px solid #eee;
padding-top: 15px;
padding-bottom: 20px;
font-size: 20px;
font-weight: 600;
color: #999;
}
.dcl-order-table-total span {
font-size: 12px;
color: #999;
font-weight: 400;
}
.dcl-order-table-total .tbl-total {
text-align: center;
color: #000;
}
.tbl-no-padding {
padding: 0px;
}
.dcl-billing-sec {
margin-top: 50px;
}
@media (max-width: 767px) {
.dcl-order-sec {
padding: 10px 20px 30px 20px;
border-bottom: 4px solid #eee;
}
.tbl-header {
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.tbl-content {
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.dcl-order-table-header {
border-bottom: 0px solid #eee;
padding: 10px 0;
text-align: left;
}
.dcl-order-table-content {
border-bottom: 0px solid #eee;
padding: 10px 0;
text-align: right;
}
.dcl-order-table-total {
font-size: 18px;
color: #000;
padding: 10px 0;
border-bottom: 0px solid #eee;
}
.dcl-order-table-total .tbl-total {
padding: 0px;
text-align: right;
}
.dcl-billing-sec {
margin-top: 30px;
}
}
@media (min-width: 1200px) {
.dcl-order-container {
width: 990px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
}
@media (min-width: 768px) {
.dcl-billing {
padding-right: 50px;
border-right: 1px solid #eee;
}
.dcl-creditcard {
padding-left: 50px;
}
.tbl-tot {
padding-left: 35px;
}
.content-dashboard {
width: auto !important;
}
}
@media only screen and (max-width: 1330px) and (min-width: 1200px) {
.content-dashboard {
width: 100% !important;
}
}

265
hosting/templates/hosting/payment.html
View file

@ -2,129 +2,156 @@
{% load staticfiles bootstrap3 i18n %} {% load staticfiles bootstrap3 i18n %}
{% block content %} {% block content %}
<!-- Credit card form --> <!-- Credit card form -->
<div> <div class="dcl-order-container container">
<div class="payment-container"> <div class="payment-container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-offset-2 col-md-4 summary-box"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-sec">
<form role="form" novalidate> <h3><strong>Your Order</strong></h3>
<div class="row"> <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-header">
<div class="col-xs-12"> <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 tbl-header">
<h3><b>{%trans "Billing Amount" %}</b></h3> Cores
<hr> </div>
<div class="content"> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header">
<!-- <p><b>Type</b> <span class="pull-right">{{request.session.vm_specs.location_code}}</span></p> --> Memory
<!-- <hr> --> </div>
<p><b>{%trans "Cores"%}</b> <span <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 tbl-header">
class="pull-right">{{request.session.specs.cpu|floatformat}}</span></p> Disk space
<hr> </div>
<p><b>{%trans "Memory"%}</b> <span <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header">
class="pull-right">{{request.session.specs.memory|floatformat}} GB</span></p> Configuration
<hr> </div>
<p><b>{%trans "Disk space"%}</b> <span </div>
class="pull-right">{{request.session.specs.disk_size|floatformat}} GB</span></p> <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-content">
<hr> <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 tbl-content">
<p><b>{%trans "Configuration"%}</b> <span 1
class="pull-right">{{request.session.template.name}}</span></p> </div>
<hr> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content">
<h4>Total<p 2 GB
class="pull-right"><b>{{request.session.specs.price }} CHF</b></p></h4> </div>
</div> <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 tbl-content">
</div> 10 GB
</div> </div>
</form> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content">
CentOS 7
</div> </div>
<div class="col-xs-12 col-md-4 billing"> </div>
<h3><b>{%trans "Billing Address"%}</b></h3> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-table-total">
<hr> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-tot tbl-no-padding">
<form role="form" id="billing-form" method="post" action="" novalidate> Total <span>including VAT</span>
{% for field in form %} </div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-no-padding">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"></div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-total">15CHF</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-billing-sec">
<div class="col-xs-12 col-sm-5 col-md-6 billing dcl-billing">
<h3><b>{%trans "Billing Address"%}</b></h3>
<hr>
<form role="form" id="billing-form" method="post" action="" novalidate>
{% for field in form %}
{% csrf_token %} {% csrf_token %}
{% bootstrap_field field show_label=False type='fields'%} {% bootstrap_field field show_label=False type='fields'%}
{% endfor %} {% endfor %}
{% bootstrap_form_errors form type='non_fields'%} {% bootstrap_form_errors form type='non_fields'%}
</form> </form>
</div> </div>
</div> <div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard">
<div class="row"> <h3><b>{%trans "Credit Card"%}</b></h3>
<div class="col-xs-12 col-md-offset-2 col-md-4 "></div> <hr>
<div class="col-xs-12 col-md-4 creditcard-box"> <div>
<h3><b>{%trans "Credit Card"%}</b></h3> <div>
<hr> <p>{% trans 'Please fill in your credit card information below. We are using <a
<div> href="https://stripe.com" target="_blank">Stripe</a> for payment and do not
<div> store
<p> {% trans 'Please fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.' %}</p> your
</div> information in our database.' %}</p>
<br> </div>
<div> <br>
{% if credit_card_data.last4 %} <div>
<form role="form" id="payment-form-with-creditcard"novalidate> {% if credit_card_data.last4 %}
<h5 class="billing-head">Credit Card</h5> <form role="form" id="payment-form-with-creditcard" novalidate>
<h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5> <h5 class="billing-head">Credit Card</h5>
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5> <h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
<input type="hidden" name="credit_card_needed" value="false"/> <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
</form> <input type="hidden" name="credit_card_needed" value="false"/>
</form>
<div class="row">
<br>
<div class="col-xs-12>
<p style="font-family: Lato;border: 1px solid #a1a1a1;border-radius: 3px; padding: 5px; ">{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}</p>
</div>
<div class="col-xs-12">
<div class="col-xs-6 pull-right">
<button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;" id="payment_button_with_creditcard" class="btn btn-success" type="submit">
{% trans "Submit" %}
</button>
</div>
</div>
</div>
{% else %}
<form role="form" id="payment-form" novalidate>
<div class="row"> <div class="row">
<div class="form-group col-xs-12"> <br>
<div id="card-element"> <div class="col-xs-12>
<!-- a Stripe Element will be inserted here. --> <p>
</div> {% trans " You are not making any payment yet. After submitting your card
information,
you
will be taken to the Confirm Order Page.
" %}
</p>
</div> </div>
</div> <div class="col-xs-12">
<div id="card-errors" role="alert"></div> <div class="col-xs-6 pull-right">
<div class="row"> <button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;"
<br> id="payment_button_with_creditcard" class="btn btn-success"
<div class="col-xs-12"> type="submit">
<p style="font-family: Lato;border: 1px solid #a1a1a1;border-radius: 3px; padding: 5px;"> {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}</p> {% trans "Submit" %}
</div> </button>
<div class="col-xs-12"> </div>
<div class="col-xs-6 pull-right"> </div>
<button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;" class="btn btn-success" type="submit">{% trans "Submit" %}</button> </div>
</div> {% else %}
</div>
</div>
<div class="row" style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p>
</div>
</div>
{% if paymentError %}
<div class="row">
<div class="col-xs-12">
<p>
{% bootstrap_alert paymentError alert_type='danger' %}
</p>
</div>
</div>
{% endif %}
</form> <form role="form" id="payment-form" novalidate>
{% endif %} <div class="row">
<div class="form-group col-xs-12">
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
</div>
</div>
<div id="card-errors" role="alert"></div>
<div class="row">
<br>
<div class="col-xs-12">
<p style="font-family: Lato;border: 1px solid #a1a1a1;border-radius: 3px; padding: 5px;">
{% trans "You are not making any payment yet. After submitting your card
information, you will be taken to the Confirm Order Page." %}</p>
</div>
<div class="col-xs-12">
<div class="col-xs-6 pull-right">
<button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;"
class="btn btn-success" type="submit">{% trans "Submit" %}
</button>
</div>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p>
</div>
</div>
{% if paymentError %}
<div class="row">
<div class="col-xs-12">
<p>
{% bootstrap_alert paymentError alert_type='danger' %}
</p>
</div>
</div>
{% endif %}
</div>
</div> </form>
</div> {% endif %}
</div>
</div> </div>
</div>
</div>
</div>
</div>
</div> </div>
@ -134,7 +161,7 @@
<script type="text/javascript"> <script type="text/javascript">
(function () { (function () {
window.stripeKey = "{{stripe_key}}"; window.stripeKey = "{{stripe_key}}";
window.current_lan = "{{LANGUAGE_CODE}}"; window.current_lan = "{{LANGUAGE_CODE}}";
})(); })();
@ -143,7 +170,9 @@
{% if credit_card_data.last4 and credit_card_data.cc_brand %} {% if credit_card_data.last4 and credit_card_data.cc_brand %}
<script type="text/javascript"> <script type="text/javascript">
(function () {window.hasCreditcard = true;})(); (function () {
window.hasCreditcard = true;
})();
</script> </script>
{%endif%} {%endif%}