Technical Specification: Epoxy Resin Flow & Viscosity Simulator

1. Overview

A browser-based, client-side utility that simulates the physical flow behavior of epoxy resin. The tool allows users to input viscosity (CPS), temperature, and volume to estimate flow speed, leveling time, and air-release characteristics.

2. Core Features

• Viscosity Inputs: Dynamic fields for entering resin CPS ratings (standard range: 100-5000+ CPS).
• Temperature Compensation: A slider or input field (Celsius/Fahrenheit) to calculate viscosity-temp correlation.
• Geometry Calculator: Simple inputs for pouring volume and cavity diameter/surface area to estimate total fill time.
• Real-time Results Dashboard: A dynamic readout showing "Estimated Flow Rate," "Estimated Leveling Time," and "Bubble Release Probability."
• Visual Indicator: A CSS-animated simulation that visually demonstrates the "viscosity" via a pouring drop animation speed, providing immediate visual feedback.

3. UI/UX Specification

• Aesthetic: Modern, clean, "SaaS" interface. High-contrast sans-serif typography (e.g., Inter or system UI).
• Color Palette (Light Mode Only):
  • Background: #FFFFFF
  • Surface/Card: #F8FAFC
  • Primary Action: #2563EB (vibrant blue)
  • Border/Divider: #E2E8F0
  • Text: #334155 (primary), #64748B (secondary)
• Layout:
  • Header: Sticky top section with a clean title and one-sentence description.
  • Main Tool Area: Two-column grid (desktop) or stacked (mobile). Left column: Input controls. Right column: Visual simulation and data output cards.
  • Results Area: Large, clean cards displaying the calculated data with soft box-shadows.

4. Technical Constraints

• Single File: All CSS, HTML, and Vanilla JavaScript must exist within a single .html file.
• State Management: Use in-memory variables only. No localStorage, sessionStorage, or cookies.
• Performance: Calculations must be near-instantaneous. Use requestAnimationFrame for the pouring visual simulation.
• No Dependencies: Use native DOM APIs. If icons are needed, use SVG paths directly in the HTML.
• Responsiveness: Fluid grid layout using CSS Flexbox/Grid to handle window resizing without horizontal scrolling.
• Accessibility: All form inputs must have descriptive <label> tags and ARIA attributes for screen readers.

5. Animation & Interactions

• Input Transitions: Smooth 0.2s transitions on input fields when hovered/focused.
• Value Updates: Results section should use a number-counting animation (e.g., counting from 0 to target value) when inputs change.
• Visual Simulator: A "drop" animation element where the CSS animation-duration is dynamically calculated based on the input viscosity, visually slowing down or speeding up the drip.

6. Implementation Directives

• Use target="_blank" rel="noopener noreferrer" for any external links.
• Custom Modal implementation: If error messages or help text is needed, use a hidden <div> with z-index and an overlay, toggled via JS classes.
• Ensure no browser default styles (use a lightweight CSS reset).
• Strictly adhere to a light-mode color scheme.