Merge pull request #289 from HenryGBC/develop

Fix texts bugs and hosting mobile design

datacenterlight/locale/de/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-05-26 13:35+0000\n"
+"POT-Creation-Date: 2017-05-27 10:13-0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -75,6 +75,11 @@ msgstr ""
 msgid "Thank you!"
 msgstr "Vielen Dank!"
 
+#: templates/datacenterlight/index.html:62
+#: templates/datacenterlight/index.html:142
+#: templates/datacenterlight/index.html:328
+#: templates/datacenterlight/pricing.html:62
+#: templates/datacenterlight/pricing.html:185
 #: datacenterlight/templates/datacenterlight/index.html:62
 #: datacenterlight/templates/datacenterlight/pricing.html:62
 msgid "What is it"
@@ -96,6 +101,11 @@ msgstr "Skalierung"
 msgid "Reliable and light"
 msgstr "Zuverlässig und leicht"
 
+#: templates/datacenterlight/index.html:71
+#: templates/datacenterlight/pricing.html:71
+msgid "Order VM"
+msgstr "VM bestellen"
+
 #: datacenterlight/templates/datacenterlight/index.html:71
 #: datacenterlight/templates/datacenterlight/pricing.html:71
 msgid "Buy VM"
@@ -120,6 +130,7 @@ msgstr "Was ist es?"
 msgid "I want it!"
 msgstr "Das will ich haben!"
 
+#: templates/datacenterlight/index.html:147
 #: datacenterlight/templates/datacenterlight/index.html:142
 #: datacenterlight/templates/datacenterlight/index.html:328
 #: datacenterlight/templates/datacenterlight/pricing.html:187
@@ -186,9 +197,11 @@ msgstr "VM Hosting"
 msgid "Based in Switzerland"
 msgstr "Standort des Datacenters ist in der Schweiz"
 
-#: datacenterlight/templates/datacenterlight/index.html:243
+#: templates/datacenterlight/index.html:243
-msgid "15 GB Storage (SSD)"
+#, fuzzy
-msgstr "15 GB Storage (SSD)"
+#| msgid "10 GB Storage (SSD)"
+msgid "10 GB Storage (SSD)"
+msgstr "10 GB Storage (SSD)"
 
 #: datacenterlight/templates/datacenterlight/index.html:246
 #: datacenterlight/templates/datacenterlight/pricing.html:156
@@ -225,6 +238,7 @@ msgstr "Preise"
 msgid "Hosted in Switzerland"
 msgstr "Standort des Datacenters ist in der Schweiz"
 
+#: templates/datacenterlight/pricing.html:139
 #: datacenterlight/templates/datacenterlight/pricing.html:139
 msgid "GB Storage (SSD)"
 msgstr "GB Storage (SSD)"
@@ -256,15 +270,23 @@ msgstr ""
 #~ msgid "Thank you, we will contact you as soon as possible"
 #~ msgstr "Vielen Dank, wir werden Sie sobald als möglich kontaktieren."
 
+#: templates/datacenterlight/pricing.html:166
+msgid ""
+"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."
+msgstr "Unsere VMs werden in der Schweiz im Kanton Glarus gehostet und befinden sich zur Zeit noch in der BETA-Phase. Möchtest du mehr über uns erfahren und hast auf unserer Website nicht genügend Informationen gefunden? Möchtest eine detailliertere Bestellung aufgeben? Bist du auf technische Probleme gestossen, die du uns mitteilen möchtest? Dann zögere nicht und kontaktiere uns unter support@datacenterlight.ch. Unser Team wird sich umgehend um dein Anliegen kümmern!"
+
+
+
 #~ msgid "Buy Now!"
 #~ msgstr "Kaufe jetzt!"
 
 #~ msgid "I want to try!"
 #~ msgstr "Das möchte ich haben"
 
-#~ msgid "How it works:"
-#~ msgstr "Warum können wir diese Leistung so günstig anbieten:"
-
 #~ msgid "Email address"
 #~ msgstr "E-Mail Adresse"
 

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

@@ -136,7 +136,7 @@ h6 {
     cursor: pointer;
 }
 .navbar-right {
-    margin-right: 0px;
+    margin-right: 10px;
 }
 .navbar-default .btn-link {
     color: #fff;
@@ -144,6 +144,52 @@ h6 {
 .navbar-default .btn-link:hover {
     color: #fff !important;
 }
+.nav-language{
+    position: relative;
+}
+.nav-language .select-language{
+    padding: 15px 10px;
+    color: #777;
+}
+.navbar-transparent .nav-language .select-language{
+    color: #fff;
+}
+
+.nav-language .select-language span{
+    margin-left: 5px;
+    margin-right: 5px;
+
+}
+.nav-language .drop-language{
+    position: absolute;
+    top: 45px;
+    left: -8px;
+    background: #fff;
+    width: 100px;
+    height: 40px;
+    padding: 9px 10px;
+    -webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    -moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    display: none;
+    z-index: 100;
+    /* margin-left: 10px; */
+    text-align: center;
+    border-radius: 4px;
+}
+.nav-language .drop-language a{
+   cursor: pointer;
+}
+.navbar-transparent .nav-language .drop-language{
+    background: transparent;
+    border: 1px solid #fff;
+}
+.navbar-transparent .nav-language .drop-language a{
+    color: #fff;
+}
+.nav-language:hover .drop-language{
+    display: block;
+}
 .intro-header {
     height: 100vh;
     text-align: center;
@@ -250,7 +296,7 @@ h6 {
     bottom: 0;
     left: 0;
     right: 0;
-    background: rgba(90, 116, 175, 0.7);
+    background: rgba(90, 116, 175, 0.8);
 }
 .intro-pricing .intro-message .section-heading{
     font-size: 45px;
@@ -532,8 +578,8 @@ h6 {
 }
 .price-calc-section .text .section-heading{
     font-family: 'Montserrat-Bold';
-    font-size: 50px;
+    font-size: 48px;
-    line-height: 50px;
+    line-height: 48px;
     padding-bottom: 25px;
     color: #3a3a3a;
     letter-spacing: 1px;
@@ -601,6 +647,13 @@ h6 {
 .price-calc-section .card .description input{
    font-size: 20px;
     text-align: center;
+    width: 70px;
+}
+.price-calc-section .card .description #coreValue{
+    width: 50px;
+}
+.price-calc-section .card .description #ramValue{
+    width: 50px;
 }
 .price-calc-section .card .description i{
     color: #29427A;
@@ -670,6 +723,14 @@ h6 {
         margin-bottom: 20px;
         padding: 0;
     }
+    .intro-pricing .intro-message .section-heading {
+        font-size: 35px;
+        width: 80%;
+        margin: 0 auto;
+    }
+    .intro-pricing .intro-message {
+        padding-bottom: 0;
+    }
 
     ul.intro-social-buttons > li:last-child {
         margin-bottom: 0;
@@ -693,6 +754,23 @@ h6 {
         font-size: 15px;
         color: #777;
     }
+    .nav-language:hover{
+        height: 80px;    
+    }
+    .navbar-transparent .nav-language .select-language {
+        color: #777;
+    }
+    .navbar-transparent .nav-language .drop-language a {
+        color: #777;
+    }
+    .navbar-transparent .nav-language .drop-language {
+        background: #fff;
+        /* border: 1px solid #fff; */
+        z-index: 100000;
+        left: 9px;
+        border: 1px solid rgba(119, 119, 119, 0.4);
+        box-shadow: none;
+    }
     .split-section {
         padding: 10px 0;
     }
@@ -736,6 +814,34 @@ h6 {
         transform: translate(-50%, 0);
     }
 
+    .price-calc-section{
+        flex-direction: column;
+        padding: 60px 10px !important;
+    }
+    .price-calc-section .card {
+        width: 90%;
+    }
+    .price-calc-section .text {
+        width: 80%;
+        text-align: center;
+        margin: 0 auto;
+        margin-top: 20px;
+    }
+    .price-calc-section .text .section-heading {
+        font-family: 'Montserrat-Bold';
+        font-size: 35px;
+        line-height: 35px;
+        padding-bottom: 15px;
+        text-align: center;
+    }
+    .price-calc-section .text .section-heading::before {
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+    .price-calc-section .text .description {
+        font-size: 18px;
+        text-align: center;
+    }
 }
 
 @media(max-width:540px) {
@@ -752,6 +858,14 @@ h6 {
     .intro-message > h1 {
         font-size: 2em;
     }
+    .price-calc-section .text .section-heading {
+        font-size: 24px;
+        line-height: 25px;
+    }
+    .price-calc-section .card .description span {
+        font-size: 17px;
+        margin-left: 4px;
+    }
 
 }
 

datacenterlight/templates/datacenterlight/index.html

@@ -68,13 +68,13 @@
                         <a class="url" href="javascript:void(0)" data-url="#our">{% trans "Reliable and light" %}</a>
                     </li>
                     <li>
-                        <a class="url" href="javascript:void(0)" data-url="#price" >{% trans "Buy VM" %}</a>
+                        <a class="url" href="javascript:void(0)" data-url="#price" >{% trans "Order VM" %}</a>
                     </li>
                     <li>
                         <a class="url" href="javascript:void(0)" data-url="#contact"  >{% trans "Contact" %}</a>
                      </li>
 
-                    <select class="selectpicker" data-width="fit" onchange="location = this.value;" style="margin-top:10px;">
+                <!--     <select class="selectpicker" data-width="fit" onchange="location = this.value;" style="margin-top:10px;">
                         {% if LANGUAGE_CODE == 'en-us'%} 
                             <option selected="selected" value="{{base_url}}/en-us/datacenterlight/">English</option>
                         {% else %}
@@ -86,7 +86,25 @@
                             <option value="{{base_url}}/de/datacenterlight/">Deutsch</option>
                         {% endif %}         
                         
-                      </select> 
+                      </select>  -->
+                    <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" >Deutsch</a>
+                          {% else %}
+                          <a class="url" href="{{base_url}}/en-us/datacenterlight" >English</a>
+                          {% endif %}
+                        
+                      </div>
+                    </li>
                 </ul>
 
 
@@ -110,7 +128,7 @@
                         <hr class="intro-divider">
                         <ul class="list-inline intro-social-buttons">
                             <li>
-                                <a href="#how" class="btn btn-default btn-lg btn-transparent"><i class="#Services"></i> <span class="network-name">{% trans "What is it?" %}</span></a>
+                                <a class="btn btn-default btn-lg btn-transparent url" href="javascript:void(0)" data-url="#how"  ><i class="#Services"></i> <span class="network-name">{% trans "What is it?" %}</span></a>
                             </li>
                             <li>
                                 <a class="btn btn-primary btn-lg page-scroll url" href="javascript:void(0)" data-url="#request" ><span class="network-name">{% trans "I want it!" %}</span></a>
@@ -139,7 +157,7 @@
                 <div class="col-xs-12 col-sm-6 col-md-6">
                     <div class="split-text">
                         <div class="split-title">
-                            <h2>{% trans "How it works" %}</h2>
+                            <h2>{% trans "What is it" %}</h2>
                         </div>
                         <div class="split-description">
                             <ul class="fa-ul">
@@ -325,7 +343,7 @@
                         </li>
                         <li class="footer-menu-divider">&sdot;</li>
                         <li>
-                            <a href="#about">{% trans "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">{% trans "Scale out" %}</a></li>

datacenterlight/templates/datacenterlight/pricing.html

@@ -74,19 +74,24 @@
                         <a class="url" href="javascript:void(0)" data-url="#contact"  >{% trans "Contact" %}</a>
                      </li> -->
 
-                    <select class="selectpicker" data-width="fit" onchange="location = this.value;" style="margin-top:10px;">
+                  <li class="nav-language">
+                      <div class="select-language">
                           {% if LANGUAGE_CODE == 'en-us'%} 
-                            <option selected="selected" value="{{base_url}}/en-us/datacenterlight/">English</option>
+                          <span>English</span>
                           {% else %}
-                            <option value="{{base_url}}/en-us/datacenterlight/">English</option>
+                          <span>Deutsch</span>
                           {% endif %}
-                        {% if LANGUAGE_CODE == 'de'%} 
+                          <i class="fa fa-globe" aria-hidden="true"></i>
-                            <option selected="selected" value="{{base_url}}/de/datacenterlight/">Deutsch</option>
+                      </div>
+                      <div class="drop-language">
+                          {% if LANGUAGE_CODE == 'en-us'%} 
+                          <a class="url" href="{{base_url}}/de/datacenterlight/pricing" >Deutsch</a>
                           {% else %}
-                            <option value="{{base_url}}/de/datacenterlight/">Deutsch</option>
+                          <a class="url" href="{{base_url}}/en-us/datacenterlight/pricing" >English</a>
                           {% endif %}
                         
-                      </select> 
+                      </div>
+                    </li>
                 </ul>
 
 
@@ -163,9 +168,7 @@
 			<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." %}</p>
+				<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>
-					
-					{% trans " WARNING: We are currently running in BETA mode. We hope you won't encounter any hiccups, but if you do, please let us know at support@datacenterlight.ch"  %}
 			</div>
 		</div>
 	</div>
@@ -184,7 +187,7 @@
                         </li>
                         <li class="footer-menu-divider">&sdot;</li>
                         <li>
-                            <a href="#about">{% trans "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">{% trans "Scale out" %}</a></li>

datacenterlight/views.py

@@ -7,6 +7,7 @@ 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.utils.translation import get_language, get_language_info
 
 from opennebula_api.models import OpenNebulaManager
 from opennebula_api.serializers import VirtualMachineTemplateSerializer
@@ -24,6 +25,7 @@ class PricingView(TemplateView):
 
             context = {
                 'templates': VirtualMachineTemplateSerializer(templates, many=True).data,
+                'languages': getlanguages()
             }
         except:
             messages.error( request,
@@ -241,3 +243,5 @@ class IndexView(CreateView):
 
         messages.add_message(self.request, messages.SUCCESS, self.success_message)
         return super(IndexView, self).form_valid(form)
+
+

hosting/static/hosting/css/commons.css

@@ -1,5 +1,5 @@
 .dashboard-container {
-	padding-top:5%; padding-bottom: 11%;
+	padding-top:70px; padding-bottom: 11%;
 }
 
 .borderless td {

hosting/static/hosting/css/landing-page.css

@@ -82,24 +82,25 @@ h6 {
     text-align: center;
     color: #f8f8f8;
     position: relative;
-    padding-bottom: 25%;
-    padding-top: 10%;
 }
 
 .intro-login {
-    background: url(../img/login-bg.jpg) no-repeat center center;
+    background: url(../img/intro-bg.jpg) no-repeat center center;
     background-size: cover;
     height: 100%;
 }
 
 .intro-signup {
-    background: url(../img/signup-bg.png) no-repeat center center;
+    background: url(../img/intro-bg.jpg) no-repeat center center;
     background-size: cover;
     height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .intro-reset-password {
-    background: url(../img/signup-bg.png) no-repeat center center;
+    background: url(../img/intro-bg.jpg) no-repeat center center;
     background-size: cover;
     height: 100%;
 }
@@ -193,6 +194,128 @@ h6 {
     float: right;
     margin-top: 0;
 }
+/*------Auth section---------*/
+.auth-container{
+    height: 100vh;
+    position: relative;
+}
+.auth-bg{
+    background: url(../img/auth-bg.jpg);
+    position: fixed;
+    left: 0;
+    top: 0;
+     width: 100%;
+    height: 100vh;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    background-attachment: fixed;
+
+}
+.auth-bg::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(75, 75, 101, 0.55);
+    z-index: 1;
+}
+.auth-container .container{
+    z-index: 1000;
+}
+.auth-container .auth-content{
+     width: 80%;
+    margin: 0 auto;
+    max-width: 390px;
+    margin-top: 60px;
+
+}
+.auth-container .auth-title{
+    margin-top: 40px;
+}
+.auth-container .auth-title h2{
+    color: #fff;
+    font-family: 'Montserrat-Bold';
+    font-size: 44px;
+    text-align: center;
+    width: 425px;
+    margin: 0 auto;
+    margin-bottom: 30px;
+    position: relative;
+}
+.auth-container .auth-title h2::after{
+    content: "";
+    position: absolute;
+    bottom: -20px;
+    background: #fff;
+    height: 7px;
+    width: 70px;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+.auth-box{
+    background: #fff;
+    padding: 0;
+    padding-bottom: 30px;
+    box-sizing: border-box;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    border-radius: 4px;
+    z-index: 10;
+}
+
+.auth-box .section-heading{
+    color: #5a5a5a;
+    padding-top: 20px;
+    padding-bottom: 5px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    font-size: 20px;
+    border-radius: 3px 3px 0px 0px;
+    margin: 0 auto;
+    font-family: 'Montserrat-Medium';
+}
+.auth-box .form{
+    padding: 20px;
+    width: 80%;
+    margin: 0 auto;
+}
+.auth-box .form .red{
+    color: #ea3a3a;
+}
+.auth-box .form .btn{
+    box-shadow: 0 0px 9px rgba(0,0,0,0.19), 0 3px 5px rgba(0,0,0,0.23);
+    letter-spacing: 3px;
+    font-size: 17px;
+    text-transform: uppercase;
+}
+.auth-box .form .form-control{
+    height: 44px;
+    font-size: 16px;
+}
+.auth-box .auth-footer {
+    text-align: center;
+    padding: 10px;
+}
+.auth-box .auth-footer .text{
+    color: #777;
+}
+.auth-box .auth-footer .links a{
+    color: #1e94cc;
+}
+.auth-box .auth-footer .links a:hover{
+    color: #1e94cc;
+}
+
+.auth-box.sign-up{
+    padding-bottom: 5px;
+}
+.auth-box.sign-up .form{
+    padding: 15px 20px 0 20px;
+}
 
 @media (max-width: 1199px) {
     ul.banner-social-buttons {
@@ -218,7 +341,17 @@ h6 {
         margin-bottom: 0;
     }
 }
-
+@media (max-width: 540px) {
+    .auth-container .auth-title h2{
+        font-size: 32px;
+        width: 90%;
+        margin-bottom: 50px;
+    }
+    .auth-box .form {
+        padding: 15px;
+        width: 90%;
+    }
+}
 footer {
     padding: 2%;
     background-color: #f8f8f8;
@@ -251,3 +384,4 @@ a.unlink {
 a.unlink:hover {
     color: inherit;
 }
+

hosting/static/hosting/css/order.css

@@ -1,4 +1,4 @@
-.order-detail-container {padding-top:5%; padding-bottom: 11%;}
+.order-detail-container {padding-top: 70px; padding-bottom: 11%;}
 
 .order-detail-container .invoice-title h2, .invoice-title h3 {
     display: inline-block;

hosting/static/hosting/css/orders.css

@@ -1,4 +1,4 @@
-.orders-container {padding-top:5%; padding-bottom: 11%;}
+.orders-container {padding-top:70px; padding-bottom: 11%;}
 
 .orders-container .table > tbody > tr > td {
      vertical-align: middle;

hosting/static/hosting/css/payment.css

@@ -1,5 +1,5 @@
 
-.payment-container {padding-top:5%; padding-bottom: 11%;}
+.payment-container {padding-top:70px; padding-bottom: 11%;}
 .creditcard-box .panel-title {display: inline;font-weight: bold; font-size:17px;}
 .creditcard-box .checkbox.pull-right { margin: 0; }
 .creditcard-box .pl-ziro { padding-left: 0px; }

hosting/templates/hosting/base_short.html

@@ -44,6 +44,7 @@
 
 
     <!-- Navigation -->
+    {% if request.user.is_authenticated %}
     <nav class="navbar navbar-default  navbar-fixed-top topnav" role="navigation">
         <div class="container topnav">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -61,7 +62,7 @@
                 <ul class="nav navbar-nav navbar-right">
 
 
-                    {% if request.user.is_authenticated %}
+                    
                         <li>
                             <a href="{% url 'hosting:virtual_machines' %}">
                                 <i class="fa fa-server" aria-hidden="true"></i> {% trans "My Virtual Machines"%}
@@ -89,7 +90,7 @@
                             <li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i>{% trans "Logout"%} </a></li>
                           </ul>
                         </li>
-                    {% else %}
+                        <!-- 
                         <li>
                             <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
                         </li>
@@ -107,8 +108,7 @@
                         </li>  
                         <li>
                             <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a>
-                        </li> 
+                        </li>  -->
-                    {% endif %}
                 </ul>
             </div>
             <!-- /.navbar-collapse -->
@@ -116,6 +116,7 @@
         <!-- /.container -->
     </nav>
 
+    {% endif %}
 
     <!-- Header -->
     <a name="about"></a>
@@ -123,6 +124,7 @@
     {% endblock %}
 
     <!-- Footer -->
+    {% if request.user.is_authenticated %}
     <footer class="navbar-fixed-bottom">
         <div class="container">
             <div class="row">
@@ -133,20 +135,28 @@
                         </li>
                         <li class="footer-menu-divider">&sdot;</li>
                         <li>
-                            <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
+                            <a href="{% url 'hosting:virtual_machines' %}">
-                        <li class="footer-menu-divider">&sdot;</li>
+                                {% trans "My Virtual Machines"%}
-                        <li>
+                            </a>
-                            <a href="{{ request.session.hosting_url }}#your">{% trans "Your infrastructure"%}</a></li>
-                        <li>&sdot;</li>
-                        <li>
-                            <a href="{{ request.session.hosting_url }}#our">{% trans "Our inftrastructure"%}</a></li>
-                        <li class="footer-menu-divider">&sdot;</li>
-                        <li>
-                            <a href="{{ request.session.hosting_url }}#services">{% trans "Pricing"%}</a>
                         </li>
                         <li class="footer-menu-divider">&sdot;</li>
                         <li>
-                            <a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a>
+                           <a href="{% url 'hosting:orders' %}">
+                                {% trans "My Orders"%}
+                            </a>
+                        </li>
+                        <li>&sdot;</li>
+                        <li>
+                        <li>
+                            <a href="{% url 'hosting:key_pair' %}">
+                                {% trans "Keys"%}
+                            </a>
+                        </li>
+                        <li class="footer-menu-divider">&sdot;</li>
+                        <li>
+                           <a href="{% url 'hosting:notifications' %}">
+                                {% trans "Notifications "%}
+                            </a>
                         </li>
 
                     </ul>
@@ -155,7 +165,7 @@
             </div>
         </div>
     </footer>
-
+    {% endif %}
     <!-- jQuery -->
     <script src="{% static 'hosting/js/jquery.js' %}"></script>
     <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>

hosting/templates/hosting/login.html

@@ -3,12 +3,16 @@
 {% load staticfiles bootstrap3%}
 {% block content %}
 
-<div class="intro-auth intro-login">
+<div class="auth-container">
+    <div class="auth-bg"></div>
     <div class="container">
-            <div class="col-md-4 col-md-offset-4">
+            <div class="auth-title">
+                <h2>{% trans "Your VM hosted in Switzerland"%}</h2>
+            </div>
+            <div class="auth-content">
                 
                 {% if messages %}
-                    <ul class="list-unstyled">
+                    <ul class="list-unstyled" style="color: #fff">
                     {% for message in messages %}
                         <li>{{ message }}</li>
                     {% endfor %}
@@ -24,30 +28,32 @@
                     {% endif %}
                 {% endblock %}
     
-
+                <div class="intro-message auth-box">
-                <div class="intro-message">
                     <h2 class="section-heading">{% trans "Login"%}</h2>
                     <form action="{% url 'hosting:login' %}" method="post" class="form" novalidated>
                         {% csrf_token %}
                         {% for field in form %}
                             {% bootstrap_field field show_label=False type='fields'%}
                         {% endfor %}
-                        <p>{{form.non_field_errors|striptags}}</p>
+                        <p class="red">{{form.non_field_errors|striptags}}</p>
                         {% buttons %}
-                            <button type="submit" class="btn btn-default">
+                            <button type="submit" class="btn btn-block btn-success">
                                 {% trans "Login"%}
                             </button>
                         {% endbuttons %}
 						
 						<input type='hidden' name='next' value='{{request.GET.next}}'/> 
                     </form>
-                    <span>{% trans "Don't have an account yet ? "%}<a class="unlink" href="{% url 'hosting:signup' %}">{% trans "Sign up"%}</a></span>
+                    <div class="auth-footer">
-                    <br/>
+                        <div class="text">
-                    <span> <a class="unlink" href="{% url 'hosting:reset_password' %}">{% trans "Forgot your password ? "%}</a></span>
+                            <span>{% trans "Don't have an account yet ? "%}</span>
-
+                        </div>
-                    <ul class="list-inline intro-social-buttons">
+                        <div class="links">
-                        
+                            <a class="unlink" href="{% url 'hosting:signup' %}">{% trans "Sign up"%}</a>
-                    </ul>
+                            <span class="text"> or </span>
+                            <a class="unlink" href="{% url 'hosting:reset_password' %}">{% trans "Forgot your password ? "%}</a>
+                        </div>
+                    </div>
                 </div>
         </div>
     </div>

hosting/templates/hosting/reset_password.html

@@ -3,29 +3,36 @@
 {% load i18n %}
 
 {% block content %}
-    <div class="intro-auth intro-reset-password">
+<div class="auth-container">
+   <div class="auth-bg"></div>
     <div class="container">
-            <div class="col-md-4">&nbsp;</div>
+            <div class="auth-title">
-            <div class="col-md-4">
+                <h2>{% trans "Your VM hosted in Switzerland"%}</h2>
-                <div class="intro-message">
+            </div>
+            <div class="auth-content">
+                <div class="intro-message auth-box sign-up">
                     <h2  class="section-heading">{% trans "Reset your password"%}</h2>
-
                     <form action="{% url 'hosting:reset_password' %}" method="post" class="form" novalidate>
                         {% csrf_token %}
                         {% for field in form %}
                             {% bootstrap_field field show_label=False %}
                         {% endfor %}
                         {% buttons %}
-                            <button type="submit" class="btn btn-default">
+                            <button type="submit" class="btn btn-block btn-success">
                                 {% trans "Reset"%}
                             </button>
                         {% endbuttons %}
                     </form>
-                    <span>{% trans "Already have an account ?"%} <a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%} </a></span>
+                    <div class="auth-footer">
-                    <ul class="list-inline intro-social-buttons">
+                        <div class="text">
-                    </ul>
+                            <span>{% trans "Already have an account ?"%}</span>
+                        </div>
+                        <div class="links">
+                           <a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a>
                         </div>
                     </div>
                 </div>
         </div>
+    </div>
+</div>
 {% endblock %}

hosting/templates/hosting/signup.html

@@ -2,29 +2,36 @@
 {% load staticfiles bootstrap3 i18n %}
 
 {% block content %}
-    <div class="intro-auth intro-signup">
+<div class="auth-container">
+   <div class="auth-bg"></div>
     <div class="container">
-            <div class="col-md-4 col-sm-4 col-xs-4">&nbsp;</div>
+            <div class="auth-title">
-            <div class="col-md-4 col-sm-6 col-xs-6">
+                <h2>{% trans "Your VM hosted in Switzerland"%}</h2>
-                <div class="intro-message">
+            </div>
+            <div class="auth-content">
+                <div class="intro-message auth-box sign-up">
                     <h2  class="section-heading">{% trans "Sign up"%}</h2>
-
                     <form action="{% url 'hosting:signup' %}" method="post" class="form" novalidate>
                         {% csrf_token %}
                         {% for field in form %}
                             {% bootstrap_field field show_label=False %}
                         {% endfor %}
                         {% buttons %}
-                            <button type="submit" class="btn btn-default">
+                            <button type="submit" class="btn btn-block btn-info">
                                 {% trans "Sign up"%}
                             </button>
                         {% endbuttons %}
                     </form>
-                    <span>{% trans "Already have an account ?"%} <a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a></span>
+                    <div class="auth-footer">
-                    <ul class="list-inline intro-social-buttons">
+                        <div class="text">
-                    </ul>
+                            <span>{% trans "Already have an account ?"%}</span>
+                        </div>
+                        <div class="links">
+                           <a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a>
                         </div>
                     </div>
                 </div>
         </div>
+    </div>
+</div>
 {% endblock %}