Technical Specification: Free Online PDF Page Rotator

Overview

A high-performance, client-side web application designed to allow users to visually rotate individual pages of a PDF document. By utilizing pdf.js for rendering and pdf-lib for manipulation, the app ensures that no data leaves the user's browser, providing maximum privacy and speed.

Core Feature List

• Drag-and-Drop Interface: Intuitive file upload zone with clear visual cues.
• Visual Thumbnail Preview: Render every page of the PDF as a high-quality thumbnail grid.
• Per-Page Rotation: Independent 90-degree clockwise and counter-clockwise rotation controls for every page.
• Batch Processing: Quick controls to rotate all pages or revert specific changes.
• Instant PDF Rebuilding: On-the-fly reconstruction of the PDF file with updated rotation metadata.
• Secure Download: Blob-based download mechanism that triggers after processing without requiring server-side storage.

UI Layout

• Header: Clean, centered title with a descriptive tagline and an "About" section describing the tool's privacy-first approach.
• Main Tool Area:
  • Upload State: Large, dashed-border drop zone with an icon and CTA button.
  • Edit State: A responsive grid view showing page thumbnails. Each thumbnail contains its page number, a live preview, and rotation buttons overlaying the image.
• Global Controls: A sticky top-bar containing "Download", "Clear", and "Reset" actions.

Color Palette (Light Mode Only)

• Primary: #2563eb (Vibrant Blue) for primary buttons and active states.
• Background: #f8fafc (Light Gray) for the main container background, #ffffff (White) for cards.
• Text: #1e293b (Slate) for high readability, #64748b (Muted Slate) for secondary labels.
• Accent: #e2e8f0 (Light Border Gray) for grid separators and card borders.
• Feedback: #22c55e (Success Green) for completion state.

Animations & Micro-interactions

• Thumbnail Transitions: Smooth opacity fade-in when PDF pages are rendered.
• Button Interactions: Scale-down effect on click (98% scale) to provide haptic-like feedback.
• Rotation Animation: CSS transform transition (300ms ease-in-out) when the user clicks the rotate button on a thumbnail.

Critical Development Directives

• Architecture: Must be a single index.html file using CDNs for pdf.js and pdf-lib.
• Storage: NO localStorage, sessionStorage, or cookies. Maintain document state in JS memory objects only.
• Sandbox: Assume a null-origin iframe environment. Use Blob and URL.createObjectURL for file handling.
• Aesthetic: Use a modern, SaaS-inspired design language (Tailwind CSS suggested). High padding, rounded corners (8px-12px), and soft, consistent box shadows.
• Responsiveness: Ensure the thumbnail grid adjusts from 1-column on mobile to 4+ columns on desktops.