Attempted manual merge to avoid conflicts

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -289,6 +289,10 @@ h6 {
     align-items: center;
     position: relative;
 }
+.intro-pricing.success-pricing{
+    height: 100vh;
+    max-height: 100vh;
+}
 .intro-pricing::before{
     content: "";
     position: absolute;
@@ -296,7 +300,7 @@ h6 {
     bottom: 0;
     left: 0;
     right: 0;
-    background: rgba(90, 116, 175, 0.8);
+    background: rgba(90, 116, 175, 0.7);
 }
 .intro-pricing .intro-message .section-heading{
     font-size: 45px;
@@ -578,8 +582,8 @@ h6 {
 }
 .price-calc-section .text .section-heading{
     font-family: 'Montserrat-Bold';
-    font-size: 48px;
+    font-size: 50px;
-    line-height: 48px;
+    line-height: 50px;
     padding-bottom: 25px;
     color: #3a3a3a;
     letter-spacing: 1px;
@@ -636,24 +640,22 @@ h6 {
     border-bottom: 1px solid rgba(128, 128, 128, 0.3);
     position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
 }
 
 .price-calc-section .card .description span {
-    font-size: 20px;
+    font-size: 16px;
     margin-left: 4px;
+    margin-left: 0px;
+    /* justify-self: start; */
+    width: 30%;
+    text-align: left;
 }
 .price-calc-section .card .description input{
    font-size: 20px;
     text-align: center;
-    width: 70px;
+    width: 60px;
-}
-.price-calc-section .card .description #coreValue{
-    width: 50px;
-}
-.price-calc-section .card .description #ramValue{
-    width: 50px;
 }
 .price-calc-section .card .description i{
     color: #29427A;
@@ -684,12 +686,32 @@ h6 {
     height: 40px;
     width: 200px;
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
+    margin-left: 10px;
 }
 .price-calc-section .card .check-ip{
     font-size: 18px;
 }
-
+.price-calc-section .card .description.input{
+    justify-content: center;
+}
+.price-calc-section .card .description.input label{
+    font-size: 15px;
+    font-weight: 800;
+    font-family: 'Montserrat-Regular';
+    margin-bottom: 0;
+    width: 40px;
+}
+.price-calc-section .card .description.input 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;
@@ -814,6 +836,10 @@ h6 {
         transform: translate(-50%, 0);
     }
 
+    .intro-pricing .intro-message .section-heading {
+        font-size: 30px;
+    }
+
     .price-calc-section{
         flex-direction: column;
         padding: 60px 10px !important;
@@ -842,6 +868,14 @@ h6 {
         font-size: 18px;
         text-align: center;
     }
+
+    .price-calc-section .card .description input {
+        font-size: 17px;
+        text-align: center;
+        width: 60px;
+    }
+
+    
 }
 
 @media(max-width:540px) {
@@ -863,8 +897,8 @@ h6 {
         line-height: 25px;
     }
     .price-calc-section .card .description span {
-        font-size: 17px;
+        font-size: 15px;
-        margin-left: 4px;
+        margin-left: 0px;
     }
 
 }
@@ -960,3 +994,7 @@ a#forgotpassword {
 .form-300{
     width: 300px;
 }
+
+.error-message-box{
+    margin-top: 20px;
+}

datacenterlight/templates/datacenterlight/beta_access.html

@@ -18,7 +18,7 @@
 		<span style="color: white">{{ form.email.errors|striptags}}</span>
 	  </div>
  </div>
-  <button type="submit" class="btn btn-default btn-transparent btn-lg">{% trans "Request Newsletter" %}</button>
+  <button type="submit" class="btn btn-default btn-transparent btn-lg">{% trans "Request Beta Access" %}</button>
 </form>
 <script>
 	$('#beta_access').ajaxForm({

datacenterlight/templates/datacenterlight/index.html

@@ -260,7 +260,7 @@
                                 <p>{% trans "10 GB Storage (SSD)" %}</p>
                               </div>
                           </div>
-						  <a href="{% url 'datacenterlight:pricing' %}" class="btn btn-primary">{% trans "Order Now!" %}</a>
+						  <a href="{% url 'datacenterlight:order' %}" class="btn btn-primary">{% trans "Order Now!" %}</a>
                       </div>
                       <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
                     </div>
@@ -276,7 +276,7 @@
             <div class="row">
                 <div class="col-sm-6 col-md-6">
                     <div class="title">
-                        <h2>{% trans "Want to know more? Subscribe to our newsletter!" %}</h2>
+                        <h2>{% trans "I want to have it!" %}</h2>
                     </div>
                 </div>
                 <div class="col-sm-6 col-md-6">

datacenterlight/templates/datacenterlight/order.html

@@ -1,5 +1,7 @@
+{% load staticfiles i18n%}
+{% get_current_language as LANGUAGE_CODE %}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{LANGUAGE_CODE}}">
 
 <head>
 
@@ -9,19 +11,24 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <title>Rails Hosting.ch - Ruby on Rails as easy as possible</title>
+    <title>datacenterlight.ch - Featherlight Swiss VM</title>
 
     <!-- Bootstrap Core CSS -->
-    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="{% static 'datacenterlight/css/bootstrap.min.css' %}" rel="stylesheet">
+
+
     
-    <!-- Custom CSS -->
-    <link href="css/landing-page.css" rel="stylesheet">
 
     <!-- Custom Fonts -->
-    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
+    <!--Import Google Icon Font-->
-    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+     <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+    <link href="{% static 'datacenterlight/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
-    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
+    <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+    <link rel="shortcut icon" href="{% static 'datacenterlight/img/favicon.ico' %}" type="image/x-icon" />
+    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet">
+
+    <!-- Custom CSS -->
+    <link href="{% static 'datacenterlight/css/landing-page.css' %}" rel="stylesheet">
 
     <!-- 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:// -->
@@ -36,7 +43,7 @@
 
     <!-- Navigation -->
     <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
-        <div class="container topnav">
+        <div class="topnav">
             <!-- Brand and toggle get grouped for better mobile display -->
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
@@ -45,109 +52,142 @@
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                <a class="navbar-brand topnav" href="#"><img src="img/logo_black.svg"></a>
+                <a id="logoBlack" class="navbar-brand topnav url" href="{% url 'datacenterlight:index' %}" ><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
+                <a id="logoWhite" class="navbar-brand topnav url" href="{% url 'datacenterlight:index' %}" ><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
             </div>
             <!-- Collect the nav links, forms, and other content for toggling -->
             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                 <ul class="nav navbar-nav navbar-right">
-                    <li>
+                 <!--    <li>
-                        <a href="#how">How it works</a>
+                        <a class="url" href="javascript:void(0)" data-url="#how" >{% trans "What is it" %}</a>
                     </li>
                     <li>
-                        <a href="#your">Your infrastructure</a>
+                        <a class="url" href="javascript:void(0)" data-url="#your"  >{% trans "Scale out" %}</a>
                     </li>
                    <li>
-                        <a href="#our">Our inftrastructure</a>
+                        <a class="url" href="javascript:void(0)" data-url="#our">{% trans "Reliable and light" %}</a>
                     </li>
                     <li>
-                        <a href="#price">Pricing</a>
+                        <a class="url" href="javascript:void(0)" data-url="#price" >{% trans "Buy VM" %}</a>
                     </li>
                     <li>
-                        <a href="#contact">Contact</a>
+                        <a class="url" href="javascript:void(0)" data-url="#contact"  >{% trans "Contact" %}</a>
+                     </li> -->
+
+                  <li class="nav-language">
+                      <div class="select-language">
+                          {% if LANGUAGE_CODE == 'en-us'%} 
+                          <span>English</span>
+                          {% else %}
+                          <span>Deutsch</span>
+                          {% endif %}
+                          <i class="fa fa-globe" aria-hidden="true"></i>
+                      </div>
+                      <div class="drop-language">
+                          {% if LANGUAGE_CODE == 'en-us'%} 
+                          <a class="url" href="{{base_url}}/de/datacenterlight/order" >Deutsch</a>
+                          {% else %}
+                          <a class="url" href="{{base_url}}/en-us/datacenterlight/order" >English</a>
+                          {% endif %}
+                        
+                      </div>
                     </li>
                 </ul>
+
+
             </div>
             <!-- /.navbar-collapse -->
         </div>
         <!-- /.container -->
     </nav>
-
+	<div class="intro-pricing">
-
-    <!-- Header -->
-    <a name="about"></a>
-    <div class="intro-header">
-        <div class="container">
-                <div class="col-md-4">&nbsp;</div><div class="col-md-4">
 
 		<div class="intro-message">
-                      <p><img class="responsive" src="img/Beta.png"></p>
+			<h2 class="section-heading">{% trans "We are cutting down the costs significantly!" %}</h2>
-                      <h2>Order Now </h2>
-                      <p>&nbsp;</p>
-     <!--Location button-->
-     <div class="form-group">
-    <label for="button">Loation<br></label> &nbsp;
-                      <div class="btn-group">
-  <button type="button" class="btn btn-default">Switzerland</button>
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <span class="caret"></span>
-    <span class="sr-only">Location</span>
-  </button>
-  <ul class="dropdown-menu">
-    <li><a href="#">Germany</a></li>
-    <li><a href="#">Switzerland</a></li>
-  </ul>
 		</div>
-<!--/Location button-->
-<p>&nbsp;</p>
-<!--Configuration button-->
-     <form>
-  <div class="form-group">
-    <label for="button">Configuration<br></label>  &nbsp;
-                      <div class="btn-group">
-  <button type="button" class="btn btn-default">Ruby On Rails on Debian 7</button>
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <span class="caret"></span>
-    <span class="sr-only">Configuration</span>
-  </button>
-  <ul class="dropdown-menu">
-    <li><a href="#">Ruby On Rails on Debian 7</a></li>
-    <li><a href="#">Ubuntu 14.04</a></li>
-    <li><a href="#">Debian 7</a></li>
-    <li><a href="#">CentOS 7</a></li>
-  </ul>
-</div>
-<p>VM size sliders to be inserted</p>
-<!--/Configuration button-->
-                      <form>
-  <div class="form-group">
-    <label for="exampleInputEmail1"><br>
-      Email address</label>
-    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-  </div>
-  <div class="form-group">
-    <label for="exampleInputPassword1">Password</label>
-    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-  </div>
-  <div class>
-    <p><a href="#" id="forgotpassword">
-      Forgot password?</a>
-    </p>
-    <p>&nbsp;</p>
-  </div>
-  <button type="submit" class="btn btn-default">Order</button>
-</form></p>
-<ul class="list-inline intro-social-buttons">
 		
-</ul></div>&nbsp;<div class="col-md-4"></div>
+	</div>
+
+	<div class="price-calc-section">
+		<div class="card">
+      <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
+			 <div class="caption">
+            <form id="order_form" method="POST" action="">
+				{% csrf_token %}
+              
+                <div class="title">
+                   <h3>{% trans "VM hosting" %} </h3> 
+                </div>
+              <div class="price">
+                  <span id="total">15</span>
+                  <span>CHF</span>
+              </div>
+              <div class="descriptions">
+                  <div class="description">
+                    <p>{% trans "Hosted in Switzerland" %}</p>
+                  </div>
+                  <div class="description">
+                     <i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
+                     <input class="input-price" type="number"  min="1" max="42" id="coreValue" name="cpu">
+                     <span> Core</span> 
+                     <i class="fa fa-plus-circle right" data-plus="cpu"  aria-hidden="true"></i>
+                  </div>
+                  <div class="description">
+                   <i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
+                    <input id="ramValue" class="input-price" type="number"  min="2" max="200"  name="ram">
+                    <span> GB RAM</span>
+                    <i class="fa fa-plus-circle right" data-plus="ram"  aria-hidden="true"></i>
+                  </div>
+                  <div class="description">
+                  	<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
+                    <input id="storageValue" class="input-price" type="number"  min="10" max="500" step="10" name="storage">
+                    <span>{% trans "GB Storage (SSD)" %}</span>
+                     <i class="fa fa-plus-circle right" data-plus="storage"  aria-hidden="true"></i>
+                  </div>
+                 
+
+                  <div class="description select-configuration input">
+                    <label for="config">OS</label>
+                  	<select name="config" id="">
+						{% for template in templates %}
+                                <option value="{{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="description input">
+                    <label for="name">Name</label>
+                    <input type="text" name="name" placeholder="Your Name">
+                  </div>
+                  <div class="description input">
+                    <label for="email">Email</label>
+                    <input type="email" name="email" placeholder="Your Email">
+                  </div>
+              </div>
+              <input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
+
+            </form>
+          </div>
+          <div>
+				<div id="error_message_box" class="error-message-box"></div>
+          </div>
+		</div>
+
+		<div class="text">
+			<h2 class="section-heading">{% trans "Simple and affordable: Try our virtual machine with featherlight price." %}</h2>
+
+			<div class="description">
+				<p>{% trans "Our VMs are hosted in Glarus, Switzerland, and our website is currently running in BETA mode. If you want more information that you did not find on our website, or if your order is more detailed, or if you encounter any technical hiccups, please contact us at support@datacenterlight.ch, our team will get in touch with you asap." %}</p>
 			</div>
 		</div>
 	</div>
 
-        </div>
-        <!-- /.container -->
 
-    </div>
+    <!-- /.banner -->
-    <!-- /.intro-header -->
 
     <!-- Footer -->
     <footer>
@@ -156,37 +196,84 @@
                 <div class="col-lg-12">
                     <ul class="list-inline">
                         <li>
-                            <a href="#">Home</a>
+                            <a href="#">{% trans "Home" %}</a>
                         </li>
                         <li class="footer-menu-divider">&sdot;</li>
                         <li>
-                            <a href="#about">How it works</a></li>
+                            <a href="#about">{% trans "What is it" %}</a></li>
                         <li class="footer-menu-divider">&sdot;</li>
                         <li>
-                            <a href="#about">Your infrastructure</a></li>
+                            <a href="#about">{% trans "Scale out" %}</a></li>
                         <li>&sdot;</li>
                         <li>
-                            <a href="#about">Our infrastructure</a></li>
+                            <a href="#about">{% trans "Reliable and light" %}</a></li>
                         <li class="footer-menu-divider">&sdot;</li>
                         <li>
-                            <a href="#services">Pricing</a>
+                            <a href="#services">{% trans "Pricing" %}</a>
                         </li>
                         <li class="footer-menu-divider">&sdot;</li>
                         <li>
-                            <a href="#contact">Contact</a>
+                            <a href="#contact">{% trans "Contact" %}</a>
                         </li>
                     </ul>
-                    <p class="copyright text-muted small">Copyright &copy; ungleich GmbH 2015. All Rights Reserved</p>
+                    <p class="copyright text-muted small">Copyright &copy; ungleich GmbH {% now "Y" %}. All Rights Reserved</p>
                 </div>
             </div>
         </div>
     </footer>
 
     <!-- jQuery -->
-    <script src="js/jquery.js"></script>
+    <script src="{% static 'datacenterlight/js/jquery.js' %}"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
+    <script type="text/javascript">
+           $(document).ready(function(){    
+               $.validator.setDefaults({
+                   ignore: []
+               });
+               
+               $('#order_form').validate({
+                   wrapper: 'div',
+                   errorLabelContainer: "#error_message_box",
+                   rules: {
+                       name: {
+                           required: true,
+                           minlength: 3
+                       },
+                       email: {
+                           required: true,
+                           email: true
+                       }
+                   },
+                   messages: {
+                       name: "Please enter your name",
+                       email: "Please enter a valid email address"
+                   },
+                   submitHandler: function (form) {
+                       return true;
+                   }               
+               });
+           });
+    
+          window.onload=function(){
+            $('.selectpicker').selectpicker({
+                 style: 'btn-link',
+                 windowPadding: 10,
+            });
+    
+            var hash = window.location.hash.substr(1);
+            console.log(hash);
+            if (hash == 'requestform'){
+                $('#reques-success-message').modal('show');
+            }
+    
+           };
+    </script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
 
     <!-- Bootstrap Core JavaScript -->
-    <script src="js/bootstrap.min.js"></script>
+    <script src="{% static 'datacenterlight/js/bootstrap.min.js' %}"></script>
+    <script src="{% static 'datacenterlight/js/main.js' %}"></script>
 
 </body>
 

datacenterlight/templates/datacenterlight/pricing.html

@@ -1,7 +1,7 @@
 {% load staticfiles i18n%}
 {% get_current_language as LANGUAGE_CODE %}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{LANGUAGE_CODE}}">
 
 <head>
 

datacenterlight/urls.py

@@ -1,6 +1,6 @@
 from django.conf.urls import url
 
-from .views import IndexView, BetaProgramView, LandingProgramView, BetaAccessView, PricingView
+from .views import IndexView, BetaProgramView, LandingProgramView, BetaAccessView, PricingView, SuccessView, OrderView
 
 
 urlpatterns = [
@@ -8,5 +8,7 @@ urlpatterns = [
     url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
     url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
     url(r'^/pricing/?$', PricingView.as_view(), name='pricing'),
+    url(r'^/order/?$', OrderView.as_view(), name='order'),
+    url(r'^/order-success/?$', SuccessView.as_view(), name='order_success'),
     url(r'^/beta_access?$', BetaAccessView.as_view(), name='beta_access'),
 ]

datacenterlight/views.py

@@ -7,6 +7,8 @@ from django.core.urlresolvers import reverse_lazy, reverse
 from utils.mailer import BaseEmail
 from django.shortcuts import render
 from django.shortcuts import redirect
+from django import forms
+from django.core.exceptions import ValidationError
 
 from opennebula_api.models import OpenNebulaManager
 from opennebula_api.serializers import VirtualMachineTemplateSerializer
@@ -14,6 +16,9 @@ from opennebula_api.serializers import VirtualMachineTemplateSerializer
 class LandingProgramView(TemplateView):
     template_name = "datacenterlight/landing.html"
 
+class SuccessView(TemplateView):
+    template_name = "datacenterlight/success.html"
+
 class PricingView(TemplateView):
     template_name = "datacenterlight/pricing.html"
 
@@ -63,6 +68,81 @@ class PricingView(TemplateView):
         return redirect(reverse('hosting:payment'))
 
 
+class OrderView(TemplateView):
+    template_name = "datacenterlight/order.html"
+
+    def get(self, request, *args, **kwargs):
+        try:
+            manager = OpenNebulaManager()
+            templates = manager.get_templates()
+
+            context = {
+                'templates': VirtualMachineTemplateSerializer(templates, many=True).data,
+            }
+        except:
+            messages.error( request,
+                'We have a temporary problem to connect to our backend. \
+                Please try again in a few minutes'
+                )
+            context = {
+                'error' : 'connection'
+                    }
+
+        return render(request, self.template_name, context)
+
+    def post(self, request):
+
+        cores = request.POST.get('cpu')
+        memory = request.POST.get('ram')
+        storage = request.POST.get('storage')
+        price = request.POST.get('total')
+        template_id = int(request.POST.get('config'))
+        manager = OpenNebulaManager()
+        template = manager.get_template(template_id)
+        template_data = VirtualMachineTemplateSerializer(template).data
+        
+        name = request.POST.get('name')
+        email = request.POST.get('email')
+        name_field = forms.CharField()
+        email_field = forms.EmailField()
+        try:
+            name = name_field.clean(name)
+        except ValidationError as err:
+            messages.add_message(self.request, messages.ERROR, '%(value) is not a proper name.'.format(name))
+            return HttpResponseRedirect(reverse('datacenterlight:order'))
+
+        try:    
+            email = email_field.clean(email)
+        except ValidationError as err:
+            messages.add_message(self.request, messages.ERROR, '%(value) is not a proper email.'.format(email))
+            return HttpResponseRedirect(reverse('datacenterlight:order'))
+        
+        # We have valid email and name of the customer, hence send an 
+        # email to the admin
+        
+        context = {
+            'base_url': "{0}://{1}".format(self.request.scheme, self.request.get_host()),
+            'name': name,
+            'email': email,
+            'cores': cores,
+            'memory': memory,
+            'storage': storage,
+            'price': price,
+            'template': template_data['name'],
+        }
+        email_data = {
+            'subject': 'New Order Received',
+            'to': 'info@ungleich.ch',
+            'context': context,
+            'template_name': 'new_order_notification',
+            'template_path': 'datacenterlight/emails/'
+        }
+        email = BaseEmail(**email_data)
+        email.send()
+
+        return HttpResponseRedirect(reverse('datacenterlight:order_success'))
+
+
 class BetaAccessView(FormView):
     template_name = "datacenterlight/beta_access.html"
     form_class = BetaAccessForm