Styx Access Request Module Web Application UI Prototype

Welcome to Styx Access Request Module Web Application UI Prototype Challenge

The main task of this project is to create the Styx Access Request Module Web Application UI Prototype  based on the provided Storyboard design.

This UI Prototype will use Responsive Design solution that will works within Tablet and Mobile Platform. You must use CSS Media Query so prototype can use different layouts when viewed on tablet and mobile.

For this challenge you will create the desktop browser layout but your design should take into account operation on a tablet platform. There is no requirement for this application to operate on a smartphone.

Final Submission Guidelines

CODE REQUIREMENTS:
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.
- You’re encouraged to use HAML to make the HTML code clean, and provide source files on your submission.
- Each of the HTML pages need adapted both difference of tablet layout.
CSS3
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Please use LESS/SCSS or SASS to make the CSS code clean, provide source files on your submission.
- You MUST use CSS media query for tablet and phone
IMAGES
- Images should be created scalable vector graphics format. The attached PDF file (Concept_OnGuard-ARM_051915.pdf) contains scalable vector graphics elements. Use a tool such as Adobe Illustrator, Adobe Acrobat, or the open-source tool - Inkscape to extract these elements and save them in .svg format. Submissions with graphics files in any other format (.jpg, .png, etc.) will be rejected. 

- Please use best practice repetition usage of background based image.

Documentation Provided

• ARMWireframes.zip - Wireframes, this is a little out-date, please take the Storyboards first.
• Concept_OnGuard-ARM_051915.pdf - Storyboard Design
• ARM UI Prototype Challenge Specifications.pdf - General requirements, please check section 7 for screen descriptions.
• Lenel Application Style Guide 1.1.pdf - general style guide to follow for UI prototype creation

PAGE REQUIREMENTS:
Notes:
- As possible we need all pages on this prototype linked each other.  Let us know if you need clarification about the flow.
- Match All Fonts like on storyboard. Use @font-face technique.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- The Storyboard document shows how the hover state should look at the bottom of page 3.
- First priority for this prototype is you need make sure all charts in all pages display consistent and correctly in all required browsers.
- 1st option to use to build the chart for this prototype is this chart plugin. Make sure style consistent with storyboard. If some chart not possible to build with that suggested chart. We’re looking your help create/suggest another chart library or your own custom codes that will fit with our storyboard design.
- Keep in mind, we need interactive chart display consistent and correct in all required browsers.
- Let us know if need some clarifications!
- You need define all colors used on your stylesheet. We need update the color easily in the future just by update single line. Refer this site to help you set the variables

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.
- Documentation of your prototype
The following pages are required in your submission on tablet by using Responsive Design solution
1. Login

For the Login page, it would be great if we could reuse code from the Styx Dashboard application’s Login page. You can refer to the page below with the following credentials.

https://demo.topcoder.com/studio/styx/DashboardWebApp/prototype/configuration/login.html

studio / GGugBsLG
2. Requester
3. Approver application
4. Configurator/Email notifications

HTML/CSS Requirements:
- You're encouraged to use and take advantage of CSS3.
- 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.
- 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.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the Browser Requirements section.  
Web Browsers Requirements
- IE10, IE11
- Firefox latest version
- Safari latest version
- Chrome latest version
Mobile Devices Browsers Requirements
- Safari Mobile on iPad
- Android Browsers on Nexus 5 & 7