A Win8 (Metro) HTML5/JS app (multitouch)

A Windows 8 (Metro) multitouch-enabled (pan/swipe/zoom used for now), HTML5/JS app. In full HD (1920x1080 resolution). In terms of look it kind of looks like Pinterest or Glimpse ([login to view URL]); where there are columns of icons and a user can scroll through them, pick one, and expand and have a little interaction with. The app is getting its data from a feed (XML or JSON). ## Deliverables A Windows 8 (Metro) multitouch-enabled HTML5/JS app. In terms of look it kind of looks like Pinterest or Glimpse ([login to view URL]); where there are columns of icons and a user can scroll through them, pick one, and expand and have a little interaction with. In full HD (1920x1080 resolution). 1. Screen 1 Most of the screen is taken up by a 4 columns of same-width, different-height slots (call them 'flyers'), with info loaded from a JSON/XML feed. The feed is parameterized, because it can be big, so the entire feed is never requested to be loaded. It would be loaded like this, say: /feed - loads default window /feed?dateFrom=2012-09-11&dateTo=2012-09-22 - loads the appropriate dates. For the purposes of this project no server side code implementing the feed is needed, a static one is fine, as long as the parameters are passed when needed Each slot contains: - Title - Category icon (Event/For sale/services/non-profit) - Distance - Image The above info is loaded from JSON/XML feed so that should be constructed to have such fields. There will be more fields, specified below in Screen 2, that would also come from that feed. The top of the screen is taken up by the category icons. A tap on any icon selects it, and shows only slots that have their category matching the selected icon. A second tap on that icon, or tap on All goes back to showing all. The bottom of the screen is taken by a timeline. It's boundaries are determined from the feed, and left-right swipe/pan along the timeline changes the timeline and the slots displayed. (After a period of inactivity, 15 seconds, the timeline reverts back to the latest). See the attached image wb-screen1.jpg. The sorting is latest item first, in the top left slot, left to right. The feed is polled every so often (say, 2 seconds), with newer slots appearing in the top left hand corner and things shifting accordingly. On this screen, an up-down pan scrolls the feed (all columns at the same time; that is, it does the same pinterest does). Up-down swipe scrolls with inertia, of course, and tap stops the swipe. Tap or zoom on a slot takes you to screen 2 (below). 2. Screen 2 This looks like a 'film roll' of sorts (see [login to view URL] image) where the slots are from the same category as the slot tapped/zoomed in screen1 to get here (in the center, of course, is the one that was tapped/zoomed), and the slot's contents are, from the feed: - "Detail image" - Text - A set of pairs : QR code image, corresponding text, only one of which is displayed at a time. Left-right pan or swipe on the QR code or corresponding text (in the lower left corner, see attached image) rotates through these pairs. - Left-right pan or swipe elsewhere would just scroll through slots of the same category, without or with inertia as needed. The top and bottom of this screen is similarly taken by categories and timeline respectively. The feed can thus look like: { 'latest' : '2012-09-28', 'earliest' : '2012-01-01', 'slots' : [ { 'category' : 'forsale', 'title' : 'Bike for sale', 'location' : 'San Jose, CA', 'posted' : '2012-09-01', 'screen1_image' : '[login to view URL]', 'screen2_image' : '[login to view URL]', 'details' : { 'Contact' : { 'text' : 'Scott 818 555 1212', 'qr' : '[login to view URL]' }, 'Date' : {'text' : '2012-10-33', 'qr' : '[login to view URL]' } } }, ... ... ]