hosting calculator added
This commit is contained in:
Arvind Tiwari
parent
821f854fc9
commit
c2b5c62014
4 changed files with 334 additions and 66 deletions
186
hosting/static/hosting/css/price_calculator.css
Normal file
186
hosting/static/hosting/css/price_calculator.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -25,6 +25,7 @@
|
||||||
<link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
|
<link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
|
||||||
<link href="{% static 'hosting/css/virtual-machine.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/dashboard.css' %}" rel="stylesheet">
|
||||||
|
<link href="{% static 'hosting/css/price_calculator.css' %}" rel="stylesheet">
|
||||||
{% block css_extra %}
|
{% block css_extra %}
|
||||||
{% endblock 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 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 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="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 -->
|
<!-- 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:// -->
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||||
|
|
|
||||||
123
hosting/templates/hosting/calculator_form.html
Normal file
123
hosting/templates/hosting/calculator_form.html
Normal 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>
|
||||||
|
|
@ -1,70 +1,31 @@
|
||||||
{% extends "hosting/base_short.html" %}
|
{% extends "hosting/base_short.html" %}
|
||||||
{% load staticfiles bootstrap3 i18n %}
|
{% load staticfiles bootstrap3 i18n %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div>
|
<div class="dashboard-container">
|
||||||
<div class="dashboard-container" >
|
<div class="row">
|
||||||
<div class="row">
|
<div class="col-sm-6">
|
||||||
|
<div class="dashboard-container-head">
|
||||||
<div class="col-md-12">
|
<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>
|
||||||
<br/>
|
{% if messages %}
|
||||||
{% if messages %}
|
<div class="alert alert-warning">
|
||||||
<div class="alert alert-warning">
|
{% for message in messages %}
|
||||||
{% for message in messages %}
|
<span>{{ message }}</span>
|
||||||
<span>{{ message }}</span>
|
{% endfor %}
|
||||||
{% endfor %}
|
</div>
|
||||||
</div>
|
{% endif %}
|
||||||
{% 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>
|
</div>
|
||||||
{% if not error %}
|
</div>
|
||||||
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{%endblock%}
|
{%endblock%}
|
||||||
Loading…
Reference in a new issue