We are launching a new project and looking at fresh blood to join the ranks.
The scope of this assignment is to created version 1 of 5 screens (attached), and the goal is to build a relationship needing around 100-150 hours over the coming few months.
The screens to be completed are (in order of importance)
1) Checklist screen (p5)
2) Listing screen (p3)
3) result screen (p6)
4) Dashboard (p2)
5) Login (p1)
6) Add New (p4)
A much more extensive amount of details regarding the Checklist screen will be provided, but here's a starting point;
• the name of the audit, on hover, is underlined with a pencil on the right, and when clicked turns into a styled "text box" to allow "in place editing"
• the status bar will progress live and change colour as it moves forward, with smooth animation
• the statement of advice "dropdown" shows a clickable list of documents, and is drag & drop enabled for upload
• the relevant section navigation will make the left hand side document to scroll (in the same doc) or load a new doc. (you only need to do the animations - see below in source doc)
• the Categories dropdown will scroll the checklist items to a certain category
• the filter and sort drop down (tbd) allows alphabetical and importance sorting, the filtering is based on a list of checkbox options
• the list scrolls behind the header (up to 100 items)
• when an item is selected / clicked, the item expands to show more details (same for all items) and scrolls to be at the top of the list (ie, the expanded item always at the top)
• the checkboxes for the list are colour coded
• each list entry have a rating and "why" section; the rating is 5 "stylised" buttons which don't look like buttons, the why box is a textarea
• the "rating buttons" are grey, and colour coded on hover or selection, individually as red-orange-yellow-green-blue
• scrolls within the page (ie, top of the page stays, content scrolls)
• has sections highlighted
• when changing document from the top-left dropdown a css animation minimises the current document towards the top left, and the new document appears inversely
• document option popup (three-dots menu)
• Relevant section will browse to a different section in the loaded document with smooth "accelerating" scroll.
• a warning message may appear on certain documents
The other pages are more self explanatory. A tweaked version of this may be uploaded.
Deliverables include HTML (all pages) using foundation framework, and if possible latest angular.
Delivery v1 before Monday 12th, final before Wednesday 14th.
Please let me know that you have read the entire brief. Else your wasting my time and yours