Adding forms to login, signup and lost password

public/stylesheets/style.css

@@ -1,8 +1,51 @@
 body {
   padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  color: white;
+  background-color: #101010;
+  margin: 0;
+  padding: 0; }
 
-a {
+h2 {
-  color: #00B7FF; }
+  color: #e0e0e0;
+  margin-top: 0;
+  text-align: center; }
+
+#signin, #signup, #forgotPsw {
+  padding: 4vw; }
+
+.signinup {
+  margin-top: 15vh;
+  background-color: #2a2a2a;
+  border-radius: 2vw; }
+  .signinup img {
+    width: 20%;
+    display: block;
+    margin: auto; }
+  .signinup form input {
+    margin-bottom: 4vh;
+    font-size: 25px; }
+  .signinup form input:focus {
+    border: 1px solid #00c0ff; }
+  .signinup form input[type="submit"] {
+    padding: 1vw;
+    border-radius: 2vw;
+    background-color: #0099ff;
+    color: white;
+    border: none;
+    width: 40%;
+    display: block;
+    margin: auto;
+    font-size: 35px;
+    border: 2px solid #2C3531;
+    cursor: pointer;
+    transition-duration: 0.3s; }
+  .signinup form input[type="submit"]:hover {
+    color: #34eba1;
+    background-color: white;
+    border: 2px solid #34eba1; }
+
+i {
+  color: #00c0ff; }
 
 /*# sourceMappingURL=style.css.map */

public/stylesheets/style.css.map

@@ -5,5 +5,5 @@
 		"style.sass"
 	],
 	"names": [],
-	"mappings": "AAAA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAI;EACb,IAAI,EAAE,kDAAkD,GAAG;;AAE7D,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,OAAO,GAAG"
+	"mappings": "AAQA,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAI;EACb,IAAI,EAAE,kDAAkD;EACxD,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAVV,OAAO;EAWb,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC,GAAG;;AAGf,AAAA,EAAE,CAAC;EACD,KAAK,EAdC,OAAO;EAeb,UAAU,EAAE,CAAC;EACb,UAAU,EAAE,MAAM,GAAG;;AAEvB,AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC;EAC3B,OAAO,EAAE,GAAG,GAAG;;AAEjB,AAAA,SAAS,CAAC;EACR,UAAU,EAAE,IAAI;EAChB,gBAAgB,EAxBV,OAAO;EAyBb,aAAa,EAAE,GAAG,GA4BkB;EA/BtC,AAIE,SAJO,CAIP,GAAG,CAAC;IACF,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,IAAI,GAAG;EAPnB,AAUI,SAVK,CASP,IAAI,CACF,KAAK,CAAC;IACJ,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,IAAI,GAAG;EAZxB,AAaI,SAbK,CASP,IAAI,CAIF,KAAK,AAAA,MAAM,CAAC;IACV,MAAM,EAAE,GAAG,CAAC,KAAK,CAvCb,OAAO,GAuCkB;EAdnC,AAeI,SAfK,CASP,IAAI,CAMF,KAAK,CAAA,AAAA,IAAC,CAAK,QAAQ,AAAb,EAAe;IACnB,OAAO,EAAE,GAAG;IACZ,aAAa,EAAE,GAAG;IAClB,gBAAgB,EA1CV,OAAO;IA2Cb,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,iBAAiB;IACzB,MAAM,EAAE,OAAO;IACf,mBAAmB,EAAE,IAAI,GAAG;EA3BlC,AA4BI,SA5BK,CASP,IAAI,CAmBF,KAAK,CAAA,AAAA,IAAC,CAAK,QAAQ,AAAb,CAAc,MAAM,CAAC;IACzB,KAAK,EAAE,OAAO;IACd,gBAAgB,EAAE,KAAK;IACvB,MAAM,EAAE,iBAAiB,GAAG;;AAElC,AAAA,CAAC,CAAC;EACA,KAAK,EA3DG,OAAO,GA2DG"
 }

public/stylesheets/style.sass

@@ -1,6 +1,60 @@
+$primary: #00c0ff;
+$secondary: #0099ff;
+$dark1: #101010;
+$dark2: #2a2a2a;
+$light: #e0e0e0;
+$light2: #C5C6C7;
+
+
 body
   padding: 50px
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
+  color: white;
+  background-color: $dark1;
+  margin: 0;
+  padding: 0;
 
-a
+
-  color: #00B7FF
+h2
+  color: $light;
+  margin-top: 0;
+  text-align: center;
+
+#signin, #signup, #forgotPsw
+  padding: 4vw;
+
+.signinup
+  margin-top: 15vh;
+  background-color: $dark2;
+  border-radius: 2vw;
+  img
+    width: 20%;
+    display: block;
+    margin: auto;
+
+  form
+    input
+      margin-bottom: 4vh;
+      font-size: 25px;
+    input:focus
+      border: 1px solid $primary;
+    input[type="submit"]
+      padding: 1vw;
+      border-radius: 2vw;
+      background-color: $secondary;
+      color: white;
+      border: none;
+      width: 40%;
+      display: block;
+      margin: auto;
+      font-size: 35px;
+      border: 2px solid #2C3531;
+      cursor: pointer;
+      transition-duration: 0.3s
+    input[type="submit"]:hover
+      color: #34eba1;
+      background-color: white;
+      border: 2px solid #34eba1;
+
+i
+  color: $primary;

views/index.pug

@@ -1,5 +1,52 @@
 extends layout
 
 block content
-  h1= title
+  div(class='row main-form')
-  p Welcome to #{title}
+    div(class='col s12 m8 offset-m2 signinup z-depth-5' id="signin")
+        h2 Welcome back
+        form
+          div(class="input-field col s12")
+            i(class="material-icons prefix") mail
+            input(type="text" id="mail-input" class="autocomplete")
+            label(for="mail-input") Email
+
+          div(class="input-field col s12")
+            i(class="material-icons prefix") lock
+            input(type="password" id="password-input" class="autocomplete")
+            label(for="password-input") Password
+
+          input(type='submit' value='Login')
+
+    div(class='col s12 m8 offset-m2 signinup z-depth-5' id="signup")
+      h2 Welcome
+      form
+        div(class="input-field col s6")
+          i(class="material-icons prefix") portrait
+          input(type="text" id="firstname-input" class="autocomplete")
+          label(for="firstname-input") First Name
+
+        div(class="input-field col s6")
+          input(type="text" id="lastname-input" class="autocomplete")
+          label(for="lastname-input") Last Name
+
+        div(class="input-field col s12")
+          i(class="material-icons prefix") mail
+          input(type="text" id="mailreg-input" class="autocomplete")
+          label(for="mailreg-input") Email
+
+        div(class="input-field col s12")
+          i(class="material-icons prefix") lock
+          input(type="password" id="passwordreg-input" class="autocomplete")
+          label(for="passwordreg-input") Password
+
+        input(type='submit' value='Register')
+
+    div(class='col s12 m8 offset-m2 signinup z-depth-5' id="forgotPsw")
+      h2 Forgot password
+      form
+        div(class="input-field col s12")
+          i(class="material-icons prefix") mail
+          input(type="text" id="mailforgot-input" class="autocomplete")
+          label(for="mailforgot-input") Email
+
+        input(type='submit' value='Send email')

views/layout.pug

@@ -2,6 +2,9 @@ doctype html
 html
   head
     title= title
+    link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")
+    link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css")
     link(rel="stylesheet", href="/stylesheets/style.css")
   body
     block content
+    script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js")

views/signinup.pug

@@ -0,0 +1,3 @@
+extends layout
+
+block content