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

hosting calculator added

Browse source
This commit is contained in:
Arvind Tiwari 2017-09-15 00:49:39 +05:30
parent 821f854fc9
commit c2b5c62014
4 changed files with 334 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
hosting/static/hosting/css/price_calculator.css Normal file
View file

@ -0,0 +1,186 @@
/*Pricing page*/
.price-calc-section {
padding: 80px 40px !important;
background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
display: flex;
/*font-family: 'Lato', sans-serif;*/
/* font-weight: normal; */
}
.price-calc-section .text {
width: 50%;
}
.price-calc-section .text .section-heading {
font-size: 48px;
line-height: 48px;
padding-bottom: 27px;
color: #3a3a3a;
letter-spacing: 1px;
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;
bottom: 0;
background: #29427A;
height: 7px;
width: 70px;
right: 0;
}
.price-calc-section .card {
width: 50%;
margin: 0 auto;
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
padding-bottom: 40px;
border-radius: 7px;
text-align: center;
/* margin-right: auto; */
max-width: 400px;
position: relative;
}
.price-calc-section .landing {
width: 100% !important;
}
.no-padding {
padding: 0 !important;
}
.price-calc-section .card .img-beta {
position: absolute;
top: 5px;
width: 60px;
left: 3px;
}
.price-calc-section .card .title {
padding: 15px 40px;
}
.price-calc-section .card .title h3 {
/*font-family: 'Lato', sans-serif;*/
font-weight: normal;
}
.price-calc-section .card .price {
background: #5A74AF;
padding: 22px;
color: #fff;
font-size: 32px;
}
.price-calc-section .card .price .price-text {
font-size: 14px;
}
.price-calc-section .card .description {
padding: 12px;
position: relative;
display: flex;
justify-content: space-around !important;
align-items: center !important;
}
.price-calc-section .card .description span {
font-size: 16px;
margin-left: 4px;
margin-left: 0px;
/* justify-self: start; */
width: 30%;
text-align: left;
}
.price-calc-section .card .description .select-number{
font-size: 20px;
text-align: center;
width: 85px;
}
.price-calc-section .card .description i {
color: #29427A;
cursor: pointer;
font-size: 24px;
}
.price-calc-section .card .description .left {
margin-right: 7px;
}
.price-calc-section .card .description .right {
margin-left: 7px;
}
.price-calc-section .card .descriptions {
padding: 10px 30px;
}
.price-calc-section .card .description p {
margin: 0;
}
.price-calc-section .card .btn {
margin-top: 20px;
font-size: 20px;
width: 200px;
border: none;
}
.price-calc-section .card .select-configuration select {
outline: none;
background: #fff;
border-color: #d0d0d0;
height: 40px;
width: 200px;
text-align: center;
font-size: 16px;
margin-left: 10px;
}
.price-calc-section .card .check-ip {
font-size: 18px;
}
.price-calc-section .card .justify-center {
justify-content: center !important;
}
.price-calc-section .card .description.input label {
font-size: 15px;
font-weight: 700;
/*font-weight: 800;*/
/*font-family: 'Lato';*/
margin-bottom: 0;
width: 40px;
}
/*Changed class****.price-calc-section .card .description.input input*/
.price-calc-section .card .description input {
width: 200px;
font-size: 14px;
text-align: left;
padding: 5px 10px;
border-radius: 4px;
border: 1px solid #d0d0d0;
background: #fff;
margin-left: 10px;
}
.price-calc-section .card .check-ip input[type=checkbox] {
font-size: 17px;
margin: 0 8px;
}

4
hosting/templates/hosting/base_short.html
View file

@ -25,6 +25,7 @@
<link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/virtual-machine.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/dashboard.css' %}" rel="stylesheet">
<link href="{% static 'hosting/css/price_calculator.css' %}" rel="stylesheet">
{% block css_extra %}
{% endblock css_extra %}
@ -33,9 +34,6 @@
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,500,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="{% static 'hosting/css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

123
hosting/templates/hosting/calculator_form.html Normal file
View file

@ -0,0 +1,123 @@
{% load staticfiles i18n%}
<form id="order_form" method="POST" action="" data-toggle="validator" role="form">
{% csrf_token %}
<div class="title">
<h3>{% trans "VM hosting" %} </h3>
</div>
<div class="price">
<span id="total">15</span>
<span>CHF/{% trans "month" %}</span>
<div class="price-text">
<p>{% trans "VAT included" %}</p>
</div>
</div>
<div class="descriptions">
<div class="description form-group">
<p>{% trans "Hosted in Switzerland" %}</p>
</div>
<div class="form-group">
<div class="description input">
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
<input class="input-price select-number" type="number" min="1" max="48" id="coreValue" name="cpu"
data-error="{% trans 'Please enter a value in range 1 - 48.' %}" required>
<span> Core</span>
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
</div>
<div class="help-block with-errors">
{% for message in messages %}
{% if 'cores' in message.tags %}
<ul class="list-unstyled"><li>
{{ message|safe }}
</li></ul>
{% endif %}
{% endfor %}
</div>
</div>
<div class="form-group">
<div class="description input">
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
<input id="ramValue" class="input-price select-number" type="number" min="2" max="200" name="ram"
data-error="{% trans 'Please enter a value in range 2 - 200.' %}" required>
<span> GB RAM</span>
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
</div>
<div class="help-block with-errors">
{% for message in messages %}
{% if 'memory' in message.tags %}
<ul class="list-unstyled"><li>
{{ message|safe }}
</li></ul>
{% endif %}
{% endfor %}
</div>
</div>
<div class="form-group">
<div class="description input">
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
<input id="storageValue" class="input-price select-number" type="number" min="10" max="2000" step="10"
name="storage" data-error="{% trans 'Please enter a value in range 10 - 2000.' %}" required>
<span>{% trans "GB Storage (SSD)" %}</span>
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
</div>
<div class="help-block with-errors">
{% for message in messages %}
{% if 'storage' in message.tags %}
<ul class="list-unstyled"><li>
{{ message|safe }}
</li></ul>
{% endif %}
{% endfor %}
</div>
</div>
<div class="description select-configuration input form-group justify-center">
<label for="config">OS</label>
<select name="config" id="">
{% for template in templates %}
<option value="{{template.opennebula_vm_template_id}}">{{template.name}}</option>
{% endfor %}
</select>
</div>
<input type="hidden" name="total">
<!--<div class="description check-ip">
<input type="checkbox" name="ipv6"> Ipv6 Only<br>
</div>-->
<div class="form-group">
<div class="description input justify-center">
<label for="name" class="control-label">{% trans "Name"%}</label>
<input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}"
data-minlength="3" data-error="{% trans 'Please enter your name.' %}" required>
</div>
<div class="help-block with-errors">
{% for message in messages %}
{% if 'name' in message.tags %}
<ul class="list-unstyled">
<li>
{{ message|safe }}
</li>
</ul>
{% endif %}
{% endfor %}
</div>
</div>
<div class="form-group">
<div class="description input justify-center">
<label for="email" class="control-label">{% trans "Email"%}</label>
<input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control"
placeholder="{% trans 'Your Email' %}"
data-error="{% trans 'Please enter a valid email address.' %}" required>
</div>
<div class="help-block with-errors">
{% for message in messages %}
{% if 'email' in message.tags %}
<ul class="list-unstyled">
<li>
{{ message|safe }}
</li>
</ul>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<input type="submit" class="btn btn-primary disabled" value="{% trans 'Continue' %}"></input>
</form>

85
hosting/templates/hosting/create_virtual_machine.html
View file

@ -1,70 +1,31 @@
{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %}
<div>
<div class="dashboard-container" >
<div class="row">
<div class="col-md-12">
<br/>
{% if messages %}
<div class="alert alert-warning">
{% for message in messages %}
<span>{{ message }}</span>
{% endfor %}
</div>
{% endif %}
<div class="dashboard-container">
<div class="row">
<div class="col-sm-6">
<div class="dashboard-container-head">
<h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/plusVM.svg' %}" class="un-icon" style="margin-top: -18px;width: 42px;height: 42px;"> {% trans "Create VM" %}</h3>
{% if messages %}
<div class="alert alert-warning">
{% for message in messages %}
<span>{{ message }}</span>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<div class="col-sm-6">
<div class="price-calc-section no-padding">
<div class="landing card">
<img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
<div class="caption">
{% include "hosting/calculator_form.html" %}
</div>
</div>
{% if not error %}
<div class="dashboard-title">
<h3>{% trans "New Virtual Machine"%} </h3>
<hr/>
</div>
<form method="POST" action="">
{% csrf_token %}
<div class="step-title">
<h4>{% trans "Step 1. Select VM Template:" %} </h4>
</div>
<div class="parent-container">
<div class="container-os owl-carousel owl-theme" id="containerOs">
{% for template in templates %}
<div class="os-circle" data-id="{{template.id}}">
<span class="text" >{{template.name}}</span>
</div>
{% endfor %}
</div>
<input type="hidden" name="vm_template_id">
</div>
<div class="step-title">
<h4>{% trans "Step2. Select VM Configuration" %}</h4>
</div>
<div class="parent-container">
<div class="container-os config owl-carousel owl-theme">
{% for config in configuration_options %}
<div class="config-box" data-id="{{config.id}}" data-price="{{config.price|floatformat}}">
<span>CORE: {{config.cpu|floatformat}}</span>
<span>RAM: {{config.memory|floatformat}} GB</span>
<span>SSD: {{config.disk_size|floatformat}} GB</span>
</div>
{% endfor %}
</div>
<input type="hidden" name="configuration">
</div>
<div class="container-button">
<div class="price">
<span class="label-price">{% trans "Price " %}<span id="priceValue">0</span>{% trans "CHF/Month" %}</span>
</div>
<button class="btn btn-success" >{% trans "Start VM"%} </button>
</div>
</form>
{% endif %}
</div>
</div>
</div>
</div>
{%endblock%}