Currently we have a website up and running www.med-sailing.com/navigation.php (registration is free if you wish to view the page) the existing CSS is not mobile friendly and a mobile CSS needs to be developed.
Requirements as follows
Information page transitions up from bottom of screen when the information icon is clicked on the mobile page (html work not included in this spec) ,to close information page close icon is clicked at the top right of the page. Solid white background (#ffffff) with rounded corners, the ability to drag the information page up and down. Information page needs a scroll bar on the right hand side if information exceeds page height.
Waypoints page transitions up from bottom of screen, white background with rounded corners. Required not to cover bottom of the screen and not to cover the menu. font colours required: #000033 for waypoint div #c4c4c4 for geo location div #c4c4c4 for background on bearing div #000033 text colour for bearing div #3399ff for map button Sans serif font, with clear easy to read. Ability to click on the close icon on the top right corner that will transition the page down to display the mobile page.
Mobile page is mainly taken up by a map, this is out of scope for this work. This section is made up of the tap menu, 'Route' button, start and end form inputs, information icon and close cross.
1) clicking the close cross or swiping down must allow the window to be closed and display more of the map. Swiping up brings the menu back into view. 2) Map, Waypoint and Account nav items are colour #3399ff and are a sans serif font. 3) Route button is a sans serif font and colour #3399ff 4) Start and end input boxes are #cccccc as well as the arrow between them. 5) background is white #ffffff
This is a mobile only design and the CSS needs to take account for screen sizes of phones and tablets, this design excludes desktop which should just default to the mobile site design.
