"""
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:
a webapp that consists of a left pane that displays a pdf and a right pane that contains a text area for writing notes. the notes in the text area should be persistent and associated with the loaded pdf filename. include a menubar at the top with a button for loading a new pdf and a button for taking screenshots. the screenshot button should wait for the user to click and drag a region. paste that screenshot region on the left into the text area on the right. the textarea text and images should persist over many sessions. make sure that the webapp works on mobile. have all event types handled correctly. use touchmove, touchstart, and touchend. have tablet stylus events handled correctly using pointer stylus events. double check that the selection mode is over the whole body of the application. style whe whole application like an apple ii desktop in black and white. double check your work and your design. use the native pdf viewer. do not use pdfjsLib. do not load external libraries. use native vanilla js. make sure to block pointer events on the embed when screenshot region drag is occurring