Pixel to REM and EM Conversion Utility

Overview

A high-performance, single-file browser utility designed to help web developers and designers accurately convert pixel values to relative REM and EM units. The application focuses on speed, accessibility, and precision.

Feature Set

• Real-time Conversion: Instant calculation as the user types. No "Convert" button required.
• Dynamic Base Font Input: Allows users to define the base font size (defaulting to 16px, the browser standard).
• Dual Output Modes: Displays values for both REM and EM simultaneously.
• Quick-Copy Functionality: Single-click copy for result values to improve developer workflow.
• Reference Table: An optional, expandable table showing standard pixel-to-rem mappings (e.g., 8px, 12px, 16px, 24px, 32px, etc.) for quick reference.
• Responsive Design: A clean, vertical-stacking layout that works perfectly on mobile devices, tablets, and desktop browsers.

UI/UX Design

• Aesthetic: Clean, minimalist "SaaS" aesthetic. Light background (#ffffff), crisp borders, and subtle box shadows (0 4px 6px -1px rgba(0, 0, 0, 0.1)).
• Color Palette:
  • Primary: Indigo (#4f46e5) for primary action buttons and focus states.
  • Text: Slate (#1e293b) for headings, Gray (#64748b) for secondary text.
  • Background: Off-White (#f8fafc) for the container, pure white (#ffffff) for cards.
• Typography: Sans-serif, human-readable stack (Inter, system-ui).
• Interactions: Subtle scale transitions on hover for inputs and buttons. Smooth fade-in for calculated results.

Developer Directives & Constraints

1. Strictly Single File: All CSS and JavaScript must be embedded within a single .html file. Use <style> and <script> tags.
2. No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. The state must live entirely in memory (JS variables) and clear on refresh.
3. Sandboxed Compatibility: Ensure no pop-ups (alert(), confirm(), prompt()) are used. Use HTML-based modal overlays if necessary.
4. Light Mode Only: Do not implement a dark mode or theme switcher. Force a light theme.
5. Responsive: Use CSS Grid/Flexbox to ensure the input cards wrap gracefully on smaller viewports.
6. No Dependencies (Preferred): Keep third-party libraries to an absolute minimum (e.g., only include a CDN link for a specific icon font like Lucide or FontAwesome if necessary, or better yet, use SVG strings for icons to maximize performance and security).