Technical Specification: Bonsai Trunk Chop & Taper Growth Estimator

Overview

A clean, professional-grade, browser-based utility for bonsai enthusiasts to estimate the timeline for trunk wound healing and taper development. The application provides a visual roadmap for tree refinement based on trunk geometry and species characteristics.

Core Features

• Species-Specific Growth Models: Pre-configured growth rate profiles for common bonsai species (e.g., Japanese Maple, Juniper, Pine).
• Geometry Input: Intuitive fields for entering trunk diameter and chop height.
• Environmental Modifiers: Toggles for growing environment (Greenhouse vs. Open Ground vs. Pot) to adjust growth velocity.
• Visual Healing Timeline: A dynamic, rendered progress bar illustrating the estimated callus formation stages.
• Cultivation Tips: Contextual advice based on the user's specific inputs regarding aftercare and structural planning.

Technical Constraints & Requirements

• Single File Architecture: All HTML, CSS, and JavaScript must reside in a single file.
• No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. The application must function purely in-memory. If the page is refreshed, the state is reset.
• No Dependencies: Use CDN links for Tailwind CSS and Lucide Icons. No build systems.
• Iframe Compatibility: The app must function within a null-origin iframe. No alert(), confirm(), or prompt() calls; implement custom modal UI components for user interaction.
• Responsive Design: Mobile-first approach using Tailwind grid/flex systems. The interface should be readable on devices ranging from smartphones to desktop displays.
• Light Mode Only: The aesthetic must be strictly light, clean, and professional. Use a palette of sage greens, clean whites, and slate grays to match the botanical theme.

UI/UX Layout

1. Header: Clean title with a minimalist icon (tree/growth imagery).
2. Input Section (Left/Top):
   • Species Selector (Dropdown).
   • Numerical Inputs: Trunk Diameter (mm), Chop Height (mm).
   • Growth Context: Growth Vigor (Slow/Moderate/Fast).
3. Dashboard Section (Right/Bottom):
   • Healing Timeline Gauge: A circular or linear progress visualization.
   • Estimated Date/Time display: "Estimated Closure: [X] Months".
   • Taper Scorecard: An assessment of how much taper potential is being realized.
4. Footer/Information Area: A brief disclaimer regarding the nature of biological estimations.

Design System

• Palette:
  • Primary: Sage Green (#7C9473)
  • Background: Off-White (#F9FAFB)
  • Cards/Modals: Solid White (#FFFFFF)
  • Text: Dark Slate (#1F2937)
  • Borders: Light Gray (#E5E7EB)
• Animations:
  • Subtle fade-ins for result rendering.
  • Smooth transition for input field focus states.
  • Micro-interactions on buttons using scale transformations (transform: scale(0.98)).

Implementation Directives for Developer

• SEO Focus: Ensure all H1, H2 tags are descriptive. Include semantic <article> tags for the FAQ section.
• Performance: Minimize DOM manipulation. Use a single JS object to manage application state and re-render only necessary parts of the DOM.
• Accessibility: Ensure high contrast for text and support for keyboard navigation.
• No External Links: All external documentation or resources must use target="_blank" and rel="noopener noreferrer".