Origami Geometric Rose Grid Calculator

Overview

This single-file, browser-based utility allows origami enthusiasts to calculate, visualize, and print the specific grid patterns required to fold a Kawasaki Rose. It eliminates manual measurement errors, providing a precise roadmap for the pre-creasing phase of the model.

Core Features

• Dynamic Grid Calculator: Calculates exact crease intervals based on user-inputted paper dimensions and desired grid density (e.g., 16, 32, 64 divisions).
• Unit Converter: Seamlessly toggle between inches and centimeters.
• SVG Preview Canvas: An interactive, responsive SVG visualizer that draws the grid in real-time as users adjust parameters.
• Print-Ready Mode: A dedicated view that hides UI elements to allow users to print their calculated grid for reference while folding.
• Precision Settings: Options to calculate margins or account for paper thickness during the folding process.

UI/UX Layout

• Header: Clean, minimalist title with a short description.
• Main Tool Area (Split View):
  • Left Sidebar: Input forms for paper size, grid density, and unit selection. Features a 'Calculate' button and 'Print' trigger.
  • Right Viewport: The SVG canvas visualizing the paper grid. It features smooth zooming and panning interactions using CSS transitions for a high-end feel.
• Modal System: Custom-built HTML modals for error messages or user guidance, avoiding intrusive browser alerts.

Technical Specifications & Constraints

• Architecture: One single .html file containing all CSS and JavaScript. No external build dependencies.
• Performance: Zero-dependency Vanilla JS for all calculations to ensure instant feedback.
• Sandbox Compatibility:
  • Absolutely NO localStorage or sessionStorage. All calculation states are held in reactive variables.
  • NO alert(), confirm(), or prompt(). Use custom-styled div overlays for all notifications.
  • Responsive Design: Mobile-first approach. The split view collapses into a stacked column layout on screens below 768px.
• Styling:
  • Color Palette: Pristine White (#FFFFFF), Soft Slate Gray (#F8FAFC), Vibrant Blue accents (#3B82F6) for grid lines, and Dark Charcoal (#1E293B) for text.
  • Typography: Inter or System-UI sans-serif stack for maximum readability.
  • Transitions: All interactive elements (hover states, modal entry) must use standard 200ms ease-in-out transitions.

Developer Directive

Ensure that the final output is a completely self-contained file. All icons should be implemented using simple SVG paths to avoid external image requests. Use strict rel="noopener noreferrer" on all link elements. The tool must prioritize accessibility and clear visual contrast throughout.