MyHyvesBookPlus/WebDB
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Merge branch 'master' into lars-search

Browse Source
This commit is contained in:
Lars van Hijfte
2017-01-12 14:37:01 +01:00
parent 0e44fb34c0 6c9841483a
commit fd171d01f3
14 changed files with 464 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

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>

1
website/bronvermelding.txt Normal file
View File

@@ -0,0 +1 @@
http://www.jqueryscript.net/time-clock/Minimalist-jQuery-Plugin-For-Birthday-Selector-DOB-Picker.html

123
website/js/dobPicker.js Normal file
View File

@@ -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');
}
}
});
}
});
}
});

1
website/js/dobPicker.min.js vendored Normal file
View File

@@ -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")}})})}});

82
website/index.php → website/login.php
View File

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

63
website/styles/adminpanel.css Normal file
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;
}*/

4
website/styles/chat.css
View File

@@ -92,8 +92,8 @@
}
.chat-field input[type="submit"] {
width: 60px;
width: auto;
background-color: #845663;
color: white;
padding: 5px;
padding: 5px 10px;
}

32
website/styles/index.css
View File

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

39
website/styles/profile.css
View File

@@ -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;
@@ -28,24 +24,53 @@
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 {
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 {

97
website/views/adminpanel.php Normal file
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>

24
website/views/group.php
View File

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

2
website/views/head.php
View File

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

50
website/views/profile.php
View File

@@ -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,15 @@
</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>
<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>
@@ -49,7 +57,23 @@
</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>
<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>
@@ -57,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>
@@ -65,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>
@@ -73,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>
@@ -81,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>
@@ -89,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]">
@@ -97,7 +121,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<video width="250" controls>
@@ -107,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>