Update layout of existing site - Repost - open to bidding


This project is for someone experienced with PHP, HTML, Jquery and design.


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

- Price

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.

Skills: CSS, Graphic Design, HTML, Website Design

See more: www freelancer map, www freelancer com down, www freelancer com bids left, world top freelancer, world map graphic design, work from home around the world, where to make an icon, where to get graphic design experience, where to get graphic design bids, where to get a case as a freelancer, welcome to freelancer com, website white flat design, website vertical menu design, website png icon, web site background images, web layout freelancer, web layout design freelancer, web graphic design price list, web graphic chart design, web freelancer portal, web form design guidelines, web design info block, web design case price, web 2.0 layout, want to login freelancer

About the Employer:
( 0 reviews ) Hyderabad, India

Project ID: #5162613

3 freelancers are bidding on average $149 for this job


Hello Sir, We have gone through the details you have provided and would be pleased to work on this with you to deliver the results that you have expected and We are sure you will not be disappointed if you give us More

$144 USD in 3 days
(44 Reviews)

Hello Sir, I myself a website designer having a team of experienced developers who will work on your project to complete it as per your instruction. CAN YOU PROVIDE ME YOUR WEBSITE URL SO THAT WE CAN CHECK IT BEFOR More

$155 USD in 7 days
(139 Reviews)

Dear Hiring Manager, We are ready to work with you, we will developed SEO friendly. We have 5 + years experience and have handed over number of projects, we are new at here but have very good experience in web indus More

$149 USD in 7 days
(12 Reviews)