HTML/CSS Prototype for Litigation Support Evidence Tracking System

Challenge Introduction
Welcome to the “Litigation Support Evidence Tracking System” Prototype Challenge. In this challenge, we would like to create an HTML prototype for a web-based application running on a desktop browser. This will support the evidence collection status tracking and updates for a litigation support team. 

Good luck!  We’re looking forward to your prototype!

Please read the challenge specifications carefully and watch the forums for any questions or feedback concerning this challenge.  It is important that you monitor any updates provided by the client or Studio Admins in the forums.  Please post any questions you might have for the client in the forums.

Challenge Requirements
The main task of this challenge is to create a responsive HTML/CSS Web Portal Prototype based on the provided PSD design comps located in the challenge forums. This is a responsive design solution that includes a desktop size and mobile phone size. No tablet size is required. 

Data displayed in your prototype should be read from a JSON formatted source.  For this challenge, use the sample data in the designs to populate your JSON source for the UI. Please reference the completed design challenge for details on field definitions and requirements for both collections and evidence items.

Design Notes: 
1. All pages of the UI Prototype must support a responsive design solution (Desktop and mobile).
2. All font data, colors, and layout dimensions are included in the PSD files.
3. All buttons and links should have both an onhover and onclick style.
4. Transitions for menu and tab switching should be smooth yet fast.
5. On load the default page is “Dashboard”
6. A client style guide is available here

UI Prototype Page List and Requirements:

-- Desktop --
- Desktop sizing is considered anything 1280px and above.

1. Top Navigation
    a) A breadcrumb is used for navigation on all pages beyond the dashboard.
    b) The current page should appear last in the breadcrumb and is not a link.
2. Dashboard (00_Landing, 00_Landing0, 00_Landing1, 00_Landing2, P00_0, P00)
    a) Interactions
        1. The Dashboard is designed as an “overview” environment that will allow users to quickly click through collection requests and browse evidence items.
        2. As users click through items, there are buttons to view each item’s detail view.
        3. When list items are clicked, the lower half of the screen should slide to the left in a quick and smooth motion.
    b) Search
        1. When search terms are entered, previous searched should be exposed in a list. For this prototype, please add 4 previous search terms that appear if the search field is clicked.
        2. Filter items under the search bar should select/highlight when clicked, and deselect when clicked again.
        3. Date range options (left) should use a calendar picker.
        4. Broad filters (right) should be dropdowns.
        5. The “Clear” button should clear all selections.
    c) Status (top right)
        1. The status bar should reflect the current status of all collection requests.
        2. A good script to investigate is located here. This gives a nice pie chart that can be configured to display data.
    d) Collection request list (bottom left)
        1. This is a list of all current collection requests with the newest at the top.
        2. This is a scrollable list.
        3. When a collection list is selected it displays the collection request overview to the right. 
            a. The button “View Request Details” opens the Collection Request Detail (00_Landing3, P03)
        4. When an evidence item is selected, the bottom of the screen shifts left and exposed the evidence overview on the right (00_Landing2).
            a. The button “View Evidence Details” opens the Evidence Detail (00_Landing4, P08).
3. Collection Request Detail (00_Landing3, P03, P04, P05, P06, P07)
    a) (First Column, bottom) Statuses are selected when clicked, and deselected when clicked again. Multiple statuses can be selected.
        1. COMPLETED and PENDING should not be able to be selected at the same time
    b) (Second Column, top) Action buttons
        1. Mark as complete - Launches a Javascript alert that confirms completion
        2. Send manifest - Launches a Javascript alert that confirms manifest has been sent
        3. Email - Opens email client 
        4. Download - Opens system save dialog
    c) (Second Column, bottom) Evidence Items
        1. Clicking an evidence item title opens the Evidence Detail (00_Landing4, P08).
            a. Evidence item title should include an onhover style.
        2. Clicking the “Mark as complete” button toggles the status to “Completed”
            a. The “Mark as complete” should have an onhover and onclick style.
        3. This column is scrollable. The action buttons and overview information (top of column) should have a static location so they stay in place when the evidence items below scroll.
    d) (Third Column) Activity
        1. There are no interactions in this column.
        2. This column is scrollable
            a. ACTIVITY is not part of the scrollable area
4. Evidence Detail (00_Landing4, 00_Landing5, P08)
    a) Evidence Item List (Left)
        1. This column is scrollable. The overview information (top of column) should have a static location so they stay in place when the evidence items below scroll.
        2. Clicking and evidence item will expose an overview and expose details in the right column. (00_Landing4, P08).
        3. Evidence item files can be removed using the “x”.
        4. Evidence item files can be added using the “Add File” button
            a. File selection should be performed through the standard file input type
    b) Evidence Item Expanded
        1. This is a list of files that have been attached to an evidence item.
        2. The “Edit” button exposes all data fields for data entry. All fields can be updated.  A “Save” and “Cancel” button are available.
        3. The button “Mark as Completed” opens a confirmation dialog. 
        4. HOVERING over a file path opens a tooltip window with details (00_Landing5).

-- Mobile --
- Mobile sizing is considered anything between 320px and 768px
- All interactions follow the desktop version (except hover states)
- Vertical scrollbar should match the design when possible

Client Priorities
- Creating high quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers.
- All elements should be consistent: pay attention to padding, margin, line-height, etc. Refer to PSD file.
- Matching the designs (as closely as possible) across the required browsers.

=============================================================================

CODE REQUIREMENTS:

All code should must meet or exceed WCAG 2.0 A requirements

HTML/HTML5
- Provide comments on the page elements 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 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 camelback 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
- Use CSS3 Media Queries to load different styles for each responsive page. Please don't build different pages for different device layouts.
- Provide comments in 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, especially with jQuery.
- Please use CSS3 styles when creating shapes.
- 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.
- Latest version of Bootstrap is preferred

Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Latest version of jQuer

Images
- Images should be properly compressed while still having good visual quality.
- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
- Make sure your submissions are compatible for both Retina and Standard devices

Browsers Requirements
- IE11
- Chrome (latest version)
- Safari (latest version)
- Firefox (latest version)

Final Submission Guidelines