Free Bingo Caller Random Number Voice Announcer

Product Specification: Free Bingo Caller Random Number Voice Announcer

This application is a specialized utility designed to act as an automated 'Bingo Caller'. It enables users to run professional-grade bingo games directly in their browser without the need for physical equipment or external software. By leveraging the Web Speech API, it provides an auditory experience alongside a visual interface.

---

1. Core Features

• Web Speech API Integration: Automatically announces the generated number using the device's native text-to-speech engine.
• Game Logic: Supports customizable ranges (defaulting to 1-75, with an option for 1-90).
• History Tracking: An in-memory grid displays all previously called numbers in a visually distinct manner.
• Control Panel: Buttons for 'Next Number', 'Reset Game', and 'Pause Voice'.
• Visual Feedback: A large, prominent display for the current number with a subtle 'bounce' entrance animation.

2. UI/UX Specification

• Aesthetic: Clean, minimalist light-mode design. Use a palette of soft whites, light grays, and a high-contrast accent color (e.g., a vibrant indigo or emerald) for the primary 'Call Number' button.
• Layout:
  • Header: Title of the app and a 'Settings' icon (to configure speech rate/voice).
  • Hero Section: Centered large text displaying the current called number.
  • History Section: A responsive flex/grid panel underneath, showing called numbers (e.g., 1-75) that highlight as they are picked.
• Responsiveness: Use CSS Flexbox and Grid to ensure the history board stacks gracefully on mobile while remaining a wide grid on desktop.

3. Technical Implementation Rules

• Architecture: Must be a single-file .html application containing CSS and JS in internal <style> and <script> tags.
• Storage Constraints: STRICT PROHIBITION: Do not use localStorage, sessionStorage, cookies, or IndexedDB. State (e.g., calledNumbers = []) must be maintained in global JS variables only.
• Animations: Use CSS transitions (transition: all 0.3s ease-out;) for button hovers and layout shifts. Add a CSS keyframe animation for the 'current number' pop-in effect.
• Safety: Use target="_blank" rel="noopener noreferrer" for any required external links.
• Browser Compatibility: Ensure the app detects window.speechSynthesis availability and gracefully degrades (e.g., hides voice controls) if not supported.

4. Color Palette

• Background: #FFFFFF (Pure White)
• Surface: #F8FAFC (Slate 50)
• Primary Accent: #4F46E5 (Indigo 600 - for buttons)
• Text: #1E293B (Slate 800 - primary) and #64748B (Slate 500 - secondary)
• Active/Called Number Color: #10B981 (Emerald 500)

5. Developer Directives

• Use Tailwind CSS via CDN for styling consistency.
• Ensure all icons (e.g., speaker, reset) are implemented using an SVG icon set (e.g., Heroicons) to keep the file size minimal.
• Implement a clear 'In-Memory Only' indicator or warning if necessary, though the UI should simply implicitly handle this by being stateless.