Build a responsive webform (HTML5) using as reference a winform application (C#).

I need to convert a current windows application developed in C# to a fully responsive layout. This means, now I have a winform, developed in C# with a mssql db, so I want to migrate the functionality to a webform environment in HTML5 and mysql db. The application is basically an examination form for martial arts promotions for aspirant. The evaluation is conducted by an Evaluator which has to examine an aspirant, which want to apply for a specific level or rank. A evaluation form has a list of items, grouped in five different levels or ranks, so it's required to have an evaluator select a level for the aspirant, which immediately updates the view with the items defined in that level/rank, then he can start the evaluation by marking/unmarking the items (items score can be like a switch or checkbox type control). Automatically a calculation is performed to summarize the scoring obtained for the aspirant, which if is under 70% should be presented in red and if is up in green, as a sign that the aspirant passed the exam. The form must be stored in a mysql database, in order to be able to save/retrieve all the information: form id, level, items scored, as well as aspirant name, date, time, city, place, and evaluator name, total score, passing percentage. Is required to have an interface for the Evaluator and another one for the Administrator, where the stored scores can be viewed and generate reports, levels and items can be defined. The reports must print out information in pdf format for individual and group of selected evaluations. The interfaces must allow to configure logos or images of an event. A couple of images of the C# form is attached to have an idea of the functionality required, and also the winform app to get the feeling of the functionality of the application.