diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css index 0c927239..bdc0b7db 100644 --- a/hosting/static/hosting/css/landing-page.css +++ b/hosting/static/hosting/css/landing-page.css @@ -4,14 +4,15 @@ * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ - @font-face { font-family: 'Lato-Regular'; src: url('../fonts/Lato/Lato-Regular.ttf'); } + @font-face { src: url('../fonts/Lato/Lato-Black.ttf'); } + @font-face { font-family: 'Lato-Light'; src: url('../fonts/Lato/Lato-Light.ttf'); @@ -33,6 +34,7 @@ h6 { font-family: 'Lato-Regular', sans-serif; font-weight: 300; } + .topnav { font-size: 14px; } @@ -191,17 +193,19 @@ h6 { float: right; margin-top: 0; } + /*------Auth section---------*/ -.auth-container{ +.auth-container { height: 100vh; position: relative; } -.auth-bg{ + +.auth-bg { background: url(../img/auth-bg.jpg); position: fixed; left: 0; top: 0; - width: 100%; + width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center center; @@ -209,7 +213,8 @@ h6 { background-attachment: fixed; } -.auth-bg::before{ + +.auth-bg::before { content: ""; position: absolute; top: 0; @@ -219,26 +224,30 @@ h6 { background: rgba(75, 75, 101, 0.55); z-index: 1; } -.auth-container .container{ + +.auth-container .container { z-index: 1000; } -.auth-container .auth-content{ + +.auth-container .auth-content { width: 100%; margin: 0 auto; max-width: 390px; } -.auth-container .auth-center{ - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%); + +.auth-container .auth-center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); width: 100%; } -.auth-container .auth-title{ +.auth-container .auth-title { margin-bottom: 50px; } -.auth-container .auth-title h2{ + +.auth-container .auth-title h2 { color: #fff; font-size: 44px; text-align: center; @@ -247,7 +256,8 @@ h6 { margin-bottom: 30px; position: relative; } -.auth-container .auth-title h2::after{ + +.auth-container .auth-title h2::after { content: ""; position: absolute; bottom: -20px; @@ -258,17 +268,17 @@ h6 { transform: translate(-50%, 0); } -.auth-box{ +.auth-box { background: #fff; padding: 0; padding-bottom: 30px; 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; z-index: 10; } -.auth-box .section-heading{ +.auth-box .section-heading { color: #5a5a5a; padding-top: 30px; padding-bottom: 5px; @@ -279,42 +289,51 @@ h6 { border-radius: 3px 3px 0px 0px; margin: 0 auto; } -.auth-box .form{ + +.auth-box .form { padding: 20px; width: 80%; margin: 0 auto; } -.auth-box .form .red{ + +.auth-box .form .red { 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; font-size: 17px; text-transform: uppercase; } -.auth-box .form .form-control{ + +.auth-box .form .form-control { height: 44px; font-size: 16px; } + .auth-box .auth-footer { text-align: center; padding: 10px; } -.auth-box .auth-footer .text{ + +.auth-box .auth-footer .text { color: #777; } -.auth-box .auth-footer .links a{ - color: #1e94cc; -} -.auth-box .auth-footer .links a:hover{ + +.auth-box .auth-footer .links a { color: #1e94cc; } -.auth-box.sign-up{ +.auth-box .auth-footer .links a:hover { + color: #1e94cc; +} + +.auth-box.sign-up { padding-bottom: 5px; } -.auth-box.sign-up .form{ + +.auth-box.sign-up .form { padding: 15px 20px 0 20px; } @@ -325,6 +344,7 @@ h6 { line-height: 30px; font-family: 'Lato' !important; } + .sign-up-message a { font-size: 18px; color: #1e94cc !important; @@ -353,38 +373,47 @@ h6 { ul.banner-social-buttons > li:last-child { margin-bottom: 0; } + .auth-box .form { padding: 15px 0px 0 0; } + .auth-box.sign-up .form { padding: 15px 0px 0 0; } + .auth-box .form .form-control { height: 44px; font-size: 13px; } + .auth-container .auth-title { display: none; } } + @media (max-width: 540px) { - .auth-container .auth-title h2{ + .auth-container .auth-title h2 { font-size: 32px; width: 90%; margin-bottom: 50px; } - .auth-container.auth-signup .auth-title h2{ + + .auth-container.auth-signup .auth-title h2 { font-size: 20px; width: 90%; margin-bottom: 50px; } + .auth-box .form { width: 90%; } + .auth-box .section-heading { font-size: 15px; } } + footer { padding: 2%; background-color: #f8f8f8; @@ -418,3 +447,138 @@ a.unlink:hover { 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; + } +} diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html index faacee82..7f3aa0ab 100644 --- a/hosting/templates/hosting/payment.html +++ b/hosting/templates/hosting/payment.html @@ -2,129 +2,156 @@ {% load staticfiles bootstrap3 i18n %} {% block content %} -
-
-
-
-
-
-
-

{%trans "Billing Amount" %}

-
-
- - -

{%trans "Cores"%} {{request.session.specs.cpu|floatformat}}

-
-

{%trans "Memory"%} {{request.session.specs.memory|floatformat}} GB

-
-

{%trans "Disk space"%} {{request.session.specs.disk_size|floatformat}} GB

-
-

{%trans "Configuration"%} {{request.session.template.name}}

-
-

Total

{{request.session.specs.price }} CHF

-
-
-
-
- -
-
-

{%trans "Billing Address"%}

-
-
- {% for field in form %} +
+
+
+
+

Your Order

+
+
+ Cores +
+
+ Memory +
+
+ Disk space +
+
+ Configuration +
+
+
+
+ 1 +
+
+ 2 GB +
+
+ 10 GB +
+
+ CentOS 7 +
+
+
+
+ Total including VAT +
+
+
+
15CHF
+
+
+
+
+
+
+
+

{%trans "Billing Address"%}

+
+ + {% for field in form %} {% csrf_token %} - {% bootstrap_field field show_label=False type='fields'%} - {% endfor %} - {% bootstrap_form_errors form type='non_fields'%} - -
-
-
-
-
-

{%trans "Credit Card"%}

-
-
-
-

{% trans 'Please fill in your credit card information below. We are using Stripe for payment and do not store your information in our database.' %}

-
-
-
- {% if credit_card_data.last4 %} -
-
Credit Card
-
Last 4: *****{{credit_card_data.last4}}
-
Type: {{credit_card_data.cc_brand}}
- -
+ {% bootstrap_field field show_label=False type='fields'%} + {% endfor %} + {% bootstrap_form_errors form type='non_fields'%} + +
+
+

{%trans "Credit Card"%}

+
+
+
+

{% trans 'Please fill in your credit card information below. We are using Stripe for payment and do not + store + your + information in our database.' %}

+
+
+
+ {% if credit_card_data.last4 %} +
+
Credit Card
+
Last 4: *****{{credit_card_data.last4}}
+
Type: {{credit_card_data.cc_brand}}
+ +
-
-
-
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}

-
-
-
- -
-
-
- {% else %} - - -
-
-
- -
+
+
-
- -
-
-
-

{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}

-
-
-
- -
-
-
- - {% if paymentError %} -
-
-

- {% bootstrap_alert paymentError alert_type='danger' %} -

-
-
- {% endif %} +
+
+ +
+
+
+ {% else %} -
- {% endif %} +
+
+
+
+ +
+
+
+ +
+
+
+

+ {% trans "You are not making any payment yet. After submitting your card + information, you will be taken to the Confirm Order Page." %}

+
+
+
+ +
+
+
+ + {% if paymentError %} +
+
+

+ {% bootstrap_alert paymentError alert_type='danger' %} +

+
+
+ {% endif %} -
-
-
-
-
+ + + {% endif %} + +
+
+
+
+
@@ -134,7 +161,7 @@ {%endif%}