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.

Private 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 webpage being annotated is automatically divided up into sections (they can be high-level divs according to the DOM tree, for example). When cursor hovers over a section, a cross is shown at the top right corner of the section to afford 'deletion of the section'. When cursor hovers over the boundary of a section, cursor changes to 'move cursor' to afford 'moving sections around'.

Inside a section, 

At the top, the original webpage's URL, the user's username, and three buttons are present.

3.

4.