freshe index page

app/static/css/login.css

@@ -0,0 +1,57 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+.login-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 12px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  font-family: "Roboto", sans-serif;
+  text-transform: uppercase;
+  outline: 0;
+  background: #4CAF50;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 16px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,.form button:active,.form button:focus {
+  background: #43A047;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.form .message a {
+  color: #4CAF50;
+  text-decoration: none;
+}
+.form .register-form {
+  display: none;
+}

app/static/css/login.css-dist

@@ -0,0 +1,90 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+.login-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  font-family: "Roboto", sans-serif;
+  text-transform: uppercase;
+  outline: 0;
+  background: #4CAF50;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,.form button:active,.form button:focus {
+  background: #43A047;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.form .message a {
+  color: #4CAF50;
+  text-decoration: none;
+}
+.form .register-form {
+  display: none;
+}
+.container {
+  position: relative;
+  z-index: 1;
+  max-width: 300px;
+  margin: 0 auto;
+}
+.container:before, .container:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.container .info {
+  margin: 50px auto;
+  text-align: center;
+}
+.container .info h1 {
+  margin: 0 0 15px;
+  padding: 0;
+  font-size: 36px;
+  font-weight: 300;
+  color: #1a1a1a;
+}
+.container .info span {
+  color: #4d4d4d;
+  font-size: 12px;
+}
+.container .info span a {
+  color: #000000;
+  text-decoration: none;
+}
+.container .info span .fa {
+  color: #EF3B3A;
+}

app/static/css/style.css

@@ -1,3 +1,5 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400);
+
 body {
     /* background: url('/static/images/purplebg.jpg') no-repeat center center fixed; */
     background-size: cover;
@@ -14,6 +16,9 @@ body {
     height:100%;
     font-size: 16px;
     /* font-weight: bold; */
+    font-family: "Roboto", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .page_wrap { 

app/templates/main/index.html

@@ -6,6 +6,7 @@
 
 {% block styles %}
 {{ super() }}
+    <link href="/static/css/login.css" type="text/css" rel="stylesheet">
     <link href="/static/css/simple-slideshow-styles.css" type="text/css" rel="stylesheet" media="screen">
     <style>
     body {
@@ -16,7 +17,14 @@
 
 {% block scripts %}
 {{ super() }}
+    <script type="text/javascript">
+    $('.message a').click(function(){
+       $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
+    });
+    </script>
+
     <script type="text/javascript" src="/static/js/_better-simple-slideshow.js" charset="UTF-8"></script>
+
     <script type="text/javascript">
     var opts = {
         auto : {
@@ -34,6 +42,7 @@
         $('#newsmenu').load('https://www.datapoint.bg/news/latest');
     });
     </script>
+
     <script type="text/javascript">
     $(document).ready(function() {
         $('#livesupport').load('https://www.datapoint.bg/kiwi/');
@@ -44,15 +53,15 @@
 
 {% block page_content %}
     <!--
-    <div class="row">
+      <img src="/static/slideshow/robot.png" class="img-responsive center"></img>
-      <img src="/static/slideshow/robot.png" class="img-responsive"></img>
-    </div>
     -->
+
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-md-6 col-md-offset-3">
   <div class="panel panel-primary panel-transparent">
+
   <div class="panel-body">
-    <img src="../../static/images/srv.jpg" width="100%" />
+    <img src="../../static/images/srv.png" width="100%" class="img-responsive center" />
 <!--
     <div class="bss-slides">
     <figure>
@@ -62,9 +71,28 @@
     </div>
 -->
   </div>
+
+  <div class="panel-body">
+<div class="form">
+  <form class="register-form">
+    <input type="text" placeholder="name"/>
+    <input type="password" placeholder="password"/>
+    <input type="text" placeholder="email address"/>
+    <button>create</button>
+    <p class="message">Already registered? <a href="#">Sign In</a></p>
+  </form>
+  <form class="login-form">
+    <input type="text" placeholder="username"/>
+    <input type="password" placeholder="password"/>
+    <button>login</button>
+    <p class="message">Not registered? <a href="#">Create an account</a></p>
+ </form>
+</div>
   </div>
+
   </div>
 </div>
+</div>
 
 
 <div class="container-fluid-index">
@@ -72,45 +100,30 @@
   <div class="col-md-6">
      <div class="panel panel-primary panel-transparent">
      <div class="panel-body">
-      <img src="../../static/images/VPS-equipment.png" width="128" height="128" />
+      <img src="../../static/images/VPS-equipment.png" width="64" height="64" />
       <h2 class="media-heading">Оборудване</h2>
       <p>Благодарение на внедрените нови технологии ние предлагаме изчислителна мощ, надеждно съхранение на данни и гъвкаво разпределение на ресурсите. Предвиждаме възможности нашата система да бъде неразделна част от текущата ви инфраструктура.</p>
      </div>
-    </div>
-  </div>
-
-  <div class="col-md-6">
-     <div class="panel panel-primary panel-transparent">
     <div class="panel-body">
-      <img src="../../static/images/VPS-Mission.png" width="128" height="128" />
+      <img src="../../static/images/VPS-Security.png" width="64" height="64" />
-      <h2 class="media-heading">Мисия</h2>
-      <p>Желанието ни е да предоставим елегантна платформа за управление на изчислителни процеси, която цели да бъде използваема от всеки, а не само от тесен кръг специалисти, без да се прави компромис с качеството и възможностите й.</p>
-     </div>
-     </div>
-  </div>
-
-</div>
-<div class="row">
-
-  <div class="col-md-6">
-    <div class="panel panel-primary panel-transparent">
-    <div class="panel-body">
-      <img src="../../static/images/VPS-Security.png" width="128" height="128" />
       <h2 class="media-heading">Сигурност и надеждност</h2>
       <p>Системата включва контрол и наблюдение на Вашите процеси в реално време и е обезпечена от най-големите български доставчици на интернет свързаност.</p>
     </div>
     </div>
   </div>
 
- 
   <div class="col-md-6">
      <div class="panel panel-primary panel-transparent">
      <div class="panel-body">
-      <img src="../../static/images/VPS-Support.png" width="128" height="128" />
+      <img src="../../static/images/VPS-Mission.png" width="64" height="64" />
+      <h2 class="media-heading">Мисия</h2>
+      <p>Предоставяме платформа за управление на Вашите изчислителни процеси,</p>
+     </div>
+    <div class="panel-body">
+      <img src="../../static/images/VPS-Support.png" width="64" height="64" />
       <h2 class="media-heading">Поддръжка</h2>
       <p>Ще Ви помогнем във всички неприятни ситуации, по всяко време. </p>
-      <a href="/chat"><button type="button" class="btn btn-sm btn-success">Support</button></a>
+      <a href="mailto:support@datapoint.bg"><button type="button" class="btn btn-sm btn-success">Support</button></a>
-    </div>
     </div>
      </div>
   </div>