Coordinate System Conversion and Visualization Tool

Overview

A high-performance, single-file browser application that allows users to convert Polar coordinates $(r, \theta)$ to Cartesian coordinates $(x, y)$ instantly. The app includes a dynamic visualization engine that renders the calculated point on a responsive coordinate plane.

Core Features

• Dual-Mode Input: Toggle between Degrees and Radians for the theta ($\theta$) input.
• Live Conversion Engine: Instant calculation of $(x, y)$ as the user types.
• Interactive Canvas Graph: An HTML5 <canvas> based coordinate plane that renders the calculated $(x, y)$ point relative to the origin $(0,0)$.
• Coordinate History: An in-memory list tracking recent conversions during the session.
• Precision Controls: Adjustable decimal precision (rounding) for calculation results.
• Accessibility: High-contrast design, clean typography, and screen-reader optimized layout.

UI/UX Specification

• Layout Structure:
  • Header: Clean, minimalist title without branding.
  • Primary Container: A central "Card" layout with a max-width of 800px.
  • Left/Top Column (Input): Input fields for Radius ($r$) and Angle ($\theta$). A toggle switch for Degrees/Radians. A 'Calculate' button (or real-time update).
  • Right/Bottom Column (Output/Graph): A clean, SVG or Canvas-drawn coordinate system plot (X/Y axis) with a red dot representing the point.
  • Result Display: Large, easy-to-read text for the output $x$ and $y$ values.
• Aesthetic Guidelines (Light Mode Only):
  • Background: Crisp #ffffff or subtle off-white #f8fafc.
  • Primary Accents: Professional blue (#2563eb) or slate (#475569) for buttons and active states.
  • Typography: System-stack sans-serif (Inter/Roboto) for high legibility.
  • Shadows: Soft, diffused shadows (rgba(0,0,0,0.1)) on containers to create depth without clutter.

Animations & Transitions

• Micro-interactions: Subtle scaling effects on buttons when hovered.
• Canvas Plotting: Smooth fade-in or sliding animation for the coordinate point appearing on the graph.
• Value Updates: Digital numbers (if JS allows) or simple transition effects when result values change.

Technical Directives for Developer

• Single File: All HTML, CSS, and Vanilla JS must be inside ONE .html file. No build steps (Webpack/Vite/Babel) allowed.
• Storage Constraint: Absolutely NO localStorage, sessionStorage, cookies, or IndexedDB. Use simple JavaScript variables for state management.
• Sandboxed Compatibility: Assume the app will be injected into a sandboxed iframe. Do not use alert(), prompt(), or external tracking pixels.
• External Resources: Use only CDN-links for lightweight assets (e.g., FontAwesome for icons, Tailwind via CDN for utility classes).
• Responsive Design: Use CSS Flexbox/Grid. The coordinate canvas must resize relative to the container width to prevent layout overflow on mobile.
• Performance: Ensure mathematical calculations are handled via Math library with basic checks for edge cases (e.g., divide by zero).