From 41e172f353c092780412f888f51590655de8a181 Mon Sep 17 00:00:00 2001
From: Kevin Nobel <kevlebon@gmailcom>
Date: Wed, 11 Jan 2017 15:56:31 +0100
Subject: [PATCH 01/12] Added professional images of cats.

---
 website/views/profile.php | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/website/views/profile.php b/website/views/profile.php
index 1207bd9..ad4c7f4 100644
--- a/website/views/profile.php
+++ b/website/views/profile.php
@@ -41,6 +41,14 @@
             </div>
         </div>
 
+        <div class="post-box">
+            <div class="post">
+                <h2>Glitterzz :3</h2>
+                <img src="https://s-media-cache-ak0.pinimg.com/originals/5d/ab/86/5dab8634abeded269f4c456b3b7a6a90.gif" alt="Foto van [gebruikersnaam]">
+                <p class="post-date">Enkele minuten geleden geplaatst</p>
+            </div>
+        </div>
+
         <div class="post-box">
             <div class="post">
                 <h2>Tekst</h2>
@@ -49,6 +57,22 @@
             </div>
         </div>
 
+        <div class="post-box">
+            <div class="post">
+                <h2>woooow</h2>
+                <img src="http://31.media.tumblr.com/5227ca92d5d028bae64060d3f32315c2/tumblr_myt7mjJahV1qimzy6o3_250.gif" alt="Foto van [gebruikersnaam]">
+                <p class="post-date">Enkele minuten geleden geplaatst</p>
+            </div>
+        </div>
+
+        <div class="post-box">
+            <div class="post">
+                <h2>0.0</h2>
+                <img src="https://68.media.tumblr.com/7b2da43b98c43016261831c240381fba/tumblr_o6ol996fHJ1tcu68no1_400.gif" alt="Foto van [gebruikersnaam]">
+                <p class="post-date">Enkele minuten geleden geplaatst</p>
+            </div>
+        </div>
+
         <div class="post-box">
             <div class="post">
                 <h2>Tekst</h2>

From 655c2ccbebaf3ec56ce0fe4b4bcdcb1b43f21bc3 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Wed, 11 Jan 2017 16:02:02 +0100
Subject: [PATCH 02/12] Small Ajustments

---
 website/styles/chat.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/styles/chat.css b/website/styles/chat.css
index 6874372..d76e964 100644
--- a/website/styles/chat.css
+++ b/website/styles/chat.css
@@ -92,8 +92,8 @@
 }
 
 .chat-field input[type="submit"] {
-    width: 60px;
+    width: auto;
     background-color: #845663;
     color: white;
-    padding: 5px;
+    padding: 5px 10px;
 }
\ No newline at end of file

From 1858a0964e2cb80c5aa763ec91e56dd3326e019c Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Thu, 12 Jan 2017 10:44:30 +0100
Subject: [PATCH 03/12] Added some .idea files to the gitignore.

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index d68555a..b1a2ad1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,8 @@
 # User-specific stuff:
 .idea/workspace.xml
 .idea/tasks.xml
+.idea/deployment.xml
+.idea/webServers.xml
 
 # Sensitive or high-churn files:
 .idea/dataSources/

From 3558d80a57b523c25e4cade2484618ca6491ae4a Mon Sep 17 00:00:00 2001
From: Kevin Nobel <kevlebon@gmailcom>
Date: Thu, 12 Jan 2017 11:12:47 +0100
Subject: [PATCH 04/12] Added .idea/* to .gitignore

---
 .gitignore | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index d68555a..49955a1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,8 +10,7 @@
 
 
 # User-specific stuff:
-.idea/workspace.xml
-.idea/tasks.xml
+.idea/*
 
 # Sensitive or high-churn files:
 .idea/dataSources/

From a353cfb1560fe91fb2316f0073936e1e5fc82fec Mon Sep 17 00:00:00 2001
From: Kevin Nobel <kevlebon@gmailcom>
Date: Thu, 12 Jan 2017 11:14:45 +0100
Subject: [PATCH 05/12] Retry gitignore: changed .idea/* to /.idea/*

---
 .gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 49955a1..acadb23 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,7 @@
 
 
 # User-specific stuff:
-.idea/*
+/.idea/*
 
 # Sensitive or high-churn files:
 .idea/dataSources/

From 72d3a5ad8a735687deab004a08633cff65537780 Mon Sep 17 00:00:00 2001
From: Hendrik <hendrik.huang@student.uva.nl>
Date: Thu, 12 Jan 2017 11:16:57 +0100
Subject: [PATCH 06/12] added adminpanel main layout/concept

---
 website/admin.php             | 21 +++++++++
 website/styles/adminpanel.css | 64 ++++++++++++++++++++++++++++
 website/views/adminpanel.php  | 80 +++++++++++++++++++++++++++++++++++
 website/views/head.php        |  2 +-
 4 files changed, 166 insertions(+), 1 deletion(-)
 create mode 100644 website/admin.php
 create mode 100644 website/styles/adminpanel.css
 create mode 100644 website/views/adminpanel.php

diff --git a/website/admin.php b/website/admin.php
new file mode 100644
index 0000000..8d8f8b5
--- /dev/null
+++ b/website/admin.php
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <?php
+        include("views/head.php");
+     ?>
+    <body>
+        <?php
+            /*
+             * This view adds the main layout over the screen.
+             * Header and menu.
+             */
+            include("views/main.php");
+
+            /* Add your view files here. */
+            include("views/adminpanel.php");
+
+            /* This adds the footer. */
+            include("views/footer.php");
+         ?>
+    </body>
+</html>
diff --git a/website/styles/adminpanel.css b/website/styles/adminpanel.css
new file mode 100644
index 0000000..0bd8f1c
--- /dev/null
+++ b/website/styles/adminpanel.css
@@ -0,0 +1,64 @@
+.admin-panel {
+    margin: auto;
+    background-color: white;
+    border-radius: 10px;
+    padding: 15px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.admin-options {
+}
+
+.admin-searchbar {
+    display: inline-block;
+    margin: 10px;
+    vertical-align: top;
+}
+
+.admin-searchinput {
+    border: 2px solid #B78996;
+    border-radius: 2px;
+    margin-bottom: 10px;
+}
+
+.admin-filter {
+    display: inline-block;
+    margin: 10px;
+    vertical-align: top;
+    margin-right: 100px;
+}
+
+.admin-actions {
+    display: inline-block;
+    margin: 10px;
+    vertical-align: top;
+}
+
+.admin-users {
+    margin: 10px;
+}
+
+.usertable {
+    width: 100%;
+}
+
+.usertable .table-checkbox {width: 20px}
+.usertable .table-username {width: 150px}
+.usertable .table-action {width: 200px}
+
+.usertable th, td {
+    border-bottom: 1px solid #ddd;
+    padding: 3px;
+}
+
+.usertable tr {
+    text-align: left;
+}
+
+.usertable tr:hover {
+    background-color: #f5f5f5;
+}
+
+/*div {
+    border: 1px solid black;
+}*/
diff --git a/website/views/adminpanel.php b/website/views/adminpanel.php
new file mode 100644
index 0000000..1d7b509
--- /dev/null
+++ b/website/views/adminpanel.php
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="astyle.css">
+        <title>Admin Panel</title>
+    </head>
+    <body>
+        <div class="content">
+            <div class="admin-panel">
+                <form action="index.html" method="post">
+                <div class="admin-options">
+                    <form action="index.html" method="post">
+                        <div class="admin-searchbar">
+                            <h2>Search</h2>
+                            <input type="text" name="search" class="admin-searchinput"> <br>
+                            <input type="submit" value="Search">
+                        </div>
+                        <div class="admin-filter">
+                            <h2>Show users:</h2>
+                            <input type="checkbox" name="status" value="Active"> Active <br>
+                            <input type="checkbox" name="status" value="Muted"> Muted <br>
+                            <input type="checkbox" name="status" value="Banned"> Banned
+                        </div>
+                    </form>
+                        <div class="admin-actions">
+                            <h2>Actions: </h2>
+                            <input type="radio" name="actions" value="mute"> Mute <br>
+                            <input type="radio" name="actions" value="ban"> Ban <br>
+                            <input type="radio" name="actions" value="unban"> Unban <br> <br>
+                            <input type="submit" value="Confirm">
+                        </div>
+                </div>
+                    <div class="admin-users">
+                        <h2>Users:</h2>
+                        <table class="usertable">
+                            <tr style="text-align: left;">
+                                <th><input type="checkbox" name="checkall"></th>
+                                <th>User</th>
+                                <th>Ban reason</th>
+                                <th style="width: 200px;">Action</th>
+                            </tr>
+                            <tr>
+                                <td><input type="checkbox" name="check1"></td>
+                                <td>John Smith</td>
+                                <td>unregulated time travel</td>
+                                <td>
+                                    <form class="admin-useraction" action="index.html" method="post">
+                                        <select class="action" name="actions">
+                                            <option value="mute">Mute</option>
+                                            <option value="ban">Ban</option>
+                                            <option value="unban">Unban</option>
+                                        </select>
+                                        <input type="submit" value="Confirm">
+                                    </form>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td><input type="checkbox" name="check1"></td>
+                                <td>poey jokeaim</td>
+                                <td>l33t h4xx</td>
+                                <td>
+                                    <form class="admin-useraction" action="index.html" method="post">
+                                        <select class="action" name="actions">
+                                            <option value="mute">Mute</option>
+                                            <option value="ban">Ban</option>
+                                            <option value="unban">Unban</option>
+                                        </select>
+                                        <input type="submit" value="Confirm">
+                                    </form>
+                                </td>
+                            </tr>
+
+                        </table>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/website/views/head.php b/website/views/head.php
index 3266463..4444d97 100644
--- a/website/views/head.php
+++ b/website/views/head.php
@@ -13,7 +13,7 @@
         @import url("styles/header.css");
         @import url("styles/menu.css");
         @import url("styles/footer.css");
-
+        @import url("styles/adminpanel.css");
         @import url("styles/chat.css");
     </style>
 </head>

From 559fe9bb9866adea443bf96c2c2b233572467bb1 Mon Sep 17 00:00:00 2001
From: Kevin Nobel <kevlebon@gmailcom>
Date: Thu, 12 Jan 2017 11:20:44 +0100
Subject: [PATCH 07/12] Made grid layout responsive

---
 website/styles/profile.css | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/website/styles/profile.css b/website/styles/profile.css
index b64bec0..123c2fa 100644
--- a/website/styles/profile.css
+++ b/website/styles/profile.css
@@ -34,18 +34,41 @@
 
 .posts {
     z-index: -1;
+    margin-right: 0;
+    width: calc(100% + 15px);
 }
 
 .post-box {
     display: inline-flex;
-    width: 250px;
-    margin: 20px 20px 0 0;
+    margin: 20px 15px 0 0;
     padding: 25px;
     background-color: #FFFFFF;
 }
 
+/* fullscreen */
+.post-box {
+    width: calc(25% - 68px);
+}
+
+@media only screen and (max-width: 1500px) {
+    .post-box {
+        width: calc(50% - 67px);
+    }
+}
+
+/* mobile */
+@media only screen and (max-width: 1000px) {
+    .post-box {
+        width: calc(100% - 65px);
+    }
+}
+
+.post {
+    width: 100%;
+}
+
 .post img {
-    width: 250px;
+    width: 100%;
 }
 
 .post .post-date {

From 687b08f440d691ff1aa41cd5dd2f99395107d509 Mon Sep 17 00:00:00 2001
From: Kevin Nobel <kevlebon@gmailcom>
Date: Thu, 12 Jan 2017 11:29:17 +0100
Subject: [PATCH 08/12] Made friends and groups box responsive

---
 website/styles/profile.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/website/styles/profile.css b/website/styles/profile.css
index 123c2fa..377c307 100644
--- a/website/styles/profile.css
+++ b/website/styles/profile.css
@@ -28,6 +28,12 @@
     width: calc(50% - 60px);
 }
 
+@media only screen and (max-width: 900px) {
+    .item-box {
+        width: calc(100% - 50px);
+    }
+}
+
 .item-box-full-width {
     width: calc(100% - 50px);
 }

From fffc418f4c90e514e756e7bd7e69258e6e35b4eb Mon Sep 17 00:00:00 2001
From: Kevin Nobel <kevlebon@gmailcom>
Date: Thu, 12 Jan 2017 11:38:56 +0100
Subject: [PATCH 09/12] Changed style of windows, we now use the platform
 class.

---
 website/styles/profile.css |  4 ----
 website/views/group.php    | 24 ++++++++++++------------
 website/views/profile.php  | 32 ++++++++++++++++----------------
 3 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/website/styles/profile.css b/website/styles/profile.css
index 377c307..1ac9a2b 100644
--- a/website/styles/profile.css
+++ b/website/styles/profile.css
@@ -1,7 +1,3 @@
-.profile-box, .item-box, .item-box-full-width, .post-box {
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}
-
 .profile-box {
     min-height: 150px;
     padding: 25px;
diff --git a/website/views/group.php b/website/views/group.php
index 6a99b56..391ed26 100644
--- a/website/views/group.php
+++ b/website/views/group.php
@@ -1,5 +1,5 @@
 <div class="content">
-    <div class="profile-box">
+    <div class="profile-box platform">
         <img class="left group-picture" src="http://i.imgur.com/afjEUx2.jpg">
         <div class="profile-button">
             <p><img src="../website/img/leave-group.png"> Groep verlaten</p>
@@ -8,7 +8,7 @@
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
     </div>
 
-    <div class="item-box-full-width">
+    <div class="item-box-full-width platform">
         <h2>Leden</h2>
         <p>
             <a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
@@ -42,7 +42,7 @@
     </div>
 
     <div class="posts">
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -50,7 +50,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -58,7 +58,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -66,7 +66,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.</p>
@@ -74,7 +74,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -82,7 +82,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida.  Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -90,7 +90,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -98,7 +98,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Afbeelding</h2>
                 <img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
@@ -106,7 +106,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Post</h2>
                 <video width="250" controls>
@@ -116,7 +116,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Post</h2>
                 <p class="post-date">4 Januari geplaatst</p>
diff --git a/website/views/profile.php b/website/views/profile.php
index ad4c7f4..9675a04 100644
--- a/website/views/profile.php
+++ b/website/views/profile.php
@@ -1,5 +1,5 @@
 <div class="content">
-    <div class="profile-box">
+    <div class="profile-box platform">
         <img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg">
         <div class="profile-button">
             <p><img src="../website/img/add-friend.png"> Als vriend toevoegen</p>
@@ -8,7 +8,7 @@
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
     </div>
 
-    <div class="item-box left">
+    <div class="item-box left platform">
         <h2>Vrienden</h2>
         <p>
             <a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
@@ -20,7 +20,7 @@
         </p>
     </div>
 
-    <div class="item-box right">
+    <div class="item-box right platform">
         <h2>Groepen</h2>
         <p>
             <a href="#" data-title="[groepsnaam]"><img class="group-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
@@ -33,7 +33,7 @@
     </div>
 
     <div class="posts">
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -41,7 +41,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Glitterzz :3</h2>
                 <img src="https://s-media-cache-ak0.pinimg.com/originals/5d/ab/86/5dab8634abeded269f4c456b3b7a6a90.gif" alt="Foto van [gebruikersnaam]">
@@ -49,7 +49,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -57,7 +57,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>woooow</h2>
                 <img src="http://31.media.tumblr.com/5227ca92d5d028bae64060d3f32315c2/tumblr_myt7mjJahV1qimzy6o3_250.gif" alt="Foto van [gebruikersnaam]">
@@ -65,7 +65,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>0.0</h2>
                 <img src="https://68.media.tumblr.com/7b2da43b98c43016261831c240381fba/tumblr_o6ol996fHJ1tcu68no1_400.gif" alt="Foto van [gebruikersnaam]">
@@ -73,7 +73,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -81,7 +81,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.</p>
@@ -89,7 +89,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -97,7 +97,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida.  Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -105,7 +105,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Tekst</h2>
                 <p>Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -113,7 +113,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Afbeelding</h2>
                 <img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
@@ -121,7 +121,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Post</h2>
                 <video width="250" controls>
@@ -131,7 +131,7 @@
             </div>
         </div>
 
-        <div class="post-box">
+        <div class="post-box platform">
             <div class="post">
                 <h2>Post</h2>
                 <p class="post-date">4 Januari geplaatst</p>

From cfa119fef0585306525f897e5e54fb7ea0ecb623 Mon Sep 17 00:00:00 2001
From: Hendrik <hendrik.huang@student.uva.nl>
Date: Thu, 12 Jan 2017 11:54:56 +0100
Subject: [PATCH 10/12] added check all box

---
 website/styles/adminpanel.css | 10 ++++------
 website/views/adminpanel.php  | 26 ++++++++++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/website/styles/adminpanel.css b/website/styles/adminpanel.css
index 0bd8f1c..15ecfdc 100644
--- a/website/styles/adminpanel.css
+++ b/website/styles/adminpanel.css
@@ -6,7 +6,10 @@
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
-.admin-options {
+.admin-actions {
+    display: inline-block;
+    margin: 10px;
+    vertical-align: top;
 }
 
 .admin-searchbar {
@@ -28,11 +31,6 @@
     margin-right: 100px;
 }
 
-.admin-actions {
-    display: inline-block;
-    margin: 10px;
-    vertical-align: top;
-}
 
 .admin-users {
     margin: 10px;
diff --git a/website/views/adminpanel.php b/website/views/adminpanel.php
index 1d7b509..1a9d90b 100644
--- a/website/views/adminpanel.php
+++ b/website/views/adminpanel.php
@@ -4,6 +4,17 @@
         <meta charset="utf-8">
         <link rel="stylesheet" type="text/css" href="astyle.css">
         <title>Admin Panel</title>
+        <script type="text/javascript">
+        function checkAll(allbox) {
+            var checkboxes = document.getElementsByName('check1');
+
+            for (var i = 0; i < checkboxes.length; i++) {
+                if (checkboxes[i].type == 'checkbox') {
+                    checkboxes[i].checked = allbox.checked;
+                }
+            }
+        }
+        </script>
     </head>
     <body>
         <div class="content">
@@ -30,15 +41,18 @@
                             <input type="radio" name="actions" value="unban"> Unban <br> <br>
                             <input type="submit" value="Confirm">
                         </div>
-                </div>
+                    </div>
+                    <br>
                     <div class="admin-users">
                         <h2>Users:</h2>
                         <table class="usertable">
-                            <tr style="text-align: left;">
-                                <th><input type="checkbox" name="checkall"></th>
-                                <th>User</th>
-                                <th>Ban reason</th>
-                                <th style="width: 200px;">Action</th>
+                            <tr>
+                                <th class="table-checkbox">
+                                    <input type="checkbox" name="checkall" onchange="checkAll(this)">
+                                </th>
+                                <th class="table-username">User</th>
+                                <th class="table-comment">Ban reason</th>
+                                <th class="table-action">Action</th>
                             </tr>
                             <tr>
                                 <td><input type="checkbox" name="check1"></td>

From 96c114cc103df2ee6ac5cca9853b0f1d0edc906b Mon Sep 17 00:00:00 2001
From: Hendrik <hendrik.huang@student.uva.nl>
Date: Thu, 12 Jan 2017 11:59:48 +0100
Subject: [PATCH 11/12] added ban status

---
 website/styles/adminpanel.css | 1 +
 website/views/adminpanel.php  | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/website/styles/adminpanel.css b/website/styles/adminpanel.css
index 15ecfdc..f22de20 100644
--- a/website/styles/adminpanel.css
+++ b/website/styles/adminpanel.css
@@ -42,6 +42,7 @@
 
 .usertable .table-checkbox {width: 20px}
 .usertable .table-username {width: 150px}
+.usertable .table-status {width: 100px}
 .usertable .table-action {width: 200px}
 
 .usertable th, td {
diff --git a/website/views/adminpanel.php b/website/views/adminpanel.php
index 1a9d90b..2723e40 100644
--- a/website/views/adminpanel.php
+++ b/website/views/adminpanel.php
@@ -51,12 +51,14 @@
                                     <input type="checkbox" name="checkall" onchange="checkAll(this)">
                                 </th>
                                 <th class="table-username">User</th>
-                                <th class="table-comment">Ban reason</th>
+                                <th class="table-status">Status</th>
+                                <th class="table-comment">Comment</th>
                                 <th class="table-action">Action</th>
                             </tr>
                             <tr>
                                 <td><input type="checkbox" name="check1"></td>
                                 <td>John Smith</td>
+                                <td>Banned</td>
                                 <td>unregulated time travel</td>
                                 <td>
                                     <form class="admin-useraction" action="index.html" method="post">
@@ -72,6 +74,7 @@
                             <tr>
                                 <td><input type="checkbox" name="check1"></td>
                                 <td>poey jokeaim</td>
+                                <td>Banned</td>
                                 <td>l33t h4xx</td>
                                 <td>
                                     <form class="admin-useraction" action="index.html" method="post">

From 5c9674450799e676b947818d0d87983b259da503 Mon Sep 17 00:00:00 2001
From: Joey Lai <joeylai96@hotmail.com>
Date: Thu, 12 Jan 2017 13:03:46 +0100
Subject: [PATCH 12/12] Datepicker added

---
 website/bronvermelding.txt       |   1 +
 website/js/dobPicker.js          | 123 +++++++++++++++++++++++++++++++
 website/js/dobPicker.min.js      |   1 +
 website/{index.php => login.php} |  82 ++++++++++++---------
 website/styles/index.css         |  32 ++++++--
 5 files changed, 197 insertions(+), 42 deletions(-)
 create mode 100644 website/bronvermelding.txt
 create mode 100644 website/js/dobPicker.js
 create mode 100644 website/js/dobPicker.min.js
 rename website/{index.php => login.php} (68%)

diff --git a/website/bronvermelding.txt b/website/bronvermelding.txt
new file mode 100644
index 0000000..54927c8
--- /dev/null
+++ b/website/bronvermelding.txt
@@ -0,0 +1 @@
+http://www.jqueryscript.net/time-clock/Minimalist-jQuery-Plugin-For-Birthday-Selector-DOB-Picker.html
diff --git a/website/js/dobPicker.js b/website/js/dobPicker.js
new file mode 100644
index 0000000..9440153
--- /dev/null
+++ b/website/js/dobPicker.js
@@ -0,0 +1,123 @@
+/**
+ * jQuery DOB Picker
+ * Website: https://github.com/tyea/dobpicker
+ * Version: 1.0
+ * Author: Tom Yeadon
+ * License: BSD 3-Clause
+ */
+
+jQuery.extend({
+
+	dobPicker: function(params) {
+
+		// set the defaults		
+		if (typeof(params.dayDefault)==='undefined') params.dayDefault = 'Day';
+		if (typeof(params.monthDefault)==='undefined') params.monthDefault = 'Month';
+		if (typeof(params.yearDefault)==='undefined') params.yearDefault = 'Year';
+		if (typeof(params.minimumAge)==='undefined') params.minimumAge = 12;
+		if (typeof(params.maximumAge)==='undefined') params.maximumAge = 80;
+
+		// set the default messages		
+		$(params.daySelector).append('<option value="">' + params.dayDefault + '</option>');
+		$(params.monthSelector).append('<option value="">' + params.monthDefault + '</option>');
+		$(params.yearSelector).append('<option value="">' + params.yearDefault + '</option>');
+
+		// populate the day select
+		for (i = 1; i <= 31; i++) {
+			if (i <= 9) {
+				var val = '0' + i;
+			} else {
+				var val = i;
+			}
+			$(params.daySelector).append('<option value="' + val + '">' + i + '</option>');
+		}
+
+		// populate the month select		
+		var months = [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		];
+			
+		for (i = 1; i <= 12; i++) {
+			if (i <= 9) {
+				var val = '0' + i;
+			} else {
+				var val = i;
+			}
+			$(params.monthSelector).append('<option value="' + val + '">' + months[i - 1] + '</option>');
+		}
+
+		// populate the year select
+		var date = new Date();
+		var year = date.getFullYear();
+		var start = year - params.minimumAge;
+		var count = start - params.maximumAge;
+		
+		for (i = start; i >= count; i--) {
+			$(params.yearSelector).append('<option value="' + i + '">' + i + '</option>');
+		}
+		
+		// do the logic for the day select
+		$(params.daySelector).change(function() {
+			
+			$(params.monthSelector)[0].selectedIndex = 0;
+			$(params.yearSelector)[0].selectedIndex = 0;
+			$(params.yearSelector + ' option').removeAttr('disabled');
+			
+			if ($(params.daySelector).val() >= 1 && $(params.daySelector).val() <= 29) {
+			
+				$(params.monthSelector + ' option').removeAttr('disabled');
+				
+			} else if ($(params.daySelector).val() == 30) {
+			
+				$(params.monthSelector + ' option').removeAttr('disabled');
+				$(params.monthSelector + ' option[value="02"]').attr('disabled', 'disabled');
+				
+			} else if($(params.daySelector).val() == 31) {
+			
+				$(params.monthSelector + ' option').removeAttr('disabled');
+				$(params.monthSelector + ' option[value="02"]').attr('disabled', 'disabled');
+				$(params.monthSelector + ' option[value="04"]').attr('disabled', 'disabled');
+				$(params.monthSelector + ' option[value="06"]').attr('disabled', 'disabled');
+				$(params.monthSelector + ' option[value="09"]').attr('disabled', 'disabled');
+				$(params.monthSelector + ' option[value="11"]').attr('disabled', 'disabled');
+				
+			}
+			
+		});
+		
+		// do the logic for the month select
+		$(params.monthSelector).change(function() {
+			
+			$(params.yearSelector)[0].selectedIndex = 0;
+			$(params.yearSelector + ' option').removeAttr('disabled');
+			
+			if ($(params.daySelector).val() == 29 && $(params.monthSelector).val() == '02') {
+			
+				$(params.yearSelector + ' option').each(function(index) {
+					if (index !== 0) {
+						var year = $(this).attr('value');
+						var leap = !((year % 4) || (!(year % 100) && (year % 400)));
+						if (leap === false) {
+							$(this).attr('disabled', 'disabled');
+						}
+					}
+				});
+				
+			}
+			
+		});
+		
+	}
+	
+});
diff --git a/website/js/dobPicker.min.js b/website/js/dobPicker.min.js
new file mode 100644
index 0000000..b82c3a2
--- /dev/null
+++ b/website/js/dobPicker.min.js
@@ -0,0 +1 @@
+jQuery.extend({dobPicker:function(a){for("undefined"==typeof a.dayDefault&&(a.dayDefault="Day"),"undefined"==typeof a.monthDefault&&(a.monthDefault="Month"),"undefined"==typeof a.yearDefault&&(a.yearDefault="Year"),"undefined"==typeof a.minimumAge&&(a.minimumAge=12),"undefined"==typeof a.maximumAge&&(a.maximumAge=80),$(a.daySelector).append('<option value="">'+a.dayDefault+"</option>"),$(a.monthSelector).append('<option value="">'+a.monthDefault+"</option>"),$(a.yearSelector).append('<option value="">'+a.yearDefault+"</option>"),i=1;i<=31;i++){if(i<=9)var b="0"+i;else var b=i;$(a.daySelector).append('<option value="'+b+'">'+i+"</option>")}var c=["January","February","March","April","May","June","July","August","September","October","November","December"];for(i=1;i<=12;i++){if(i<=9)var b="0"+i;else var b=i;$(a.monthSelector).append('<option value="'+b+'">'+c[i-1]+"</option>")}var d=new Date,e=d.getFullYear(),f=e-a.minimumAge,g=f-a.maximumAge;for(i=f;i>=g;i--)$(a.yearSelector).append('<option value="'+i+'">'+i+"</option>");$(a.daySelector).change(function(){$(a.monthSelector)[0].selectedIndex=0,$(a.yearSelector)[0].selectedIndex=0,$(a.yearSelector+" option").removeAttr("disabled"),$(a.daySelector).val()>=1&&$(a.daySelector).val()<=29?$(a.monthSelector+" option").removeAttr("disabled"):30==$(a.daySelector).val()?($(a.monthSelector+" option").removeAttr("disabled"),$(a.monthSelector+' option[value="02"]').attr("disabled","disabled")):31==$(a.daySelector).val()&&($(a.monthSelector+" option").removeAttr("disabled"),$(a.monthSelector+' option[value="02"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="04"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="06"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="09"]').attr("disabled","disabled"),$(a.monthSelector+' option[value="11"]').attr("disabled","disabled"))}),$(a.monthSelector).change(function(){$(a.yearSelector)[0].selectedIndex=0,$(a.yearSelector+" option").removeAttr("disabled"),29==$(a.daySelector).val()&&"02"==$(a.monthSelector).val()&&$(a.yearSelector+" option").each(function(a){if(0!==a){var b=$(this).attr("value"),c=!(b%4||!(b%100)&&b%400);c===!1&&$(this).attr("disabled","disabled")}})})}});
diff --git a/website/index.php b/website/login.php
similarity index 68%
rename from website/index.php
rename to website/login.php
index b808caf..8d6a319 100644
--- a/website/index.php
+++ b/website/login.php
@@ -2,6 +2,8 @@
 <html>
   <head>
     <link rel="stylesheet" type="text/css" href="styles/index.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+		<script src="js/dobPicker.min.js"></script>
     <meta charset="utf-8">
     <title>MyHyvesbook+</title>
   </head>
@@ -11,30 +13,30 @@
     </div>
 
     <form action="../profile.php/" method="post">
-      <h1>Welkom </h1>
-      <div class="containercenter">
+      <h1>Welkom bij MyHyvesbook+ </h1>
+      <div class="login_containerlogin">
         <label><b>Gebruikersnaam</b></label>
         <input type="text" placeholder="Voer je gebruikersnaam in" name="uname"
         pattern=".{6,}" title="Moet zes of meer karakters zijn" required>
       </div>
 
-      <div class="containercenter">
+      <div class="login_containerlogin">
         <label><b>Wachtwoord</b></label>
         <input type="password" placeholder="Voer je wachtwoord in" name="psw"
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
         title="Moet miniaal 1 cijfer, 1 hoofdletter en kleine letter hebben en minstens 8 of meer karakters zijn" required>
       </div>
 
-      <div class="containercenter">
+      <div class="login_containerlogin">
         <input type="submit" value="Login" name="Submit" id="frm1_submit" />
       </div>
     </form>
 
-    <div class="containercenter">
+    <div class="login_containerlogin">
       <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
     </div>
 
-    <div class="container">
+    <div class="login_containerregister">
       <div id="id01" class="modal">
       <span onclick="document.getElementById('id01').style.display='none'"
       class="close" title="Close Modal">&times;</span>
@@ -43,69 +45,89 @@
         <form class="modal-content animate" action="../profile.php/" onsubmit="return passwordfunction()" method="post">
           <h2>Registreer je account</h2>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Naam</b></label>
             <input type="text" placeholder="Voer je naam in" name="name"
             pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Achternaam</b></label>
             <input type="text" placeholder="Voer je achternaam in" name="surname"
             pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
+            <label><b>Geboortedatum</b></label>
+            <!-- These are the select elements we will target -->
+        		<select id="dobday" title="Voer een dag in"required></select>
+        		<select id="dobmonth" title="Voer een maand in"required></select>
+        		<select id="dobyear" title="Voer een jaar in"required></select>
+        		<!-- And here's the library being called! -->
+        		<script>
+        			$(document).ready(function() {
+        				$.dobPicker({
+        					daySelector: '#dobday', /* Required */
+        					monthSelector: '#dobmonth', /* Required */
+        					yearSelector: '#dobyear', /* Required */
+        					dayDefault: 'Dag', /* Optional */
+        					monthDefault: 'Maand', /* Optional */
+        					yearDefault: 'Jaar', /* Optional */
+        					minimumAge: 12, /* Optional */
+        					maximumAge: 80 /* Optional */
+        				});
+        			});
+        		</script>
+          </div>
+
+          <div class="login_containerregister">
             <label><b>Gebruikersnaam</b></label>
             <input type="text" placeholder="Voer je gebruikersnaam in" name="username"
             pattern=".{6,}" title="Moet meer dan 6 karakers zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Wachtwoord</b></label>
             <input type="password" placeholder="Voer je wachtwoord in" name="password"
             pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="password"
             title="Moet miniaal 1 cijfer, 1 hoofdletter en kleine letter hebben en minstens 8 of meer karakters zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Herhaal wachtwoord</b></label>
             <input type="password" placeholder="Herhaal wachtwoord" name="confirmpassword"
             pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="confirmpassword"
             title="Herhaal wachtwoord" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Straatnaam</b></label>
             <input type="text" placeholder="Voer jouw straatnaam in" name="name"
             pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Straatnummer</b></label>
             <input type="text" placeholder="Voer jouw straatnummer in" name="name"
             pattern="[1-9][0-9]{0,}" title="Moet alleen nummers zijn" required>
           </div>
 
-          <div class="container">
+          <div class="login_containerregister">
             <label><b>Email</b></label>
             <input type="email" placeholder="Voer je email in" id="email"
             title="Voer een geldige email in" required>
           </div>
 
-          <div class="container">
-            <label><b>Herhaal email</b></label>
-            <input type="email" placeholder="Herhaal email" id="confirmemail"
-            title="Herhaal je email" required>
-          </div>
-
-          <div class="container">
+          <div class="login_containerregister">
             <input type="submit" value="Registreer je account" name="Submit" id="frm1_submit" />
           </div>
         </form>
 
       </div>
     </div>
+    <script>
+    $("#default-settings").birthdayPicker();
+    </script>
   </body>
 </html>
 
@@ -124,22 +146,14 @@ window.onclick = function(event) {
 function passwordfunction() {
     var password1 = document.getElementById("password").value;
     var password2 = document.getElementById("confirmpassword").value;
-    var email1 = document.getElementById("email").value;
-    var email2 = document.getElementById("confirmemail").value;
-    var matching = true;
+    var passwordmatching = true;
 
     if (password1 != password2) {
-        document.getElementById("password").style.borderColor = "red";;
-        document.getElementById("confirmpassword").style.borderColor = "red";;
-        ok = false;
+        document.getElementById("password").style.borderColor = "red";
+        document.getElementById("confirmpassword").style.borderColor = "red";
+        passwordmatching = false;
         confirmpassword.setCustomValidity("Wachwoord match niet")
     }
-    if (email != email2){
-        document.getElementById("email").style.borderColor = "red";;
-        document.getElementById("confirmemail").style.borderColor = "red";;
-        ok = false;
-        confirmemail.setCustomValidity("Email match niet")
-    }
-    return matching;
+    return passwordmatching;
 }
 </script>
diff --git a/website/styles/index.css b/website/styles/index.css
index 6823115..4f6ed16 100644
--- a/website/styles/index.css
+++ b/website/styles/index.css
@@ -3,31 +3,45 @@ body {
     background-color: #B78996;
 }
 
-/* Bordered form */
+/* inlogform */
 form {
     background-color: #a87a87;
     border: 5px solid #325da3;
     border-radius: 12px;
     height: 50%;
     margin: auto;
-    width: 45%;
+    width: 55%;
 }
 
+/* inlog titel */
 h1 {
     padding: 16px;
     text-align: center;
 }
 
+/* registreer titel*/
 h2 {
     padding: 16px;
     text-align: left;
 }
 
+/* text */
 label {
     display: block;
 }
 
-/* Full-width inputs */
+/* 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: 15%;
+}
+
 input[type=text], input[type=password], input[type=email] {
     border-radius: 12px;
     border: 5px solid #ccc;
@@ -51,7 +65,7 @@ input[type=submit]{
     width: 50%;
 }
 
-/* Set a style for all buttons */
+/* stijl voor alle buttons */
 button {
     background-color: #845663;
     border: 2px solid black;
@@ -64,13 +78,14 @@ button {
     width: 25%;
 }
 
-/* Add padding to containers */
-.container {
+/* padding voor registreer container */
+.login_containerregister {
     padding: 16px;
     text-align: left;
 }
 
-.containercenter {
+/* padding voor login_containers */
+.login_containerlogin {
     padding: 16px;
     text-align: center;
 }
@@ -97,7 +112,8 @@ button {
     border: 5px solid #325da3;
     margin: 5px auto; /* 15% from the top and centered */
     overflow-y: auto;
-    width: 50% /* Could be more or less, depending on screen size */
+    width: 40%; /* Could be more or less, depending on screen size */
+    height: 80%;
 }
 
 /* The Close Button */