The site maintains your Movie Collection with the following functions: Adding movies. Deleting movies. Listing movies. The site contains two pages - Main and Listing. Include a background image of your choice for all the pages. Fill the entire page with the image (you can cover the page with one image or repeating images). Make sure the image is transparent enough for readability (you can use the same image for all the pages). Store the movies to localStorage. Each movie contains the following information: Data Items Id Transaction Date Movie Name Genre In theatres year Director Male Leading Actor Female Leading Actor Rating Comments Required Yes Yes Yes Yes Yes Yes Yes DataType String String String String Number String String String Number String Comments Generated by the application and use as Key Use current data - Data() -- -- 1 to 5 (low to high) Use Main Page (index.html): This page has header, content, and footer areas: The header contains: o An h2 "My Movie Collection" and includes Assignment #1 / Your Name / Your Student Number on the next line. o A link/button links to the Listing Page. The content area contains: o An HTML form that includes all the inputs as indicated above. O A SUBMIT button to add the movie to localStorage using the Id as key: Generate the Id and use it as key. Use current date as Transaction Date. A confirmation prompt is required before addition. Display a confirmation message and reset all input fields after addition. o A RESET button to reset all inputs fields. The footer includes Your Login Name / Your Campus. Listing Page: The Listing Page has header, content, and footer areas: The header contains: o An h2 "Movie Listing". o A link button links back to the Main Page. The content area contains two container elements stacked up on top of each other: o The top element contains: List the Ids and Movie Names of the items retrieved from localStorage. When an item is selected (with a click event) from the list, display the details of the selected movie in the bottom container. o The bottom container: Displays the movie details selected from the top container. A button to delete the selected movie from localStorage: A confirmation prompt is required before deletion. Clear movie details and display a confirmation message after deletion. The footer includes Your Login Name / Your Campus. How I will be grading... I will use Chrome's Toggle Device Bar for iPhone 12 Pro in Portrait mode. Remember, this is a mobile site so formatting and layout should reflect this; too much scrolling or whitespace will reduce your mark.