228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
{% 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 lead-light">{% 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 byu ngleich">
|
||
<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 lead-light">{% blocktrans %}Data Center Light is the child of free and open source software (FOSS). <br>We grew up with it, live by it, and belive 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 container-small">
|
||
<div class="row">
|
||
<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 text-left tech-sub-sec ">
|
||
<div class="tech-sub-sec">
|
||
<h2>{% trans "We bring the future to you." %}</h2>
|
||
<p class="lead lead-light">{% 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>
|
||
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 percent-text text-right padding-vertical">
|
||
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">
|
||
<span class="pull-left space-middle"> 100% <strong>SSD</strong></span> <span class="pull-left"><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">
|
||
<div>
|
||
<p class="lead lead-light">{% 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 lead-light">{% 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="">
|
||
{% 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">
|
||
<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">{% trans "Name"%}</label>
|
||
<input type="text" name="name" placeholder="{% trans "Your Name" %}">
|
||
</div>
|
||
<div class="description input">
|
||
<label for="email">{% trans "Email" %}</label>
|
||
<input type="email" name="email" placeholder="{% trans "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>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- End Why Data Center Light? -->
|
||
|
||
|
||
{% endblock %}
|