{% load i18n %}
<style>
html, body {
height: 100%;
font-style:trebuchet ms, arial;


text-align:center;

}

.container{
margin:0 auto;
margin-top:20px;
width:1000px;
text-align:left;

}

.ssh{
width:500px;
float:left;

}

.vpn{
width:500px;
float:left;

}

.judul{
font-size:24px;
}
.label{
float:left;
clear:both;
width:100px;
margin-right:10px;

height:27px;
padding-top:7px;
}
.input{
float:left;
}
.submit{
clear:both;
}
.title{
width:1000px;
text-align:center;
font-size:24px;
}


</style>
<div class="vpn">
	<form class="vpn" method="post" action="submit-vpn">
	<div class="judul">{% trans "VPN" %}</div>
	<div class="label">{% trans "Host" %} :</div> <div class="input"><input title="vpn-host" type=text name="vpn-host" ></div>
	<div class="label">{% trans "Port" %} :</div> <div class="input"><input title="vpn-port" type=text value=1194 name="vpn-port" ></div>
        <div class="label">{% trans "password" %} :</div> <div class="input"><input title="vpn-pass" type=password name="vpn-pass" ></div>
	<div class="submit"><input title="submit-vpn" type=submit name="submit" value="{% trans "submit" %}"></div>
	</form>
</div>
<div class="ssh">
	<form class="ssh" method="post" action="submit-ssh">
	<div class="judul">{% trans "SSH" %}</div>
	<div class="label">{% trans "User" %} :</div> <div class="input"><input title="ssh-user" type=text name="user" ></div>
	<div class="label">{% trans "Host" %} :</div> <div class="input"><input title="ssh-host" type=text name="host" ></div>
	<div class="label">{% trans "Port" %} :</div> <div class="input"><input title="ssh-port" type=text value=22 name="ssh_port"></div>
	<div class="label">{% trans "Bind Port" %} :</div> <div class="input"><input title="ssh-bind" type=text name="ssh_bind"></div>
	<div class="submit"><input title="submit-ssh" type=submit name=submit value="{% trans "submit" %}"></div>
	</form>
</div>
</div>