Create our web-app's front end with Material Design Light (Need Multiple Devs!)

Welcome Freelancers! We are a web app company building a new front end for our established timesheet app. This project is to build our new style and some basic functionality for our new front end using Google's Material Design Light style framework ([login to view URL]). The deliverable for this project is a single html file, javascript file, css file, and any required images. Using MDL, the html file should look like the attached images. Once you are complete, we will use the files you create as a template to implement most of the pages of our new interface. We are going to award several developers to create their own version of this project and pay all awarded developers who complete their work. Once the project is complete, we will compare each developer's works and choose the result we like the best as our new front end template. We will welcome successful developers in this project to bid on our future front-end projects, which includes building out all of the pages of our new front end. We are looking to eventually turn one developer from this project into a full time front end dev. If you are not looking to be full time, that is ok and we welcome you to compete for our business, but please specify that in your proposal. What is the "best" result for this project? Building this interface with MDL is easy, so the majority of our preference will be based on code style and architecture. We believe less is more, and we want any future projects to be completed as easily as possible. This template will be a foundation for our future front end development and we encourage you to think long term in your coding choices. How will this project eventually be used in our web app? We are looking for this project to create a style template that our developers can use to copy and paste code into our web app pages. Our web app is powered by our JSON REST API back-end. Detailed requirements: 1) All dynamic data must be set with a mock-API call to show how your template handles the animations required for loading data (please use google apps to reference your decisions). The real API calls will be developed in later projects, so the functionality you develop for this project just needs to act like it loading data so we can see how your template structures its javascript callbacks and animations. 2) You only need to implement one page in the pop-open menu at the left, accessible via the “hamburger button” at the top left. 3) Make all reused colors easily changeable at the top of the CSS file. This includes all button states, link states, and so on. 4) The column-row “grid” in the center of our example screenshots is the main way our app organizes data. We display details of grid rows on the darker bar at the right of each page; we call that bar the “info bar.” The grid we are working on for this front end streams large amounts of data (hundreds of thousands of rows) to the front end. As this grid scrolls, it loads new data. Bonus points if you make some callbacks and loading animations for this scroll loading. 5) The info bar is closed by default. Clicking a grid row opens the info bar. Additionally, the (i) icon at the top center toggles the info bar. 6) At screen width of 1440px and smaller the info bar “pops over” the grid view. At larger resolutions, the info bar attaches to the side of the grid. 7) The info bar scrolls independently of the grid. Reference Google Drive for similar functionality. 8) The minimum width of the page is 1000px. Ensure that on smaller screen devices, zooming out does not effect formatting (eg, the viewport scale is appropriate and the page does not have hanging whitespace). If you have any questions about the project details or otherwise need clarification to create your proposal, ask away. I will be available GMT timezone business hours. We are looking to working with you!