Challenge Overview
Welcome to Living Progress - Classmaster - Responsive Desktop UI Prototype Challenge
The main task of this project is to create the Classmaster UI Prototype based on the provided PSD Storyboard design.
For this challenge you just need create prototype submission to support responsive with focus Desktop layout. We’ll do more enhancements on the next challenge, make sure your prototype possible to expand.
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we’re looking forward to your submissions!
https://drive.google.com/a/copilots.topcoder.com/folderview?id=0B31nrwic_6z0OUhMek5Zc3dYTmM&usp=sharing
Storyboard.zip - Storyboard Design
Wireframe.zip - Wireframe
Important!
- Suggest best practice Responsive Web Design Breakpoints.
- Use HTML5/CSS3/Javascript as base of this UI Prototype submission
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SCSS/SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Use separated JSON to store data.
- Your prototype submission need build for Desktop Size only
- Provided storyboard using 1280px and height up to page content
- As possible all buttons and links need linked each other. If the page not exists on storyboard, put dead links.
- Bring consistency placement/styling in your UI Prototype submission
- Let discuss any of your questions and let us know if need clarification.
- As far as possible, we need all pages on this prototype linked to each other; let us know if you need clarification about the flow.
- Match form element styling like storyboard look and feel
- Please create a hover style for all button and links (if not specified), we are open to you thoughts!
- Also you can use open source library like jQuery.
- For the graphs in the storyboards, you are allowed to use any 3rd party chart plugins!.
- Some chart library reference: https://github.com/d3/d3/wiki/Gallery
Page Requirements:
Please go through the requirements and look to capture all interactions as mentioned below..
0). Index page:
- Create index page contain links for these 3 flow:
A). Teacher Role Flow
1). Login:
Screenshot: 01 Login.png
- User will be able to enter the username and password.
- Login form need placed on the bottom right of browser screen
- Background image need covered whole browser screen
- Clicking on Login button should show the validation (Screenshot: 02 Login_error.png)
- And clicking on “Login” button the error screen should take the user to Dashboard (Screenshot: 03 Dashboards.png)
2). Dashboard:
Screenshot: 03 Dashboards.png
- At the top, we have textbox to enter the report name and “Save” button
- 3 icons: Download, Print and Export are dead links.
- Page layout divided by these sections:
Header:
- Logo: Please link to the main page of the site
- Make the logo area using fixed width
- Sidebar toggle switch: This collapses and expands when the user clicks on sidebar icon (please see below)
- Main Navigation placed next to toggle switch button
- Dashboard: Takes the user to (Screenshot: 03 Dashboards.png)
- Reports: Takes the user to (Screenshot: 04 Reports.png)
- Search: Clicking on search icon should show the search bar (Screenshot: 03-1-8 Search.png)
- Notifications: Clicking on Notification icon should show the notifications as shown (Screenshot: 03-1-7 Notification.png)
- User Thumbnail: Clicking on user name, arrow and thumb should as shown in this (Screenshot: 03-1-9 User Thumbnail.png)
Sidebar:
Screenshot: 03 Dashboards.png
- Left sidebar is collapsible
- Clicking on the icon shown to the right of the logo will collapse the sidebar and clicking it again in the collapsed view will expand it, please see how the icon changes in 03-1-2 Dashboards_Filter Section Hide.png
Filters:
Screenshot: 03-1 Dashboards_Cotegory Filter Hide.png
- By Default, all filters can be expanded and shown.
- School section:This will show the hierarchy drop-downs as shown in the wireframe, please see the drop-down styles as shown in (Screenshot: 03-1-3 Filter Dropdown.png)
- The down-arrow shown adjacent to the name of the filter is clickable and on click hides that particular section and changes it to right arrow as shown in (Screenshot: 03-1 Dashboards_Cotegory Filter Hide.png) clicking on the right arrow again will expand to show the that particular filter section.
- Follow the checkbox styles as shown in the storyboard (looks like under gender “girls” checkbox which is not selected is inconsistent with the below checkboxes that are not selected...so please make this checkbox consistent as others.)
- Follow wireframe function for the dropdown has 3 types features.
- User can type on the
- Click right arrow will display a more complex dropdown
- Click ok will display a normal dropdown.
Main Content Area:
- Please see how the actively selected tab need to look like!
- Each tab will have the options to select the timeline for which the data need to be shown
- In the left, we see these options 1D, 1W, 1M, 1T, 1Y, custom...user will be able to select only of these and when they choose custom, we need to show a date picker to choose the date range (use the date picker as shown in 03-1-5 Date Picker.png) as shown in (Screenshot: 03-1-4 Custom Date.png). If they choose any other options other than custom, then we show a way for them to switch between the dates in the right as shown in 03 Dashboards.png...make these buttons as dead links.
- Each tabs will allow the user to switch between grid and list view.
- Graph and Table view buttons: In above tabs, user will be able to switch between graphical and tabulation views (Screenshot: 03-2 Dashboards_tabulation views.png)
Summary Tab:
- Graph View (Screenshot: 03 Dashboards.png)
- Implement the graph as shown in 03 Dashboards.png
- Chart type: This need to show the drop-down. No need build the function to change the chart type
- Suggest 3rd party chart plugin to build like storyboard look
- For now, match Bars type look like storyboard
- On the right side, there’s a Week Summary donut chart
- On the bottom part, there’s a line summary
- Match legend color that placed on top. Pay attention of the color diffferences on another tabs.
- Tabulation View (Screenshot: 03-2 Dashboards_tabulation views.png)
- Match table data like storyboard look
Reasonwise Breakup Tab:
- Graph View (Screenshot: 03-3 Dashboards_Reasonwise.png)
- Display 2 rows for bar chart and donut chart
- Hover on label need show up the details
- Suggest 3rd party chart plugin to build like storyboard look
- Tabulation View (Screenshot: 03-3-1 Reasonwise Tabulations.png)
- Match table data like storyboard look
Classwise Breakup Tab:
- Graph View (Screenshot: 03-4 Classwise_Graph.png)
- Hover on label need show up the details
- Notice the bar width difference like storyboard look
- On the right side need display the donut chart
- Tabulation (Screenshot: 03-4 Classwise Tabulations.png)
- Match table data like storyboard look
Trendline Analysis Tab:
- Graph View (Screenshot: 03-5 Trendline Analysis.png)
- This is using line chart
- Hover on label need show up the details
- No tabulation for this!
Comparative Analysis Tab:
- Graph (Screenshot: 03-6 Comparative Analysis.png),
- Tabulation (Please refer the tabulation shown in wireframe and use the same table style as used in above tabs)
- Match table data like storyboard look
03). Reports:
Screenshot: 04 Reports.png
- This page shows the list of reports.
- Create Report: Takes user to (Screenshot: 04-1 Create Report.png)
- Report Name in the table will take the user to (Screenshot:04-2 Report Details.png)
- Edit will take the user to view similar to (Screenshot: 04-1 Create Report.png), just that the report name will already be filled in the text box shown in the top
- Delete will allow the user to delete the report..we need to show a message on confirmation on successful deletion of a report (Screenshot: 05-1-3 Delete School.png)
04). Create Report
Screenshot: 04-1 Create Report.png
- Basically this page will be same like another page. Re-use complete function and styling
- Match content like storyboard look
05). Report Detail
Screenshot: 04-1 Create Report.png
- Basically this page will be same like another page. Re-use complete function and styling
- Match content like storyboard look
B). Administrator Role Flow
06). Manage School:
Screenshot: 05 Setup Schools.png
- Clicking on filter arrow button need expand top box (Screenshot: 05-1 Setup Schools_Filter.png)
- Clicking on “+ New School” will show the modal window (Screenshot: 05-2 Register New School.png)
- Match form element look and feel
- We need three buttons to perform some actions on the selected rows.
- Activate School button: Shows this message (Screenshot: 05-1-1 Activate School.png)
- De-activate School button: Shows this message (Screenshot: 05-1-2 DeActivate School.png)
- Delete School button: Shows this message (Screenshot: 05-1-3 Delete School.png)
Register New School Modal Window
Screenshot: 05-2 Register New School.png
- Clicking on “x” close will hide the modal window
- Show the error screen as shown in (Screenshot: 05-4 Register Error.png)
- Register: Clicking this show (Screenshot: 05-3 Register New School_Completed.png)
- Cancel: This will hide the modal window
07). Manage Teachers:
Screenshot: 06 Registering Teachers.png
- This shows the list of teachers on table layout
- Clicking on “+ New Teacher” (Update the title on your prototype) will show the modal window (Screenshot: 06-2 Register New Teacher.png)
- We need three buttons to perform some actions on the selected rows.
- Activate Teacher button: Shows this message (Screenshot: 06-1 Activate Teacher.png)
- De-activate Teacher button: Shows this message (Screenshot: 06-1-2 Deactive Teacher.png)
- Delete Teacher button: Show this message (Screenshot: 05-1-3 Delete School.png)
Register Teacher Modal Window
Screenshot: 06-2 Register New Teacher.png
- Clicking on “x” close will hide the modal window.
- Show the error screen as shown in (Screenshot: 06-3 Register Error.png)
- We need three buttons to perform some actions on the selected rows.
C) System Administrator Role Flow
08). System Config
Administrative Units Tab
Screenshot: 01A ~ System Config.png
- This tab load by default
- Page consists of 2 columns
- User need able to expand/collapse each County Name
- Hover on each row, need show up the Edit and Delete button
- User need able to scrolling the left side
- On the right side contains text input and Child units on table layout
- Click Delete button will load the modal window (Screenshot: 01B ~ System Config.png)
Absenteeism Reasons Tab
Screenshot: 01C ~ System Config.png
- Display 2 fluid columns for Girls and Boys
- Click delete button need load modal windows
Administrator Levels Tab
Screenshot: 01D ~ System Config.png
- Expand the table width as box width, ignore storyboard look
- Click delete button need load modal windows
Years & Terms Tab
Screenshot: 01E ~ System Config.png
- Display 2 fluid columns for Academic and Terms
09). Access Management
Screenshot: 02A ~ Access Management.png
- This is Access Management screen look
- User can expand the filter area by press the arrow button (Screenshot: 02B ~ Access Management.png)
- Match content like storyboard
- Reset and Filter button placed on the bottom right
Add Admin
Screenshot: 02C ~ Access Management.png
- Click Add New Admin button need load the modal window
- After click Add button need load another modal for success message (Screenshot: 02D ~ Access Management.png)
Edit Admin
Screenshot: 02E ~ Access Management.png
- This is Edit Admin modal window with some text values
- Click Save button need load another modal (Screenshot: 02F ~ Access Management.png)
Delete button
- Click delete button on table need load delete message (Screenshot: 02G ~ Access Management.png)
- Click Close button need hide the modal
10). Manage Users
Screenshot: 03A ~ Manage Users.png
- This screen is Manage Users look and feel
- Click Filter button need expand the filter area (Screenshot: 03B ~ Manage Users.png)
Add User
Screenshot: 03C ~ Manage Users.png
- Click Add user need load modal window
- Match form like storyboard look
- After click Add button need load another modal window (Screenshot: 03D ~ Manage Users.png)
Edit User
Screenshot: 03E ~ Manage Users.png
- This is Edit User look and feel
- Match form like storyboard look
- Click Save button need save the modal window (Screenshot: 03F ~ Manage Users.png)
Deactivate User
Screenshot: 03G ~ Manage Users.png
- This screen shows up when click Deactivate button
Activate User
Screenshot: 03H ~ Manage Users.png
- This screen shows up when click Activate button
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.
- Responsive Web Design solution!
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
- 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.
- 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.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
The main task of this project is to create the Classmaster UI Prototype based on the provided PSD Storyboard design.
For this challenge you just need create prototype submission to support responsive with focus Desktop layout. We’ll do more enhancements on the next challenge, make sure your prototype possible to expand.
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Challenge Downloadablehttps://drive.google.com/a/copilots.topcoder.com/folderview?id=0B31nrwic_6z0OUhMek5Zc3dYTmM&usp=sharing
Storyboard.zip - Storyboard Design
Wireframe.zip - Wireframe
Important!
- Suggest best practice Responsive Web Design Breakpoints.
- Use HTML5/CSS3/Javascript as base of this UI Prototype submission
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SCSS/SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Use separated JSON to store data.
- Your prototype submission need build for Desktop Size only
- Provided storyboard using 1280px and height up to page content
- As possible all buttons and links need linked each other. If the page not exists on storyboard, put dead links.
- Bring consistency placement/styling in your UI Prototype submission
- Let discuss any of your questions and let us know if need clarification.
- As far as possible, we need all pages on this prototype linked to each other; let us know if you need clarification about the flow.
- Match form element styling like storyboard look and feel
- Please create a hover style for all button and links (if not specified), we are open to you thoughts!
- Also you can use open source library like jQuery.
- For the graphs in the storyboards, you are allowed to use any 3rd party chart plugins!.
- Some chart library reference: https://github.com/d3/d3/wiki/Gallery
Page Requirements:
Please go through the requirements and look to capture all interactions as mentioned below..
0). Index page:
- Create index page contain links for these 3 flow:
A). Teacher Role Flow
1). Login:
Screenshot: 01 Login.png
- User will be able to enter the username and password.
- Login form need placed on the bottom right of browser screen
- Background image need covered whole browser screen
- Clicking on Login button should show the validation (Screenshot: 02 Login_error.png)
- And clicking on “Login” button the error screen should take the user to Dashboard (Screenshot: 03 Dashboards.png)
2). Dashboard:
Screenshot: 03 Dashboards.png
- At the top, we have textbox to enter the report name and “Save” button
- 3 icons: Download, Print and Export are dead links.
- Page layout divided by these sections:
Header:
- Logo: Please link to the main page of the site
- Make the logo area using fixed width
- Sidebar toggle switch: This collapses and expands when the user clicks on sidebar icon (please see below)
- Main Navigation placed next to toggle switch button
- Dashboard: Takes the user to (Screenshot: 03 Dashboards.png)
- Reports: Takes the user to (Screenshot: 04 Reports.png)
- Search: Clicking on search icon should show the search bar (Screenshot: 03-1-8 Search.png)
- Notifications: Clicking on Notification icon should show the notifications as shown (Screenshot: 03-1-7 Notification.png)
- User Thumbnail: Clicking on user name, arrow and thumb should as shown in this (Screenshot: 03-1-9 User Thumbnail.png)
Sidebar:
Screenshot: 03 Dashboards.png
- Left sidebar is collapsible
- Clicking on the icon shown to the right of the logo will collapse the sidebar and clicking it again in the collapsed view will expand it, please see how the icon changes in 03-1-2 Dashboards_Filter Section Hide.png
Filters:
Screenshot: 03-1 Dashboards_Cotegory Filter Hide.png
- By Default, all filters can be expanded and shown.
- School section:This will show the hierarchy drop-downs as shown in the wireframe, please see the drop-down styles as shown in (Screenshot: 03-1-3 Filter Dropdown.png)
- The down-arrow shown adjacent to the name of the filter is clickable and on click hides that particular section and changes it to right arrow as shown in (Screenshot: 03-1 Dashboards_Cotegory Filter Hide.png) clicking on the right arrow again will expand to show the that particular filter section.
- Follow the checkbox styles as shown in the storyboard (looks like under gender “girls” checkbox which is not selected is inconsistent with the below checkboxes that are not selected...so please make this checkbox consistent as others.)
- Follow wireframe function for the dropdown has 3 types features.
- User can type on the
- Click right arrow will display a more complex dropdown
- Click ok will display a normal dropdown.
Main Content Area:
- Please see how the actively selected tab need to look like!
- Each tab will have the options to select the timeline for which the data need to be shown
- In the left, we see these options 1D, 1W, 1M, 1T, 1Y, custom...user will be able to select only of these and when they choose custom, we need to show a date picker to choose the date range (use the date picker as shown in 03-1-5 Date Picker.png) as shown in (Screenshot: 03-1-4 Custom Date.png). If they choose any other options other than custom, then we show a way for them to switch between the dates in the right as shown in 03 Dashboards.png...make these buttons as dead links.
- Each tabs will allow the user to switch between grid and list view.
- Graph and Table view buttons: In above tabs, user will be able to switch between graphical and tabulation views (Screenshot: 03-2 Dashboards_tabulation views.png)
Summary Tab:
- Graph View (Screenshot: 03 Dashboards.png)
- Implement the graph as shown in 03 Dashboards.png
- Chart type: This need to show the drop-down. No need build the function to change the chart type
- Suggest 3rd party chart plugin to build like storyboard look
- For now, match Bars type look like storyboard
- On the right side, there’s a Week Summary donut chart
- On the bottom part, there’s a line summary
- Match legend color that placed on top. Pay attention of the color diffferences on another tabs.
- Tabulation View (Screenshot: 03-2 Dashboards_tabulation views.png)
- Match table data like storyboard look
Reasonwise Breakup Tab:
- Graph View (Screenshot: 03-3 Dashboards_Reasonwise.png)
- Display 2 rows for bar chart and donut chart
- Hover on label need show up the details
- Suggest 3rd party chart plugin to build like storyboard look
- Tabulation View (Screenshot: 03-3-1 Reasonwise Tabulations.png)
- Match table data like storyboard look
Classwise Breakup Tab:
- Graph View (Screenshot: 03-4 Classwise_Graph.png)
- Hover on label need show up the details
- Notice the bar width difference like storyboard look
- On the right side need display the donut chart
- Tabulation (Screenshot: 03-4 Classwise Tabulations.png)
- Match table data like storyboard look
Trendline Analysis Tab:
- Graph View (Screenshot: 03-5 Trendline Analysis.png)
- This is using line chart
- Hover on label need show up the details
- No tabulation for this!
Comparative Analysis Tab:
- Graph (Screenshot: 03-6 Comparative Analysis.png),
- Tabulation (Please refer the tabulation shown in wireframe and use the same table style as used in above tabs)
- Match table data like storyboard look
03). Reports:
Screenshot: 04 Reports.png
- This page shows the list of reports.
- Create Report: Takes user to (Screenshot: 04-1 Create Report.png)
- Report Name in the table will take the user to (Screenshot:04-2 Report Details.png)
- Edit will take the user to view similar to (Screenshot: 04-1 Create Report.png), just that the report name will already be filled in the text box shown in the top
- Delete will allow the user to delete the report..we need to show a message on confirmation on successful deletion of a report (Screenshot: 05-1-3 Delete School.png)
04). Create Report
Screenshot: 04-1 Create Report.png
- Basically this page will be same like another page. Re-use complete function and styling
- Match content like storyboard look
05). Report Detail
Screenshot: 04-1 Create Report.png
- Basically this page will be same like another page. Re-use complete function and styling
- Match content like storyboard look
B). Administrator Role Flow
06). Manage School:
Screenshot: 05 Setup Schools.png
- Clicking on filter arrow button need expand top box (Screenshot: 05-1 Setup Schools_Filter.png)
- Clicking on “+ New School” will show the modal window (Screenshot: 05-2 Register New School.png)
- Match form element look and feel
- We need three buttons to perform some actions on the selected rows.
- Activate School button: Shows this message (Screenshot: 05-1-1 Activate School.png)
- De-activate School button: Shows this message (Screenshot: 05-1-2 DeActivate School.png)
- Delete School button: Shows this message (Screenshot: 05-1-3 Delete School.png)
Register New School Modal Window
Screenshot: 05-2 Register New School.png
- Clicking on “x” close will hide the modal window
- Show the error screen as shown in (Screenshot: 05-4 Register Error.png)
- Register: Clicking this show (Screenshot: 05-3 Register New School_Completed.png)
- Cancel: This will hide the modal window
07). Manage Teachers:
Screenshot: 06 Registering Teachers.png
- This shows the list of teachers on table layout
- Clicking on “+ New Teacher” (Update the title on your prototype) will show the modal window (Screenshot: 06-2 Register New Teacher.png)
- We need three buttons to perform some actions on the selected rows.
- Activate Teacher button: Shows this message (Screenshot: 06-1 Activate Teacher.png)
- De-activate Teacher button: Shows this message (Screenshot: 06-1-2 Deactive Teacher.png)
- Delete Teacher button: Show this message (Screenshot: 05-1-3 Delete School.png)
Register Teacher Modal Window
Screenshot: 06-2 Register New Teacher.png
- Clicking on “x” close will hide the modal window.
- Show the error screen as shown in (Screenshot: 06-3 Register Error.png)
- We need three buttons to perform some actions on the selected rows.
C) System Administrator Role Flow
08). System Config
Administrative Units Tab
Screenshot: 01A ~ System Config.png
- This tab load by default
- Page consists of 2 columns
- User need able to expand/collapse each County Name
- Hover on each row, need show up the Edit and Delete button
- User need able to scrolling the left side
- On the right side contains text input and Child units on table layout
- Click Delete button will load the modal window (Screenshot: 01B ~ System Config.png)
Absenteeism Reasons Tab
Screenshot: 01C ~ System Config.png
- Display 2 fluid columns for Girls and Boys
- Click delete button need load modal windows
Administrator Levels Tab
Screenshot: 01D ~ System Config.png
- Expand the table width as box width, ignore storyboard look
- Click delete button need load modal windows
Years & Terms Tab
Screenshot: 01E ~ System Config.png
- Display 2 fluid columns for Academic and Terms
09). Access Management
Screenshot: 02A ~ Access Management.png
- This is Access Management screen look
- User can expand the filter area by press the arrow button (Screenshot: 02B ~ Access Management.png)
- Match content like storyboard
- Reset and Filter button placed on the bottom right
Add Admin
Screenshot: 02C ~ Access Management.png
- Click Add New Admin button need load the modal window
- After click Add button need load another modal for success message (Screenshot: 02D ~ Access Management.png)
Edit Admin
Screenshot: 02E ~ Access Management.png
- This is Edit Admin modal window with some text values
- Click Save button need load another modal (Screenshot: 02F ~ Access Management.png)
Delete button
- Click delete button on table need load delete message (Screenshot: 02G ~ Access Management.png)
- Click Close button need hide the modal
10). Manage Users
Screenshot: 03A ~ Manage Users.png
- This screen is Manage Users look and feel
- Click Filter button need expand the filter area (Screenshot: 03B ~ Manage Users.png)
Add User
Screenshot: 03C ~ Manage Users.png
- Click Add user need load modal window
- Match form like storyboard look
- After click Add button need load another modal window (Screenshot: 03D ~ Manage Users.png)
Edit User
Screenshot: 03E ~ Manage Users.png
- This is Edit User look and feel
- Match form like storyboard look
- Click Save button need save the modal window (Screenshot: 03F ~ Manage Users.png)
Deactivate User
Screenshot: 03G ~ Manage Users.png
- This screen shows up when click Deactivate button
Activate User
Screenshot: 03H ~ Manage Users.png
- This screen shows up when click Activate button
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.
- Responsive Web Design solution!
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
- 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.
- 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.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser