Merge branch 'task/3488/create_whydcl_page' of https://github.com/geethamondi/dynamicweb into geethamondi-task/3488/create_whydcl_page

This commit is contained in:
M.Ravi 2017-07-04 22:14:30 +02:00
commit 6496b5202d
15 changed files with 584 additions and 68 deletions

View file

@ -20,7 +20,7 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: 'Lato-Regular', sans-serif; font-family: 'Lato', sans-serif;
font-weight: 300; font-weight: 300;
} }
/*blue light #5A74AF*/ /*blue light #5A74AF*/
@ -108,10 +108,12 @@ h6 {
} }
.navbar-default .navbar-nav>li>a { .navbar-default .navbar-nav>li>a {
cursor: pointer; cursor: pointer;
font-family: 'Lato-Regular', sans-serif;
} }
.navbar-transparent .navbar-nav>li>a { .navbar-transparent .navbar-nav>li>a {
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
font-family: 'Lato-Regular', sans-serif;
} }
.navbar-transparent .navbar-nav>li>a:hover { .navbar-transparent .navbar-nav>li>a:hover {
color: #fff; color: #fff;
@ -145,11 +147,13 @@ h6 {
} }
.navbar-transparent .nav-language .select-language{ .navbar-transparent .nav-language .select-language{
color: #fff; color: #fff;
font-family: 'Lato-Regular', sans-serif;
} }
.nav-language .select-language span{ .nav-language .select-language span{
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
font-family: 'Lato-Regular', sans-serif;
} }
.nav-language .drop-language{ .nav-language .drop-language{
@ -171,6 +175,7 @@ h6 {
} }
.nav-language .drop-language a{ .nav-language .drop-language a{
cursor: pointer; cursor: pointer;
font-family: 'Lato-Regular', sans-serif;
} }
.navbar-transparent .nav-language .drop-language{ .navbar-transparent .nav-language .drop-language{
background: transparent; background: transparent;
@ -178,6 +183,7 @@ h6 {
} }
.navbar-transparent .nav-language .drop-language a{ .navbar-transparent .nav-language .drop-language a{
color: #fff; color: #fff;
font-family: 'Lato-Regular', sans-serif;
} }
.nav-language:hover .drop-language{ .nav-language:hover .drop-language{
display: block; display: block;
@ -444,7 +450,8 @@ h6 {
text-align: left; text-align: left;
} }
.pricing-section .text .section-heading{ .pricing-section .text .section-heading{
font-size: 50px; /*font-size: 50px;*/
font-size: 48px;
line-height: 50px; line-height: 50px;
padding-bottom: 25px; padding-bottom: 25px;
color: #3a3a3a; color: #3a3a3a;
@ -570,6 +577,138 @@ h6 {
width: 70px; width: 70px;
right: 0; right: 0;
} }
/*Why DCL*/
.full-whydcl-sec {
color: #fff;
text-align: center;
background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%);
background-image: -moz-linear-gradient(right, #29427A 50%, #4F6699 100%);
background-image: -o-linear-gradient(right, #29427A 50%, #4F6699 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(50, #29427A), color-stop(100, #4F6699));
background-image: -webkit-linear-gradient(right, #29427A 50%, #4F6699 100%);
background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%);
}
.whydcl-header {
padding: 150px 0 150px 0;
text-align: center;
color: #f8f8f8;
background: url(../img/pattern.jpg) no-repeat center center;
background-size: cover;
position: relative;
background-attachment: fixed;
}
.whydcl-header::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(90, 116, 175,0.85);
/*background: rgba(45,70,122,0.8);*/
}
.single-heading h2 {
font-size: 65px;
margin: 0;
padding: 0;
}
#tech_stack {
background: #fff;
}
#tech_stack h3 {
font-size: 42px;
width: 70%;
}
hr.thick-divider {
border-top: 3px solid #eee !important;
}
.space {
padding: 50px 0;
}
tech-sub-sec h2 {
font-size: 45px;
line-height: 60px;
padding-bottom: 25px;
color: #3a3a3a;
letter-spacing: 1px;
}
.logo-wrap {
text-align: center;
min-height: 140px;
padding: 20px 40px 30px 40px;
}
.btm-space{
padding-bottom: 8px;
}
.percent-text {
font-size: 50px;
color: #999;
}
.tech-sub-sec h2 {
font-size: 40px;
line-height: 55px;
}
.space-middle{
padding: 45px 0;
}
.padding-vertical{
padding: 35px 0;
}
.percent-text img {
margin-left:20px;
}
.space-block {
padding: 30px 0;
}
.dropdown-menu {
border: 1px solid #fff;
-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;
text-align: center;
border-radius: 4px !important;
padding: 5px !important;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
background: transparent;
text-decoration: underline !important;
}
.logo-wrap .logo-caption {
padding-top: 20px;
display: inline-block;
color: #999 !important;
}
.lead-light {
color: #999 !important;
line-height: 32px !important;
}
.logo-wrap-1 {
padding-top: 50px;
}
.dropdown-menu > li > a {
padding: 1px 10px !important;
}
.dropdown-menu{
left: 0 !important;
min-width: 155px;
text-align: left;
margin-left: 15px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background: transparent;
color: #fff;
}
.dropdown-menu > li > a {
font-size: 13px;
font-weight: 300;
font-family: 'Lato-Regular', sans-serif;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
background: #2D457A;
color: #fff;
border-radius: 6px;
}
/*Pricing page*/ /*Pricing page*/
@ -578,6 +717,7 @@ h6 {
background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat; background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat; background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
display: flex; display: flex;
font-family: 'Lato-Regular', sans-serif;
} }
.price-calc-section .text{ .price-calc-section .text{
width: 50%; width: 50%;
@ -633,6 +773,7 @@ h6 {
padding: 15px 40px; padding: 15px 40px;
} }
.price-calc-section .card .title h3{ .price-calc-section .card .title h3{
font-family: 'Lato-Regular', sans-serif;
} }
.price-calc-section .card .price{ .price-calc-section .card .price{
background: #5A74AF; background: #5A74AF;
@ -737,7 +878,62 @@ color: #eb4d5c;
margin: 0; margin: 0;
border-bottom: 1px solid rgba(128, 128, 128, 0.3); border-bottom: 1px solid rgba(128, 128, 128, 0.3);
} }
@media(max-width:767px) {
.percent-text {
font-size: 50px;
}
#tech_stack h3 {
font-size: 30px;
line-height: 40px;
width: 100%;
}
.navbar-nav .open .dropdown-menu {
text-align: left;
font-size: 12px;
}
.visible-mobile {
display:block;
}
.visible-desktop {
display:none !important;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background: transparent;
color: #777 !important;
}
}
@media screen and (min-device-width: 480px) and (max-device-width: 767px) {
.logo-wrap {
width: 50%;
padding: 15px 30px !important;
min-height: 179px;
}
.logo-wrap-1 {
width: 50%;
padding: 15px 30px !importantx;
min-height: 179px;
}
.landscape-xs-6{
width: 50%;
}
.landscape-xs-8{
width: 66.66666667%;
}
.landscape-xs-4{
width: 33.33333333%;
}
}
@media(min-width:768px) {
.visible-mobile {
display:none !important;
}
.visible-desktop {
display:block;
}
}
@media(max-width:990px) { @media(max-width:990px) {
.pricing-section .text { .pricing-section .text {
text-align: center; text-align: center;
@ -753,6 +949,22 @@ color: #eb4d5c;
} }
@media(max-width:768px) { @media(max-width:768px) {
.percent-text {
font-size: 43px;
}
.tech-sub-sec h2 {
font-size: 30px;
line-height: 40px;
}
.single-heading h2 {
font-size: 50px;
}
.logo-wrap {
padding: 10px;
}
.navbar-transparent li a {
color: #777 !important;
}
.intro-message { .intro-message {
padding-bottom: 15%; padding-bottom: 15%;
} }
@ -794,7 +1006,7 @@ color: #eb4d5c;
display: none; display: none;
} }
.navbar-transparent .navbar-nav>li>a { .navbar-transparent .navbar-nav>li>a {
font-size: 15px; font-size: 14px;
color: #777; color: #777;
} }
.nav-language:hover{ .nav-language:hover{
@ -931,6 +1143,12 @@ color: #eb4d5c;
} }
@media(max-width:540px) { @media(max-width:540px) {
.logo-wrap {
padding: 30px;
}
.percent-text {
text-align: center;
}
.pricing-section .card { .pricing-section .card {
width: 90%; width: 90%;
} }
@ -952,6 +1170,14 @@ color: #eb4d5c;
font-size: 15px; font-size: 15px;
margin-left: 0px; margin-left: 0px;
} }
.pull-left.space-middle {
width: 67%;
padding: 20px 0px;
text-align: left;
}
.pull-left.ssdimg {
width: 30%;
}
} }
@ -995,9 +1221,11 @@ color: #eb4d5c;
margin-top: 15px; margin-top: 15px;
} }
} }
@media(min-width:1200px) {
.container-small{
width:980px;
}
}
footer { footer {
padding: 50px 0; padding: 50px 0;

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -53,6 +53,16 @@
/* --------------------------------------------- /* ---------------------------------------------
Nav panel classic Nav panel classic
--------------------------------------------- */ --------------------------------------------- */
if (window.matchMedia("(min-width: 767px)").matches) {
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
} else {
/* the viewport is less than 400 pixels wide */
}
function _initScroll(){ function _initScroll(){
@ -66,9 +76,13 @@
if($(window).scrollTop() > 10 ){ if($(window).scrollTop() > 10 ){
$(".navbar").removeClass("navbar-transparent"); $(".navbar").removeClass("navbar-transparent");
$(".navbar-default .btn-link").css("color", "#777"); $(".navbar-default .btn-link").css("color", "#777");
$(".dropdown-menu").removeClass("navbar-transparent");
$(".dropdown-menu > li > a").css("color", "#777");
}else{ }else{
$(".navbar").addClass("navbar-transparent"); $(".navbar").addClass("navbar-transparent");
$(".navbar-default .btn-link").css("color", "#fff"); $(".navbar-default .btn-link").css("color", "#fff");
$(".dropdown-menu").addClass("navbar-transparent");
$(".dropdown-menu > li > a").css("color", "#fff");
} }
} }
function _initNavUrl(){ function _initNavUrl(){

View file

@ -1,7 +1,7 @@
{% load staticfiles i18n%} {% load staticfiles i18n%}
{% get_current_language as LANGUAGE_CODE %} {% get_current_language as LANGUAGE_CODE %}
{% load custom_tags %} {% load custom_tags %}
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> <nav class="navbar navbar-default navbar-fixed-top topnav">
<div class="topnav"> <div class="topnav">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
@ -11,32 +11,32 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
{% if request.resolver_match.url_name == "index" %} {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
<a id="logoBlack" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a> <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
<a id="logoWhite" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a> <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url" data-url="#home"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
{% else %} {% else %}
<a id="logoBlack" class="navbar-brand topnav url" href="/datacenterlight"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a> <a href="{% url 'datacenterlight:index' %}" id="logoBlack" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
<a id="logoWhite" class="navbar-brand topnav url" href="/datacenterlight"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a> <a href="{% url 'datacenterlight:index' %}" id="logoWhite" class="navbar-brand topnav url"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
{% endif %} {% endif %}
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
{% if request.resolver_match.url_name == "index" %} {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
<li> <li class="dropdown">
<a class="url" href="javascript:void(0)" data-url="#how" >{% trans "Highlights" %}</a> <a class="dropdown-toggle visible-mobile" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
<a class="dropdown-toggle url disabled visible-desktop" href="{% url 'datacenterlight:index' %}#how" data-url="#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your" >{% trans "Scale out" %}</a></li>
<li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li>
<li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li>
</ul>
</li> </li>
<li> <li>
<a class="url" href="javascript:void(0)" data-url="#your" >{% trans "Scale out" %}</a> <a class="url" href="{% url 'datacenterlight:index' %}/whydatacenterlight" >{% trans "Why Data Center Light?" %}</a>
</li> </li>
<li> <li>
<a class="url" href="javascript:void(0)" data-url="#our">{% trans "Reliable and light" %}</a> <a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact" >{% trans "Contact" %}</a>
</li>
<li>
<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> </li>
{% endif %} {% endif %}
<li class="nav-language"> <li class="nav-language">
@ -58,10 +58,7 @@
</li> </li>
</ul> </ul>
</div><!-- /.navbar-collapse -->
</div> </div>
<!-- /.navbar-collapse -->
</div> </div>
<!-- /.container -->
</nav> </nav>

View file

@ -0,0 +1,256 @@
{% extends "datacenterlight/base.html" %}
{% load staticfiles i18n%}
{% get_current_language as LANGUAGE_CODE %}
{% block content %}
<!-- Why Data Center Light? -->
<div class="full-whydcl-sec">
<div class="whydcl-header whydcl-section" id="why_dcl">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="single-heading">
<h2>{% trans "Why Data Center Light?" %}</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="split-section left" id="tech_stack">
<div class="space">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="split-text">
<div class="split-title">
<h2>{% trans "Tech Stack" %}</h2>
</div>
<div class="split-description">
<h3>{% trans "We are seriously open source." %}</h3>
<p class="lead">{% blocktrans %} Our full software stack is opensource We don't use anything that isn't opensource. <br>Yes, we are that cool. {% endblocktrans %}</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
<img class="img-responsive btm-space" src="{% static 'datacenterlight/img/devuan.png' %}" alt="Devuan">
<span class="logo-caption">{% trans "Our services run on" %}</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
<img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
<span class="logo-caption">{% trans "Our monitoring" %}</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
<img class="img-responsive btm-space" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph">
<span class="logo-caption">{% trans "Our storage layer" %}</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
<img class="img-responsive" src="{% static 'datacenterlight/img/django.png' %}" alt="Django">
<span class="logo-caption">{% trans "Our web frontend" %}</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
<img class="img-responsive btm-space" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
<span class="logo-caption">{% trans "Our cloud" %}</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
<img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist by ungleich">
<span class="logo-caption">{% trans "Our configuration management system" %}</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
<img class="img-responsive" src="{% static 'datacenterlight/img/python-logo.png' %}" alt="Python">
<span class="logo-caption">{% trans "Our awesome juice" %}</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-md-6 logo-wrap">
<img class="img-responsive" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga">
<span class="logo-caption">{% trans "Our NAT64 gateway" %}</span>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<hr class="thick-divider"/><!-- Divider -->
<div class=" space">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-5 ">
<div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
<img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
<img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich">
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-md-6 logo-wrap-1">
<img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-7 text-right">
<div class="tech-sub-sec">
<h2>{% trans "We believe in giving back to the FOSS community." %}</h2>
<p class="lead">{% blocktrans %}Data Center Light is the child of free and open source software (FOSS). <br>We grew up with it, live by it, and believe in it.<br> The more we work on our data center,<br> the more we contribute back to the FOSS community.{% endblocktrans %}</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<hr class="thick-divider"/><!-- Divider -->
<div class="space">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 tech-sub-sec">
<h2>{% trans "We bring the future to you." %}</h2>
</div>
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 text-left tech-sub-sec landscape-xs-6">
<p class="lead">{% blocktrans %} Data Center Light uses the most modern technologies out there.<br>
Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.
{% endblocktrans %}</p>
</div>
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 percent-text text-right landscape-xs-6">
100% <strong>IPv6</strong>
</div>
</div>
<div class="col-lg-12 space-block"></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 percent-text landscape-xs-8">
<span class="pull-left space-middle"> 100% <strong>SSD</strong></span> <span class="pull-left ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
</div>
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 text-right tech-sub-sec padding-vertical landscape-xs-4">
<div>
<p class="lead">{% blocktrans %} No more spinning metal plates!<br>
Data Center Light uses only SSDs.<br>
We keep things faster and lighter. {% endblocktrans %}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
<div class="content-section-a pricing-section" id="price">
<div class="container">
<!-- Page Features -->
<div class="row text-center">
<div class="col-xs-12 col-md-6 text">
<h2 class="section-heading">{% trans "Starting from only 15CHF per month. Try now." %}</h2>
<p class="lead">{% trans "Actions speak louder than words. Let's do it, try our VM now." %}</p>
</div>
<div class="col-xs-12 col-md-6 hero-feature">
<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">
<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="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" 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"></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 greater than or equal to 2.' %}" 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"></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="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" 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"></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.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" value="{% trans 'Order Now!' %}"></input>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Why Data Center Light? -->
{% endblock %}

View file

@ -1,10 +1,11 @@
from django.conf.urls import url from django.conf.urls import url
from .views import IndexView, BetaProgramView, LandingProgramView, BetaAccessView, PricingView, SuccessView, PaymentOrderView, OrderConfirmationView from .views import IndexView, BetaProgramView, LandingProgramView, BetaAccessView, PricingView, SuccessView, PaymentOrderView, OrderConfirmationView, WhyDataCenterLightView
urlpatterns = [ urlpatterns = [
url(r'^/?$', IndexView.as_view(), name='index'), url(r'^/?$', IndexView.as_view(), name='index'),
url(r'^/whydatacenterlight/?$', WhyDataCenterLightView.as_view(), name='whydatacenterlight'),
url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'), url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'), url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
url(r'^/pricing/?$', PricingView.as_view(), name='pricing'), url(r'^/pricing/?$', PricingView.as_view(), name='pricing'),

View file

@ -185,7 +185,6 @@ class BetaProgramView(CreateView):
messages.add_message(self.request, messages.SUCCESS, self.success_message) messages.add_message(self.request, messages.SUCCESS, self.success_message)
return HttpResponseRedirect(self.get_success_url()) return HttpResponseRedirect(self.get_success_url())
class IndexView(CreateView): class IndexView(CreateView):
template_name = "datacenterlight/index.html" template_name = "datacenterlight/index.html"
model = BetaAccess model = BetaAccess
@ -307,6 +306,27 @@ class IndexView(CreateView):
messages.add_message(self.request, messages.SUCCESS, self.success_message) messages.add_message(self.request, messages.SUCCESS, self.success_message)
return super(IndexView, self).form_valid(form) return super(IndexView, self).form_valid(form)
class WhyDataCenterLightView(IndexView):
template_name = "datacenterlight/whydatacenterlight.html"
model = BetaAccess
@cache_control(no_cache=True, must_revalidate=True, no_store=True)
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)
class PaymentOrderView(FormView): class PaymentOrderView(FormView):
template_name = 'hosting/payment.html' template_name = 'hosting/payment.html'