moep/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #370 from ungleich/geethamondi-task/3488/create_whydcl_page

Browse source 
Geethamondi task/3488/create whydcl page
This commit is contained in:
Pcoder 2017-07-04 22:28:29 +02:00 committed by GitHub
commit dafd11c592
15 changed files with 582 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

240
datacenterlight/static/datacenterlight/css/landing-page.css
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;

BIN
datacenterlight/static/datacenterlight/img/Ceph_Logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
datacenterlight/static/datacenterlight/img/cdistbyungleich.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
datacenterlight/static/datacenterlight/img/devuan.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
datacenterlight/static/datacenterlight/img/django.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
datacenterlight/static/datacenterlight/img/opennebula.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
datacenterlight/static/datacenterlight/img/prometheus.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
datacenterlight/static/datacenterlight/img/python-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
datacenterlight/static/datacenterlight/img/ssd.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
datacenterlight/static/datacenterlight/img/tayga.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

14
datacenterlight/static/datacenterlight/js/main.js
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(){

117
datacenterlight/templates/datacenterlight/includes/_navbar.html
View file

@ -1,67 +1,64 @@
{% 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">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<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>
<!-- Collect the nav links, forms, and other content for toggling --> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
<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>
</li> <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>
<li> <ul class="dropdown-menu">
<a class="url" href="javascript:void(0)" data-url="#your" >{% trans "Scale out" %}</a> <li><a class="url" href="{% url 'datacenterlight:index' %}#your" data-url="#your" >{% trans "Scale out" %}</a></li>
</li> <li><a class="url" href="{% url 'datacenterlight:index' %}#our" data-url="#our">{% trans "Reliable and light" %}</a></li>
<li> <li> <a class="url" href="{% url 'datacenterlight:index' %}#price" data-url="#price" >{% trans "Order VM" %}</a></li>
<a class="url" href="javascript:void(0)" data-url="#our">{% trans "Reliable and light" %}</a> </ul>
</li> </li>
<li> <li>
<a class="url" href="javascript:void(0)" data-url="#price" >{% trans "Order VM" %}</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="#contact" >{% trans "Contact" %}</a> <a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact" >{% trans "Contact" %}</a>
</li> </li>
{% endif %} {% endif %}
<li class="nav-language"> <li class="nav-language">
<div class="select-language"> <div class="select-language">
{% if LANGUAGE_CODE == 'en-us'%} {% if LANGUAGE_CODE == 'en-us'%}
<span>English</span> <span>English</span>
{% else %} {% else %}
<span>Deutsch</span> <span>Deutsch</span>
{% endif %} {% endif %}
<i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i>
</div> </div>
<div class="drop-language"> <div class="drop-language">
{% if LANGUAGE_CODE == 'en-us'%} {% if LANGUAGE_CODE == 'en-us'%}
<a class="url" href="{% change_lang 'de' %}">Deutsch</a> <a class="url" href="{% change_lang 'de' %}">Deutsch</a>
{% else %} {% else %}
<a class="url" href="{% change_lang 'en-us' %}" >English</a> <a class="url" href="{% change_lang 'en-us' %}" >English</a>
{% endif %} {% endif %}
</div> </div>
</li> </li>
</ul> </ul>
</div><!-- /.navbar-collapse -->
</div>
</div> </div>
<!-- /.navbar-collapse --> </nav>
</div>
<!-- /.container -->
</nav>

254
datacenterlight/templates/datacenterlight/whydatacenterlight.html Normal file
View file

@ -0,0 +1,254 @@
{% 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 open source – We don't use anything that isn't open source. <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! Data Center Light uses only SSDs. 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 %}

3
datacenterlight/urls.py
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'),

22
datacenterlight/views.py
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'