Browsepage

HTML only

The browse page displays all people available for browsing and (dis)liking. If only HTML is available, this list of people will be displayed from top to bottom on a scrollable page. The elements on this page include:

• A profile picture for every user, at 100vw.
• A full name for every user, as a h2 title (in the figure caption).
• A shortened description for every user, as a paragraph (in the figure caption).
• A like and dislike button.
• A main navigation (at the top of the page, so the user doesn't have to scroll all the way down).

Adding CSS

• The list items (users), which are displayed as figures (images + figcaptions), can now be stylized as cards. The list is still scrollable, cards are displayed underneath one another.
• Profile pictures will take up 75% of the card.
• Shortened descriptions take up 25% of the card.
• Like and dislike buttons become round and get a background-color & dropshadow, and will be places at the bottom edge of the profile picture. The background-color becomes brighter for .3 seconds after the button is clicked.
• Main navigation becomes fixed at the bottom of the page.
• The main gets some padding, so there will be some distance between all elements and the edge of the page.
• The current page is highlighted in the navbar.

Adding JavaScript

• The user cards are now 'stacked', like a pile of cards IRL. After the user clicks like or dislike on a specific person, their details disappear and get replaced with the next person's details.

Profilepage

HTML only

The profile page is where the user can read more about someone he's interested in. This page contains the same content as a list item in the browse page, except for a few additions:

• The full description of a user is being displayed, still as a paragraph.
• A user's favourite artists are being displayed, as images with the artist name underneath them as paragraphs.
• An 'X' button to return to the browsepage.

Adding CSS

The profile page will look similar to a list item in the browse page, except for a few additions:

• The profile picture now takes up the complete width of the page.
• Titles are bold.
• The 'favourite artists' section is now horizontally scrollable, with round pictures and the artist names underneath each picture.

Adding JavaScript

• Javascript will register the user's (dis)like on a profilepage, and return them to the browsepage.
• When the user likes a new person, a little colored dot appears next to the 'liked people' button in the navigation bar.

Likedpage

HTML only

The likedpage is where the user sees his chats with people that he has liked. This page contains:

• A list, with every list item being a chat with a user.
• A profile picture for every user.
• A name for every user.
• The last message sent by/to every user.
• A remove button for every user, to remove them from the likedlist.

Adding CSS

Adding CSS to this page will make it a lot easier to use:

• Every chat becomes about 50px high.
• User profile pictures become round and will be displayed on the left.
• User names become bold, and will be displayed to the right of their picture.
• The last messages sent will also be displayed to the right of their picture, underneath the user name.
• The 'remove' button appears after clicking someone's profile picture.

Adding JavaScript

• New people in the likedlist will have a little colored dot next to their profile picture, until the chat has been opened for the first time.
• The current page is highlighted in the navbar.