Merge branch 'master' into 'joey-testing'

# Conflicts:
#   website/login.php
This commit is contained in:
Marijn Jansen
2017-01-12 15:04:07 +01:00
23 changed files with 906 additions and 144 deletions

2
.gitignore vendored
View File

@@ -12,6 +12,8 @@
# User-specific stuff: # User-specific stuff:
.idea/workspace.xml .idea/workspace.xml
.idea/tasks.xml .idea/tasks.xml
.idea/deployment.xml
.idea/webServers.xml
# Sensitive or high-churn files: # Sensitive or high-churn files:
.idea/dataSources/ .idea/dataSources/

21
website/admin.php Normal file
View File

@@ -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>

21
website/group.php Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<?php
include("views/head.php");
?>
<body>
<?php
/*
* This view adds the main layout over the screen.
* Header, menu, footer.
*/
include("views/main.php");
/* Add your view files here. */
include("views/group.php");
/* This adds the footer. */
include("views/footer.php");
?>
</body>
</html>

BIN
website/img/leave-group.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 526 B

View File

@@ -12,7 +12,7 @@
<img style="width:50%;margin-left:25%" src="img/top-logo.png" alt="MyHyvesbook+"> <img style="width:50%;margin-left:25%" src="img/top-logo.png" alt="MyHyvesbook+">
</div> </div>
<form action="../profile.php" method="post"> <form action="/profile.php" method="post">
<h1>Welkom bij MyHyvesbook+ </h1> <h1>Welkom bij MyHyvesbook+ </h1>
<div class="login_containerlogin"> <div class="login_containerlogin">
<label><b>Gebruikersnaam</b></label> <label><b>Gebruikersnaam</b></label>
@@ -36,6 +36,97 @@
<button onclick="document.getElementById('id01').style.display='block'">Registreer</button> <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
</div> </div>
<div class="login_containerregister">
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">&times;</span>
<!-- Register Content -->
<form class="modal-content animate" action="/profile.php" onsubmit="return passwordfunction()" method="post">
<h2>Registreer je account</h2>
<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="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="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="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="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="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="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="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="login_containerregister">
<input type="submit" value="Registreer je account" name="Submit" id="frm1_submit" />
</div>
</form>
<div class="login_containerlogin">
<button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
</div>
<div class="login_containerregister"> <div class="login_containerregister">
<div id="id01" class="modal"> <div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" <span onclick="document.getElementById('id01').style.display='none'"

View File

@@ -13,6 +13,9 @@ include("views/main.php");
/* Add your view files here. */ /* Add your view files here. */
include("views/profile.php"); include("views/profile.php");
/* This adds the footer. */
include("views/footer.php");
?> ?>
</body> </body>
</html> </html>

21
website/search.php Normal file
View File

@@ -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/search-view.php");
/* This adds the footer. */
include("views/footer.php");
?>
</body>
</html>

19
website/settings.php Normal file
View File

@@ -0,0 +1,19 @@
<!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/settings-view.php");
/* This adds the footer. */
include("views/footer.php");
?>
</body>
</html>

View File

@@ -0,0 +1,63 @@
.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-actions {
display: inline-block;
margin: 10px;
vertical-align: top;
}
.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-users {
margin: 10px;
}
.usertable {
width: 100%;
}
.usertable .table-checkbox {width: 20px}
.usertable .table-username {width: 150px}
.usertable .table-status {width: 100px}
.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;
}*/

View File

@@ -19,9 +19,7 @@
} }
.chat-recent, .chat-history { .chat-recent, .chat-history {
border-radius: 20px;
width: 100%; width: 100%;
background-color: white;
} }
/* List of chats. */ /* List of chats. */
@@ -47,7 +45,7 @@
.chat-history { .chat-history {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
padding-bottom: 10px; padding: 0 0 10px 0;
} }
.chat-message { .chat-message {
@@ -80,20 +78,35 @@
/* Chat reply field */ /* Chat reply field */
.chat-field { .chat-field {
padding: 15px; width: 100%;
padding: 15px 0;
display: table;
} }
.chat-field input { .chat-field form {
border-radius: 8px; width: 100%;
overflow: hidden;
}
.chat-field span {
display: block;
overflow: hidden;
} }
.chat-field input[type="text"] { .chat-field input[type="text"] {
width: calc(100% - 80px); width: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }
.chat-field input[type="submit"] { .chat-field input[type="submit"] {
width: 60px; width: auto;
float: right;
background-color: #845663; background-color: #845663;
color: white; color: white;
padding: 5px; padding: 5px 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }

View File

@@ -26,16 +26,13 @@ header {
} }
#header-search input[type="text"] { #header-search input[type="text"] {
padding: 5px 10px;
height: 19px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
#header-search input[type="submit"] {
margin: 0 0 0 -4px;
padding: 5px;
#header-search input[type="submit"] {
background: none;
color: white;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }

View File

@@ -41,6 +41,14 @@ body {
min-height: 100%; min-height: 100%;
} }
.platform {
padding: 20px;
margin-bottom: 10px;
border-radius: 10px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
::selection { ::selection {
background: #845663; background: #845663;
color: white; color: white;
@@ -58,11 +66,6 @@ body {
border: 0; border: 0;
} }
input[type="text"] {
padding: 5px;
}
/* Move element down (clear), below floating elements */ /* Move element down (clear), below floating elements */
.clear { .clear {
clear: both; clear: both;
@@ -99,6 +102,10 @@ h5 {
font-size: 1.4em; font-size: 1.4em;
} }
ul {
list-style-type: none;
}
p { p {
font-size: 1.2em; font-size: 1.2em;
} }
@@ -108,6 +115,21 @@ a, a:link, a:visited, a:hover, a:active {
text-decoration: none; text-decoration: none;
} }
button, input, select {
width: auto;
height: 32px;
padding: 0 5px;
background: white;
color: #3333333;
cursor: pointer;
border: none;
font-family: Arial;
font-size: 16px;
}
/* Tables */ /* Tables */
table { table {
border-spacing: 0; border-spacing: 0;
@@ -120,11 +142,12 @@ td {
} }
/* Custom title box, appears instantaneously */ /* Custom title box, appears instantaneously */
a:hover { a[data-title]:hover, img[data-title]:hover, span[data-title]:hover, div[data-title]:hover {
position: relative; position: relative;
} }
a[data-title]:hover:after { a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
div[data-title]:hover:after{
content: attr(data-title); content: attr(data-title);
padding: 4px 4px; padding: 4px 4px;
color: #FFFFFF; color: #FFFFFF;
@@ -140,4 +163,7 @@ a[data-title]:hover:after {
-webkit-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222;
background-color: #333; background-color: #333;
font-size: 15px;
line-height: normal;
font-family: Arial, sans-serif;
} }

View File

@@ -1,14 +1,10 @@
.profile-box, .item-box, .post-box {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.profile-box { .profile-box {
min-height: 150px; min-height: 150px;
padding: 25px; padding: 25px;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.profile-box .profile-picture { .profile-box .profile-picture, .profile-box .group-picture {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin: 0 20px 20px 0; margin: 0 20px 20px 0;
@@ -18,45 +14,80 @@
padding-top: 50px; padding-top: 50px;
} }
.item-box { .item-box, .item-box-full-width {
width: calc(50% - 60px);
margin: 20px 0 0 0; margin: 20px 0 0 0;
padding: 25px; padding: 25px;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.item-box {
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);
}
.posts { .posts {
background-color: red; z-index: -1;
margin-top: 20px; margin-right: 0;
width: calc(100% + 15px);
} }
.post-box { .post-box {
float: left; display: inline-flex;
width: 250px; margin: 20px 15px 0 0;
margin: 20px 20px 0 0;
padding: 25px; padding: 25px;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.post-box img { /* fullscreen */
width: 250px; .post-box {
width: calc(25% - 68px);
} }
.post-box .post-date { @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: 100%;
}
.post .post-date {
float: right; float: right;
color: #aaaaaa; color: #aaaaaa;
font-size: 0.8em; font-size: 0.8em;
} }
.friend-request { .profile-button {
float: right; float: right;
padding: 10px; padding: 10px;
border-radius: 3px; border-radius: 5px;
background-color: #845663; background-color: #845663;
color: #FFFFFF; color: #FFFFFF;
transition-duration: 250ms; transition-duration: 250ms;
} }
.friend-request:hover { .profile-button:hover {
background-color: #B78996; background-color: #B78996;
} }

View File

@@ -0,0 +1,3 @@
.search-form input {
border-bottom: #845663 solid 1px;
}

View File

@@ -0,0 +1,33 @@
.settings {
}
.settings input,
.settings textarea{
padding: 10px;
margin: 5px;
border-radius: 10px;
width: 200px;
}
.settings label {
width: 125px;
display: inline-block;
text-align: right;
}
.settings input[type="password"],
.settings input[type="text"],
.settings input[type="date"],
.settings input[type="email"],
.settings textarea{
border: 1px solid black;
}
.settings-password {
}
.settings-profile {
}

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<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">
<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>
<br>
<div class="admin-users">
<h2>Users:</h2>
<table class="usertable">
<tr>
<th class="table-checkbox">
<input type="checkbox" name="checkall" onchange="checkAll(this)">
</th>
<th class="table-username">User</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">
<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>Banned</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>

View File

@@ -1,7 +1,7 @@
<div class="content"> <div class="content">
<div class="chat"> <div class="chat">
<div class="chat-left"> <div class="chat-left">
<nav class="chat-recent"> <nav class="chat-recent platform">
<h5>Chats</h5> <h5>Chats</h5>
<a href="#"><div class="chat-conversation"> <a href="#"><div class="chat-conversation">
<img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw"> <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
@@ -15,7 +15,7 @@
</div> </div>
<div class="chat-right"> <div class="chat-right">
<div class="chat-history"> <div class="chat-history platform">
<div class="chat-message"> <div class="chat-message">
<div class="chat-message-self">Hi!</div> <div class="chat-message-self">Hi!</div>
</div> </div>
@@ -43,14 +43,16 @@
</div> </div>
<div class="chat-field"> <div class="chat-field">
<form method="post"> <form method="post">
<input type="submit"
value="Verstuur"
>
<span>
<input type="text" <input type="text"
name="message" name="message"
placeholder="Reageer..." placeholder="Reageer..."
required required
> >
<input type="submit" </span>
value="Verstuur"
>
</form> </form>
</div> </div>
</div> </div>

127
website/views/group.php Normal file
View File

@@ -0,0 +1,127 @@
<div class="content">
<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>
</div>
<h1 class="profile-username">[groepnaam]</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-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>
<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="#" 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="#" 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="#" 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="#" 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="posts">
<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>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<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>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<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>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<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>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<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>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<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>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<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>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Afbeelding</h2>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
<p class="post-date">Gisteren geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<video width="250" controls>
<source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4">
</video>
<p class="post-date">Maandag geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p>
</div>
</div>
</div>
</div>

View File

@@ -13,7 +13,9 @@
@import url("styles/header.css"); @import url("styles/header.css");
@import url("styles/menu.css"); @import url("styles/menu.css");
@import url("styles/footer.css"); @import url("styles/footer.css");
@import url("styles/search.css");
@import url("styles/adminpanel.css");
@import url("styles/chat.css"); @import url("styles/chat.css");
@import url("styles/settings.css");
</style> </style>
</head> </head>

View File

@@ -3,15 +3,15 @@
<a href="profile.php"><img src="img/top-logo.png" alt="MyHyvesbook+" /></a> <a href="profile.php"><img src="img/top-logo.png" alt="MyHyvesbook+" /></a>
</div> </div>
<div id="header-search"> <div id="header-search">
<form action="php/search.php" method="get"> <form action="search.php" method="get">
<input type="text" placeholder="search people, friends and pages" /> <input name="search" type="text" placeholder="zoek naar van alles" />
<input type="submit" value="Zoek"/> <input type="submit" value="Zoek"/>
</form> </form>
</div> </div>
<div class="right profile-menu"> <div class="right profile-menu">
<div id="profile-menu-popup"> <div id="profile-menu-popup">
<a href="#"><span style="color: red;" class="fa fa-sign-out" data-title="Uitloggen"></span></a> | <a href="index.php"><span style="color: red;" class="fa fa-sign-out" data-title="Uitloggen"></span></a> |
<a href="#"><span style="color: blue;" class="fa fa-cog" data-title="Instellingen"></span></a> | <a href="settings.php"><span style="color: blue;" class="fa fa-cog" data-title="Instellingen"></span></a> |
<a href="profile.php"><span style="color: green;" class="fa fa-user" data-title="Profiel"></span></a> <a href="profile.php"><span style="color: green;" class="fa fa-user" data-title="Profiel"></span></a>
</div> </div>
<div id="profile-hello-popup"> <div id="profile-hello-popup">

View File

@@ -1,14 +1,14 @@
<div class="content"> <div class="content">
<div class="profile-box"> <div class="profile-box platform">
<img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg"> <img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg">
<div class="friend-request"> <div class="profile-button">
<p><img src="../website/img/add-friend.png"> Als vriend toevoegen</p> <p><img src="../website/img/add-friend.png"> Als vriend toevoegen</p>
</div> </div>
<h1 class="profile-username">[gebruikersnaam]</h1> <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> <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>
<div class="item-box left"> <div class="item-box left platform">
<h2>Vrienden</h2> <h2>Vrienden</h2>
<p> <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>
@@ -20,79 +20,123 @@
</p> </p>
</div> </div>
<div class="item-box right"> <div class="item-box right platform">
<h2>Groepen</h2> <h2>Groepen</h2>
<p> <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="group-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="group-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="group-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="group-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="group-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
<a href="#groepen">...en nog 6 anderen!</a> <a href="#groepen">...en nog 6 anderen!</a>
</p> </p>
</div> </div>
<div class="posts"> <div class="posts">
<div class="post-box"> <div class="post-box platform">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </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]">
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </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]">
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<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]">
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box platform">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box platform">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box platform">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box platform">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box platform">
<div class="post">
<h2>Afbeelding</h2> <h2>Afbeelding</h2>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]"> <img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
<p class="post-date">Gisteren geplaatst</p> <p class="post-date">Gisteren geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box platform">
<div class="post">
<h2>Post</h2> <h2>Post</h2>
<video width="250" controls> <video width="250" controls>
<source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4"> <source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4">
</video> </video>
<p class="post-date">Maandag geplaatst</p> <p class="post-date">Maandag geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box platform">
<div class="post">
<h2>Post</h2> <h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p> <p class="post-date">4 Januari geplaatst</p>
</div> </div>
</div> </div>
</div>
</div> </div>

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,87 @@
<div class="content">
<div class="settings">
<form class="settings-profile platform">
<h5>Profiel Instllingen</h5>
<label for="first-name">Voornaam</label>
<input type="text"
name="first-name"
id="first-name"
placeholder="Voornaam"
title="Voornaam"
><br />
<label for="last-name">Achternaam</label>
<input type="text"
name="last-name"
id="last-name"
placeholder="Lastname"
><br />
<label for="place">Woonplaats</label>
<input type="text"
name="place"
id="place"
placeholder="Woonplaats"
><br />
<label for="bday">Geboortedatum</label>
<input type="date"
name="bday"
id="bday"
placeholder="01/01/1900"
><br />
<label for="location">Locatie</label>
<input type="text"
name="location"
id="location"
placeholder="Locatie"
><br />
<label for="bio">Bio</label>
<textarea name="bio"
rows="5"
cols="10"
title="bio"
id="bio"
></textarea>
<br />
<label></label>
<input type="submit"
>
</form>
<form class="settings-password platform" method="post">
<h5>Verander Wachtwoord</h5>
<br />
<input type="password"
name="password-old"
placeholder="Oud wachtwoord"
><br />
<input type="password"
name="password-new"
placeholder="Nieuw wachtwoord"
><br />
<input type="password"
name="password-confirm"
placeholder="Bevestig wachtwoord"
><br />
<input type="submit"
value="Verander wachtwoord"
>
</form>
<form class="settings-email platform" method="post">
<h5>Verander Email</h5>
<br />
<input type="email"
name="email"
placeholder="Nieuw Email-adres"
><br />
<input type="email"
name="email-confirm"
placeholder="Bevestig Email"
><br />
<input type="submit"
value="Verander Email"
>
</form>
</div>
</div>