Page History

1.

Homepage.

It provides a text box at the center for user to paste the url of the webpage that they want to annotate. Then they need to hit 'Enter' or press 'Load'.

It also provides a 'Login' button that pops up a login prompt (not shown). When logged in, the user's username will be shown at the top right corner instead.

2.

Editing Page.

User (logged in as Jim) loads a webpage and is shown the editing page. The user is able to edit the webpage in the editing page. 

The top bar is showing the original webpage's URL, username, and three buttons: 'Save' (shown below), 'Reload' (discard all changes) and 'Share' (shown below).

The webpage being annotated is automatically divided up into sections (they can be high-level divs, for example).

Mouse behavior and actions user can take:

1. Hovering over a section: A cross is shown at the top right corner of the section to afford 'deletion of the section'. 
2. Hovering over section boundary: Cursor changes to 'move cursor' to afford 'moving the section around'. 
3. Hovering over text: Cursor changes to 'text cursor'.
4. Clicking on text: A row of buttons is shown just above the cursor to provide editing capabilities: 'insert text' and 'add notes'. 
5. Selecting text: A row of buttons is shown just above the cursor to provide editing capabilities: 'add notes', 'hyperlink', 'highlight' and 'change color'.
6. Clicking on an image: A button is shown just above the cursor to provide editing capability: 'add notes'. 
   

2.1

Image Added Image Removed

Save Dialog Box. 

Pops up when 'Save' is clicked on the above screen.
Allows user to name the annotated webpage and save.
Clicking 'Save' brings the user to the screen below (dashboard).

Share Dialog Box.

3.

Dashboard.

4.