Added serializer to VM model, Rewrite django hosting view , Created price selection templates , Added price selector with automatic price change
This commit is contained in:
Levi
parent
3015399692
commit
cb51e08cef
7 changed files with 412 additions and 5 deletions
|
|
@ -13,12 +13,17 @@
|
|||
|
||||
<title>{{ domain }} - {{ hosting }} hosting as easy as possible</title>
|
||||
|
||||
|
||||
<!-- Bootstrap Core CSS -->
|
||||
<link href="{% static 'hosting/css/bootstrap.min.css' %}" rel="stylesheet">
|
||||
|
||||
<link href="{% static 'hosting/css/pricing.css' %}" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link href="{% static 'hosting/css/landing-page.css' %}" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
|
||||
<link href="{% static 'hosting/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
|
||||
|
|
@ -215,7 +220,9 @@
|
|||
<!-- Page Features -->
|
||||
<div class="row text-center">
|
||||
|
||||
<div class="col-md-3 col-sm-6 hero-feature">
|
||||
{% include "hosting/pricing.html" %}
|
||||
|
||||
<!-- <div class="col-md-3 col-sm-6 hero-feature">
|
||||
<div class="thumbnail">
|
||||
<img class="relsonsive" src="{% static 'hosting/img/economy.jpg' %}" alt="">
|
||||
<div class="caption">
|
||||
|
|
@ -276,7 +283,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
|
|
@ -384,9 +391,24 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Pricing data -->
|
||||
{% if vm_types %}
|
||||
<script type="text/javascript">
|
||||
(function () {window.VMTypesData = "{{vm_types|safe}}";})();
|
||||
</script>
|
||||
{%endif%}
|
||||
|
||||
|
||||
<!-- Lodash -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.1/lodash.min.js"></script>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="{% static 'hosting/js/jquery.js' %}"></script>
|
||||
|
||||
<!-- Pricing -->
|
||||
<script src="{% static 'hosting/js/pricing.js' %}"></script>
|
||||
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="{% static 'hosting/js/bootstrap.min.js' %}"></script>
|
||||
|
||||
|
|
|
|||
186
hosting/templates/hosting/pricing.html
Normal file
186
hosting/templates/hosting/pricing.html
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<div class="row white">
|
||||
<div class="block">
|
||||
|
||||
{% for vm in vm_types %}
|
||||
<div class="row well pricing">
|
||||
<form class="form-inline p-green" role="form">
|
||||
<div class="btn-group col-md-3">
|
||||
<div class="form-group">
|
||||
|
||||
<big>
|
||||
{{vm.hosting_company_name}}
|
||||
</big>
|
||||
|
||||
<p>
|
||||
{{vm.description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group col-md-2">
|
||||
<div class="form-group">
|
||||
<label for="cores">Cores:</label>
|
||||
<select class="form-control" id="cores">
|
||||
{% with ''|center:10 as range %}
|
||||
{% for _ in range %}
|
||||
<option>{{ forloop.counter }}</option>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group col-md-2">
|
||||
<label for="memory">Memory: </label>
|
||||
<div class="form-group">
|
||||
|
||||
<select class="form-control short-input" id="memory">
|
||||
{% with ''|center:50 as range %}
|
||||
{% for _ in range %}
|
||||
<option>{{ forloop.counter }}</option>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
</select>
|
||||
<span>GiB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<label for="Disk Size">Disk Size: </label>
|
||||
<input class="form-control short-input" type="number" id="disk_space" min="0" value="0"/>
|
||||
<span>GiB</span>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<h3>$199</h3>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<button type="submit" class="btn btn-default">Buy it</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <button type="submit" class="btn btn-default">Submit</button> -->
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for vm in vm_types %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||||
<form class="form-inline">
|
||||
<ul class="pricing {% cycle 'p-green' 'p-yel' 'p-red' 'p-blue' %}">
|
||||
<li style="height:200px;">
|
||||
<!-- <img src="http://bread.pp.ua/n/settings_g.svg" alt=""> -->
|
||||
<h3 >{{vm.hosting_company_name}}</h3>
|
||||
</li>
|
||||
<li>
|
||||
<!-- Single button -->
|
||||
<div class="btn-group">
|
||||
<div class="form-group">
|
||||
<label for="cores">Cores: </label>
|
||||
<select class="form-control cores-selector" id="{{vm.hosting_company}}-cores" data-vm-type="{{vm.hosting_company}}">
|
||||
{% with ''|center:10 as range %}
|
||||
{% for _ in range %}
|
||||
<option>{{ forloop.counter }}</option>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="row">
|
||||
<div class="btn-group">
|
||||
<div class="form-group">
|
||||
<label for="memory">Memory: </label>
|
||||
<select class="form-control memory-selector" id="{{vm.hosting_company}}-memory" data-vm-type="{{vm.hosting_company}}">
|
||||
{% with ''|center:50 as range %}
|
||||
{% for _ in range %}
|
||||
<option>{{ forloop.counter }}</option>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
</select>
|
||||
<span>GiB</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="row">
|
||||
<div class="form-group">
|
||||
<label for="Disk Size">Disk Size: </label>
|
||||
<input class="form-control short-input disk-space-selector" type="number" id="{{vm.hosting_company}}-disk_space" min="1" value="1" data-vm-type="{{vm.hosting_company}}"/>
|
||||
<span>GiB</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h3 id="{{vm.hosting_company}}-final-price">select</h3>
|
||||
<span>per month</span>
|
||||
</li>
|
||||
<li>
|
||||
<button>Buy it</button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<!--
|
||||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||||
<ul class="pricing p-yel">
|
||||
<li>
|
||||
<img src="http://bread.pp.ua/n/settings_y.svg" alt="">
|
||||
<big>Good</big>
|
||||
</li>
|
||||
<li>Responsive Design</li>
|
||||
<li>Color Customization</li>
|
||||
<li>HTML5 & CSS3</li>
|
||||
<li>Styled elements</li>
|
||||
<li>
|
||||
<h3>$299</h3>
|
||||
<span>per month</span>
|
||||
</li>
|
||||
<li>
|
||||
<button>Join Now</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||||
<ul class="pricing p-red">
|
||||
<li>
|
||||
<img src="http://bread.pp.ua/n/settings_r.svg" alt="">
|
||||
<big>Ultima</big>
|
||||
</li>
|
||||
<li>Responsive Design</li>
|
||||
<li>Color Customization</li>
|
||||
<li>HTML5 & CSS3</li>
|
||||
<li>Styled elements</li>
|
||||
<li>
|
||||
<h3>$399</h3>
|
||||
<span>per month</span>
|
||||
</li>
|
||||
<li>
|
||||
<button>Join Now</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-3">
|
||||
<ul class="pricing p-blue">
|
||||
<li>
|
||||
<img src="http://bread.pp.ua/n/settings_b.svg" alt="">
|
||||
<big>Vip</big>
|
||||
</li>
|
||||
<li>Responsive Design</li>
|
||||
<li>Color Customization</li>
|
||||
<li>HTML5 & CSS3</li>
|
||||
<li>Styled elements</li>
|
||||
<li>
|
||||
<h3>$799</h3>
|
||||
<span>per month</span>
|
||||
</li>
|
||||
<li>
|
||||
<button>Join Now</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
|
||||
|
||||
</div><!-- /block -->
|
||||
</div><!-- /row -->
|
||||
Loading…
Add table
Add a link
Reference in a new issue