280 lines
12 KiB
HTML
280 lines
12 KiB
HTML
{% load staticfiles i18n%}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{LANGUAGE_CODE}}">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<title>datacenterlight.ch - Featherlight Swiss VM</title>
|
|
|
|
<!-- Bootstrap Core CSS -->
|
|
<link href="{% static 'datacenterlight/css/bootstrap.min.css' %}" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
<!-- Custom Fonts -->
|
|
<!--Import Google Icon Font-->
|
|
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link href="{% static 'datacenterlight/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
|
|
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
|
<link rel="shortcut icon" href="{% static 'datacenterlight/img/favicon.ico' %}" type="image/x-icon" />
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link href="{% static 'datacenterlight/css/landing-page.css' %}" rel="stylesheet">
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
|
|
<div class="topnav">
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a id="logoBlack" class="navbar-brand topnav url" href="{% url 'datacenterlight:index' %}" ><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
|
|
<a id="logoWhite" class="navbar-brand topnav url" href="{% url 'datacenterlight:index' %}" ><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
|
|
</div>
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<!-- <li>
|
|
<a class="url" href="javascript:void(0)" data-url="#how" >{% trans "What is it" %}</a>
|
|
</li>
|
|
<li>
|
|
<a class="url" href="javascript:void(0)" data-url="#your" >{% trans "Scale out" %}</a>
|
|
</li>
|
|
<li>
|
|
<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>
|
|
</li>
|
|
<li>
|
|
<a class="url" href="javascript:void(0)" data-url="#contact" >{% trans "Contact" %}</a>
|
|
</li> -->
|
|
|
|
<li class="nav-language">
|
|
<div class="select-language">
|
|
{% if LANGUAGE_CODE == 'en-us'%}
|
|
<span>English</span>
|
|
{% else %}
|
|
<span>Deutsch</span>
|
|
{% endif %}
|
|
<i class="fa fa-globe" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="drop-language">
|
|
{% if LANGUAGE_CODE == 'en-us'%}
|
|
<a class="url" href="{{base_url}}/de/datacenterlight/pricing" >Deutsch</a>
|
|
{% else %}
|
|
<a class="url" href="{{base_url}}/en-us/datacenterlight/pricing" >English</a>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
<!-- /.navbar-collapse -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</nav>
|
|
<div class="intro-pricing">
|
|
|
|
<div class="intro-message">
|
|
<h2 class="section-heading">{% trans "We are cutting down the costs significantly!" %}</h2>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="price-calc-section">
|
|
<div class="card">
|
|
<img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
|
|
<div class="caption">
|
|
<form id="order_form" method="POST" action="">
|
|
{% csrf_token %}
|
|
|
|
<div class="title">
|
|
<h3>{% trans "VM hosting" %} </h3>
|
|
</div>
|
|
<div class="price">
|
|
<span id="total">15</span>
|
|
<span>CHF</span>
|
|
</div>
|
|
<div class="descriptions">
|
|
<div class="description">
|
|
<p>{% trans "Hosted in Switzerland" %}</p>
|
|
</div>
|
|
<div class="description">
|
|
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
|
|
<input class="input-price" type="number" min="1" max="42" id="coreValue" name="cpu">
|
|
<span> Core</span>
|
|
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="description">
|
|
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
|
|
<input id="ramValue" class="input-price" type="number" min="2" max="200" name="ram">
|
|
<span> GB RAM</span>
|
|
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
|
|
</div>
|
|
<div class="description">
|
|
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
|
|
<input id="storageValue" class="input-price" type="number" min="10" max="500" step="10" name="storage">
|
|
<span>{% trans "GB Storage (SSD)" %}</span>
|
|
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
|
|
</div>
|
|
|
|
|
|
<div class="description select-configuration input">
|
|
<label for="config">OS</label>
|
|
<select name="config" id="">
|
|
{% for template in templates %}
|
|
<option value="{{template.id}}">{{template.name}} </option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<input type="hidden" name="total">
|
|
<!--<div class="description check-ip">
|
|
<input type="checkbox" name="ipv6"> Ipv6 Only<br>
|
|
</div>-->
|
|
|
|
<div class="description input">
|
|
<label for="name">Name</label>
|
|
<input type="text" name="name" placeholder="Your Name">
|
|
</div>
|
|
<div class="description input">
|
|
<label for="email">Email</label>
|
|
<input type="email" name="email" placeholder="Your Email">
|
|
</div>
|
|
</div>
|
|
<input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
|
|
|
|
</form>
|
|
</div>
|
|
<div>
|
|
<div id="error_message_box" class="error-message-box"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text">
|
|
<h2 class="section-heading">{% trans "Simple and affordable: Try our virtual machine with featherlight price." %}</h2>
|
|
|
|
<div class="description">
|
|
<p>{% trans "Our VMs are hosted in Glarus, Switzerland, and our website is currently running in BETA mode. If you want more information that you did not find on our website, or if your order is more detailed, or if you encounter any technical hiccups, please contact us at support@datacenterlight.ch, our team will get in touch with you asap." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- /.banner -->
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<ul class="list-inline">
|
|
<li>
|
|
<a href="#">{% trans "Home" %}</a>
|
|
</li>
|
|
<li class="footer-menu-divider">⋅</li>
|
|
<li>
|
|
<a href="#about">{% trans "What is it" %}</a></li>
|
|
<li class="footer-menu-divider">⋅</li>
|
|
<li>
|
|
<a href="#about">{% trans "Scale out" %}</a></li>
|
|
<li>⋅</li>
|
|
<li>
|
|
<a href="#about">{% trans "Reliable and light" %}</a></li>
|
|
<li class="footer-menu-divider">⋅</li>
|
|
<li>
|
|
<a href="#services">{% trans "Pricing" %}</a>
|
|
</li>
|
|
<li class="footer-menu-divider">⋅</li>
|
|
<li>
|
|
<a href="#contact">{% trans "Contact" %}</a>
|
|
</li>
|
|
</ul>
|
|
<p class="copyright text-muted small">Copyright © ungleich GmbH {% now "Y" %}. All Rights Reserved</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- jQuery -->
|
|
<script src="{% static 'datacenterlight/js/jquery.js' %}"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$.validator.setDefaults({
|
|
ignore: []
|
|
});
|
|
|
|
$('#order_form').validate({
|
|
wrapper: 'div',
|
|
errorLabelContainer: "#error_message_box",
|
|
rules: {
|
|
name: {
|
|
required: true,
|
|
minlength: 3
|
|
},
|
|
email: {
|
|
required: true,
|
|
email: true
|
|
}
|
|
},
|
|
messages: {
|
|
name: "Please enter your name",
|
|
email: "Please enter a valid email address"
|
|
},
|
|
submitHandler: function (form) {
|
|
return true;
|
|
}
|
|
});
|
|
});
|
|
|
|
window.onload=function(){
|
|
$('.selectpicker').selectpicker({
|
|
style: 'btn-link',
|
|
windowPadding: 10,
|
|
});
|
|
|
|
var hash = window.location.hash.substr(1);
|
|
console.log(hash);
|
|
if (hash == 'requestform'){
|
|
$('#reques-success-message').modal('show');
|
|
}
|
|
|
|
};
|
|
</script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
|
|
|
|
<!-- Bootstrap Core JavaScript -->
|
|
<script src="{% static 'datacenterlight/js/bootstrap.min.js' %}"></script>
|
|
<script src="{% static 'datacenterlight/js/main.js' %}"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|