Challenge Overview
Welcome to $400 Styx Dashboard Lite Version Improved Look and Feel (HTML/CSS/JS)
For this F2F, we need fix existing prototype to show new look in some place but as
Read more details information below.
Final Submission Guidelines
IMPORTANT!
This F2F is subjective - so the first solution that the client likes and fulfills the required updates will win. We will consider all submissions until a the winner is declared.
Attachment Files
latest-lite-ui-prototype.zip - UI Prototype as Base Updates (Lite Version)
current-full-prototype.zip - UI Prototype as Reference
stroyboard.zip - Storyboard as base design updates (Adobe Illustrator File)
Web Browsers Requirements
- IE10
- Firefox latest version
- Safari latest version
- Chrome latest version
Code Requirements:
- HTML5
- CSS
- Javascript
F2F Tasks
- Use system-management.html as base updates
- This is new look and feel (screenshot: 01-New-Look.png)
1. Add Collapse Menu
- Add new Collapse menu below “Upgrade” button in the left sidebar
- Show “Collapse Menu” as menu title
- On collapsed state, arrow point to the right side
- On expanded state, arrow point to the left side
2. Update Header bar
- In the right side of header bar need these buttons:
- Configuration button (This can be dead link) Grab Configuration icon from current-full-prototype.zip
- Alert button (This need show the Alert flyout, explains more details below)
- Username and Logout (Username can be dead link, Logout button take user to Login page)
3. Update Main Content Area
- Overall main content area need adapt new responsive width when Alert and Menu expanded or collapsed
- Read more details information for each sections
Total System Counts
- Total System Counts need show arrow in the left and right side
- Update the value for each slides
- Update background into grey color
- Match title font size
Date Range
- Move date range from header into below the
- Use light blue background
- Datepicker selection need remain works
- Time selection need show consistent styling like datepicker
System Performance
- Update color theme for each line based on storyboard look
- Match chart line look, you need adjust each line
- Update legends from rectangle into rounded. Make sure still clickable
- Notice there’s red threshold line in chart
New Badges per day
- Y Axis need show about 4 label
- Update color theme
Alarms per day
- Y Axis need show about 4 label
- Update color theme
Error Log
- Show about 10 legends
- Match each color theme
4. Alert Flyout
- User can click “Alert” button, after click “Alert” right sidebar show up
- Show “active” state for the menu button
- After right sidebar show up, main content area need adjust the width
- By Default, on this flyout user see:
-- Event title and “+” button
-- user can collapse/expand each section
- When user click “+” button, need show “Add Event” menu (screenshot: 02-New-Look-Expand.png)
- When user click “date” button, need show calendar view
- You can re-use existing form for “Add New Event” and “Calendar”
- Save Event and Cancel need hide the form
F2F GUIDELINES
We will review submissions as they are submitted
We will review ALL submissions until we declare a winner based on
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Let us know if you have any questions.
Thank you