Update html pages.

6 files changed, 83 insertions, 89 deletions

diff --git a/static/css/style.css b/static/css/style.css
index c7f2014..e28ece7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -63,3 +63,7 @@ body {
 	margin: 10px 0;
 	margin-left: 0;
 }
+
+.lp {
+	margin-top: 25px;
+}
diff --git a/views/index.html b/views/index.html
index 52a2198..d443b7b 100644
--- a/views/index.html
+++ b/views/index.html
@@ -5,46 +5,43 @@
 <div class="jumbotron">
 	<div class="container">
 		<h1>Libremail</h1>
-		<p>Tired of getting spam daily? You just need quickly a mail adress? Or you own a domain and want to use it to recieve E-Mails?
+		<p>Tired of getting spam daily? You just need quickly a mail address? Or you own a domain and want to use it to recieve E-Mails?
 			<strong>You are in the right place.</strong>
 			<br>It's completly free and ad-free.</p>
-		<p><a class="btn btn-primary btn-lg btn-raised" href="/about" role="button">Learn more &raquo;</a></p>
+		<p><a class="btn btn-primary btn-lg btn-raised" href="/register" role="button"><span class="fa fa-sign-in"></span> Sign Up &raquo;</a></p>
 	</div>
 </div>
 <div class="container">
 	<div class="row">
 		<div class="col-md-4">
-			<h2>Easy & Quick</h2>
-			<p>It's just 2 clicks away.<br>
-				Choose a free mail adress and sign up.</p>
-			<p><a class="btn btn-primary btn-raised" href="/register" role="button">Sign up &raquo;</a></p>
+			<h2><span class="fa fa-user"></span> Simple & Fast</h2>
+			<p>It's 10 seconds to your new mail address. 
+				Pick a free one and sign up. <br>
+				It's free and we don't bite.</p>
+			<p><a class="btn btn-primary btn-raised" href="/register" role="button"><span class="fa fa-user-plus"></span> Sign up &raquo;</a></p>
 		</div>
 		<div class="col-md-4">
-			<h2>Secure</h2>
-			<p>We are using state of the art technologies and enforcing encryption on every step.</p>
-			<p><a class="btn btn-primary btn-raised" href="/about" role="button">About us &raquo;</a></p>
+			<h2><span class="fa fa-lock"></span> Secure</h2>
+			<p>We do our best to keep up-to-date with the latest technologies and not only suggest, but rather enforce encryption on every step.</p>
+			<p><a class="btn btn-primary btn-raised" href="/about" role="button"><span class="fa fa-file"></span> About us &raquo;</a></p>
 		</div>
 		<div class="col-md-4">
-			<h2>Features</h2>
-			<p>Everything you need, IMAP, POP3 and Webmail (thanks to Roundcube) included.</p>
-			<p><a class="btn btn-primary btn-raised" href="/server" role="button">Features &raquo;</a></p>
+			<h2><span class="fa fa-globe"></span> Own Domain</h2>
+			<p>You own a domain? We will gladly do the mail hosting for you. Set up your DNS and get everything out of the box. <br>
+				Please read the docs for more info.</p>
+			<p><a class="btn btn-primary btn-raised" href="/howto#own_domain" role="button"><span class="fa fa-plus-circle"></span> Read More &raquo;</a></p>
 		</div>
 	</div>
+</div>
+<div class="lp">
+</div>
+<div class="container">
 	<div class="row">
-		<div class="col-md-4">
-			<h2>Own Domain</h2>
-			<p>You own a domain? We will gladly do the mail hosting for you. Set up your DNS and get everything out of the box.</p>
-			<p><a class="btn btn-primary btn-raised" href="/howto#own_domain" role="button">Read how to &raquo;</a></p>
-		</div>
-		<div class="col-md-4">
-			<h2>Open Source</h2>
-			<p>We only use free and open source software. You can use it to host your own solution.</p>
-			<p><a class="btn btn-primary btn-raised" href="/about" role="button">Read the source &raquo;</a></p>
-		</div>
-		<div class="col-md-4">
-			<h2>Read more...</h2>
-			<p>Follow my blog to read more and find more projects I am working on.</p>
-			<p><a class="btn btn-primary btn-raised" href="https://www.iamfabulous.de" role="button">Follow me &raquo;</a></p>
+		<div class="col-md-12">
+			<h2><span class="fa fa-question-circle"></span> Why</h2>
+			<p><strong>Libremail</strong> is the result from when I first needed a quick and simple E-Mail solution without much hassle. Now a lot of people are relying on mail delivery. We are even hosting some mailing lists here.
+					If you are interested you can follow my blog to read and find more projects I am working on.</p>
+				<p><a class="btn btn-primary btn-raised" href="https://www.iamfabulous.de" role="button"><span class="fa fa-plus"></span> Follow me &raquo;</a></p>
 		</div>
 	</div>
 </div>
diff --git a/views/index_de.html b/views/index_de.html
index fb1d7d9..327af8f 100644
--- a/views/index_de.html
+++ b/views/index_de.html
@@ -4,47 +4,42 @@
 
 <div class="jumbotron">
 	<div class="container">
-		<h1>Libremail</h1>
+		<h1><!--span class="fa fa-envelope"></span--> Libremail</h1>
 		<p>Genervt from Spam? Sie brauchen nur ein E-Mail Adresse? Oder Sie besitzen eine eigene Domain und möchten darüber E-Mails versenden?
-			<strong>Sie sind genau richtig!</strong>
+			<strong>Hier sind Sie genau richtig!</strong>
 			<br>Komplett kostenlos und werbefrei!</p>
-		<p><a class="btn btn-primary btn-lg btn-raised" href="/about" role="button">Lese mehr &raquo;</a></p>
+		<p><a class="btn btn-primary btn-lg btn-raised" href="/about" role="button"><span class="fa fa-sign-in"></span> Neue Adresse &raquo;</a></p>
 	</div>
 </div>
 <div class="container">
 	<div class="row">
 		<div class="col-md-4">
-			<h2>Schnell & Einfach</h2>
-			<p>Nur 2 Klicke nötig<br>
-				Wähle Sie eine freie Adresse und registrieren Sie sich.</p>
-			<p><a class="btn btn-primary btn-raised" href="/register" role="button">Registrieren &raquo;</a></p>
+			<h2><span class="fa fa-user"></span> Schnell & Einfach</h2>
+			<p>Nur noch 10 Sekunden bis zur neuen Mail Adresse.
+				Wähle Sie eine freie Adresse und registrieren Sie sich.<br>
+				Trauen Sie sich! Es ist frei und wir beißen nicht.</p>
+			<p><a class="btn btn-primary btn-raised" href="/register" role="button"><span class="fa fa-user-plus"></span> Registrieren &raquo;</a></p>
 		</div>
 		<div class="col-md-4">
-			<h2>Sicher</h2>
-			<p>Wir nutzen moderne Verschlüsselungsalgorithmen und erzwingen eine sichere Kommunikation.</p>
-			<p><a class="btn btn-primary btn-raised" href="/about" role="button">Über uns &raquo;</a></p>
+			<h2><span class="fa fa-lock"></span> Sicher</h2>
+			<p>Wir geben unser bestes um immer aktuell zu sein und die neuesten Technologien zu benutzen. Deswegen empfehlen wir nicht nur Verschlüsselung, sondern erzwingen sie wo immer es geht.
+				<p><a class="btn btn-primary btn-raised" href="/about" role="button"><span class="fa fa-file"></span> Über uns &raquo;</a></p>
 		</div>
 		<div class="col-md-4">
-			<h2>Features</h2>
-			<p>Alles was man braucht, IMAP, POP3 und Webmail inklusive.</p>
-			<p><a class="btn btn-primary btn-raised" href="/server" role="button">Features &raquo;</a></p>
+			<h2><span class="fa fa-globe"></span> Eigene Domain</h2>
+			<p>Sie besitzen eine Domain? Wir kümmerns uns gerne um Ihre E-Mail setup. Setzen Sie ihr DNS und bekommen Sie alles auf einmal.</p>
+			<p><a class="btn btn-primary btn-raised" href="/howto#own_domain" role="button"><span class="fa fa-plus-circle"></span> Lese wie es geht &raquo;</a></p>
 		</div>
 	</div>
+</div>
+<div class="lp"></div>
+<div class="container">
 	<div class="row">
-		<div class="col-md-4">
-			<h2>Eigene Domain</h2>
-			<p>Sie besitzen eine Domain? Wir kümmerns uns gerne um Ihre E-Mail setup. Setzen Sie ihr DNS und bekommen Sie alles auf einmal.</p>
-			<p><a class="btn btn-primary btn-raised" href="/howto#own_domain" role="button">Lese wie es geht &raquo;</a></p>
-		</div>
-		<div class="col-md-4">
-			<h2>Open Source</h2>
-			<p>Wir nutzen nur freie und Open Source software. Sie können auch alles selber hosten.</p>
-			<p><a class="btn btn-primary btn-raised" href="/about" role="button">Lies über uns &raquo;</a></p>
-		</div>
-		<div class="col-md-4">
-			<h2>Lese mehr...</h2>
-			<p>Folgen Sie meinem Blog und finden Sie mehr Projekte, an denen ich arbeite.</p>
-			<p><a class="btn btn-primary btn-raised" href="https://www.iamfabulous.de" role="button">Folge mir &raquo;</a></p>
+		<div class="col-md-12">
+			<h2><span class="fa fa-question-circle"></span> Warum</h2>
+			<p><strong>Libremail</strong> ist das Ergebnis meiner Bemühungen, als ich einen stressfreien E-Mail Anbieter ohne großes Brimborium drumherum gesucht habe. Inzwischen vertrauen einige Leute darauf, dass ihre E-Mails zugestellt werden. Wir hosten sogar Mailing Listen auf diesem Server.
+			Wenn Sie interessiert sind, dann können Sie meinen Blog folgen.</p>
+			<p><a class="btn btn-primary btn-raised" href="https://www.iamfabulous.de" role="button"><span class="fa fa-plus"></span> Folge Mir &raquo;</a></p>
 		</div>
 	</div>
 </div>
diff --git a/views/navbar.html b/views/navbar.html
index 6cca286..2b581f6 100644
--- a/views/navbar.html
+++ b/views/navbar.html
@@ -12,31 +12,30 @@
 		<div class="collapse navbar-collapse" id="navbarCollapse">
 			<ul class="nav navbar-nav navbar-left">
 				<li>
-					<a class="" href="/about" title="About us"><span class="glyphicon glyphicon-file"></span> About</a>
-				</li>
-				<li>
-					<a class="" href="/howto" title="How to"><span class="glyphicon glyphicon-star"></span> How to</a>
-				</li>
-				<li>
-					<a class="" href="/server" title="Server"><span class="glyphicon glyphicon-cog"></span> Server</a>
-				</li>
-				<li>
-					<a class="" href="https://iamfabulous.de/contact/" title="Contact" target="_blank"><span class="glyphicon glyphicon-phone-alt"></span> Contact</a>
+					<a class="" href="https://iamfabulous.de/webmail" title="Login to Webmail"><span class="glyphicon glyphicon-envelope"></span> Read Your Mail</a>
 				</li>
+				<li><a class="" href="/register" title="Sign Up"><span class="fa fa-user-plus"></span> Create New Account</a></li>
+				<li><a class="" href="/password" title="Change Password"><span class="fa fa-lock"></span> Change Password</a></li>
 			</ul>
 			<ul class="nav navbar-nav navbar-right">
 				<li>
 					<a class="" href="/locale?to=de" title="Change to German"><span class="fa fa-language"></span> de</a>
 				</li>
-				<li>
-					<a class="" href="https://iamfabulous.de/webmail" title="Webmail"><span class="glyphicon glyphicon-envelope"></span> Webmail</a>
-				</li>
 				<li class="dropdown">
-					<a class="" href="/register" title="Sign Up" data-target="#" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> User <span class="caret"></span></a>
+					<a class="" href="/register" title="More" data-target="#" data-toggle="dropdown"><span class="fa fa-plus"></span> More <span class="caret"></span></a>
 					<ul class="dropdown-menu" role="menu">
-						<li><a class="" href="/register" title="Sign Up"><span class="fa fa-user-plus"></span> Create New</a></li>
-						<li><a class="" href="/password" title="Change Password"><span class="fa fa-lock"></span> Change Password</a></li>
-						<li></li>
+						<li>
+							<a class="" href="/about" title="About us"><span class="glyphicon glyphicon-file"></span> About</a>
+						</li>
+						<li>
+							<a class="" href="/howto" title="How to"><span class="glyphicon glyphicon-star"></span> How to</a>
+						</li>
+						<li>
+							<a class="" href="/server" title="Server"><span class="glyphicon glyphicon-cog"></span> Server</a>
+						</li>
+						<li>
+							<a class="" href="https://iamfabulous.de/contact/" title="Contact" target="_blank"><span class="glyphicon glyphicon-phone-alt"></span> Contact</a>
+						</li>
 					</ul>
 				</li>
 			</ul>
diff --git a/views/navbar_de.html b/views/navbar_de.html
index 1ff6b52..747d4b8 100644
--- a/views/navbar_de.html
+++ b/views/navbar_de.html
@@ -12,31 +12,30 @@
 		<div class="collapse navbar-collapse" id="navbarCollapse">
 			<ul class="nav navbar-nav navbar-left">
 				<li>
-					<a class="" href="/about" title="Über uns"><span class="glyphicon glyphicon-file"></span> Über uns</a>
-				</li>
-				<li>
-					<a class="" href="/howto" title="How to"><span class="glyphicon glyphicon-star"></span> How to</a>
-				</li>
-				<li>
-					<a class="" href="/server" title="Server"><span class="glyphicon glyphicon-cog"></span> Server</a>
-				</li>
-				<li>
-					<a class="" href="https://iamfabulous.de/contact/" title="Contact" target="_blank"><span class="glyphicon glyphicon-phone-alt"></span> Contact</a>
+					<a class="" href="https://iamfabulous.de/webmail" title="Webmail"><span class="glyphicon glyphicon-envelope"></span> Login & E-Mail lesen</a>
 				</li>
+				<li><a class="" href="/register" title="Sign Up"><span class="fa fa-user-plus"></span> Neuen Account erstellen</a></li>
+				<li><a class="" href="/password" title="Change Password"><span class="fa fa-lock"></span> Passwort ändern</a></li>
 			</ul>
 			<ul class="nav navbar-nav navbar-right">
 				<li>
 					<a class="" href="/locale?to=en" title="Change to English"><span class="fa fa-language"></span> en</a>
 				</li>
-				<li>
-					<a class="" href="https://iamfabulous.de/webmail" title="Webmail"><span class="glyphicon glyphicon-envelope"></span> Webmail</a>
-				</li>
 				<li class="dropdown">
-					<a class="" href="/register" title="Nutzer" data-target="#" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Nutzer<span class="caret"></span></a>
+					<a class="" href="/register" title="Nutzer" data-target="#" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Mehr <span class="caret"></span></a>
 					<ul class="dropdown-menu" role="menu">
-						<li><a class="" href="/register" title="Sign Up"><span class="fa fa-user-plus"></span> Neu erstellen</a></li>
-						<li><a class="" href="/password" title="Change Password"><span class="fa fa-lock"></span> Passwort ändern</a></li>
-						<li></li>
+						<li>
+							<a class="" href="/about" title="Über uns"><span class="glyphicon glyphicon-file"></span> Über uns</a>
+						</li>
+						<li>
+							<a class="" href="/howto" title="How to"><span class="glyphicon glyphicon-star"></span> How to</a>
+						</li>
+						<li>
+							<a class="" href="/server" title="Server"><span class="glyphicon glyphicon-cog"></span> Server</a>
+						</li>
+						<li>
+							<a class="" href="https://iamfabulous.de/contact/" title="Contact" target="_blank"><span class="glyphicon glyphicon-phone-alt"></span> Contact</a>
+						</li>
 					</ul>
 				</li>
 			</ul>
diff --git a/views/user_de.html b/views/user_de.html
index fe5e1a1..454b69f 100644
--- a/views/user_de.html
+++ b/views/user_de.html
@@ -12,7 +12,7 @@
 				<p>
 					Sie können hier ihr Passwort ändern.
 					<br>
-					<a class="btn btn-primary btn-raised" href="/password" role="button">Ändere Passwort &raquo;</a>
+					<a class="btn btn-primary btn-raised" href="/password" role="button">Ändere dein Passwort &raquo;</a>
 				</p>
 				<br>
 				<h2 id="sign_up">Erstelle eine neue Adresse</h2>
@@ -29,7 +29,7 @@
 				<br>
 				Loggen Sie sich mit Ihrer E-Mail Adresse und Ihrem Passwort ein.
 				<br>
-				<a class="btn btn-primary btn-raised" href="https://iamfabulous.de/webmail" role="button">Webmail &raquo;</a>
+				<a class="btn btn-primary btn-raised" href="https://iamfabulous.de/webmail" role="button">Logge dich in dein E-Mail Konto ein &raquo;</a>
 				<br>
 				<br>
 				Wenn Sie ihren eigenen Klienten nutzen wollen, schauen Sie hier für Verbindungsdetails.