Tournament Bracket Maker & Visualizer

Overview

A clean, professional-grade, single-file browser application designed to create and manage single-elimination tournament brackets. The tool allows users to input team names, generate a visual bracket grid, and track tournament progression dynamically.

Key Features

• Dynamic Bracket Scaling: Supports tournament sizes of 4, 8, 16, 32, and 64 teams with auto-generated visual tree structures.
• Interactive Input: Sidebar interface for entering team names, which automatically populate the bracket nodes.
• Visual Progression: Simple click-to-advance functionality for winners to move to the next round.
• Print-Friendly Export: Optimized CSS print styles to ensure the bracket renders perfectly on standard A4 or Letter paper without browser artifacts.
• Responsive Interface: A horizontal-scrolling canvas for large brackets (e.g., 64 teams) to maintain readability on smaller screens.
• Custom Styling: Clean, modern aesthetic using high-contrast borders and clear typography.

UI/UX Design Specification

• Layout:
  • Header: Contains the App Title, a "Reset" button (with confirmation modal), and a "Print Bracket" button.
  • Sidebar (Left/Top): Fixed-width panel for tournament size selection and an expandable list of input fields for team names.
  • Main Canvas: A scrollable area displaying the visual bracket tree. Each match node is a card with two team labels.
• Color Palette (Light Mode Only):
  • Primary: #2563eb (Royal Blue) - Used for buttons and active match highlighting.
  • Background: #ffffff (White) and #f8fafc (Ghost White) for sections.
  • Text: #1e293b (Slate) for high readability.
  • Borders/Lines: #cbd5e1 (Light Slate) for connector lines and grid borders.
• Animations/Micro-interactions:
  • Smooth fade-in transitions when the tournament size changes.
  • Subtle hover states on match cards to indicate interactive potential.
  • Soft scale/pop effect when a winner advances to the next round.

Technical Implementation Directives

• Single File Architecture: Combine all HTML, CSS, and JS into one file. Use CDNs for Tailwind CSS to maintain the "SaaS" aesthetic without build tools.
• No Persistent Storage: Strictly prohibited from using localStorage, sessionStorage, or cookies. State must be handled in memory via JavaScript objects.
• Iframe Compatibility:
  • Do not use window.alert() or window.prompt(). Use custom HTML modals for all user interactions (e.g., confirming a reset).
  • Ensure no external calls are made that trigger cross-origin restrictions.
  • All links must use target="_blank" and rel="noopener noreferrer".
• Print Capability: Utilize @media print CSS rules to hide the sidebar, header, and inputs, leaving only the bracket SVG/canvas visible for clean document output.
• Performance: Use vanilla JavaScript DOM manipulation for updating the bracket tree to ensure zero lag, even with 64 teams.