Technical Specification: Turk's Head Knot & Weave Planner

1. Overview

A browser-based, client-side utility designed to calculate and visualize the geometry of Turk's Head knots. It allows users to input bight and lead counts, generates a mathematical pattern matrix, and estimates total cord length requirements.

2. Shared Constraints Compliance

• Architecture: Single-file HTML5 application (HTML/CSS/JS).
• Storage: No localStorage, sessionStorage, or cookies. State is managed strictly in-memory.
• Design: Clean, modern, high-contrast light mode. No dark mode toggle.
• Compatibility: Optimized for mobile, tablet, and desktop. Sandboxed iframe safe.
• Performance: Zero-dependency (or CDN-based Tailwind CSS only). Fast load times.

3. Feature Set

• Dynamic Configuration: Real-time calculation of knot parameters based on numeric input for Bights and Leads.
• Matrix Visualization: An interactive grid or SVG canvas that renders the weave pattern based on the calculated inputs.
• Cord Length Estimator: An advanced input field for 'Mandrel Diameter' (what you are wrapping) and 'Cord Diameter' to output an estimated length of cord required.
• Print-to-PDF Friendly: A clean, simplified print stylesheet that hides UI controls and leaves only the calculated matrix and project details for physical workshop reference.

4. UI/UX Layout

• Header: Simple, centered title with a clear, descriptive subheading.
• Main Workspace (Grid System):
  • Left Column (Inputs): Grouped fields for 'Number of Bights' and 'Number of Leads' (integer sliders/inputs). Secondary fields for 'Mandrel Diameter' and 'Cord Thickness'.
  • Right Column (Results): A visual 'Pattern Matrix' visualization. A clear text output area for the 'Weave Pattern Sequence' (e.g., U1O1U1).
• Typography: Sans-serif, high legibility, clean headings.
• Color Palette:
  • Background: #FFFFFF (Pure White)
  • Primary: #2563EB (Vibrant Blue - for actions)
  • Secondary: #F3F4F6 (Light Gray - for card backgrounds)
  • Text: #111827 (Dark Gray/Black - for readability)
  • Borders: #E5E7EB

5. Technical Implementation Details

• State Management: A JavaScript object holding {bights: 3, leads: 5, mandrelDiameter: 0, cordDiameter: 0}.
• Logic:
  • The logic uses the standard knot theory formula: a Turk's Head is valid if bights and leads are coprime. The application should warn the user if inputs share a common factor.
  • The pattern sequence is generated as an array, mapped to a flex-box or CSS grid container to display the matrix.
• Animations:
  • Use transition: all 0.3s ease; on all input fields.
  • Subtle fade-in for the matrix visualization when values change.
  • No heavy canvas rendering; CSS grid manipulation is preferred for responsiveness.

6. Security & Sandboxing

• All inputs are sanitized before being used in DOM manipulation.
• No eval() or Function() constructors. Use strict math for calculations.
• All buttons are restricted to internal state triggers. No external navigation unless explicitly user-triggered with target="_blank".

7. SEO & Accessibility

• Semantic HTML5 (<main>, <section>, <article>, <aside>).
• ARIA labels for all input fields to ensure accessibility for screen readers.
• Meta description and title injected into the document head for search engine indexing.