From c2b5c620147231de927719384b92091a94fb31ab Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 15 Sep 2017 00:49:39 +0530
Subject: [PATCH] hosting calculator added

---
 .../static/hosting/css/price_calculator.css   | 186 ++++++++++++++++++
 hosting/templates/hosting/base_short.html     |   4 +-
 .../templates/hosting/calculator_form.html    | 123 ++++++++++++
 .../hosting/create_virtual_machine.html       |  87 +++-----
 4 files changed, 334 insertions(+), 66 deletions(-)
 create mode 100644 hosting/static/hosting/css/price_calculator.css
 create mode 100644 hosting/templates/hosting/calculator_form.html

diff --git a/hosting/static/hosting/css/price_calculator.css b/hosting/static/hosting/css/price_calculator.css
new file mode 100644
index 00000000..bf99c66f
--- /dev/null
+++ b/hosting/static/hosting/css/price_calculator.css
@@ -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;
+}
\ No newline at end of file
diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html
index 63a0681d..becb7873 100644
--- a/hosting/templates/hosting/base_short.html
+++ b/hosting/templates/hosting/base_short.html
@@ -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:// -->
diff --git a/hosting/templates/hosting/calculator_form.html b/hosting/templates/hosting/calculator_form.html
new file mode 100644
index 00000000..cdba4809
--- /dev/null
+++ b/hosting/templates/hosting/calculator_form.html
@@ -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>
diff --git a/hosting/templates/hosting/create_virtual_machine.html b/hosting/templates/hosting/create_virtual_machine.html
index f876ad76..5a5e789e 100644
--- a/hosting/templates/hosting/create_virtual_machine.html
+++ b/hosting/templates/hosting/create_virtual_machine.html
@@ -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 %}
+{% block content %}
+<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%}
+{%endblock%}
\ No newline at end of file