Brass Instrument Mute Pitch Deviation & Tuning Calculator

Overview

A professional-grade, browser-based utility for brass musicians to track, calculate, and manage intonation offsets caused by different mute types. The tool assists players in identifying exactly how much to pull or push their tuning slides when switching between straight, cup, harmon, bucket, or plunger mutes.

Technical Constraints & Requirements

• Architecture: Must be delivered as a single, self-contained HTML file. Include all CSS/JS internally or via CDN links.
• Sandbox Environment: The app runs in a null-origin iframe. NO localStorage, sessionStorage, or IndexedDB allowed. State must be handled strictly in-memory.
• Aesthetic: Modern, clean, "SaaS" light-mode design. Use a professional color palette (Soft Indigo, Slate Gray, Crisp White). NO dark mode toggles.
• Performance: Must be responsive, fast, and accessible on mobile devices for use in practice rooms or on stage.

Feature Set

1. Instrument Selector: Dropdown to select instrument (Trumpet, Cornet, Trombone, Euphonium, French Horn).
2. Mute Database: Preset list of standard mute types with default average offset profiles.
3. Manual Offset Input: Numeric input fields (in cents) for players to enter their observed tuner data.
4. Dynamic Visual Gauge: A CSS-animated needle gauge that visually represents the calculated shift (Sharp vs Flat).
5. Adjustment Card Generator: A "Print Ready" view that generates a simplified, high-contrast summary table showing: Instrument | Mute | Pitch Adjustment Needed (mm). This can be saved as a PDF using the browser's print function.
6. Live Session Table: An in-memory table to store and compare multiple mute settings for a specific performance setlist.

UI Layout

• Header: Clean, minimalist title with a short description.
• Main Tool Area: A two-column layout.
  • Left Column: Configuration inputs (Instrument type, Mute selection, Measured offset).
  • Right Column: Visual Gauge and calculation results.
• Footer: None.

Visual Design & Animations

• Colors: Background #FAFBFC, Cards #FFFFFF with soft shadows (0 4px 6px -1px rgba(0, 0, 0, 0.1)), Text #1F2937, Accent #4F46E5 (Indigo).
• Animations:
  • Gauge needle should transition smoothly using transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1).
  • UI elements should fade in on load.
  • Input fields should have a focused ring effect using the indigo primary color.

Developer Directive

Follow strict browser security guidelines. Do not use alert(), confirm(), or prompt(). Create custom modal components for user interaction. Ensure all links open in new tabs with rel="noopener noreferrer".