This project is for someone experienced with PHP, HTML, Jquery and design.
ONLY BIDS MATCHING REQUIREMENTS POSTED BELOW WILL BE CONSIDERED.
We have an existing web site portal where an authorized user can check the values from environmental sensors. Attached is a screen shot of the current layout so that you can get an idea about complexity (file Current [url removed, login to view])
The website has 4 pages.
We want to have the layout updated to a more Web 2.0 - Flat design, similar as freelancer's site and similar as the login form (attached file [url removed, login to view]) All functionalities work, we just need the layout changed. The entire website is written in PHP.
Color guidelies: Our color is orange. Here are the specifications of our color chart: [url removed, login to view]
For all pages:
- all blue buttons must be replaced with orange buttons (matching above guidelines)
- top menu bar in black (current [url removed, login to view]) should be orange
- in that top bar remove the 4 squares and bring the "home", "map", "device" next to the "Administrator" (bring them left from it)
- remove the section starting with "welcome Admin"
- footer should be orange
- font should be Century Gothic on all pages
- gray background should be white
- get rid of the double vertical line on each page
Page specific changes
1) [url removed, login to view] -> the layout needs to be changed to match this type of layout: [url removed, login to view]
make sure that the blue section is orange as per color guidelines
2) [url removed, login to view]:
- when a device is clicked on then a modal dialog shows up like this website uses (attached file [url removed, login to view]) In the modal dialog a user is able to change the name of the device (current it is an inline field change). In the modal dialog, next to the "Update name" button should be the "Delete" button which has same effect as current delete
- next to the data button there should be a button called "Location" - this shows a map with the location of the device and the option to change it. This functionality is current available by clicking on the small world icon. The small world icon should be removed
- if no name is set for a device, then it shows "please enter a name for the device" -> replace that with "unnamed"
- devices are currently center aligned, this should be left aligned
3) [url removed, login to view]
- "select device" -> text should be in drop down box. If drop down box is selected then it has an orange glow around it - like this website has in blue for its fields
- between the device details (Section starting with "Device ID") and the device list drop down box, add a section to have a google map inserted in there that shows the location of the device.
- a graph is plotted when you click on a sensor - the graph should take full widht of page (with right same margin as current on the left side)
- remove the block just above the graph with the name of the selected sensor (as this is shown in the graph title).
- have the entire graph (time range and actual graph) inside one same block with a single light gray border (no double border like now)
- remove 'Sensor Graph' so that it takes less height and is closer to the actual sensors
- sensors are currently centered and should be left aligned like the devices
- if a sensor is clicked, then it shows the device name and an ID - this should not be the case. A sensor should jump up like it is now but without the additional info shown. If another sensor is clicked, then it should realign horizontally again. See attached file jumping [url removed, login to view]
Please following when bidding:
- PHP experience
- Experience in Web 2.0 design (samples of past work)
- Time required to complete project
The freelancer will be chosen based upon the time required to complete project, price and experience (in that order). If it will take you more than a few days (=week or more) then don't bid!
Any bid not matching above requirements in the bid will be ignored.