Simple HTML5/CSS3/PHP Mobile Application

Requirements Simple HTML5/CSS/PHP Mobile Application

This project is about creating a simple mobile application to keep track of the score for our tournament. This has to be done with HTML5, CSS3 and javascript. It also involves a little bit of PHP to fetch data but the PHP scripts have already been written.

Very important: This project is for mobile devices only. You must have knowledge of responsive web design/adaptive layout in order to make the pages flexible to different mobile screen sizes. This is very important. Also knowledge of caching.

What we need is detailed in the additional information section. Please refer to the screenshot included in the ZIP file to have a better idea of the project.

All the artwork (graphics) have been created already, so there is no design work involved. The RGB color code will be provided. The font to used is Gotham Rounded but we are open to other fonts that are similar.

Please in your bid explain how you will be approaching this work and some work experiences related to that.

We are looking for someone who will be able to send frequent updates and communicate clearly.

Code must be clean and well commented

## Deliverables

**1. Login Screen**

This is the screen where the user will enter the information for his tournament. There are 3 fields and the logo at the bottom. Once the user press on the arrow (next button), it will connect to the PHP script already created. If the information is ok, it will cache the information of those 3 fields in the browser and move to the next screen, if not it will output an error message.

If the user closes the web page and comes back, it must check if he has already did the validation with the information that is cached and if he did, he should not go through that page again, he should go automatically to the next one.

**

2. Configuration screen**

Here the players name will be populated from the information fetched in the php script from step 1. He then needs to input his foursome name. It can't be blank or null. There is also the logo at the bottom. Once he press on the next button, it will run a php script to update the foursome name and fetch some data.

**3. Scoresheet screen**

This is where the score will be (1) viewed and (2) entered. The information comes from PHP scripts. That information is:

The name of the foursome to appear at the top (for example SUPER TEAM!)

The actual score (for example 655)

The score for each hole (number in the green rectangle)

The par and hcp value number.

On the screen we can see 12 holes, but golf course have 18 holes so it should accommodate 18 holes. There should be more holes put at the bottom. (This image is from my iPhone an is scollable normally)

The label "Leaderboard" is a link to the next page (step 4).

When a user enters/modify a value, it needs to connect to a php script (the script is already created) to update the results in the database. There should be an indicator to the user that this process is happening. Like a spinning circle for example.

The menu that is at the bottom is made of 4 buttons and enables to navigate to different pages. This menu SHOULD NOT be at the bottom. It should be place at the top of the [url removed, login to view] a button is clicked, there is a change in color of the icon to indicate to the user on which screen he is.

**4. Leaderboard**

This screen is a table displaying the results. The information is coming from the PHP script. If the user clicks on the label "My Scoresheet" it will bring the user back to the step #3 to view his scoresheet. The user can also click on any row of the table and this will display step 3 but for the specific team that he has clicked on (data again comes from a specific PHP script already written). When it goes back to step #3, in that situation there must be an additional button on step #3 to enable the user to switch back to his own scoresheet.

It is important that it is the row that is clickable and not only a link so that it is easy for the user to click on his mobile device.

Rows must be alternating in color. One with white background and one with light green background.

**5. Stats**

This screen appears when the Trophee button in the menu bar is clicked. Again in this screen, the menu bar should be at the top and not at the bottom (like in the Step #3). This is a table displaying some information that comes from a php script. When a user clicks on a row in green, some rows appears to show the values from the php script.

For the camera button and the settings button on the menu, those are not needed now. They will be part of the second phase, so we will do another project for that.

Amazon Web Services CSS HTML JavaScript Mobile App Development MySQL PHP Kejuruteraan Perisian Ujian Perisian Pengehosan Web Pengurusan Laman Web Ujian Laman Web XML

ID Projek: #2744695

Tentang projek