Bingo Card Generator Technical Specification

1. Overview

A browser-based, client-side application designed to generate randomized, printable Bingo cards based on user-provided input. The tool focuses on ease of use, clean aesthetic, and high-quality print output.

2. Core Features

• Dynamic Content Input: A large textarea for users to input Bingo items (one per line).
• Configurable Settings:
  • Grid Size Selection: 3x3, 4x4, 5x5.
  • Free Space Toggle: Enable or disable a center "Free Space" square.
  • Card Title: Input field to name the bingo game (e.g., "Company Party Bingo").
• Randomization Engine: Logic to shuffle input words and distribute them randomly across grid cells.
• Preview and Interaction:
  • Live preview of the generated card.
  • Shuffle button to regenerate layouts without clearing data.
• Export/Print:
  • Integrated print styling via CSS @media print to ensure cards fit perfectly on standard A4/Letter paper.
  • Browser-native print trigger.

3. UI/UX Layout

• Header: Simple application title and clear subtitle.
• Configuration Sidebar/Panel: Located on the left (or top on mobile). Contains input fields, grid size dropdowns, and primary action buttons.
• Main Content Area: The "Canvas" where the generated Bingo card is displayed with a high-contrast, clean professional look.
• Modern Aesthetics:
  • Color Palette: Off-white background (#F9FAFB), crisp white card surfaces (#FFFFFF), deep slate text (#1F2937), and primary indigo/blue action buttons (#4F46E5).
  • Typography: Sans-serif, legible fonts (Inter or system stack).
  • Shadows: Soft, layered box-shadows to provide a subtle 3D pop for cards.

4. Technical Constraints & Directives

• Single File: All HTML, CSS, and JavaScript must be contained within one file. Use Tailwind CSS via CDN for rapid styling.
• No Storage: The application must not use localStorage, sessionStorage, or cookies. The state must be maintained exclusively in JavaScript variables. Data is purged on refresh.
• Sandboxed Compatibility: The app is designed for a restricted iframe environment.
  • Do not use alert(), confirm(), or prompt(). Create custom CSS/JS modals for user interactions.
  • All external links must have target="_blank" and rel="noopener noreferrer".
• Responsive Design: The input panel should stack vertically on smaller screens and move to a side-by-side view on desktop/tablet.
• Print Optimization: Add a dedicated print stylesheet that hides UI controls and centers the bingo card on the printed page.

5. Interaction Design

• Buttons: Hover effects with subtle scale transitions (1.02x) and background darkening.
• Transitions: Use CSS transition: all 0.3s ease-in-out for UI elements.
• Feedback: When a user clicks "Generate", provide visual feedback (e.g., button loading state or a subtle fade-in transition on the grid).

6. Implementation Strategy

• Step 1: Set up HTML structure with Tailwind CSS.
• Step 2: Implement the Input Data Parser (split by newline).
• Step 3: Develop the Grid Rendering function (DOM injection of table or grid elements).
• Step 4: Implement Print CSS (@media print) to strip non-essential UI and resize the grid to fill the printable area.
• Step 5: Polish design with refined padding, border-radius (0.75rem), and professional typography.