Detailed Photobooth Specs

• The first page is the "splash" page that comes up when the user goes to the main URL for the app, http://138.68.25.50:???/photo/photobooth.html. Pushing "enter" takes you to the main Web page, which appears on pages 2 and 3 of the design. This can be implemented by loading a second Web page.
• The second page shows an example of what the main page might look like; it will ultimatedly contain your photos and labels, not Dani's, and at least ten of them, not just three.
  • The size of the photos should remain constant, and the number of photos per row should change as the window width changes. The labels, if any, should appear below each photo. When the page opens, every picture should look like the middle one in Dani's picture, with its labels (if any) underneath. The left photo is in the midst of uploading; it is faded and there is a progress bar underneath.
  • The right photo shows what happens when the user hits the modified hamburger menu in its lower-right corner. Clicking the x next to any existing label deletes it; it should disappear. Entering text and hitting "add" should add a new label (with an x) to the list of labels. When there are ten labels (the max we will allow), the add button should not be visible. Hitting "add to favorites" should change the button label to "unfavorite", and hitting "unfavorite" should change the label to "add to favorites". Hitting the menu icon again will close the menu.
• The third page shows the actions of the toolbar.
  • Hitting upload shows the "choose file" and "upload". The text under "choose file" should say "no file chosen" until the user choses a file. When the user hits "upload", a faded version of the image appears on the left, with the progres bar, and the text under "choose file" goes back to "no file chosen". Once the file upload, and ultimately automatic labeling, is finished, the new photo should change to look like the standard presentation in the middle of the design picture. When the user clicks "upload" again, the upload controls disappear.
  • When the user clicks the filter button, the text box and "filter" and "clear filter" buttons appear. When the user enters some filter text and hits "filter", only photos with that filter text in their labels are shown. Hitting "clear filter" shows all the photos again.
  • When the user hits "favorites", only photos selected as favorites are shown, and a "clear filter" button (not shown in Dani's drawing) appears underneath it, with styling similar to the controls below "upload" and "filter". Hitting "clear filter" shows everything again and the "clear filter" button disappears.
• The final page shows the mobile view of the Web page. There is no "splash" page. The photos and their labels are in a single column. The modified hamburger menu in the lower right of each picture works the same as in the large window. The toolbar icons at the top bring up their special controls just under the "Photobooth" icon.