Stained Glass Solder Weight Estimator

Overview

A clean, professional, and mobile-responsive browser-based tool designed to help stained glass artists estimate the quantity of solder (in grams or ounces) required for their projects. Users can choose between Copper Foil (length-based) and Lead Came (joint-based) methodologies.

Technical Specification

• Architecture: Single HTML5 file containing all CSS and JavaScript.
• Storage: NO localStorage, sessionStorage, or cookies. The state is strictly transient.
• Compatibility: Must run in a sandboxed iframe. No alerts/prompts allowed (use custom modal overlays for UI feedback).
• Responsive Design: Mobile-first grid layout that scales elegantly to desktop monitors.

UI/UX Layout

1. Header: Clear, minimal title and a brief introductory text.
2. Configuration Panel:
   • Toggle: [Copper Foil] vs. [Lead Came].
   • Copper Foil Inputs: Total seam length (inches/cm), estimated bead width.
   • Lead Came Inputs: Number of joints, average solder per joint.
   • General Inputs: Waste factor percentage, solder alloy density selector.
3. Calculate Button: Primary call-to-action button with a soft shadow and hover transition.
4. Results Section: Real-time display showing total grams, total ounces, and a helpful reminder about waste factors.
5. Footer/Notes: Purely informational text—absolutely no external links or footer-based navigation.

Design System

• Palette: Use a clean, vibrant aesthetic. Primary blue (#2563eb) for buttons, slate (#f8fafc) for background sections, and dark slate (#334155) for text.
• Typography: Sans-serif fonts (e.g., Inter, system-ui) for legibility.
• Animations: Subtle entry transitions for the results card (fade-in, slide-up). Button hover states should show a slight darkening and lift effect.

Calculation Methodology

• Copper Foil: (Length * BeadWidth * Depth * Density) * (1 + WasteFactor)
• Lead Came: (JointCount * SolderPerJoint) * (1 + WasteFactor)

Developer Directives

1. No External Dependencies (Build Step): Use CDNs for Tailwind CSS and Icons if necessary, but keep the core logic in a <script> tag within the HTML.
2. Sandboxing: Strictly avoid localStorage. Ensure the UI handles form inputs and results dynamically within the DOM.
3. Responsiveness: Use Tailwind flex/grid classes to ensure inputs stack vertically on mobile and align side-by-side on desktop.
4. Performance: Minimal footprint. Load time should be under 500ms on 4G connections.
5. Aesthetics: Ensure the output section looks distinct, possibly using a slightly different background color (e.g., white on light slate) to highlight the final result.