Chainmaille European 4-in-1 Sheet Expansion Calculator

A professional-grade, client-side tool designed for chainmaille artisans to plan projects efficiently. This application allows users to define the parameters of their weave and instantly receive material requirements.

Core Features

• Precision Inputs: Fields for Ring Inner Diameter (ID) and Wire Diameter (WD).
• Sheet Sizing: Define sheet size by total ring count (width x height) OR physical dimensions (inches/mm).
• Material Estimation: Select common metals to generate an estimated final project weight.
• Dynamic Results: Real-time updates as users adjust input parameters, displaying total ring count, aspect ratio, and estimated weight.
• Responsive Preview: A visual representation of the grid layout logic to assist with orientation planning.

Technical Specifications

• Architecture: Pure Vanilla HTML5, CSS3, and JavaScript. No external frameworks or build steps.
• Stateless Operation: Absolutely no localStorage, sessionStorage, cookies, or backend database calls. All calculation logic is handled in-memory and resets on page refresh.
• Responsive Layout: A mobile-first design using Flexbox and CSS Grid. The UI will stack vertically on mobile and transition to a side-by-side dashboard view on desktop.
• Performance: Instant calculation latency using optimized mathematical formulas.

UI/UX Design

• Aesthetic: A modern, clean SaaS look featuring a vibrant primary accent color (e.g., #2563eb - Electric Blue) against a soft off-white background (#f9fafb).
• Typography: Sans-serif, high-legibility fonts (e.g., Inter or system-ui).
• Feedback: Use subtle micro-interactions for input focus and button hovers. Results should be displayed in high-contrast cards to ensure readability.
• Modals: Any alerts or information dialogues will be custom-built using HTML5 <dialog> elements or styled <div> overlays to maintain sandbox compatibility and aesthetic consistency.

Implementation Guidelines for Developer

1. Do NOT use localStorage: Ensure all input values exist only in the DOM or JS state variables.
2. CDN Usage: Use Tailwind CSS via CDN for styling to maintain a single-file architecture. Use Lucide Icons via CDN for iconography.
3. Accessibility: Ensure all form inputs have associated <label> tags and appropriate aria-labels.
4. No Popups: Replace native alert() or confirm() with non-blocking UI components.
5. Security: Ensure all external links to material suppliers or documentation include target="_blank" and rel="noopener noreferrer".