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

Merge branch 'joey-testing' of ssh://gitlab-fnwi.uva.nl:1337/11166932/WebDB into joey-testing

Browse Source
This commit is contained in:
Joey Lai
2017-01-13 10:14:07 +01:00
parent 36192c6bf4 e9c883529b
commit 042ec212b2
22 changed files with 787 additions and 116 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>

21
website/group.php Normal file
View File

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

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 B

31
website/profile.php
View File

@@ -1,18 +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");
<?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/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
View File

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

19
website/settings.php Normal file
View File

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

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;
}*/

31
website/styles/chat.css
View File

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

9
website/styles/header.css
View File

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

40
website/styles/main.css
View File

@@ -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,11 +66,6 @@ body {
border: 0;
}
input[type="text"] {
padding: 5px;
}
/* Move element down (clear), below floating elements */
.clear {
clear: both;
@@ -99,6 +102,10 @@ h5 {
font-size: 1.4em;
}
ul {
list-style-type: none;
}
p {
font-size: 1.2em;
}
@@ -108,6 +115,21 @@ a, a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
button, input, select {
width: auto;
height: 32px;
padding: 0 5px;
background: white;
color: #3333333;
cursor: pointer;
border: none;
font-family: Arial;
font-size: 16px;
}
/* Tables */
table {
border-spacing: 0;
@@ -120,11 +142,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;
@@ -140,4 +163,7 @@ a[data-title]:hover:after {
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-color: #333;
font-size: 15px;
line-height: normal;
font-family: Arial, sans-serif;
}

67
website/styles/profile.css
View File

@@ -1,14 +1,10 @@
.profile-box, .item-box, .post-box {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.profile-box {
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
View File

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

33
website/styles/settings.css Normal file
View File

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

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>

16
website/views/chat-view.php
View File

@@ -1,7 +1,7 @@
<div class="content">
<div class="chat">
<div class="chat-left">
<nav class="chat-recent">
<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">
@@ -15,7 +15,7 @@
</div>
<div class="chat-right">
<div class="chat-history">
<div class="chat-history platform">
<div class="chat-message">
<div class="chat-message-self">Hi!</div>
</div>
@@ -43,14 +43,16 @@
</div>
<div class="chat-field">
<form method="post">
<input type="text"
name="message"
placeholder="Reageer..."
required
>
<input type="submit"
value="Verstuur"
>
<span>
<input type="text"
name="message"
placeholder="Reageer..."
required
>
</span>
</form>
</div>
</div>

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

@@ -0,0 +1,127 @@
<div class="content">
<div class="profile-box platform">
<img class="left group-picture" src="http://i.imgur.com/afjEUx2.jpg">
<div class="profile-button">
<p><img src="../website/img/leave-group.png"> Groep verlaten</p>
</div>
<h1 class="profile-username">[groepnaam]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
</div>
<div class="item-box-full-width platform">
<h2>Leden</h2>
<p>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
<a href="#vrienden">...en nog 25 anderen!</a>
</p>
</div>
<div class="posts">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Afbeelding</h2>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
<p class="post-date">Gisteren geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<video width="250" controls>
<source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4">
</video>
<p class="post-date">Maandag geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p>
</div>
</div>
</div>
</div>

4
website/views/head.php
View File

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

8
website/views/header.php
View File

@@ -3,15 +3,15 @@
<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="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">

144
website/views/profile.php
View File

@@ -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,78 +20,122 @@
</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">
<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 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">
<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 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">
<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 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">
<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 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">
<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 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">
<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 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">
<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 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">
<h2>Afbeelding</h2>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
<p class="post-date">Gisteren geplaatst</p>
<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">
<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 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">
<h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p>
<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>

59
website/views/search-view.php Normal file
View File

File diff suppressed because one or more lines are too long

87
website/views/settings-view.php Normal file
View File

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