bright-application

As a Frontend Developer, I want to implement the Home page based on the existing JSX design (Home v2) so that users can access the calculator interface instantly. The Home page should showcase the floating panel calculator interface with a gradient background that subtly shifts colors, accent color (#FF6F61) prominently used on buttons, and 3D press effect animations. It serves as the entry point for both Basic Users and Guest Users per the user flow (Home: Access Calculator → Calculator: View Interface).

As a Frontend Developer, I want to implement the Calculator page so that users can perform basic arithmetic operations (addition, subtraction, multiplication, division) plus one additional operation (e.g., square root or percentage). The page should include: a display area with typewriter animation for inputs/results, number and operation buttons with 3D press effects and glow-on-hover (#FF6F61), a clear button that pulses gently on hover, the additional operation button with a unique spinning animation, and full keyboard input support. Follows the user flow: Enter Numbers → Select Operation → Input More Numbers → View Result → Clear Display → loop back.

As a Frontend Developer, I want to connect the Calculator page to the backend arithmetic API so that user inputs (including the additional operation) are processed via the FastAPI service and results are displayed seamlessly with typewriter animation. This includes handling API errors (e.g. division by zero) with appropriate user-facing messages and maintaining a responsive UX during API calls.

As a Frontend Developer, I want to ensure the calculator application meets WCAG 2.1 accessibility standards so that all users, including those with disabilities, can use the application. This includes proper ARIA labels on all buttons (including the new additional operation button), keyboard navigation support, sufficient color contrast ratios for the chosen palette (#E8F0F2, #2C3E50, #FF6F61), and screen reader compatibility.