Merge branch 'master' into hendrik-testing
This commit is contained in:
Hendrik
2
.gitignore
vendored
2
.gitignore
vendored
@@ -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/
|
||||
|
||||
10
.idea/WebDB.iml
generated
10
.idea/WebDB.iml
generated
@@ -14,5 +14,15 @@
|
||||
</SOURCES>
|
||||
</library>
|
||||
</orderEntry>
|
||||
<orderEntry type="module-library">
|
||||
<library name="PHP" type="php">
|
||||
<CLASSES>
|
||||
<root url="file:///usr/share/php" />
|
||||
</CLASSES>
|
||||
<SOURCES>
|
||||
<root url="file:///usr/share/php" />
|
||||
</SOURCES>
|
||||
</library>
|
||||
</orderEntry>
|
||||
</component>
|
||||
</module>
|
||||
22
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
22
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@@ -0,0 +1,22 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="myValues">
|
||||
<value>
|
||||
<list size="8">
|
||||
<item index="0" class="java.lang.String" itemvalue="nobr" />
|
||||
<item index="1" class="java.lang.String" itemvalue="noembed" />
|
||||
<item index="2" class="java.lang.String" itemvalue="comment" />
|
||||
<item index="3" class="java.lang.String" itemvalue="noscript" />
|
||||
<item index="4" class="java.lang.String" itemvalue="embed" />
|
||||
<item index="5" class="java.lang.String" itemvalue="script" />
|
||||
<item index="6" class="java.lang.String" itemvalue="li" />
|
||||
<item index="7" class="java.lang.String" itemvalue="a" />
|
||||
</list>
|
||||
</value>
|
||||
</option>
|
||||
<option name="myCustomValuesEnabled" value="true" />
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
Binary file not shown.
1
website/bronvermelding.txt
Normal file
1
website/bronvermelding.txt
Normal file
@@ -0,0 +1 @@
|
||||
http://www.jqueryscript.net/time-clock/Minimalist-jQuery-Plugin-For-Birthday-Selector-DOB-Picker.html
|
||||
@@ -12,7 +12,7 @@
|
||||
include("views/main.php");
|
||||
|
||||
/* Add your view files here. */
|
||||
include("views/chat.php");
|
||||
include("views/chat-view.php");
|
||||
|
||||
/* This adds the footer. */
|
||||
include("views/footer.php");
|
||||
|
||||
21
website/group.php
Normal file
21
website/group.php
Normal 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
BIN
website/img/leave-group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
123
website/js/dobPicker.js
Normal file
123
website/js/dobPicker.js
Normal 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
1
website/js/dobPicker.min.js
vendored
Normal 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")}})})}});
|
||||
249
website/login.php
Normal file
249
website/login.php
Normal file
@@ -0,0 +1,249 @@
|
||||
<!DOCTYPE html>
|
||||
<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>
|
||||
<body>
|
||||
<div>
|
||||
<img style="width:50%;margin-left:25%" src="img/top-logo.png" alt="MyHyvesbook+">
|
||||
</div>
|
||||
|
||||
<form action="/profile.php" method="post">
|
||||
<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="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="login_containerlogin">
|
||||
<input type="submit" value="Login" 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 id="id01" class="modal">
|
||||
<span onclick="document.getElementById('id01').style.display='none'"
|
||||
class="close" title="Close Modal">×</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 id="id01" class="modal">
|
||||
<span onclick="document.getElementById('id01').style.display='none'"
|
||||
class="close" title="Close Modal">×</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" ></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',
|
||||
monthSelector: '#dobmonth',
|
||||
yearSelector: '#dobyear',
|
||||
dayDefault: 'Dag',
|
||||
monthDefault: 'Maand',
|
||||
yearDefault: 'Jaar',
|
||||
minimumAge: 12,
|
||||
maximumAge: 80
|
||||
});
|
||||
});
|
||||
</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>
|
||||
</div>
|
||||
<script>
|
||||
$("#default-settings").birthdayPicker();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
// Get the modal
|
||||
var modal = document.getElementById('id01');
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function passwordfunction() {
|
||||
var password1 = document.getElementById("password").value;
|
||||
var password2 = document.getElementById("confirmpassword").value;
|
||||
var passwordmatching = true;
|
||||
|
||||
if (password1 != password2) {
|
||||
document.getElementById("password").style.borderColor = "red";
|
||||
document.getElementById("confirmpassword").style.borderColor = "red";
|
||||
passwordmatching = false;
|
||||
confirmpassword.setCustomValidity("Wachwoord match niet")
|
||||
}
|
||||
return passwordmatching;
|
||||
}
|
||||
</script>
|
||||
@@ -1,18 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<?php
|
||||
include("views/head.php");
|
||||
?>
|
||||
<body>
|
||||
<?php
|
||||
/*
|
||||
<?php
|
||||
include("views/head.php");
|
||||
?>
|
||||
<body>
|
||||
<?php
|
||||
/*
|
||||
* This view adds the main layout over the screen.
|
||||
* Header, menu, footer.
|
||||
*/
|
||||
include("views/main.php");
|
||||
include("views/main.php");
|
||||
|
||||
/* Add your view files here. */
|
||||
include("views/profile.php");
|
||||
?>
|
||||
</body>
|
||||
/* Add your view files here. */
|
||||
include("views/profile.php");
|
||||
|
||||
/* This adds the footer. */
|
||||
include("views/footer.php");
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
21
website/search.php
Normal file
21
website/search.php
Normal 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
19
website/settings.php
Normal 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>
|
||||
@@ -1,44 +1,68 @@
|
||||
/* Overall chat-screen */
|
||||
.chat {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 256px;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
width: calc(100% - 256px);
|
||||
height: calc(100% - 120px);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.chat-history {
|
||||
/*border: solid #845663;*/
|
||||
width: 80%;
|
||||
height: 500px;
|
||||
margin: 20px auto;
|
||||
background-color: white;
|
||||
.chat-left {
|
||||
width: 256px;
|
||||
height: 100%;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
display: inline-flex;
|
||||
|
||||
}
|
||||
.chat-recent, .chat-history {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* List of chats. */
|
||||
.chat-recent {
|
||||
height: 600px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chat-conversation {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.chat-right {
|
||||
width: calc(100% - 256px - 40px);
|
||||
height: calc(100% - 80px);
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.chat-field input {
|
||||
border-radius: 8px;
|
||||
/* Chat history. */
|
||||
.chat-history {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.chat-field input[type="text"] {
|
||||
width: calc(75% - 60px);
|
||||
|
||||
}
|
||||
|
||||
.chat-field input[type="submit"] {
|
||||
width: 60px;
|
||||
|
||||
}
|
||||
.chat-message {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
padding-top: 10px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.chat-message-self, .chat-message-other {
|
||||
text-align: left;
|
||||
border-radius: 20px;
|
||||
padding: 10px 12px;
|
||||
min-width: 10%;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.chat-message-self {
|
||||
text-align: right;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
background-color: darkgreen;
|
||||
@@ -46,8 +70,43 @@
|
||||
}
|
||||
|
||||
.chat-message-other {
|
||||
text-align: left;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
background-color: aquamarine;
|
||||
}
|
||||
|
||||
/* Chat reply field */
|
||||
|
||||
.chat-field {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.chat-field form {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-field span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-field input[type="text"] {
|
||||
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"] {
|
||||
width: auto;
|
||||
float: right;
|
||||
background-color: #845663;
|
||||
color: white;
|
||||
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);
|
||||
}
|
||||
@@ -26,16 +26,13 @@ header {
|
||||
}
|
||||
|
||||
#header-search input[type="text"] {
|
||||
padding: 5px 10px;
|
||||
height: 19px;
|
||||
|
||||
border-top-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-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
151
website/styles/index.css
Normal file
151
website/styles/index.css
Normal file
@@ -0,0 +1,151 @@
|
||||
/* Body */
|
||||
body {
|
||||
background-color: #B78996;
|
||||
}
|
||||
|
||||
/* inlogform */
|
||||
form {
|
||||
background-color: #a87a87;
|
||||
border: 5px solid #325da3;
|
||||
border-radius: 12px;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
/* inlog titel */
|
||||
h1 {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* registreer titel*/
|
||||
h2 {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* text */
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
input[type=submit]{
|
||||
background-color: #845663;
|
||||
border: 2px solid black;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
height: 50%;
|
||||
margin: 8px 0;
|
||||
padding: 14px 20px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* stijl voor alle buttons */
|
||||
button {
|
||||
background-color: #845663;
|
||||
border: 2px solid black;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
height: 50%;
|
||||
margin: 8px 0;
|
||||
padding: 14px 20px;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* padding voor registreer container */
|
||||
.login_containerregister {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* padding voor login_containers */
|
||||
.login_containerlogin {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
display: none; /* Hidden by default */
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
padding-top: 60px;
|
||||
position: fixed; /* Stay in place */
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
z-index: 1; /* Sit on top */
|
||||
}
|
||||
|
||||
/* Modal Content/Box */
|
||||
.modal-content {
|
||||
background-color: #B78996;
|
||||
border: 5px solid #325da3;
|
||||
margin: 5px auto; /* 15% from the top and centered */
|
||||
overflow-y: auto;
|
||||
width: 40%; /* Could be more or less, depending on screen size */
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
/* Position it in the top right corner outside of the modal */
|
||||
color: white;
|
||||
font-size: 100px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Close button on hover */
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Add Zoom Animation */
|
||||
.animate {
|
||||
animation: animatezoom 0.6s
|
||||
-webkit-animation: animatezoom 0.6s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animatezoom {
|
||||
from {-webkit-transform: scale(0)}
|
||||
to {-webkit-transform: scale(1)}
|
||||
}
|
||||
|
||||
@keyframes animatezoom {
|
||||
from {transform: scale(0)}
|
||||
to {transform: scale(1)}
|
||||
}
|
||||
@@ -41,6 +41,14 @@ body {
|
||||
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 {
|
||||
background: #845663;
|
||||
color: white;
|
||||
@@ -58,16 +66,6 @@ body {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input[type="submit"], button {
|
||||
background-color: #845663;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Move element down (clear), below floating elements */
|
||||
.clear {
|
||||
clear: both;
|
||||
@@ -104,6 +102,10 @@ h5 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
@@ -113,6 +115,36 @@ a, a:link, a:visited, a:hover, a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button, input, select {
|
||||
width: auto;
|
||||
height: 32px;
|
||||
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
textarea, input, select {
|
||||
padding: 0 5px;
|
||||
background: white;
|
||||
color: #333333;
|
||||
border: 1px solid #845663;
|
||||
border-radius: 7px;
|
||||
font-size: 16px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
button, input[type="submit"], input[type="reset"] {
|
||||
background-color: #845663;
|
||||
color: white;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border-spacing: 0;
|
||||
@@ -125,11 +157,12 @@ td {
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
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);
|
||||
padding: 4px 4px;
|
||||
color: #FFFFFF;
|
||||
@@ -141,8 +174,11 @@ a[data-title]:hover:after {
|
||||
-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;
|
||||
-moz-box-shadow: 0 0 4px #222;
|
||||
-webkit-box-shadow: 0 0 4px #222;
|
||||
box-shadow: 0 0 4px #222;
|
||||
background-color: #333;
|
||||
font-size: 15px;
|
||||
line-height: normal;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
min-height: 150px;
|
||||
padding: 25px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.profile-box .profile-picture {
|
||||
.profile-box .profile-picture, .profile-box .group-picture {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 0 20px 20px 0;
|
||||
@@ -18,45 +14,80 @@
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: calc(50% - 60px);
|
||||
.item-box, .item-box-full-width {
|
||||
margin: 20px 0 0 0;
|
||||
padding: 25px;
|
||||
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 {
|
||||
background-color: red;
|
||||
margin-top: 20px;
|
||||
z-index: -1;
|
||||
margin-right: 0;
|
||||
width: calc(100% + 15px);
|
||||
}
|
||||
|
||||
.post-box {
|
||||
float: left;
|
||||
width: 250px;
|
||||
margin: 20px 20px 0 0;
|
||||
display: inline-flex;
|
||||
margin: 20px 15px 0 0;
|
||||
padding: 25px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.post-box img {
|
||||
width: 250px;
|
||||
/* fullscreen */
|
||||
.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;
|
||||
color: #aaaaaa;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.friend-request {
|
||||
.profile-button {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
border-radius: 5px;
|
||||
background-color: #845663;
|
||||
color: #FFFFFF;
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
.friend-request:hover {
|
||||
.profile-button:hover {
|
||||
background-color: #B78996;
|
||||
}
|
||||
3
website/styles/search.css
Normal file
3
website/styles/search.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.search-form input {
|
||||
border-bottom: #845663 solid 1px;
|
||||
}
|
||||
19
website/styles/settings.css
Normal file
19
website/styles/settings.css
Normal file
@@ -0,0 +1,19 @@
|
||||
.settings input,
|
||||
.settings textarea{
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.settings label {
|
||||
width: 125px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* All the fields for typing things. */
|
||||
.settings input[type="password"],
|
||||
.settings input[type="text"],
|
||||
.settings input[type="date"],
|
||||
.settings input[type="email"],
|
||||
.settings textarea {
|
||||
width: 200px;
|
||||
}
|
||||
60
website/views/chat-view.php
Normal file
60
website/views/chat-view.php
Normal file
@@ -0,0 +1,60 @@
|
||||
<div class="content">
|
||||
<div class="chat">
|
||||
<div class="chat-left">
|
||||
<nav class="chat-recent platform">
|
||||
<h5>Chats</h5>
|
||||
<a href="#"><div class="chat-conversation">
|
||||
<img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
|
||||
Rudolf Leslo
|
||||
</div></a>
|
||||
<a href="#"><div class="chat-conversation">
|
||||
<img class="profile-picture" src=http://www.kpop-map.com/wp-content/uploads/2016/01/sm-rookies-kun-profile.jpg">
|
||||
Henk de Boer
|
||||
</div></a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="chat-right">
|
||||
<div class="chat-history platform">
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-self">Hi!</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-other">Hi!</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-self">How it's going?</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-self">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-other">Hi!</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-other">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-other">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-self">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-field">
|
||||
<form method="post">
|
||||
<input type="submit"
|
||||
value="Verstuur"
|
||||
>
|
||||
<span>
|
||||
<input type="text"
|
||||
name="message"
|
||||
placeholder="Reageer..."
|
||||
required
|
||||
>
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
<div class="content">
|
||||
<div class="chat">
|
||||
<div class="chat-history">
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-self">Hi!</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-other">Hi!</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-self">How it's going?</div>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<div class="chat-message-self">Hi!</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<form class="chat-field" method="post">
|
||||
<input type="text"
|
||||
name="message"
|
||||
placeholder="Typ een chatbericht om te verzenden"
|
||||
required
|
||||
>
|
||||
<input type="submit"
|
||||
value="Verstuur"
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
127
website/views/group.php
Normal file
127
website/views/group.php
Normal 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>
|
||||
@@ -13,7 +13,9 @@
|
||||
@import url("styles/header.css");
|
||||
@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");
|
||||
@import url("styles/settings.css");
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<header>
|
||||
<div id="header-logo">
|
||||
<img src="img/Logo.png" alt="MyHyvesbook+" />
|
||||
<a href="profile.php"><img src="img/top-logo.png" alt="MyHyvesbook+" /></a>
|
||||
</div>
|
||||
<div id="header-search">
|
||||
<form action="php/search.php" method="get">
|
||||
<input type="text" placeholder="search people, friends and pages" />
|
||||
<form action="search.php" method="get">
|
||||
<input name="search" type="text" placeholder="zoek naar van alles" />
|
||||
<input type="submit" value="Zoek"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="right profile-menu">
|
||||
<div id="profile-menu-popup">
|
||||
<a href="#"><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="#"><span style="color: green;" class="fa fa-user" data-title="Profiel"></span></a>
|
||||
<a href="index.php"><span style="color: red;" class="fa fa-sign-out" data-title="Uitloggen"></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>
|
||||
</div>
|
||||
<div id="profile-hello-popup">
|
||||
<div id="hello-loop">
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<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="friend-request">
|
||||
<div class="profile-button">
|
||||
<p><img src="../website/img/add-friend.png"> Als vriend toevoegen</p>
|
||||
</div>
|
||||
<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">
|
||||
<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,79 +20,123 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="item-box right">
|
||||
<div class="item-box right platform">
|
||||
<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="#" 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="group-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="group-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>
|
||||
</p>
|
||||
</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>
|
||||
<p class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</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>
|
||||
<p class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</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>
|
||||
<p class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</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>
|
||||
<p class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</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>
|
||||
<p class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</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>
|
||||
<p class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</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>
|
||||
<p class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</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]">
|
||||
<p class="post-date">Gisteren geplaatst</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-box">
|
||||
<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">
|
||||
<div class="post-box platform">
|
||||
<div class="post">
|
||||
<h2>Post</h2>
|
||||
<p class="post-date">4 Januari geplaatst</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
59
website/views/search-view.php
Normal file
59
website/views/search-view.php
Normal file
File diff suppressed because one or more lines are too long
88
website/views/settings-view.php
Normal file
88
website/views/settings-view.php
Normal file
@@ -0,0 +1,88 @@
|
||||
<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"
|
||||
value="Opslaan"
|
||||
>
|
||||
</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>
|
||||
Reference in New Issue
Block a user