Free Ukulele Fret Marker & Inlay Spacing Calculator

Technical Specification: Ukulele Fret Marker & Inlay Spacing Tool

Overview

A high-precision, client-side utility for ukulele luthiers and DIY instrument builders. This tool calculates the exact linear position of fret markers (inlays) on a fretboard based on a user-defined scale length.

Core Features

• Live Calculation Engine: Instant update of marker positions upon scale length change.
• Unit Toggle: Seamless switching between Millimeters (mm) and Inches (in).
• Preset Scale Selectors: One-click presets for Soprano, Concert, Tenor, and Baritone scales.
• Visual Fretboard Preview: A dynamic, responsive SVG-based visual representation of the fretboard showing where dots/inlays fall.
• Clean Export Mode: A 'Print View' that generates a high-contrast guide table for use in the workshop.
• Custom Marker Selection: Ability to toggle common marker locations (3, 5, 7, 10, 12, 15, 17).

UI Layout

• Header: Clean, centered title with a 'Printable Layout' action button.
• Configuration Sidebar/Panel:
  • Input field for 'Scale Length'.
  • Radio toggles for units (mm/in).
  • Checkbox group for selecting which fret markers to display.
• Main Display Area:
  • Top: A horizontal visualization of the fretboard with nodes indicating inlay placement.
  • Bottom: A responsive table displaying exact measurements from the nut for each selected marker.

Design & Aesthetics

• Color Palette: Professional, light-mode only.
  • Primary Background: #F9FAFB (Cool Gray 50)
  • Cards/Surface: #FFFFFF (Pure White)
  • Primary Accent: #2563EB (Vibrant Blue) for buttons and active states.
  • Text: #1F2937 (Slate 800) for high readability.
  • Border/Accents: #E5E7EB (Gray 200).
• Typography: Sans-serif, human-readable (Inter or system-stack).
• Micro-interactions:
  • Smooth hover scaling on input fields.
  • Linear transition animations for table row updates.
  • High-quality box-shadows on cards (depth-based, 0px 4px 6px -1px rgba(0,0,0,0.1)).

Critical Developer Directives

1. State Management: Use only in-memory JavaScript variables. Do NOT attempt to persist data using localStorage or cookies. The state should reset if the user refreshes the page.
2. Performance: Calculations must occur in a requestAnimationFrame or a fast-executing debounced function to ensure the UI remains snappy.
3. Formatting: Ensure the output table is fully responsive. For mobile, use a stack-style card layout; for desktop, use a clean data table.
4. Iframe Compliance: Ensure all styling is contained within the single file. No external stylesheets that require separate requests if possible (use <style> blocks for the main CSS).
5. No Alerts: Use a custom-built modal component (hidden by default) if you need to display warnings or instructions.