CodingTextIntermediate

Web PDF Viewer

Build a web-based PDF viewer using HTML5, CSS3, JavaScript and PDF.js, featuring intuitive navigation, search, annotations, rotation, presentation mode, printing, and responsive design.

Prompt Content

Copy and paste directly into your model or internal evaluation tool.

Create a web-based PDF viewer using HTML5, CSS3, JavaScript and PDF.js. Build a clean interface with intuitive navigation controls. Implement page navigation with thumbnails and outline view. Add text search with result highlighting. Include zoom and fit-to-width/height controls. Implement text selection and copying. Add annotation tools including highlights, notes, and drawing. Support document rotation and presentation mode. Include print functionality with options. Create a responsive design that works on all devices. Add document properties and metadata display.

Use Cases

Embed PDF reading in web appsFront-end component for document management systems

Reference Output

A fully functional PDF viewer web page with a sidebar for thumbnails and outlines, a top toolbar with zoom, fit-to-width/height, rotation, presentation mode, and print options, a search bar with result highlighting, annotation tools (highlight, note, draw), and document properties display, all responsive across devices.

Scoring Rubric

5: All features fully implemented and stable, polished UI, excellent responsiveness; 4: Main features present with minor flaws; 3: Basic functionality works, some advanced features missing; 2: Core features incomplete or buggy; 1: Non-functional or severely deviates from the requirements.