Product Specification: Interactive CSS Triangle Generator

1. Product Summary

A web-based, zero-dependency tool for frontend developers to visually generate CSS triangle code using the classic border-width technique. This tool provides an intuitive interface to configure the direction, dimensions, and color, outputting clean, production-ready code.

2. Core Features

• Visual Preview Panel: A real-time rendering box that displays the triangle as settings are adjusted.
• Dynamic Control Sliders: Interactive controls for height, width, and border thickness.
• Direction Selector: A set of buttons allowing the user to select the triangle orientation (Up, Down, Left, Right, Top-Left, Top-Right, Bottom-Left, Bottom-Right).
• Color Integration: An integrated color picker for selecting the triangle fill.
• One-Click Copy: A "Copy CSS" button that triggers a toast notification (built-in UI component) upon successfully copying the generated snippet to the clipboard.
• Code Output: A syntax-highlighted code block that updates instantly.

3. Technical Architecture

• Architecture: Single-file HTML (Vanilla JS/CSS). Use CDN for Tailwind CSS for rapid styling.
• Sandboxing:
  • No Storage: Application state is kept entirely in-memory using JavaScript variables. Do not use localStorage, sessionStorage, or IndexedDB.
  • No Popups: Custom modal/toast UI for success messages; do not use browser alerts.
• Responsive Design: The app should use a two-column layout on desktops (Controls on left, Preview/Code on right) and a single-column layout on mobile devices.

4. UI/UX Specification

• Aesthetic: Modern, clean, professional SaaS style. High contrast, generous whitespace, and rounded corners (e.g., rounded-xl).
• Light Mode Only: The background should be a subtle off-white (bg-gray-50) with white panels (bg-white) for the main content area, featuring subtle shadows (shadow-sm, shadow-md).
• Transitions: Apply smooth CSS transitions (transition-all, duration-200, ease-in-out) to the triangle preview when settings are changed.
• Icons: Use a standard icon set (e.g., Heroicons or Lucide via CDN) for intuitive control representation.

5. Color Palette

• Primary: Indigo/Blue (#4f46e5) for active states, buttons, and focused inputs.
• Background: Soft Gray/White (#f9fafb, #ffffff).
• Text: Dark Gray/Slate (#1f2937) for headings, (#4b5563) for body text.
• Accents: Muted borders (#e5e7eb).

6. Implementation Directives

• Use document.getElementById for element manipulation.
• Generate the CSS snippet string dynamically based on the current state object.
• Ensure accessibility: Use appropriate aria-labels for all interactive buttons and inputs.
• All external documentation or links must include target="_blank" and rel="noopener noreferrer".