Merge branch 'joey-testing' into 'master'

Fixed login/register and added logout.php

See merge request !68

website/public/styles/index.css

@@ -1,22 +1,6 @@
-::selection {
-    background: #845663;
-    color: white;
-}
-
-::-moz-selection {
-    background: #845663;
-    color: white;
-}
-
-a, a:link, a:visited, a:hover, a:active {
-    color: inherit;
-    text-decoration: none;
-}
-
 a.button {
-    background-color: #845663;
-    border: 2px solid black;
-    border-radius: 12px;
+    background-color: #405550;
+    border-radius: 10px;
     color: white;
     cursor: pointer;
     height: 50%;
@@ -27,64 +11,19 @@ a.button {
     font-size: 16px;
 }
 
-a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
-div[data-title]:hover:after{
-    content: attr(data-title);
-    padding: 4px 4px;
-    color: #FFFFFF;
-    position: absolute;
-    left: 0;
-    top: 100%;
-    z-index: 20;
-    white-space: nowrap;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -moz-box-shadow: 0px 0px 4px #222;
-    -webkit-box-shadow: 0px 0px 4px #222;
-    box-shadow: 0px 0px 4px #222;
-    background-color: #333;
-    font-size: 15px;
-    line-height: normal;
-    font-family: Arial, sans-serif;
-}
-
-/* Add Zoom Animation */
-.animate {
-    animation: animatezoom 0.6s
-    -webkit-animation: animatezoom 0.6s;
-}
-
 /* Body */
 body {
     height: 900px;
-
-    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEnqKdVtLbxjKuNsCSCxFRhTOpp3Gm0gsU8bMgA_MeUYyzrUFy);
+    background-color: #C8CABD;
+    /*background-image: url(http://play.pokemonshowdown.com/fx/client-bg-shaymin.jpg);
     background-size: cover;
-    background-repeat: repeat-x;
-    background-attachment: fixed;
+    background-attachment: fixed;*/
 
     /*background-color: #B78996;*/
     color: #333;
-
     font-family: Arial, sans-serif;
 }
 
-/* stijl voor alle buttons */
-button {
-    background-color: #845663;
-    border: 2px solid black;
-    border-radius: 12px;
-    color: white;
-    cursor: pointer;
-    height: 50%;
-    margin: 8px 0;
-    padding: 14px 20px;
-    width: 25%;
-    font-family: Arial;
-    font-size: 16px;
-}
-
 /* The Close Button */
 .close {
   /* Position it in the top right corner outside of the modal */
@@ -106,20 +45,18 @@ button {
 /* inlogform */
 form {
     /*background-color: #a87a87;*/
-    border: 5px solid #325da3;
-    background-color: #a87a87;
     border-radius: 12px;
-    height: 55%;
-    margin: 35px auto;
-    width: 45%;
+    height: 75%;
+    margin: 10px auto;
+    width: 70%;
     overflow-y:auto;
 }
 
 /* inlog titel */
 h1 {
-    padding: 16px;
+    padding: 8px;
     text-align: center;
-    font-size: 2.2em;
+    font-size: 1.5em;
 }
 
 /* registreer titel*/
@@ -130,30 +67,34 @@ h2 {
 }
 
 input[type=text], input[type=password], input[type=email], input[type="date"] {
-    border-radius: 12px;
-    border: 5px solid #ccc;
     box-sizing: border-box;
+    border-color: #C8CABD;
     display: inline-block;
     height: 50%;
     padding: 8px 20px;
     margin: 4px 0;
     width: 50%;
-    font-family: Arial;
-    font-size: 16px;
 }
+/*
+input[type=text], input[type=password], input[type=email], input[type="date"] {
+    border: 0px;
+    border-bottom: 4px solid lightgray;
+    border-radius: 0px;
+}*/
 
 button[type=submit] {
-    background-color: #845663;
-    border: 2px solid black;
-    border-radius: 12px;
-    color: white;
+    background-color: #C8CABD;
+    color: black  ;
     cursor: pointer;
-    height: 50%;
-    margin: 8px 0;
-    padding: 14px 20px;
-    width: 50%;
     font-family: Arial;
     font-size: 16px;
+    width: 50%;
+}
+
+.error {
+    font-family: Arial;
+    font-size: 15px;
+    color: red;
 }
 
 label {
@@ -179,52 +120,31 @@ label {
     color: red;
 }
 
-/* The Modal (background) */
-.modal {
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-    display: none; /* Hidden by default */
-    height: 100%;
-    left: 0;
-    margin: auto;
-    overflow: auto; /* Enable scroll if needed */
-    padding-top: 60px;
-    position: fixed; /* Stay in place */
-    top: 0;
-    width: 100%; /* Full width */
-    z-index: 1; /* Sit on top */
-}
-
-/* Modal Content/Box */
-.modal-content {
-    background-color: #B78996;
-    border: 5px solid #325da3;
-    margin: 5px auto; /* 15% from the top and centered */
-    overflow-y: auto;
-    width: 40%; /* Could be more or less, depending on screen size */
-    height: 60%;
-
-}
-
 @keyframes animatezoom {
     from {transform: scale(0)}
     to {transform: scale(1)}
 }
 
-/* datepicker */
-select {
-    border-radius: 12px;
-    border: 5px solid #ccc;
-    box-sizing: border-box;
-    display: inline-block;
-    height: 50%;
-    padding: 12px 20px;
-    margin: 8px 0;
-    width: 18%;
-    font-family: Arial;
-    font-size: 16px;
+/* White boxes (squares) */
+.platform {
+    background-color: #FFFFFF;
+    /*background-image: url(http://www.planwallpaper.com/static/images/518071-background-hd_xO1TwRc.jpg);
+    background-size: cover;
+    background-repeat: repeat-x;
+    background-attachment: fixed;*/
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    height: 53%;
+    margin: 34px auto;
+    overflow-y: auto;
+    padding: 20px;
+    width: 35%;
 }
 
+/*.platform {
+  width: 40%;
+  margin: 34px auto;
+}*/
+
 @-webkit-keyframes animatezoom {
     from {-webkit-transform: scale(0)}
     to {-webkit-transform: scale(1)}