From 40ce3d57b39fc89e2c27a79817c4f8912fb211b6 Mon Sep 17 00:00:00 2001
From: Kevin Nobel <kevlebon@gmailcom>
Date: Tue, 10 Jan 2017 17:09:11 +0100
Subject: [PATCH] Added profile view. (WIP)

---
 website/styles/main.css    | 29 ++++++++++++++++++-
 website/styles/profile.css | 40 ++++++++++++++++++++++++++
 website/views/head.php     |  3 +-
 website/views/profile.php  | 58 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 website/styles/profile.css
 create mode 100644 website/views/profile.php

diff --git a/website/styles/main.css b/website/styles/main.css
index d110eb8..4f3597f 100644
--- a/website/styles/main.css
+++ b/website/styles/main.css
@@ -5,8 +5,12 @@ last update:    10-01-2017
 Website:        myhyvesbookplus.tk
 -----------------------------------------------------------------------------*/
 
+.profile-picture {
+    border-radius: 50%;
+}
+
 body {
-    background-color: white;
+    background-color: #B78996;
     color: #333;
     font-family: Arial, sans-serif;
 }
@@ -82,4 +86,27 @@ table {
 td {
     text-align: left;
     font-weight: normal;
+}
+
+/* Custom title box, appears instantaneously */
+a:hover {
+    position: relative;
+}
+
+a[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;
 }
\ No newline at end of file
diff --git a/website/styles/profile.css b/website/styles/profile.css
new file mode 100644
index 0000000..e586b14
--- /dev/null
+++ b/website/styles/profile.css
@@ -0,0 +1,40 @@
+
+
+.profile-box {
+    min-height: 150px;
+    padding: 25px;
+    background-color: #FFFFFF;
+}
+
+.profile-box .profile-picture {
+    width: 150px;
+    height: 150px;
+    margin: 0 20px 20px 0;
+}
+
+.profile-box .profile-username {
+    padding-top: 50px;
+}
+
+.item-box {
+    width: calc(50% - 60px);
+    margin: 20px 0 0 0;
+    padding: 25px;
+    background-color: #FFFFFF;
+}
+
+.item-box .profile-picture {
+    width: 25px;
+}
+
+.post-box {
+    float: left;
+    width: 250px;
+    margin: 20px 20px 0 0;
+    padding: 25px;
+    background-color: #FFFFFF;
+}
+
+.post-box img {
+    width: 250px;
+}
\ No newline at end of file
diff --git a/website/views/head.php b/website/views/head.php
index a20ed51..2ecd8e0 100644
--- a/website/views/head.php
+++ b/website/views/head.php
@@ -5,6 +5,7 @@
     <script src="js/jquery.js"></script>
     <style>
     /* Add your css files here. */
-        @import url("css/main.css");
+        @import url("styles/main.css");
+        @import url("styles/profile.css");
     </style>
 </head>
diff --git a/website/views/profile.php b/website/views/profile.php
new file mode 100644
index 0000000..e050cce
--- /dev/null
+++ b/website/views/profile.php
@@ -0,0 +1,58 @@
+<div class="content">
+    <div class="profile-box">
+        <img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg">
+        <h1 class="profile-username">[gebruikersnaam]</h1>
+        <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">
+        <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>
+            <a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
+            <a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
+            <a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
+            <a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
+            <a href="#vrienden">...en nog 25 anderen!</a>
+        </p>
+    </div>
+
+    <div class="item-box right">
+        <h2>Groepen</h2>
+        <p>
+            <a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
+            <a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
+            <a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
+            <a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
+            <a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
+            <a href="#groepen">...en nog 6 anderen!</a>
+        </p>
+    </div>
+
+    <div class="post-box">
+        <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>
+    </div>
+
+    <div class="post-box">
+        <h2>Afbeelding</h2>
+        <img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
+    </div>
+
+    <div class="post-box">
+        <h2>Video</h2>
+        <iframe width="250" height="140" src="https://www.youtube.com/embed/cU8HrO7XuiE" frameborder="0" allowfullscreen></iframe>
+    </div>
+
+    <div class="post-box">
+        <h2>Post</h2>
+        <video width="250" controls>
+            <source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4">
+        </video>
+    </div>
+
+    <div class="post-box">
+        <h2>Post</h2>
+    </div>
+
+</div>
\ No newline at end of file