diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 06456249..a1264ba3 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/datacenterlight/static/datacenterlight/css/landing-page.css @@ -528,6 +528,10 @@ h6 { position: relative; text-align: right; } +.price-calc-section .text .description{ + font-size: 20px; + text-align: right; +} .price-calc-section .text .section-heading::before{ content: ""; position: absolute; @@ -565,9 +569,13 @@ h6 { padding: 12px; border-bottom: 1px solid rgba(128, 128, 128, 0.3); position: relative; + display: flex; + justify-content: center; + align-items: center; } .price-calc-section .card .description span{ font-size: 20px; + margin-left: 4px; } .price-calc-section .card .description i{ color: #29427A; @@ -588,6 +596,25 @@ h6 { } .price-calc-section .card .btn{ margin-top: 20px; + font-size: 20px; + width: 200px; +} +.price-calc-section .card .select-configuration select{ + outline: none; + background: #fff; + border-color: #d0d0d0; + height: 40px; + width: 200px; + text-align: center; + font-size: 18px; +} +.price-calc-section .card .check-ip{ + font-size: 18px; +} + +.price-calc-section .card .check-ip input[type=checkbox]{ + font-size: 17px; + margin: 0 8px; } @media(max-width:990px) { diff --git a/datacenterlight/static/datacenterlight/js/main.js b/datacenterlight/static/datacenterlight/js/main.js index 3ea4c5ef..525dce45 100644 --- a/datacenterlight/static/datacenterlight/js/main.js +++ b/datacenterlight/static/datacenterlight/js/main.js @@ -5,7 +5,23 @@ /* --------------------------------------------- Scripts initialization --------------------------------------------- */ - + var cardPricing ={ + 'cpu': { + 'id': 'coreValue', + 'value': 1, + 'limit': 48 + }, + 'ram': { + 'id': 'ramValue', + 'value': 1, + 'limit': 200 + }, + 'storage': { + 'id': 'storageValue', + 'value': 1, + 'limit': 500 + } + } $(window).load(function(){ @@ -16,6 +32,7 @@ _navScroll(); _initScroll(); _initNavUrl(); + _initPricing(); }); @@ -41,7 +58,6 @@ function _navScroll(){ if($(window).scrollTop() > 10 ){ - console.log($(window).scrollTop()); $(".navbar").removeClass("navbar-transparent"); $(".navbar-default .btn-link").css("color", "#777"); }else{ @@ -65,6 +81,39 @@ } } + function _initPricing(){ + _fetchPricing(); + + $('.fa-minus-circle.left').click(function(event){ + var data = $(this).data('minus'); + + if(cardPricing[data].value > 1){ + cardPricing[data].value --; + } + _fetchPricing(); + }); + $('.fa-plus-circle.right').click(function(event){ + var data = $(this).data('plus'); + if(cardPricing[data].value < cardPricing[data].limit){ + cardPricing[data].value ++; + } + _fetchPricing(); + }); + } + function _fetchPricing(){ + Object.keys(cardPricing).map(function(element){ + $('#'+cardPricing[element].id).text(cardPricing[element].value); + $('input[name='+element+']').val(cardPricing[element].value); + }); + _calcPricing(); + } + + function _calcPricing(){ + var total = (cardPricing['cpu'].value * 5) + (2* cardPricing['ram'].value) + (0.6* cardPricing['storage'].value) + + $("#total").text(total); + $('input[name=total]').val(total); + } function form_success(){ $('#sucessModal').modal('show'); } diff --git a/datacenterlight/templates/datacenterlight/index.html b/datacenterlight/templates/datacenterlight/index.html index d523d50b..1f35f4b3 100755 --- a/datacenterlight/templates/datacenterlight/index.html +++ b/datacenterlight/templates/datacenterlight/index.html @@ -243,7 +243,7 @@

{% trans "15 GiB storage(SSD)" %}

- {% trans "Buy Now!" %} + {% trans "Buy Now!" %} diff --git a/datacenterlight/templates/datacenterlight/pricing.html b/datacenterlight/templates/datacenterlight/pricing.html index 5f3a071a..b23bc91d 100644 --- a/datacenterlight/templates/datacenterlight/pricing.html +++ b/datacenterlight/templates/datacenterlight/pricing.html @@ -52,8 +52,8 @@ - - + +