"""
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 UI for notes. a button allows adding a new note which appears as new text areat in the right pane. the notes in the text area should be persistent. 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 and click again to add that screenshow as a div in the right pane. images should persist in local storage. make sure that the webapp works on mobile. buttons 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 left pane. style whe whole application like an apple ii retro desktop in black and white with a toolbar menu. 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 pdf embed when screenshot region drag is occurring.