The goal of this project is build a cloud-based web application that end-users will access within a web browser. The application will allow users to routinely log time based on predetermined categories, as well as the creation of ad-hoc categories.

These categories can include tasks such as: breaks, lunch, training, problem resolution, documentation management, company & client meetings.

Challenge Overview

The main task of this challenge is to produce an HTML UI Prototype based on the provided PSD Storyboard design and outlined specs.

Challenge Requirements

Documents

The screenshots and storyboard design files are provided in challenge forums.

Important!

- We have both User and Admin screens, they are identical except that admin access has a Report page.

- 5-Style-Tile.png is a style guide to follow.

- For this UI Prototype submission we need your submission to support Desktop screen : Desktop view: 1280px width and height. The background is fluid but content is centered in the page.

- Provided storyboard for Desktop version using widescreen display (1280px width).  

- All pages on this prototype linked to each other; let us know if you need clarification about the flow.
- Please create a hover style for all button and links (if not specified), we are open to you thoughts!

- You are open to use AngluarJS 1.5.9. Other libraries are not acceptable.

- The app will communicate through API with backend, you need to add json data accessed through api/ajax calls to simulate this.
- We would like you to use bootstrap 3 or 4 for this challenge! (no other frameworks please)

Page Requirements

Please go through the requirements and look to capture all interactions as mentioned below.

Login/Register Page

Screenshots :

- 1-1-Login.png

- 1-1-Login-error.png

- 2-Register.png

Notes:

- Simulate login using user credentials in users json.

- Add proper validation for fields.

- Simulate invalid login.

Tracker Page

Screenshots :

- 3-1-Dashboard_xxx.png to 3-11-Dashboard_xxx.png screens

Notes:

- User name, image at header is loaded from json

- Date at header reflects is the time, should reflect current time always.

- Categories will be loaded from JSON, the image is also loaded from json, it is not background image.

- There is a category that stop production time, in json you should include a flag to indicate that and it should reflect the hours tracked.

- Toggling ON button will enable/disable production time tracker.

- Toggling production time tracker multiple times per day should be allowed.

- You need to prototype the tracker as it is shown in screenshots :

- Starting/Stopping production will add block to the tracker

- Selecting a category will add a block to the tracker

- The tracker start from top, where the hour displayed represents current time.

- The current time at top should reflect current time always, so it needs to show time incrementing by minute always to show current time.

- “Production time XX” - the XX should reflect the current time spent, it should start from 0m, 1m .. 1hr, 1hr 3m .. etc.

- Categories will show time consumed only after user stop that activity as shown in the screenshots. I.e. When selecting Lunch, it will show launch in the tracker feed, when user stop the Lunch activity it will add production time and show the time spent in lunch i.e. 1h.

- The top Idle time and production time should update in real time to reflect total idle and production time.

- The screenshots sequence is very clear, if you have any questions please post in forums.

- The tracker feed/timeline area is scrollable.

Report Page

Screenshot:

- From 4-1-1-Report-admin-add-export-feature to 4-6-Report-table-view.png

Notes:

- Filter category checkboxes : when hover over it it should display a popup with list of options, the list of options are populated from backend so you need to simulate this loaded from json data that replaced with api in code challenge.

- By default the list of options in the Filter category popup are selected.

- You are open to pick the chart library as long as it is open source and the outcome will match the design exactly.

- Print option: Write a css to handle printing the report area (title, filter options, and the table/chart)

- Prototype all the charts and table report.

- Toggling between reports and chart must be functional.

Client Priorities (The items that are considered highest prototype priorities)

- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.

- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.

- Matching the storyboards (as close as possible) across the required browsers.

CODE REQUIREMENTS:

HTML/HTML5

- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.

- Please use clean INDENTATION for all HTML code so future developers can follow the code.

- All HTML code naming should not have any conflicts or errors.

Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)

- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

- No inline CSS styles- all styles must be placed in an external stylesheet.

- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

CSS3/SASS

- You must write and submit the styling using SASS.

- Submit the original SASS files.

- Provide comments on the code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

- Follow this best practices https://www.sitepoint.com/8-tips-help-get-best-sass/

- Please use clean INDENTATION for all code so developers can follow the code.

- All styling naming should not have any conflicts.

- As possible use CSS style when create all styling.

- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

Javascript

- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

Images

- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.

 

Final Submission Guidelines

Before submitting, make sure that your HTML, SASS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.

Upload your code as a .zip file to the Submit and Review tool for this contest.