From a6d9a109c052426fcf4d3c8415e459801ca9efdd Mon Sep 17 00:00:00 2001
From: Suraj Patil <sapatil@live.com>
Date: Sat, 14 May 2016 19:54:31 +0530
Subject: [PATCH] login page looks more modern now

---
 public/static/css/styles.css | 393 ++++++++++++++++++-----------------
 templates/login.html         |  93 ++++++---
 2 files changed, 272 insertions(+), 214 deletions(-)

diff --git a/public/static/css/styles.css b/public/static/css/styles.css
index 187fb70..5e99e84 100644
--- a/public/static/css/styles.css
+++ b/public/static/css/styles.css
@@ -15,61 +15,76 @@ Layout
 -------------------------------------- */
 
 .commentslist {
-    background-color: #f5f5f5;
+  background-color: #f5f5f5;
+}
+
+.loginbutton {
+  height: 38px;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #555;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
 }
 
 .comment {
-    padding-left: 25px;
-    padding-right: 25px;
-    padding-top: 15px;
+  padding-left: 25px;
+  padding-right: 25px;
+  padding-top: 15px;
 }
 
-ul{
-    list-style-type: none;
+ul {
+  list-style-type: none;
 }
 
-.timestamp{
-    color: #aaa;
+.timestamp {
+  color: #aaa;
 }
 
-.badge{
+.badge {
   background-color: #1a78c9;
-  margin-right:10px;
-  float:right;
+  margin-right: 10px;
+  float: right;
 }
 
-.center{
-  text-align:center;
+.center {
+  text-align: center;
 }
 
-.navbar-brand:hover{
-  color:white;
+.navbar-brand:hover {
+  color: white;
 }
 
-.footer{
-  height:30px;
-  width:auto;
-  text-align:center;
-
+.footer {
+  height: 30px;
+  width: auto;
+  text-align: center;
 }
+
 textarea {
   resize: vertical;
 }
 
-.floating-action-icon{
+.floating-action-icon {
   position: fixed;
-  bottom:40px;
-  right:30px;
-  z-index:101;
+  bottom: 40px;
+  right: 30px;
+  z-index: 101;
   width: 56px;
   height: 56px;
   font-size: 20px;
   border-radius: 35px;
-  box-shadow:0 0 4px #111;
-  padding-top:10px !important;
+  box-shadow: 0 0 4px #111;
+  padding-top: 10px !important;
 }
 
-.notification{
+.notification {
   width: -moz-fit-content;
   position: fixed;
   right: 10px;
@@ -87,326 +102,330 @@ textarea {
 }
 
 #btnMessage {
-    padding: 1px 12px;
-    height: 30px;
-    text-align: center;
-    float: right;
+  padding: 1px 12px;
+  height: 30px;
+  text-align: center;
+  float: right;
 }
 
+
 /*--------------------------------------
 Navbar
 -------------------------------------- */
 
-.mainHeader{
+.mainHeader {
   background-color: #3f51b5;
-  border-radius:0px;
-
+  border-radius: 0px;
 }
 
-.navbar-brand{
+.navbar-brand {
   margin-left: 25px;
-  font-size:1.5em;
-  color:white;
+  font-size: 1.5em;
+  color: white;
   max-width: 2000px;
 }
 
-.btn-action{
+.btn-action {
   background-color: #3f51b5;
 }
 
-#icons{
-  text-align:right;
+#icons {
+  text-align: right;
   float: right;
   height: 50%;
   line-height: 52px;
-  float:right;
+  float: right;
   margin-top: 10px;
 }
 
-nav .glyphicon{
-  color:white;
+nav .glyphicon {
+  color: white;
 }
 
-nav  .glyphicon:hover{
-  color:black;
+nav .glyphicon:hover {
+  color: black;
 }
 
-.sr-only{
-  display:block;
-  width:20px;
-  height:3px;
+.sr-only {
+  display: block;
+  width: 20px;
+  height: 3px;
   background-color: white;
   margin-bottom: 4px;
 }
 
-.hidden{
-  display:none;
+.hidden {
+  display: none;
 }
 
+
 /*--------------------------------------
 NotesFeed
 -------------------------------------- */
+
 .overdue {
-    color: red;
-    margin-top: 1px;
-    font-size: 12px;
-    padding-top: -100px;
-    position: absolute;
-    padding-left: 5px;
+  color: red;
+  margin-top: 1px;
+  font-size: 12px;
+  padding-top: -100px;
+  position: absolute;
+  padding-left: 5px;
 }
 
 .noteHeading {
-    font-weight:900;
-    font-size:17px;
-    color:#666666;    
-    margin-bottom:0px;
-    padding-bottom:5px;
+  font-weight: 900;
+  font-size: 17px;
+  color: #666666;
+  margin-bottom: 0px;
+  padding-bottom: 5px;
 }
-hr{
-    margin: 0;
-    padding: 0;
 
+hr {
+  margin: 0;
+  padding: 0;
 }
 
 .noteHeading a {
-  font-weight:400;
-  font-size:11px;
+  font-weight: 400;
+  font-size: 11px;
 }
 
 .noteContent {
-    padding-top: 7px;
-    font-size: 0.9em;
-    display: none;
+  padding-top: 7px;
+  font-size: 0.9em;
+  display: none;
 }
 
 .noteContent img {
-    width: 90%;
-    padding-left: 10%;
+  width: 90%;
+  padding-left: 10%;
 }
 
-.toggle{
+.toggle {
   cursor: pointer;
-  margin-top:-30px;
-  float:right;
+  margin-top: -30px;
+  float: right;
 }
 
-.notefooter{
-    color:#aaa;
-    height: 20px;
+.notefooter {
+  color: #aaa;
+  height: 20px;
 }
 
+
 /* These are the classes that are going to be applied: */
+
 .column {
-    float: left;
+  float: left;
 }
 
-.note{
-    display: block;
-    margin: 4px;
-    margin-bottom: 6px;
-    padding: 15px;
-    background-color: white;
-    box-shadow:1px 1px 2px 1px #7D7470;
-    border-radius:4px 4px 4px 4px;
-    height: auto;
-
+.note {
+  display: block;
+  margin: 4px;
+  margin-bottom: 6px;
+  padding: 15px;
+  background-color: white;
+  box-shadow: 1px 1px 2px 1px #7D7470;
+  border-radius: 4px 4px 4px 4px;
+  height: auto;
 }
 
-.note:hover{
-    border-bottom: 2px solid black;
+.note:hover {
+  border-bottom: 2px solid black;
 }
+
 .menu a {
-    text-decoration: none;
+  text-decoration: none;
 }
-.menu li{
-    margin-top: -10px;
-    list-style: none;
-    float: right;
-    padding: 5px;
-    height: 15px;
+
+.menu li {
+  margin-top: -10px;
+  list-style: none;
+  float: right;
+  padding: 5px;
+  height: 15px;
 }
 
+
 /*--------------------------------------
 Navigation drawer
 -------------------------------------- */
 
-.list-group-item{
-  border:none;
+.list-group-item {
+  border: none;
 }
 
-.sidebar-item h5{
-  margin-left:15px;
+.sidebar-item h5 {
+  margin-left: 15px;
   display: block;
 }
 
-.sidebar-item .glyphicon:hover{
-  color:black;
+.sidebar-item .glyphicon:hover {
+  color: black;
 }
 
-
-.col-sm-2 a.list-group-item:hover,a.list-group-item:focus{
-  text-decoration:none;
+.col-sm-2 a.list-group-item:hover,
+a.list-group-item:focus {
+  text-decoration: none;
   background-color: transparent;
-
 }
 
-body{
+body {
   background-color: #f5f5f5;
-  overflow-x:hidden;
-  overflow-y:auto;
-  margin-top:70px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin-top: 70px;
 }
 
-.nav-item{
+.nav-item {
   padding-left: 10px;
 }
 
-.col-sm-2{
+.col-sm-2 {
   background-color: white;
 }
 
-.badge{
+.badge {
   background-color: #7D8EF0;
-  margin-right:10px;
-  float:right;
+  margin-right: 10px;
+  float: right;
 }
 
+
 /* --------------------------------------
 Global Styles
 -------------------------------------- */
-body{
-  width:100%;
+
+body {
+  width: 100%;
 }
 
-.main-content{
-  color:black;
+.main-content {
+  color: black;
 }
 
-.highlight{
+.highlight {
   background-color: #72CBFF;
 }
+
+
 /* --------------------------------------
 Media Queries
 -------------------------------------- */
 
-/* Portrait & landscape phone */
-@media (max-width: 480px) {
-  body{
-    margin-top:105px;
-  }
 
-.timeline {
+/* Portrait & landscape phone */
+
+@media (max-width: 480px) {
+  body {
+    margin-top: 105px;
+  }
+  .timeline {
     overflow: hidden;
     width: 100%;
-}
-
-  #icons{
-    text-align:center;
-    padding:0;
+  }
+  #icons {
+    text-align: center;
+    padding: 0;
     height: 50%;
     line-height: 52px;
-    float:right;
+    float: right;
     margin-top: 10px;
   }
-
-  .mainHeader h3{
-    padding:0px;
-    text-align:center;
+  .mainHeader h3 {
+    padding: 0px;
+    text-align: center;
   }
-
-
-  .note-sm{
-    height:150px;
+  .note-sm {
+    height: 150px;
   }
-
-  .floating-action-icon{
+  .floating-action-icon {
     position: fixed;
-    bottom:35px;
-    right:20px;
-    z-index:101;
+    bottom: 35px;
+    right: 20px;
+    z-index: 101;
     width: 50px;
     height: 50px;
     padding: 10px 10px;
     font-size: 24px;
     border-radius: 25px;
-    text-align:center;
+    text-align: center;
   }
-
-  .modal-dialog{
-    width:240px;
+  .modal-dialog {
+    width: 240px;
   }
 }
 
 
 /* Landscape phone to portrait tablet */
+
 @media (max-width: 768px) and (min-width:481px) {
-  #icons{
-    text-align:center;
-    padding:0;
+  #icons {
+    text-align: center;
+    padding: 0;
     height: 50%;
     line-height: 52px;
-    float:right;
+    float: right;
     margin-top: 10px;
   }
-  
-
-  body{
-    margin-top:105px;
+  body {
+    margin-top: 105px;
   }
-.timeline {
+  .timeline {
     overflow: hidden;
     width: 100%;
-}
-
-
-  .mainHeader h3{
-    padding:0px;
-    text-align:center;
   }
-
-  .note-lg{
-    height:360px;
+  .mainHeader h3 {
+    padding: 0px;
+    text-align: center;
+  }
+  .note-lg {
+    height: 360px;
     /*change later*/
   }
-  .modal-dialog{
-    width:250px;
+  .modal-dialog {
+    width: 250px;
   }
-
 }
 
 
 /* Large desktop */
+
 @media (max-width: 1400px) and (min-width:769px) {
-    .timeline {
-		overflow: hidden;
-		width: 55%;
-		margin-left:20%;
+  .timeline {
+    overflow: hidden;
+    width: 55%;
+    margin-left: 20%;
+  }
 }
 
-}
 
 /*--------------------------------------
 Sidebar
 -------------------------------------- */
-.sidebar-toggle{
-  left:10px !important;
+
+.sidebar-toggle {
+  left: 10px !important;
 }
-.sidebar-wrapper.sidebar-default.sidebar-open, .sidebar-wrapper.sidebar-default.sidebar-dragging{
-  width:260px;
+
+.sidebar-wrapper.sidebar-default.sidebar-open,
+.sidebar-wrapper.sidebar-default.sidebar-dragging {
+  width: 260px;
 }
 
+
 /*Modal dialog*/
 
 .modal-footer {
   padding: 10px 15px 15px;
-  margin:0;
-  border:none;
+  margin: 0;
+  border: none;
 }
 
-.modal-body{
-  padding: 20px 20px 10px 20px;  
+.modal-body {
+  padding: 20px 20px 10px 20px;
 }
 
-.modal{
+.modal {
   overflow: hidden;
-}
+}
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
index eeaf200..f2c6436 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,36 +1,75 @@
-<div class="timeline">
-    <div class="note">
-        Login
-        <form action="/login/" method="POST">
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title> Welcome to Tasks, login or sign up
+    </title>
+
+    <!-- Mobile viewport optimized -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <!-- Bootstrap CSS -->
+    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/static/css/bootstrap-glyphicons.css" rel="stylesheet">
+
+    <!-- Custom CSS -->
+    <link href="/static/css/styles.css" rel="stylesheet">
+    <link href="/static/css/sidebar.css" rel="stylesheet">
+    <link href="/static/css/sidebar-bootstrap.css" rel="stylesheet">
+    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
+
+    <!-- Include Modernizr in the head, before any other Javascript -->
+    <!--<script src="/static/js/modernizr-2.6.2.min.js"></script>-->
+    <!-- All Javascript at the bottom of the page for faster page loading -->
+    <script src="/static/js/jquery.min.js"></script>
+    <!-- If no online access, fallback to our hardcoded version of jQuery
+		<script>window.jQuery || document.write('<script src="/static/js/jquery-1.8.2.min.js"><\/script>')</script>
+		-->
+    <!-- Bootstrap JS -->
+    <script src="/static/js/bootstrap.min.js"></script>
+
+    <!-- Custom JS -->
+    <script src="/static/js/script.js"></script>
+    <script src="/static/js/hammer.min.js"></script>
+    <script src="/static/js/sidebar.js"></script>
+
+</head>
+
+<body>
+    <nav class="navbar navbar-default navbar-fixed-top mainHeader">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <p class="navbar-brand" href="/">Tasks</p>
+            </div>
+        </div>
+    </nav>
+
+    <div class="timeline">
+        <div class="note">
+            <p class="noteHeading ">Login </p>
             <div class="form-group">
-                <input type="text" name="username" class="form-control" placeholder="Username" />
-                <input type="password" name="password" class="form-control" placeholder="Password" />
+                <form action="/login/" method="POST">
+                    <input type="text" name="username" class="loginbutton" placeholder="Username" />
+                    <input type="password" name="password" class="loginbutton" placeholder="Password" />
+                    <input type="submit" value="Submit" class="btn btn-primary" />
+                </form>
             </div>
+        </div>
 
-            <div class="modal-footer">
-                <input type="submit" value="Submit" class="btn btn-primary" id="addNoteBtn" />
+        <div class="note">
+            <p class="noteHeading ">Sign up </p>
+            <div class="form-group">
+                <form action="/signup/" method="POST">
+                    <input type="text" name="username" class="loginbutton" placeholder="Username" />
+                    <input type="password" name="password" class="loginbutton" placeholder="Password" />
+                    <input type="email" name="email" class="loginbutton" placeholder="demo@demo.com" />
+                    <input type="submit" value="Submit" class="btn btn-primary" />
+                </form>
             </div>
-        </form>
-
+        </div>
     </div>
 
-    <div class="note">
-        Sign up
-         <form action="/signup/" method="POST">
-            <div class="form-group">
-                <input type="text" name="username" class="form-control" placeholder="Username" />
-                <input type="password" name="password" class="form-control" placeholder="Password" />
-                <input type="email" name="email" class="form-control" placeholder="demo@demo.com" />
-            </div>
-
-            <div class="modal-footer">
-                <input type="submit" value="Submit" class="btn btn-primary" id="addNoteBtn" />
-            </div>
-        </form>
-    </div>
-
-</div>
-{{template "footer.html"}}
+    {{template "_footer.html"}}
 
 </body>