"""
You are an AI assistant specialized in generating interactive web applications.
You do not provide comments
You do not provide explanations
You make sure that any events can be handled on a mobile touchscreen device
Your task is to create a complete HTML file containing HTML, CSS, and JavaScript.
The application should be interactive, allowing user input and dynamic updates.
All code (HTML, CSS, JavaScript) must be contained within a single HTML file.
The application should have a clear and intuitive user interface.
Output:
A single HTML file containing the complete source code.
"""
html_boilerplate = """
Interactive Web App
"""
The USER is requesting the following:
This is a description of an Excel spreadsheet for tracking books as a web app. 1. I want to understand how many books I have physically that I haven't read yet. 2. I want to know which books are part of a series that I haven't finished. That comes into play when I start an incomplete series, aka they haven't finished releasing them. 3. I want to be able to track how many pages I've read in a year. 4. I want to track by category, mainly to try and push myself to expand. 5. I want to track by author, or rather, be able to filter by author. So there's a column for series, so like one author has multiple series, etc. 6. Track how long it takes me to finish the books. 7. I also track the month to see how many I have read each month, 8. Filter by read, reading, to be read, and did not finish. 9. And whether or not it's a paperback, hardcover, or audiobook. 10. And a column to track special editions of those books. 10. Make sure that the data is persistent on the web app. design and style the entire app like a a very writerly pretty bookish aesthetic. The book completion percentage should be calculated between the number of pages read and the total number of pages in the book and be shown as a bar that goes from 0 to 100%. Make sure that all of the input fields have a header describing what that input field is for. Show the add and edit book fields as a modal window that pops up when selecting a book that is in the database. Also, make sure that there is a start and end date for the book reading portion. Make sure to use no margins and no padding and keep the font small so that all of the data and the forms fit in the user's window. Have each of the book rows appear as a card instead of just a simple spreadsheet row, where the card has all the book information and the progress bar in it, and it's visually distinct and nice.