Online Matrix Multiplier & Linear Algebra Utility

A high-performance, browser-based linear algebra tool designed for students, engineers, and software developers. This utility allows users to input matrices of varying dimensions to perform core linear algebra operations in real-time.

1. Core Feature Set

• Dynamic Matrix Sizing: Intuitive controls to adjust the rows and columns (M x N) for both Matrix A and Matrix B.
• Arithmetic Operations:
  • Multiplication (with automatic compatibility checking).
  • Addition & Subtraction.
  • Transposition (for single matrix input).
• Instant Calculation: Real-time feedback as the user types, with a 'Calculate' button for complex operations.
• Input Validation: Built-in safeguards to prevent invalid operations (e.g., attempting to multiply incompatible dimensions).
• Copy to Clipboard: One-click functionality to copy result matrices in a readable format.
• Clear All: Reset functionality to quickly clear the workspace.

2. Technical Implementation Requirements

• Architecture: Single-file HTML/CSS/JS architecture. Use embedded CSS and JavaScript to ensure no external dependency or loading issues.
• Sandboxing Compatibility:
  • NO localStorage, sessionStorage, or IndexedDB usage. All state must exist within the JavaScript object scope.
  • NO external cookies.
  • Use strictly in-memory variables to handle matrix data.
• DOM Performance: Use efficient DOM manipulation for generating input grids to ensure the UI remains responsive even with larger matrix sizes.
• Frameworks: Pure Vanilla JavaScript (ES6+). Do not use React, Vue, or Angular.

3. UI/UX Design Specification

• Aesthetic: Clean, "SaaS" light-mode aesthetic. Utilize generous white space, subtle borders (#E5E7EB), and professional sans-serif typography.
• Color Palette:
  • Primary: #2563EB (Brand Blue) for primary actions.
  • Background: #FFFFFF (Page) and #F9FAFB (Matrix input containers).
  • Text: #1F2937 (Primary) and #6B7280 (Secondary).
  • Success: #10B981 (For validation messages).
  • Danger: #EF4444 (For error messages).
• Responsive Design:
  • Matrices should wrap into a vertical stack on small mobile screens.
  • Use Flexbox/Grid for the layout to ensure the workspace expands gracefully.
• Interactions: Use CSS transitions (0.2s ease-in-out) for all buttons and input focus states to provide a premium "click" feel.

4. UI Layout Structure

• Header: Simple, centered title and a brief descriptive sub-headline.
• Main Workspace:
  • Left side (or Top): Input section for Matrix A and Matrix B.
  • Middle: Operation toggle/selector.
  • Right side (or Bottom): Result display with a clear background.
• No-Popup Policy: All warnings (e.g., "Dimensions incompatible") must be displayed as custom <div> components within the UI flow, not browser alert() or prompt() calls.

5. Development Guidelines

• All calculations must be performed on the client-side using standard mathematical logic.
• Ensure the app is accessible, with proper labels for every input field for screen readers.
• Links to documentation or help (if needed) must include target="_blank" and rel="noopener noreferrer".