Create a single HTML+JS page

The page is a TV Listings table, top row with hours and left column with channel names. There must be two JS variables: “json_content” and “current_time”. The table is fed with a JSON string which is inside the variable “json_content”. There is no external feed, when we need to change the chart, we will change the JSON of that variable. The table also has an hour marker, a vertical line that shows the current hour. This hour is inside the variable “current_time”. The hour will be in the following format: HH:ii (24-hour format with leading zeros : Minutes with leading zeros). All the programs that are inside the “current_hour” are highlighted as shown in the design image. The minimum hour in the hour’s row is the one from the earliest tv program in the JSON and the last hour will be the end of the last tv show. The hours in the hour’s row are every half hour and the time marker has to position itself in the exact time regardless if it’s o’clock or half. When the page loads it has to parse the JSON and center the horizontal scroll to the hour given in “current_time”. - All the code (html, css, js…), unless the jQuery library (if you use it), has to be embed into the single .html file. - UTF-8 support. - Can't use images for the rows. - I’ve attached the design image. - I’ll give a sample of the JSON. - I require all the source code.