Cake Tier Serving Size & Cutting Guide Generator

Overview

A specialized, browser-based utility for bakers, event planners, and catering staff to calculate precise serving counts and generate standardized cutting diagrams for round and square cake tiers.

Core Features

• Interactive Shape Selection: Toggle between 'Round' and 'Square' cake geometries.
• Dynamic Size Input: Users select cake diameter or width (e.g., 4" to 14") with real-time serving updates.
• Portion Style Selection: Toggle between 'Wedding' (1"x2") and 'Party' (1.5"x2") industry-standard cut sizes.
• Visual Cutting Diagram: An auto-generated SVG/Canvas diagram overlay showing professional slicing paths.
• Print-to-PDF Functionality: A clean, CSS-optimized print stylesheet to turn the generated guide into a physical or digital reference sheet.
• Calculation Summary: A clear breakdown of total surface area and total estimated portions.

UI/UX Design Specification

• Aesthetic: Clean, minimalist 'SaaS' look. Pure white and soft gray backgrounds with high-contrast slate-blue typography.
• Layout:
  • Header: Simple, descriptive H1 title with a brief explanation of the tool.
  • Control Panel (Left/Top): Dropdowns for shape and size, toggle switches for portion types.
  • Preview Area (Right/Bottom): Displays the cutting diagram and total serving count prominently.
• Color Palette:
  • Primary: #2563eb (Royal Blue) for buttons and primary actions.
  • Background: #f8fafc (Off-white) to reduce glare.
  • Text: #1e293b (Slate) for readability.
  • Accent: #e2e8f0 (Light Gray) for dividers and borders.
• Animations: Subtle transition effects on hover for inputs and a smooth 'fade-in' when the diagram updates after a parameter change.

Developer Technical Directives

• Architecture: Single-file HTML5/CSS3/Vanilla JavaScript. No external build tools.
• State Management: All state must be handled in memory (JavaScript variables). Do not use localStorage or sessionStorage.
• Sandboxing: Do not use alert() or confirm(). Build custom, branded-style modals using <div> and CSS for any user interactions.
• Responsive Design: Use CSS Flexbox/Grid to ensure the Control Panel and Preview Area stack vertically on mobile and side-by-side on desktop.
• Performance: Use requestAnimationFrame for diagram updates to ensure fluid performance without lag.
• Printing: Use @media print CSS rules to hide non-essential elements (like UI controls) and ensure the cutting diagram prints clearly on a single page.